/* ═══════════════════════════════════════════════════════════════
   VANNIBEL AI — assets/css/app.css
   Same visual language as Vannibel Crypto (navy→blue gradients,
   gold accents, glass cards, Inter), extended to a full desktop
   workspace:  ≥ 900px sidebar layout · < 900px mobile app shell
   ═══════════════════════════════════════════════════════════════ */
:root{
  --deep:#05112a; --navy:#0d1f5c; --navy2:#0B194A; --blue:#1a3a8f; --brand:#2563EB; --indigo:#4f46e5;
  --gold:#f5c518; --gold-d:#d4a800; --gold-l:#ffe066;
  --bg:#f4f6fb; --card:#fff; --card2:#f8faff; --brd:#e4ebfa; --brd2:#c7d2fe;
  --txt:#0f1b3d; --sub:#64748b; --muted:#94a3b8;
  --ok:#059669; --warn:#d97706; --danger:#dc2626; --purple:#7c3aed; --teal:#0d9488; --pink:#db2777;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --side-w:258px; --tab-h:66px; --r:18px;
  --sh:0 6px 24px rgba(13,31,92,.07); --sh-lg:0 14px 44px rgba(13,31,92,.13);
  --grad-hd:linear-gradient(145deg,var(--deep) 0%,var(--navy) 40%,#1a2f80 70%,var(--brand) 100%);
  --grad-btn:linear-gradient(135deg,var(--navy),var(--brand));
  --grad-gold:linear-gradient(135deg,var(--gold-d),var(--gold));
}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:14px;line-height:1.5;}
img,svg,video,canvas{max-width:100%;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:inherit;}
p,li,td,th,h1,h2,h3,h4{overflow-wrap:anywhere;}
::selection{background:rgba(245,197,24,.32);}
.ai-ic{flex-shrink:0;display:block;}
.ai-skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy);padding:.6rem 1rem;z-index:99999;font-weight:800;border-radius:0 0 10px 0;}
.ai-skip:focus{left:0;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:6px;}
.ai-noscroll{scrollbar-width:none;}.ai-noscroll::-webkit-scrollbar{display:none;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ═════════ SHELL ═════════ */
.ai-shell{min-height:100vh;min-height:100dvh;}
.ai-main{min-width:0;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 20px);}
.no-tabbar .ai-main{padding-bottom:0;}

/* Sidebar — desktop only */
.ai-side{display:none;}
@media(min-width:900px){
  .ai-side{
    display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:50;
    background:linear-gradient(175deg,var(--deep) 0%,var(--navy) 55%,#122a78 100%);
    color:#fff;padding:1.1rem .85rem 1rem;overflow:hidden;
  }
  .ai-side::before{content:'';position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:32px 32px;}
  .ai-side-glow{position:absolute;top:-90px;right:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.18),transparent 70%);pointer-events:none;}
  .ai-main{margin-left:var(--side-w);padding-bottom:2.5rem;}
  .no-tabbar .ai-main{padding-bottom:0;}
}
.ai-brand{position:relative;display:flex;align-items:center;gap:.6rem;padding:.2rem .45rem 1.1rem;}
.ai-brand b{display:block;font-size:15px;font-weight:900;letter-spacing:.07em;line-height:1;color:#fff;}
.ai-brand small{display:block;font-size:8.5px;font-weight:800;color:var(--gold);letter-spacing:.15em;text-transform:uppercase;margin-top:3px;}
.ai-logomark{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold-d),var(--gold-l));color:var(--navy);box-shadow:0 2px 12px rgba(245,197,24,.4);}
.ai-logomark.sm{width:28px;height:28px;border-radius:9px;}
.ai-logomark.sm .ai-ic{width:14px;height:14px;}
.ai-logomark.lg{width:58px;height:58px;border-radius:18px;}
.ai-logomark.lg .ai-ic{width:28px;height:28px;}
.ai-side-nav{position:relative;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px;}
.ai-side-nav::-webkit-scrollbar{display:none;}
.ai-side-lbl{margin:.95rem .6rem .35rem;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.35);}
.ai-side-link{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:11px;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);transition:background .15s,color .15s;position:relative;}
.ai-side-link:hover{background:rgba(255,255,255,.07);color:#fff;}
.ai-side-link.on{background:rgba(255,255,255,.11);color:#fff;font-weight:700;}
.ai-side-link.on::before{content:'';position:absolute;left:-.85rem;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--gold);}
.ai-side-link.on .ai-ic{color:var(--gold);}
.ai-side-link.is-soon{opacity:.5;cursor:default;}
.ai-side-link.is-soon:hover{background:none;color:rgba(255,255,255,.72);}
.ai-side-link em{margin-left:auto;font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.14rem .42rem;border-radius:20px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);}
.ai-side-credits{position:relative;display:block;margin:.8rem 0 .7rem;padding:.85rem .95rem;border-radius:15px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);transition:.15s;}
.ai-side-credits:hover{background:rgba(255,255,255,.1);border-color:rgba(245,197,24,.4);}
.ai-side-credits-l{display:flex;align-items:center;gap:.35rem;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.ai-side-credits b{display:block;font-size:24px;font-weight:900;color:#fff;letter-spacing:-.5px;margin:.2rem 0 .1rem;font-variant-numeric:tabular-nums;}
.ai-side-credits small{font-size:10.5px;color:rgba(255,255,255,.5);}
.ai-side-user{position:relative;display:flex;align-items:center;gap:.6rem;padding:.7rem .2rem 0;border-top:1px solid rgba(255,255,255,.09);}
.ai-side-user-b{flex:1;min-width:0;line-height:1.25;}
.ai-side-user-b b{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-side-user-b small{display:block;font-size:10.5px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-avatar{width:34px;height:34px;border-radius:11px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12.5px;color:var(--navy);background:linear-gradient(135deg,var(--gold-d),var(--gold-l));}
.ai-iconbtn{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;transition:.15s;}
.ai-side .ai-iconbtn{color:rgba(255,255,255,.6);}
.ai-side .ai-iconbtn:hover{background:rgba(255,255,255,.1);color:#fff;}

/* Bottom tab bar — mobile only (crypto style) */
.ai-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--brd);
  display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 -4px 24px rgba(13,31,92,.07);}
.ai-tabbar.is-admin{grid-template-columns:repeat(7,1fr);}
.ai-tabbar.is-admin .ai-tab span{font-size:8.5px;}
@media(min-width:900px){.ai-tabbar{display:none;}}
.no-tabbar .ai-tabbar{display:none;}
.ai-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;font-size:9.5px;font-weight:700;color:var(--muted);position:relative;}
.ai-tab.on{color:var(--navy);}
.ai-tab.on::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--gold);}
.ai-tab:active{transform:scale(.92);}
.ai-tab-fab{display:flex;align-items:center;justify-content:center;position:relative;}
.ai-tab-fab span{position:absolute;top:-17px;width:52px;height:52px;border-radius:17px;background:var(--grad-btn);color:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(13,31,92,.34);border:3px solid #fff;}
.ai-tab-fab small{position:absolute;bottom:9px;font-size:9.5px;font-weight:800;color:var(--navy);}

/* Notice banner */
.ai-banner{display:flex;align-items:center;gap:.55rem;background:#fffbeb;border-bottom:1px solid #fde68a;color:#92400e;font-size:12.5px;font-weight:600;padding:.6rem 1.1rem;}

/* ═════════ HERO (home) ═════════ */
.ai-hero{position:relative;overflow:hidden;background:var(--grad-hd);color:#fff;border-radius:0 0 30px 30px;padding:calc(env(safe-area-inset-top,0px) + .9rem) 1.1rem 1.3rem;}
.ai-hero::before{content:'';position:absolute;top:-70px;right:-80px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.22) 0%,transparent 70%);pointer-events:none;}
.ai-hero::after{content:'';position:absolute;bottom:-60px;left:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.32) 0%,transparent 70%);pointer-events:none;}
.ai-grid-tex{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;}
.ai-hero > *{position:relative;z-index:2;}
.ai-mbar{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;}
.ai-mbar .ai-brand{padding:0;}
.ai-mbar .ai-brand b{font-size:15px;}
.ai-mbar-r{margin-left:auto;display:flex;gap:.4rem;}
.ai-hd-icon{width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;transition:.15s;}
.ai-hd-icon:hover{background:rgba(255,255,255,.18);}
@media(min-width:900px){
  .ai-mbar{display:none;}
  .ai-hero{margin:1.25rem 1.5rem 0;border-radius:28px;padding:2rem 2.1rem 1.9rem;}
}
.ai-hero-grid{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr);}
.ai-hero-grid > *{min-width:0;}
@media(min-width:1180px){.ai-hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:1.6rem;align-items:stretch;}}
.ai-greet{display:flex;align-items:center;gap:.4rem;font-size:12px;color:rgba(255,255,255,.6);font-weight:600;}
.ai-greet b{color:#fff;font-weight:800;}
.ai-hero h1{margin:.35rem 0 1rem;font-size:23px;font-weight:900;letter-spacing:-.6px;line-height:1.16;}
.ai-hero h1 span{color:var(--gold);}
@media(min-width:900px){.ai-hero h1{font-size:31px;margin:.45rem 0 1.25rem;}}

/* Prompt box (glass) */
.ai-prompt{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);border-radius:20px;padding:.45rem;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 32px rgba(0,0,0,.2);transition:.2s;}
.ai-prompt:focus-within{border-color:rgba(245,197,24,.6);box-shadow:0 0 0 4px rgba(245,197,24,.14),0 10px 32px rgba(0,0,0,.22);}
.ai-prompt textarea{display:block;width:100%;min-height:62px;max-height:180px;resize:none;border:none;outline:none;background:transparent;color:#fff;font-size:15px;line-height:1.5;padding:.65rem .75rem .3rem;}
.ai-prompt textarea::placeholder{color:rgba(255,255,255,.45);}
.ai-prompt-ft{display:flex;align-items:center;gap:.5rem;padding:.25rem .25rem 0;}
.ai-prompt-tool{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.85);font-size:11.5px;font-weight:700;padding:.42rem .7rem;border-radius:20px;cursor:pointer;}
.ai-prompt-tool select{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:inherit;font:inherit;outline:none;cursor:pointer;padding-right:.1rem;}
.ai-prompt-tool select option{color:var(--txt);}
.ai-send-gold{margin-left:auto;width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;background:var(--grad-gold);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(245,197,24,.35);transition:.15s;}
.ai-send-gold:hover{transform:translateY(-1px);filter:brightness(1.05);}
.ai-send-gold:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.ai-chips{display:flex;gap:.45rem;overflow-x:auto;margin-top:.85rem;padding-bottom:.15rem;}
.ai-chip-s{flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:.42rem .75rem;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.15s;}
.ai-chip-s:hover{background:rgba(255,255,255,.14);color:#fff;}

/* Credits glass card */
.ai-credit-card{position:relative;overflow:hidden;border-radius:20px;padding:1.05rem 1.1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(0,0,0,.18);display:flex;flex-direction:column;}
.ai-credit-card::before{content:'';position:absolute;top:-45px;right:-45px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.22),transparent 70%);}
.ai-credit-card > *{position:relative;}
.ai-cc-wm{position:absolute;right:-6px;top:-14px;font-size:58px;font-weight:900;opacity:.035;letter-spacing:-2px;}
.ai-cc-l{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:.35rem;}
.ai-cc-v{font-size:34px;font-weight:900;letter-spacing:-.8px;line-height:1.05;margin:.3rem 0 .15rem;font-variant-numeric:tabular-nums;}
.ai-cc-v small{font-size:13px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:0;margin-left:.25rem;}
.ai-cc-split{display:flex;gap:.4rem;flex-wrap:wrap;margin:.45rem 0 .85rem;}
.ai-tag{font-size:10px;font-weight:700;padding:.22rem .55rem;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);white-space:nowrap;}
.ai-tag.gold{background:rgba(245,197,24,.16);border-color:rgba(245,197,24,.35);color:var(--gold-l);}
.ai-cc-acts{display:flex;gap:.45rem;margin-top:auto;}
.ai-cc-est{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.55;margin:0 0 .9rem;}
.ai-cc-est b{color:#fff;}
.ai-cc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.55rem .5rem;border-radius:11px;font-size:11.5px;font-weight:800;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;transition:.15s;}
.ai-cc-btn.gold{background:var(--gold);border-color:var(--gold-d);color:var(--navy);}
.ai-cc-btn:hover{filter:brightness(1.08);}

