/* Mella design system — clean and bright.
   Loaded after studio.css. That file still supplies the detailed layout of a few
   specialised pieces (the voice picker faces, invoice lines, the tour cut-out);
   everything a person actually sees — colour, type, spacing, the shell, every
   common component and all motion — is defined here and wins.

   Light by default, dark when the device asks for it, and either can be forced
   with <html data-theme="light|dark"> (the account menu sets it). */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#f6f7f9;            --surface:#ffffff;      --surface-2:#f2f4f7;   --surface-3:#e9ecf1;
  --ink:#0f172a;           --ink-2:#334155;        --muted:#64748b;       --faint:#94a3b8;
  --line:#e5e8ee;          --line-strong:#d4d9e1;
  --brand:#ff7c02;         --brand-600:#ea6c00;    --brand-700:#c25700;
  --brand-50:#fff5eb;      --brand-100:#ffe8d1;    --brand-200:#ffd2a6;
  --violet:#7c5cff;        --sky:#0ea5e9;
  --good:#16a34a;          --good-50:#ecfdf3;      --warn:#d97706;        --warn-50:#fffbeb;
  --bad:#dc2626;           --bad-50:#fef2f2;

  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow:0 8px 24px -8px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:0 24px 48px -16px rgba(15,23,42,.22);
  --ring:0 0 0 4px rgba(255,124,2,.18);
  --ease:cubic-bezier(.2,.8,.2,1);

  --sidebar:260px; --topbar:68px; --tabbar:68px;

  /* The old stylesheet's names, pointed at the new palette so its remaining
     rules follow the redesign instead of fighting it. */
  --paper:var(--bg); --white:var(--surface); --tint:var(--brand-50);
  --brand-deep:var(--brand-700); --accent:var(--brand-200); --red:var(--bad);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0f17; --surface:#121826; --surface-2:#182031; --surface-3:#1f2a3d;
    --ink:#f1f5f9; --ink-2:#cbd5e1; --muted:#94a3b8; --faint:#64748b;
    --line:#233047; --line-strong:#2e3d57;
    --brand-50:rgba(255,124,2,.12); --brand-100:rgba(255,124,2,.2); --brand-200:rgba(255,124,2,.35);
    --brand-700:#ffb066;
    --good-50:rgba(22,163,74,.14); --warn-50:rgba(217,119,6,.14); --bad-50:rgba(220,38,38,.14);
    --shadow-xs:none; --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 10px 30px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0f17; --surface:#121826; --surface-2:#182031; --surface-3:#1f2a3d;
  --ink:#f1f5f9; --ink-2:#cbd5e1; --muted:#94a3b8; --faint:#64748b;
  --line:#233047; --line-strong:#2e3d57;
  --brand-50:rgba(255,124,2,.12); --brand-100:rgba(255,124,2,.2); --brand-200:rgba(255,124,2,.35);
  --brand-700:#ffb066;
  --good-50:rgba(22,163,74,.14); --warn-50:rgba(217,119,6,.14); --bad-50:rgba(220,38,38,.14);
  --shadow-xs:none; --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{background:var(--bg)}
body{margin:0;font-family:var(--font);color:var(--ink);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.003em}
/* One typeface throughout. The old serif headings were set on specific
   selectors, so this has to be firm to replace them everywhere. */
body *:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *){font-family:var(--font)!important}
code,pre,kbd,samp{font-family:var(--mono)!important;font-size:.92em}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.025em;line-height:1.2;font-weight:650}
a{color:var(--brand-600)}
a:hover{color:var(--brand-700)}
::selection{background:var(--brand-200)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
.muted{color:var(--muted)!important}
.small{font-size:13px}
.hidden{display:none!important}
img{max-width:100%}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 0,var(--surface-3) 40%,var(--surface-2) 80%);
  background-size:300% 100%;animation:m-shimmer 1.4s infinite linear;border-radius:var(--r-sm)}

/* ── Shell ──────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh;min-height:100dvh;background:var(--bg)}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-right:1px solid var(--line);padding:22px 16px 18px;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin}
.sidebar>.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;margin:0}
.brand-logo{max-width:132px!important;height:auto;display:block}
:root[data-theme="dark"] .brand-logo,
:root:not([data-theme="light"]) .m-dark-logo{}
.sidebar .workspace,.m-workspace .workspace{display:flex;align-items:center;gap:10px;margin:4px 0 12px;padding:9px 10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.workspace-avatar{width:32px;height:32px;flex:0 0 32px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:14px;
  color:#fff;background:linear-gradient(135deg,var(--brand),#ffb347);box-shadow:0 4px 10px -4px rgba(255,124,2,.6)}
.workspace-picker{min-width:0;flex:1;display:flex;flex-direction:column;gap:0}
.workspace-picker>span{font-size:11px!important;color:var(--muted)!important;letter-spacing:.02em}
.workspace-picker select{width:100%;border:0;background:transparent;color:var(--ink);font-weight:600;font-size:14px;padding:0;
  appearance:none;-webkit-appearance:none;cursor:pointer;text-overflow:ellipsis}
.workspace .icon-btn{width:30px;height:30px;min-width:30px!important;min-height:30px!important}

.nav{display:flex;flex-direction:column;gap:2px}
.nav .m-nav-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:14px 12px 6px}
.nav button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s;position:relative}
.nav button svg{width:20px;height:20px;flex:0 0 20px;stroke-width:1.8;color:var(--muted);transition:color .15s}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button:hover svg{color:var(--ink)}
.nav button.active,.nav button[aria-current="page"]{background:var(--brand-50);color:var(--brand-700);font-weight:600}
.nav button.active svg{color:var(--brand)}
.nav button.active::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav button:focus-visible{box-shadow:var(--ring)}
.nav .m-count{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);background:var(--brand);color:#fff}

.sidebar-bottom{margin-top:auto;padding:12px 4px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.m-help{display:flex;gap:10px;align-items:center;padding:12px;border-radius:var(--r);background:linear-gradient(135deg,var(--brand-50),transparent);
  border:1px solid var(--brand-100)}
.m-help strong{display:block;font-size:13px}
.m-help span{font-size:12px;color:var(--muted)}
.m-help .btn{margin-left:auto}
.byline{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--faint)}
.byline img{height:16px;width:auto;opacity:.85}
.legal-links{display:flex;gap:14px;margin:0;font-size:12px}
.legal-links a{color:var(--muted);text-decoration:none}
.legal-links a:hover{color:var(--ink)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:var(--topbar);display:flex;align-items:center;gap:16px;padding:0 32px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.m-scrolled{border-bottom-color:var(--line)}
.m-topbrand{display:none}
.breadcrumb{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumb b{color:var(--ink);font-weight:600}
.breadcrumb span{color:var(--faint)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.top-actions .pill{display:none}
.account-email{display:none}
.m-account{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:4px 6px 4px 4px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);transition:box-shadow .15s}
.m-account:hover{box-shadow:var(--shadow-sm)}
.m-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--sky))}
.m-account .m-who{font-size:13px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-menu{position:absolute;top:60px;right:24px;z-index:60;width:260px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:8px;animation:m-pop .16s var(--ease)}
.m-menu .m-menu-head{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.m-menu .m-menu-head strong{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-menu .m-menu-head span{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-menu button,.m-menu a{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:var(--r-sm);
  font-size:14px;color:var(--ink-2);cursor:pointer}
.m-menu button:hover,.m-menu a:hover{background:var(--surface-2);color:var(--ink)}
.m-menu svg{width:18px;height:18px}

.content{width:100%;max-width:1240px;margin:0 auto;padding:12px 32px 64px;box-sizing:border-box}
.content.m-enter{animation:m-rise .32s var(--ease)}

/* Section tabs: the pages inside the current section. */
.m-subtabs{display:flex;gap:4px;margin:0 0 22px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.m-subtabs::-webkit-scrollbar{display:none}
.m-subtabs button{all:unset;cursor:pointer;white-space:nowrap;padding:8px 14px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--muted);
  transition:background .15s,color .15s,box-shadow .15s}
