@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#0B0F1A;--bg2:#111827;--bg3:#1a2035;--glass:rgba(255,255,255,.05);--border:rgba(255,255,255,.08);--text:#f0f0f5;--text2:#94a3b8;--text3:#64748b;--accent:#7c3aed;--accent2:#a78bfa;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--grad:linear-gradient(135deg,#7c3aed,#2563eb);--grad2:linear-gradient(135deg,#7c3aed,#ec4899);--r:14px;--font:'Inter',system-ui,-apple-system,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{transition:background-color 0.4s ease, color 0.4s ease;font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;max-width:100%}
a{cursor:pointer;text-decoration:none;color:inherit}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* Premium Animations */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 15px rgba(124,58,237,.15)}50%{box-shadow:0 0 30px rgba(124,58,237,.3)}}
@keyframes borderSpin{0%{--angle:0deg}100%{--angle:360deg}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes panelEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes softPop{0%{transform:scale(.94);opacity:.55}70%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes idleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes graphSweep{0%{transform:translateX(-120%);opacity:0}18%,70%{opacity:.32}100%{transform:translateX(140%);opacity:0}}
@keyframes tabGlow{0%,100%{box-shadow:0 0 0 rgba(124,58,237,0)}50%{box-shadow:0 0 26px rgba(124,58,237,.22)}}
@keyframes codeScan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes cardRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes botBlink{0%,80%,100%{transform:scale(.65);opacity:.35}40%{transform:scale(1);opacity:1}}
@keyframes botSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.anim-shimmer{background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.06) 50%,transparent 75%);background-size:200% 100%;animation:shimmer 2s infinite}
.anim-float{animation:floatUp 3s ease-in-out infinite}
.anim-pulse{animation:pulseGlow 2.5s ease-in-out infinite}
.anim-icon{animation:iconPulse 2s ease-in-out infinite}
.anim-fadeIn{animation:fadeSlideIn .5s ease forwards}

