:root{--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Plus Jakarta Sans", var(--font-sans);--font-mono:"JetBrains Mono", "Fira Code", monospace;--bg-canvas:#090d16;--bg-sidebar:#0d121f;--bg-header:#0d121fd9;--bg-surface:#131a29;--bg-surface-elevated:#1a2336;--bg-surface-card:#161e30b3;--bg-input:#0f1523;--bg-input-focus:#141c2e;--border-subtle:#ffffff12;--border-strong:#ffffff24;--border-focus:#06b6d4;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--text-inverse:#090d16;--accent-cyan:#06b6d4;--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--accent-emerald:#10b981;--accent-amber:#f59e0b;--accent-rose:#f43f5e;--accent-gradient:linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);--accent-glow:0 0 25px #06b6d440;--glow-emerald:0 0 25px #10b98140;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 10px 25px -5px #00000080, 0 8px 10px -6px #00000080;--shadow-xl:0 20px 40px -10px #0009;--sidebar-width:270px;--sidebar-collapsed-width:76px;--header-height:64px;--tabs-height:42px;--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-normal:.25s cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--bg-canvas:#f8fafc;--bg-sidebar:#fff;--bg-header:#ffffffe6;--bg-surface:#fff;--bg-surface-elevated:#f1f5f9;--bg-surface-card:#fff;--bg-input:#f8fafc;--bg-input-focus:#fff;--border-subtle:#e2e8f0;--border-strong:#cbd5e1;--border-focus:#0284c7;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-inverse:#fff;--accent-cyan:#0284c7;--accent-glow:0 0 20px #0284c726;--shadow-md:0 4px 12px #0f172a0f;--shadow-lg:0 10px 25px -5px #0f172a14;--shadow-xl:0 20px 35px -10px #0f172a1f}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-sans);background-color:var(--bg-canvas);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;overflow:hidden}#root{width:100%;height:100%;display:flex;overflow:hidden}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#94a3b840;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#94a3b866}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-primary);font-weight:700}code,pre,kbd,.font-mono{font-family:var(--font-mono)}kbd{background:var(--bg-surface-elevated);border:1px solid var(--border-strong);color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);border-radius:4px;align-items:center;gap:2px;padding:2px 6px;display:inline-flex;box-shadow:0 1px #0003}input,textarea,select{color:var(--text-primary);background-color:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--transition-fast);outline:none;padding:9px 13px;font-family:inherit;font-size:13.5px}input:focus,textarea:focus,select:focus{background-color:var(--bg-input-focus);border-color:var(--border-focus);box-shadow:0 0 0 3px #06b6d426}input::placeholder,textarea::placeholder{color:var(--text-muted)}textarea{resize:vertical;line-height:1.6}button{cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;outline:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:500;display:inline-flex}.btn-primary{background:var(--accent-gradient);color:#fff;border-radius:var(--radius-md);transition:transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);padding:9px 18px;font-weight:600;box-shadow:0 2px 10px #06b6d44d}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 16px #06b6d473}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-surface-elevated);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px 16px;font-weight:500}.btn-secondary:hover{background:var(--bg-surface);border-color:var(--text-muted);color:var(--text-primary)}.btn-ghost{color:var(--text-secondary);border-radius:var(--radius-md);padding:8px 12px}.btn-ghost:hover{background:var(--bg-surface-elevated);color:var(--text-primary)}.btn-icon{border-radius:var(--radius-md);width:36px;min-width:36px;height:36px;color:var(--text-secondary);background:0 0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;padding:0!important}.btn-icon:hover{background:var(--bg-surface-elevated);color:var(--text-primary)}.btn-icon.active{color:var(--accent-amber)}.badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:5px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-cyan{color:#38bdf8;background:#06b6d426;border:1px solid #06b6d44d}.badge-purple{color:#a78bfa;background:#8b5cf626;border:1px solid #8b5cf64d}.badge-emerald{color:#34d399;background:#10b98126;border:1px solid #10b9814d}.badge-amber{color:#fbbf24;background:#f59e0b26;border:1px solid #f59e0b4d}.badge-rose{color:#fb7185;background:#f43f5e26;border:1px solid #f43f5e4d}.app-shell{background-color:var(--bg-canvas);width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.app-sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);border-right:1px solid var(--border-subtle);height:100%;transition:width var(--transition-normal);z-index:30;flex-direction:column;flex-shrink:0;display:flex;position:relative}.app-sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-header{height:var(--header-height);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:0 18px;display:flex}.brand-container{cursor:pointer;align-items:center;gap:12px;text-decoration:none;display:flex;overflow:hidden}.brand-logo-icon{border-radius:var(--radius-md);background:var(--accent-gradient);color:#fff;width:36px;height:36px;transition:transform var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 2px 10px #06b6d459}.brand-logo-icon:hover{transform:rotate(-6deg)scale(1.05)}.brand-text{white-space:nowrap;flex-direction:column;display:flex}.brand-title{font-family:var(--font-display);letter-spacing:-.03em;color:var(--text-primary);font-size:18px;font-weight:800;line-height:1.1}.brand-title span{color:var(--accent-cyan)}.brand-subtitle{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:600}.sidebar-collapse-btn{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-muted);background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);justify-content:center;align-items:center;display:flex}.sidebar-collapse-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.sidebar-search-box{padding:14px 16px 8px}.sidebar-search-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-muted);justify-content:space-between;align-items:center;padding:8px 12px;font-size:12.5px;display:flex}.sidebar-search-btn:hover{border-color:var(--border-strong);color:var(--text-secondary)}.sidebar-search-btn-left{align-items:center;gap:8px;display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:20px;padding:8px 12px;display:flex;overflow-y:auto}.sidebar-section-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);justify-content:space-between;align-items:center;padding:0 10px 6px;font-size:11px;font-weight:700;display:flex}.sidebar-menu-list{flex-direction:column;gap:3px;list-style:none;display:flex}.sidebar-menu-item{border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;border:1px solid #0000;align-items:center;gap:10px;padding:8px 10px;font-size:13px;font-weight:500;display:flex}.sidebar-menu-item:hover{background:var(--bg-surface);color:var(--text-primary)}.sidebar-menu-item.active{color:var(--accent-cyan);background:#06b6d41a;border-color:#06b6d440;font-weight:600}.sidebar-menu-item-icon{flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;display:flex}.sidebar-menu-item-label{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.sidebar-menu-item-badge{background:var(--bg-surface-elevated);color:var(--text-muted);border-radius:999px;padding:1px 6px;font-size:10px}.sidebar-menu-item.active .sidebar-menu-item-badge{color:var(--accent-cyan);background:#06b6d433}.sidebar-footer{border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;display:flex}.app-main{flex-direction:column;flex:1;min-width:0;height:100%;display:flex;position:relative;overflow:hidden}.app-header{height:var(--header-height);background-color:var(--bg-header);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);z-index:20;flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:0 20px;display:flex}.header-left{align-items:center;gap:14px;min-width:0;display:flex}.header-breadcrumbs{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-size:13px;display:flex;overflow:hidden}.breadcrumb-home{color:var(--text-secondary);cursor:pointer;align-items:center;display:flex}.breadcrumb-home:hover{color:var(--text-primary)}.breadcrumb-sep{opacity:.4}.breadcrumb-current{color:var(--text-primary);font-weight:600}.header-right{align-items:center;gap:10px;display:flex}.header-control-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);height:36px;color:var(--text-secondary);align-items:center;gap:6px;padding:0 12px;font-size:12.5px;font-weight:500;display:flex}.header-control-btn:hover{background:var(--bg-surface-elevated);border-color:var(--border-strong);color:var(--text-primary)}.tool-tabs-bar{height:var(--tabs-height);background:var(--bg-sidebar);border-bottom:1px solid var(--border-subtle);flex-shrink:0;align-items:center;gap:6px;padding:0 12px;display:flex;overflow-x:auto}.tool-tab{border-radius:var(--radius-sm);height:32px;color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:0 12px;font-size:12px;font-weight:500;display:flex}.tool-tab:hover{background:var(--bg-surface);color:var(--text-primary)}.tool-tab.active{background:var(--bg-surface-elevated);border-color:var(--border-subtle);color:var(--accent-cyan);box-shadow:var(--shadow-sm);font-weight:600}.tool-tab-close{width:16px;height:16px;color:var(--text-muted);opacity:.7;border-radius:50%;justify-content:center;align-items:center;display:flex}.tool-tab-close:hover{opacity:1;color:var(--text-primary);background:#ffffff1a}.app-content-body{flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.catalog-container{flex-direction:column;gap:36px;width:100%;max-width:1280px;margin:0 auto;padding:36px 28px 60px;display:flex}.catalog-hero{text-align:center;flex-direction:column;align-items:center;gap:16px;max-width:760px;margin:0 auto;display:flex}.catalog-badge-pill{border-radius:var(--radius-full);color:var(--accent-cyan);letter-spacing:.02em;background:#06b6d41a;border:1px solid #06b6d44d;align-items:center;gap:8px;padding:5px 14px;font-size:12px;font-weight:600;display:inline-flex}.catalog-hero-title{letter-spacing:-.03em;background:linear-gradient(135deg,#fff 30%,#94a3b8 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:40px;font-weight:800;line-height:1.15}[data-theme=light] .catalog-hero-title{background:linear-gradient(135deg,#0f172a 30%,#334155 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.catalog-hero-desc{color:var(--text-secondary);font-size:15px;line-height:1.6}.catalog-search-wrap{width:100%;max-width:640px;margin:4px auto 0;position:relative}.catalog-search-input{border-radius:var(--radius-lg);background:var(--bg-surface);border:1px solid var(--border-strong);width:100%;padding:14px 44px 14px 46px;font-size:15px;box-shadow:0 4px 20px #0003}.catalog-search-icon{color:var(--text-muted);position:absolute;top:50%;left:16px;transform:translateY(-50%)}.catalog-search-kbd{position:absolute;top:50%;right:14px;transform:translateY(-50%)}.category-chips-list{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.category-chip{border-radius:var(--radius-full);background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:7px;padding:8px 16px;font-size:13px;font-weight:500;display:flex}.category-chip:hover{background:var(--bg-surface-elevated);border-color:var(--border-strong);color:var(--text-primary)}.category-chip.active{background:var(--accent-gradient);color:#fff;border-color:#0000;font-weight:600;box-shadow:0 4px 14px #06b6d459}.category-chip-count{opacity:.8;border-radius:var(--radius-full);background:#0003;padding:1px 5px;font-size:11px}.tools-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;display:grid}.tool-card{background:var(--bg-surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-direction:column;gap:12px;padding:18px;display:flex;position:relative}.tool-card:hover{background:var(--bg-surface-elevated);border-color:#06b6d466;transform:translateY(-3px);box-shadow:0 12px 28px -6px #0006,0 0 20px #06b6d426}.tool-card-top{justify-content:space-between;align-items:flex-start;display:flex}.tool-card-icon-frame{border-radius:var(--radius-md);width:44px;height:44px;color:var(--accent-cyan);transition:all var(--transition-fast);background:linear-gradient(135deg,#06b6d426 0%,#3b82f626 100%);border:1px solid #06b6d44d;justify-content:center;align-items:center;display:flex}.tool-card:hover .tool-card-icon-frame{background:var(--accent-gradient);color:#fff;transform:scale(1.05)}.tool-card-star{border-radius:var(--radius-sm);width:30px;height:30px;color:var(--text-muted);opacity:.6;justify-content:center;align-items:center;display:flex}.tool-card-star:hover,.tool-card-star.favorited{opacity:1;color:var(--accent-amber)}.tool-card-info{flex-direction:column;gap:6px;display:flex}.tool-card-title{color:var(--text-primary);font-size:15px;font-weight:700;line-height:1.25}.tool-card-desc{color:var(--text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12.5px;line-height:1.5;display:-webkit-box;overflow:hidden}.tool-card-footer{border-top:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;display:flex}.tool-card-category-label{color:var(--accent-cyan);font-size:11px;font-weight:600}.tool-card-action-hint{color:var(--text-muted);opacity:0;transition:all var(--transition-fast);align-items:center;gap:4px;font-size:11px;display:flex;transform:translate(-4px)}.tool-card:hover .tool-card-action-hint{opacity:1;transform:translate(0)}.tool-workspace{flex-direction:column;gap:20px;width:100%;max-width:1300px;margin:0 auto;padding:24px 28px 60px;display:flex}.tool-header{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;display:flex}.tool-header-left{align-items:flex-start;gap:16px;display:flex}.tool-header-icon{border-radius:var(--radius-lg);background:var(--accent-gradient);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;box-shadow:0 4px 16px #06b6d459}.tool-header-meta{flex-direction:column;gap:4px;display:flex}.tool-header-title-row{align-items:center;gap:10px;display:flex}.tool-header-title{letter-spacing:-.02em;font-size:24px;font-weight:800}.tool-header-desc{color:var(--text-secondary);max-width:700px;font-size:13.5px}.tool-header-actions{align-items:center;gap:8px;display:flex}.btn-favorite-active{color:#f59e0b!important;border-color:#f59e0b66!important}.workspace-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.workspace-grid.single-column{grid-template-columns:1fr}.workspace-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;display:flex;overflow:hidden}.panel-header{background:var(--bg-surface-elevated);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;gap:12px;height:48px;padding:0 16px;display:flex}.panel-title{color:var(--text-primary);align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.panel-actions{align-items:center;gap:6px;display:flex}.panel-body{flex-direction:column;flex:1;gap:16px;padding:18px;display:flex}.panel-footer{background:var(--bg-surface-elevated);border-top:1px solid var(--border-subtle);color:var(--text-muted);justify-content:space-between;align-items:center;padding:12px 18px;font-size:12px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;display:flex}.form-row{gap:12px;display:flex}.form-row>*{flex:1}.form-switch{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.form-switch input[type=checkbox]{cursor:pointer;accent-color:var(--accent-cyan);width:16px;height:16px}.code-editor-area{width:100%;min-height:280px;font-family:var(--font-mono);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);white-space:pre;padding:14px;font-size:13px;line-height:1.6}.result-box{background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);color:var(--accent-cyan);word-break:break-all;justify-content:space-between;align-items:center;padding:14px 16px;font-size:14px;display:flex}.result-box-value{letter-spacing:.05em;color:var(--text-primary);font-size:18px;font-weight:700}.batch-output{width:100%;min-height:200px;font-family:var(--font-mono);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:12px;font-size:13px;line-height:1.6}.command-palette-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000b3;justify-content:center;align-items:flex-start;padding-top:12vh;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}.command-palette{background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:100%;max-width:620px;box-shadow:var(--shadow-xl);flex-direction:column;display:flex;overflow:hidden}.command-search-header{border-bottom:1px solid var(--border-subtle);align-items:center;gap:12px;padding:14px 18px;display:flex}.command-search-input{background:0 0;border:none;flex:1;padding:0;font-size:16px;box-shadow:none!important}.command-results-list{flex-direction:column;gap:2px;max-height:380px;padding:8px;display:flex;overflow-y:auto}.command-item{border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.command-item:hover,.command-item.selected{background:var(--bg-surface-elevated);color:var(--text-primary)}.command-item-left{align-items:center;gap:12px;display:flex}.command-footer{background:var(--bg-surface-elevated);border-top:1px solid var(--border-subtle);color:var(--text-muted);justify-content:space-between;align-items:center;padding:10px 16px;font-size:11px;display:flex}.toast-container{z-index:200;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:fixed;bottom:24px;right:24px}.toast{pointer-events:auto;border-radius:var(--radius-md);background:var(--bg-surface-elevated);border:1px solid var(--border-strong);color:var(--text-primary);box-shadow:var(--shadow-lg);align-items:center;gap:10px;padding:12px 18px;font-size:13.5px;font-weight:500;animation:.2s cubic-bezier(.16,1,.3,1) slideInUp;display:flex}.toast-success{border-color:#10b98166}.toast-icon-success{color:#10b981}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=900px){.workspace-grid{grid-template-columns:1fr}.app-sidebar{box-shadow:var(--shadow-xl);position:absolute;top:0;bottom:0;left:0;transform:translate(-100%)}.app-sidebar.mobile-open{transform:translate(0)}}.coolors-container{flex-direction:column;gap:16px;width:100%;display:flex}.coolors-top-bar{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;display:flex}.coolors-bar-left,.coolors-bar-center,.coolors-bar-right{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.coolors-generate-btn{align-items:center;gap:8px;padding:9px 18px;font-weight:700;display:inline-flex;box-shadow:0 2px 12px #06b6d459}.space-badge{font-size:11px;font-weight:700;font-family:var(--font-mono);color:#fff;letter-spacing:.04em;background:#00000040;border:1px solid #ffffff4d;border-radius:4px;padding:2px 6px;display:inline-block}.coolors-control-item{align-items:center;display:flex;position:relative}.coolors-control-item .control-icon{color:var(--text-muted);pointer-events:none;z-index:2;position:absolute;left:10px}.coolors-select{min-width:190px;height:36px;padding-left:32px;font-size:12.5px}.coolors-export-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-color:#059669;box-shadow:0 2px 12px #10b98159}.coolors-export-btn:hover{filter:brightness(1.1)}.coolors-dropdown-menu{background-color:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:280px;box-shadow:var(--shadow-xl);z-index:50;padding:12px;animation:.15s ease-out fadeIn;position:absolute;top:calc(100% + 8px);right:0}.dropdown-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);margin-bottom:8px;padding-bottom:6px;font-size:11.5px;font-weight:700}.presets-list{flex-direction:column;gap:6px;max-height:280px;display:flex;overflow-y:auto}.preset-card-item{border-radius:var(--radius-sm);background-color:var(--bg-surface);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-fast);text-align:left;align-items:center;gap:10px;padding:8px 10px;display:flex}.preset-card-item:hover{background-color:var(--bg-canvas);border-color:var(--accent-cyan);transform:translate(2px)}.preset-swatches{border:1px solid #0003;border-radius:4px;gap:2px;display:flex;overflow:hidden}.preset-swatch-dot{width:10px;height:24px;display:inline-block}.preset-info{flex-direction:column;display:flex;overflow:hidden}.preset-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;font-weight:600;overflow:hidden}.preset-tag{color:var(--text-muted);font-size:10.5px}.coolors-palette-strip{border-radius:var(--radius-xl);border:1px solid var(--border-subtle);-webkit-user-select:none;user-select:none;width:100%;height:520px;min-height:420px;display:flex;position:relative;overflow:hidden;box-shadow:0 16px 40px #00000073}.coolors-column{flex-direction:column;flex:1;justify-content:space-between;align-items:center;height:100%;padding:24px 8px 36px;transition:background-color .22s cubic-bezier(.16,1,.3,1),flex-basis .2s;display:flex;position:relative}.coolors-column:hover .coolors-insert-between-btn{opacity:1;pointer-events:auto}.coolors-insert-between-btn{background-color:var(--bg-elevated);border:1px solid var(--border-strong);width:26px;height:26px;color:var(--text-primary);cursor:pointer;z-index:15;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:-13px;transform:translateY(-50%)}.coolors-insert-between-btn:hover{background-color:var(--accent-cyan);color:#000;transform:translateY(-50%)scale(1.18);box-shadow:0 0 12px #06b6d499}.column-toolbar{z-index:10;opacity:.85;transition:opacity var(--transition-fast);flex-direction:column;align-items:center;gap:8px;display:flex}.coolors-column:hover .column-toolbar{opacity:1}.column-action-btn{cursor:pointer;width:34px;height:34px;transition:all var(--transition-fast);background:#0000001f;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.column-action-btn:hover:not(:disabled){background:#00000047;transform:scale(1.12)}.column-action-btn:disabled{opacity:.3;cursor:not-allowed}.column-action-btn.active{background:#0006}.column-action-btn.lock-btn.locked{background:#f59e0b;box-shadow:0 0 12px #f59e0b99;color:#000!important}.shades-popover-wrapper{position:relative}.shades-dropdown{background-color:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-md);width:170px;box-shadow:var(--shadow-xl);z-index:60;animation:.15s ease-out fadeIn;position:absolute;top:42px;left:50%;overflow:hidden;transform:translate(-50%)}.shades-dropdown-header{color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);background-color:var(--bg-surface);justify-content:space-between;align-items:center;padding:8px 10px;font-size:11px;font-weight:700;display:flex}.shades-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:11px}.shades-list{flex-direction:column;display:flex}.shade-item{cursor:pointer;height:26px;transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex}.shade-item:hover{z-index:2;transform:scaleX(1.05);box-shadow:0 0 6px #0000004d}.shade-hex-label{font-size:10.5px;font-weight:700;font-family:var(--font-mono);opacity:.9}.column-info-block{text-align:center;z-index:5;flex-direction:column;align-items:center;gap:6px;display:flex}.column-hex-display{font-size:24px;font-weight:800;font-family:var(--font-mono);letter-spacing:.03em;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);align-items:center;gap:2px;padding:4px 8px;display:flex}.column-hex-display:hover{background:#00000026;transform:translateY(-2px)}.hex-prefix{opacity:.6;font-size:18px}.hex-copy-icon{opacity:0;transition:opacity var(--transition-fast);margin-left:4px}.column-hex-display:hover .hex-copy-icon{opacity:1}.column-color-name{white-space:nowrap;text-overflow:ellipsis;opacity:.9;max-width:130px;font-size:13px;font-weight:600;overflow:hidden}.locked-badge{letter-spacing:.08em;border:1px solid #ffffff4d;border-radius:20px;align-items:center;gap:4px;padding:3px 8px;font-size:9.5px;font-weight:800;display:inline-flex}.column-contrast-tag{font-size:10px;font-weight:700;font-family:var(--font-mono);border-radius:12px;align-items:center;gap:4px;padding:2px 7px;display:inline-flex}.coolors-footer{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);color:var(--text-secondary);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:12.5px;display:flex}.coolors-shortcuts-info{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.shortcut-tip{align-items:center;gap:6px;display:inline-flex}.coolors-count-status{color:var(--accent-cyan);font-weight:600}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:120;background:#000000bf;justify-content:center;align-items:center;padding:20px;animation:.15s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-container{background-color:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-xl);width:100%;max-width:650px;padding:24px;animation:.2s cubic-bezier(.16,1,.3,1) slideInUp;overflow:hidden;box-shadow:0 24px 60px #0009}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:14px;display:flex}.modal-title-row{align-items:center;gap:10px;display:flex}.modal-title-row h3{color:var(--text-primary);margin:0;font-size:18px;font-weight:700}.modal-close-btn{color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;padding:4px 8px;font-size:18px}.modal-close-btn:hover{background-color:var(--bg-elevated);color:var(--text-primary)}.coolors-export-modal{max-width:650px}.export-preview-strip{border-radius:var(--radius-md);width:100%;height:60px;box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle);margin-bottom:18px;display:flex;overflow:hidden}.export-preview-box{flex:1;justify-content:center;align-items:center;display:flex}.export-preview-hex{font-size:11px;font-weight:800;font-family:var(--font-mono)}.export-tabs-nav{border-bottom:1px solid var(--border-subtle);gap:6px;margin-bottom:16px;padding-bottom:12px;display:flex;overflow-x:auto}.export-tab-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:1px solid #0000;align-items:center;gap:6px;padding:8px 14px;font-size:12.5px;font-weight:600;display:inline-flex}.export-tab-btn:hover{color:var(--text-primary);background-color:var(--bg-elevated)}.export-tab-btn.active{background-color:var(--bg-elevated);border-color:var(--border-strong);color:var(--accent-cyan)}.code-export-box{background-color:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;position:relative}.code-export-box .code-block{font-family:var(--font-mono);color:#38bdf8;white-space:pre-wrap;max-height:240px;margin:0;font-size:13px;line-height:1.5;overflow-y:auto}.copy-code-btn{align-items:center;gap:8px;margin-top:12px;display:inline-flex}.image-export-info{text-align:center;background-color:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-md);flex-direction:column;align-items:center;gap:12px;padding:24px 16px;display:flex}.image-export-info p{color:var(--text-secondary);max-width:480px;font-size:14px}@media (width<=768px){.coolors-palette-strip{flex-direction:column;height:auto}.coolors-column{flex-direction:row;min-height:110px;padding:12px 18px}.column-toolbar{flex-direction:row}.column-info-block{align-items:flex-end}.coolors-insert-between-btn,.hide-mobile{display:none}}.wtb-container{flex-direction:column;gap:16px;width:100%;display:flex}.wtb-toolbar{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;display:flex}.wtb-date-nav{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.wtb-date-input-wrap{align-items:center;display:flex;position:relative}.wtb-calendar-icon{color:var(--text-muted);pointer-events:none;position:absolute;left:10px}.wtb-date-input{height:36px;font-size:13px;font-family:var(--font-sans);padding-left:32px}.wtb-legend{color:var(--text-muted);align-items:center;gap:16px;font-size:12px;display:flex}.legend-item{align-items:center;gap:6px;display:flex}.legend-badge{border-radius:3px;width:12px;height:12px}.legend-badge.business{background-color:#10b9814d;border:1px solid #10b981}.legend-badge.night{background-color:#0f172a;border:1px solid #334155}.wtb-actions-group{align-items:center;gap:10px;display:flex}.btn-active-toggle{font-weight:700;background-color:var(--accent-cyan)!important;color:#000!important}.wtb-timeline-board{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);position:relative;overflow-x:auto}.wtb-timeline-header-row{background-color:var(--bg-elevated);border-bottom:2px solid var(--border-strong);z-index:10;min-width:960px;display:flex;position:sticky;top:0}.wtb-col-location-header{text-transform:uppercase;letter-spacing:.06em;width:250px;min-width:250px;color:var(--text-muted);border-right:1px solid var(--border-subtle);background-color:var(--bg-elevated);z-index:12;align-items:center;padding:10px 16px;font-size:11px;font-weight:700;display:flex;position:sticky;left:0}.wtb-hours-strip-header{flex:1;grid-template-columns:repeat(24,1fr);display:grid}.wtb-hour-header-cell{text-align:center;font-size:11px;font-weight:700;font-family:var(--font-mono);color:var(--text-secondary);cursor:pointer;border-left:1px solid var(--border-subtle);-webkit-user-select:none;user-select:none;padding:8px 0;transition:all .12s}.wtb-hour-header-cell:hover,.wtb-hour-header-cell.active-header-cell{color:var(--accent-cyan);background-color:#06b6d440;font-weight:800}.wtb-rows-list{min-width:960px}.wtb-city-row{border-bottom:1px solid var(--border-subtle);transition:background-color var(--transition-fast);align-items:stretch;display:flex}.wtb-city-row:hover{background-color:#ffffff05}.wtb-city-row.is-home-row{background-color:#06b6d406}.wtb-city-card{border-right:1px solid var(--border-subtle);background-color:var(--bg-surface);z-index:6;flex-direction:column;justify-content:center;gap:3px;width:250px;min-width:250px;padding:12px 16px;display:flex;position:sticky;left:0}.wtb-city-title-row{align-items:center;gap:8px;display:flex}.wtb-flag{font-size:16px}.wtb-city-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:700;overflow:hidden}.wtb-city-meta{color:var(--text-muted);align-items:center;gap:6px;font-size:11.5px;display:flex}.wtb-country-name{white-space:nowrap;text-overflow:ellipsis;max-width:120px;overflow:hidden}.wtb-offset-tag{font-weight:600;font-family:var(--font-mono);color:var(--text-secondary)}.wtb-live-clock{font-size:12px;font-family:var(--font-mono);color:var(--accent-cyan);align-items:center;gap:6px;margin-top:2px;font-weight:600;display:flex}.live-clock-icon{color:var(--accent-cyan)}.wtb-city-actions{opacity:.65;transition:opacity var(--transition-fast);align-items:center;gap:4px;margin-top:4px;display:flex}.wtb-city-row:hover .wtb-city-actions{opacity:1}.city-action-btn{border:1px solid var(--border-subtle);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;width:22px;height:22px;transition:all var(--transition-fast);background:0 0;justify-content:center;align-items:center;font-size:11px;display:flex}.city-action-btn:hover:not(:disabled){background-color:var(--bg-elevated);color:var(--text-primary);border-color:var(--border-strong)}.city-action-btn:disabled{opacity:.3;cursor:not-allowed}.city-action-btn.delete-btn:hover{color:#ef4444;border-color:#ef4444}.wtb-hours-cells-strip{flex:1;grid-template-rows:1fr;grid-template-columns:repeat(24,1fr);align-content:stretch;align-items:stretch;display:grid}.wtb-hour-cell{cursor:pointer;border-left:1px solid var(--border-subtle);height:100%;min-height:80px;font-family:var(--font-mono);-webkit-user-select:none;user-select:none;box-sizing:border-box;border-top:2px solid #0000;flex-direction:column;justify-content:center;align-items:center;padding:4px;font-size:11.5px;font-weight:600;transition:all .12s;display:flex;position:relative}.wtb-hour-cell.night{color:#64748b;background-color:#0f172ad9}.wtb-hour-cell.business{color:#10b981;background-color:#10b9811f;border-top:2px solid #10b981;font-weight:700}.wtb-hour-cell.day,.wtb-hour-cell.transition{background-color:var(--bg-surface);color:var(--text-primary)}.wtb-hour-cell:hover{filter:brightness(1.15)}.wtb-hour-cell.is-selected-cell{box-shadow:inset 0 0 0 2px var(--accent-cyan);z-index:4;font-weight:800;color:#fff!important;background-color:#06b6d44d!important}.wtb-cell-hour-num{font-size:12px}.wtb-day-diff-badge{border-radius:4px;margin-top:4px;padding:1px 4px;font-size:9.5px;font-weight:800}.wtb-day-diff-badge.next-day{color:#f59e0b;background-color:#f59e0b33;border:1px solid #f59e0b66}.wtb-day-diff-badge.prev-day{color:#ef4444;background-color:#ef444433;border:1px solid #ef444466}.cell-type-icon{opacity:.6;position:absolute;bottom:5px}.cell-type-icon.night-icon{color:#64748b}.cell-type-icon.work-icon{color:#10b981}.wtb-meeting-planner-bar{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;display:flex}.meeting-summary-left{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.meeting-time-lead{align-items:center;gap:10px;display:flex}.meeting-title{color:var(--text-primary);font-size:14px;font-weight:700}.meeting-date-display{color:var(--text-muted);text-transform:capitalize;font-size:12px}.meeting-duration-control{color:var(--text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.meeting-time-chips{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.meeting-chip{border-radius:var(--radius-md);background-color:var(--bg-elevated);border:1px solid var(--border-subtle);align-items:center;gap:5px;padding:5px 10px;font-size:12px;display:inline-flex}.chip-flag{font-size:13px}.chip-city{color:var(--text-secondary)}.chip-time{color:var(--accent-cyan);font-family:var(--font-mono)}.chip-diff{color:#f59e0b;font-size:10px}.meeting-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.wtb-search-modal{max-width:600px}.wtb-search-box{align-items:center;margin-bottom:14px;display:flex;position:relative}.search-box-icon{color:var(--text-muted);position:absolute;left:12px}.wtb-search-input{width:100%;height:42px;padding-left:36px;padding-right:36px;font-size:14px}.search-clear-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;position:absolute;right:12px}.wtb-cities-results-list{flex-direction:column;gap:6px;max-height:380px;display:flex;overflow-y:auto}.wtb-city-search-item{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.wtb-city-search-item:hover:not(.already-added){background-color:var(--bg-elevated);border-color:var(--accent-cyan);transform:translate(2px)}.wtb-city-search-item.already-added{opacity:.6;cursor:default}.city-item-left{align-items:center;gap:12px;display:flex}.search-flag{font-size:20px}.search-city-details{flex-direction:column;display:flex}.search-city-name{color:var(--text-primary);font-size:14px}.search-country-name{color:var(--text-muted);font-size:12px}.city-item-right{align-items:center;gap:12px;display:flex}.search-city-time{font-size:12.5px;font-family:var(--font-mono);color:var(--accent-cyan);font-weight:600}.search-city-offset{font-size:11px;font-family:var(--font-mono);color:var(--text-muted)}.already-badge{color:var(--text-muted);background:var(--bg-elevated);border-radius:var(--radius-sm);padding:3px 8px;font-size:11px;font-weight:600}.btn-sm{padding:4px 10px;font-size:12px}.qr-logo-section{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-top:12px;margin-bottom:14px;padding:14px}.qr-logo-section-header{justify-content:space-between;align-items:center;display:flex}.qr-presets-row{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.qr-preset-chip{border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:7px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.qr-preset-chip:hover{background:var(--bg-surface-elevated);border-color:var(--border-strong);color:var(--text-primary)}.qr-preset-chip.active{border-color:var(--accent-cyan);color:var(--accent-cyan);background:#06b6d424;box-shadow:0 0 10px #06b6d433}.qr-preset-icon-img{object-fit:contain;border-radius:3px;width:17px;height:17px;display:block}.qr-custom-logo-card{background:var(--bg-elevated);border:1px dashed var(--accent-cyan);border-radius:var(--radius-md);align-items:center;gap:12px;margin-top:12px;padding:10px 12px;display:flex}.qr-custom-logo-thumb{object-fit:contain;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:#fff;width:42px;height:42px;padding:2px}.qr-logo-options-box{border-top:1px solid var(--border-subtle);margin-top:12px;padding-top:12px}.qr-shape-toggle{background:var(--bg-elevated);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);gap:4px;padding:3px;display:flex}.qr-shape-btn{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);background:0 0;border:none;flex:1;padding:6px 10px;font-size:11.5px;font-weight:600}.qr-shape-btn:hover:not(.active){color:var(--text-primary)}.qr-shape-btn.active{background:var(--accent-cyan);color:#041018;font-weight:700}