.markdown-editor{padding:20px;max-width:1400px;margin:0 auto}.markdown-header{text-align:center;margin-bottom:30px}.markdown-header h1{font-size:2.5rem;margin-bottom:10px;color:var(--color-text)}.markdown-header p{color:var(--color-textSecondary);font-size:1.1rem}.markdown-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;padding:15px;background:var(--color-surface);border-radius:8px;border:1px solid var(--color-border);flex-wrap:wrap}.view-controls,.action-controls{display:flex;gap:10px;flex-wrap:wrap}.markdown-controls button{padding:8px 16px;background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s ease;min-height:44px}.markdown-controls button:hover,.markdown-controls button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.markdown-toolbar{display:flex;gap:8px;padding:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;margin-bottom:15px;flex-wrap:wrap}.markdown-toolbar button{padding:6px 12px;background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s ease;min-height:44px;min-width:44px}.markdown-toolbar button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.markdown-toolbar button.bold{font-weight:700}.markdown-toolbar button.italic{font-style:italic}.markdown-toolbar button.strikethrough{text-decoration:line-through}.markdown-workspace{display:grid;gap:20px;margin-bottom:30px}.markdown-workspace.view-split{grid-template-columns:1fr 1fr}.markdown-workspace.view-editor,.markdown-workspace.view-preview{grid-template-columns:1fr}.markdown-editor-pane,.markdown-preview-pane{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;overflow:hidden}.pane-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--color-background);border-bottom:1px solid var(--color-border)}.pane-header h3{margin:0;font-size:1rem;color:var(--color-text)}.toggle-toolbar{padding:4px 12px;background:transparent;color:var(--color-textSecondary);border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease;min-height:32px}.toggle-toolbar:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.markdown-editor-pane textarea{flex:1;padding:20px;background:var(--color-codeBackground);color:var(--color-text);border:none;font-family:Courier New,Consolas,Monaco,monospace;font-size:.95rem;line-height:1.6;resize:none;outline:none;min-height:500px}.markdown-editor-pane textarea::placeholder{color:var(--color-textMuted);opacity:.7}.editor-stats{padding:8px 16px;background:var(--color-background);border-top:1px solid var(--color-border);color:var(--color-textSecondary);font-size:.85rem;text-align:right}.markdown-preview{flex:1;padding:20px;background:var(--color-background);color:var(--color-text);overflow-y:auto;min-height:500px;line-height:1.8}.markdown-preview h1,.markdown-preview h2,.markdown-preview h3,.markdown-preview h4,.markdown-preview h5,.markdown-preview h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25;color:var(--color-text)}.markdown-preview h1{font-size:2em;border-bottom:1px solid var(--color-border);padding-bottom:8px}.markdown-preview h2{font-size:1.5em;border-bottom:1px solid var(--color-border);padding-bottom:6px}.markdown-preview h3{font-size:1.25em}.markdown-preview p{margin-bottom:16px}.markdown-preview code{background:var(--color-codeBackground);color:var(--color-text);padding:2px 6px;border-radius:3px;font-family:Courier New,Consolas,Monaco,monospace;font-size:.9em}.markdown-preview pre{background:var(--color-codeBackground);padding:16px;border-radius:6px;overflow-x:auto;margin:16px 0;border:1px solid var(--color-border)}.markdown-preview pre code{background:transparent;padding:0;color:var(--color-text)}.markdown-preview blockquote{border-left:4px solid var(--color-primary);padding-left:16px;margin:16px 0;color:var(--color-textSecondary);font-style:italic}.markdown-preview ul,.markdown-preview ol{margin:16px 0;padding-left:32px}.markdown-preview li{margin-bottom:8px}.markdown-preview a{color:var(--color-primary);text-decoration:none}.markdown-preview a:hover{text-decoration:underline}.markdown-preview img{max-width:100%;height:auto;border-radius:6px;margin:16px 0}.markdown-preview hr{border:none;border-top:1px solid var(--color-border);margin:24px 0}.markdown-preview strong{font-weight:600;color:var(--color-text)}.markdown-preview em{font-style:italic}.markdown-preview del{text-decoration:line-through;opacity:.7}.notification{position:fixed;bottom:30px;right:30px;padding:12px 24px;background:var(--color-success);color:#fff;border-radius:6px;box-shadow:0 4px 12px #00000026;animation:slideIn .3s ease;z-index:1000;font-weight:500}@keyframes slideIn{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.markdown-info{padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;margin-top:20px}.markdown-info h3{margin-top:0;margin-bottom:15px;color:var(--color-text);font-size:1.2rem}.markdown-info ul{list-style:none;padding:0;margin:0}.markdown-info li{padding:8px 0;color:var(--color-textSecondary);line-height:1.6}.markdown-info strong{color:var(--color-text)}@media(max-width:768px){.markdown-editor{padding:15px}.markdown-header h1{font-size:2rem}.markdown-workspace.view-split{grid-template-columns:1fr}.markdown-controls{flex-direction:column;align-items:stretch}.view-controls,.action-controls{width:100%;justify-content:center}.markdown-toolbar{justify-content:center}.markdown-editor-pane textarea,.markdown-preview{min-height:350px}.notification{bottom:20px;right:20px;left:20px;text-align:center}}@media(max-width:480px){.markdown-editor{padding:10px}.markdown-header h1{font-size:1.75rem}.markdown-header p{font-size:1rem}.markdown-controls{padding:10px;gap:10px}.markdown-controls button{padding:10px 14px;font-size:.85rem;flex:1;min-width:80px}.view-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.action-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}.markdown-toolbar{padding:8px;gap:6px}.markdown-toolbar button{padding:8px 10px;font-size:.8rem;min-width:40px}.pane-header{padding:10px 12px}.pane-header h3{font-size:.9rem}.markdown-editor-pane textarea,.markdown-preview{padding:15px;font-size:.9rem;min-height:300px}.editor-stats{padding:6px 12px;font-size:.8rem}.markdown-info{padding:15px}.markdown-info h3{font-size:1rem}.markdown-info li{font-size:.9rem}.notification{bottom:15px;right:15px;left:15px;padding:10px 16px;font-size:.9rem}}@media(max-width:320px){.markdown-header h1{font-size:1.5rem}.markdown-controls button{font-size:.8rem;padding:8px 10px}.markdown-toolbar button{font-size:.75rem;min-width:36px;padding:6px 8px}.action-controls{grid-template-columns:1fr}}.api-testing-container{max-width:1200px;margin:0 auto;padding:2rem}.api-testing-header{text-align:center;margin-bottom:3rem}.api-testing-header h1{font-size:2.5rem;margin-bottom:1rem;color:var(--color-text)}.api-testing-header p{font-size:1.1rem;color:var(--color-textSecondary);max-width:700px;margin:0 auto}.api-testing-main{display:flex;flex-direction:column;gap:2rem}.request-section,.response-section{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.section-header h2{font-size:1.5rem;color:var(--color-text);margin:0}.header-actions{display:flex;gap:.5rem}.action-button{padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text);cursor:pointer;font-size:.9rem;transition:all .2s}.action-button:hover{background:var(--color-surface);border-color:var(--color-primary)}.action-button.secondary{background:transparent}.url-section{display:flex;gap:.5rem;margin-bottom:1.5rem}.method-selector{flex-shrink:0}.method-select{padding:.75rem 1rem;border-radius:6px;border:2px solid var(--color-border);background:var(--color-background);color:var(--color-text);font-size:1rem;font-weight:600;cursor:pointer;min-width:120px;transition:all .2s}.method-select:focus{outline:none;border-color:var(--color-primary)}.url-input-wrapper{flex:1;display:flex;flex-direction:column;gap:.25rem}.url-input{width:100%;padding:.75rem 1rem;border-radius:6px;border:2px solid var(--color-border);background:var(--color-background);color:var(--color-text);font-size:1rem;transition:all .2s}.url-input:focus{outline:none;border-color:var(--color-primary)}.url-input.error{border-color:var(--color-danger)}.send-button{padding:.75rem 2rem;border-radius:6px;border:none;background:var(--color-primary);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.send-button:hover:not(:disabled){background:var(--color-primaryDark);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.send-button:disabled{opacity:.6;cursor:not-allowed}.request-tabs,.response-tabs{margin-top:1rem}.tabs-header{display:flex;gap:.5rem;border-bottom:2px solid var(--color-border);margin-bottom:1rem}.tab{padding:.75rem 1.5rem;border:none;background:transparent;color:var(--color-textSecondary);font-size:1rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:.5rem}.tab:hover{color:var(--color-text)}.tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.tab-error{font-size:.8rem}.tabs-content{min-height:200px}.tab-panel{display:flex;flex-direction:column;gap:.75rem}.tab-panel-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}.tab-panel-header label{font-weight:500;color:var(--color-text)}.body-actions{display:flex;gap:.5rem}.text-button{padding:.25rem .75rem;border:none;background:transparent;color:var(--color-primary);font-size:.9rem;cursor:pointer;text-decoration:underline;transition:all .2s}.text-button:hover:not(:disabled){color:var(--color-primaryDark)}.text-button:disabled{opacity:.5;cursor:not-allowed}.headers-input,.body-input{width:100%;padding:1rem;border-radius:6px;border:2px solid var(--color-border);background:var(--color-background);color:var(--color-text);font-family:Courier New,monospace;font-size:.9rem;resize:vertical;transition:all .2s}.headers-input:focus,.body-input:focus{outline:none;border-color:var(--color-primary)}.body-input.error{border-color:var(--color-danger)}.input-hint{color:var(--color-textSecondary);font-size:.85rem}.input-hint code{background:var(--color-background);padding:.2rem .4rem;border-radius:4px;font-family:Courier New,monospace}.error-message{color:var(--color-danger);font-size:.85rem;margin-top:.25rem}.response-meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.status-badge{padding:.4rem .8rem;border-radius:6px;font-weight:600;font-size:.9rem}.status-badge.status-2xx{background:#10b9811a;color:#10b981}.status-badge.status-3xx{background:#3b82f61a;color:#3b82f6}.status-badge.status-4xx{background:#f59e0b1a;color:#f59e0b}.status-badge.status-5xx{background:#ef44441a;color:#ef4444}.meta-item{color:var(--color-textSecondary);font-size:.9rem;display:flex;align-items:center;gap:.25rem}.response-content{position:relative}.response-actions{display:flex;justify-content:flex-end;margin-bottom:.5rem}.copy-button{padding:.5rem 1rem;border-radius:6px;border:1px solid var(--color-border);background:var(--color-background);color:var(--color-text);cursor:pointer;font-size:.9rem;transition:all .2s}.copy-button:hover{background:var(--color-surface);border-color:var(--color-primary)}.response-body{background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;padding:1.5rem;overflow-x:auto;max-height:500px}.response-body code{color:var(--color-text);font-family:Courier New,monospace;font-size:.9rem;white-space:pre-wrap;word-break:break-word}.response-headers{background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;padding:1rem;max-height:400px;overflow-y:auto}.header-row{display:flex;gap:1rem;padding:.5rem;border-bottom:1px solid var(--color-border)}.header-row:last-child{border-bottom:none}.header-key{font-weight:600;color:var(--color-primary);min-width:200px}.header-value{color:var(--color-text);word-break:break-all}.api-error-response{text-align:center;padding:3rem 2rem}.error-icon{font-size:3rem;margin-bottom:1rem}.api-error-response h3{color:var(--color-danger);margin-bottom:.5rem}.api-error-response p{color:var(--color-textSecondary);margin-bottom:1.5rem}.cors-solutions{text-align:left;background:var(--color-background);border:2px solid var(--color-warning, #f59e0b);border-radius:8px;padding:1.5rem;margin-top:1.5rem;max-width:700px;margin-left:auto;margin-right:auto}.cors-solutions h4{color:var(--color-text);margin-bottom:1rem;font-size:1.1rem}.cors-solutions ul{list-style:none;padding:0;margin:0}.cors-solutions li{padding:.75rem 0;color:var(--color-text);line-height:1.6;border-bottom:1px solid var(--color-border)}.cors-solutions li:last-child{border-bottom:none}.cors-solutions li strong{color:var(--color-primary)}.cors-solutions code{background:var(--color-surface);padding:.2rem .5rem;border-radius:4px;font-family:Courier New,monospace;font-size:.85rem;color:var(--color-text)}.cors-solutions pre{background:var(--color-surface);padding:.75rem;border-radius:6px;margin:.5rem 0 0;overflow-x:auto}.cors-solutions pre code{background:transparent;padding:0}.api-info-section{background:var(--color-surface);border-radius:12px;padding:2rem;margin-top:2rem;box-shadow:0 2px 8px #0000001a}.api-info-section h2{font-size:1.8rem;margin-bottom:1.5rem;color:var(--color-text)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.feature-icon{font-size:2.5rem;margin-bottom:.75rem}.feature-item h3{font-size:1.1rem;margin-bottom:.5rem;color:var(--color-text)}.feature-item p{font-size:.95rem;color:var(--color-textSecondary);line-height:1.6}.usage-notes{background:var(--color-background);border-left:4px solid var(--color-primary);padding:1.5rem;border-radius:8px}.usage-notes h3{font-size:1.2rem;margin-bottom:1rem;color:var(--color-text)}.usage-notes ul{list-style:none;padding:0;margin:0}.usage-notes li{padding:.5rem 0;color:var(--color-textSecondary);line-height:1.6}.usage-notes li:before{content:"→ ";color:var(--color-primary);font-weight:700;margin-right:.5rem}@media(max-width:768px){.api-testing-container{padding:1rem}.api-testing-header h1{font-size:2rem}.api-testing-header p{font-size:1rem}.request-section,.response-section,.api-info-section{padding:1.5rem}.url-section{flex-direction:column}.method-select,.send-button{width:100%}.section-header{flex-direction:column;align-items:flex-start}.response-meta{flex-direction:column;align-items:flex-start;gap:.5rem}.tabs-header{overflow-x:auto}.tab{padding:.75rem 1rem;white-space:nowrap}.header-row{flex-direction:column;gap:.25rem}.header-key{min-width:auto}.features-grid{grid-template-columns:1fr;gap:1.5rem}}@media(max-width:480px){.api-testing-header h1{font-size:1.75rem}.section-header h2{font-size:1.25rem}.request-section,.response-section,.api-info-section,.response-body{padding:1rem}.response-body code{font-size:.8rem}}.scientific-calculator-container{max-width:1400px;margin:0 auto;padding:2rem}.scientific-calculator-header{text-align:center;margin-bottom:2rem}.scientific-calculator-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--color-text)}.scientific-calculator-header p{font-size:1.1rem;color:var(--color-textSecondary)}.calculator-content{display:flex;gap:2rem;align-items:flex-start}.calculator-main{flex:1;background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.calculator-display-section{background:var(--color-background);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem;min-height:120px;display:flex;flex-direction:column;gap:.5rem}.calculator-expression{font-size:1rem;color:var(--color-textSecondary);min-height:24px;word-break:break-all;text-align:right}.calculator-display{font-size:2.5rem;font-weight:600;color:var(--color-text);text-align:right;word-break:break-all;min-height:50px}.calculator-mode{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.memory-indicator{font-size:.9rem;color:var(--color-textSecondary);font-weight:600;opacity:.3}.memory-indicator.active{opacity:1;color:var(--color-primary)}.mode-toggle{background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-text);padding:.3rem .8rem;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.mode-toggle.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.mode-toggle:hover{transform:translateY(-1px)}.calculator-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.calculator-buttons button{padding:1rem;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;min-height:60px;touch-action:manipulation}.calculator-buttons button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.calculator-buttons button:active{transform:translateY(0)}.btn-number{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.btn-number:hover{background:var(--color-background)}.btn-operator{background:var(--color-primary);color:#fff}.btn-operator:hover{opacity:.9}.btn-equals{background:var(--color-success);color:#fff}.btn-equals:hover{opacity:.9}.btn-clear{background:var(--color-danger);color:#fff}.btn-clear:hover{opacity:.9}.btn-function{background:var(--color-background);color:var(--color-text);border:2px solid var(--color-border);font-size:.9rem}.btn-function:hover{background:var(--color-surface)}.btn-scientific{background:var(--color-info);color:#fff;font-size:.95rem}.btn-scientific:hover{opacity:.9}.btn-constant{background:var(--color-warning);color:#fff}.btn-constant:hover{opacity:.9}.btn-history{background:var(--color-secondary);color:#fff;font-size:1.3rem}.btn-history:hover{opacity:.9}.calculator-history{width:350px;background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;max-height:600px;display:flex;flex-direction:column}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid var(--color-border)}.history-header h3{font-size:1.2rem;color:var(--color-text);margin:0}.btn-clear-history{background:var(--color-danger);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s}.btn-clear-history:hover{opacity:.9;transform:translateY(-1px)}.history-list{overflow-y:auto;flex:1}.history-empty{text-align:center;color:var(--color-textSecondary);padding:2rem;font-style:italic}.history-item{background:var(--color-background);padding:1rem;border-radius:8px;margin-bottom:.5rem;cursor:pointer;transition:all .2s;border:2px solid transparent}.history-item:hover{border-color:var(--color-primary);transform:translate(4px)}.history-expression{font-size:.9rem;color:var(--color-textSecondary);margin-bottom:.3rem;word-break:break-all}.history-result{font-size:1.1rem;font-weight:600;color:var(--color-text);word-break:break-all}.calculator-features{margin-top:3rem}.calculator-features h2{text-align:center;font-size:2rem;margin-bottom:2rem;color:var(--color-text)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.feature-card{background:var(--color-surface);padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px #0000001a;transition:all .3s}.feature-card h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--color-text)}@media(max-width:1200px){.calculator-content{flex-direction:column}.calculator-history{width:100%;max-height:400px}}@media(max-width:768px){.scientific-calculator-container{padding:1rem}.scientific-calculator-header h1{font-size:2rem}.calculator-main{padding:1rem}.calculator-buttons{grid-template-columns:repeat(5,1fr);gap:.4rem}.calculator-buttons button{padding:.8rem .4rem;font-size:.9rem;min-height:50px}.calculator-display{font-size:2rem}.calculator-expression{font-size:.9rem}.features-grid{grid-template-columns:1fr}}@media(max-width:480px){.scientific-calculator-header h1{font-size:1.5rem}.scientific-calculator-header p{font-size:1rem}.calculator-buttons{gap:.3rem}.calculator-buttons button{padding:.6rem .2rem;font-size:.8rem;min-height:44px}.calculator-display{font-size:1.5rem}.calculator-display-section{padding:1rem;min-height:100px}.btn-scientific,.btn-function{font-size:.75rem}}.color-palette-container{max-width:1200px;margin:0 auto;padding:2rem}.color-palette-header{text-align:center;margin-bottom:3rem}.color-palette-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--color-text)}.color-palette-header .subtitle{font-size:1.1rem;color:var(--color-textSecondary);max-width:600px;margin:0 auto}.color-palette-content{display:flex;flex-direction:column;gap:2rem}.upload-section{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.upload-area{border:2px dashed var(--color-border);border-radius:12px;padding:3rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--color-background);min-height:300px;display:flex;align-items:center;justify-content:center}.upload-area.dragging{border-color:var(--color-primary);background:var(--color-primary);opacity:.1}.upload-area.has-image{padding:1rem;border-style:solid}.upload-icon{font-size:4rem}.upload-text strong{color:var(--color-primary)}.image-preview{position:relative;width:100%;max-width:500px;margin:0 auto}.image-preview img{width:100%;height:auto;border-radius:8px;display:block}.reset-btn{position:absolute;top:10px;right:10px;background:#000000b3;color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;cursor:pointer;font-size:.9rem;transition:background .3s ease}.reset-btn:hover{background:#000000e6}.settings-section{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--color-border)}.setting-group{display:flex;flex-direction:column;gap:.5rem}.setting-group label{font-weight:600;color:var(--color-text);font-size:.95rem}.color-count-slider{width:100%;height:6px;border-radius:3px;background:var(--color-border);outline:none;-webkit-appearance:none}.color-count-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:transform .2s ease}.color-count-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.color-count-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:transform .2s ease}.color-count-slider::-moz-range-thumb:hover{transform:scale(1.1)}.range-labels{display:flex;justify-content:space-between;font-size:.85rem;color:var(--color-textSecondary)}.error-message{margin-top:1rem;padding:1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;text-align:center}.loading-section{background:var(--color-surface);border-radius:12px;padding:3rem;text-align:center;box-shadow:0 2px 8px #0000001a}.loading-section p{color:var(--color-textSecondary);font-size:1.1rem}.results-section{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.results-header h2{font-size:1.8rem;color:var(--color-text);margin:0}.export-controls{display:flex;gap:.75rem;align-items:center}.export-select{padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-background);color:var(--color-text);font-size:.9rem;cursor:pointer}.export-btn{padding:.5rem 1.5rem;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:opacity .3s ease}.export-btn:hover{opacity:.9}.color-palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}.color-card{background:var(--color-background);border-radius:8px;overflow:hidden;border:1px solid var(--color-border);transition:transform .2s ease,box-shadow .2s ease}.color-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.color-swatch{height:150px;width:100%;border-bottom:1px solid var(--color-border)}.color-info{padding:1rem;display:flex;flex-direction:column;gap:.5rem}.color-value-btn{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:transparent;border:1px solid var(--color-border);border-radius:4px;cursor:pointer;transition:all .2s ease;position:relative}.color-value-btn:hover{background:var(--color-surface);border-color:var(--color-primary)}.color-label{font-weight:600;font-size:.75rem;color:var(--color-textSecondary);text-transform:uppercase}.color-value{font-family:Courier New,monospace;font-size:.85rem;color:var(--color-text)}.copied-indicator{position:absolute;right:-25px;color:#10b981;font-weight:700;animation:fadeIn .3s ease}.palette-preview{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--color-border)}.palette-preview h3{font-size:1.2rem;color:var(--color-text);margin-bottom:1rem}.palette-strip{display:flex;height:80px;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a}.palette-strip-color{flex:1;transition:flex .3s ease;cursor:pointer}.palette-strip-color:hover{flex:1.2}.info-section{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.info-section h2{text-align:center;font-size:1.8rem;color:var(--color-text);margin-bottom:2rem}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:3rem}.info-card{text-align:center;padding:1.5rem;background:var(--color-background);border-radius:8px;border:1px solid var(--color-border)}.info-icon{font-size:3rem;margin-bottom:1rem}.info-card h3{font-size:1.2rem;color:var(--color-text);margin-bottom:.5rem}.info-card p{font-size:.95rem;color:var(--color-textSecondary);line-height:1.5}.features-list{background:var(--color-background);padding:2rem;border-radius:8px;border:1px solid var(--color-border)}.features-list h3{font-size:1.3rem;color:var(--color-text);margin-bottom:1rem}.features-list ul{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.features-list li{font-size:1rem;color:var(--color-text);padding-left:0}@media(max-width:768px){.color-palette-container{padding:1rem}.color-palette-header h1{font-size:2rem}.upload-area{padding:2rem 1rem;min-height:250px}.upload-icon{font-size:3rem}.color-palette-grid{grid-template-columns:1fr}.results-header{flex-direction:column;align-items:flex-start}.export-controls{width:100%;flex-direction:column}.export-select,.export-btn{width:100%}.info-grid{grid-template-columns:1fr}}@media(max-width:480px){.color-palette-header h1{font-size:1.75rem}.color-palette-header .subtitle{font-size:1rem}.upload-area{padding:1.5rem 1rem;min-height:200px}.upload-section,.results-section,.info-section{padding:1.5rem}}.image-compressor-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.compressor-header{text-align:center;margin-bottom:3rem}.compressor-title{font-size:2.5rem;font-weight:700;color:var(--color-text);margin-bottom:.5rem}.compressor-subtitle{font-size:1.125rem;color:var(--color-textSecondary);max-width:600px;margin:0 auto}.upload-section{background:var(--color-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 8px #0000001a}.upload-zone{border:2px dashed var(--color-border);border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--color-background)}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--color-primary);background:rgba(var(--color-primary-rgb),.05)}.upload-icon{font-size:3rem;margin-bottom:1rem}.upload-text{font-size:1.125rem;color:var(--color-text);margin-bottom:.5rem}.upload-hint{font-size:.875rem;color:var(--color-textSecondary);margin-bottom:1rem}.upload-button{background:var(--color-primary);color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.upload-button:hover{opacity:.9;transform:translateY(-1px)}.settings-section{background:var(--color-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 8px #0000001a}.section-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:.5rem}.settings-subtitle{font-size:.875rem;color:var(--color-textSecondary);margin-bottom:1.5rem;font-style:italic}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.setting-group{display:flex;flex-direction:column}.setting-label{font-size:.875rem;font-weight:600;color:var(--color-text);margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}.setting-select,.setting-input{background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;padding:.75rem;font-size:.875rem;color:var(--color-text);transition:border-color .2s ease}.setting-select:focus,.setting-input:focus{outline:none;border-color:var(--color-primary)}.setting-input[type=number]{appearance:textfield;-moz-appearance:textfield}.setting-input[type=number]::-webkit-outer-spin-button,.setting-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting-input[type=range]{width:100%;height:6px;background:var(--color-border);border-radius:3px;outline:none;padding:0}.setting-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer}.setting-input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none}.quality-value{display:inline-block;background:var(--color-primary);color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;min-width:40px;text-align:center}.setting-description{font-size:.75rem;color:var(--color-textSecondary);margin-top:.25rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.preview-section{background:var(--color-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 8px #0000001a}.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.preview-box{display:flex;flex-direction:column}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.preview-title{font-size:1rem;font-weight:600;color:var(--color-text)}.preview-badge{background:var(--color-primary);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600}.preview-badge.success{background:var(--color-success)}.preview-image-wrapper{border:1px solid var(--color-border);border-radius:8px;overflow:hidden;background:var(--color-background);min-height:200px;display:flex;align-items:center;justify-content:center}.preview-image{max-width:100%;height:auto;display:block}.preview-info{margin-top:1rem;font-size:.875rem;color:var(--color-textSecondary)}.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--color-border)}.info-row:last-child{border-bottom:none}.info-label{font-weight:500}.info-value{color:var(--color-text);font-weight:600}.compression-stats{background:var(--color-background);border-radius:8px;padding:1rem;margin-top:1rem;text-align:center}.stats-title{font-size:.875rem;color:var(--color-textSecondary);margin-bottom:.5rem}.stats-value{font-size:2rem;font-weight:700;color:var(--color-success)}.stats-label{font-size:.75rem;color:var(--color-textSecondary);margin-top:.25rem}.quality-control{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--color-border);text-align:left}.quality-label{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;font-weight:600;color:var(--color-text);margin-bottom:.75rem}.quality-value{display:inline-block;background:var(--color-primary);color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.875rem;font-weight:600;min-width:50px;text-align:center}.quality-slider{width:100%;height:8px;background:var(--color-border);border-radius:4px;outline:none;padding:0;margin-bottom:.5rem;cursor:pointer}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003;transition:transform .2s ease}.quality-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.quality-slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-primary);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0003;transition:transform .2s ease}.quality-slider::-moz-range-thumb:hover{transform:scale(1.1)}.quality-hint{font-size:.75rem;color:var(--color-textSecondary);text-align:center;font-style:italic}.action-buttons{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}.action-button{flex:1;min-width:150px;padding:.75rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:flex;align-items:center;justify-content:center;gap:.5rem}.action-button:hover{opacity:.9;transform:translateY(-1px)}.action-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.loading-content{background:var(--color-surface);border-radius:12px;padding:2rem;text-align:center;min-width:250px}.loading-spinner{width:50px;height:50px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--color-text);font-weight:500}.error-message{background:#f443361a;border:1px solid rgba(244,67,54,.3);border-radius:8px;padding:1rem;margin-bottom:1rem;color:#f44336;display:flex;align-items:center;gap:.5rem}@media(max-width:768px){.compressor-title{font-size:2rem}.upload-zone{padding:2rem 1rem}.settings-grid,.preview-grid{grid-template-columns:1fr}.action-buttons{flex-direction:column}.action-button{width:100%}}@media(max-width:480px){.image-compressor-container{padding:1rem .5rem}.compressor-title{font-size:1.75rem}.upload-section,.settings-section,.preview-section{padding:1.5rem}.upload-icon{font-size:2rem}}.css-gradient-picker-container{max-width:1400px;margin:0 auto;padding:2rem}.gradient-picker-header{text-align:center;margin-bottom:3rem}.gradient-picker-title{font-size:2.5rem;font-weight:700;color:var(--color-text);margin-bottom:1rem}.gradient-picker-subtitle{font-size:1.1rem;color:var(--color-textSecondary);max-width:600px;margin:0 auto;line-height:1.6}.gradient-picker-layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem}.gradient-preview-section{display:flex;flex-direction:column;gap:1.5rem}.preview-card,.css-output-card,.control-card{background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.preview-header,.output-header,.stops-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin:0}.preview-actions{display:flex;gap:.5rem}.action-button{padding:.5rem 1rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-size:.9rem;cursor:pointer;transition:all .2s}.action-button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.gradient-preview{width:100%;height:350px;border-radius:8px;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026}.preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.preview-label{padding:.75rem 1.5rem;background:#00000080;color:#fff;border-radius:6px;font-size:1.1rem;font-weight:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.export-format{display:flex;align-items:center;gap:.5rem}.format-select{padding:.5rem 1rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-size:.9rem;cursor:pointer}.css-output{background:var(--color-background);border:1px solid var(--color-border);border-radius:8px;padding:1rem;margin-bottom:1rem;max-height:250px;overflow-y:auto}.css-output pre{margin:0;font-family:Courier New,monospace;font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.css-output code{color:var(--color-text)}.copy-button{width:100%;padding:.75rem;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.copy-button:hover{opacity:.9;transform:translateY(-1px)}.copy-button.success{background:var(--color-success)}.gradient-controls-section{display:flex;flex-direction:column;gap:1.5rem}.control-title{font-size:1rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.gradient-type-buttons,.shape-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.type-button,.shape-button{padding:.75rem;background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;color:var(--color-text);font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.type-button:hover,.shape-button:hover{border-color:var(--color-primary)}.type-button.active,.shape-button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.angle-control{display:flex;flex-direction:column;gap:1rem}.angle-slider{width:100%;height:8px;border-radius:4px;background:var(--color-background);outline:none;appearance:none;-webkit-appearance:none}.angle-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer}.angle-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.angle-display{display:flex;align-items:center;gap:.5rem}.angle-input{flex:1;padding:.5rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-size:1rem;text-align:center}.angle-input::-webkit-outer-spin-button,.angle-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.angle-input[type=number]{appearance:textfield;-moz-appearance:textfield}.angle-label{color:var(--color-textSecondary);font-size:.9rem}.direction-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:.5rem}.preset-angle{padding:.75rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-size:1.2rem;cursor:pointer;transition:all .2s}.preset-angle:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.stops-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.add-stop-button{padding:.5rem 1rem;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.add-stop-button:hover{opacity:.9}.color-stops-list{display:flex;flex-direction:column;gap:1rem}.color-stop-item{display:flex;gap:.75rem;align-items:center;padding:1rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:8px}.stop-color-wrapper{display:flex;align-items:center;gap:.5rem;flex:0 0 140px}.stop-color-input{width:40px;height:40px;border:2px solid var(--color-border);border-radius:6px;cursor:pointer}.stop-color-text{flex:1;padding:.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-size:.9rem;font-family:monospace}.stop-position-wrapper{flex:1;display:flex;align-items:center;gap:.5rem}.stop-position-slider{flex:1;height:6px;border-radius:3px;background:var(--color-surface);outline:none;appearance:none;-webkit-appearance:none}.stop-position-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer}.stop-position-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.stop-position-input{width:60px;padding:.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;color:var(--color-text);font-size:.9rem;text-align:center}.stop-position-input::-webkit-outer-spin-button,.stop-position-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stop-position-input[type=number]{appearance:textfield;-moz-appearance:textfield}.position-label{color:var(--color-textSecondary);font-size:.9rem}.remove-stop-button{padding:.5rem;background:transparent;border:1px solid var(--color-border);border-radius:6px;color:var(--color-textSecondary);font-size:1rem;cursor:pointer;transition:all .2s;line-height:1}.remove-stop-button:hover{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.presets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.preset-button{height:80px;border:2px solid var(--color-border);border-radius:8px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.preset-button:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.preset-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000080;color:#fff;font-size:.85rem;font-weight:500;opacity:0;transition:opacity .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.preset-button:hover .preset-name{opacity:1}.gradient-info-section,.features-section{margin-top:3rem;padding:2rem;background:var(--color-surface);border-radius:12px;box-shadow:0 2px 8px #0000001a}.gradient-info-section .section-title,.features-section .section-title{font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:1.5rem;text-align:center}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.info-card{padding:1.5rem;background:var(--color-background);border-radius:8px;text-align:center}.info-icon{font-size:2.5rem;margin-bottom:1rem}.info-title{font-size:1.1rem;font-weight:600;color:var(--color-text);margin-bottom:.75rem}.info-description{color:var(--color-textSecondary);line-height:1.6;font-size:.95rem}.features-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.75rem;list-style:none;padding:0;margin:0}.features-list li{padding:.75rem 1rem;background:var(--color-background);border-radius:6px;color:var(--color-text);font-size:.95rem}@media(max-width:1024px){.gradient-picker-layout{grid-template-columns:1fr}.presets-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){.css-gradient-picker-container{padding:1.5rem}.gradient-picker-title{font-size:2rem}.gradient-picker-subtitle{font-size:1rem}.gradient-preview{height:250px}.direction-presets{grid-template-columns:repeat(4,1fr)}.presets-grid{grid-template-columns:repeat(2,1fr)}.info-grid,.features-list{grid-template-columns:1fr}.preview-header,.output-header,.stops-header{flex-direction:column;align-items:flex-start;gap:.75rem}.preview-actions{width:100%;justify-content:space-between}.action-button{flex:1}}@media(max-width:480px){.css-gradient-picker-container{padding:1rem}.gradient-picker-title{font-size:1.75rem}.gradient-picker-subtitle{font-size:.95rem}.gradient-preview{height:200px}.preview-card,.css-output-card,.control-card{padding:1rem}.color-stop-item{flex-direction:column;align-items:stretch}.stop-color-wrapper{flex:1}.stop-position-wrapper{width:100%}.direction-presets{grid-template-columns:repeat(4,1fr);gap:.25rem}.preset-angle{padding:.5rem;font-size:1rem}.gradient-type-buttons,.shape-buttons{gap:.5rem}.type-button,.shape-button{padding:.6rem;font-size:.9rem}}.image-cropper-container{max-width:1400px;margin:0 auto;padding:2rem}.image-cropper-header{text-align:center;margin-bottom:3rem}.page-title{font-size:2.5rem;font-weight:700;color:var(--color-text);margin-bottom:1rem}.page-subtitle{font-size:1.1rem;color:var(--color-textSecondary);line-height:1.6;max-width:800px;margin:0 auto}.upload-section{display:flex;justify-content:center;align-items:center;min-height:400px}.upload-card{background:var(--color-surface);border-radius:12px;padding:3rem;text-align:center;box-shadow:0 2px 8px #0000001a;max-width:500px;width:100%}.upload-icon{font-size:4rem;margin-bottom:1.5rem}.upload-card h3{font-size:1.5rem;color:var(--color-text);margin-bottom:.5rem}.upload-card p{color:var(--color-textSecondary);margin-bottom:2rem}.upload-button{background:var(--color-primary);color:#fff;border:none;padding:.875rem 2rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s}.upload-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4a90e24d}.upload-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.upload-hint{margin-top:1rem;font-size:.875rem;color:var(--color-textSecondary)}.error-message{background:#fee;color:#c33;padding:1rem;border-radius:8px;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem}.editor-layout{display:grid;grid-template-columns:1fr 400px;gap:2rem;margin-bottom:3rem}.canvas-section{background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.canvas-wrapper{background:var(--color-background);border-radius:8px;padding:1rem;display:flex;justify-content:center;align-items:center;overflow:auto;max-height:600px}.crop-canvas{max-width:100%;height:auto;cursor:move;border-radius:4px}.canvas-info{display:flex;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--color-border);font-size:.875rem;color:var(--color-textSecondary)}.controls-section{background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;gap:1.5rem}.control-title{font-size:1rem;font-weight:600;color:var(--color-text);margin:0}.aspect-ratio-buttons{display:flex;flex-direction:column;gap:.5rem}.aspect-btn{background:var(--color-background);color:var(--color-text);border:2px solid var(--color-border);padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:500;text-align:left}.aspect-btn:hover{border-color:var(--color-primary)}.aspect-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.preset-btn{background:var(--color-background);color:var(--color-text);border:2px solid var(--color-border);padding:.75rem;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.875rem;font-weight:500}.preset-btn:hover{border-color:var(--color-primary)}.preset-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.dimension-inputs{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-size:.875rem;color:var(--color-textSecondary);font-weight:500}.dimension-input{background:var(--color-background);color:var(--color-text);border:2px solid var(--color-border);padding:.75rem;border-radius:8px;font-size:.875rem;transition:border-color .2s;width:100%}.dimension-input:focus{outline:none;border-color:var(--color-primary)}.dimension-input::-webkit-outer-spin-button,.dimension-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dimension-input[type=number]{-moz-appearance:textfield}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--color-text);cursor:pointer;margin-top:.5rem}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.action-buttons{display:flex;flex-direction:column;gap:.5rem;margin-top:auto;padding-top:1rem;border-top:1px solid var(--color-border)}.action-btn{padding:.875rem 1.5rem;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s;border:none}.action-btn.primary{background:var(--color-primary);color:#fff}.action-btn.primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4a90e24d}.action-btn.primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.action-btn.secondary{background:var(--color-background);color:var(--color-text);border:2px solid var(--color-border)}.action-btn.secondary:hover{border-color:var(--color-primary)}.preview-section{margin-bottom:3rem}.preview-card{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.preview-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:1.5rem}.preview-wrapper{background:var(--color-background);border-radius:8px;padding:1rem;display:flex;justify-content:center;align-items:center;margin-bottom:1rem}.preview-image{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a}.preview-info{text-align:center;font-size:.875rem;color:var(--color-textSecondary);margin-bottom:1.5rem}.download-btn{background:var(--color-success);color:#fff;border:none;padding:.875rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem}.download-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #28a7454d}.features-section{margin-top:4rem}.feature-card{background:var(--color-surface);border-radius:12px;padding:2rem;text-align:center;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.feature-card:hover{transform:translateY(-4px)}.feature-card h3{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:.75rem}.feature-card p{color:var(--color-textSecondary);line-height:1.6}@media(max-width:768px){.image-cropper-container{padding:1rem}.page-title{font-size:2rem}.page-subtitle{font-size:1rem}.editor-layout{grid-template-columns:1fr;gap:1.5rem}.canvas-wrapper{max-height:400px}.canvas-info{flex-direction:column;gap:.5rem;text-align:center}.controls-section{order:2}.preset-grid,.dimension-inputs{grid-template-columns:1fr}.upload-card{padding:2rem 1.5rem}.upload-icon{font-size:3rem}.features-grid{grid-template-columns:1fr}.action-buttons{gap:.75rem}}@media(max-width:480px){.image-cropper-container{padding:.75rem}.page-title{font-size:1.75rem}.page-subtitle{font-size:.95rem}.upload-card{padding:1.5rem 1rem}.upload-button{padding:.75rem 1.5rem}.canvas-section,.controls-section,.preview-card{padding:1rem}.feature-card{padding:1.5rem}.feature-icon{font-size:2.5rem}}.watermark-adder-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.watermark-header{text-align:center;margin-bottom:3rem}.watermark-header h1{font-size:2.5rem;color:var(--color-text);margin-bottom:.5rem}.watermark-subtitle{font-size:1.1rem;color:var(--color-textSecondary);max-width:600px;margin:0 auto}.watermark-content{display:flex;flex-direction:column;gap:1.5rem}.watermark-card{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.section-title{font-size:1.3rem;color:var(--color-text);margin-bottom:1.5rem;font-weight:600}.upload-area{border:2px dashed var(--color-border);border-radius:8px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:var(--color-background)}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-icon{font-size:3rem}.upload-text{font-size:1.1rem;color:var(--color-text);margin:0}.upload-hint{font-size:.9rem;color:var(--color-textSecondary);margin:0}.preview-container{display:flex;flex-direction:column;align-items:center;gap:1rem}.preview-image{max-width:100%;max-height:400px;border-radius:8px;object-fit:contain}.file-name{font-size:.9rem;color:var(--color-textSecondary);word-break:break-word}.type-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.type-button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem;background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:1rem;color:var(--color-text)}.type-button:hover{border-color:var(--color-primary);transform:translateY(-2px)}.type-button.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.type-icon{font-size:2rem}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.option-group{display:flex;flex-direction:column;gap:.5rem}.option-group.full-width{grid-column:1 / -1}.option-group label{font-size:.9rem;font-weight:500;color:var(--color-text)}.text-input{padding:.75rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;font-size:1rem;color:var(--color-text);transition:border-color .3s ease}.text-input:focus{outline:none;border-color:var(--color-primary)}.select-input{padding:.75rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;font-size:1rem;color:var(--color-text);cursor:pointer;transition:border-color .3s ease}.select-input:focus{outline:none;border-color:var(--color-primary)}.range-input{width:100%;height:6px;border-radius:3px;background:var(--color-border);outline:none;-webkit-appearance:none}.range-input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer}.range-input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.color-input-wrapper{display:flex;gap:.5rem;align-items:center}.color-input{width:60px;height:40px;border:1px solid var(--color-border);border-radius:6px;cursor:pointer;background:none}.color-text-input{flex:1;padding:.5rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:6px;font-size:.9rem;color:var(--color-text);font-family:monospace}.color-text-input:focus{outline:none;border-color:var(--color-primary)}.file-input-wrapper{display:flex;gap:1rem;align-items:center}.file-button{padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .3s ease;white-space:nowrap}.file-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.file-name-display{font-size:.9rem;color:var(--color-textSecondary);word-break:break-word}.watermark-actions{display:flex;gap:1rem;flex-wrap:wrap}.action-button{flex:1;min-width:150px;padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.action-button.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.action-button.secondary{background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border)}.action-button.secondary:hover{background:var(--color-surface);transform:translateY(-2px)}.error-message{padding:1rem;background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:8px;color:#dc2626;display:flex;align-items:center;gap:.5rem}.result-container{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.result-image{max-width:100%;max-height:600px;border-radius:8px;object-fit:contain;box-shadow:0 4px 12px #0000001a}.result-actions{display:flex;gap:1rem;width:100%;max-width:400px}.info-card{background:linear-gradient(135deg,var(--color-surface) 0%,var(--color-background) 100%)}.info-list{color:var(--color-text);line-height:1.8;padding-left:1.5rem;margin-bottom:2rem}.info-list li{margin-bottom:.5rem}.features-highlight{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.feature-item{display:flex;gap:1rem;align-items:flex-start}.feature-icon{font-size:2rem;flex-shrink:0}.feature-item strong{display:block;color:var(--color-text);font-size:1.1rem;margin-bottom:.25rem}.feature-item p{color:var(--color-textSecondary);margin:0;line-height:1.6}@media(max-width:768px){.watermark-adder-container{padding:1rem .5rem}.watermark-header h1{font-size:2rem}.watermark-subtitle{font-size:1rem}.watermark-card{padding:1.5rem}.upload-area{padding:2rem 1rem}.upload-icon{font-size:2rem}.type-selector,.options-grid{grid-template-columns:1fr}.watermark-actions{flex-direction:column}.action-button{width:100%}.result-actions{max-width:100%}.color-input-wrapper{flex-wrap:wrap}.file-input-wrapper{flex-direction:column;align-items:stretch}.file-button{width:100%}}@media(max-width:480px){.watermark-header h1{font-size:1.75rem}.watermark-card{padding:1rem}.section-title{font-size:1.1rem}.preview-image{max-height:300px}.result-image{max-height:400px}.type-button{padding:1rem}.type-icon{font-size:1.5rem}}.image-editor-dev{max-width:1200px;margin:0 auto;padding:2rem 1rem 4rem;display:flex;flex-direction:column;gap:1.5rem}.image-editor-dev-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:2rem;box-shadow:0 20px 45px #0f172a14}.image-editor-dev-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}.image-editor-dev-topbar-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.image-editor-dev-workspace{display:flex;gap:1.5rem;align-items:flex-start}.image-editor-dev-side-nav{width:90px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:18px;padding:.75rem .35rem;display:flex;flex-direction:column;gap:.5rem;position:sticky;top:90px;height:fit-content}.image-editor-dev-nav-item{border:none;background:transparent;color:var(--color-text);padding:.75rem .5rem;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.8rem;cursor:pointer;transition:background .2s ease,color .2s ease}.image-editor-dev-nav-item:hover:not(.disabled){background:var(--color-background);color:var(--color-primary)}.image-editor-dev-nav-item.active{background:var(--color-background);color:var(--color-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-primary) 30%,transparent)}.image-editor-dev-nav-item.disabled{opacity:.35;cursor:not-allowed}.image-editor-dev-nav-icon{font-size:1.25rem}.image-editor-dev-nav-badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--color-textSecondary)}.image-editor-dev-panel{width:320px}.image-editor-dev-canvas-wrapper{flex:1;min-width:0}.image-editor-dev-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.image-editor-dev-pill{display:inline-flex;align-items:center;gap:.35rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:999px;padding:.35rem 1rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.75rem;color:var(--color-primary)}.image-editor-dev-title{font-size:2.25rem;font-weight:700;color:var(--color-text);margin-bottom:.75rem}.image-editor-dev-subtitle{font-size:1rem;color:var(--color-textSecondary);max-width:640px}.image-editor-dev-back-link{align-self:flex-start;background:var(--color-background);border:1px solid var(--color-border);color:var(--color-text);border-radius:999px;padding:.65rem 1.25rem;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;transition:all .2s ease}.image-editor-dev-back-link:hover{border-color:var(--color-primary);color:var(--color-primary)}.image-editor-dev-warning{display:flex;gap:1rem;align-items:flex-start;border-left:6px solid var(--color-warning);background:var(--color-surface);background:linear-gradient(125deg,color-mix(in srgb,var(--color-warning) 12%,transparent),var(--color-surface))}.image-editor-dev-warning-icon{font-size:2rem}.image-editor-dev-warning h3{margin:0;font-size:1.1rem;color:var(--color-text)}.image-editor-dev-warning p{margin-top:.35rem;font-size:.95rem;color:var(--color-textSecondary)}.image-editor-dev-grid{display:grid;gap:1.5rem;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.image-editor-dev-panel-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.image-editor-dev-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.image-editor-dev-panel-label{text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;color:var(--color-textSecondary);font-weight:600;margin-bottom:.3rem}.image-editor-dev-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end}.image-editor-dev-panel-action{border:1px solid var(--color-border);border-radius:10px;padding:.65rem 1.2rem;font-weight:600;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:border-color .2s ease,color .2s ease}.image-editor-dev-panel-action:hover{border-color:var(--color-primary);color:var(--color-primary)}.image-editor-dev-button{border:none;border-radius:12px;padding:.85rem 1.4rem;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;color:#fff;display:inline-flex;align-items:center;gap:.4rem}.image-editor-dev-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.image-editor-dev-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 5px 15px #0f172a26}.image-editor-dev-button.primary{background:linear-gradient(135deg,var(--color-primary),#5b8dff)}.image-editor-dev-button.danger{background:linear-gradient(135deg,var(--color-danger),#c0392b)}.image-editor-dev-canvas{background:var(--color-background);border:1px dashed var(--color-border);border-radius:16px;padding:1.5rem;min-height:360px;display:flex;align-items:center;justify-content:center;overflow:auto}.image-editor-dev-canvas canvas{border-radius:12px;border:2px solid var(--color-border);max-width:100%;height:auto;background:var(--color-surface)}.image-editor-dev-meta{margin-top:1.25rem;font-size:.9rem;color:var(--color-textSecondary);display:flex;flex-wrap:wrap;gap:1rem}.image-editor-dev-sidebar{display:flex;flex-direction:column;gap:1.5rem}.image-editor-dev-add-button{width:100%;border-radius:12px;padding:1rem;font-size:1rem;font-weight:600;border:1px solid transparent;background:linear-gradient(120deg,var(--color-primary),#5b8dff);color:#fff;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}.image-editor-dev-add-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px #00000026}.image-editor-dev-file-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.image-editor-dev-layers-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem;max-height:520px;overflow-y:auto;padding-right:.5rem}.image-editor-dev-empty-state{text-align:center;color:var(--color-textSecondary);padding:2rem 1rem}.image-editor-dev-empty-state span{display:block;font-size:3rem;margin-bottom:.75rem}.image-editor-dev-layer-card{background:var(--color-background);border:2px solid var(--color-border);border-radius:14px;padding:1rem;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.image-editor-dev-layer-card.selected{border-color:var(--color-primary);box-shadow:0 10px 24px #5b8dff40;background:var(--color-background);background:color-mix(in srgb,var(--color-primary) 10%,var(--color-background))}.image-editor-dev-layer-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.image-editor-dev-layer-info{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0}.image-editor-dev-layer-name{font-weight:600;color:var(--color-text);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-editor-dev-layer-controls{display:flex;align-items:center;gap:.35rem}.image-editor-dev-icon-button{border:1px solid var(--color-border);background:var(--color-surface);border-radius:8px;padding:.35rem .5rem;font-size:.85rem;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.image-editor-dev-icon-button:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.image-editor-dev-icon-button:disabled{opacity:.4;cursor:not-allowed}.image-editor-dev-opacity{margin-top:1rem}.image-editor-dev-opacity label{display:block;font-size:.85rem;color:var(--color-textSecondary);margin-bottom:.35rem}.image-editor-dev-slider{width:100%;appearance:none;height:4px;border-radius:999px;background:var(--color-border);outline:none}.image-editor-dev-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 0 0 3px #5b8dff4d;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 40%,transparent);cursor:pointer}.image-editor-dev-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 0 0 3px #5b8dff4d;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 40%,transparent);cursor:pointer}.image-editor-dev-layer-meta{margin-top:.5rem;font-size:.8rem;color:var(--color-textSecondary)}.image-editor-dev-tips{background:var(--color-surface);border:1px dashed var(--color-border);border-radius:16px;padding:1.5rem}.image-editor-dev-tips h3{margin-top:0;font-size:1rem;color:var(--color-text)}.image-editor-dev-tips ul{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem;color:var(--color-textSecondary);font-size:.9rem}.image-editor-dev-tips li:before{content:"•";color:var(--color-primary);margin-right:.35rem}.image-editor-dev-search-card{display:flex;flex-direction:column;gap:1rem}.image-editor-dev-search-form{display:flex;flex-direction:column;gap:.75rem}.image-editor-dev-search-input{display:flex;align-items:center;gap:.5rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:12px;padding:.5rem .85rem}.image-editor-dev-search-input input{flex:1;border:none;background:transparent;color:var(--color-text);font-size:.95rem;outline:none}.image-editor-dev-search-clear{border:none;background:transparent;color:var(--color-textSecondary);font-size:1rem;cursor:pointer}.image-editor-dev-search-button{border:none;border-radius:10px;background:linear-gradient(120deg,var(--color-primary),#5b8dff);color:#fff;font-weight:600;padding:.85rem 1.2rem;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}.image-editor-dev-search-button:disabled{opacity:.6;cursor:not-allowed}.image-editor-dev-search-button:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 10px 20px #00000026}.image-editor-dev-search-helper,.image-editor-dev-search-footnote{font-size:.85rem;color:var(--color-textSecondary)}.image-editor-dev-search-error{color:var(--color-danger);font-size:.9rem}.image-editor-dev-search-empty{background:var(--color-background);border:1px dashed var(--color-border);border-radius:12px;padding:1rem;text-align:center;color:var(--color-textSecondary)}.image-editor-dev-search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.image-editor-dev-search-item{background:var(--color-background);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;gap:.5rem}.image-editor-dev-search-thumb{position:relative;width:100%;padding-top:65%;overflow:hidden}.image-editor-dev-search-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.image-editor-dev-search-add{position:absolute;left:.5rem;right:.5rem;bottom:.5rem;border:none;border-radius:999px;padding:.4rem .75rem;font-size:.8rem;font-weight:600;background:#0f172ad9;color:#fff;cursor:pointer;transition:background .2s ease}.image-editor-dev-search-add:disabled{opacity:.7}.image-editor-dev-search-add:not(:disabled):hover{background:#2754d1e6}.image-editor-dev-search-meta{padding:0 .75rem .75rem;display:flex;flex-direction:column;gap:.2rem}.image-editor-dev-search-title{font-size:.85rem;color:var(--color-text);margin:0;line-height:1.3}.image-editor-dev-search-author{font-size:.75rem;color:var(--color-textSecondary)}.image-editor-dev-load-more{margin-top:.5rem;border:1px solid var(--color-border);border-radius:12px;padding:.75rem 1rem;background:var(--color-surface);color:var(--color-text);font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease}.image-editor-dev-load-more:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.image-editor-dev-load-more:disabled{opacity:.6;cursor:not-allowed}@media(max-width:1024px){.image-editor-dev-workspace{flex-direction:column}.image-editor-dev-side-nav{width:100%;flex-direction:row;justify-content:space-between;position:static}.image-editor-dev-panel{width:100%}}@media(max-width:768px){.image-editor-dev{padding:1.5rem 1rem 3rem}.image-editor-dev-card{padding:1.5rem}.image-editor-dev-title{font-size:1.85rem}.image-editor-dev-toolbar{justify-content:flex-start}.image-editor-dev-side-nav{flex-wrap:wrap;gap:.35rem}}.game2048-container{max-width:600px;margin:0 auto;padding:2rem 1rem}.game2048-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem;flex-wrap:wrap}.game-title-section{flex:1;min-width:200px}.game-title{font-size:2.5rem;font-weight:700;margin:0 0 .5rem;color:var(--color-text)}.game-subtitle{font-size:1rem;color:var(--color-textSecondary);margin:0}.score-container{display:flex;gap:1rem}.score-box{background:var(--color-surface);border-radius:8px;padding:.75rem 1.25rem;min-width:100px;text-align:center;box-shadow:0 2px 4px #0000001a;position:relative}.score-box.high-score{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff}.score-label{font-size:.75rem;text-transform:uppercase;font-weight:600;opacity:.8;margin-bottom:.25rem}.score-value{font-size:1.5rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.5rem}.new-badge{font-size:.6rem;background:#f44;color:#fff;padding:.2rem .4rem;border-radius:4px;animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.game2048-controls{display:flex;gap:1rem;margin-bottom:1.5rem}.game-button{flex:1;padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;background:var(--color-surface);color:var(--color-text);transition:all .2s;box-shadow:0 2px 4px #0000001a;min-height:44px}.game-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.game-button:active{transform:translateY(0)}.game-button.primary{background:var(--color-primary);color:#fff}.game-button.danger{background:#f44;color:#fff;margin-top:1rem;width:100%}.game-button.large{font-size:1.25rem;padding:1rem 2rem}.game-button:disabled{opacity:.5;cursor:not-allowed}.settings-panel{background:var(--color-surface);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 2px 8px #0000001a}.settings-title{font-size:1.25rem;font-weight:600;margin:0 0 1rem;color:var(--color-text)}.settings-section:last-of-type{margin-bottom:0}.settings-label{display:block;font-weight:600;margin-bottom:.75rem;color:var(--color-text)}.grid-size-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.grid-size-btn{padding:.75rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);font-weight:600;cursor:pointer;transition:all .2s;min-height:44px}.grid-size-btn:hover{border-color:var(--color-primary)}.grid-size-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.high-scores-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.high-score-item{background:var(--color-background);padding:.75rem;border-radius:6px;display:flex;justify-content:space-between;align-items:center}.high-score-size{font-weight:600;color:var(--color-textSecondary)}.high-score-value{font-weight:700;color:var(--color-primary)}.game-board{background:var(--color-surface);border-radius:12px;padding:1rem;margin-bottom:2rem;box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;gap:.5rem;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.game-row{display:flex;gap:.5rem}.game-tile{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.5rem;transition:all .15s ease;box-shadow:0 2px 4px #0000001a;flex:1}.game-tile.empty{background:#eee4da59!important;box-shadow:none}.game-board.size-3 .game-tile{font-size:2rem}.game-board.size-4 .game-tile{font-size:1.5rem}.game-board.size-5 .game-tile{font-size:1.25rem}.game-board.size-6 .game-tile{font-size:1rem}.game-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-overlay-content{background:var(--color-surface);border-radius:16px;padding:3rem 2rem;text-align:center;max-width:400px;margin:1rem;animation:slideUp .3s}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.overlay-title{font-size:2.5rem;margin:0 0 1rem;color:var(--color-text)}.overlay-score{font-size:1.5rem;color:var(--color-textSecondary);margin:0 0 1rem}.overlay-high-score{font-size:1.25rem;color:var(--color-primary);font-weight:700;margin:0 0 2rem}.game-instructions{background:var(--color-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;box-shadow:0 2px 8px #0000001a}.instructions-title{font-size:1.5rem;font-weight:600;margin:0 0 1.5rem;color:var(--color-text)}.instructions-content{display:flex;flex-direction:column;gap:1rem}.instruction-item{display:flex;align-items:flex-start;gap:1rem}.instruction-icon{font-size:1.5rem;flex-shrink:0}.instruction-item p{margin:0;color:var(--color-textSecondary);line-height:1.6}.instruction-item strong{color:var(--color-text);font-weight:600}.game-features{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.features-title{font-size:1.5rem;font-weight:600;margin:0 0 1.5rem;color:var(--color-text);text-align:center}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.feature-card{text-align:center;padding:1.5rem;background:var(--color-background);border-radius:8px}.feature-name{font-size:1.1rem;font-weight:600;margin:0 0 .5rem;color:var(--color-text)}.feature-desc{margin:0;color:var(--color-textSecondary);font-size:.9rem;line-height:1.5}@media(max-width:768px){.game2048-container{padding:1rem .75rem}.game-title{font-size:2rem}.game2048-header{flex-direction:column;align-items:stretch}.score-container{width:100%}.score-box{flex:1}.game-board{padding:.75rem;gap:.4rem}.game-row{gap:.4rem}.game-tile{border-radius:6px}.game-board.size-3 .game-tile{font-size:1.75rem}.game-board.size-4 .game-tile{font-size:1.25rem}.game-board.size-5 .game-tile{font-size:1rem}.game-board.size-6 .game-tile{font-size:.85rem}.features-grid,.high-scores-list{grid-template-columns:1fr}}@media(max-width:480px){.game-title{font-size:1.75rem}.game-subtitle{font-size:.9rem}.game2048-controls{flex-direction:column}.game-button{width:100%}.settings-panel{padding:1rem}.game-board{padding:.5rem;gap:.3rem}.game-row{gap:.3rem}.game-tile{border-radius:4px}.game-board.size-5 .game-tile{font-size:.9rem}.game-board.size-6 .game-tile{font-size:.75rem}.overlay-title{font-size:2rem}.overlay-score{font-size:1.25rem}.game-instructions,.game-features{padding:1.5rem}}[data-theme=dark] .game-tile.empty{background:#eee4da26!important}[data-theme=dark] .game-board{box-shadow:0 4px 12px #0000004d}.minesweeper-container{max-width:1200px;margin:0 auto;padding:2rem}.minesweeper-header{text-align:center;margin-bottom:2rem}.minesweeper-header h1{font-size:2.5rem;margin-bottom:.5rem;color:var(--color-text)}.minesweeper-header .subtitle{font-size:1.1rem;color:var(--color-textSecondary)}.game-controls{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;margin-bottom:1.5rem;padding:1rem;background:var(--color-surface);border-radius:12px;box-shadow:0 2px 8px #0000001a}.control-group{display:flex;align-items:center;gap:.5rem}.control-group label{font-weight:600;color:var(--color-text)}.control-group select{padding:.5rem 1rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);font-size:.95rem;cursor:pointer;transition:all .3s ease}.control-group select:hover:not(:disabled){border-color:var(--color-primary)}.control-group select:disabled{opacity:.6;cursor:not-allowed}.btn-settings,.btn-new-game,.btn-apply{padding:.5rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease}.btn-settings{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.btn-settings:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-new-game{background:var(--color-primary);color:#fff}.btn-new-game:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.settings-panel{background:var(--color-surface);border:2px solid var(--color-border);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 4px 12px #0000001a}.settings-panel h3{margin-top:0;margin-bottom:1rem;color:var(--color-text);text-align:center}.settings-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1rem}.setting-item{display:flex;flex-direction:column;gap:.5rem}.setting-item label{font-size:.9rem;font-weight:600;color:var(--color-text)}.setting-item input{padding:.5rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);font-size:1rem;appearance:textfield;-moz-appearance:textfield}.setting-item input::-webkit-outer-spin-button,.setting-item input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting-item input:focus{outline:none;border-color:var(--color-primary)}.btn-apply{width:100%;background:var(--color-primary);color:#fff;padding:.75rem}.btn-apply:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.game-stats{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.stat-box{background:var(--color-surface);border-radius:12px;padding:1rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;box-shadow:0 2px 8px #0000001a;min-width:120px}.stat-box.high-score{border:2px solid var(--color-warning)}.stat-icon{font-size:1.5rem}.stat-value{font-size:1.5rem;font-weight:700;color:var(--color-text)}.stat-label{font-size:.85rem;color:var(--color-textSecondary);text-transform:uppercase;letter-spacing:.5px}.game-message{padding:1rem;border-radius:12px;text-align:center;margin-bottom:1.5rem;font-weight:600}.game-message.info{background:#3b82f61a;border:2px solid rgba(59,130,246,.3);color:#3b82f6}.game-message.success{background:#22c55e1a;border:2px solid rgba(34,197,94,.3);color:#22c55e}.game-message.danger{background:#ef44441a;border:2px solid rgba(239,68,68,.3);color:#ef4444}.game-message p{margin:.25rem 0}.game-message .hint{font-size:.9rem;font-weight:400;opacity:.8}.game-message .new-high-score{font-size:1.1rem;font-weight:700;animation:pulse 1s infinite}.game-board-wrapper{display:flex;justify-content:center;margin-bottom:2rem;overflow-x:auto;padding:1rem}.game-board{display:grid;gap:1px;background:var(--color-border);border:3px solid var(--color-border);border-radius:8px;padding:1px;box-shadow:0 4px 12px #00000026}.minesweeper-cell{width:32px;height:32px;border:none;background:var(--color-surface);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;transition:all .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.minesweeper-cell:hover:not(.revealed):not(:disabled){background:var(--color-primary-light, #e0e7ff);transform:scale(.95)}.minesweeper-cell:active:not(.revealed):not(:disabled){transform:scale(.9)}.minesweeper-cell.revealed{background:var(--color-background);cursor:default}.minesweeper-cell.revealed:not(.mine):hover{cursor:pointer;background:#3b82f60d}.minesweeper-cell.revealed:not(.mine):active{transform:scale(.95)}.minesweeper-cell.revealed.mine{background:#fee2e2;color:#dc2626}.minesweeper-cell.flagged{background:#fef3c7}.cell-flag,.cell-mine{font-size:1.2rem}.cell-number{font-weight:700}.cell-number-1{color:#3b82f6}.cell-number-2{color:#22c55e}.cell-number-3{color:#ef4444}.cell-number-4{color:#8b5cf6}.cell-number-5{color:#f97316}.cell-number-6{color:#06b6d4}.cell-number-7{color:#0f172a}.cell-number-8{color:#64748b}.game-instructions{background:var(--color-surface);border-radius:12px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 2px 8px #0000001a}.game-instructions h3{margin-top:0;margin-bottom:1rem;color:var(--color-text)}.game-instructions ul{list-style:none;padding:0;margin:0}.game-instructions li{padding:.5rem 0;color:var(--color-text);line-height:1.6}.game-instructions strong{color:var(--color-primary)}.game-features{margin-top:2rem}.game-features h3{text-align:center;margin-bottom:1.5rem;color:var(--color-text);font-size:1.5rem}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.feature-card{background:var(--color-surface);border-radius:12px;padding:1.5rem;text-align:center;box-shadow:0 2px 8px #0000001a;transition:transform .3s ease}.feature-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px #00000026}.feature-icon{font-size:2.5rem;display:block;margin-bottom:.5rem}.feature-card h4{margin:.5rem 0;color:var(--color-text);font-size:1.1rem}.feature-card p{margin:.5rem 0 0;color:var(--color-textSecondary);font-size:.95rem;line-height:1.5}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:768px){.minesweeper-container{padding:1rem}.minesweeper-header h1{font-size:2rem}.game-controls,.control-group{flex-direction:column;align-items:stretch}.control-group select{width:100%}.minesweeper-cell{width:28px;height:28px;font-size:.9rem}.settings-inputs,.features-grid{grid-template-columns:1fr}}@media(max-width:480px){.minesweeper-container{padding:.5rem}.minesweeper-header h1{font-size:1.75rem}.minesweeper-header .subtitle{font-size:1rem}.minesweeper-cell{width:24px;height:24px;font-size:.8rem}.game-stats{gap:.5rem}.stat-box{padding:.75rem 1rem;min-width:100px}.stat-value{font-size:1.25rem}.game-board-wrapper{padding:.5rem}}[data-theme=dark] .minesweeper-cell.revealed.mine{background:#7f1d1d}[data-theme=dark] .minesweeper-cell.flagged{background:#78350f}[data-theme=dark] .cell-number-7{color:#e2e8f0}[data-theme=dark] .cell-number-8{color:#94a3b8}@media(hover:none)and (pointer:coarse){.minesweeper-cell{width:36px;height:36px}.minesweeper-cell:active:not(.revealed):not(:disabled){background:var(--color-primary-light, #e0e7ff)}}.bill-scanner{margin-bottom:1.5rem;padding:1.5rem;background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-radius:12px;border:2px dashed var(--color-border)}.scanner-header{text-align:center;margin-bottom:1rem}.scanner-title{font-size:1.125rem;font-weight:600;color:var(--color-text);margin:0 0 .5rem}.scanner-description{font-size:.9rem;color:var(--color-textSecondary);margin:0}.scan-button{width:100%;padding:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:1rem;font-weight:600;border:2px solid var(--color-primary);border-radius:8px;background:var(--color-primary);color:#fff;cursor:pointer;transition:all .2s;margin-bottom:1rem}.scan-button:hover:not(:disabled){background:var(--color-primaryDark);transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.scan-button:disabled{opacity:.6;cursor:not-allowed}.scan-icon{font-size:1.5rem}.preview-container{position:relative;margin-bottom:1rem;border-radius:8px;overflow:hidden;background:var(--color-background)}.bill-preview{width:100%;max-height:300px;object-fit:contain;display:block}.clear-preview-btn{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;padding:0;font-size:1.25rem;border:none;border-radius:50%;background:#ef4444e6;color:#fff;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.clear-preview-btn:hover{background:#dc2626;transform:scale(1.1)}.scanning-progress{margin-bottom:1rem}.progress-bar{width:100%;height:8px;background:var(--color-background);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primaryDark));transition:width .3s ease;border-radius:4px}.progress-text{text-align:center;font-size:.9rem;font-weight:600;color:var(--color-primary);margin:0}.scanner-error{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#ef4444;font-size:.9rem;margin-bottom:1rem}.scanner-tips{background:var(--color-surface);padding:1rem;border-radius:8px;border-left:3px solid var(--color-primary)}.tips-title{font-size:.9rem;font-weight:600;color:var(--color-text);margin:0 0 .5rem}.tips-list{list-style:none;padding:0;margin:0}.tips-list li{font-size:.85rem;color:var(--color-textSecondary);padding:.25rem 0 .25rem 1.25rem;position:relative}.tips-list li:before{content:"✓";position:absolute;left:0;color:var(--color-primary);font-weight:600}@media(max-width:768px){.bill-scanner{padding:1.25rem}.scanner-title{font-size:1rem}.scanner-description{font-size:.85rem}.scan-button{padding:.875rem;font-size:.95rem}.bill-preview{max-height:250px}}@media(max-width:480px){.bill-scanner{padding:1rem}.scanner-title{font-size:.95rem}.scan-icon{font-size:1.25rem}.bill-preview{max-height:200px}.tips-list li{font-size:.8rem}}.split-bill-container{max-width:1200px;margin:0 auto;padding:2rem}.split-bill-header{text-align:center;margin-bottom:3rem}.split-bill-hero{max-width:800px;margin:0 auto}.split-bill-title{font-size:2.5rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;line-height:1.2}.split-bill-subtitle{font-size:1.125rem;color:var(--color-textSecondary);line-height:1.6;margin:0}.calculator-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem}.calculator-card,.results-card{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.mode-switcher{display:flex;gap:.5rem;margin-bottom:1.5rem;background:var(--color-background);padding:.25rem;border-radius:8px}.mode-button{flex:1;padding:.75rem 1rem;font-size:.95rem;font-weight:600;border:none;border-radius:6px;background:transparent;color:var(--color-text);cursor:pointer;transition:all .2s}.mode-button:hover{background:var(--color-surface)}.mode-button.active{background:var(--color-primary);color:#fff}.itemized-section{width:100%}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-subtitle{font-size:1.125rem;font-weight:600;color:var(--color-text);margin:0}.add-button{padding:.5rem 1rem;font-size:.9rem;font-weight:600;border:2px solid var(--color-primary);border-radius:6px;background:transparent;color:var(--color-primary);cursor:pointer;transition:all .2s}.add-button:hover{background:var(--color-primary);color:#fff}.items-section,.people-section,.discounts-section,.charges-section{margin-bottom:1.5rem;padding:1rem;background:var(--color-background);border-radius:8px}.empty-state{text-align:center;padding:2rem 1rem;color:var(--color-textSecondary)}.items-list{display:flex;flex-direction:column;gap:.75rem}.item-row{display:grid;grid-template-columns:1fr auto auto auto;gap:.5rem;align-items:center}.item-name-input{padding:.5rem;font-size:.95rem;border:2px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text)}.item-name-input:focus{outline:none;border-color:var(--color-primary)}.item-price-wrapper{position:relative;display:flex;align-items:center}.input-prefix-small{position:absolute;left:.5rem;font-weight:600;color:var(--color-textSecondary);pointer-events:none;font-size:.9rem}.item-price-input{width:100px;padding:.5rem .5rem .5rem 1.5rem;font-size:.95rem;border:2px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);-moz-appearance:textfield}.item-price-input::-webkit-outer-spin-button,.item-price-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.item-price-input:focus{outline:none;border-color:var(--color-primary)}.item-qty-input{width:60px;padding:.5rem;font-size:.95rem;text-align:center;border:2px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);-moz-appearance:textfield}.item-qty-input::-webkit-outer-spin-button,.item-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.item-qty-input:focus{outline:none;border-color:var(--color-primary)}.remove-button{width:32px;height:32px;padding:0;font-size:1.25rem;border:none;border-radius:6px;background:#ef44441a;color:#ef4444;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.remove-button:hover{background:#ef4444;color:#fff}.people-list{display:flex;flex-direction:column;gap:1rem}.person-card{padding:1rem;background:var(--color-surface);border-radius:8px;border:2px solid var(--color-border)}.person-header{display:flex;gap:.5rem;align-items:center;margin-bottom:.75rem}.person-name-input{flex:1;padding:.5rem;font-size:.95rem;font-weight:600;border:2px solid var(--color-border);border-radius:6px;background:var(--color-background);color:var(--color-text)}.person-name-input:focus{outline:none;border-color:var(--color-primary)}.person-items{margin-top:.75rem}.items-label{font-size:.85rem;font-weight:600;color:var(--color-textSecondary);margin-bottom:.5rem}.no-items-text{font-size:.85rem;color:var(--color-textSecondary);font-style:italic}.items-checkboxes{display:flex;flex-direction:column;gap:.5rem}.item-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:background .2s}.item-checkbox:hover{background:var(--color-background)}.item-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.checkbox-label{font-size:.9rem;color:var(--color-text)}.items-quantity-list{display:flex;flex-direction:column;gap:.75rem}.item-quantity-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem;background:var(--color-background);border-radius:6px;border:1px solid var(--color-border)}.item-info{flex:1;font-size:.9rem;color:var(--color-text);font-weight:500}.quantity-controls{display:flex;align-items:center;gap:.375rem}.qty-btn{width:28px;height:28px;padding:0;font-size:1rem;font-weight:600;border:2px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.qty-btn:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary);color:#fff}.qty-btn:disabled{opacity:.3;cursor:not-allowed}.qty-input{width:45px;padding:.375rem .25rem;text-align:center;font-size:.9rem;font-weight:600;border:2px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text);-moz-appearance:textfield}.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qty-input:focus{outline:none;border-color:var(--color-primary)}.remaining-qty{font-size:.75rem;color:var(--color-textSecondary);font-weight:500;min-width:50px;text-align:right}.itemized-results{max-height:80vh;overflow-y:auto}.people-results{margin-top:1.5rem}.no-results-text{text-align:center;color:var(--color-textSecondary);font-style:italic;padding:2rem 1rem}.person-result-card{padding:1rem;background:var(--color-background);border-radius:8px;margin-bottom:1rem;border:2px solid var(--color-border)}.person-result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:2px solid var(--color-border)}.person-result-name{font-size:1.125rem;font-weight:700;color:var(--color-text);margin:0}.person-result-total{font-size:1.5rem;font-weight:700;color:var(--color-primary)}.person-result-details{display:flex;flex-direction:column;gap:.5rem}.person-result-row{display:flex;justify-content:space-between;font-size:.9rem;color:var(--color-textSecondary)}.person-result-row.discount-row{color:#10b981}.person-items-list{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--color-border)}.items-list-label{font-size:.85rem;font-weight:600;color:var(--color-textSecondary);margin-bottom:.25rem}.person-items-list ul{list-style:none;padding:0;margin:0}.person-items-list li{font-size:.85rem;color:var(--color-textSecondary);padding:.25rem 0}.result-row.discount{color:#10b981}.input-group{margin-bottom:1.5rem}.input-label{display:block;font-weight:600;color:var(--color-text);margin-bottom:.5rem;font-size:.95rem}.currency-select{width:100%;padding:.75rem 1rem;font-size:1rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:border-color .2s}.currency-select:focus{outline:none;border-color:var(--color-primary)}.currency-select option{background:var(--color-background);color:var(--color-text);padding:.5rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-field{width:100%;padding:.75rem 1rem;font-size:1rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);transition:border-color .2s;-moz-appearance:textfield}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field:focus{outline:none;border-color:var(--color-primary)}.input-field.with-prefix{padding-left:2.5rem}.input-prefix{position:absolute;left:1rem;font-weight:600;color:var(--color-textSecondary);pointer-events:none}.input-suffix{position:absolute;right:1rem;font-weight:600;color:var(--color-textSecondary);pointer-events:none}.input-hint{font-size:.8rem;color:var(--color-textSecondary);margin-top:.375rem;font-style:italic}.preset-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}.preset-button{padding:.5rem 1rem;font-size:.9rem;font-weight:500;border:2px solid var(--color-border);border-radius:6px;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:all .2s}.preset-button:hover,.preset-button.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.people-controls{display:flex;align-items:center;gap:.5rem}.people-button{width:48px;height:48px;font-size:1.5rem;font-weight:600;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.people-button:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary);color:#fff}.people-button:disabled{opacity:.4;cursor:not-allowed}.people-input{flex:1;text-align:center;font-weight:600}.error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:.9rem;margin-top:1rem}.error-icon{font-size:1.2rem}.action-buttons{display:flex;gap:1rem;margin-top:2rem}.action-button{flex:1;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.action-button.primary{background:var(--color-primary);color:#fff}.action-button.primary:hover:not(:disabled){background:var(--color-primaryDark);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.action-button.secondary{background:var(--color-background);color:var(--color-text);border:2px solid var(--color-border)}.action-button.secondary:hover{border-color:var(--color-primary);background:var(--color-surface)}.action-button:disabled{opacity:.5;cursor:not-allowed}.results-card{position:sticky;top:2rem}.results-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:1.5rem;text-align:center}.result-section{padding:1.5rem;background:var(--color-background);border-radius:8px;margin-bottom:1rem}.result-section.highlight{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border:2px solid var(--color-primary)}.result-section-title{font-size:1rem;font-weight:600;color:var(--color-textSecondary);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.result-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--color-border)}.result-row:last-child{border-bottom:none}.result-row.total{margin-top:.5rem;padding-top:1rem;border-top:2px solid var(--color-border);font-weight:700}.result-row.large{padding:1rem 0}.result-label{color:var(--color-textSecondary);font-size:.95rem}.result-value{font-size:1.1rem;font-weight:600;color:var(--color-text)}.result-value.highlight-amount{font-size:1.75rem;color:var(--color-primary)}.features-section{margin-bottom:3rem}.section-title{font-size:2rem;font-weight:700;color:var(--color-text);text-align:center;margin-bottom:2rem}.feature-item{background:var(--color-surface);border-radius:12px;padding:1.5rem;text-align:center;box-shadow:0 2px 8px #0000001a;transition:transform .2s}.feature-title{font-size:1.125rem;font-weight:600;color:var(--color-text);margin-bottom:.5rem}.feature-description{font-size:.95rem;color:var(--color-textSecondary);line-height:1.5;margin:0}.usage-section{margin-bottom:3rem}.usage-steps{max-width:800px;margin:0 auto}.usage-step{display:flex;gap:1.5rem;margin-bottom:2rem;padding:1.5rem;background:var(--color-surface);border-radius:12px;box-shadow:0 2px 8px #0000001a}.step-number{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#fff;background:var(--color-primary);border-radius:50%}.step-content{flex:1}.step-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:.5rem}.step-description{font-size:.95rem;color:var(--color-textSecondary);line-height:1.6;margin:0}.tips-section{margin-bottom:3rem}.tips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.tip-card{background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.tip-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.tip-list{list-style:none;padding:0;margin:0}.tip-list li{padding:.5rem 0;color:var(--color-textSecondary);line-height:1.6;border-bottom:1px solid var(--color-border)}.tip-list li:last-child{border-bottom:none}.tip-list strong{color:var(--color-primary);font-weight:600}.share-modal{position:fixed;top:20px;right:20px;z-index:1000;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.share-modal-content{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:var(--color-primary);color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026}.share-modal-icon{font-size:1.5rem;font-weight:700}.share-modal-content p{margin:0;font-weight:600;font-size:.95rem}@media(max-width:768px){.split-bill-container{padding:1.5rem 1rem}.split-bill-title{font-size:2rem}.split-bill-subtitle{font-size:1rem}.calculator-section{grid-template-columns:1fr}.results-card{position:static;margin-top:2rem}.calculator-card,.results-card{padding:1.5rem}.features-grid,.tips-grid{grid-template-columns:1fr}.usage-step{flex-direction:column;text-align:center}.step-number{margin:0 auto}.item-row{grid-template-columns:1fr;gap:.5rem}.item-price-input,.item-qty-input{width:100%}}@media(max-width:480px){.split-bill-container{padding:1rem .75rem}.split-bill-title{font-size:1.75rem}.split-bill-subtitle{font-size:.95rem}.calculator-card,.results-card{padding:1.25rem;border-radius:8px}.mode-switcher{flex-direction:column}.mode-button{width:100%}.preset-buttons{gap:.375rem}.preset-button{flex:1 1 calc(33.333% - .375rem);min-width:0;padding:.5rem;font-size:.85rem}.action-buttons{flex-direction:column}.people-button{width:44px;height:44px;font-size:1.25rem}.result-value.highlight-amount{font-size:1.5rem}.feature-item,.tip-card,.usage-step{padding:1.25rem}.section-title{font-size:1.5rem}.feature-icon{font-size:2rem}.step-number{width:40px;height:40px;font-size:1.25rem}.step-title{font-size:1.1rem}.section-header{flex-direction:column;align-items:stretch;gap:.5rem}.add-button{width:100%}.person-result-header{flex-direction:column;align-items:flex-start;gap:.5rem}.person-result-total{align-self:flex-end}.share-modal{left:10px;right:10px;top:10px}.share-modal-content{padding:.875rem 1.25rem;font-size:.9rem}}.particle-playground-container{width:100%;max-width:1400px;margin:0 auto;padding:2rem}.particle-playground-header{text-align:center;margin-bottom:3rem}.page-title{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:var(--color-text)}.page-subtitle{font-size:1.1rem;color:var(--color-textSecondary);max-width:800px;margin:0 auto;line-height:1.6}.particle-playground-content{display:grid;grid-template-columns:2fr 1fr;gap:2rem;margin-bottom:3rem}.canvas-section{display:flex;flex-direction:column;gap:1rem}.canvas-wrapper{position:relative;background:var(--color-surface);border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;height:600px}.particle-canvas{width:100%;height:100%;display:block;background:#000}.canvas-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}.overlay-text{color:#fff;font-size:1.2rem;text-align:center;padding:2rem;max-width:500px}.canvas-controls{display:flex;gap:1rem;justify-content:center}.control-button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;min-width:120px}.control-button.start{background:var(--color-primary);color:#fff}.control-button.start:hover{transform:translateY(-2px);box-shadow:0 4px 12px #6366f166}.control-button.stop{background:#ef4444;color:#fff}.control-button.stop:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ef444466}.control-button.secondary{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.control-button.secondary:hover:not(:disabled){background:var(--color-background);border-color:var(--color-primary)}.controls-section{display:flex;flex-direction:column;gap:1.5rem}.control-panel,.info-panel{background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.panel-title{font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:var(--color-text);padding-bottom:.75rem;border-bottom:2px solid var(--color-border)}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.preset-button{padding:.75rem;font-size:.95rem;font-weight:600;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:all .2s}.preset-button:hover{border-color:var(--color-primary);background:var(--color-surface)}.preset-button.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.control-group{margin-bottom:1.25rem}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:.95rem;font-weight:500;margin-bottom:.5rem;color:var(--color-text)}.control-slider{width:100%;height:6px;border-radius:3px;background:var(--color-background);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:all .2s}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:all .2s}.control-select{width:100%;padding:.75rem;font-size:.95rem;border:2px solid var(--color-border);border-radius:8px;background:var(--color-background);color:var(--color-text);cursor:pointer;transition:all .2s}.control-select:hover,.control-select:focus{border-color:var(--color-primary);outline:none}.control-checkbox{display:flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none}.control-checkbox input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-primary)}.control-checkbox span{font-size:.95rem;color:var(--color-text)}.info-list{padding-left:1.5rem;margin:0}.info-list li{margin-bottom:.75rem;color:var(--color-textSecondary);line-height:1.5}.info-list li:last-child{margin-bottom:0}.feature-info-section{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.section-title{font-size:1.8rem;font-weight:600;margin-bottom:2rem;text-align:center;color:var(--color-text)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.feature-item{text-align:center;padding:1.5rem;background:var(--color-background);border-radius:8px;transition:transform .2s}.feature-item:hover{transform:translateY(-4px)}.feature-icon{font-size:2.5rem;margin-bottom:1rem}.feature-title{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:var(--color-text)}.feature-description{font-size:.95rem;color:var(--color-textSecondary);line-height:1.5}@media(max-width:1024px){.particle-playground-content{grid-template-columns:1fr}.canvas-wrapper{height:500px}}@media(max-width:768px){.particle-playground-container{padding:1rem}.page-title{font-size:2rem}.page-subtitle{font-size:1rem}.canvas-wrapper{height:400px}.canvas-controls{flex-direction:column}.control-button{width:100%}.preset-grid,.features-grid{grid-template-columns:1fr}.overlay-text{font-size:1rem;padding:1rem}}@media(max-width:480px){.page-title{font-size:1.75rem}.canvas-wrapper{height:300px}.section-title{font-size:1.5rem}}.weather-simulation-container{width:100%;padding:0}.weather-header{background:linear-gradient(135deg,var(--color-primary) 0%,#6366f1 100%);color:#fff;padding:3rem 2rem;text-align:center}.weather-hero{max-width:800px;margin:0 auto}.weather-title{font-size:2.5rem;font-weight:700;margin:0 0 1rem;line-height:1.2}.weather-subtitle{font-size:1.1rem;opacity:.95;line-height:1.6;margin:0}.weather-content{max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 400px;gap:2rem}.weather-canvas-section{position:relative;background:var(--color-surface);border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #0000001a;min-height:600px}.weather-canvas{width:100%;height:100%;display:block;background:linear-gradient(180deg,#1a1a2e,#0f0f1e)}:root[data-theme=dark] .weather-canvas{background:linear-gradient(180deg,#0a0a15,#000)}:root[data-theme=light] .weather-canvas{background:linear-gradient(180deg,#667eea,#764ba2)}.canvas-overlay{position:absolute;top:1rem;right:1rem}.play-pause-btn{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:50%;width:60px;height:60px;font-size:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.play-pause-btn:hover{background:#ffffff4d;transform:scale(1.1)}.weather-controls{background:var(--color-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;max-height:600px;overflow-y:auto}.controls-title{font-size:1.5rem;font-weight:600;margin:0 0 1.5rem;color:var(--color-text)}.control-group{margin-bottom:1.5rem}.control-label{display:block;font-size:.95rem;font-weight:500;color:var(--color-text);margin-bottom:.5rem}.preset-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-btn{background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;padding:.75rem;font-size:.9rem;font-weight:500;color:var(--color-text);cursor:pointer;transition:all .2s ease}.preset-btn:hover{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.preset-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.control-slider{width:100%;height:6px;border-radius:3px;background:var(--color-border);outline:none;-webkit-appearance:none;appearance:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:all .2s ease}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;transition:all .2s ease}.control-slider::-moz-range-thumb:hover{transform:scale(1.2)}.control-color{width:100%;height:50px;border-radius:8px;border:2px solid var(--color-border);cursor:pointer;background:var(--color-background)}.control-color::-webkit-color-swatch-wrapper{padding:4px}.control-color::-webkit-color-swatch{border:none;border-radius:6px}.control-color::-moz-color-swatch{border:none;border-radius:6px}.toggle-group{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.toggle-btn{background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;padding:.75rem;font-size:.95rem;font-weight:500;color:var(--color-text);cursor:pointer;transition:all .2s ease}.toggle-btn:hover{border-color:var(--color-primary)}.toggle-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.action-buttons{display:flex;gap:.5rem;margin-top:2rem}.action-btn{flex:1;padding:.875rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;border:none}.reset-btn{background:var(--color-danger);color:#fff}.reset-btn:hover{opacity:.9;transform:translateY(-1px)}.weather-info-section{max-width:1200px;margin:3rem auto 0;padding:0 2rem 3rem}.info-content{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.section-title{font-size:1.75rem;font-weight:600;color:var(--color-text);margin:0 0 2rem;text-align:center}.feature-item{text-align:center}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-title{font-size:1.1rem;font-weight:600;color:var(--color-text);margin:0 0 .5rem}.feature-description{font-size:.95rem;color:var(--color-textSecondary);line-height:1.6;margin:0}.weather-controls::-webkit-scrollbar{width:6px}.weather-controls::-webkit-scrollbar-track{background:var(--color-background);border-radius:3px}.weather-controls::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.weather-controls::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}@media(max-width:1024px){.weather-content{grid-template-columns:1fr}.weather-controls{max-height:none}.weather-canvas-section{min-height:500px}}@media(max-width:768px){.weather-title{font-size:2rem}.weather-subtitle{font-size:1rem}.weather-content{padding:1rem}.weather-header{padding:2rem 1rem}.weather-canvas-section{min-height:400px}.preset-buttons{grid-template-columns:1fr}.features-grid{grid-template-columns:1fr;gap:1.5rem}.play-pause-btn{width:50px;height:50px;font-size:1.25rem}}@media(max-width:480px){.weather-title{font-size:1.5rem}.weather-subtitle{font-size:.9rem}.weather-canvas-section{min-height:350px}.controls-title{font-size:1.25rem}}.wheel-of-names{min-height:100vh;background-color:var(--color-background);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.won-header{background-color:var(--color-surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem 2rem;border-bottom:1px solid var(--color-border)}.won-logo{display:flex;align-items:center;gap:1rem;max-width:1400px;margin:0 auto}.logo-circle{width:50px;height:50px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-info) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 12px #00000026}.won-logo h1{margin:0;font-size:28px;font-weight:700;color:var(--color-text)}.won-container{max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:1fr 400px;gap:2rem;align-items:start}.won-wheel-panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:20px;padding:3rem;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;align-items:center;gap:2rem}.wheel-container{position:relative;width:500px;height:500px;display:flex;align-items:center;justify-content:center}.wheel-pointer-top{position:absolute;top:-30px;left:50%;transform:translate(-50%);z-index:10;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.wheel-canvas-wrapper{width:500px;height:500px;transition:transform 4s cubic-bezier(.17,.67,.12,.99)}.wheel-canvas{display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.15))}.won-spin-button{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-info) 100%);color:#fff;border:none;border-radius:50px;padding:1.2rem 4rem;font-size:22px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #007bff4d;text-transform:uppercase}.won-spin-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #007bff66}.won-spin-button:active:not(:disabled){transform:translateY(0)}.won-spin-button:disabled{opacity:.6;cursor:not-allowed}.won-spin-button.spinning{animation:pulse 1s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.won-result{display:flex;align-items:center;gap:1.5rem;background:linear-gradient(135deg,var(--color-success) 0%,#27ae60 100%);color:#fff;padding:1.5rem 2.5rem;border-radius:15px;box-shadow:0 6px 20px #28a7454d;animation:resultSlideIn .5s ease-out}@keyframes resultSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.result-sparkle{font-size:32px;animation:sparkle 1s infinite}@keyframes sparkle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}}.result-content{flex:1}.result-label{font-size:14px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem}.result-name{font-size:28px;font-weight:700;color:#fff}.won-controls-panel{display:flex;flex-direction:column;gap:1.5rem}.won-section{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:15px;padding:1.5rem;box-shadow:0 2px 8px #0000000d}.won-section-title{margin:0 0 1rem;font-size:18px;font-weight:700;color:var(--color-text)}.won-add-form{display:flex;gap:.75rem}.won-textarea-hint{font-size:13px;color:var(--color-textSecondary);margin-bottom:.75rem}.won-textarea{width:100%;padding:.875rem 1rem;border:2px solid var(--color-border);border-radius:10px;font-size:15px;font-family:inherit;line-height:1.6;transition:all .2s;outline:none;background-color:var(--color-background);color:var(--color-text);resize:vertical;min-height:180px}.won-textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #007bff1a}.won-textarea::placeholder{color:var(--color-textMuted);opacity:.6}.won-input{flex:1;padding:.875rem 1rem;border:2px solid var(--color-border);border-radius:10px;font-size:15px;transition:all .2s;outline:none;background-color:var(--color-background);color:var(--color-text)}.won-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #007bff1a}.won-input-small{flex:0 0 80px;padding:.875rem .5rem}.won-button{padding:.875rem 1.75rem;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.won-button-primary{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-info) 100%);color:#fff}.won-button-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.won-weight-toggle{display:flex;align-items:center;gap:.75rem;font-size:15px;font-weight:500;cursor:pointer;color:var(--color-text)}.won-weight-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer}.won-weight-info{margin-top:.75rem;font-size:13px;color:var(--color-textSecondary);line-height:1.5;padding:.75rem;background-color:var(--color-background);border-radius:8px;border-left:3px solid var(--color-info)}.won-section-list{max-height:600px;display:flex;flex-direction:column}.won-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.won-list-actions{display:flex;gap:.5rem}.won-icon-button{width:36px;height:36px;border:1px solid var(--color-border);background-color:var(--color-background);color:var(--color-text);border-radius:8px;cursor:pointer;transition:all .2s;font-size:16px;display:flex;align-items:center;justify-content:center}.won-icon-button:hover{background-color:var(--color-surfaceHover);border-color:var(--color-primary);transform:translateY(-2px)}.won-icon-button.won-danger:hover{background-color:var(--color-danger);color:#fff;border-color:var(--color-danger)}.won-items-list{overflow-y:auto;max-height:500px;display:flex;flex-direction:column;gap:.5rem}.won-items-list::-webkit-scrollbar{width:8px}.won-items-list::-webkit-scrollbar-track{background:var(--color-background);border-radius:10px}.won-items-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:10px}.won-items-list::-webkit-scrollbar-thumb:hover{background:var(--color-textMuted)}.won-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background-color:var(--color-background);border:1px solid var(--color-border);border-radius:10px;transition:all .2s}.won-item:hover{background-color:var(--color-surfaceHover);transform:translate(4px)}.won-item-color{width:8px;height:36px;border-radius:4px;flex-shrink:0}.won-item-name{flex:1;font-size:15px;color:var(--color-text);cursor:pointer;padding:.25rem;border-radius:4px;transition:background .2s;display:flex;align-items:center;gap:.5rem}.won-item-name:hover{background-color:var(--color-surfaceHover)}.won-item-probability{font-size:12px;font-weight:600;color:var(--color-primary);background-color:var(--color-surface);padding:.25rem .5rem;border-radius:4px}.won-item-weight{display:flex;align-items:center;gap:.5rem}.won-weight-input-small{width:60px;padding:.375rem .5rem;border:1px solid var(--color-border);border-radius:6px;font-size:14px;text-align:center;background-color:var(--color-background);color:var(--color-text);outline:none;transition:all .2s}.won-weight-input-small:focus{border-color:var(--color-primary);box-shadow:0 0 0 2px #007bff1a}.won-item-actions{display:flex;gap:.5rem}.won-item-button{width:32px;height:32px;border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text);border-radius:6px;cursor:pointer;transition:all .2s;font-size:14px;display:flex;align-items:center;justify-content:center}.won-item-button:hover{transform:scale(1.1);border-color:var(--color-primary)}.won-item-button.won-delete:hover{background-color:var(--color-danger);color:#fff;border-color:var(--color-danger)}.won-item-button.won-save{background-color:var(--color-success);color:#fff;border-color:var(--color-success)}.won-item-button.won-cancel{background-color:var(--color-danger);color:#fff;border-color:var(--color-danger)}.won-item-edit{display:flex;align-items:center;gap:.5rem;flex:1}.won-item-input{flex:1;padding:.5rem;border:2px solid var(--color-primary);border-radius:6px;font-size:15px;outline:none;background-color:var(--color-background);color:var(--color-text)}.won-empty{text-align:center;padding:3rem 1rem;color:var(--color-textMuted)}.empty-icon{font-size:48px;display:block;margin-bottom:1rem;opacity:.5}.won-empty p{margin:0;font-size:16px}.won-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}.confetti-piece{position:absolute;width:10px;height:10px;top:-10px;animation:confettiFall linear forwards}@keyframes confettiFall{to{transform:translateY(100vh) rotate(720deg);opacity:0}}@media(max-width:1200px){.won-container{grid-template-columns:1fr;gap:2rem}.won-controls-panel{max-width:600px;margin:0 auto;width:100%}}@media(max-width:768px){.won-header{padding:1rem}.won-logo h1{font-size:20px}.logo-circle{width:40px;height:40px;font-size:20px}.won-container{padding:1rem;gap:1.5rem}.won-wheel-panel{padding:2rem 1rem}.wheel-container{width:100%;max-width:400px;height:auto;aspect-ratio:1}.wheel-canvas-wrapper,.wheel-canvas{width:100%;height:100%}.wheel-pointer-top{top:-20px}.wheel-pointer-top svg{width:40px;height:40px}.won-spin-button{padding:1rem 3rem;font-size:18px}.won-result{padding:1rem 1.5rem}.result-sparkle{font-size:24px}.result-name{font-size:22px}.won-section{padding:1rem}.won-add-form{flex-direction:column}.won-input-small{flex:1}.won-button{width:100%}}@media(max-width:480px){.won-logo h1{font-size:18px}.wheel-container{max-width:320px}.won-spin-button{padding:.875rem 2rem;font-size:16px}.result-name{font-size:18px}}.pomodoro-container{max-width:1200px;margin:0 auto;padding:2rem}.pomodoro-header{text-align:center;margin-bottom:2rem}.pomodoro-title{font-size:2.5rem;font-weight:700;color:var(--color-text);margin-bottom:.5rem}.pomodoro-subtitle{font-size:1.1rem;color:var(--color-textSecondary);max-width:600px;margin:0 auto}.pomodoro-main-card{display:flex;justify-content:center;margin-bottom:2rem}.timer-card{background:var(--color-surface);border-radius:20px;padding:3rem 2rem;box-shadow:0 4px 12px #0000001a;text-align:center;min-width:400px;transition:all .3s ease}.timer-card.work{border-top:4px solid #e74c3c}.timer-card.short_break{border-top:4px solid #3498db}.timer-card.long_break{border-top:4px solid #2ecc71}.session-label{font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:2rem}.timer-circle{position:relative;width:280px;height:280px;margin:0 auto 2rem}.progress-ring{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:var(--color-border);stroke-width:8}.progress-ring-fill{fill:none;stroke:var(--color-primary);stroke-width:8;stroke-linecap:round;stroke-dasharray:754;stroke-dashoffset:754;transition:stroke-dashoffset 1s linear}.timer-card.work .progress-ring-fill{stroke:#e74c3c}.timer-card.short_break .progress-ring-fill{stroke:#3498db}.timer-card.long_break .progress-ring-fill{stroke:#2ecc71}.timer-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.time-text{font-size:4rem;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;line-height:1}.sessions-count{font-size:1rem;color:var(--color-textSecondary);margin-top:.5rem}.timer-controls{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.control-btn{padding:.875rem 2rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:120px}.control-btn.primary{background:var(--color-primary);color:#fff}.control-btn.primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #007bff4d}.control-btn.secondary{background:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border)}.control-btn.secondary:hover:not(:disabled){background:var(--color-background);border-color:var(--color-primary)}.control-btn:disabled{opacity:.5;cursor:not-allowed}.stats-card{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a;margin-bottom:2rem}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.stats-title{font-size:1.5rem;font-weight:600;color:var(--color-text);margin:0}.reset-stats-btn{padding:.5rem 1rem;font-size:.875rem;background:transparent;color:var(--color-danger);border:1px solid var(--color-danger);border-radius:6px;cursor:pointer;transition:all .2s ease}.reset-stats-btn:hover{background:var(--color-danger);color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.stat-item{text-align:center;padding:1.5rem;background:var(--color-background);border-radius:10px}.stat-icon{font-size:2rem;margin-bottom:.5rem}.stat-value{font-size:2rem;font-weight:700;color:var(--color-primary);margin-bottom:.25rem}.stat-label{font-size:.875rem;color:var(--color-textSecondary);text-transform:uppercase;letter-spacing:.5px}.settings-card{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a;margin-bottom:2rem}.settings-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.settings-title{font-size:1.5rem;font-weight:600;color:var(--color-text);margin:0}.toggle-settings-btn{background:none;border:none;font-size:1.25rem;color:var(--color-textSecondary);cursor:pointer;padding:.5rem}.settings-content{margin-top:2rem}.settings-section{margin-bottom:1.5rem}.settings-section:last-child{margin-bottom:0}.settings-section-title{font-size:1.125rem;font-weight:600;color:var(--color-text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--color-border)}.settings-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:start}.setting-item-inline{display:flex;flex-direction:column;gap:.5rem}.setting-item-inline label{font-size:.875rem;color:var(--color-text);font-weight:500}.setting-item-inline input[type=number]{width:100%;padding:.625rem;font-size:1rem;background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;text-align:center}.setting-item-inline input[type=number]:focus{outline:none;border-color:var(--color-primary)}.setting-item-inline input[type=number]{-moz-appearance:textfield}.setting-item-inline input[type=number]::-webkit-outer-spin-button,.setting-item-inline input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting-item-inline.checkbox{flex-direction:row;align-items:center;gap:.5rem}.setting-item-inline.checkbox label{display:flex;align-items:center;cursor:pointer;margin:0;gap:.5rem}.setting-item-inline.checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;margin:0}.setting-item-inline.checkbox span{font-size:.875rem;white-space:nowrap}.setting-item-inline.volume{grid-column:span 2}.setting-item-inline.volume input[type=range]{width:100%;cursor:pointer;margin-top:.25rem}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0}.setting-item label{font-size:1rem;color:var(--color-text);flex:1}.setting-item input[type=number]{width:80px;padding:.5rem;font-size:1rem;background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;text-align:center}.setting-item input[type=number]:focus{outline:none;border-color:var(--color-primary)}.setting-item input[type=number]{-moz-appearance:textfield}.setting-item input[type=number]::-webkit-outer-spin-button,.setting-item input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting-item input[type=range]{flex:1;margin-left:1rem;cursor:pointer}.setting-item.checkbox{display:flex;align-items:center}.setting-item.checkbox label{display:flex;align-items:center;cursor:pointer}.setting-item.checkbox input[type=checkbox]{width:20px;height:20px;margin-right:.75rem;cursor:pointer}.pomodoro-info{background:var(--color-surface);border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a}.info-title{font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.info-content p{font-size:1rem;color:var(--color-textSecondary);line-height:1.6;margin-bottom:1.5rem}.info-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.step-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--color-background);border-radius:8px}.step-number{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;border-radius:50%;font-weight:700;font-size:1.25rem;flex-shrink:0}.step-text{font-size:.95rem;color:var(--color-text);line-height:1.4}@media(max-width:768px){.pomodoro-container{padding:1.5rem}.pomodoro-title{font-size:2rem}.pomodoro-subtitle{font-size:1rem}.timer-card{min-width:320px;padding:2rem 1.5rem}.timer-circle,.progress-ring{width:240px;height:240px}.progress-ring-bg,.progress-ring-fill{r:102;stroke-dasharray:640;stroke-dashoffset:640}.time-text{font-size:3rem}.stats-grid{grid-template-columns:repeat(2,1fr);gap:1rem}.info-steps{grid-template-columns:1fr}.settings-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.setting-item-inline.volume{grid-column:span 2}}@media(max-width:480px){.pomodoro-container{padding:1rem}.pomodoro-title{font-size:1.75rem}.pomodoro-subtitle{font-size:.9rem}.timer-card{min-width:280px;padding:1.5rem 1rem}.session-label{font-size:1.25rem}.timer-circle,.progress-ring{width:200px;height:200px}.progress-ring-bg,.progress-ring-fill{r:85;stroke-width:6;stroke-dasharray:534;stroke-dashoffset:534}.time-text{font-size:2.5rem}.sessions-count{font-size:.875rem}.control-btn{min-width:100px;padding:.75rem 1.5rem;font-size:.9rem}.stats-card,.settings-card,.pomodoro-info{padding:1.5rem}.stats-grid{grid-template-columns:1fr;gap:1rem}.stat-item{padding:1rem}.settings-header{flex-direction:row}.settings-row{grid-template-columns:1fr;gap:1rem}.setting-item-inline.volume{grid-column:span 1}.stats-header{flex-direction:column;align-items:flex-start;gap:1rem}.reset-stats-btn{width:100%}}@media(max-width:360px){.pomodoro-title{font-size:1.5rem}.timer-card{min-width:260px}.timer-circle,.progress-ring{width:180px;height:180px}.progress-ring-bg,.progress-ring-fill{r:75;stroke-dasharray:471;stroke-dashoffset:471}.time-text{font-size:2rem}.control-btn{min-width:90px;padding:.625rem 1rem;font-size:.85rem}}@media(prefers-color-scheme:dark){.timer-card{box-shadow:0 4px 12px #0000004d}.stats-card,.settings-card,.pomodoro-info{box-shadow:0 2px 8px #0000004d}.control-btn.primary:hover{box-shadow:0 4px 12px #007bff66}}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{min-height:100vh;transition:background-color .3s ease,color .3s ease;background-color:var(--color-background);color:var(--color-text)}.app-layout{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:2rem 1rem;max-width:1200px;margin:0 auto;width:100%}.header{background-color:var(--color-surface);border-bottom:1px solid var(--color-border);padding:1rem 0;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.header-brand{flex:1;text-decoration:none;color:inherit;transition:opacity .2s ease}.header-brand:hover{opacity:.85}.brand-logo{display:flex;align-items:center;gap:.75rem}.logo-image{width:40px;height:40px;border-radius:8px;object-fit:contain;transition:transform .2s ease}.header-brand:hover .logo-image{transform:scale(1.05)}.brand-text{display:flex;flex-direction:column}.blog-title{font-size:1.5rem;font-weight:700;color:var(--color-primary);margin-bottom:.25rem;line-height:1.2}.blog-description{font-size:.875rem;color:var(--color-textSecondary);line-height:1.2}.theme-toggle{background:none;border:1px solid var(--color-border);border-radius:.5rem;padding:.5rem .75rem;cursor:pointer;transition:all .2s ease;background-color:var(--color-surface);display:flex;align-items:center;justify-content:center}.theme-toggle:hover{background-color:var(--color-surfaceHover);border-color:var(--color-primary);transform:scale(1.05)}.theme-icon{font-size:1.25rem;display:block;line-height:1}.footer{background-color:var(--color-surface);border-top:1px solid var(--color-border);padding:2rem 0;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;flex-direction:column;gap:2rem}.footer-content{text-align:center}.footer-text{font-size:.875rem;color:var(--color-textSecondary);margin-bottom:.25rem}.footer-version{font-size:.75rem;color:var(--color-textMuted)}.footer-nav{display:flex;justify-content:flex-start;align-items:flex-start;gap:2rem;flex-wrap:wrap;padding:1.5rem 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.footer-nav-section{flex:1;min-width:200px;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.footer-nav-title{font-size:1rem;font-weight:600;color:var(--color-text);margin:0;padding-bottom:.5rem;border-bottom:2px solid var(--color-primary);display:flex;align-items:center;gap:.5rem;width:100%}.footer-nav-links{display:flex;flex-direction:column;gap:.5rem;width:100%}.footer-nav-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;text-decoration:none;color:var(--color-text);border-radius:.375rem;transition:all .2s ease;font-weight:400;font-size:.9rem;border:1px solid transparent;background-color:transparent}.footer-nav-link:hover{background-color:var(--color-surfaceHover);color:var(--color-primary);border-color:var(--color-border);transform:translate(4px)}.footer-nav-link.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:500}.footer-nav-link .nav-icon{font-size:1rem;opacity:.8}.footer-nav-link .nav-text{font-size:.9rem}.home-container{max-width:1000px;margin:0 auto}.hero-section{text-align:center;padding:3rem 0;margin-bottom:3rem}.hero-title{font-size:4rem;font-weight:800;margin-bottom:1.5rem;background:linear-gradient(135deg,var(--color-primary),var(--color-info));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:2rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;line-height:1.4}.hero-tagline{font-size:1.5rem;font-weight:500;color:var(--color-textSecondary);margin-bottom:.75rem;line-height:1.5}.hero-description{font-size:1.125rem;color:var(--color-textSecondary);margin-bottom:2rem;line-height:1.6;max-width:700px;margin-left:auto;margin-right:auto}.hero-features{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.hero-feature-item{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:2rem;transition:all .2s ease}.hero-feature-item:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.hero-feature-icon{font-size:1.25rem}.hero-feature-text{font-size:.875rem;font-weight:500;color:var(--color-text)}.hero-stats{display:flex;justify-content:center;gap:2rem}.stat-item{text-align:center}.stat-number{display:block;font-size:2rem;font-weight:700;color:var(--color-primary)}.stat-label{display:block;font-size:.875rem;color:var(--color-textSecondary);margin-top:.25rem}.section-title{font-size:2rem;font-weight:700;margin-bottom:2rem;text-align:center}.tools-section,.categories-section,.features-section,.about-section{margin-bottom:4rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.section-link{color:var(--color-primary);text-decoration:none;font-weight:500;font-size:.9375rem;transition:all .2s ease}.section-link:hover{opacity:.8}.tools-grid,.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.tool-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:1rem;padding:1.5rem;transition:all .2s ease;display:flex;flex-direction:column;height:100%}.tool-card:hover{border-color:var(--color-primary);box-shadow:0 4px 12px #0000001a}.tool-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.tool-icon{font-size:2rem}.status-badge{padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-badge.available{background-color:var(--color-success);color:#fff}.status-badge.coming-soon{background-color:var(--color-warning);color:#fff}.status-badge.planned{background-color:var(--color-textMuted);color:#fff}.tool-name{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.tool-description{color:var(--color-textSecondary);margin-bottom:1rem;line-height:1.6}.tool-actions{margin-top:auto}.tool-button{background-color:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-block}.tool-button:hover{background-color:var(--color-primary);opacity:.9;transform:translateY(-1px)}.tool-button.disabled{background-color:var(--color-textMuted);cursor:not-allowed;transform:none}.tool-button.disabled:hover{transform:none;opacity:1}.category-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:1rem;padding:1.5rem;transition:all .2s ease;display:flex;flex-direction:column;height:100%}.category-card:hover{border-color:var(--color-primary);box-shadow:0 4px 12px #0000001a}.category-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.category-icon{font-size:2rem}.category-status{display:flex;align-items:center}.category-name{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.category-description{color:var(--color-textSecondary);margin-bottom:1rem;line-height:1.6}.category-actions{margin-top:auto}.category-button{background-color:var(--color-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-block;width:100%;text-align:center}.category-button:hover{background-color:var(--color-primary);opacity:.9;transform:translateY(-1px)}.category-button.disabled{background-color:var(--color-textMuted);cursor:not-allowed;transform:none}.category-button.disabled:hover{transform:none;opacity:1}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem}.feature-icon{font-size:3rem;margin-bottom:1rem;display:block}.feature-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;width:100%}.feature-description{color:var(--color-textSecondary);line-height:1.6}.about-content{max-width:600px;margin:0 auto;text-align:center}.about-text{color:var(--color-textSecondary);line-height:1.8;margin-bottom:1rem}.tools-index-container{max-width:1000px;margin:0 auto}.tools-index-header{text-align:center;margin-bottom:3rem}.tools-index-title{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:var(--color-text)}.tools-index-subtitle{font-size:1.125rem;color:var(--color-textSecondary);margin-bottom:2rem;line-height:1.6}.tools-search-section{margin-bottom:3rem}.search-container{max-width:600px;margin:0 auto}.search-input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.75rem;padding:.75rem 1rem;transition:all .2s ease}.search-input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px #007bff1a}.search-icon{font-size:1.25rem;margin-right:.75rem;color:var(--color-textSecondary)}.search-input{flex:1;background:none;border:none;outline:none;color:var(--color-text);font-size:1rem}.search-input::placeholder{color:var(--color-textMuted)}.search-clear{background:none;border:none;color:var(--color-textSecondary);font-size:1.25rem;cursor:pointer;padding:.25rem;margin-left:.5rem;transition:color .2s ease;line-height:1}.search-clear:hover{color:var(--color-danger)}.search-results-text{margin-top:1rem;text-align:center;color:var(--color-textSecondary);font-size:.875rem}.tools-grid-section{margin-bottom:4rem}.tool-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.tool-tag{background-color:var(--color-background);color:var(--color-textSecondary);border:1px solid var(--color-border);padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:500}.no-results{text-align:center;padding:4rem 2rem}.no-results-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.no-results-title{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:var(--color-text)}.no-results-text{color:var(--color-textSecondary);font-size:1rem}.link-button{background:none;border:none;color:var(--color-primary);text-decoration:underline;cursor:pointer;font-size:inherit;padding:0;transition:opacity .2s ease}.link-button:hover{opacity:.8}.tools-info-section{margin-bottom:4rem}.info-content{text-align:center}.textdiff-container{max-width:1200px;margin:0 auto}.textdiff-header{text-align:center;margin-bottom:2rem}.textdiff-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.textdiff-description{font-size:1.125rem;color:var(--color-textSecondary)}.textdiff-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem}.controls-group{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.control-button{background-color:var(--color-primary);color:#fff;border:none;padding:.5rem 1rem;border-radius:.25rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.control-button:hover{opacity:.9}.control-button.secondary{background-color:var(--color-secondary)}.control-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer}.control-label input[type=checkbox]{margin:0}.control-select{background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);padding:.5rem;border-radius:.25rem;font-size:.875rem}.diff-stats{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;flex-wrap:wrap}.diff-stats .stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.diff-stats .stat-label{font-size:.875rem;color:var(--color-textSecondary)}.diff-stats .stat-value{font-size:1.25rem;font-weight:600}.diff-stats .stat-item.added .stat-value{color:var(--color-success)}.diff-stats .stat-item.removed .stat-value{color:var(--color-danger)}.diff-stats .stat-item.modified .stat-value{color:var(--color-warning)}.diff-stats .stat-item.equal .stat-value{color:var(--color-textSecondary)}.textdiff-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}.input-section{display:flex;flex-direction:column}.input-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.text-input{background-color:var(--color-codeBackground);color:var(--color-text);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.5;resize:vertical;min-height:200px}.text-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007bff40}.diff-result{margin-top:2rem}.result-title{font-size:1.5rem;font-weight:600;margin-bottom:1rem}.diff-side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden}.diff-column{background-color:var(--color-surface)}.column-title{background-color:var(--color-surfaceHover);color:var(--color-text);padding:.75rem 1rem;font-size:.875rem;font-weight:600;border-bottom:1px solid var(--color-border)}.diff-content{max-height:500px;overflow-y:auto}.diff-line{display:flex;align-items:center;padding:.25rem .5rem;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.4;border-bottom:1px solid var(--color-border)}.diff-line:last-child{border-bottom:none}.line-number{color:var(--color-textMuted);width:3rem;text-align:right;margin-right:1rem;flex-shrink:0;font-size:.75rem}.line-content{flex:1;white-space:pre-wrap;word-break:break-all}.diff-line.added{background-color:var(--color-diffAdded);border-left:3px solid var(--color-success)}.diff-line.removed{background-color:var(--color-diffRemoved);border-left:3px solid var(--color-danger)}.diff-line.modified{background-color:var(--color-diffAdded);border-left:3px solid var(--color-warning)}.diff-line.equal{background-color:transparent}.diff-inline{border:1px solid var(--color-border);border-radius:.5rem;background-color:var(--color-surface);max-height:500px;overflow-y:auto}.diff-group{display:flex;flex-direction:column}.jsoneditor-container{max-width:1400px;margin:0 auto;padding:1rem}.jsoneditor-header{text-align:center;margin-bottom:2rem}.jsoneditor-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,var(--color-primary),var(--color-info));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.jsoneditor-description{font-size:1.125rem;color:var(--color-textSecondary)}.jsoneditor-top-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem}.mode-controls{display:flex;align-items:center;gap:2rem}.mode-toggle{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer}.mode-toggle input[type=checkbox]{margin:0}.view-mode-tabs{display:flex;gap:.25rem}.view-tab{background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);padding:.5rem 1rem;border-radius:.25rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.view-tab:hover{background-color:var(--color-surfaceHover)}.view-tab.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.action-controls{display:flex;gap:.5rem}.jsoneditor-main{display:grid;gap:1rem;margin-bottom:2rem;min-height:600px}.jsoneditor-main.compare-mode{grid-template-columns:1fr 1fr}.jsoneditor-main.single-mode{grid-template-columns:1fr}.editor-panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:var(--color-surfaceHover);border-bottom:1px solid var(--color-border)}.panel-title{font-size:1.125rem;font-weight:600;margin:0}.panel-controls{display:flex;gap:.5rem}.panel-button{background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);padding:.5rem;border-radius:.25rem;cursor:pointer;transition:all .2s ease;font-size:1rem}.panel-button:hover:not(:disabled){background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.validation-indicator{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid var(--color-border);font-size:.875rem}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.valid{background-color:var(--color-success)}.status-dot.invalid{background-color:var(--color-danger)}.status-text{flex:1;font-weight:500}.panel-content{flex:1;display:flex;flex-direction:column}.json-editor{flex:1;background-color:var(--color-codeBackground);color:var(--color-text);border:none;padding:1rem;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem;line-height:1.5;resize:none;outline:none}.json-editor.error{background-color:#dc35451a}.tree-view,.table-view{flex:1;overflow:auto;padding:1rem}.tree-placeholder,.table-placeholder{display:flex;align-items:center;justify-content:center;height:200px;color:var(--color-textMuted);font-style:italic;text-align:center}.tree-node{margin-left:1rem}.tree-node.has-difference{background-color:#ffc1071a;border-left:3px solid var(--color-warning);padding-left:.5rem}.tree-node-header{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;cursor:pointer;border-radius:.25rem;transition:background-color .2s ease}.tree-node-header:hover{background-color:var(--color-surfaceHover)}.tree-toggle{width:1rem;text-align:center;font-size:.75rem;color:var(--color-textSecondary);transition:transform .2s ease}.tree-toggle.expanded{transform:rotate(0)}.tree-key{font-weight:600;color:var(--color-primary)}.tree-value{font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem}.tree-value.string{color:var(--color-success)}.tree-value.number{color:var(--color-info)}.tree-value.boolean{color:var(--color-warning)}.tree-value.null{color:var(--color-textMuted)}.tree-value.object,.tree-value.array{color:var(--color-textSecondary);font-style:italic}.tree-children{margin-left:1rem;border-left:1px dashed var(--color-border);padding-left:.5rem}.json-table-container{overflow:auto;max-height:500px}.json-table{width:100%;border-collapse:collapse;font-size:.875rem}.json-table th,.json-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--color-border)}.json-table th{background-color:var(--color-surfaceHover);font-weight:600;position:sticky;top:0;z-index:1}.json-table tr.has-difference{background-color:#ffc1071a}.path-cell{font-family:Monaco,Menlo,Courier New,monospace;color:var(--color-primary);font-weight:500}.type-cell{color:var(--color-textSecondary);font-style:italic}.value-cell{font-family:Monaco,Menlo,Courier New,monospace;word-break:break-all}.comparison-results{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1.5rem;margin-top:2rem}.comparison-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.differences-list{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto}.difference-item{display:flex;align-items:center;gap:1rem;padding:1rem;background-color:var(--color-codeBackground);border:1px solid var(--color-border);border-radius:.5rem;border-left-width:4px}.difference-item.added{border-left-color:var(--color-success);background-color:#28a7451a}.difference-item.removed{border-left-color:var(--color-danger);background-color:#dc35451a}.difference-item.modified{border-left-color:var(--color-warning);background-color:#ffc1071a}.diff-path{font-family:Monaco,Menlo,Courier New,monospace;font-weight:600;color:var(--color-primary);min-width:200px}.diff-type{background-color:var(--color-primary);color:#fff;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase}.diff-values{display:flex;align-items:center;gap:1rem;flex:1;font-family:Monaco,Menlo,Courier New,monospace;font-size:.875rem}.diff-left,.diff-right{padding:.5rem;background-color:var(--color-surface);border-radius:.25rem;border:1px solid var(--color-border);word-break:break-all;max-width:300px;overflow:hidden}.diff-left{color:var(--color-danger)}.diff-right{color:var(--color-success)}.diff-arrow{color:var(--color-textSecondary);font-weight:700}.no-differences{text-align:center;padding:2rem;color:var(--color-success);font-size:1.125rem;font-weight:600}.notification{position:fixed;top:1.5rem;right:1.5rem;padding:.625rem 1rem;border-radius:.5rem;font-weight:500;font-size:.875rem;line-height:1.3;z-index:9999;box-shadow:0 8px 24px #00000026,0 2px 8px #0000001a;animation:slideIn .3s cubic-bezier(.68,-.55,.265,1.55);display:flex;align-items:center;gap:.625rem;min-width:280px;max-width:400px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.notification:before{content:"";font-size:1rem;line-height:1;flex-shrink:0}.notification.success{background:linear-gradient(135deg,var(--color-success) 0%,#27ae60 100%);color:#fff;border-left:4px solid rgba(255,255,255,.3)}.notification.success:before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;background-color:#fff3;border-radius:50%;flex-shrink:0;font-size:.75rem}.notification.error{background:linear-gradient(135deg,var(--color-danger) 0%,#c0392b 100%);color:#fff;border-left:4px solid rgba(255,255,255,.3)}.notification.error:before{content:"✕";display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;background-color:#fff3;border-radius:50%;flex-shrink:0;font-size:.75rem}@keyframes slideIn{0%{transform:translate(120%) translateY(-10px);opacity:0}to{transform:translate(0) translateY(0);opacity:1}}.placeholder-page{text-align:center;padding:4rem 2rem}.placeholder-page h1{font-size:2.5rem;margin-bottom:1rem;color:var(--color-textSecondary)}.placeholder-page p{font-size:1.125rem;color:var(--color-textMuted)}@media(max-width:768px){.header-container{gap:1rem}.brand-logo{gap:.5rem}.logo-image{width:32px;height:32px}.blog-title{font-size:1.125rem}.blog-description{font-size:.75rem}.notification{top:1rem;right:1rem;left:1rem;min-width:auto;max-width:none;font-size:.8125rem;padding:.625rem .875rem}.notification:before{font-size:.75rem}.notification.success:before,.notification.error:before{width:1rem;height:1rem;font-size:.6875rem}.footer{padding:1.5rem 0}.footer-container{padding:0 .5rem;gap:1.5rem}.footer-nav{flex-direction:column;gap:1.5rem;padding:1rem 0}.footer-nav-title{font-size:.95rem;padding-bottom:.375rem}.footer-nav-links{gap:.375rem}.footer-nav-link{padding:.5rem .75rem;font-size:.85rem}.footer-nav-link .nav-icon{font-size:.95rem}.footer-nav-link .nav-text{font-size:.85rem}.footer-text{font-size:.8125rem}.footer-version{font-size:.6875rem}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.5rem}.hero-tagline{font-size:1.125rem}.hero-description{font-size:1rem}.hero-features{flex-direction:column;gap:.75rem;align-items:stretch}.hero-feature-item{justify-content:center;padding:.625rem 1rem}.hero-feature-icon{font-size:1.125rem}.hero-feature-text{font-size:.8125rem}.hero-stats{flex-direction:column;gap:1rem}.tools-grid,.categories-grid,.features-grid{grid-template-columns:1fr}.tools-index-title{font-size:2rem}.tools-index-subtitle{font-size:1rem}.hero-stats{flex-wrap:wrap;gap:1rem}.search-input-wrapper{padding:.625rem .875rem}.search-icon{font-size:1.125rem;margin-right:.5rem}.search-input{font-size:.9375rem}.tool-tags{gap:.375rem}.tool-tag{font-size:.6875rem;padding:.25rem .625rem}.no-results{padding:3rem 1rem}.no-results-icon{font-size:3rem}.no-results-title{font-size:1.25rem}.textdiff-inputs,.diff-side-by-side{grid-template-columns:1fr}.textdiff-controls{flex-direction:column;align-items:stretch}.controls-group{justify-content:center;flex-wrap:wrap}.diff-stats{gap:1rem}.textdiff-title{font-size:2rem}.jsoneditor-top-controls{flex-direction:column;align-items:stretch}.mode-controls{flex-direction:column;align-items:stretch;gap:1rem}.view-mode-tabs,.action-controls{justify-content:center;flex-wrap:wrap}.jsoneditor-main.compare-mode{grid-template-columns:1fr}.panel-header{flex-direction:column;align-items:stretch;gap:1rem}.panel-controls{justify-content:center;flex-wrap:wrap}.comparison-results{padding:1rem}.differences-list{max-height:300px}.difference-item{flex-direction:column;align-items:stretch;gap:.5rem}.diff-path{min-width:auto}.diff-values{flex-direction:column;gap:.5rem}.diff-left,.diff-right{max-width:none}.json-table-container{font-size:.75rem}.json-table th,.json-table td{padding:.5rem}.tree-node{margin-left:.5rem}.tree-children{margin-left:.5rem;padding-left:.25rem}.jsoneditor-title,.codeformatter-title{font-size:2rem}.codeformatter-subtitle{font-size:1rem}.codeformatter-controls{flex-direction:column;align-items:stretch;gap:1rem}.control-group{min-width:unset}.control-actions{margin-left:0;justify-content:center;flex-wrap:wrap}.control-button{flex:1;min-width:0}.code-editor-dual-panel{grid-template-columns:1fr;grid-template-rows:auto 1fr 1fr}.center-controls{grid-row:1;grid-column:1;flex-direction:row;flex-wrap:wrap;padding:.75rem;min-width:unset;border:none;border-bottom:1px solid var(--color-border)}.control-group.vertical{flex-direction:row;align-items:center;width:auto;flex:1}.center-actions{width:100%;flex-direction:row;justify-content:center;flex-wrap:wrap}.control-button.small{width:auto;flex:1;min-width:100px}.code-panel.original-panel{border-right:none;border-bottom:1px solid var(--color-border)}.code-stats-section{grid-template-columns:1fr;gap:.75rem}.code-stats{justify-content:center}.panel-header{flex-direction:column;gap:.75rem;align-items:stretch}.panel-actions{justify-content:center;flex-wrap:wrap}.code-textarea{min-height:300px}.encoder-title{font-size:2rem}.encoder-description{font-size:1rem}.encoder-controls{flex-direction:column;align-items:stretch}.method-selector,.operation-selector,.action-buttons{width:100%;justify-content:center;flex-wrap:wrap}.method-selector{flex-direction:column;gap:.5rem}.method-select{width:100%;min-width:unset}.encoder-main{grid-template-columns:1fr;gap:1rem}.section-header{flex-direction:column;gap:.75rem;align-items:stretch}.section-controls{justify-content:center}.methods-grid{grid-template-columns:1fr}.text-input,.text-output{min-height:200px}.footer{padding:1.25rem 0}.footer-container{padding:0 .75rem;gap:1.25rem}.footer-nav{flex-direction:column;gap:1.25rem;padding:.875rem 0}.footer-nav-section{min-width:100%;width:100%}.footer-nav-title{font-size:.875rem;padding-bottom:.375rem}.footer-nav-links{gap:.25rem}.footer-nav-link{padding:.5rem .625rem;font-size:.8125rem;border-radius:.25rem}.footer-nav-link .nav-icon{font-size:.875rem}.footer-nav-link .nav-text{font-size:.8125rem}.footer-text{font-size:.75rem}.footer-version{font-size:.625rem}.notification{left:1rem;right:1rem;top:1rem}}@media(max-width:480px){.main-content{padding:1rem .5rem}.brand-logo{gap:.375rem}.logo-image{width:28px;height:28px}.blog-title{font-size:1rem}.blog-description{display:none}.footer{padding:1rem 0}.footer-container{padding:0 .5rem;gap:1rem}.footer-nav{gap:1rem;padding:.75rem 0}.footer-nav-section{gap:.5rem}.footer-nav-title{font-size:.8125rem;padding-bottom:.25rem;gap:.375rem}.footer-nav-title .nav-icon{font-size:.875rem}.footer-nav-links{gap:.125rem}.footer-nav-link{padding:.375rem .5rem;font-size:.75rem;gap:.375rem}.footer-nav-link .nav-icon{font-size:.8125rem}.footer-nav-link .nav-text{font-size:.75rem}.footer-text{font-size:.6875rem}.footer-version{font-size:.5625rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1.25rem}.hero-tagline{font-size:1rem}.hero-description{font-size:.9375rem}.hero-feature-text{font-size:.75rem}.section-title{font-size:1.5rem}.codeformatter-container{padding:0 .5rem}.codeformatter-title{font-size:1.75rem}.codeformatter-subtitle{font-size:.9375rem}.codeformatter-controls{padding:1rem}.file-drop-zone{padding:1.5rem 1rem}.code-textarea{min-height:250px;font-size:.8125rem;padding:.875rem}.code-stats{gap:.75rem}.stat-item{flex:1;min-width:60px}.help-section{padding:1rem}.stats-panel{padding:.75rem}.panel-header{padding:.75rem 1rem}.panel-title{font-size:.875rem}.panel-button{padding:.375rem .5rem;font-size:.75rem}.encoder-container{padding:0 .5rem}.encoder-title{font-size:1.75rem}.encoder-description{font-size:.9375rem}.encoder-controls{padding:.875rem}.control-button{padding:.5rem .75rem;font-size:.8125rem}.method-info{padding:.625rem .875rem}.section-header,.section-content{padding:.875rem}.text-input,.text-output{min-height:180px;font-size:.8125rem}.jsoneditor-container{padding:0 .5rem}.jsoneditor-title{font-size:1.75rem}.jsoneditor-description{font-size:.9375rem}.json-editor{font-size:.8125rem}.textdiff-title{font-size:1.75rem}.textdiff-description{font-size:.9375rem}.text-input,.diff-line{font-size:.8125rem}.tools-index-title{font-size:1.75rem}.tools-index-subtitle{font-size:.9375rem}.search-input{font-size:.875rem}.search-input::placeholder{font-size:.875rem}.stat-item{min-width:80px}.no-results{padding:2rem 1rem}.no-results-icon{font-size:2.5rem}.no-results-title{font-size:1.125rem}.no-results-text{font-size:.875rem}}.codeformatter-container{max-width:1200px;margin:0 auto;padding:0 1rem}.codeformatter-header{text-align:center;margin-bottom:2rem}.codeformatter-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;color:var(--color-text)}.codeformatter-subtitle{font-size:1.125rem;color:var(--color-textSecondary);margin-bottom:1rem}.codeformatter-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;background-color:var(--color-surface);padding:1.5rem;border-radius:.75rem;border:1px solid var(--color-border);margin-bottom:1.5rem}.control-group{display:flex;flex-direction:column;gap:.5rem;min-width:150px}.control-label{font-size:.875rem;font-weight:600;color:var(--color-text)}.control-select{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.5rem;background-color:var(--color-background);color:var(--color-text);font-size:.875rem;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.control-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary) 20}.control-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-left:auto}.control-button{padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:.5rem;background-color:var(--color-background);color:var(--color-text);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.control-button:hover:not(:disabled){background-color:var(--color-surface);border-color:var(--color-primary)}.control-button:disabled{opacity:.5;cursor:not-allowed}.control-button.primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.control-button.primary:hover:not(:disabled){background-color:var(--color-primaryDark)}.file-upload-section{margin-bottom:1.5rem}.file-drop-zone{border:2px dashed var(--color-border);border-radius:.75rem;padding:2rem;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--color-surface)}.file-drop-zone:hover,.file-drop-zone.drag-over{border-color:var(--color-primary);background-color:var(--color-primary)10}.drop-zone-content{pointer-events:none}.drop-zone-icon{font-size:2rem;margin-bottom:.5rem;display:block}.drop-zone-text{font-size:1rem;font-weight:500;color:var(--color-text);margin-bottom:.25rem}.drop-zone-hint{font-size:.875rem;color:var(--color-textSecondary)}.file-input{display:none}.file-info{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;margin-bottom:1rem;font-size:.875rem}.file-icon{font-size:1rem}.file-name{font-weight:500;color:var(--color-text)}.file-size{color:var(--color-textSecondary);margin-left:auto}.code-editor-dual-panel{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-bottom:1.5rem;border:1px solid var(--color-border);border-radius:.75rem;overflow:hidden;background-color:var(--color-surface);position:relative}.code-editor-dual-panel.fullscreen{position:fixed;inset:0;z-index:1000;border-radius:0;margin:0;grid-template-columns:1fr}.code-panel{display:flex;flex-direction:column;min-height:500px;transition:all .3s ease}.code-panel.panel-fullscreen{min-height:100vh}.code-panel.panel-hidden{display:none}.code-panel.original-panel{border-right:1px solid var(--color-border)}.code-editor-dual-panel.fullscreen .code-panel.original-panel{border-right:none}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background-color:var(--color-background);border-bottom:1px solid var(--color-border)}.panel-title{font-size:1rem;font-weight:600;color:var(--color-text);margin:0}.panel-actions{display:flex;gap:.5rem}.panel-button{padding:.375rem .75rem;border:1px solid var(--color-border);border-radius:.375rem;background-color:var(--color-background);color:var(--color-text);font-size:.875rem;cursor:pointer;transition:all .2s ease}.panel-button:hover:not(:disabled){background-color:var(--color-surface);border-color:var(--color-primary)}.panel-button:disabled{opacity:.5;cursor:not-allowed}.code-editor{position:relative;flex:1;display:flex}.code-textarea{width:100%;min-height:450px;padding:1.25rem;border:none;outline:none;resize:vertical;font-family:Courier New,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:.875rem;line-height:1.5;background-color:var(--color-codeBackground);color:var(--color-codeText);tab-size:4;white-space:pre-wrap;word-wrap:break-word;flex:1}.code-textarea::placeholder{color:var(--color-textMuted)}.code-textarea:read-only{background-color:var(--color-surface);cursor:default}.formatted-textarea{background-color:var(--color-surface);color:var(--color-text)}.format-result{margin:1rem;padding:.75rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500}.format-result.success{background-color:var(--color-success)20;border:1px solid var(--color-success);color:var(--color-success)}.format-result.error{background-color:var(--color-danger)20;border:1px solid var(--color-danger);color:var(--color-danger)}.result-success,.result-error{display:flex;align-items:center;gap:.5rem}.result-icon{font-size:1rem}.result-message{flex:1}.code-stats-section{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.stats-panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem}.stats-title{font-size:1rem;font-weight:600;color:var(--color-text);margin:0 0 .75rem}.code-stats{display:flex;gap:1rem;flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;gap:.25rem;text-align:center;flex:1;min-width:80px}.stat-item.difference{border-left:1px solid var(--color-border);padding-left:1rem;margin-left:.5rem}.stat-label{font-size:.75rem;color:var(--color-textSecondary);text-transform:uppercase;letter-spacing:.5px;font-weight:500}.stat-value{font-size:1.125rem;font-weight:700;color:var(--color-primary)}.stat-value.positive{color:var(--color-success)}.stat-value.negative{color:var(--color-danger)}.help-section{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.75rem;padding:1.5rem}.help-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.help-content{display:grid;gap:.75rem}.help-item{font-size:.875rem;color:var(--color-textSecondary);line-height:1.5}.help-item strong{color:var(--color-text);font-weight:600}@media(max-width:768px){.codeformatter-title{font-size:2rem}.codeformatter-controls{flex-direction:column;align-items:stretch;gap:1rem}.control-group{min-width:unset}.control-actions{margin-left:0;justify-content:center}.control-button{flex:1;min-width:0}.code-editor-dual-panel{grid-template-columns:1fr;grid-template-rows:auto 1fr 1fr}.center-controls{grid-row:1;grid-column:1;flex-direction:row;flex-wrap:wrap;padding:.75rem;min-width:unset;border:none;border-bottom:1px solid var(--color-border)}.control-group.vertical{flex-direction:row;align-items:center;width:auto;flex:1}.center-actions{width:100%;flex-direction:row;justify-content:center}.control-button.small{width:auto;flex:1}.code-panel.original-panel{border-right:none;border-bottom:1px solid var(--color-border)}.code-stats-section{grid-template-columns:1fr;gap:.75rem}.code-stats{justify-content:center}.panel-header{flex-direction:column;gap:.75rem;align-items:stretch}.panel-actions{justify-content:center}}@media(max-width:480px){.codeformatter-container{padding:0 .5rem}.codeformatter-title{font-size:1.75rem}.codeformatter-subtitle{font-size:1rem}.codeformatter-controls{padding:1rem}.file-drop-zone{padding:1.5rem 1rem}.code-textarea{min-height:300px;font-size:.8125rem}.code-stats{gap:.75rem}.stat-item{flex:1;min-width:60px}.help-section{padding:1rem}.stats-panel{padding:.75rem}.panel-header{padding:.75rem 1rem}.panel-title{font-size:.875rem}}.center-controls{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem;background-color:var(--color-background);border-left:1px solid var(--color-border);border-right:1px solid var(--color-border);min-width:200px;gap:1rem}.control-group.vertical{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.control-select.compact{padding:.375rem .5rem;font-size:.8rem;width:100%;max-width:150px}.center-actions{display:flex;flex-direction:column;gap:.5rem;width:100%}.control-button.small{padding:.375rem .5rem;font-size:.8rem;width:100%;min-width:0}.control-button.primary.small{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:600}.code-editor-dual-panel.fullscreen .code-textarea{min-height:calc(100vh - 80px);resize:none}.encoder-container{max-width:1400px;margin:0 auto;padding:1rem}.encoder-header{text-align:center;margin-bottom:2rem}.encoder-title{font-size:2.5rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(135deg,var(--color-primary),var(--color-info));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.encoder-description{font-size:1.125rem;color:var(--color-textSecondary)}.encoder-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;padding:1rem;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem}.method-selector{display:flex;align-items:center;gap:.75rem}.method-selector label{font-weight:500;color:var(--color-text)}.method-select{background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);padding:.5rem .75rem;border-radius:.25rem;font-size:.875rem;min-width:160px;cursor:pointer}.method-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary) 20}.operation-selector{display:flex;gap:1rem}.operation-toggle{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer}.operation-toggle input[type=radio]{margin:0;accent-color:var(--color-primary)}.encoder-action-buttons{display:flex;gap:.5rem;margin-bottom:1.5rem}.encoder-action-buttons .control-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.encoder-action-buttons .control-button:hover{background-color:var(--color-surface);border-color:var(--color-primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.encoder-action-buttons .control-button:active{transform:translateY(0)}.encoder-controls .action-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.encoder-controls .action-buttons .control-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border);border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.encoder-controls .action-buttons .control-button:hover{background-color:var(--color-surface);border-color:var(--color-primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.encoder-controls .action-buttons .control-button:active{transform:translateY(0)}.encoder-controls+.action-buttons{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}.encoder-controls+.action-buttons .control-button{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.encoder-controls+.action-buttons .control-button:hover{background-color:var(--color-background);border-color:var(--color-primary);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.encoder-controls+.action-buttons .control-button:active{transform:translateY(0)}.method-info{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.75rem 1rem;background-color:var(--color-info)10;border:1px solid var(--color-info)30;border-radius:.375rem}.method-info-icon{font-size:1rem;color:var(--color-info)}.method-info-text{font-size:.875rem;color:var(--color-textSecondary)}.encoder-main{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.encoder-section{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;min-height:500px}.section-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:var(--color-background);border-bottom:1px solid var(--color-border)}.section-title{font-size:1.125rem;font-weight:600;color:var(--color-text)}.section-controls{display:flex;gap:.375rem}.section-button{background:none;border:1px solid var(--color-border);color:var(--color-text);padding:.375rem .5rem;border-radius:.25rem;font-size:.875rem;cursor:pointer;transition:all .2s ease}.section-button:hover:not(:disabled){background-color:var(--color-surfaceHover)}.section-button:disabled{opacity:.5;cursor:not-allowed}.section-content{flex:1;padding:1rem;display:flex;flex-direction:column}.text-input,.text-output{flex:1;width:100%;padding:.75rem;border:1px solid var(--color-border);border-radius:.375rem;background-color:var(--color-background);color:var(--color-text);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.875rem;line-height:1.5;resize:vertical;min-height:300px}.text-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary) 20}.text-output{background-color:var(--color-surfaceSecondary);cursor:default}.text-stats{display:flex;justify-content:space-between;margin-top:.75rem;font-size:.75rem;color:var(--color-textSecondary)}.error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background-color:var(--color-danger)10;border:1px solid var(--color-danger)30;border-radius:.375rem;color:var(--color-danger)}.error-icon{font-size:1.125rem}.error-text{font-size:.875rem;font-weight:500}.method-reference{margin-top:2rem}.reference-title{font-size:1.5rem;font-weight:600;margin-bottom:1rem;color:var(--color-text)}.methods-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.method-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem;cursor:pointer;transition:all .2s ease}.method-card:hover{border-color:var(--color-primary);background-color:var(--color-surfaceHover)}.method-card.active{border-color:var(--color-primary);background-color:var(--color-primary)10}.method-name{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--color-text)}.method-description{font-size:.875rem;color:var(--color-textSecondary);line-height:1.4}@media(max-width:768px){.encoder-controls{flex-direction:column;align-items:stretch}.method-selector,.operation-selector{width:100%;justify-content:center}.encoder-action-buttons{flex-wrap:wrap}.encoder-action-buttons .control-button{flex:1;min-width:100px;justify-content:center}.encoder-main{grid-template-columns:1fr;gap:1rem}.section-header{flex-direction:column;gap:.75rem;align-items:stretch}.section-controls{justify-content:center}.methods-grid{grid-template-columns:1fr}.text-input,.text-output{min-height:200px}}.music-visualizer-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.visualizer-header{text-align:center;margin-bottom:3rem}.visualizer-title{font-size:2.5rem;font-weight:700;color:var(--color-text);margin-bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.visualizer-subtitle{font-size:1.125rem;color:var(--color-textSecondary);max-width:700px;margin:0 auto;line-height:1.6}.visualizer-content{margin-bottom:3rem}.visualizer-card{background:var(--color-surface);border-radius:16px;padding:2rem;box-shadow:0 2px 8px #0000001a}.upload-section{display:flex;flex-direction:column;gap:1.5rem}.upload-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;border:2px dashed var(--color-border);border-radius:12px;background:var(--color-background);transition:all .3s ease}.upload-area:hover{border-color:var(--color-primary);background:var(--color-surface)}.upload-icon{font-size:4rem;margin-bottom:1rem}.upload-title{font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:.5rem}.upload-description{font-size:.95rem;color:var(--color-textSecondary);margin-bottom:1.5rem;text-align:center}.input-mode-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;background:var(--color-background);padding:.25rem;border-radius:8px;width:100%;max-width:500px;margin-left:auto;margin-right:auto}.tab-button{flex:1;padding:.75rem 1rem;background:transparent;border:none;border-radius:6px;font-size:.95rem;font-weight:500;color:var(--color-textSecondary);cursor:pointer;transition:all .2s ease}.tab-button:hover{color:var(--color-text);background:var(--color-surface)}.tab-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.input-mode-content{display:flex;flex-direction:column;gap:1rem;width:100%}.input-mode-info{font-size:.875rem;color:var(--color-textSecondary);text-align:center}.youtube-form{width:100%;max-width:600px;margin:0 auto}.youtube-input-group{display:flex;gap:.5rem;width:100%}.youtube-input{flex:1;padding:.875rem 1rem;border:2px solid var(--color-border);border-radius:8px;font-size:.95rem;background:var(--color-surface);color:var(--color-text);transition:border-color .2s ease}.youtube-input:focus{outline:none;border-color:var(--color-primary)}.youtube-input::placeholder{color:var(--color-textSecondary)}.youtube-input:disabled{opacity:.6;cursor:not-allowed}.youtube-submit-button{padding:.875rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap}.youtube-submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.youtube-submit-button:disabled{opacity:.6;cursor:not-allowed}.youtube-helper{display:flex;gap:1rem;padding:1.5rem;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:2px solid rgba(102,126,234,.2);border-radius:12px;text-align:left;max-width:600px;margin:0 auto}.helper-icon{font-size:2rem;flex-shrink:0}.helper-content{flex:1}.helper-title{font-size:1rem;font-weight:600;color:var(--color-text);margin-bottom:.75rem}.helper-steps{margin:0 0 1rem 1.25rem;padding:0;list-style:decimal}.helper-steps li{font-size:.9rem;color:var(--color-text);margin-bottom:.5rem;line-height:1.5}.helper-note{font-size:.875rem;color:var(--color-textSecondary);margin:0 0 .75rem;line-height:1.5}.helper-examples{font-size:.875rem;color:var(--color-textSecondary);margin:0;line-height:1.6}.upload-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.875rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;border:none;display:inline-block}.upload-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.error-message{display:flex;align-items:center;gap:.5rem;padding:1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#ef4444;font-size:.95rem}.error-icon{font-size:1.25rem}.visualizer-canvas-wrapper{position:relative;width:100%;height:400px;background:var(--color-background);border-radius:12px;overflow:hidden;margin-bottom:2rem;box-shadow:inset 0 2px 8px #0000001a}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-controls{display:flex;flex-direction:column;gap:1.5rem}.control-group{display:flex;flex-direction:column;gap:.75rem}.control-label{font-size:.95rem;font-weight:600;color:var(--color-text);display:flex;align-items:center;gap:.5rem}.volume-icon{font-size:1.25rem}.visualization-types{display:flex;flex-direction:row;gap:.75rem;flex-wrap:nowrap}.viz-type-button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--color-background);border:2px solid var(--color-border);border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.875rem;color:var(--color-text);flex:1;min-width:120px}.viz-type-button:hover{border-color:var(--color-primary);transform:translateY(-2px)}.viz-type-button.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;color:#fff}.viz-icon{font-size:1.5rem}.viz-name{font-weight:500}.playback-controls{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--color-background);border-radius:8px}.control-button{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:transform .2s ease,box-shadow .2s ease;color:#fff}.control-button:hover{transform:scale(1.1);box-shadow:0 4px 12px #667eea66}.control-button:active{transform:scale(.95)}.time-info{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--color-textSecondary);font-variant-numeric:tabular-nums;min-width:120px}.time-current{color:var(--color-text);font-weight:600}.time-separator,.time-duration{color:var(--color-textSecondary)}.progress-slider,.volume-slider{width:100%;height:6px;border-radius:3px;background:var(--color-border);outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.progress-slider::-webkit-slider-thumb,.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;transition:transform .2s ease}.progress-slider::-webkit-slider-thumb:hover,.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.progress-slider::-moz-range-thumb,.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;cursor:pointer;transition:transform .2s ease}.progress-slider::-moz-range-thumb:hover,.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.volume-control{max-width:300px}.change-file-button{background:var(--color-background);border:2px solid var(--color-border);color:var(--color-text);padding:.75rem 1.5rem;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-block;text-align:center}.change-file-button:hover{border-color:var(--color-primary);background:var(--color-surface);transform:translateY(-2px)}.visualizer-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.info-card{background:var(--color-surface);padding:2rem;border-radius:12px;box-shadow:0 2px 8px #0000001a}.info-title{font-size:1.5rem;font-weight:700;color:var(--color-text);margin-bottom:1rem}.info-list,.feature-list{list-style:none;display:flex;flex-direction:column;gap:.75rem}.info-list li,.feature-list li{color:var(--color-textSecondary);line-height:1.6;padding-left:1.5rem;position:relative}.info-list li:before{content:"➜";position:absolute;left:0;color:var(--color-primary);font-weight:700}.feature-list li:before{content:"✓";position:absolute;left:0;color:#10b981;font-weight:700}.info-text{color:var(--color-textSecondary);line-height:1.6;font-size:.95rem}@media(max-width:768px){.music-visualizer-container{padding:1.5rem 1rem}.visualizer-title{font-size:2rem}.visualizer-subtitle{font-size:1rem}.visualizer-card{padding:1.5rem}.upload-area{padding:3rem 1.5rem}.upload-icon{font-size:3rem}.visualizer-canvas-wrapper{height:300px}.visualization-types{flex-wrap:wrap}.viz-type-button{min-width:100px;padding:.875rem}.youtube-helper{flex-direction:column;padding:1.25rem}.helper-icon{font-size:1.5rem}.helper-steps{margin-left:1rem}.playback-controls{flex-wrap:wrap;justify-content:center}.time-info{min-width:auto}.volume-control{max-width:100%}.visualizer-info{grid-template-columns:1fr}.info-card{padding:1.5rem}}@media(max-width:480px){.visualizer-title{font-size:1.75rem}.visualizer-subtitle{font-size:.95rem}.visualizer-card{padding:1rem}.upload-area{padding:2rem 1rem}.visualizer-canvas-wrapper{height:250px}.control-button{width:44px;height:44px}.viz-type-button{padding:.75rem;font-size:.8rem;min-width:90px}.viz-icon{font-size:1.25rem}.input-mode-tabs{gap:.25rem}.tab-button{padding:.625rem .75rem;font-size:.85rem}.youtube-helper{padding:1rem;gap:.75rem}.helper-title{font-size:.95rem}.helper-steps{margin-left:.75rem}.helper-steps li{font-size:.85rem}.helper-note{font-size:.8rem}.info-card{padding:1rem}.info-title{font-size:1.25rem}}.code-playground-container{max-width:1400px;margin:0 auto;padding:2rem 1rem}.code-playground-header{text-align:center;margin-bottom:2rem}.code-playground-header .header-content{max-width:800px;margin:0 auto}.code-playground-header .page-title{font-size:2.5rem;font-weight:700;color:var(--color-primary);margin-bottom:1rem}.code-playground-header .page-subtitle{font-size:1.125rem;color:var(--color-textSecondary);line-height:1.6}.language-selector{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap;background:var(--color-surface);padding:1rem;border-radius:12px;box-shadow:0 2px 8px #0000001a}.language-tab{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border:2px solid var(--color-border);background:var(--color-background);color:var(--color-text);border-radius:8px;cursor:pointer;font-size:.95rem;font-weight:500;transition:all .2s ease;flex:1;min-width:140px;justify-content:center}.language-tab:hover{border-color:var(--color-primary);background:var(--color-surface);transform:translateY(-2px)}.language-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:0 4px 12px #667eea4d}.language-icon{font-size:1.25rem}.language-name{font-weight:600}.playground-main{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}.editor-section,.output-section{background:var(--color-surface);border-radius:12px;box-shadow:0 2px 8px #0000001a;overflow:hidden;display:flex;flex-direction:column;min-height:600px}.section-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:var(--color-background);border-bottom:1px solid var(--color-border)}.section-title{font-size:1.125rem;font-weight:600;color:var(--color-text);margin:0}.editor-actions{display:flex;gap:.5rem}.btn{padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.25rem}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primaryHover);transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.btn-secondary{background:var(--color-background);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-border);transform:translateY(-1px)}.btn-sm{padding:.375rem .75rem;font-size:.8125rem}.editor-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.code-editor{flex:1;width:100%;padding:1.25rem;background:var(--color-background);color:var(--color-text);border:none;outline:none;font-family:Courier New,Courier,monospace;font-size:.9375rem;line-height:1.6;resize:none;overflow:auto;tab-size:2;white-space:pre;overflow-wrap:normal}.code-editor::placeholder{color:var(--color-textSecondary);opacity:.6}.output-wrapper{flex:1;display:flex;flex-direction:column;overflow:hidden}.preview-iframe{flex:1;width:100%;height:100%;min-height:500px;border:none;background:#fff;display:block}.console-output{flex:1;padding:1.25rem;background:var(--color-background);overflow-y:auto;font-family:Courier New,Courier,monospace;font-size:.875rem;line-height:1.6}.output-message{display:flex;gap:.75rem;padding:.75rem;margin-bottom:.5rem;border-radius:6px;background:var(--color-surface);border-left:3px solid var(--color-border)}.output-message.log{border-left-color:#4caf50}.output-message.error{border-left-color:#f44336;background:#f443361a}.output-message.warn{border-left-color:#ff9800;background:#ff98001a}.output-message.result{border-left-color:var(--color-primary);background:#667eea1a}.output-message.info{border-left-color:#2196f3;background:#2196f31a}.output-message.muted{border-left-color:var(--color-border);opacity:.7}.output-icon{font-size:1.125rem;flex-shrink:0}.output-text{flex:1;margin:0;color:var(--color-text);white-space:pre-wrap;word-break:break-word;font-family:Courier New,Courier,monospace}.playground-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2rem}.info-card{background:var(--color-surface);padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px #0000001a}.info-title{font-size:1.25rem;font-weight:600;color:var(--color-text);margin-bottom:1rem}.info-list{list-style:none;padding:0;margin:0}.info-list li{padding:.5rem 0;color:var(--color-textSecondary);line-height:1.6;display:flex;align-items:flex-start;gap:.5rem}.info-list li:before{content:"•";color:var(--color-primary);font-weight:700;font-size:1.25rem;line-height:1.4}kbd{display:inline-block;padding:.125rem .375rem;background:var(--color-background);border:1px solid var(--color-border);border-radius:4px;font-family:monospace;font-size:.875rem;box-shadow:0 1px 2px #0000001a}@media(max-width:1024px){.playground-main{grid-template-columns:1fr}.editor-section,.output-section{min-height:400px}}@media(max-width:768px){.code-playground-header .page-title{font-size:2rem}.code-playground-header .page-subtitle{font-size:1rem}.language-selector{padding:.75rem}.language-tab{padding:.625rem 1rem;font-size:.875rem;min-width:120px}.section-header{padding:.875rem 1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.editor-actions{width:100%;justify-content:space-between}.btn-sm{flex:1;justify-content:center}.code-editor{padding:1rem;font-size:.875rem}.console-output{padding:1rem;font-size:.8125rem}.playground-info{grid-template-columns:1fr}.info-card{padding:1.25rem}}@media(max-width:480px){.code-playground-container{padding:1rem .5rem}.code-playground-header .page-title{font-size:1.75rem}.code-playground-header .page-subtitle{font-size:.9375rem}.language-selector{padding:.5rem;gap:.375rem}.language-tab{padding:.5rem .75rem;font-size:.8125rem;min-width:100px}.language-icon{font-size:1.125rem}.editor-section,.output-section{min-height:350px}.section-title{font-size:1rem}.code-editor{padding:.75rem;font-size:.8125rem}.console-output{padding:.75rem}.output-message{padding:.5rem;gap:.5rem}.info-card{padding:1rem}.info-title{font-size:1.125rem}.info-list li{font-size:.875rem}}.syntax-editor-container{position:relative;flex:1;overflow:hidden;background:#1e1e1e;font-family:Consolas,Monaco,Courier New,monospace}.syntax-highlight,.syntax-textarea{position:absolute;top:0;left:0;width:100%;height:100%;padding:1.25rem;margin:0;border:none;font-family:Consolas,Monaco,Courier New,monospace;font-size:.9375rem;line-height:1.6;white-space:pre;word-wrap:normal;overflow-wrap:normal;tab-size:2;-moz-tab-size:2}.syntax-highlight{color:#d4d4d4;background:#1e1e1e;pointer-events:none;overflow:auto}.syntax-textarea{color:transparent;background:transparent;caret-color:#fff;outline:none;resize:none;overflow:auto;z-index:1}.syntax-textarea::selection{background:#fff3}.syntax-textarea::-moz-selection{background:#fff3}.syntax-keyword{color:#569cd6;font-weight:500}.syntax-string{color:#ce9178}.syntax-comment{color:#6a9955;font-style:italic}.syntax-function{color:#dcdcaa}.syntax-number{color:#b5cea8}.syntax-boolean{color:#569cd6}.syntax-builtin{color:#4ec9b0}.syntax-tag{color:gray}.syntax-attr{color:#9cdcfe}.syntax-selector{color:#d7ba7d}.syntax-property{color:#9cdcfe}.syntax-color{color:#ce9178}.syntax-decorator{color:#4ec9b0}[data-theme=light] .syntax-editor-container{background:#fff}[data-theme=light] .syntax-highlight{color:#000;background:#fff}[data-theme=light] .syntax-textarea{caret-color:#000}[data-theme=light] .syntax-keyword{color:#00f}[data-theme=light] .syntax-string{color:#a31515}[data-theme=light] .syntax-comment{color:green}[data-theme=light] .syntax-function{color:#795e26}[data-theme=light] .syntax-number{color:#098658}[data-theme=light] .syntax-boolean{color:#00f}[data-theme=light] .syntax-builtin{color:#267f99}[data-theme=light] .syntax-tag{color:maroon}[data-theme=light] .syntax-attr{color:red}[data-theme=light] .syntax-selector{color:maroon}[data-theme=light] .syntax-property{color:red}[data-theme=light] .syntax-color{color:#0451a5}[data-theme=light] .syntax-decorator{color:#267f99}