:root{--bg-primary:#f8f9fb;--bg-secondary:#fff;--bg-tertiary:#eef1f5;--bg-card:#ffffffd9;--bg-card-hover:#fff;--bg-input:#fff;--bg-sidebar:#fffffff7;--bg-header:#f8f9fbd9;--border-subtle:#0000000f;--border-medium:#0000001a;--border-accent:#3b82f640;--text-primary:#111827;--text-secondary:#4b5563;--text-muted:#9ca3af;--text-accent:#2563eb;--accent-primary:#3b82f6;--accent-primary-hover:#2563eb;--accent-secondary:#1d4ed8;--accent-success:#059669;--accent-warning:#d97706;--accent-error:#dc2626;--gradient-primary:linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa);--gradient-subtle:linear-gradient(135deg, #3b82f60f, #60a5fa0f);--gradient-glow:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), #3b82f60a, transparent 40%);--nav-hover-bg:#3b82f60f;--nav-active-bg:#3b82f61a;--card-icon-hover-bg:#3b82f61a;--card-icon-hover-shadow:0 0 16px #3b82f614;--tag-bg:#3b82f614;--focus-ring:0 0 0 2px #3b82f633;--glow-1:#3b82f608;--glow-2:#2563eb05;--scrollbar-thumb:#0000001a;--scrollbar-thumb-hover:#0000002e;--line-hover-bg:#00000008;--btn-bg:#00000008;--btn-hover-bg:#0000000f;--header-panel-bg:#00000005;--syn-key:#1d4ed8;--syn-string:#047857;--syn-number:#b45309;--syn-boolean:#be185d;--syn-null:#6b7280;--syn-bracket:#374151;--syn-punctuation:#6b7280;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 30px #0000001a;--shadow-glow:0 0 20px #3b82f61a;--shadow-card:0 1px 3px #0000000f;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.35s cubic-bezier(.4, 0, .2, 1);--sidebar-width:260px;--sidebar-collapsed:68px;--header-height:64px}[data-theme=dark]{--bg-primary:#000;--bg-secondary:#0a0a0a;--bg-tertiary:#141414;--bg-card:#121212e6;--bg-card-hover:#181818;--bg-input:#0a0a0a;--bg-sidebar:#060606fa;--bg-header:#000000e6;--border-subtle:#ffffff14;--border-medium:#ffffff24;--border-accent:#60a5fa59;--text-primary:#f5f5f5;--text-secondary:#a3a3a3;--text-muted:#737373;--text-accent:#93c5fd;--accent-primary:#3b82f6;--accent-primary-hover:#60a5fa;--accent-secondary:#2563eb;--accent-success:#10b981;--accent-warning:#f59e0b;--accent-error:#ef4444;--gradient-primary:linear-gradient(135deg, #2563eb, #3b82f6, #60a5fa);--gradient-subtle:linear-gradient(135deg, #3b82f61a, #60a5fa1a);--gradient-glow:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), #3b82f614, transparent 40%);--nav-hover-bg:#3b82f61a;--nav-active-bg:#3b82f626;--card-icon-hover-bg:#3b82f62e;--card-icon-hover-shadow:0 0 16px #3b82f626;--tag-bg:#3b82f61f;--focus-ring:0 0 0 2px #3b82f640;--glow-1:#3b82f60d;--glow-2:#2563eb0a;--scrollbar-thumb:#ffffff14;--scrollbar-thumb-hover:#ffffff26;--line-hover-bg:#ffffff0a;--btn-bg:#ffffff0a;--btn-hover-bg:#ffffff14;--header-panel-bg:#ffffff05;--syn-key:#7dd3fc;--syn-string:#6ee7b7;--syn-number:#fbbf24;--syn-boolean:#f9a8d4;--syn-null:#a3a3a3;--syn-bracket:#e5e5e5;--syn-punctuation:#a3a3a3;--shadow-sm:0 1px 3px #00000080;--shadow-md:0 4px 12px #0009;--shadow-lg:0 8px 30px #000000b3;--shadow-glow:0 0 20px #3b82f633;--shadow-card:0 1px 3px #0000004d}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow:hidden}#app{width:100vw;height:100vh;display:flex;position:relative}#app:before{content:"";background:radial-gradient(circle at 20% 20%, var(--glow-1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, var(--glow-2) 0%, transparent 50%);pointer-events:none;z-index:0;width:200%;height:200%;position:fixed;top:-50%;left:-50%}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border-subtle);z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);height:100vh;transition:width var(--transition-base), min-width var(--transition-base);flex-direction:column;display:flex;position:relative}.sidebar.collapsed{width:var(--sidebar-collapsed);min-width:var(--sidebar-collapsed)}.sidebar-header{padding:var(--space-5) var(--space-5);align-items:center;gap:var(--space-3);border-bottom:1px solid var(--border-subtle);height:var(--header-height);min-height:var(--header-height);display:flex}.sidebar-logo{border-radius:var(--radius-md);background:var(--gradient-primary);width:36px;height:36px;font-weight:700;font-size:var(--text-lg);color:#fff;box-shadow:var(--shadow-glow);flex-shrink:0;justify-content:center;align-items:center;display:flex}.sidebar-title{font-size:var(--text-base);color:var(--text-primary);white-space:nowrap;opacity:1;transition:opacity var(--transition-fast);font-weight:600;overflow:hidden}.sidebar.collapsed .sidebar-title{opacity:0;width:0}.sidebar-toggle{border-radius:var(--radius-full);background:var(--bg-tertiary);border:1px solid var(--border-medium);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;z-index:110;transition:all var(--transition-fast);justify-content:center;align-items:center;font-size:14px;display:flex;position:absolute;top:20px;right:-14px}.sidebar-toggle:hover{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary);box-shadow:var(--shadow-glow)}.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg)}.sidebar-nav{padding:var(--space-3);flex:1;overflow:hidden auto}.nav-section{margin-bottom:var(--space-4)}.nav-section-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:var(--space-2) var(--space-3);white-space:nowrap;opacity:1;transition:opacity var(--transition-fast);font-weight:600;overflow:hidden}.sidebar.collapsed .nav-section-title{opacity:0;height:0;margin:0;padding:0}.nav-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;margin-bottom:2px;text-decoration:none;display:flex;position:relative}.nav-item:hover{background:var(--nav-hover-bg);color:var(--text-primary)}.nav-item.active{background:var(--nav-active-bg);color:var(--accent-primary-hover)}.nav-item.active:before{content:"";background:var(--gradient-primary);border-radius:0 var(--radius-full) var(--radius-full) 0;width:3px;height:60%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.nav-item-icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:18px;display:flex}svg{vertical-align:middle;flex-shrink:0}.btn svg,.header-btn svg{flex-shrink:0}.tool-card-icon svg{color:var(--accent-primary)}.tool-card:hover .tool-card-icon svg{color:var(--accent-primary-hover)}.json-toolbar h2 .icon{color:var(--accent-primary);align-items:center;display:inline-flex}.nav-item-label{font-size:var(--text-sm);opacity:1;transition:opacity var(--transition-fast);font-weight:500;overflow:hidden}.sidebar.collapsed .nav-item-label{opacity:0;width:0}.sidebar.collapsed .nav-item{padding:var(--space-3);justify-content:center}.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--border-subtle)}.sidebar-footer-text{font-size:var(--text-xs);color:var(--text-muted);text-align:center;white-space:nowrap;opacity:1;transition:opacity var(--transition-fast);overflow:hidden}.sidebar.collapsed .sidebar-footer-text{opacity:0}.main-content{z-index:1;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.main-content.no-sidebar{width:100%}.header-home-link{color:var(--primary);align-items:center;gap:6px;font-size:15px;font-weight:600;text-decoration:none;display:flex}.header-home-link:hover{opacity:.8}.header-app-title{white-space:nowrap}.header{height:var(--header-height);min-height:var(--header-height);padding:0 var(--space-8);border-bottom:1px solid var(--border-subtle);background:var(--bg-header);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;display:flex}.header-left{align-items:center;gap:var(--space-3);display:flex}.header-breadcrumb{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);display:flex}.header-breadcrumb span{color:var(--text-muted)}.header-breadcrumb .current{color:var(--text-primary);font-weight:500}.header-right{align-items:center;gap:var(--space-3);display:flex}.header-btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--text-sm);font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);background:0 0;display:flex}.header-btn:hover{border-color:var(--border-medium);color:var(--text-primary);background:var(--btn-bg)}.page-content{padding:var(--space-8);scroll-behavior:smooth;flex:1;overflow-y:auto}.page-content a{color:inherit;text-decoration:none}.page-content::-webkit-scrollbar{width:6px}.page-content::-webkit-scrollbar-track{background:0 0}.page-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.page-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.home-hero{text-align:center;padding:var(--space-12) 0 var(--space-8)}.home-hero h1{letter-spacing:-.02em;background:var(--gradient-primary);-webkit-text-fill-color:transparent;margin-bottom:var(--space-3);-webkit-background-clip:text;background-clip:text;font-size:2.75rem;font-weight:700;line-height:1.2}.home-hero p{font-size:var(--text-lg);color:var(--text-secondary);max-width:500px;margin:0 auto;line-height:1.7}.tools-grid{gap:var(--space-5);max-width:1000px;padding:var(--space-4) 0;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0 auto;display:grid}.tool-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);cursor:pointer;transition:all var(--transition-base);color:inherit;text-decoration:none;display:block;position:relative;overflow:hidden}.tool-card:before{content:"";background:var(--gradient-primary);opacity:0;height:2px;transition:opacity var(--transition-base);position:absolute;top:0;left:0;right:0}.tool-card:hover{background:var(--bg-card-hover);border-color:var(--border-accent);box-shadow:var(--shadow-card), var(--shadow-glow);transform:translateY(-2px)}.tool-card:hover:before{opacity:1}.tool-card-icon{border-radius:var(--radius-md);background:var(--gradient-subtle);border:1px solid var(--border-subtle);width:48px;height:48px;margin-bottom:var(--space-4);transition:all var(--transition-base);justify-content:center;align-items:center;font-size:24px;display:flex}.tool-card:hover .tool-card-icon{background:var(--card-icon-hover-bg);border-color:var(--border-accent);box-shadow:var(--card-icon-hover-shadow)}.tool-card-title{font-size:var(--text-lg);margin-bottom:var(--space-2);font-weight:600}.tool-card-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}.tool-card-tag{margin-top:var(--space-3);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--tag-bg);color:var(--text-accent);font-size:var(--text-xs);font-weight:500;display:inline-block}.json-page{gap:var(--space-4);flex-direction:column;height:100%;display:flex}.json-toolbar{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.json-toolbar-group{align-items:center;gap:var(--space-2);display:flex}.json-toolbar h2{font-size:var(--text-xl);margin-right:var(--space-4);align-items:center;gap:var(--space-2);font-weight:600;display:flex}.json-toolbar h2 span.icon{font-size:24px}.btn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--btn-bg);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;height:36px;font-weight:500;display:inline-flex}.btn:hover{background:var(--btn-hover-bg);color:var(--text-primary);border-color:var(--border-medium)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.btn-primary:hover{background:var(--accent-primary-hover);border-color:var(--accent-primary-hover);color:#fff;box-shadow:var(--shadow-glow)}.btn-success{color:var(--accent-success);background:#10b9811f;border-color:#10b9814d}.btn-success:hover{color:var(--accent-success);background:#10b98133;border-color:#10b98180}.btn-error{color:var(--accent-error);background:#ef44441f;border-color:#ef44444d}.btn-error:hover{color:var(--accent-error);background:#ef444433;border-color:#ef444480}.btn-icon{padding:var(--space-2);justify-content:center;width:36px}.select-wrapper{position:relative}.select-styled{appearance:none;padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--btn-bg);color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);height:36px}.select-styled:hover{border-color:var(--border-medium);color:var(--text-primary)}.select-styled:focus{border-color:var(--accent-primary);box-shadow:var(--focus-ring);outline:none}.tool-label{font-size:var(--text-sm);color:var(--text-secondary);white-space:nowrap;font-weight:500}.tool-options-row{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.tool-option{align-items:center;gap:var(--space-2);display:flex}.tool-checkbox{font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;display:flex}.tool-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-primary);cursor:pointer}.tool-range-group{align-items:center;gap:var(--space-2);display:flex}.tool-range{width:140px;accent-color:var(--accent-primary)}.tool-range-value{font-size:var(--text-sm);color:var(--text-primary);text-align:center;min-width:2.5em;font-weight:600}.proxy-format-badge{border-radius:var(--radius-sm);background:var(--btn-bg);color:var(--text-muted);border:1px solid var(--border-subtle);align-items:center;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.proxy-format-badge.detected{color:var(--accent-success);background:#10b9811a;border-color:#10b9814d}.proxy-format-badge.error{color:var(--accent-error);background:#ef44441a;border-color:#ef44444d}.json-editors{gap:var(--space-4);flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid}.json-editor-panel{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-card);min-width:0;min-height:0;transition:border-color var(--transition-fast);flex-direction:column;display:flex;overflow:hidden}.json-editor-panel:focus-within{border-color:var(--border-accent)}.editor-panel-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);background:var(--header-panel-bg);justify-content:space-between;align-items:center;min-height:44px;display:flex}.editor-panel-title{font-size:var(--text-sm);color:var(--text-secondary);align-items:center;gap:var(--space-2);font-weight:600;display:flex}.editor-panel-actions{align-items:center;gap:var(--space-2);display:flex}.status-dot{border-radius:var(--radius-full);background:var(--text-muted);width:8px;height:8px;transition:background var(--transition-fast)}.status-dot.valid{background:var(--accent-success);box-shadow:0 0 6px #10b98166}.status-dot.invalid{background:var(--accent-error);box-shadow:0 0 6px #ef444466}.editor-textarea{width:100%;padding:var(--space-4);color:var(--text-primary);font-family:var(--font-mono);resize:none;tab-size:2;background:0 0;border:none;outline:none;flex:1;min-height:0;font-size:13px;line-height:1.7}.editor-textarea::placeholder{color:var(--text-muted)}.editor-textarea::-webkit-scrollbar{width:6px}.editor-textarea::-webkit-scrollbar-track{background:0 0}.editor-textarea::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.editor-textarea::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.json-output-container{padding:var(--space-4);font-family:var(--font-mono);flex:1;min-width:0;min-height:0;font-size:13px;line-height:1.7;overflow:auto}.json-output-container::-webkit-scrollbar{width:6px;height:6px}.json-output-container::-webkit-scrollbar-track{background:0 0}.json-output-container::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}.json-key{color:var(--syn-key)}.json-string{color:var(--syn-string)}.json-number{color:var(--syn-number)}.json-boolean{color:var(--syn-boolean)}.json-null{color:var(--syn-null);font-style:italic}.json-bracket{color:var(--syn-bracket)}.json-colon,.json-comma{color:var(--syn-punctuation)}.json-line{padding:1px 0;padding-left:var(--space-2);white-space:nowrap;border-radius:2px;line-height:1.5;display:block}.json-line:hover{background:var(--line-hover-bg)}.json-tree{min-width:100%;padding:var(--space-2);font-family:SF Mono,Fira Code,Cascadia Code,Menlo,Consolas,monospace;font-size:13px;display:inline-block;overflow:visible}.json-node{padding-left:var(--space-2)}.json-node>.json-children{border-left:1px solid var(--border-subtle,#80808026);padding-left:1.2em}.json-node.collapsed>.json-children{display:none}.json-node.collapsed>.json-preview{display:inline}.json-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;width:1em;color:var(--text-muted);text-align:center;font-size:10px;transition:transform .15s;display:inline-block}.json-node:not(.collapsed)>.json-toggle{transform:rotate(90deg)}.json-toggle:hover{color:var(--text-primary)}.json-preview{color:var(--text-muted);margin-left:4px;font-size:12px;font-style:italic;display:none}.json-key{color:var(--syn-key);cursor:pointer}.json-key:hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.json-index{color:var(--text-muted);cursor:pointer;opacity:.7;font-size:11px}.json-index:hover{opacity:1;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.json-value{cursor:pointer}.json-value:hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.json-error{padding:var(--space-4);color:var(--accent-error);font-family:var(--font-mono);font-size:var(--text-sm);align-items:flex-start;gap:var(--space-3);border-radius:var(--radius-md);margin:var(--space-4);background:#ef44440f;border:1px solid #ef444426;display:flex}.json-error-icon{flex-shrink:0;font-size:18px}.json-stats{align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);font-size:var(--text-xs);color:var(--text-muted);border-top:1px solid var(--border-subtle);background:var(--header-panel-bg);display:flex}.json-stats-item{align-items:center;gap:var(--space-1);display:flex}.editor-placeholder{color:var(--text-muted);font-size:var(--text-sm);justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-8);text-align:center;flex-direction:column;flex:1;display:flex}.editor-placeholder-icon{opacity:.3;color:var(--text-secondary);justify-content:center;align-items:center;display:flex}.toast-container{top:var(--space-4);right:var(--space-4);z-index:9999;gap:var(--space-2);flex-direction:column;display:flex;position:fixed}.toast{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--bg-tertiary);border:1px solid var(--border-medium);color:var(--text-primary);font-size:var(--text-sm);align-items:center;gap:var(--space-2);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:.3s cubic-bezier(.4,0,.2,1) slideInRight;display:flex}.toast.success{background:#10b9811a;border-color:#10b9814d}.toast.error{background:#ef44441a;border-color:#ef44444d}.toast.exit{animation:.25s cubic-bezier(.4,0,.2,1) forwards slideOutRight}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media (width<=768px){.sidebar{z-index:1000;transition:transform var(--transition-base);position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0)}.sidebar-toggle{display:none}.mobile-menu-btn{display:flex!important}.json-editors{grid-template-columns:1fr}.home-hero h1{font-size:2rem}}.mobile-menu-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:0 0;justify-content:center;align-items:center;font-size:18px;display:none}.sidebar-overlay{z-index:999;background:#00000080;display:none;position:fixed;inset:0}.sidebar-overlay.visible{display:block}.theme-toggle{border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--btn-bg);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.theme-toggle:hover{background:var(--btn-hover-bg);color:var(--accent-primary);border-color:var(--border-accent)}.theme-toggle:active{transform:scale(.93)}body,body *,body :before,body :after{transition:background-color .25s,color .15s,border-color .2s,box-shadow .2s}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:.35s cubic-bezier(.4,0,.2,1) forwards fadeIn}.animate-in-delay-1{opacity:0;animation-delay:50ms}.animate-in-delay-2{opacity:0;animation-delay:.1s}.animate-in-delay-3{opacity:0;animation-delay:.15s}.animate-in-delay-4{opacity:0;animation-delay:.2s}.ai-key-page{gap:var(--space-4)}.ai-key-config-panel{flex:none}.ai-key-config-grid{gap:var(--space-4);padding:var(--space-4);grid-template-columns:minmax(160px,.8fr) minmax(220px,1.2fr) minmax(260px,1fr) minmax(120px,.6fr);display:grid}.ai-key-field{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.ai-key-field .select-styled{width:100%}.ai-key-prefix-field{min-width:220px}.ai-key-input{width:100%;height:36px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-sm);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.ai-key-input:hover{border-color:var(--border-medium)}.ai-key-input:focus{border-color:var(--accent-primary);box-shadow:var(--focus-ring)}.ai-key-input::placeholder{color:var(--text-muted)}.ai-key-output-grid{grid-template-columns:1fr}.ai-key-output{word-break:break-all;min-height:260px}@media (width<=1100px){.ai-key-config-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}}@media (width<=680px){.ai-key-config-grid{grid-template-columns:1fr}.ai-key-prefix-field{min-width:0}}.image-compressor-page{height:auto;min-height:100%}.image-compressor-grid{gap:var(--space-4);flex:1;grid-template-columns:minmax(300px,.82fr) repeat(2,minmax(300px,1fr));min-height:0;display:grid}.image-compressor-grid>.json-editor-panel{min-width:0}.image-compressor-panel-body{gap:var(--space-4);padding:var(--space-4);flex-direction:column;display:flex}.image-compressor-dropzone{min-height:180px;padding:var(--space-5);border:1.5px dashed var(--border-medium);border-radius:var(--radius-lg);background:var(--gradient-subtle);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);text-align:center;justify-content:center;align-items:center;display:flex}.image-compressor-dropzone:hover,.image-compressor-dropzone.dragover,.image-compressor-dropzone:focus-visible{border-color:var(--accent-primary);box-shadow:var(--focus-ring);background:linear-gradient(135deg,#3b82f617,#10b98114)}.image-compressor-dropzone:focus-visible{outline:none}.image-compressor-dropzone-empty{align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.image-compressor-dropzone-title{font-size:var(--text-base);color:var(--text-primary);font-weight:600}.image-compressor-dropzone-copy{font-size:var(--text-sm);color:var(--text-secondary)}.image-compressor-options{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.image-compressor-field{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.image-compressor-quality-field{grid-column:1/-1}.image-compressor-field.is-disabled{opacity:.55}.image-compressor-input{width:100%;height:36px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--btn-bg);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);transition:all var(--transition-fast)}.image-compressor-input:hover{border-color:var(--border-medium)}.image-compressor-input:focus{border-color:var(--accent-primary);box-shadow:var(--focus-ring);outline:none}.image-compressor-quality{width:100%}.image-compressor-quality-value{color:var(--text-primary);font-weight:600}.image-compressor-metrics{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.image-compressor-metric{gap:var(--space-1);min-width:0;padding:var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--header-panel-bg);flex-direction:column;display:flex}.image-compressor-metric-label{font-size:var(--text-xs);color:var(--text-muted)}.image-compressor-metric strong{min-height:1.35em;color:var(--text-primary);font-size:var(--text-sm);overflow-wrap:anywhere;font-weight:650}.image-compressor-negative{color:var(--accent-warning)!important}.image-compressor-preview-surface{min-height:420px;padding:var(--space-4);background:linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%), var(--bg-secondary);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;place-items:center;display:grid;overflow:hidden}.image-compressor-preview-surface>*{grid-area:1/1}.image-compressor-preview-surface>[hidden]{display:none!important}.image-compressor-preview{object-fit:contain;border-radius:var(--radius-md);max-width:100%;max-height:460px;box-shadow:var(--shadow-md);background:#fff;display:block}.image-compressor-preview-surface .editor-placeholder{background:color-mix(in srgb, var(--bg-card) 78%, transparent);border-radius:var(--radius-md);width:100%;min-height:100%}.image-compressor-page .btn:disabled,.image-compressor-page .tool-range:disabled{cursor:not-allowed;opacity:.55}.image-compressor-page .editor-panel-actions{min-width:0}.image-compressor-page .proxy-format-badge{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}@media (width<=1180px){.image-compressor-grid{grid-template-columns:minmax(300px,.8fr) minmax(320px,1fr)}.image-compressor-grid>.json-editor-panel:nth-child(3){grid-column:1/-1}}@media (width<=820px){.image-compressor-grid{grid-template-columns:1fr}.image-compressor-grid>.json-editor-panel:nth-child(3){grid-column:auto}.image-compressor-preview-surface{min-height:320px}}@media (width<=560px){.image-compressor-options,.image-compressor-metrics{grid-template-columns:1fr}.image-compressor-quality-field{grid-column:auto}}.pomodoro-page{height:auto;min-height:100%}.pomodoro-layout{gap:var(--space-4);grid-template-columns:minmax(340px,1.15fr) minmax(280px,.85fr);align-items:start;display:grid}.pomodoro-timer-card,.pomodoro-side-card{min-width:0}.pomodoro-timer-body{align-items:center;gap:var(--space-6);padding:var(--space-8) var(--space-6);flex-direction:column;display:flex}.pomodoro-ring{--pomodoro-ring-color:var(--accent-primary);--pomodoro-ring-soft:#3b82f61f;--pomodoro-progress:0%;--pomodoro-dial-angle:0deg;--pomodoro-handle-offset:max(-160px, -36vw);aspect-ratio:1;border-radius:var(--radius-full);background:conic-gradient(var(--pomodoro-ring-color) var(--pomodoro-progress), var(--border-subtle) 0), var(--gradient-subtle);width:min(72vw,320px);box-shadow:var(--shadow-card), 0 0 32px var(--pomodoro-ring-soft);-webkit-user-select:none;user-select:none;touch-action:none;transition:background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);outline:none;place-items:center;padding:12px;display:grid;position:relative}.pomodoro-ring:focus-visible{box-shadow:var(--shadow-card), 0 0 32px var(--pomodoro-ring-soft), var(--focus-ring)}.pomodoro-ring.is-adjustable{cursor:grab}.pomodoro-ring.is-adjustable:hover,.pomodoro-ring.is-adjusting{box-shadow:var(--shadow-card), 0 0 44px var(--pomodoro-ring-soft);transform:translateY(-2px)}.pomodoro-ring.is-adjusting{cursor:grabbing}.pomodoro-ring-handle{z-index:2;border:3px solid var(--bg-secondary);border-radius:var(--radius-full);background:var(--pomodoro-ring-color);width:18px;height:18px;box-shadow:var(--shadow-card), 0 0 0 6px var(--pomodoro-ring-soft);opacity:0;pointer-events:none;transform:translate(-50%, -50%) rotate(var(--pomodoro-dial-angle)) translateY(var(--pomodoro-handle-offset));transition:opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);position:absolute;top:50%;left:50%}.pomodoro-ring.is-adjustable .pomodoro-ring-handle,.pomodoro-ring.is-adjusting .pomodoro-ring-handle{opacity:1}.pomodoro-ring.focus{--pomodoro-ring-color:var(--accent-primary);--pomodoro-ring-soft:#3b82f629}.pomodoro-ring.short-break{--pomodoro-ring-color:var(--accent-success);--pomodoro-ring-soft:#10b98129}.pomodoro-ring.long-break{--pomodoro-ring-color:var(--accent-warning);--pomodoro-ring-soft:#f59e0b2e}.pomodoro-ring-inner{z-index:1;justify-content:center;align-items:center;gap:var(--space-3);border-radius:var(--radius-full);border:1px solid var(--border-subtle);background:var(--bg-secondary);flex-direction:column;width:100%;height:100%;display:flex;position:relative;box-shadow:inset 0 1px #ffffff14}.pomodoro-phase-icon{border-radius:var(--radius-full);background:var(--gradient-subtle);width:52px;height:52px;color:var(--pomodoro-ring-color);border:1px solid var(--border-subtle);justify-content:center;align-items:center;display:flex}.pomodoro-time{font-family:var(--font-mono);letter-spacing:-.08em;color:var(--text-primary);font-size:clamp(3rem,9vw,5.5rem);font-weight:700;line-height:1}.pomodoro-progress-text{font-size:var(--text-sm);color:var(--text-muted);min-height:1.4em;font-weight:600}.pomodoro-phase-copy{text-align:center;max-width:34rem}.pomodoro-phase-copy h3{font-size:var(--text-2xl);margin-bottom:var(--space-2);line-height:1.2}.pomodoro-phase-copy p,.pomodoro-next-card p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}.pomodoro-actions{justify-content:center;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.pomodoro-primary-action{justify-content:center;min-width:132px}.pomodoro-stats-grid{gap:var(--space-3);padding:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.pomodoro-stat-card,.pomodoro-next-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--gradient-subtle)}.pomodoro-stat-card{gap:var(--space-1);padding:var(--space-4);flex-direction:column;display:flex}.pomodoro-stat-value{font-family:var(--font-mono);font-size:var(--text-3xl);color:var(--text-primary);font-weight:700;line-height:1.1}.pomodoro-stat-label{font-size:var(--text-sm);color:var(--text-secondary)}.pomodoro-next-card{gap:var(--space-2);margin:0 var(--space-4) var(--space-4);padding:var(--space-4);flex-direction:column;display:flex}.pomodoro-next-card strong{font-size:var(--text-lg);color:var(--text-primary)}.pomodoro-mode-buttons{gap:var(--space-2);padding:0 var(--space-4) var(--space-4);grid-template-columns:1fr;display:grid}.pomodoro-mode-button{justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--btn-bg);min-height:40px;color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);font-weight:600;display:flex}.pomodoro-mode-button:hover{color:var(--text-primary);border-color:var(--border-medium);background:var(--btn-hover-bg)}.pomodoro-mode-button.active{color:var(--accent-primary-hover);border-color:var(--border-accent);background:var(--nav-active-bg);box-shadow:var(--shadow-card)}.pomodoro-badge-focus{color:var(--accent-primary-hover);background:#3b82f61a;border-color:#3b82f64d}.pomodoro-badge-short-break{color:var(--accent-success);background:#10b9811a;border-color:#10b9814d}.pomodoro-badge-long-break{color:var(--accent-warning);background:#f59e0b1f;border-color:#f59e0b52}@media (width<=980px){.pomodoro-layout{grid-template-columns:1fr}}@media (width<=640px){.pomodoro-timer-body{padding:var(--space-6) var(--space-4)}.pomodoro-stats-grid{grid-template-columns:1fr}.pomodoro-actions{flex-direction:column;align-items:stretch;width:100%}.pomodoro-actions .btn{justify-content:center;width:100%}}.json-page:has(.qr-grid){height:auto;min-height:100%}.qr-grid{gap:var(--space-4);flex:1;grid-template-columns:minmax(320px,1fr) minmax(280px,.9fr);display:grid}.qr-grid>.json-editor-panel,.qr-decode-grid>*{min-width:0}.qr-panel-span-2{grid-column:1/-1}.qr-panel-body{gap:var(--space-4);padding:var(--space-4);flex-direction:column;display:flex}.qr-textarea-shell{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-input);flex:1;min-height:120px;display:flex;overflow:hidden}.qr-textarea{min-height:120px}.qr-result-textarea{min-height:300px}.qr-options-grid{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.qr-option-field{gap:var(--space-2);flex-direction:column;display:flex}.qr-color-field{min-width:0}.qr-color-input{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--btn-bg);cursor:pointer;width:100%;height:36px;padding:4px}.qr-color-input:hover{border-color:var(--border-medium)}.qr-color-input:focus{border-color:var(--accent-primary);box-shadow:var(--focus-ring);outline:none}.qr-help-text{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}.qr-preview-shell{justify-content:flex-start;align-items:stretch;gap:var(--space-4);padding:var(--space-4);flex-direction:column;height:100%;min-height:0;display:flex}.qr-preview-surface{width:100%;max-width:360px;min-height:300px;padding:var(--space-4);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);background:linear-gradient(135deg, #3b82f612, #10b9810d), var(--bg-secondary);box-shadow:var(--shadow-card);place-items:center;margin:0 auto;display:grid;overflow:hidden}.qr-preview-surface>*{grid-area:1/1}.qr-preview-surface>[hidden],.qr-dropzone>[hidden]{display:none!important}.qr-preview-surface .editor-placeholder{width:100%;min-height:100%;padding:var(--space-6) var(--space-4)}.qr-canvas{aspect-ratio:1;box-shadow:var(--shadow-md);background:#fff;border-radius:18px;display:block;width:min(100%,280px)!important;max-width:100%!important;height:auto!important}.qr-meta-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.qr-decode-grid{gap:var(--space-4);padding:var(--space-4);grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr);min-height:0;display:grid}.qr-decode-upload{gap:var(--space-4);flex-direction:column;display:flex}.qr-dropzone{min-height:300px;padding:var(--space-6);border-radius:var(--radius-lg);border:1.5px dashed var(--border-medium);background:var(--gradient-subtle);cursor:pointer;transition:all var(--transition-fast);text-align:center;justify-content:center;align-items:center;display:flex;overflow:hidden}.qr-dropzone:hover,.qr-dropzone.dragover,.qr-dropzone:focus-visible{border-color:var(--accent-primary);box-shadow:var(--focus-ring);background:linear-gradient(135deg,#3b82f617,#10b98114)}.qr-dropzone:focus-visible{outline:none}.qr-dropzone-empty{align-items:center;gap:var(--space-3);color:var(--text-secondary);flex-direction:column;display:flex}.qr-dropzone-title{font-size:var(--text-base);color:var(--text-primary);font-weight:600}.qr-dropzone-copy{font-size:var(--text-sm);color:var(--text-secondary);max-width:24rem}.qr-dropzone-image{object-fit:contain;border-radius:var(--radius-lg);max-width:100%;max-height:320px;box-shadow:var(--shadow-md);background:#fff}.qr-result-panel{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-card);flex-direction:column;min-height:300px;display:flex;overflow:hidden}.qr-subpanel-header{border-bottom:1px solid var(--border-subtle)}@media (width<=980px){.qr-grid,.qr-decode-grid{grid-template-columns:1fr}.qr-panel-span-2{grid-column:auto}}@media (width<=640px){.qr-options-grid{grid-template-columns:1fr}.qr-preview-surface{min-height:260px;padding:var(--space-3)}.qr-canvas{width:min(100%,240px)!important}}