.m-subtabs button:hover{color:var(--ink)}
.m-subtabs button.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.m-subtabs button:focus-visible{box-shadow:var(--ring)}

/* ── Page heading ───────────────────────────────────────────────────────── */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:6px 0 26px;flex-wrap:wrap}
.page-heading h1{font-size:30px;margin:0;font-weight:700;letter-spacing:-.03em}
.page-heading p{margin:6px 0 0;color:var(--muted);font-size:15px;max-width:640px}
.page-heading .icon-btn{margin-bottom:10px}
.page-heading>.toolbar{max-width:none}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-600)}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.section-title h3{font-size:18px;margin:0}
.section-title h3 span,.section-title>span{color:var(--muted);font-weight:400;font-size:14px}
.footnote{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.6}
.lede{font-size:16px;color:var(--ink-2)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;min-height:40px;box-sizing:border-box;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;
  line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:var(--shadow-xs);
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .08s}
.btn:hover{background:var(--surface-2);border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px -6px rgba(255,124,2,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.btn.subtle{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.subtle:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:hover{background:#b91c1c;border-color:#b91c1c}
.btn.lime{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.btn[disabled],.btn.is-busy{opacity:.6;cursor:not-allowed;transform:none}
.btn.is-busy{position:relative}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;padding:0;transition:background .15s}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:18px;height:18px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.panel-body{padding:22px}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.metric{padding:18px 20px;display:flex;flex-direction:column;gap:8px;min-height:0}
.metric span{font-size:13px;color:var(--muted);font-weight:500}
.metric strong{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.home-columns,.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.connection{padding:24px}
.connection h2{font-size:20px}

/* Notices */
.notice{display:block;padding:14px 16px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);
  font-size:14px;line-height:1.55;margin:0 0 16px}
.notice strong{color:var(--ink)}
.notice.error{background:var(--bad-50);border-color:color-mix(in srgb,var(--bad) 25%,transparent);color:var(--ink)}
.notice.error strong{color:var(--bad)}
.notice.success{background:var(--good-50);border-color:color-mix(in srgb,var(--good) 25%,transparent)}
.notice.success strong{color:var(--good)}
.notice .toolbar{margin-top:10px}

/* Pills and badges */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;text-transform:none}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.pill .dot.good{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent)}
.pill.m-good{background:var(--good-50);color:var(--good);border-color:transparent}
.pill.m-warn{background:var(--warn-50);color:var(--warn);border-color:transparent}
.pill.m-bad{background:var(--bad-50);color:var(--bad);border-color:transparent}
.pill.m-live{background:var(--brand-50);color:var(--brand-700);border-color:transparent}

/* Empty states */
.empty{text-align:center;padding:44px 24px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface);
  grid-column:1/-1}
.empty::before{content:"";display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:18px;
  background:radial-gradient(circle at 35% 30%,#ffd29e,var(--brand) 60%,var(--brand-700));opacity:.9;
  box-shadow:0 10px 24px -8px rgba(255,124,2,.6);animation:m-breathe 3.2s ease-in-out infinite}
.empty h3{font-size:17px;margin:0 0 6px}
.empty p{color:var(--muted);margin:0 auto 14px;max-width:420px;font-size:14px}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:7px;margin:0 0 16px}
.field>span{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field small{color:var(--muted);font-size:12.5px}
.field input,.field select,.field textarea,.search input,.chat-form input,input[type=text],input[type=email],input[type=password],
input[type=url],input[type=tel],input[type=number],input[type=search],select,textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:11px 13px;min-height:44px;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;width:100%}
.field textarea,textarea{min-height:110px;line-height:1.55;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus,.search input:focus,.chat-form input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.field select,select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' 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}
.workspace-picker select{background-image:none;padding:0;min-height:0;border:0;box-shadow:none!important}
.checkbox-field,.switch-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-2);margin:0 0 14px;cursor:pointer}
.checkbox-field input,.switch-row input{width:18px;height:18px;min-height:0;margin-top:2px;accent-color:var(--brand);flex:0 0 18px}
.search{display:flex;align-items:center;min-width:240px;position:relative}
.search input{padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center}

/* ── Tables (become cards on phones, see below) ─────────────────────────── */
.table-wrap{overflow:auto;border-radius:var(--r-lg)}
.data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.data-table th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr{transition:background .12s}
.data-table tbody tr:hover{background:var(--surface-2)}
.detail-list{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:10px 18px;margin:14px 0}
.detail-list dt{color:var(--muted);font-size:13px}
.detail-list dd{margin:0;font-weight:500;overflow-wrap:anywhere}

/* ── Dialog ─────────────────────────────────────────────────────────────── */
#modal{border:0;padding:24px;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg);
  width:min(560px,calc(100vw - 32px));max-height:min(88vh,860px);overflow:auto;box-sizing:border-box}
