:root{
  --teal:#0a0a0b;--blue:#0a0a0b;--pink:#5c5c62;--coral:#2a2a30;   /* restrained black/white Agentic OS accents */
  --accent:#0a0a0b;--accent2:#6f6f78;   /* primary accent alias (used across CRM/CS UI) */
  /* ----- LIGHT theme (default) ----- */
  --bg:
    radial-gradient(720px 520px at 12% -8%,rgba(255,255,255,.86),rgba(255,255,255,0) 64%),
    radial-gradient(680px 520px at 98% 4%,rgba(180,180,190,.22),rgba(255,255,255,0) 62%),
    linear-gradient(150deg,#f7f7f8 0%,#ececef 46%,#fdfdfd 100%);
  --glow1:rgba(10,10,11,0.08);--glow2:rgba(120,120,128,0.12);
  --text:#0a0a0b;--muted:#626269;
  --glass:rgba(255,255,255,0.58);--glass-strong:rgba(255,255,255,0.78);
  --glass-border:rgba(10,10,11,0.10);--glassb:rgba(10,10,11,0.10);
  --surface-solid:rgba(255,255,255,0.94);--shadow:0 24px 70px rgba(10,10,11,0.12), inset 0 1px 0 rgba(255,255,255,.76);--menu-bg:#ffffff;
  --chart-ink:#1f1f24;--chart-grid:rgba(10,10,11,0.08);--th-bg:rgba(255,255,255,0.74);
  /* ---- shared design tokens (theme-agnostic; see DESIGN.md) ---- */
  --card:var(--surface-solid);--line:var(--glass-border);   /* opaque card surface + hairline (per-theme via the tokens above) — must be defined so var(--card)/var(--line) never resolve to transparent */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:22px;--sp-6:32px;
  --radius-sm:8px;--radius-md:11px;--radius-lg:14px;--radius-xl:18px;--radius-pill:999px;
  --control-h:38px;--title-lg:1.05rem;--title-md:.95rem;
  --ai-bar-clear:120px;   /* bottom clearance so the fixed assistant bar never covers page content */
  --z-sidebar:40;--z-drawer:620;--z-dropdown:1200;--z-tooltip:1300;--z-modal:9000;
}
html[data-theme="dark"]{
  /* ----- DARK theme = BLACK liquid glass (mirrors the canvas .ce palette) ----- */
  --accent:#ffffff;--accent2:#b8b8c0;
  --bg:
    radial-gradient(900px 680px at 12% -12%,rgba(255,255,255,.11),rgba(255,255,255,0) 58%),
    radial-gradient(760px 620px at 112% 2%,rgba(255,255,255,.08),rgba(255,255,255,0) 56%),
    linear-gradient(160deg,#050506 0%,#0a0a0b 44%,#050506 100%);
  --glow1:rgba(255,255,255,0.10);--glow2:rgba(130,130,145,0.10);
  --text:#f5f5f7;--muted:#a6a6ad;
  --glass:rgba(255,255,255,0.055);--glass-strong:rgba(255,255,255,0.09);
  --glass-border:rgba(255,255,255,0.12);--glassb:rgba(255,255,255,0.12);
  --surface-solid:rgba(13,13,15,.96);--shadow:0 26px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);--menu-bg:#0d0d0f;
  --card:rgba(13,13,15,.96);--line:rgba(255,255,255,.12);
  --chart-ink:#f0f0f4;--chart-grid:rgba(255,255,255,0.08);--th-bg:rgba(16,16,18,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--text);min-height:100vh;
  background:var(--bg) fixed;transition:color .3s ease}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vw 60vw at 82% 8%,var(--glow1),transparent 60%),
             radial-gradient(55vw 55vw at 8% 92%,var(--glow2),transparent 60%)}
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--glass-border);border-radius:24px;box-shadow:var(--shadow)}
:root{--sidebar-w:236px}
/* Liquid-glass line icons (ic('name') from 00-icons.js) — the ONE icon family; replaces emoji everywhere.
   Sizes to the surrounding font; pass a class for bigger toolbar icons. */
.lg-ic{display:inline-block;width:1em;height:1em;vertical-align:-0.14em;flex:none;stroke:currentColor}
.lg-ic.ic-lg{width:1.3em;height:1.3em}
button .lg-ic,a .lg-ic,.tab .lg-ic{pointer-events:none}
.wrap{max-width:none;margin:0;padding:22px 26px var(--ai-bar-clear) calc(var(--sidebar-w) + 26px)}
header{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px 14px;margin:0;border-radius:0;overflow-y:auto;z-index:var(--z-sidebar)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.04rem;padding:2px 6px 6px;flex-shrink:0;letter-spacing:-.03em}
.logo{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;font-weight:900;
  color:#fff;background:linear-gradient(150deg,#0a0a0b,#3a3a40);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 36px rgba(0,0,0,.18)}
.logo::before{content:"A";font-size:.84rem;letter-spacing:-.08em}
html[data-theme="dark"] .logo{color:#0a0a0b;background:linear-gradient(150deg,#fff,#cfcfd6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 42px rgba(0,0,0,.42)}
.brand small{display:block;font-size:.58rem;font-weight:700;opacity:.72;letter-spacing:.16em;text-transform:uppercase}
.nav-right{display:flex;flex-direction:column;align-items:stretch;gap:8px;flex:1;flex-wrap:nowrap;min-height:0}
.theme-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-size:1rem;display:grid;place-items:center;flex-shrink:0;transition:.2s;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.theme-btn:hover{transform:translateY(-1px)}
/* staff chip + logout in the header */
.staff-chip{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text);cursor:pointer;font-size:.8rem;font-weight:700;max-width:170px}
.staff-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.staff-id{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden}
.staff-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-chip small{font-weight:600;color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em}
.logout-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-size:1.1rem;display:grid;place-items:center;flex-shrink:0}
.logout-btn:hover{transform:translateY(-1px)}
/* login screen */
.login-overlay{position:fixed;inset:0;z-index:400;background:var(--bg) fixed;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;overflow:auto}
.login-overlay::before{content:"";position:absolute;inset:7%;border-radius:42px;background:
  linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%,rgba(255,255,255,.16)),
  radial-gradient(520px 320px at 18% 18%,rgba(255,255,255,.30),transparent 68%);filter:blur(.1px);pointer-events:none}
html[data-theme="light"] .login-overlay::before{background:
  linear-gradient(90deg,rgba(10,10,11,.06),rgba(10,10,11,0) 42%,rgba(10,10,11,.05)),
  radial-gradient(520px 320px at 18% 18%,rgba(255,255,255,.68),transparent 68%)}
.login-theme-toggle{position:fixed;right:22px;bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:999px;padding:10px 13px;font:700 .72rem/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.login-theme-toggle:hover{transform:translateY(-1px)}
.login-theme-dot{width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bg) 28%,transparent)}
html[data-theme="light"] .login-theme-dot{background:#0a0a0b}
html[data-theme="dark"] .login-theme-dot{background:#fff}
.login-card{position:relative;width:min(460px,94vw);background:var(--glass);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);border:1px solid var(--glass-border);border-radius:30px;box-shadow:var(--shadow);padding:30px;color:var(--text);overflow:hidden}
.login-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,0) 32%,rgba(255,255,255,.08));pointer-events:none}
.login-card>*{position:relative;z-index:1}
.login-brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.1rem;letter-spacing:-.03em;margin-bottom:18px}
.login-logo{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-weight:900;font-size:.72rem;letter-spacing:-.08em;color:#fff;background:linear-gradient(150deg,#0a0a0b,#3b3b42);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 44px rgba(0,0,0,.22)}
html[data-theme="dark"] .login-logo{color:#0a0a0b;background:linear-gradient(150deg,#fff,#cfcfd6)}
.login-wordmark{display:flex;flex-direction:column;line-height:1}
.login-wordmark>span{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78em;color:var(--muted);font-weight:700;letter-spacing:-.04em}
.login-wordmark small{margin-top:5px;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.login-kicker{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.16em;font-size:.64rem;font-weight:800;color:var(--muted);margin-bottom:10px}
.login-title{font-size:clamp(1.9rem,5vw,3rem);line-height:.96;letter-spacing:-.07em;margin:0 0 12px;font-weight:760}
.login-sub{color:var(--muted);font-size:.88rem;line-height:1.55;margin:4px 0 20px}
.login-card label{display:block;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.login-card input{width:100%;padding:12px 14px;border:1px solid var(--glass-border);border-radius:14px;font-size:.95rem;color:var(--text);background:var(--glass-strong);font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.login-card input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:2px}
.login-go{width:100%;margin-top:22px;background:var(--accent);color:#0a0a0b;border:0;padding:13px;border-radius:999px;font-weight:850;cursor:pointer;font-size:.95rem;letter-spacing:-.01em;box-shadow:0 18px 42px color-mix(in srgb,var(--accent) 20%,transparent);transition:transform .18s,opacity .18s}
html[data-theme="light"] .login-go{color:#fff}
.login-go:hover{transform:translateY(-1px);opacity:.88}
.login-err{background:rgba(210,59,59,.14);border:1px solid rgba(210,59,59,.4);color:#e06a6a;border-radius:14px;padding:9px 12px;font-size:.82rem;margin-bottom:8px}
.login-security-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;color:var(--muted);font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}
.login-security-row span{border:1px solid var(--glass-border);background:var(--glass);border-radius:999px;padding:5px 8px}
.login-links{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.login-links a{color:var(--text);font-size:.82rem;font-weight:750;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--text) 28%,transparent)}
.login-links a:hover{border-bottom-color:var(--text)}
.login-oauth-stack{display:flex;flex-direction:column;gap:10px;margin:16px 0 14px}
.login-oauth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:15px;padding:12px 14px;font:800 .92rem/1 "Instrument Sans",system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.16);transition:transform .18s,border-color .18s,background .18s,opacity .18s}
.login-oauth-btn:hover:not(:disabled){transform:translateY(-1px);background:var(--glass);border-color:color-mix(in srgb,var(--text) 24%,var(--glass-border))}
.login-oauth-btn:disabled{opacity:.45;cursor:not-allowed}
.login-provider-mark{width:20px;height:20px;display:inline-grid;place-items:center;flex:none;font:900 .82rem/1 "Instrument Sans",system-ui,sans-serif;color:var(--text)}
.login-provider-mark svg{width:19px;height:19px;display:block}
.login-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font:800 .62rem/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.14em;margin:4px 0 2px}
.login-divider::before,.login-divider::after{content:"";height:1px;flex:1;background:var(--glass-border)}
.login-email-row{position:relative}
.login-email-row input{padding-right:54px!important}
.login-email-arrow{position:absolute;right:7px;top:50%;transform:translateY(-50%) scale(.78);width:36px;height:36px;border-radius:50%;border:1px solid transparent;background:var(--accent);color:#0a0a0b;font-size:1.12rem;font-weight:900;line-height:1;display:grid;place-items:center;box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 24%,transparent);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .18s,transform .18s,filter .18s}
html[data-theme="light"] .login-email-arrow{color:#fff}
.login-email-row.valid .login-email-arrow{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.login-email-row.valid .login-email-arrow:hover{filter:brightness(1.05);transform:translateY(-52%) scale(1.03)}
.login-email-arrow:disabled{opacity:0;pointer-events:none}
.login-microcopy{margin-top:8px;color:var(--muted);font-size:.78rem;line-height:1.45}
.login-microcopy.ok{color:var(--good,#3fb950);font-weight:700}
/* ===== Notifications center (Settings → Notifications) ===== */
.nz-page{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.nz-head h2{margin:0 0 3px;font-size:1.35rem}
.nz-head p{margin:0;color:var(--muted);font-size:.86rem}
.nz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.nz-card-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.nz-card-head h3{margin:0;font-size:1rem}
.nz-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--glass-border);font-size:1.05rem;flex:none}
.nz-pill{font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--glass-border)}
.nz-pill.on{background:color-mix(in srgb,var(--good,#3fb950) 18%,transparent);border-color:transparent;color:var(--good,#3fb950)}
.nz-pill.off{color:var(--muted)}
.nz-pill.auth{color:#7a5af5;border-color:color-mix(in srgb,#7a5af5 40%,transparent)}
.nz-pill.app{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.nz-muted{color:var(--muted);font-size:.82rem;margin:2px 0 10px}
.nz-tabs{display:inline-flex;gap:4px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:9px;padding:3px;margin-bottom:10px}
.nz-tabs button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.8rem;padding:5px 11px;border-radius:7px;cursor:pointer}
.nz-tabs button.active{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.nz-form{display:flex;flex-direction:column;gap:9px}
.nz-form .inp,.nz-form select.inp{width:100%;min-width:0;box-sizing:border-box}
.nz-form .nz-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.nz-form .nz-2>.inp{min-width:0}
.nz-matrix .nz-row{display:grid;grid-template-columns:1fr auto auto auto auto;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--glass-border)}
.nz-matrix .nz-row:last-child{border-bottom:0}
.nz-matrix .nz-rh{display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;padding:0 0 8px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nz-rh span{text-align:center;width:48px}
.nz-tname{font-weight:700;font-size:.9rem}.nz-tname small{display:block;color:var(--muted);font-weight:500;font-size:.76rem}
.nz-col{width:48px;display:flex;justify-content:center}
.nz-acts{display:flex;gap:6px;justify-content:flex-end}
.nz-link{background:none;border:0;color:var(--accent);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;padding:4px 6px;border-radius:6px}
.nz-link:hover{background:var(--glass-strong)}
.nz-sw{position:relative;display:inline-block;width:38px;height:22px;flex:none}
.nz-sw input{opacity:0;width:0;height:0;position:absolute}
.nz-sw span{position:absolute;inset:0;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:999px;cursor:pointer;transition:.18s}
.nz-sw span:before{content:'';position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:.18s}
.nz-sw input:checked+span{background:linear-gradient(135deg,var(--accent),var(--accent2,#7a5af5));border-color:transparent}
.nz-sw input:checked+span:before{transform:translateX(16px);background:#fff}
.nz-sw input:disabled+span{opacity:.35;cursor:not-allowed}
.nz-prefrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--glass-border)}
.nz-prefrow:last-child{border-bottom:0}
.nz-prefrow b{font-size:.88rem}.nz-prefrow small{display:block;color:var(--muted);font-size:.78rem}
.nz-preview-ov{position:fixed;inset:0;z-index:9000;background:rgba(8,11,20,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.nz-preview-ov.open{display:flex}
.nz-preview{width:min(900px,96vw);max-height:92vh;background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.nz-preview-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--glass-border)}
.nz-preview-h h3{margin:0;font-size:1rem}
.nz-preview-b{display:grid;grid-template-columns:1.4fr 1fr;gap:0;min-height:0;flex:1}
.nz-preview-b iframe{width:100%;height:62vh;border:0;background:#0b1020}
.nz-side{padding:16px;border-left:1px solid var(--glass-border);overflow:auto;display:flex;flex-direction:column;gap:14px}
.nz-side h4{margin:0 0 6px;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.nz-chanbox{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:10px 12px;font-size:.85rem;white-space:pre-wrap;word-break:break-word}
@media(max-width:720px){.nz-preview-b{grid-template-columns:1fr}.nz-preview-b iframe{height:40vh}.nz-side{border-left:0;border-top:1px solid var(--glass-border)}}
/* show/hide password toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px!important;width:100%}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:7px}
.pw-toggle:hover{color:var(--text);background:var(--glass-strong)}
.pw-toggle svg{width:18px;height:18px;display:block}
.pw-toggle .pw-eyeoff{display:none}
.pw-wrap.pw-shown .pw-toggle .pw-eye{display:none}
.pw-wrap.pw-shown .pw-toggle .pw-eyeoff{display:block}
/* permission editor (Shopify-style grouped checkboxes) */
.perm-group{border:1px solid var(--glass-border);border-radius:11px;padding:12px 14px;margin-bottom:11px;background:var(--glass)}
.perm-group h5{font-size:.82rem;font-weight:800;margin:0 0 9px;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.perm-group h5 .perm-all{font-size:.68rem;font-weight:700;color:var(--accent,#2a7bff);cursor:pointer;background:none;border:0}
.perm-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.86rem;color:var(--text)}
.perm-row input{width:16px;height:16px;cursor:pointer;flex-shrink:0}
.perm-row label{cursor:pointer}
.perm-locked{opacity:.55}
.role-pill{display:inline-block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:999px}
.role-owner{background:rgba(199,36,177,.18);color:#d54fc0;border:1px solid rgba(199,36,177,.35)}
.role-admin{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.role-staff{background:var(--glass-strong);color:var(--muted);border:1px solid var(--glass-border)}
.tabs{display:flex;flex-direction:column;gap:4px;flex-wrap:nowrap}
.tab{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:42px;padding:9px 12px;border-radius:10px;font-weight:600;font-size:.92rem;line-height:1.2;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s;text-align:left}
.tab:hover{background:var(--glass)}
.tab-ic{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;color:var(--muted);align-self:center;justify-self:center}
.tab-ic .lg-ic{display:block;width:18px;height:18px;vertical-align:middle}
.tab:hover .tab-ic,.tab.active .tab-ic{color:inherit}
.tab-lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:center;display:flex;align-items:center;min-height:22px;line-height:1}
.nav-badge{display:inline-block;min-width:18px;margin-left:0;padding:1px 6px;border-radius:999px;background:#dc3545;color:#fff;font-size:.72rem;font-weight:800;line-height:1.5;text-align:center;vertical-align:middle;justify-self:end}
/* custom user pages in the nav: label + ✕-on-hover, plus the "+ New page" button */
.tab-custom{display:flex;align-items:center;gap:6px}
.tab-custom .tab-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-x{flex:none;width:19px;height:19px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s;display:flex;align-items:center;justify-content:center}
.tab-custom:hover .tab-x{opacity:.7}
.tab-x:hover{opacity:1;background:rgba(220,53,69,.18);color:#dc3545}
/* built-in tabs become hideable (recoverable): a ✕-on-hover injected by JS */
.tab.has-x{grid-template-columns:minmax(0,1fr) auto;column-gap:6px}
.tab.has-x>.tab-tt{min-width:0;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:22px;line-height:1;overflow:hidden;white-space:nowrap}
.tab.has-x:hover .tab-x{opacity:.7}
.tab-recover{color:var(--muted)}
/* Removed-tabs recovery modal (reuses the gp-ov/gp-card glass shell) */
.recover-card{width:min(440px,92vw)}
.rt-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rt-list{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow:auto}
.rt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass)}
.rt-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.rt-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-kind{font-size:.76rem;color:var(--muted)}
.tab-add{width:100%;font:inherit;font-weight:600;color:var(--muted);background:transparent;border:1px dashed var(--glass-border);margin-top:2px}
.tab-add:hover{color:var(--text);background:var(--glass)}
/* custom page body (contenteditable document) */
.cp-body{min-height:320px;color:var(--text);line-height:1.65;font-size:.95rem;outline:none}
.cp-body.cp-editable{cursor:text}
.cp-body h1,.cp-body h2,.cp-body h3{margin:.6em 0 .3em}
.cp-body p{margin:.5em 0}
.tab.active{background:rgba(255,255,255,.9);color:#15233c}
.nav-sec{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-border)}
.nav-sec-h{font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:1px 12px 5px}
body.settings-nav-mode #navSettings{margin-top:0;padding-top:0;border-top:0}
body.settings-nav-mode #navSettings .tab-sub{padding-left:0}
body.settings-nav-mode #navSettings .settings-back{color:var(--muted)}
/* ===== SA2: collapsible icon sidebar — minimize to an icon rail with hover tooltips =====
   Collapsed: EVERYTHING centers on one axis. Each row becomes a 44px square hit-area with a centered
   icon; horizontal padding/indents (incl. .tab-sub) are zeroed so nothing drifts off-centre. */
body.nav-min{--sidebar-w:66px}
body.nav-min header{padding:16px 0;align-items:center}
body.nav-min .nav-right,body.nav-min .tabs,body.nav-min .nav-sec,body.nav-min .side-actions{align-items:center}
body.nav-min .tab{width:44px;display:grid;grid-template-columns:1fr;place-items:center;gap:0;padding:0;height:44px;position:relative}
body.nav-min .tab-sub{padding-left:0}
body.nav-min .tab-lbl{display:none}
body.nav-min .tab-ic{width:22px;height:22px}
body.nav-min .tab[data-v="overview"] .tab-ic{transition:transform .18s ease,color .18s ease}
body.nav-min .tab[data-v="overview"]:hover .tab-ic{transform:scale(1.18)}
body.nav-min .tab[data-v="overview"]::after{content:"";position:absolute;right:6px;top:50%;width:6px;height:6px;border-top:1.8px solid currentColor;border-right:1.8px solid currentColor;opacity:0;transform:translate(-3px,-50%) rotate(45deg);transition:opacity .15s ease,transform .15s ease;color:inherit}
body.nav-min .tab[data-v="overview"]:hover::after{opacity:.85;transform:translate(0,-50%) rotate(45deg)}
/* The injected hide-✕ (.tab-x) must NOT sit inline beside the icon — in the 44px rail an inline
   ✕ pushes the icon off-centre. Pull it out of flow into the tab's TOP-RIGHT corner so the icon
   wrapper (.tab-tt) becomes the only in-flow child and centres cleanly (it otherwise grabs flex:1
   and left-aligns its icon). Reported: "x button … should sit on the top right corner". */
body.nav-min .tab.has-x,body.nav-min .tab-custom{grid-template-columns:1fr;gap:0;justify-content:center}
body.nav-min .tab.has-x>.tab-tt{flex:none;display:flex;align-items:center;justify-content:center;overflow:visible;width:auto}
body.nav-min .tab-x{position:absolute;top:3px;right:3px;width:16px;height:16px;font-size:.8rem;z-index:2}
/* custom pages have no icon — keep their name centred & clipped inside the square */
body.nav-min .tab-custom .tab-label{flex:none;max-width:38px;text-align:center;overflow:hidden}
body.nav-min .nav-sec-h{display:none}
body.nav-min .nav-sec{margin-top:6px;padding-top:6px;border-top:0}   /* no section border around the icons */
body.nav-min .nav-badge{position:absolute;top:6px;right:8px;min-width:0;width:8px;height:8px;margin:0;padding:0;font-size:0;line-height:0;border-radius:50%}
body.nav-min .import-bar{display:none}
/* store switcher → just the centred logo tile */
body.nav-min .store-switch-top{align-self:center;margin:0}
body.nav-min .store-btn{padding:0;background:none;border:0;justify-content:center;gap:0}
body.nav-min .store-btn:hover{transform:none}
body.nav-min .store-id,body.nav-min .store-btn .caret,body.nav-min .brand>span:not(.logo),body.nav-min .ver{display:none}
/* staff chip → just the centred initials avatar */
body.nav-min .staff-chip{padding:0;background:none;border:0;justify-content:center;max-width:none}
body.nav-min .staff-id{display:none}
/* footer actions stacked + centred as equal circles */
body.nav-min .side-actions{flex-direction:column;gap:8px}
body.nav-min .act-log-btn{width:38px;height:38px;justify-content:center;padding:0;border-radius:50%}
/* expand/collapse arrow at the TOP of the nav: points ‹ to collapse, rotates to › to expand */
.nav-min-btn{align-self:flex-end;flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:8px;color:var(--muted);cursor:pointer;margin-bottom:2px;transition:color .15s,border-color .15s}
.nav-min-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.nav-min-arrow{width:16px;height:16px;transition:transform .2s ease}
body.nav-min .nav-min-btn{align-self:center}
body.nav-min .nav-min-arrow{transform:rotate(180deg)}
/* hover tooltip bubble — position:fixed (JS-set) so the scrolling sidebar's overflow never clips it */
.nav-tip{position:fixed;z-index:var(--z-tooltip);background:var(--menu-bg);color:var(--text);border:1px solid var(--glass-border);border-radius:8px;padding:5px 10px;font-size:.8rem;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.4);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-50%);max-width:calc(100vw - 16px);overflow:hidden;text-overflow:ellipsis}
.nav-tip.show{opacity:1;visibility:visible}
.kv-conn,.kv-tile,.kv-empty{background:var(--card);border:1px solid var(--glass-border);border-radius:14px}
.kv-conn{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px}
.kv-conn-l{display:flex;align-items:center;gap:12px}
.kv-conn-r{display:flex;gap:8px;flex-wrap:wrap}
.kv-ph{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.kv-ph-l{display:flex;align-items:center;gap:10px;min-width:0}
.kv-ph-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#000;flex:none}
.kv-ph-ic svg{width:19px;height:12px}
.kv-acct{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.kv-head-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kv-head-r .act{white-space:nowrap}
.kv-ph-mid{flex:1 1 280px;min-width:0;display:flex;justify-content:center}
.kv-ibar{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:.78rem;justify-content:center}
.kv-ib-status{display:flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap;font-weight:600}
.kv-ib-sep{width:1px;height:16px;background:var(--glass-border)}
.kv-ib-items{display:flex;gap:7px 13px;flex-wrap:wrap;align-items:center}
.kv-ib-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text)}
.kv-ib-item::before{content:'';width:8px;height:8px;border-radius:50%;background:#9aa6b8;flex:none}
.kv-ib-item.complete::before{background:#39d98a}
.kv-ib-item.syncing::before{background:#3a96ff}
.kv-ib-item.partial::before{background:#f5a623}
.kv-ib-item.blocked::before{background:#e0556e}
.kv-ib-item b{font-weight:800}
.kv-ib-spin{width:13px;height:13px;border:2px solid var(--glass-border);border-top-color:#3a96ff;border-radius:50%;animation:ibSpin .7s linear infinite;display:inline-block}
@keyframes ibSpin{to{transform:rotate(360deg)}}
/* a blocked/errored sync resource (e.g. events:read missing) surfaced as a visible note */
.kv-ib-note{display:flex;align-items:flex-start;gap:7px;margin-top:10px;padding:9px 11px;border-radius:9px;font-size:.76rem;line-height:1.45;color:var(--text);background:color-mix(in srgb,#e0556e 13%,transparent);border:1px solid color-mix(in srgb,#e0556e 35%,transparent)}
.kv-ib-note svg{width:15px;height:15px;flex:none;margin-top:1px;color:#e0556e}
/* ===== Auto-sync toggle (Integrations Manage drawer) — a pill switch ===== */
.ig-toggle{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none}
.ig-toggle input{position:absolute;opacity:0;width:0;height:0}
.ig-switch{flex:none;width:38px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--text) 18%,transparent);border:1px solid var(--glass-border);position:relative;transition:background .15s;margin-top:1px}
.ig-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ig-toggle input:checked + .ig-switch{background:var(--accent);border-color:transparent}
.ig-toggle input:checked + .ig-switch::after{transform:translateX(16px)}
.ig-toggle input:focus-visible + .ig-switch{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.ig-toggle-tx{display:flex;flex-direction:column;gap:2px}
.ig-toggle-tx b{font-size:.86rem}
.ig-toggle-tx small{color:var(--muted);font-size:.74rem;line-height:1.4}
/* ===== Klaviyo customer-events timeline (customer profile) ===== */
.cev-list{display:flex;flex-direction:column}
.cev-row{display:flex;align-items:flex-start;gap:10px;padding:8px 2px;border-bottom:1px solid var(--glass-border)}
.cev-row:last-child{border-bottom:0}
.cev-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:#9aa6b8}
.cev-dot.cev-buy{background:#39d98a}.cev-dot.cev-open{background:#3a96ff}.cev-dot.cev-click{background:#7c5cff}
.cev-dot.cev-recv{background:#48c1d6}.cev-dot.cev-view{background:#f5a623}.cev-dot.cev-bad{background:#e0556e}
.cev-main{flex:1;min-width:0}
.cev-h{font-size:.8rem;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cev-val{font-weight:800;color:#39d98a;font-size:.76rem}
.cev-d{font-size:.72rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
.cev-t{flex:none;font-size:.68rem;white-space:nowrap;padding-top:1px}
/* consolidated event group → clickable accordion */
.cev-grp{border-bottom:1px solid var(--glass-border)}
.cev-grp:last-child{border-bottom:0}
.cev-grp>summary{list-style:none;cursor:pointer;border-bottom:0}
.cev-grp>summary::-webkit-details-marker{display:none}
.cev-grp>summary:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.cev-sum{align-items:center}
.cev-cnt{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--text);font-size:.64rem;font-weight:800}
.cev-caret{flex:none;color:var(--muted);font-size:.7rem;transition:transform .15s;margin-top:1px}
.cev-grp[open]>summary .cev-caret{transform:rotate(180deg)}
.cev-acc{list-style:none;margin:0;padding:2px 0 8px 19px}
.cev-acc-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.74rem;padding:3px 8px 3px 0;border-bottom:1px dashed var(--glass-border)}
.cev-acc-item:last-child{border-bottom:0}
.cev-acc-t{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cev-acc-p{flex:none;font-weight:700;color:#39d98a;font-size:.72rem}
.kv-import{background:var(--card);border:1px solid var(--glass-border);border-radius:14px;padding:16px;margin-top:14px}
.kv-import-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.kv-import-actions{display:flex;align-items:center;gap:10px}
.kv-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px}
.kv-res{border:1px solid var(--glass-border);border-radius:11px;padding:11px 12px}
.kv-res-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.84rem;font-weight:600}
.kv-res-count{font-size:1.3rem;font-weight:800;margin-top:4px}
.kv-res-note{font-size:.74rem;color:var(--muted);margin-top:4px;line-height:1.35}
.kv-chip{font-size:.64rem;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap}
.kv-chip.complete{background:rgba(57,217,138,.16);color:#1f9d63}
.kv-chip.syncing{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.kv-chip.partial{background:rgba(245,166,35,.18);color:#c47f08}
.kv-chip.pending{background:rgba(150,160,175,.18);color:var(--muted)}
.kv-chip.blocked{background:rgba(255,90,90,.14);color:#d8503e}
.kv-tabs{display:flex;gap:6px;margin:16px 0 0}
.kv-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.86rem;padding:7px 10px;cursor:pointer}
.kv-tab.on{color:var(--text);border-bottom-color:var(--accent)}
.kv-tab svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
.kv-tab-reco.on{border-bottom-color:var(--accent2,#7a5af5)}
/* ===== Klaviyo Recommendations (Alicia) ===== */
.kvr-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 6px}
.kvr-bar-l{display:flex;align-items:center;gap:7px;font-size:.92rem}
.kvr-bar-l svg{width:17px;height:17px;color:var(--accent2,#7a5af5)}
.kvr-bar-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kvr-dsnote{font-size:.78rem;display:inline-flex;align-items:center;gap:5px}.kvr-dsnote svg{width:13px;height:13px}
.kvr-views{display:flex;gap:6px;margin:8px 0 14px}
.kvr-vt{background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);font:inherit;font-weight:600;font-size:.8rem;padding:6px 13px;border-radius:999px;cursor:pointer}
.kvr-vt.on{background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:transparent;color:var(--text)}
.kvr-empty{text-align:center;padding:48px 20px;border:1px dashed var(--glass-border);border-radius:16px;background:var(--card);margin-top:10px}
.kvr-empty svg{width:34px;height:34px;color:var(--accent2,#7a5af5);margin-bottom:6px}
.kvr-empty h3{margin:6px 0 6px}.kvr-empty p{max-width:560px;margin:0 auto;font-size:.9rem;line-height:1.6}
.kvr-seg,.kvr-month{margin-bottom:22px}
.kvr-seg-h,.kvr-month-h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.95rem;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--glass-border)}
.kvr-seg-h svg,.kvr-month-h svg{width:15px;height:15px;color:var(--muted)}
.kvr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.kvr-card{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid var(--glass-border);border-radius:13px;background:var(--card)}
.kvr-card.is-created{opacity:.86;border-color:color-mix(in srgb,#39d98a 45%,var(--glass-border))}
.kvr-card-top{display:flex;align-items:center;gap:6px}
.kvr-kind{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:999px}
.kvr-kind svg{width:12px;height:12px}
.kvr-email{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.kvr-flow{background:color-mix(in srgb,var(--accent2,#7a5af5) 18%,transparent);color:var(--accent2,#7a5af5)}
.kvr-title{font-weight:700;font-size:.95rem;line-height:1.3}
.kvr-subj{font-size:.8rem;color:var(--text);display:flex;align-items:center;gap:5px;opacity:.9}.kvr-subj svg{width:12px;height:12px;flex:none}
.kvr-rat{font-size:.8rem;color:var(--muted);line-height:1.5}
.kvr-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.kvr-chip{font-size:.68rem;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);padding:2px 8px;border-radius:999px}
.kvr-seg-chip{color:var(--text)}
.kvr-based{font-style:italic}
.kvr-actions{display:flex;align-items:center;gap:6px;margin-top:8px}
.kvr-actions .act-primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.kvr-actions svg{width:13px;height:13px}
.kvr-dismiss{width:32px;flex:none;color:var(--muted)}
.kvr-done{flex:1;display:inline-flex;align-items:center;gap:5px;color:#39d98a;font-size:.82rem;font-weight:700}.kvr-done svg{width:14px;height:14px}
/* Recommendations: Campaigns / Flows sub-tabs + forward-looking cadence header */
.kvr-subtabs{display:flex;gap:4px;margin:14px 0 4px;border-bottom:1px solid var(--glass-border)}
.kvr-subtab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;padding:8px 14px;cursor:pointer;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px}
.kvr-subtab:hover{color:var(--text)}
.kvr-subtab.on{color:var(--accent);border-bottom-color:var(--accent)}
.kvr-subtab svg{width:14px;height:14px}
.kvr-subn{font-size:.7rem;font-weight:800;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);padding:1px 7px;border-radius:999px}
.kvr-subtab.on .kvr-subn{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border-color:transparent}
.kvr-camp-header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;margin:12px 0 16px;border:1px solid var(--glass-border);border-radius:13px;background:var(--card)}
.kvr-ch-l{display:inline-flex;align-items:center;gap:7px;font-size:.92rem}.kvr-ch-l svg{width:16px;height:16px;color:var(--accent2,#7a5af5)}
.kvr-ch-pills{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kvr-freq{font-size:.8rem;font-weight:800;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);padding:4px 11px;border-radius:999px}
.kvr-days{font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text);padding:4px 11px;border-radius:999px}.kvr-days svg{width:13px;height:13px}
.kvr-ch-note{font-size:.74rem}
.kvr-datechip{font-weight:700;color:var(--text);display:inline-flex;align-items:center;gap:4px}.kvr-datechip svg{width:11px;height:11px}
/* ===== Klaviyo Settings: design system ===== */
.kv-ds{max-width:860px;margin-top:16px}
.kv-ds-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.kv-ds-head-actions,.kv-ds-upload-pair{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kv-ds-upload-pair{gap:4px}
.kv-ds-eye{width:36px;padding:7px;display:inline-flex;align-items:center;justify-content:center}
.kv-ds-eye svg{width:16px;height:16px}
.kv-ds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:12px}
.kv-ds-f{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted)}
.kv-ds-f.kv-ds-wide{grid-column:1/-1}
.kv-font-field .kv-ds-in{font-size:.92rem}
.kv-font-sample{display:block;min-height:30px;padding:7px 9px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass);color:var(--text);font-size:1rem;font-weight:400;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv-font-logo{font-size:1.45rem;line-height:1.05}
.kv-ds-toggle{min-height:70px;padding:10px 11px;border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--glass)}
.kv-ds-toggle .ig-toggle-tx b{font-size:.78rem}
.kv-ds-in{font:inherit;font-size:.85rem;font-weight:400;color:var(--text);background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;padding:8px 10px}
.kv-ds-color{display:flex;gap:6px;align-items:center}
.kv-ds-color input[type=color]{width:34px;height:34px;padding:0;border:1px solid var(--glass-border);border-radius:8px;background:none;cursor:pointer;flex:none}
.kv-ds-color .kv-ds-in{flex:1;min-width:0}
.kv-logo-instances{margin:-2px 0 16px;padding:12px;border:1px solid var(--glass-border);border-radius:14px;background:var(--glass)}
.kv-logo-inst-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.kv-logo-inst-head b{font-size:.8rem;color:var(--text)}
.kv-logo-inst-head span{font-size:.72rem}
.kv-logo-inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.kv-logo-inst{min-width:0;border:1px solid var(--glass-border);border-radius:12px;padding:10px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.kv-logo-inst-sample{min-height:58px;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:9px;background:rgba(255,255,255,.42);overflow:hidden}
.kv-logo-inst-sample img{display:block;max-width:100%;max-height:52px;object-fit:contain}
.kv-logo-inst-text{display:block;max-width:100%;font-size:1.65rem;line-height:1.04;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-logo-inst-meta{display:flex;flex-direction:column;gap:2px;margin-top:8px;min-width:0}
.kv-logo-inst-meta b{font-size:.72rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-logo-inst-meta span,.kv-logo-inst-meta code{font-size:.62rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-logo-inst-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.02em}
.kv-ds-imgtoggle{margin:8px 0 16px}
.kv-ds-actions{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.kv-ds-preview{border-top:1px solid var(--glass-border);padding-top:14px}
.kv-ds-pv-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.kv-ds-pv{box-sizing:border-box;margin:0 auto;padding:0;border-radius:12px;border:1px solid var(--glass-border);overflow:hidden}
.kv-ds-sec-h{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.82rem;color:var(--text);margin:6px 0 10px;padding-top:12px;border-top:1px solid var(--glass-border)}
/* Banner reference images: strip of thumbnails + a "+N" tile → full-screen gallery */
.kv-ref-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.kv-ref-thumb{width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--glass-border);background:var(--glass);flex:none}
.kv-ref-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kv-ref-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;border-style:dashed;color:var(--muted);font:inherit}
.kv-ref-more:hover{color:var(--text);border-color:var(--accent)}
.kv-ref-plus{font-size:1.1rem;font-weight:800;line-height:1}
.kv-ref-all{font-size:.58rem;text-transform:uppercase;letter-spacing:.04em}
.kv-ref-overlay{position:fixed;inset:0;z-index:9000;background:rgba(8,10,14,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.kv-ref-ov-card{background:var(--panel,var(--card));border:1px solid var(--glass-border);border-radius:16px;max-width:980px;width:100%;padding:18px 20px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.kv-ref-ov-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.kv-ref-ov-head b{display:inline-flex;align-items:center;gap:7px;font-size:1rem}.kv-ref-ov-head svg{width:17px;height:17px}
.kv-ref-ov-note{font-size:.78rem;margin-bottom:14px}
.kv-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.kv-ref-cell{border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;background:var(--glass)}
.kv-ref-cell img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.kv-ref-cell span{display:block;font-size:.68rem;color:var(--muted);padding:5px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-banner-ex-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.kv-banner-ex{margin:10px 0 4px}
.kv-banner-ex-img{display:block;width:100%;max-width:560px;border-radius:12px;border:1px solid var(--glass-border)}
.kv-ds-pv-hero{position:relative;overflow:hidden;background:var(--glass-strong);aspect-ratio:16/9;max-height:min(360px,56.25vw)}
.kv-ds-pv-hero>img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center}
.kv-ds-pv-hero[data-logo-contrast]::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:32%;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.52),rgba(255,255,255,.16) 58%,rgba(255,255,255,0))}
.kv-ds-pv-hero[data-logo-bg="dark"]::before{background:linear-gradient(to bottom,rgba(0,0,0,.46),rgba(0,0,0,.14) 58%,rgba(0,0,0,0))}
.kv-ds-pv-hero[data-logo-bg="light"]::before{background:linear-gradient(to bottom,rgba(255,255,255,.58),rgba(255,255,255,.18) 58%,rgba(255,255,255,0))}
.kv-ds-pv-hero-logo{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;max-width:55%;pointer-events:none;--kv-logo-preview:currentColor}
.kv-ds-pv-hero-logo[data-logo-bg="dark"]{--kv-logo-preview:#fff}
.kv-ds-pv-hero-logo[data-logo-bg="light"]{--kv-logo-preview:#111}
.kv-ds-pv-hero-logo[data-logo-bg="dark"] .kv-logo-img{filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.22))}
.kv-ds-pv-hero-logo[data-logo-bg="light"] .kv-logo-img{filter:brightness(0) drop-shadow(0 1px 3px rgba(255,255,255,.18))}
.kv-ds-pv-hero-logo .kv-logo-text{text-shadow:0 1px 4px rgba(0,0,0,.16)}
.kv-ds-pv-prod-img{height:58px;margin-bottom:6px;border-radius:5px;background:rgba(0,0,0,.035);overflow:hidden}
.kv-ds-pv-prod-img img{width:100%;height:100%;object-fit:cover;display:block}
.kv-ds-pv-section{box-sizing:border-box}
.kv-ds-sec-h svg{width:15px;height:15px;color:var(--muted)}
.kv-ds-in select,select.kv-ds-in{cursor:pointer}
.kv-import-overlay{position:fixed;inset:0;z-index:9300;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,10,14,.48);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 180ms ease}
.kv-import-overlay.open{opacity:1;pointer-events:auto}
.kv-import-modal{width:min(720px,100%);border:1px solid var(--glass-border);border-radius:18px;background:var(--panel,var(--card));box-shadow:0 28px 80px rgba(0,0,0,.45);padding:18px;color:var(--text)}
.kv-import-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.kv-import-head h3{margin:2px 0 0;font-size:1.16rem}
.kv-import-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kv-import-card{appearance:none;text-align:left;border:1px solid var(--glass-border);border-radius:15px;background:var(--glass);color:var(--text);padding:15px;display:flex;flex-direction:column;gap:7px;min-height:150px;font:inherit;cursor:pointer}
.kv-import-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.kv-import-card>span{width:34px;height:34px;border-radius:10px;background:var(--glass-strong);display:grid;place-items:center;color:var(--accent)}
.kv-import-card svg{width:17px;height:17px}
.kv-import-card b{font-size:.92rem}
.kv-import-card small{color:var(--muted);font-size:.75rem;line-height:1.45}
.kv-import-crawl{cursor:default}
.kv-import-crawl:hover{transform:none}
.kv-import-urlrow{display:flex;align-items:center;gap:7px;margin-top:auto}
.kv-import-urlrow .kv-ds-in{flex:1;min-width:0}
.kv-import-status{min-height:20px;margin-top:12px;font-size:.78rem}
.kv-import-status.err{color:#ff9b9b}
/* Uploaded design-system preview: modal scrim + right-to-left editorial drawer */
body.kv-dsp-open{overflow:hidden}
.kv-dsp-overlay{position:fixed;inset:0;z-index:9200;background:rgba(10,10,9,.2);opacity:0;transition:opacity 300ms ease;pointer-events:none}
.kv-dsp-overlay.open{opacity:1;pointer-events:auto}
.kv-dsp-drawer{position:absolute;inset:0 0 0 auto;width:min(760px,94vw);display:flex;flex-direction:column;background:#fbf8f3;color:#1c1a17;box-shadow:-24px 0 60px rgba(28,26,23,.2);transform:translateX(100%);transition:transform 450ms cubic-bezier(.22,1,.36,1);overflow:hidden}
.kv-dsp-overlay.open .kv-dsp-drawer{transform:translateX(0)}
.kv-dsp-overline{display:block;font-size:9px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:#8a7e6d}
.kv-dsp-close{width:38px;height:38px;flex:none;border:1px solid rgba(28,26,23,.12);border-radius:999px;background:transparent;color:#1c1a17;font:400 16px/1 sans-serif;cursor:pointer;transition:background 150ms ease,transform 150ms ease}
.kv-dsp-close:hover{background:#f4f0ea;transform:rotate(4deg)}
.kv-dsp-floating-close{position:absolute;top:16px;right:16px;z-index:6;background:rgba(251,248,243,.92);box-shadow:0 10px 30px rgba(28,26,23,.14)}
.kv-dsp-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:#fbf8f3}
.kv-dsp-sheet{--kv-dsp-paper:#fbf8f3;--kv-dsp-bone:#f4f0ea;--kv-dsp-ink:#1c1a17;--kv-dsp-soft:#3a362f;--kv-dsp-taupe:#8a7e6d;--kv-dsp-bronze:#6b4f2c;--kv-dsp-moss:#5b6a45;--kv-dsp-display:"Cormorant Garamond",Georgia,serif;--kv-dsp-body:"Inter Tight",Helvetica,Arial,sans-serif;--kv-dsp-wordmark:"Cormorant Garamond",Georgia,serif;background:var(--kv-dsp-paper);color:var(--kv-dsp-ink);font-family:var(--kv-dsp-body)}
.kv-dsp-cover{position:relative;min-height:460px;padding:56px 52px 46px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;background:radial-gradient(circle at 85% 18%,color-mix(in srgb,var(--kv-dsp-bronze) 20%,transparent),transparent 36%),linear-gradient(145deg,var(--kv-dsp-paper),var(--kv-dsp-bone));overflow:hidden;isolation:isolate}
.kv-dsp-cover>*:not(.kv-dsp-cover-img):not(.kv-dsp-cover-shade){position:relative;z-index:2}
.kv-dsp-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.kv-dsp-cover-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,26,23,.12),rgba(28,26,23,.08) 34%,rgba(251,248,243,.94) 82%,var(--kv-dsp-paper))}
.kv-dsp-cover.has-banner .kv-dsp-wordmark{text-shadow:0 1px 12px rgba(251,248,243,.34),0 1px 4px rgba(28,26,23,.16)}
.kv-dsp-kicker,.kv-dsp-section-head span{font:500 10px/1.3 var(--kv-dsp-body);letter-spacing:.28em;text-transform:uppercase;color:var(--kv-dsp-taupe)}
.kv-dsp-wordmark{font:400 54px/1 var(--kv-dsp-wordmark);color:var(--kv-dsp-ink)}
.kv-dsp-cover .kv-dsp-wordmark{margin-bottom:auto}
.kv-dsp-cover h2{max-width:590px;margin:0 0 20px;font:300 clamp(38px,6.6vw,62px)/1.02 var(--kv-dsp-display);letter-spacing:-.02em;color:var(--kv-dsp-ink)}
.kv-dsp-cover h2 em,.kv-dsp-duo h3 em,.kv-dsp-type-display em{font-style:italic;color:var(--kv-dsp-bronze)}
.kv-dsp-cover p{max-width:560px;margin:0;color:var(--kv-dsp-soft);font:400 15px/1.7 var(--kv-dsp-body)}
.kv-dsp-count{margin-top:25px;padding-top:14px;border-top:1px solid rgba(28,26,23,.12);width:100%;font:500 10px/1.4 var(--kv-dsp-body);letter-spacing:.16em;text-transform:uppercase;color:var(--kv-dsp-taupe)}
.kv-dsp-nav{display:flex;gap:6px;overflow-x:auto;padding:12px 22px;border-block:1px solid rgba(28,26,23,.1);background:var(--kv-dsp-paper);scrollbar-width:none}
.kv-dsp-nav::-webkit-scrollbar{display:none}.kv-dsp-nav span{flex:none;padding:7px 12px;border:1px solid rgba(28,26,23,.12);border-radius:100px;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--kv-dsp-soft)}
.kv-dsp-section{padding:60px 52px;background:var(--kv-dsp-paper);border-bottom:1px solid rgba(28,26,23,.1)}
.kv-dsp-section:nth-of-type(even){background:var(--kv-dsp-bone)}
.kv-dsp-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:15px;margin-bottom:28px;border-bottom:1px solid rgba(28,26,23,.12)}
.kv-dsp-section-head small{font:400 11px/1.4 var(--kv-dsp-body);color:var(--kv-dsp-taupe)}
.kv-dsp-duo{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.kv-dsp-duo article{min-width:0}.kv-dsp-duo h3{font:300 34px/1.08 var(--kv-dsp-display);letter-spacing:-.015em;margin:20px 0 16px}.kv-dsp-duo p,.kv-dsp-duo li{font-size:13px;line-height:1.65;color:var(--kv-dsp-soft)}.kv-dsp-duo ul{padding-left:18px;margin:14px 0 0}
.kv-dsp-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px}.kv-dsp-swatch{min-width:0}.kv-dsp-swatch>span{display:block;aspect-ratio:1;border-radius:6px;background:var(--kv-dsp-swatch,#f4f0ea);box-shadow:inset 0 0 0 1px rgba(28,26,23,.08)}.kv-dsp-swatch b{display:block;margin-top:8px;font:500 11px/1.2 var(--kv-dsp-body)}.kv-dsp-swatch code{display:block;margin-top:3px;color:var(--kv-dsp-taupe);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-dsp-type-display{font:300 clamp(35px,6vw,56px)/1.04 var(--kv-dsp-display);letter-spacing:-.015em;max-width:610px}.kv-dsp-section-title{max-width:620px;margin-top:34px;font-family:var(--kv-dsp-section-font,var(--kv-dsp-display));font-size:var(--kv-dsp-section-size,42px);font-weight:var(--kv-dsp-section-weight,300);line-height:var(--kv-dsp-section-leading,1.05);letter-spacing:var(--kv-dsp-section-tracking,-.015em);color:var(--kv-dsp-section-color,var(--kv-dsp-ink))}.kv-dsp-section-title em{font-style:var(--kv-dsp-section-em-style,italic);color:var(--kv-dsp-section-em,var(--kv-dsp-bronze))}.kv-dsp-type-body{max-width:560px;margin-top:22px;font:400 15px/1.7 var(--kv-dsp-body);color:var(--kv-dsp-soft)}.kv-dsp-type-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:42px;padding-top:20px;border-top:1px solid rgba(28,26,23,.12)}.kv-dsp-type-row .kv-dsp-wordmark{font-size:34px}.kv-dsp-eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--kv-dsp-taupe)}.kv-dsp-type-row code{font-size:9px;letter-spacing:.14em;color:var(--kv-dsp-taupe)}
.kv-dsp-space-bars{display:flex;flex-direction:column;gap:9px}.kv-dsp-space-bars span{width:var(--w,25%);height:24px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;border-radius:2px;background:color-mix(in srgb,var(--kv-dsp-bronze) 18%,var(--kv-dsp-bone));color:var(--kv-dsp-bronze);font:500 9px/1 var(--kv-dsp-body)}.kv-dsp-layout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.kv-dsp-layout-grid span{padding:16px 10px;border:1px solid rgba(28,26,23,.12);border-radius:6px;text-align:center;font-size:10px;color:var(--kv-dsp-soft)}
.kv-dsp-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kv-dsp-form-grid>div{min-height:92px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--kv-dsp-paper);border:1px solid rgba(28,26,23,.08);font:300 27px/1 var(--kv-dsp-display)}.kv-dsp-form-grid small{margin-top:6px;color:var(--kv-dsp-taupe);font:500 9px/1 var(--kv-dsp-body);letter-spacing:.14em;text-transform:uppercase}.kv-dsp-motion{display:flex;gap:8px;margin-top:18px}.kv-dsp-motion span{flex:1;padding:10px;border-left:2px solid var(--kv-dsp-bronze);background:rgba(255,255,255,.35);font-size:10px;color:var(--kv-dsp-soft)}
.kv-dsp-components{background:var(--kv-dsp-bone)}.kv-dsp-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.kv-dsp-buttons button{appearance:none;border:0;padding:15px 22px;border-radius:100px;background:var(--kv-dsp-ink);color:var(--kv-dsp-paper);font:500 9px/1 var(--kv-dsp-body);letter-spacing:.2em;text-transform:uppercase}.kv-dsp-buttons button.bronze{background:var(--kv-dsp-bronze)}.kv-dsp-buttons button.ghost{background:transparent;color:var(--kv-dsp-ink);box-shadow:inset 0 0 0 1px rgba(28,26,23,.12)}.kv-dsp-buttons a{padding-bottom:3px;border-bottom:1px solid currentColor;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.kv-dsp-chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 32px}.kv-dsp-chips span{padding:7px 13px;border-radius:100px;background:var(--kv-dsp-bone);color:var(--kv-dsp-soft);font-size:10px}.kv-dsp-chips .selected{background:var(--kv-dsp-bronze);color:var(--kv-dsp-paper)}
.kv-dsp-product{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:30px;align-items:end}.kv-dsp-product-img{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:radial-gradient(circle at 62% 20%,rgba(255,255,255,.7),transparent 28%),linear-gradient(145deg,#eae3d8,#c9b49b)}.kv-dsp-product-img>img{width:100%;height:100%;object-fit:cover;display:block}.kv-dsp-bottle{position:absolute;width:38%;height:52%;left:31%;bottom:12%;border-radius:7px 7px 12px 12px;background:linear-gradient(100deg,#111,#393631 50%,#0a0a09);box-shadow:18px 25px 35px rgba(28,26,23,.25)}.kv-dsp-bottle:before{content:"";position:absolute;width:48%;height:22%;left:26%;top:-19%;border-radius:4px 4px 1px 1px;background:#24221f}.kv-dsp-sale{position:absolute;z-index:2;top:14px;left:14px;padding:5px 9px;border-radius:2px;background:var(--kv-dsp-moss);color:var(--kv-dsp-paper);font-size:8px;letter-spacing:.16em;text-transform:uppercase}.kv-dsp-heart{position:absolute;z-index:2;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(28,26,23,.12);border-radius:999px;background:rgba(251,248,243,.9);font-size:16px}.kv-dsp-product-copy h3{font:400 32px/1.05 var(--kv-dsp-display);margin:0}.kv-dsp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0}.kv-dsp-price s{color:var(--kv-dsp-taupe);font-size:12px}.kv-dsp-price em{font:italic 28px/1 var(--kv-dsp-display)}.kv-dsp-price b{padding:5px 9px;border-radius:100px;background:var(--kv-dsp-moss);color:var(--kv-dsp-paper);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.kv-dsp-product-copy p{font:italic 16px/1.4 var(--kv-dsp-display);color:var(--kv-dsp-soft)}.kv-dsp-stars{color:var(--kv-dsp-bronze);font-size:13px;letter-spacing:2px}.kv-dsp-stars span{color:var(--kv-dsp-soft);font:400 11px/1 var(--kv-dsp-body);letter-spacing:0}
.kv-dsp-art{background:var(--kv-dsp-ink)!important;color:var(--kv-dsp-paper)}.kv-dsp-art .kv-dsp-section-head{border-color:rgba(251,248,243,.18)}.kv-dsp-art .kv-dsp-section-head span,.kv-dsp-art .kv-dsp-section-head small{color:color-mix(in srgb,var(--kv-dsp-paper) 60%,transparent)}.kv-dsp-art-frame{position:relative;height:290px;overflow:hidden;border-radius:8px;background:linear-gradient(145deg,#b7926d,#7a573c 45%,#302a25);isolation:isolate}.kv-dsp-art-orb{position:absolute;width:260px;height:260px;border-radius:50%;top:-120px;right:-30px;background:rgba(255,208,139,.4);filter:blur(25px)}.kv-dsp-art-object{position:absolute;width:110px;height:160px;left:46%;bottom:30px;border-radius:8px 8px 14px 14px;background:linear-gradient(100deg,#090909,#393631 52%,#080808);box-shadow:60px 35px 55px rgba(0,0,0,.48)}.kv-dsp-art-frame>span{position:absolute;left:24px;bottom:24px;font:italic 18px/1.55 var(--kv-dsp-display);color:var(--kv-dsp-paper)}.kv-dsp-art-rules{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:22px}.kv-dsp-art-rules span{font-size:10px;line-height:1.5;color:color-mix(in srgb,var(--kv-dsp-paper) 67%,transparent)}.kv-dsp-art-rules b{display:block;margin-bottom:7px;font:300 26px/1 var(--kv-dsp-display);color:var(--kv-dsp-paper)}
.kv-dsp-footer{padding:54px 52px 62px;background:var(--kv-dsp-ink);border-top:1px solid rgba(251,248,243,.12);color:var(--kv-dsp-paper)}.kv-dsp-footer .kv-dsp-wordmark{color:var(--kv-dsp-paper);font-size:44px}.kv-dsp-footer p{max-width:440px;margin:15px 0 25px;font-size:12px;line-height:1.65;color:color-mix(in srgb,var(--kv-dsp-paper) 62%,transparent)}.kv-dsp-footer code{font-size:9px;letter-spacing:.16em;color:color-mix(in srgb,var(--kv-dsp-paper) 45%,transparent)}
@media(max-width:620px){
  .kv-import-grid{grid-template-columns:1fr}.kv-import-urlrow{flex-direction:column;align-items:stretch}
  .kv-dsp-cover{min-height:400px;padding:44px 28px 36px}.kv-dsp-floating-close{top:12px;right:12px}.kv-dsp-section{padding:46px 28px}.kv-dsp-duo{grid-template-columns:1fr}.kv-dsp-swatches{grid-template-columns:repeat(2,1fr)}.kv-dsp-form-grid{grid-template-columns:repeat(2,1fr)}.kv-dsp-layout-grid{grid-template-columns:1fr}.kv-dsp-product{grid-template-columns:1fr}.kv-dsp-product-img{max-width:270px}.kv-dsp-art-rules{grid-template-columns:1fr 1fr}.kv-dsp-footer{padding:44px 28px 50px}
}
/* Layout rules */
.kvr-ab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px dashed var(--glass-border);border-radius:10px;margin-bottom:12px;font-size:.84rem}
.kvr-ab svg{width:14px;height:14px;vertical-align:-2px}
.kvr-ab-on{border-style:solid;background:color-mix(in srgb,var(--accent2,#7a5af5) 10%,transparent);border-color:color-mix(in srgb,var(--accent2,#7a5af5) 35%,transparent)}
.kvr-rule-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.kvr-rule-add .kv-ds-in{flex:0 0 auto}.kvr-rule-add #kvRuleSeg{flex:1;min-width:160px}
.kvr-rules-list{display:flex;flex-direction:column;gap:8px}
.kvr-rule{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid var(--glass-border);border-radius:11px;background:var(--card)}
.kvr-rule-cols{font-weight:700;font-size:.9rem}
.kvr-rule-rat{font-size:.78rem;margin-top:2px;line-height:1.4}
.kvr-rule-side{display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.kvr-rule-by{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:999px}
.kvr-rule-by svg{width:12px;height:12px}
.kvr-by-agent{background:color-mix(in srgb,var(--accent2,#7a5af5) 16%,transparent);color:var(--accent2,#7a5af5)}
.kvr-by-user{background:var(--glass);border:1px solid var(--glass-border);color:var(--text)}
/* email-editor product grid block (pgrid) */
.em-pg{display:grid;gap:14px}
.em-pg-cell{position:relative;text-align:center;border:1px solid #eee;border-radius:8px;padding:10px;background:#fff;color:#222}
.em-pg-cell img{width:100%;border-radius:6px;display:block;margin-bottom:6px}
.em-pg-nm{font-size:13px;font-weight:700;line-height:1.3}
.em-pg-meta{font-size:12px;opacity:.8;margin-top:2px}
.em-pg-btn{display:inline-block;margin-top:7px;padding:6px 14px;font-size:12px;font-weight:700}
.em-pg-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:11px;cursor:pointer;line-height:1;display:none}
.em-pg-cell:hover .em-pg-del{display:block}
/* Klaviyo insights (Settings tab) */
.kvi-wrap{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.kvi-feat{display:flex;flex-wrap:wrap;gap:8px}
.kvi-chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:5px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border)}
.kvi-chip b{font-weight:800}
.kvi-up{color:#39d98a}.kvi-down{color:#e0556e}
.kvi-subs{display:flex;flex-direction:column;gap:5px}
.kvi-sub{font-size:.8rem;display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:8px;background:var(--glass);border:1px solid var(--glass-border)}
.kvi-sub .muted{flex:none}
.kvi-layout{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.kv-tbl-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}
.kv-tbl-bar .sp{flex:1}
.kv-search{background:var(--card);border:1px solid var(--glass-border);border-radius:9px;padding:7px 11px;color:var(--text);font:inherit;font-size:.85rem;min-width:200px}
.kv-tbl-scroll{overflow-x:auto;border:1px solid var(--glass-border);border-radius:12px}
.kv-tbl{width:100%;border-collapse:collapse;font-size:.83rem;white-space:nowrap}
.kv-tbl th,.kv-tbl td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--glass-border)}
.kv-tbl th{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:800;position:sticky;top:0;background:var(--card)}
.kv-tbl tbody tr:last-child td{border-bottom:none}
.kv-tbl td.r,.kv-tbl th.r{text-align:right}
.kv-tbl .kv-sub{font-size:.74rem;color:var(--muted);white-space:normal;max-width:340px}
.kv-tbl th.kv-th{cursor:pointer;user-select:none;white-space:nowrap}
.kv-tbl th.kv-th:hover{color:var(--text)}
.kv-tbl th .kv-sar{color:var(--accent);font-size:.7rem}
.kv-cname{display:flex;align-items:center;gap:7px}
.kv-eye{background:none;border:none;cursor:pointer;font-size:.95rem;line-height:1;padding:0;opacity:.6;flex:none}
.kv-eye:hover{opacity:1}
.kv-clink{color:var(--accent);cursor:pointer;font-weight:600;white-space:normal}
.kv-clink:hover{text-decoration:underline}
.kv-modal-card{max-width:940px;width:96vw;max-height:90vh;overflow:auto}
.kv-email-frame{width:100%;height:68vh;border:1px solid var(--glass-border);border-radius:10px;background:#fff}
.kv-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:14px 0}
.kv-stat{border:1px solid var(--glass-border);border-radius:11px;padding:10px 12px}
.kv-stat .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.kv-stat .v{font-size:1.12rem;font-weight:800;margin-top:3px}
.kv-var-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:12px}
.kv-var{border:1px solid var(--glass-border);border-radius:12px;padding:13px}
.kv-var.win{border-color:#39d98a;box-shadow:0 0 0 3px rgba(57,217,138,.14)}
.kv-var h5{margin:0;font-size:.92rem}.kv-var .subj{font-size:.84rem;margin:5px 0 8px}
.kv-win{display:inline-block;background:rgba(57,217,138,.16);color:#1f9d63;font-size:.64rem;font-weight:800;padding:2px 8px;border-radius:999px;flex:none}
.kv-chips{display:flex;flex-wrap:wrap;gap:6px}
.kv-aud-chip{background:var(--card);border:1px solid var(--glass-border);border-radius:999px;padding:3px 10px;font-size:.78rem}
.kv-badge-ab{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:.64rem;font-weight:800;padding:2px 9px;border-radius:999px}
:root{--kv-drawer-w:560px}
.wrap{transition:padding-right .3s cubic-bezier(.4,0,.2,1)}
body.kv-shift .wrap{padding-right:calc(26px + min(var(--kv-drawer-w),94vw))}
.kv-drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--kv-drawer-w),94vw);background:var(--card);border-left:1px solid var(--glass-border);box-shadow:-16px 0 48px rgba(10,20,40,.22);transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:var(--z-drawer);display:flex;flex-direction:column}
.kv-drawer.open{transform:translateX(0)}
#kvCampBody{flex:1;min-height:0;display:flex;flex-direction:column}
.kv-dh{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--glass-border)}
.kv-dh h3{margin:0;font-size:1.04rem;line-height:1.25}
.kv-dh-actions{display:flex;gap:8px;align-items:center;flex:none}
.kv-dx{background:none;border:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 2px}.kv-dx:hover{color:var(--text)}
.kv-db{flex:1;overflow-y:auto;padding:16px 18px}
.kv-hero{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv-hero-rev{grid-column:1/-1;background:linear-gradient(135deg,color-mix(in srgb,#39d98a 16%,transparent),color-mix(in srgb,var(--accent) 10%,transparent));border:1px solid var(--glass-border);border-radius:14px;padding:15px 16px}
.kv-hero-rev .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.kv-hero-rev .v{font-size:1.85rem;font-weight:800;margin-top:2px}
.kv-mtile{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:12px;padding:11px 12px}
.kv-mtile .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.kv-mtile .v{font-size:1.25rem;font-weight:800;margin-top:3px}
.kv-card{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:14px;padding:14px;margin-top:13px}
.kv-card h4{margin:0 0 10px;font-size:.88rem}
.kv-chart{position:relative;height:190px}
.kv-emails{display:flex;flex-direction:column;gap:14px}
.kv-email-cap{margin-bottom:6px}
.kv-email-inline{height:520px}
.em-editor{position:fixed;inset:0;z-index:300;background:var(--bg,#0e1320);display:none;flex-direction:column}
.em-editor.open{display:flex}
.em-editor.em-drawer{display:flex;left:auto;right:0;width:min(960px,82vw);transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-18px 0 50px rgba(10,20,40,.28);z-index:var(--z-drawer)}
.em-editor.em-drawer.open{transform:translateX(0)}
#flEditor{transition:padding-right .3s cubic-bezier(.4,0,.2,1)}
#flEditor.fl-pushed{padding-right:min(960px,82vw)}
.sms-body{flex:1;display:grid;grid-template-columns:1fr 360px;min-height:0;overflow:hidden}
@media(max-width:760px){.sms-body{grid-template-columns:1fr}}
.sms-compose{padding:20px;overflow:auto;border-right:1px solid var(--glass-border)}
.sms-tb{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sms-tb button{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:8px;padding:7px 11px;color:var(--text);font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px}
.sms-tb button:hover{border-color:var(--accent)}
.sms-ta{width:100%;min-height:170px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:12px;padding:13px;color:var(--text);font:inherit;font-size:.95rem;line-height:1.5;resize:vertical}
.sms-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.8rem;color:var(--muted)}.sms-meta b{color:var(--text)}
.sms-pers-menu{position:relative}.sms-pers-list{position:absolute;top:calc(100% + 5px);left:0;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.32);padding:6px;z-index:var(--z-dropdown);min-width:210px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;display:none}
.sms-pers-menu.open .sms-pers-list{display:block}
.sms-pers-list button{width:100%;justify-content:space-between;background:none;border:none;border-radius:7px;padding:8px 10px;color:var(--text);font-weight:600}
.sms-pers-list button:hover{background:var(--glass-strong)}.sms-pers-list .mt{color:var(--muted);font-size:.74rem;font-weight:500}
.sms-mms{margin-top:13px;position:relative;display:inline-block}.sms-mms img{max-width:170px;border-radius:10px;border:1px solid var(--glass-border);display:block}
.sms-mms .rm{position:absolute;top:-9px;right:-9px;width:23px;height:23px;border-radius:50%;background:#ff5a5a;color:#fff;border:none;cursor:pointer;font-size:.9rem}
.sms-toggle{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:.85rem;cursor:pointer}.sms-toggle input{width:auto}
.sms-preview{background:#e9edf3;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.sms-phone{width:296px;background:#fff;border-radius:34px;box-shadow:0 14px 44px rgba(20,40,80,.2);padding:44px 14px 30px;min-height:470px;border:7px solid #11131a}
.sms-phone-hdr{text-align:center;font-size:.78rem;color:#8b94a6;margin-bottom:16px;font-weight:700}
.sms-bubble{background:#e9e9eb;color:#111;border-radius:18px;padding:10px 13px;font-size:.92rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;max-width:236px}
.sms-bubble img{max-width:100%;border-radius:13px;margin-bottom:7px;display:block}
.em-top{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--glass-border);background:var(--card)}
.em-name{background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text);font:inherit;font-weight:700;font-size:1rem;min-width:220px;padding:6px 8px}
.em-name:focus{border-color:var(--glass-border);outline:none}
.em-pers{position:relative}
.em-pers-list{position:absolute;top:calc(100% + 5px);left:0;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.34);padding:6px;z-index:var(--z-dropdown);min-width:220px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;display:none}
.em-pers.open .em-pers-list{display:block}
.em-pers-list button{display:flex;justify-content:space-between;gap:12px;width:100%;background:none;border:none;border-radius:7px;padding:8px 10px;color:var(--text);font:inherit;font-weight:600;font-size:.84rem;cursor:pointer;text-align:left}
.em-pers-list button:hover{background:var(--glass-strong)}.em-pers-list .mt{color:var(--muted);font-size:.74rem;font-weight:500}
.em-top .sp{flex:1}
.em-main{flex:1;display:grid;grid-template-columns:190px 1fr 286px;min-height:0}
@media(max-width:980px){.em-main{grid-template-columns:1fr}}
.em-pal{border-right:1px solid var(--glass-border);padding:14px;overflow:auto;background:var(--card)}
.em-pal h5,.em-insp h5{margin:0 0 9px;font-size:.68rem;text-transform:uppercase;color:var(--muted);letter-spacing:.06em;font-weight:800}
.em-pal button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:9px;padding:9px 11px;color:var(--text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;margin-bottom:7px}
.em-pal button:hover{border-color:var(--accent)}
.em-canvas-wrap{overflow:auto;padding:26px;display:flex;justify-content:center;background:#c9cdd6}
.em-canvas{width:600px;max-width:100%;background:#fff;min-height:420px;align-self:flex-start;box-shadow:0 8px 34px rgba(0,0,0,.22);color:#222}
.em-blk{position:relative;outline:2px solid transparent;transition:outline-color .1s}
.em-blk:hover{outline-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.em-blk.sel{outline-color:var(--accent)}
.em-blk-ctl{position:absolute;top:4px;right:4px;display:none;gap:3px;background:var(--accent);border-radius:7px;padding:3px;z-index:2}
.em-blk.sel .em-blk-ctl{display:flex}
.em-blk-ctl button{background:rgba(255,255,255,.2);border:none;color:#fff;width:23px;height:23px;border-radius:5px;cursor:pointer;font-size:.82rem;line-height:1}
.em-blk-ctl button:hover{background:rgba(255,255,255,.35)}
.em-blk [contenteditable]:focus{outline:2px dashed color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}
.em-insp{border-left:1px solid var(--glass-border);padding:14px;overflow:auto;background:var(--card)}
.em-f{margin-bottom:11px}.em-f label{display:block;font-size:.74rem;color:var(--muted);margin-bottom:4px;font-weight:600}
.em-f input,.em-f select{width:100%;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:8px;padding:7px 9px;color:var(--text);font:inherit;font-size:.84rem}
.em-f input[type=color]{padding:2px;height:34px}
.em-row{display:flex;gap:8px}.em-row>*{flex:1;margin-bottom:0}
.em-seg{display:flex;gap:4px}.em-seg button{flex:1;padding:6px;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:7px;color:var(--text);cursor:pointer;font-size:.8rem}
.em-seg button.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700;border-color:transparent}
.em-prev{position:absolute;inset:0;background:#c9cdd6;display:none;flex-direction:column;z-index:5}
.em-prev.open{display:flex}
.em-prev-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--glass-border)}
.em-prev iframe{flex:1;border:none;background:#fff}
.fl-canvas{position:relative;flex:1;overflow:auto;background:#f4f6fa;background-image:radial-gradient(circle,#d4d9e3 1.1px,transparent 1.1px);background-size:22px 22px}
.fl-sizer{position:relative}
.fl-inner{position:absolute;top:0;left:0;transform-origin:0 0}
.fl-canvas{scrollbar-width:thin;scrollbar-color:rgba(120,132,155,.35) transparent}
.fl-canvas{cursor:grab}.fl-canvas.panning{cursor:grabbing}
.fl-node,.fl-node-h,.fl-nb{cursor:grab}
.fl-status-menu{position:relative}
.fl-status-list{position:absolute;top:calc(100% + 6px);right:0;min-width:236px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 16px 44px rgba(20,40,80,.34);padding:6px;display:none;z-index:var(--z-dropdown)}
.fl-status-menu.open .fl-status-list{display:block}
.fl-status-list button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;background:none;border:none;padding:9px 11px;border-radius:9px;cursor:pointer}
.fl-status-list button:hover{background:rgba(120,140,180,.12)}
.fl-status-list button b{font-weight:700;font-size:.86rem}
.fl-status-list button span{font-size:.74rem;color:var(--muted)}
.fl-canvas::-webkit-scrollbar{width:10px;height:10px}
.fl-canvas::-webkit-scrollbar-thumb{background:rgba(120,132,155,.28);border-radius:6px;border:3px solid transparent;background-clip:content-box}
.fl-canvas::-webkit-scrollbar-thumb:hover{background:rgba(120,132,155,.5);background-clip:content-box}
.fl-canvas::-webkit-scrollbar-corner{background:transparent}
.fl-toolbar{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;gap:8px;z-index:8}
.fl-tb{width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid #e3e7ef;box-shadow:0 3px 13px rgba(30,50,90,.14);cursor:pointer;font-size:1.05rem;display:grid;place-items:center}
.fl-tb:hover{border-color:#3a7bff;background:#f6f9ff}
.fl-zoom{display:flex;align-items:center;background:#fff;border:1px solid #e3e7ef;border-radius:10px;box-shadow:0 3px 13px rgba(30,50,90,.14);overflow:hidden}
.fl-zoom button{width:34px;height:38px;border:none;background:none;cursor:pointer;font-size:1.15rem;color:#3a4252}
.fl-zoom button:hover{background:#f4f6fa}
.fl-zoom span{min-width:50px;text-align:center;font-size:.82rem;font-weight:700;color:#2b3340;border-left:1px solid #eef1f6;border-right:1px solid #eef1f6;line-height:38px}
.fl-pop{position:absolute;width:280px;max-height:74%;overflow:auto;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 18px 50px rgba(20,40,80,.36);padding:14px;z-index:9;display:none}
.fl-pop-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:.95rem}
.fl-pop-h button{background:none;border:none;color:var(--muted);font-size:1.05rem;cursor:pointer}
.fl-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fl-lines path{fill:none;stroke:#aab2c2;stroke-width:2.2}
.fl-lines path.fl-tmp{stroke:#3a7bff;stroke-width:2.2;stroke-dasharray:6 4}
#flArrow path{fill:#aab2c2 !important;stroke:none}
#flArrowB path{fill:#3a7bff !important;stroke:none}
.fl-node{position:absolute;width:266px;background:#fff;border:1.5px solid #e3e7ef;border-radius:15px;box-shadow:0 6px 24px rgba(30,50,90,.10);z-index:2}
.fl-node.sel{border-color:#3a7bff;box-shadow:0 0 0 3px rgba(58,123,255,.16)}
.fl-node.err{border-color:#ff6363;box-shadow:0 0 0 3px rgba(255,99,99,.14)}
.fl-node-h{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:14px 14px 0 0;font-weight:700;font-size:.92rem;cursor:grab}
.fl-node-h:active{cursor:grabbing}
.fl-node-h .fl-ic{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:.9rem;flex:none}
.h-trigger{background:#eceff4;color:#3c4453}.h-trigger .fl-ic{background:#69748a}
.h-sms{background:#e4f7ec;color:#1d9a60}.h-sms .fl-ic{background:#2bbd76}
.h-email{background:#e7f0ff;color:#2f7fd9}.h-email .fl-ic{background:#3a7bff}
.h-delay{background:#fdf0d8;color:#bf7c05}.h-delay .fl-ic{background:#f5a623}
.h-condition{background:#efe9fd;color:#7a5af5}.h-condition .fl-ic{background:#7a5af5}
.h-randomizer{background:#e1f4fb;color:#1c93c7}.h-randomizer .fl-ic{background:#33b6e6}
.fl-nb{padding:12px 14px;color:#222}
.fl-frow{margin-bottom:9px}.fl-frow:last-child{margin-bottom:0}
.fl-frow .l{font-size:.72rem;color:#8b94a6;margin-bottom:1px}.fl-frow .v{font-size:.86rem;font-weight:600;color:#2b3340}
.fl-title{font-size:1rem;font-weight:700;color:#2b3340;margin-bottom:8px}
.fl-del{position:absolute;top:9px;right:10px;background:rgba(20,30,50,.06);border:none;color:#5a6273;width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:.74rem;display:none;z-index:3}
.fl-node.sel .fl-del{display:block}
.fl-next{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid #eef1f6;color:#3a7bff;font-weight:600;font-size:.84rem;cursor:pointer;justify-content:flex-end}
.fl-next:hover{background:#f6f9fc}
.fl-next.branch{justify-content:space-between}
.fl-next .dot{width:15px;height:15px;border-radius:50%;border:2px solid #9aa3b2;flex:none;background:#fff;transition:.12s}
.fl-next:hover .dot{border-color:#3a7bff}
.fl-next .dot.on{border-color:#3a7bff;background:#3a7bff;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(58,123,255,.25)}
.fl-ctl-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
.fl-conn-ctl{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:5px}
.cc-add{width:30px;height:30px;border-radius:9px;background:#eaf1ff;border:1px solid #cfe0ff;color:#3a7bff;cursor:pointer;font-size:1.2rem;line-height:1;display:grid;place-items:center;box-shadow:0 2px 9px rgba(58,123,255,.18);opacity:0;transition:.12s}
.fl-conn-ctl:hover .cc-add{opacity:1;background:#3a7bff;color:#fff}
.cc-del{width:27px;height:27px;border-radius:8px;background:#fff;border:1px solid #e3e7ef;color:#8b94a6;cursor:pointer;display:none;place-items:center;box-shadow:0 3px 11px rgba(30,50,90,.16);font-size:.82rem}
.fl-conn-ctl:hover .cc-del{display:grid}
.cc-del:hover{color:#ff5a5a;border-color:#ffd2d2}
.fl-errbadge{position:absolute;top:-10px;right:-10px;width:25px;height:25px;border-radius:50%;background:#ff5a5a;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;z-index:4;box-shadow:0 2px 8px rgba(255,90,90,.4)}
.fl-errtext{color:#ff5a5a;font-size:.8rem;text-align:center;padding:0 14px 11px;font-weight:600}
.fl-addmenu{position:absolute;background:#fff;border:1px solid #e3e7ef;border-radius:13px;box-shadow:0 14px 40px rgba(30,50,90,.22);padding:8px;z-index:var(--z-dropdown);width:222px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain}
.fl-addmenu-h{display:flex;justify-content:space-between;align-items:center;padding:4px 8px 8px;font-weight:700;font-size:.92rem;color:#2b3340}
.fl-addmenu-h button{background:none;border:none;cursor:pointer;color:#8b94a6;font-size:1rem}
.fl-addmenu>button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 8px;border:none;background:none;border-radius:9px;cursor:pointer;font:inherit;font-size:.87rem;font-weight:600;color:#2b3340;text-align:left}
.fl-addmenu>button:hover{background:#f4f6fa}
.fl-addmenu>button .fl-ic{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:none;font-size:.9rem}
.em-insp textarea{width:100%;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:8px;padding:7px 9px;color:var(--text);font:inherit;font-size:.84rem;resize:vertical}
@media(max-width:860px){body.kv-shift .wrap{padding-right:20px}.kv-drawer{width:100vw}}
.kv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.kv-tile{padding:14px}
.kv-tile-h{font-weight:700;margin-bottom:5px}
.kv-empty{max-width:520px;margin:10px auto;text-align:center;padding:28px 26px}
.kv-empty .kv-logo{display:flex;justify-content:center;margin-bottom:12px}
.tab-sub{font-size:.88rem;padding-left:15px}
/* ===== left sidebar nav (account controls pinned to the bottom) ===== */
/* ===== STORE SELECTOR TOP (SA1): switcher lives at sidebar top; staff/logout/theme pinned bottom ===== */
.store-switch-top{margin-top:0;flex-shrink:0}
.store-btn{max-width:none;width:100%}
/* menu opens DOWNWARD now that the selector sits at the top */
.store-menu{top:calc(100% + 6px);bottom:auto;left:6px;right:6px;min-width:0}
.staff-chip{max-width:none;margin-top:auto}
.side-actions{display:flex;gap:8px;align-items:center}
.side-actions .logout-btn,.side-actions .theme-btn{flex-shrink:0}
.act-log-btn{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--glass-border);color:var(--text);border-radius:9px;padding:5px 9px;font-size:.72rem;font-weight:700;cursor:pointer;flex-shrink:0}
.act-log-btn:hover{border-color:var(--accent)}
.act-log-btn .ver{color:var(--muted);font-weight:800}
.cl-card{max-width:760px;width:94vw;max-height:86vh;overflow:auto}
.cl-head h2{margin:0 0 2px;display:flex;align-items:center;gap:10px}
.cl-ver{font-size:.7rem;font-weight:800;color:var(--accent);border:1px solid var(--glass-border);border-radius:999px;padding:2px 9px}
/* ----- Changelog timeline page (#changelog view) ----- */
.cl-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.cl-filter{display:flex;flex-direction:column;gap:5px}
.cl-filter>span{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cl-filter select{background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:10px;padding:9px 12px;color:var(--text);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;min-width:230px}
.cl-timeline-wrap{margin-top:14px}
.cl-count{font-size:.8rem;font-weight:700;margin-bottom:10px}
.cl-pill{font-size:.68rem;font-weight:800;color:var(--accent);border:1px solid var(--glass-border);border-radius:999px;padding:2px 8px;white-space:nowrap}
.cl-tl-day{display:grid;grid-template-columns:24px 1fr;gap:14px}
.cl-tl-rail{position:relative;display:flex;justify-content:center}
.cl-tl-rail::before{content:"";position:absolute;top:6px;bottom:-6px;width:2px;background:var(--glass-border)}
.cl-tl-day:last-child .cl-tl-rail::before{bottom:auto;height:14px}
.cl-tl-dot{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);margin-top:4px}
.cl-tl-body{padding-bottom:22px;min-width:0}
.cl-tl-dhead{display:flex;align-items:center;gap:9px;font-size:1rem}
.cl-tl-dtitle{font-weight:700;font-size:.92rem;margin:3px 0 11px}
.cl-tl-items{display:flex;flex-direction:column;gap:9px}
.cl-tl-item{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--glass-border);border-radius:12px;padding:11px 13px}
.cl-av{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#7a5af5)}
.cl-tl-itb{min-width:0}
.cl-tl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.cl-tl-meta b{font-size:.85rem}
.cl-tl-time{font-size:.74rem;color:var(--muted);font-weight:600}
.cl-ai-badge{display:inline-flex;align-items:center;gap:5px;padding:1px 8px 1px 6px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-border);font-size:.68rem;font-weight:700;color:var(--text);white-space:nowrap}
.cl-ai-logo{width:12px;height:12px;object-fit:contain;flex:none}
.cl-pub-badge{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;color:var(--muted);white-space:nowrap}
.cl-tl-detail{font-size:.875rem;line-height:1.5;color:var(--text)}
/* condensed single-line changelog items */
.cl-min-item{display:flex;align-items:baseline;gap:7px;font-size:.82rem;line-height:1.45;padding:1px 0;color:var(--text)}
.cl-min-item.has-diff{cursor:pointer}
.cl-min-item.has-diff:hover .cl-min-text{color:var(--accent);text-decoration:underline}
.cl-min-dot{flex:none;color:var(--accent);font-size:.9rem;line-height:1}
.cl-min-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-min-merged .cl-min-text{font-weight:600}
.cl-min-count{margin-left:auto;flex:none;align-self:center;font-size:.6rem;font-weight:700;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:1px 7px}
.cl-min-more .cl-min-dot,.cl-min-more .cl-min-text{color:var(--muted);font-style:italic}
.cl-min-more:hover .cl-min-text{color:var(--text);text-decoration:none}
.cl-more-row td{padding:10px;border-top:1px solid var(--glass-border)}
.cl-more-row a{color:var(--accent);font-weight:600;cursor:pointer}
/* 'View all changes' slide-in right-side drawer */
.clall-overlay{position:fixed;inset:0;z-index:70;background:rgba(8,16,36,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.clall-overlay.open{opacity:1;pointer-events:auto}
.clall-panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);background:var(--menu-bg);border-left:1px solid var(--glass-border);box-shadow:-16px 0 48px rgba(10,20,40,.28);transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:72;display:flex;flex-direction:column}
.clall-panel.open{transform:translateX(0)}
.clall-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--glass-border);font-size:1.02rem}
.clall-x{border:none;background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 2px}
.clall-x:hover{color:var(--text)}
.clall-body{flex:1;overflow-y:auto;padding:14px 18px}
.clall-day{margin-bottom:18px}
.clall-day-h{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:.92rem}
/* changelog: per-task feature grouping inside a day */
.cl-feat{margin:0 0 12px;border-left:2px solid rgba(22,179,192,.35);padding-left:11px}
.cl-feat-other{border-left-color:var(--glass-border)}
.cl-feat-h{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-weight:700;font-size:.85rem}
.cl-feat-ic{flex:none}
.cl-feat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-feat-count{margin-left:auto;flex:none;font-size:.7rem;font-weight:800;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:2px 9px}
.cl-feat-chip{display:inline-block;font-size:.74rem;font-weight:700;background:rgba(22,179,192,.12);border:1px solid rgba(22,179,192,.3);color:#16b3c0;border-radius:999px;padding:2px 9px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
/* changelog calendar grid */
.cl-cal{margin-bottom:22px}
.cl-cal-month{font-weight:700;font-size:1rem;margin:0 0 10px}
.cl-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cl-cal-wd{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:2px 0}
.cl-cal-cell{min-height:96px;border:1px solid var(--glass-border);border-radius:11px;background:var(--card);padding:7px 8px;overflow:hidden}
.cl-cal-cell.cl-cal-empty{background:transparent;border-color:transparent}
.cl-cal-cell.has-items{background:var(--glass-strong)}
.cl-cal-date{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:5px}
.cl-cal-cell.has-items .cl-cal-date{color:var(--text)}
.cl-cal-ver{margin-bottom:6px}
@media(max-width:820px){.cl-cal-grid{gap:5px}.cl-cal-cell{min-height:74px;padding:5px 6px}.cl-cal-wd{font-size:.58rem}}
/* clickable change → code drawer */
.cl-tl-item.has-diff{cursor:pointer;transition:border-color .13s,box-shadow .13s}
.cl-tl-item.has-diff:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(30,50,90,.09)}
.cl-tl-item .cl-code-cta{margin-left:auto;align-self:center;flex-shrink:0;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;font-weight:700;color:var(--accent);opacity:0;white-space:nowrap;transition:opacity .13s}
.cl-tl-item.has-diff:hover .cl-code-cta{opacity:1}
/* resizable drawer grip (shared by Klaviyo + code drawers) */
.drawer-grip{position:absolute;left:-3px;top:0;bottom:0;width:11px;cursor:ew-resize;z-index:6}
.drawer-grip::before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);height:52px;width:4px;border-radius:4px;background:var(--glass-border);transition:background .15s,height .15s}
.drawer-grip:hover::before{background:var(--accent);height:84px}
/* code-diff drawer */
.cl-diff-drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--cl-drawer-w,760px),92vw);background:var(--menu-bg);border-left:1px solid var(--glass-border);box-shadow:-16px 0 48px rgba(10,20,40,.28);transform:translateX(101%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:var(--z-drawer);display:flex;flex-direction:column}
.cl-diff-drawer.open{transform:translateX(0)}
/* when a drawer is open, reflow the page content so the drawer never overlaps it */
.wrap{transition:padding-right .3s cubic-bezier(.4,0,.2,1)}
body.cl-shift .wrap{padding-right:calc(26px + min(var(--cl-drawer-w,760px),92vw))}
/* file tabs */
.cl-diff-tabs{flex:none;display:flex;gap:5px;align-items:center;overflow-x:auto;padding:9px 12px;border-bottom:1px solid var(--glass-border);scrollbar-width:thin}
.cl-ftab{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--glass-border);border-radius:8px;padding:6px 10px;cursor:pointer;font:inherit;font-size:.78rem;color:var(--text);max-width:240px}
.cl-ftab:hover{border-color:var(--accent)}
.cl-ftab.active{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);border-color:transparent}
.cl-ftab-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.cl-ftab-st{flex:none;width:7px;height:7px;border-radius:2px;background:#8b94a6}
.cl-ftab.st-added .cl-ftab-st{background:#2ec878}.cl-ftab.st-deleted .cl-ftab-st{background:#ff5a5a}.cl-ftab.st-renamed .cl-ftab-st{background:#f5a623}
.cl-ftab-ad{color:#1f9d63;font-weight:700}.cl-ftab-dl{color:#d23b3b;font-weight:700}
.cl-ftab.active .cl-ftab-ad{color:#5be39a}.cl-ftab.active .cl-ftab-dl{color:#ff8a8a}
.cl-clickedit{cursor:text}.cl-clickedit:hover{background:rgba(120,140,180,.04)}
.cl-inline-ed{position:sticky;left:0;display:block;white-space:normal;margin:8px 0 12px;border:1px solid var(--accent);border-radius:11px;overflow:hidden;background:var(--menu-bg);box-shadow:0 14px 36px rgba(20,40,80,.26);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;cursor:auto;animation:clInlGrow .16s ease}
@keyframes clInlGrow{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cl-inline-h{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--glass-border);font-size:.8rem}
.cl-inline-h .sp{flex:1}
.cl-inline-loc{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--accent);white-space:nowrap}
.cl-inline-h .cl-difflegend{flex:none}
.cl-inline-body{height:300px;display:flex;flex-direction:column;position:relative}
.cl-inline-body .cl-edit-wrap{flex:1;min-height:0}
/* Explain-selected-code: floating “?” + explanation popover */
.ai-ex-btn{position:fixed;z-index:2000;width:30px;height:30px;border-radius:50%;border:1px solid var(--glass-border);background:var(--accent);color:#fff;font-weight:800;font-size:.98rem;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(30,50,90,.32);display:grid;place-items:center;animation:aiExIn .12s ease}
.ai-ex-btn:hover{filter:brightness(1.08)}
@keyframes aiExIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.ai-ex-pop{position:fixed;z-index:2000;width:min(340px,92vw);max-height:min(50vh,360px);overflow:auto;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 16px 44px rgba(20,40,80,.3);font-size:.85rem;animation:aiExIn .12s ease}
.ai-ex-head{position:sticky;top:0;background:var(--card);display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--glass-border);font-weight:700}
.ai-ex-head button{border:none;background:none;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:0 2px}
.ai-ex-body{padding:11px 13px;line-height:1.55;color:var(--text)}
.cl-diff-tools{display:flex;align-items:center;gap:8px}.cl-diff-tools .cl-search{flex:1}
.cl-view-sw{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-border);background:var(--card);color:var(--text);border-radius:8px;padding:6px 10px;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap}
.cl-view-sw:hover{border-color:var(--accent);color:var(--accent)}
.cl-view-sw.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.cl-view-sw .vs-ic{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;line-height:1}
.cl-wt-btn{flex:none;border:1px solid var(--glass-border);background:var(--card);color:var(--text);border-radius:8px;padding:6px 11px;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap}
.cl-wt-btn:hover{border-color:#7a5af5;color:#7a5af5}
.cl-ln.wt-on{background:rgba(255,213,74,.3)!important;box-shadow:inset 3px 0 0 #ffb01f}
.wt-panel{position:absolute;right:18px;bottom:18px;width:min(380px,86%);background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 16px 48px rgba(20,40,80,.3);padding:13px 15px;z-index:8;display:none}
.wt-h{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin-bottom:8px}
.wt-h button{background:none;border:none;color:var(--muted);font-size:1.05rem;cursor:pointer}
.wt-body{font-size:.84rem;line-height:1.5;min-height:38px}
.wt-row{display:flex;gap:9px;margin-bottom:5px}
.wt-k{flex:none;width:36px;font-weight:800;color:#7a5af5;font-size:.7rem;text-transform:uppercase;padding-top:2px}
.wt-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:11px}
.wt-nav .act{padding:5px 11px;font-size:.78rem}
.cl-ftab-mc{background:#ffd54a;color:#5a4500;border-radius:999px;padding:0 6px;font-size:.66rem;font-weight:800}
.cl-ftab-more{flex:none;color:var(--muted);font-size:.74rem;padding:0 6px}
.cl-ftab-open .cl-ftab-st{background:#7a5af5}
.cl-ftab-x{flex:none;margin-left:2px;width:15px;height:15px;display:inline-grid;place-items:center;border-radius:4px;font-size:.86rem;line-height:1;opacity:.55}
.cl-ftab-x:hover{opacity:1;background:rgba(120,140,180,.22)}
.cl-ftab.active .cl-ftab-x:hover{background:rgba(255,255,255,.25)}
.cl-ftab-add{flex:none;width:28px;height:28px;display:inline-grid;place-items:center;border:1px dashed var(--glass-border);background:var(--card);border-radius:8px;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1}
.cl-ftab-add:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
.cl-exp{position:absolute;z-index:9;width:340px;max-width:calc(100% - 16px);background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:11px;box-shadow:0 16px 44px rgba(20,40,80,.3);overflow:hidden;display:flex;flex-direction:column;max-height:min(60vh,440px)}
.cl-exp-search{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--glass-border);background:var(--card)}
.cl-exp-search input{flex:1;min-width:0;border:none;background:none;color:var(--text);font:inherit;font-size:.85rem;outline:none}
.cl-exp-list{overflow:auto;padding:5px}
.cl-exp-item{width:100%;display:flex;align-items:baseline;gap:8px;text-align:left;border:none;background:none;color:var(--text);font:inherit;font-size:.8rem;padding:6px 9px;border-radius:7px;cursor:pointer}
.cl-exp-item:hover{background:rgba(120,140,180,.13)}
.cl-exp-nm{font-weight:600;white-space:nowrap}
.cl-exp-dir{flex:1;min-width:0;color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-exp-open{flex:none;color:#7a5af5;font-size:.66rem;font-weight:800;text-transform:uppercase}
/* search toolbar */
.cl-diff-tools{flex:none;padding:9px 12px;border-bottom:1px solid var(--glass-border)}
.cl-search{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--glass-border);border-radius:9px;padding:5px 9px}
.cl-search-ic{font-size:.8rem;opacity:.7}
.cl-search input{flex:1;min-width:0;border:none;background:none;color:var(--text);font:inherit;font-size:.85rem;outline:none}
.cl-search-ct{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.cl-search-nav{width:24px;height:24px;flex:none;border:1px solid var(--glass-border);background:var(--menu-bg);border-radius:6px;cursor:pointer;color:var(--text);font-size:.8rem;line-height:1;display:grid;place-items:center}
.cl-search-nav:hover{border-color:var(--accent);color:var(--accent)}
.cl-fpath{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;font-family:ui-monospace,Menlo,monospace;font-size:.76rem;color:var(--muted);border-bottom:1px solid var(--glass-border);background:var(--card);position:sticky;top:0;z-index:1}
.cl-fpath>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.cl-hit{background:#ffe08a;color:#3a2c00;border-radius:2px}
.cl-hit.cur{background:#ffb01f;box-shadow:0 0 0 2px rgba(255,176,31,.5)}
.cl-fpath-r{display:flex;align-items:center;gap:10px;flex:none}
.cl-queue-btn{flex:none;background:var(--card);border:1px solid var(--glass-border);color:var(--text);border-radius:8px;padding:6px 11px;font:inherit;font-size:.76rem;font-weight:700;cursor:pointer}
.cl-queue-btn:hover{border-color:var(--accent);color:var(--accent)}
.cl-head-r{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
/* directly-editable code area with a synced green-add / red-remove highlight layer behind it */
.cl-diff-body{display:flex;flex-direction:column}
.cl-edit-wrap{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--menu-bg)}
.cl-edit-hl{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cl-edit-hl-inner{position:absolute;top:0;left:0;min-width:100%;margin:0;color:transparent;will-change:transform}
.cl-edit-hl-inner,.cl-editor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.5;padding:14px 16px 14px 58px;white-space:pre;tab-size:2;box-sizing:border-box;letter-spacing:normal;word-spacing:normal}
.cl-gutter{position:absolute;top:0;left:0;bottom:0;width:48px;overflow:hidden;background:var(--card);border-right:1px solid var(--glass-border);pointer-events:none;z-index:1}
.cl-gutter-inner{position:absolute;top:0;left:0;right:0;will-change:transform;padding:14px 8px 14px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;line-height:1.5;text-align:right;color:var(--muted)}
.cl-gn{display:block}.cl-gn.add{color:#1f9d63;font-weight:700}.cl-gn.chg{color:#b06a00;font-weight:700}
.cl-eln{display:block;color:transparent}
.cl-chg{background:rgba(255,213,74,.5);border-radius:2px}
.cl-eln.add{background:rgba(46,200,120,.18)}
.cl-eln.delabove{box-shadow:inset 0 2px 0 rgba(229,72,77,.9)}
.cl-eln.delbelow{box-shadow:inset 0 -2px 0 rgba(229,72,77,.9)}
.cl-editor{position:absolute;top:0;left:0;width:100%;height:100%;border:none;outline:none;resize:none;background:transparent;color:var(--text);caret-color:var(--text);overflow:auto}
/* ONE scrollbar look for every code surface (.cl-scroll): vertical hidden, fades in only while
   scrolling (.scrolling toggled in JS); horizontal = liquid-glass thumb. */
.cl-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
.cl-scroll.scrolling{scrollbar-color:rgba(120,140,180,.55) transparent}
.cl-scroll::-webkit-scrollbar{width:12px;height:13px}
.cl-scroll::-webkit-scrollbar-track,.cl-scroll::-webkit-scrollbar-corner{background:transparent}
.cl-scroll::-webkit-scrollbar-thumb:vertical{background:transparent;border:3px solid transparent;border-radius:9px;background-clip:padding-box;transition:background .3s}
.cl-scroll.scrolling::-webkit-scrollbar-thumb:vertical{background:rgba(120,140,180,.5);background-clip:padding-box}
.cl-scroll::-webkit-scrollbar-thumb:horizontal{border:2px solid transparent;border-radius:9px;background-clip:padding-box;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(185,205,235,.34));box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 2px rgba(120,150,200,.3),0 1px 3px rgba(30,50,90,.22)}
.cl-scroll::-webkit-scrollbar-thumb:horizontal:hover{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(170,198,238,.5))}
html[data-theme="dark"] .cl-scroll.scrolling{scrollbar-color:rgba(185,205,235,.42) transparent}
html[data-theme="dark"] .cl-scroll.scrolling::-webkit-scrollbar-thumb:vertical{background:rgba(185,205,235,.42)}
html[data-theme="dark"] .cl-scroll::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(120,150,205,.3));box-shadow:inset 0 1px 1px rgba(255,255,255,.32),0 1px 3px rgba(0,0,0,.4)}
/* Global liquid-glass auto-hide scrollbars: hidden until the element is scrolling (.is-scrolling
   toggled by a global capture scroll listener). Mirrors the .cl-scroll code-surface look. The more
   specific .cl-scroll rules above still win on code surfaces. */
html{scrollbar-width:thin;scrollbar-color:transparent transparent}
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*.is-scrolling, html.is-scrolling{scrollbar-color:rgba(120,140,180,.55) transparent}
::-webkit-scrollbar{width:12px;height:13px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb:vertical{background:transparent;border:3px solid transparent;border-radius:9px;background-clip:padding-box;transition:background .3s}
.is-scrolling::-webkit-scrollbar-thumb:vertical{background:rgba(120,140,180,.5);background-clip:padding-box}
::-webkit-scrollbar-thumb:horizontal{border:2px solid transparent;border-radius:9px;background-clip:padding-box;background:transparent;transition:background .3s}
.is-scrolling::-webkit-scrollbar-thumb:horizontal{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(185,205,235,.34));box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 2px rgba(120,150,200,.3),0 1px 3px rgba(30,50,90,.22)}
::-webkit-scrollbar-thumb:hover{background:rgba(120,140,180,.6)}
html[data-theme="dark"] *.is-scrolling, html[data-theme="dark"].is-scrolling{scrollbar-color:rgba(185,205,235,.42) transparent}
html[data-theme="dark"] .is-scrolling::-webkit-scrollbar-thumb:vertical{background:rgba(185,205,235,.42)}
.cl-difflegend{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted)}
.cl-difflegend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.cl-difflegend .lg-add{background:rgba(46,200,120,.5)}
.cl-difflegend .lg-del{background:rgba(229,72,77,.6);margin-left:6px}
.cl-submit-bar{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--glass-border);background:var(--card)}
.cl-submit-bar .sp{flex:1}
.cl-submit-note{font-size:.78rem}
/* code review queue */
.crq-row{border:1px solid var(--glass-border);border-radius:11px;margin-bottom:9px;overflow:hidden;background:var(--card)}
.crq-row.is-done{opacity:.72}
.crq-head{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;flex-wrap:wrap}
.crq-head:hover{background:var(--glass-border)}
.crq-caret{transition:transform .15s;color:var(--muted)}
.crq-row.open .crq-caret{transform:rotate(90deg)}
.crq-file{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;font-weight:700}
.crq-meta{font-size:.76rem;color:var(--muted);margin-right:auto}
.crq-badge{font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 9px;border:1px solid var(--glass-border);color:var(--muted)}
.crq-badge.ok{color:#1f9d63;border-color:rgba(31,157,99,.4)}.crq-badge.bad{color:#d23b3b;border-color:rgba(210,59,59,.4)}
.crq-badge.ai{color:#7a5af5;border-color:rgba(122,90,245,.4)}
.crq-vb{display:inline-block;font-size:.68rem;font-weight:800;border-radius:999px;padding:2px 8px;border:1px solid var(--glass-border);color:var(--muted)}
.crq-vb.ok{color:#1f9d63;border-color:rgba(31,157,99,.45);background:rgba(31,157,99,.08)}
.crq-vb.bad{color:#d23b3b;border-color:rgba(210,59,59,.45);background:rgba(210,59,59,.08)}
.crq-verdicts{margin:10px 0;padding:11px 13px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass-strong)}
.crq-verdicts-h{font-size:.85rem;margin-bottom:8px}
/* Collateral-deletion warning — existing code this change removes */
.crq-delwarn{margin:10px 0;padding:11px 13px;border:1px solid rgba(245,158,11,.5);border-radius:11px;background:rgba(245,158,11,.10)}
.crq-delwarn-h{font-size:.84rem;font-weight:800;color:#b45309;margin-bottom:7px;line-height:1.35}
@media (prefers-color-scheme:dark){.crq-delwarn-h{color:#fbbf24}}
.crq-delwarn-list{margin:0;padding-left:18px;font-size:.8rem;line-height:1.5;max-height:160px;overflow:auto}
.crq-delwarn-list li{margin:1px 0}
.crq-vrow{border-top:1px solid var(--glass-border);padding:8px 0}.crq-vrow:first-of-type{border-top:0}
.crq-vrow-h{font-size:.82rem;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crq-vrow-sum{font-size:.78rem;margin:2px 0 0}
.crq-sev{font-size:.62rem;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:5px;margin-right:5px}
.crq-sev-high{background:rgba(210,59,59,.16);color:#d23b3b}.crq-sev-medium{background:rgba(217,154,43,.16);color:#c98a1e}.crq-sev-low,.crq-sev-note{background:var(--glass-border);color:var(--muted)}
/* ===== Agent workflows (multi-agent code pipeline builder) ===== */
.awf-ov{position:fixed;inset:0;z-index:9100;background:rgba(8,11,20,.6);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:flex;align-items:flex-start;justify-content:center;padding:34px 16px;overflow:auto}
.awf-panel{width:min(720px,96vw);background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;padding:20px 22px;box-shadow:0 24px 70px rgba(10,20,40,.4)}
.awf-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.awf-h h2{margin:0;font-size:1.2rem}
.awf-sub{color:var(--muted);font-size:.84rem;margin-bottom:14px}
.awf-wf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--glass-border);border-radius:11px;margin-top:9px;background:var(--glass-strong)}
.awf-wf b{font-size:.92rem}.awf-wf small{color:var(--muted)}
.awf-chain{display:flex;flex-direction:column;align-items:stretch;margin:8px 0}
.awf-node{position:relative;border:1px solid var(--glass-border);border-radius:13px;padding:11px 13px;background:var(--glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.awf-node.architect{border-left:3px solid #16b3c0}.awf-node.dev{border-left:3px solid #a06bff}.awf-node.security{border-left:3px solid #d23b3b}.awf-node.testing{border-left:3px solid #2ab87a}.awf-node.custom{border-left:3px solid #7a8aa8}.awf-node.trigger{border-left:3px solid #f5a623}.awf-node.review{border-left:3px solid var(--accent)}
.awf-node-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.86rem}
.awf-node-h .x{margin-left:auto;cursor:pointer;color:var(--muted);background:none;border:0;font-size:.95rem}
.awf-node select.inp{margin-top:7px;width:100%}
.awf-conn{align-self:center;width:2px;height:15px;background:var(--glass-border)}
.awf-add{align-self:center;margin:3px 0}
.awf-add button{background:var(--glass-strong);border:1px dashed var(--glass-border);border-radius:9px;color:var(--accent);font-weight:700;font-size:.8rem;padding:5px 12px;cursor:pointer}
.awf-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.awf-run-out{margin-top:14px;padding:12px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass-strong);font-size:.84rem;white-space:pre-wrap;max-height:40vh;overflow:auto}
.crq-status{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:2px 8px}
.crq-status.st-pending{background:#fff2cc;color:#7a5d00}.crq-status.st-applied{background:#d8f5e3;color:#1f7a4d}
.crq-status.st-rejected{background:#fde2e2;color:#a33}.crq-status.st-failed{background:#fde2e2;color:#a33}
.crq-status.st-routed_to_developer{background:#e7ecff;color:#3a4fb5}
/* code review: Active / Archived view toggle + bulk-selectable rows */
.crq-viewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;background:var(--glass)}
.seg-btn{padding:6px 13px;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.82rem;cursor:pointer;transition:.15s}
.seg-btn+.seg-btn{border-left:1px solid var(--glass-border)}
.seg-btn:hover{color:var(--text)}
.seg-btn.on{background:rgba(22,179,192,.16);color:#16b3c0}
.crq-row.sel{border-color:#16b3c0;box-shadow:0 0 0 1px rgba(22,179,192,.3)}
/* flash a change row when jumped to from "Review N changes →" so it's instantly findable */
@keyframes crqFlash{0%,100%{box-shadow:0 0 0 0 rgba(22,179,192,0)}25%,60%{box-shadow:0 0 0 3px rgba(22,179,192,.5)}}
.crq-row.crq-flash{border-color:#16b3c0;animation:crqFlash 1.2s ease 2}
.crq-head .gl-check{margin:0}
/* code review queue: task-group accordion */
/* ===== Multi-queue: segmented sub-tabs + task rows ===== */
.qv-tabs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.qv-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:11px;border:1px solid var(--glass-border);background:var(--glass);color:var(--text);font-weight:700;font-size:.86rem;cursor:pointer;transition:.15s}
.qv-tab:hover{background:var(--glass-strong)}
.qv-tab.on{background:rgba(22,179,192,.16);border-color:rgba(22,179,192,.5);color:#16b3c0}
.qv-ct{min-width:18px;padding:0 6px;border-radius:999px;background:rgba(140,140,160,.22);color:var(--text);font-size:.72rem;font-weight:800;text-align:center}
.qv-tab.on .qv-ct{background:#16b3c0;color:#fff}
.q-list{display:flex;flex-direction:column;gap:10px}
.q-task{border:1px solid var(--glass-border);border-radius:12px;padding:12px 14px;background:var(--glass-strong)}
.q-task.sel{border-color:#16b3c0;box-shadow:0 0 0 1px rgba(22,179,192,.3)}
.q-task-top{display:flex;align-items:flex-start;gap:10px}
.q-task-main{flex:1;min-width:0}
/* liquid-glass checkbox (queue select-all + per-task) */
.gl-check{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:2px 0 0;border-radius:6px;border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(8px);cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.gl-check:hover{border-color:#16b3c0}
.gl-check:checked{background:linear-gradient(145deg,#16b3c0,#0e8fa0);border-color:#16b3c0}
.gl-check:checked::after{content:'';position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.gl-check:indeterminate{background:linear-gradient(145deg,#16b3c0,#0e8fa0);border-color:#16b3c0}
.gl-check:indeterminate::after{content:'';position:absolute;left:3.5px;top:7.5px;width:9px;height:2px;border-radius:2px;background:#fff}
.q-bulk{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:9px 12px;margin-bottom:12px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass)}
.q-bulk .gl-check{margin-top:0}
.q-bulk-label{font-size:.82rem;color:var(--muted)}
.q-bulk-ct{font-size:.8rem;font-weight:700;color:#16b3c0}
.q-bulk-acts{display:inline-flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.q-task-top b{font-size:.92rem}
.q-prog{display:flex;align-items:center;gap:9px;margin-top:9px}
.q-task-acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
/* runner gates lane */
.gate-caret{color:var(--muted);flex:none}
.gate-tier{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:6px;padding:2px 8px;border:1px solid var(--glass-border);color:var(--muted);white-space:nowrap}
.gate-tier-gated,.gate-tier-high{background:rgba(217,154,43,.16);color:#c98a1e;border-color:rgba(217,154,43,.42)}
.gate-tier-floor{background:rgba(210,59,59,.14);color:#d23b3b;border-color:rgba(210,59,59,.42)}
.gate-tier-medium{background:rgba(58,79,181,.14);color:#3a4fb5;border-color:rgba(58,79,181,.4)}
.gate-tier-low{background:rgba(31,157,99,.14);color:#1f9d63;border-color:rgba(31,157,99,.4)}
.gate-detail-in{padding:11px 2px 3px;border-top:1px solid var(--glass-border);margin-top:11px}
.gate-chg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;font-size:.8rem}
.gate-events{margin-top:9px;font-size:.78rem}
.gate-events summary{cursor:pointer;color:var(--muted)}
.gate-ev{padding:4px 0;border-top:1px solid var(--glass-border)}
.q-agent{margin-bottom:14px}
.q-agent-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.q-agent-name{font-weight:800;font-size:1rem;color:var(--text);background:none;border:0;padding:0;cursor:pointer}
button.q-agent-name:hover{color:#16b3c0;text-decoration:underline}
.q-agent-rank{font-size:.72rem;font-weight:700;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:2px 9px}
.q-agent-ct{margin-left:auto;font-size:.76rem;color:var(--muted)}
.crq-group{border:1px solid var(--glass-border);border-radius:12px;margin-bottom:11px;overflow:hidden;background:var(--glass-strong)}
.crq-group-head{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer}
.crq-group-head:hover{background:var(--glass-border)}
.crq-group .crq-caret{transition:transform .15s;color:var(--muted)}
.crq-group.open>.crq-group-head .crq-caret{transform:rotate(90deg)}
.crq-group-title{font-weight:800;font-size:.9rem}
.crq-group-count{margin-left:auto;font-size:.72rem;font-weight:800;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:2px 9px}
.crq-group-head .crq-grp-approve{padding:4px 11px;font-size:.74rem}
.crq-group-head .crq-grp-preview{padding:4px 11px;font-size:.74rem}
.crq-grp-blocked{font-size:.72rem;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.crq-group-body{display:none;padding:0 12px 12px}
.crq-group.open>.crq-group-body{display:block}
.crq-detail{display:none;padding:0 13px 13px;border-top:1px solid var(--glass-border)}
.crq-row.open .crq-detail{display:block}
.crq-syntax{font-size:.8rem;margin:12px 0;padding:9px 11px;border-radius:9px;background:var(--glass);border:1px solid var(--glass-border)}
.crq-syntax.bad{border-color:rgba(210,59,59,.45)}
.crq-ai{margin:12px 0;display:grid;gap:9px}
.crq-ai-sum{font-size:.85rem;font-weight:600}
.crq-ai-grp h5{margin:0 0 4px;font-size:.78rem}
.crq-ul{margin:0;padding-left:18px;font-size:.82rem;line-height:1.5}
.crq-none{font-size:.8rem}
.crq-edit{height:min(58vh,540px);display:flex;border:1px solid var(--glass-border);border-radius:9px;overflow:hidden;margin-bottom:6px}
.clcc{font-size:.72rem;font-weight:600}
.crq-difftitle{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;margin:12px 0 6px}
.crq-difftitle .sp{flex:1}
.crq-hunk-ct{font-size:.72rem;font-weight:600}
.crq-navbtn{border:1px solid var(--glass-border);background:var(--card);color:var(--text);border-radius:7px;padding:4px 9px;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.crq-navbtn:hover{border-color:#f5a623;color:#b06a00}
.crq-diff{flex:1;min-height:0;overflow:auto;margin:0}
.cl-ln.cl-skip{color:var(--muted);background:rgba(120,140,180,.07);font-style:italic;opacity:.85}
.cl-ln.cl-skip .cl-gut i{color:var(--muted)}
.crq-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}
.cl-diff-head{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:15px 18px 14px;border-bottom:1px solid var(--glass-border)}
.cl-diff-title{font-weight:700;font-size:.95rem;line-height:1.3}
.cl-diff-sub{font-size:.76rem;margin-top:3px}
.cl-diff-sub code,.cl-diff-stat code{font-family:ui-monospace,Menlo,monospace}
.cl-diff-body{flex:1;overflow:auto}
.cl-diff-stat{margin:0;padding:12px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;line-height:1.45;color:var(--muted);white-space:pre-wrap;border-bottom:1px solid var(--glass-border)}
.cl-code{margin:0;padding:12px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.5}
.cl-ln{display:flex;tab-size:2}
.cl-gut{flex:none;display:inline-flex;user-select:none;color:var(--muted);opacity:.75;border-right:1px solid var(--glass-border);margin-right:10px}
.cl-gut i{display:inline-block;min-width:2.5ch;text-align:right;padding:0 8px 0 4px;font-style:normal}
.cl-lc{flex:1;white-space:pre;padding-right:14px}
.cl-ln.add{background:rgba(46,200,120,.16);border-left:3px solid #ffd54a}
.cl-ln.del{background:rgba(255,90,90,.15);border-left:3px solid #ffd54a}
.cl-ln.add .cl-gut,.cl-ln.del .cl-gut{margin-left:-3px}
.cl-ln.hh{background:rgba(120,140,180,.16);color:var(--muted);font-weight:700}
.cl-ln.meta{color:var(--muted);opacity:.82}
.cl-ln.crq-hunk-active{background:rgba(255,213,74,.4)!important}
.cl-ln.cl-ln-flash{animation:clFlash 1.6s ease}
@keyframes clFlash{from{background:rgba(245,166,35,.6)}to{background:transparent}}
.cl-brk{background:rgba(80,150,255,.45);border-radius:2px;box-shadow:0 0 0 1px rgba(80,150,255,.95)}
.cl-brk-bad{background:rgba(255,90,90,.5);box-shadow:0 0 0 1px rgba(255,90,90,.95)}
.crq-jump{color:var(--accent);cursor:pointer;text-decoration:underline;font-weight:700}
.crq-syntax{white-space:pre-wrap}
.crq-clean{font-size:.84rem;color:#1f9d63;font-weight:600}
@media(max-width:860px){.cl-diff-drawer{width:100vw}}
.cl-day{border:1px solid var(--glass-border);border-radius:14px;margin:12px 0;overflow:hidden;background:var(--card)}
.cl-day-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;cursor:pointer}
.cl-day-h:hover{background:var(--glass-border)}
.cl-day-t{font-weight:700}
.cl-day-d{color:var(--muted);font-size:.8rem;margin-top:2px}
.cl-day-sum{color:var(--muted);font-size:.85rem;margin-top:5px}
.cl-day-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.cl-pill{font-size:.66rem;font-weight:800;color:var(--accent);border:1px solid var(--glass-border);border-radius:999px;padding:2px 8px}
.cl-caret{color:var(--muted);font-size:.8rem;transition:transform .15s}
.cl-day.open .cl-caret{transform:rotate(90deg)}
.cl-detail{display:none;padding:2px 16px 14px;border-top:1px solid var(--glass-border)}
.cl-day.open .cl-detail{display:block}
.cl-line{display:flex;flex-wrap:wrap;gap:6px;padding:9px 0;border-bottom:1px dashed var(--glass-border);font-size:.85rem;line-height:1.55}
.cl-line:last-child{border-bottom:none}
.cl-line .when{color:var(--muted);white-space:nowrap}
.cl-line .who{font-weight:700}
@media (max-width:820px){
  :root{--sidebar-w:0px}
  header{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px;border-radius:18px;overflow:visible}
  .nav-right{flex-direction:row;align-items:center;flex-wrap:wrap;flex:1}
  .tabs{flex-direction:row;flex-wrap:wrap}
  /* ===== STORE SELECTOR TOP (SA1): brand-style selector at row start on mobile ===== */
  .store-switch-top{margin-top:0;margin-left:0;margin-right:auto}
  .store-menu{top:calc(100% + 6px);bottom:auto;left:0;right:auto}
  .wrap{padding:20px 20px var(--ai-bar-clear)}
}
.view{display:none}.view.active{display:block;animation:f .3s ease}
@keyframes f{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}
.kpi{padding:18px}
.kpi .label{font-size:.74rem;opacity:.82;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.kpi .val{font-size:1.8rem;font-weight:850;margin-top:6px;letter-spacing:-.02em}
.kpi .sub{font-size:.76rem;opacity:.78;margin-top:2px}
/* ===== P&L DASHBOARD (F4) ===== */
.pnl-range-lbl{font-size:.74rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.pnl-range-lbl input{padding:6px 9px;border:1px solid var(--glass-border);border-radius:8px;background:var(--glass-strong);color:var(--text);font:inherit;font-size:.82rem}
.pnl-cost-inp{width:100%;padding:6px 8px;border:1px solid var(--glass-border);border-radius:7px;background:var(--glass-strong);color:var(--text);font:inherit;font-size:.82rem}
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:18px}
.panel{padding:22px;margin-bottom:18px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.panel h3{font-size:1.05rem;font-weight:800}
/* Reusable info (i) tooltip — a compact icon beside a section title that reveals a longer description on
   hover / focus / tap, so explanatory snippets don't eat vertical space. Use anywhere:
   <h3>Title <span class="info-i" tabindex="0" role="img" aria-label="More info"><svg…/><span class="info-i-pop">…</span></span></h3> */
.info-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:7px;color:var(--muted);cursor:help;vertical-align:middle;flex:none;outline:none}
.info-i:hover,.info-i:focus-visible{color:var(--accent)}
.info-i > svg{width:14px;height:14px;display:block}
.info-i-pop{position:absolute;top:calc(100% + 9px);left:0;z-index:60;width:min(320px,82vw);
  background:var(--menu-bg,#0e1118);color:var(--text,#eef2f8);border:1px solid var(--glass-border);border-radius:11px;
  padding:10px 13px;font-size:.76rem;font-weight:500;line-height:1.55;letter-spacing:normal;text-align:left;white-space:normal;text-transform:none;
  box-shadow:0 16px 42px -12px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translate(-12px,-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;pointer-events:none}
.info-i:hover .info-i-pop,.info-i:focus .info-i-pop,.info-i:focus-within .info-i-pop{opacity:1;visibility:visible;transform:translate(-12px,0)}
.info-i-pop b{font-weight:800;color:var(--text)}
.info-i-pop code{font-size:.9em;background:var(--glass-strong);padding:1px 5px;border-radius:5px}
.info-i-pop::before{content:"";position:absolute;bottom:100%;left:14px;border:6px solid transparent;border-bottom-color:var(--glass-border)}
canvas{max-height:300px}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;padding:9px 10px;font-weight:700;position:sticky;top:0;background:var(--th-bg)}
td{padding:10px;border-top:1px solid var(--glass-border);vertical-align:top;overflow-wrap:anywhere}
/* truncation utility for long cell text (emails/addresses/names) — pair with a title attr */
.td-trunc{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-wrap{max-height:560px;overflow:auto;border-radius:12px}
/* Full-height list pages (Orders / Products / Inventory / Customers): the panel fills the viewport
   and the table scrolls inside it, instead of the table capping at 560px. */
#orderList > .panel, #prodList > .panel, #custList > .panel, #inventory > .panel{
  display:flex; flex-direction:column; height:calc(100vh - 44px - var(--ai-bar-clear)); margin-bottom:0;
}
#orderList > .panel > .tbl-wrap,
#prodList > .panel > .tbl-wrap,
#custList > .panel > .tbl-wrap,
#inventory > .panel > .tbl-wrap{ flex:1; min-height:0; max-height:none; }
@media (max-width:820px){
  #orderList > .panel, #prodList > .panel, #custList > .panel, #inventory > .panel{ height:auto; min-height:70vh; }
}
.badge{padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap;display:inline-block}
.b-paid{background:rgba(255,193,7,.25);border:1px solid rgba(255,193,7,.5)}
.b-dispatched{background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.b-delivered,.b-fulfilled{background:rgba(54,255,176,.25);border:1px solid rgba(54,255,176,.55)}
.b-cancelled,.b-refunded,.b-voided{background:rgba(255,90,90,.25);border:1px solid rgba(255,90,90,.55)}
.b-unfulfilled{background:var(--glass-strong);border:1px solid var(--glass-border)}
.b-partial{background:rgba(245,178,73,.22);border:1px solid rgba(245,178,73,.55)}
.b-restocked,.b-partially_refunded{background:rgba(160,120,255,.2);border:1px solid rgba(160,120,255,.5)}
/* Add-products modal (order line-item picker) */
.ap-modal{position:fixed;inset:0;z-index:240;background:rgba(8,16,36,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:5vh 5vw}
.ap-modal.show{display:flex}
.ap-card{background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:16px;width:min(560px,96vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);color:var(--text)}
.ap-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--glass-border);font-size:1.02rem}
.ap-search{margin:14px 18px 6px;padding:9px 13px;border:1px solid var(--glass-border);border-radius:9px;background:var(--glass-strong);color:var(--text);font-size:.9rem;font-family:inherit}
.ap-search:focus{outline:2px solid var(--accent,#2a7bff);outline-offset:-1px}
.ap-list{flex:1;overflow:auto;padding:4px 10px 10px}
.ap-prod{border-top:1px solid var(--glass-border);margin-top:4px;padding-top:2px}
.ap-prodhead{display:flex;align-items:center;gap:10px;padding:8px 8px 2px}
.ap-prodname{font-weight:700;font-size:.9rem;line-height:1.15}
.ap-vars{padding-bottom:4px}
.ap-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px}
.ap-row:hover{background:var(--glass)}
.ap-row.sel{background:var(--glass-strong)}
.ap-row.ap-sub{padding-left:26px}
.ap-row>input[type=checkbox]{width:17px;height:17px;flex-shrink:0;cursor:pointer}
.ap-rowclick{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.ap-rowtitle{font-size:.88rem;font-weight:600;line-height:1.2}
.ap-rowsub{font-size:.76rem}
.ap-thumb{width:34px;height:34px;border-radius:7px;object-fit:cover;background:var(--glass-strong);flex-shrink:0;border:1px solid var(--glass-border)}
.ap-noimg{display:grid;place-items:center;font-size:1rem}
.ap-qty{display:flex;align-items:center;gap:2px;flex-shrink:0}
.ap-qty button{width:24px;height:26px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:6px;cursor:pointer;font-weight:800;line-height:1}
.ap-qty input{width:38px;height:26px;text-align:center;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:6px}
.ap-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--glass-border);gap:10px}
.ap-foot>div{display:flex;gap:8px}
.b-low{background:rgba(255,90,90,.28);border:1px solid rgba(255,90,90,.6)}
.b-ok{background:rgba(54,255,176,.2);border:1px solid rgba(54,255,176,.5)}
.b-active{background:rgba(54,255,176,.18);border:1px solid rgba(54,255,176,.45)}
.b-draft,.b-archived{background:var(--glass-strong);border:1px solid var(--glass-border)}
.act{padding:5px 11px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-size:.76rem;font-weight:600;margin-right:5px}
/* Button family (see DESIGN.md): .act-cta = accent primary action; .act-onlight = solid neutral. Never inline button colors. */
.act.act-cta{background:var(--accent);color:#fff;border-color:transparent}
.act.act-cta:hover{filter:brightness(1.07)}
.act.act-onlight{background:var(--surface-solid);color:var(--text)}
.act:hover{background:var(--glass);filter:brightness(1.08)}
.muted{opacity:.7;font-size:.8rem}
.loading{padding:40px;text-align:center;opacity:.8}
/* Skeleton loading (shimmer) */
@keyframes skel-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{background:linear-gradient(90deg,var(--glass-strong) 25%,rgba(140,140,160,.20) 37%,var(--glass-strong) 63%);background-size:200% 100%;animation:skel-sh 1.4s ease-in-out infinite;border-radius:8px;height:13px}
.skel-line{height:13px;margin:8px 0}.skel-line.tall{height:22px}
.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w85{width:85%}.w90{width:90%}
.skel-lines{padding:12px 6px}
.skel-tr td{padding:13px 14px;border-bottom:1px solid var(--glass-border)}
.skel-list{padding:6px 0;border-radius:16px;overflow:hidden}
.skel-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--glass-border)}
.skel-av{width:34px;height:34px;border-radius:50%;flex:none}
.skel-row-main{flex:1}.skel-row-main .skel-line{margin:5px 0}
.skel-pill{width:64px;height:20px;border-radius:20px;flex:none}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.skel-card{padding:16px;border-radius:16px}
.skel-thumb{height:58px;border-radius:10px;margin-bottom:10px}
.skel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.skel-kpi{padding:16px 18px;border-radius:14px}
.skel-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.skel-chart{height:240px;border-radius:16px}
.skel-block{height:120px;border-radius:12px;margin-top:12px}
.skel-detail{padding:18px;border-radius:16px}
@media(max-width:820px){.skel-charts{grid-template-columns:1fr}}
.err-banner{padding:14px 18px;border-radius:12px;background:rgba(255,90,90,.2);border:1px solid rgba(255,90,90,.5);margin-bottom:16px}
.demo-banner{padding:10px 16px;border-radius:12px;background:rgba(255,193,7,.18);border:1px solid rgba(255,193,7,.45);margin-bottom:16px;font-size:.85rem}
/* export menu */
.exp{position:relative;display:inline-flex}
.exp-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-size:.76rem;font-weight:600}
.exp-btn:hover{background:rgba(255,255,255,.26)}
.exp-btn .exp-ic{font-size:.95rem;line-height:1}
.exp-btn .exp-car{font-size:.62rem;opacity:.7}
.exp-pop{position:absolute;right:0;top:calc(100% + 5px);z-index:80;min-width:140px;display:none;flex-direction:column;padding:5px;background:var(--surface-solid,var(--card));backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--glass-border);border-radius:11px;box-shadow:0 16px 50px rgba(8,16,36,.35)}
.exp-pop.open{display:flex}
.exp-pop button{display:block;width:100%;text-align:left;padding:7px 11px;border-radius:7px;border:none;background:transparent;color:var(--text);cursor:pointer;font-size:.76rem;font-weight:600}
.exp-pop button:hover{background:rgba(255,255,255,.14)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input{padding:7px 12px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);font-size:.82rem;min-width:200px}
.filters input::placeholder{color:var(--muted)}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--glass-strong);border:1px solid var(--glass-border);font-size:.72rem;margin:2px 3px 2px 0}
.var-row td{font-size:.82rem;background:rgba(255,255,255,.05)}
.link{color:var(--blue);cursor:pointer;text-decoration:underline;font-weight:600}
/* inventory inline controls */
.inv-link{cursor:pointer}
.inv-link:hover{color:var(--accent,#2a7bff);text-decoration:underline}
.inv-oh{display:flex;align-items:center;gap:5px}
.inv-num{width:62px;padding:5px 6px;border-radius:7px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);font-size:.85rem;text-align:center}
.inv-num:focus{outline:2px solid var(--blue);outline-offset:-1px}
.inv-step{width:26px;height:30px;border-radius:7px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-weight:800;font-size:1rem;line-height:1}
.inv-step:hover{filter:brightness(1.1)}
.b-avail-out{background:rgba(255,90,90,.25);border:1px solid rgba(255,90,90,.55)}
.b-avail-low{background:rgba(255,193,7,.25);border:1px solid rgba(255,193,7,.5)}
.b-avail-ok{background:rgba(54,255,176,.2);border:1px solid rgba(54,255,176,.5)}
.inv-switch{position:relative;display:inline-block;width:40px;height:22px}
.inv-switch input{opacity:0;width:0;height:0}
.inv-switch .sl{position:absolute;inset:0;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:999px;transition:.2s;cursor:pointer}
.inv-switch .sl:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.inv-switch input:checked + .sl{background:var(--teal)}
.inv-switch input:checked + .sl:before{transform:translateX(18px)}
.row-click{cursor:pointer}.row-click:hover td{background:var(--glass-strong)}
/* bulk selection (Shopify-style) */
.bulk-th,.bulk-td{width:36px;text-align:center;padding-left:6px;padding-right:6px}
.bulk-cb,.bulk-all{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.bulk-bar{display:none;align-items:center;gap:12px;padding:8px 14px;margin-bottom:10px;border-radius:11px;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text)}
.bulk-bar>input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.bulk-count{font-weight:700;font-size:.85rem;white-space:nowrap}
.bulk-actions{display:flex;gap:6px;flex-wrap:wrap}
.bulk-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:1.35rem;cursor:pointer;line-height:1}
.bulk-danger{color:#e06a6a!important;border-color:rgba(224,106,106,.45)!important}
/* reusable table toolbar: search field with chips + filter popover (Shopify-style) + sortable headers */
.tbar{position:relative;margin-bottom:10px}
.tbar-field{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 11px;border:1px solid var(--glass-border);border-radius:9px;background:var(--glass-strong);cursor:text}
.tbar-field:focus-within{outline:2px solid var(--accent,#2a7bff);outline-offset:-1px}
.tbar-ico{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.tbar-chips{display:flex;gap:5px;flex-wrap:wrap}
.tbar-chip{display:inline-flex;align-items:center;gap:4px;background:var(--glass);border:1px solid var(--glass-border);border-radius:7px;padding:2px 4px 2px 9px;font-size:.78rem;font-weight:600;color:var(--text);white-space:nowrap}
.tbar-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px}
.tbar-chip button:hover{color:var(--text)}
.tbar-search{flex:1;min-width:120px;border:0;background:none;color:var(--text);font-size:.86rem;font-family:inherit;outline:none;padding:3px 0;-webkit-appearance:none;appearance:none}
.tbar-search::placeholder{color:var(--muted)}
.tbar-search::-webkit-search-cancel-button,.tbar-search::-webkit-search-decoration{-webkit-appearance:none;display:none}
.tbar-chip.pending{opacity:.65}
.tbar-pop{position:absolute;left:0;top:calc(100% + 5px);z-index:60;min-width:250px;max-width:340px;max-height:60vh;overflow:auto;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:11px;box-shadow:0 16px 50px rgba(8,16,36,.35);padding:5px;display:none}
.tbar-pop.open{display:block}
.pop-glabel{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:7px 11px 4px}
.pop-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 11px;border:0;background:none;color:var(--text);cursor:pointer;font-size:.88rem;border-radius:7px;font-family:inherit}
.pop-item:hover{background:var(--glass)}
.pop-item.on{font-weight:600}
.pop-item .ck{width:14px;flex-shrink:0;color:var(--accent,#2a7bff);font-size:.85rem;line-height:1}
.pop-item .pop-caret{margin-left:auto;color:var(--muted);font-size:1.15rem;line-height:1}
.pop-back{color:var(--muted);font-weight:600;font-size:.82rem}
.pop-clear{color:var(--accent,#2a7bff);font-weight:600}
.pop-sep{height:1px;background:var(--glass-border);margin:5px 6px}
.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
.th-sort:hover{color:var(--accent,#2a7bff)}
.th-sort .th-arrow{font-size:.72rem;margin-left:3px}
/* Shopify-style product editor (light cards) */
#prodEditor{display:none}#prodEditor.show{display:block}
#orderDetail,#custDetail{display:none}#orderDetail.show,#custDetail.show{display:block}
.od-table{width:100%;border-collapse:collapse;font-size:.88rem}
.od-table th{text-align:left;color:var(--muted,#5b6b84);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;border-bottom:1px solid var(--glass-border)}
.od-table td{padding:9px 8px;border-bottom:1px solid var(--glass-border);color:var(--text)}
.od-tot{margin-top:12px;margin-left:auto;max-width:300px}
.od-tot>div{display:flex;justify-content:space-between;padding:4px 0;font-size:.9rem;color:var(--text)}
.od-tot .od-grand{border-top:1px solid var(--glass-border);margin-top:4px;padding-top:8px;font-weight:800;font-size:1.05rem}
.od-addr{font-size:.88rem;line-height:1.5;color:var(--text)}
.od-lbl{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#5b6b84);margin-bottom:5px}
.od-badges{display:flex;flex-wrap:wrap;gap:6px}
/* inline quick-edit field (pencil on hover → input + ✓/✕) */
.qf{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.9rem;color:var(--text);min-height:26px}
.qf-empty{color:var(--muted)}
.qf-pencil{opacity:0;border:0;background:none;color:var(--muted);cursor:pointer;padding:2px;border-radius:5px;display:inline-flex;line-height:0;transition:opacity .12s,color .12s}
.qf-pencil svg{width:14px;height:14px;display:block}
.qf:hover .qf-pencil{opacity:1}
.qf-pencil:hover{color:var(--accent,#2a7bff);background:var(--glass-strong)}
.qf-input{padding:5px 8px;border:1px solid var(--glass-border);border-radius:7px;font-size:.86rem;color:var(--text);background:var(--glass-strong);font-family:inherit;min-width:130px}
.qf-input:focus{outline:2px solid var(--accent,#2a7bff);outline-offset:-1px;border-color:var(--accent,#2a7bff)}
.qf-ok,.qf-cancel{width:26px;height:26px;border-radius:6px;border:1px solid var(--glass-border);cursor:pointer;font-size:.82rem;line-height:1;flex-shrink:0}
.qf-ok{background:var(--accent);color:#fff;border-color:var(--accent)}
.qf-cancel{background:var(--glass-strong);color:var(--text)}
#custDetail .pe-field>div{font-size:.9rem;color:var(--text)}
.pe-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pe-top .pe-back{cursor:pointer;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text);border-radius:9px;padding:7px 13px;font-weight:600;font-size:.85rem}
.pe-top h2{font-size:1.4rem;font-weight:850;color:var(--text)}
.pe-top .pe-actions{margin-left:auto;display:flex;gap:8px}
.pe-grid{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
.pe-card{background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--glass-border);border-radius:14px;padding:18px;margin-bottom:16px;color:var(--text);box-shadow:var(--shadow)}
.pe-card h4{font-size:.92rem;font-weight:800;margin-bottom:14px;color:var(--text)}
.pe-field{margin-bottom:13px}
.pe-field label{display:block;font-size:.76rem;font-weight:600;color:var(--muted);margin-bottom:5px}
.pe-field input,.pe-field textarea,.pe-field select{width:100%;padding:9px 12px;border:1px solid var(--glass-border);border-radius:9px;font-size:.9rem;color:var(--text);background:var(--glass-strong);font-family:inherit}
.pe-field textarea{min-height:88px;resize:vertical}
.pe-field input::placeholder,.pe-field textarea::placeholder{color:var(--muted)}
.pe-field input:focus,.pe-field textarea:focus,.pe-field select:focus{outline:2px solid var(--accent,#2a7bff);outline-offset:-1px;border-color:var(--accent,#2a7bff)}
.pe-field input.pe-readonly{background:var(--glass);font-weight:700;color:var(--text);cursor:default}
.pe-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pe-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* Shopify-style media grid: first tile spans 2×2 (the main preview), the rest are thumbnails */
.pe-media-zone{border-radius:12px;transition:background .12s,outline .12s}
.pe-media-zone.zone-over{outline:2px dashed var(--accent,#7aa7ff);outline-offset:4px;background:var(--glass)}
.pe-media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pe-media-item{position:relative;border:1px solid var(--glass-border);border-radius:11px;overflow:hidden;background:var(--glass-strong);aspect-ratio:1/1;cursor:grab}
.pe-media-item.is-main{grid-column:span 2;grid-row:span 2}
.pe-media-item img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.pe-media-zoom{position:absolute;left:6px;bottom:6px;width:23px;height:23px;border-radius:7px;border:none;background:rgba(20,30,50,.72);color:#fff;font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.pe-media-item:hover .pe-media-zoom{opacity:1}
.pe-media-item.dragging{opacity:.35;cursor:grabbing}
.pe-media-badge{position:absolute;left:8px;top:8px;font-size:.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:rgba(20,30,50,.8);color:#fff;border-radius:5px;padding:2px 8px}
.pe-media-del{position:absolute;right:6px;top:6px;width:23px;height:23px;border-radius:50%;border:none;background:rgba(20,30,50,.72);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s}
.pe-media-item:hover .pe-media-del{opacity:1}
.pe-media-add{aspect-ratio:1/1;border:1.5px dashed var(--glass-border);border-radius:11px;background:var(--glass);color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.76rem;font-weight:600;text-align:center;padding:6px}
.pe-media-add--wide{grid-column:1/-1;aspect-ratio:auto;min-height:128px}
.pe-media-add:hover{border-color:var(--accent,#7aa7ff);color:var(--text);background:var(--glass-strong)}
.pe-media-plus{font-size:1.55rem;line-height:1}
.pe-media-add small{font-size:.62rem;font-weight:500;opacity:.7}
/* preview drawer media */
.pv-media{margin-bottom:14px}
.pv-media-main{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#eef1f5;box-shadow:0 4px 16px rgba(20,40,80,.1)}
.pv-media-main img{width:100%;height:100%;object-fit:cover;display:block}
.pv-media-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.pv-media-thumbs img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:default}
.pv-media-thumbs img.active{border-color:#3b6fd4}
/* media lightbox — full-screen image preview + alt editor */
.ml-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,16,36,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:4vh 4vw}
.ml-overlay.show{display:flex}
.ml-card{background:var(--surface-solid);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--glass-border);border-radius:16px;max-width:760px;width:100%;max-height:92vh;overflow:auto;position:relative;box-shadow:0 20px 60px rgba(8,16,36,.4);color:var(--text)}
.ml-x{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;border:none;background:rgba(20,30,50,.7);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;z-index:2}
.ml-stage{background:var(--glass);display:flex;align-items:center;justify-content:center;padding:18px;border-radius:16px 16px 0 0;min-height:300px}
.ml-stage img{max-width:100%;max-height:62vh;object-fit:contain;display:block}
.ml-meta{padding:16px 20px 20px}
.ml-meta label{display:block;font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:7px}
.ml-meta label span{font-weight:500;color:var(--muted)}
.ml-meta code{background:var(--glass);border-radius:4px;padding:1px 5px;font-size:.78rem}
.ml-meta textarea{width:100%;min-height:70px;padding:10px 12px;border:1px solid var(--glass-border);border-radius:9px;font-size:.9rem;color:var(--text);background:var(--glass-strong);font-family:inherit;resize:vertical}
.ml-meta textarea:focus{outline:2px solid var(--accent,#2a7bff);outline-offset:-1px;border-color:var(--accent,#2a7bff)}
.pe-block{border:1px solid var(--glass-border);border-radius:11px;padding:13px;margin-bottom:11px;background:var(--glass);position:relative}
.pe-block .pe-tag{display:inline-block;font-size:.66rem;font-weight:700;color:#22a06b;background:rgba(34,160,107,.16);border:1px solid rgba(34,160,107,.3);border-radius:5px;padding:2px 7px;margin-bottom:8px}
.pe-del{position:absolute;top:10px;right:12px;background:none;border:0;color:#d23b3b;cursor:pointer;font-size:.8rem;font-weight:700}
.pe-margin{font-size:.78rem;color:#22a06b;font-weight:700;margin-top:4px}
.pe-add{background:var(--glass-strong);color:var(--accent,#2a6fff);border:1px dashed var(--glass-border);padding:8px 14px;border-radius:9px;font-weight:600;cursor:pointer;font-size:.82rem}
.pe-save{background:var(--accent);color:#fff;border:0;padding:9px 20px;border-radius:9px;font-weight:700;cursor:pointer;font-size:.88rem}
.pe-save:hover{background:#1a63e0}
.pe-discard{background:var(--glass-strong);color:var(--text);border:1px solid var(--glass-border);padding:9px 16px;border-radius:9px;font-weight:600;cursor:pointer;font-size:.88rem}
.pe-preview{background:var(--glass-strong);color:var(--text);border:1px solid var(--glass-border);padding:9px 16px;border-radius:9px;font-weight:600;cursor:pointer;font-size:.88rem}
.pe-preview:hover{filter:brightness(1.08)}
/* Shopify-style: Discard/Save appear only once the record has unsaved changes */
.pe-when-dirty{display:none!important}
#prodEditor.editor-dirty .pe-when-dirty,#staffDetail.editor-dirty .pe-when-dirty,#custDetail.editor-dirty .pe-when-dirty{display:inline-block!important}
.pe-dirty-flag{display:none;font-size:.74rem;font-weight:700;color:#b06a00;background:#ffe9c2;border-radius:6px;padding:3px 9px;align-self:center}
#prodEditor.editor-dirty .pe-dirty-flag,#staffDetail.editor-dirty .pe-dirty-flag,#custDetail.editor-dirty .pe-dirty-flag{display:inline-block}
/* product preview drawer */
.pv-overlay{position:fixed;inset:0;background:rgba(8,16,36,.55);backdrop-filter:blur(4px);z-index:210;opacity:0;pointer-events:none;transition:.25s}
.pv-overlay.show{opacity:1;pointer-events:auto}
.pv-drawer{position:fixed;inset:3vh 3vw;z-index:220;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.5);transform:translateY(16px) scale(.985);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;display:flex;flex-direction:column;overflow:hidden}
.pv-drawer.show{transform:none;opacity:1;pointer-events:auto}
.pv-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--glass-border);color:var(--text);flex-wrap:wrap}
.pv-tools{display:flex;align-items:center;gap:10px}
.pv-pill{font-size:.66rem;font-weight:700;color:#b06a00;background:#ffe9c2;border-radius:6px;padding:2px 8px;margin-left:6px}
.pv-x{background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text);width:32px;height:32px;border-radius:50%;font-size:1.3rem;cursor:pointer;line-height:1}
.pv-seg{display:flex;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:3px;gap:2px}
.pv-seg button{border:0;background:none;color:var(--muted);font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:5px}
.pv-seg button.on{background:var(--surface-solid);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pv-theme-toggle{width:34px;height:34px;border-radius:9px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-size:1rem}
.pv-stage{flex:1;overflow:auto;background:#0e1626}
.pv-frame{margin:22px auto;border-radius:16px;overflow:hidden;box-shadow:0 12px 44px rgba(0,0,0,.32);transition:width .3s ease;background:#fff}
.pv-frame[data-dev="desktop"]{width:min(1080px,100%)}
.pv-frame[data-dev="tablet"]{width:768px;max-width:100%}
.pv-frame[data-dev="mobile"]{width:390px;max-width:100%}
.pv-scroll{padding:0}
/* preview content — storefront-style product page (responsive to the device frame) */
.pv-page{background:linear-gradient(160deg,#eef2f8,#e5ebf4);min-height:100%;padding:22px;color:#17263e}
.pv-frame[data-dev="mobile"] .pv-page{padding:14px}
.pv-card{background:#fff;border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(20,40,80,.12)}
.pv-hero{display:block}
.pv-frame[data-dev="desktop"] .pv-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:start}
.pv-frame[data-dev="tablet"] .pv-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.pv-hero-media{margin-bottom:14px}
.pv-frame[data-dev="desktop"] .pv-hero-media,.pv-frame[data-dev="tablet"] .pv-hero-media{margin-bottom:0}
.pv-noimg{aspect-ratio:1/1;border-radius:14px;background:#eef1f5;display:flex;align-items:center;justify-content:center;color:#90a0b8;font-size:.85rem;border:1px dashed #cdd5e0}
.pv-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:#5b6b84}
.pv-title{font-size:1.7rem;font-weight:850;margin:4px 0 6px;letter-spacing:-.02em}
.pv-desc{font-size:.95rem;color:#3a4a63;line-height:1.5}
.pv-badges{margin:10px 0}
.pv-badges .badge{color:#16233c}
.pv-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;padding:14px 16px;background:#f4f7fb;border-radius:14px}
.pv-price{font-size:1.5rem;font-weight:850}
.pv-price s{opacity:.5;font-size:1rem;font-weight:600;margin-left:6px}
.pv-add{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;border:0;padding:11px 20px;border-radius:999px;font-weight:800;cursor:default}
.pv-add[disabled]{opacity:.5}
.pv-pills{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.pv-pills .pv-pill{margin-left:0}
.pv-research{margin-top:6px}
.pv-research h4{font-size:.95rem;font-weight:800;margin:16px 0 7px;color:#17263e}
.pv-research p{font-size:.86rem;line-height:1.5;color:#2b3a52;margin:0}
.pv-research ul{margin:0;padding-left:18px}
.pv-research li{font-size:.86rem;line-height:1.5;color:#2b3a52;margin-bottom:4px}
.pv-faq{border-top:1px solid #e7ebf1;padding:9px 0}
.pv-faq b{display:block;font-size:.85rem;color:#17263e;margin-bottom:3px}
.pv-faq p{font-size:.83rem;color:#46566f}
.pv-specs{margin-top:10px}
.pv-specs h4{font-size:.95rem;font-weight:800;margin:14px 0 8px}
.pv-specs table{width:100%;border-collapse:collapse;font-size:.86rem}
.pv-specs td{padding:6px 8px;border-top:1px solid #e7ebf1;color:#26354d}
.pv-specs td:first-child{color:#5b6b84;width:42%;font-weight:600}
.pv-ruo{margin-top:14px;font-size:.74rem;color:#8a97ad;font-style:italic}
/* preview DARK mode (mirrors the storefront's dark palette) */
.pv-frame[data-pv-theme="dark"] .pv-page{background:linear-gradient(160deg,#0b1322,#090f1d);color:#e9f0fb}
.pv-frame[data-pv-theme="dark"] .pv-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.45)}
.pv-frame[data-pv-theme="dark"] .pv-cat{color:#9fb0c8}
.pv-frame[data-pv-theme="dark"] .pv-title{color:#f3f7fd}
.pv-frame[data-pv-theme="dark"] .pv-desc{color:#c2cfe2}
.pv-frame[data-pv-theme="dark"] .pv-buy{background:rgba(255,255,255,.06)}
.pv-frame[data-pv-theme="dark"] .pv-badges .badge{color:#e9f0fb}
.pv-frame[data-pv-theme="dark"] .pv-specs h4{color:#e9f0fb}
.pv-frame[data-pv-theme="dark"] .pv-specs td{color:#d4deec;border-color:rgba(255,255,255,.1)}
.pv-frame[data-pv-theme="dark"] .pv-specs td:first-child{color:#9fb0c8}
.pv-frame[data-pv-theme="dark"] .pv-research h4{color:#e9f0fb}
.pv-frame[data-pv-theme="dark"] .pv-research p,.pv-frame[data-pv-theme="dark"] .pv-research li{color:#c2cfe2}
.pv-frame[data-pv-theme="dark"] .pv-faq{border-color:rgba(255,255,255,.1)}
.pv-frame[data-pv-theme="dark"] .pv-faq b{color:#e9f0fb}
.pv-frame[data-pv-theme="dark"] .pv-faq p{color:#aebdd4}
.pv-frame[data-pv-theme="dark"] .pv-ruo{color:#7e8ca6}
.pv-frame[data-pv-theme="dark"] .pv-noimg,.pv-frame[data-pv-theme="dark"] .pv-media-main{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.pv-frame[data-pv-theme="dark"] [style*="background:#f4f7fb"]{background:rgba(255,255,255,.06)!important}
.pe-check{display:flex;align-items:center;gap:7px;font-size:.85rem;color:#1a1f2b}.pe-check input{width:auto}
.pe-ro{font-size:.85rem;color:#5b6b84}
/* SEO / search-engine listing */
.seo-preview{border:1px solid var(--glass-border);border-radius:11px;padding:12px 14px;margin-bottom:14px;background:var(--glass)}
.seo-pv-url{font-size:.78rem;color:#3a8a4f;margin-bottom:1px}
.seo-pv-title{font-size:1.08rem;color:#1a5fd0;font-weight:600;line-height:1.3;margin:1px 0 3px}
.seo-pv-desc{font-size:.82rem;color:var(--muted);line-height:1.45}
html[data-theme="dark"] .seo-pv-url{color:#5fcf86}
html[data-theme="dark"] .seo-pv-title{color:#7ab0ff}
.seo-url{display:flex;align-items:center;gap:5px}
.seo-url input{flex:1}
.seo-url>span{font-size:.85rem;color:var(--muted);white-space:nowrap}
.seo-redirect{border-top:1px solid var(--glass-border);padding-top:11px;margin-top:3px}
.seo-redirect b{color:var(--text)}
.toast-ok{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#173d2a;border:1px solid #2fa05f;color:#d7ffe8;padding:12px 22px;border-radius:12px;font-weight:600;z-index:300;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media(max-width:820px){.pe-grid{grid-template-columns:1fr}}
/* modal */
.modal{position:fixed;inset:0;z-index:200;background:rgba(8,16,36,.6);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:30px 16px;overflow:auto}
.modal.show{display:flex}
/* ===== Liquid-glass prompt/confirm modal (glassPrompt) ===== */
.gp-ov{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,16,36,.5);backdrop-filter:blur(6px)}
.gp-ov.open{display:flex}
.gp-card{width:min(460px,100%);background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:18px;padding:22px 22px 18px;box-shadow:0 30px 80px rgba(0,0,0,.4);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);animation:gp-in .16s ease}
@keyframes gp-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.gp-title{font-weight:800;font-size:1.06rem;color:var(--text);margin-bottom:6px}
.gp-msg{color:var(--muted);font-size:.86rem;line-height:1.55;margin-bottom:14px}
.gp-input{width:100%;box-sizing:border-box;background:var(--glass);border:1px solid var(--glass-border);border-radius:11px;padding:11px 13px;color:var(--text);font-size:.9rem;font-family:inherit;resize:vertical;outline:none;transition:border-color .15s,box-shadow .15s}
.gp-input:focus{border-color:#16b3c0;box-shadow:0 0 0 3px rgba(22,179,192,.18)}
.gp-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.gp-btn{padding:9px 16px;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass);color:var(--text);font-weight:700;font-size:.86rem;cursor:pointer;transition:.15s}
.gp-btn:hover{background:var(--glass-strong)}
.gp-primary{background:rgba(22,179,192,.16);border-color:rgba(22,179,192,.5);color:#16b3c0}
.gp-primary:hover{background:rgba(22,179,192,.26)}
.gp-danger{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.5);color:#f59e0b}
.gp-danger:hover{background:rgba(245,158,11,.26)}
/* ===== Agents page ===== */
.ag-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;margin-bottom:16px}
.ag-add{flex:none;width:50px;height:50px;border-radius:14px;border:1px solid var(--glass-border);background:var(--accent);color:#fff;font-size:1.7rem;font-weight:300;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px rgba(30,50,90,.25);transition:transform .12s,filter .12s}
.ag-add:hover{transform:translateY(-2px);filter:brightness(1.07)}
.ag-grid{display:flex;flex-direction:column;gap:16px}   /* org chart = vertical stack of departments */
.ag-row2{display:grid;grid-template-columns:150px 1fr;gap:10px}
.ag-ctx{background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:9px;padding:7px 10px;font-size:.82rem}
/* ----- Agent org chart ----- */
.org-dept{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:14px 16px;backdrop-filter:blur(14px)}
.org-dept-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--glass-border)}
.org-dept-name{font-weight:800;font-size:1rem}
.org-dept-act{display:flex;gap:6px;flex:none}
.org-tree{display:flex;flex-direction:column;gap:9px;overflow-x:auto}
.org-node{position:relative}
.org-children{margin-left:24px;border-left:2px solid var(--glass-border);padding-left:18px;margin-top:9px;display:flex;flex-direction:column;gap:9px}
.org-children>.org-node::before{content:'';position:absolute;left:-18px;top:23px;width:16px;height:2px;background:var(--glass-border)}
.org-card{display:flex;align-items:flex-start;gap:11px;background:var(--glass-strong);border:1px solid var(--glass-border);border-left-width:4px;border-radius:12px;padding:10px 12px;backdrop-filter:blur(10px)}
.org-dev{border-left-color:#a06bff}.org-eng{border-left-color:#16b3c0}.org-exec{border-left-color:#c79a3a}.org-mgr{border-left-color:var(--accent)}.org-sup{border-left-color:#2ab87a}.org-agt{border-left-color:#7a8aa8}.org-gdes{border-left-color:#e0559b}
.org-rank{flex:none;font-size:1.3rem;line-height:1.1}
.org-main{flex:1;min-width:0}
.org-name{font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-rankname{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:5px;padding:1px 6px}
.org-role{font-size:.8rem;color:var(--muted);margin-top:2px}
.org-models{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.org-chip{font-size:.66rem;font-weight:700;background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:1px 7px}
.org-kb{margin-top:6px}.org-kb summary{cursor:pointer;color:var(--accent);font-weight:700;font-size:.74rem}
.org-acts{flex:none;display:flex;gap:3px;align-items:center}
.org-mini{border:1px solid var(--glass-border);background:var(--glass);color:var(--text);border-radius:7px;padding:3px 7px;font:inherit;font-size:.78rem;cursor:pointer;line-height:1.2}
.org-mini:hover{background:var(--glass-strong);border-color:var(--accent)}
.org-del:hover{border-color:#c0392b;color:#c0392b}
/* view toggle (vertical / horizontal) */
.seg-toggle{display:inline-flex;border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;background:var(--glass)}
.seg-toggle button{border:none;background:none;color:var(--muted);padding:7px 11px;cursor:pointer;display:grid;place-items:center;line-height:0}
.seg-toggle button.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700}
.seg-toggle button:hover:not(.on){background:var(--glass-strong);color:var(--text)}
/* vertical top-down org chart (pure-CSS connectors) */
.oc-scroll{overflow-x:auto;padding:6px 2px 4px}
.octree{display:inline-block;min-width:100%;text-align:center}
.octree ul{display:flex;justify-content:center;padding-top:22px;position:relative;list-style:none}
.octree li{list-style:none;position:relative;padding:22px 11px 0;text-align:center}
.octree li::before,.octree li::after{content:'';position:absolute;top:0;right:50%;width:50%;height:22px;border-top:2px solid var(--glass-border)}
.octree li::after{right:auto;left:50%;border-left:2px solid var(--glass-border)}
.octree li:only-child::before,.octree li:only-child::after{display:none}
.octree li:only-child{padding-top:0}
.octree li:first-child::before,.octree li:last-child::after{border:0 none}
.octree li:last-child::before{border-right:2px solid var(--glass-border);border-radius:0 6px 0 0}
.octree li:first-child::after{border-radius:6px 0 0 0}
.octree ul ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid var(--glass-border);width:0;height:22px}
.octree>ul{padding-top:0}
.oc-node{display:inline-block;width:190px;text-align:left;vertical-align:top;background:var(--glass-strong);border:1px solid var(--glass-border);border-top-width:4px;border-radius:12px;padding:9px 11px;backdrop-filter:blur(10px)}
.oc-node.org-dev{border-top-color:#a06bff}.oc-node.org-eng{border-top-color:#16b3c0}.oc-node.org-exec{border-top-color:#c79a3a}.oc-node.org-mgr{border-top-color:var(--accent)}.oc-node.org-sup{border-top-color:#2ab87a}.oc-node.org-agt{border-top-color:#7a8aa8}.oc-node.org-gdes{border-top-color:#e0559b}
.oc-node-top{display:flex;align-items:center;gap:7px}
.oc-name{font-weight:800;font-size:.86rem;overflow:hidden;text-overflow:ellipsis}
.oc-role{font-size:.74rem;color:var(--muted);margin-top:3px}
.oc-acts{display:flex;gap:3px;margin-top:8px}
.oc-loose{display:flex;flex-wrap:wrap;gap:10px}
.org-clean-btn{border:1px solid var(--glass-border);background:var(--glass);color:var(--muted);border-radius:10px;padding:7px 10px;cursor:pointer;display:grid;place-items:center;font-size:.95rem;line-height:0}
.org-clean-btn.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.org-clean-btn:hover:not(.on){background:var(--glass-strong);color:var(--text)}
/* vertical free-canvas: auto-width, draggable, resizable department blocks */
.org-canvas{position:relative;min-height:320px}
.org-canvas .org-dept{position:absolute;width:auto;max-width:min(92vw,1100px);padding:10px;margin:0}
.org-canvas .org-dept-head{cursor:move;user-select:none}
.org-canvas .org-dept.org-dragging{opacity:.93;box-shadow:0 18px 50px rgba(0,0,0,.4);z-index:50}
.org-resize{position:absolute;right:4px;bottom:4px;width:14px;height:14px;cursor:nwse-resize;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);opacity:.5;border-radius:0 0 5px 0}
.org-resize:hover{opacity:1;border-color:var(--accent)}
.org-clean .org-acts,.org-clean .oc-acts,.org-clean .org-dept-act,.org-clean .org-resize{display:none!important}
.org-clean .org-dept-head{cursor:default}
.org-clean .org-card[draggable],.org-clean .oc-node[draggable]{cursor:default}
/* drag agents between departments */
.org-card[draggable],.oc-node[draggable]{cursor:grab}
.org-card[draggable]:active,.oc-node[draggable]:active{cursor:grabbing}
.org-drop-on{outline:2px dashed var(--accent);outline-offset:3px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.oc-name-link{cursor:pointer}.oc-name-link:hover{color:var(--accent);text-decoration:underline}
/* ----- Agent profile ----- */
.prof-head{display:flex;align-items:center;gap:16px;background:var(--glass);border:1px solid var(--glass-border);border-left-width:4px;border-radius:16px;padding:16px 18px;backdrop-filter:blur(14px)}
.prof-head.org-dev{border-left-color:#a06bff}.prof-head.org-eng{border-left-color:#16b3c0}.prof-head.org-exec{border-left-color:#c79a3a}.prof-head.org-mgr{border-left-color:var(--accent)}.prof-head.org-sup{border-left-color:#2ab87a}.prof-head.org-agt{border-left-color:#7a8aa8}.prof-head.org-gdes{border-left-color:#e0559b}
/* Graphic Designer — image-generation prompt builder */
.ig-card .prof-sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ig-badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);background:var(--chip-bg,rgba(127,127,127,.1));border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.ig-badge b{color:var(--text)}
.ig-badge-warn{color:#d98a2b;border-color:rgba(217,138,43,.4)}
.ig-help{font-size:.8rem;color:var(--muted);margin:6px 0 12px}
.ig-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.ig-f{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted)}
.ig-f-wide{grid-column:1 / -1}
.ig-f .inp,.ig-f textarea.inp{font-size:.86rem}
.ig-prev-wrap{margin:12px 0 4px}
.ig-lbl{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.ig-prev{background:var(--code-bg,rgba(127,127,127,.08));border:1px solid var(--line);border-radius:var(--radius-md,11px);padding:10px 12px;font-size:.84rem;line-height:1.45;color:var(--text);white-space:pre-wrap;min-height:38px}
.ig-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.ig-status{font-size:.78rem}
.ig-result{margin-top:12px}
.ig-result img{max-width:320px;width:100%;border-radius:var(--radius-md,11px);border:1px solid var(--line);display:block}
.ig-cap{font-size:.72rem;margin-top:5px}
@media(max-width:680px){.ig-grid{grid-template-columns:1fr}}
.prof-avatar{flex:none;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.9rem;background:var(--glass-strong);border:1px solid var(--glass-border)}
.prof-id{flex:1;min-width:0}.prof-name{font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:9px}
.prof-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:980px){.prof-cols{grid-template-columns:1fr}}
.prof-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.prof-sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.prof-sec-act{display:flex;align-items:center;gap:8px}
.prof-kb{max-height:300px;overflow:auto}
.prof-timeline{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--glass-border);margin-left:6px;padding-left:14px}
.prof-tl-item{position:relative;padding:7px 0}
.prof-tl-item::before{content:'';position:absolute;left:-21px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--menu-bg)}
.prof-tl-item.prof-tl-progress::before{background:#2ab87a}.prof-tl-item.prof-tl-assist::before{background:#c79a3a}.prof-tl-item.prof-tl-done::before{background:#1f9d63}
.prof-tl-date{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em}
.prof-tl-body{font-size:.84rem;line-height:1.5;white-space:pre-wrap}
.prof-newtask{display:flex;flex-direction:column;gap:7px;margin:6px 0 10px;padding:10px;border:1px dashed var(--glass-border);border-radius:10px}
.prof-newtask[hidden]{display:none}
.prof-newtask .inp,.prof-task .inp,.prof-newtask textarea{width:100%;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:9px;padding:8px 11px;color:var(--text);font:inherit;font-size:.86rem;outline:none}
/* ===== Global liquid-glass text field — every .inp matches the site (never raw browser style) ===== */
.inp{border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:9px;padding:8px 11px;color:var(--text);font:inherit;font-size:.86rem;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.inp::placeholder{color:var(--muted)}
textarea.inp{resize:vertical}
select.inp{cursor:pointer}
/* Universal baseline — any text-like field with no component style still renders liquid-glass, never the raw browser control.
   Bare element selectors (specificity 0,0,1) lose to every scoped/class rule above, so this only paints otherwise-unstyled fields. */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=tel],input[type=url],input[type=date],input[type=datetime-local],input[type=month],input[type=time],input:not([type]),textarea,select{border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:9px;padding:8px 11px;color:var(--text);font:inherit;font-size:.86rem;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=month]:focus,input[type=time]:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
input::placeholder,textarea::placeholder{color:var(--muted)}
textarea{resize:vertical}
select{cursor:pointer}
.prof-dupnote{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(217,154,43,.12);border:1px solid rgba(217,154,43,.4);color:var(--text);font-size:.82rem;line-height:1.5}
.prof-task{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:12px;padding:11px 13px;margin-top:10px}
.prof-task-open{cursor:pointer}.prof-task-open:hover{color:var(--accent);text-decoration:underline}
/* ===== Task page (compact top row + one-line expandable log) ===== */
.tp-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tp-top .wbs-kind{flex:none}
.tp-prog{flex:1;min-width:130px;display:flex;align-items:center;gap:8px}
.tp-prog .run-pill-bar{flex:1;margin-top:0}
.tp-pct{flex:none;font-size:.74rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tp-status{flex:none}
.tp-author{color:var(--text)!important;text-decoration:none;font-weight:600}
.tp-author:hover{text-decoration:underline}
.tp-log{display:flex;flex-direction:column}
.tp-logitem{display:flex;gap:9px;align-items:baseline;padding:5px 0;border-top:1px solid var(--glass-border);cursor:pointer}
.tp-logitem:first-child{border-top:0}
.tp-log-meta{flex:none;font-size:.7rem;color:var(--muted);white-space:nowrap}
.tp-log-msg{flex:1;min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-logitem.open .tp-log-msg{white-space:pre-wrap;overflow:visible}
.tp-logitem.open{background:var(--glass);border-radius:8px;padding:6px 8px}
/* ===== Task board (Trello-style, liquid glass) — columns per agent ===== */
.task-board{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;align-items:flex-start}
.tb-col{flex:0 0 272px;max-width:272px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:15px;padding:10px;display:flex;flex-direction:column;max-height:72vh;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tb-col-head{display:flex;align-items:center;gap:7px;padding:2px 4px 9px}
.tb-col-ic{flex:none;font-size:1rem}
.tb-col-head b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.tb-col-ct{flex:none;font-size:.7rem;font-weight:800;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;padding:1px 8px}
.tb-col-body{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:2px}
.tb-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:11px;padding:9px 10px;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.tb-card:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(0,0,0,.13);border-color:var(--accent)}
.tb-card-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.tb-card-title{font-size:.84rem;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-card-prog{display:flex;align-items:center;gap:7px;margin-top:7px}
.tb-card-prog .run-pill-bar{flex:1;margin-top:0}
.tb-card-prog span{font-size:.68rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.tb-empty{padding:12px 6px;font-size:.78rem;text-align:center;opacity:.7}
.task-chat-link{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.task-chat-link:hover{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.task-chat-active{border-color:var(--accent)!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.task-chat-hint{margin-top:4px;font-size:.7rem;color:var(--accent);font-weight:700}
.prof-task-done{opacity:.72}
.prof-pill-review{background:rgba(217,154,43,.22);color:#d99a2b}
.prof-task-review{box-shadow:inset 0 0 0 1px rgba(217,154,43,.4)}
.prof-approve{color:#1f9d63;border-color:rgba(31,157,99,.4)!important}.prof-approve:hover{background:rgba(31,157,99,.14)!important}
.prof-task-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.prof-task-act{display:flex;align-items:center;gap:5px;flex:none}
.prof-adv{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 18%,transparent));border-color:color-mix(in srgb,var(--accent) 40%,transparent);font-weight:700}
.prof-bar{height:7px;border-radius:999px;background:var(--glass);overflow:hidden;margin:8px 0 2px}
.prof-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .4s}
.prof-bar-pct{font-size:.68rem;font-weight:700;color:var(--muted);text-align:right}
.prof-assists{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem;margin:6px 0}
.prof-assists .org-chip button{border:none;background:none;cursor:pointer;color:var(--muted);font-size:.85rem;margin-left:3px;line-height:1}
.prof-tasklog{margin-top:6px}.prof-tasklog summary{cursor:pointer;color:var(--accent);font-weight:700;font-size:.78rem}
.agent-imgrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.agent-img{flex:0 1 auto;max-width:min(240px,46%);max-height:260px;border-radius:10px;border:1px solid var(--glass-border);vertical-align:top;background:var(--glass-strong);cursor:zoom-in;transition:transform .12s}
.agent-img:hover{transform:scale(1.02)}
/* fullscreen image viewer */
.ag-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:34px}
.ag-lightbox.show{display:flex;animation:agLbIn .15s ease}
@keyframes agLbIn{from{opacity:0}to{opacity:1}}
.ag-lb-img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.6);object-fit:contain}
.ag-lb-x{position:absolute;top:18px;right:22px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.7rem;cursor:pointer;line-height:1;display:grid;place-items:center}
.ag-lb-x:hover{background:rgba(255,255,255,.3)}
.ag-lb-dl{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(255,255,255,.16);border-radius:999px;padding:8px 18px;text-decoration:none;font-weight:700;font-size:.84rem}
.ag-lb-dl:hover{background:rgba(255,255,255,.3)}
/* ===== Notifications: bell + badge + right drawer + liquid-glass banners ===== */
.notif-btn{position:fixed;top:14px;right:18px;z-index:120;border:1px solid var(--glass-border);background:var(--glass);border-radius:11px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;color:var(--text);box-shadow:var(--shadow)}
.notif-btn:hover{background:var(--glass-strong)}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#e0463c;color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;border:2px solid var(--menu-bg)}
.notif-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.35)}
.notif-drawer{position:absolute;top:0;right:0;height:100%;width:min(380px,92vw);background:var(--surface-solid);border-left:1px solid var(--glass-border);box-shadow:-12px 0 40px rgba(0,0,0,.3);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease;backdrop-filter:blur(20px)}
.notif-drawer.open{transform:translateX(0)}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid var(--glass-border);font-size:1rem}
.notif-head-act{display:flex;align-items:center;gap:8px}
.notif-readall{border:none;background:none;color:var(--accent);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.notif-x{border:none;background:var(--glass);width:30px;height:30px;border-radius:50%;font-size:1.3rem;cursor:pointer;color:var(--text);line-height:1}
.notif-list{flex:1;overflow:auto;padding:6px}
.notif-item{padding:11px 12px;border-radius:11px;cursor:pointer;border:1px solid transparent}
.notif-item:hover{background:var(--glass-strong)}
.notif-item.unread{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.notif-item-title{font-weight:700;font-size:.86rem}
.notif-item-body{font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.4}
.notif-item-time{font-size:.68rem;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.02em}
.notif-toasts{position:fixed;top:16px;right:16px;z-index:10000;display:flex;flex-direction:column;gap:10px;max-width:340px;pointer-events:none}
.notif-toast{pointer-events:auto;position:relative;background:var(--glass);border:1px solid var(--glass-border);border-left:3px solid var(--accent);border-radius:13px;padding:12px 34px 12px 14px;box-shadow:0 12px 36px rgba(20,40,80,.22);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);cursor:pointer;opacity:0;transform:translateX(20px);transition:opacity .25s,transform .25s}
.notif-toast.show{opacity:1;transform:translateX(0)}
.notif-toast-title{font-weight:800;font-size:.85rem}
.notif-toast-body{font-size:.78rem;color:var(--muted);margin-top:3px;line-height:1.4}
.notif-toast-go{font-size:.7rem;color:var(--accent);font-weight:700;margin-top:5px}
.notif-toast-x{position:absolute;top:7px;right:8px;border:none;background:none;color:var(--muted);font-size:1.1rem;cursor:pointer;line-height:1}
.notif-toast-x:hover{color:var(--text)}
.ai-bubble .agent-imgrow .agent-img{max-width:min(160px,46%)}
.prof-tl-feedback::before{background:#7a5af5!important}
.prof-working{animation:profPulse 1.1s ease-in-out infinite}@keyframes profPulse{0%,100%{opacity:.55}50%{opacity:1}}
.prof-tasklog .prof-timeline{margin-top:8px;max-height:60vh;overflow-y:auto;padding-right:6px}
/* ----- Work breakdown tree ----- */
.wbs-kind{display:inline-block;font-size:.58rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;padding:1px 7px;border-radius:999px;margin-right:6px;background:linear-gradient(90deg,rgba(22,179,192,.18),rgba(160,107,255,.14));border:1px solid var(--glass-border);color:#16b3c0;vertical-align:middle}
.wbs-kind-project{color:#a06bff}
.wbs{margin:8px 0;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-strong);padding:6px 10px}
.wbs>summary{cursor:pointer;font-weight:800;font-size:.82rem;padding:2px 0;color:#16b3c0}
.wbs-node{margin:3px 0}
.wbs-row{display:flex;align-items:center;gap:6px;font-size:.83rem;padding:2px 0}
.wbs-st{width:1.1em;text-align:center;font-weight:800}
.wbs-st-done{color:#2bb673}.wbs-st-review{color:#f0a92b}.wbs-st-blocked{color:#ff4d6d}
.wbs-cat{font-size:.85rem}
.wbs-title{flex:0 1 auto}
.wbs-owner{font-size:.72rem;color:#16b3c0;font-weight:700;white-space:nowrap}
.wbs-src{font-size:.6rem;text-transform:uppercase;letter-spacing:.03em;font-weight:800;color:var(--muted);border:1px solid var(--glass-border);border-radius:5px;padding:0 4px}
.wbs-kids{margin-left:14px;padding-left:9px;border-left:2px solid var(--glass-border)}
.wbs-row.wbs-build{border-left:0}
.wbs-node>.wbs-row.wbs-security .wbs-cat{filter:none}
/* ----- Agent MIND panel ----- */
.mind-card{border-left:4px solid #a06bff}
.mind-auto{font-size:.78rem;font-weight:700;padding:3px 9px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-strong)}
.mind-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:6px}
@media(max-width:980px){.mind-grid{grid-template-columns:1fr}}
.mind-ctx{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:12px;padding:11px 13px}
.mind-ctx-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.86rem}
.mind-bar{height:9px;border-radius:999px;background:rgba(140,140,160,.18);overflow:hidden;margin:7px 0}
.mind-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#5b8cff,#a06bff);transition:width .4s}
.mind-bar.warm .mind-bar-fill{background:linear-gradient(90deg,#f0a92b,#ff7a59)}
.mind-bar.hot .mind-bar-fill{background:linear-gradient(90deg,#ff7a59,#ff4d6d)}
.mind-ctx-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.mind-ctx-act{display:flex;gap:6px;align-items:center}
.mind-lim{width:92px;padding:4px 7px;font-size:.78rem}
.mind-tail{margin-top:8px;font-size:.78rem}.mind-tail summary{cursor:pointer;color:var(--muted)}
.mind-tail-item{padding:4px 0;border-top:1px dashed var(--glass-border)}
.mind-tail-role{display:inline-block;font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--muted);background:var(--glass);border:1px solid var(--glass-border);border-radius:5px;padding:0 5px;margin-right:5px}
.mind-learn{margin-top:12px}
.mind-src{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px}
.mind-src .inp{flex:1;min-width:120px;padding:5px 8px;font-size:.78rem}
.mind-runs,.mind-tail{color:var(--muted)}
.mind-run{padding:4px 0;border-top:1px dashed var(--glass-border);font-size:.78rem}
.mind-goal{margin:8px 0;padding:8px 11px;border-radius:10px;background:linear-gradient(90deg,rgba(160,107,255,.12),rgba(91,140,255,.08));border:1px solid var(--glass-border);font-size:.86rem;font-weight:600}
.mind-goal-k{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:#a06bff;margin-bottom:2px}
.mind-recs{display:flex;flex-direction:column;gap:9px}
.mind-rec{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:11px;padding:10px 12px}
.mind-rec-open{border-left:3px solid #5b8cff}.mind-rec-queued{border-left:3px solid #2bb673;opacity:.92}.mind-rec-accepted{border-left:3px solid #f0a92b;opacity:.92}
.mind-rec-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mind-rec-meta{margin-left:auto;font-size:.72rem;color:var(--muted);white-space:nowrap}
.mind-cat{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;font-weight:800;padding:1px 7px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass)}
.mind-cat-feature{color:#5b8cff}.mind-cat-fix{color:#ff4d6d}.mind-cat-improvement{color:#a06bff}.mind-cat-research{color:#f0a92b}.mind-cat-growth{color:#2bb673}
.mind-rec-why{font-size:.82rem;color:var(--muted);margin:5px 0}
.mind-rec-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.mind-rec-act{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.mind-rec-link{font-size:.78rem;color:#2bb673;text-decoration:none;font-weight:700;margin-left:auto}
.mind-memwrap{margin-top:14px;border-top:1px solid var(--glass-border);padding-top:10px}
.mind-addmem{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:11px;padding:10px;margin:8px 0;display:flex;flex-direction:column;gap:7px}
.mind-mems{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:980px){.mind-mems{grid-template-columns:1fr}}
.mind-memgroup-h{font-size:.82rem;font-weight:800;margin:4px 0 6px}
.mind-mem{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:8px 10px;margin-bottom:7px}
.mind-mem.pinned{border-color:#a06bff;box-shadow:0 0 0 1px rgba(160,107,255,.25) inset}
.mind-mem-top{display:flex;align-items:center;gap:6px}
.mind-imp{font-size:.6rem;letter-spacing:-1px;color:#a06bff}
.mind-mem-act{margin-left:auto;display:flex;gap:4px}
.mind-mem-body{font-size:.82rem;margin:3px 0}
.mind-mem-src{font-size:.68rem}
/* ----- Engineer architecture spec ----- */
.spec-card{border:1px solid var(--glass-border);border-left:4px solid #16b3c0;border-radius:12px;padding:11px 13px;margin:10px 0;background:var(--glass-strong)}
.spec-h{font-weight:800;font-size:.92rem;margin-bottom:6px}
.spec-sec{margin:4px 0}.spec-sec>summary{cursor:pointer;font-weight:700;font-size:.84rem;padding:3px 0}
.spec-md{font-size:.83rem;white-space:pre-wrap;color:var(--muted);padding:4px 0 6px}
.spec-ul{margin:4px 0 6px;padding-left:18px;font-size:.83rem}.spec-ul li{margin:3px 0}
.spec-handoffs{margin-top:8px;border-top:1px solid var(--glass-border);padding-top:8px}
.spec-handoffs-h{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:#16b3c0;margin-bottom:5px}
.spec-prompt{margin:4px 0}.spec-prompt>summary{cursor:pointer;font-weight:700;font-size:.82rem;padding:4px 8px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px}
.spec-pre{white-space:pre-wrap;font-size:.78rem;line-height:1.45;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;padding:9px 11px;margin:5px 0;max-height:38vh;overflow:auto}
.ag-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:14px 15px;backdrop-filter:blur(14px)}
.ag-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ag-card-name{font-weight:800;font-size:1rem}
.ag-card-x{border:none;background:none;cursor:pointer;font-size:.95rem;opacity:.6;border-radius:6px;padding:2px 5px}.ag-card-x:hover{opacity:1;background:rgba(255,90,90,.14)}
.ag-mode-badge{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--muted)}
.ag-mode-badge.ag-mode-segmented{color:#7a5af5;border-color:#7a5af5}
.ag-card-det{margin-top:6px}.ag-card-det summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--accent)}
.ag-card-seg{margin-top:8px}.ag-card-seg-h{font-size:.74rem;font-weight:800;color:var(--muted);margin-bottom:3px}
.ag-card-pre{margin:6px 0 0;padding:9px 11px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:8px;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:280px;overflow:auto;color:var(--text)}
/* agent wizard */
.ag-wiz-body{display:flex;flex-direction:column;gap:16px}
.ag-field{display:flex;flex-direction:column;gap:6px}
.ag-field>.ag-lbl,.ag-wiz-body>label.ag-field{font-size:.82rem;font-weight:700;color:var(--text)}
.ag-wiz-body input:not([type=radio]):not([type=checkbox]),.ag-wiz-body textarea,.ag-wiz-body select{padding:10px 12px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-strong);color:var(--text);font:inherit;font-size:.88rem;outline:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,box-shadow .15s}
.ag-wiz-body select{cursor:pointer}
.ag-wiz-body input:not([type=radio]):not([type=checkbox])::placeholder,.ag-wiz-body textarea::placeholder{color:var(--muted)}
.ag-wiz-body input:not([type=radio]):not([type=checkbox]):focus,.ag-wiz-body textarea:focus,.ag-wiz-body select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.ag-seg{display:flex;flex-direction:column;gap:8px}
.ag-seg-opt{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;font-weight:500;color:var(--muted);cursor:pointer}
.ag-seg-opt input{margin-top:3px;flex:none}.ag-seg-opt b{color:var(--text)}
/* multi-select */
.ag-ms{position:relative}
.ag-ms-field{display:flex;align-items:center;gap:8px;min-height:42px;padding:6px 10px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-strong);cursor:pointer}
.ag-ms-chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ag-ms-ph{color:var(--muted);font-size:.86rem}
.ag-ms-caret{flex:none;color:var(--muted)}
.ag-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 6px 2px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:.74rem;font-weight:700}
.ag-chip button{border:none;background:rgba(255,255,255,.25);color:#fff;width:15px;height:15px;border-radius:50%;cursor:pointer;font-size:.8rem;line-height:1;display:grid;place-items:center}
.ag-ms-menu{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:var(--z-dropdown);max-width:calc(100vw - 16px);max-height:min(240px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:11px;box-shadow:0 16px 40px rgba(0,0,0,.4);padding:5px}
.ag-ms-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:.84rem}
.ag-ms-opt:hover{background:rgba(120,140,180,.12)}
.ag-ms-nm{flex:1;font-weight:600}
.ag-ms-prov{font-size:.7rem;color:var(--muted);font-weight:700}
.ag-prompts{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ag-prompt-h{font-size:.76rem;font-weight:800;color:var(--muted);margin-bottom:4px}
.ag-prompt-ta{width:100%;padding:10px 12px;border:1px solid var(--glass-border);border-radius:9px;background:var(--glass-strong);color:var(--text);font-family:ui-monospace,Menlo,monospace;font-size:.74rem;line-height:1.5;resize:vertical;outline:none}
/* agent intelligence (knowledge base) */
.ag-intel{margin-top:10px;padding-top:10px;border-top:1px dashed var(--glass-border)}
.ag-intel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem;font-weight:700;margin-bottom:5px}
.ag-auto{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--muted);cursor:pointer}
.ag-intel-gen{background:linear-gradient(135deg,var(--accent),#7a5af5);color:#fff;border:none}
.ag-intel-btn{margin-top:7px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:8px;padding:5px 11px;font:inherit;font-size:.76rem;font-weight:600;cursor:pointer}
.ag-intel-btn:hover{border-color:var(--accent);color:var(--accent)}
.ag-kb{margin-top:8px;padding:11px 13px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:9px;font-size:.78rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto;color:var(--text)}
.ag-kb .ag-kb-h{display:block;margin:9px 0 2px;color:var(--accent);font-size:.82rem}
.ag-kb .ag-kb-h:first-child{margin-top:0}
/* ===== CRM / unified inbox ===== */
.crm-ch{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;color:#fff;font-size:.72rem;font-weight:800;line-height:1}
/* sub-nav (Inbox | Rules) */
.crm-subnav{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--glass-border);padding-bottom:0}
.crm-subtab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;padding:8px 14px;cursor:pointer;margin-bottom:-1px}
.crm-subtab:hover{color:var(--text)}
.crm-subtab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* rules cards */
.crm-rules-grid{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.crm-rule-card{display:flex;align-items:center;gap:16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:18px 20px;backdrop-filter:blur(14px)}
.crm-rule-main{flex:1;min-width:0}.crm-rule-name{font-weight:800;font-size:.96rem}.crm-rule-desc{font-size:.82rem;margin-top:3px;line-height:1.45}
.crm-switch{flex:none;position:relative;display:inline-block;width:46px;height:26px;cursor:pointer}
.crm-switch input{position:absolute;opacity:0;width:0;height:0}
.crm-switch-track{position:absolute;inset:0;border-radius:999px;background:var(--glass-border);transition:background .18s}
.crm-switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.crm-switch input:checked+.crm-switch-track{background:var(--accent)}
.crm-switch input:checked+.crm-switch-track .crm-switch-knob{transform:translateX(20px)}
.crm-switch input:disabled+.crm-switch-track{opacity:.5;cursor:not-allowed}
/* ===== CS automation (Flows / Rules / Queue / Knowledge) ===== */
.cs-tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.cs-tbl th{text-align:left;padding:9px 12px;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--glass-border)}
.cs-tbl td{padding:9px 12px;border-bottom:1px solid var(--glass-border);vertical-align:top}
.cs-tbl tr:last-child td{border-bottom:none}
.cs-tbl a{color:var(--accent);font-weight:700;text-decoration:none}
.cs-pill{font-size:.66rem;font-weight:800;text-transform:uppercase;padding:1px 7px;border-radius:999px}
.cs-pill-auto{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}.cs-pill-manual{background:rgba(120,140,180,.18);color:var(--muted)}
.cs-status{font-size:.66rem;font-weight:800;text-transform:uppercase;padding:1px 7px;border-radius:999px}
.cs-status-active{background:rgba(46,200,120,.18);color:#1f9d63}.cs-status-paused{background:rgba(217,154,43,.18);color:#c98a1e}
.cs-statustog{display:flex;align-items:center;gap:9px}
.cs-guard{font-size:.6rem;font-weight:800;text-transform:uppercase;color:#c0392b;background:rgba(192,57,43,.12);border-radius:5px;padding:0 5px;margin-left:4px}
.cs-esc{font-size:.6rem;font-weight:800;text-transform:uppercase;color:#c0392b;background:rgba(192,57,43,.12);border-radius:5px;padding:0 5px;margin-left:4px}
.cs-prio{font-size:.62rem;font-weight:800;color:var(--muted);background:var(--glass-strong);border-radius:5px;padding:0 5px;margin-left:4px}
.cs-editor{display:flex;flex-direction:column;gap:16px;max-width:760px}
.cs-field{display:flex;flex-direction:column;gap:6px}
.cs-field>label{font-weight:700;font-size:.82rem}
.cs-editor .inp{width:100%;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:9px;padding:8px 11px;color:var(--text);font:inherit;font-size:.86rem;outline:none}
.cs-editor textarea.inp{min-height:70px;resize:vertical}
.cs-editor .inp:focus{border-color:var(--accent)}
.cs-row{display:flex;gap:8px;align-items:center}
.cs-modes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cs-chk{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:500;cursor:pointer;padding:2px 0}
.cs-chkrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.82rem}
.cs-warn{font-size:.72rem;color:#c98a1e;font-weight:600}
.cs-rulelist{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;border:1px solid var(--glass-border);border-radius:10px;padding:8px}
.cs-rulepick{display:flex;gap:9px;align-items:flex-start;padding:6px;border-radius:8px;cursor:pointer;font-size:.82rem}
.cs-rulepick:hover{background:rgba(120,140,180,.08)}
.cs-inline{margin-top:8px;font-size:.82rem}.cs-inline summary{cursor:pointer;color:var(--accent);font-weight:700}
.cs-inline .inp,.cs-subform .inp{margin-top:6px}
.cs-subform{display:flex;flex-direction:column;gap:7px;margin-top:8px;padding:10px;border:1px dashed var(--glass-border);border-radius:10px}
.cs-actions{display:flex;gap:8px;align-items:center;padding-top:6px}
.cs-danger{color:#c0392b;border-color:rgba(192,57,43,.4)}
.cs-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:16px;backdrop-filter:blur(14px);margin-bottom:12px}
details.cs-card summary{cursor:pointer;font-weight:700}
.cs-count{font-size:.8rem;background:var(--accent);color:#fff;border-radius:999px;padding:1px 9px;vertical-align:middle}
/* metrics + ramp */
.cs-metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:1000px){.cs-metric-grid{grid-template-columns:1fr}}
.cs-arms{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.cs-arm{border:1px solid var(--glass-border);border-top-width:3px;border-radius:12px;padding:12px;background:var(--glass-strong)}
.cs-arm-auto{border-top-color:var(--accent)}.cs-arm-manual{border-top-color:#7a8aa8}
.cs-arm-h{font-weight:800;font-size:.8rem}
.cs-arm-big{font-size:1.7rem;font-weight:800;margin-top:4px}.cs-arm-star{font-size:1rem;color:#d99a2b;margin-left:3px}
.cs-arm-cap{font-size:.7rem;color:var(--muted);text-transform:uppercase}
.cs-arm-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-top:9px}
.cs-arm-grid>div{display:flex;justify-content:space-between;font-size:.78rem;border-bottom:1px dotted var(--glass-border);padding:2px 0}
.cs-arm-grid b{font-weight:800}.cs-arm-grid span{color:var(--muted)}
.cs-conf{margin-top:10px;padding:8px 11px;border-radius:9px;font-size:.82rem;font-weight:600}
.cs-conf.ok{background:rgba(46,200,120,.14);color:#1f9d63}.cs-conf.warn{background:rgba(217,154,43,.16);color:#c98a1e}.cs-conf.muted-box,.muted-box{background:var(--glass-strong);color:var(--muted)}
.cs-ramp-steps{display:flex;align-items:center;gap:7px;margin:10px 0;flex-wrap:wrap}
.cs-rampstep{display:inline-grid;place-items:center;width:40px;height:34px;border-radius:9px;border:1px solid var(--glass-border);font-weight:800;font-size:.85rem;color:var(--muted)}
.cs-rampstep.past{border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--text)}
.cs-rampstep.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);border-color:var(--accent)}
.cs-ramparrow{color:var(--muted)}.cs-rampcap{font-size:.68rem;color:var(--muted);margin-left:6px;text-transform:uppercase}
.cs-gates{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cs-gate{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--muted)}
.cs-gate.on{background:rgba(46,200,120,.16);border-color:rgba(46,200,120,.4);color:#1f9d63}
.cs-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.cs-cfg{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8rem}
.cs-rate-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--glass-border)}
.cs-rate-q{font-size:.82rem;flex:1;min-width:0}
.cs-stars{display:flex;gap:1px}.cs-stars button{border:none;background:none;color:var(--glass-border);font-size:1.15rem;cursor:pointer;line-height:1;transition:color .1s}
.cs-stars:hover button{color:#d99a2b}.cs-stars button:hover~button{color:var(--glass-border)}
/* queue */
.cs-queue{display:flex;flex-direction:column;gap:12px}
.cs-q-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.cs-q-label{font-size:.7rem;font-weight:800;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
/* queue conversation bubbles */
.cs-thread{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.cs-bub{max-width:86%;padding:10px 14px;border-radius:18px;font-size:.86rem;line-height:1.5;white-space:pre-wrap;
  backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 6px 22px rgba(20,40,80,.13), inset 0 1px 0 rgba(255,255,255,.25)}
.cs-bub-meta{font-size:.66rem;font-weight:700;opacity:.82;margin-bottom:4px;white-space:normal}
.cs-bub-in{align-self:flex-start;background:linear-gradient(135deg,var(--glass-strong),color-mix(in srgb,var(--glass-strong) 55%,transparent));border:1px solid var(--glass-border);border-bottom-left-radius:5px;max-height:180px;overflow:auto}
.cs-bub-out{align-self:flex-end;min-width:min(420px,80%);color:#fff;border:1px solid rgba(255,255,255,.28);border-bottom-right-radius:5px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,transparent),color-mix(in srgb,var(--accent2) 82%,transparent))}
.cs-q-draft{display:block;width:100%;min-height:96px;background:transparent;border:none;color:#fff;font:inherit;font-size:.86rem;line-height:1.5;resize:vertical;outline:none;caret-color:#fff}
.cs-q-draft::selection{background:rgba(255,255,255,.3)}
.cs-q-prov{font-size:.74rem;color:var(--muted);margin:8px 0;display:flex;flex-wrap:wrap;gap:6px}
.cs-prov{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:6px;padding:1px 7px}
.cs-q-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cs-q-tag{font-size:.8rem;display:flex;align-items:center;gap:6px}
.cs-escreason{font-size:.78rem;color:#c0392b;background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.3);border-radius:8px;padding:6px 9px;margin-bottom:8px}
/* knowledge */
.cs-kb-top{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cs-kb-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:90px;padding:12px 18px;margin:0}
.cs-kb-stat b{font-size:1.5rem}.cs-kb-stat span{font-size:.72rem;color:var(--muted);text-transform:uppercase}
.cs-kb-actions{display:flex;align-items:center;gap:8px;flex:1;margin:0}
.cs-tone{white-space:pre-wrap;font-size:.8rem;line-height:1.5;background:var(--glass-strong);border-radius:10px;padding:12px;margin:8px 0 0;max-height:280px;overflow:auto;font-family:inherit}
.cs-agenttone{border:1px solid var(--glass-border);border-radius:10px;padding:9px 12px;margin-top:8px;background:var(--glass-strong)}
.cs-agenttone>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;font-size:.86rem}
.cs-agenttone>summary::-webkit-details-marker{display:none}
.cs-agenttone-name{font-weight:700}
.cs-agenttone[open]>summary{margin-bottom:2px}
.cs-kb-sel{font-size:.78rem;padding:3px 6px;border:1px solid var(--glass-border);border-radius:7px;background:var(--glass-strong);color:var(--text)}
tr.cs-kb-good td{background:rgba(46,200,120,.05)}tr.cs-kb-excluded td{opacity:.5}
.crm-int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.crm-int-card{display:flex;align-items:flex-start;gap:12px;background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:16px;backdrop-filter:blur(14px)}
.crm-int-card .crm-ch{width:34px;height:34px;border-radius:9px;font-size:1.1rem}
.crm-int-main{flex:1;min-width:0}.crm-int-name{font-weight:800}.crm-int-desc{font-size:.82rem;margin-top:2px}
.crm-int-note{margin-top:7px;font-size:.74rem;color:#d99a2b;background:rgba(217,154,43,.12);border:1px solid rgba(217,154,43,.3);border-radius:8px;padding:5px 8px}
.crm-int-act{flex:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.crm-pill{font-size:.68rem;font-weight:800;text-transform:uppercase;color:#1f9d63}.crm-pill.on::before{content:'● '}
/* inbox 3-pane */
.crm-wrap{display:grid;grid-template-columns:184px minmax(280px,308px) minmax(0,1fr) 276px;grid-template-rows:minmax(0,1fr);gap:0;height:calc(100vh - 205px);min-height:460px;border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;background:var(--glass)}
.crm-views{border-right:1px solid var(--glass-border);padding:12px 10px;overflow:auto;background:var(--card);min-height:0}
.crm-views-h{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 6px 4px}
.crm-view,.crm-chfilter{width:100%;display:flex;align-items:center;gap:8px;text-align:left;border:none;background:none;color:var(--text);font:inherit;font-size:.82rem;font-weight:600;padding:7px 9px;border-radius:7px;cursor:pointer;position:relative}
.crm-view:hover,.crm-chfilter:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.crm-view.on,.crm-chfilter.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
.crm-vn{margin-left:auto;font-size:.7rem;background:rgba(120,140,180,.22);border-radius:999px;padding:0 7px;font-weight:800}
.crm-view.on .crm-vn{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.crm-listcol{border-right:1px solid var(--glass-border);display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--menu-bg)}
.crm-list-top{display:flex;gap:6px;padding:9px 10px;border-bottom:1px solid var(--glass-border)}
.crm-search{flex:1;min-width:0;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:9px;padding:7px 10px;color:var(--text);font:inherit;font-size:.82rem;outline:none}
.crm-int-link{flex:none;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:9px;width:34px;cursor:pointer;color:var(--muted)}
.crm-list{flex:1;min-height:0;overflow:auto}
.crm-li{width:100%;text-align:left;border:none;border-bottom:1px solid var(--glass-border);background:none;color:var(--text);padding:11px 13px;cursor:pointer;display:flex;gap:11px;align-items:flex-start}
.crm-li:hover{background:rgba(120,140,180,.08)}.crm-li.on{background:rgba(58,123,255,.12);box-shadow:inset 3px 0 0 var(--accent)}
.crm-li-av{position:relative;flex:none;width:34px;height:34px;border-radius:50%;color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;margin-top:1px}
.crm-li-ch{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;border-radius:50%;background:var(--menu-bg);box-shadow:0 0 0 2px var(--menu-bg)}
.crm-li-ch .crm-ch{width:14px;height:14px;font-size:.5rem;border-radius:50%}
.crm-li-main{flex:1;min-width:0;display:flex;flex-direction:column}
.crm-li-top{display:flex;align-items:baseline;gap:6px}.crm-li-name{font-weight:700;font-size:.84rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crm-li-time{margin-left:auto;font-size:.68rem;color:var(--muted);flex:none}
.crm-li-sub{font-size:.8rem;font-weight:600;margin:1px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-li-snip{font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-li-meta{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.crm-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid var(--glass-border);position:sticky;bottom:0;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.crm-pg-btn{background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text);font:inherit;font-size:.8rem;font-weight:700;border-radius:8px;padding:6px 12px;cursor:pointer}
.crm-pg-btn:hover:not(:disabled){border-color:var(--accent)}
.crm-pg-btn:disabled{opacity:.4;cursor:not-allowed}
.crm-pg-info{font-size:.76rem;color:var(--muted);font-weight:600}
.crm-kind{font-size:.62rem;font-weight:800;text-transform:uppercase;color:#7a5af5;border:1px solid #7a5af5;border-radius:5px;padding:0 4px}
.crm-tag{font-size:.66rem;font-weight:700;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:999px;padding:1px 7px;display:inline-flex;align-items:center;gap:3px}
.crm-tag button{border:none;background:none;cursor:pointer;color:var(--muted);font-size:.8rem;line-height:1}
.crm-asg{margin-left:auto;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7a5af5);color:#fff;font-size:.6rem;font-weight:800;display:grid;place-items:center}
.crm-st{font-size:.62rem;font-weight:800;text-transform:uppercase;padding:1px 6px;border-radius:999px}
.crm-st.st-open{background:rgba(46,200,120,.18);color:#1f9d63}.crm-st.st-pending{background:rgba(217,154,43,.18);color:#c98a1e}.crm-st.st-closed{background:rgba(120,140,180,.18);color:var(--muted)}.crm-st.st-snoozed{background:rgba(122,90,245,.16);color:#7a5af5}
.crm-thread{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--menu-bg)}
.crm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;font-size:.85rem;text-align:center;padding:24px}
.crm-empty .lg-ic{width:34px;height:34px;opacity:.5}
.crm-thread-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--glass-border)}
.crm-th-title{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.crm-th-title>div{min-width:0;flex:1}
.crm-th-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-th-sub{font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-th-actions{display:flex;align-items:center;gap:7px;flex:none}
.crm-th-actions .act{white-space:nowrap}
.crm-sel{border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:8px;padding:5px 8px;font:inherit;font-size:.78rem;cursor:pointer}
.crm-tags-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--glass-border)}
.crm-tag-add{border:1px dashed var(--glass-border);background:none;border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:700;color:var(--muted);cursor:pointer}
.crm-msgs{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
/* email-style threaded messages (avatar + card) — Gorgias layout */
.crm-msg{display:flex;gap:10px;align-items:flex-start;max-width:none}
.crm-msg-av{flex:none;width:30px;height:30px;border-radius:50%;color:#fff;font-size:.64rem;font-weight:800;display:grid;place-items:center;margin-top:2px}
.crm-msg-c{flex:1;min-width:0;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:12px;padding:9px 14px;font-size:.85rem;line-height:1.55}
.crm-msg-meta{display:flex;align-items:center;gap:7px;font-size:.7rem;color:var(--muted);margin-bottom:4px}
.crm-msg-who{color:var(--text);font-size:.78rem;font-weight:700}
.crm-msg-out .crm-msg-c{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.crm-msg-note .crm-msg-c{background:linear-gradient(135deg,rgba(217,154,43,.16),rgba(217,154,43,.05));border-color:rgba(217,154,43,.4)}
.crm-msg-flag{font-weight:800;text-transform:uppercase;font-size:.58rem;color:#c98a1e}
.crm-msg-body{overflow-wrap:anywhere}
.crm-msg-body ul,.crm-msg-body ol{margin:5px 0;padding-left:20px}.crm-msg-body p{margin:5px 0}
.crm-msg-body p:first-child{margin-top:0}.crm-msg-body p:last-child{margin-bottom:0}
.crm-msg-body p:empty,.crm-msg-body div:empty{display:none}   /* drop blank blocks → no big empty gaps */
.crm-msg-body a{color:var(--accent);text-decoration:underline}
.crm-msg-empty{color:var(--muted);font-style:italic;font-size:.78rem}
.crm-compose{border-top:1px solid var(--glass-border);padding:10px 14px;background:var(--card)}
.crm-compose-tabs{display:flex;align-items:center;gap:14px;margin-bottom:7px;flex-wrap:wrap}
.crm-rtab{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer}
.crm-cust-link{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--accent);text-decoration:none}
/* rich-text reply editor */
.crm-rte{border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:10px;overflow:hidden}
.crm-rte:focus-within{border-color:var(--accent)}
.crm-rte-bar{display:flex;align-items:center;gap:1px;flex-wrap:wrap;padding:5px 6px;border-bottom:1px solid var(--glass-border)}
.crm-rte-btn{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 6px;border:none;background:none;border-radius:6px;color:var(--muted);font-size:.86rem;font-weight:700;cursor:pointer}
.crm-rte-btn:hover{background:rgba(120,140,180,.16);color:var(--text)}
.crm-rte-btn.on{background:var(--accent);color:#fff}
.crm-rte-sep{width:1px;height:18px;background:var(--glass-border);margin:0 4px}
.crm-rte-sel{border:1px solid var(--glass-border);background:var(--glass);color:var(--text);border-radius:6px;font:inherit;font-size:.74rem;padding:3px 4px;cursor:pointer;margin:0 2px}
.crm-reply{width:100%;min-height:84px;max-height:300px;overflow:auto;padding:9px 12px;color:var(--text);font:inherit;font-size:.86rem;outline:none;line-height:1.5}
.crm-reply:empty::before{content:attr(data-ph);color:var(--muted)}
.crm-reply ul,.crm-reply ol{margin:4px 0;padding-left:22px}
.crm-reply a{color:var(--accent)}
.crm-compose-foot{display:flex;align-items:center;gap:8px;margin-top:8px}.crm-compose-foot .sp{flex:1}
/* ---- customer context sidebar (right pane, Gorgias-style) ---- */
.crm-cust{border-left:1px solid var(--glass-border);background:var(--card);overflow:auto;min-width:0;min-height:0}
.crm-cust-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:100%;text-align:center;font-size:.78rem;padding:22px}
.crm-cust-empty .lg-ic{width:30px;height:30px;opacity:.5}
.crm-cust-hd{display:flex;align-items:center;gap:11px;padding:16px;border-bottom:1px solid var(--glass-border)}
.crm-cust-av{flex:none;width:44px;height:44px;border-radius:50%;color:#fff;font-size:.95rem;font-weight:800;display:grid;place-items:center}
.crm-cust-id{min-width:0}
.crm-cust-name{font-weight:800;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cust-email{font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cust-sec{padding:13px 16px;border-bottom:1px solid var(--glass-border)}
.crm-cust-h{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.crm-cust-row{display:flex;gap:10px;font-size:.78rem;margin-bottom:6px;align-items:baseline}
.crm-cust-row:last-child{margin-bottom:0}
.crm-cust-k{flex:none;width:62px;color:var(--muted)}
.crm-cust-v{flex:1;min-width:0;overflow-wrap:anywhere}.crm-cust-v a{color:var(--accent)}
.crm-cust-tags{display:flex;flex-wrap:wrap;gap:4px}
.crm-cust-stats{display:flex;gap:9px;margin-bottom:11px}
.crm-cust-stat{flex:1;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:9px 6px;text-align:center}
.crm-cust-stat b{display:block;font-size:1.05rem;font-weight:800;line-height:1.2}
.crm-cust-stat span{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.crm-cust-view{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;margin:0}
.crm-cust-none{font-size:.78rem}
.crm-chfilter.off{opacity:.62}.crm-chfilter.off:hover{opacity:1}
.crm-ch-sync{margin-left:auto;flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:.9rem;color:var(--muted)}
.crm-ch-sync:hover{background:rgba(120,140,180,.2);color:var(--text)}
.crm-chfilter.on .crm-ch-sync{color:var(--accent)}
.crm-ch-sync.spin{animation:crmspin .8s linear infinite;color:var(--accent)}
@keyframes crmspin{to{transform:rotate(360deg)}}
.crm-imp{margin:2px 4px 6px 30px}
.crm-imp-label{font-size:.68rem;font-weight:700;color:var(--muted);margin-bottom:3px}
.crm-imp-track{height:5px;border-radius:999px;background:var(--glass-strong);overflow:hidden}
.crm-imp-fill{height:100%;background:linear-gradient(90deg,var(--accent),#7a5af5);border-radius:999px;transition:width .4s ease}
.crm-imp-retry{border:none;background:none;color:var(--accent);font:inherit;font-size:.68rem;font-weight:700;cursor:pointer;text-decoration:underline}
.crm-triage{margin-bottom:12px}
.crm-tri{padding:2px}
.crm-tri-btn{width:100%;border:1px solid var(--glass-border);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,#7a5af5 14%,transparent));color:var(--text);border-radius:9px;padding:7px 9px;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.crm-tri-btn:hover{border-color:var(--accent)}
.crm-cat{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;padding:1px 6px;border-radius:5px}
.crm-cat-newsletter{background:rgba(120,140,180,.18);color:var(--muted)}
.crm-cat-notification{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.crm-cat-promotional{background:rgba(217,154,43,.18);color:#c98a1e}
.crm-cat-other{background:rgba(120,140,180,.14);color:var(--muted)}
.crm-cat-intent{background:rgba(122,90,245,.16);color:#7a5af5}
.crm-ch-conn{margin-left:auto;font-size:.6rem;font-weight:800;text-transform:uppercase;color:var(--accent)}
.crm-chfilter.on .crm-ch-conn{color:var(--accent)}
/* per-channel welcome page */
.crm-welcome{padding:6px}
.crm-welcome-back{border:none;background:none;color:var(--accent);font:inherit;font-weight:700;font-size:.84rem;cursor:pointer;margin-bottom:14px}
.crm-welcome-card{max-width:520px;margin:14px auto 0;text-align:center;background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:30px 28px;backdrop-filter:blur(16px)}
.crm-welcome-logo{width:60px;height:60px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:800}
.crm-welcome-card h2{margin:0 0 6px}
.crm-welcome-list{list-style:none;margin:16px 0;padding:0;text-align:left;display:inline-block}
.crm-welcome-list li{padding:6px 0 6px 26px;position:relative;font-size:.88rem}
.crm-welcome-list li::before{content:'';position:absolute;left:0;top:.18em;width:1em;height:1em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.crm-welcome-act{margin-top:8px}
.crm-welcome-pane{display:grid;place-items:center;height:100%;overflow:auto;padding:20px}
.crm-welcome-pane .crm-welcome-card{margin:0}
@media(max-width:1320px){.crm-wrap{grid-template-columns:190px minmax(290px,330px) minmax(0,1fr)}.crm-cust{display:none}}
@media(max-width:1000px){.crm-wrap{grid-template-columns:180px 1fr;height:auto}.crm-thread,.crm-cust{display:none}}
.modal-card{width:min(820px,100%);background:#fff;color:#16233c;border-radius:18px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal-x{float:right;border:0;background:#eef2f7;width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer;color:#16233c}
/* Dark theme: general modals = black glass; the printable invoice stays white paper. */
html[data-theme="dark"] .modal-card{background:var(--surface-solid);color:var(--text)}
html[data-theme="dark"] .modal-x{background:var(--glass-strong);color:var(--text)}
html[data-theme="dark"] #invoiceModal .modal-card{background:#fff;color:#16233c}
html[data-theme="dark"] #invoiceModal .modal-x{background:#eef2f7;color:#16233c}
/* ===== STORE ONBOARDING (F1) — welcome wizard + getting-started home ===== */
.wiz-card{width:min(680px,100%);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.wiz-head{padding:22px 26px 0}
.wiz-head h3{font-size:1.18rem;font-weight:800;margin:0 0 3px}
.wiz-head .wiz-sub{color:var(--muted);font-size:.86rem}
.wiz-x{float:right;border:0;background:var(--glass-strong,rgba(120,140,170,.16));width:34px;height:34px;border-radius:50%;font-size:1.3rem;cursor:pointer;color:var(--text);line-height:1}
.wiz-steps{display:flex;gap:8px;padding:18px 26px 4px}
.wiz-steps .ws{flex:1;height:5px;border-radius:3px;background:var(--line)}
.wiz-steps .ws.done{background:var(--accent,#2a7bff)}
.wiz-steps .ws.cur{background:var(--accent,#2a7bff);opacity:.55}
.wiz-stepname{padding:6px 26px 0;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wiz-body{padding:14px 26px 8px;max-height:58vh;overflow:auto}
.wiz-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.wiz-row.thirds{grid-template-columns:2fr 1fr 1.2fr}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 26px 22px;border-top:1px solid var(--line);margin-top:6px}
.wiz-err{color:#d23b3b;font-size:.8rem;font-weight:600;min-height:1em}
.wiz-foot .right{display:flex;gap:10px;margin-left:auto}
.wiz-btn{padding:9px 18px;border-radius:10px;border:1px solid var(--line);background:var(--glass-strong,transparent);color:var(--text);font-weight:700;cursor:pointer;font-size:.9rem}
.wiz-btn.primary{background:var(--accent,#2a7bff);border-color:var(--accent,#2a7bff);color:#fff}
.wiz-btn:disabled{opacity:.45;cursor:not-allowed}
.wiz-hint{font-size:.72rem;color:var(--muted);margin-top:-7px;margin-bottom:12px}
.sf-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sf-card{text-align:left;border:2px solid var(--line);border-radius:14px;padding:18px;background:var(--glass-strong,transparent);color:var(--text);cursor:pointer;transition:border-color .15s,transform .1s}
.sf-card:hover{transform:translateY(-2px)}
.sf-card.sel{border-color:var(--accent,#2a7bff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#2a7bff) 22%,transparent)}
.sf-card .sf-ico{font-size:1.7rem}
.sf-card h4{margin:8px 0 5px;font-size:1rem;font-weight:800}
.sf-card p{font-size:.82rem;color:var(--muted);margin:0}
/* getting-started home */
.gs-hero{margin-bottom:18px}
.gs-hero h2{font-size:1.4rem;font-weight:800;margin:0 0 4px}
.gs-hero p{color:var(--muted);margin:0}
.gs-checklist{display:flex;flex-direction:column;gap:2px}
.gs-item{display:flex;gap:13px;align-items:flex-start;padding:13px 6px;border-bottom:1px solid var(--line);cursor:pointer}
.gs-item:last-child{border-bottom:0}
.gs-tick{flex:0 0 auto;width:23px;height:23px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.8rem;margin-top:1px}
.gs-item.done .gs-tick{background:var(--accent,#2a7bff);border-color:var(--accent,#2a7bff);color:#fff}
.gs-item .gs-t{font-weight:700;font-size:.94rem}
.gs-item .gs-d{color:var(--muted);font-size:.82rem;margin-top:2px}
.gs-item .gs-go{margin-left:auto;align-self:center;color:var(--accent,#2a7bff);font-weight:700;font-size:.85rem}
.gs-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:8px}
.gs-q{text-align:left;border:1px solid var(--line);border-radius:13px;padding:16px;background:var(--glass-strong,transparent);color:var(--text);cursor:pointer}
.gs-q:hover{border-color:var(--accent,#2a7bff)}
.gs-q .gs-qi{font-size:1.5rem}
.gs-q h4{margin:7px 0 3px;font-size:.95rem;font-weight:800}
.gs-q p{margin:0;font-size:.8rem;color:var(--muted)}
@media(max-width:640px){.wiz-row,.wiz-row.thirds,.sf-cards{grid-template-columns:1fr}}
/* ===== END STORE ONBOARDING (F1) ===== */
/* ===== STORE WIZARD v2 (SA2) ===== */
/* large setup-choice cards */
.sf-cards.big{gap:16px}
.sf-card.big{padding:22px 20px}
.sf-card.big .sf-ico{font-size:2.1rem}
.sf-card.big h4{font-size:1.08rem;margin:10px 0 6px}
.sf-card.big p{font-size:.85rem;line-height:1.45}
.sf-card .sf-tag{display:inline-block;margin-top:11px;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent,#2a7bff)}
/* shopify numbered walkthrough */
.sw-intro{display:flex;align-items:center;gap:12px;margin:2px 0 18px}
.sw-intro .sw-logo{font-size:1.8rem;line-height:1}
.sw-intro h4{margin:0;font-size:1.05rem;font-weight:800}
.sw-intro p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
.sw-steps{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:16px}
.sw-step{display:flex;gap:14px;align-items:flex-start}
.sw-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#2a7bff);color:#fff;font-weight:800;font-size:.82rem;display:grid;place-items:center;margin-top:1px}
.sw-step .sw-t{font-weight:700;font-size:.92rem;line-height:1.4}
.sw-step .sw-d{color:var(--muted);font-size:.82rem;margin-top:2px;line-height:1.5}
.sw-step .sw-d code{background:var(--glass-strong);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:.78rem}
.sw-divider{height:1px;background:var(--line);margin:20px 0 16px}
.sw-form{display:flex;flex-direction:column;gap:13px}
.sw-form label{font-weight:700;font-size:.82rem;display:block;margin-bottom:5px}
.sw-form input{width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--glass-strong,transparent);color:var(--text);font:inherit;font-size:.9rem}
.sw-oauth{margin-bottom:14px}
.sw-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.74rem;margin:0 0 14px}
.sw-or::before,.sw-or::after{content:"";flex:1;height:1px;background:var(--line)}
/* integrations step */
.int-cards{display:flex;flex-direction:column;gap:12px}
.int-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:15px 16px;background:var(--glass-strong,transparent)}
.int-card .int-ico{font-size:1.6rem;line-height:1;flex:0 0 auto}
.int-card .int-meta{flex:1;min-width:0}
.int-card .int-meta h4{margin:0;font-size:.96rem;font-weight:800}
.int-card .int-meta p{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.int-card .int-act{flex:0 0 auto}
.int-connected{color:#19a463;font-weight:800;font-size:.85rem;display:inline-flex;align-items:center;gap:5px}
/* import progress */
.imp-wrap{text-align:center;padding:8px 4px 4px}
.imp-phase{font-weight:800;font-size:1.02rem;margin:4px 0 3px}
.imp-sub{color:var(--muted);font-size:.84rem;min-height:1.1em}
.imp-bar{height:12px;border-radius:99px;background:var(--glass-strong,var(--line));overflow:hidden;margin:18px 0 8px;border:1px solid var(--line)}
.imp-fill{height:100%;width:0;border-radius:99px;background:var(--accent,#2a7bff);transition:width .5s ease}
.imp-pct{font-weight:800;font-size:1.5rem;margin-top:2px}
.imp-eta{color:var(--muted);font-size:.8rem;margin-top:2px}
.imp-summary{text-align:left;margin-top:18px;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.imp-summary .ir{display:flex;justify-content:space-between;padding:10px 15px;border-bottom:1px solid var(--line);font-size:.86rem}
.imp-summary .ir:last-child{border-bottom:0}
.imp-summary .ir b{text-transform:capitalize}
.imp-done-ico{font-size:2.4rem;line-height:1}
.imp-err{color:#d23b3b;font-weight:600;font-size:.88rem}
@media(max-width:640px){.int-card{flex-wrap:wrap}}
/* ===== END STORE WIZARD v2 (SA2) ===== */
@media(max-width:820px){.grid2{grid-template-columns:1fr}header{flex-direction:column;gap:14px;align-items:stretch}}
/* invoice (print) */
#invoice{font-size:.9rem;color:#16233c}
#invoice .inv-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #16233c;padding-bottom:14px;margin-bottom:18px}
#invoice .addr{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0}
#invoice .addr h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#5b6b84;margin-bottom:6px}
#invoice table{width:100%;border-collapse:collapse;color:#16233c}
#invoice th{background:#f1f4f9;color:#5b6b84;text-align:left;padding:8px 10px;font-size:.7rem;position:static}
#invoice td{padding:8px 10px;border-top:1px solid #e4e9f0}
#invoice .tot{margin-left:auto;width:280px;margin-top:14px}
#invoice .tot div{display:flex;justify-content:space-between;padding:4px 0}
#invoice .tot .grand{font-weight:800;font-size:1.1rem;border-top:2px solid #16233c;margin-top:6px;padding-top:8px}
#invoice .ruo{margin-top:18px;font-size:.72rem;color:#8a97ad;border-top:1px solid #e4e9f0;padding-top:10px}
@media print{
  body *{visibility:hidden}
  #invoiceModal,#invoiceModal *{visibility:visible}
  #invoiceModal{position:absolute;inset:0;background:#fff;display:block;padding:0}
  #invoiceModal .modal-card{box-shadow:none;width:100%;border-radius:0}
  .modal-x,.inv-actions{display:none!important}
}
/* ---- Integrations / Shopify import ---- */
.act-primary{background:var(--accent);color:#fff;border-color:transparent;font-weight:600}
.act-rework{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.5);color:#f59e0b;font-weight:700}
.act-rework:hover{background:rgba(245,158,11,.26)}
.act-revert{margin-left:auto;background:rgba(220,53,69,.14);border-color:rgba(220,53,69,.45);color:#ff6b7a;font-weight:700}
.act-revert:hover{background:rgba(220,53,69,.24)}
.act-recheck{background:rgba(58,79,181,.12);border-color:rgba(58,79,181,.4);color:#5a6fe0;font-weight:700}
.act-recheck:hover:not(:disabled){background:rgba(58,79,181,.22)}
.act-recheck:disabled{opacity:.6;cursor:default}
.act-discard{background:rgba(140,140,160,.12);border-color:var(--glass-border);color:var(--muted)}
.act-discard:hover{background:rgba(220,53,69,.16);border-color:rgba(220,53,69,.4);color:#dc3545}
/* agent profile: Discarded section */
.prof-discarded{margin-top:12px;border-top:1px solid var(--glass-border);padding-top:10px}
.prof-discarded summary{cursor:pointer;font-weight:700;font-size:.84rem;color:var(--muted)}
.prof-discarded summary:hover{color:var(--text)}
.prof-disc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--glass-border)}
.prof-disc-row:last-child{border-bottom:0}
.conn-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.conn-dot{width:10px;height:10px;border-radius:50%;background:#9aa6b8;flex:none}
.conn-dot.ok{background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.18)}
.conn-form{display:flex;flex-direction:column;gap:14px;max-width:520px}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:520px;padding:11px 16px;font-size:.92rem;font-weight:700;border-radius:11px;cursor:pointer}
.conn-or{display:flex;align-items:center;gap:12px;max-width:520px;color:var(--muted);font-size:.76rem;margin:2px 0}
.conn-or::before,.conn-or::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth-note{max-width:520px;font-size:.78rem;color:var(--muted);margin-top:-4px}
.conn-form>label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted)}
/* liquid-glass form controls (shared by every integration connect form) */
.conn-form input[type=text],.conn-form input[type=password],.conn-form input:not([type]),.conn-form select,.conn-form textarea{
  font:inherit;font-weight:400;color:var(--text);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  border-radius:11px;padding:10px 12px;width:100%;box-sizing:border-box;
  backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.conn-form textarea{min-height:88px;resize:vertical}
.conn-form input[type=text]:hover,.conn-form input[type=password]:hover,.conn-form input:not([type]):hover,.conn-form select:hover,.conn-form textarea:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--glass-border))}
.conn-form input[type=text]:focus,.conn-form input[type=password]:focus,.conn-form input:not([type]):focus,.conn-form select:focus,.conn-form textarea:focus,
.conn-form input[type=text]:focus-visible,.conn-form input[type=password]:focus-visible,.conn-form input:not([type]):focus-visible,.conn-form select:focus-visible,.conn-form textarea:focus-visible{
  outline:none;border-color:var(--accent);
  background:var(--glass);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),inset 0 1px 2px rgba(0,0,0,.06);
}
.conn-form ::placeholder{color:var(--muted);opacity:1}
/* custom chevron on selects (theme-neutral muted stroke) */
.conn-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.conn-form .pw-wrap{position:relative;display:flex;align-items:center}
.conn-form .pw-wrap input{flex:1}
.conn-form .pw-wrap input{padding-right:42px!important}
/* compact one-row credential layout (AI connect form) */
.conn-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.conn-row .conn-field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted);margin:0}
.conn-field-key{flex:1 1 280px;min-width:0}
.conn-field-model{flex:0 0 auto;min-width:160px}
.conn-keywrap{position:relative;display:flex;align-items:center}
/* default right padding = room for the eye toggle; widen when the inline Connect pill is shown */
.conn-keywrap input{padding-right:42px!important}
.conn-keywrap:has(.conn-inline-btn:not([hidden])) input{padding-right:130px!important}
/* inline accent Connect pill, sits just left of the eye toggle */
.conn-inline-btn{position:absolute;right:42px;top:50%;transform:translateY(-50%);
  border:0;border-radius:8px;padding:6px 13px;font:inherit;font-size:.8rem;font-weight:700;
  color:#fff;background:var(--accent);cursor:pointer;line-height:1;white-space:nowrap;
  box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 45%,transparent);
  transition:filter .14s ease,opacity .14s ease;animation:connPillIn .16s ease}
.conn-inline-btn:hover{filter:brightness(1.08)}
.conn-inline-btn:active{filter:brightness(.94)}
.conn-inline-btn:disabled{opacity:.6;cursor:default}
.conn-inline-btn[hidden]{display:none}
@keyframes connPillIn{from{opacity:0;transform:translateY(-50%) scale(.9)}to{opacity:1;transform:translateY(-50%) scale(1)}}
.conn-help{margin-top:4px;font-size:.82rem}
.conn-help summary{cursor:pointer;color:var(--accent,#6aa0ff);font-weight:600}
.conn-help ol{margin:8px 0 0 18px;line-height:1.7;color:var(--muted)}
.conn-help code{background:rgba(127,127,127,.16);padding:1px 5px;border-radius:5px;font-size:.92em}
.imp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.imp-opt{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.imp-opt input{margin-top:3px}
.imp-opt span{display:flex;flex-direction:column;gap:2px}
.imp-opt small{color:var(--muted);font-size:.74rem}
.imp-actions{display:flex;gap:10px;flex-wrap:wrap}
.imp-running{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.imp-state{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.lnk-btn{background:none;border:none;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:7px;white-space:nowrap}
.lnk-btn:hover{background:var(--glass-strong)}
.imp-summary{margin-top:14px}
.imp-summary table{width:100%}
/* ===== Integrations marketplace (IG) ===== */
.ig-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.ig-cat{position:relative}
.ig-cat-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass-strong);color:var(--text);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.ig-cat-btn .caret{opacity:.6;font-size:.7rem}
.ig-cat-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-dropdown);min-width:200px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;padding:6px;border:1px solid var(--glass-border);border-radius:12px;background:var(--card);box-shadow:0 14px 40px rgba(0,0,0,.22);display:none}
.ig-cat-menu.open{display:block}
.ig-cat-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border:none;background:none;color:var(--text);font:inherit;font-size:.86rem;border-radius:8px;cursor:pointer}
.ig-cat-menu button:hover,.ig-cat-menu button.on{background:var(--glass-strong)}
.ig-search{flex:1;min-width:200px;max-width:360px;padding:9px 14px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass-strong);color:var(--text);font:inherit;font-size:.88rem}
.ig-sec{margin-bottom:30px}
.ig-sec.hidden{display:none}
.ig-sec-head h3{font-size:1.12rem;font-weight:800;margin-bottom:3px}
.ig-sec-head .ig-sec-desc{color:var(--muted);font-size:.84rem;margin-bottom:16px}
.ig-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.ig-grid{grid-template-columns:1fr}}
.ig-card{display:flex;flex-direction:column;border:1px solid var(--glass-border);border-radius:16px;background:var(--glass-strong);padding:18px 18px 16px;transition:.18s;min-width:0}
.ig-card.hidden{display:none}
.ig-card.soon{opacity:.6}
.ig-card-top{display:flex;align-items:flex-start;gap:14px}
.ig-logo{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;font-weight:800;font-size:1.25rem;color:#fff;overflow:hidden}
.ig-logo.ig-app{display:grid;place-items:center}
.ig-logo.ig-app>.ig-app-glyph,.ig-logo.ig-app>svg{width:60%;height:60%;object-fit:contain;border-radius:0}
.ig-ai-mark{font-size:1.45rem;line-height:1;color:#fff}
.ig-logo .ig-logo-img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.ig-logo>svg{width:100%;height:100%;display:block;border-radius:inherit}
.ig-logo.ig-logo-letter{font-weight:800;font-size:1.25rem}
.ig-logo svg{width:26px;height:26px;display:block}
.ig-card-main{flex:1;min-width:0}
.ig-card-name{display:flex;align-items:center;gap:8px;font-size:1.02rem;font-weight:800}
.ig-beta{font-size:.6rem;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:6px;background:var(--accent);color:#fff;text-transform:uppercase}
.ig-card-blurb{color:var(--muted);font-size:.8rem;line-height:1.5;margin-top:4px}
.ig-status{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;margin-top:9px}
.ig-status .ig-dot{width:9px;height:9px;border-radius:50%;background:#9aa6b8;flex:none}
.ig-status.on .ig-dot{background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.18)}
.ig-status.upd{color:#d98a00}
.ig-status.upd .ig-dot{background:#f5a623;box-shadow:0 0 0 4px rgba(245,166,35,.18)}
.ig-alert{display:flex;gap:12px;align-items:center;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.45);border-radius:14px;padding:13px 16px;margin-bottom:16px}
.ig-alert .ig-alert-i{font-size:1.25rem;flex:none}
.ig-alert-body{flex:1;min-width:0}
.ig-alert-body b{display:block;margin-bottom:2px}
.ig-alert-body small{color:var(--muted);font-size:.82rem}
.ig-alert-actions{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.ig-status .ig-detail-toggle{background:none;border:none;color:var(--accent);font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;padding:0;margin-left:auto}
.ig-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ig-card-actions .act{padding:7px 14px;font-size:.82rem}
.ig-drawer{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:none}
.ig-drawer.open{display:block}
.ig-manual-link{background:none;border:none;color:var(--accent);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;padding:6px 0 0;text-decoration:underline;text-underline-offset:2px}
.ig-fail-note{font-size:.8rem;color:#ffb38a;margin-top:10px;line-height:1.5}
.ig-details{font-size:.8rem;color:var(--muted);line-height:1.6;margin-top:10px}
.ig-details b{color:var(--text)}
/* ---- Store switcher ---- */
.store-switch{position:relative}
.store-btn{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;max-width:210px}
.store-btn .store-ico{opacity:.7}
.store-btn .store-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-btn .caret{opacity:.6;font-size:.7rem;margin-left:1px}
/* ===== STORE SELECTOR TOP (SA1): prominent brand-style selector at sidebar top ===== */
.store-switch-top .store-btn{gap:11px;padding:8px 11px;border-radius:13px;background:var(--glass-strong);border:1px solid var(--glass-border);font-size:1.04rem;font-weight:800;transition:.18s;text-align:left}
.store-switch-top .store-btn:hover{transform:translateY(-1px);border-color:var(--line)}
.store-switch-top .store-logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:1.05rem;color:#fff;background:linear-gradient(135deg,var(--teal),var(--pink));flex-shrink:0}
.store-switch-top .store-id{display:flex;flex-direction:column;line-height:1.18;min-width:0;flex:1}
.store-switch-top .store-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.store-switch-top .store-sub{font-size:.6rem;font-weight:600;opacity:.7;letter-spacing:.14em;text-transform:uppercase}
.store-switch-top .caret{opacity:.55;font-size:.72rem;margin-left:2px;flex-shrink:0}
/* store logo image (header switcher) + Settings page */
.store-logo-img,.logo .store-logo-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.set-logo-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.set-logo{width:72px;height:72px;border-radius:18px;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:1.7rem;color:#fff;background:linear-gradient(135deg,var(--teal),var(--pink));overflow:hidden}
.set-logo-actions{display:flex;gap:8px;flex-wrap:wrap}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:end}
.set-field{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:600;color:var(--muted)}
.set-field em{font-weight:500;opacity:.7;font-style:normal}
.set-field input,.set-field select{padding:9px 11px;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);font:inherit;font-size:.88rem;font-weight:500}
.set-actions{margin-top:18px;display:flex;justify-content:flex-end}
.set-page{max-width:860px}
.set-shell{max-width:980px}
.set-page-head{margin:2px 2px 16px}
.set-shell-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.set-eyebrow{font-size:.68rem;font-weight:850;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.set-page-head h2{font-size:1.45rem;font-weight:850;letter-spacing:-.02em}
.set-page-head p{font-size:.86rem;margin-top:3px}
.set-over-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.set-over-card{appearance:none;border:1px solid var(--glass-border);color:var(--text);text-align:left;cursor:pointer;display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:flex-start;min-height:138px;transition:transform .16s,border-color .16s,background .16s}
.set-over-card:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--glass-strong)}
.set-over-danger{border-color:color-mix(in srgb,#e0533a 34%,var(--glass-border));background:color-mix(in srgb,#e0533a 6%,var(--glass))}
.set-over-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text)}
.set-over-ic-danger{color:#e0533a}
.set-over-ic .lg-ic{width:19px;height:19px}
.set-over-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.set-over-body b{font-size:1rem;letter-spacing:-.01em}
.set-over-body small{font-size:.8rem;line-height:1.45;color:var(--muted);font-weight:600}
.set-over-meta{grid-column:2;font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.set-card{margin-bottom:16px}
.set-card-head{margin-bottom:16px}
.set-card-head h3{font-size:1.02rem;font-weight:800}
.set-card-head p{font-size:.8rem;margin-top:3px}
.set-er{display:flex;flex-direction:column;gap:14px}
.set-er-note{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:flex-start;border-color:color-mix(in srgb,#e0533a 26%,var(--glass-border))}
.set-er-note-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#e0533a;background:color-mix(in srgb,#e0533a 8%,var(--glass-strong));border:1px solid color-mix(in srgb,#e0533a 28%,var(--glass-border))}
.set-er-note p{margin:4px 0 0;font-size:.82rem;line-height:1.45}
.set-canvas-list{display:flex;flex-direction:column;gap:12px}
.set-canvas-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.set-canvas-main{display:flex;align-items:center;gap:12px;min-width:240px}
.set-canvas-main h3{font-size:1rem;margin:0 0 3px}
.set-canvas-main p{font-size:.78rem;margin:0}
.set-canvas-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--text);flex:none}
.set-canvas-ic .lg-ic{width:19px;height:19px}
.set-canvas-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.set-permanent-delete,.ce-permanent-delete{border-color:rgba(255,59,48,.42)!important;color:#ff6b62!important;background:rgba(255,59,48,.08)!important}
.set-permanent-delete:hover,.ce-permanent-delete:hover{background:rgba(255,59,48,.14)!important}
/* non-interactive brand fallback (single store, no create perm) */
.store-switch-top .brand{padding:2px 6px 6px}
.store-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;max-width:calc(100vw - 16px);max-height:min(420px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;background:var(--menu-bg);border:1px solid var(--glass-border);border-radius:12px;box-shadow:0 16px 42px rgba(0,0,0,.34);padding:6px;z-index:var(--z-dropdown)}
.store-menu.store-menu-portal{position:fixed!important;top:auto;right:auto;bottom:auto;left:auto;z-index:var(--z-dropdown);box-sizing:border-box}
.store-menu .sm-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 9px 4px}
.store-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border:0;background:none;color:var(--text);font:inherit;font-size:.84rem;border-radius:8px;cursor:pointer}
.store-item:hover{background:rgba(127,127,127,.12)}
.store-item .sm-check{width:15px;color:var(--accent,#5b8cff)}
.store-item .sm-sub{color:var(--muted);font-size:.72rem}
.store-switch-top .canvas-head-logo{background:linear-gradient(135deg,#121215,#44464d);color:#fff;letter-spacing:.01em}
.canvas-menu .store-item.canvas-item{gap:10px;padding:9px 10px;font-weight:650}
.canvas-menu .store-item.canvas-item.active{background:rgba(127,127,127,.14)}
.canvas-item-ic{width:22px;height:22px;border-radius:8px;display:grid;place-items:center;color:var(--text);background:rgba(127,127,127,.11);flex:0 0 auto}
.canvas-item-ic .lg-ic{display:block;width:15px;height:15px}
.canvas-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-empty{padding:10px;font-size:.82rem}
.store-add{display:flex;align-items:center;gap:8px;width:100%;text-align:left;margin-top:4px;padding:8px 9px;border:0;border-top:1px solid var(--line);background:none;color:var(--accent,#5b8cff);font:inherit;font-weight:600;font-size:.84rem;cursor:pointer;border-radius:0 0 8px 8px}
.store-add:hover{background:rgba(127,127,127,.1)}
/* ===== Draggable / resizable Overview dashboard (Gridstack) ===== */
.dash-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.dash-hint{font-size:.76rem;color:var(--muted)}
.dash-hint b{color:var(--text)}
.dash-reset{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:.15s}
.dash-reset:hover{background:var(--accent,#2a7bff);border-color:var(--accent,#2a7bff);color:#fff}
.dash-range{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.dash-range .dr-lbl{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted)}
.dash-range select,.dash-range input[type=date]{padding:7px 10px;border-radius:9px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);font:inherit;font-size:.82rem}
.dash-range .dr-active{font-size:.74rem}
/* Bottom-center liquid-glass assistant bar: pickers + input + Send; chat panel expands above */
.ai-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1250;width:min(720px,calc(100vw - 28px));
  display:flex;flex-direction:column;gap:0;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  overflow:hidden;animation:aiBarIn .2s ease;
  transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .3s ease}
@keyframes aiBarIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.ai-bar[hidden]{display:none}
/* scroll-DOWN tucks the bar out the bottom (slide-down); scroll-UP slides it back. */
.ai-bar.ai-tuck{transform:translate(-50%,calc(100% + 34px));opacity:0;pointer-events:none}
@media (max-width:640px){.ai-bar.ai-tuck{transform:translate(-50%,calc(100% + 22px))}}
.ai-conv{display:flex;flex-direction:column;min-height:0;max-height:min(440px,55vh);border-bottom:1px solid var(--line)}
.ai-conv[hidden]{display:none}
.ai-conv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px 5px;font-weight:800;font-size:.84rem}
.ai-conv-title{color:var(--text)}
.ai-conv-x{border:0;background:none;color:var(--muted);font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;padding:3px 8px;border-radius:7px}
.ai-conv-x:hover{background:var(--glass-strong);color:var(--text)}
.ai-bar .ai-log{flex:1;min-height:0;max-height:none;padding:6px 14px 12px}
.ai-bar .ai-note{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.8rem}
.ai-bar .ai-note[hidden]{display:none}
.ai-bar-row{display:flex;align-items:center;gap:8px;padding:10px 12px}
/* the input + the model dropdown share ONE glass field (the dropdown has no bg of its own) */
.ai-input-wrap{flex:1;min-width:60px;display:flex;align-items:center;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:11px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ai-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.ai-bar-row input#aiChatText{flex:1;min-width:40px;padding:9px 6px 9px 13px;border:none;border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:.86rem;outline:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.ai-bar-row input#aiChatText:disabled{opacity:.55}
/* combined assistant+model picker — compact, transparent, arrow hugging the name */
.ai-modelsel{flex:none;max-width:150px;field-sizing:content;border:none;background:transparent;color:var(--muted);font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;padding:0 13px 0 4px;margin-right:6px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 0 center;background-size:12px}
.ai-modelsel:disabled{opacity:.5;cursor:default}
.ai-agentsel{max-width:170px;color:var(--accent);border-left:1px solid var(--glass-border);margin-right:0}
.ai-delegate-link{margin-top:8px;font-size:.78rem}.ai-delegate-link a{color:var(--accent);font-weight:700;text-decoration:none}.ai-delegate-link a:hover{text-decoration:underline}
/* Agent + model pickers sit as small links UNDER the textbox (not inside it) */
.ai-bar-foot{display:flex;align-items:center;gap:4px;padding:0 16px 9px;flex-wrap:wrap}
.ai-bar-foot[hidden]{display:none}
.ai-bar-foot .gsel{max-width:150px}
.ai-bar-foot .gsel-btn{width:auto;max-width:150px;gap:2px;padding:2px 6px;border:0;border-radius:7px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--muted);font-size:.72rem;font-weight:600}
.ai-bar-foot .gsel-btn:hover{border:0;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ai-bar-foot .gsel-btn:focus,.ai-bar-foot .gsel-btn:focus-visible{box-shadow:none}
.ai-bar-foot .gsel-caret{font-size:.5rem;opacity:.5}
.ai-bar-foot .gsel:first-child .gsel-btn{color:var(--accent)}
/* bar sits at the screen bottom → picker menus must open UPWARD (a downward menu is clipped off-screen) */
.ai-bar-foot .gsel-menu{top:auto;bottom:calc(100% + 6px);max-width:min(230px,80vw)}
@media (max-width:640px){
  .ai-bar{width:calc(100vw - 16px);bottom:10px;border-radius:14px}
  .ai-input-wrap{flex:1 1 100%}
}
/* inline per-page import snippet, next to the page title */
.imp-snip{font-size:.74rem;font-weight:600;letter-spacing:0;vertical-align:middle;margin-left:8px;white-space:nowrap}
.imp-snip:empty{display:none}
.imp-snip.is-running{color:var(--muted)}
.imp-snip.is-error{color:#ff7b54;font-weight:700}
.imp-snip-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent,#2a7bff);margin-right:6px;vertical-align:baseline;animation:impSnipPulse 1.1s ease-in-out infinite}
@keyframes impSnipPulse{0%,100%{opacity:.35}50%{opacity:1}}
.imp-snip-retry{border:1px solid #ff7b54;background:transparent;color:#ff7b54;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer;padding:2px 7px;border-radius:6px;margin-left:6px}
.imp-snip-retry:hover{background:#ff7b54;color:#fff}
/* AI dashboard chat (message bubbles / log / typing — shared by the assistant bar) */
.ai-note a{color:var(--accent,#2a7bff);font-weight:700}
.ai-log{display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;padding:6px 2px 12px}
.ai-msg{display:flex}
.ai-msg.ai-user{justify-content:flex-end}
.ai-bubble{max-width:78%;padding:10px 13px;border-radius:14px;font-size:.86rem;line-height:1.45;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text)}
.ai-msg.ai-user .ai-bubble{background:var(--accent,#2a7bff);border-color:var(--accent,#2a7bff);color:#fff;border-bottom-right-radius:5px}
.ai-msg.ai-bot .ai-bubble{border-bottom-left-radius:5px}
.ai-bubble{max-width:88%}
/* Claude-Code-style step log inside an assistant message */
.ai-steps{margin:8px 0 4px;border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;background:var(--card)}
.ai-step{border-top:1px solid var(--glass-border)}.ai-step:first-child{border-top:none}
.ai-step-h{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:.8rem;font-weight:600}
.ai-step.has-more .ai-step-h{cursor:pointer}
.ai-step.has-more .ai-step-h:hover{background:rgba(120,140,180,.08)}
.ai-step-ic{flex:none;width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-size:.66rem;font-weight:800;color:#fff;background:#2ec878}
.ai-step.st-warn .ai-step-ic{background:#e0a13a}.ai-step.st-fail .ai-step-ic{background:#e05a5a}
.ai-step-t{flex:1;min-width:0}
.ai-step-caret{flex:none;color:var(--muted);font-size:.7rem;transition:transform .15s}
.ai-step.open .ai-step-caret{transform:rotate(90deg)}
.ai-step-body{display:none;padding:2px 10px 10px 34px}
.ai-step.open .ai-step-body{display:block}
.ai-step-pre{margin:6px 0 0;padding:8px 10px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:7px;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;color:var(--text);max-height:240px;overflow:auto}
.ai-step-sub{margin-top:7px}.ai-step-sub-t{font-size:.74rem;font-weight:700;color:var(--muted)}
.ai-step-link{display:inline-block;margin-top:8px;font-size:.8rem;font-weight:600;color:var(--accent)}
.ai-typing-dots{display:inline-flex;gap:3px}.ai-typing-dots span{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;animation:aiTd 1s infinite}
.ai-typing-dots span:nth-child(2){animation-delay:.2s}.ai-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes aiTd{0%,60%,100%{opacity:.25}30%{opacity:.9}}
.ai-typing{display:inline-flex;gap:4px;align-items:center}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:aiBlink 1.2s infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes aiBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.grid-stack{background:transparent}
.grid-stack-item-content.dash-cell{inset:0;overflow:hidden;background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column}
.dash-cell .drag-handle{position:absolute;top:8px;right:9px;font-size:.95rem;line-height:1;color:var(--muted);cursor:move;opacity:.4;transition:.15s;padding:2px 3px;border-radius:6px;user-select:none}
.dash-cell:hover .drag-handle{opacity:.85}
.dash-cell .drag-handle:hover{opacity:1;background:var(--glass-strong);color:var(--text)}
.kpi-cell{display:flex;flex-direction:column;justify-content:center;height:100%}
.kpi-cell .label{font-size:.72rem;opacity:.82;text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.kpi-cell .val{font-size:1.7rem;font-weight:850;margin-top:6px;letter-spacing:-.02em;line-height:1.05}
.kpi-cell .sub{font-size:.74rem;opacity:.78;margin-top:3px}
.chart-cell{display:flex;flex-direction:column;height:100%;min-height:0}
.chart-cell h3{margin:0 0 10px;font-size:.96rem;font-weight:700}
.chart-box{position:relative;flex:1;min-height:0}
.chart-box canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.grid-stack-item.ui-resizable-resizing .chart-box canvas,.grid-stack-item.ui-draggable-dragging{will-change:transform}
.grid-stack-placeholder>.placeholder-content{border:2px dashed var(--accent,#2a7bff);border-radius:16px;background:color-mix(in srgb,var(--accent,#2a7bff) 10%,transparent)}
.grid-stack-item>.ui-resizable-handle{filter:saturate(0)}
@media (max-width:820px){ .grid-stack-item{width:100%!important;left:0!important} }
/* ===== Global import progress announcement bar ===== */
/* Compact import progress widget — lives in the left sidebar, above the nav. */
.import-bar{display:block;margin:0 2px 8px;padding:8px 9px;border-radius:10px;
  background:var(--glass);border:1px solid var(--glass-border);box-shadow:0 4px 14px rgba(0,0,0,.12);animation:ibFade .25s ease}
@keyframes ibFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.import-bar[hidden]{display:none}
.import-bar .ib-head{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.import-bar .ib-ico{font-size:.9rem;flex:none;line-height:1}
.import-bar .ib-label{flex:1;min-width:0;font-size:.7rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-bar .ib-pct{font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);flex:none}
.import-bar .ib-track{height:5px;border-radius:99px;background:var(--glass-strong);overflow:hidden}
.import-bar .ib-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--accent));transition:width .45s ease}
.import-bar.done .ib-fill{background:#36d399}
.import-bar.error .ib-fill{background:#ff7b54}
/* Inline Retry link, shown right after the failure message; on error the label wraps + pct hides. */
.import-bar.error .ib-label{white-space:normal;overflow:visible;flex-basis:100%}
.import-bar.error .ib-pct{display:none}
.import-bar .ib-retry-link{display:inline-flex;align-items:center;border:1px solid #ff7b54;background:transparent;color:#ff7b54;font:inherit;font-size:.66rem;font-weight:800;line-height:1;cursor:pointer;padding:3px 7px;border-radius:6px;margin-left:5px;vertical-align:middle;white-space:nowrap}
.import-bar .ib-retry-link:hover{background:#ff7b54;color:#fff}
.import-bar .ib-x{flex:none;border:0;background:none;color:var(--muted);font-size:1rem;line-height:1;cursor:pointer;padding:0 3px;border-radius:5px}
.import-bar .ib-x:hover{background:var(--glass-strong);color:var(--text)}
/* stacked per-resource status lines inside the bar */
.import-bar .ib-rows{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.import-bar .ib-rows:empty{display:none}
.import-bar .ibr{display:flex;align-items:flex-start;gap:5px;font-size:.64rem;line-height:1.3;white-space:normal;overflow:hidden}
.import-bar .ibr-t{overflow:hidden;text-overflow:ellipsis}
.import-bar .ibr.is-queued{color:var(--muted)}
.import-bar .ibr.is-running{color:var(--text);font-weight:600}
.import-bar .ibr.is-done{color:var(--muted)}
.import-bar .ibr-ic{flex:none;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem}
.import-bar .ibr-ic.ok{color:#36d399;font-weight:800}
.import-bar .ibr-ic.q{color:var(--muted)}
.import-bar .ibr.ib-warn{color:#e0a23a;white-space:normal;align-items:flex-start;margin-top:4px;font-size:.72rem;line-height:1.35}
.import-bar .ibr-ic.spin{border:2px solid var(--glass-strong);border-top-color:var(--accent);border-radius:50%;animation:ibSpin .7s linear infinite}
@keyframes ibSpin{to{transform:rotate(360deg)}}
@media (max-width:820px){ .import-bar{margin:0 0 8px;max-width:340px} }
/* ---- table pagination (50 per page) ---- */
.tbl-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 2px;flex-wrap:wrap;flex:none}
.tbl-pager:empty{display:none}
.pg-info{font-size:.8rem;color:var(--muted)}
.pg-info b{color:var(--text)}
.pg-btns{display:flex;align-items:center;gap:6px}
.pg-cur{font-size:.8rem;color:var(--muted);padding:0 6px;white-space:nowrap}
.pg-btn{padding:6px 11px;border-radius:8px;border:1px solid var(--line);background:var(--glass-strong);color:var(--text);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:.12s}
.pg-btn:hover:not(:disabled){background:var(--accent,#2a7bff);border-color:var(--accent,#2a7bff);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#36d399;margin-right:5px;vertical-align:baseline;box-shadow:0 0 0 0 rgba(54,211,153,.6);animation:livePulse 1.4s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(54,211,153,.55)}70%{box-shadow:0 0 0 7px rgba(54,211,153,0)}100%{box-shadow:0 0 0 0 rgba(54,211,153,0)}}
/* Per-page (segmented) Shopify-import progress indicator — one per list page, driven by the same poll */
.imp-prog{display:none;align-items:center;gap:12px;margin:0 0 14px;padding:11px 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-strong);animation:f .25s ease}
.imp-prog.show{display:flex}
.imp-prog.is-error{border-color:#ff7b54}
.imp-prog .ip-ic{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800}
.imp-prog .ip-ic.spin{border:2px solid var(--glass-strong);border-top-color:var(--accent);border-radius:50%;animation:ibSpin .7s linear infinite}
.imp-prog .ip-ic.ok{color:#36d399}
.imp-prog .ip-ic.err{color:#ff7b54}
.imp-prog .ip-body{flex:1;min-width:0}
.imp-prog .ip-label{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-prog .ip-track{height:5px;border-radius:99px;background:var(--card);overflow:hidden;margin-top:7px}
.imp-prog .ip-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--accent));transition:width .45s ease}
.imp-prog.is-done .ip-fill{background:#36d399}
.imp-prog.is-error .ip-fill{background:#ff7b54}
.imp-prog .ip-pct{flex:none;font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);min-width:38px;text-align:right}
.imp-prog .ip-retry{display:inline-flex;align-items:center;border:1px solid #ff7b54;background:transparent;color:#ff7b54;font:inherit;font-size:.74rem;font-weight:800;line-height:1;cursor:pointer;padding:3px 8px;border-radius:7px;margin-left:8px;white-space:nowrap}
.imp-prog .ip-retry:hover{background:#ff7b54;color:#fff}
/* Integrations: category dropdown + search merged into one bordered control */
.ig-searchbar{display:inline-flex;align-items:stretch;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:11px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ig-searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.ig-searchbar .ig-cat{position:relative;flex:none;display:flex;align-items:stretch}
.ig-searchbar .ig-cat-btn{border:0;border-right:1px solid var(--glass-border);background:transparent;color:var(--text);font:inherit;font-size:.84rem;padding:0 12px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.ig-searchbar .ig-cat-btn .caret{color:var(--muted);font-size:.7rem}
.ig-searchbar .ig-search{flex:1;min-width:160px;border:0;background:transparent;color:var(--text);font:inherit;font-size:.86rem;padding:9px 13px;outline:none}
/* Klaviyo campaigns calendar */
.kv-cal{background:var(--card);border:1px solid var(--glass-border);border-radius:14px;padding:16px;margin-bottom:18px}
.kv-cal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.kv-cal-title{font-weight:700;font-size:1rem;flex:1}
.kv-cal-nav{display:inline-flex;gap:6px}
.kv-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.kv-cal-wd{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;padding:2px 0}
.kv-cal-cell{min-height:96px;max-height:150px;overflow-y:auto;border:1px solid var(--glass-border);border-radius:11px;background:var(--card);padding:7px 8px}
.kv-cal-cell.kv-cal-empty{background:transparent;border-color:transparent}
.kv-cal-cell.has-items{background:var(--glass-strong)}
.kv-cal-date{font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:5px}
.kv-cal-cell.has-items .kv-cal-date{color:var(--text)}
.kv-cal-chip{display:block;width:100%;text-align:left;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:6px;padding:2px 6px;margin-bottom:4px;font-size:.7rem;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.kv-cal-chip:hover{background:color-mix(in srgb,var(--accent) 28%,transparent)}
@media(max-width:820px){.kv-cal-grid{gap:5px}.kv-cal-cell{min-height:72px;padding:5px 6px}.kv-cal-wd{font-size:.58rem}}
/* Klaviyo flows: clickable tree-view toggle + branching tree layout */
.kv-tree-toggle{cursor:pointer;border-radius:7px;padding:2px;transition:background .15s,color .15s;color:inherit}
.kv-tree-toggle:hover{background:var(--glass-strong)}
.kv-tree-toggle.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.kv-flowtree{display:flex;flex-direction:column;gap:18px;margin-top:6px}
.kv-ft-flow{border:1px solid var(--glass-border);border-radius:14px;background:var(--card);padding:14px 16px}
.kv-ft-head{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.92rem;margin-bottom:10px}
.kv-ft-tree{margin:0;padding:0;list-style:none}
.kv-ft-tree ul{list-style:none;margin:0;padding-left:26px;position:relative}
.kv-ft-tree ul::before{content:"";position:absolute;left:10px;top:0;bottom:14px;width:2px;background:var(--glass-border)}
.kv-ft-node{position:relative;padding:4px 0}
.kv-ft-node>.kv-ft-line{display:inline-flex;align-items:center;gap:8px;position:relative}
.kv-ft-tree ul>.kv-ft-node>.kv-ft-line::before{content:"";position:absolute;left:-16px;top:50%;width:14px;height:2px;background:var(--glass-border)}
.kv-ft-ic{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--glass-strong);border:1px solid var(--glass-border);font-size:.82rem;flex:none}
.kv-ft-name{font-size:.86rem;font-weight:600}
.kv-ft-meta{font-size:.74rem;color:var(--muted)}
.kv-ft-branch{font-size:.66rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:6px;padding:1px 7px;margin-right:4px}
/* ===== Live agent runs: progress pill + Claude-Code-style console drawer ===== */
.run-pill{position:fixed;right:18px;bottom:20px;z-index:7000;display:none;align-items:center;gap:10px;max-width:340px;padding:9px 13px;border-radius:13px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.18);cursor:pointer;font-size:.82rem}
.run-pill.show{display:flex}
.run-pill.active{border-color:#16b3c0;box-shadow:0 0 0 1px rgba(22,179,192,.25),0 10px 30px rgba(0,0,0,.2)}
.run-pill-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(22,179,192,.3);border-top-color:#16b3c0;animation:run-spin .8s linear infinite;flex:none}
.run-pill.idle .run-pill-spin{border-top-color:#2bb673;animation:none}
@keyframes run-spin{to{transform:rotate(360deg)}}
.run-pill-mid{min-width:0;flex:1}
.run-pill-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run-pill-bar{height:5px;border-radius:999px;background:rgba(140,140,160,.2);overflow:hidden;margin-top:4px}
.run-pill-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#16b3c0,#a06bff);transition:width .5s}
.run-pill-pct{font-weight:800;color:#16b3c0;font-variant-numeric:tabular-nums;flex:none}
.run-pill-x{flex:none;width:18px;height:18px;padding:0;border:none;border-radius:50%;background:rgba(140,140,160,.18);color:var(--text);font-size:.68rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .15s,background .15s}
.run-pill-x:hover{opacity:1;background:rgba(220,53,69,.2);color:#ff6b7a}
.console-ov{position:fixed;inset:0;z-index:7100;background:rgba(10,12,20,.32);display:none}
.console-ov.open{display:block}
.console-drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,94vw);transform:translateX(100%);transition:transform .22s ease;background:#0e1016;border-left:1px solid #232838;display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.4)}
.console-ov.open .console-drawer{transform:translateX(0)}
.console-head{position:relative;display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid #232838;color:#e8ebf2}
.console-head h3{margin:0;font-size:.96rem;font-weight:800;flex:none}
/* SA3: live descriptive task status next to the title */
.console-status{flex:1;min-width:0;font-size:.78rem;font-weight:600;color:#9aa3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-status:empty{flex:1}
.console-head-acts{display:inline-flex;gap:6px;flex:none}
/* SA3: thin progress bar sitting on the header's bottom border */
.console-head-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;overflow:hidden}
.console-head-fill{height:100%;width:0;background:linear-gradient(90deg,#16b3c0,#a06bff);transition:width .5s ease}
.console-head-fill.done{background:linear-gradient(90deg,#2bb673,#16b3c0)}
.console-head-fill.blocked{background:linear-gradient(90deg,#ff7a59,#ff4d6d)}
.console-head-fill.active{box-shadow:0 0 8px rgba(22,179,192,.5)}
.console-x{background:none;border:0;color:#8b93a7;font-size:1.15rem;cursor:pointer;border-radius:7px;padding:2px 7px}.console-x:hover{background:#1b1f2b;color:#fff}
.console-runs{display:flex;gap:7px;flex-wrap:nowrap;padding:10px 13px;border-bottom:1px solid #232838;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.console-runchip{flex:0 0 auto;position:relative;font-size:.74rem;padding:5px 24px 5px 9px;border-radius:9px;background:#161a24;border:1px solid #262c3c;color:#aeb6c8;cursor:pointer;white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.console-runchip:hover{border-color:#3a4258}
.console-runchip.sel{background:#16b3c0;color:#04121a;border-color:#16b3c0;font-weight:700}
.console-runchip.running::before{content:"●";color:#16b3c0;margin-right:5px}
.console-runchip-x{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:none;border:0;background:none;color:#8b93a7;font-size:.82rem;line-height:1;cursor:pointer;border-radius:5px;padding:1px 4px}
.console-runchip:hover .console-runchip-x{display:block}
.console-runchip-x:hover{background:#2a3142;color:#fff}
.console-runchip.sel .console-runchip-x{color:#04121a}.console-runchip.sel .console-runchip-x:hover{background:rgba(0,0,0,.18);color:#000}
.console-feedback{flex:none;border-top:1px solid #232838;padding:10px 13px;background:#0e1016}
.console-feedback textarea{width:100%;box-sizing:border-box;resize:none;background:#161a24;border:1px solid #262c3c;border-radius:9px;color:#e8ebf2;font-family:inherit;font-size:.8rem;line-height:1.45;padding:8px 10px;height:38px;max-height:120px}
.console-feedback textarea:focus{outline:none;border-color:#16b3c0}
.console-feedback-row{display:flex;gap:8px;align-items:center;margin-top:7px}
.console-feedback-hint{flex:1;color:#5b6478;font-size:.68rem;line-height:1.3}
.console-feedback-send{background:#16b3c0;color:#04121a;border:0;border-radius:8px;padding:7px 14px;font-weight:800;font-size:.78rem;cursor:pointer;white-space:nowrap}
.console-feedback-send:hover:not(:disabled){background:#19c6d4}
.console-feedback-send:disabled{opacity:.5;cursor:default}
.console-prog{padding:12px 15px;border-bottom:1px solid #232838}
.console-prog-top{display:flex;justify-content:space-between;align-items:baseline;color:#e8ebf2;font-size:.84rem;margin-bottom:6px;gap:8px}
.console-prog-title{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-prog-pct{font-weight:800;color:#16b3c0;font-variant-numeric:tabular-nums}
.console-prog-bar{height:8px;border-radius:999px;background:#1b1f2b;overflow:hidden}
.console-prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#16b3c0,#a06bff);transition:width .5s}
.console-prog-fill.done{background:linear-gradient(90deg,#2bb673,#16b3c0)}
.console-prog-fill.blocked{background:linear-gradient(90deg,#ff7a59,#ff4d6d)}
.console-prog-meta{color:#8b93a7;font-size:.72rem;margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.console-stop{background:rgba(220,53,69,.14);color:#ff6b7a;border:1px solid rgba(220,53,69,.4);border-radius:7px;padding:3px 10px;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap}
.console-stop:hover:not(:disabled){background:rgba(220,53,69,.26)}
.console-stop:disabled{opacity:.55;cursor:default}
.console-log{flex:1;overflow:auto;padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;line-height:1.5;background:#0b0d12}
.console-line{display:flex;gap:8px;padding:2px 0;border-bottom:1px solid #14171f;color:#cdd3e0;white-space:pre-wrap;word-break:break-word}
.console-line .c-ts{color:#5b6478;flex:none}
.console-line .c-who{flex:none;font-weight:700}
.console-line.c-security .c-who{color:#ff6b6b}.console-line.c-testing .c-who{color:#3ecf8e}.console-line.c-build .c-who{color:#b388ff}.console-line.c-engineer .c-who,.console-line.c-architect .c-who{color:#16b3c0}.console-line .c-who{color:#8b93a7}
.console-line.c-done{color:#3ecf8e}.console-line.c-note{color:#ffb454}
/* Claude-Code-style log kinds: plan/todo (muted), tool calls (blue), edits (green) */
.console-line.c-plan{color:#9aa6bb}.console-line.c-tool .c-msg{color:#7ea8ff}.console-line.c-edit .c-msg{color:#5fd39a}.console-line.c-feedback .c-msg{color:#c9a4ff}
.console-line .c-msg{flex:1;min-width:0}
.c-cursor{display:inline-block;width:6px;height:.95em;margin-left:1px;vertical-align:text-bottom;background:currentColor;opacity:.85;animation:c-blink .85s steps(1) infinite}
@keyframes c-blink{50%{opacity:0}}
.console-line{flex-wrap:wrap}
.console-line .c-msg{flex:1;min-width:0}
.c-exp{flex:none;background:none;border:1px solid #232838;border-radius:6px;color:#8a93ff;cursor:pointer;font-size:.66rem;font-family:inherit;padding:1px 7px;align-self:center;white-space:nowrap}
.c-exp:hover{background:#161a26;color:#aab4ff;border-color:#39405c}
.c-detail{flex-basis:100%;width:100%;margin:7px 0 3px;padding:11px 13px;background:#0e1119;border:1px solid #1b2030;border-left:2px solid #4b54ff;border-radius:8px;color:#aeb6c8;font-size:.72rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}
.console-empty{color:#5b6478;padding:20px;text-align:center}
/* ── Context-window orb (per-task) in the console header ─────────────────────────── */
.ctx-orb-wrap{position:relative;margin-left:auto;margin-right:6px;display:inline-flex}
.ctx-orb-wrap:empty{display:none}
.ctx-orb{position:relative;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.ctx-orb svg{width:34px;height:34px;transform:rotate(-90deg)}
.ctx-ring-bg{fill:none;stroke:#232838;stroke-width:3}
.ctx-ring-fg{fill:none;stroke:#16b3c0;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .5s ease,stroke .3s}
.ctx-orb.ctx-warm .ctx-ring-fg{stroke:#e0a13a}
.ctx-orb.ctx-hot .ctx-ring-fg{stroke:#e0533a}
.ctx-orb-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.52rem;font-weight:800;color:#cdd4e2;letter-spacing:-.02em}
.ctx-orb.ctx-hot .ctx-orb-pct{color:#f0a596}
.ctx-pop{position:absolute;top:42px;right:0;width:230px;background:#0e1119;border:1px solid #232838;border-radius:10px;padding:11px 13px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:30;display:none}
.ctx-orb-wrap.ctx-open .ctx-pop{display:block}
.ctx-pop-h{font-size:.74rem;font-weight:800;color:#e8ebf2;margin-bottom:8px}
.ctx-pop-bar{height:7px;border-radius:4px;background:#232838;overflow:hidden;margin-bottom:8px}
.ctx-pop-fill{height:100%;background:linear-gradient(90deg,#16b3c0,#19c6d4);border-radius:4px}
.ctx-pop-row{font-size:.7rem;color:#aeb6c8;line-height:1.5}
.ctx-pop-row b{color:#e8ebf2}
.ctx-pop-sub{font-size:.64rem;color:#5b6478;margin-top:4px}
/* ── Files-changed panel (live diff snippets as the agent codes) ─────────────────── */
.console-files{border-top:1px solid #232838;background:#0b0d12;max-height:42%;overflow:auto;flex:none}
.console-files[hidden]{display:none}
.cf-head{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:.72rem;font-weight:700;color:#cdd4e2;position:sticky;top:0;background:#0b0d12;border-bottom:1px solid #161b27}
.cf-count{background:#232838;color:#aeb6c8;border-radius:10px;padding:1px 7px;font-size:.64rem;font-weight:800}
.cf-tot{margin-left:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.68rem}
.cf-add{color:#3fb950;font-weight:700}
.cf-del{color:#f85149;font-weight:700}
.cf-item{border-bottom:1px solid #11151e}
.cf-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:7px 14px;cursor:pointer;color:#cdd4e2;font-size:.73rem}
.cf-row:hover{background:#11151e}
.cf-caret{display:inline-block;transition:transform .15s;color:#5b6478;font-size:.7rem}
.cf-caret.cf-open{transform:rotate(90deg)}
.cf-path{font-family:ui-monospace,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-stat{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.67rem;flex:none}
.cf-badge{background:#3a2a14;color:#e0a13a;border-radius:8px;padding:1px 6px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.cf-diff{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.7rem;line-height:1.45;background:#06080c;border-top:1px solid #11151e;overflow:auto;max-height:340px}
.cf-diff[hidden]{display:none}
.cf-loading{padding:10px 14px;color:#5b6478;font-size:.7rem}
.dl{display:flex;white-space:pre-wrap;word-break:break-word;padding:0 10px}
.dl-sign{flex:none;width:14px;text-align:center;color:#5b6478;user-select:none}
.dl-txt{flex:1;min-width:0}
.dl-add{background:rgba(63,185,80,.12)}
.dl-add .dl-sign{color:#3fb950}
.dl-add .dl-txt{color:#9ae6a8}
.dl-del{background:rgba(248,81,73,.12)}
.dl-del .dl-sign{color:#f85149}
.dl-del .dl-txt{color:#f0a59c}
.dl-ctx .dl-txt{color:#7a8398}
.dl-skip{color:#4a5266;background:#0a0d13;font-style:italic;padding:2px 14px;justify-content:center}
.prof-task-prog{display:flex;align-items:center;gap:9px;margin:7px 0}
.pill-close { margin-left:8px; cursor:pointer; border:none; background:transparent; color:inherit; font-size:14px; line-height:1; padding:0 2px; opacity:0.7; border-radius:4px; } .pill-close:hover { opacity:1; background:rgba(0,0,0,0.1); }
/* Active-task indicator on the assistant bar (shows the bound task the chatbot is scoped to) */
.ai-task-indicator{display:flex;align-items:center;gap:8px;margin:0 12px;padding:6px 11px;border-top:1px solid var(--line);font-size:.8rem;color:var(--text);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.ai-task-indicator[hidden]{display:none}
.ai-task-indicator .ai-task-ic{flex:none;line-height:1}
.ai-task-indicator .ai-task-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-task-indicator .ai-task-label b{font-weight:700}
.ai-task-indicator .ai-task-clear{flex:none;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:rgba(140,140,160,.18);color:var(--text);font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.65;transition:opacity .15s,background .15s}
/* ===== Canvas builder (SA3): Add-canvas picker + Website base layer ===== */
.canvas-ov{position:fixed;inset:0;z-index:1200;display:none;align-items:flex-start;justify-content:center;padding:7vh 16px 16px;background:rgba(12,14,22,.5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.canvas-modal{width:min(720px,96vw);max-height:84vh;overflow:auto;padding:22px 24px 26px;border-radius:20px;color:var(--text)}
.canvas-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.canvas-modal-head h3{margin:0;font-size:1.18rem}
.canvas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.canvas-type{padding:16px 14px;border-radius:15px;border:1px solid var(--glass-border);background:var(--glass-strong);cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s}
.canvas-type:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.16);border-color:rgba(120,110,255,.5)}
.canvas-type.soon{opacity:.62}
.canvas-type-ic{font-size:1.7rem;line-height:1}
.canvas-type-name{font-weight:700;margin-top:9px;font-size:.92rem}
.canvas-type-desc{font-size:.74rem;margin-top:3px;line-height:1.35}
.canvas-soon{font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(140,140,160,.22);color:var(--muted);padding:1px 6px;border-radius:20px;vertical-align:middle}
.canvas-looks{display:flex;flex-wrap:wrap;gap:7px}
.canvas-look{padding:6px 14px;border-radius:20px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer;font-size:.8rem;font-weight:600}
.canvas-look.on{background:rgba(120,110,255,.9);color:#fff;border-color:transparent}
.canvas-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:14px}
.canvas-card{padding:18px 16px;border-radius:16px;border:1px solid var(--glass-border);background:var(--glass-strong);cursor:pointer;transition:transform .14s,box-shadow .14s}
.canvas-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.16)}
.canvas-card-ic{font-size:1.9rem;line-height:1}
.canvas-card-name{font-weight:700;margin-top:10px}
.canvas-card-meta{font-size:.74rem;margin-top:2px}
.canvas-editor{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:14px;align-items:start}
.canvas-edit-fields{align-self:start}
.canvas-preview{border:1px solid var(--glass-border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow);height:72vh}
.canvas-preview iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:820px){.canvas-editor{grid-template-columns:1fr}.canvas-preview{height:60vh}}
/* AI website editor: full-stage preview + centered prompt + live build/publish status */
.cv-editor{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 150px);min-height:460px}
.cv-stage{position:relative;flex:1;border:1px solid var(--glass-border);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.cv-stage iframe{width:100%;height:100%;border:0;display:block}
.cv-status{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:14px;background:rgba(20,22,32,.88);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.32);max-width:92%}
.cv-status[hidden],.cv-status:empty{display:none}   /* don't show the empty status pill */
.cv-status .muted{color:#9aa3b8}
.cv-status-msg{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.cv-status-acts{display:flex;gap:7px}
.cv-status-acts .act{margin-right:0}
.cv-bar{width:120px;height:5px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;flex:none}
.cv-bar-fill{height:100%;background:linear-gradient(90deg,#7c6bff,#b06bff);transition:width .4s}
.cv-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:cvspin .7s linear infinite;flex:none}
@keyframes cvspin{to{transform:rotate(360deg)}}
.cv-status-ready{background:rgba(20,34,24,.92)}
.cv-status-err{background:rgba(42,20,22,.92)}
.cv-prompt{display:flex;align-items:flex-end;gap:10px;padding:9px 12px;border-radius:16px;max-width:800px;width:100%;margin:0 auto}
.cv-prompt textarea{flex:1;border:0;background:transparent;color:var(--text);resize:none;font:inherit;font-size:.92rem;line-height:1.4;max-height:120px;outline:none;padding:6px 4px}
.cv-send{flex:none;padding:9px 18px;border-radius:11px;border:0;background:linear-gradient(90deg,#7c6bff,#b06bff);color:#fff;font-weight:700;cursor:pointer;font-size:.86rem}
.cv-send:disabled{opacity:.6;cursor:default}
.cv-hint{font-size:.8rem}
.cv-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:2px 2px}
.cv-toolbar .act{flex:none;margin-right:0}
.cv-toolbar .cv-hint{flex:1;min-width:160px}
.cv-thumbs{display:flex;gap:7px;flex-wrap:wrap}
.cv-thumb{position:relative;width:46px;height:46px;border-radius:9px;overflow:hidden;border:1px solid var(--glass-border);flex:none}
.cv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cv-thumb-x{position:absolute;top:1px;right:1px;width:16px;height:16px;border:0;border-radius:50%;background:rgba(10,12,18,.7);color:#fff;font-size:.62rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ai-task-indicator .ai-task-clear:hover{opacity:1;background:rgba(220,53,69,.2);color:#ff6b7a}
/* ============================ DEVELOPER MODE (split workspace) ============================ */
.dev-mode-btn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;font-weight:800;letter-spacing:-.04em}
.dev-mode-btn.on{background:#16b3c0;color:#04121a;border-color:#16b3c0}
body.devmode-on #runPill{display:none!important}
body.devmode-on #aiBar{display:none!important}   /* the Console uses its own dev-pipeline composer, not the assistant bar */
body.devmode-on{overflow:hidden}
.devmode{position:fixed;inset:0;z-index:6000;display:grid;grid-template-columns:var(--dev-colw,38%) 6px 1fr;background:#06080c;color:#e8ebf2;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
/* draggable splitters (positions saved in localStorage) */
.dev-resize-x{cursor:col-resize;background:#11151e;position:relative;z-index:8;border-left:1px solid #1b2030}
.dev-resize-x::before{content:"";position:absolute;left:-4px;right:-4px;top:0;bottom:0}
.dev-resize-x:hover,body.dev-resizing .dev-resize-x{background:#16b3c0}
.dev-resize-y{cursor:row-resize;background:#11151e;position:relative;z-index:8;flex:none}
.dev-resize-y::before{content:"";position:absolute;top:-4px;bottom:-4px;left:0;right:0}
.dev-resize-y:hover,body.dev-resizing .dev-resize-y{background:#16b3c0}
body.dev-resizing{user-select:none}
body.dev-resizing iframe{pointer-events:none}   /* don't lose the drag over the preview iframe */
.dev-split.resizing{transition:none}
/* context-orb popover in the composer opens UPWARD (it sits at the bottom of the pane) */
.dev-comp-ctx{position:relative}
.dev-comp-ctx .ctx-pop{top:auto;bottom:calc(100% + 10px);right:auto;left:0;z-index:300}
.devmode[hidden]{display:none}
/* Left: console + chatbot */
.dev-left{display:flex;flex-direction:column;min-width:0;border-right:1px solid #1b2030;background:#0b0d12}
.dev-head{display:flex;align-items:center;gap:9px;padding:7px 12px;border-bottom:1px solid #1b2030;background:#0e1119}
.dev-logo{font-weight:800;font-size:.85rem;letter-spacing:-.01em;white-space:nowrap;flex:none}
/* task tabs (run chips) lifted up next to the Console title — horizontal, compact, scrollable */
.dev-runs-slot{flex:1;min-width:0;display:flex;overflow-x:auto;overflow-y:hidden}
.dev-runs-slot::-webkit-scrollbar{height:0}
.dev-runs-slot .console-runs{display:flex;flex-wrap:nowrap;gap:5px;padding:0;margin:0;border:0;max-height:none;background:none;overflow:visible}
.dev-runs-slot .console-runchip{white-space:nowrap;flex:none}
/* the context-window orb, lifted out of the (hidden) console header into the Console title bar */
.dev-ctx-slot{display:inline-flex;align-items:center}
.dev-ctx-slot .ctx-orb-wrap{margin:0}
.dev-perm{display:flex;margin-left:auto;background:#11151e;border:1px solid #232838;border-radius:9px;padding:2px}
.dev-perm-opt{background:none;border:0;color:#aeb6c8;font-size:.72rem;font-weight:700;padding:5px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.dev-perm-opt.on{background:#16b3c0;color:#04121a}
.dev-perm-opt[data-m="bypass"].on{background:#e0a13a;color:#1a1204}
.dev-exit{background:#1b2030;border:1px solid #2a3142;color:#cdd4e2;font-size:.72rem;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer}
.dev-exit:hover{background:#2a3142}
.dev-left-console{flex:1 1 auto;min-height:0;display:flex;position:relative;overflow:hidden}
/* the relocated console drawer fills the left-console host (drop its fixed-drawer chrome) */
.dev-left-console .console-drawer{position:static;transform:none!important;width:100%;height:100%;max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;min-height:0}
.dev-left-console .console-x{display:none}
/* "Agent console" header removed in the Console — its orb is lifted to the title bar, so the task tabs
   (run chips) sit at the very top. Everything below is compacted. */
.dev-left-console .console-head{display:none}
.dev-left-console .console-runs{padding:6px 10px;gap:5px;max-height:92px}
.dev-left-console .console-runchip{padding:4px 9px;font-size:.72rem}
.dev-left-console .console-prog{padding:8px 11px}
.dev-left-console .console-prog-top{font-size:.78rem;margin-bottom:5px}
.dev-left-console .console-log{padding:7px 12px;font-size:.72rem;line-height:1.42}
.dev-left-console .console-files{max-height:34%}
.dev-left-console .console-feedback{padding:8px 11px}
.dev-left-console .c-detail{max-height:240px;padding:9px 11px}
.dev-left-chat{flex:none;border-top:1px solid #1b2030;background:#0e1119}
/* ── Console composer (dev-pipeline only: LLM picker + ctx orb + ＋files + 🎤mic + Ask/Bypass) ── */
.dev-composer{display:flex;flex-direction:column;gap:7px;padding:9px 11px}
.dev-comp-attach{display:flex;flex-wrap:wrap;gap:6px}
.dev-comp-attach[hidden]{display:none}
.dev-comp-chip{display:inline-flex;align-items:center;gap:5px;background:#11151e;border:1px solid #232838;border-radius:8px;padding:3px 6px 3px 4px;font-size:.66rem;color:#cdd4e2;max-width:160px}
.dev-comp-chip img{width:22px;height:22px;object-fit:cover;border-radius:4px;display:block}
.dev-comp-chip-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-comp-chip button{flex:none;border:0;background:none;color:#8a93a6;cursor:pointer;font-size:.9rem;line-height:1;padding:0}
.dev-comp-chip button:hover{color:#f0a59c}
.dev-comp-row{display:flex;align-items:flex-end;gap:6px;background:#11151e;border:1px solid #232838;border-radius:12px;padding:5px 6px}
.dev-comp-text{flex:1;min-width:0;background:none;border:0;outline:none;resize:none;color:#e8ebf2;font:inherit;font-size:.8rem;line-height:1.42;max-height:120px;padding:5px 3px}
.dev-comp-text::placeholder{color:#5b6478}
.dev-comp-btn{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid #2a3142;background:#1b2030;color:#cdd4e2;cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.dev-comp-btn:hover{background:#2a3142}
.dev-comp-mic.on{background:#e0533a;border-color:#e0533a;color:#fff;animation:devMicPulse 1.1s infinite}
@keyframes devMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,83,58,.45)}50%{box-shadow:0 0 0 6px rgba(224,83,58,0)}}
.dev-comp-bar{display:flex;align-items:center;gap:7px}
.dev-comp-model{flex:none;max-width:140px;background:#11151e;border:1px solid #232838;border-radius:8px;color:#cdd4e2;font-size:.7rem;font-weight:600;padding:5px 7px;cursor:pointer}
.dev-comp-ctx{flex:none;display:inline-flex;align-items:center}
.dev-comp-ctx .ctx-orb-wrap{margin:0}
.dev-comp-bar .dev-perm-opt{padding:4px 9px;font-size:.69rem}
.dev-comp-send{flex:none;background:#16b3c0;color:#04121a;border:0;border-radius:8px;font-weight:800;font-size:.74rem;padding:7px 13px;cursor:pointer}
.dev-comp-send:hover:not(:disabled){background:#19c6d4}
.dev-comp-send:disabled{opacity:.55;cursor:default}
/* the relocated assistant bar sits inline at the bottom of the left pane */
.dev-left-chat .ai-bar{position:static;left:auto;right:auto;bottom:auto;transform:none;width:100%;max-width:none;margin:0;border-radius:0;border:0;box-shadow:none;background:transparent}
.dev-left-chat .ai-conv{position:static;width:100%;max-width:none;max-height:34vh}
/* Right: preview / queue+editor */
.dev-right{display:flex;flex-direction:column;min-width:0;background:#06080c}
/* fade-IN only — resting state is fully visible, so a throttled tab can never leave it stuck hidden */
.dev-fadein{animation:devFadeIn .22s cubic-bezier(.4,0,.2,1) both}
@keyframes devFadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.dev-prev-bar{display:flex;align-items:center;gap:7px;padding:7px 10px;border-bottom:1px solid #1b2030;background:#0e1119;flex:none}
.dev-prev-tag{font-size:.7rem;font-weight:800;color:#9aa3b8;white-space:nowrap}
.dev-prev-url{flex:1;min-width:0;background:#11151e;border:1px solid #232838;border-radius:7px;color:#e8ebf2;font-size:.74rem;font-family:ui-monospace,Menlo,Consolas,monospace;padding:6px 9px}
.dev-prev-btn{background:#1b2030;border:1px solid #2a3142;color:#cdd4e2;font-size:.72rem;font-weight:700;padding:6px 10px;border-radius:7px;cursor:pointer}
.dev-prev-btn:hover{background:#2a3142}
.dev-sb-toggle{white-space:nowrap}
.dev-sb-toggle.on{background:#3a2a14;border-color:#5a4420;color:#e0a13a}
.dev-prev-frame{flex:1;width:100%;border:0;background:#fff}
.dev-prev-host{flex:1;min-height:0;display:flex}
.dev-split{display:grid;grid-template-rows:var(--dev-rowh,1fr) 6px 1fr;height:100%;min-height:0;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1)}
.dev-right.dev-novis .dev-split{grid-template-rows:1fr 0 0}
.dev-right.dev-novis .dev-resize-y{display:none}
.dev-top{display:flex;min-height:0;border-bottom:1px solid #1b2030}
.dev-bottom{display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* queue (left strip of the top region) */
.dev-q{flex:none;width:228px;border-right:1px solid #1b2030;background:#0b0d12;display:flex;flex-direction:column;min-height:0}
.dev-q-h{display:flex;align-items:center;gap:7px;padding:7px 10px;font-size:.72rem;font-weight:800;color:#cdd4e2;border-bottom:1px solid #161b27}
/* liquid-glass Auto/Manual dropdown (replaces the system <select>; no focus ring) */
.dev-gd{position:relative;margin-left:auto;flex:none}
.dev-gd-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(24,30,44,.62);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-radius:9px;color:#dfe5f0;font-size:.69rem;font-weight:700;padding:5px 10px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.dev-gd-btn:hover{background:rgba(38,46,64,.7);border-color:rgba(255,255,255,.18)}
.dev-gd-btn:focus,.dev-gd-btn:focus-visible,.dev-gd-btn:active{outline:none!important;box-shadow:none!important}
.dev-gd-caret{font-size:.58rem;opacity:.65;transition:transform .15s ease}
.dev-gd.open .dev-gd-caret{transform:rotate(180deg)}
.dev-gd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:208px;max-width:calc(100vw - 16px);max-height:min(360px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;z-index:var(--z-dropdown);display:flex;flex-direction:column;gap:2px;padding:5px;background:rgba(15,19,29,.8);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.12);border-radius:13px;box-shadow:0 18px 44px rgba(0,0,0,.5);animation:devFadeIn .14s ease both}
.dev-gd-menu[hidden]{display:none}
.dev-gd-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:none;border:0;border-radius:9px;color:#e8ebf2;font-size:.75rem;font-weight:700;padding:7px 10px;cursor:pointer;outline:none}
.dev-gd-opt:focus,.dev-gd-opt:focus-visible{outline:none}
.dev-gd-opt small{font-weight:500;color:#8a93a6;font-size:.63rem;letter-spacing:.01em}
.dev-gd-opt:hover{background:rgba(255,255,255,.06)}
.dev-gd-opt.on{background:color-mix(in srgb,#16b3c0 20%,transparent);color:#9fe8ee}
.dev-gd-opt.on small{color:#7fcfd6}
.dev-q-list{flex:1;overflow:auto;min-height:0}
.dev-q-empty{padding:16px 12px;color:#5b6478;font-size:.72rem;line-height:1.5;text-align:center}
.dev-q-row{display:flex;align-items:center;gap:7px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #11151e;padding:8px 11px;cursor:pointer;color:#cdd4e2;font-size:.73rem}
.dev-q-row:hover{background:#11151e}
.dev-q-row.on{background:#13202a;box-shadow:inset 2px 0 0 #16b3c0}
.dev-q-ic{flex:none}
.dev-q-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace}
.dev-q-stat{flex:none;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.66rem}
/* editor (rest of the top region) */
.dev-editor{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:#06080c}
.dev-ed-empty{padding:20px;color:#5b6478;font-size:.74rem;text-align:center;margin:auto}
.dev-ed-head{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid #1b2030;background:#0e1119;flex:none}
.dev-ed-path{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;color:#9aa3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.dev-ed-nav{display:flex;align-items:center;gap:4px;flex:none}
.dev-ed-btn{background:#1b2030;border:1px solid #2a3142;color:#cdd4e2;font-size:.7rem;padding:4px 7px;border-radius:6px;cursor:pointer}
.dev-ed-ct{font-size:.66rem;color:#5b6478;min-width:54px}
.dev-ed-act{display:flex;gap:6px;flex:none}
/* agent checks bar (syntax / security / testing) — reuses the .crq-badge styling from Code review */
.dev-ed-checks{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 11px;border-bottom:1px solid #1b2030;background:#0b0d12;flex:none}
.dev-ed-checks.has-fail{background:#160f0c;border-bottom-color:#3a2530}
.dev-ed-checks-lbl{font-size:.62rem;font-weight:800;color:#5b6478;text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.dev-q-row.fail{box-shadow:inset 2px 0 0 #e0533a}
.dev-q-row.fail.on{box-shadow:inset 2px 0 0 #e0533a,inset 0 0 0 99px rgba(224,83,58,.06)}
.dev-ed-autonote{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:#13202a;border:1px solid #1f4151;color:#16b3c0;font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:7px}
.dev-ed-autonote::before{content:"";width:8px;height:8px;border-radius:50%;background:#16b3c0;animation:devMicPulse 1.1s infinite}
.dev-ed-rework{margin-left:auto;background:#3a2a14;border:1px solid #5a4420;color:#e0a13a;font-size:.72rem;font-weight:800;padding:6px 12px;border-radius:7px;cursor:pointer}
.dev-ed-rework:hover{background:#4a3518}
.dev-ed-approve{background:#16b3c0;border:0;color:#04121a;font-size:.72rem;font-weight:800;padding:6px 11px;border-radius:7px;cursor:pointer}
.dev-ed-approve:hover{background:#19c6d4}
.dev-ed-decline{background:#1b2030;border:1px solid #3a2530;color:#f0a59c;font-size:.72rem;font-weight:700;padding:6px 11px;border-radius:7px;cursor:pointer}
.dev-ed-decline:hover{background:#2a1a22}
.dev-ed-code{flex:1;min-height:0;display:flex;overflow:hidden}
.dev-ed-code .cl-edit-wrap{flex:1;min-height:0}
@media(max-width:900px){.devmode{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

/* ===================== Site-wide liquid-glass <select> (20-glass-select.js) ===================== */
.gsel{position:relative;display:inline-block;vertical-align:middle;max-width:100%}
.gsel.gsel-block{display:block;width:100%}
.gsel > select{display:none}
.gsel-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;box-sizing:border-box;background:var(--glass-strong);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font:inherit;font-size:.85rem;font-weight:600;padding:8px 11px;cursor:pointer;outline:none;text-align:left}
.gsel-btn:hover{border-color:var(--accent)}
.gsel-btn:focus,.gsel-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.gsel-btn:disabled{opacity:.55;cursor:default}
.gsel-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gsel-caret{flex:none;font-size:.58rem;opacity:.6;transition:transform .15s ease}
.gsel.open .gsel-caret{transform:rotate(180deg)}
.gsel-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;max-width:min(340px,calc(100vw - 16px));max-height:min(300px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;z-index:var(--z-dropdown);display:flex;flex-direction:column;gap:1px;padding:5px;background:var(--surface-solid);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--glass-border);border-radius:13px;box-shadow:var(--shadow)}
.gsel-menu[hidden]{display:none}
.gsel-grp{flex:none;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:7px 9px 3px}
/* flex:none so options keep their height in the flex-column menu — without it, an option list taller than
   max-height compresses the rows (text overlaps) instead of scrolling. */
.gsel-opt{flex:none;display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;color:var(--text);font:inherit;font-size:.82rem;font-weight:600;padding:7px 10px;cursor:pointer;outline:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsel-opt:hover{background:color-mix(in srgb,var(--text) 9%,transparent)}
.gsel-opt.on{background:color-mix(in srgb,var(--text) 12%,transparent);color:var(--accent);font-weight:700}
.gsel-opt.dis{opacity:.45;cursor:default}
/* Console overlay is always dark, regardless of the admin theme */
.devmode .gsel-btn{background:rgba(24,30,44,.62);border-color:rgba(255,255,255,.1);color:#dfe5f0}
.devmode .gsel-btn:hover{background:rgba(38,46,64,.72);border-color:rgba(255,255,255,.2)}
.devmode .gsel-menu{background:rgba(15,19,29,.86);border-color:rgba(255,255,255,.12);color:#e8ebf2;box-shadow:0 18px 44px rgba(0,0,0,.55)}
.devmode .gsel-opt{color:#e8ebf2}
.devmode .gsel-opt:hover{background:rgba(255,255,255,.07)}
.devmode .gsel-grp{color:#8a93a6}
/* selects anchored at the bottom (the Console composer) open UPWARD so the menu isn't off-screen */
.dev-composer .gsel-menu{top:auto;bottom:calc(100% + 6px)}

/* ============================ Canvas website editor V1 (Shopify-style 3-pane) ============================ */
/* Full-screen editor: a fixed overlay above the admin sidebar (z 40) — takes the whole viewport */
.ce{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;height:100vh;background:var(--surface-solid);overflow:hidden;--ce-left:400px}
body.ce-open header.glass{display:none}   /* hide the admin sidebar nav while the editor is full-screen */
/* macOS-style menu bar */
.ce-mb{position:relative;z-index:40;display:flex;align-items:center;flex:none;height:44px;padding:0 10px;background:var(--glass);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);border-bottom:1px solid var(--glass-border)}
.ce-mb-row{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.ce-mb-row[hidden]{display:none}
.ce-mb-csub{font-size:.72rem;color:var(--muted)}
.ce-body[hidden]{display:none}
.ce-console{flex:1;min-height:0;display:flex}
.ce-console[hidden]{display:none}
.ce-mb-back{flex:none;width:28px;height:28px;border:0;background:var(--glass-strong);border-radius:8px;cursor:pointer;font-size:1.25rem;line-height:1;color:var(--text);display:flex;align-items:center;justify-content:center}
.ce-mb-back:hover{background:var(--accent);color:#fff}
.ce-mb-brand{display:inline-flex;align-items:center;gap:7px;max-width:240px;padding-left:2px}
.ce-mb-ic{font-size:.95rem;flex:none}
.ce-mb-brand .ce-title{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:700}
.ce-mb-menus{display:flex;align-items:center;gap:1px;margin-left:8px}
.ce-mb-item{position:relative}
.ce-mb-btn{border:0;background:none;cursor:pointer;color:var(--text);font:inherit;font-size:.8rem;font-weight:600;padding:6px 10px;border-radius:7px;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.ce-mb-btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ce-mb-more{font-size:1rem;line-height:1;padding:5px 9px}
/* Console ⇄ Sections toggle: an icon button (console icon in the editor header, sections icon in the console header). */
.ce-mb-icbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);cursor:pointer}
.ce-mb-icbtn:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ce-mb-icbtn svg{width:17px;height:17px}
.ce-mb-spacer{flex:1;min-width:8px}
.ce-mb-tgl{flex:none;border:1px solid var(--glass-border);background:var(--glass-strong);border-radius:8px;cursor:pointer;font-size:.74rem;font-weight:600;color:var(--text);padding:5px 10px;white-space:nowrap}
.ce-mb-tgl.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700;border-color:transparent}
.ce-mb-act{flex:none;font-size:.74rem;padding:5px 10px}
.ce-mb-drop{position:absolute;top:calc(100% + 5px);left:0;min-width:204px;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:1300;display:flex;flex-direction:column;gap:1px}
.ce-mb-drop[hidden]{display:none}
.ce-mb-drop-r{left:auto;right:0}
.ce-mb-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px 11px;cursor:pointer;color:var(--text);font-size:.82rem;font-weight:600;white-space:nowrap}
.ce-mb-opt:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ce-mb-danger{color:#e0533a}
.ce-mb-sep{height:1px;background:var(--glass-border);margin:4px 6px}
/* Navigate dropdown = the site's pages. Current page shows as the button label. */
/* Centered in the header bar (the menu bar is position:relative). */
.ce-mb .ce-nav-item{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ce-mb .ce-nav-btn{background:var(--glass-strong);border:1px solid var(--glass-border)}
.ce-mb .ce-nav-btn:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ce-nav-drop{left:50%;transform:translateX(-50%)}
.ce-nav-btn .ce-nav-cur{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.ce-nav-drop{min-width:236px;max-height:min(70vh,460px);overflow-y:auto}
.ce-nav-new{color:var(--accent)}
.ce-nav-row{display:flex;align-items:center;border-radius:8px}
.ce-nav-row.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ce-nav-row .ce-nav-go{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ce-nav-x{flex:none;opacity:0;border:0;background:none;color:var(--muted);cursor:pointer;font-size:.72rem;line-height:1;width:24px;height:24px;border-radius:7px;margin-right:5px;display:flex;align-items:center;justify-content:center;transition:opacity .12s}
.ce-nav-row:hover .ce-nav-x{opacity:1}
.ce-nav-x:hover{background:#e0533a;color:#fff}
.ce-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.96rem}
.ce-pill{font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:999px;border:1px solid var(--glass-border);color:var(--muted);white-space:nowrap}
.ce-pill.live{color:#19c6d4;border-color:#19c6d4}
.ce-dev{display:inline-flex;gap:2px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:9px;padding:2px}
.ce-dev-b{border:0;background:none;cursor:pointer;font-size:.9rem;padding:4px 8px;border-radius:7px;color:var(--muted)}
.ce-dev-b.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700;border-color:transparent}
/* Sections / Console / Queue view switcher — same segmented-pill style as the device toggle */
.ce-vseg{display:inline-flex;gap:2px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:9px;padding:2px}
.ce-vseg-b{position:relative;border:0;background:none;cursor:pointer;padding:4px 9px;border-radius:7px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center}
.ce-vseg-b svg{width:16px;height:16px;display:block}
.ce-vseg-b:hover:not(.on){color:var(--text)}
.ce-vseg-b.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700;border-color:transparent}
.ce-vseg-b .ce-rev-badge{position:absolute;top:-3px;right:-3px}
.ce-body{flex:1;min-height:0;display:grid;grid-template-columns:var(--ce-left,400px) 1fr;position:relative}
/* Draggable split between the left panel and the preview — same width across sections/code/review */
.ce-resizer{position:absolute;top:0;bottom:0;left:var(--ce-left,400px);width:10px;margin-left:-5px;cursor:col-resize;z-index:60;display:flex;align-items:center;justify-content:center;touch-action:none}
.ce-resizer::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:transparent}
.ce-resizer:hover::before,body.ce-resizing .ce-resizer::before{background:var(--accent)}
.ce-resizer::after{content:"";width:4px;height:36px;border-radius:3px;background:var(--glass-border);transition:background .15s}
.ce-resizer:hover::after,body.ce-resizing .ce-resizer::after{background:var(--accent)}
body.ce-resizing{cursor:col-resize;user-select:none}
body.ce-resizing iframe{pointer-events:none}
.ce-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--glass)}
.ce-left{border-right:1px solid var(--glass-border);position:relative}
.ce-left-body{flex:1;min-height:0;display:flex;flex-direction:column}
/* Console view of the left panel: the live AGENT console (run status) replaces the sections
   content; the preview iframe on the right stays. .ce-coding swaps the left panel. The relocated
   .console-drawer is restyled to fill the panel (same approach as Dev Mode's .dev-left-console). */
.ce-left-console{display:none}
/* Only the sections content + tabs are replaced — the assistant textbox footer (#ceChatHost) and
   the top menu bar stay intact, so you can request a change in the box and watch the agent work above.
   SA1: the console keeps the SAME 300px width as the sections view (no widening). */
#ceRoot.ce-coding .ce-tabs,#ceRoot.ce-coding .ce-left-body{display:none}
#ceRoot.ce-coding .ce-left-console{display:flex;flex:1;min-height:0;flex-direction:column}
.ce-left-console .console-drawer{position:static;transform:none!important;width:100%;height:100%;max-width:none;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;min-height:0}
.ce-left-console .console-x{display:none}  /* close via the header Console⇄Sections toggle, not the drawer's own ✕ */
.ce-left-console .console-feedback{display:none}  /* the canvas assistant textbox footer is the input — no second box */
.ce-left-console .console-runs{padding:7px 11px;gap:5px;max-height:96px}
.ce-left-console .console-prog{padding:9px 12px}
.ce-left-console .console-log{padding:8px 12px 72px;font-size:.73rem;line-height:1.44}
.ce-left-console .console-runs:empty,.ce-left-console .console-prog:empty{display:none;border:0;padding:0;margin:0}
/* Code editor view of the left panel (SA2): the same Code-Review editor, canvas source. Header menu
   + assistant footer stay; this view gets extra width since you're editing code. */
.ce-left-code{display:none}
/* Code Review panel (the task system scoped to this canvas): list of pending changes + reviewer. */
.ce-left-review{display:none}
#ceRoot.ce-coding-review .ce-tabs,#ceRoot.ce-coding-review .ce-left-body{display:none}
#ceRoot.ce-coding-review .ce-left-review{display:flex;flex:1;min-height:0;flex-direction:column}
.ce-rev{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--menu-bg)}
.ce-rev-top{flex:none;padding:9px 12px;font-size:.8rem;font-weight:700;border-bottom:1px solid var(--glass-border)}
/* Tab switcher — one tab per pending change/file; switch instead of stacking the cards */
.ce-rev-tabs{flex:none;display:flex;gap:5px;padding:8px 10px 0;overflow-x:auto;border-bottom:1px solid var(--glass-border)}
.ce-rev-tabs[hidden]{display:none}
.ce-rev-tabs::-webkit-scrollbar{height:0}
.ce-rev-tab{flex:0 0 auto;max-width:170px;display:flex;flex-direction:column;gap:1px;text-align:left;padding:6px 10px;border:1px solid var(--glass-border);border-bottom:0;border-radius:9px 9px 0 0;background:transparent;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.ce-rev-tab:hover{background:var(--glass)}
.ce-rev-tab.on{background:var(--menu-bg);color:var(--text)}
.ce-rev-tab-f{font-size:.66rem;font-weight:700;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-rev-tab-t{font-size:.66rem;font-weight:500;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.ce-rev-list{flex:1;min-height:0;overflow:auto;padding:11px 12px 84px;display:flex;flex-direction:column;gap:12px}
.ce-rev-empty{padding:14px 4px;font-size:.8rem;line-height:1.55}
.ce-rev-card{position:relative;border:1px solid var(--glass-border);border-radius:12px;overflow:hidden;background:var(--menu-bg);display:flex;flex-direction:column}
/* SA1: the title + syntax bars are frosted liquid-glass panels floating over the diff, so the code shows through behind them */
.ce-rev-bars{position:absolute;top:0;left:0;right:0;z-index:4;background:color-mix(in srgb,var(--menu-bg) 38%,transparent);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);border-bottom:1px solid var(--glass-border);box-shadow:0 6px 16px -10px rgba(0,0,0,.55)}
.ce-rev-hd{display:flex;align-items:center;gap:8px;padding:9px 11px}
.ce-rev-ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:700}
.ce-rev-meta{flex:none;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ce-rev-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 11px}
.ce-rev-vb{font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.ce-rev-vb.ok{background:rgba(46,200,120,.18);color:#7ee0a6}
.ce-rev-vb.bad{background:rgba(229,72,77,.2);color:#ff9a9a}
.ce-rev-acts2{margin-left:auto;display:flex;gap:6px;flex:none}
.ce-rev-ib{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--muted);border-radius:8px;cursor:pointer}
.ce-rev-ib svg{width:15px;height:15px}
.ce-rev-ib[hidden]{display:none}
.ce-rev-file{flex:none;font-size:.7rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;background:var(--card);border:1px solid var(--glass-border);border-radius:6px;padding:2px 7px}
.ce-rev-ct{font-size:.64rem;color:var(--muted);min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.ce-rev-ib:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ce-rev-ib-approve:hover{background:rgba(46,200,120,.22);color:#7ee0a6;border-color:rgba(46,200,120,.4)}
.ce-rev-ib-decline:hover{background:rgba(229,72,77,.22);color:#ff9a9a;border-color:rgba(229,72,77,.4)}
.ce-rev-ib-rework:hover{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ce-rev-add{color:#2bb673;font-weight:700}
.ce-rev-del{color:#ff6b6b;font-weight:700}
.ce-rev-diff{position:relative;height:288px;display:flex}
/* push the code clear of the floating glass bars at rest; on scroll it slides up behind them */
.ce-rev-diff .cl-editor,.ce-rev-diff .cl-edit-hl-inner,.ce-rev-diff .cl-gutter-inner{padding-top:58px}
.ce-rev-diff .cl-edit-wrap{flex:1;min-height:0}
/* Element coloring (syntax editors) — ONE source of truth. ceMount tags the shared editor wrap with
   .cl-syntax, so the textarea text goes transparent and the colored highlight layer IS the visible font
   color (NOT a glow/halo behind opaque text), in EVERY editor that uses the component: canvas, Code
   Review queue, Dev mode, task page. Painting the highlight on top keeps glyphs crisp; will-change:auto
   keeps it off the GPU layer. (Replaces the old per-container .ce-rev-diff / .ce-lcon-editor rules.) */
.cl-syntax .cl-editor{color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--text)}
.cl-syntax .cl-eln{color:var(--text)}
.cl-syntax .cl-edit-hl{z-index:2;background:transparent;pointer-events:none}
.cl-syntax .cl-edit-hl-inner,.cl-syntax .cl-gutter-inner{will-change:auto}

/* SA2: Canvas Cortex — the brain button tooltip + the learned-preferences panel */
.ce-cortex-btn{position:relative}
.ce-cortex-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--menu-bg,#0e1118);color:#fff;font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:30;box-shadow:0 6px 18px -8px rgba(0,0,0,.6);border:1px solid var(--glass-border)}
.cortex-ov{position:fixed;inset:0;z-index:9300;background:rgba(8,10,16,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px}
.cortex-card{width:min(560px,94vw);max-height:84vh;overflow:auto;background:var(--glass-strong,var(--card,#161a22));border:1px solid var(--glass-border);border-radius:16px;padding:18px 20px 20px;box-shadow:0 24px 70px -20px rgba(0,0,0,.7)}
.cortex-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.cortex-head .lg-ic{flex:none;color:var(--accent);margin-top:2px}
.cortex-head-t{flex:1;min-width:0}.cortex-head-t h3{margin:0 0 2px;font-size:1.05rem}
.cortex-head-t .muted{font-size:.76rem;line-height:1.4}
.cortex-head .console-x{flex:none}
.cortex-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.cortex-stat{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border)}
.cortex-stat .lg-ic{width:.85em;height:.85em}
.cortex-stat.ok{color:#19a36f}.cortex-stat.bad{color:#e0533a}
.cortex-h{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:14px 0 7px}
.cortex-prefs{display:flex;flex-direction:column;gap:6px}
.cortex-pref{position:relative;padding:8px 11px 8px 26px;font-size:.8rem;line-height:1.45;border:1px solid var(--glass-border);border-radius:9px;background:var(--glass)}
.cortex-pref::before{content:"";position:absolute;left:11px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cortex-empty{font-size:.78rem;line-height:1.5;padding:10px 12px;border:1px dashed var(--glass-border);border-radius:9px}
.cortex-sigs{display:flex;flex-direction:column;gap:4px}
.cortex-sig{display:flex;align-items:flex-start;gap:8px;font-size:.74rem;line-height:1.4;padding:5px 4px;border-bottom:1px solid var(--glass-border)}
.cortex-sig-ic{flex:none;display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;margin-top:1px}
.cortex-sig-ic .lg-ic{width:.72em;height:.72em}
.cortex-sig-prompt .cortex-sig-ic{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.cortex-sig-approve .cortex-sig-ic{background:color-mix(in srgb,#19a36f 20%,transparent);color:#19a36f}
.cortex-sig-decline .cortex-sig-ic{background:color-mix(in srgb,#e0533a 20%,transparent);color:#e0533a}
.cortex-sig-d{flex:1;min-width:0}
/* Richpanel support-ticket timeline on the customer profile (customer left, agent right) */
.rp-sig{display:inline-flex;gap:6px;align-items:center;margin-left:8px;font-weight:500}
.rp-ticket{border:1px solid var(--glass-border);border-radius:9px;margin-bottom:8px;background:var(--glass)}
.rp-ticket>summary{cursor:pointer;padding:9px 11px;font-size:.8rem;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rp-ticket>summary::-webkit-details-marker{display:none}
.rp-ticket>summary:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.rp-ticket[open]>summary{border-bottom:1px solid var(--glass-border)}
.rp-thread{padding:11px;display:flex;flex-direction:column;gap:9px}
.rp-msg{max-width:88%;padding:8px 11px;border-radius:12px;font-size:.78rem;line-height:1.5}
.rp-msg-h{display:flex;gap:7px;align-items:baseline;margin-bottom:3px}
.rp-msg-h .muted{font-size:.66rem}
.rp-msg-b{white-space:pre-wrap;word-break:break-word}
.rp-in{align-self:flex-start;background:var(--glass-strong);border:1px solid var(--glass-border);border-bottom-left-radius:3px}
.rp-out{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-bottom-right-radius:3px}
.rpt-unlinked{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);border:1px dashed var(--glass-border);border-radius:5px;padding:1px 5px}
#ceReviewBtn{position:relative}
.ce-rev-badge{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#ff7a66;color:#1a1410;font-size:.58rem;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}
.ce-rev-badge[hidden]{display:none}
#ceRoot.ce-coding-code .ce-tabs,#ceRoot.ce-coding-code .ce-left-body{display:none}
#ceRoot.ce-coding-code .ce-left-code{display:flex;flex:1;min-height:0;flex-direction:column}
.ce-lcon{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--menu-bg)}
.ce-lcon-top{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--glass-border)}
.ce-lcon-file{font-size:.76rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ce-lcon-top .cvcon-ct{font-size:.68rem;color:var(--muted);margin-left:auto;white-space:nowrap}
.ce-lcon-searchwrap{flex:none;position:relative;display:inline-flex;align-items:center}
.ce-lcon-search{flex:none;width:120px;font-size:.76rem;padding:5px 28px 5px 9px}
.ce-lcon-searchic{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted);pointer-events:none}
.ce-lcon-editor{flex:1;min-width:0;min-height:0;position:relative;display:flex;overflow:hidden}
.ce-lcon-editor .cl-edit-wrap{flex:1;min-height:0}
.ce-lcon-actions{flex:none;display:flex;justify-content:flex-end;gap:8px;padding:8px 10px;border-top:1px solid var(--glass-border)}
#cvConSave.dirty{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.ce-lcon-clean{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--muted);border-radius:8px;cursor:pointer}
.ce-lcon-clean:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text)}
.ce-lcon-clean svg{width:16px;height:16px}
/* HTML element (syntax) coloring: the highlight layer becomes the VISIBLE text (the textarea text
   goes transparent), so the colors ARE the font color — not a colored halo behind opaque text. */
/* Element-coloring transparency is shared via .cl-syntax (defined above), applied by ceMount to every
   syntax editor — no per-container duplication. Canvas keeps only its layout rules (padding) below. */
/* room to scroll the last lines clear of the floating prompt (keep textarea + highlight in sync) */
.ce-lcon-editor .cl-editor,.ce-lcon-editor .cl-edit-hl-inner{padding-bottom:74px}
/* Drag image for a code snippet: black liquid-glass chip (replaces the browser's "?" placeholder). */
.ce-dragghost{position:fixed;top:-9999px;left:-9999px;display:inline-flex;align-items:center;gap:8px;max-width:300px;padding:8px 13px;border-radius:12px;background:rgba(14,17,24,.9);border:1px solid rgba(255,255,255,.14);color:#e9eef7;font:600 .78rem ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 14px 38px rgba(0,0,0,.55)}
.ce-dragghost svg{width:15px;height:15px;flex:none;color:#8fb6ff}
.ce-dragghost span{overflow:hidden;text-overflow:ellipsis}
.ce-lcon-editor .cl-edit-hl-inner,.ce-lcon-editor .cl-gutter-inner{will-change:auto}
.cl-edit-hl-inner .cl-tag{color:#ff7b9c}
.cl-edit-hl-inner .cl-att{color:#d9b06a}
.cl-edit-hl-inner .cl-str{color:#86d182}
.cl-edit-hl-inner .cl-com{color:#6b7585;font-style:italic}
.cl-edit-hl-inner .cl-pun{color:#8b93a7}
.cl-edit-hl-inner .cl-kw{color:#c792ea}   /* JS/CSS keywords & @rules — purple */
.cl-edit-hl-inner .cl-num{color:#f78c6c}  /* numbers, units, hex colors — orange */
.bill-est{color:var(--muted);font-weight:700;cursor:help;margin-left:4px}   /* Billing "estimated" (≈) marker */
/* Your Memory page (Claude-style per-user learned facts) */
.um-sec{margin-bottom:14px}
.um-cards{display:flex;flex-direction:column;gap:8px}
.um-card{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:10px 12px;border:1px solid var(--glass-border);border-radius:11px;background:var(--glass)}
.um-card.um-pinned{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.um-card-b{min-width:0;flex:1}
.um-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.um-card-t{font-size:.86rem;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.um-src{font-size:.6rem;text-transform:uppercase;letter-spacing:.03em}
.um-imp{display:inline-flex;gap:3px;align-items:center}
.um-dot{width:6px;height:6px;border-radius:50%;background:var(--glass-border)}
.um-dot.on{background:var(--accent)}
.um-card-tools{display:flex;gap:4px;flex:none}
.um-ib{padding:3px 9px;min-width:0;line-height:1.1}
.um-composer{margin-bottom:14px}
.um-form{display:flex;flex-direction:column;gap:10px}
.um-frow{display:flex;gap:10px;flex-wrap:wrap}
.um-f{display:flex;flex-direction:column;gap:4px;font-size:.74rem;color:var(--muted)}
.um-f-grow{flex:1;min-width:160px}
.um-f input,.um-f select,.um-f textarea{font-size:.85rem;color:var(--text)}
.um-f textarea{resize:vertical}
/* Import modal (Step 1 copy export prompt → Step 2 paste result). Built on the .gp-* glass-modal system. */
.um-imp-card{width:min(680px,96vw);max-height:92vh;overflow:auto;padding:24px 24px 18px}
.um-imp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.um-imp-warn{margin-top:12px;padding:9px 12px;border-radius:10px;font-size:.82rem;color:var(--text);background:color-mix(in srgb,var(--warn,#e0a23a) 14%,transparent);border:1px solid color-mix(in srgb,var(--warn,#e0a23a) 38%,transparent)}
.um-imp-x{flex:none;border:0;background:none;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:2px 5px;border-radius:8px}
.um-imp-x:hover{color:var(--text);background:var(--glass)}
.um-imp-step{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;margin-top:16px}
.um-imp-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;background:var(--glass);border:1px solid var(--glass-border);color:var(--text)}
.um-imp-step-h{font-weight:700;font-size:.95rem;color:var(--text);margin-bottom:9px;line-height:1.4}
.um-imp-promptbox{position:relative;background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;overflow:hidden}
.um-imp-prompt-scroll{max-height:180px;overflow:auto;padding:14px 15px}
.um-imp-promptbox pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.82rem;line-height:1.55;color:var(--muted)}
.um-imp-promptbox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--glass-strong))}
.um-imp-copy{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;z-index:1}
.um-imp-paste{width:100%;min-height:150px;resize:vertical;display:block}
#ceSecBlock{flex:1;min-height:0;display:flex;flex-direction:column}
#ceSecBlock[hidden]{display:none}
.ce-back-btn{margin:0 0 4px;border:0;background:none;color:var(--accent);font-weight:700;font-size:.76rem;cursor:pointer;padding:2px 0;text-align:left}
.ce-back-btn:hover{text-decoration:underline}
.ce-pane-h{padding:11px 13px;font-size:.74rem;font-weight:800;color:var(--text);border-bottom:1px solid var(--glass-border)}
.ce-sections{flex:1;overflow:auto;min-height:0;padding:6px}
.ce-sec-empty{padding:14px;font-size:.76rem;text-align:center}
.ce-sec{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer;color:var(--text);font-size:.78rem;font-weight:600}
.ce-sec:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ce-sec-ic{flex:none;opacity:.7}
.ce-sec-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-left-foot{flex:none;padding:10px 11px;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:8px}
.ce-tip{font-size:.7rem;line-height:1.45}
.ce-stage{position:relative;min-width:0;min-height:0;background:repeating-conic-gradient(color-mix(in srgb,var(--text) 4%,transparent) 0% 25%,transparent 0% 50%) 50%/22px 22px;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:18px}
.ce-frame-wrap{background:#fff;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.18);overflow:hidden;width:100%;height:100%;transition:width .2s ease,max-width .2s ease,opacity .18s ease}
.ce-frame-wrap[data-device="tablet"]{width:820px;max-width:100%;height:100%}
.ce-frame-wrap[data-device="mobile"]{width:390px;max-width:100%;height:100%}
.ce-frame-wrap #cvFrame{width:100%;height:100%;border:0;display:block;background:#fff}
.ce-tabs{display:flex;flex:none;border-bottom:1px solid var(--glass-border)}
.ce-tab{flex:1;border:0;background:none;cursor:pointer;padding:11px 8px;font-size:.78rem;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.ce-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.ce-insp{flex:1;overflow:auto;min-height:0;padding:14px 14px 18px;display:flex;flex-direction:column;gap:13px}
.ce-insp[hidden]{display:none}
.ce-f{display:flex;flex-direction:column;gap:5px;font-size:.74rem;font-weight:700;color:var(--text)}
.ce-f .inp,.ce-f textarea.inp{font-weight:500}
.ce-count{font-style:normal;font-weight:600;color:var(--muted);font-size:.66rem;float:right}
.ce-count.over{color:#e0533a}
.ce-seo-prev{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:11px 13px}
.ce-seo-prev-t{color:#1a0dab;font-size:.92rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
html[data-theme="dark"] .ce-seo-prev-t{color:#8ab4f8}
.ce-seo-prev-u{color:#0a7d33;font-size:.72rem;margin:2px 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme="dark"] .ce-seo-prev-u{color:#5bd17e}
.ce-seo-prev-d{color:var(--muted);font-size:.74rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ce-og{display:flex;align-items:center;gap:8px;position:relative}
.ce-og img{width:100%;max-height:120px;object-fit:cover;border-radius:9px;border:1px solid var(--glass-border)}
.ce-og .cv-thumb-x{position:absolute;top:6px;right:6px}
.ce-save{margin-top:4px}
.ce-simple-body{grid-template-columns:minmax(340px,430px) 1fr}
.ce-simple-stage{align-items:center}
.ce-simple-card{width:min(560px,92%);padding:28px;border:1px solid var(--glass-border);border-radius:18px;background:var(--glass);box-shadow:var(--shadow);text-align:center}
.ce-simple-card h2{margin:10px 0 6px;font-size:1.28rem}
.ce-simple-card p{margin:0 auto 18px;max-width:420px;line-height:1.55}
.ce-set-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid var(--glass-border);border-radius:13px;background:var(--glass-strong);padding:13px}
.ce-set-head h3{margin:2px 0 3px;font-size:1rem;line-height:1.15}
.ce-set-head p{margin:0;font-size:.72rem;line-height:1.45}
.ce-set-eyebrow{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.ce-set-type{flex:none;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:999px;padding:3px 8px}
.ce-set-subnav{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 2px}
.ce-set-sub{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text);border-radius:999px;padding:6px 9px;font:inherit;font-size:.68rem;font-weight:800;cursor:pointer;transition:.15s}
.ce-set-sub:hover,.ce-set-sub.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--glass-strong))}
.ce-set-sub span{display:grid;place-items:center;width:15px;height:15px;color:var(--accent)}
.ce-set-sub .lg-ic{width:14px;height:14px}
.ce-set-overgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.ce-set-over{border:1px solid var(--glass-border);border-radius:13px;background:var(--glass-strong);color:var(--text);padding:11px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:7px;min-height:122px;transition:.15s}
.ce-set-over:hover{border-color:var(--accent);transform:translateY(-1px);background:color-mix(in srgb,var(--accent) 8%,var(--glass-strong))}
.ce-set-over-danger{border-color:color-mix(in srgb,#e0533a 38%,var(--glass-border));background:color-mix(in srgb,#e0533a 8%,var(--glass-strong))}
.ce-set-over-danger:hover{border-color:#e0533a;background:color-mix(in srgb,#e0533a 12%,var(--glass-strong))}
.ce-set-over-ic{width:28px;height:28px;border-radius:9px;background:var(--glass);border:1px solid var(--glass-border);display:grid;place-items:center;color:var(--accent)}
.ce-set-over-danger .ce-set-over-ic{color:#e0533a}
.ce-set-over-ic .lg-ic{width:15px;height:15px}
.ce-set-over b{font-size:.82rem;line-height:1.25}
.ce-set-over small{font-size:.69rem;line-height:1.4;color:var(--muted);font-weight:600}
.ce-set-card{border:1px solid var(--glass-border);border-radius:13px;background:var(--glass-strong);padding:12px;display:flex;flex-direction:column;gap:10px}
.ce-set-h{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text)}
.ce-set-h b{font-size:.83rem}
.ce-set-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--glass);color:var(--accent);flex:none}
.ce-set-ic .lg-ic{width:14px;height:14px}
.ce-set-copy{font-size:.72rem;line-height:1.5;margin:0}
.ce-set-kv{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);padding:8px 10px;font-size:.72rem}
.ce-set-kv span{color:var(--muted);font-weight:700}
.ce-set-kv b{font-size:.74rem}
.ce-set-check{display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:700;color:var(--text);cursor:pointer}
.ce-set-check input{margin:0}
.ce-set-links{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ce-set-danger{border-color:color-mix(in srgb,#e0533a 34%,var(--glass-border));background:color-mix(in srgb,#e0533a 8%,var(--glass-strong))}
.ce-er-actions{display:grid;gap:8px}
.ce-er-actions .act{justify-content:center;width:100%}
@media(max-width:980px){.ce-body{grid-template-columns:1fr}.ce-left{display:none}.ce-resizer{display:none}}
/* ---- V2/V3 direct editor: edit toggle, save bar, draggable sections, add-section, block inspector, rich-text ---- */
.ce-edittgl{font-size:.74rem}
.ce-edittgl.on{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-weight:700;border-color:transparent}
.ce-save-bar{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;color:#e0883a;background:color-mix(in srgb,#e0883a 12%,transparent);border:1px solid color-mix(in srgb,#e0883a 35%,transparent);border-radius:9px;padding:3px 5px 3px 10px;white-space:nowrap}
.ce-save-bar[hidden]{display:none}
.ce-save-bar.saved{color:#2bb673;background:color-mix(in srgb,#2bb673 12%,transparent);border-color:color-mix(in srgb,#2bb673 35%,transparent);transition:opacity .3s}
.ce-save-bar.err{color:#e0484d;background:color-mix(in srgb,#e0484d 12%,transparent);border-color:color-mix(in srgb,#e0484d 35%,transparent)}
.ce-save-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.ce-save-dot.pending{animation:ceSavePulse 1.1s ease-in-out infinite}
@keyframes ceSavePulse{0%,100%{opacity:.4}50%{opacity:1}}
.ce-save-ok{font-size:.8rem;line-height:1;font-weight:800}
.ce-save-bar .cv-spin{width:12px;height:12px;border-width:2px;border-top-color:currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.ce-add-sec{float:right;border:0;background:var(--glass-strong);color:var(--accent);width:22px;height:22px;border-radius:7px;cursor:pointer;font-size:.95rem;line-height:1;font-weight:800}
.ce-add-sec:hover{background:var(--accent);color:#fff}
.ce-pane-h{position:relative}
.ce-add-menu{position:absolute;top:38px;right:8px;z-index:var(--z-dropdown);background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:170px;max-width:calc(100vw - 16px);max-height:min(300px,calc(100vh - 16px));overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:1px}
.ce-add-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--text);font-size:.8rem;font-weight:600}
.ce-add-opt:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* Empty-section picker (liquid-glass dropdown that opens where you click an empty section) */
.ce-secpick{position:fixed;z-index:3002;width:232px;max-height:min(72vh,440px);overflow:auto;background:var(--glass);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--glass-border);border-radius:13px;box-shadow:var(--shadow);padding:6px}
.ce-secpick[hidden]{display:none}
.ce-secpick-h{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 9px 5px}
.ce-secpick-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;color:var(--text);font:inherit;font-size:.85rem;font-weight:600;padding:8px 9px;border-radius:8px;cursor:pointer}
.ce-secpick-opt:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.ce-secpick-ic{font-size:1rem;width:20px;text-align:center;flex:none}
.ce-sec{user-select:none}
.ce-sec.on{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.ce-sec[draggable]{cursor:grab}
.ce-sec.ce-sec-dragover{box-shadow:inset 0 2px 0 var(--accent)}
.ce-sec-grip{flex:none;opacity:.35;font-size:.7rem;letter-spacing:-2px;cursor:grab}
.ce-sec:hover .ce-sec-grip{opacity:.7}
.ce-blk-h{font-size:.86rem;font-weight:700;padding-bottom:2px}
.ce-blk-acts{display:flex;gap:6px}
.ce-blk-acts .act{flex:1;padding:6px 0;font-size:.82rem}
.ce-mf,.ce-blk-items{border-top:1px solid var(--glass-border);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.ce-mf-h{font-size:.74rem;font-weight:800}.ce-mf-h .muted{font-weight:500}
.ce-mf-row{display:flex;align-items:center;gap:5px}
.ce-mf-row .ce-mf-k{flex:0 0 38%;font-size:.74rem}
.ce-mf-row .ce-mf-v{flex:1;font-size:.74rem}
.ce-mf-row .cv-thumb-x{position:static;flex:none}
.ce-mf-tip{font-size:.68rem;line-height:1.4}.ce-mf-tip code{font-size:.66rem;background:var(--glass-strong);padding:1px 4px;border-radius:4px}
.ce-rt{position:fixed;z-index:3000;display:flex;gap:1px;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:10px;box-shadow:var(--shadow);padding:3px}
.ce-rt[hidden]{display:none}
.ce-rt-b{min-width:26px;height:26px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--text);font-size:.8rem;line-height:1;padding:0 5px}
.ce-rt-b:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
/* ---- Floating section toolbar (under the selected block) + voice-change bubble ---- */
.ce-secbar{position:fixed;z-index:3000;display:flex;gap:2px;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:11px;box-shadow:var(--shadow);padding:4px}
.ce-secbar[hidden]{display:none}
.ce-sb-b{width:32px;height:32px;display:grid;place-items:center;border:0;background:none;border-radius:8px;cursor:pointer;color:var(--text);padding:0}
.ce-sb-b svg{width:17px;height:17px;display:block}
.ce-sb-b:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.ce-sb-del:hover{background:rgba(229,72,77,.18);color:#ff6b6b}
.ce-sb-mic.on{background:#e0484d;color:#fff;animation:ceSbPulse 1.3s ease-in-out infinite}
@keyframes ceSbPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,72,77,.5)}50%{box-shadow:0 0 0 5px rgba(224,72,77,0)}}
/* Voice prompt = a liquid-glass "Listening…" message bubble (no text field), ✕ on the right to cancel */
.ce-secmic{position:fixed;z-index:3001;max-width:min(340px,92vw);display:flex;align-items:center;gap:10px;background:var(--glass);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--glass-border);border-radius:14px;box-shadow:var(--shadow);padding:10px 12px}
.ce-secmic[hidden]{display:none}
.ce-secmic-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.ce-secmic-dot.rec{background:#e0484d;animation:ceSbPulse 1.1s ease-in-out infinite}
.ce-secmic-dot.warn{background:#e0a13a;animation:none}
.ce-secmic-body{min-width:0;flex:1}
.ce-secmic-title{font-size:.82rem;font-weight:700;color:var(--text)}
.ce-secmic-title .muted{font-weight:500}
.ce-secmic-heard{font-size:.8rem;color:var(--muted);margin-top:2px;max-height:46px;overflow:auto;word-break:break-word}
.ce-secmic-heard:empty{display:none}
.ce-secmic-x{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.95rem;line-height:1;padding:5px;border-radius:7px}
.ce-secmic-x:hover{color:var(--text);background:var(--glass-strong)}
/* ---- S1/S2 self-improvement tab ---- */
.ce-tab{padding:11px 5px;font-size:.74rem}
.ce-imp-set{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:11px;padding:11px}
.ce-imp-toggle{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-size:.78rem}
.ce-imp-toggle input{margin-top:2px;flex:none}.ce-imp-toggle i{font-style:normal;font-size:.7rem;line-height:1.4}
.ce-imp-acts{display:flex;gap:7px}
.ce-imp-ladder{display:flex;flex-wrap:wrap;gap:5px}
.ce-imp-cat{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:700;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:999px;padding:3px 8px;color:var(--muted)}
.ce-imp-cat b{font-weight:700;color:var(--text)}
.ce-imp-cat.auto{border-color:#19c6d4;color:#19c6d4}.ce-imp-cat.auto b{color:#19c6d4}
.ce-imp-badge{color:#19c6d4;font-weight:800}
.ce-imp-prog{opacity:.7}
.ce-imp-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px}
.ce-imp-n{background:var(--accent);color:#fff;border-radius:999px;font-size:.64rem;padding:1px 6px}
.ce-imp-list{display:flex;flex-direction:column;gap:9px}
.ce-imp-empty{font-size:.76rem;padding:8px 0}
.ce-imp-card{border:1px solid var(--glass-border);border-radius:11px;padding:11px;background:var(--glass-strong);display:flex;flex-direction:column;gap:6px}
.ce-imp-card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ce-imp-tag{font-size:.64rem;font-weight:700;color:var(--muted)}
.ce-imp-impact{font-size:.6rem;font-weight:800;text-transform:uppercase;border-radius:999px;padding:1px 6px;margin-left:auto}
.ce-imp-hi{background:color-mix(in srgb,#e0533a 16%,transparent);color:#e0533a}
.ce-imp-md{background:color-mix(in srgb,#e0883a 16%,transparent);color:#cf7a2c}
.ce-imp-lo{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.ce-imp-fix{font-size:.6rem;font-weight:700;color:#19a36f}.ce-imp-ai{font-size:.6rem;font-weight:700;color:#7c5cff}
.ce-imp-title{font-size:.84rem;font-weight:700;line-height:1.3}
.ce-imp-detail{font-size:.73rem;line-height:1.45}
.ce-imp-card-acts{display:flex;gap:6px;justify-content:flex-end}
.ce-imp-card-acts .act{padding:5px 11px;font-size:.74rem}
.ce-imp-hist{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--glass-border);font-size:.74rem}
.ce-imp-hist-l{display:flex;align-items:center;gap:6px;min-width:0}
.ce-imp-hist-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ce-imp-hist-r{display:flex;align-items:center;gap:6px;flex:none}
.ce-imp-st{font-size:.62rem;font-weight:800;border-radius:999px;padding:1px 7px;white-space:nowrap}
.ce-imp-st.ok{background:color-mix(in srgb,#19a36f 16%,transparent);color:#19a36f}
.ce-imp-st.auto{background:color-mix(in srgb,#19c6d4 16%,transparent);color:#13a4b0}
.ce-imp-st.rev{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.ce-imp-st.dis{color:var(--muted)}.ce-imp-st.err{background:color-mix(in srgb,#e0533a 16%,transparent);color:#e0533a}
.ce-imp-when{font-size:.66rem}
.ce-imp-revert{padding:3px 8px;font-size:.68rem}
.ce-imp-tag-sm,.ce-imp-tag-sm{flex:none}
.ce-imp-st.rev2{background:color-mix(in srgb,#e0883a 18%,transparent);color:#cf7a2c}
/* S3: expandable improve cards (What/Where/Why + the syntax/security/testing agent checks) */
.ce-imp-note{font-size:.7rem;line-height:1.5;border:1px solid var(--glass-border);border-radius:9px;padding:8px 10px;background:var(--glass)}
.ce-imp-note .lg-ic{vertical-align:-.16em;margin-right:2px}
.ce-imp-card{padding:0;gap:0;overflow:hidden;transition:border-color .15s}
.ce-imp-card.open{border-color:color-mix(in srgb,var(--accent) 45%,var(--glass-border))}
.ce-imp-head{display:flex;align-items:center;gap:7px;width:100%;padding:10px 11px;background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.ce-imp-head:hover{background:var(--glass)}
.ce-imp-cv{flex:none;color:var(--muted);transition:transform .18s}
.ce-imp-card.open .ce-imp-cv{transform:rotate(180deg)}
.ce-imp-head .ce-imp-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.ce-imp-chips{display:flex;align-items:center;gap:5px;flex:none}
.ce-imp-head .ce-imp-impact{margin-left:0}
.ce-imp-chk{display:inline-flex;width:15px;height:15px;border-radius:50%;align-items:center;justify-content:center}
.ce-imp-chk .lg-ic{width:.7em;height:.7em}
.ce-imp-chk.ok{background:color-mix(in srgb,#19a36f 20%,transparent);color:#19a36f}
.ce-imp-chk.bad{background:color-mix(in srgb,#e0533a 20%,transparent);color:#e0533a}
.ce-imp-chk.pend{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}
.ce-imp-body{display:none;flex-direction:column;gap:9px;padding:0 11px 11px;border-top:1px solid var(--glass-border)}
.ce-imp-card.open .ce-imp-body{display:flex}
.ce-imp-wwh{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.ce-imp-wwh-row{display:flex;gap:8px;font-size:.74rem;line-height:1.45}
.ce-imp-wwh-k{flex:none;width:46px;font-weight:800;text-transform:uppercase;font-size:.6rem;letter-spacing:.04em;color:var(--muted);padding-top:2px}
.ce-imp-wwh-v{flex:1;min-width:0}
.ce-imp-diff{font-size:.66rem;white-space:nowrap}
.ce-imp-checks{display:flex;flex-direction:column;gap:5px;border:1px solid var(--glass-border);border-radius:9px;padding:7px 9px;background:var(--glass)}
.ce-imp-check{display:flex;align-items:flex-start;gap:7px;font-size:.71rem;line-height:1.4}
.ce-imp-check-ic{flex:none;display:inline-flex;width:16px;height:16px;border-radius:50%;align-items:center;justify-content:center;margin-top:1px}
.ce-imp-check-ic .lg-ic{width:.72em;height:.72em}
.ce-imp-check.ok .ce-imp-check-ic{background:color-mix(in srgb,#19a36f 20%,transparent);color:#19a36f}
.ce-imp-check.bad .ce-imp-check-ic{background:color-mix(in srgb,#e0533a 20%,transparent);color:#e0533a}
.ce-imp-check.pend .ce-imp-check-ic{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}
.ce-imp-check-role{flex:none;width:58px;font-weight:700;text-transform:capitalize}
.ce-imp-check-sum{flex:1;min-width:0;color:var(--muted)}
.ce-imp-checkhint{font-size:.68rem;line-height:1.4}.ce-imp-checkhint .lg-ic{vertical-align:-.15em}
.ce-imp-cardnote{font-size:.69rem;line-height:1.4}

/* Console: clean empty state — no "No active runs" text by the title, no dangling sub-section borders */
.dev-runs-slot .console-empty{display:none}
.dev-left-console .console-runs:empty,.dev-left-console .console-prog:empty,.dev-left-console .console-feedback:empty{display:none;border:0;padding:0;margin:0}
.dev-left-console .console-log:empty{border:0}
.dev-left-console .console-log .console-empty{display:none}
/* composer: the model picker (swapped to the right of the Ask/Bypass dropdown) sits on the right */
.dev-comp-bar .dev-comp-ctx{margin-left:auto}
.dev-perm-dd .dev-gd-btn{padding:6px 11px}

/* ===== SA1: remove the blue focus GLOW on all text boxes (admin, dev console, agent console, assistant bar) — keep a subtle border only ===== */
input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,select:focus,select:focus-visible,
.inp:focus,.ai-input-wrap:focus-within,.ig-searchbar:focus-within,.tbar-field:focus-within,.crm-rte:focus-within,
.gp-input:focus,.qf-input:focus,.ap-search:focus,.gsel-btn:focus,.gsel-btn:focus-visible,.dev-gd-btn:focus,
.dev-comp-row:focus-within,.pe-field input:focus,.pe-field textarea:focus,.pe-field select:focus,
.ag-wiz-body input:focus,.ag-wiz-body textarea:focus,.ag-wiz-body select:focus,
.conn-form input:focus,.conn-form select:focus,.conn-form textarea:focus,
.conn-form input:focus-visible,.conn-form select:focus-visible,.conn-form textarea:focus-visible{box-shadow:none!important}

/* ===== SA2: desktop preview fills the editor stage edge-to-edge — no checkered margin/spacing ===== */
.ce-stage:has(.ce-frame-wrap[data-device="desktop"]){padding:0;background:none}
.ce-frame-wrap[data-device="desktop"]{border-radius:0;box-shadow:none}

/* ===== SA3: Console composer — Ask/Bypass + LLM model as plain text dropdowns (no fill, just text + arrow) ===== */
.dev-comp-bar .dev-perm-dd .dev-gd-btn{background:none;border:0;border-radius:0;padding:5px 3px;color:#cdd4e2;font-size:.74rem;font-weight:600}
.dev-comp-bar .dev-perm-dd .dev-gd-btn:hover{background:none;color:#fff}
/* Permissions pinned hard-left (aligned under the ＋ file button); its menu opens UPWARD (it sits at the screen bottom) */
.dev-comp-bar .dev-perm-dd{margin-left:0;margin-right:auto}
.dev-comp-bar .dev-perm-dd .dev-gd-menu{top:auto;bottom:calc(100% + 6px);left:0;right:auto}
.dev-comp-model{flex:none;width:auto;field-sizing:content;max-width:160px;background:none;border:0;border-radius:0;color:#cdd4e2;font-size:.74rem;font-weight:600;padding:5px 15px 5px 3px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cdd4e2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 1px center;background-size:11px}
.dev-comp-model option{background:#11151e;color:#cdd4e2}

/* ===== Skills manager (upload expertise packs + attach to agents) ===== */
.skills-ov{display:none;position:fixed;inset:0;z-index:1400;background:rgba(8,12,20,.5);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.skills-modal{width:min(960px,100%);max-height:calc(100vh - 80px);display:flex;flex-direction:column;background:var(--surface-solid);border:1px solid var(--glass-border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.skills-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--glass-border);flex:none}
.skills-body{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.skills-sec-h{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:6px}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.skill-card{border:1px solid var(--glass-border);border-radius:14px;padding:13px;background:var(--glass-strong);display:flex;flex-direction:column;gap:8px}
.skill-card-top{display:flex;align-items:flex-start;gap:9px}
.skill-ic{font-size:1.4rem;line-height:1;flex:none}
.skill-name{font-weight:700;font-size:.92rem;line-height:1.2}
.skill-cat{font-size:.68rem;color:var(--muted);font-weight:600;margin-top:2px}
.skill-badge{flex:none;font-size:.6rem;font-weight:800;text-transform:uppercase;border-radius:999px;padding:2px 7px}
.skill-badge.def{background:color-mix(in srgb,#16b3c0 18%,transparent);color:#13a4b0}
.skill-badge.cust{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.skill-desc{font-size:.78rem;line-height:1.45;min-height:2.2em}
.skill-attached{display:flex;flex-wrap:wrap;gap:5px;min-height:24px}
.skill-chip{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-radius:999px;font-size:.7rem;font-weight:600;padding:2px 4px 2px 9px}
.skill-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:.78rem;line-height:1;padding:0;opacity:.7}
.skill-chip button:hover{opacity:1}
.skill-card-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--glass-border);padding-top:9px}
.skill-card-acts .act{padding:5px 9px;font-size:.73rem}
.skill-attach{max-width:175px;font-size:.72rem;padding:5px 8px}
.skills-form{gap:12px;max-width:680px}
.skill-body-view{white-space:pre-wrap;word-break:break-word;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:12px;padding:14px;color:var(--text);margin:0}

/* ===== Assistant bar = ONE uniform BLACK liquid-glass surface; the input is transparent and fills the
   whole bar (no inner field, no margin around it) for a fluid liquid-glass feel ===== */
.ai-bar{background:rgba(16,19,27,.72);border-color:rgba(255,255,255,.1);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
.ai-bar-row{padding:0;gap:0}
.ai-input-wrap{background:transparent;border:0;border-radius:0;box-shadow:none}
.ai-input-wrap:focus-within{border:0;box-shadow:none}
.ai-bar-row input#aiChatText{padding:16px 20px;color:rgba(238,242,248,.55)}    /* typed text = same gray as the placeholder */
.ai-bar-row input#aiChatText::placeholder{color:rgba(238,242,248,.55)}
.ai-bar .ai-conv-title,.ai-bar .ai-log{color:#eef2f8}
.ai-bar .ai-conv-x{color:rgba(238,242,248,.7)}
.ai-bar .ai-conv-x:hover{background:rgba(255,255,255,.08);color:#fff}
.ai-bar-foot .gsel-btn{color:rgba(238,242,248,.72)}
.ai-bar-foot .gsel:first-child .gsel-btn{color:#7fd4dd}
/* Composer footer — the agent + language-model pickers, styled as a toolbar that's part of the prompt
   card (the canvas editor hides these; here we keep them as rounded pills under the input). */
.ai-bar-foot{border-top:1px solid rgba(255,255,255,.07);margin-top:1px;padding:7px 11px 9px;gap:7px}
.ai-bar-foot .gsel-btn{padding:4px 10px;border-radius:9px;background:rgba(255,255,255,.06);color:rgba(238,242,248,.82);font-size:.73rem;transition:background .15s,color .15s}
.ai-bar-foot .gsel-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.ai-bar-foot .gsel-caret{opacity:.55}
.ai-bar-foot .gsel:first-child .gsel-btn{color:#7fd4dd;background:color-mix(in srgb,#7fd4dd 15%,transparent)}
.ai-bar-foot .gsel:first-child .gsel-btn:hover{background:color-mix(in srgb,#7fd4dd 24%,transparent);color:#bff0f5}
/* the dev-console chatbot keeps its own dark treatment (it lives in the dark Console workspace) */
.dev-left-chat .ai-bar{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.dev-left-chat .ai-bar-row input#aiChatText::placeholder{color:#5b6478}

/* ===== SA2: per-canvas Console — code editor opens UNDER the menu bar; the header switches to a console menu ===== */
.cvcon{flex:1;min-height:0;display:flex;flex-direction:column;min-width:0;background:var(--surface-solid);color:var(--text)}
/* console header lives in the menu bar (#ceMbConsole): search + count + actions */
.ce-mb-console .cvcon-search{max-width:220px;font-size:.78rem;padding:5px 10px}
.ce-mb-console .cvcon-ct{font-size:.7rem;color:var(--muted);min-width:52px}
.ce-mb-console .act{font-size:.74rem;padding:5px 11px}
.ce-mb-console .act-primary.dirty{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.cvcon-body{flex:1;min-height:0;display:grid;grid-template-columns:210px 1fr;grid-template-rows:minmax(0,1fr)}
.cvcon-files{border-right:1px solid var(--glass-border);background:var(--glass);display:flex;flex-direction:column;padding:8px}
.cvcon-files-h{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 8px}
.cvcon-file{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;background:none;border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--text);font-size:.8rem;font-weight:600}
.cvcon-file.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.cvcon-file-sub{font-size:.64rem;color:var(--muted);font-weight:500}
.cvcon-editor{min-width:0;min-height:0;position:relative;display:flex;overflow:hidden}
.cvcon-editor .cl-edit-wrap{flex:1;min-height:0}

/* ===== Canvas editor: BLACK liquid-glass workspace (was navy) — scope the theme vars to .ce so the
   whole editor (header, left panel, tabs, inspector, console) is one cohesive black glass, any theme ===== */
.ce{
  --surface-solid:rgba(16,19,27,.97);
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.085);
  --glass-border:rgba(255,255,255,.09);
  --text:#e9eef7;
  --muted:#9aa6bb;
  --menu-bg:#11141c;
  --shadow:0 10px 36px rgba(0,0,0,.55);
  color:var(--text);
}
.ce-mb{background:rgba(20,24,33,.5)}
.ce .ce-seo-prev-t{color:#8ab4f8}
.ce .ce-seo-prev-u{color:#5bd17e}
.ce .inp{background:var(--glass-strong);border-color:var(--glass-border);color:var(--text)}
/* the assistant textbox now lives at the bottom of the left panel (relocated from floating center) */
/* The prompt FLOATS over the bottom of the panel (no container background/border), so the code shows
   through, blurred, behind the liquid-glass field. pointer-events pass through the empty area. */
.ce-left-chat{position:absolute;left:0;right:0;bottom:0;z-index:5;flex:none;border-top:0;background:transparent;padding:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.ce-left-chat #aiBar,.ce-left-chat .cv-thumbs{pointer-events:auto}
/* In the code editor, start the prompt after the line-number gutter so it aligns with the code. */
#ceRoot.ce-coding-code .ce-left-chat{left:48px}
.ce-left-chat .cv-thumbs:empty{display:none}
#aiBar.ai-incanvas{position:static;left:auto;right:auto;bottom:auto;transform:none;width:100%;max-width:none;margin:0;z-index:auto;animation:none;box-shadow:none;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* one single liquid-glass surface holds the +, the input AND the mic — blur lets the code show behind */
#aiBar.ai-incanvas .ai-input-wrap{background:rgba(18,22,30,.5);border:1px solid rgba(255,255,255,.12);border-radius:14px;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);box-shadow:0 14px 34px rgba(0,0,0,.4)}
#aiBar.ai-incanvas .ai-bar-row input#aiChatText{padding:13px 8px}
/* ＋ attach-image icon at the bottom-left inside the textbox (replaces the separate Add image button) */
.ai-file{flex:none;border:0;background:none;color:rgba(238,242,248,.6);cursor:pointer;font-size:1.05rem;line-height:1;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;align-self:center;margin:0 0 0 8px}
.ai-file:hover{background:none;color:#fff}
.ai-file[hidden]{display:none}
.ai-input-wrap .ai-file:not([hidden]) ~ input#aiChatText{padding-left:4px}

/* mic (voice) icon on the right of the assistant input — liquid-glass line icon, not emoji */
.ai-mic{flex:none;border:0;background:none;color:rgba(238,242,248,.55);cursor:pointer;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;align-self:center;margin:0 8px 0 2px}
.ai-mic svg{width:18px;height:18px;display:block}
.ai-mic:hover{color:#fff;background:none}
.ai-mic.on{color:#ff7a66;background:none;animation:devMicPulse 1.1s infinite}
.ai-mic[hidden]{display:none}
/* Code-editor controls living in the assistant bar: undo icon (next to mic) + a Save button that
   only appears when an auto-save failed (attention colour). */
.ai-codesave{flex:none;align-self:center;margin:0 10px 0 6px;border:0;border-radius:9px;background:#ff7a66;color:#1a1410;font-weight:800;font-size:.76rem;padding:7px 13px;cursor:pointer;white-space:nowrap}
.ai-codesave:hover{filter:brightness(1.06)}
.ai-codesave:disabled{opacity:.6;cursor:default}
.ai-codesave[hidden]{display:none}
/* device-preview toggle: liquid-glass line icons instead of emoji */
.ce-dev-b svg{width:16px;height:16px;display:block}
.ce-dev-b{display:inline-flex;align-items:center;justify-content:center}

/* ===== Agent CORTEX panel (18-cortex.js) — autonomy, guardrails, learning ===== */
.cx-lifecycle{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 4px}
.cx-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:8px}
@media(max-width:980px){.cx-cols{grid-template-columns:1fr}}
.cx-card-h{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:6px;margin-bottom:7px}
.cx-card-h svg{width:14px;height:14px}
.cx-group{margin-bottom:12px}
.cx-group-h{font-size:.78rem;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px;margin:0 0 5px;padding-bottom:4px;border-bottom:1px solid var(--glass-border)}
.cx-group-h svg{width:14px;height:14px;opacity:.8}
.cx-set{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0;font-size:.84rem}
.cx-set-l{display:flex;flex-direction:column;line-height:1.2}
.cx-set-l .cx-bound{font-size:.64rem}
.cx-set-c{flex-shrink:0}
.cx-num{width:104px;padding:4px 8px;font-size:.82rem;text-align:right}
.cx-sel{padding:4px 8px;font-size:.82rem}
.cx-locked{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:8px;padding:2px 9px}
.cx-locked svg{width:13px;height:13px;opacity:.7}
.cx-why{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:9px 11px;font-size:.82rem}
.cx-why-grp{margin-bottom:8px}.cx-why-grp:last-child{margin-bottom:0}
.cx-why-grp b{display:flex;align-items:center;gap:5px;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:3px}
.cx-why-grp b svg{width:13px;height:13px}
.cx-why-row{padding:1px 0;line-height:1.35}
.cx-ep,.cx-sig{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--glass-border);font-size:.82rem}
.cx-ep:last-child,.cx-sig:last-child{border-bottom:none}
.cx-ep-req{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-ep-meta,.cx-sig-meta{font-size:.7rem;flex-shrink:0}
.cx-sig b{font-size:.8rem}
.cx-pos{color:#27c093;display:inline-flex}.cx-pos svg{width:14px;height:14px}
.cx-neg{color:#ff6b6b;display:inline-flex}.cx-neg svg{width:14px;height:14px}
/* Insights — metrics scoreboard + divergence alarm + golden gate */
.cx-insights{margin:4px 0 10px}
.cx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
@media(max-width:760px){.cx-tiles{grid-template-columns:repeat(2,1fr)}}
.cx-tile{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:10px;padding:8px 10px}
.cx-tile-v{font-size:1.15rem;font-weight:800;color:var(--text);line-height:1.1}
.cx-tile-l{font-size:.64rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:2px;font-weight:700}
.cx-tile-dir{color:#27c093;font-weight:800}
.cx-alarm,.cx-golden{display:flex;align-items:center;gap:7px;border-radius:10px;padding:8px 11px;font-size:.82rem;margin-top:8px}
.cx-alarm svg,.cx-golden svg{width:15px;height:15px;flex-shrink:0}
.cx-alarm-ok{background:rgba(39,192,147,.12);border:1px solid rgba(39,192,147,.3);color:#1f9b76}
.cx-alarm-on{background:rgba(255,107,107,.14);border:1px solid rgba(255,107,107,.4);color:#e64545}
.cx-golden-ok{background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--muted)}
.cx-golden-bad{background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.35);color:#e64545}
/* Unified brain panel — merged context / memory / learning / recommendations */
.prof-cols-single{grid-template-columns:1fr !important}
.cx-head-r{display:flex;align-items:center;gap:10px}
.cx-h-act{margin-left:auto}
.cx-sec{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:12px;padding:11px 12px;margin-bottom:12px}
.cx-sec .cx-card-h{margin-bottom:6px}
.cx-card-h .cx-h-act{font-weight:600;text-transform:none;letter-spacing:0}
.cx-ctx-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;font-size:.72rem}
.cx-ctx-act{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mind-lim{width:84px;padding:3px 6px;font-size:.76rem}
.cx-tail-item{font-size:.76rem;padding:3px 0;border-top:1px solid var(--glass-border);line-height:1.35}
.cx-tail-role{display:inline-block;font-size:.6rem;font-weight:800;text-transform:uppercase;color:var(--muted);min-width:58px}
.cx-fold{margin-top:7px}
.cx-fold>summary{cursor:pointer;font-size:.78rem;font-weight:700;color:var(--muted);padding:3px 0}
.cx-fold-big{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:10px 12px;margin-top:6px}
.cx-fold-big>summary{font-size:.82rem;color:var(--text);display:flex;align-items:center;gap:7px}
.cx-fold-big>summary svg{width:14px;height:14px}
.cx-settings-grid{columns:2;column-gap:18px;margin-top:8px}
@media(max-width:760px){.cx-settings-grid{columns:1}}
.cx-settings-grid .cx-group{break-inside:avoid;margin-bottom:12px}
.cx-memgrp{margin-bottom:9px}
.cx-memgrp-h{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:3px}
.cx-memgrp-h svg{width:12px;height:12px}
.cx-mem{display:flex;gap:7px;align-items:flex-start;padding:4px 0;font-size:.82rem;border-bottom:1px solid var(--glass-border)}
.cx-mem:last-child{border-bottom:none}
.cx-mem.pinned{background:rgba(160,107,255,.06);border-radius:6px;padding:4px 6px}
.cx-imp{font-size:.5rem;letter-spacing:-1px;color:#a06bff;flex-shrink:0;margin-top:3px;white-space:nowrap}
.cx-mem-body{flex:1;min-width:0;line-height:1.4}
.cx-mem-src{font-size:.68rem}
.cx-mem-act{display:flex;gap:3px;flex-shrink:0}
.cx-addmem{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px;padding:9px;background:var(--glass);border:1px solid var(--glass-border);border-radius:9px}
.cx-addmem-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.cx-learn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0}
.cx-learn-l{display:flex;align-items:center;gap:8px;font-size:.84rem}
.cx-learn-r{display:flex;gap:6px;flex-shrink:0}
.cx-kb{font-size:.78rem;line-height:1.5;max-height:260px;overflow:auto;padding:6px 0}
.cx-src{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:6px 0}
.cx-src .inp{flex:1;min-width:140px;font-size:.78rem;padding:4px 8px}
.cx-run{font-size:.76rem;padding:3px 0;border-top:1px solid var(--glass-border);line-height:1.35}
.cx-rec{background:var(--glass);border:1px solid var(--glass-border);border-radius:9px;padding:8px 10px;margin-bottom:7px}
.cx-rec-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cx-rec-meta{margin-left:auto;font-size:.7rem;color:var(--muted);display:inline-flex;align-items:center}
.cx-rec-meta svg{width:11px;height:11px}
.cx-rec-why{font-size:.8rem;color:var(--muted);margin:4px 0;line-height:1.4}
.cx-rec-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cx-rec-act{display:flex;gap:5px;margin-left:auto}
/* Task page — review queue + live preview of the built feature */
.tp-review .prof-sec-h .act{padding:5px 12px;font-size:.8rem}
.tp-review-grid{display:grid;grid-template-columns:minmax(220px,36%) 1fr;gap:14px;align-items:stretch;margin-top:8px}
@media(max-width:820px){.tp-review-grid{grid-template-columns:1fr}}
.tp-queue{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto}
.tp-qrow{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;padding:9px 11px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);cursor:pointer;transition:.15s}
.tp-qrow:hover{background:var(--glass-strong)}
.tp-qrow.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:var(--glass-strong)}
.tp-qrow-main{min-width:0;flex:1}
.tp-qrow-path{font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-qrow-path svg{width:13px;height:13px;flex-shrink:0;opacity:.8}
.tp-qrow-sum{font-size:.76rem;margin:3px 0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-qrow-meta{display:flex;align-items:center;gap:6px;font-size:.72rem}
.tp-qrow-act{display:flex;gap:4px;flex-shrink:0}
.tp-preview{display:flex;flex-direction:column;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass);overflow:hidden;min-height:420px}
.tp-pv-empty{display:flex;align-items:center;justify-content:center;gap:7px;height:100%;min-height:420px;font-size:.86rem}
.tp-pv-empty svg{width:16px;height:16px}
.tp-pv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-bottom:1px solid var(--glass-border);background:var(--glass-strong);font-size:.78rem}
.tp-pv-path{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-pv-kind{display:inline-flex;align-items:center;gap:5px;color:var(--muted);flex-shrink:0;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.03em}
.tp-pv-kind svg{width:13px;height:13px}
.tp-pv-frame{width:100%;height:60vh;min-height:440px;border:0;background:#fff;display:block}
.tp-pv-code{height:60vh;min-height:440px;overflow:auto}
.tp-pv-code .cl-edit-wrap{height:100%}
.tp-pv-pre{margin:0;padding:12px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow:auto;height:100%}
/* Queue → built-feature preview modal */
.qpv-card{width:min(1100px,95vw);max-height:92vh;display:flex;flex-direction:column;padding:16px 18px}
.qpv-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-right:30px}
.qpv-h b{display:inline-flex;align-items:center;gap:6px;font-size:1rem}
.qpv-h svg{width:16px;height:16px}
.qpv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.qpv-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass);color:var(--text);cursor:pointer;font-size:.78rem;font-weight:700;transition:.15s}
.qpv-chip svg{width:13px;height:13px;opacity:.8}
.qpv-chip:hover{background:var(--glass-strong)}
.qpv-chip.sel{border-color:var(--accent);background:var(--glass-strong);box-shadow:0 0 0 1px var(--accent) inset}
.qpv-preview{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--glass-border);border-radius:12px;overflow:hidden;background:var(--glass)}
.qpv-frame{width:100%;height:72vh;min-height:420px;border:0;background:#fff;display:block}
/* In-context preview: a thin note bar over a live page iframe that fills the rest */
.qpv-ctxbar{display:flex;align-items:center;gap:7px;padding:6px 11px;font-size:.74rem;color:var(--muted);background:var(--glass-strong);border-bottom:1px solid var(--glass-border);flex:none}
.qpv-ctxbar svg{width:13px;height:13px;flex:none}
.qpv-ctx{flex:1;height:auto;min-height:55vh;background:transparent}
.qpv-preview .tp-pv-pre{max-height:72vh}
.qpv-preview .tp-pv-empty{min-height:420px}

/* ===================================================================================
   RESPONSIVE CONSISTENCY LAYER — black liquid-glass admin (parity with canvas builder)
   Uniformly applies the same --glass-bg / --glass-border / blur radius the canvas uses,
   reducing blur + padding and stacking grids to a single column at smaller breakpoints,
   so glass panels, cards, selects and the sidebar/shell hold visual parity everywhere.
   =================================================================================== */
:root{
  /* canvas-builder glass tokens, aliased so admin views share the exact same surface */
  --glass-bg:var(--glass);
  --glass-blur:20px;
}
.ce{ --glass-bg:var(--glass); }
/* uniform glass surface helper — every translucent black panel resolves to the same vars */
.glass,.panel,.kpi,.pe-card,.set-card,.dash-cell,.grid-stack-item-content.dash-cell,
.ig-card,.org-dept,.org-card,.oc-node,.ag-card,.crm-rule-card,.cs-card,.skill-card,
.gsel-menu,.exp-pop,.tbar-pop,.gp-card,.awf-panel,.cortex-card{
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
}

@media (max-width:1024px){
  :root{ --glass-blur:16px; }
  .glass{backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
  .panel{padding:18px}
  .pe-card,.set-card{padding:15px}
  .grid-stack-item-content.dash-cell{padding:14px;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
  .ig-grid{grid-template-columns:1fr}
  .cs-modes,.cs-cfg-grid,.cs-arms,.cx-cols{grid-template-columns:1fr}
  .gsel-menu,.exp-pop,.tbar-pop,.gp-card,.awf-panel,.cortex-card{backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
  header.glass{backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
}

@media (max-width:768px){
  :root{ --glass-blur:13px; }
  .glass{backdrop-filter:blur(13px) saturate(155%);-webkit-backdrop-filter:blur(13px) saturate(155%);border-radius:15px}
  .panel{padding:15px;border-radius:15px}
  .pe-card,.set-card,.ag-card,.org-dept,.crm-rule-card,.cs-card,.skill-card,.ig-card{padding:13px;backdrop-filter:blur(13px) saturate(155%);-webkit-backdrop-filter:blur(13px) saturate(155%)}
  .grid-stack-item-content.dash-cell{padding:12px;border-radius:14px;backdrop-filter:blur(13px) saturate(155%);-webkit-backdrop-filter:blur(13px) saturate(155%)}
  .kpis,.skel-kpis,.skel-grid,.nz-grid,.crm-int-grid,.set-grid,.gs-quick,.skills-grid,.cx-tiles{grid-template-columns:1fr}
  .grid2,.cs-metric-grid,.prof-cols,.mind-grid,.mind-mems{grid-template-columns:1fr}
  /* keep selects/inputs on the same translucent black glass at this breakpoint */
  .inp,select.inp,.gsel-btn,.conn-form input,.conn-form select,.conn-form textarea{
    -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
    background:var(--glass-strong);border-color:var(--glass-border)}
  .gsel-menu,.exp-pop,.tbar-pop{backdrop-filter:blur(13px) saturate(155%);-webkit-backdrop-filter:blur(13px) saturate(155%)}
  header.glass{border-radius:15px;backdrop-filter:blur(13px) saturate(155%);-webkit-backdrop-filter:blur(13px) saturate(155%)}
}

@media (max-width:480px){
  :root{ --glass-blur:10px; }
  .glass{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);border-radius:13px}
  .panel{padding:12px;border-radius:13px}
  .pe-card,.set-card,.ag-card,.org-dept,.crm-rule-card,.cs-card,.skill-card,.ig-card,.gp-card,.cortex-card{padding:11px;border-radius:13px;backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
  .grid-stack-item-content.dash-cell{padding:11px;border-radius:12px;backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
  .canvas-grid,.canvas-list,.ce-body{grid-template-columns:1fr}
  .nz-form .nz-2,.pe-row2,.pe-row3{grid-template-columns:1fr}
  .gsel-menu,.exp-pop,.tbar-pop{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
  header.glass{border-radius:13px;backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
}

/* ===== Black liquid-glass admin: contrast & accessibility (WCAG AA over dark translucent panels) =====
   Scoped to the dark glass admin surfaces so these high-contrast text colors only apply there. */
body.admin,
body.admin .glass,
body.admin .glass-panel,
.ce .glass,
.ce .glass-panel{color:rgba(255,255,255,0.92)}
/* secondary / muted text stays legible on dark glass */
body.admin .muted,
body.admin .glass .muted,
body.admin .glass-panel .muted,
.ce .glass .muted,
.ce .glass-panel .muted{color:rgba(255,255,255,0.65)}
/* disabled + placeholder text — dimmer but still readable */
body.admin .glass :disabled,
body.admin .glass-panel :disabled,
body.admin .glass [aria-disabled="true"],
body.admin .glass ::placeholder,
body.admin .glass-panel ::placeholder,
.ce .glass ::placeholder,
.ce .glass-panel ::placeholder{color:rgba(255,255,255,0.45)}
/* headings + labels over translucent panels get a subtle shadow to hold contrast */
body.admin .glass h1,body.admin .glass h2,body.admin .glass h3,body.admin .glass h4,body.admin .glass h5,body.admin .glass h6,body.admin .glass label,
body.admin .glass-panel h1,body.admin .glass-panel h2,body.admin .glass-panel h3,body.admin .glass-panel h4,body.admin .glass-panel h5,body.admin .glass-panel h6,body.admin .glass-panel label,
.ce .glass h1,.ce .glass h2,.ce .glass h3,.ce .glass h4,.ce .glass h5,.ce .glass h6,.ce .glass label,
.ce .glass-panel h1,.ce .glass-panel h2,.ce .glass-panel h3,.ce .glass-panel h4,.ce .glass-panel h5,.ce .glass-panel h6,.ce .glass-panel label{text-shadow:0 1px 2px rgba(0,0,0,0.5)}
/* link, table-cell + form-input text bumped to at least secondary opacity for legibility */
body.admin .glass a,body.admin .glass-panel a,
.ce .glass a,.ce .glass-panel a{color:rgba(255,255,255,0.85)}
body.admin .glass td,body.admin .glass th,body.admin .glass-panel td,body.admin .glass-panel th,
.ce .glass td,.ce .glass th,.ce .glass-panel td,.ce .glass-panel th{color:rgba(255,255,255,0.78)}
body.admin .glass input,body.admin .glass textarea,body.admin .glass select,
body.admin .glass-panel input,body.admin .glass-panel textarea,body.admin .glass-panel select,
.ce .glass input,.ce .glass textarea,.ce .glass select,
.ce .glass-panel input,.ce .glass-panel textarea,.ce .glass-panel select{color:rgba(255,255,255,0.92)}
/* icons sit at sufficient opacity for AA contrast against the dark glass */
body.admin .glass .lg-ic,body.admin .glass-panel .lg-ic,
.ce .glass .lg-ic,.ce .glass-panel .lg-ic{opacity:0.85}

/* ===== Admin shell BLACK liquid-glass form & control theme ===== */
.wrap button,.wrap .btn,
.wrap input[type=text],.wrap input[type=email],.wrap input[type=password],.wrap input[type=number],.wrap input[type=search],.wrap textarea,
.wrap select{
  transition:all .2s ease;
}
/* Buttons */
.wrap button,.wrap .btn{
  background:var(--glass-strong);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  color:var(--text);
  box-shadow:0 4px 16px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
.wrap button:hover,.wrap .btn:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 4px 18px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent),inset 0 1px 0 rgba(255,255,255,.06);
}
/* mouse click → no glow ring; keyboard focus → a SUBTLE NEUTRAL ring (not a loud blue glow) */
.wrap button:focus,.wrap .btn:focus{outline:none}
.wrap button:focus-visible,.wrap .btn:focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.06);
}
/* Text inputs + textareas + selects */
.wrap input[type=text],.wrap input[type=email],.wrap input[type=password],.wrap input[type=number],.wrap input[type=search],.wrap textarea,
.wrap select{
  background:var(--glass-strong);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  color:var(--text);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 2px 10px rgba(0,0,0,.08);
}
.wrap input[type=text]::placeholder,.wrap input[type=email]::placeholder,.wrap input[type=password]::placeholder,.wrap input[type=number]::placeholder,.wrap input[type=search]::placeholder,.wrap textarea::placeholder{color:var(--muted);opacity:1}
.wrap input[type=text]:hover,.wrap input[type=email]:hover,.wrap input[type=password]:hover,.wrap input[type=number]:hover,.wrap input[type=search]:hover,.wrap textarea:hover,.wrap select:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
}
.wrap input[type=text]:focus,.wrap input[type=text]:focus-visible,.wrap input[type=email]:focus,.wrap input[type=email]:focus-visible,.wrap input[type=password]:focus,.wrap input[type=password]:focus-visible,.wrap input[type=number]:focus,.wrap input[type=number]:focus-visible,.wrap input[type=search]:focus,.wrap input[type=search]:focus-visible,.wrap textarea:focus,.wrap textarea:focus-visible,.wrap select:focus,.wrap select:focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent),inset 0 1px 2px rgba(0,0,0,.14);
}
/* Toggle switches / checkboxes — glass treatment + accent glow when checked */
.wrap input[type=checkbox]:not(.gl-check):not(.bulk-cb):not(.bulk-all),
.wrap input[type=radio]{
  appearance:none;-webkit-appearance:none;
  width:18px;height:18px;flex:none;
  background:var(--glass-strong);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
  cursor:pointer;position:relative;transition:all .2s ease;
}
.wrap input[type=checkbox]:not(.gl-check):not(.bulk-cb):not(.bulk-all){border-radius:6px}
.wrap input[type=radio]{border-radius:50%}
.wrap input[type=checkbox]:not(.gl-check):not(.bulk-cb):not(.bulk-all):hover,
.wrap input[type=radio]:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.18),0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent)}
.wrap input[type=checkbox]:not(.gl-check):not(.bulk-cb):not(.bulk-all):checked,
.wrap input[type=radio]:checked{
  background:linear-gradient(145deg,var(--accent),var(--accent2));
  border-color:transparent;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.2);
}
.wrap input[type=checkbox]:not(.gl-check):not(.bulk-cb):not(.bulk-all):checked::after{
  content:'';position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.wrap input[type=radio]:checked::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff}
.wrap input[type=checkbox]:focus-visible:not(.gl-check),
.wrap input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 1px 2px rgba(0,0,0,.18)}

/* ===== Solid-dark fallback for browsers WITHOUT backdrop-filter support =====
   Without the blur, translucent panels (e.g. background:rgba(12,12,14,.55)) would render at
   55% opacity over arbitrary content and be unreadable. When backdrop-filter is unsupported,
   fall back to opaque/near-opaque solid surfaces so panels are never see-through. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.login-card,.pe-card,.ml-card{background:var(--surface-solid)}
  .glass-strong{background:var(--surface-solid)}
  .wrap button,.wrap .btn{background:var(--surface-solid)}
  .wrap input[type=text],.wrap input[type=email],.wrap input[type=password],.wrap input[type=number],.wrap input[type=search],.wrap textarea,.wrap select{background:var(--surface-solid)}
  .gsel-menu,.exp-pop,.tbar-pop,.gp-card,.awf-panel,.cortex-card{background:var(--surface-solid)}
  .grid-stack-item-content.dash-cell{background:var(--surface-solid)}
  header.glass{background:var(--surface-solid)}
  .ai-bar{background:rgba(16,19,27,.97)}
}