:root{--bg: #080612;--bg-elev: #18121F;--bg-elev-2: #221829;--card: #18121F;--text: #F4F1FA;--text-dim: #B9AECC;--text-faint: #7E7393;--accent: #8C5BFF;--accent-2: #8030FF;--danger: #FF6B81;--success: #5BE3C0;--warning: #F6B73C;--border: rgba(150, 140, 255, .1);--border-strong: rgba(150, 140, 255, .18);--border-solid: #2A2546;--brand-violet: #8030FF;--brand-indigo: #7679FF;--brand-azure: #6BC2FF;--brand-azure-soft: #5BA8E0;--grad-brand: linear-gradient(165deg, #8030FF 0%, #7679FF 50%, #6BC2FF 100%);--grad-brand-soft: linear-gradient(165deg, #8030FF 0%, #7679FF 50%, #5BA8E0 100%);--grad-brand-radial: radial-gradient(circle at 50% 40%, #8E4DFF 0%, #6B5BFF 45%, transparent 75%);--surface-glass: rgba(34, 24, 41, .55);--accent-soft: rgba(140, 91, 255, .16);--accent-glow: rgba(140, 91, 255, .45);--on-accent: #FFFFFF;--radius: 18px;--radius-sm: 12px;--radius-lg: 28px;--radius-pill: 999px;--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-glow: 0 4px 16px rgba(128, 48, 255, .18), 0 16px 48px rgba(107, 194, 255, .12);--shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04);--font-display: "Fraunces", "Georgia", "Times New Roman", serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bar-h: 68px;--nav-h: 64px;--maxw: 720px;--ease: cubic-bezier(.22, 1, .36, 1);--ease-ui: cubic-bezier(.22, 1, .36, 1);--ease-breath: cubic-bezier(.37, 0, .63, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--text);font-family:var(--font-body);background:radial-gradient(130% 90% at 50% -15%,#241047 0%,transparent 55%),radial-gradient(100% 60% at 50% 115%,#0E0B2A 0%,transparent 60%),linear-gradient(180deg,#0c0a1c,#080612);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:none}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit}::selection{background:#8030ff59}:focus-visible{outline:2px solid #8C5BFF;outline-offset:2px;box-shadow:0 0 0 4px #8030ff33;border-radius:4px}.fx-vignette{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;box-shadow:inset 0 0 180px 40px #0000008c}.fx-grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app-shell{max-width:var(--maxw);margin:0 auto;min-height:100%;position:relative;z-index:1}.app-main{padding:16px 22px calc(var(--bar-h) + var(--nav-h) + 24px);min-height:100vh}.page-title{font-family:var(--font-display);font-size:26px;font-weight:600;line-height:1.15;margin:8px 0 16px;letter-spacing:-.01em}.section-title{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.15;margin:28px 0 12px}.muted{color:var(--text-dim)}.faint{color:var(--text-faint);font-size:13px}.center{text-align:center}.row{display:flex;align-items:center;gap:12px}.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.stack{display:flex;flex-direction:column;gap:12px}.grow{flex:1;min-width:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{border:none;border-radius:var(--radius-pill);padding:13px 22px;font-weight:700;font-size:15px;background:var(--grad-brand);color:var(--on-accent);box-shadow:0 4px 18px #8c5bff38,inset 0 1px #ffffff40;transition:transform .12s var(--ease-ui),box-shadow .2s var(--ease-ui),opacity .2s,filter .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{filter:brightness(1.06);box-shadow:var(--shadow-glow),inset 0 1px #ffffff40}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}.btn-block{width:100%}.btn-ghost{background:var(--bg-elev-2);color:var(--text);box-shadow:none}.btn-ghost:hover{filter:brightness(1.12);box-shadow:none}.btn-outline{background:transparent;border:1px solid var(--border-strong);color:var(--text);box-shadow:none}.btn-outline:hover{background:var(--accent-soft);filter:none;box-shadow:none}.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);box-shadow:none}.btn-sm{padding:9px 16px;font-size:13px}.icon-btn{background:transparent;border:none;color:var(--text);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background .15s var(--ease-ui),transform .12s var(--ease-ui)}.icon-btn:hover{background:var(--accent-soft)}.icon-btn:active{background:var(--bg-elev-2);transform:scale(.92)}.icon-btn svg{display:block}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:13px;color:var(--text-dim);font-weight:600}.input,.textarea,select.input{background:var(--bg-elev);border:1px solid var(--border);color:var(--text);padding:13px 14px;border-radius:var(--radius-sm);font-size:16px;width:100%;transition:border-color .18s var(--ease-ui),box-shadow .18s var(--ease-ui)}.input:focus,.textarea:focus,select.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.textarea{resize:vertical;min-height:80px}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-card);transition:transform .14s var(--ease-ui),border-color .18s var(--ease-ui),box-shadow .2s var(--ease-ui)}button.card:hover{border-color:var(--border-strong)}button.card:active{transform:scale(.99)}.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-pill);background:var(--bg-elev-2);color:var(--text);font-size:13px;font-weight:600;border:1px solid var(--border);transition:background .18s var(--ease-ui),color .18s var(--ease-ui),border-color .18s var(--ease-ui)}.chip:hover{border-color:var(--border-strong)}.chip.active{background:var(--grad-brand);color:var(--on-accent);border-color:transparent;box-shadow:0 4px 16px #8c5bff4d}.chip-suggest{border-color:var(--border-strong)}.chip-suggest:hover{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 2px 14px #8c5bff38}.chip-suggest-primary{background:var(--accent-soft);border-color:var(--accent)}.segmented{display:flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--bg-elev-2);border:1px solid var(--border)}.segmented button{flex:1;border:none;background:transparent;color:var(--text-dim);padding:10px 14px;border-radius:var(--radius-pill);font-weight:700;font-size:14px;transition:color .2s var(--ease-ui),background .2s var(--ease-ui),box-shadow .2s var(--ease-ui)}.segmented button.active{color:var(--on-accent);background:var(--grad-brand);box-shadow:0 4px 16px #8c5bff59}.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cat-tile{border-radius:var(--radius);padding:16px;min-height:96px;position:relative;overflow:hidden;background:linear-gradient(165deg,#8030ff,#7679ff);color:var(--on-accent);font-weight:800;font-size:17px;display:flex;flex-direction:column;justify-content:space-between;border:none;box-shadow:var(--shadow-md);transition:transform .16s var(--ease-ui),box-shadow .2s var(--ease-ui)}.cat-tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 80% 0%,rgba(255,255,255,.16),transparent 60%)}.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.cat-tile:active{transform:scale(.98)}.cat-tile small{font-weight:600;opacity:.9;font-size:12px}.cat-tile:nth-child(3n+2){background:linear-gradient(165deg,#6b5bff,#5ba8e0)}.cat-tile:nth-child(3n+3){background:linear-gradient(165deg,#9a4dff,#7679ff)}.cat-tile:nth-child(4n+1){background:linear-gradient(165deg,#7b3fe4,#6b8bff)}.audio-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:var(--radius-sm);transition:background .15s var(--ease-ui),transform .12s var(--ease-ui)}.audio-row:hover{background:var(--bg-elev)}.audio-row:active{background:var(--bg-elev-2);transform:scale(.995)}.audio-row.playing{background:var(--accent-soft)}.audio-row:nth-child(5n+2) .audio-thumb{filter:hue-rotate(-10deg)}.audio-row:nth-child(5n+3) .audio-thumb{filter:hue-rotate(8deg)}.audio-row:nth-child(5n+4) .audio-thumb{filter:hue-rotate(-6deg)}.audio-row:nth-child(5n+5) .audio-thumb{filter:hue-rotate(14deg)}.audio-thumb{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;background:var(--grad-brand);color:var(--on-accent);font-size:20px;overflow:hidden;position:relative}.audio-thumb svg{position:relative;z-index:1}.audio-meta{min-width:0;flex:1}.audio-meta .t{font-weight:600;font-size:15px;display:flex;align-items:center}.audio-meta .s{font-size:12.5px;color:var(--text-dim)}.tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:5px;background:var(--bg-elev-2);color:var(--text-dim);margin-left:6px}.tag.ther{background:var(--accent-soft);color:#c9b8ff}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}.eq i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;animation:eqbar 1.1s ease-in-out infinite}.eq i:nth-child(2){animation-delay:.28s}.eq i:nth-child(3){animation-delay:.56s}@keyframes eqbar{0%,to{transform:scaleY(.45)}50%{transform:scaleY(1)}}.player-bar{position:fixed;left:0;right:0;bottom:var(--nav-h);z-index:40;max-width:var(--maxw);margin:0 auto;height:var(--bar-h);background:var(--surface-glass);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-top:1px solid var(--border-strong);display:flex;align-items:center;gap:12px;padding:0 12px}.player-bar .progress{position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff0f}.player-bar .progress .fill{height:100%;background:var(--grad-brand)}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;max-width:var(--maxw);margin:0 auto;height:var(--nav-h);background:var(--surface-glass);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-top:1px solid var(--border-strong);display:flex;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-faint);font-size:10.5px;font-weight:600;position:relative;transition:color .2s var(--ease-ui)}.bottom-nav a .ico{display:grid;place-items:center;transition:transform .2s var(--ease-ui)}.bottom-nav a.active{color:var(--brand-indigo)}.bottom-nav a.active .ico{transform:translateY(-1px)}.bottom-nav a.active:after{content:"";position:absolute;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--brand-indigo);box-shadow:0 0 8px var(--accent-glow)}.player-full{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:radial-gradient(100% 60% at 50% 0%,#241038 0%,transparent 60%),linear-gradient(180deg,#160A24,var(--bg));max-width:var(--maxw);margin:0 auto;padding:20px;display:flex;flex-direction:column;animation:sheetUp .34s var(--ease-ui)}@keyframes sheetUp{0%{transform:translateY(6%);opacity:0}to{transform:translateY(0);opacity:1}}.player-art{width:min(72vw,320px);aspect-ratio:1;border-radius:var(--radius-lg);margin:24px auto;background:var(--grad-brand-soft);display:grid;place-items:center;position:relative;font-size:80px;color:var(--on-accent);box-shadow:var(--shadow-glow);overflow:hidden}.seekbar{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:6px;border-radius:3px;background:#ffffff1a}.seekbar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brand-azure);box-shadow:0 0 0 4px var(--accent-soft)}.seekbar::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--brand-azure);box-shadow:0 0 0 4px var(--accent-soft)}.spiral{display:block}.spiral--breathe{animation:breathe-mark 6s var(--ease-breath) infinite}@keyframes breathe-mark{0%,to{transform:scale(1);opacity:.95}50%{transform:scale(1.04);opacity:1}}.brand-halo{position:relative;display:grid;place-items:center}.brand-halo .halo-glow{position:absolute;width:108%;height:108%;border-radius:50%;background:var(--grad-brand-radial);filter:blur(16px);z-index:0;box-shadow:0 0 48px 8px #8c5bff47;animation:breathe-halo 6s var(--ease-breath) infinite}@keyframes breathe-halo{0%,to{transform:scale(1.12);opacity:.72}50%{transform:scale(.94);opacity:.45}}.brand-halo .brand-mark{filter:drop-shadow(0 0 10px rgba(118,121,255,.45))}.brand-mark{position:relative;z-index:2}.brand-orbit{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;margin:auto;border-radius:50%;z-index:1;pointer-events:none;background:conic-gradient(from 0deg,transparent,rgba(140,91,255,.25) 25%,transparent 50%,rgba(107,194,255,.18) 75%,transparent);filter:blur(24px);opacity:.5;animation:orbit 20s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}.loader-splash{display:flex;flex-direction:column;align-items:center;gap:22px;animation:loader-rise .7s var(--ease-ui) both}@keyframes loader-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.loader-splash__mark{animation:loader-rise .8s var(--ease-ui) both}.loader-splash__label{animation:loader-rise .8s var(--ease-ui) .35s both}.loader-wordmark{position:relative;display:inline-block;font-family:var(--font-display);font-size:clamp(34px,9vw,46px);font-weight:600;letter-spacing:-.015em;line-height:1;padding:2px 4px;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 2px 14px rgba(118,121,255,.28));animation:loader-rise .8s var(--ease-ui) .18s both}.loader-wordmark:after{content:attr(data-text);position:absolute;top:2px;right:4px;bottom:2px;left:4px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.92) 50%,rgba(190,215,255,.55) 58%,transparent 72%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:loader-shimmer 1.9s var(--ease-ui) infinite}@keyframes loader-shimmer{0%{background-position:180% 0}55%,to{background-position:-80% 0}}@media(prefers-reduced-motion:reduce){.loader-wordmark:after{display:none}}.auth-card{background:var(--surface-glass);-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:22px;box-shadow:0 24px 60px #00000073,inset 0 1px #ffffff0f}.chat-wrap{display:flex;flex-direction:column;gap:10px}.bubble{padding:12px 14px;border-radius:16px;max-width:85%;font-size:15px;line-height:1.45;white-space:pre-wrap}.bubble.user{align-self:flex-end;background:var(--grad-brand);color:var(--on-accent);border-bottom-right-radius:4px}.bubble.ai{align-self:flex-start;background:var(--bg-elev);border:1px solid var(--border);border-bottom-left-radius:4px}.chat-input-bar{position:fixed;bottom:var(--nav-h);left:0;right:0;z-index:45;max-width:var(--maxw);margin:0 auto;background:var(--surface-glass);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-top:1px solid var(--border-strong);padding:10px 12px;display:flex;gap:8px}.spinner{width:22px;height:22px;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen{min-height:100vh;display:grid;place-items:center}.error-text{color:var(--danger);font-size:14px}.banner{background:var(--accent-soft);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;color:#d6c9ff}.divider{height:1px;background:var(--border-solid);margin:18px 0}.list-empty{text-align:center;color:var(--text-faint);padding:40px 16px}.fab{position:fixed;right:16px;bottom:calc(var(--bar-h) + var(--nav-h) + 16px);z-index:45;width:56px;height:56px;border-radius:50%;border:none;font-size:24px;background:var(--grad-brand);color:var(--on-accent);box-shadow:var(--shadow-glow);display:grid;place-items:center;transition:transform .12s var(--ease-ui)}.fab:active{transform:scale(.94)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#0009;display:grid;place-items:end center;animation:fade .2s var(--ease-ui)}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-elev);width:100%;max-width:var(--maxw);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto;border-top:1px solid var(--border-strong);animation:sheetUp .3s var(--ease-ui)}.skeleton{position:relative;overflow:hidden;background:var(--bg-elev);border-radius:var(--radius-sm)}.skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:translate(-100%);animation:shimmer 1.4s infinite}@keyframes shimmer{to{transform:translate(100%)}}.skel-row{display:flex;align-items:center;gap:12px;padding:10px 8px}.skel-thumb{width:52px;height:52px;border-radius:14px;flex-shrink:0}.skel-line{height:12px;border-radius:6px}.route-fade{animation:routeIn .26s var(--ease-ui)}@keyframes routeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.intro-halo{opacity:0;animation:introFade .8s var(--ease-ui) forwards}.intro-mark{opacity:0;animation:introFade .8s var(--ease-ui) .2s forwards}.intro-word{opacity:0;animation:introRise .8s var(--ease-ui) .6s forwards}.intro-tag{opacity:0;animation:introRise .8s var(--ease-ui) .9s forwards}.intro-card{opacity:0;animation:introRise .8s var(--ease-ui) 1.1s forwards}@keyframes introFade{to{opacity:1}}@keyframes introRise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.intro-halo,.intro-mark,.intro-word,.intro-tag,.intro-card{opacity:1!important;transform:none!important}}