#modal[open]{animation:m-pop .2s var(--ease)}
#modal::backdrop{background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:m-fade .2s}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 14px}
.dialog-top h2{font-size:21px;margin:0}

/* ── Toast and busy bar ─────────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:100;display:none;align-items:center;gap:10px;
  padding:12px 14px 12px 14px;border-radius:var(--r);background:var(--ink);color:var(--surface);font-size:14px;font-weight:500;
  box-shadow:var(--shadow-lg);max-width:min(560px,calc(100vw - 32px));animation:m-toast .26s var(--ease)}
#toast.toast-success .toast-icon{color:#4ade80}
#toast.toast-error .toast-icon{color:#f87171}
#toast .toast-close{all:unset;cursor:pointer;opacity:.6;padding:0 4px;font-size:18px}
#busy-bar{position:fixed;top:14px;left:50%;transform:translate(-50%,-160%);z-index:120;display:flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:13px;font-weight:600;color:var(--ink-2);transition:transform .25s var(--ease)}
#busy-bar.on{transform:translate(-50%,0)}
.busy-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--brand-100);border-top-color:var(--brand);animation:m-spin .7s linear infinite}

/* ── Cards: agents, templates, knowledge ────────────────────────────────── */
.agent-grid,.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.agent-card,.template{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;text-align:left;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);color:var(--ink);font:inherit;
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.agent-card:hover,.template:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.template{cursor:pointer}
.template h3,.agent-card h3{font-size:16.5px;margin:0}
.template p,.agent-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.template-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.template-icon svg{width:22px;height:22px}
.template .category{margin-top:auto;font-size:12.5px;font-weight:600;color:var(--brand-600)}
.agent-top,.agent-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.agent-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.agent-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;
  background:radial-gradient(circle at 32% 28%,#ffd29e,var(--brand) 58%,var(--brand-700));
  box-shadow:0 0 0 4px var(--brand-50),0 8px 18px -8px rgba(255,124,2,.7);position:relative}
.agent-card:hover .agent-avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--brand-200);
  animation:m-ring 1.6s var(--ease) infinite}
.agent-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)}
.agent-meta span:not(:empty):not(:only-child){}

/* ── Editor ─────────────────────────────────────────────────────────────── */
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.steps{display:flex;gap:6px;padding:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;
  scrollbar-width:none;margin:0 0 18px}
.steps::-webkit-scrollbar{display:none}
.steps button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-sm);white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--muted)}
.steps button:hover{color:var(--ink)}
.steps button.active,.steps button[aria-current="step"],.steps button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.step-mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--surface-3);color:var(--muted)}
.steps button.active .step-mark{background:var(--brand);color:#fff}
.step-note{font-size:13px;color:var(--muted)}
.test-panel{position:sticky;top:calc(var(--topbar) + 12px);padding:20px;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - var(--topbar) - 40px)}
.test-title{display:flex;align-items:center;justify-content:space-between}

/* Chat */
.chat{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:120px;max-height:440px;padding:4px}
.bubble{max-width:85%;padding:11px 14px;border-radius:18px 18px 18px 6px;background:var(--surface-2);border:1px solid var(--line);
  font-size:14px;line-height:1.5;color:var(--ink);animation:m-rise .25s var(--ease)}
.bubble.user{align-self:flex-end;background:var(--brand);border-color:var(--brand);color:#fff;border-radius:18px 18px 6px 18px}
.bubble strong{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.chat-form{display:flex;gap:8px}
.chat-note{font-size:12.5px;color:var(--muted)}

/* Voice choice */
.voice-list{display:grid;gap:10px}
.voice-choice{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.voice-choice:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.voice-choice.selected,.voice-choice[aria-checked="true"],.voice-choice:has(input:checked){border-color:var(--brand);box-shadow:var(--ring)}
.voice-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.vtag{font-size:11.5px;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}

/* ── Allowance, billing and the rest ────────────────────────────────────── */
.allowance{padding:18px 20px;margin:0 0 18px}
.allowance-bar{height:10px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden;margin:12px 0 10px}
.allowance-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#ffb347);
  background-size:200% 100%;animation:m-flow 3s linear infinite}
.allowance.spent .allowance-bar i{background:var(--bad)}
.allowance-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.allowance-top span,.allowance-legend{font-size:13px;color:var(--muted)}
.allowance-legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.allowance-legend b{color:var(--ink)}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:180px}
.chart-column{flex:1;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--brand),#ffb347);min-height:4px;
  transform-origin:bottom;animation:m-grow .7s var(--ease) both}
.verified-mark{color:var(--good)}

/* The old "architecture" diagram and decorative hero, kept only where they
   still appear outside the redesigned home. */
.architecture{display:flex;flex-direction:column;gap:8px}
.architecture span{padding:12px;border-radius:var(--r);background:var(--brand-50);border:1px solid var(--brand-100);text-align:center;font-weight:600;color:var(--brand-700)}

/* ── The AI, alive: orbs, waves, rings ──────────────────────────────────── */
/* An orb that breathes while idle, ripples while listening, and throws its
   bars while speaking. Used on the home page, assistant cards and the live
   voice test. */
.m-orb{--size:120px;position:relative;width:var(--size);height:var(--size);flex:0 0 var(--size);display:grid;place-items:center}
.m-orb .m-core{position:absolute;inset:14%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe0b8 0,#ffb257 22%,var(--brand) 52%,#c2410c 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 18px 40px -12px rgba(255,124,2,.75),0 0 60px -10px rgba(255,124,2,.55);
  animation:m-breathe 3.6s ease-in-out infinite}
.m-orb .m-core::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,255,255,.45) 75%,transparent 90%);mix-blend-mode:soft-light;
  animation:m-spin 6s linear infinite}
.m-orb .m-halo{position:absolute;inset:0;border-radius:50%;border:2px solid var(--brand-200);opacity:0;animation:m-ripple 3s var(--ease) infinite}
.m-orb .m-halo.h2{animation-delay:1s}
.m-orb .m-halo.h3{animation-delay:2s}
.m-orb.m-quiet .m-halo{display:none}
.m-orb.m-quiet .m-core{filter:grayscale(.65) brightness(1.05);animation-duration:6s}

.m-wave{display:inline-flex;align-items:center;gap:3px;height:22px}
.m-wave i{display:block;width:3px;border-radius:3px;background:currentColor;height:30%;animation:m-bars 1s ease-in-out infinite}
.m-wave i:nth-child(2){animation-delay:-.15s}.m-wave i:nth-child(3){animation-delay:-.3s}
.m-wave i:nth-child(4){animation-delay:-.45s}.m-wave i:nth-child(5){animation-delay:-.6s}
.m-wave i:nth-child(6){animation-delay:-.75s}.m-wave i:nth-child(7){animation-delay:-.9s}
.m-wave.m-still i{animation:none;height:20%}

