:root {
  color-scheme: dark;
  --bg: #070709;
  --panel: rgba(15, 15, 18, .74);
  --panel-2: rgba(24, 24, 28, .72);
  --stroke: rgba(255,255,255,.09);
  --stroke-strong: rgba(255,255,255,.16);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #63636d;
  --cyan: #67e8f9;
  --cyan-strong: #22d3ee;
  --emerald: #6ee7b7;
  --amber: #fbbf24;
  --rose: #fb7185;
  --violet: #a78bfa;
  --shadow: 0 24px 80px rgba(0,0,0,.46);
}
* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
html { background: var(--bg); }
body {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(1000px 650px at 10% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 550px at 95% 10%, rgba(167,139,250,.10), transparent 55%),
    radial-gradient(750px 500px at 55% 105%, rgba(16,185,129,.07), transparent 55%),
    #070709;
  color: var(--text);
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(103,232,249,.28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }

.app-shell { min-height: 100vh; position: relative; }
.ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ambient::before, .ambient::after { content: ""; position: absolute; border-radius: 999px; filter: blur(80px); opacity: .2; }
.ambient::before { width: 420px; height: 420px; background: #0ea5e9; top: -180px; left: -140px; }
.ambient::after { width: 380px; height: 380px; background: #7c3aed; right: -150px; top: 12vh; }
.grid-overlay { position: fixed; inset: 0; pointer-events:none; opacity:.18; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 80%); }
.content-layer { position: relative; z-index: 1; }

.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; }
.brand-mark { width:34px; height:34px; border:1px solid rgba(103,232,249,.32); background:linear-gradient(145deg, rgba(103,232,249,.18), rgba(255,255,255,.03)); border-radius:11px; display:grid; place-items:center; box-shadow: inset 0 0 30px rgba(103,232,249,.06), 0 0 30px rgba(34,211,238,.08); }
.brand-mark svg { width:19px; height:19px; }
.brand .domain { font-size:14px; }
.brand .dotcom { color:var(--faint); font-weight:700; }

.icon { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.icon-sm { width:15px; height:15px; }
.icon-lg { width:24px; height:24px; }

.glass { background: var(--panel); border:1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.card { border-radius:20px; background:linear-gradient(180deg, rgba(23,23,27,.76), rgba(10,10,12,.76)); border:1px solid var(--stroke); box-shadow:0 16px 60px rgba(0,0,0,.28); }
.card-soft { border-radius:16px; background:rgba(255,255,255,.025); border:1px solid var(--stroke); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; border:1px solid transparent; padding:10px 14px; cursor:pointer; transition:.18s ease; min-height:40px; font-weight:650; font-size:13px; white-space:nowrap; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.985); }
.btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.btn-primary { background:var(--cyan); color:#071014; border-color:rgba(255,255,255,.2); box-shadow:0 0 34px rgba(34,211,238,.15); }
.btn-primary:hover { background:#a5f3fc; }
.btn-secondary { background:rgba(255,255,255,.055); border-color:var(--stroke); color:#f4f4f5; }
.btn-secondary:hover { background:rgba(255,255,255,.09); border-color:var(--stroke-strong); }
.btn-danger { background:rgba(244,63,94,.09); border-color:rgba(251,113,133,.18); color:#fda4af; }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-ghost:hover { background:rgba(255,255,255,.05); color:#fff; }
.btn-sm { min-height:34px; padding:7px 10px; border-radius:10px; font-size:12px; }
.btn-icon { width:38px; height:38px; padding:0; }

.field { display:flex; flex-direction:column; gap:7px; }
.label-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.label { font-size:12px; font-weight:650; color:#d4d4d8; }
.hint { font-size:10px; color:var(--faint); }
.input, .select, .textarea { width:100%; color:#fff; background:rgba(0,0,0,.28); border:1px solid var(--stroke); border-radius:12px; outline:none; transition:.18s; }
.input, .select { min-height:42px; padding:10px 12px; }
.textarea { min-height:92px; resize:vertical; padding:11px 12px; }
.input::placeholder, .textarea::placeholder { color:#55555f; }
.input:focus, .select:focus, .textarea:focus { border-color:rgba(103,232,249,.4); box-shadow:0 0 0 3px rgba(34,211,238,.07); }
.select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#71717a 50%),linear-gradient(135deg,#71717a 50%,transparent 50%); background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; }
.segment { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:rgba(0,0,0,.25); border:1px solid var(--stroke); padding:4px; border-radius:12px; gap:4px; }
.segment button { border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; padding:8px; font-weight:650; font-size:12px; }
.segment button.active { background:rgba(255,255,255,.08); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }

.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.035); font-size:10px; font-weight:700; color:#b9bac2; letter-spacing:.015em; }
.pill.cyan { color:#a5f3fc; border-color:rgba(34,211,238,.18); background:rgba(34,211,238,.07); }
.pill.green { color:#a7f3d0; border-color:rgba(52,211,153,.18); background:rgba(16,185,129,.07); }
.pill.amber { color:#fde68a; border-color:rgba(251,191,36,.2); background:rgba(245,158,11,.07); }
.pill.rose { color:#fecdd3; border-color:rgba(251,113,133,.2); background:rgba(244,63,94,.07); }

.muted { color:var(--muted); }
.faint { color:var(--faint); }
.mono { font-family:"SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.small { font-size:12px; }
.tiny { font-size:10px; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row { display:flex; align-items:center; gap:10px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stack { display:flex; flex-direction:column; }
.gap-6 { gap:6px; } .gap-8 { gap:8px; } .gap-12 { gap:12px; } .gap-16 { gap:16px; } .gap-20 { gap:20px; } .gap-24 { gap:24px; }

/* Landing */
.landing-nav { max-width:1180px; margin:auto; padding:24px 28px; display:flex; justify-content:space-between; align-items:center; }
.landing-main { max-width:1180px; margin:auto; padding:72px 28px 100px; display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(103,232,249,.18); background:rgba(34,211,238,.05); color:#bae6fd; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.hero-title { font-size:clamp(44px,7vw,86px); line-height:.95; margin:20px 0 22px; letter-spacing:-.06em; font-weight:820; }
.hero-title span { background:linear-gradient(95deg,#fff 20%,#a5f3fc 70%,#c4b5fd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy { font-size:17px; line-height:1.7; color:#a1a1aa; max-width:650px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-panel { padding:18px; position:relative; overflow:hidden; }
.hero-panel::after { content:""; position:absolute; width:220px; height:220px; border-radius:999px; background:rgba(34,211,238,.09); filter:blur(70px); right:-80px; bottom:-80px; }
.mock-window { background:#09090b; border:1px solid var(--stroke); border-radius:16px; overflow:hidden; position:relative; z-index:1; }
.mock-top { padding:12px 14px; border-bottom:1px solid var(--stroke); display:flex; align-items:center; justify-content:space-between; }
.dots { display:flex; gap:5px; }.dots i{width:7px;height:7px;border-radius:50%;background:#3f3f46;display:block}.dots i:first-child{background:#fb7185}.dots i:nth-child(2){background:#fbbf24}.dots i:nth-child(3){background:#34d399}
.mock-body { padding:18px; display:grid; gap:12px; }
.mock-room { padding:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.025); border-radius:13px; }
.feature-grid { max-width:1180px; margin:0 auto 80px; padding:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.feature-card { padding:18px; min-height:145px; }
.feature-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--stroke); border-radius:12px; background:rgba(255,255,255,.04); color:var(--cyan); margin-bottom:18px; }
.feature-card h3 { margin:0 0 8px; font-size:14px; }
.feature-card p { margin:0; font-size:12px; line-height:1.6; color:var(--muted); }

/* Admin */
.admin-layout { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.sidebar { position:sticky; top:0; height:100vh; border-right:1px solid var(--stroke); background:rgba(9,9,11,.72); backdrop-filter:blur(24px); padding:20px 14px; display:flex; flex-direction:column; }
.sidebar-head { padding:3px 8px 22px; }
.nav-group { display:grid; gap:4px; }
.nav-label { padding:16px 10px 7px; color:#52525b; font-size:9px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.nav-item { width:100%; border:0; cursor:pointer; background:transparent; display:flex; align-items:center; gap:10px; color:#8d8d97; padding:10px 11px; border-radius:11px; text-align:left; font-size:12px; font-weight:650; transition:.16s; }
.nav-item:hover { background:rgba(255,255,255,.035); color:#ddd; }
.nav-item.active { background:rgba(255,255,255,.07); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.nav-item.active .icon { color:var(--cyan); }
.sidebar-footer { margin-top:auto; padding:14px 8px 0; }
.sidebar-footer .status-box { padding:12px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.025); }
.main { min-width:0; }
.topbar { position:sticky; top:0; z-index:20; height:68px; padding:0 26px; display:flex; align-items:center; justify-content:space-between; background:rgba(7,7,9,.7); backdrop-filter:blur(24px); border-bottom:1px solid var(--stroke); }
.topbar h1 { margin:0; font-size:14px; }
.topbar-sub { font-size:10px; color:var(--faint); margin-top:2px; }
.main-inner { max-width:1400px; padding:26px; }
.page-head { margin-bottom:22px; }
.page-head h2 { margin:0; font-size:24px; letter-spacing:-.025em; }
.page-head p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
.metric { padding:16px; }
.metric-top { display:flex; align-items:center; justify-content:space-between; }
.metric-value { font-size:28px; font-weight:780; margin-top:12px; letter-spacing:-.04em; }
.metric-label { color:var(--muted); font-size:11px; margin-top:5px; }
.metric-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.04); border:1px solid var(--stroke); color:#a5f3fc; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:14px; }
.panel-head { padding:17px 18px; border-bottom:1px solid var(--stroke); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.panel-head h3 { margin:0; font-size:13px; }
.panel-body { padding:18px; }
.rooms-list { display:grid; gap:8px; }
.room-row { width:100%; text-align:left; color:inherit; border:1px solid var(--stroke); background:rgba(255,255,255,.02); border-radius:13px; padding:12px; cursor:pointer; transition:.16s; }
.room-row:hover { background:rgba(255,255,255,.045); border-color:var(--stroke-strong); transform:translateY(-1px); }
.room-row-main { display:flex; gap:12px; align-items:center; }
.room-avatar { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.12); color:#a5f3fc; flex:none; }
.room-meta { min-width:0; flex:1; }
.room-title { font-weight:700; font-size:12px; }
.room-sub { color:var(--faint); font-size:10px; margin-top:4px; }
.room-side { text-align:right; flex:none; }
.stat-line { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:11px; }
.stat-line:last-child { border-bottom:0; }
.stat-line span:first-child { color:var(--muted); }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .span-2 { grid-column:span 2; }
.creator-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.65fr); gap:16px; align-items:start; }
.form-card { padding:20px; }
.form-section { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--stroke); }
.form-section:last-child { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.section-title { font-size:12px; font-weight:750; margin-bottom:12px; }
.result-card { padding:20px; position:sticky; top:88px; }
.result-empty { min-height:260px; display:grid; place-items:center; text-align:center; color:var(--faint); padding:30px; }
.link-box { border:1px solid rgba(34,211,238,.17); background:rgba(34,211,238,.045); border-radius:13px; padding:12px; word-break:break-all; font-size:11px; line-height:1.55; color:#cffafe; }
.code-box { background:#060608; border:1px solid var(--stroke); border-radius:13px; padding:14px; overflow:auto; color:#d4d4d8; font-size:11px; line-height:1.6; white-space:pre; }

.bulk-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.count-btn { min-width:52px; }
.generated-table-wrap { overflow:auto; border:1px solid var(--stroke); border-radius:14px; }
.table { width:100%; border-collapse:collapse; min-width:900px; }
.table th { text-align:left; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#666673; background:rgba(255,255,255,.025); padding:10px 12px; border-bottom:1px solid var(--stroke); }
.table td { padding:11px 12px; font-size:10px; border-bottom:1px solid rgba(255,255,255,.045); color:#b8b8c0; }
.table tr:last-child td { border-bottom:0; }
.table .strong { color:#fff; font-weight:700; }

/* Room drawer */
.drawer-backdrop { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); animation:fadeIn .16s ease; }
.drawer { position:fixed; z-index:90; top:0; right:0; height:100vh; width:min(520px,100vw); background:#0b0b0e; border-left:1px solid var(--stroke); box-shadow:-30px 0 80px rgba(0,0,0,.48); display:flex; flex-direction:column; animation:slideIn .22s cubic-bezier(.2,.8,.2,1); }
.drawer-head { padding:16px; border-bottom:1px solid var(--stroke); display:flex; justify-content:space-between; gap:12px; align-items:center; }
.drawer-meta { padding:12px 16px; border-bottom:1px solid var(--stroke); display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.meta-box { padding:10px; border:1px solid var(--stroke); border-radius:11px; background:rgba(255,255,255,.025); }
.meta-box label { display:block; color:var(--faint); font-size:9px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.meta-box div { font-size:11px; color:#d4d4d8; }
.chat-scroll { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.bubble-row { display:flex; }
.bubble-row.client { justify-content:flex-start; }
.bubble-row.agent { justify-content:flex-end; }
.bubble-row.system { justify-content:center; }
.bubble { max-width:78%; border-radius:15px; padding:10px 11px; font-size:12px; line-height:1.5; border:1px solid var(--stroke); }
.bubble.agent { background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.16); }
.bubble.client { background:rgba(255,255,255,.055); }
.bubble.system { max-width:90%; background:transparent; border:0; color:#60606a; font-size:10px; padding:2px; text-align:center; }
.bubble-time { margin-top:5px; font-size:8px; color:#666672; }
.file-chip { display:flex; align-items:center; gap:9px; color:#e4e4e7; }
.file-chip .file-icon { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.06); }
.composer { border-top:1px solid var(--stroke); padding:12px; display:flex; gap:8px; background:rgba(9,9,11,.9); }
.composer .input { flex:1; }

/* Login */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:22px; }
.login-card { width:min(420px,100%); padding:28px; }
.login-card h1 { font-size:24px; margin:22px 0 7px; letter-spacing:-.03em; }
.login-card p { margin:0 0 22px; color:var(--muted); font-size:12px; line-height:1.6; }

/* Client */
.client-shell { min-height:100vh; display:grid; place-items:center; padding:22px; }
.phone-wrap { width:min(860px,100%); min-height:min(760px,calc(100vh - 44px)); border-radius:28px; overflow:hidden; display:flex; flex-direction:column; position:relative; }
.client-head { min-height:68px; padding:14px 18px; border-bottom:1px solid var(--stroke); display:flex; align-items:center; justify-content:space-between; gap:12px; background:rgba(9,9,11,.65); }
.client-head-left { display:flex; gap:11px; align-items:center; min-width:0; }
.client-avatar { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; border:1px solid rgba(34,211,238,.16); background:rgba(34,211,238,.07); color:#a5f3fc; }
.client-title { font-size:12px; font-weight:750; }
.client-sub { margin-top:3px; font-size:9px; color:var(--faint); }
.client-body { flex:1; min-height:0; display:flex; flex-direction:column; }
.client-chat { flex:1; overflow:auto; padding:22px; display:flex; flex-direction:column; gap:11px; }
.client-composer { padding:12px 14px 14px; border-top:1px solid var(--stroke); display:flex; gap:8px; background:rgba(7,7,9,.68); }

.waiting { flex:1; display:grid; place-items:center; padding:28px; position:relative; overflow:hidden; }
.waiting::before { content:""; position:absolute; width:520px; height:520px; background:radial-gradient(circle,rgba(34,211,238,.07),transparent 65%); }
.waiting-inner { position:relative; z-index:1; width:min(560px,100%); text-align:center; }
.radar { width:178px; height:178px; border-radius:50%; margin:0 auto 28px; position:relative; border:1px solid rgba(34,211,238,.2); background:repeating-radial-gradient(circle, rgba(34,211,238,.08) 0 1px, transparent 1px 29px); box-shadow:inset 0 0 60px rgba(34,211,238,.05), 0 0 50px rgba(34,211,238,.06); overflow:hidden; }
.radar::before, .radar::after { content:""; position:absolute; inset:50% 0 auto; height:1px; background:rgba(34,211,238,.13); }.radar::after{ transform:rotate(90deg); }
.radar-sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 270deg, rgba(34,211,238,.28) 330deg, rgba(34,211,238,.02) 360deg); animation:spin 2.8s linear infinite; }
.radar-dot { position:absolute; width:7px; height:7px; border-radius:50%; background:#67e8f9; box-shadow:0 0 18px #22d3ee; left:68%; top:35%; animation:pulse 1.6s ease-in-out infinite; }
.waiting h1 { margin:0 0 9px; font-size:24px; letter-spacing:-.03em; }
.waiting p { margin:0 auto; max-width:470px; color:var(--muted); font-size:12px; line-height:1.7; }
.countdown-label { color:#73737d; text-transform:uppercase; font-size:9px; letter-spacing:.14em; font-weight:800; margin-top:24px; }
.countdown { margin-top:7px; font-family:"SFMono-Regular",Consolas,monospace; font-size:34px; letter-spacing:-.04em; color:#cffafe; text-shadow:0 0 22px rgba(34,211,238,.16); }
.waiting-status { margin:22px auto 0; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

.expired { position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:rgba(5,5,7,.91); backdrop-filter:blur(16px); padding:28px; animation:fadeIn .25s ease; }
.expired-card { max-width:440px; text-align:center; }
.expired-icon { width:62px; height:62px; border-radius:18px; display:grid; place-items:center; margin:0 auto 18px; color:#fda4af; background:rgba(244,63,94,.08); border:1px solid rgba(251,113,133,.18); }
.expired h2 { margin:0 0 9px; }
.expired p { color:var(--muted); font-size:12px; line-height:1.7; }

/* API docs */
.api-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; }
.endpoint { padding:16px; }
.endpoint + .endpoint { margin-top:10px; }
.method { display:inline-flex; min-width:44px; justify-content:center; padding:4px 7px; border-radius:7px; background:rgba(16,185,129,.09); color:#a7f3d0; font-size:9px; font-weight:800; border:1px solid rgba(52,211,153,.14); }
.endpoint-path { font-size:11px; color:#e4e4e7; }

.toast-stack { position:fixed; z-index:120; right:18px; bottom:18px; display:grid; gap:8px; width:min(340px,calc(100vw - 36px)); }
.toast { padding:12px 13px; border-radius:12px; background:#17171b; border:1px solid var(--stroke-strong); box-shadow:0 14px 50px rgba(0,0,0,.4); font-size:11px; display:flex; gap:9px; align-items:flex-start; animation:toastIn .2s ease; }
.toast.success .icon { color:var(--emerald); }.toast.error .icon{color:var(--rose)}
.empty { text-align:center; color:var(--faint); padding:36px 20px; font-size:11px; }
.error-text { color:#fda4af; font-size:10px; margin-top:6px; }

.mobile-menu { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:.45;transform:scale(.8)} 50%{opacity:1;transform:scale(1.25)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideIn { from{transform:translateX(30px);opacity:.5} to{transform:translateX(0);opacity:1} }
@keyframes toastIn { from{transform:translateY(8px);opacity:0} to{transform:none;opacity:1} }

@media (max-width: 1050px) {
  .metrics { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid, .creator-layout, .api-grid { grid-template-columns:1fr; }
  .result-card { position:static; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 820px) {
  .landing-main { grid-template-columns:1fr; gap:34px; padding-top:46px; }
  .hero-panel { display:none; }
  .admin-layout { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:60; width:250px; left:-270px; transition:.2s; box-shadow:30px 0 80px rgba(0,0,0,.6); }
  .sidebar.open { left:0; }
  .mobile-menu { display:inline-flex; }
  .topbar { padding:0 14px; }
  .main-inner { padding:18px 14px; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .span-2 { grid-column:auto; }
}
@media (max-width: 600px) {
  .landing-nav { padding:18px; }
  .landing-main { padding:42px 18px 70px; }
  .hero-title { font-size:48px; }
  .hero-copy { font-size:14px; }
  .feature-grid { grid-template-columns:1fr; padding:0 18px; }
  .metrics { grid-template-columns:1fr 1fr; gap:8px; }
  .metric { padding:13px; }
  .metric-value { font-size:22px; }
  .phone-wrap { min-height:calc(100vh - 20px); border-radius:18px; }
  .client-shell { padding:10px; }
  .client-chat { padding:14px; }
  .waiting { padding:18px; }
  .radar { width:150px; height:150px; }
  .countdown { font-size:30px; }
  .drawer-meta { grid-template-columns:1fr 1fr; }
}