:root{--bg:#0a0a12;--panel:#141428;--panel2:#1c1c38;--fg:#f2f2fa;--mut:#8a8ab2;--acc:#ff2d87;--acc2:#7c3aed;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--line:#2a2a4a}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:radial-gradient(1200px 600px at 10% -10%,#2a0a3d 0,transparent 60%),radial-gradient(900px 500px at 100% 0,#3a0a2a 0,transparent 55%),var(--bg);color:var(--fg);min-height:100vh}
a{color:var(--acc);text-decoration:none}
.brand{font-weight:800;font-size:22px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent;letter-spacing:1px}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
nav.top{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:rgba(20,20,40,.7);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
nav.top .links a{margin:0 10px;color:var(--mut)}
nav.top .links a:hover{color:var(--fg)}
button{background:linear-gradient(135deg,var(--acc),var(--acc2));border:0;color:#fff;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600;transition:.2s;font-family:inherit}
button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,45,135,.4)}
button.ghost{background:transparent;border:1px solid var(--line)}
button.bad{background:linear-gradient(135deg,#ef4444,#b91c1c)}
button.ok{background:linear-gradient(135deg,#22c55e,#15803d)}
input,select,textarea{background:var(--bg);border:1px solid var(--line);color:var(--fg);padding:12px;border-radius:8px;width:100%;font-family:inherit;font-size:14px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc)}
.card{background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--line);padding:20px;border-radius:14px;transition:.2s}
.card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:0 20px 40px rgba(255,45,135,.15)}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700}
.b-live{background:rgba(239,68,68,.2);color:#ef4444;animation:blink 1.5s infinite}
.b-ok{background:rgba(34,197,94,.2);color:#22c55e}
.b-mut{background:rgba(138,138,178,.2);color:#8a8ab2}
.b-warn{background:rgba(245,158,11,.2);color:#f59e0b}
@keyframes blink{50%{opacity:.5}}
@keyframes slide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:0;visibility:hidden}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.model-card{cursor:pointer;position:relative;overflow:hidden}
.model-card .live-tag{position:absolute;top:12px;right:12px}
.avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}
.splash{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:99;animation:fade 1.5s 1.2s forwards}
.splash h1{font-size:64px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent;letter-spacing:3px;animation:pulse 1.5s infinite}
.hero{padding:80px 20px;text-align:center;animation:slide .6s}
.hero h1{font-size:56px;margin:0 0 16px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent}
.hero p{font-size:18px;color:var(--mut);max-width:600px;margin:0 auto 30px}
.panel-choice{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:40px auto;max-width:900px}
.panel-choice .card{text-align:center;cursor:pointer;padding:40px 20px}
.panel-choice .card .ico{font-size:48px;margin-bottom:12px}
.form{max-width:450px;margin:40px auto;padding:32px;background:var(--panel);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:slide .5s}
.form h2{margin:0 0 6px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent}
.form .field{margin-bottom:14px}
.form .field label{display:block;color:var(--mut);font-size:12px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.err{color:var(--bad);font-size:13px;margin-top:8px}
.ok-msg{color:var(--ok);font-size:13px;margin-top:8px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--panel);padding:14px 20px;border-radius:10px;border-left:4px solid var(--acc);animation:slide .3s;z-index:100;max-width:350px}
.hidden{display:none!important}
.tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs a{padding:10px 16px;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent}
.tabs a.active{color:var(--acc);border-color:var(--acc)}
.age-gate{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:200;display:flex;align-items:center;justify-content:center}
.age-gate .box{background:var(--panel);padding:40px;border-radius:16px;text-align:center;max-width:400px;border:2px solid var(--acc)}
.age-gate h2{color:var(--acc);margin-top:0}
.chatbox{background:var(--panel);border-radius:12px;padding:12px;height:400px;display:flex;flex-direction:column}
.chat-messages{flex:1;overflow-y:auto;padding:8px}
.chat-msg{padding:6px 0;font-size:13px;animation:slide .2s}
.chat-msg .name{color:var(--acc);font-weight:700;margin-right:6px}
.tip-anim{animation:pulse .5s;color:var(--warn)}
video{width:100%;background:#000;border-radius:12px}
.stat{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.stat .k{color:var(--mut)}
.stat .v{font-weight:700}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;text-align:left;font-size:13px;border-bottom:1px solid var(--line)}
th{background:var(--panel2);color:var(--mut);text-transform:uppercase;font-size:11px}
@media(max-width:600px){.hero h1{font-size:36px}nav.top .links{display:none}}

/* ===== Professional polish & entrance animations (works on file:// too, pure CSS) ===== */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(700px 320px at 80% 20%,rgba(124,58,237,.14),transparent 60%),radial-gradient(600px 280px at 10% 80%,rgba(255,45,135,.10),transparent 60%);animation:bgFloat 14s ease-in-out infinite alternate}
@keyframes bgFloat{from{transform:translateY(-24px)}to{transform:translateY(32px)}}
nav.top{box-shadow:0 6px 30px rgba(0,0,0,.4)}
.brand{animation:brandGlow 3s ease-in-out infinite alternate}
@keyframes brandGlow{from{filter:drop-shadow(0 0 2px rgba(255,45,135,.15))}to{filter:drop-shadow(0 0 12px rgba(255,45,135,.55))}}
button{position:relative;overflow:hidden;letter-spacing:.2px}
button:active{transform:translateY(0) scale(.97)}
button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(255,45,135,.16)}
.card{animation:slide .45s ease both;backdrop-filter:blur(6px)}
.panel-choice .card:nth-child(2){animation-delay:.12s}
.panel-choice .card:nth-child(3){animation-delay:.24s}
.grid .card:nth-child(3n+2){animation-delay:.08s}
.grid .card:nth-child(3n+3){animation-delay:.16s}
.hero h1{background-size:200% auto;animation:slide .6s,heroShine 7s linear infinite}
@keyframes heroShine{to{background-position:200% center}}
.model-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.07) 50%,transparent 68%);transform:translateX(-110%);transition:transform .65s ease}
.model-card:hover::after{transform:translateX(110%)}
.avatar{animation:avatarPulse 3s ease-in-out infinite}
@keyframes avatarPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,45,135,.35)}50%{box-shadow:0 0 0 8px rgba(255,45,135,0)}}
.toast{box-shadow:0 12px 40px rgba(0,0,0,.5)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--acc2)}