.m-live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block;position:relative}
.m-live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--good);opacity:0;animation:m-ripple 2s infinite}

/* The voice test: the existing orb markup, re-skinned. */
.voice-status{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 12px 18px;margin:0 0 14px;border-radius:var(--r-lg);
  background:radial-gradient(120% 80% at 50% 0,var(--brand-50),transparent 70%)}
.voice-status #voice-state{font-weight:600;color:var(--ink-2)}
.voice-orb{position:relative;width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:5px;
  background:radial-gradient(circle at 34% 30%,#ffe0b8 0,#ffb257 22%,var(--brand) 52%,#c2410c 100%);
  box-shadow:0 18px 44px -14px rgba(255,124,2,.8),0 0 70px -12px rgba(255,124,2,.6);animation:m-breathe 3.6s ease-in-out infinite}
.voice-orb::before,.voice-orb::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--brand-200);opacity:0}
.voice-orb .wave{display:block;width:5px;border-radius:5px;background:rgba(255,255,255,.92);height:calc(var(--h,24px) * .45);transition:height .2s}
.voice-orb.is-listening::before{animation:m-ripple 2.2s var(--ease) infinite}
.voice-orb.is-listening::after{animation:m-ripple 2.2s var(--ease) infinite 1.1s}
.voice-orb.is-speaking{animation:m-speak .5s ease-in-out infinite alternate}
.voice-orb.is-speaking .wave{animation:m-bars .55s ease-in-out infinite;height:var(--h,24px)}
.voice-orb.is-speaking .wave:nth-child(2n){animation-delay:-.18s}
.voice-orb.is-speaking .wave:nth-child(3n){animation-delay:-.32s}
.hero-art .voice-orb{width:180px;height:180px}

/* Old marketing hero on the assistants page, reshaped as a calm banner. */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:center;padding:30px 32px;margin:0 0 8px;
  border-radius:var(--r-xl);border:1px solid var(--brand-100);
  background:radial-gradient(90% 120% at 100% 0,var(--brand-100),transparent 60%),var(--surface);box-shadow:var(--shadow-sm);overflow:hidden}
.hero h2{font-size:26px;margin:8px 0 10px;letter-spacing:-.03em}
.hero p{color:var(--muted);margin:0 0 18px}
.hero .eyebrow{color:var(--brand-600)}
.hero-art{position:relative;min-height:220px;display:grid;place-items:center}
.hero-art .orbit{position:absolute;width:240px;height:240px;border-radius:50%;border:1px dashed var(--brand-200);animation:m-spin 30s linear infinite}
.hero-art .orbit.two{width:300px;height:300px;animation-duration:44s;animation-direction:reverse;opacity:.6}
.float-label{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;font-size:12px;
  color:var(--muted);box-shadow:var(--shadow);animation:m-float 5s ease-in-out infinite}
.float-label strong{display:block;color:var(--ink);font-size:13px}
.float-label.a{left:0;top:18px}.float-label.b{right:0;bottom:18px;animation-delay:-2.5s}

/* ── Redesigned home ────────────────────────────────────────────────────── */
.m-greet{margin:6px 0 22px}
.m-greet h1{font-size:30px;margin:0;font-weight:700;letter-spacing:-.03em}
.m-greet p{margin:6px 0 0;color:var(--muted)}
.m-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;
  padding:28px 30px;border-radius:var(--r-xl);color:#fff;margin:0 0 18px;
  background:radial-gradient(70% 140% at 0% 0%,#ff9a3c 0,transparent 60%),radial-gradient(60% 120% at 100% 100%,#7c5cff 0,transparent 55%),
    linear-gradient(135deg,#1b1530,#0f172a);box-shadow:0 30px 60px -30px rgba(15,23,42,.6)}
.m-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.08),transparent 40%);}
.m-hero h2{color:#fff;font-size:24px;margin:6px 0 6px}
.m-hero p{color:rgba(255,255,255,.75);margin:0;font-size:15px;max-width:520px}
.m-hero .m-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#ffd2a6}
.m-hero .m-kicker .m-wave{color:#ffd2a6;height:14px}
.m-hero .btn{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.m-hero .btn:hover{background:rgba(255,255,255,.18)}
.m-hero .btn.primary{background:var(--brand);border-color:var(--brand)}
.m-hero .m-hero-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.m-hero .m-orb{--size:112px}
.m-hero .m-orb .m-halo{border-color:rgba(255,210,166,.6)}

.m-setup{padding:22px 24px;margin:0 0 18px}
.m-setup-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;flex-wrap:wrap}
.m-setup-head h3{margin:0;font-size:18px}
.m-progress{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
.m-progress-bar{width:140px;height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.m-progress-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),#ffb347);transition:width .6s var(--ease)}
.m-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:step}
.m-step{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.m-step:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.m-step-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--surface-2);
  color:var(--muted);border:1px solid var(--line)}
.m-step.done{background:var(--good-50);border-color:transparent}
.m-step.done .m-step-num{background:var(--good);color:#fff;border-color:var(--good)}
.m-step.next{border-color:var(--brand);box-shadow:var(--ring)}
.m-step.next .m-step-num{background:var(--brand);color:#fff;border-color:var(--brand);animation:m-pulse 2s infinite}
.m-step strong{font-size:15px}
.m-step span{font-size:13px;color:var(--muted);line-height:1.45}
.m-step .btn{margin-top:auto;align-self:flex-start}

.m-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.m-stat{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.m-stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:500}
.m-stat-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.m-stat-icon svg{width:18px;height:18px}
.m-stat strong{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.m-stat em{font-style:normal;font-size:12.5px;color:var(--muted)}

.m-grid-2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px}
.m-card{padding:20px 22px}
.m-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.m-card-head h3{margin:0;font-size:17px}
.m-calls{display:flex;flex-direction:column}
.m-call{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 8px;border-radius:var(--r-sm);
  border-bottom:1px solid var(--line)}
.m-call:last-child{border-bottom:0}
.m-call:hover{background:var(--surface-2)}
.m-call-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);flex:0 0 38px}
.m-call-icon svg{width:18px;height:18px}
.m-call b{display:block;font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-call small{color:var(--muted);font-size:12.5px}
.m-call .pill{margin-left:auto}
.m-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-quick button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.m-quick button:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand-200)}
.m-quick b{font-size:14px}
.m-quick small{font-size:12.5px;color:var(--muted);line-height:1.4}
.m-quick .m-stat-icon{width:38px;height:38px}