.fig-icon{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;vertical-align:middle;flex-shrink:0;background:linear-gradient(135deg,#7c3aed,#3b82f6);box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .2s,box-shadow .2s}
.fig-icon svg{display:block}
.fig-icon.inline{width:28px;height:28px;border-radius:9px;margin-right:6px}
.fig-image{background:linear-gradient(135deg,#ec4899,#f472b6)}
.fig-video{background:linear-gradient(135deg,#10b981,#34d399)}
.fig-code{background:linear-gradient(135deg,#3b82f6,#60a5fa)}
.fig-globe{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.fig-volume{background:linear-gradient(135deg,#06b6d4,#22d3ee)}
.fig-chart{background:linear-gradient(135deg,#ef4444,#f87171)}
.fig-key,.fig-copy,.fig-file{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.fig-flame{background:linear-gradient(135deg,#ef4444,#f97316)}
.fig-brain,.fig-bot{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.fig-message{background:linear-gradient(135deg,#2563eb,#60a5fa)}
.fig-search{background:linear-gradient(135deg,#0ea5e9,#6366f1)}
.fig-target,.fig-users,.fig-shield,.fig-store,.fig-ticket{background:linear-gradient(135deg,#14b8a6,#22c55e)}
.fig-settings,.fig-megaphone,.fig-book{background:linear-gradient(135deg,#64748b,#94a3b8)}
.fig-zap,.fig-gift{background:linear-gradient(135deg,#f59e0b,#f97316)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border-radius:var(--r);font-weight:600;font-size:14px;border:none;cursor:pointer;transition:all .25s ease;font-family:var(--font)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 20px rgba(124,58,237,.3);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s}
.btn-primary:hover::after{left:100%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(124,58,237,.45)}
.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--glass);color:var(--text);border-color:var(--accent)}
.btn-danger{background:var(--red);color:#fff}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:14px 32px;font-size:16px}
.btn-block{width:100%;justify-content:center}
.btn-d{background:var(--red);color:#fff;padding:4px 10px;font-size:11px;border:none;border-radius:6px;cursor:pointer}
.btn-g{background:var(--green);color:#fff;padding:4px 10px;font-size:11px;border:none;border-radius:6px;cursor:pointer}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:rgba(11,15,26,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.nav-logo img{height:32px;border-radius:8px}
.nav-logo span{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:8px;list-style:none}
.nav-links a{padding:8px 14px;color:var(--text2);font-size:14px;font-weight:500;border-radius:8px;transition:.2s}
.nav-links a:hover{color:var(--text);background:var(--glass)}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-user-info{display:flex;align-items:center;gap:8px}
.nav-avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}

/* Views */
.v{display:none;min-height:100vh;overflow-x:hidden}
.v.on{display:block}

/* Hero */
.hero{position:relative;padding:128px 32px 82px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.04)}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(124,58,237,.12) 1px,transparent 1px),linear-gradient(0deg,rgba(124,58,237,.08) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);pointer-events:none}
.hero::after{content:'';position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,58,237,.6),transparent)}
.hero-grid{position:relative;z-index:1;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:54px;align-items:center}
.hero-copy{text-align:left}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:rgba(124,58,237,.12);border:1px solid rgba(167,139,250,.22);border-radius:50px;font-size:13px;color:#c4b5fd;margin-bottom:24px;backdrop-filter:blur(10px)}
.hero-badge span{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:var(--grad);color:#fff;font-size:11px;font-weight:800}
.hero h1{font-size:clamp(42px,5vw,76px);font-weight:850;line-height:1.03;margin-bottom:22px;letter-spacing:0;max-width:780px}
.grad-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:18px;color:var(--text2);max-width:650px;margin:0 0 32px}
.hero-actions{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}
.stat{background:rgba(17,24,39,.72);border:1px solid var(--border);border-radius:14px;padding:14px 18px;backdrop-filter:blur(10px);text-align:left;min-width:142px;animation:idleFloat 6.8s ease-in-out infinite}
.stat:nth-child(2){animation-delay:.5s}.stat:nth-child(3){animation-delay:1s}
.stat strong{display:block;font-size:24px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.stat span{font-size:12px;color:var(--text3)}
.hero-visual{position:relative;background:linear-gradient(180deg,rgba(17,24,39,.88),rgba(8,13,24,.94));border:1px solid rgba(148,163,184,.16);border-radius:22px;padding:22px;box-shadow:0 26px 80px rgba(0,0,0,.36);overflow:hidden;animation:idleFloat 7.5s ease-in-out infinite}
.hero-visual::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,58,237,.18),transparent 45%,rgba(37,99,235,.12));opacity:.75;pointer-events:none}
.hero-visual>*{position:relative;z-index:1}
.hero-visual-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:var(--text2);font-size:13px}
.hero-visual-head strong{color:#34d399;font-size:18px}
.hero-chart{height:220px;border:1px solid rgba(148,163,184,.12);border-radius:18px;background:rgba(2,6,23,.36);display:flex;align-items:flex-end;gap:12px;padding:22px;position:relative;overflow:hidden}
.hero-chart::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(124,58,237,.18),transparent);animation:graphSweep 5.8s ease-in-out infinite;pointer-events:none}
.hero-chart::after{content:'';position:absolute;inset:18px;width:70px;border-radius:999px;background:radial-gradient(circle,rgba(52,211,153,.24),transparent 68%);filter:blur(10px);animation:chartGlow 6s ease-in-out infinite;pointer-events:none}
.hero-chart span{flex:1;min-width:22px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#8b5cf6,#2563eb);opacity:.72;animation:barPulse 4.2s ease-in-out infinite}
.hero-chart span:nth-child(2n){animation-delay:.25s}.hero-chart span:nth-child(3n){animation-delay:.5s}
.hero-chart svg{position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);overflow:visible}
.hero-chart path{fill:none;stroke:#34d399;stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(52,211,153,.45));stroke-dasharray:620;animation:drawLine 4s ease-in-out infinite}
.hero-model-flow{margin:18px 0;overflow:hidden;border:1px solid rgba(148,163,184,.12);border-radius:999px;background:rgba(255,255,255,.03)}
.hero-flow-track{display:flex;gap:10px;width:max-content;padding:8px;animation:heroFlow 18s linear infinite}
.hero-flow-track span{padding:7px 12px;border-radius:999px;background:rgba(124,58,237,.14);color:#ddd6fe;font-size:12px;font-weight:700;white-space:nowrap}
.hero-ops{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-ops div{padding:15px;border:1px solid rgba(148,163,184,.12);border-radius:16px;background:rgba(255,255,255,.035)}
.hero-ops b{display:block;font-size:22px;color:#fff}.hero-ops span{font-size:12px;color:var(--text3)}
@keyframes barPulse{0%,100%{opacity:.68;transform:scaleY(.94)}50%{opacity:.96;transform:scaleY(1)}}
@keyframes drawLine{0%{stroke-dashoffset:620}45%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:-620}}
@keyframes chartGlow{0%,100%{transform:translate(4%,48%);opacity:.38}45%{transform:translate(62%,16%);opacity:.72}70%{transform:translate(78%,28%);opacity:.46}}
@keyframes heroFlow{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 5px))}}

/* Landing Chatbot Preview */
.landing-chatbot{padding-top:54px;padding-bottom:54px}
.bot-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);gap:42px;align-items:center;max-width:1180px;margin:0 auto}
.section-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid rgba(52,211,153,.22);border-radius:999px;background:rgba(52,211,153,.08);color:#34d399;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px}
.bot-demo-copy h2{font-size:clamp(30px,3.4vw,48px);line-height:1.08;letter-spacing:0;margin-bottom:16px}
.bot-demo-copy p{color:var(--text2);font-size:16px;max-width:620px;margin-bottom:22px}
.bot-demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.bot-mini-stack{display:flex;gap:10px;flex-wrap:wrap}
.bot-mini-stack span{border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.72);color:var(--text2);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:750}
.bot-demo-window{position:relative;overflow:hidden;border:1px solid rgba(148,163,184,.16);border-radius:22px;background:linear-gradient(180deg,rgba(17,24,39,.94),rgba(8,13,24,.96));box-shadow:0 28px 82px rgba(0,0,0,.32);padding:18px;animation:idleFloat 8.5s ease-in-out infinite}
.bot-demo-window::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 8%,rgba(52,211,153,.18),transparent 32%),radial-gradient(circle at 10% 90%,rgba(37,99,235,.14),transparent 36%);pointer-events:none}
.bot-demo-window>*{position:relative;z-index:1}
.bot-demo-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(148,163,184,.12);padding-bottom:14px;margin-bottom:12px}
.bot-demo-head b{display:block;font-size:15px;color:#fff}
.bot-demo-head span{display:block;color:var(--text3);font-size:12px;margin-top:2px}
.bot-demo-status{padding:5px 9px;border-radius:999px;background:rgba(52,211,153,.12);color:#34d399;font-size:11px;font-weight:900}
.bot-agent-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px}
.bot-agent-strip button{flex:0 0 auto;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.04);color:var(--text2);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:750}
.bot-agent-strip button.active{background:linear-gradient(135deg,rgba(124,58,237,.82),rgba(37,99,235,.76));color:#fff;border-color:transparent}
.bot-demo-msgs{display:flex;flex-direction:column;gap:10px;min-height:244px;padding:8px 0 14px}
.bot-msg{max-width:84%;padding:11px 13px;border-radius:15px;font-size:13px;line-height:1.5;animation:botSlide .35s ease both}
.bot-msg.user{align-self:flex-end;background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(37,99,235,.9));color:#fff;border-bottom-right-radius:5px}
.bot-msg.ai{align-self:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.12);color:var(--text2);border-bottom-left-radius:5px;animation-delay:.08s}
.bot-msg.short{max-width:62%;animation-delay:.16s}
.typing-indicator.compact{align-self:flex-start;display:flex;gap:4px;padding:9px 12px;background:rgba(255,255,255,.055);border:1px solid rgba(148,163,184,.12);border-radius:14px}
.typing-indicator.compact span{width:7px;height:7px;border-radius:999px;background:var(--accent2);animation:botBlink 1.25s ease-in-out infinite}
.typing-indicator.compact span:nth-child(2){animation-delay:.16s}.typing-indicator.compact span:nth-child(3){animation-delay:.32s}
.bot-demo-input{display:flex;align-items:center;gap:10px;border:1px solid rgba(148,163,184,.14);border-radius:16px;background:rgba(2,6,23,.38);padding:8px}
.bot-demo-input input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:13px;padding:8px}
.bot-demo-input input::placeholder{color:var(--text3)}
.bot-demo-input button{border:0;border-radius:12px;background:var(--grad);color:#fff;font-weight:850;padding:9px 13px;cursor:pointer}

/* Trust Bar */
.trust-bar{padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.trust-scroll{display:flex;gap:48px;animation:scroll 20s linear infinite;white-space:nowrap}
.t-item{font-size:14px;font-weight:600;color:var(--text3);opacity:.5}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Sections */
.sec{padding:80px 32px;max-width:1200px;margin:0 auto}
.sec-alt{background:var(--bg2);max-width:100%;padding-left:32px;padding-right:32px}
.sec-alt>*{max-width:1200px;margin-left:auto;margin-right:auto}
.sec-head{text-align:center;margin-bottom:48px}
.sec-head h2{font-size:36px;font-weight:800;margin-bottom:12px}
.sec-head p{color:var(--text2);font-size:16px}

/* Feature Cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:all .3s ease}
.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 8px 32px rgba(124,58,237,.15)}
.card h3{font-size:18px;margin-bottom:8px}
.card p{color:var(--text2);font-size:14px}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start}
.pc{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:32px;position:relative;transition:all .3s}
.pc:hover{border-color:var(--accent)}
.pc.pop{border-color:var(--accent);box-shadow:0 0 40px rgba(124,58,237,.15);padding-top:46px}
.pc.recommended{border-color:#34d399;box-shadow:0 18px 46px rgba(52,211,153,.13);animation:tabGlow 3s ease-in-out infinite}
.pop-b{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;padding:4px 16px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.pc h3{font-size:20px;font-weight:700;margin-bottom:8px}
.pr{font-size:42px;font-weight:800;margin-bottom:16px}
.pr span{font-size:14px;font-weight:400;color:var(--text3)}
.pc ul{list-style:none;margin-bottom:24px}
.pc li{padding:8px 0;font-size:14px;color:var(--text2);border-bottom:1px solid var(--border)}
.ck{color:var(--green);margin-right:8px;font-weight:700}
.pricing-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 auto 28px;max-width:980px}
.pricing-tab{background:rgba(15,23,42,.74);border:1px solid var(--border);border-radius:16px;padding:18px 20px;text-align:left;color:var(--text2);cursor:pointer;transition:.22s}
.pricing-tab strong{display:block;color:var(--text);font-size:15px;margin-bottom:5px}
.pricing-tab span{font-size:12px;color:var(--text3)}
.pricing-tab:hover{border-color:rgba(124,58,237,.42);transform:translateY(-2px)}
.pricing-tab.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(124,58,237,.18),rgba(37,99,235,.08));box-shadow:0 18px 46px rgba(37,99,235,.12)}
.pricing-tab.active strong{color:#fff}
.pricing-panel{display:none;animation:panelEnter .28s ease}
.pricing-panel.active{display:block}
.usage-calculator{display:grid;grid-template-columns:1.05fr 1.5fr 260px;gap:18px;align-items:center;max-width:1120px;margin:0 auto 28px;padding:18px;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(37,99,235,.06));border:1px solid rgba(148,163,184,.16);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.14);position:relative;overflow:hidden}
.usage-calculator::before{content:'';position:absolute;inset:-1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:codeScan 6s linear infinite;pointer-events:none}
.usage-calculator>*{position:relative;z-index:1}
.calc-copy strong{display:block;font-size:20px;color:#fff;margin:2px 0 5px}
.calc-copy p{font-size:13px;color:var(--text2);line-height:1.55;margin:0}
.calc-kicker{display:inline-flex;padding:4px 9px;border-radius:999px;background:rgba(52,211,153,.12);color:#34d399;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.calc-controls{display:grid;gap:11px}
.calc-row{display:grid;grid-template-columns:120px minmax(120px,1fr) 58px;gap:12px;align-items:center;font-size:13px;color:var(--text2)}
.calc-row input{accent-color:var(--accent);width:100%}
.calc-row b{color:#fff;text-align:right;font-size:13px}
.calc-result{min-height:150px;border:1px solid rgba(148,163,184,.15);border-radius:16px;background:rgba(2,6,23,.32);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:18px}
.calc-result span{font-size:12px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.calc-result strong{font-size:26px;color:#fff}
.calc-result small{color:var(--text2);margin-bottom:8px}

/* Steps Grid (How it works) */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:20px}
.step-card{background:var(--bg2);padding:32px 24px;border-radius:var(--r);border:1px solid var(--border);position:relative;text-align:center;transition:.2s}
.step-card:hover{transform:translateY(-5px);border-color:rgba(124,58,237,.3)}
.step-num{width:40px;height:40px;background:var(--grad);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin:0 auto 16px;box-shadow:0 8px 20px rgba(124,58,237,.3)}
.step-card h3{font-size:18px;margin-bottom:12px;font-weight:700}
.step-card p{font-size:14px;color:var(--text2);line-height:1.6}

/* Model Showcase */
.models-sec{overflow:hidden}
.model-filter-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:-22px auto 12px;max-width:900px}
.model-filter-btn{border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.72);color:var(--text2);border-radius:999px;padding:9px 14px;font-weight:750;font-size:13px;cursor:pointer;transition:.22s;min-height:38px}
.model-filter-btn:hover{border-color:rgba(124,58,237,.45);transform:translateY(-2px);color:#fff}
.model-filter-btn.active{color:#fff;background:linear-gradient(135deg,rgba(124,58,237,.86),rgba(37,99,235,.82));border-color:transparent;animation:tabGlow 2.6s ease-in-out infinite}
.model-marquee{position:relative;width:100%;max-width:1180px;overflow:hidden;margin:22px auto 0;padding:12px 0 26px}
.model-marquee::before,.model-marquee::after,.testim-marquee::before,.testim-marquee::after{content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.model-marquee::before,.testim-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.model-marquee::after,.testim-marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.model-track{display:flex;gap:20px;width:max-content;will-change:transform;animation:modelSlide 32s linear infinite}
.m-card{width:min(320px,calc(100vw - 72px));min-height:190px;background:var(--bg2);padding:24px;border-radius:var(--r);border:1px solid var(--border);box-shadow:none;transition:.25s;flex:0 0 auto;position:relative;overflow:hidden}
.m-card::after{content:'';position:absolute;right:18px;top:18px;width:52px;height:52px;border-radius:999px;background:rgba(124,58,237,.08);filter:blur(4px)}
.m-card:hover{transform:translateY(-3px);border-color:rgba(124,58,237,.42);box-shadow:0 12px 30px rgba(0,0,0,.24)}
.m-card.is-hidden{display:none}
.m-logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#fff;margin-bottom:14px;box-shadow:none}
.m-logo.openai{background:linear-gradient(135deg,#10b981,#8b5cf6)}.m-logo.anthropic{background:linear-gradient(135deg,#f59e0b,#64748b)}.m-logo.gemini{background:linear-gradient(135deg,#3b82f6,#ec4899)}.m-logo.deepseek{background:linear-gradient(135deg,#0ea5e9,#2563eb)}.m-logo.grok{background:linear-gradient(135deg,#111827,#64748b)}.m-logo.qwen{background:linear-gradient(135deg,#ef4444,#f59e0b)}.m-logo.llama{background:linear-gradient(135deg,#22c55e,#06b6d4)}.m-logo.mistral{background:linear-gradient(135deg,#f97316,#eab308)}.m-logo.sonar{background:linear-gradient(135deg,#14b8a6,#6366f1)}
.m-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);font-weight:800;margin-bottom:7px}
.m-card h3{font-size:20px;margin-bottom:10px;letter-spacing:0}
.m-card p{font-size:14px;color:var(--text3);margin-bottom:20px;line-height:1.5}
.m-tags{display:flex;gap:8px;flex-wrap:wrap}
.m-tag{background:rgba(255,255,255,.05);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;color:var(--text2);border:1px solid var(--border)}
@keyframes modelSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 10px),0,0)}}

/* Testimonials */
.testimonials-sec{overflow:hidden}
.testim-marquee{position:relative;width:100%;max-width:1200px;overflow:hidden;margin:18px auto 0;padding:10px 0 24px}
.testim-marquee::before{background:linear-gradient(90deg,var(--bg2),transparent)}
.testim-marquee::after{background:linear-gradient(270deg,var(--bg2),transparent)}
.testim-track{display:flex;gap:20px;width:max-content;will-change:transform;animation:testimSlide 42s linear infinite}
.testim-card{width:min(340px,calc(100vw - 72px));min-height:220px;background:linear-gradient(180deg,rgba(8,13,24,.96),rgba(15,23,42,.92));padding:30px 24px;border-radius:16px;border:1px solid rgba(148,163,184,.14);box-shadow:0 16px 42px rgba(0,0,0,.18);flex:0 0 auto}
.t-stars{color:var(--yellow);font-size:16px;margin-bottom:18px;letter-spacing:2px}
.testim-card p{font-size:14px;font-style:italic;color:var(--text2);margin-bottom:24px;line-height:1.7;min-height:80px}
.t-user{display:flex;align-items:center;gap:12px}
.t-av{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.t-info{display:flex;flex-direction:column}
.t-info strong{font-size:14px}
.t-info span{font-size:12px;color:var(--text3)}
@keyframes testimSlide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 10px),0,0)}}

/* Code Block */
.docs-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-20px auto 18px}
.doc-tab{border:1px solid rgba(148,163,184,.14);background:rgba(15,23,42,.76);color:var(--text2);border-radius:999px;padding:9px 15px;font-weight:800;font-size:13px;cursor:pointer;transition:.22s}
.doc-tab:hover{border-color:rgba(124,58,237,.45);color:#fff;transform:translateY(-2px)}
.doc-tab.active{background:linear-gradient(135deg,rgba(124,58,237,.88),rgba(236,72,153,.78));color:#fff;border-color:transparent}
.code-block{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;max-width:820px;margin:0 auto;position:relative;box-shadow:0 18px 50px rgba(0,0,0,.18)}
.code-block::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.7),transparent);animation:codeScan 4s linear infinite}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border)}
.code-lang{font-size:11px;font-weight:700;color:var(--accent2);text-transform:uppercase;letter-spacing:1px}
.code-block pre{padding:20px;font-size:13px;line-height:1.7;overflow-x:auto;font-family:'Fira Code',monospace}
.code-panel{display:none}
.code-panel.active{display:block;animation:cardRise .28s ease}
.kw{color:#c084fc}.fn{color:#60a5fa}.st{color:#34d399}

/* FAQ */
.faq-list{max-width:700px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;overflow:hidden;transition:.2s}
.faq-item:hover{border-color:rgba(124,58,237,.3)}
.faq-q{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:15px}
.faq-arr{transition:transform .3s;font-size:12px;color:var(--text3)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;padding:0 20px;color:var(--text2);font-size:14px}
.faq-item.open .faq-a{max-height:200px;padding:0 20px 16px}
.faq-item.open .faq-arr{transform:rotate(180deg)}

/* CTA */
.cta-sec{background:var(--bg)}
.cta-box{text-align:center;padding:64px 40px;background:var(--bg2);border:1px solid var(--border);border-radius:24px;max-width:800px;margin:0 auto;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad)}
.cta-box h2{font-size:32px;font-weight:800;margin-bottom:12px}
.cta-box p{color:var(--text2);margin-bottom:28px}

/* Footer */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:0 32px}
.footer-top{max-width:1100px;margin:0 auto;padding:56px 0 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-brand img{width:40px;border-radius:12px}
.footer-brand span{font-size:18px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.footer-brand p{color:var(--text3);font-size:13px}
.footer-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:var(--text2)}
.footer-col a,.footer-link{display:block;color:var(--text3);font-size:13px;margin-bottom:10px;transition:.2s}
.footer-link{background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer}
.footer-col a:hover,.footer-link:hover{color:var(--accent2)}
.footer-bottom{border-top:1px solid var(--border);padding:20px 0;text-align:center}
.footer-bottom p{color:var(--text3);font-size:12px}
.footer-social{display:flex;gap:12px;margin-top:12px}
.footer-social a{color:var(--text3);transition:.2s}
.footer-social a:hover{color:var(--accent2)}
.nav-admin-tag{background:rgba(234,179,8,.15);color:var(--yellow)!important;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:600}
.legal-container{background:var(--bg2);border-radius:20px;max-width:700px;width:92%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:modalIn .3s ease}
.legal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid var(--border)}
.legal-head h3{font-size:18px;font-weight:700}
.legal-body{padding:28px;overflow-y:auto;font-size:14px;line-height:1.8;color:var(--text2)}
.legal-body h4{color:var(--text);margin:16px 0 8px;font-size:15px}
.legal-body p{margin-bottom:12px}

/* Auth Modal */
.modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);align-items:center;justify-content:center}
.modal.open{display:flex}
.auth-container{display:flex;border-radius:20px;overflow:hidden;max-width:820px;width:92%;box-shadow:0 24px 80px rgba(0,0,0,.5);animation:modalIn .3s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.auth-left{flex:1;background:var(--grad);padding:48px 36px;display:flex;flex-direction:column;justify-content:center;color:#fff;min-height:420px}
.auth-left img{width:48px;border-radius:12px;margin-bottom:16px}
.auth-left h2{font-size:24px;margin-bottom:8px}
.auth-left p{opacity:.85;font-size:14px;margin-bottom:20px}
.auth-perks{list-style:none}
.auth-perks li{padding:6px 0;font-size:14px;opacity:.9}
.auth-right{flex:1;background:var(--bg2);padding:48px 36px}
.auth-tabs{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:24px}
.auth-tabs button{flex:1;padding:10px;border:none;background:transparent;color:var(--text3);font-weight:600;font-size:14px;border-radius:8px;cursor:pointer;transition:.2s;font-family:var(--font)}
.auth-tabs button.on{background:var(--accent);color:#fff}
.auth-right h3{font-size:20px;font-weight:700;margin-bottom:20px}

/* Social Login Buttons */
.social-btns{display:flex;gap:10px;margin-bottom:16px}
.social-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font)}
.social-btn:hover{transform:translateY(-1px)}
.social-btn.github{background:#24292e;border-color:#24292e;color:#fff}
.social-btn.github:hover{background:#2f363d;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.social-btn.google{background:var(--bg);border-color:var(--border)}
.social-btn.google:hover{background:var(--bg3);border-color:rgba(66,133,244,.4);box-shadow:0 4px 16px rgba(66,133,244,.15)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-divider span{font-size:12px;color:var(--text3);white-space:nowrap}
.first-time-banner{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(16,185,129,.06));border:1px solid rgba(34,197,94,.3);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--green);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.first-time-banner strong{color:#4ade80}

/* Referral Panel */
.ref-panel{background:var(--bg2);border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:16px}
.ref-panel h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.ref-code-box{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.ref-code-box code{flex:1;font-size:16px;font-weight:700;color:var(--accent2);font-family:'Fira Code',monospace;letter-spacing:1px}
.ref-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}
.ref-stat{text-align:center;padding:12px;background:rgba(124,58,237,.06);border-radius:12px;border:1px solid rgba(124,58,237,.1)}
.ref-stat .rs-val{font-size:20px;font-weight:800;color:var(--accent2);display:block}
.ref-stat .rs-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.ref-link-box{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.ref-link-box input{flex:1;background:none;border:none;color:var(--text2);font-size:12px;font-family:var(--font);outline:none}

/* Daily Bonus */
.daily-panel{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(251,191,36,.04));border:1px solid rgba(245,158,11,.2);border-radius:18px;padding:24px;margin-bottom:16px}
.daily-panel h3{font-size:15px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.streak-dots{display:flex;gap:8px;margin-bottom:12px}
.streak-dot{width:36px;height:36px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text3);transition:all .2s}
.streak-dot.active{background:linear-gradient(135deg,#f59e0b,#fbbf24);border-color:#f59e0b;color:#000}
.streak-dot.today{box-shadow:0 0 0 3px rgba(245,158,11,.3)}
.streak-info{font-size:13px;color:var(--text2)}
.streak-info strong{color:#fbbf24}

.fg{margin-bottom:16px}
.fg label{display:block;font-size:13px;font-weight:500;color:var(--text2);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;font-family:var(--font);transition:border .2s}
.fg input:focus,.fg textarea:focus{outline:none;border-color:var(--accent)}

/* Panel Layout */
.panel-layout{display:flex;height:100vh;padding-top:0}
#v-chat{padding-top:0}
#v-chat .nav{display:none}

.panel-sidebar{width:248px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.ps-logo{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.ps-logo img{height:28px;border-radius:8px}
.ps-logo span{font-weight:700;font-size:16px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ps-nav{padding:10px 10px 6px;display:flex;flex-direction:column;gap:2px;flex:0 0 auto;max-height:46vh;overflow-y:auto;overscroll-behavior:contain}
.si{width:20px;height:20px;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}
.si-s{width:16px;height:16px;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round}
.ps-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--text2);font-size:13px;font-weight:500;transition:all .2s;cursor:pointer;min-height:38px}
.ps-link:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateX(3px)}
.ps-link.active{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(37,99,235,.08));color:var(--accent2);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
.ps-link .si{width:28px;height:28px;padding:6px;border-radius:9px;color:#fff;stroke:#fff;background:linear-gradient(135deg,#7c3aed,#3b82f6);box-shadow:0 6px 14px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .22s,box-shadow .22s}
.ps-link:hover .si{transform:scale(1.08) rotate(-3deg);box-shadow:0 10px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.22)}
.ps-link.active .si{color:#fff;stroke:#fff;animation:softPop .32s ease}
.ps-link[onclick*="'img'"] .si{background:linear-gradient(135deg,#ec4899,#f472b6)}
.ps-link[onclick*="'video'"] .si{background:linear-gradient(135deg,#10b981,#34d399)}
.ps-link[onclick*="'codeeditor'"] .si{background:linear-gradient(135deg,#3b82f6,#60a5fa)}
.ps-link[onclick*="'prompts'"] .si,.ps-link[onclick*="'keys'"] .si{background:linear-gradient(135deg,#f59e0b,#fbbf24)}
.ps-link[onclick*="'personas'"] .si,.ps-link[onclick*="'memory'"] .si{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}
.ps-link[onclick*="'tasks'"] .si,.ps-link[onclick*="'store'"] .si{background:linear-gradient(135deg,#14b8a6,#22c55e)}
.ps-link[onclick*="'support'"] .si{background:linear-gradient(135deg,#ef4444,#f87171)}
.ps-txt{white-space:nowrap}
.ps-divider{height:1px;background:var(--border);margin:0 16px}
.ps-chats{flex:1 1 190px;min-height:150px;overflow-y:auto;padding:0 10px 8px;border-top:1px solid rgba(255,255,255,.04)}
.ps-chats-head{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 8px;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;position:sticky;top:0;background:var(--bg2);z-index:2}
.btn-new-chat{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.btn-new-chat:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.05)}
.chat-list{display:flex;flex-direction:column;gap:4px;padding-bottom:8px}
.chat-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--text2);transition:.18s;border:1px solid transparent;animation:panelEnter .18s ease both}
.chat-item:hover,.chat-item.active{background:rgba(255,255,255,.05);color:var(--text);border-color:rgba(255,255,255,.06)}
.ci-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-actions{display:flex;align-items:center;flex-shrink:0}
.ci-btn{width:26px;height:26px;border-radius:8px;border:1px solid rgba(239,68,68,.22);background:rgba(239,68,68,.08);cursor:pointer;opacity:.78;transition:.2s;font-size:12px;color:#f87171;display:flex;align-items:center;justify-content:center}
.chat-item:hover .ci-btn,.chat-item.active .ci-btn{opacity:1}
.ci-btn:hover{opacity:1!important;color:#fff;background:rgba(239,68,68,.8);border-color:rgba(239,68,68,.9);transform:scale(1.08)}
.ps-bottom{border-top:1px solid var(--border);padding:12px}
.ps-user-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.03)}
.ps-avatar{width:36px;height:36px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0}
.ps-uname{font-weight:600;font-size:13px;display:block;color:var(--text)}
.ps-uplan{font-size:11px;color:var(--accent2);font-weight:500}
.ps-actions{display:flex;flex-direction:column;gap:1px}
.ps-action-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:var(--text3);font-size:13px;font-weight:500;transition:.2s;cursor:pointer}
.ps-action-link:hover{background:rgba(255,255,255,.04);color:var(--text)}

/* Sidebar Section Labels */
.ps-nav-label{padding:14px 14px 6px;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;opacity:.6}

/* Bottom Icon Row */
.ps-actions-row{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px 0}
.ps-icon-btn{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text3);cursor:pointer;transition:all .2s;position:relative}
.ps-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--text);transform:translateY(-1px)}

/* Panel Main */
.panel-main{flex:1;overflow-y:auto;background:var(--bg)}
.ptab{display:none}
.ptab.on{display:flex;flex-direction:column;height:100%;animation:panelEnter .28s ease both}
.ptab.on .dash-panel,.ptab.on .dsec,.ptab.on .card,.ptab.on .ds-card,.ptab.on .ref-panel,.ptab.on .daily-panel{animation:panelEnter .32s ease both}
.ptab.on .grid .card:nth-child(2),.ptab.on .dash-row:nth-of-type(2),.ptab.on .ds-card:nth-child(2){animation-delay:.04s}
.ptab.on .grid .card:nth-child(3),.ptab.on .dash-row:nth-of-type(3),.ptab.on .ds-card:nth-child(3){animation-delay:.08s}
.ptab.on .grid .card:nth-child(4),.ptab.on .ds-card:nth-child(4){animation-delay:.12s}
.panel-page{padding:36px;max-width:900px;margin:0 auto;width:100%}
.pp-head{margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pp-head h2{font-size:26px;font-weight:800;margin-bottom:6px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
.pp-head p{color:var(--text2);font-size:14px}

/* Chat */
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(17,24,39,.6);backdrop-filter:blur(12px)}
.ch-title{font-weight:600;font-size:16px}
.model-sel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 14px;color:var(--text);font-size:13px;font-family:var(--font);cursor:pointer;transition:all .2s}
.model-sel:hover{border-color:var(--accent)}
.model-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.chat-msgs{flex:1;overflow-y:auto;padding:24px 24px 8px}
.chat-welcome{text-align:center;padding:100px 20px;color:var(--text3)}
.chat-welcome img{width:56px;border-radius:16px;margin-bottom:20px;opacity:.7;box-shadow:0 8px 32px rgba(124,58,237,.2)}
.chat-welcome h3{font-size:22px;color:var(--text);margin-bottom:8px;font-weight:700}
.chat-welcome p{font-size:15px;color:var(--text2)}
.msg-row{display:flex;gap:14px;margin-bottom:20px;animation:msgIn .35s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.msg-row.user{flex-direction:row-reverse}
.msg-row.user .msg-body{align-items:flex-end}
.msg-row.user .msg-text{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.12));border:1px solid rgba(124,58,237,.25)}
.msg-ava{width:34px;height:34px;border-radius:12px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(124,58,237,.25)}
.msg-row.user .msg-ava{background:linear-gradient(135deg,#3b82f6,#6366f1)}
.msg-body{display:flex;flex-direction:column;max-width:75%}
.msg-name{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.msg-text{font-size:14px;line-height:1.7;color:var(--text);padding:14px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;border-top-left-radius:4px;word-wrap:break-word;overflow-x:hidden}
.msg-row.user .msg-text{border-radius:16px;border-top-right-radius:4px}
.msg-text pre{background:var(--bg);padding:0;border-radius:10px;overflow:hidden;margin:10px 0;font-size:13px;border:1px solid var(--border)}
.msg-text pre code{padding:14px;display:block;overflow-x:auto;background:transparent;color:var(--text);border-radius:0}
.code-wrapper{border-radius:10px;overflow:hidden;margin:12px 0;border:1px solid var(--border);background:var(--bg)}
.code-wrapper pre{margin:0;border:none;border-radius:0}
.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--border);font-family:monospace;font-size:12px;color:var(--text3)}
.copy-btn{background:transparent;border:1px solid var(--border);color:var(--text2);padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:all 0.2s}
.copy-btn:hover{background:var(--bg3);color:var(--text)}
.msg-text code{background:rgba(124,58,237,.1);padding:2px 8px;border-radius:6px;font-size:13px;color:var(--accent2);font-family:monospace}
.msg-text img{max-width:100%;border-radius:12px;margin:8px 0}
.msg-text table{width:100%;border-collapse:collapse;margin:16px 0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--border)}
.msg-text th,.msg-text td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.msg-text th{background:var(--bg3);font-weight:600;color:var(--text);font-size:13px}
.msg-text tr:last-child td{border-bottom:none}
.msg-text td:last-child,.msg-text th:last-child{border-right:none}
.msg-text tr:nth-child(even){background:rgba(255,255,255,0.01)}
.msg-text ul,.msg-text ol{margin:12px 0;padding-left:24px}
.msg-text li{margin-bottom:6px}
.msg-text h1,.msg-text h2,.msg-text h3,.msg-text h4{margin-top:20px;margin-bottom:12px;color:var(--text);line-height:1.4}
.msg-text h3{font-size:18px}
.msg-text h4{font-size:16px}
.msg-text blockquote{border-left:4px solid var(--accent);margin:12px 0;padding-left:16px;color:var(--text2);font-style:italic}
.msg-text a{color:var(--accent);text-decoration:none}
.msg-text a:hover{text-decoration:underline}

/* Typing Indicator */
.typing-indicator{display:inline-flex;align-items:center;gap:5px;padding:14px 18px}
.typing-indicator .dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);animation:typingBounce 1.4s ease-in-out infinite}
.typing-indicator .dot:nth-child(2){animation-delay:.2s}
.typing-indicator .dot:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}

.chat-quota{padding:6px 24px;font-size:12px;color:var(--text3);border-top:1px solid var(--border);flex-shrink:0;background:rgba(17,24,39,.4)}
.chat-input-area{padding:12px 24px 16px;border-top:1px solid var(--border);flex-shrink:0;background:rgba(17,24,39,.3)}
.chat-input-wrap{display:flex;gap:10px;align-items:flex-end;max-width:800px;margin:0 auto}
.chat-input-wrap textarea{flex:1;resize:none;padding:14px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;color:var(--text);font-size:14px;font-family:var(--font);max-height:150px;transition:all .25s}
.chat-input-wrap textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.1);background:var(--bg3)}
.chat-input-wrap .btn{height:48px;width:48px;padding:0;border-radius:14px;font-size:18px;transition:all .2s}
.chat-input-wrap .btn:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 16px rgba(124,58,237,.4)}
.chat-input-wrap .btn:disabled{opacity:.5;cursor:not-allowed}
.mic-btn{width:42px;height:42px;border-radius:12px!important;display:flex;align-items:center;justify-content:center;background:var(--bg2)!important;border:1px solid var(--border)!important;color:var(--text2)!important;font-size:18px;cursor:pointer;transition:all .2s;flex-shrink:0}
.mic-btn:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:rgba(124,58,237,.08)!important}
.mic-btn.pulse{color:#ef4444!important;border-color:#ef4444!important;animation:micPulse 1.2s ease infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.tts-btn{background:transparent;border:1px solid var(--border);color:var(--text3);padding:4px 10px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s;margin-top:6px;display:inline-block}
.tts-btn:hover{background:rgba(124,58,237,.1);color:var(--accent2);border-color:var(--accent)}

/* Chat Toolbar (Gemini Style) */
.chat-toolbar{display:flex;justify-content:space-between;align-items:center;max-width:800px;margin:8px auto 0;padding:0 4px}
.chat-tools-left{display:flex;align-items:center;gap:6px}
.chat-tools-right{display:flex;align-items:center}

/* Model Badge in Header */
.ch-model-badge{background:rgba(124,58,237,.12);color:var(--accent2);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;border:1px solid rgba(124,58,237,.2)}
.ch-model-badge:hover{background:rgba(124,58,237,.2);border-color:var(--accent)}

/* Tool Trigger (+) Button */
.tool-trigger{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.tool-trigger:hover{background:var(--glass);border-color:var(--accent);color:var(--accent2);transform:rotate(90deg)}

/* Tool Dropdown Menu */
.tool-dropdown{position:relative}
.tool-menu{display:none;position:absolute;bottom:calc(100% + 8px);left:0;background:var(--bg2);border:1px solid var(--border);border-radius:14px;min-width:220px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:50;overflow:hidden;animation:toolMenuIn .2s ease}
.tool-menu.open{display:block}
@keyframes toolMenuIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tool-menu-head{padding:12px 16px 8px;font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
.tool-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text2);font-size:14px;cursor:pointer;transition:all .15s}
.tool-item:hover{background:rgba(124,58,237,.08);color:var(--text)}
.tool-menu.open .tool-item{animation:panelEnter .22s ease both}
.tool-menu.open .tool-item:nth-of-type(1){animation-delay:.02s}
.tool-menu.open .tool-item:nth-of-type(2){animation-delay:.04s}
.tool-menu.open .tool-item:nth-of-type(3){animation-delay:.06s}
.tool-menu.open .tool-item:nth-of-type(4){animation-delay:.08s}
.tool-menu.open .tool-item:nth-of-type(5){animation-delay:.1s}
.tool-menu.open .tool-item:nth-of-type(6){animation-delay:.12s}
.tool-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.2);transition:transform .2s}
.tool-item:hover .tool-icon{transform:scale(1.1) rotate(-3deg)}

/* Tool Chips */
.tool-chip{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;transition:all .2s;font-family:var(--font);display:inline-flex;align-items:center;gap:6px}
.tool-chip:hover{border-color:var(--accent);color:var(--accent2);background:rgba(124,58,237,.08);transform:translateY(-1px)}
.tool-chip svg{flex-shrink:0}
.mpb-icon{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* Model Select Chip */
.model-sel-chip{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;color:var(--text2);font-size:12px;font-family:var(--font);cursor:pointer;transition:all .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.model-sel-chip:hover{border-color:var(--accent);color:var(--accent2)}
.model-sel-chip:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.15)}

/* ===== NEW PREMIUM DASHBOARD ===== */
.dash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.dash-greeting h2{font-size:28px;font-weight:800;margin-bottom:4px}
.dash-greeting p{color:var(--text2);font-size:14px}
.dash-plan-badge{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(37,99,235,.08));border:1px solid rgba(124,58,237,.25);border-radius:14px;padding:12px 20px}
.dpb-icon{font-size:24px}
.dash-plan-badge strong{display:block;font-size:16px;color:var(--accent2)}
.dash-plan-badge span{font-size:11px;color:var(--text3)}

/* 3D Persona & Prompt Icons */
.persona-icon-3d{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);animation:iconFloat 3s ease-in-out infinite;position:relative;overflow:hidden;color:#fff}
.persona-icon-3d svg{position:relative;z-index:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.persona-icon-3d::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.persona-card:hover .persona-icon-3d{animation:iconBounce .4s ease;box-shadow:0 12px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3)}
@keyframes iconBounce{0%{transform:scale(1)}50%{transform:scale(1.15) rotate(-3deg)}100%{transform:scale(1)}}

/* Stat Cards */
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.ds-card{border-radius:18px;padding:22px;position:relative;overflow:hidden;transition:all .3s;border:1px solid transparent;backdrop-filter:blur(10px)}
.ds-card::after{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.04),transparent);pointer-events:none}
.ds-card:hover{transform:translateY(-4px)}
.ds-purple{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(124,58,237,.04));border-color:rgba(124,58,237,.25)}
.ds-purple:hover{box-shadow:0 8px 40px rgba(124,58,237,.25),inset 0 1px 0 rgba(255,255,255,.05)}
.ds-blue{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(59,130,246,.04));border-color:rgba(59,130,246,.25)}
.ds-blue:hover{box-shadow:0 8px 40px rgba(59,130,246,.25),inset 0 1px 0 rgba(255,255,255,.05)}
.ds-green{background:linear-gradient(135deg,rgba(16,185,129,.18),rgba(16,185,129,.04));border-color:rgba(16,185,129,.25)}
.ds-green:hover{box-shadow:0 8px 40px rgba(16,185,129,.25),inset 0 1px 0 rgba(255,255,255,.05)}
.ds-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.ds-icon-wrap{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:all .3s}
.ds-card:hover .ds-icon-wrap{transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.ds-purple .ds-icon-wrap{background:rgba(124,58,237,.2);color:#a78bfa}
.ds-blue .ds-icon-wrap{background:rgba(59,130,246,.2);color:#60a5fa}
.ds-green .ds-icon-wrap{background:rgba(16,185,129,.2);color:#34d399}
.ds-badge{background:rgba(34,197,94,.15);color:var(--green);padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}
.ds-trend{color:var(--green);font-size:12px;font-weight:600}
.ds-value{font-size:30px;font-weight:800;margin-bottom:4px;letter-spacing:-.5px;animation:countUp .6s ease forwards}
.ds-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:500;margin-bottom:12px}
.ds-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.ds-bar-fill{height:100%;background:var(--grad);border-radius:2px;transition:width .8s ease}
.ds-bar-blue{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.ds-bar-green{background:linear-gradient(90deg,#10b981,#34d399)}

/* Dashboard Row */
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.dash-panel{background:linear-gradient(135deg,rgba(17,24,39,.9),rgba(26,32,53,.8));border:1px solid var(--border);border-radius:18px;padding:24px;margin-bottom:16px;backdrop-filter:blur(6px);transition:all .3s}
.dash-panel:hover{border-color:rgba(124,58,237,.15);box-shadow:0 4px 24px rgba(0,0,0,.15)}
.dash-panel h3{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}

/* Usage Ring */
.usage-ring-wrap{display:flex;align-items:center;gap:32px}
.usage-ring{position:relative;width:120px;height:120px;flex-shrink:0}
.usage-ring svg{width:100%;height:100%}
.usage-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-pct{font-size:24px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ring-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.usage-details{flex:1;display:flex;flex-direction:column;gap:12px}
.ud-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2)}
.ud-item strong{margin-left:auto;color:var(--text);font-size:14px}
.ud-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ud-dot.purple{background:var(--accent)}
.ud-dot.blue{background:#3b82f6}
.ud-dot.gray{background:var(--text3)}

/* Quick Action Cards */
.da-grid{display:flex;flex-direction:column;gap:8px}
.da-card{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:all .2s;border:1px solid transparent}
.da-card:hover{background:rgba(255,255,255,.04);border-color:var(--border);transform:translateX(4px)}
.da-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .22s}
.da-card:hover .da-icon{transform:scale(1.08) rotate(-3deg)}
.da-info{flex:1}
.da-info strong{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.da-info span{font-size:12px;color:var(--text3)}
.da-arrow{color:var(--text3);opacity:0;transition:all .2s;flex-shrink:0}
.da-card:hover .da-arrow{opacity:1;transform:translateX(4px)}

/* Dashboard Models Grid */
.dash-models-grid{display:flex;flex-wrap:wrap;gap:8px}
.dm-tag{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--bg);transition:all .2s;cursor:default}
.dm-tag:hover{border-color:var(--accent);background:rgba(124,58,237,.06)}
.dm-tag.free{border-color:rgba(34,197,94,.3);color:var(--green)}
.dm-tag.premium{border-color:rgba(124,58,237,.3);color:var(--accent2)}

/* Keep old dashboard basics for admin */
.dsec{margin-bottom:28px}
.dsec h3{font-size:16px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.key-box{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px}
.key-box code{flex:1;font-size:14px;color:var(--accent2);font-family:'Fira Code',monospace;word-break:break-all}

/* Admin */
.admin-models{display:flex;flex-wrap:wrap;gap:8px}
.am-card{padding:8px 16px;border-radius:10px;border:1px solid var(--border);font-size:13px;cursor:pointer;transition:all .25s;display:flex;align-items:center;gap:6px;background:var(--bg)}
.am-card.on{border-color:var(--green);background:rgba(34,197,94,.08);box-shadow:0 0 12px rgba(34,197,94,.1)}
.am-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.at{width:100%;border-collapse:collapse}
.at th,.at td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}
.at th{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;background:rgba(255,255,255,.02)}
.at tr{transition:all .2s}
.at tr:hover{background:rgba(124,58,237,.04)}
.badge{padding:4px 12px;border-radius:8px;font-size:11px;font-weight:600;letter-spacing:.3px}
.badge-active{background:rgba(34,197,94,.15);color:var(--green)}
.badge-blocked{background:rgba(239,68,68,.15);color:var(--red)}
.badge-starter{background:rgba(100,116,139,.15);color:var(--text2)}
.badge-pro{background:rgba(124,58,237,.15);color:var(--accent2)}
.badge-enterprise{background:rgba(234,179,8,.15);color:var(--yellow)}
.uc{display:flex;align-items:center;gap:10px}
.ua{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:0 2px 8px rgba(124,58,237,.2)}

/* Admin Action Buttons */
.adm-btn{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s;padding:0}
.adm-btn:hover{transform:scale(1.15) translateY(-1px)}
.adm-btn-red{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.06)}
.adm-btn-red:hover{background:rgba(239,68,68,.2);box-shadow:0 4px 16px rgba(239,68,68,.25)}
.adm-btn-green{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06)}
.adm-btn-green:hover{background:rgba(34,197,94,.2);box-shadow:0 4px 16px rgba(34,197,94,.25)}
.adm-btn-orange{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.06)}
.adm-btn-orange:hover{background:rgba(245,158,11,.2);box-shadow:0 4px 16px rgba(245,158,11,.25)}
.adm-btn-purple{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.06)}
.adm-btn-purple:hover{background:rgba(124,58,237,.2);box-shadow:0 4px 16px rgba(124,58,237,.25)}
.adm-btn-blue{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.06)}
.adm-btn-blue:hover{background:rgba(59,130,246,.2);box-shadow:0 4px 16px rgba(59,130,246,.25)}
.adm-act-sel{padding:5px 10px;font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font);cursor:pointer;transition:all .2s}
.adm-act-sel:hover{border-color:var(--accent2)}
.adm-act-sel:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.badge-tempban{background:rgba(245,158,11,.15);color:#fbbf24}

/* Ticket Cards */
.tk-card{background:linear-gradient(135deg,rgba(17,24,39,.8),rgba(15,20,35,.9));border:1px solid var(--border);border-radius:16px;padding:18px;margin-bottom:12px;transition:all .25s;animation:fadeSlideIn .4s ease forwards}
.tk-card:hover{border-color:rgba(124,58,237,.25);box-shadow:0 4px 20px rgba(0,0,0,.2);transform:translateY(-2px)}
.tk-card-admin{border-left:3px solid var(--accent)}
.tk-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.tk-head strong{font-size:14px}
.tk-meta{font-size:11px;color:var(--text3);margin-bottom:10px}
.tk-desc{font-size:13px;color:var(--text2);margin:0;line-height:1.6}
.tk-badge{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600}
.tk-open{background:rgba(59,130,246,.12);color:#60a5fa;box-shadow:0 0 8px rgba(59,130,246,.1)}
.tk-answered{background:rgba(34,197,94,.12);color:#4ade80;box-shadow:0 0 8px rgba(34,197,94,.1)}
.tk-closed{background:rgba(100,116,139,.12);color:#94a3b8}
.tk-responses{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.tk-response{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.15);border-radius:12px;padding:14px;margin-bottom:8px;position:relative}
.tk-response::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);border-radius:3px 0 0 3px}
.tk-resp-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px;color:var(--accent2)}
.tk-response p{font-size:13px;color:var(--text);margin:0}
.priority-radio{cursor:pointer}
.priority-radio input{display:none}
.pr-badge{padding:8px 18px;border-radius:10px;font-size:12px;font-weight:600;border:1px solid var(--border);display:inline-block;transition:all .25s}
.pr-badge:hover{border-color:rgba(124,58,237,.3)}
.priority-radio input:checked+.pr-low{background:rgba(34,197,94,.15);border-color:var(--green);color:var(--green);box-shadow:0 0 12px rgba(34,197,94,.15)}
.priority-radio input:checked+.pr-medium{background:rgba(245,158,11,.15);border-color:#f59e0b;color:#fbbf24;box-shadow:0 0 12px rgba(245,158,11,.15)}
.priority-radio input:checked+.pr-high{background:rgba(239,68,68,.15);border-color:var(--red);color:var(--red);box-shadow:0 0 12px rgba(239,68,68,.15)}

/* Announcement Cards */
.ann-item{padding:12px 14px;border:1px solid var(--border);border-radius:12px;margin-bottom:8px;transition:all .2s}
.ann-item:hover{border-color:rgba(124,58,237,.2);background:rgba(124,58,237,.03)}
.ann-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ann-card{border-radius:14px;padding:16px 20px;margin-bottom:12px;transition:all .25s;animation:fadeSlideIn .4s ease forwards}
.ann-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.ann-card-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ann-card-head strong{font-size:14px}
.ann-card p{font-size:13px;color:var(--text2);margin:0;line-height:1.6}

/* Notification Badge */
.notif-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:iconPulse 2s ease-in-out infinite}

/* Prompt Card */
.prompt-card{cursor:pointer;text-align:center;padding:24px 20px}
.prompt-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(124,58,237,.15)}
.prompt-card h3{font-size:16px;margin-bottom:6px}
.prompt-card p{font-size:12px}