/* ═════════ PAGE CONTENT ═════════ */
.ai-wrap{padding:0 1.1rem;}
@media(min-width:900px){.ai-wrap{padding:0 1.5rem;max-width:1320px;}}
.ai-sec{margin:1.35rem 0 0;}
.ai-sh{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem;}
.ai-sh h2{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:.45rem;}
.ai-sh a,.ai-sh button.link{font-size:12px;font-weight:700;color:var(--brand);background:none;border:none;cursor:pointer;padding:0;}
.ai-card{background:var(--card);border:1.5px solid var(--brd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;}
.ai-card-pad{padding:1.05rem 1.1rem;}
.ai-card-hd{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--brd);background:var(--card2);}
.ai-card-hd h3{margin:0;font-size:13.5px;font-weight:800;}
.ai-cols{display:grid;gap:1.1rem;}
@media(min-width:1100px){.ai-cols.c3{grid-template-columns:1.3fr 1fr 1fr;}.ai-cols.c2{grid-template-columns:1fr 1fr;}.ai-cols.c21{grid-template-columns:2fr 1fr;}}
@media(min-width:900px) and (max-width:1099px){.ai-cols.c3{grid-template-columns:1fr 1fr;}.ai-cols.c3 > :first-child{grid-column:1/-1;}.ai-cols.c2{grid-template-columns:1fr 1fr;}}