/* Login welcome, for someone who has not signed in */
.m-welcome{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:30px;align-items:center;padding:36px;border-radius:var(--r-xl);
  background:radial-gradient(80% 120% at 100% 0,var(--brand-100),transparent 60%),var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);margin:0 0 18px}
.m-welcome h1{font-size:38px;margin:10px 0 12px;letter-spacing:-.035em;line-height:1.08}
.m-welcome p{font-size:16.5px;color:var(--muted);margin:0 0 22px;max-width:520px}
.m-welcome .toolbar .btn{min-height:46px;padding:12px 20px;font-size:15px}
.m-phone{position:relative;justify-self:center;width:250px;height:440px;border-radius:40px;padding:12px;background:#0f172a;
  box-shadow:0 40px 80px -30px rgba(15,23,42,.6),0 0 0 2px rgba(255,255,255,.06) inset}
.m-phone-screen{position:relative;height:100%;border-radius:30px;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:42px 18px 20px;box-sizing:border-box;color:#fff;
  background:radial-gradient(100% 70% at 50% 20%,#ff8f2a 0,transparent 60%),linear-gradient(180deg,#24193a,#0f172a)}
.m-phone-screen small{opacity:.7;font-size:12px;letter-spacing:.04em}
.m-phone-screen strong{font-size:18px;margin:4px 0 18px}
.m-phone .m-orb{--size:120px;margin:6px 0 16px}
.m-phone-caption{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:6px}
.m-phone-caption span{font-size:12px;padding:8px 10px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.12);
  animation:m-rise .5s var(--ease) both}
.m-phone-caption span.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:rgba(255,124,2,.85);animation-delay:1.2s}
.m-phone-caption span:nth-child(3){animation-delay:2.4s}
.m-phone .m-call-timer{font-variant-numeric:tabular-nums;font-size:12px;opacity:.8}
.m-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.m-feature{padding:20px}
.m-feature h3{font-size:16px;margin:12px 0 6px}
.m-feature p{margin:0;color:var(--muted);font-size:14px}

/* ── Phone navigation ───────────────────────────────────────────────────── */
.m-tabs{display:none}
.m-sheet{position:fixed;inset:0;z-index:90;display:none}
.m-sheet.open{display:block}
.m-sheet-scrim{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:m-fade .2s}
.m-sheet-body{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;background:var(--surface);border-radius:24px 24px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);animation:m-sheet .28s var(--ease)}
.m-sheet-body::before{content:"";display:block;width:40px;height:5px;border-radius:5px;background:var(--line-strong);margin:4px auto 14px}
.m-sheet h4{margin:14px 6px 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.m-sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-sheet-grid button,.m-sheet-row button,.m-sheet-row a{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:14px 6px;border-radius:var(--r);background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-2);text-align:center}
.m-sheet-grid button.active{background:var(--brand-50);color:var(--brand-700)}
.m-sheet-grid svg{width:22px;height:22px;color:var(--brand)}
.m-sheet-row{display:flex;gap:8px;margin-top:14px}
.m-sheet-row button,.m-sheet-row a{flex:1;flex-direction:row;justify-content:center;padding:13px}

