@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
.custom-select-container{display:inline-block;position:relative}.custom-select-trigger{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);justify-content:space-between;align-items:center;gap:8px;min-width:140px;padding:8px 14px;font-size:13px;display:flex}.custom-select-trigger:hover,.custom-select-trigger:focus{border-color:var(--color-primary);outline:none}.custom-select-icon{color:var(--color-text-muted);transition:transform .2s}.custom-select-icon.open{transform:rotate(180deg)}.custom-select-popover{z-index:9999;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-direction:column;gap:2px;max-height:240px;padding:6px;display:flex;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 4px 12px #0000001a}.custom-select-option{width:100%;color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:all var(--transition-fast);background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.custom-select-option:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.custom-select-option.selected{color:var(--color-primary);background:#8a2be20d;font-weight:500}.check-icon{color:var(--color-primary)}.search-suggestions-menu{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);z-index:9999;flex-direction:column;gap:2px;max-height:300px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #00000026}.search-suggestion-item{width:100%;color:var(--color-text-secondary);border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:all var(--transition-fast);background:0 0;border:none;align-items:center;padding:10px 12px;font-size:13px;display:flex}.search-suggestion-item:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.custom-slider{-webkit-appearance:none;background:var(--color-bg-elevated);border:1px solid var(--color-border);cursor:pointer;border-radius:99px;outline:none;width:100%;height:6px;transition:opacity .2s}.custom-slider::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;border:3px solid var(--color-bg);width:20px;height:20px;box-shadow:0 0 0 1px var(--color-primary), 0 2px 4px #0003;border-radius:50%;transition:transform .1s}.custom-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.custom-slider::-moz-range-thumb{background:var(--color-primary);cursor:pointer;border:3px solid var(--color-bg);width:20px;height:20px;box-shadow:0 0 0 1px var(--color-primary), 0 2px 4px #0003;border-radius:50%}.custom-slider:focus{outline:none}
@tailwind base;:root{--color-bg-primary:#000;--color-bg-secondary:#0a0b0d;--color-bg-tertiary:#14151a;--color-bg-glass:#000000bf;--color-bg-card:#000;--color-bg-card-hover:#08090a;--color-bg-input:#000;--color-bg-input-focus:#050608;--color-bg-elevated:#14151a;--color-primary:#0052ff;--color-primary-light:#3375ff;--color-primary-dark:#0040cc;--color-primary-muted:#0052ff26;--color-secondary:#000;--color-accent:#0052ff;--color-text-primary:#fff;--color-text-secondary:#8a919e;--color-text-tertiary:#6b7280;--color-text-muted:#4b5563;--color-success:#10b981;--color-success-bg:#10b9811a;--color-warning:#f59e0b;--color-warning-bg:#f59e0b1a;--color-error:#ef4444;--color-error-bg:#ef44441a;--color-info:#0052ff;--color-info-bg:#0052ff1a;--color-border:#2d313a;--color-border-hover:#4b5563;--color-border-active:#0052ff;--shadow-sm:2px 2px 0px #ffffff0d;--shadow-md:4px 4px 0px #ffffff1a;--shadow-lg:8px 8px 0px #ffffff26;--shadow-glow:none;--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;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:0px;--radius-md:4px;--radius-lg:8px;--radius-xl:12px;--radius-full:9999px;--font-heading:var(--font-heading,"Inter", -apple-system, sans-serif);--font-body:var(--font-body,"Inter", -apple-system, sans-serif);--font-mono:"JetBrains Mono", "SF Mono", monospace;--text-xs:.75rem;--text-sm:.8125rem;--text-base:.9375rem;--text-lg:1.0625rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--transition-fast:.12s ease-out;--transition-base:.2s ease-out;--sidebar-width:240px;--navbar-height:56px;--max-content-width:1120px;--z-dropdown:50;--z-sticky:100;--z-modal:200;--z-toast:300}.light{--color-bg-primary:#fff;--color-bg-secondary:#f4f5f7;--color-bg-tertiary:#ebebeb;--color-bg-glass:#ffffffbf;--color-bg-card:#fff;--color-bg-card-hover:#fafafa;--color-bg-input:#fff;--color-bg-input-focus:#fcfcfc;--color-bg-elevated:#fff;--color-secondary:#fff;--color-text-primary:#000;--color-text-secondary:#4b5563;--color-text-tertiary:#6b7280;--color-text-muted:#9ca3af;--color-border:#e5e7eb;--color-border-hover:#d1d5db;--shadow-sm:2px 2px 0px #000;--shadow-md:4px 4px 0px #000;--shadow-lg:8px 8px 0px #000}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navbar-height) + 24px);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body), system-ui, -apple-system, sans-serif;background:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;line-height:1.6}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}a{color:var(--color-primary-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary)}::selection{background:var(--color-primary);color:#fff}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.03em;color:var(--color-text-primary);font-weight:700;line-height:1.1}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}p{color:var(--color-text-secondary);font-weight:400;line-height:1.65}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition-fast);position:relative;overflow:hidden}.card:hover{border-color:var(--color-primary);background:var(--color-bg-card-hover);box-shadow:var(--shadow-md);transform:translate(-2px,-2px)}.card-static{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);position:relative}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:0 var(--space-4);border-radius:var(--radius-sm);height:40px;font-weight:600;font-family:var(--font-heading);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;box-shadow:var(--shadow-sm);border:1px solid #0000;display:inline-flex;position:relative}.btn:active{transform:translate(2px,2px);box-shadow:0 0 #0052ff00}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff!important}.btn-primary:hover:not(:disabled){background:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translate(-2px,-2px)}.btn-secondary{background:var(--color-bg-secondary);color:var(--color-text-primary);border-color:var(--color-border);box-shadow:2px 2px #fff3}.btn-secondary:hover:not(:disabled){background:var(--color-bg-elevated);border-color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px #fff3}.btn-ghost{color:var(--color-text-secondary);box-shadow:none;background:0 0;border:1px solid #0000}.btn-ghost:hover:not(:disabled){background:var(--color-bg-input);color:var(--color-text-primary);border-color:var(--color-border)}.btn-icon{border-radius:var(--radius-md);width:36px;height:36px;padding:8px}.btn-lg{font-size:var(--text-base);padding:14px 28px}.btn-sm{font-size:var(--text-xs);padding:6px 12px}.form-group{flex-direction:column;gap:8px;display:flex}.form-label{font-size:var(--text-sm);color:var(--color-text-secondary);align-items:center;gap:var(--space-2);font-weight:500;display:flex}.form-label-hint{color:var(--color-text-muted);font-weight:400;font-size:var(--text-xs)}.form-input,.form-textarea,.form-select{background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-sm);width:100%;color:var(--color-text-primary);font-family:var(--font-body);font-size:var(--text-sm);outline:none;padding:12px 16px;transition:all .2s}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-text-muted)}.form-input:hover,.form-textarea:hover,.form-select:hover{border-color:var(--color-border-hover);background:var(--color-bg-input-focus)}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-primary);background:var(--color-bg-input-focus);transform:translate(-2px,-2px);box-shadow:4px 4px #0052ff}.form-textarea{resize:vertical;min-height:80px}.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.form-slider{appearance:none;border-radius:var(--radius-full);background:var(--color-border);outline:none;width:100%;height:4px}.form-slider::-webkit-slider-thumb{appearance:none;background:var(--color-primary);cursor:pointer;width:16px;height:16px;transition:transform var(--transition-fast);border-radius:50%}.form-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.toggle-switch{cursor:pointer;width:40px;height:22px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-track{background:var(--color-border);border-radius:var(--radius-full);transition:background var(--transition-base);position:absolute;inset:0}.toggle-switch input:checked+.toggle-track{background:var(--color-primary)}.toggle-track:after{content:"";width:18px;height:18px;transition:transform var(--transition-base);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.toggle-switch input:checked+.toggle-track:after{transform:translate(18px)}.chip{background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:5px 12px;font-weight:500;display:inline-flex}.chip:hover{border-color:var(--color-border-hover);color:var(--color-text-primary)}.chip.active{background:var(--color-primary-muted);border-color:var(--color-primary);color:var(--color-primary-light)}.chip-lg{font-size:var(--text-sm);padding:7px 14px}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);align-items:center;padding:2px 8px;font-weight:600;display:inline-flex}.badge-primary{background:var(--color-primary-muted);color:var(--color-primary-light)}.badge-success{background:var(--color-success-bg);color:var(--color-success)}.badge-warning{background:var(--color-warning-bg);color:var(--color-warning)}.tabs{background:var(--color-bg-input);border-radius:var(--radius-md);border:1px solid var(--color-border);gap:2px;padding:3px;display:flex}.tab{border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--color-text-tertiary);cursor:pointer;font-weight:500;font-family:var(--font-body);transition:all var(--transition-fast);background:0 0;border:none;padding:6px 14px}.tab:hover{color:var(--color-text-primary)}.tab.active{background:var(--color-bg-elevated);color:var(--color-text-primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes progressBar{0%{width:0}to{width:100%}}.animate-fade-in{animation:.3s forwards fadeIn}.animate-fade-in-up{animation:.35s forwards fadeInUp}.stagger>:first-child{animation-delay:40ms}.stagger>:nth-child(2){animation-delay:80ms}.stagger>:nth-child(3){animation-delay:.12s}.stagger>:nth-child(4){animation-delay:.16s}.stagger>:nth-child(5){animation-delay:.2s}.stagger>:nth-child(6){animation-delay:.24s}.spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}.toast-container{bottom:var(--space-4);right:var(--space-4);z-index:var(--z-toast);gap:var(--space-2);pointer-events:none;flex-direction:column-reverse;display:flex;position:fixed}.toast{align-items:center;gap:var(--space-3);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:auto;min-width:260px;max-width:380px;padding:10px 14px;animation:.25s forwards slideInRight;display:flex;position:relative;overflow:hidden}.toast-success{border-left:3px solid var(--color-success)}.toast-error{border-left:3px solid var(--color-error)}.toast-info{border-left:3px solid var(--color-info)}.toast-warning{border-left:3px solid var(--color-warning)}.toast-icon{color:var(--color-text-secondary);flex-shrink:0}.toast-icon svg{width:16px;height:16px}.toast-content{flex:1}.toast-title{font-size:var(--text-sm);color:var(--color-text-primary);font-weight:600}.toast-message{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:1px}.toast-close{color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;padding:2px;line-height:1}.toast-close svg{width:14px;height:14px}.toast-progress{background:var(--color-primary);border-radius:0 0 var(--radius-md) var(--radius-md);height:2px;animation:4s linear forwards progressBar;position:absolute;bottom:0;left:0}.icon{flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.icon svg{stroke-width:1.8px;width:18px;height:18px}.icon-sm svg{width:14px;height:14px}.icon-lg svg{width:22px;height:22px}.icon-box{border-radius:var(--radius-md);background:var(--color-primary-muted);width:36px;height:36px;color:var(--color-primary-light);justify-content:center;align-items:center;display:flex}.icon-box svg{width:18px;height:18px}.text-gradient{background:linear-gradient(to right, var(--color-primary-light), #38bdf8, var(--color-primary-light));-webkit-text-fill-color:transparent;background-size:200%;-webkit-background-clip:text;background-clip:text;animation:4s linear infinite shine}@keyframes shine{to{background-position:200%}}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (max-width:768px){:root{--navbar-height:48px;--text-4xl:1.75rem;--text-3xl:1.5rem;--text-2xl:1.25rem}.toast-container{left:var(--space-3);right:var(--space-3);bottom:var(--space-3)}.toast{width:100%;min-width:auto}}@media (max-width:480px){:root{--text-4xl:1.5rem;--text-3xl:1.25rem}}.history-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:24px;display:grid}.history-card{flex-direction:column;gap:12px;padding:16px;display:flex}.history-card-header{justify-content:space-between;align-items:flex-start;display:flex}.history-card-topic{font-weight:600;font-size:var(--text-base);color:var(--color-text);margin-bottom:4px}.history-card-meta{color:var(--color-text-muted);align-items:center;gap:6px;font-size:11px;display:flex}.history-card-hook{font-size:var(--text-sm);color:var(--color-text-secondary);background:var(--color-bg-subtle);border-left:2px solid var(--color-border);border-radius:8px;padding:12px;line-height:1.5}.history-card-platforms{flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;display:flex}.half-sphere-bg{background:radial-gradient(ellipse at top, var(--color-primary-dark) 0%, transparent 70%);opacity:.6;z-index:0;pointer-events:none;border-top-left-radius:50% 100%;border-top-right-radius:50% 100%;width:140vw;height:80vh;animation:8s ease-in-out infinite alternate breathe;position:absolute;bottom:-40vh;left:50%;transform:translate(-50%)}@keyframes breathe{0%{opacity:.4;filter:hue-rotate();transform:translate(-50%)scale(1)translateY(0)}to{opacity:.8;filter:hue-rotate(15deg);transform:translate(-50%)scale(1.05)translateY(-20px)}}@media (max-width:768px){.btn,.btn-icon,.chip,.chip-lg,.tab,.form-input{min-width:44px;min-height:44px}}