/* Tool cards */
.ai-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
@media(min-width:640px){.ai-tools{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1180px){.ai-tools{grid-template-columns:repeat(5,minmax(0,1fr));gap:.85rem;}}
.ai-tool{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.55rem;background:var(--card);border:1.5px solid var(--brd);border-radius:18px;padding:1rem;transition:.18s;min-height:150px;}
.ai-tool::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 55%,rgba(37,99,235,.05));}
a.ai-tool:hover{border-color:var(--brd2);transform:translateY(-3px);box-shadow:0 12px 30px rgba(37,99,235,.12);}
a.ai-tool:active{transform:scale(.98);}
.ai-tool-ic{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(13,31,92,.18);}
.ai-tool b{font-size:13.5px;font-weight:800;}
.ai-tool p{margin:0;font-size:11.5px;color:var(--sub);line-height:1.5;}
.ai-tool-go{margin-top:auto;display:inline-flex;align-items:center;gap:.25rem;font-size:11px;font-weight:800;color:var(--brand);}
.ai-tool.is-soon{opacity:.72;}
.ai-tool.is-soon .ai-tool-ic{filter:grayscale(.35);opacity:.85;}
.ai-soon{position:absolute;top:.75rem;right:.75rem;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .5rem;border-radius:20px;background:#eef2ff;color:var(--indigo);border:1px solid #e0e7ff;}
.t-chat{background:linear-gradient(135deg,#1e40af,#3b82f6);}
.t-code{background:linear-gradient(135deg,#0f172a,#334155);}
.t-pen{background:linear-gradient(135deg,#7c3aed,#a78bfa);}
.t-image{background:linear-gradient(135deg,#db2777,#f472b6);}
.t-globe{background:linear-gradient(135deg,#0d9488,#2dd4bf);}

/* List rows */
.ai-row{display:flex;align-items:center;gap:.75rem;padding:.78rem 1.1rem;border-bottom:1px solid var(--brd);transition:background .12s;}
.ai-row:last-child{border-bottom:none;}
a.ai-row:hover{background:var(--card2);}
.ai-row-ic{width:38px;height:38px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ai-row-b{flex:1;min-width:0;}
.ai-row-t{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-row-m{display:block;font-size:11px;color:var(--muted);margin-top:1px;}
.ai-row-r{flex-shrink:0;text-align:right;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;}
.ic-blue{background:#eff6ff;color:#1d4ed8;}.ic-slate{background:#f1f5f9;color:#0f172a;}.ic-green{background:#ecfdf5;color:var(--ok);}
.ic-red{background:#fef2f2;color:var(--danger);}.ic-gold{background:#fffbeb;color:#b45309;}.ic-purple{background:#f5f3ff;color:var(--purple);}
.pos{color:var(--ok);}.neg{color:var(--txt);}

/* Stats */
.ai-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;}
.ai-stat{background:var(--card);border:1.5px solid var(--brd);border-radius:15px;padding:.85rem .7rem;}
.ai-stat-v{font-size:20px;font-weight:900;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.ai-stat-l{font-size:9.5px;font-weight:700;color:var(--muted);margin-top:.3rem;letter-spacing:.05em;text-transform:uppercase;}
.ai-stat-s{font-size:11px;color:var(--sub);margin-top:.25rem;}
.ai-meter{height:6px;border-radius:6px;background:#e8edf8;overflow:hidden;margin-top:.55rem;}
.ai-meter i{display:block;height:100%;border-radius:6px;background:var(--grad-btn);}

/* Empty state */
.ai-empty{text-align:center;padding:2rem 1.2rem;}
.ai-empty-ic{width:56px;height:56px;border-radius:18px;background:var(--card2);border:1.5px solid var(--brd);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;color:var(--brand);}
.ai-empty-t{margin:0 0 .25rem;font-size:14px;font-weight:800;}
.ai-empty-p{margin:0 auto;font-size:12px;color:var(--sub);line-height:1.6;max-width:300px;}
.ai-empty .ai-btn{margin-top:1rem;}

/* ═════════ BUTTONS / FORMS ═════════ */
.ai-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:none;cursor:pointer;font-size:13px;font-weight:800;padding:.78rem 1.15rem;border-radius:13px;transition:.15s;background:var(--grad-btn);color:#fff;box-shadow:0 6px 18px rgba(13,31,92,.2);white-space:nowrap;}
.ai-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.ai-btn:active{transform:scale(.97);}
.ai-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none;}
.ai-btn.block{width:100%;}
.ai-btn.gold{background:var(--grad-gold);color:var(--navy);box-shadow:0 6px 18px rgba(245,197,24,.3);}
.ai-btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--brd);box-shadow:none;}
.ai-btn.ghost:hover{border-color:var(--brd2);background:var(--card2);}
.ai-btn.danger{background:linear-gradient(135deg,#b91c1c,var(--danger));box-shadow:0 6px 18px rgba(220,38,38,.2);}
.ai-btn.sm{font-size:12px;padding:.5rem .85rem;border-radius:10px;}
.ai-btn .spin{width:15px;height:15px;border-radius:50%;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:aiSpin .7s linear infinite;display:none;}
.ai-btn.ghost .spin{border-color:rgba(13,31,92,.2);border-top-color:var(--navy);}
.ai-btn.loading .spin{display:block;}
.ai-btn.loading .ai-ic{display:none;}
@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-form{display:flex;flex-direction:column;gap:1rem;}
.ai-fg{display:flex;flex-direction:column;gap:.32rem;}
.ai-lbl{font-size:12px;font-weight:800;}
.ai-hint{font-size:11px;color:var(--muted);line-height:1.5;}
.ai-in,.ai-sel,.ai-ta{width:100%;font-size:13.5px;font-weight:500;color:var(--txt);background:#fff;border:1.5px solid var(--brd);border-radius:12px;padding:.7rem .85rem;outline:none;transition:border-color .15s,box-shadow .15s;line-height:1.4;}
.ai-ta{min-height:96px;resize:vertical;}
.ai-in:focus,.ai-sel:focus,.ai-ta:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(37,99,235,.13);}
.ai-sel{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.2rem;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;}
.ai-in.sm,.ai-sel.sm{padding:.5rem .7rem;font-size:12.5px;border-radius:10px;}
.ai-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem;}
@media(max-width:520px){.ai-two{grid-template-columns:minmax(0,1fr);}}
.ai-seg{display:inline-flex;gap:.25rem;background:var(--card2);border:1.5px solid var(--brd);border-radius:12px;padding:.22rem;}
.ai-seg button{border:none;background:none;cursor:pointer;font-size:11.5px;font-weight:800;color:var(--sub);padding:.4rem .7rem;border-radius:9px;transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;}
.ai-seg button.on{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(13,31,92,.1);}
.ai-seg button small{font-weight:700;color:var(--muted);font-size:10px;}
.ai-tgl-row{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;border-bottom:1px solid var(--brd);}
.ai-tgl-row:last-child{border-bottom:none;}
.ai-tgl-b{flex:1;min-width:0;}
.ai-tgl-t{font-size:13px;font-weight:800;}
.ai-tgl-d{font-size:11.5px;color:var(--sub);margin-top:2px;line-height:1.5;}
.ai-tgl{position:relative;width:46px;height:26px;flex-shrink:0;display:inline-block;}
.ai-tgl input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.ai-tgl i{position:absolute;inset:0;border-radius:26px;background:#cbd5e1;transition:.2s;}
.ai-tgl i::before{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.ai-tgl input:checked + i{background:var(--ok);}
.ai-tgl input:checked + i::before{transform:translateX(20px);}
.ai-tgl input:focus-visible + i{outline:2.5px solid var(--brand);outline-offset:2px;}
.ai-tgl input:disabled + i{opacity:.5;}

/* Badges */
.ai-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:10.5px;font-weight:800;padding:.18rem .5rem;border-radius:20px;white-space:nowrap;}
.b-ok{background:#dcfce7;color:#15803d;}.b-warn{background:#fef9c3;color:#92400e;}.b-err{background:#fee2e2;color:#b91c1c;}
.b-info{background:#dbeafe;color:#1d4ed8;}.b-mute{background:#f1f5f9;color:#64748b;}.b-purple{background:#ede9fe;color:#6d28d9;}

/* Notices */
.ai-notice{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem .95rem;border-radius:14px;font-size:12.5px;line-height:1.55;border:1.5px solid;}
.ai-notice b{display:block;margin-bottom:.1rem;}
.ai-notice.warn{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.ai-notice.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af;}
.ai-notice.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;}
.ai-notice.err{background:#fef2f2;border-color:#fecaca;color:#991b1b;}

/* Tables */
.ai-table-wrap{overflow-x:auto;}
.ai-table{width:100%;min-width:680px;border-collapse:collapse;font-size:12.5px;}
.ai-table td,.ai-table th{overflow-wrap:normal;word-break:normal;}
.ai-table-wrap{-webkit-overflow-scrolling:touch;}
.ai-table th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:.65rem 1rem;background:var(--card2);border-bottom:1px solid var(--brd);white-space:nowrap;}
.ai-table td{padding:.7rem 1rem;border-bottom:1px solid var(--brd);vertical-align:middle;}
.ai-table tr:last-child td{border-bottom:none;}
.ai-table tbody tr:hover{background:#fafbff;}
.ai-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ai-table .mono{font-family:var(--mono);font-size:11.5px;}

/* Page header (inner pages) */
.ai-phd{position:relative;overflow:hidden;background:var(--grad-hd);color:#fff;border-radius:0 0 26px 26px;padding:calc(env(safe-area-inset-top,0px) + .9rem) 1.1rem 1.2rem;}
.ai-phd::before{content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.2),transparent 70%);pointer-events:none;}
.ai-phd > *{position:relative;z-index:2;}
.ai-phd-row{display:flex;align-items:center;gap:.7rem;}
.ai-phd h1{margin:0;font-size:18px;font-weight:900;letter-spacing:-.3px;}
.ai-phd p{margin:.15rem 0 0;font-size:12px;color:rgba(255,255,255,.6);}
.ai-back{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;}
@media(min-width:900px){
  .ai-phd{margin:1.25rem 1.5rem 0;border-radius:24px;padding:1.5rem 1.8rem;}
  .ai-phd h1{font-size:24px;}
  .ai-phd .ai-back.m-only{display:none;}
}
.m-only{}
@media(min-width:900px){.m-only{display:none!important;}}
.d-only{display:none!important;}
@media(min-width:900px){.d-only{display:revert!important;}}

/* ═════════ CHAT ═════════ */
.is-chat .ai-main{height:100vh;height:100dvh;display:flex;flex-direction:column;}
.ai-chat{flex:1;min-height:0;display:flex;}
.ai-convs{display:none;}
@media(min-width:1180px){
  .ai-convs{display:flex;flex-direction:column;width:290px;flex-shrink:0;border-right:1px solid var(--brd);background:#fff;}
}
.ai-convs.open{display:flex;position:fixed;inset:0;z-index:120;width:auto;background:#fff;flex-direction:column;}
@media(min-width:900px){.ai-convs.open{left:var(--side-w);right:auto;width:320px;box-shadow:var(--sh-lg);}}
@media(min-width:1180px){.ai-convs.open{position:static;box-shadow:none;width:290px;}}
.ai-convs-hd{padding:1rem 1rem .7rem;border-bottom:1px solid var(--brd);display:flex;flex-direction:column;gap:.65rem;}
.ai-convs-top{display:flex;align-items:center;gap:.5rem;}
.ai-convs-top h2{margin:0;font-size:15px;font-weight:800;flex:1;}
.ai-search{position:relative;}
.ai-search .ai-ic{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted);}
.ai-search input.ai-in{padding-left:2.2rem;}
.ai-convs-list{flex:1;overflow-y:auto;padding:.5rem;}
.ai-conv{display:flex;align-items:center;gap:.55rem;padding:.6rem .65rem;border-radius:11px;cursor:pointer;color:var(--txt);transition:background .12s;position:relative;}
.ai-conv:hover{background:var(--card2);}
.ai-conv.on{background:#eef2ff;}
.ai-conv-b{flex:1;min-width:0;}
.ai-conv-t{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-conv-m{display:block;font-size:10.5px;color:var(--muted);}
.ai-conv .pin{color:var(--gold-d);}
.ai-conv-menu{opacity:0;transition:.12s;}
.ai-conv:hover .ai-conv-menu,.ai-conv.on .ai-conv-menu,.ai-conv-menu:focus-visible{opacity:1;}
@media(hover:none){.ai-conv-menu{opacity:1;}}
.ai-conv-grp{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.7rem .65rem .3rem;}

.ai-thread-wrap{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;}
.ai-chat-hd{display:flex;align-items:center;gap:.6rem;padding:calc(env(safe-area-inset-top,0px) + .7rem) .9rem .75rem;background:var(--grad-hd);color:#fff;position:relative;overflow:hidden;flex-shrink:0;}
.ai-chat-hd::before{content:'';position:absolute;top:-80px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.2),transparent 70%);pointer-events:none;}
.ai-chat-hd > *{position:relative;}
.ai-chat-hd .ai-iconbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;}
.ai-chat-hd .ai-iconbtn:hover{background:rgba(255,255,255,.18);}
.ai-chat-title{flex:1;min-width:0;}
.ai-chat-title b{display:block;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-chat-title small{display:block;font-size:10.5px;color:rgba(255,255,255,.55);font-weight:600;}
@media(min-width:900px){
  .ai-chat-hd{background:#fff;color:var(--txt);border-bottom:1px solid var(--brd);padding:.8rem 1.4rem;}
  .ai-chat-hd::before{display:none;}
  .ai-chat-hd .ai-iconbtn{background:var(--card2);border:1px solid var(--brd);color:var(--sub);}
  .ai-chat-hd .ai-iconbtn:hover{color:var(--navy);border-color:var(--brd2);}
  .ai-chat-title small{color:var(--muted);}
}
.ai-chip-bal{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;font-weight:800;padding:.32rem .6rem;border-radius:20px;background:rgba(245,197,24,.16);border:1px solid rgba(245,197,24,.4);color:var(--gold-l);white-space:nowrap;}
@media(min-width:900px){.ai-chip-bal{background:#fffbeb;border-color:#fde68a;color:#92400e;}}

.ai-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;}
.ai-thread-in{max-width:800px;margin:0 auto;padding:1.2rem 1rem 1.5rem;display:flex;flex-direction:column;gap:1.15rem;}
@media(min-width:900px){.ai-thread-in{padding:1.8rem 1.5rem 2rem;}}
.ai-msg{display:flex;gap:.7rem;animation:aiIn .25s ease both;}
@keyframes aiIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ai-msg.user{justify-content:flex-end;}
.ai-bubble{max-width:min(82%,640px);background:var(--grad-btn);color:#fff;padding:.7rem .95rem;border-radius:18px 18px 5px 18px;font-size:14px;line-height:1.55;white-space:pre-wrap;box-shadow:0 6px 18px rgba(13,31,92,.16);}
.ai-msg.bot .ai-logomark{margin-top:.1rem;}
.ai-msg-body{flex:1;min-width:0;}
.ai-msg-meta{display:flex;align-items:center;gap:.4rem;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:.25rem;}
.ai-msg-acts{display:flex;gap:.2rem;margin-top:.4rem;opacity:.85;}
.ai-msg-acts button{display:inline-flex;align-items:center;gap:.3rem;border:none;background:none;cursor:pointer;color:var(--muted);font-size:11px;font-weight:700;padding:.32rem .5rem;border-radius:8px;transition:.12s;}
.ai-msg-acts button:hover{background:#eef2ff;color:var(--navy);}
.ai-msg-flag{display:inline-flex;align-items:center;gap:.3rem;font-size:11px;font-weight:700;color:var(--warn);background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:.2rem .5rem;margin-top:.45rem;}
.ai-msg-flag.err{color:var(--danger);background:#fef2f2;border-color:#fecaca;}
.ai-typing{display:inline-flex;gap:4px;padding:.55rem 0;}
.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--brd2);animation:aiDot 1.2s infinite;}
.ai-typing i:nth-child(2){animation-delay:.15s;}.ai-typing i:nth-child(3){animation-delay:.3s;}
@keyframes aiDot{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1;background:var(--brand)}}
.ai-cursor::after{content:'';display:inline-block;width:7px;height:15px;background:var(--brand);margin-left:2px;vertical-align:-2px;border-radius:2px;animation:aiBlink 1s steps(2) infinite;}
@keyframes aiBlink{50%{opacity:0}}

/* Markdown */
.ai-md{font-size:14.5px;line-height:1.7;color:var(--txt);}
.ai-md > :first-child{margin-top:0;}
.ai-md > :last-child{margin-bottom:0;}
.ai-md p{margin:.55rem 0;}
.ai-md h1,.ai-md h2,.ai-md h3,.ai-md h4{margin:1.1rem 0 .45rem;line-height:1.3;font-weight:800;}
.ai-md h1{font-size:19px;}.ai-md h2{font-size:17px;}.ai-md h3{font-size:15.5px;}.ai-md h4{font-size:14.5px;}
.ai-md ul,.ai-md ol{margin:.5rem 0;padding-left:1.35rem;}
.ai-md li{margin:.22rem 0;}
.ai-md li::marker{color:var(--brand);}
.ai-md a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;}
.ai-md strong{font-weight:800;}
.ai-md blockquote{margin:.7rem 0;padding:.45rem .9rem;border-left:3px solid var(--gold);background:#fffdf3;border-radius:0 10px 10px 0;color:#57534e;}
.ai-md hr{border:none;height:1px;background:var(--brd);margin:1rem 0;}
.ai-md :not(pre) > code{font-family:var(--mono);font-size:.86em;background:#eef2ff;color:#3730a3;padding:.12em .4em;border-radius:6px;}
.ai-md .ai-tbl{overflow-x:auto;margin:.7rem 0;border:1.5px solid var(--brd);border-radius:12px;}
.ai-md table{border-collapse:collapse;width:100%;font-size:13px;}
.ai-md th{background:var(--card2);font-weight:800;text-align:left;}
.ai-md th,.ai-md td{padding:.5rem .75rem;border-bottom:1px solid var(--brd);}
.ai-md tr:last-child td{border-bottom:none;}
.ai-code{margin:.75rem 0;border-radius:14px;overflow:hidden;background:#0b1530;border:1px solid #1c2a52;box-shadow:0 6px 20px rgba(5,17,42,.18);}
.ai-code-hd{display:flex;align-items:center;justify-content:space-between;padding:.4rem .5rem .4rem .9rem;background:#0f1d42;border-bottom:1px solid #1c2a52;}
.ai-code-lang{font-family:var(--mono);font-size:11px;font-weight:700;color:#93a4d6;text-transform:lowercase;}
.ai-code-copy{display:inline-flex;align-items:center;gap:.3rem;border:none;cursor:pointer;background:rgba(255,255,255,.07);color:#cbd5f5;font-size:11px;font-weight:700;padding:.3rem .55rem;border-radius:7px;}
.ai-code-copy:hover{background:rgba(255,255,255,.14);color:#fff;}
.ai-code-copy.done{background:rgba(16,185,129,.2);color:#6ee7b7;}
.ai-code pre{margin:0;padding:.9rem 1rem;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:#e2e8f0;}
.ai-code pre code{font-family:inherit;background:none;padding:0;color:inherit;}

/* Composer */
.ai-composer-wrap{flex-shrink:0;padding:.6rem .75rem calc(.7rem + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(244,246,251,0),var(--bg) 30%);}
@media(min-width:900px){.ai-composer-wrap{padding:.6rem 1.5rem 1.2rem;}}
.ai-composer{max-width:800px;margin:0 auto;background:#fff;border:1.5px solid var(--brd);border-radius:20px;box-shadow:var(--sh-lg);padding:.4rem;transition:.15s;}
.ai-composer:focus-within{border-color:var(--brd2);box-shadow:0 0 0 4px rgba(37,99,235,.08),var(--sh-lg);}
.ai-composer textarea{display:block;width:100%;min-height:46px;max-height:220px;resize:none;border:none;outline:none;background:transparent;font-size:14.5px;line-height:1.5;padding:.6rem .7rem .35rem;color:var(--txt);}
.ai-composer textarea::placeholder{color:var(--muted);}
.ai-comp-ft{display:flex;align-items:center;gap:.4rem;padding:0 .15rem .1rem;flex-wrap:nowrap;}
.ai-comp-ft .ai-seg{border-radius:11px;}
.ai-comp-ft .ai-seg button{padding:.34rem .6rem;}
.ai-comp-tool{display:inline-flex;align-items:center;gap:.3rem;border:1.5px solid var(--brd);background:#fff;color:var(--sub);font-size:11.5px;font-weight:700;padding:.38rem .6rem;border-radius:10px;cursor:pointer;white-space:nowrap;}
.ai-comp-tool:hover{color:var(--navy);border-color:var(--brd2);}
.ai-comp-cost{font-size:10.5px;color:var(--muted);font-weight:700;margin-left:auto;white-space:nowrap;}
.ai-send{width:40px;height:40px;border-radius:12px;border:none;cursor:pointer;background:var(--grad-btn);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 5px 14px rgba(13,31,92,.25);transition:.15s;}
.ai-send:hover{filter:brightness(1.12);}
.ai-send:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.ai-send.is-stop{background:#0f172a;}
.ai-comp-note{max-width:800px;margin:.45rem auto 0;text-align:center;font-size:10.5px;color:var(--muted);}
.ai-lang-sel{max-width:140px;}

/* Chat empty state */
.ai-welcome{max-width:720px;margin:0 auto;padding:2.2rem 1rem 1rem;text-align:center;}
@media(min-width:900px){.ai-welcome{padding-top:4.5rem;}}
.ai-welcome h2{margin:.9rem 0 .35rem;font-size:22px;font-weight:900;letter-spacing:-.4px;}
.ai-welcome p{margin:0 auto;color:var(--sub);font-size:13.5px;max-width:460px;}
.ai-starters{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1.4rem;text-align:left;}
@media(min-width:620px){.ai-starters{grid-template-columns:1fr 1fr;}}
.ai-starter{display:flex;gap:.7rem;align-items:flex-start;background:#fff;border:1.5px solid var(--brd);border-radius:15px;padding:.85rem .9rem;cursor:pointer;transition:.15s;font:inherit;color:inherit;text-align:left;}
.ai-starter:hover{border-color:var(--brd2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(37,99,235,.1);}
.ai-starter b{display:block;font-size:12.5px;font-weight:800;}
.ai-starter span{display:block;font-size:11.5px;color:var(--sub);margin-top:.1rem;line-height:1.45;}
.ai-starter .ai-row-ic{width:34px;height:34px;border-radius:10px;}
.ai-codemodes{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:1rem;}

/* Menu popover */
.ai-pop{position:fixed;z-index:9500;min-width:190px;background:#fff;border:1.5px solid var(--brd);border-radius:14px;box-shadow:var(--sh-lg);padding:.35rem;animation:aiIn .15s ease;}
.ai-pop button{display:flex;align-items:center;gap:.55rem;width:100%;border:none;background:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--txt);padding:.55rem .65rem;border-radius:9px;text-align:left;}
.ai-pop button:hover{background:var(--card2);}
.ai-pop button.danger{color:var(--danger);}
.ai-pop button.danger:hover{background:#fef2f2;}

/* ═════════ CREDITS ═════════ */
.ai-bal-big{display:flex;align-items:baseline;gap:.4rem;margin-top:1rem;}
.ai-bal-big b{font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;}
.ai-bal-big span{font-size:13px;color:rgba(255,255,255,.55);font-weight:700;}
.ai-packs{display:grid;grid-template-columns:1fr;gap:.75rem;}
@media(min-width:640px){.ai-packs{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ai-pack{position:relative;background:#fff;border:1.5px solid var(--brd);border-radius:18px;padding:1.1rem;display:flex;flex-direction:column;gap:.35rem;transition:.18s;}
.ai-pack:hover{border-color:var(--brd2);box-shadow:0 12px 30px rgba(37,99,235,.1);}
.ai-pack.feat{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,197,24,.18);}
.ai-pack-badge{position:absolute;top:-10px;right:1rem;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .6rem;border-radius:20px;background:var(--grad-gold);color:var(--navy);}
.ai-pack-n{font-size:12px;font-weight:800;color:var(--sub);text-transform:uppercase;letter-spacing:.08em;}
.ai-pack-c{font-size:28px;font-weight:900;letter-spacing:-.6px;}
.ai-pack-c small{font-size:12px;color:var(--sub);font-weight:700;letter-spacing:0;}
.ai-pack-bonus{font-size:11.5px;font-weight:800;color:var(--ok);}
.ai-pack-p{font-size:15px;font-weight:800;margin:.35rem 0 .7rem;}
.ai-pack .ai-btn{margin-top:auto;}

/* ═════════ AUTH ═════════ */
.ai-auth{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:2rem 1.2rem;position:relative;overflow:hidden;
  background:linear-gradient(165deg,var(--deep) 0%,var(--navy) 42%,#15296b 72%,var(--blue) 100%);}
.ai-auth::before{content:'';position:absolute;top:-130px;right:-110px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.18),transparent 70%);}
.ai-auth::after{content:'';position:absolute;bottom:-150px;left:-120px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.28),transparent 70%);}
.ai-auth-in{position:relative;z-index:2;width:100%;max-width:420px;}
.ai-auth-brand{display:flex;justify-content:center;margin-bottom:1.3rem;}
.ai-auth h1{color:#fff;text-align:center;font-size:26px;font-weight:900;letter-spacing:-.6px;margin:0 0 .4rem;}
.ai-auth h1 span{color:var(--gold);}
.ai-auth-p{text-align:center;color:rgba(255,255,255,.6);font-size:13px;margin:0 0 1.5rem;line-height:1.6;}
.ai-auth-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:1.35rem 1.25rem;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 16px 48px rgba(0,0,0,.26);}
.ai-auth-card .ai-lbl{color:rgba(255,255,255,.75);}
.ai-auth-card .ai-in{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.17);color:#fff;}
.ai-auth-card .ai-in::placeholder{color:rgba(255,255,255,.35);}
.ai-auth-card .ai-in:focus{border-color:var(--gold);box-shadow:0 0 0 3.5px rgba(245,197,24,.16);background:rgba(255,255,255,.12);}
.ai-auth-sw{text-align:center;margin-top:1.1rem;font-size:12.5px;color:rgba(255,255,255,.55);}
.ai-auth-sw a{color:var(--gold);font-weight:800;}
.ai-auth-feats{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;}
.ai-auth-feats span{display:inline-flex;align-items:center;gap:.35rem;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);}
.ai-auth .ai-notice{margin-bottom:1rem;}

/* ═════════ TOASTS / MODAL ═════════ */
.ai-toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 14px);z-index:9999;display:flex;flex-direction:column;gap:.5rem;width:calc(100% - 2rem);max-width:420px;pointer-events:none;}
.no-tabbar .ai-toasts{bottom:calc(120px + env(safe-area-inset-bottom,0px));}
@media(min-width:900px){.ai-toasts{left:auto;right:1.5rem;transform:none;bottom:1.5rem;}}
.ai-toast{display:flex;align-items:flex-start;gap:.6rem;background:#0f1b3d;color:#fff;border-radius:14px;padding:.8rem .95rem;font-size:12.5px;font-weight:600;line-height:1.5;box-shadow:0 12px 34px rgba(0,0,0,.3);border-left:4px solid var(--brand);animation:aiToastIn .3s cubic-bezier(.2,1.2,.3,1);pointer-events:auto;}
.ai-toast.ok{border-left-color:#10b981;}.ai-toast.err{border-left-color:#ef4444;}.ai-toast.warn{border-left-color:#f59e0b;}
.ai-toast.out{animation:aiToastOut .25s forwards;}
@keyframes aiToastIn{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:none}}
@keyframes aiToastOut{to{opacity:0;transform:translateY(12px) scale(.96)}}
.ai-ov{position:fixed;inset:0;z-index:9000;background:rgba(5,17,42,.55);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;}
.ai-ov.open{display:flex;}
.ai-sheet{width:100%;max-width:560px;background:#fff;border-radius:24px 24px 0 0;padding:1.15rem 1.15rem calc(1.4rem + env(safe-area-inset-bottom,0px));max-height:88vh;max-height:88dvh;overflow-y:auto;animation:aiSheetUp .3s cubic-bezier(.2,1,.3,1);}
@media(min-width:700px){.ai-ov{align-items:center;}.ai-sheet{border-radius:22px;max-width:460px;animation:aiIn .2s ease;}}
@keyframes aiSheetUp{from{transform:translateY(100%)}to{transform:none}}
.ai-sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--brd2);margin:0 auto .9rem;}
@media(min-width:700px){.ai-sheet-grip{display:none;}}
.ai-sheet h3{margin:0 0 .3rem;font-size:17px;font-weight:900;}
.ai-sheet p.sub{margin:0 0 1rem;font-size:12.5px;color:var(--sub);line-height:1.55;}
.ai-sheet-acts{display:flex;gap:.6rem;margin-top:1.1rem;}
.ai-sheet-acts .ai-btn{flex:1;}

/* Skeleton */
.ai-skel{background:linear-gradient(90deg,#e8edf8 25%,#f3f6fc 50%,#e8edf8 75%);background-size:200% 100%;animation:aiShim 1.4s infinite;border-radius:8px;}
@keyframes aiShim{from{background-position:200% 0}to{background-position:-200% 0}}

/* Admin bits */
.ai-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;}
@media(min-width:900px){.ai-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ai-kpi{background:#fff;border:1.5px solid var(--brd);border-radius:16px;padding:1rem;}
.ai-kpi-l{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.35rem;}
.ai-kpi-v{font-size:24px;font-weight:900;margin-top:.35rem;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.ai-kpi-s{font-size:11.5px;color:var(--sub);margin-top:.15rem;}
.ai-bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding:.5rem 0 0;}
.ai-bars i{flex:1;min-width:3px;background:var(--brd2);border-radius:4px 4px 0 0;position:relative;transition:.15s;}
.ai-bars i:hover{background:var(--brand);}
.ai-bars i.err{background:#fecaca;}
.ai-bars-x{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:.35rem;}
.ai-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.d-ok{background:#10b981;}.d-warn{background:#f59e0b;}.d-down{background:#ef4444;}.d-off{background:#cbd5e1;}.d-idle{background:#93c5fd;}
.ai-keyrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.ai-keyrow .ai-in{flex:1;min-width:200px;font-family:var(--mono);}
.ai-mt{margin-top:1rem;}.ai-mt2{margin-top:1.5rem;}
.ai-muted{color:var(--muted);}.ai-sub{color:var(--sub);}
.ai-small{font-size:11.5px;color:var(--sub);line-height:1.55;}
.ai-flex{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.ai-between{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}

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

/* ═════════ SIGN-IN (passwordless) ═════════ */
.ai-auth-msg{display:flex;gap:.5rem;align-items:flex-start;background:rgba(239,68,68,.14);border:1px solid rgba(248,113,113,.4);color:#fecaca;border-radius:12px;padding:.65rem .8rem;font-size:12.5px;font-weight:600;line-height:1.5;margin-bottom:1rem;}
.ai-auth-msg.ok{background:rgba(16,185,129,.14);border-color:rgba(52,211,153,.4);color:#a7f3d0;}
.ai-auth-msg[hidden]{display:none;}
.ai-auth-tabs{display:flex;gap:.25rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:.25rem;margin-bottom:1.1rem;}
.ai-auth-tabs button{flex:1;border:none;background:none;color:rgba(255,255,255,.6);font-size:12.5px;font-weight:800;padding:.55rem;border-radius:10px;cursor:pointer;transition:.15s;}
.ai-auth-tabs button.on{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.18);}
.ai-google{display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%;background:#fff;color:#1f2937;border-radius:13px;padding:.82rem 1rem;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:.15s;}
.ai-google:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.24);}
.ai-or{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0;color:rgba(255,255,255,.4);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.ai-or::before,.ai-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14);}
.ai-auth-hint{display:block;font-size:11.5px;color:rgba(255,255,255,.5);text-align:center;margin:.2rem 0 0;line-height:1.55;}
.ai-auth-hint .ai-ic{display:inline-block;vertical-align:-1px;margin-right:.2rem;}
.ai-auth-back{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;color:var(--gold);font-size:12px;font-weight:700;cursor:pointer;padding:0;margin-bottom:.8rem;}
.ai-auth-h2{margin:0 0 .35rem;color:#fff;font-size:18px;font-weight:900;}
.ai-code-in{text-align:center;font-size:26px!important;font-weight:900!important;letter-spacing:.55em;padding-left:1.1rem!important;font-variant-numeric:tabular-nums;}
.ai-auth-resend{background:none;border:none;color:rgba(255,255,255,.65);font-size:12.5px;font-weight:700;cursor:pointer;padding:.3rem;}
.ai-auth-resend:not(:disabled):hover{color:var(--gold);}
.ai-auth-resend:disabled{opacity:.55;cursor:default;}
.ai-avatar.img{background:none;padding:0;overflow:hidden;}
.ai-avatar.img img{width:100%;height:100%;object-fit:cover;display:block;}

/* ═════════ TOOL PAGES (Writer · Image Studio · Website Builder) ═════════ */
button.ai-tab{border:none;background:none;font-family:inherit;cursor:pointer;padding:0;}
.ai-phd-tool{padding-bottom:1.05rem;}
.ai-phd-ic{width:40px;height:40px;border-radius:13px;flex-shrink:0;}
.ai-phd-tool p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:600px){.ai-phd-tool p{white-space:normal;}.ai-phd-tool .ai-phd-ic{display:none;}}
.ai-hd-btn{display:inline-flex;align-items:center;gap:.35rem;height:36px;padding:0 .7rem;border-radius:11px;flex-shrink:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:800;cursor:pointer;}
.ai-hd-btn:hover{background:rgba(255,255,255,.2);}
.ai-tool-ic.sm{width:32px;height:32px;border-radius:10px;}
.ai-tool-ic.xs{width:26px;height:26px;border-radius:8px;font-size:12px;font-weight:900;box-shadow:none;}

.ai-studio{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr);margin-top:1.1rem;align-items:start;}
@media(min-width:1180px){.ai-studio{grid-template-columns:400px minmax(0,1fr);gap:1.3rem;}}
@media(min-width:1180px){.ai-studio-form{position:sticky;top:1rem;max-height:calc(100vh - 2rem);display:flex;flex-direction:column;}
  .ai-studio-form > .ai-card-pad{overflow-y:auto;min-height:0;}}
.ai-studio-go{padding:.85rem 1.1rem 1rem;border-top:1px solid var(--brd);background:var(--card2);}
.ai-studio-go .ai-btn{font-size:14px;padding:.85rem 1rem;}
.ai-cost-pill{font-size:10.5px;font-weight:800;background:rgba(13,31,92,.12);padding:.12rem .45rem;border-radius:20px;margin-left:.2rem;}
.ai-step{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:12.5px;font-weight:800;color:var(--navy);}
.ai-step > span:first-child{width:21px;height:21px;border-radius:7px;background:var(--grad-btn);color:var(--gold);font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
* + .ai-step{margin-top:1.15rem;}
.ai-seg-full{display:flex;width:100%;}
.ai-seg-full button{flex:1;justify-content:center;flex-direction:column;gap:.05rem;padding:.48rem .4rem;}
.ai-seg-full button small{font-size:9.5px;}
.ai-more{border:1.5px dashed var(--brd);border-radius:12px;padding:.55rem .8rem;}
.ai-more > summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--sub);display:flex;align-items:center;gap:.4rem;list-style:none;}
.ai-more > summary::-webkit-details-marker{display:none;}
.ai-more[open]{padding-bottom:.9rem;}
.ai-more[open] > summary{color:var(--navy);}

/* Writer — templates */
.ai-tpls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;}
@media(min-width:560px) and (max-width:1179px){.ai-tpls{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ai-tpl{display:flex;align-items:center;gap:.45rem;text-align:left;border:1.5px solid var(--brd);background:#fff;border-radius:11px;padding:.5rem .6rem;font-size:11.8px;font-weight:700;color:var(--txt);cursor:pointer;transition:.12s;min-width:0;}
.ai-tpl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ai-tpl .ai-ic{color:var(--purple);}
.ai-tpl:hover{border-color:var(--brd2);background:var(--card2);}
.ai-tpl.on{border-color:var(--purple);background:#f5f3ff;color:#4c1d95;box-shadow:0 0 0 3px rgba(124,58,237,.1);}

/* Writer — document */
.ai-doc{display:flex;flex-direction:column;min-height:560px;}
@media(min-width:1180px){.ai-doc{min-height:calc(100vh - 2rem - 120px);}}
.ai-doc-bar{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--brd);}
.ai-doc-title{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15.5px;font-weight:800;color:var(--txt);padding:.3rem .2rem;border-radius:8px;}
.ai-doc-title:focus{background:var(--card2);}
.ai-save-st{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;}
.ai-save-st.ok{color:var(--ok);}.ai-save-st.err{color:var(--danger);}
.ai-doc-tools{display:flex;align-items:center;gap:.35rem;padding:.5rem .7rem;border-bottom:1px solid var(--brd);background:var(--card2);overflow-x:auto;}
.ai-tbtn{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--brd);background:#fff;color:var(--navy);font-size:12px;font-weight:800;padding:.42rem .65rem;border-radius:10px;cursor:pointer;white-space:nowrap;}
.ai-tbtn:hover:not(:disabled){border-color:var(--brd2);}
.ai-tbtn:disabled{opacity:.45;cursor:not-allowed;}
.ai-tbtn small{font-weight:700;color:var(--purple);}
.ai-tbtn-ai{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-color:#ddd6fe;color:#5b21b6;}
.ai-tbtn-sp{flex:1;}
.ai-doc-live{display:flex;align-items:center;gap:.55rem;padding:.55rem .9rem;background:#eff6ff;border-bottom:1px solid #bfdbfe;color:#1e40af;font-size:12.5px;font-weight:700;}
.ai-doc-live .ai-dot,.ai-bld-files .ai-dot,.ai-bstep-a.live .ai-dot{background:var(--brand);animation:aiPulse 1s infinite;}
@keyframes aiPulse{50%{opacity:.35;transform:scale(.75)}}
.ai-doc-live .ai-btn{margin-left:auto;}
.ai-doc-body{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;}
.ai-doc-empty{margin:auto;text-align:center;padding:3rem 1.5rem;max-width:380px;}
.ai-doc-preview{padding:1.4rem 1.5rem 2rem;overflow-wrap:anywhere;}
@media(min-width:900px){.ai-doc-preview{padding:2rem 2.6rem 3rem;}}
.ai-doc-preview table{display:block;overflow-x:auto;}
.ai-doc-edit{flex:1;min-height:480px;border:none;outline:none;resize:none;padding:1.2rem 1.4rem;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--txt);background:#fff;}
.ai-doc-ft{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .9rem;border-top:1px solid var(--brd);font-size:11px;font-weight:700;color:var(--sub);}

/* Drawer (drafts) */
.ai-drawer{position:fixed;inset:0;z-index:130;background:rgba(5,17,42,.45);opacity:0;pointer-events:none;transition:opacity .2s;}
.ai-drawer.open{opacity:1;pointer-events:auto;}
.ai-drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);background:#fff;display:flex;flex-direction:column;gap:.7rem;padding:calc(env(safe-area-inset-top,0px) + 1rem) 1rem 1rem;transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--sh-lg);}
.ai-drawer.open .ai-drawer-in{transform:none;}
.ai-drawer-list{flex:1;overflow-y:auto;margin:0 -.4rem;}
.ai-dl-row{display:flex;align-items:center;gap:.3rem;border-radius:12px;padding:0 .3rem 0 0;}
.ai-dl-row:hover,.ai-dl-row.on{background:var(--card2);}
.ai-dl-row.on{box-shadow:inset 3px 0 0 var(--purple);}
.ai-dl-open{flex:1;min-width:0;text-align:left;border:none;background:none;cursor:pointer;padding:.65rem .7rem;font-family:inherit;}
.ai-dl-open b{display:block;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt);}
.ai-dl-open small{display:block;font-size:11px;color:var(--muted);margin-top:1px;}
.ai-dl-row .ai-iconbtn{color:var(--sub);font-size:18px;font-weight:900;}

/* Tools sheet (mobile tab bar) */
.ai-tsheet{display:flex;flex-direction:column;gap:.45rem;margin:.6rem 0 .2rem;}
.ai-tsheet-i{display:flex;align-items:center;gap:.75rem;padding:.6rem .65rem;border:1.5px solid var(--brd);border-radius:14px;}
.ai-tsheet-i:active{background:var(--card2);}
.ai-tsheet-i .ai-tool-ic{width:40px;height:40px;border-radius:12px;}
.ai-tsheet-i b{display:block;font-size:13.5px;font-weight:800;}
.ai-tsheet-i small{display:block;font-size:11.5px;color:var(--sub);line-height:1.4;}

/* Image Studio */
.ai-drop{position:relative;border:2px dashed var(--brd2);border-radius:16px;background:var(--card2);cursor:pointer;transition:.15s;overflow:hidden;}
.ai-drop:hover,.ai-drop.over{border-color:var(--brand);background:#eff6ff;}
.ai-drop.loading{pointer-events:none;opacity:.6;}
.ai-drop.loading::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);background-size:200% 100%;animation:aiShim 1.1s infinite;}
.ai-drop-empty{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.4rem 1rem;text-align:center;color:var(--brand);}
.ai-drop-empty b{font-size:13px;color:var(--navy);}
.ai-drop-empty small{font-size:11px;color:var(--sub);line-height:1.5;}
.ai-drop-has{display:flex;align-items:center;gap:.8rem;padding:.6rem;}
.ai-drop-has img{width:84px;height:84px;object-fit:cover;border-radius:11px;background:#fff;}
.ai-ideas{display:flex;gap:.4rem;overflow-x:auto;margin-top:.55rem;padding-bottom:.2rem;scrollbar-width:thin;}
.ai-idea{flex-shrink:0;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1.5px solid var(--brd);background:#fff;border-radius:20px;font-size:11.5px;font-weight:600;color:var(--sub);padding:.36rem .7rem;cursor:pointer;}
.ai-idea:hover{border-color:var(--brd2);color:var(--navy);}
.ai-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;}
@media(min-width:560px) and (max-width:1179px){.ai-styles{grid-template-columns:repeat(6,minmax(0,1fr));}}
.ai-style{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;border:1.5px solid var(--brd);background:#fff;border-radius:12px;padding:.32rem .32rem .42rem;cursor:pointer;font-size:10.8px;font-weight:700;color:var(--txt);text-align:center;transition:.12s;}
.ai-style i{display:block;height:34px;border-radius:8px;background:linear-gradient(135deg,#e2e8f0,#f8fafc);}
.ai-style span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-style.on{border-color:var(--pink);box-shadow:0 0 0 3px rgba(219,39,119,.12);color:#9d174d;}
.s-photo i{background:linear-gradient(160deg,#fde68a,#f97316 45%,#7c2d12);}
.s-product i{background:radial-gradient(circle at 50% 60%,#94a3b8 0 22%,transparent 23%),linear-gradient(#f8fafc,#e2e8f0);}
.s-flyer i{background:repeating-linear-gradient(45deg,#f5c518 0 6px,#0d1f5c 6px 12px);}
.s-logo i{background:radial-gradient(circle,#2563eb 0 30%,transparent 31%),#eff6ff;}
.s-illustration i{background:linear-gradient(135deg,#a78bfa,#f472b6,#fbbf24);}
.s-3d i{background:radial-gradient(circle at 35% 35%,#e0e7ff,#6366f1 55%,#312e81);}
.s-cartoon i{background:radial-gradient(circle at 30% 40%,#fff 0 12%,transparent 13%),#22c55e;}
.s-watercolor i{background:radial-gradient(circle at 30% 30%,rgba(59,130,246,.45),transparent 60%),radial-gradient(circle at 70% 60%,rgba(236,72,153,.4),transparent 60%),#fffdf5;}
.s-cinematic i{background:linear-gradient(#0f172a 0 18%,#0e7490 18% 82%,#0f172a 82%);}
.s-afro i{background:repeating-linear-gradient(90deg,#b45309 0 5px,#f59e0b 5px 10px,#065f46 10px 15px);}
.ai-shape{display:inline-block;border:1.8px solid currentColor;border-radius:3px;margin-bottom:.1rem;}
.sh-Square{width:13px;height:13px;}.sh-Landscape{width:17px;height:11px;}.sh-Portrait{width:11px;height:16px;}

.ai-img-side{display:flex;flex-direction:column;gap:1.1rem;min-width:0;}
.ai-stage{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#fff,var(--card2));}
.ai-stage-empty{text-align:center;padding:2.5rem 1.5rem;}
.ai-stage-art{width:86px;height:86px;border-radius:26px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#db2777,#f472b6 50%,#f5c518);box-shadow:0 14px 34px rgba(219,39,119,.28);transform:rotate(-6deg);}
.ai-stage-busy{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);backdrop-filter:blur(3px);}
.ai-stage-shimmer{position:absolute;inset:14px;border-radius:16px;background:linear-gradient(120deg,#fce7f3,#e0e7ff,#fef3c7,#fce7f3);background-size:300% 300%;animation:aiGlow 3s ease infinite;opacity:.75;}
@keyframes aiGlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
.ai-stage-busy-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:1rem;}
.ai-stage-busy-t b{font-size:15px;color:var(--navy);}
.ai-stage-busy-t small{font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums;}
.spin-lg{width:34px;height:34px;border-radius:50%;border:3.5px solid rgba(37,99,235,.18);border-top-color:var(--brand);animation:aiSpin .8s linear infinite;flex-shrink:0;}
.ai-stage-fig{margin:0;width:100%;display:flex;flex-direction:column;transition:opacity .2s;}
.ai-stage-fig.dim{opacity:.4;}
.ai-stage-img{display:flex;align-items:center;justify-content:center;padding:1rem;background:#0b1220;min-height:300px;}
.ai-stage-img img{max-height:62vh;width:auto;max-width:100%;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);}
.checker{background-color:#fff!important;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%)!important;background-size:20px 20px!important;background-position:0 0,0 10px,10px -10px,-10px 0!important;}
.ai-stage-fig figcaption{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.7rem;}
.ai-stage-fig figcaption p{margin:0;font-size:12.5px;color:var(--txt);line-height:1.55;}
.ai-stage-fig figcaption small{display:block;color:var(--muted);font-size:11px;margin-top:.2rem;}
.ai-stage-acts{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.ai-stage-acts .ai-iconbtn{margin-left:auto;color:var(--sub);}
.ai-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:.8rem;}
@media(min-width:640px){.ai-gal{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media(min-width:1400px){.ai-gal{grid-template-columns:repeat(6,minmax(0,1fr));}}
.ai-gi{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#e2e8f0;}
.ai-gi img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s;}
.ai-gi:hover img{transform:scale(1.05);}
.ai-gi.on{border-color:var(--pink);box-shadow:0 0 0 3px rgba(219,39,119,.18);}
.ai-gi-tag{position:absolute;left:5px;bottom:5px;font-size:9px;font-weight:800;color:#fff;background:rgba(5,17,42,.7);padding:.12rem .4rem;border-radius:20px;}
.ai-gal-empty{grid-column:1/-1;text-align:center;color:var(--muted);font-size:12.5px;padding:1.4rem .5rem;margin:0;}
.ai-gal-more{text-align:center;padding:0 0 1rem;}

/* Website Builder */
.is-builder .ai-main{overflow:hidden;}
.ai-bld{flex:1;min-height:0;display:flex;background:var(--bg);}
.ai-bld-side{width:100%;display:flex;flex-direction:column;min-height:0;background:#fff;}
.ai-bld-main{display:none;flex:1;min-width:0;flex-direction:column;min-height:0;}
@media(min-width:900px){
  .ai-bld-side{width:380px;flex-shrink:0;border-right:1px solid var(--brd);}
  .ai-bld-main{display:flex;}
}
@media(min-width:1400px){.ai-bld-side{width:420px;}}
@media(max-width:899px){
  .ai-bld{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px));}
  .ai-bld.pane-main .ai-bld-side{display:none;}
  .ai-bld.pane-main .ai-bld-main{display:flex;}
}
.ai-bld-hd{display:flex;align-items:center;gap:.5rem;padding:calc(env(safe-area-inset-top,0px) + .7rem) .8rem .75rem;background:var(--grad-hd);color:#fff;flex-shrink:0;position:relative;overflow:hidden;}
.ai-bld-hd::before{content:'';position:absolute;top:-80px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.2),transparent 70%);pointer-events:none;}
.ai-bld-hd > *{position:relative;}
.ai-bld-hd .ai-iconbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:#fff;}
.ai-bld-hd .ai-iconbtn:disabled{opacity:.4;}
.ai-bld-proj{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.3rem;text-align:left;border:none;background:none;color:#fff;cursor:pointer;padding:.15rem .3rem;border-radius:9px;font-family:inherit;}
.ai-bld-proj:hover{background:rgba(255,255,255,.08);}
.ai-bld-proj b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-bld-proj small{grid-row:2;font-size:10.5px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-bld-proj .ai-ic{grid-row:1/3;grid-column:2;opacity:.7;}
.ai-bld-new{flex:1;overflow-y:auto;padding:1.1rem 1rem 1.4rem;display:flex;flex-direction:column;gap:.95rem;}
.ai-bld-intro h2{margin:0;font-size:18px;font-weight:900;letter-spacing:-.3px;}
.ai-bld-intro p{margin:.2rem 0 0;font-size:12.5px;color:var(--sub);}
.ai-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;}
@media(min-width:560px) and (max-width:899px){.ai-types{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ai-type{text-align:left;border:1.5px solid var(--brd);background:#fff;border-radius:12px;padding:.5rem .6rem;cursor:pointer;font-family:inherit;transition:.12s;min-width:0;}
.ai-type b{display:block;font-size:12px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-type small{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:1px;}
.ai-type:hover{border-color:var(--brd2);}
.ai-type.on{border-color:var(--teal);background:#f0fdfa;box-shadow:0 0 0 3px rgba(13,148,136,.12);}
.ai-type.on b{color:#115e59;}
.ai-bld-log{flex:1;overflow-y:auto;padding:1rem .9rem;}
.ai-bld-steps{display:flex;flex-direction:column;gap:.6rem;}
.ai-bstep-u{align-self:flex-end;max-width:88%;background:var(--grad-btn);color:#fff;font-size:13px;line-height:1.5;padding:.6rem .85rem;border-radius:16px 16px 4px 16px;white-space:pre-wrap;}
.ai-bstep-a{background:var(--card2);border:1.5px solid var(--brd);border-radius:16px 16px 16px 4px;padding:.65rem .8rem;max-width:96%;}
.ai-bstep-a.cur{border-color:#99f6e4;background:#f0fdfa;}
.ai-bstep-a p{margin:.4rem 0 0;font-size:12.5px;color:var(--txt);line-height:1.55;}
.ai-bstep-h{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.ai-bstep-h b{font-size:12.5px;font-weight:800;}
.ai-bstep-h small{font-size:10.5px;color:var(--muted);font-weight:700;}
.ai-bstep-h .ai-badge,.ai-bstep-h .ai-btn{margin-left:auto;}
.ai-bstep-h .ai-btn.sm{padding:.28rem .6rem;font-size:11px;}
.ai-bld-comp{flex-shrink:0;padding:.5rem .7rem .8rem;border-top:1px solid var(--brd);background:var(--bg);}
.ai-bld-quick{margin:0 0 .5rem;}
.ai-qchip{flex-shrink:0;border:1.5px solid var(--brd);background:#fff;border-radius:20px;font-size:11.5px;font-weight:700;color:var(--sub);padding:.34rem .7rem;cursor:pointer;white-space:nowrap;}
.ai-qchip:hover{color:var(--navy);border-color:var(--brd2);}
.ai-bld-comp .ai-composer{max-width:none;border-radius:16px;box-shadow:var(--sh);}

.ai-bld-bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;background:#fff;border-bottom:1px solid var(--brd);flex-shrink:0;min-height:58px;}
.ai-bld-page{width:auto;max-width:200px;}
.ai-bld-dev button{padding:.38rem .55rem;}
.ai-bld-stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden;background:#e9eef7;background-image:radial-gradient(rgba(13,31,92,.07) 1px,transparent 1px);background-size:18px 18px;}
.ai-bld-empty{margin:auto;text-align:center;padding:2rem;}
.ai-bld-mock{width:230px;height:150px;margin:0 auto 1.2rem;border-radius:14px;background:#fff;box-shadow:var(--sh-lg);position:relative;overflow:hidden;padding:26px 16px 0;}
.ai-bld-mock i{position:absolute;top:9px;width:8px;height:8px;border-radius:50%;background:#e2e8f0;left:12px;}
.ai-bld-mock i:nth-child(2){left:24px;}.ai-bld-mock i:nth-child(3){left:36px;}
.ai-bld-mock b{display:block;height:46px;border-radius:9px;background:linear-gradient(135deg,var(--teal),#2dd4bf);margin-bottom:10px;}
.ai-bld-mock span{display:inline-block;width:30%;height:44px;border-radius:8px;background:#f1f5f9;margin-right:3%;}
.ai-bld-progress{flex:1;display:flex;flex-direction:column;gap:.8rem;padding:1.2rem;min-height:0;}
.ai-bld-prog-hd{display:flex;align-items:center;gap:.85rem;background:#fff;border:1.5px solid var(--brd);border-radius:16px;padding:.9rem 1rem;box-shadow:var(--sh);}
.ai-bld-prog-hd > div{flex:1;min-width:0;}
.ai-bld-prog-hd b{display:block;font-size:14px;color:var(--navy);}
.ai-bld-prog-hd small{display:block;font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums;}
.ai-bld-files{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;}
.ai-bld-files li{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1.5px solid var(--brd);border-radius:20px;padding:.3rem .7rem;font-size:12px;}
.ai-bld-files li.done{border-color:#a7f3d0;color:#065f46;}
.ai-bld-files li span{font-weight:900;}
.ai-bld-files small{color:var(--muted);font-variant-numeric:tabular-nums;}
.ai-bld-tail{flex:1;min-height:120px;max-height:460px;margin-top:auto!important;margin:0;overflow:hidden;background:#0b1220;color:#7dd3fc;border-radius:14px;padding:1rem;font-family:var(--mono);font-size:11.5px;line-height:1.6;white-space:pre-wrap;word-break:break-all;opacity:.92;
  -webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%);display:flex;flex-direction:column;justify-content:flex-end;}
.ai-bld-frame{flex:1;min-height:0;display:flex;justify-content:center;padding:0;}
.ai-bld-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block;}
.ai-bld-frame.dev-tablet,.ai-bld-frame.dev-mobile{padding:1rem;}
.ai-bld-frame.dev-tablet iframe{width:820px;max-width:100%;border-radius:18px;box-shadow:0 0 0 10px #0f172a,var(--sh-lg);}
.ai-bld-frame.dev-mobile iframe{width:390px;max-width:100%;border-radius:26px;box-shadow:0 0 0 10px #0f172a,var(--sh-lg);}
.ai-bld-code{flex:1;min-height:0;display:flex;flex-direction:column;background:#0b1220;}
.ai-bld-code-tabs{display:flex;gap:.2rem;overflow-x:auto;padding:.45rem .5rem 0;background:#111827;flex-shrink:0;}
.ai-bld-code-tabs button{border:none;background:transparent;color:#94a3b8;font-family:var(--mono);font-size:12px;padding:.5rem .8rem;border-radius:9px 9px 0 0;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;}
.ai-bld-code-tabs button.on{background:#0b1220;color:#fff;}
.ai-dirty{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);}
.ai-bld-code textarea{flex:1;min-height:0;border:none;outline:none;resize:none;background:#0b1220;color:#e2e8f0;font-family:var(--mono);font-size:12.5px;line-height:1.65;padding:1rem 1.1rem;tab-size:2;white-space:pre;overflow:auto;}
.ai-bld-code-ft{display:flex;align-items:center;gap:.5rem;padding:.55rem .8rem;background:#111827;border-top:1px solid #1f2937;flex-shrink:0;}
.ai-bld-code-ft span{flex:1;font-size:11.5px;color:#94a3b8!important;}
.ai-bld-mtabs{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:rgba(255,255,255,.97);border-top:1px solid var(--brd);box-shadow:0 -6px 22px rgba(13,31,92,.08);}
.ai-bld-mtabs[hidden]{display:none!important;}
.ai-bld-mtabs button{border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;font-size:10.5px;font-weight:800;color:var(--muted);cursor:pointer;font-family:inherit;}
.ai-bld-mtabs button.on{color:var(--navy);}
.ai-plist{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem;max-height:56vh;overflow-y:auto;}
.ai-pl-i{display:flex;align-items:center;gap:.7rem;text-align:left;border:1.5px solid var(--brd);background:#fff;border-radius:13px;padding:.55rem .65rem;cursor:pointer;font-family:inherit;}
.ai-pl-i:hover{border-color:var(--brd2);}
.ai-pl-i.on{border-color:var(--teal);background:#f0fdfa;}
.ai-pl-i > span:last-child{min-width:0;}
.ai-pl-i b{display:block;font-size:13px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-pl-i small{display:block;font-size:11px;color:var(--muted);}
.ai-pl-new{border-style:dashed;}
.ai-tgl-t,.ai-tgl-d{display:block;}
.ai-card-hd h3{display:flex;align-items:center;gap:.4rem;}
.ai-home-imgs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--brd);}
.ai-home-imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;background:#e2e8f0;}