/* ── Motion ─────────────────────────────────────────────────────────────── */
@keyframes m-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes m-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes m-toast{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes m-spin{to{transform:rotate(360deg)}}
@keyframes m-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes m-speak{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes m-ripple{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.45);opacity:0}}
@keyframes m-ring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes m-bars{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(255,124,2,.5)}100%{box-shadow:0 0 0 10px rgba(255,124,2,0)}}
@keyframes m-flow{from{background-position:0 0}to{background-position:-200% 0}}
@keyframes m-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes m-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.m-wave i{transform-origin:center;height:100%}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .m-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .editor-layout{grid-template-columns:minmax(0,1fr)}
  .test-panel{position:static;max-height:none}
}
@media (max-width:1080px){
  .metrics-grid,.m-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-grid-2,.home-columns,.two-col{grid-template-columns:minmax(0,1fr)}
  .m-welcome{grid-template-columns:minmax(0,1fr)}
  .m-phone{display:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-art{display:none}
}
/* Tablet: an icon rail instead of the full sidebar. */
@media (max-width:1024px) and (min-width:761px){
  :root{--sidebar:84px}
  .sidebar{padding:18px 10px;align-items:center}
  .sidebar>.brand{padding:0 0 10px}
  .brand-logo{max-width:52px!important;object-fit:cover;object-position:left;width:52px;height:40px}
  .sidebar .workspace,.m-help,.byline,.legal-links,.nav .m-nav-label{display:none}
  .nav button{justify-content:center;padding:12px;width:56px}
  .nav button span{display:none}
  .nav button.active::before{left:-10px}
  .content{padding:12px 24px 56px}
  .topbar{padding:0 24px}
}
/* Phone: a top app bar, a bottom tab bar, and sheets instead of dialogs. */
@media (max-width:760px){
  :root{--topbar:60px}
  body{font-size:15px}
  .shell{display:block;padding-bottom:calc(var(--tabbar) + env(safe-area-inset-bottom))}
  .sidebar{display:none}
  .topbar{padding:0 16px;gap:10px;height:var(--topbar);border-bottom-color:var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent)}
  .m-topbrand{display:flex;align-items:center;gap:8px;all:unset;cursor:pointer;display:flex}
  .m-topbrand img{height:30px;width:auto}
  .breadcrumb{display:none}
  .m-account .m-who{display:none}
  .m-account{padding:3px;border:0;background:transparent}
  .top-actions .btn{min-height:38px;padding:8px 12px;font-size:13px}
  .top-actions [data-action="login"]{display:none}
  .m-menu{right:12px;top:58px;width:calc(100vw - 24px);max-width:320px}
  .content{padding:14px 16px 32px}
  .page-heading{margin:4px 0 18px;align-items:flex-start}
  .page-heading h1,.m-greet h1{font-size:25px}
  .page-heading>.btn,.page-heading>.toolbar{width:100%}
  .page-heading>.btn{justify-content:center}
  .m-subtabs{width:auto;margin:0 -16px 18px;border-radius:0;border-left:0;border-right:0;padding:6px 12px;background:var(--surface)}
  .metrics-grid,.m-stats{gap:10px}
  .metric,.m-stat{padding:14px}
  .metric strong,.m-stat strong{font-size:24px}
  .m-hero{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;padding:26px 20px;gap:16px}
  .m-hero .m-hero-actions{width:100%}
  .m-hero p{margin:0 auto}
  .m-steps{grid-template-columns:minmax(0,1fr)}
  .m-step{flex-direction:row;flex-wrap:wrap;align-items:center}
  .m-step>div{flex:1;min-width:0}
  .m-step .btn{margin-top:0}
  .m-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-features{grid-template-columns:minmax(0,1fr)}
  .m-welcome{padding:24px 20px}
  .m-welcome h1{font-size:30px}
  .agent-grid,.template-grid{grid-template-columns:minmax(0,1fr)}
  .search{min-width:0;width:100%}
  .section-title{margin:26px 0 12px}

  /* Tables become cards: each row a card, each cell labelled from its header. */
  .table-wrap{overflow:visible;background:transparent;border:0;box-shadow:none}
  .data-table thead{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%;box-sizing:border-box}
  .data-table tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;margin:0 0 10px;box-shadow:var(--shadow-xs)}
  .data-table tbody tr:hover{background:var(--surface)}
  .data-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
    text-align:right;overflow-wrap:anywhere}
  .data-table td:last-child{border-bottom:0}
  .data-table td::before{content:attr(data-label);color:var(--muted);font-size:12.5px;font-weight:500;text-align:left;flex:0 0 auto;max-width:45%}
  .data-table td[data-label=""]::before{display:none}
  .data-table td[data-label=""]{justify-content:flex-end}
  .data-table td .toolbar{justify-content:flex-end}

  /* Dialogs become bottom sheets. */
  #modal{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:92vh;padding:18px 18px calc(22px + env(safe-area-inset-bottom))}
  #modal[open]{animation:m-sheet .28s var(--ease)}
  #modal::before{content:"";display:block;width:40px;height:5px;border-radius:5px;background:var(--line-strong);margin:0 auto 12px}
  #toast{bottom:calc(var(--tabbar) + 18px + env(safe-area-inset-bottom))}

  .m-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;
    height:calc(var(--tabbar) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);box-sizing:border-box;
    background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--line)}
  .m-tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:14px;
    font-size:11px;font-weight:600;color:var(--muted);position:relative;-webkit-tap-highlight-color:transparent}
  .m-tabs button svg{width:23px;height:23px;stroke-width:1.8;transition:transform .2s var(--ease)}
  .m-tabs button.active{color:var(--brand-700)}
  .m-tabs button.active svg{color:var(--brand);transform:translateY(-1px)}
  .m-tabs button.active::before{content:"";position:absolute;top:2px;width:36px;height:30px;border-radius:12px;background:var(--brand-50);z-index:-1;
    left:50%;transform:translateX(-50%)}
  .m-tabs button:active svg{transform:scale(.9)}
}
@media (max-width:380px){
  .m-quick{grid-template-columns:minmax(0,1fr)}
  .metrics-grid,.m-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .m-sheet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Touch: comfortable targets everywhere a finger lands. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .icon-btn{min-width:44px;min-height:44px}
  .field input,.field select,.field textarea{font-size:16px}
}

/* ── Pass 2 fixes ───────────────────────────────────────────────────────── */
[hidden]{display:none!important}
.topbar .top-actions{margin-left:auto!important}
.sidebar .nav button{font-size:15px;padding:11px 12px}
.workspace-picker>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Empty states: a small living orb instead of a block. */
.empty::before{width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe0b8 0,#ffb257 22%,var(--brand) 55%,#c2410c 100%);
  box-shadow:0 0 0 8px var(--brand-50),0 0 0 16px color-mix(in srgb,var(--brand-50) 50%,transparent),0 14px 28px -10px rgba(255,124,2,.7)}
/* The demo phone: room for the whole conversation. */
.m-phone{height:480px}
.m-phone-screen{padding:34px 16px 18px}
.m-phone .m-orb{--size:104px;margin:2px 0 10px}
.m-phone-screen strong{margin:2px 0 10px}
.m-phone-caption span{font-size:11.5px;line-height:1.35}

/* ── Pass 3 fixes ───────────────────────────────────────────────────────── */
/* Logos: dark ink on light surfaces, white ink on dark ones. */
.m-on-dark{display:none!important}
:root[data-theme="dark"] .m-on-light{display:none!important}
:root[data-theme="dark"] .m-on-dark{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .m-on-light{display:none!important}
  :root:not([data-theme="light"]) .m-on-dark{display:block!important}
}
.byline img.m-on-dark{display:none}
:root[data-theme="dark"] .byline img.m-on-dark{display:inline-block!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .byline img.m-on-dark{display:inline-block!important}}

/* The playground header: a calm card, not a squeezed row. */
.test-title{display:block;padding:16px 18px;border-radius:var(--r);background:linear-gradient(135deg,var(--brand-50),transparent);
  border:1px solid var(--brand-100)}
.test-title .btn{float:right;margin:-4px -6px 0 8px}
.test-title h3{font-size:17px;margin:8px 0 4px!important}
.test-title p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}

.m-sheet-row svg,.m-sheet-grid svg{width:22px!important;height:22px!important;flex:0 0 auto}
.m-sheet-row svg{width:18px!important;height:18px!important}
.m-menu svg{flex:0 0 18px}
.pill .m-wave{height:10px;gap:2px;color:currentColor}
.pill .m-wave i{width:2px}

@media (max-width:760px){
  .top-actions{width:auto!important;justify-content:flex-end!important;gap:8px!important}
  .m-topbrand img{height:28px}
}

/* ── Pass 4 fixes ───────────────────────────────────────────────────────── */
/* Inline code reads as part of the sentence; it is still click-to-copy. */
.connection code,p code,li code,td code,small code{display:inline;margin:0;padding:2px 7px;font-size:12.5px;line-height:1.7;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;word-break:break-all;color:var(--ink)}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;overflow:auto;color:var(--ink)}
.detail-list{align-items:baseline}
/* A tab strip that scrolls says so: its edges fade. */
@media (max-width:760px){
  .m-subtabs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 24px),transparent)}
}