/* Persona Card */
.persona-card{cursor:pointer;padding:20px 16px;text-align:center}
.persona-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 24px rgba(124,58,237,.15)}
.persona-avatar{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#fff;font-size:24px;font-weight:800;box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);letter-spacing:0}
.persona-card .skill-badges{margin-top:10px}

/* Agent Skill Controls */
.skill-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.skill-toggle{cursor:pointer}
.skill-toggle input{display:none}
.skill-toggle span{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg);border-radius:10px;padding:9px 10px;font-size:12px;color:var(--text2);transition:.2s}
.skill-toggle span::before{content:'';width:14px;height:14px;border-radius:5px;border:1px solid rgba(148,163,184,.35);background:rgba(15,23,42,.5);flex-shrink:0}
.skill-toggle input:checked+span{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.06);color:var(--text)}
.skill-toggle input:checked+span::before{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 3px var(--bg)}
.skill-toggle:hover span{border-color:rgba(124,58,237,.35);transform:translateY(-1px)}
.skill-summary{margin-top:12px}
.skill-mini-list{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:22px}
.skill-mini-list span{font-size:10px;color:var(--text2);border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:999px;padding:3px 8px}
.skill-config-btn{margin-top:9px;border:1px solid rgba(124,58,237,.28);background:rgba(124,58,237,.08);color:var(--accent2);border-radius:9px;padding:7px 12px;font-size:11px;font-weight:700;cursor:pointer;transition:.2s}
.skill-config-btn:hover{background:rgba(124,58,237,.16);transform:translateY(-1px)}
.persona-skill-editor{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.skill-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.skill-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:rgba(255,255,255,.025);color:var(--text3);border-radius:9px;padding:6px 8px;font-size:10px;font-weight:700;cursor:pointer;transition:.2s}
.skill-dot{width:9px;height:9px;border-radius:3px;border:1px solid rgba(148,163,184,.35);background:rgba(15,23,42,.6)}
.skill-badge.on{color:#d1fae5;border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
.skill-badge.on .skill-dot{background:var(--green);border-color:var(--green)}
.skill-badge:hover{transform:translateY(-1px);border-color:var(--accent);color:#fff}
.welcome-skills{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:-4px auto 14px;max-width:560px}
.welcome-skills span{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:999px;padding:4px 9px}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);padding:14px 28px;background:rgba(17,24,39,.95);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:14px;font-size:14px;font-weight:500;opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:300;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:var(--green);box-shadow:0 8px 32px rgba(34,197,94,.15)}
.toast.err{border-color:var(--red);box-shadow:0 8px 32px rgba(239,68,68,.15)}

