:root{--primary-color: #2563eb;--secondary-color: #64748b;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--background-color: #f8fafc;--surface-color: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--border-color: #e2e8f0;--border-radius: 8px;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--transition: all .2s ease-in-out;--card-bg: #ffffff;--input-bg: #f1f5f9;--hover-bg: #f8fafc;--text-muted: #a0aec0;--border-muted: #edf2f7}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-primary);background-color:var(--background-color);min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{background:var(--surface-color);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}.header .container{display:flex;justify-content:space-between;align-items:center;padding:1rem}.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color)}.language-selector{display:flex;align-items:center;gap:.5rem}.language-selector label{font-size:.875rem;color:var(--text-secondary)}.language-selector select{padding:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);color:var(--text-primary);font-size:.875rem;transition:var(--transition)}.language-selector select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.main{flex:1;padding:2rem 0}.tool-container{background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow);padding:2rem;margin-bottom:2rem}.tool-header{text-align:center;margin-bottom:2rem}.tool-header h2{font-size:2rem;color:var(--primary-color);margin-bottom:.5rem}.tool-header p{color:var(--text-secondary);font-size:1.1rem}.tool-content{display:flex;flex-direction:column;gap:1.5rem}.input-section,.output-section{display:flex;flex-direction:column;gap:.5rem}.input-section label,.output-section label{font-weight:600;color:var(--text-primary)}.input-section textarea,.output-section textarea{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);font-family:Courier New,monospace;font-size:.875rem;resize:vertical;transition:var(--transition)}.input-section textarea:focus,.output-section textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.output-wrapper{position:relative}.copy-btn{background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);padding:.75rem 1rem;cursor:pointer;font-size:.875rem;font-weight:600;transition:var(--transition);min-width:80px;display:flex;align-items:center;justify-content:center}.copy-btn:active{transform:translateY(0)}.copy-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.controls{display:flex;flex-direction:column;gap:1rem;align-items:center}.format-selector select{padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);color:var(--text-primary);font-size:1rem;min-width:150px;transition:var(--transition)}.format-selector select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.action-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;box-shadow:var(--shadow)}.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(135deg,var(--primary-color),#3b82f6);color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#1d4ed8,#2563eb)}.btn-secondary{background:var(--secondary-color);color:#fff}.btn-secondary:hover{background:#475569;transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn-outline{background:transparent;color:var(--primary-color);border:2px solid var(--primary-color)}.btn-outline:hover{background:var(--primary-color);color:#fff}.copy-message,.error-message{position:fixed;top:2rem;right:2rem;padding:1rem 1.5rem;border-radius:var(--border-radius);color:#fff;font-weight:600;z-index:1000;animation:slideIn .3s ease-out}.copy-message{background:var(--success-color)}.error-message{background:var(--error-color)}.footer{background:var(--surface-color);border-top:1px solid var(--border-color);padding:1rem 0;text-align:center;color:var(--text-secondary);font-size:.875rem}.hero-section{text-align:center;padding:3rem 0;background:linear-gradient(135deg,var(--primary-color),#3b82f6);color:#fff;border-radius:var(--border-radius);margin-bottom:3rem}.hero-title{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.hero-subtitle{font-size:1.2rem;opacity:.9}.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:3rem}.tools-grid.small{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.tool-card{background:var(--surface-color);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--border-color);position:relative;overflow:hidden}.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.tool-card.small{padding:1.5rem}.tool-card.coming-soon{opacity:.7}.tool-icon{font-size:3rem;margin-bottom:1rem;display:block}.tool-card.small .tool-icon{font-size:2rem}.tool-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;color:var(--text-primary)}.tool-card.small .tool-title{font-size:1.2rem}.tool-description{color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5}.tool-stats{display:flex;gap:1rem;margin-bottom:1.5rem}.stat{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.stat-icon{opacity:.8}.tool-btn{width:100%;padding:.75rem 1.5rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:500;cursor:pointer;transition:var(--transition)}.tool-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.coming-soon-badge{position:absolute;top:1rem;right:1rem;background:var(--warning-color);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.8rem;font-weight:500}.header-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}.back-btn{color:var(--primary-color);text-decoration:none;font-weight:500;padding:.5rem 1rem;border-radius:var(--border-radius);transition:var(--transition)}.back-btn:hover{background:var(--background-color)}.tool-icon-large{font-size:4rem;text-align:center;margin-bottom:1rem}.ad-container{margin:2rem 0;display:flex;justify-content:center}.top-ad{margin-bottom:2rem}.bottom-ad{margin-top:2rem}.ad-placeholder{background:#e3f2fd;border:3px dashed #2196f3;border-radius:var(--border-radius);padding:2rem;text-align:center;min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#1976d2;font-weight:600}.ad-label{font-size:.8rem;font-weight:500;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.ad-content{font-size:1rem}.tool-info{margin:3rem 0;padding:2rem;background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow)}.tool-info h2{text-align:center;margin-bottom:2rem;color:var(--text-primary)}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.info-card{padding:1.5rem;background:var(--background-color);border-radius:var(--border-radius);border:1px solid var(--border-color)}.info-card h3{margin-bottom:.5rem;color:var(--text-primary)}.info-card p{color:var(--text-secondary);font-size:.9rem}.related-tools{margin:3rem 0}.related-tools h2{text-align:center;margin-bottom:2rem;color:var(--text-primary)}.seo-content{margin:3rem 0;padding:2rem;background:var(--surface-color);border-radius:var(--border-radius);box-shadow:var(--shadow)}.content-article{max-width:800px;margin:0 auto;line-height:1.8}.content-article h2{color:var(--primary-color);margin-bottom:1rem;font-size:1.8rem}.content-article h3{color:var(--text-primary);margin:2rem 0 1rem;font-size:1.3rem}.content-article p{color:var(--text-secondary);margin-bottom:1.5rem;text-align:justify}.content-article ul{margin:1rem 0;padding-left:2rem}.content-article li{color:var(--text-secondary);margin-bottom:.5rem}.content-article strong{color:var(--text-primary);font-weight:600}.breadcrumbs{margin:1rem 0;padding:.5rem 0;font-size:.9rem;color:var(--text-secondary)}.breadcrumbs a{color:var(--primary-color);text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}.breadcrumbs span{margin:0 .5rem}[dir=rtl]{text-align:right}[dir=rtl] .header .container,[dir=rtl] .language-selector,[dir=rtl] .action-buttons{flex-direction:row-reverse}[dir=rtl] .copy-btn{right:auto;left:.5rem}[dir=rtl] .copy-message,[dir=rtl] .error-message{right:auto;left:2rem}@media (max-width: 768px){.container{padding:0 .5rem}.tool-container{padding:1rem}.tool-header h2{font-size:1.5rem}.controls{gap:.75rem}.action-buttons{flex-direction:column;width:100%}.btn{width:100%}.header .container{flex-direction:column;gap:1rem;align-items:stretch}.language-selector{justify-content:center}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.tools-grid{grid-template-columns:1fr}.header-nav{flex-direction:column;gap:1rem}.tool-card{padding:1.5rem}.info-grid{grid-template-columns:1fr}}@media (max-width: 480px){.copy-message,.error-message{right:1rem;left:1rem;width:auto}[dir=rtl] .copy-message,[dir=rtl] .error-message{left:1rem;right:1rem}}.qr-code-display{text-align:center;padding:2rem;background:var(--background-color);border-radius:var(--border-radius);border:2px dashed var(--border-color);margin-top:1.5rem;min-height:200px;display:flex;align-items:center;justify-content:center}.qr-placeholder p{color:var(--text-secondary);font-style:italic}.qr-code-result{display:flex;flex-direction:column;align-items:center;gap:1rem;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.qr-canvas{border-radius:var(--border-radius);box-shadow:var(--shadow);max-width:100%;height:auto}.size-selector{display:flex;flex-direction:column;gap:.5rem}.size-selector label{font-weight:500;color:var(--text-primary)}.size-selector select{padding:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);color:var(--text-primary);font-size:.9rem}.message{position:fixed;top:2rem;right:2rem;padding:1rem 1.5rem;border-radius:var(--border-radius);color:#fff;font-weight:500;z-index:1000;animation:slideIn .3s ease-out}.message-success{background:var(--success-color)}.message-error{background:var(--error-color)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.tool-card.small:not(.coming-soon){cursor:pointer;transition:var(--transition)}.tool-card.small:not(.coming-soon):hover{background:var(--background-color)}.qr-loading{color:var(--text-secondary);font-style:italic;padding:2rem;text-align:center}.qr-error{color:var(--error-color);padding:2rem;text-align:center;background:#ef44441a;border-radius:var(--border-radius);border:1px solid rgba(239,68,68,.3)}.qr-image{transition:var(--transition)}.qr-image:hover{transform:scale(1.02);box-shadow:0 8px 16px #0003!important}.qr-info{margin-top:1rem;padding:1rem;background:var(--background-color);border-radius:var(--border-radius);border:1px solid var(--border-color)}.qr-info p{margin:.5rem 0;font-size:.9rem;color:var(--text-secondary)}.qr-info strong{color:var(--text-primary)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn:disabled:hover{background:var(--primary-color)}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.json-input-section,.json-output-section{margin:2rem 0}.input-header,.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.input-actions,.output-actions{display:flex;gap:.5rem}.input-container,.output-container{position:relative}.json-textarea{width:100%;min-height:200px;padding:1rem;border:1px solid #ddd;border-radius:8px;font-family:Courier New,monospace;font-size:14px;resize:vertical;outline:none;background:#fafafa}.json-textarea:focus{border-color:#007bff;background:#fff}.json-output{width:100%;min-height:200px;padding:1rem;border:1px solid #ddd;border-radius:8px;font-family:Courier New,monospace;font-size:14px;background:#f8f9fa;white-space:pre-wrap;overflow-x:auto;line-height:1.4}.input-status{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.5rem;border-radius:4px;font-size:.9rem;background:#f8f9fa}.status-icon{font-size:1rem}.status-valid{color:#28a745;background:#d4edda!important}.status-invalid{color:#dc3545;background:#f8d7da!important}.status-neutral{color:#6c757d}.format-options{background:#f8f9fa;border-radius:12px;padding:1.5rem;margin:2rem 0}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.option-group{display:flex;align-items:center;gap:.5rem}.option-group label{font-weight:500;color:#333;white-space:nowrap}.option-group select,.option-group input[type=checkbox]{margin-left:auto}.output-info{display:flex;justify-content:space-between;margin-top:1rem;padding:.75rem;background:#e9ecef;border-radius:4px;font-size:.9rem}.info-item{display:flex;gap:.25rem}.info-item span:first-child{font-weight:500;color:#495057}.info-item span:last-child{color:#007bff;font-weight:600}.error-display{background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;padding:1rem;margin:1rem 0}.error-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.error-icon{font-size:1.2rem;color:#dc3545}.error-header h4{margin:0;color:#721c24}.error-content{color:#721c24}.error-location{font-family:Courier New,monospace;font-size:.9rem;margin-top:.5rem;padding:.5rem;background:#ffffff80;border-radius:4px}.json-string{color:#d14}.json-number{color:#905}.json-boolean{color:#06c;font-weight:700}.json-punctuation{color:#333;font-weight:700}.success-message{position:fixed;top:20px;right:20px;background:#28a745;color:#fff;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 4px 12px #0003;z-index:1000;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.input-header,.output-header{flex-direction:column;align-items:flex-start;gap:.5rem}.options-grid{grid-template-columns:1fr}.output-info{flex-direction:column;gap:.5rem}.success-message{right:10px;left:10px;text-align:center}}.color-picker-section{margin-bottom:2rem}.color-picker-main{display:flex;flex-direction:column;gap:2rem}.color-display{display:flex;gap:2rem;align-items:flex-start}.color-preview{width:150px;height:150px;border-radius:12px;border:3px solid var(--border-color);background:#3498db;box-shadow:var(--shadow);transition:var(--transition)}.color-info{flex:1}.color-info h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.25rem}.color-codes{display:flex;flex-direction:column;gap:1rem}.color-code-group{display:flex;align-items:center;gap:.75rem}.color-code-group label{min-width:50px;font-weight:600;color:var(--text-secondary)}.color-input{flex:1;padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--input-bg);font-family:Courier New,monospace;font-size:.875rem}.color-picker-controls{display:flex;flex-direction:column;gap:1.5rem}#color-picker{width:100px;height:50px;border:none;border-radius:var(--border-radius);cursor:pointer;box-shadow:var(--shadow)}.manual-inputs{display:flex;flex-direction:column;gap:1rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-weight:600;color:var(--text-primary)}.input-group input{padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color)}.rgb-inputs{display:flex;flex-direction:column;gap:.5rem}.rgb-group{display:flex;gap:.5rem}.rgb-group input{flex:1;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);text-align:center}.color-palette{margin-top:2rem}.color-palette h3{margin-bottom:1rem;color:var(--text-primary)}.palette-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.palette-color{display:flex;flex-direction:column;align-items:center;gap:.5rem}.palette-swatch{width:80px;height:80px;border-radius:8px;border:2px solid var(--border-color);cursor:pointer;transition:var(--transition)}.palette-swatch:hover{transform:scale(1.05);box-shadow:var(--shadow-lg)}.palette-hex{font-size:.75rem;font-family:Courier New,monospace;color:var(--text-secondary);cursor:pointer;padding:.25rem .5rem;border-radius:4px;background:var(--input-bg);transition:var(--transition)}.palette-hex:hover{background:var(--primary-color);color:#fff}.password-section{margin-bottom:2rem}.password-section h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.25rem}.length-control{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.length-control label{font-weight:600;color:var(--text-primary);margin-bottom:0}.length-slider-container{display:flex;align-items:center;gap:1rem}.length-slider{flex:1;height:6px;background:var(--border-color);border-radius:3px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.length-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--primary-color);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003}.length-slider::-moz-range-thumb{width:20px;height:20px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.generate-section{text-align:center;margin-top:2rem}.generate-btn{width:100%;background:linear-gradient(135deg,var(--primary-color),#3b82f6);color:#fff;border:none;border-radius:var(--border-radius);padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow);margin-top:2rem}.generate-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.generate-btn:active{transform:translateY(0)}.meta-input-section{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}.input-group{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem}.input-group h3{margin-bottom:1.5rem;color:var(--primary-color);font-size:1.25rem;border-bottom:2px solid var(--primary-color);padding-bottom:.5rem}.form-field{margin-bottom:1.5rem;position:relative}.form-field:last-child{margin-bottom:0}.form-field label{display:block;margin-bottom:.5rem;font-weight:600;color:var(--text-primary)}.form-field input,.form-field textarea,.form-field select{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);font-size:.875rem;transition:var(--transition)}.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.form-field textarea{resize:vertical;min-height:80px;line-height:1.5}.char-count{position:absolute;right:.75rem;bottom:-1.5rem;font-size:.75rem;color:var(--text-secondary)}.char-count.warning{color:var(--warning-color)}.char-count.danger{color:var(--error-color)}.generate-meta-btn{width:100%;background:linear-gradient(135deg,var(--primary-color),#3b82f6);color:#fff;border:none;border-radius:var(--border-radius);padding:1rem 2rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow);margin-bottom:2rem}.generate-meta-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.generate-meta-btn:active{transform:translateY(0)}.meta-output-section{background:var(--input-bg);border-radius:var(--border-radius);padding:1.5rem;position:relative}.meta-output-section h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.25rem}.meta-output{width:100%;min-height:300px;padding:1rem;border:1px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);font-family:Courier New,monospace;font-size:.875rem;line-height:1.6;white-space:pre-wrap;resize:vertical}.meta-actions{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}.meta-action-btn{background:var(--secondary-color);color:#fff;border:none;border-radius:var(--border-radius);padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.5rem}.meta-action-btn:hover{background:#475569;transform:translateY(-1px)}.meta-action-btn.primary{background:var(--primary-color)}.meta-action-btn.primary:hover{background:#1d4ed8}.meta-action-btn.success{background:var(--success-color)}.meta-action-btn.success:hover{background:#059669}.meta-preview{margin-top:2rem;padding:1.5rem;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius)}.meta-preview h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.25rem}.preview-card{border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1rem;background:#f8fafc}.preview-title{font-size:1.1rem;font-weight:600;color:#1e40af;margin-bottom:.5rem;text-decoration:none}.preview-title:hover{text-decoration:underline}.preview-url{font-size:.875rem;color:var(--success-color);margin-bottom:.5rem}.preview-description{font-size:.875rem;color:var(--text-secondary);line-height:1.4}.twitter-preview{border:1px solid #e1e8ed;border-radius:12px;overflow:hidden;background:#fff}.twitter-image{width:100%;height:200px;background:var(--border-color);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:.875rem}.twitter-content{padding:1rem}.twitter-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.twitter-description{font-size:.875rem;color:var(--text-secondary);margin-bottom:.5rem}.twitter-domain{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}@media (max-width: 768px){.meta-input-section{gap:1.5rem}.input-group{padding:1rem}.meta-actions{flex-direction:column}.meta-action-btn{justify-content:center}.char-count{position:static;margin-top:.25rem;text-align:right}}.password-options{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:2rem;margin-bottom:2rem}.password-options h3{margin-bottom:2rem;color:var(--text-primary);font-size:1.25rem}.option-group{margin-bottom:2rem}.option-group:last-child{margin-bottom:0}.option-group label[for=password-length]{display:block;margin-bottom:1rem;font-weight:600;color:var(--text-primary)}.checkbox-group{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.checkbox-item{display:flex;align-items:center;gap:.75rem;cursor:pointer;padding:.75rem 1rem;border-radius:var(--border-radius);border:1px solid var(--border-color);background:var(--surface-color);transition:var(--transition)}.checkbox-item:hover{background:var(--hover-bg);border-color:var(--primary-color)}.checkbox-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-color);cursor:pointer;margin:0}.checkbox-item span:last-child{font-weight:500;color:var(--text-primary);cursor:pointer;flex:1}.checkmark{display:none}.password-display{background:var(--input-bg);border-radius:var(--border-radius);padding:1.5rem;margin-bottom:2rem;border:1px solid var(--border-color)}.password-display h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.25rem}.password-output-container{display:flex;gap:.75rem;margin-bottom:1.5rem;align-items:stretch}.password-output{flex:1;padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:var(--border-radius);background:var(--surface-color);font-family:Courier New,monospace;font-size:1rem;font-weight:600;color:var(--text-primary);transition:var(--transition)}.password-output:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.password-strength{display:flex;align-items:center;gap:1rem}.strength-label{font-weight:600;color:var(--text-primary);min-width:120px}.strength-indicator{display:flex;align-items:center;gap:.75rem;flex:1}.strength-bar{height:8px;background:var(--border-color);border-radius:4px;flex:1;position:relative;overflow:hidden}.strength-bar:after{content:"";position:absolute;top:0;left:0;height:100%;width:0%;background:var(--error-color);border-radius:4px;transition:all .3s ease}.strength-bar.very-weak:after{width:15%;background:#dc2626}.strength-bar.weak:after{width:30%;background:var(--error-color)}.strength-bar.medium:after{width:60%;background:var(--warning-color)}.strength-bar.strong:after{width:80%;background:#3b82f6}.strength-bar.very-strong:after{width:100%;background:var(--success-color)}.strength-bar.fair:after{width:50%;background:var(--warning-color)}.strength-bar.good:after{width:75%;background:#3b82f6}.strength-text{font-weight:600;min-width:100px}.strength-text.very-weak{color:#dc2626}.strength-text.weak{color:var(--error-color)}.strength-text.medium{color:var(--warning-color)}.strength-text.strong{color:#3b82f6}.strength-text.very-strong{color:var(--success-color)}.strength-text.fair{color:var(--warning-color)}.strength-text.good{color:#3b82f6}.password-history{margin-top:2rem;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem}.password-history h3{margin-bottom:1rem;color:var(--text-primary);font-size:1.25rem}.history-controls{margin-bottom:1.5rem;text-align:right}.history-list{display:flex;flex-direction:column;gap:1rem}.history-placeholder{text-align:center;color:var(--text-secondary);font-style:italic;padding:2rem;background:var(--background-color);border-radius:var(--border-radius);border:2px dashed var(--border-color)}.history-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--input-bg);border-radius:var(--border-radius);border:1px solid var(--border-color);transition:var(--transition);gap:1rem}.history-item:hover{background:var(--hover-bg);border-color:var(--primary-color)}.password-item{display:flex;align-items:center;gap:1rem;flex:1}.password-text{font-family:Courier New,monospace;font-size:.875rem;font-weight:600;color:var(--text-primary);flex:1;word-break:break-all}.copy-btn-small{background:var(--primary-color);color:#fff;border:none;border-radius:4px;padding:.375rem .75rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:var(--transition);min-width:60px}.copy-btn-small:hover{background:#1d4ed8;transform:translateY(-1px)}.password-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.password-strength{font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:4px}.password-strength.very-weak{background:#dc26261a;color:#dc2626}.password-strength.weak{background:#ef44441a;color:var(--error-color)}.password-strength.medium{background:#f59e0b1a;color:var(--warning-color)}.password-strength.strong{background:#3b82f61a;color:#3b82f6}.password-strength.very-strong{background:#10b9811a;color:var(--success-color)}.password-strength.fair{background:#f59e0b1a;color:var(--warning-color)}.password-strength.good{background:#3b82f61a;color:#3b82f6}.password-time{font-size:.75rem;color:var(--text-secondary)}@media (max-width: 768px){.password-output-container{flex-direction:column;gap:1rem}.password-strength{flex-direction:column;align-items:flex-start;gap:.5rem}.strength-label{min-width:auto}.checkbox-item{padding:1rem}.history-item{flex-direction:column;align-items:flex-start;gap:1rem}.password-item{width:100%;flex-direction:column;align-items:flex-start;gap:.75rem}.password-text{word-break:break-all;width:100%}.copy-btn-small{align-self:flex-start}.password-meta{align-items:flex-start;width:100%}}