/* ── Pass 5 fixes ───────────────────────────────────────────────────────── */
.sidebar{width:auto!important;z-index:20}
.main{grid-column:auto}
.dialog-top .icon-btn:focus-visible,.dialog-top .icon-btn:focus{box-shadow:var(--ring);border-color:var(--brand-200);outline:none}
.m-rail-logo{display:none;width:40px;height:40px;border-radius:12px}
@media (max-width:1024px) and (min-width:761px){
  .sidebar .brand{justify-content:center}
  .sidebar .brand-logo{display:none!important}
  .m-rail-logo{display:block}
}

/* ── Verification checklist ─────────────────────────────────────────────── */
.m-checklist{display:flex;flex-direction:column;gap:2px}
.m-check-row{display:flex;align-items:flex-start;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.m-check-row:last-child{border-bottom:0}
.m-check-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.m-check-row strong{font-size:15px}
.m-check-row span{font-size:13px;color:var(--muted);line-height:1.5}
.m-check-row>.btn{flex:0 0 auto}
.m-check{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-strong);margin-top:1px}
.m-check.ok{background:var(--good);border-color:var(--good);color:#fff}
.m-check svg{width:14px;height:14px;stroke-width:3}
.m-points{display:flex;align-items:center;gap:12px;margin:2px 0 2px}
.m-points .m-progress-bar{flex:1;max-width:260px;height:9px}
.m-points b{font-size:13px;color:var(--ink);white-space:nowrap}
.m-docs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.m-doc{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 10px;border-radius:var(--r-pill);background:var(--good-50);
  color:var(--good);font-size:13px}
.m-doc svg{width:14px;height:14px;stroke-width:2.6}
.m-doc b{color:var(--ink);font-weight:600}
.m-doc small{color:var(--muted)}
.m-doc-x{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:16px}
.m-doc-x:hover{background:var(--surface);color:var(--bad)}

/* ── Kept from the later passes ─────────────────────────────────────────────
   The owner's later requests, on top of the animated design above: a close
   button on the More sheet, their name, real logos instead of emoji, the
   welcome story video. */
/* The More sheet: a close button, a tappable background, and a drag that follows the finger. */
.m-sheet-scrim{cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-sheet-body{transition:transform .2s var(--ease)}
.m-sheet-close{all:unset;cursor:pointer;position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2)}
.m-sheet-close svg{width:18px;height:18px}
.m-sheet-body{position:absolute}

.m-pulse{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 8px}
.m-pulse.live{background:var(--good)}
.m-pulse.ready{background:var(--brand)}
/* Only a live line ripples; every other status dot stays still. */
.m-pulse.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;
  opacity:0;animation:m-ripple 2.4s var(--ease) infinite;color:var(--good)}

.m-status-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  padding:4px 10px 4px 9px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}
.m-status-badge.live{color:var(--good);background:var(--good-50);border-color:transparent}
.m-status-badge.ready{color:var(--brand-700);background:var(--brand-50);border-color:transparent}

/* A name, asked for once. */
.m-name-card{display:flex;align-items:center;gap:14px;padding:14px 16px;margin:0 0 16px;border-radius:var(--r);
  border:1px solid var(--brand-100);background:var(--brand-50)}
.m-name-card>div{flex:1;min-width:0}
.m-name-card strong{display:block;font-size:14.5px}
.m-name-card span{font-size:13px;color:var(--muted)}

/* Assistant cards: the real mark instead of a glossy letter. */
.agent-avatar{width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--line);
  box-shadow:none;display:grid;place-items:center}
.agent-avatar img{width:28px;height:28px;display:block}
.agent-card:hover .agent-avatar::after{display:none}

/* Proper marks instead of text ticks in the checklists. */
.check svg,.pending svg{width:14px;height:14px;stroke-width:2.6;vertical-align:-2px}
.check{color:var(--good)}
.pending{color:var(--faint)}

.m-name-card>svg{width:20px;height:20px;flex:0 0 20px;color:var(--brand)}
@media (max-width:760px){.m-name-card{flex-wrap:wrap}.m-name-card .btn{width:100%}}

/* ── Animated drawings ────────────────────────────────────────────────── */
/* The mark draws itself in the theme's ink, so its tile follows the surface. */
.m-mark .ma-mk-root{width:34px;display:block}
.m-callcard-head .m-mark .ma-mk-root{width:26px}
.hero-icon .ma-mk-root{width:34px;display:block}
.agent-avatar .ma-mk-root{width:28px;display:block}

.m-feature-art{width:80px;margin:-6px 0 2px -10px}
.m-feature-art svg{display:block}
@media (max-width:760px){.m-feature-art{width:72px;margin-left:-9px}}

/* Welcome: words on the left and the welcome video on the right. On phones the
   video comes first, edge to edge, with the words beneath it. The video always
   plays and has no controls to show. */
.m-welcome{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;padding:36px 40px}
.m-welcome-copy{max-width:520px}
.m-welcome-copy h1{font-size:clamp(30px,2.8vw,40px)}
.m-hero-video{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:#e4e7ec;
  box-shadow:0 30px 60px -30px rgba(15,23,42,.45),0 0 0 1px var(--line)}
.m-hero-video video,.m-hero-video img{display:block;width:100%;height:100%;object-fit:cover;cursor:default}
.m-hero-video video::-webkit-media-controls,.m-hero-video video::-webkit-media-controls-panel,
.m-hero-video video::-webkit-media-controls-start-playback-button,
.m-hero-video video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}
@media (max-width:1080px){
  .m-welcome{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px}
  .m-hero-video{order:-1}
  .m-welcome-copy{max-width:640px}
}
@media (max-width:760px){
  .m-welcome{padding:0 0 22px;gap:18px;overflow:hidden}
  .m-hero-video{border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:none}
  .m-welcome-copy{padding:0 18px}
  .m-welcome-copy h1{font-size:28px}
}

/* The next setup step is marked by its colour and ring, without a blinking
   orange pulse (the owner asked for no blinking orange dots). */
.m-step.next .m-step-num{animation:none}

/* Insights chart: bars that grow in and carry the free-trial bar's flowing
   gradient. The column is only a frame; the bar inside it is the drawing. */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:210px;padding:24px 0 4px;overflow:visible}
.chart-column{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;
  background:none;border-radius:0;animation:none;transform:none}