/* ===== Dashboard polish, live overlay, settings drawer, help widget ===== */
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi .k{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.kpi .v{font-size:28px;font-weight:800}
.kpi .sub{font-size:12px;color:var(--mut)}
.live-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:14px;border:1px solid rgba(239,68,68,.5);background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(124,58,237,.14));animation:slide .4s}
.live-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:dotPulse 1.4s infinite}
@keyframes dotPulse{70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.live-timer{font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;letter-spacing:1px}
.live-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);border:1px solid var(--line);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:700}
.welcome-drop{position:fixed;top:74px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--acc);padding:14px 22px;border-radius:12px;z-index:120;animation:slide .35s;box-shadow:0 16px 50px rgba(0,0,0,.5);transition:opacity .5s;max-width:92vw;text-align:center}
.welcome-drop.hide{opacity:0;pointer-events:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,92vw);background:var(--panel);border-left:1px solid var(--line);z-index:130;padding:22px;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto}
.drawer.open{transform:none}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:125}
.drawer h3{margin:0;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;color:transparent}
.drawer .item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;cursor:pointer;color:var(--fg);margin-top:8px}
.drawer .item:hover{background:var(--panel2)}
.modal2{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:140}
.modal2 .box{background:var(--panel);padding:24px;border-radius:14px;max-width:460px;width:92%;animation:slide .3s;max-height:80vh;overflow-y:auto}
@media(max-width:700px){.stage-grid{grid-template-columns:1fr!important}.live-timer{font-size:20px}.live-banner{flex-wrap:wrap}}