/* Fade-up animation */
.fu{opacity:0;transform:translateY(24px);transition:all .6s ease}
.fu.vis{opacity:1;transform:translateY(0)}

/* Video Progress Bar */
.vid-progress-container{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;text-align:center}
.vid-bar-bg{width:100%;height:8px;background:var(--bg3);border-radius:10px;overflow:hidden;margin-top:10px}
.vid-bar-fill{height:100%;width:0%;background:linear-gradient(90deg, #3b82f6, #10b981);border-radius:10px;transition:width 0.5s ease-in-out;position:relative}
.vid-bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:vidshimmer 2s infinite}
@keyframes vidshimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* Image Spinner */
.img-spinner{width:48px;height:48px;border:4px solid var(--border);border-top:4px solid var(--accent);border-radius:50%;animation:imgspin 1s linear infinite;margin:0 auto}
@keyframes imgspin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Image Action Buttons */
.btn-small{padding:8px 16px;font-size:12px;border-radius:8px;background:var(--bg3);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:all .2s ease;font-weight:500}
.btn-small:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,0.3)}

/* Compact Panel Utilities */
.mini-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.mini-panel-head h3{margin:0 0 4px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.mini-panel-head h3 span{font-size:11px;font-weight:700;color:var(--accent2);background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.2);border-radius:999px;padding:2px 8px}
.mini-panel-head p{margin:0;color:var(--text3);font-size:12px;line-height:1.5}