.chart-column i{display:block;width:100%;max-width:64px;border-radius:10px 10px 4px 4px;
  background:linear-gradient(0deg,var(--brand),#ffb347,var(--brand));background-size:100% 200%;
  box-shadow:0 10px 24px -14px rgba(255,124,2,.8);transform-origin:bottom;
  animation:m-grow .8s var(--ease) both,m-flow-up 3s linear infinite}
.chart-column:nth-child(2) i{animation-delay:.07s,0s}
.chart-column:nth-child(3) i{animation-delay:.14s,0s}
.chart-column:nth-child(4) i{animation-delay:.21s,0s}
.chart-column:nth-child(n+5) i{animation-delay:.28s,0s}
.chart-column span{font-size:12px;font-weight:700;color:var(--ink);animation:m-fade .6s .5s both}
.chart-column small{font-size:11px;color:var(--muted);white-space:nowrap}
@keyframes m-flow-up{from{background-position:0 0}to{background-position:0 -200%}}
/* The setup progress bar flows the same way. */
.m-progress-bar i{background:linear-gradient(90deg,var(--brand),#ffb347,var(--brand));background-size:200% 100%;
  animation:m-flow 3s linear infinite}

/* ── Billing: the Mella Starter plan ────────────────────────────────────────
   The plan card wears a slowly flowing gradient border and a soft glow, the
   same movement as the free-trial bar, so paying feels like the rest of Mella
   rather than a form. Everything still stacks cleanly at 360px. */
.plan-card,.plan-gate{position:relative;overflow:hidden;isolation:isolate;max-width:760px;
  border:1.5px solid transparent;border-radius:var(--r-xl);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(90deg,var(--brand),#ffb347,var(--violet),#ffb347,var(--brand)) border-box;
  background-size:100% 100%,300% 100%;animation:plan-border 8s linear infinite;
  box-shadow:0 24px 60px -30px rgba(255,124,2,.55),0 2px 8px rgba(15,23,42,.04)}
.plan-card{padding:28px 30px 24px;margin:0 0 8px}
.plan-aura{position:absolute;z-index:-1;inset:-40% -20% auto auto;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,124,2,.18),rgba(124,92,255,.08) 45%,transparent 70%);animation:m-breathe 6s ease-in-out infinite}
.plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.plan-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.plan-price b{font-size:46px;line-height:1;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(90deg,var(--ink),var(--brand-700),var(--ink));background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:m-flow 6s linear infinite}
.plan-price span{color:var(--muted);font-size:15px;font-weight:500}
.plan-name{font-size:26px;margin:4px 0 0;letter-spacing:-.02em}
.plan-when{color:var(--muted);font-size:14px;margin:4px 0 0}
.plan-lede{color:var(--ink-2);margin:14px 0 4px;max-width:56ch;line-height:1.6}
.plan-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px}
.plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--ink-2);animation:m-rise .5s var(--ease) both}
.plan-list li:nth-child(2){animation-delay:.05s}.plan-list li:nth-child(3){animation-delay:.1s}
.plan-list li:nth-child(4){animation-delay:.15s}.plan-list li:nth-child(5){animation-delay:.2s}.plan-list li:nth-child(6){animation-delay:.25s}
.plan-list b{color:var(--ink)}
.plan-tick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),#ffb347);box-shadow:0 4px 12px -4px rgba(255,124,2,.7)}
.plan-tick svg{width:13px;height:13px}
.plan-cta{margin-top:24px}
.plan-cta .btn.primary{background:linear-gradient(90deg,var(--brand),#ff9a3c,var(--brand));background-size:200% 100%;border-color:transparent;color:#fff;
  box-shadow:0 10px 26px -12px rgba(255,124,2,.9);animation:m-flow 4s linear infinite}
.plan-cta .btn.primary:hover:not(:disabled){box-shadow:0 14px 32px -12px rgba(255,124,2,1);filter:brightness(1.04)}
.plan-card .footnote{margin-top:12px}
.plan-meter{margin:22px 0 4px;padding:16px 18px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.plan-meter .allowance-bar{margin:12px 0 10px}
.plan-meter.over .allowance-bar i{background:linear-gradient(90deg,var(--brand),var(--violet),#ffb347,var(--brand));background-size:200% 100%}
.plan-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.plan-stats>div{padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:3px;min-width:0}
.plan-stats span{font-size:12.5px;color:var(--muted);font-weight:500}
.plan-stats strong{font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.plan-stats small{font-size:12px;color:var(--muted)}
.plan-note{margin:14px 0 0;color:var(--ink-2);font-size:14px;line-height:1.55}
.plan-card.is-failing{background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(90deg,var(--bad),#ff9a3c,var(--bad)) border-box;background-size:100% 100%,300% 100%}
.plan-alert{max-width:760px;display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;
  padding:16px 20px;margin:0 0 16px;border-radius:var(--r-lg);background:var(--bad-50);
  border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);box-shadow:0 14px 34px -22px rgba(220,38,38,.6)}
.plan-alert>div:first-child{flex:1 1 300px;min-width:0}
.plan-alert strong{color:var(--bad);font-size:15px}
.plan-alert p{margin:4px 0 0;color:var(--ink-2);font-size:14px;line-height:1.5}
.plan-alert .plan-cta{margin-top:0}
.plan-setup{max-width:760px}
.plan-gate{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:20px 22px;margin:0 0 20px;max-width:none}
.plan-gate-text{flex:1 1 320px;min-width:0}
.plan-gate strong{display:block;font-size:16px;margin:6px 0 4px;color:var(--ink)}
.plan-gate p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.plan-gate .toolbar .btn.primary{background:linear-gradient(90deg,var(--brand),#ff9a3c,var(--brand));background-size:200% 100%;border-color:transparent;color:#fff;
  animation:m-flow 4s linear infinite}
.data-table.plan-invoices{min-width:0;width:100%}
.plan-invoices td.amount{font-variant-numeric:tabular-nums;white-space:nowrap}
.plan-invoices td.amount small{display:block;color:var(--muted);font-size:12px}
.plan-invoices td .toolbar{gap:6px;flex-wrap:nowrap;justify-content:flex-end}
.plan-invoices td .btn{padding:7px 14px}
@keyframes plan-border{from{background-position:0 0,0 0}to{background-position:0 0,-300% 0}}
@media (max-width:760px){
  .plan-card{padding:22px 18px 20px;border-radius:var(--r-lg)}
  .plan-list{grid-template-columns:minmax(0,1fr)}
  .plan-stats{grid-template-columns:minmax(0,1fr)}
  .plan-price b{font-size:40px}
  .plan-aura{width:300px;height:300px}
  .plan-cta .btn,.plan-gate .toolbar .btn{flex:1 1 auto;justify-content:center}
  .plan-gate .toolbar{width:100%}
}