/* Image History */
.img-history-panel{margin-top:24px;border-top:1px solid var(--border);padding-top:20px}
.img-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.img-history-card{background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;min-width:0;transition:all .2s}
.img-history-card:hover{border-color:rgba(124,58,237,.35);transform:translateY(-2px)}
.img-history-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--bg3)}
.img-history-info{padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.img-history-info strong{font-size:12px;color:var(--accent2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.img-history-info span{font-size:12px;color:var(--text2);line-height:1.4;min-height:34px;overflow:hidden}
.img-history-info small{font-size:10px;color:var(--text3)}
.img-history-actions{display:flex;gap:6px;padding:0 12px 12px}
.img-history-actions button{flex:1;border:1px solid var(--border);background:var(--bg2);color:var(--text2);border-radius:8px;padding:7px 8px;font-size:11px;font-weight:600;cursor:pointer;transition:.2s}
.img-history-actions button:hover{border-color:var(--accent);color:#fff;background:rgba(124,58,237,.25)}
.img-history-empty,.health-empty{padding:18px;border:1px dashed var(--border);border-radius:12px;color:var(--text3);font-size:13px;text-align:center;background:rgba(255,255,255,.02)}

/* Model Health */
.health-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.health-stats div{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0}
.health-stats strong{display:block;font-size:20px;color:var(--text);line-height:1.1}
.health-stats span{display:block;margin-top:4px;font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.health-stamp{font-size:11px;color:var(--text3);margin-bottom:10px}
.health-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.health-row{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:0}
.health-row.ok{border-color:rgba(34,197,94,.25)}
.health-row.warn{border-color:rgba(245,158,11,.25)}
.health-row.muted{opacity:.72}
.health-dot{width:9px;height:9px;border-radius:50%;background:var(--text3);flex-shrink:0}
.health-row.ok .health-dot{background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.45)}
.health-row.warn .health-dot{background:var(--yellow);box-shadow:0 0 10px rgba(234,179,8,.35)}
.health-main{flex:1;min-width:0;display:flex;flex-direction:column}
.health-main strong{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.health-main span{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.health-meta{font-size:11px;color:var(--text2);font-weight:700;white-space:nowrap}
.health-error{border-color:rgba(239,68,68,.3);color:#f87171}
@media(max-width:900px){.health-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.mini-panel-head{flex-direction:column}.health-stats{grid-template-columns:repeat(2,1fr)}.img-history-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== LIGHT THEME OVERRIDES ===== */
body.theme-light{color-scheme:light}
body.theme-light .nav{background:rgba(248,249,252,.9);border-bottom-color:rgba(0,0,0,.06)}
body.theme-light .panel-sidebar{background:#fff;border-right-color:rgba(0,0,0,.06)}
body.theme-light .ps-link:hover{background:rgba(124,58,237,.06)}
body.theme-light .ps-link.active{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(37,99,235,.04))}
body.theme-light .ps-user-card{background:rgba(0,0,0,.02)}
body.theme-light .ps-icon-btn:hover{background:rgba(0,0,0,.05)}
body.theme-light .chat-head{background:rgba(255,255,255,.85)}
body.theme-light .chat-input-wrap textarea{background:#fff;border-color:rgba(0,0,0,.1)}
body.theme-light .chat-input-wrap textarea:focus{background:#fff;border-color:var(--accent)}
body.theme-light .msg-content{background:#fff;border-color:rgba(0,0,0,.06);box-shadow:0 1px 4px rgba(0,0,0,.04)}
body.theme-light .card{background:#fff;border-color:rgba(0,0,0,.06)}
body.theme-light .card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
body.theme-light .dash-panel{background:#fff !important;border-color:rgba(0,0,0,.06)}
body.theme-light .dash-panel:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
body.theme-light .ds-purple{background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(124,58,237,.02)) !important}
body.theme-light .ds-blue{background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.02)) !important}
body.theme-light .ds-green{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(16,185,129,.02)) !important}
body.theme-light .ds-orange{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02)) !important}
body.theme-light .tk-card{background:#fff !important}
body.theme-light .toast{background:rgba(255,255,255,.95) !important;box-shadow:0 8px 32px rgba(0,0,0,.1)}
body.theme-light .tool-menu{background:#fff !important;box-shadow:0 8px 32px rgba(0,0,0,.12)}
body.theme-light .modal{background:rgba(0,0,0,.3) !important}
body.theme-light ::-webkit-scrollbar-track{background:#f0f0f0}
body.theme-light ::-webkit-scrollbar-thumb{background:#bbb}
body.theme-light .key-box{background:#fff !important}
body.theme-light .pc{background:#fff !important}
body.theme-light .chat-welcome{color:var(--text3)}
body.theme-light .am-card{background:#fff !important;color:var(--text) !important}
body.theme-light .at th{background:#f8f9fc !important;color:var(--text2) !important;border-bottom-color:rgba(0,0,0,.1) !important}
body.theme-light .at td{background:#fff !important;border-bottom-color:rgba(0,0,0,.06) !important;color:var(--text) !important}
body.theme-light .at tr:hover td{background:rgba(124,58,237,.03) !important}
body.theme-light .chat-item:hover,body.theme-light .chat-item.active{background:rgba(0,0,0,.04) !important}
body.theme-light .fg input,body.theme-light .fg select,body.theme-light .fg textarea{background:#fff !important;color:var(--text) !important;border-color:rgba(0,0,0,.15) !important}
body.theme-light .model-sel{background:#fff !important;border-color:rgba(0,0,0,.15) !important;color:var(--text) !important}
body.theme-light .adm-btn{background:#fff !important;border-color:rgba(0,0,0,.1) !important;color:var(--text) !important}
body.theme-light .adm-btn-primary{background:var(--accent) !important;color:#fff !important}
body.theme-light .tool-chip{background:#fff !important;border-color:rgba(0,0,0,.1) !important;color:var(--text) !important}
body.theme-light .chat-head{background:rgba(248,249,252,.9) !important}
body.theme-light .uc .ua{background:rgba(0,0,0,.05) !important}

/* Admin Specific Fixes */
#a-models{display:flex;flex-wrap:wrap;gap:8px;max-height:400px;overflow-y:auto;padding-right:8px}
#a-models .tool-chip{font-size:11px;padding:6px 12px;margin:0}

/* Ocean Theme */
body.theme-ocean .chat-head{background:rgba(10,25,47,.85)!important}
body.theme-ocean .chat-input-area{background:rgba(10,25,47,.5)!important}
body.theme-ocean .chat-input-wrap textarea{background:#112240!important;border-color:rgba(100,255,218,.15)!important;color:#ccd6f6!important}
body.theme-ocean .chat-input-wrap textarea:focus{border-color:#64ffda!important;box-shadow:0 0 0 3px rgba(100,255,218,.1)!important}
body.theme-ocean .msg-row.user .msg-text{background:linear-gradient(135deg,rgba(100,255,218,.12),rgba(14,165,233,.08))!important;border-color:rgba(100,255,218,.2)!important}
body.theme-ocean .msg-text{background:#112240!important;border-color:rgba(100,255,218,.1)!important}
body.theme-ocean .card{background:#112240!important;border-color:rgba(100,255,218,.1)!important}
body.theme-ocean .card:hover{box-shadow:0 8px 32px rgba(100,255,218,.08)!important}
body.theme-ocean .tool-chip{background:#112240!important;border-color:rgba(100,255,218,.15)!important}
body.theme-ocean .btn-primary{background:linear-gradient(135deg,#64ffda,#0ea5e9)!important;color:#0a192f!important}
body.theme-ocean .ds-purple{background:linear-gradient(135deg,rgba(100,255,218,.12),rgba(100,255,218,.03))!important;border-color:rgba(100,255,218,.2)!important}
body.theme-ocean .ds-blue{background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(14,165,233,.03))!important;border-color:rgba(14,165,233,.2)!important}
body.theme-ocean .ds-green{background:linear-gradient(135deg,rgba(100,255,218,.15),rgba(100,255,218,.04))!important;border-color:rgba(100,255,218,.2)!important}
body.theme-ocean .mic-btn{background:#112240!important;border-color:rgba(100,255,218,.15)!important;color:#64ffda!important}

/* Forest Theme */
body.theme-forest .chat-head{background:rgba(26,31,22,.85)!important}
body.theme-forest .chat-input-area{background:rgba(26,31,22,.5)!important}
body.theme-forest .chat-input-wrap textarea{background:#252b1e!important;border-color:rgba(76,175,80,.15)!important;color:#e8f5e9!important}
body.theme-forest .chat-input-wrap textarea:focus{border-color:#4caf50!important;box-shadow:0 0 0 3px rgba(76,175,80,.1)!important}
body.theme-forest .msg-row.user .msg-text{background:linear-gradient(135deg,rgba(76,175,80,.12),rgba(0,137,123,.08))!important;border-color:rgba(76,175,80,.2)!important}
body.theme-forest .msg-text{background:#252b1e!important;border-color:rgba(76,175,80,.1)!important}
body.theme-forest .card{background:#252b1e!important;border-color:rgba(76,175,80,.1)!important}
body.theme-forest .card:hover{box-shadow:0 8px 32px rgba(76,175,80,.08)!important}
body.theme-forest .tool-chip{background:#252b1e!important;border-color:rgba(76,175,80,.15)!important}
body.theme-forest .btn-primary{background:linear-gradient(135deg,#4caf50,#00897b)!important;color:#fff!important}
body.theme-forest .ds-purple{background:linear-gradient(135deg,rgba(76,175,80,.12),rgba(76,175,80,.03))!important;border-color:rgba(76,175,80,.2)!important}
body.theme-forest .ds-blue{background:linear-gradient(135deg,rgba(0,137,123,.12),rgba(0,137,123,.03))!important;border-color:rgba(0,137,123,.2)!important}
body.theme-forest .ds-green{background:linear-gradient(135deg,rgba(76,175,80,.15),rgba(76,175,80,.04))!important;border-color:rgba(76,175,80,.2)!important}
body.theme-forest .mic-btn{background:#252b1e!important;border-color:rgba(76,175,80,.15)!important;color:#66bb6a!important}

/* Fix hardcoded dark bg in chat-head for all themes */
body.theme-dark .chat-head{background:rgba(17,24,39,.6)!important}

/* Responsive */
@media(max-width:768px){
.nav{padding:0 16px}
.nav-links{display:none}
.hero{padding:108px 20px 58px}
.hero-grid{grid-template-columns:1fr;gap:28px}
.hero-copy{text-align:center}
.hero h1{font-size:38px}
.hero p{margin-left:auto;margin-right:auto}
.hero-actions,.hero-stats{justify-content:center}
.hero-visual{max-width:520px;margin:0 auto}
.hero-chart{height:170px}
.landing-chatbot{padding:44px 20px}
.bot-demo-grid{grid-template-columns:1fr;gap:24px}
.bot-demo-copy{text-align:left}
.bot-demo-window{max-width:520px;margin:0 auto;width:100%}
.bot-demo-msgs{min-height:220px}
.pricing-tabs{grid-template-columns:1fr}
.pricing-tab{text-align:center}
.usage-calculator{grid-template-columns:1fr;padding:16px}
.calc-row{grid-template-columns:1fr 1fr;gap:8px}
.calc-row input{grid-column:1/-1;grid-row:2}
.calc-row b{text-align:left}
.model-filter-bar,.docs-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
.model-filter-btn,.doc-tab{white-space:nowrap}
.footer-top{grid-template-columns:1fr 1fr}
.auth-container{flex-direction:column}
.auth-left{min-height:auto;padding:28px}
.panel-sidebar{width:64px}
.ps-logo span,.ps-txt,.ps-chats,.ps-uinfo,.ps-divider{display:none}
.ps-nav{padding:8px 6px}
.ps-link{justify-content:center;padding:10px}
.ps-bottom{padding:6px}
.ps-user-card{justify-content:center;padding:6px}
.ps-actions{align-items:center}
.ps-action-link{justify-content:center;padding:8px}
.ps-action-link .ps-txt{display:none}
.panel-main{padding:0}
.dash-row{grid-template-columns:1fr}
.dash-stats{grid-template-columns:repeat(2,1fr)}
}


/* GÜNLÜK GÖREVLER KARTI */
.task-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--glass);border:1px solid var(--border);border-radius:14px;transition:all .2s}
.task-card:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 20px rgba(124,58,237,.1)}
.task-card.task-done{background:rgba(16,185,129,.06);border-color:rgba(16,185,129,.3)}
.task-icon{font-size:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.task-icon .fig-icon{width:38px;height:38px;border-radius:12px}
.task-body{flex:1;min-width:0}
.task-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:6px}
.task-bar-wrap{height:5px;background:var(--bg);border-radius:4px;overflow:hidden;margin-bottom:5px}
.task-bar-fill{height:100%;background:linear-gradient(90deg,#7c3aed,#3b82f6);border-radius:4px;transition:width .5s}
.task-meta{font-size:11px;color:var(--text3)}
.task-action{flex-shrink:0}
.task-claimed{color:#10b981;font-size:13px;font-weight:600}
.task-pct{font-size:12px;color:var(--text3);font-weight:600;background:var(--bg);padding:4px 10px;border-radius:20px;border:1px solid var(--border)}

/* MODEL PICKER MODAL */
#model-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999;display:none;backdrop-filter:blur(4px)}
#model-picker-overlay.open{display:block}
#model-picker{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);background:var(--bg2);border:1px solid var(--border);border-radius:20px;width:min(90vw,800px);max-height:80vh;z-index:1000;display:none;flex-direction:column;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.4);opacity:0;transition:all .25s}
#model-picker.open{display:flex;opacity:1;transform:translate(-50%,-50%) scale(1)}
.mp-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mp-header h3{margin:0;font-size:18px}
.mp-body{display:flex;gap:14px;flex:1;overflow:hidden;min-height:0}
.mp-sidebar{display:flex;flex-direction:column;gap:4px;width:140px;flex-shrink:0;overflow-y:auto;padding-right:8px}
.mp-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
.mp-cat{padding:8px 12px;border-radius:10px;font-size:13px;cursor:pointer;color:var(--text2);transition:.2s;display:flex;align-items:center;justify-content:space-between;gap:6px;white-space:nowrap}
.mp-cat:hover{background:var(--bg);color:var(--text)}
.mp-cat.active{background:var(--primary);color:#fff;font-weight:600}
.mp-cat .fig-icon.inline{width:24px;height:24px;border-radius:8px;margin-right:2px}
.mp-cat-count{font-size:11px;opacity:.7;background:rgba(255,255,255,.15);padding:1px 6px;border-radius:8px}
.mp-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;cursor:pointer;transition:.2s;border:1px solid transparent}
.mp-item:hover{background:var(--bg);border-color:var(--border)}
.mp-item.selected{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.3)}
.mp-star{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;transition:.2s;flex-shrink:0}
.mp-star:hover,.mp-star.on{color:#fbbf24;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.1)}
.mp-item-icon{width:32px;text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mp-item-icon .fig-icon{width:32px;height:32px}
.mp-item-info{flex:1;min-width:0}
.mp-item-name{font-size:14px;font-weight:600;color:var(--text)}
.mp-item-meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;color:var(--text3)}
.mp-badge{padding:1px 6px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.5px}
.mp-badge-free{background:rgba(16,185,129,.15);color:#10b981}
.mp-badge-pro{background:rgba(59,130,246,.15);color:#3b82f6}
.mp-badge-ent{background:rgba(168,85,247,.15);color:#a855f7}
.mp-badge-starter{background:rgba(245,158,11,.15);color:#f59e0b}
.tool-chip.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important;box-shadow:0 0 12px rgba(124,58,237,.3)}
#web-search-btn.active{background:linear-gradient(135deg,#3b82f6,#06b6d4)!important;animation:pulse-glow 2s infinite}
#auto-voice-btn.active{background:linear-gradient(135deg,#a855f7,#ec4899)!important;animation:pulse-glow 2s infinite}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 8px rgba(124,58,237,.2)}50%{box-shadow:0 0 16px rgba(124,58,237,.5)}}
.mp-cat-spicy.active{background:linear-gradient(135deg,#ef4444,#f97316)!important}
.mp-cat-fav.active{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#111827!important}
@media(max-width:640px){.mp-sidebar{display:none}.mp-body{flex-direction:column}#model-picker{width:95vw;max-height:85vh}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== PREMIUM MICRO-ANIMATIONS ===== */
@keyframes chatMsgIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes typingDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes sidebarHover{from{transform:translateX(-4px);opacity:.7}to{transform:translateX(0);opacity:1}}
@keyframes badgePop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes toolChipGlow{0%,100%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 12px rgba(124,58,237,.25)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 8px rgba(124,58,237,.1)}50%{box-shadow:0 0 20px rgba(124,58,237,.3)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shimmerText{0%{background-position:-200% center}100%{background-position:200% center}}

/* Chat messages animation */
.msg-row{animation:chatMsgIn .35s ease both}
.msg-row:nth-child(odd){animation-name:slideInLeft}
.msg-row:nth-child(even){animation-name:slideInRight}

/* Typing indicator */
.typing-indicator{display:inline-flex;gap:4px;padding:8px 16px;background:var(--bg3);border-radius:16px;margin:8px 0}
.typing-indicator span{width:8px;height:8px;border-radius:50%;background:var(--accent2);animation:typingDot 1.4s ease-in-out infinite}
.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}

/* Sidebar links hover animation */
.ps-link{transition:all .2s ease;border-left:3px solid transparent}
.ps-link:hover{background:rgba(124,58,237,.08)!important;border-left-color:var(--accent);transform:translateX(4px);transition:all .2s ease}
.ps-link:active{transform:translateX(2px) scale(.98)}

/* Panel tab transitions */
/* removed conflicting ptab animation */
.v{animation:fadeSlideIn .35s ease both}

/* Tool chip micro-animations */
.tool-chip{transition:all .25s ease;position:relative;overflow:hidden}
.tool-chip:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.tool-chip:active{transform:translateY(0) scale(.95)}
.tool-chip::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transition:left .4s}
.tool-chip:hover::before{left:100%}

/* Model picker chip gradient animation */
.model-picker-chip{background-size:200% 200%!important;animation:gradientShift 3s ease infinite}
.model-picker-chip:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 6px 20px rgba(124,58,237,.35)!important}

/* Chat input glow on focus */
#chat-in{transition:all .3s ease}
#chat-in:focus{box-shadow:0 0 0 2px rgba(124,58,237,.3),0 0 20px rgba(124,58,237,.1)!important}

/* Send button pulse */
#chat-send{transition:all .2s ease}
#chat-send:hover{transform:scale(1.1);box-shadow:0 0 20px rgba(124,58,237,.4)}
#chat-send:active{transform:scale(.9)}

/* Chat welcome animation */
.chat-welcome{animation:scaleIn .5s ease both}
.chat-welcome img{animation:floatUp 3s ease-in-out infinite}
.chat-welcome h3{background:linear-gradient(90deg,var(--accent),var(--accent2),#ec4899,var(--accent));background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmerText 4s linear infinite}

/* Dashboard panels stagger */
.dash-panel{animation:fadeSlideIn .4s ease both}
.dash-panel:nth-child(1){animation-delay:0s}
.dash-panel:nth-child(2){animation-delay:.08s}
.dash-panel:nth-child(3){animation-delay:.16s}
.dash-panel:nth-child(4){animation-delay:.2s}

/* Toast notification animation */
.toast.show{animation:badgePop .3s ease both!important}

/* Model picker overlay animation */
#model-picker{backdrop-filter:blur(12px)}
.mp-item{transition:all .2s ease}
.mp-item:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(0,0,0,.15)}
.mp-item.selected{animation:glowPulse 2s ease-in-out infinite}

/* Sidebar avatar glow */
.ps-avatar{transition:all .3s ease}
.ps-avatar:hover{box-shadow:0 0 20px rgba(124,58,237,.4);transform:scale(1.05)}

/* Chat history items */
.ch-item{transition:all .2s ease}
.ch-item:hover{transform:translateX(4px);border-left:3px solid var(--accent)!important}

/* Quota bar animation */
.chat-quota{animation:fadeSlideIn .4s ease .2s both}

/* Button ripple effect */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;width:100%;height:100%;top:0;left:-100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}
.btn:hover::after{left:100%}

/* Star favorite animation */
.mp-star{transition:all .2s ease;font-size:18px;background:none;border:none;cursor:pointer;color:var(--text3);padding:4px}
.mp-star:hover{transform:scale(1.3);color:var(--yellow)}
.mp-star.on{color:var(--yellow);animation:badgePop .3s ease}

/* Badge tier shine */
.mp-badge{transition:all .2s ease}
.mp-badge:hover{transform:scale(1.1)}

/* Message action buttons */
.msg-actions{display:flex;gap:4px;margin-top:6px;opacity:0;transition:opacity .2s}
.msg-row:hover .msg-actions{opacity:1}
.msg-action-btn{background:var(--bg);border:1px solid var(--border);color:var(--text3);border-radius:8px;padding:4px 8px;cursor:pointer;font-size:13px;transition:all .2s;display:inline-flex;align-items:center;gap:4px}
.msg-action-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--accent);transform:translateY(-1px)}

/* Shortcuts modal */
#shortcuts-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center}
#shortcuts-modal.open{display:flex}
.sc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.sc-panel{position:relative;z-index:1;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:28px;width:min(90vw,420px);animation:scaleIn .25s ease}
.sc-panel h3{margin-bottom:16px;font-size:18px}
.sc-grid{display:flex;flex-direction:column;gap:8px}
.sc-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border-radius:10px;font-size:14px}
.sc-item kbd{background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:12px;font-family:var(--font);font-weight:600;color:var(--accent2)}
.sc-item span{margin-left:auto;color:var(--text2);font-size:13px}

/* Code wrapper improvements */
.code-wrapper{border-radius:12px;overflow:hidden;margin:8px 0;border:1px solid var(--border);background:#0d1117}
.code-header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--border);font-size:12px}
.code-header .lang{color:var(--accent2);font-weight:600;text-transform:uppercase;font-size:11px}
.copy-btn{background:transparent;border:1px solid var(--border);color:var(--text3);border-radius:6px;padding:3px 10px;cursor:pointer;font-size:11px;transition:all .2s}
.copy-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.code-wrapper pre{margin:0;padding:12px 16px;overflow-x:auto;font-size:13px;line-height:1.5}
.code-wrapper code{font-family:'JetBrains Mono','Fira Code',monospace;background:transparent!important;padding:0!important}

/* Theme selector in dashboard */
.theme-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.theme-btn{width:40px;height:40px;border-radius:12px;border:2px solid var(--border);cursor:pointer;transition:all .2s;position:relative}
.theme-btn:hover{transform:scale(1.1);border-color:var(--accent)}
.theme-btn.active{border-color:var(--accent);box-shadow:0 0 12px rgba(124,58,237,.3)}
.theme-btn::after{content:'';position:absolute;inset:3px;border-radius:8px}

/* Agent cards */
.agent-card{transition:all .2s ease}
.agent-card:hover{transform:translateY(-4px);border-color:var(--accent)!important;box-shadow:0 8px 24px rgba(0,0,0,.2)}
/* Gallery items */
.gallery-item{border-radius:12px;overflow:hidden;background:var(--bg3);transition:all .2s}
.gallery-item:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* Badge cards */
.badge-card{transition:all .2s}
.badge-card.earned{animation:badgePop .3s ease}
.badge-card:hover{transform:translateY(-2px)}

/* FAZ 2+3 Panel fixes */
#ptab-agents .panel-page,#ptab-gallery .panel-page,#ptab-analytics .panel-page{padding:20px;overflow-y:auto;height:100%}
#ptab-analytics .dash-panel{background:var(--bg2);border:1px solid var(--border);border-radius:16px}
/* Google Translate widget */
.goog-te-gadget{font-size:0!important}
.goog-te-gadget .goog-te-combo{background:var(--bg)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:8px!important;padding:6px 10px!important;font-size:12px!important;font-family:var(--font)!important;cursor:pointer}
.skiptranslate{display:none!important}
body{top:0!important}
.goog-te-banner-frame{display:none!important}
#goog-gt-tt{display:none!important}

/* Language dropdown */
#lang-dd.show{display:block!important;animation:scaleIn .15s ease}

/* ===== ADMIN PANEL ===== */
.admin-layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* Sidebar */
.admin-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.admin-sidebar-header {
  padding: 20px 16px;
  border-bottom: 1px solid var(--border);
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-brand-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.admin-brand-title { font-weight: 700; font-size: 15px; color: var(--text); }
.admin-brand-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

.admin-nav {
  padding: 12px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: all 0.15s;
  position: relative;
}
.admin-nav-item:hover { background: var(--bg3); color: var(--text); }
.admin-nav-item.active { background: rgba(124,58,237,0.15); color: var(--accent); font-weight: 600; }
.admin-nav-icon { font-size: 18px; width: 24px; text-align: center; }
.admin-nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}

.admin-sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}
.admin-exit-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}
.admin-exit-btn:hover { background: var(--bg3); color: var(--text); }

/* Main content */
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Tabs */
.admin-tab { display: none; padding: 28px; min-height: 100%; }
.admin-tab.active { display: block; }

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 12px;
}
.admin-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.admin-refresh-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.admin-refresh-btn:hover { background: var(--bg3); color: var(--text); }

/* Stats Grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.admin-stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.admin-stat-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.admin-stat-label { font-size: 12px; color: var(--text3); margin-top: 4px; }
.admin-stat-sub { font-size: 12px; color: var(--accent); margin-top: 6px; font-weight: 600; }

/* Cards */
.admin-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}
.admin-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-card-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.admin-card-body { padding: 20px; }

/* Table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.admin-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
.admin-table tbody tr:hover { background: rgba(124,58,237,0.05); }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table td { padding: 12px 16px; color: var(--text); vertical-align: middle; }
.admin-empty { text-align: center; color: var(--text3); padding: 32px 16px !important; }

/* Toolbar */
.admin-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.admin-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}
.admin-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
}
.admin-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.admin-search-input:focus { border-color: var(--accent); }
.admin-filter-sel {
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

/* Pagination */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.admin-page-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.admin-page-btn:hover, .admin-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Action buttons */
.admin-action-btn {
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.admin-action-btn:hover { opacity: 0.85; transform: scale(1.05); }
.admin-btn-credit { background: rgba(16,185,129,0.15); color: #10b981; }
.admin-btn-block { background: rgba(239,68,68,0.15); color: #ef4444; }
.admin-btn-unblock { background: rgba(59,130,246,0.15); color: #3b82f6; }
.admin-btn-admin { background: rgba(245,158,11,0.15); color: #f59e0b; }
.admin-btn-delete { background: rgba(239,68,68,0.08); color: #ef4444; }

/* Status badges */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.badge-active { background: rgba(16,185,129,0.15); color: #10b981; }
.badge-blocked { background: rgba(239,68,68,0.15); color: #ef4444; }
.badge-admin { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Forms */
.admin-form-group { margin-bottom: 16px; }
.admin-form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: inherit;
}
.admin-input:focus { border-color: var(--accent); }
.admin-textarea { resize: vertical; min-height: 100px; }

.admin-btn-primary {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.admin-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* Info rows */
.admin-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.admin-info-row:last-child { border-bottom: none; }
.admin-info-row span { color: var(--text2); }
.admin-info-row strong { color: var(--text); }

/* Two column layout */
.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Count badge */
.admin-count-badge {
  background: rgba(124,58,237,0.15);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

/* Announcement items */
.ann-item {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.ann-item.type-info { background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.2); }
.ann-item.type-success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); }
.ann-item.type-warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); }
.ann-item.type-danger { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); }
.ann-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ann-body { font-size: 12px; color: var(--text2); }
.ann-del-btn { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 16px; padding: 2px; flex-shrink: 0; }
.ann-del-btn:hover { color: #ef4444; }

/* Log action badges */
.log-action {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(124,58,237,0.15);
  color: var(--accent);
}

/* User avatar in table */
.admin-user-cell { display: flex; align-items: center; gap: 10px; }
.admin-user-ava {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
}

/* Admin check-up refresh */
.admin-pro-layout{background:
  radial-gradient(circle at 18% 8%,rgba(124,58,237,.14),transparent 34%),
  radial-gradient(circle at 84% 18%,rgba(37,99,235,.12),transparent 34%),
  var(--bg);color:var(--text)}
.admin-pro-sidebar{background:rgba(15,23,42,.78);backdrop-filter:blur(18px);border-right:1px solid rgba(148,163,184,.16)}
.admin-pro-main{padding:24px;scrollbar-width:thin}
.admin-line-icon{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(124,58,237,.12);color:#a78bfa;flex-shrink:0}
.admin-nav-item.active .admin-line-icon{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}
.admin-hero{display:flex;align-items:stretch;justify-content:space-between;gap:20px;padding:28px;margin-bottom:22px;border:1px solid rgba(148,163,184,.16);border-radius:18px;background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(30,41,59,.72));box-shadow:0 24px 70px rgba(0,0,0,.24);position:relative;overflow:hidden}
.admin-hero:before{content:"";position:absolute;inset:auto -80px -120px auto;width:280px;height:280px;background:radial-gradient(circle,rgba(124,58,237,.22),transparent 66%);pointer-events:none}
.admin-eyebrow{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(124,58,237,.14);color:#c4b5fd;font-size:12px;font-weight:700;margin-bottom:12px}
.admin-hero h1{font-size:34px;line-height:1.05;margin:0 0 10px;letter-spacing:0;color:#fff}
.admin-hero p{max-width:680px;margin:0;color:var(--text2);font-size:15px;line-height:1.6}
.admin-status-card{min-width:210px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(2,6,23,.42);padding:18px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.admin-status-card strong{font-size:15px;color:#fff}.admin-status-card small{color:var(--text3)}
.admin-status-dot{width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.12);display:block;margin-bottom:6px}
.admin-status-card.is-offline .admin-status-dot{background:#f59e0b;box-shadow:0 0 0 6px rgba(245,158,11,.14)}
.admin-grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:20px}
.admin-table-wrap{overflow-x:auto}.admin-muted{color:var(--text3)!important;font-size:12px}.admin-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-chip-btn{border:1px solid var(--border);background:var(--bg3);color:var(--text2);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.admin-chip-btn:hover{border-color:rgba(124,58,237,.55);color:#fff}
.admin-provider-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:13px}
.admin-provider-row:last-child{border-bottom:0}.admin-provider-row span{color:var(--text2)}.admin-provider-row strong{color:#fff}
.admin-model-stats .admin-stat-card{display:block}.admin-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:16px;max-height:560px;overflow:auto}
.admin-model-card{text-align:left;border:1px solid var(--border);border-radius:12px;background:rgba(15,23,42,.72);color:var(--text);padding:13px;cursor:pointer;display:flex;flex-direction:column;gap:5px;min-height:76px;transition:transform .16s,border-color .16s,background .16s}
.admin-model-card strong{font-size:13px;line-height:1.25}.admin-model-card span{font-size:11px;color:var(--text3)}
.admin-model-card:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.6)}.admin-model-card.on{background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(37,99,235,.09));border-color:rgba(16,185,129,.46)}
.admin-help{color:var(--text2);font-size:13px;line-height:1.55;margin:0 0 16px}.admin-inline-msg{display:none;margin-top:12px;font-size:13px}
.admin-mini-select{min-width:132px;background:rgba(15,23,42,.85);border:1px solid var(--border);border-radius:9px;color:var(--text);padding:7px 9px;font-size:12px;outline:none}
.admin-mini-select:focus{border-color:rgba(124,58,237,.65)}
.membership-code-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--border);border-radius:12px;background:rgba(15,23,42,.58);margin-bottom:10px}
.membership-code-item strong{display:block;font-size:14px;color:#fff;letter-spacing:.3px}.membership-code-item span,.membership-code-item small{display:block;color:var(--text3);font-size:12px;margin-top:4px}
.membership-code-item.passive{opacity:.55;background:rgba(15,23,42,.32)}
.admin-modal{position:fixed;inset:0;background:rgba(2,6,23,.72);z-index:9999;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.admin-modal-box{width:360px;max-width:calc(100vw - 24px);background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.42)}
.admin-modal-box h3{margin:0 0 10px}.admin-modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.admin-cancel-btn{padding:11px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text);cursor:pointer;font-weight:700}
.admin-cancel-btn:hover{background:var(--bg3)}

/* Admin and chat polish v24 */
.chat-wrap{background:
  radial-gradient(circle at 18% 8%,rgba(124,58,237,.12),transparent 30%),
  linear-gradient(180deg,rgba(15,23,42,.72),rgba(2,6,23,.86))}
.chat-smartbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;animation:softRise .35s ease}
.chat-action-pill{border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.72);color:var(--text2);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.chat-action-pill:hover{transform:translateY(-1px);border-color:rgba(124,58,237,.62);background:rgba(124,58,237,.16);color:#fff}
.chat-action-pill.primary{background:linear-gradient(135deg,#7c3aed,#2563eb);border-color:transparent;color:#fff;box-shadow:0 10px 28px rgba(37,99,235,.22)}
.msg-row{animation:messageIn .22s ease both}
.msg-row.assistant .msg-body{box-shadow:0 12px 34px rgba(2,6,23,.16)}
.msg-row .msg-body{transition:transform .18s ease,border-color .18s ease}
.msg-row:hover .msg-body{transform:translateY(-1px);border-color:rgba(124,58,237,.36)}
.msg-text:has(.typing){position:relative;overflow:hidden}
.msg-text:has(.typing)::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmer 1.25s linear infinite}
.admin-btn-detail{background:rgba(59,130,246,.15);color:#93c5fd;border-color:rgba(59,130,246,.28)}
.admin-user-ava.big{width:52px;height:52px;font-size:20px;box-shadow:0 12px 36px rgba(124,58,237,.24)}
.admin-user-detail-box{width:min(760px,calc(100vw - 24px));padding:0;overflow:hidden}
.admin-detail-head{display:flex;align-items:center;gap:14px;padding:22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(37,99,235,.09))}
.admin-detail-head h3{margin:0 0 4px;font-size:20px}.admin-detail-head p{margin:0;color:var(--text3);font-size:13px}
.admin-icon-close{margin-left:auto;width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.64);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.admin-icon-close:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.38)}
.admin-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:18px 22px}
.admin-detail-metric{border:1px solid var(--border);border-radius:14px;background:rgba(15,23,42,.6);padding:14px;min-height:78px}
.admin-detail-metric span{display:block;color:var(--text3);font-size:12px;margin-bottom:8px}.admin-detail-metric strong{display:block;color:#fff;font-size:18px;line-height:1.15}
.admin-detail-metric.hot{background:linear-gradient(135deg,rgba(124,58,237,.18),rgba(16,185,129,.08));border-color:rgba(124,58,237,.38)}
.admin-detail-note{margin:0 22px 14px;padding:12px 14px;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(2,6,23,.26);color:var(--text2);font-size:13px;line-height:1.5}
.admin-detail-actions{display:flex;gap:10px;flex-wrap:wrap;padding:0 22px 18px}
.admin-detail-timeline{padding:18px 22px 22px;border-top:1px solid var(--border);background:rgba(2,6,23,.22)}
.admin-detail-timeline h4{margin:0 0 10px;font-size:14px}.admin-detail-timeline div{display:grid;grid-template-columns:120px 120px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid rgba(148,163,184,.12);font-size:12px}
.admin-detail-timeline div:last-child{border-bottom:0}.admin-detail-timeline span{color:var(--text3)}.admin-detail-timeline strong{color:#fff}.admin-detail-timeline em{color:var(--text2);font-style:normal}
.admin-card,.admin-stat-card,.admin-model-card,.membership-code-item{animation:softRise .32s ease both}
@keyframes softRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes messageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Responsive */
@media (max-width:768px) {
  .admin-sidebar { width: 60px; min-width: 60px; }
  .admin-sidebar .admin-brand-title,.admin-sidebar .admin-brand-sub,.admin-nav-item span:not(.admin-nav-icon),.admin-nav-badge,.admin-exit-btn span:last-child,.admin-sidebar-header div:last-child { display: none; }
  .admin-nav-item { justify-content: center; padding: 12px; }
  .admin-exit-btn { justify-content: center; }
  .admin-two-col { grid-template-columns: 1fr; }
  .admin-tab { padding: 16px; }
  .admin-pro-main{padding:12px}.admin-hero{flex-direction:column;padding:20px}.admin-hero h1{font-size:26px}.admin-grid-2{grid-template-columns:1fr}.admin-model-grid{grid-template-columns:1fr}
  .admin-detail-grid{grid-template-columns:1fr 1fr}.admin-detail-timeline div{grid-template-columns:1fr}.chat-smartbar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.chat-action-pill{white-space:nowrap}
}