/* IGMsg design system - app layer (dashboard, automations, inbox, settings,
   billing, admin, auth). Brand: pink #e11d74, Plus Jakarta Sans (headings 800,
   letter-spacing -0.04em). Marketing pages load marketing.css instead; both
   files share the same shell block (lines below up to "APP SHELL v2" /
   "marketing layer"). No build step: components are Jinja macros. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/static/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  --canvas: #f9fafb;          /* gray-50 */
  --surface: #ffffff;
  --ink: #111827;             /* gray-900 */
  --ink-soft: #6b7280;        /* gray-500 */
  --line: #e5e7eb;            /* gray-200 */
  --line-soft: #f3f4f6;       /* gray-100 */
  --brand: #e11d74;           /* brand-500 */
  --brand-deep: #be185d;      /* brand-600 */
  --brand-text: #be185d;      /* AA text-on-white pink: links, inline brand text (fills keep --brand) */
  --brand-text: #be185d;      /* AA text-on-white pink: links, inline brand text (fills keep --brand) */
  --brand-tint: #fdf2f8;      /* brand-50 */
  --brand-line: #f9a8d4;      /* brand-300 */
  --sent: #059669;
  --warn: #b45309;
  --danger: #dc2626;
  --radius: 10px;
  --radius-lg: 14px;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --shadow-pop: 0 10px 30px -12px rgba(17, 24, 39, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand); color: #fff; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
a { color: var(--brand-aa-text, var(--brand-text)); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* Explicit focus rings for every interactive control (a11y sprint 2026-10).
   Inputs keep their box-shadow ring; nav/tab items use an inset ring so the
   outline is not clipped by the sticky sidebar or the fixed tab bar. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-primary:focus-visible,
[role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-offset: 2px; }
.nav-link:focus-visible, .m-tab:focus-visible, details.nav-more > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.nav-link.active:focus-visible { outline-color: var(--ink); }
/* Explicit focus rings for every interactive control (a11y sprint 2026-10).
   Inputs keep their box-shadow ring; nav/tab items use an inset ring so the
   outline is not clipped by the sticky sidebar or the fixed tab bar. */
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-primary:focus-visible,
[role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-offset: 2px; }
.nav-link:focus-visible, .m-tab:focus-visible, details.nav-more > summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.nav-link.active:focus-visible { outline-color: var(--ink); }

/* ---------- shell: fixed white sidebar, gray canvas ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 256px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  padding: 2px 10px 16px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand .mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #f472b6);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 0.85rem; font-weight: 800;
}

.nav-group { margin-bottom: 6px; }
.nav-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: #9ca3af; padding: 12px 10px 4px;
}

.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: #4b5563;
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
.nav-link:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--brand); color: #fff; }
.nav-link.active svg { opacity: 1; }

/* Smaller features fold away cleanly */
details.nav-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--radius);
  color: #4b5563; font-weight: 500; font-size: 0.95rem;
}
details.nav-more > summary::-webkit-details-marker { display: none; }
details.nav-more > summary { white-space: nowrap; gap: 10px; }
details.nav-more > summary svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; }
details.nav-more > summary .chev { margin-left: auto; }
details.nav-more > summary:hover { background: var(--line-soft); color: var(--ink); }
details.nav-more > summary .chev { transition: transform 0.15s; font-size: 0.8rem; color: #9ca3af; }
details.nav-more[open] > summary .chev { transform: rotate(90deg); }
details.nav-more .nav-link { padding-left: 34px; font-size: 0.9rem; }

/* Sidebar usage widget (the "DMs this month" card from the original) */
.usage-card {
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--surface);
}
.usage-card .n {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}
.usage-card .l { color: var(--ink-soft); font-size: 0.82rem; }
.usage-card .upgrade { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 0.85rem; }

.sidebar .me {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 10px 2px; font-size: 0.88rem;
}
.sidebar .me .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 700;
}
.sidebar .me .who { line-height: 1.25; }
.sidebar .me .who a { color: var(--ink-soft); font-size: 0.8rem; }

/* ---------- main column ---------- */

.main { flex: 1; padding: 30px 40px 64px; max-width: 1120px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.lede { font-size: 1.02rem; color: var(--ink-soft); margin: 6px 0 0; }
.lede strong { color: var(--ink); font-weight: 700; }

.section { padding: 24px 0; }

/* ---------- stat cards (original .stat-card, warmed hover) ---------- */

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color 0.2s;
}
.stat:hover { border-color: var(--brand-line); }
.stat .n {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat .l { color: var(--ink-soft); font-size: 0.88rem; margin-top: 2px; }

.meter { height: 6px; border-radius: 3px; background: var(--line-soft); margin-top: 12px; }
.meter > i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.meter.hot > i { background: var(--danger); }

/* ---------- activity thread ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

.thread { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 620px; }

.bubble {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
}
.bubble .who { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }
.bubble .what { color: var(--ink-soft); font-size: 0.92rem; margin-top: 2px; }
.bubble .when { font-size: 0.78rem; color: #9ca3af; margin-top: 6px; }

.bubble.sent { border-left: 3px solid var(--sent); }
.bubble.shadow { border-left: 3px solid var(--brand); }
.bubble.deferred, .bubble.queued, .bubble.requeuing { border-left: 3px solid var(--warn); }
.bubble.failed, .bubble.expired, .bubble.quota_exceeded, .bubble.rate_limited,
.bubble.window_closed { border-left: 3px solid var(--danger); }

.pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); margin-right: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}

/* ---------- quick actions: small features, one clean row ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.88rem; font-weight: 500; color: #4b5563;
  transition: border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--brand-line); color: var(--ink); text-decoration: none; }

/* ---------- forms ---------- */

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 0.92rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.12);
}
.field .hint { font-size: 0.84rem; color: var(--ink-soft); margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--brand-deep); text-decoration: none; color: #fff; }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.quiet:hover { background: var(--line-soft); }
.btn.dark { background: var(--ink); }
.btn.dark:hover { background: #1f2937; }
.btn.danger { background: var(--danger); }

/* ---------- feedback ---------- */

.alert {
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 18px;
}
.alert.error { border-color: #fecaca; background: #fef2f2; color: var(--danger); }
.alert.ok { border-color: #a7f3d0; background: #ecfdf5; color: var(--sent); }

.badge {
  display: inline-block;
  font-size: 0.76rem; font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--surface);
}
.badge.on { border-color: #a7f3d0; color: var(--sent); background: #ecfdf5; }
.badge.off { border-color: #fecaca; color: var(--danger); background: #fef2f2; }

.empty {
  color: var(--ink-soft);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  margin-top: 14px;
}
.empty a { font-weight: 600; }

/* ---------- auth (guest) ---------- */

.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate-card { width: 100%; max-width: 400px; }
.gate-card .brand { padding: 0 0 4px; font-size: 1.4rem; }
.gate-card .sub { color: var(--ink-soft); margin: 0 0 22px; }
.gate-card form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-pop);
}
.gate-card .btn { width: 100%; }
.gate-card .swap { margin-top: 16px; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- tables ---------- */

table.flat { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
table.flat th {
  text-align: left; font-weight: 600; font-size: 0.86rem; color: var(--ink-soft);
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--canvas);
}
table.flat td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
table.flat tr:last-child td { border-bottom: none; }

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: row;
             align-items: center; overflow-x: auto; padding: 10px; gap: 2px; }
  .brand { padding: 0 12px 0 4px; }
  .nav-title, .usage-card, .sidebar .me, details.nav-more { display: none; }
  .nav-group { display: flex; margin: 0; }
  .main { padding: 20px 16px 44px; }
}

/* ---------- row cards (automations, accounts lists) ---------- */

.rows { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }

.row-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  transition: border-color 0.2s;
}
.row-card:hover { border-color: var(--brand-line); }
.row-card.paused { background: var(--canvas); }
.row-card.paused .row-title strong { color: var(--ink-soft); }

.row-title { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.row-sub { color: var(--ink-soft); font-size: 0.88rem; margin-top: 2px; }
.row-side { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.row-count { color: var(--ink-soft); font-size: 0.85rem; text-align: right; }
.row-count span {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.row-actions { display: flex; gap: 8px; }
.row-actions .btn { padding: 7px 14px; font-size: 0.9rem; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill {
  font-size: 0.8rem; font-weight: 500;
  background: var(--brand-tint); color: var(--brand-deep);
  border-radius: 999px; padding: 2px 10px;
}

/* ---------- automation form: stacked cards (ported from the Laravel design) ---------- */

.form-stack { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }

.form-cols {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 20px; align-items: start;
}
.form-cols .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form-cols .col.side { position: sticky; top: 24px; }
@media (max-width: 980px) {
  .form-cols { grid-template-columns: 1fr; }
  .form-cols .col.side { position: static; }
}

.fcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px;
}
.fcard h2 { font-size: 1.02rem; }
.fcard .sub { color: var(--ink-soft); font-size: 0.8rem; margin: 3px 0 0; }
.fcard .card-head { margin-bottom: 16px; }

.klabel {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #9ca3af; font-weight: 700; margin: 0 0 3px;
}

.matchgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.matchopt {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 12px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
  transition: all 0.15s; text-align: center;
}
.matchopt:hover { border-color: var(--brand); }
.matchopt input { position: absolute; opacity: 0; }
.matchopt:has(input:checked) {
  border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep);
}

.switchrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.switch { position: relative; display: inline-flex; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch i {
  position: absolute; inset: 0; background: #d1d5db;
  border-radius: 999px; transition: background 0.2s;
}
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform 0.2s;
}
.switch input:checked + i { background: var(--brand); }
.switch input:checked + i::after { transform: translateX(20px); }

.varlink {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 0.88rem; font-weight: 600;
  color: var(--brand-deep); cursor: pointer;
}
.varlink:hover { color: var(--brand-text); }
.var-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.var-remove {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 0.78rem; color: #dc2626; cursor: pointer;
}

.inline-num { display: flex; align-items: center; gap: 14px; }
.inline-num input { width: 120px; }
.inline-num .note { font-size: 0.8rem; color: var(--ink-soft); }
.inline-num .note strong { color: var(--brand-deep); }

.warnbox {
  margin-top: 12px; padding: 12px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
  font-size: 0.8rem; color: #78350f; line-height: 1.6;
}

.tipscard { background: var(--brand-tint); border-color: var(--brand-line); }
.tipscard ul {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; font-size: 0.88rem;
}
.tipscard li { display: flex; gap: 9px; align-items: flex-start; }
.tipscard li::before { content: "\2713"; color: var(--brand-deep); font-weight: 700; }

.form-actions { display: flex; align-items: center; gap: 16px; }

@media (max-width: 820px) {
  .row-card { flex-direction: column; align-items: stretch; }
  .row-side { justify-content: space-between; }
  .matchgrid { grid-template-columns: 1fr; }
}

/* ================= premium layer =================
   Depth, glow and the dark hero band - approved from the concept canvas.
   Overrides the flat defaults above; tokens stay the same. */

:root {
  --grad: linear-gradient(135deg, #f472b6, #e11d74 55%, #be185d);
  --dark: #12151c;
  --dark-2: #1a1e28;
  --dark-txt: #e7e9ee;
  --dark-soft: #9aa1ad;
  --glow: 0 10px 30px -8px rgba(225, 29, 116, 0.55);
}

.btn {
  background: var(--grad);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: none;
}
.btn:hover { background: var(--grad); filter: brightness(1.06); }
.btn.quiet { background: var(--surface); border: 1px solid var(--line); box-shadow: none; filter: none; }
.btn.quiet:hover { background: var(--line-soft); }
.btn.danger { background: var(--danger); box-shadow: none; }

.brand .mark { background: var(--grad); box-shadow: 0 8px 18px -6px rgba(225, 29, 116, 0.55); }
.nav-link.active { background: var(--grad); box-shadow: 0 8px 20px -8px rgba(225, 29, 116, 0.6); }

.stat, .panel, .row-card, .gate-card form {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 18px 40px -28px rgba(17, 24, 39, 0.18);
}

/* Dark panel: sidebar usage card + dashboard hero */
.dark-panel {
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(225, 29, 116, 0.32), transparent 55%),
    radial-gradient(90% 120% at -10% 110%, rgba(225, 29, 116, 0.14), transparent 50%),
    linear-gradient(160deg, var(--dark-2), var(--dark));
  border-radius: 22px;
  color: var(--dark-txt);
}
.dark-panel .soft { color: var(--dark-soft); }

.usage-card {
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(225, 29, 116, 0.32), transparent 55%),
    linear-gradient(160deg, var(--dark-2), var(--dark));
  border: none;
  color: var(--dark-txt);
}
.usage-card .n { color: #fff; }
.usage-card .l { color: var(--dark-soft); }
.usage-card .meter { background: rgba(255, 255, 255, 0.14); }
.usage-card .meter > i { box-shadow: 0 0 12px var(--brand); }
.usage-card .upgrade {
  display: inline-block; margin-top: 10px;
  background: var(--grad); color: #fff;
  padding: 7px 14px; border-radius: 10px;
  font-weight: 700; font-size: 0.82rem;
  box-shadow: var(--glow);
}
.usage-card .upgrade:hover { text-decoration: none; filter: brightness(1.06); }

/* Hero band on the dashboard */
.hero {
  padding: 24px 28px;
  display: flex; align-items: center; gap: 32px;
}
.hero .k { font-size: 0.82rem; font-weight: 600; color: var(--dark-soft); }
.hero .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.hero .facts { display: flex; gap: 18px; margin-top: 8px; font-size: 0.86rem; color: var(--dark-soft); }
.hero .facts b { color: #fff; }
.hero .spark { margin-left: auto; flex-shrink: 0; }

/* Avatars */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 0.9rem;
}
.avatar.small { width: 30px; height: 30px; font-size: 0.75rem; }
.hue-0 { background: linear-gradient(135deg, #e11d74, #e11d7488); }
.hue-1 { background: linear-gradient(135deg, #8b5cf6, #8b5cf688); }
.hue-2 { background: linear-gradient(135deg, #0ea5e9, #0ea5e988); }
.hue-3 { background: linear-gradient(135deg, #10b981, #10b98188); }
.hue-4 { background: linear-gradient(135deg, #ec4899, #ec489988); }
.hue-5 { background: linear-gradient(135deg, #f59e0b, #f59e0b88); }
.hue-6 { background: linear-gradient(135deg, #6366f1, #6366f188); }

/* Ring (conic) stat */
.ringwrap { display: flex; align-items: center; gap: 14px; }
.ring {
  width: 66px; height: 66px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
}
.ring > i {
  width: 48px; height: 48px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
}

/* Feed rows: avatar + status chip, replaces the plain bubble look */
.bubble {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--surface); border: none;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0; padding: 13px 2px;
}
.thread { gap: 0; }
.bubble .body { flex: 1; min-width: 0; }
.bubble .when { margin-top: 3px; }
.bubble.sent, .bubble.shadow, .bubble.deferred, .bubble.queued, .bubble.requeuing,
.bubble.failed, .bubble.expired, .bubble.quota_exceeded, .bubble.rate_limited,
.bubble.window_closed { border-left: none; }
.bubble.sent .badge { border-color: #a7f3d0; color: var(--sent); background: #ecfdf5; }
.bubble.shadow .badge { border-color: #f9a8d4; color: var(--brand-deep); background: var(--brand-tint); }
.bubble.deferred .badge, .bubble.queued .badge, .bubble.requeuing .badge {
  border-color: #fde68a; color: var(--warn); background: #fffbeb; }
.bubble.failed .badge, .bubble.expired .badge, .bubble.quota_exceeded .badge,
.bubble.rate_limited .badge, .bubble.window_closed .badge {
  border-color: #fecaca; color: var(--danger); background: #fef2f2; }

.pulse { box-shadow: 0 0 10px var(--brand); }

/* Sparkline */
.spark svg { display: block; }

/* Auth gate: glow backdrop */
.gate {
  background:
    radial-gradient(50% 40% at 50% 30%, var(--brand-tint), transparent 70%),
    var(--canvas);
}

/* ================= premium layer 2: pages ================= */

/* medallions + row icons */
.medal {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  box-shadow: 0 6px 14px -4px rgba(225, 29, 116, 0.5);
}
.row-icon {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-deep);
  display: grid; place-items: center;
}
.row-icon svg { width: 20px; height: 20px; }
.row-card { padding: 18px 22px; gap: 16px; }
.row-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,24,39,0.05), 0 24px 48px -24px rgba(225, 29, 116,0.28); }
.row-main { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }

/* segmented control */
.seg { display: inline-flex; gap: 4px; background: #eef0f4; border-radius: 12px; padding: 4px; font-size: 0.86rem; font-weight: 600; }
.seg a, .seg span { padding: 7px 15px; border-radius: 9px; color: var(--ink-soft); }
.seg .on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.seg a:hover { text-decoration: none; color: var(--ink); }

/* account cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }
.acct-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; text-align: center;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 18px 40px -28px rgba(17,24,39,0.18);
}
.acct-card .avatar { width: 56px; height: 56px; font-size: 1.3rem; margin: 0 auto 12px; }
.acct-card.off { background: var(--canvas); }
.acct-card .h { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.acct-card .s { color: var(--ink-soft); font-size: 0.84rem; margin-top: 4px; }
.acct-card .foot { margin-top: 14px; }
.slotdots { display: inline-flex; gap: 5px; vertical-align: middle; margin-left: 8px; }
.slotdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px rgba(225, 29, 116,0.6); }
.slotdots i.free { background: var(--line); box-shadow: none; }
.upsell-card {
  border-radius: 18px; padding: 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.upsell-card .h { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.upsell-card .s { color: var(--dark-soft); font-size: 0.84rem; }
.add-card {
  border: 2px dashed var(--line); border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--ink-soft); font-weight: 600;
}
.add-card:hover { border-color: var(--brand-line); color: var(--brand-deep); text-decoration: none; }
.add-card .plus { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; }

/* leaderboard bars */
.board-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.board-row:last-child { border-bottom: none; }
.board-rank {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
}
.board-bar { flex: 1.4; height: 9px; border-radius: 5px; background: var(--line-soft); }
.board-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--grad); box-shadow: 0 2px 8px rgba(225, 29, 116,0.4); }
.board-n { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; width: 70px; text-align: right; font-variant-numeric: tabular-nums; }

/* plan cards */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; align-items: stretch; }
.plan-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 24px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 18px 40px -28px rgba(17,24,39,0.18);
}
.plan-card.featured { border-color: #f9a8d4; box-shadow: 0 24px 60px -20px rgba(225, 29, 116,0.4); }
.plan-card .ribbon {
  position: absolute; top: -12px; right: 18px;
  background: var(--grad); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 3px 12px; border-radius: 999px; box-shadow: var(--glow);
}
.plan-card .name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.plan-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2rem; margin-top: 4px; }
.plan-card .price small { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; font-family: var(--font-body); }
.plan-card ul { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-card li { font-size: 0.88rem; color: #4b5563; display: flex; gap: 9px; }
.plan-card li::before { content: "\2713"; color: var(--sent); font-weight: 800; }
.plan-card .btn { width: 100%; }

/* meters inside the dark current-plan panel */
.plan-meter { flex: 1; }
.plan-meter .t { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--dark-soft); }
.plan-meter .t b { color: #fff; font-weight: 700; }
.plan-meter .meter { background: rgba(255,255,255,0.14); margin-top: 7px; }
.plan-meter .meter > i { box-shadow: 0 0 10px var(--brand); }

@media (max-width: 900px) {
}

/* ================= mobile app shell =================
   Under 900px the sidebar disappears and IGMsg behaves like an app:
   frosted top bar, bottom tab bar, and a slide-up "More" sheet. */

.foot {
  margin-top: 56px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 0.8rem; color: #9ca3af;
}
.foot a { color: #9ca3af; font-weight: 500; }
.foot a:hover { color: var(--brand-deep); text-decoration: none; }

.m-top, .m-tabs { display: none; }
.m-sheet { display: none; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .main {
    padding: 76px 16px calc(88px + env(safe-area-inset-bottom));
    max-width: none;
  }
  h1 { font-size: 1.45rem; }
  .section { padding: 10px 0; }
  .page-head { flex-wrap: wrap; }
  .lede { font-size: 0.95rem; }
  .dark-panel.hero { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero svg, .panel svg { max-width: 100%; height: auto; }
  .foot { margin-bottom: 4px; }

  /* frosted top bar */
  .m-top {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .m-top .brand { padding: 0; font-size: 1.05rem; }
  .m-top .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--grad); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 0.9rem;
    box-shadow: 0 4px 10px -3px rgba(225, 29, 116, 0.5);
  }
  .m-top .avatar:hover { text-decoration: none; }

  /* bottom tab bar */
  .m-tabs {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .m-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0 3px; border-radius: 12px;
    color: #6b7280; font-size: 0.66rem; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .m-tab svg { width: 21px; height: 21px; }
  .m-tab:hover { text-decoration: none; }
  .m-tab.active { color: var(--brand-text); }
  .m-tab.active::after {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand); margin-top: 1px;
  }

  /* slide-up "More" sheet */
  .m-sheet { display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none; }
  .m-sheet .scrim {
    position: absolute; inset: 0; background: rgba(17, 24, 39, 0.45);
    opacity: 0; transition: opacity 0.25s;
  }
  .m-sheet .tray {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 22px 22px 0 0;
    padding: 14px 18px calc(26px + env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.25, 1);
    box-shadow: 0 -20px 60px rgba(17, 24, 39, 0.28);
  }
  #m-more:checked ~ .m-sheet { pointer-events: auto; }
  #m-more:checked ~ .m-sheet .scrim { opacity: 1; }
  #m-more:checked ~ .m-sheet .tray { transform: none; }
  .tray .grab {
    width: 44px; height: 5px; border-radius: 3px;
    background: var(--line); margin: 0 auto 16px;
  }
  .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .m-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 6px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--canvas);
    font-size: 0.78rem; font-weight: 600; color: var(--ink);
  }
  .m-tile svg { width: 22px; height: 22px; color: var(--brand-deep); }
  .m-tile:hover { text-decoration: none; border-color: var(--brand-line); }
  .m-out {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 14px; padding: 12px;
    border: 1px solid #fecaca; border-radius: 14px;
    color: var(--danger); font-weight: 600; font-size: 0.88rem;
  }
  .m-out svg { width: 18px; height: 18px; }
  .m-out:hover { text-decoration: none; background: #fef2f2; }
}

/* ================= PHP parity layer =================
   Faithful port of the Laravel app's Tailwind design: white rounded-xl cards,
   solid-orange sidebar links, gradient usage widget, sticky blurred top bar. */

.sidebar { padding: 0; }
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  height: 64px; padding: 0 24px; flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.sb-brand .mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), #f472b6);
  display: inline-grid; place-items: center;
  color: #fff; font-size: 0.9rem; font-weight: 800;
}
.sb-ws { padding: 12px 12px 8px; flex-shrink: 0; }
.ws-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
}
.ws-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #f472b6, var(--brand-deep));
  color: #fff; font-size: 0.75rem; font-weight: 600;
  display: grid; place-items: center;
}
.ws-meta { min-width: 0; line-height: 1.2; }
.ws-meta .k {
  display: block; font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: #9ca3af; font-weight: 600;
}
.ws-meta .v {
  display: block; font-size: 0.88rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-switch { position: relative; }
.ws-switch > summary { cursor: pointer; list-style: none; }
.ws-switch > summary::-webkit-details-marker { display: none; }
.ws-switch[open] > summary { border-color: var(--brand-line); }
.ws-caret { width: 14px; height: 14px; margin-left: auto; color: #9ca3af; flex-shrink: 0; }
.ws-menu {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; box-shadow: 0 10px 24px rgba(17,24,39,0.12);
}
.ws-menu form { margin: 0; }
.ws-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 8px; background: none;
  font-size: 0.85rem; color: var(--ink); text-align: left; cursor: pointer;
}
.ws-option:hover { background: var(--brand-tint); text-decoration: none; }
.ws-option.on { background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; }
.ws-option .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-connect {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px dashed #d1d5db; border-radius: 10px;
  font-size: 0.88rem; color: var(--ink-soft); transition: all 0.15s;
}
.ws-connect svg { width: 16px; height: 16px; }
.ws-connect:hover { border-color: var(--brand-line); background: rgba(253,242,248,0.5); color: var(--brand-deep); text-decoration: none; }

.sb-nav { padding: 8px 12px 16px; }
.sb-nav .nav-link { padding: 10px 16px; font-size: 0.9rem; }
.sb-nav .nav-title {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.64rem; padding: 16px 12px 4px;
}
.nav-count {
  margin-left: auto; min-width: 24px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep);
  font-size: 0.72rem; font-weight: 600;
  display: inline-grid; place-items: center;
}
.nav-link.active .nav-count { background: rgba(255,255,255,0.25); color: #fff; }
.sb-spacer { flex: 1; min-height: 24px; }

/* usage widget - gradient header + metrics row */
.usage-w {
  display: block; margin: 8px 12px 12px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(17,24,39,0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  color: inherit;
}
.usage-w:hover { border-color: #d1d5db; box-shadow: 0 4px 10px rgba(17,24,39,0.08); text-decoration: none; }
.uw-top { padding: 16px 16px 12px; background: linear-gradient(135deg, rgba(253,242,248,0.8), rgba(252,231,243,0.4), #fff); }
.uw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.uw-head .k { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 700; }
.uw-plan { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 4px; }
.uw-plan.free { background: var(--line-soft); color: #374151; border: 1px solid var(--line); }
.uw-plan.paid { background: #111827; color: #fff; }
.uw-big b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uw-big span { font-size: 0.72rem; color: var(--ink-soft); font-weight: 500; }
.uw-trend { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }
.uw-trend.up { color: #15803d; font-weight: 600; }
.uw-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin-top: 10px; }
.uw-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.uw-bar i.warm { background: #f59e0b; }
.uw-bar i.hot { background: #ef4444; }
.uw-frac { font-size: 0.64rem; color: var(--ink-soft); margin-top: 6px; font-variant-numeric: tabular-nums; }
.uw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.uw-grid .k { display: block; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; font-weight: 600; }
.uw-grid .v { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.up-btn {
  margin: 0 12px 12px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #111827; color: #fff; border-radius: 12px;
  font-size: 0.78rem; font-weight: 600; transition: background 0.15s;
}
.up-btn svg { width: 14px; height: 14px; color: #fcd34d; }
.up-btn:hover { background: #000; text-decoration: none; }

/* top bar */
.mainwrap { flex: 1; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 12px 32px;
}
.tb-title { font-size: 1.35rem; }
.tb-title:empty { display: none; }
.tb-sub { margin: 2px 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.tb-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 0.875rem; font-weight: 500; color: #4b5563; transition: all 0.15s;
}
.tb-link svg { width: 16px; height: 16px; }
.tb-link:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }

.avatar-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #f472b6, var(--brand-deep));
  color: #fff; font-weight: 600; font-size: 0.875rem;
  display: inline-grid; place-items: center;
  border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(17,24,39,0.2);
  transition: box-shadow 0.15s;
}
.avatar-btn:hover { box-shadow: 0 0 0 2px var(--brand-tint), 0 4px 8px rgba(17,24,39,0.2); text-decoration: none; }

.dd { position: relative; }
.menu {
  display: none; position: absolute; right: 0; top: 100%; margin-top: 8px;
  width: 240px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 0; z-index: 50;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.menu.open { display: block; }
.menu-head { padding: 4px 16px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-head .n { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.menu-head .e { margin: 0; font-size: 0.75rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 0.875rem; color: #374151;
}
.menu a svg { width: 16px; height: 16px; color: #9ca3af; }
.menu a:hover { background: #f9fafb; text-decoration: none; }
.menu a.danger { color: var(--danger); }
.menu a.danger svg { color: var(--danger); }
.menu a.danger:hover { background: #fef2f2; }
.menu-sep { border-top: 1px solid var(--line-soft); margin: 4px 0; }

/* cards + buttons (Laravel component classes) */
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card.pad { padding: 24px; }
.card-h { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--line-soft); }
.card-h h2 { font-size: 1rem; }

.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(--brand-line); }
.stat-card .k-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-card .k { font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.stat-card .n { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.stat-card .sub { font-size: 0.75rem; color: #9ca3af; margin-top: 2px; }

.icon-chip { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.icon-chip svg { width: 16px; height: 16px; }
.chip-brand { background: #fce7f3; color: var(--brand-deep); }
.chip-green { background: #dcfce7; color: #16a34a; }
.chip-blue { background: #dbeafe; color: #2563eb; }
.chip-purple { background: #f3e8ff; color: #9333ea; }

.btn-primary, .btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: #fff;
  transition: background 0.2s;
}
.btn-primary { background: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); text-decoration: none; }
.btn-dark { background: #111827; }
.btn-dark:hover { background: #1f2937; text-decoration: none; }
.btn-primary svg, .btn-dark svg { width: 16px; height: 16px; }
.btn-block { width: 100%; padding: 10px 16px; font-size: 0.875rem; }

.pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0;
  padding: 2px 8px; border-radius: 999px;
}
.ping { position: relative; display: inline-flex; width: 6px; height: 6px; }
.ping::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #22c55e; opacity: 0.75;
}
.ping::after { content: ""; position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
@media (prefers-reduced-motion: no-preference) {
  .ping::before { animation: ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
  @keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
}

/* live activity rows (Laravel dashboard feed) */
.act-row { padding: 16px 24px; border-top: 1px solid var(--line-soft); display: flex; align-items: flex-start; gap: 12px; }
.act-row:first-child { border-top: none; }
.act-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: var(--brand-deep); font-size: 0.875rem; font-weight: 600;
  display: grid; place-items: center;
}
.act-body { flex: 1; min-width: 0; }
.act-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-who b { font-size: 0.875rem; }
.act-who time { font-size: 0.75rem; color: #9ca3af; }
.act-quote { display: flex; gap: 8px; margin-top: 6px; font-size: 0.875rem; color: #374151; }
.act-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 0.75rem; color: #9ca3af; }
.kw-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: ui-monospace, monospace; font-size: 0.7rem;
  color: var(--brand-deep); background: var(--brand-tint);
  border: 1px solid #fbcfe8; padding: 1px 6px; border-radius: 4px;
}
.st-pill {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; border: 1px solid;
}
.st-pill.sent { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.st-pill.failed { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.st-pill.other { background: #fef9c3; color: #a16207; border-color: #fde68a; }

/* admin (dark gray-950 sidebar) */
.adm .sidebar { background: #030712; border-right: none; }
.adm .sb-brand { border-bottom: 1px solid #1f2937; color: #fff; }
.adm .sb-brand .sub { display: block; font-size: 0.7rem; color: #f472b6; font-weight: 500; margin-top: -2px; }
.adm .sb-nav .nav-link { color: #9ca3af; }
.adm .sb-nav .nav-link:hover { background: #1f2937; color: #fff; }
.adm .sb-nav .nav-link.active { background: #1f2937; color: #fff; }
.adm .sb-nav .nav-title { color: #6b7280; }
.adm table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.adm th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; font-weight: 600; padding: 10px 24px; border-bottom: 1px solid var(--line-soft); }
.adm td { padding: 12px 24px; border-bottom: 1px solid var(--line-soft); }
.adm tr:hover td { background: #f9fafb; }

@media (max-width: 900px) {
  .topbar { display: none; }
  .tb-title, .tb-sub { display: none; }
}

/* dashboard grids (PHP clone) */
.statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px; }
.dash-grid { display: grid; gap: 24px; align-items: start; }
.dash-side { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .statgrid { grid-template-columns: repeat(4, 1fr); }
  .dash-grid { grid-template-columns: 2fr 1fr; }
}

/* guest auth split layout (Laravel guest.blade) */
.guest { display: flex; min-height: 100vh; }
.guest-brandpanel {
  display: none; position: relative; overflow: hidden;
  width: 50%; background: #030712;
}
.gb-glow { position: absolute; border-radius: 50%; filter: blur(64px); }
.gb-glow.one { top: 80px; left: -80px; width: 384px; height: 384px; background: rgba(251,146,60,0.10); }
.gb-glow.two { bottom: 80px; right: 40px; width: 288px; height: 288px; background: rgba(251,146,60,0.05); }
.gb-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; height: 100%; }
.gb-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 48px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff;
}
.gb-logo .mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), #f472b6);
  display: inline-grid; place-items: center; color: #fff; font-size: 1.1rem; font-weight: 800;
}
.gb-logo.small { color: var(--ink); font-size: 1.1rem; margin: 0 0 40px; }
.gb-logo.small .mark { width: 32px; height: 32px; border-radius: 8px; font-size: 0.9rem; }
.gb-in h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 2.25rem;
  color: #fff; line-height: 1.2; margin: 0 0 24px;
}
.gb-in h2 span { color: #f472b6; }
.gb-in p { color: #9ca3af; font-size: 1.1rem; line-height: 1.6; max-width: 28rem; margin: 0; }
.gb-in ul { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gb-in li { display: flex; align-items: center; gap: 12px; color: #d1d5db; }
.gb-in li::before { content: "\2713"; color: #f472b6; font-weight: 700; }
.guest-form {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px 24px; background: #fff;
}
.guest-form-in { width: 100%; max-width: 24rem; }
@media (min-width: 1024px) {
  .guest-brandpanel { display: flex; }
  .guest-form .gb-logo.small { display: none; }
}

/* analytics funnel (PHP clone) */
.funnel { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
@media (min-width: 768px) { .funnel { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; } }
.f-stage {
  border: 1px solid var(--line-soft); background: rgba(249,250,251,0.6);
  border-radius: 16px; padding: 20px; text-align: center;
}
.f-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin: 0 auto 12px; }
.f-icon svg { width: 20px; height: 20px; }
.f-n { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; }
.f-l { margin: 4px 0 0; font-size: 0.875rem; font-weight: 500; color: #374151; }
.f-s { margin: 2px 0 0; font-size: 0.75rem; color: #9ca3af; }
.f-arrow { display: flex; align-items: center; justify-content: center; gap: 4px; }
@media (min-width: 768px) { .f-arrow { flex-direction: column; } }
.f-arrow svg { width: 24px; height: 24px; color: #d1d5db; transform: rotate(90deg); }
@media (min-width: 768px) { .f-arrow svg { transform: none; } }
.f-arrow span { font-size: 0.7rem; font-weight: 700; color: var(--brand-deep); white-space: nowrap; }

/* integrations catalog chips */
.int-chip {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 0.75rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.int-chip:hover { border-color: #9ca3af; color: var(--ink); }
.int-chip.on { background: #111827; border-color: #111827; color: #fff; }


/* ================= APP LAYER ================= */
/* admin extras */
.adm-sel {
  font-size: 0.75rem; padding: 6px 28px 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: #374151; font-family: inherit;
}
.adm-chip {
  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px;
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.adm-k {
  margin: 0 0 4px; font-size: 0.62rem; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.08em; display: block;
}
.bar-hover .bar-tip {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px; background: #111827; color: #fff; font-size: 0.72rem;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 5;
}
.bar-hover:hover .bar-tip { display: block; }

/* =====================================================================
   ADMIN LAYOUT (admin/base.html) - 1:1 port of layouts/admin.blade.php.
   Fixed w-64 gray-950 sidebar (off-canvas below lg), sticky white/80 blurred
   h-16 header with hamburger, p-4 / sm:p-6 / lg:p-8 content, gray-50 canvas.
   Own class names (adm-*) so the app-shell .sidebar/.topbar media rules
   (horizontal strip at 820px, hidden topbar at 900px) never apply here.
   ===================================================================== */
.adm-shell { min-height: 100vh; background: #f9fafb; }
.adm-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: 256px;
  background: #030712; overflow-y: auto;
  transform: translateX(-100%); transition: transform 0.2s ease;
}
.adm-sidebar.open { transform: none; }
.adm-brand {
  display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 24px;
  border-bottom: 1px solid #1f2937;
}
.adm-brand img { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.adm-brand .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; color: #fff; }
.adm-brand .s { display: block; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: #f472b6; margin-top: -2px; }
.adm-nav { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.adm-nav-group { padding-top: 16px; margin-top: 12px; border-top: 1px solid #1f2937; display: flex; flex-direction: column; gap: 4px; }
.adm-nav-title {
  margin: 0; padding: 0 12px 8px; font-size: 10px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.adm .sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; border-radius: 8px;
  color: #9ca3af; transition: background-color 0.15s, color 0.15s;
}
.adm .sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; }
.adm .sidebar-link:hover { background: #1f2937; color: #fff; text-decoration: none; }
.adm .sidebar-link.active { background: #1f2937; color: #fff; }
.adm-overlay { position: fixed; inset: 0; z-index: 20; background: rgba(17, 24, 39, 0.5); }
.adm-overlay[hidden] { display: none; }
.adm-main { min-width: 0; }
.adm-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e7eb;
}
.adm-header-in { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 16px; }
.adm-header-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.adm-burger { display: inline-flex; padding: 0; border: 0; background: none; color: #6b7280; cursor: pointer; }
.adm-burger:hover { color: #374151; }
.adm-burger svg { width: 24px; height: 24px; }
.adm-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; color: #111827; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-content { padding: 16px; }
.adm-flash, .adm .alert.ok {
  margin-bottom: 24px; padding: 16px; border-radius: 8px; font-size: 0.875rem;
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}
.adm .alert.error { margin-bottom: 24px; padding: 16px; border-radius: 8px; font-size: 0.875rem; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
@media (min-width: 640px) {
  .adm-header-in { padding: 0 24px; }
  .adm-content { padding: 24px; }
}
@media (min-width: 1024px) {
  .adm-sidebar { transform: none; }
  .adm-overlay { display: none !important; }
  .adm-main { margin-left: 256px; }
  .adm-burger { display: none; }
  .adm-header-in { padding: 0 32px; }
  .adm-content { padding: 32px; }
}

/* Admin page primitives shared by dashboard / analytics / settings
   (Laravel utility combos, named once). */
.adm .a-grid { display: grid; gap: 16px; }
.adm .a-grid-2-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm .a-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm .a-grid-2-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm .a-cols-2, .adm .a-cols-3 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .adm .a-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .adm .a-grid-2-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .adm .a-grid-2-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm .a-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm .a-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.adm .a-grid-2-3 > .a-span-full { grid-column: span 2 / span 2; }
@media (min-width: 1024px) { .adm .a-grid-2-3 > .a-span-full { grid-column: auto; } }
.adm .mb-6 { margin-bottom: 24px; }
.adm .mb-8 { margin-bottom: 32px; }
.adm .a-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.adm .a-p5 { padding: 20px; }
.adm .a-p6 { padding: 24px; }
.adm .a-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm .a-head-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #f3f4f6; }
.adm .a-h2 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.5rem; color: #111827; margin: 0; }
.adm .a-kicker { margin: 0; font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
.adm .a-big { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 2rem; color: #111827; }
.adm .a-mid { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; color: #111827; }
.adm .a-note { margin: 4px 0 0; font-size: 0.75rem; line-height: 1rem; color: #9ca3af; }
.adm .a-note.up { color: #16a34a; }
.adm .a-muted { font-size: 0.75rem; color: #9ca3af; }
.adm .a-tile { border-radius: 12px; border: 1px solid #f3f4f6; background: rgba(249, 250, 251, 0.6); padding: 16px; }
.adm .a-tile-brand { border-color: #fce7f3; background: rgba(255, 247, 237, 0.6); }
.adm .a-tile-brand .a-kicker { color: #be185d; }
.adm .a-tile-k { display: flex; align-items: center; gap: 8px; }
.adm .a-tile-k .e { font-size: 1.125rem; line-height: 1.75rem; }
.adm .a-per { font-size: 0.75rem; color: #9ca3af; font-weight: 400; font-family: var(--font-body); }
.adm .a-est-box { margin-bottom: 20px; border-radius: 12px; border: 1px solid #fde68a; background: #fffbeb; padding: 12px 16px; }
.adm .a-est-box p { margin: 0; font-size: 0.75rem; line-height: 1.6; color: #92400e; }
.adm .a-est { margin-left: 4px; vertical-align: middle; font-size: 10px; font-weight: 600; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 2px 6px; }
.adm .a-rev-table { width: 100%; min-width: 520px; font-size: 0.875rem; border-collapse: collapse; }
.adm .a-rev-table th { padding: 8px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; border-bottom: 1px solid #f3f4f6; text-align: left; }
.adm .a-rev-table td { padding: 10px 0; border-bottom: 1px solid #f9fafb; color: #374151; }
.adm .a-rev-table tr:hover td { background: transparent; }
.adm .a-rev-table tr.sel td { background: rgba(255, 247, 237, 0.4); }
.adm .a-rev-table .r { text-align: right; }
.adm .a-rev-table .g { color: #6b7280; }
.adm .a-rev-table .b { color: #111827; font-weight: 500; }
.adm .a-rev-table .bb { color: #111827; font-weight: 600; }
.adm .a-scroll-x { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
.adm .a-sel { border-radius: 8px; border: 1px solid #e5e7eb; background: #fff; font: inherit; font-size: 0.875rem; padding: 6px 32px 6px 12px; color: #111827; }
.adm .a-sel:focus { border-color: #f472b6; outline: 2px solid #f472b6; outline-offset: 0; }
.adm .a-foot { margin: 16px 0 0; font-size: 11px; line-height: 1.6; color: #9ca3af; }
.adm .a-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.adm .a-track { height: 10px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.adm .a-track.thin { height: 6px; }
.adm .a-track > i { display: block; height: 100%; border-radius: 999px; }
.adm .a-fill-grad { background: linear-gradient(to right, #f472b6, #e11d74); }
.adm .a-stack { display: flex; flex-direction: column; gap: 12px; }
.adm .a-stack.tight { gap: 10px; }
.adm .a-row { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-top: 1px solid #f3f4f6; }
.adm .a-row.p5 { padding: 12px 20px; }
.adm .a-row:first-child { border-top: 0; }
.adm a.a-row { color: inherit; }
.adm a.a-row:hover { background: #f9fafb; text-decoration: none; }
.adm .a-ava { width: 32px; height: 32px; border-radius: 50%; background: #fce7f3; color: #be185d; font-size: 0.75rem; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.adm .a-ava.grad { background: linear-gradient(to bottom right, #fce7f3, #fbcfe8); }
.adm .a-grow { flex: 1; min-width: 0; }
.adm .a-t1 { margin: 0; font-size: 0.875rem; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm .a-t2 { margin: 0; font-size: 0.75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm .a-empty { margin: 0; padding: 32px 24px; text-align: center; font-size: 0.875rem; color: #9ca3af; }
.adm .a-link { font-size: 0.875rem; font-weight: 500; color: #be185d; }
.adm .a-link.sm { font-size: 0.75rem; }
.adm .a-link:hover { color: #be185d; }
/* hover-tooltip bar charts (Laravel group-hover bars) */
.adm .a-bars { display: flex; align-items: flex-end; gap: 4px; }
.adm .a-bar { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.adm .a-bar > i { display: block; width: 100%; }
.adm .a-bar .tip {
  display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 4px; background: #111827; color: #fff; font-size: 0.75rem;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 10; pointer-events: none;
}
.adm .a-bar .tip.xs { font-size: 10px; }
.adm .a-bar:hover .tip { display: block; }
.adm .a-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.75rem; color: #9ca3af; }
.adm .a-axis.xs { font-size: 10px; }
.adm .a-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f3f4f6; font-size: 0.875rem; color: #4b5563; }
.adm .a-legend span { display: inline-flex; align-items: center; gap: 8px; }
.adm .a-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
/* settings form (Laravel .input-field + labels) */
.adm .a-form { max-width: 768px; }
.adm .a-field + .a-field { margin-top: 20px; }
.adm .a-label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 500; color: #374151; }
.adm .input-field {
  display: block; width: 100%; border-radius: 8px; border: 1px solid #d1d5db; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); padding: 8px 12px; font: inherit; font-size: 0.875rem;
  line-height: 1.5rem; color: #111827;
}
.adm .input-field:focus { outline: none; border-color: #e11d74; box-shadow: 0 0 0 1px #e11d74; }
.adm .input-field.w-40 { width: 160px; }
.adm .a-key { margin: 4px 0 0; font-size: 0.75rem; color: #9ca3af; }
.adm .a-key code { background: #f3f4f6; padding: 0 4px; border-radius: 4px; font-size: 0.75rem; }


/* Admin overview: blocked DM categories */
.a-blk-head,.a-blk summary,.a-blk li{display:grid;grid-template-columns:minmax(0,1fr) 64px 72px;gap:12px;align-items:center}
.a-blk-head{font-size:12px;color:#6b7280;padding:0 12px 6px;text-align:right}
.a-blk{border:1px solid #f1f1f1;border-radius:12px;margin-bottom:8px}
.a-blk summary{cursor:pointer;list-style:none;padding:12px}
.a-blk summary::-webkit-details-marker{display:none}
.a-blk-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.a-blk-name i{width:10px;height:10px;border-radius:50%;flex:none;align-self:center}
.a-blk-name small{flex-basis:100%;padding-left:20px;color:#6b7280;font-size:12px}
.a-blk-n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.a-blk-n.zero{color:#c4c4c4;font-weight:500}
.a-blk-n.zero-ok{color:#6b7280;font-weight:500}
.a-blk ul{list-style:none;margin:0;padding:0 12px 10px 32px;border-top:1px dashed #eee}
.a-blk li{padding:8px 0;font-size:14px;border-bottom:1px solid #fafafa}
.a-blk li:last-child{border-bottom:0}
.a-blk-none{padding:0 12px 12px 32px}
.a-blk-tag{font-style:normal;font-size:11px;background:#ecfdf5;color:#047857;border-radius:999px;padding:1px 8px;margin-left:6px}
.a-blk-limit i{background:#fcd34d}.a-blk-dm_off i{background:#a78bfa}.a-blk-oauth i{background:#ef4444}
.a-blk-meta i{background:#3b82f6}.a-blk-rules i{background:#9ca3af}
@media (max-width:560px){.a-blk-head,.a-blk summary,.a-blk li{grid-template-columns:minmax(0,1fr) 44px 52px;gap:8px}}

/* New automation: step indicator + post picker (port of Laravel create/configure) */
.steps{display:flex;align-items:center;gap:12px;list-style:none;margin:14px 0 20px;padding:0;font-size:.8rem;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:8px;font-weight:500;color:#9ca3af}
.steps li span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:#e5e7eb;color:#6b7280}
.steps li.on{color:var(--brand-deep);font-weight:600}
.steps li.on span{background:var(--brand);color:#fff}
.steps li.done a{display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.steps li.done a:hover{color:var(--ink);text-decoration:none}
.steps li.done span{background:#22c55e;color:#fff}
.steps li.done svg{width:12px;height:12px}
.steps li.bar{width:32px;height:1px;background:#e5e7eb}
.pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pp-sync{display:flex;gap:8px;flex-wrap:wrap}
.pp-sync form{margin:0}
.pp-syncbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.78rem;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
.pp-syncbtn:hover{background:var(--line-soft)}
.pp-syncbtn svg{width:14px;height:14px}
.pp-empty{border:1px dashed #d1d5db;background:#f9fafb;border-radius:12px;padding:48px 16px;text-align:center}
.pp-empty svg{width:48px;height:48px;color:#9ca3af;margin:0 auto 12px;display:block}
.pp-empty-t{font-weight:500;color:var(--ink);margin:0}
.pp-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pp-search{position:relative;flex:1;min-width:200px}
.pp-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#9ca3af;pointer-events:none}
.pp-search input{width:100%;box-sizing:border-box;padding:8px 12px 8px 36px;font:inherit;font-size:.88rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.pp-search input:focus{outline:2px solid var(--brand-line);border-color:transparent}
.pp-seg{display:inline-flex;background:#f3f4f6;border-radius:8px;padding:4px}
.pp-seg button{font:inherit;font-size:.75rem;font-weight:500;color:#6b7280;background:none;border:0;border-radius:6px;padding:4px 12px;cursor:pointer}
.pp-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:640px){.pp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.pp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.pp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pp-card{display:block;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.pp-card[hidden]{display:none}
.pp-card:hover{border-color:var(--brand-line);box-shadow:0 10px 24px rgba(0,0,0,.08);transform:translateY(-2px);text-decoration:none}
.pp-media{position:relative;aspect-ratio:1/1;background:#f3f4f6}
.pp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.pp-ph{position:absolute;inset:0;margin:auto;width:40px;height:40px;color:#d1d5db}
.pp-badge{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pp-badge svg{width:10px;height:10px}
.pp-use{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:12px;color:#fff;font-weight:600;font-size:.88rem;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.2) 50%,transparent);opacity:0;transition:opacity .15s}
.pp-use svg{width:16px;height:16px}
.pp-card:hover .pp-use,.pp-card:focus-visible .pp-use{opacity:1}
.pp-body{padding:12px}
.pp-cap{font-size:13px;line-height:1.35;color:var(--ink);margin:0;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pp-date{font-size:11px;color:#9ca3af;margin:6px 0 0}
.pp-none{text-align:center;padding:24px 0}
.pp-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;font-size:.85rem}
.pp-foot a{color:var(--ink-soft)}
.pp-foot span{font-size:.75rem;color:#9ca3af}
.pp-sel-thumb{position:relative;width:64px;height:64px;border-radius:8px;background:#f3f4f6;overflow:hidden;flex-shrink:0}
.pp-sel-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-sel-thumb span{position:absolute;bottom:4px;left:4px;padding:1px 4px;border-radius:3px;background:rgba(0,0,0,.6);color:#fff;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pp-sel-cap{margin:0;font-size:.88rem;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pp-change{flex-shrink:0;font-size:.78rem;font-weight:500;color:var(--brand-deep);border:1px solid var(--brand-line);border-radius:8px;padding:6px 12px}
.pp-change:hover{background:var(--brand-tint);text-decoration:none}
@media (max-width:480px){.pp-seg{width:100%;justify-content:space-between}.pp-seg button{padding:4px 8px}}

/* ================= APP SHELL v2 =================
   Calmer SaaS shell: warm-neutral canvas, tinted active nav with a brand
   rail, pink usage meter and upgrade CTA. Overrides the parity layer above. */
:root { --canvas: #faf8fb; --line: #ece8f0; --line-soft: #f5f2f7; }
.shell .sidebar { background: #fff; border-right: 1px solid var(--line); }
.shell .sb-brand { height: 68px; border-bottom: 1px solid var(--line-soft); }
.shell .sb-brand .mark { width: 32px; height: 32px; background: none; box-shadow: none; border-radius: 0; }
.shell .ws-card { border-color: var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.shell .ws-card:hover { border-color: var(--brand-line); box-shadow: 0 4px 12px -6px rgba(225, 29, 116, 0.25); }
.shell .sb-nav .nav-link {
  position: relative; padding: 9px 14px; margin: 1px 0; border-radius: 10px;
  color: #4b4458; font-weight: 500; transition: background .12s, color .12s;
}
.shell .sb-nav .nav-link svg { opacity: .7; }
.shell .sb-nav .nav-link:hover { background: var(--line-soft); color: var(--ink); }
.shell .sb-nav .nav-link.active {
  background: var(--brand-tint); color: var(--brand-deep); font-weight: 650; box-shadow: none;
}
.shell .sb-nav .nav-link.active svg { opacity: 1; color: var(--brand); }
.shell .sb-nav .nav-link.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand);
}
.shell .nav-link.active .nav-count { background: var(--brand); color: #fff; }
.shell .sb-nav .nav-title { color: #a39cae; font-weight: 700; }

.shell .usage-w { border-radius: 18px; border-color: var(--line); box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 12px 28px -22px rgba(157,23,77,.35); }
.shell .usage-w:hover { border-color: var(--brand-line); }
.shell .uw-top { background: radial-gradient(120% 90% at 100% 0%, #fce7f3 0%, rgba(253,242,248,.6) 45%, #fff 80%); }
.shell .uw-plan.paid { background: var(--brand); }
.shell .uw-bar { background: #f3e8ef; }
.shell .uw-bar i { background: linear-gradient(90deg, #f472b6, var(--brand)); }
.shell .uw-bar i.warm { background: #f59e0b; }
.shell .uw-bar i.hot { background: #ef4444; }
.shell .up-btn {
  background: var(--grad); color: #fff; border-radius: 12px; font-size: .82rem;
  box-shadow: 0 3px 0 #9d174d, 0 10px 22px -10px rgba(225, 29, 116, .7);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.shell .up-btn svg { color: #fff; }
.shell .up-btn:hover { background: var(--grad); filter: brightness(1.05); transform: translateY(-1px); }
.shell .up-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9d174d; }

.shell .topbar { background: rgba(255,255,255,.86); border-bottom-color: var(--line); }
.shell .topbar-in { min-height: 68px; }
.shell .tb-title { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.02em; }
.shell .tb-sub { color: #6f6880; }
.shell .tb-link { border: 1px solid transparent; }
.shell .tb-link:hover { background: #fff; border-color: var(--line); }
.shell .avatar-btn { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line); }
.shell .avatar-btn:hover { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--brand-line); }
.shell .menu { border-radius: 14px; border-color: var(--line); box-shadow: 0 16px 40px -12px rgba(17,24,39,.2); }
.shell .flash { border-radius: 14px; }
@media (max-width: 900px) {
  /* Closed sheet: fully hidden (not just translated), so it never paints or gets focus. */
  .m-sheet { visibility: hidden; transition: visibility 0s linear .3s; }
  #m-more:checked ~ .m-sheet { visibility: visible; transition: none; }
}
.feed-empty { padding: 44px 24px; text-align: center; }
.feed-empty .fe-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.feed-empty .fe-icon svg { width: 24px; height: 24px; }
.feed-empty .fe-t { margin: 0; font-weight: 700; font-size: .95rem; }
.feed-empty .fe-s { margin: 4px auto 16px; max-width: 34ch; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  /* Page title stays visible on phones: the top bar becomes a static heading
     under the fixed m-top; the help/avatar actions live in m-top/m-sheet. */
  .shell .topbar { display: block; position: static; background: none; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding-top: 58px; }
  .shell .topbar-in { min-height: 0; padding: 12px 16px 0; }
  .shell .tb-right { display: none; }
  .shell .tb-title { font-size: 1.25rem; }
  .shell .tb-sub { font-size: .82rem; }
  .shell .main { padding-top: 14px; }
}

/* ================= APP PAGES v2 (dashboard, automations, leads/inbox/agent, settings/billing/developer) ================= */
/* ---- dashboard ---- */
/* ===== GROUP A (ad-) - dashboard, analytics, accounts ===== */
.shell .ad-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .ad-page h2, .shell .ad-page h3 { margin: 0; letter-spacing: -0.01em; }
.shell .ad-page p { margin: 0; }

/* page header */
.shell .ad-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shell .ad-head-copy { min-width: 0; }
.shell .ad-head-title { display: none; font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.shell .ad-head-sub { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.shell .ad-head-sub strong { color: var(--ink); font-weight: 700; }
.shell .ad-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) { .shell .ad-head-title { display: block; } }

/* buttons */
.shell .ad-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 11px; border: 1px solid transparent;
  font: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.shell .ad-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.shell .ad-btn:hover { text-decoration: none; }
.shell .ad-btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(190,24,93,.25), 0 6px 14px -8px rgba(225,29,116,.6); }
.shell .ad-btn-primary:hover { background: var(--brand-deep); color: #fff; }
.shell .ad-btn-quiet { background: #fff; color: var(--ink); border-color: #ece8f0; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.shell .ad-btn-quiet:hover { background: #faf8fb; border-color: #dcd6e2; color: var(--ink); }
.shell .ad-btn-ghost-danger { background: transparent; color: #b91c1c; }
.shell .ad-btn-ghost-danger:hover { background: #fef2f2; color: #991b1b; }
.shell .ad-btn-sm { height: 34px; padding: 0 12px; font-size: 0.82rem; border-radius: 10px; }
.shell .ad-btn-block { width: 100%; }

/* cards */
.shell .ad-card {
  background: #fff; border: 1px solid #ece8f0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px -18px rgba(17,24,39,.18);
  min-width: 0;
}
.shell .ad-pad { padding: 20px; }
.shell .ad-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.shell .ad-card-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shell .ad-card-h h3, .shell .ad-side-h h3 { font-size: 0.98rem; font-weight: 700; color: var(--ink); }
.shell .ad-card-note { padding: 4px 20px 12px; font-size: 0.8rem; color: var(--ink-soft); border-bottom: 1px solid #f3f0f5; }
.shell .ad-side-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.shell .ad-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--brand-deep); white-space: nowrap; }
.shell .ad-link svg { width: 14px; height: 14px; }
.shell .ad-link:hover { color: var(--brand-text); text-decoration: none; }
.shell .ad-count { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }

/* icon chips + dots + pills */
.shell .ad-chip { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.shell .ad-chip svg { width: 17px; height: 17px; }
.shell .ad-chip-brand { background: #fce7f3; color: var(--brand-deep); }
.shell .ad-chip-green { background: #dcfce7; color: #15803d; }
.shell .ad-chip-blue { background: #e0ecff; color: #1d4ed8; }
.shell .ad-chip-purple { background: #ede9fe; color: #6d28d9; }
.shell .ad-chip-amber { background: #fef3c7; color: #b45309; }
.shell .ad-chip-red { background: #fee2e2; color: #b91c1c; }
.shell .ad-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; vertical-align: middle; }
.shell .ad-dot-green { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.shell .ad-dot-amber { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.shell .ad-dot-red { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.shell .ad-dot-grey { background: #9ca3af; box-shadow: 0 0 0 3px #f3f4f6; }
.shell .ad-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; border: 1px solid; white-space: nowrap; line-height: 1.4;
}
.shell .ad-pill-green { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.shell .ad-pill-amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.shell .ad-pill-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.shell .ad-pill-grey { background: #f6f5f8; color: #6b7280; border-color: #e7e4ec; }
.shell .ad-pill .ad-dot { width: 6px; height: 6px; box-shadow: none; }

/* KPI row */
.shell .ad-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shell .ad-kpi {
  background: #fff; border: 1px solid #ece8f0; border-radius: 20px; padding: 18px 18px 16px;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px -18px rgba(17,24,39,.18);
  display: flex; flex-direction: column; min-width: 0;
}
.shell .ad-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.shell .ad-kpi-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.shell .ad-kpi-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.shell .ad-kpi-n { font-size: 1.75rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.shell .ad-kpi-of { font-size: 0.95rem; font-weight: 600; color: #9ca3af; letter-spacing: 0; }
.shell .ad-kpi-sub { margin-top: auto !important; padding-top: 10px; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.45; }
.shell .ad-kpi-sub .ad-dot { margin: -2px 7px 0 2px; }
.shell .ad-kpi-sub a { color: var(--brand-deep); font-weight: 600; }
.shell .ad-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; width: 70px; flex-shrink: 0; }
.shell .ad-spark i { flex: 1; border-radius: 3px; background: #f1edf4; min-height: 3px; }
.shell .ad-spark i.on { background: linear-gradient(180deg, #f472b6, var(--brand)); }
.shell .ad-meter { height: 8px; border-radius: 999px; background: #f3f0f5; overflow: hidden; margin-top: 10px; }
.shell .ad-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f472b6, var(--brand)); min-width: 4px; }
.shell .ad-meter.hot > span { background: linear-gradient(90deg, #f59e0b, #dc2626); }
.shell .ad-meter-thin { height: 6px; margin: 0 0 14px; }
@media (max-width: 1100px) { .shell .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .shell .ad-kpis { gap: 10px; }
  .shell .ad-kpi { padding: 14px; border-radius: 16px; }
  .shell .ad-kpi-n { font-size: 1.4rem; }
  .shell .ad-kpi-label { font-size: 0.76rem; }
  .shell .ad-chip { width: 28px; height: 28px; border-radius: 9px; }
  .shell .ad-chip svg { width: 15px; height: 15px; }
  .shell .ad-spark { width: 44px; height: 24px; }
}

/* dashboard grid */
.shell .ad-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.shell .ad-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1100px) { .shell .ad-grid { grid-template-columns: minmax(0, 1fr); } }

/* live feed (restyles _feed.html rows inside our wrapper only) */
.shell .ad-feed .act-row { padding: 14px 20px; border-top: 1px solid #f3f0f5; gap: 12px; transition: background .15s; }
.shell .ad-feed .act-row:first-child { border-top: none; }
.shell .ad-feed .act-row:hover { background: #fcfbfd; }
.shell .ad-feed .act-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, #fce7f3, #ede9fe); color: var(--brand-deep); font-weight: 700; }
.shell .ad-feed .act-quote { background: #f8f7fa; border-radius: 4px 12px 12px 12px; padding: 8px 12px; margin-top: 6px; color: #374151; width: fit-content; max-width: 100%; }
.shell .ad-feed .act-quote span { overflow-wrap: anywhere; }
.shell .ad-feed .kw-tag { font-family: inherit; font-weight: 600; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #fbd5e8; border-radius: 999px; padding: 1px 8px; }
.shell .ad-feed .st-pill { font-size: 0.7rem; padding: 3px 9px; }
.shell .ad-feed .st-pill.other { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.shell .ad-feed > div[style*="text-align: center"] { padding: 56px 24px !important; }
@media (max-width: 480px) {
  .shell .ad-feed .act-row { padding: 12px 14px; gap: 10px; }
  .shell .ad-feed .act-avatar { width: 32px; height: 32px; }
  .shell .ad-feed .act-who time { flex-basis: 100%; }
}

/* connected account (dashboard side) */
.shell .ad-acct { display: flex; align-items: center; gap: 12px; min-width: 0; }
.shell .ad-acct-av {
  position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #f472b6, var(--brand) 55%, #8b5cf6); color: #fff; font-weight: 700; font-size: 1rem;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fbcfe8; overflow: hidden;
}
.shell .ad-acct-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shell .ad-acct-av-empty { background: #f6f5f8; color: #9ca3af; box-shadow: none; border: 1px dashed #dcd6e2; }
.shell .ad-acct-av-empty svg { width: 22px; height: 22px; }
.shell .ad-acct-meta { min-width: 0; }
.shell .ad-acct-name { font-size: 0.92rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell .ad-acct-st { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: #15803d; margin-top: 3px !important; }
.shell .ad-acct-hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px !important; }
.shell .ad-acct-empty { margin-bottom: 16px; }
.shell .ad-acct-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.shell .ad-acct-stats > div { background: #faf8fb; border: 1px solid #f3f0f5; border-radius: 12px; padding: 10px 12px; }
.shell .ad-acct-stats b { display: block; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.shell .ad-acct-stats span { font-size: 0.72rem; color: var(--ink-soft); }

/* setup checklist */
.shell .ad-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.shell .ad-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 8px; border-radius: 12px; }
.shell .ad-steps li:hover { background: #faf8fb; }
.shell .ad-step-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  border: 1.5px solid #dcd6e2; font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); background: #fff;
}
.shell .ad-step-dot svg { width: 13px; height: 13px; }
.shell .ad-steps li.done .ad-step-dot { background: #22c55e; border-color: #22c55e; color: #fff; }
.shell .ad-steps a, .shell .ad-steps strong { font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.shell .ad-steps a:hover { color: var(--brand-deep); text-decoration: none; }
.shell .ad-steps li.done a, .shell .ad-steps li.done strong { color: #9ca3af; text-decoration: line-through; }
.shell .ad-steps p { font-size: 0.76rem; color: var(--ink-soft); margin-top: 1px; }

/* quick actions */
.shell .ad-actions { display: flex; flex-direction: column; gap: 6px; }
.shell .ad-action { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid #f3f0f5; color: var(--ink); transition: border-color .15s, background .15s; }
.shell .ad-action:hover { border-color: #fbcfe8; background: #fffafc; text-decoration: none; }
.shell .ad-action-t { display: flex; flex-direction: column; min-width: 0; }
.shell .ad-action-t b { font-size: 0.86rem; font-weight: 700; }
.shell .ad-action-t small { font-size: 0.75rem; color: var(--ink-soft); }

/* amber note */
.shell .ad-note-amber { background: #fffbeb; border-color: #fde68a; }
.shell .ad-note-p { font-size: 0.84rem; color: #78350f; line-height: 1.55; }

/* ---------- analytics ---------- */
.shell .ad-insight {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(135deg, #fdf2f8, #fff 70%); border: 1px solid #fbe0ee;
}
.shell .ad-insight p { font-size: 0.9rem; color: #374151; line-height: 1.6; padding-top: 5px; }
.shell .ad-insight strong { color: var(--ink); }
.shell .ad-insight .ad-hl, .shell .ad-brandtxt { color: var(--brand-deep) !important; }
.shell .ad-redtxt { color: #dc2626 !important; }
.shell .ad-muted { color: #9ca3af !important; }
.shell .ad-card-sub { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px !important; }
.shell .ad-chip-solid { background: var(--brand); color: #fff; }

.shell .ad-funnel { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; }
.shell .ad-fstage { border: 1px solid #f0edf3; background: #fcfbfd; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shell .ad-fstage .ad-chip { margin-bottom: 10px; }
.shell .ad-fstage-hl { background: linear-gradient(160deg, #fdf2f8, #fff); border-color: #fbd5e8; }
.shell .ad-fl { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.shell .ad-fn { font-size: 1.9rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.shell .ad-fs { font-size: 0.76rem; color: #9ca3af; }
.shell .ad-fs a { color: var(--brand-deep); font-weight: 700; }
.shell .ad-fbar { height: 6px; border-radius: 999px; background: #f1edf4; margin-top: 12px; overflow: hidden; }
.shell .ad-fbar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f472b6, var(--brand)); }
.shell .ad-farrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #c4bccc; min-width: 34px; }
.shell .ad-farrow svg { width: 18px; height: 18px; }
.shell .ad-farrow span { font-size: 0.7rem; font-weight: 700; color: var(--brand-deep); background: var(--brand-tint); border-radius: 999px; padding: 1px 7px; }
@media (max-width: 760px) {
  .shell .ad-funnel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .shell .ad-farrow { flex-direction: row; min-height: 22px; }
  .shell .ad-farrow svg { transform: rotate(90deg); }
  .shell .ad-fstage { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .shell .ad-fstage .ad-chip { margin-bottom: 0; }
  .shell .ad-fstage .ad-fl { flex: 1; }
  .shell .ad-fstage .ad-fn { font-size: 1.4rem; }
  .shell .ad-fstage .ad-fs { flex-basis: 100%; padding-left: 44px; }
  .shell .ad-fstage .ad-fbar { flex-basis: 100%; margin: 8px 0 0 44px; }
}

.shell .ad-chart-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.shell .ad-chart-h h3 { font-size: 0.98rem; font-weight: 700; }
.shell .ad-chart-sum { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px !important; }
.shell .ad-chart-sum b { color: var(--ink); }
.shell .ad-seg { font-size: 0.8rem; }
.shell .ad-seg a { padding: 6px 12px; }
.shell .ad-chart { display: flex; gap: 10px; height: 200px; }
.shell .ad-chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.7rem; color: #9ca3af; text-align: right; min-width: 16px; margin: -6px 0; font-variant-numeric: tabular-nums; }
.shell .ad-chart-plot { position: relative; flex: 1; min-width: 0; }
.shell .ad-chart-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.shell .ad-chart-grid i { display: block; border-top: 1px dashed #eee9f2; }
.shell .ad-chart-grid i:last-child { border-top: 1px solid #e7e2ec; }
.shell .ad-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.shell .ad-chart-dense .ad-bars { gap: 1px; }
.shell .ad-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 4px; min-width: 0; }
.shell .ad-bar span { display: block; width: 100%; border-radius: 4px 4px 1px 1px; background: #efeaf3; }
.shell .ad-bar.on span { background: linear-gradient(180deg, #f472b6, var(--brand)); }
.shell .ad-bar:hover { background: #fdf2f8; }
.shell .ad-bar.on:hover span { background: var(--brand-deep); }
.shell .ad-chart-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; padding: 12px; }
.shell .ad-chart-empty p { font-size: 0.8rem; color: var(--ink-soft); background: rgba(255,255,255,.9); padding: 0 8px; }
.shell .ad-chart-empty b { color: var(--ink); font-size: 0.86rem; }
.shell .ad-chart-x { display: flex; justify-content: space-between; margin: 8px 0 0 26px; font-size: 0.72rem; color: #9ca3af; }
@media (max-width: 480px) { .shell .ad-chart { height: 160px; } .shell .ad-bars { gap: 2px; } }

.shell .ad-table-wrap { overflow-x: auto; margin-top: 14px; border-top: 1px solid #f3f0f5; }
.shell .ad-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.shell .ad-table th { text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; padding: 11px 20px; background: #fcfbfd; border-bottom: 1px solid #f3f0f5; white-space: nowrap; }
.shell .ad-table td { padding: 14px 20px; border-bottom: 1px solid #f3f0f5; font-size: 0.875rem; vertical-align: middle; }
.shell .ad-table tbody tr:last-child td { border-bottom: none; }
.shell .ad-table tbody tr:hover td { background: #fcfbfd; }
.shell .ad-table .r { text-align: right; }
.shell .ad-table .c { text-align: center; }
.shell .ad-table .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.shell .ad-th-ctr, .shell .ad-td-ctr { width: 170px; }
.shell .ad-table td:first-child { min-width: 170px; }
.shell .ad-tname { font-weight: 700; color: var(--ink); }
.shell .ad-tname:hover { color: var(--brand-deep); text-decoration: none; }
.shell .ad-kws { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.shell .ad-kws span { font-size: 0.7rem; font-weight: 600; color: #6b7280; background: #f6f5f8; border: 1px solid #ece8f0; border-radius: 6px; padding: 1px 7px; }
.shell .ad-ctr { display: flex; align-items: center; gap: 10px; }
.shell .ad-ctr .num { min-width: 42px; }
.shell .ad-ctr-bar { flex: 1; height: 6px; border-radius: 999px; background: #f1edf4; overflow: hidden; }
.shell .ad-ctr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f472b6, var(--brand)); }
.shell .ad-table-empty { text-align: center; padding: 44px 20px !important; }
.shell .ad-table-empty .ad-chip { margin: 0 auto 10px; }
.shell .ad-table-empty p { color: var(--ink-soft); margin-bottom: 14px; }
.shell .ad-table-empty b { color: var(--ink); font-weight: 600; }

/* ---------- accounts ---------- */
.shell .ad-btn-lg { height: 46px; padding: 0 22px; font-size: 0.95rem; border-radius: 13px; }
.shell .ad-btn-amber { background: #d97706; color: #fff; }
.shell .ad-btn-amber:hover { background: #b45309; color: #fff; }
.shell .ad-accts { display: flex; flex-direction: column; gap: 12px; }
.shell .ad-acard { padding: 18px 20px; }
.shell .ad-acard.is-off { border-color: #fecaca; }
.shell .ad-acard-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shell .ad-acard .ad-acct { flex: 1 1 260px; }
.shell .ad-acct-av-lg { width: 52px; height: 52px; font-size: 1.15rem; }
.shell .ad-acct-av.off { background: #e5e7eb; color: #6b7280; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fecaca; }
.shell .ad-acct-av.off img { filter: grayscale(1); opacity: .7; }
.shell .ad-acard .ad-acct-name { font-size: 1rem; margin: 0; }
.shell .ad-acard-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.shell .ad-acard-sep { color: #d1d5db; }
.shell .ad-acard-meta { font-size: 0.78rem; color: var(--ink-soft); }
.shell .ad-acard-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shell .ad-acard-actions form { margin: 0; }
.shell .ad-acard-warn { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #fef2f2; color: #991b1b; font-size: 0.82rem; line-height: 1.5; }
.shell .ad-acard-warn svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.shell .ad-addcard {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-radius: 20px;
  border: 1.5px dashed #e2dce8; color: var(--ink-soft); background: transparent; transition: border-color .15s, background .15s, color .15s;
}
.shell .ad-addcard:hover { border-color: var(--brand-line); background: #fffafc; color: var(--brand-deep); text-decoration: none; }
.shell .ad-addcard-ic { width: 32px; height: 32px; border-radius: 10px; background: #fff; border: 1px solid #ece8f0; display: grid; place-items: center; }
.shell .ad-addcard-ic svg { width: 16px; height: 16px; }
.shell .ad-addcard-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.shell .ad-addcard-t b { font-size: 0.9rem; font-weight: 700; }
.shell .ad-addcard-t small { font-size: 0.76rem; }
.shell .ad-limit { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: #fffbeb; border-color: #fde68a; flex-wrap: wrap; }
.shell .ad-limit-copy { flex: 1 1 240px; min-width: 0; }
.shell .ad-limit-t { font-size: 0.9rem; font-weight: 700; color: #78350f; }
.shell .ad-limit-s { font-size: 0.8rem; color: #92400e; margin-top: 2px !important; }
.shell .ad-empty { max-width: 560px; width: 100%; margin: 24px auto 0; overflow: hidden; }
.shell .ad-empty-in { text-align: center; padding: 40px 28px 28px; background: radial-gradient(120% 80% at 50% 0%, #fdf2f8, #fff 70%); }
.shell .ad-empty-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto 20px; color: #fff; background: linear-gradient(135deg, #f472b6, var(--brand) 55%, #8b5cf6); box-shadow: 0 12px 28px -12px rgba(225,29,116,.6); }
.shell .ad-empty-ic svg { width: 32px; height: 32px; }
.shell .ad-empty h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: 8px; }
.shell .ad-empty-p { color: var(--ink-soft); max-width: 26rem; margin: 0 auto 24px !important; line-height: 1.55; }
.shell .ad-empty-fine { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.76rem; color: #9ca3af; margin-top: 14px !important; }
.shell .ad-empty-fine svg { width: 14px; height: 14px; }
.shell .ad-req { padding: 20px 28px 24px; border-top: 1px solid #f3f0f5; }
.shell .ad-req h3 { font-size: 0.86rem; font-weight: 700; margin-bottom: 12px; }
.shell .ad-req ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.shell .ad-req li { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: #374151; }
.shell .ad-req-ck { width: 20px; height: 20px; border-radius: 50%; background: #dcfce7; color: #15803d; display: grid; place-items: center; flex-shrink: 0; }
.shell .ad-req-ck svg { width: 11px; height: 11px; }
.shell .ad-req .ad-link { white-space: normal; }
@media (max-width: 560px) {
  .shell .ad-hide-sm { display: none; }
  .shell .ad-acard { padding: 16px; }
  .shell .ad-acard-actions { width: 100%; gap: 6px; }
  .shell .ad-acard-actions { flex-wrap: nowrap; }
  .shell .ad-acard-actions .ad-btn-sm { padding: 0 10px; }
  .shell .ad-acard-actions .ad-btn-quiet svg { display: none; }
  .shell .ad-acard-actions form:last-child { margin-left: auto; }
  .shell .ad-empty-in { padding: 32px 20px 24px; }
  .shell .ad-req { padding: 18px 20px 20px; }
}

/* ---- automations ---- */
/* ================= Group B: automations (list, builder, story form, post picker) ================= */

/* ---- shared buttons / pills ---- */
.shell .aa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.shell .aa-btn:hover { text-decoration: none; }
.shell .aa-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.shell .aa-btn-primary { background: var(--brand); color: #fff; border: 1px solid var(--brand); box-shadow: 0 6px 16px -8px rgba(225, 29, 116, .6); }
.shell .aa-btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.shell .aa-btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid #ece8f0; }
.shell .aa-btn-ghost:hover { border-color: var(--brand-line); color: var(--brand-deep); }
.shell .aa-beta {
  display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 5px;
  background: var(--brand-tint); color: var(--brand-deep);
  font-size: 0.6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.shell .aa-beta-soft { vertical-align: middle; margin-left: 6px; font-size: 0.62rem; padding: 3px 8px; border-radius: 999px; }

.shell .aa-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; line-height: 1.6; white-space: nowrap; vertical-align: middle;
}
.shell .aa-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.shell .aa-status-live { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.shell .aa-status-live i { box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.shell .aa-status-off { background: #f4f4f5; color: #52525b; border: 1px solid #e4e4e7; }
.shell .aa-tag {
  display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.shell .aa-tag-story { background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #fbcfe8; }

/* ---- list page header ---- */
.shell .aa-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.shell .aa-head-sub { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.shell .aa-usage { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.shell .aa-usage p { margin: 0; font-size: 0.75rem; color: #9ca3af; white-space: nowrap; }
.shell .aa-usage p strong { color: #374151; }
.shell .aa-usage-bar { width: 120px; height: 6px; border-radius: 999px; background: #f1edf4; overflow: hidden; }
.shell .aa-usage-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.shell .aa-usage-hot i { background: #d97706; }
.shell .aa-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- stats strip ---- */
.shell .aa-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface); border: 1px solid #ece8f0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -18px rgba(17, 24, 39, .18);
  margin-bottom: 16px; overflow: hidden;
}
.shell .aa-stat { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shell .aa-stat + .aa-stat { border-left: 1px solid #f3f0f6; }
.shell .aa-stat-n { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.shell .aa-stat-live { color: #047857; }
.shell .aa-stat-l { font-size: 0.75rem; color: var(--ink-soft); font-weight: 500; }

/* ---- list tools ---- */
.shell .aa-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.shell .aa-search {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; border: 1px solid #ece8f0; border-radius: 10px; background: var(--surface);
}
.shell .aa-search svg { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; }
.shell .aa-search input { border: 0; outline: 0; background: transparent; padding: 0; width: 100%; font: inherit; font-size: 0.875rem; box-shadow: none; }
.shell .aa-search:focus-within { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-tint); }
.shell .aa-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #f4f2f7; }
.shell .aa-seg button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.shell .aa-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 24, 39, .08); }

/* ---- automation rows ---- */
.shell .aa-list { display: flex; flex-direction: column; gap: 10px; }
.shell .aa-row {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px;
  background: var(--surface); border: 1px solid #ece8f0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -20px rgba(17, 24, 39, .2);
  transition: border-color .15s, box-shadow .15s;
}
.shell .aa-row:hover { border-color: #e4dce9; box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 12px 28px -18px rgba(17, 24, 39, .25); }
.shell .aa-row[hidden] { display: none; }
.shell .aa-row-off .aa-thumb { filter: grayscale(.7); opacity: .75; }
.shell .aa-thumb {
  position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: #f4f2f7; display: grid; place-items: center; color: #c4bccb;
}
.shell .aa-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shell .aa-thumb-ph { width: 24px; height: 24px; }
.shell .aa-thumb-story { background: linear-gradient(135deg, #fdf2f8, #fce7f3); color: var(--brand-deep); }
.shell .aa-thumb-story svg { width: 28px; height: 28px; }
.shell .aa-thumb-tag {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: 4px;
  background: rgba(17, 24, 39, .65); color: #fff; font-size: 0.55rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.shell .aa-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.shell .aa-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.shell .aa-name {
  font-weight: 600; font-size: 0.975rem; color: var(--ink); min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shell .aa-name:hover { color: var(--brand-deep); text-decoration: none; }
.shell .aa-kws { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.shell .aa-kw {
  display: inline-flex; padding: 2px 9px; border-radius: 7px; background: #f4f2f7; border: 1px solid #ece8f0;
  font-size: 0.75rem; font-weight: 500; color: #4b5563; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell .aa-kw-any { background: var(--brand-tint); border-color: #fbcfe8; color: var(--brand-deep); }
.shell .aa-kw-more { font-size: 0.75rem; color: #9ca3af; }
.shell .aa-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.shell .aa-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #8b8594; font-weight: 500; }
.shell .aa-meta-item svg { width: 14px; height: 14px; }
.shell .aa-meta-sent { color: #4b5563; }
.shell .aa-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.shell .aa-actions form { margin: 0; display: flex; }
.shell .aa-toggle { border: none; background: none; padding: 0; margin-right: 8px; }
.shell .aa-icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: transparent; color: #9ca3af; cursor: pointer; transition: background .15s, color .15s;
}
.shell .aa-icon-btn svg { width: 19px; height: 19px; }
.shell .aa-icon-btn:hover { background: #f4f2f7; color: var(--ink); text-decoration: none; }
.shell .aa-icon-danger:hover { background: #fef2f2; color: #dc2626; }
.shell .aa-none { text-align: center; color: var(--ink-soft); font-size: 0.875rem; padding: 24px 0; }

/* ---- empty state ---- */
.shell .aa-empty {
  background: var(--surface); border: 1px solid #ece8f0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -18px rgba(17, 24, 39, .18);
  padding: 56px 24px; text-align: center;
  background-image: radial-gradient(600px 220px at 50% -40px, rgba(225, 29, 116, .07), transparent 70%);
}
.shell .aa-empty-slim { padding: 8px; background-image: none; }
.shell .aa-empty-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 20px; display: grid; place-items: center;
  background: linear-gradient(135deg, #f472b6, #e11d74 60%, #be185d); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(225, 29, 116, .55);
}
.shell .aa-empty-icon svg { width: 30px; height: 30px; }
.shell .aa-empty h2 { font-size: 1.25rem; margin: 0 0 6px; }
.shell .aa-empty-sub { color: var(--ink-soft); margin: 0 auto 28px; max-width: 28rem; font-size: 0.925rem; }
.shell .aa-empty-steps {
  list-style: none; margin: 0 auto 28px; padding: 0; max-width: 640px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left;
}
.shell .aa-empty-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid #f1edf4; border-radius: 14px; background: #fcfbfd; }
.shell .aa-empty-steps span {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-deep); font-size: 0.75rem; font-weight: 700;
}
.shell .aa-empty-steps strong { display: block; font-size: 0.85rem; color: var(--ink); }
.shell .aa-empty-steps em { display: block; font-style: normal; font-size: 0.75rem; color: var(--ink-soft); }
.shell .aa-empty-cta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---- builder page chrome ---- */
.shell .aa-page .aa-pagehead { align-items: flex-end; margin-bottom: 14px; }
.shell .aa-crumb {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px;
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.shell .aa-crumb svg { width: 14px; height: 14px; }
.shell .aa-crumb:hover { color: var(--brand-deep); text-decoration: none; }
.shell .aa-pagehead h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.shell .aa-pagehead-sub { margin: 4px 0 0; font-size: 0.875rem; color: var(--ink-soft); }

.shell .aa-steps {
  display: inline-flex; margin: 0 0 20px; padding: 6px 14px 6px 8px; gap: 10px;
  background: var(--surface); border: 1px solid #ece8f0; border-radius: 999px;
}
.shell .aa-steps li span { width: 22px; height: 22px; }
.shell .aa-steps li.bar { width: 28px; }

/* ---- builder sections ---- */
.shell .aa-builder { gap: 24px; }
.shell .aa-builder .fcard, .shell .aa-sec {
  border-color: #ece8f0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -20px rgba(17, 24, 39, .2);
}
.shell .aa-main-col { gap: 16px; }
.shell .aa-sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.shell .aa-sec-head h2 { margin: 0; line-height: 1.3; }
.shell .aa-sec-head-flat { margin-bottom: 0; }
.shell .aa-sec-n {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 4px 10px -4px rgba(225, 29, 116, .6);
}
.shell .aa-sec-n-soft { background: #f4f2f7; color: #6b6474; box-shadow: none; }
.shell .aa-sec-n svg { width: 16px; height: 16px; }
.shell .aa-h3 { font-size: 0.925rem; font-weight: 600; margin: 0; color: var(--ink); }
.shell .aa-trigger { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 14px; background: #fcfbfd; border: 1px solid #f1edf4; }
.shell .aa-trigger-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-tint); color: var(--brand-deep); display: grid; place-items: center; flex-shrink: 0; }
.shell .aa-trigger-icon svg { width: 20px; height: 20px; }
.shell .aa-trigger-text { margin: 0; font-size: 0.9rem; color: var(--ink); }
.shell .aa-divider { height: 1px; background: #f1edf4; margin: 18px 0; }
.shell .aa-note { font-size: 0.8rem; color: var(--ink-soft); margin: 10px 0 0; }
.shell .aa-matchgrid .aa-matchopt { flex-direction: column; gap: 2px; padding: 12px 10px; }
.shell .aa-matchhelp { font-size: 0.7rem; font-weight: 500; color: #9ca3af; line-height: 1.3; }
.shell .aa-matchopt:has(input:checked) .aa-matchhelp { color: var(--brand-deep); opacity: .75; }
.shell .aa-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.shell .aa-count { font-size: 0.72rem; color: #9ca3af; font-variant-numeric: tabular-nums; }
.shell .aa-code { background: #f4f2f7; padding: 1px 5px; border-radius: 5px; font-size: 0.8em; }
.shell .aa-variants .field { padding: 12px; border: 1px dashed #e4dce9; border-radius: 12px; background: #fcfbfd; }
.shell .aa-varbar { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.shell .aa-ai-btn { padding: 6px 10px; margin: -6px 0; border-radius: 8px; background: var(--brand-tint); color: var(--brand-deep); }
.shell .aa-ai-btn:hover { background: #fce7f3; }
.shell .aa-ai-btn:disabled { opacity: .6; cursor: progress; }
.shell .aa-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shell .aa-grid2 .field { margin-bottom: 0; }
.shell .aa-grid2-top { margin-top: 12px; }
.shell .aa-strong { color: var(--brand-deep); }
.shell .aa-setrow { padding: 14px 0; border-top: 1px solid #f1edf4; }
.shell .aa-setrow:first-of-type { border-top: 0; padding-top: 0; }
.shell .aa-setrow-last { padding-bottom: 0; }
.shell .aa-anyrow { padding: 14px; border-radius: 14px; background: #fcfbfd; border: 1px solid #f1edf4; }
.shell .aa-pay-empty { border-radius: 14px; }

/* follow-ups */
.shell .aa-fu-steps { display: flex; flex-direction: column; gap: 10px; }
.shell .aa-fu-step { border: 1px solid #ece8f0; border-radius: 14px; background: var(--surface); }
.shell .aa-fu-step[open] { background: #fcfbfd; }
.shell .aa-fu-sum {
  list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none;
}
.shell .aa-fu-sum::-webkit-details-marker { display: none; }
.shell .aa-fu-n { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b6474; }
.shell .aa-fu-state { font-size: 0.78rem; color: #9ca3af; }
.shell .aa-fu-chev { width: 16px; height: 16px; margin-left: auto; color: #9ca3af; transition: transform .15s; }
.shell .aa-fu-step[open] .aa-fu-chev { transform: rotate(180deg); }
.shell .aa-fu-body { padding: 0 14px 14px; }
.shell .aa-fu-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr) 150px; gap: 10px; }
.shell .aa-fu-grid .field { margin: 0; min-width: 0; }

/* sticky save bar */
.shell .aa-savebar {
  position: sticky; bottom: 12px; z-index: 5;
  padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .92);
  border: 1px solid #ece8f0; box-shadow: 0 12px 32px -14px rgba(17, 24, 39, .3);
  backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px);
}
.shell .aa-cancel { font-size: 0.9rem; color: var(--ink-soft); font-weight: 500; }

/* ---- live preview ---- */
.shell .aa-side { gap: 16px; }
.shell .aa-builder .col.side.aa-side { top: 88px; }
.shell .aa-preview {
  background: var(--surface); border: 1px solid #ece8f0; border-radius: 20px; padding: 14px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -20px rgba(17, 24, 39, .2);
}
.shell .aa-pv-top { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: var(--ink); padding: 2px 4px 12px; }
.shell .aa-pv-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.shell .aa-pv-note { margin-left: auto; font-size: 0.7rem; font-weight: 500; color: #9ca3af; }
.shell .aa-phone { border-radius: 16px; overflow: hidden; border: 1px solid #f1edf4; background: #fff; }
.shell .aa-pv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f4f2f7; }
.shell .aa-pv-bar strong { display: block; font-size: 0.82rem; line-height: 1.2; }
.shell .aa-pv-bar small { display: block; font-size: 0.68rem; color: #9ca3af; }
.shell .aa-pv-av {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, #f472b6, #e11d74 60%, #be185d); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.shell .aa-pv-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 16px; background: #fcfbfd; min-height: 220px; }
.shell .aa-pv-event { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.shell .aa-pv-evlabel { font-size: 0.66rem; color: #9ca3af; font-weight: 500; }
.shell .aa-pv-comment {
  max-width: 80%; padding: 7px 12px; border-radius: 16px 16px 16px 4px; background: #efedf2; color: var(--ink);
  font-size: 0.8rem; overflow-wrap: anywhere;
}
.shell .aa-pv-reply { font-size: 0.7rem; color: #6b6474; padding-left: 10px; border-left: 2px solid #e4dce9; overflow-wrap: anywhere; }
.shell .aa-pv-reply[hidden], .shell .aa-pv-btn[hidden], .shell .aa-pv-variants[hidden], .shell .aa-pv-later[hidden] { display: none; }
.shell .aa-pv-msg {
  align-self: flex-end; max-width: 86%; border-radius: 18px 18px 4px 18px; overflow: hidden;
  background: linear-gradient(135deg, #e11d74, #be185d); color: #fff;
}
.shell .aa-pv-text { margin: 0; padding: 9px 13px; font-size: 0.82rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.shell .aa-pv-empty { opacity: .8; font-style: italic; }
.shell .aa-pv-btn {
  display: block; margin: 0 6px 6px; padding: 7px 10px; border-radius: 12px; background: #fff; color: var(--brand-deep);
  text-align: center; font-size: 0.78rem; font-weight: 700;
}
.shell .aa-pv-variants { align-self: flex-end; margin: -4px 2px 0; font-size: 0.66rem; color: #9ca3af; }
.shell .aa-pv-later { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.shell .aa-pv-time { align-self: center; font-size: 0.64rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.shell .aa-pv-msg-soft { background: #fce7f3; color: #831843; }
.shell .aa-pv-foot { margin: 10px 4px 0; font-size: 0.7rem; color: #9ca3af; }
.shell .aa-tips ul { font-size: 0.84rem; }

/* ---- post picker polish ---- */
.shell .aa-pp { border-color: #ece8f0; border-radius: 20px; box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -20px rgba(17, 24, 39, .2); }
.shell .aa-pp-card { border-radius: 14px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.shell .aa-pp-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(17, 24, 39, .3); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  /* clear the fixed mobile tab bar */
  .shell .aa-savebar { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 980px) {
  .shell .aa-builder .col.side.aa-side { position: static; }
}
@media (max-width: 720px) {
  .shell .aa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .aa-stat:nth-child(3) { border-left: 0; }
  .shell .aa-stat:nth-child(n+3) { border-top: 1px solid #f3f0f6; }
  .shell .aa-empty-steps { grid-template-columns: 1fr; }
  .shell .aa-fu-grid { grid-template-columns: 1fr 1fr; }
  .shell .aa-fu-grid .field:nth-child(2) { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 640px) {
  .shell .aa-head { align-items: stretch; }
  .shell .aa-head-actions { width: 100%; }
  .shell .aa-head-actions .aa-btn { flex: 1; padding: 0 12px; }
  .shell .aa-row { flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 12px; }
  .shell .aa-thumb { width: 52px; height: 52px; border-radius: 12px; }
  .shell .aa-main { flex-basis: calc(100% - 64px); }
  .shell .aa-actions { width: 100%; justify-content: flex-end; padding-top: 10px; border-top: 1px solid #f4f2f7; }
  .shell .aa-actions form:first-child { margin-right: auto; }
  .shell .aa-grid2 { grid-template-columns: 1fr; }
  .shell .aa-trigger { flex-wrap: wrap; gap: 12px; }
  .shell .aa-trigger-info { flex-basis: calc(100% - 80px) !important; }
  .shell .aa-change { width: 100%; text-align: center; }
  .shell .aa-sec-head { gap: 10px; }
  .shell .aa-savebar { flex-wrap: wrap; gap: 12px; }
  .shell .aa-page .aa-back { display: none; }
  .shell .aa-steps { display: flex; border-radius: 14px; }
}

.shell .aa-src { margin: -3px 0 1px; font-size: 0.78rem; color: #8b8594; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- leads ---- */
/* ===== Group C (al-): Leads, Inbox, AI Agent ===== */
.shell .al-page { --al-line: #ece8f0; --al-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.12); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .al-page svg { flex-shrink: 0; }

/* page header */
.shell .al-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shell .al-head-txt { min-width: 0; flex: 1 1 320px; }
.shell .al-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shell .al-head p { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-soft); max-width: 44rem; }
.shell .al-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* buttons */
.shell .al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; font-size: 0.875rem; font-weight: 700; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; }
.shell .al-btn svg { width: 17px; height: 17px; }
.shell .al-btn:hover { text-decoration: none; }
.shell .al-btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--al-line); }
.shell .al-btn-ghost:hover { background: #faf8fb; color: var(--ink); }
.shell .al-btn-green { background: #16a34a !important; box-shadow: 0 8px 20px -10px rgba(22, 163, 74, 0.7) !important; color: #fff; }
.shell .al-btn-sm { padding: 7px 12px; font-size: 0.8rem; border-radius: 10px; }
.shell .al-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.shell .al-link svg { width: 15px; height: 15px; }
.shell .al-link:hover { color: var(--ink); }
.shell .al-link.al-danger { color: #b91c1c; }
.shell .al-link.al-danger:hover { color: #7f1d1d; }

/* cards */
.shell .al-card { background: var(--surface); border: 1px solid var(--al-line); border-radius: 20px; box-shadow: var(--al-shadow); min-width: 0; }
.shell .al-card-pad { padding: 22px 24px; }
.shell .al-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--al-line); }
.shell .al-card-head h3 { margin: 0; font-size: 0.98rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.shell .al-card-head h3 svg { width: 18px; height: 18px; color: var(--brand); }
.shell .al-card-head p { margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.shell .al-count { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); background: var(--line-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }

/* alerts */
.shell .al-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 14px; font-size: 0.85rem; border: 1px solid; }
.shell .al-alert svg { width: 18px; height: 18px; margin-top: 1px; }
.shell .al-alert.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.shell .al-alert.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.shell .al-alert.info { background: var(--brand-tint); border-color: #fbcfe8; color: var(--brand-deep); }
.shell .al-alert.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.shell .al-alert .varlink { font-weight: 700; }

/* stats */
.shell .al-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shell .al-stat { padding: 16px 18px; display: flex; gap: 14px; align-items: center; }
.shell .al-stat-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.shell .al-stat-ic svg { width: 20px; height: 20px; }
.shell .al-stat-ic.g { background: #ecfdf5; color: #059669; }
.shell .al-stat-ic.a { background: #fffbeb; color: #d97706; }
.shell .al-stat-n { font-size: 1.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.shell .al-stat-l { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; }

/* pills */
.shell .al-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; }
.shell .al-pill.cap { text-transform: capitalize; }
.shell .al-pill::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.shell .al-pill.nodot::before { display: none; }
.shell .al-pill.green { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.shell .al-pill.amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.shell .al-pill.red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.shell .al-pill.grey { background: #f4f4f5; color: #52525b; border-color: #e4e4e7; }
.shell .al-pill.blue { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.shell .al-pill.pink { background: var(--brand-tint); color: var(--brand-deep); border-color: #fbcfe8; }

/* ---------- Leads ---------- */
.shell .al-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px; }
.shell .al-search { position: relative; flex: 1 1 240px; min-width: 0; }
.shell .al-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #9ca3af; pointer-events: none; }
.shell .al-filter input[type="text"], .shell .al-filter select { width: 100%; height: 42px; border: 1px solid var(--al-line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 0.875rem; background: #fcfbfd; color: var(--ink); }
.shell .al-search input[type="text"] { padding-left: 38px; }
.shell .al-filter input:focus, .shell .al-filter select:focus { outline: none; border-color: var(--brand-line); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.12); background: #fff; }
.shell .al-filter .al-sel { flex: 0 1 220px; min-width: 160px; }
.shell .al-filter-actions { display: flex; align-items: center; gap: 12px; }
.shell .al-filter-actions a { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; }
.shell .al-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shell .al-table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shell .al-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.875rem; }
.shell .al-table th { text-align: left; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #9ca3af; padding: 11px 16px; background: #fcfbfd; border-bottom: 1px solid var(--al-line); white-space: nowrap; }
.shell .al-table th:first-child, .shell .al-table td:first-child { padding-left: 24px; }
.shell .al-table th:last-child, .shell .al-table td:last-child { padding-right: 24px; text-align: right; }
.shell .al-table td { padding: 14px 16px; vertical-align: top; border-top: 1px solid var(--line-soft); }
.shell .al-table tbody tr:first-child td { border-top: 0; }
.shell .al-table tr.al-row:hover td { background: #fdfbfd; }
.shell .al-table tr.lead-editor td { border-top: 0; padding-top: 0; }
.shell .al-contact { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.shell .al-avatar { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg, #f472b6, #e11d74 60%, #be185d); text-transform: uppercase; }
.shell .al-avatar.muted { background: #e5e7eb; color: #6b7280; }
.shell .al-handle { font-weight: 700; color: var(--ink); }
.shell .al-handle:hover { color: var(--brand-deep); }
.shell .al-igid { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--ink-soft); }
.shell .al-note { margin: 4px 0 0; font-size: 0.76rem; color: var(--ink-soft); max-width: 22rem; display: flex; gap: 5px; align-items: flex-start; }
.shell .al-note svg { width: 13px; height: 13px; margin-top: 2px; color: #9ca3af; }
.shell .al-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: 16rem; }
.shell .al-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #fbcfe8; }
.shell .al-tag button { background: none; border: 0; color: var(--brand-deep); cursor: pointer; padding: 0 3px; line-height: 1; font-size: 0.85rem; opacity: 0.7; border-radius: 99px; }
.shell .al-tag button:hover { opacity: 1; background: #fce7f3; }
.shell .al-none { color: #c4c4cc; font-size: 0.8rem; white-space: nowrap; }
.shell .al-via { color: #374151; font-weight: 600; }
.shell .al-src { display: inline-flex; margin-top: 5px; padding: 2px 7px; border-radius: 6px; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.shell .al-num { font-variant-numeric: tabular-nums; font-weight: 700; color: #374151; }
.shell .al-date { white-space: nowrap; color: #374151; }
.shell .al-row-actions { display: inline-flex; gap: 14px; align-items: center; white-space: nowrap; }
.shell .al-editor { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #faf8fb; border: 1px solid var(--al-line); padding: 14px; border-radius: 14px; text-align: left; }
.shell .al-editor form { display: flex; gap: 8px; align-items: flex-end; }
.shell .al-editor form.al-grow { flex: 1; min-width: 240px; }
.shell .al-editor .field { margin: 0; flex: 1; }
.shell .al-editor label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; font-weight: 700; }
.shell .al-editor input { background: #fff; }

/* empty states */
.shell .al-empty { text-align: center; padding: 56px 24px; }
.shell .al-empty-ic { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); border: 1px solid #fbcfe8; }
.shell .al-empty-ic svg { width: 26px; height: 26px; }
.shell .al-empty h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; }
.shell .al-empty p { margin: 0 auto 18px; max-width: 30rem; font-size: 0.875rem; color: var(--ink-soft); }
.shell .al-empty p:last-child { margin-bottom: 0; }

/* ---------- Inbox ---------- */
.shell .al-inbox { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); overflow: hidden; min-height: 480px; }
.shell .al-convs { border-right: 1px solid var(--al-line); display: flex; flex-direction: column; min-width: 0; }
.shell .al-convs-head { padding: 16px 20px; border-bottom: 1px solid var(--al-line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shell .al-convs-head h3 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.shell .al-conv { display: flex; gap: 12px; align-items: center; padding: 14px 20px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line-soft); position: relative; }
.shell .al-conv:hover { background: #fdfbfd; text-decoration: none; }
.shell .al-conv.unread { background: var(--brand-tint); }
.shell .al-conv.unread::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.shell .al-conv-main { flex: 1; min-width: 0; }
.shell .al-conv-top { display: flex; align-items: center; gap: 6px; }
.shell .al-conv-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.shell .al-conv-top em { font-style: normal; font-size: 0.72rem; color: var(--ink-soft); margin-left: auto; white-space: nowrap; }
.shell .al-dot { display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--brand); flex-shrink: 0; }
.shell .al-conv-last { margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .al-conv.unread .al-conv-last { color: var(--ink); font-weight: 600; }
.shell .al-conv-meta { margin-top: 6px; }
.shell .al-pane { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fdf2f8 0, #fff 60%); padding: 32px; text-align: center; }
.shell .al-pane p { color: var(--ink-soft); font-size: 0.875rem; max-width: 20rem; margin: 0 auto; }
.shell .al-pane h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.shell .al-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

/* thread */
.shell .al-thread { display: flex; flex-direction: column; overflow: hidden; }
.shell .al-thread-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--al-line); flex-wrap: wrap; }
.shell .al-thread-head .al-who { flex: 1 1 220px; min-width: 0; }
.shell .al-who-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shell .al-who-top h1 { margin: 0; font-size: 1rem; font-weight: 800; overflow-wrap: anywhere; }
.shell .al-thread-head .al-who p { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.shell .al-thread-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.shell .al-thread-tools form { margin: 0; }
.shell .al-msgs { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #fbfafc; min-height: 280px; }
.shell .al-msg { max-width: 76%; display: flex; flex-direction: column; }
.shell .al-msg.in { align-self: flex-start; align-items: flex-start; }
.shell .al-msg.out { align-self: flex-end; align-items: flex-end; }
.shell .al-bubble { padding: 10px 14px; border-radius: 18px; font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.shell .al-msg.in .al-bubble { background: #fff; border: 1px solid var(--al-line); border-bottom-left-radius: 6px; }
.shell .al-msg.ai .al-bubble { background: linear-gradient(135deg, #ec4899, #e11d74 60%, #be185d); color: #fff; border-bottom-right-radius: 6px; }
.shell .al-msg.human .al-bubble { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.shell .al-msg.draft .al-bubble { background: #fff; color: var(--ink); border: 1.5px dashed var(--brand-line); }
.shell .al-meta { margin: 5px 4px 0; font-size: 0.7rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shell .al-role { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.shell .al-role svg { width: 11px; height: 11px; }
.shell .al-role.ai { background: var(--brand-tint); color: var(--brand-deep); }
.shell .al-role.human { background: #111827; color: #fff; }
.shell .al-role.contact { background: #f4f4f5; color: #52525b; }
.shell .al-composer { border-top: 1px solid var(--al-line); padding: 16px 22px; display: flex; gap: 12px; align-items: flex-end; background: #fff; }
.shell .al-composer .field { flex: 1; margin: 0; }
.shell .al-composer label { font-size: 0.75rem; color: var(--ink-soft); font-weight: 600; }
.shell .al-composer textarea { border-radius: 14px; resize: vertical; min-height: 48px; }
.shell .al-closed { border-top: 1px solid var(--al-line); padding: 16px 22px; font-size: 0.85rem; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; background: #fff; }
.shell .al-closed svg { width: 18px; height: 18px; color: #9ca3af; margin-top: 1px; }
.shell .al-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.shell .al-back svg { width: 16px; height: 16px; }
.shell .al-back:hover { color: var(--ink); text-decoration: none; }

/* ---------- AI agent ---------- */
.shell .al-status { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.shell .al-status-main { display: flex; gap: 14px; align-items: center; min-width: 0; }
.shell .al-status-main strong { font-size: 1rem; margin-right: 6px; }
.shell .al-status-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.shell .al-status-main p { margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.shell .al-usage-l { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 6px; gap: 8px; }
.shell .al-usage-l b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shell .al-bar { height: 8px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.shell .al-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f472b6, #e11d74); }
.shell .al-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.shell .al-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .al-col.side { position: sticky; top: 90px; }
.shell .al-card .field:last-child { margin-bottom: 0; }
.shell .al-card textarea { font-family: inherit; line-height: 1.5; }
.shell .al-mono textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.shell .al-req { color: var(--danger); }
.shell .al-fmt { display: inline-block; font-family: ui-monospace, monospace; font-size: 0.72rem; background: var(--line-soft); border-radius: 6px; padding: 1px 6px; color: #4b5563; font-weight: 500; }
.shell .al-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px 12px 20px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border: 1px solid var(--al-line); border-radius: 18px; box-shadow: 0 12px 32px -16px rgba(17, 24, 39, 0.3); }
.shell .al-savebar p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.shell .al-savebar .al-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.shell .al-savebar .btn { margin: 0; }
.shell .al-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: al; }
.shell .al-steps li { display: flex; gap: 10px; font-size: 0.82rem; color: #4b5563; line-height: 1.45; }
.shell .al-steps li::before { counter-increment: al; content: counter(al); width: 22px; height: 22px; border-radius: 99px; flex-shrink: 0; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; background: var(--brand-tint); color: var(--brand-deep); }
.shell .al-setup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.shell .al-setup .form-actions { margin-top: 4px; }
.shell .al-beta { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid #fbcfe8; }
.shell .al-dry { background: #fcfbfd; border: 1px solid var(--al-line); border-radius: 14px; padding: 14px; }
.shell .al-dry h4 { margin: 0; font-size: 0.9rem; font-weight: 800; }
.shell .al-dry .sub { margin: 3px 0 0; font-size: 0.78rem; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .shell .al-grid, .shell .al-setup { grid-template-columns: minmax(0, 1fr); }
  .shell .al-col.side { position: static; }
  .shell .al-status { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .shell .al-inbox { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .shell .al-convs { border-right: 0; }
  .shell .al-pane { display: none; }
}
@media (max-width: 640px) {
  .shell .al-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .shell .al-stat { padding: 12px 16px; }
  .shell .al-head-actions, .shell .al-head-actions .al-btn { width: 100%; }
  .shell .al-filter .al-sel { flex: 1 1 100%; }
  .shell .al-filter-actions { width: 100%; }
  .shell .al-filter-actions .al-btn { flex: 1; }
  .shell .al-card-pad { padding: 18px; }
  .shell .al-card-head { padding: 16px 18px; }
  .shell .al-msgs { padding: 16px 14px; }
  .shell .al-msg { max-width: 88%; }
  .shell .al-thread-head, .shell .al-composer, .shell .al-closed { padding-left: 16px; padding-right: 16px; }
  .shell .al-composer { flex-direction: column; align-items: stretch; }
  .shell .al-conv { padding: 14px 16px; }
  .shell .al-savebar { bottom: 8px; }
  .shell .al-savebar p { display: none; }
  .shell .al-savebar .al-btns { width: 100%; }
  .shell .al-savebar .al-btns .btn { flex: 1; }
}

/* ---- settings ---- */
/* ==========================================================================
   GROUP D - settings / billing / checkout / referrals / developer (prefix as-)
   Scoped under .shell. Pages: settings/index, integrations, more, referrals,
   store_webhook; billing/index, checkout, redeem; developer/index.
   ========================================================================== */
.shell { --as-line: #ece8f0; --as-line-soft: #f4f1f6; --as-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.14); }

/* ---- page frame ---------------------------------------------------------- */
.shell .as-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .as-page.narrow { max-width: 760px; }
.shell .as-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.shell .as-intro p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; max-width: 40rem; line-height: 1.55; }
.shell .as-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shell .as-h2 { font-size: 1.05rem; margin: 0; letter-spacing: -0.01em; }
.shell .as-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 -4px; }
.shell .as-sectionhead p { margin: 2px 0 0; font-size: 0.84rem; color: var(--ink-soft); }
.shell .as-label { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- cards --------------------------------------------------------------- */
.shell .as-card { background: #fff; border: 1px solid var(--as-line); border-radius: 20px; box-shadow: var(--as-shadow); min-width: 0; overflow: hidden; }
.shell .as-card-h { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 0; }
.shell .as-card-h.line { padding-bottom: 18px; border-bottom: 1px solid var(--as-line-soft); }
.shell .as-card-h h2, .shell .as-card-h h3 { font-size: 1rem; margin: 0; letter-spacing: -0.01em; }
.shell .as-card-h p { margin: 3px 0 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }
.shell .as-card-h .as-grow { flex: 1; min-width: 0; }
.shell .as-card-b { padding: 20px 24px 24px; }
.shell .as-card-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; background: #fbfafc; border-top: 1px solid var(--as-line-soft); }
.shell .as-card-f .as-note { margin: 0; }
.shell .as-card-f .as-actions { margin-left: auto; }
.shell .as-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #fce7f3; }
.shell .as-ico svg { width: 18px; height: 18px; }
.shell .as-ico.grey { background: var(--canvas); color: #4b5563; border-color: var(--as-line); }
.shell .as-ico.red { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.shell .as-note { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.55; margin: 10px 0 0; }
.shell .as-note code, .shell .as-code-inline { font-size: 0.78rem; background: var(--canvas); border: 1px solid var(--as-line); border-radius: 6px; padding: 1px 5px; }

/* ---- form bits ----------------------------------------------------------- */
.shell .as-card .field:last-child { margin-bottom: 0; }
.shell .as-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.shell .as-inline { display: flex; gap: 8px; align-items: stretch; }
.shell .as-inline > input, .shell .as-inline > .field { flex: 1; min-width: 0; }
.shell .as-inline .field { margin: 0; }
.shell .as-input { width: 100%; font: inherit; font-size: 0.88rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); min-width: 0; }
.shell .as-input::placeholder { text-transform: none; letter-spacing: 0; }
.shell .as-codebox::placeholder { letter-spacing: 0.06em; }
.shell .as-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.14); }
.shell .as-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.shell .as-flabel { display: block; font-size: 0.82rem; font-weight: 600; color: #374151; margin: 0 0 6px; }

/* buttons: sized helpers that sit next to the shared .btn / .btn-primary */
.shell .as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 0.84rem; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.shell .as-btn svg { width: 16px; height: 16px; }
.shell .as-btn-ghost { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.84rem; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap; }
.shell .as-btn-ghost:hover { background: var(--canvas); text-decoration: none; color: var(--ink); }
.shell .as-btn-ghost svg { width: 15px; height: 15px; }
.shell .as-btn-ghost.red { color: #b91c1c; }
.shell .as-btn-ghost.red:hover { background: #fef2f2; border-color: #fecaca; }
.shell .as-btn-ghost.sm { padding: 6px 11px; font-size: 0.78rem; }
.shell .as-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--brand-deep); cursor: pointer; text-decoration: none; }
.shell .as-link:hover { text-decoration: underline; }
.shell .as-link.grey { color: var(--ink-soft); }
.shell .as-link.red { color: #b91c1c; }

/* ---- status pills -------------------------------------------------------- */
.shell .as-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--line-soft); color: #4b5563; }
.shell .as-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.shell .as-pill.ok { background: #dcfce7; color: #15803d; }
.shell .as-pill.warn { background: #fef3c7; color: #b45309; }
.shell .as-pill.bad { background: #fee2e2; color: #b91c1c; }
.shell .as-pill.brand { background: var(--brand-tint); color: var(--brand-deep); }
.shell .as-pill.plain::before { display: none; }

/* ---- empty state --------------------------------------------------------- */
.shell .as-empty { text-align: center; padding: 26px 16px; border: 1px dashed var(--as-line); border-radius: 14px; background: #fbfafc; }
.shell .as-empty .as-ico { margin: 0 auto 10px; }
.shell .as-empty p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.shell .as-empty strong { display: block; color: var(--ink); font-size: 0.92rem; margin-bottom: 2px; }

/* ---- lists / tables ------------------------------------------------------ */
.shell .as-rows { display: flex; flex-direction: column; border: 1px solid var(--as-line); border-radius: 14px; overflow: hidden; }
.shell .as-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: #fff; }
.shell .as-row + .as-row { border-top: 1px solid var(--as-line-soft); }
.shell .as-row-main { min-width: 0; flex: 1 1 240px; }
.shell .as-row-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 0.9rem; }
.shell .as-row-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; overflow-wrap: anywhere; }
.shell .as-row-act { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.shell .as-row-act form { margin: 0; }
.shell .as-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.shell .as-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.shell .as-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; padding: 10px 16px; background: #fbfafc; border-bottom: 1px solid var(--as-line-soft); white-space: nowrap; }
.shell .as-table td { padding: 11px 16px; border-bottom: 1px solid var(--as-line-soft); white-space: nowrap; vertical-align: middle; }
.shell .as-table tr:last-child td { border-bottom: 0; }
.shell .as-table .muted { color: var(--ink-soft); }

/* ---- settings layout (index) -------------------------------------------- */
.shell .as-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.shell .as-subnav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.shell .as-subnav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; font-size: 0.86rem; font-weight: 500; color: #4b5563; text-decoration: none; }
.shell .as-subnav a:hover { background: #fff; color: var(--ink); }
.shell .as-subnav a svg { width: 16px; height: 16px; flex-shrink: 0; }
.shell .as-subnav a.red { color: #b91c1c; }
.shell .as-subnav .sep { height: 1px; background: var(--as-line); margin: 8px 12px; }
.shell .as-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .as-stack > [id] { scroll-margin-top: 96px; }
.shell .as-danger { border-color: #fecaca; }
.shell .as-danger .as-card-f { background: #fef7f7; border-top-color: #fee2e2; }
.shell .as-zone { display: flex; align-items: center; gap: 10px; margin: 12px 0 -6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #b91c1c; }
.shell .as-zone::after { content: ""; flex: 1; height: 1px; background: #fecaca; }
.shell .as-planrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shell .as-planrow .as-grow { min-width: 0; }
.shell .as-upsell { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--brand-deep); }

/* ---- billing ------------------------------------------------------------- */
.shell .as-current-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px; background: linear-gradient(100deg, #fdf2f8 0%, #fff 70%); border-bottom: 1px solid var(--as-line-soft); }
.shell .as-current-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.shell .as-current-name h2 { font-size: 1.5rem; margin: 0; letter-spacing: -0.02em; }
.shell .as-price { text-align: right; }
.shell .as-price .n { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.shell .as-price .u { margin: 2px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.shell .as-price form { margin: 10px 0 0; }
.shell .as-usage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shell .as-usage > div { padding: 18px 24px 20px; min-width: 0; }
.shell .as-usage > div + div { border-left: 1px solid var(--as-line-soft); }
.shell .as-usage .k { margin: 0 0 6px; font-size: 0.78rem; color: var(--ink-soft); }
.shell .as-usage .v { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.shell .as-usage .meter { margin-top: 10px; }
.shell .as-toggle { display: inline-flex; background: #efeaf2; border-radius: 999px; padding: 3px; }
.shell .as-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; }
.shell .as-plan { position: relative; display: flex; flex-direction: column; padding: 24px; overflow: visible; }
.shell .as-plan.hot { border-color: var(--brand); box-shadow: 0 16px 36px -20px rgba(225, 29, 116, 0.45); }
.shell .as-plan.mine { background: #fcfbfd; }
.shell .as-plan-flag { position: absolute; top: -11px; left: 24px; background: var(--brand); color: #fff; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; }
.shell .as-plan h3 { font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shell .as-plan-price { margin: 8px 0 16px; font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.1; }
.shell .as-plan-price small { font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; font-family: var(--font-body); letter-spacing: 0; }
.shell .as-feats { list-style: none; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--as-line-soft); display: flex; flex-direction: column; gap: 9px; font-size: 0.86rem; color: #374151; flex: 1; }
.shell .as-feats li { display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; }
.shell .as-feats li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--brand); }
.shell .as-plan .as-plan-cta { margin-top: auto; }
.shell .as-plan .as-plan-cta form { margin: 0; }
.shell .as-plan-state { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--as-line); background: #fff; font-size: 0.86rem; font-weight: 600; color: #4b5563; }
.shell .as-plan-state svg { width: 16px; height: 16px; color: #15803d; }
.shell .as-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shell .as-fact { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; }
.shell .as-fact h3 { margin: 0; font-size: 0.9rem; }
.shell .as-fact p { margin: 3px 0 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
.shell .as-fact a { color: var(--brand-deep); font-weight: 600; }

/* ---- checkout ------------------------------------------------------------ */
.shell .as-checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 980px; }
.shell .as-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.shell .as-back:hover { color: var(--ink); text-decoration: none; }
.shell .as-back svg { width: 16px; height: 16px; }
.shell .as-steps { display: flex; flex-direction: column; gap: 18px; }
.shell .as-summary { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: #fbfafc; border: 1px solid var(--as-line-soft); }
.shell .as-sumrow { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; color: var(--ink-soft); }
.shell .as-sumtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--as-line); }
.shell .as-sumtotal #total { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; }
.shell .as-pay { margin-top: 18px; padding: 13px 16px; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.shell .as-pay svg { width: 16px; height: 16px; }
.shell .as-trust { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); }
.shell .as-trust li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.shell .as-trust svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: #15803d; }
.shell .as-side { position: sticky; top: 96px; }

/* ---- referrals ----------------------------------------------------------- */
.shell .as-hero { position: relative; overflow: hidden; padding: 28px; background: radial-gradient(120% 140% at 100% 0%, #fce7f3 0%, #fdf2f8 35%, #fff 70%); }
.shell .as-hero h2 { font-size: 1.55rem; margin: 10px 0 8px; letter-spacing: -0.02em; }
.shell .as-hero p { margin: 0; max-width: 42rem; color: #4b5563; line-height: 1.6; font-size: 0.93rem; }
.shell .as-linkbox { margin-top: 20px; max-width: 40rem; }
.shell .as-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; }
.shell .as-callout svg { width: 18px; height: 18px; flex-shrink: 0; color: #b45309; margin-top: 2px; }
.shell .as-callout p { margin: 0; font-size: 0.86rem; color: #92400e; line-height: 1.55; }
.shell .as-callout p strong:first-child { color: #78350f; }
.shell .as-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.shell .as-choice { display: flex; flex-direction: column; padding: 24px; }
.shell .as-choice.hot { border: 2px solid #fbcfe8; }
.shell .as-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.shell .as-choice h3 { font-size: 1.15rem; margin: 0 0 2px; }
.shell .as-choice .as-choice-sub { margin: 0 0 16px; font-size: 0.86rem; color: var(--ink-soft); }
.shell .as-choice ul { flex: 1; }
.shell .as-choice .btn-block { display: flex; justify-content: center; }
.shell .as-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.shell .as-how .n { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid #fce7f3; }
.shell .as-how h3 { margin: 0 0 4px; font-size: 0.9rem; }
.shell .as-how p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }

/* ---- developer ----------------------------------------------------------- */
.shell .as-secret { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: 16px; border: 1px solid #a7f3d0; background: #ecfdf5; }
.shell .as-secret svg { width: 20px; height: 20px; color: #047857; flex-shrink: 0; margin-top: 2px; }
.shell .as-secret strong { color: #065f46; }
.shell .as-secret p { margin: 4px 0 10px; font-size: 0.84rem; color: #047857; }
.shell .as-secret code { display: block; word-break: break-all; background: #fff; border: 1px solid #a7f3d0; padding: 10px 12px; border-radius: 10px; font-size: 0.8rem; color: var(--ink); }
.shell .as-events { display: flex; flex-wrap: wrap; gap: 8px; }
.shell .as-event { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; font-weight: 500; cursor: pointer; background: #fff; }
.shell .as-event:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }
.shell .as-event input { accent-color: var(--brand); margin: 0; }
.shell .as-subform { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--as-line-soft); }
.shell .as-subform h3 { font-size: 0.86rem; margin: 0 0 12px; }
.shell .as-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shell .as-doc { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--as-line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); }
.shell .as-doc:hover { border-color: #fbcfe8; text-decoration: none; color: var(--ink); }
.shell .as-doc strong { display: block; font-size: 0.86rem; }
.shell .as-doc span { display: block; font-size: 0.76rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

/* ---- integrations -------------------------------------------------------- */
.shell .as-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shell .as-search { position: relative; flex: 0 1 22rem; min-width: 0; }
.shell .as-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.shell .as-search input { width: 100%; font: inherit; font-size: 0.88rem; padding: 9px 12px 9px 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.shell .as-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.14); }
.shell .as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shell .as-intgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.shell .as-int { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.shell .as-int-top { display: flex; align-items: flex-start; gap: 12px; }
.shell .as-int-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.15); }
.shell .as-int-top h3 { font-size: 0.95rem; margin: 0; font-weight: 700; }
.shell .as-int-top .cat { margin: 2px 0 0; font-size: 0.66rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.shell .as-int-top .as-pill { margin-left: auto; }
.shell .as-int-desc { margin: 0; font-size: 0.83rem; color: #4b5563; line-height: 1.5; flex: 1; }
.shell .as-conn { border: 1px solid var(--as-line); border-radius: 12px; padding: 10px 12px; background: #fbfafc; }
.shell .as-conn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shell .as-conn-top span:first-child { font-size: 0.8rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.shell .as-conn-meta { margin: 4px 0 0; font-size: 0.72rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.shell .as-conn-act { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.shell .as-conn-act form { margin: 0; }
.shell .as-cbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; text-align: center; background: #111827; color: #fff; font-size: 0.8rem; font-weight: 600; padding: 9px; border-radius: 10px; text-decoration: none; border: 0; cursor: pointer; list-style: none; }
.shell .as-cbtn:hover { background: #1f2937; color: #fff; text-decoration: none; }
.shell .as-cbtn.off { background: var(--canvas); color: var(--ink-soft); border: 1px solid var(--as-line); cursor: default; font-weight: 500; }
.shell .as-cbtn::-webkit-details-marker { display: none; }
.shell details[open] > .as-cbtn { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.shell .as-intform { margin-top: 12px; }
.shell .as-intform .field { margin-bottom: 10px; }
.shell .as-intform .field label { font-size: 0.78rem; }
.shell .as-intform .field .hint { font-size: 0.72rem; line-height: 1.5; }
.shell .as-guide { margin-top: 10px; border: 1px solid var(--as-line); border-radius: 12px; padding: 9px 12px; background: #fbfafc; font-size: 0.76rem; color: #4b5563; line-height: 1.55; }
.shell .as-guide > summary { cursor: pointer; font-weight: 600; color: var(--brand-deep); }
.shell .as-guide ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.shell .as-guide .t { margin: 8px 0 2px; font-weight: 600; color: var(--ink); }
.shell .as-guide .i { margin: 0 0 6px; }
.shell .as-intfoot { text-align: center; font-size: 0.76rem; font-weight: 600; color: var(--brand-deep); }
.shell .as-reqcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; }
.shell .as-reqcard h2 { font-size: 1rem; margin: 0; }
.shell .as-reqcard p { margin: 3px 0 0; font-size: 0.84rem; color: var(--ink-soft); }

/* ---- shopify webhook ----------------------------------------------------- */
.shell .as-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--as-line-soft); }
.shell .as-stats > div { padding: 16px 24px; min-width: 0; }
.shell .as-stats > div + div { border-left: 1px solid var(--as-line-soft); }
.shell .as-stats dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
.shell .as-stats dd { margin: 0; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.shell .as-tabs { border: 1px solid var(--as-line); border-radius: 14px; overflow: hidden; }
.shell .as-tabs details + details { border-top: 1px solid var(--as-line-soft); }
.shell .as-tabs summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 12px 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.shell .as-tabs summary::-webkit-details-marker { display: none; }
.shell .as-tabs summary::after { content: "+"; color: var(--ink-soft); font-weight: 500; font-size: 1.1rem; }
.shell .as-tabs details[open] summary::after { content: "-"; }
.shell .as-tabs details[open] summary { background: #fbfafc; }
.shell .as-tabs ol, .shell .as-tabs .as-note { margin: 0; padding: 4px 16px 16px 36px; font-size: 0.86rem; color: #4b5563; line-height: 1.7; }
.shell .as-tabs .as-note { padding-left: 16px; }
.shell .as-tabs code { font-size: 0.78rem; background: var(--canvas); border: 1px solid var(--as-line); border-radius: 6px; padding: 1px 5px; }

/* ---- redeem -------------------------------------------------------------- */
.shell .as-redeem { max-width: 560px; margin: 0 auto; width: 100%; }
.shell .as-stackbar { display: flex; gap: 6px; }
.shell .as-stackbar i { flex: 1; height: 8px; border-radius: 999px; background: var(--line); }
.shell .as-stackbar i.on { background: var(--brand); }
.shell .as-codebox { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.15em; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .shell .as-settings { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .shell .as-subnav { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .shell .as-subnav a { flex-shrink: 0; background: #fff; border: 1px solid var(--as-line); padding: 7px 12px; font-size: 0.8rem; }
  .shell .as-subnav .sep { display: none; }
  .shell .as-checkout { grid-template-columns: minmax(0, 1fr); }
  .shell .as-side { position: static; }
  .shell .as-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .as-docs, .shell .as-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .shell .as-card-h { padding: 18px 18px 0; }
  .shell .as-card-h.line { padding-bottom: 14px; }
  .shell .as-card-b { padding: 16px 18px 18px; }
  .shell .as-card-f { padding: 12px 18px; }
  .shell .as-card-f .as-actions { margin-left: 0; width: 100%; }
  .shell .as-card-f .as-actions > *, .shell .as-card-f > .btn { flex: 1; }
  .shell .as-grid2 { grid-template-columns: minmax(0, 1fr); }
  .shell .as-current-top { padding: 18px; }
  .shell .as-price { text-align: left; }
  .shell .as-usage { grid-template-columns: minmax(0, 1fr); }
  .shell .as-usage > div { padding: 14px 18px 16px; }
  .shell .as-usage > div + div { border-left: 0; border-top: 1px solid var(--as-line-soft); }
  .shell .as-choices { grid-template-columns: minmax(0, 1fr); }
  .shell .as-how { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .shell .as-hero { padding: 20px 18px; }
  .shell .as-hero h2 { font-size: 1.3rem; }
  .shell .as-inline { flex-direction: column; }
  .shell .as-inline.keep { flex-direction: row; }
  .shell .as-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell .as-stats > div { padding: 14px 18px; }
  .shell .as-stats > div:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--as-line-soft); }
  .shell .as-search { flex: 1 1 100%; }
  .shell .as-reqcard { padding: 18px; }
  .shell .as-plan { padding: 20px; }
  .shell .as-row-act { width: 100%; }
}

.shell .al-locked { color: var(--ink-soft); }
.shell .al-pro { font-size: .6rem; font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-deep); }

/* ---- Contact capture (automation builder) ---- */
.shell .aa-new { display: inline-block; margin-left: 6px; vertical-align: 2px; font-size: .6rem; font-weight: 800; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; background: #dcfce7; color: #15803d; }
.shell .aa-opt { font-weight: 500; color: #9ca3af; font-size: .8rem; }
.shell .aa-cc-body { margin-top: 16px; }
.shell .aa-cc-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.shell .aa-cc-mode { position: relative; cursor: pointer; margin: 0; }
.shell .aa-cc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.shell .aa-cc-mode span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 600; color: #4b4458; background: #fff; transition: all .12s; }
.shell .aa-cc-mode input:checked + span { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }
.shell .aa-cc-mode input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.shell .aa-pv-ask { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.45); font-weight: 600; }
.shell .aa-pv-ask[hidden] { display: none; }
.shell .al-cinfo { display: flex; flex-direction: column; gap: 4px; }
.shell .al-cinfo a { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink); white-space: nowrap; }
.shell .al-cinfo a:hover { color: var(--brand-deep); }
.shell .al-cinfo svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; }

/* Billing: subscription details, payment method, payments/invoices table (as-) */
.shell .as-bill-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.shell .as-bill-callout { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; font-size: 0.84rem; font-weight: 600; line-height: 1.5; background: #f0fdf4; color: #15803d; border: 1px solid #dcfce7; }
.shell .as-bill-callout.cancelled { background: #fffbeb; color: #b45309; border-color: #fef3c7; }
.shell .as-bill-callout.past_due { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.shell .as-bill-callout.lifetime { background: var(--brand-tint); color: var(--brand-deep); border-color: #fce7f3; }
.shell .as-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.shell .as-kv > div { min-width: 0; }
.shell .as-kv dt { font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 3px; }
.shell .as-kv dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.shell .as-pm { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid #ece8f0; border-radius: 14px; background: #fbfafc; }
.shell .as-pm .as-grow { flex: 1; min-width: 0; }
.shell .as-pm-card { width: 52px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: #1f2937; color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; }
.shell .as-pm-card svg { width: 20px; height: 20px; }
.shell .as-pm-title { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.shell .as-pm-sub { margin: 2px 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.shell .as-paytable .num { text-align: right; font-variant-numeric: tabular-nums; }
.shell .as-paytable .end { text-align: right; }
.shell .as-pay-desc { display: block; font-weight: 600; color: var(--ink); }
.shell .as-pay-kind { display: block; font-size: 0.74rem; margin-top: 2px; }
.shell .as-doclink { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 600; color: var(--brand-deep); text-decoration: none; padding: 5px 10px; border: 1px solid #ece8f0; border-radius: 9px; background: #fff; }
.shell .as-doclink:hover { background: #fbfafc; text-decoration: none; }
.shell .as-doclink svg { width: 14px; height: 14px; }
.shell .as-back { display: inline-flex; align-items: center; gap: 4px; }
.shell .as-back svg { width: 15px; height: 15px; }
@media (max-width: 1100px) {
  .shell .as-bill-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .shell .as-kv { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .shell #payment-history .as-card-h { flex-wrap: wrap; }
}

/* ================= UPGRADE (billing card + /billing/upgrade) ================= */
/* card on /billing */
.shell .upc { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; margin: 4px 0 20px; border-radius: 20px; overflow: hidden;
  border: 1px solid #f5c6dc; background: radial-gradient(120% 140% at 0% 0%, #fff 30%, #fdf2f8 70%, #fce7f3 100%);
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 24px 48px -32px rgba(190,24,93,.45); }
.shell .upc-main { padding: 26px 28px; }
.shell .upc-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep); }
.shell .upc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(225,29,116,.15); }
.shell .upc h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.shell .upc-why { margin: 8px 0 0; color: #4b4458; font-size: .92rem; max-width: 52ch; }
.shell .upc-meter { height: 7px; border-radius: 999px; background: #f3e8ef; overflow: hidden; margin-top: 12px; max-width: 340px; }
.shell .upc-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f472b6, var(--brand)); }
.shell .upc-meter i.warm { background: #f59e0b; }
.shell .upc-meter i.hot { background: #ef4444; }
.shell .upc-gains { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.shell .upc-gains li { display: flex; gap: 9px; align-items: flex-start; font-size: .86rem; line-height: 1.35; }
.shell .upc-gains svg { width: 18px; height: 18px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: var(--brand); color: #fff; margin-top: 1px; }
.shell .upc-gains em { font-style: normal; color: var(--brand-deep); font-weight: 700; }
.shell .upc-gains small { display: block; color: #9a92a6; font-size: .74rem; }
.shell .upc-side { padding: 26px 28px; background: #fff; border-left: 1px solid #f5d5e5; display: flex; flex-direction: column; justify-content: center; }
.shell .upc-delta { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.shell .upc-delta span { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.shell .upc-delta-sub { margin: 0 0 16px; font-size: .78rem; color: #9a92a6; }
.shell .upc-cta, .shell .up-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; font-size: .95rem; font-weight: 700; border-radius: 14px;
  box-shadow: 0 4px 0 #9d174d, 0 14px 28px -12px rgba(225,29,116,.75); transition: transform .12s, box-shadow .12s; }
.shell .upc-cta svg, .shell .up-cta svg { width: 17px; height: 17px; transition: transform .15s; }
.shell .upc-cta:hover, .shell .up-cta:hover { transform: translateY(-1px); text-decoration: none; }
.shell .upc-cta:hover svg, .shell .up-cta:hover svg { transform: translateX(3px); }
.shell .upc-cta:active, .shell .up-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #9d174d; }
.shell .upc-micro { margin: 12px 0 0; font-size: .76rem; color: var(--ink-soft); text-align: center; }
.shell .upc-year, .shell .upc-top { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.shell .upc-year-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #ecfdf5; color: #059669; flex-shrink: 0; }
.shell .upc-top .upc-year-ico { background: #fef3c7; color: #b45309; }
.shell .upc-year-ico svg { width: 21px; height: 21px; }
.shell .upc-year-txt { flex: 1; min-width: 0; }
.shell .upc-year-txt strong { font-size: .98rem; }
.shell .upc-year-txt p { margin: 2px 0 0; font-size: .85rem; color: var(--ink-soft); }
.shell .upc-year .btn { flex-shrink: 0; }
.shell .up-done { display: flex; gap: 16px; padding: 20px 22px; margin-bottom: 18px; border-color: #bbf7d0; background: linear-gradient(135deg, #f0fdf4, #fff 70%); }
.shell .up-done-ico { width: 44px; height: 44px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.shell .up-done-ico svg { width: 22px; height: 22px; }
.shell .up-done strong { font-size: 1.05rem; }
.shell .up-done p { margin: 2px 0 12px; color: var(--ink-soft); font-size: .88rem; }
.shell .up-done-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* /billing/upgrade */
.shell .up-page { max-width: 1080px; }
.shell .up-crumb { display: inline-flex; align-items: center; gap: 4px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.shell .up-crumb svg { width: 15px; height: 15px; }
.shell .up-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.shell .up-pad { padding: 24px 26px; }
.shell .up-pad-b0 { padding-bottom: 8px; }
.shell .up-h2 { font-size: 1.08rem; font-weight: 750; letter-spacing: -.01em; margin-bottom: 14px; }
.shell .up-hero { text-align: center; padding: 22px 0 26px; }
.shell .up-eyebrow { margin: 0 0 8px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.shell .up-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.shell .up-mark { background: linear-gradient(transparent 62%, #fde68a 62%, #fde68a 92%, transparent 92%); padding: 0 4px; }
.shell .up-sub { margin: 12px auto 0; max-width: 58ch; color: #5d566b; font-size: 1rem; }
.shell .up-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.shell .up-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #f3eff6; border: 1px solid var(--line); }
.shell .up-seg a { padding: 8px 18px; border-radius: 999px; font-size: .86rem; font-weight: 650; color: #5d566b; white-space: nowrap; }
.shell .up-seg a:hover { text-decoration: none; color: var(--ink); }
.shell .up-seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(17,24,39,.12); }
.shell .up-save { margin-left: 4px; font-size: .68rem; font-weight: 800; color: #15803d; background: #dcfce7; padding: 2px 6px; border-radius: 999px; }
.shell .up-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.shell .up-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .up-gains { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shell .up-gain { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: #fdf7fa; border: 1px solid #f7e3ed; }
.shell .up-gain-ico svg { width: 26px; height: 26px; padding: 6px; border-radius: 9px; background: var(--brand); color: #fff; }
.shell .up-gain strong { font-size: .92rem; }
.shell .up-gain p { margin: 2px 0 0; font-size: .84rem; color: var(--brand-deep); font-weight: 650; }
.shell .up-was { display: block; color: #9a92a6; font-weight: 500; font-size: .76rem; }
.shell .up-table-wrap { overflow-x: auto; padding: 0 10px 10px; }
.shell .up-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; }
.shell .up-table th, .shell .up-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.shell .up-table thead th { font-size: .95rem; font-weight: 750; border-bottom: 1px solid var(--line); }
.shell .up-table thead small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a92a6; margin-top: 2px; }
.shell .up-table tbody th { font-weight: 550; color: #3b3548; }
.shell .up-table .up-col-cur { color: #7a7287; width: 26%; }
.shell .up-table .up-col-new { width: 30%; background: #fdf4f8; }
.shell .up-table thead .up-col-new { border-radius: 12px 12px 0 0; color: var(--brand-deep); }
.shell .up-table thead .up-col-new small { color: var(--brand); }
.shell .up-table tr.gain th { color: var(--ink); font-weight: 700; }
.shell .up-table tr.gain .up-col-new b { color: var(--brand-deep); }
.shell .up-table tr:last-child td.up-col-new { border-radius: 0 0 12px 12px; }
.shell .up-price-row th, .shell .up-price-row td { border-bottom: 0; }
.shell .up-yes svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.shell .up-col-new .up-yes svg { background: var(--brand); color: #fff; }
.shell .up-no svg { width: 18px; height: 18px; color: #d4cfda; }
.shell .up-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shell .up-reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shell .up-review { margin: 0; padding: 20px 22px; }
.shell .up-stars { display: flex; gap: 2px; color: #f59e0b; }
.shell .up-stars svg { width: 15px; height: 15px; }
.shell .up-review blockquote { margin: 10px 0 14px; font-size: .9rem; line-height: 1.55; color: #3b3548; }
.shell .up-review figcaption { display: flex; align-items: center; gap: 10px; font-size: .84rem; }
.shell .up-review small { display: block; color: var(--ink-soft); font-size: .76rem; }
.shell .up-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f472b6, var(--brand-deep)); flex-shrink: 0; }
.shell .up-faq details { border-bottom: 1px solid var(--line-soft); }
.shell .up-faq details:last-child { border-bottom: 0; }
.shell .up-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 650; font-size: .93rem; }
.shell .up-faq summary::-webkit-details-marker { display: none; }
.shell .up-faq summary svg { width: 18px; height: 18px; color: #9a92a6; flex-shrink: 0; transition: transform .2s; }
.shell .up-faq details[open] summary svg { transform: rotate(180deg); color: var(--brand); }
.shell .up-faq details p { margin: 0 0 16px; color: #5d566b; font-size: .88rem; line-height: 1.6; }
.shell .up-help { margin: 14px 0 0; font-size: .84rem; color: var(--ink-soft); }
.shell .up-side { position: sticky; top: 92px; }
.shell .up-summary { padding: 24px; border: 1.5px solid #f5c6dc; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 28px 50px -30px rgba(190,24,93,.5); }
.shell .up-sum-k { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a92a6; }
.shell .up-sum-plan { font-size: 1.35rem; font-weight: 800; margin-top: 4px; }
.shell .up-sum-plan span { font-size: .72rem; font-weight: 700; text-transform: capitalize; padding: 3px 8px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep); vertical-align: 4px; margin-left: 4px; }
.shell .up-sum-price { margin-top: 12px; display: flex; align-items: baseline; gap: 6px; }
.shell .up-sum-price s { color: #9a92a6; font-size: 1rem; }
.shell .up-sum-price b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.shell .up-sum-price span { color: var(--ink-soft); font-size: .9rem; }
.shell .up-sum-eq { margin: 6px 0 0; font-size: .82rem; color: var(--ink-soft); }
.shell .up-sum-eq em { font-style: normal; color: #15803d; font-weight: 700; }
.shell .up-steps { list-style: none; padding: 16px 0; margin: 16px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 11px; }
.shell .up-steps li { display: flex; gap: 10px; font-size: .84rem; line-height: 1.4; color: #4b4458; }
.shell .up-steps svg { width: 18px; height: 18px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.shell .up-steps b { color: var(--ink); }
.shell .up-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: .74rem; color: var(--ink-soft); text-align: center; }
.shell .up-secure svg { width: 14px; height: 14px; flex-shrink: 0; }
.shell .up-empty { text-align: center; padding: 44px 24px; margin-top: 18px; }
.shell .up-empty-ico { width: 56px; height: 56px; border-radius: 18px; background: #fef3c7; color: #b45309; display: grid; place-items: center; margin: 0 auto 14px; }
.shell .up-empty-ico svg { width: 28px; height: 28px; }
.shell .up-empty p { max-width: 50ch; margin: 8px auto 18px; color: var(--ink-soft); }
.shell .up-mbar { display: none; }

@media (max-width: 980px) {
  .shell .up-grid { grid-template-columns: 1fr; }
  .shell .up-side { position: static; order: -1; }
}
@media (max-width: 720px) {
  .shell .upc { grid-template-columns: 1fr; }
  .shell .upc-side { border-left: 0; border-top: 1px solid #f5d5e5; }
  .shell .upc-main, .shell .upc-side { padding: 20px; }
  .shell .upc-gains, .shell .up-gains, .shell .up-reviews { grid-template-columns: 1fr; }
  .shell .upc-year { flex-wrap: wrap; }
  .shell .upc-year .btn { width: 100%; }
  .shell .up-hero { padding-top: 10px; }
  .shell .up-pad { padding: 20px; }
  .shell .up-table th, .shell .up-table td { padding: 10px 8px; }
  .shell .up-summary .up-cta, .shell .up-summary .up-secure { display: none; }
  .shell .up-page { padding-bottom: 70px; }
  .shell .up-mbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 10px; right: 10px;
    bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 30; padding: 10px 10px 10px 16px; border-radius: 16px;
    background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid #f5c6dc; box-shadow: 0 14px 34px -12px rgba(17,24,39,.3); }
  .shell .up-mbar b { font-size: 1.1rem; }
  .shell .up-mbar span { font-size: .78rem; color: var(--ink-soft); margin-left: 4px; }
  .shell .up-mbar .btn { padding: 10px 20px; border-radius: 12px; }
}
.shell .up-bill { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #faf8fb; border: 1px solid var(--line-soft); font-size: .84rem; }
.shell .up-bill > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: #4b4458; }
.shell .up-bill > div span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shell .up-bill .cr span:last-child { color: #15803d; font-weight: 600; }
.shell .up-bill .tot { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); font-weight: 800; color: var(--ink); }
.shell .up-est { margin: 8px 0 0; font-size: .72rem; color: #9a92a6; text-align: center; line-height: 1.45; }

/* Sidebar: brand + workspace on top, the NAV scrolls, usage card + upgrade
   button pinned to the bottom - always fully visible whatever the height. */
.shell .sidebar { overflow: hidden; }
.shell .sidebar .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.shell .sidebar .sb-spacer { display: none; }
.shell .sidebar .usage-w { margin-top: 8px; }
@media (max-height: 820px) {
  .shell .sb-nav .nav-link { padding-top: 7px; padding-bottom: 7px; }
  .shell .sb-nav .nav-title { padding-top: 10px; }
  .shell .uw-top { padding: 12px 14px 10px; }
  .shell .uw-trend, .shell .uw-frac { display: none; }
  .shell .uw-grid { padding: 8px 14px; }
}
@media (max-height: 680px) {
  .shell .uw-grid { display: none; }
}

/* ================= PHASE 5: auth (au-), collab (cb-), admin shell (ap- + adm-*), admin config/content (aq-) ================= */
/* ---- auth ---- */
/* =====================================================================
   AUTH (guest) pages - auth/_guest.html layout + login/register/forgot/
   reset/verify/confirm_password/logout + billing/redeem_guest.html.
   Every class is prefixed "au-"; scoped under .au so nothing leaks.
   ===================================================================== */
.au {
  --au-pink: #e11d74; --au-pink-aa: #c8175f; --au-deep: #be185d; --au-deeper: #9d174d;
  --au-tint: #fdf2f8; --au-tint-2: #fce7f3; --au-ink: #14121a; --au-soft: #5b5566;
  --au-mute: #6b6574; --au-line: #ece8f0;
  display: grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh;
  background: #faf8fb; color: var(--au-ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.au :focus-visible { outline: 3px solid var(--au-pink); outline-offset: 2px; border-radius: 8px; }

/* ---------- brand panel (desktop only) ---------- */
.au-brand {
  display: none; position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(244, 114, 182, 0.55), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(157, 23, 77, 0.9), transparent 70%),
    linear-gradient(160deg, #e11d74 0%, #be185d 55%, #831843 100%);
}
.au-brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18;
  background-image: radial-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.au-brand-in {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  min-height: 100%; padding: 40px 56px 36px; gap: 36px;
}
.au-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.au-logo:hover { text-decoration: none; }
.au-logo img { width: 36px; height: 36px; flex-shrink: 0; }
.au-logo .wm { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; color: var(--au-ink); }
.au-logo .wm span { color: var(--au-pink); }
.au-brand .au-logo img { background: #fff; border-radius: 10px; padding: 4px; }
.au-brand .au-logo .wm, .au-brand .au-logo .wm span { color: #fff; }
.au-brand-copy { margin-top: auto; }
.au-brand h2 {
  font-size: 2.35rem; line-height: 1.12; font-weight: 800; letter-spacing: -0.025em;
  color: #fff; margin: 0 0 14px; max-width: 30rem;
}
.au-brand h2 span { color: #ffe4f1; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 6px; text-decoration-thickness: 3px; }
.au-brand-sub { margin: 0; font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 28rem; }

/* DM mockup */
.au-mock {
  position: relative; max-width: 380px; background: #fff; color: var(--au-ink);
  border-radius: 20px; padding: 16px; box-shadow: 0 30px 60px -24px rgba(60, 0, 30, 0.6);
}
.au-mock-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--au-line); }
.au-ava {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg, #f472b6, #e11d74);
}
.au-mock-head b { display: block; font-size: 0.86rem; }
.au-mock-head small { display: block; font-size: 0.74rem; color: var(--au-mute); }
.au-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 0.7rem; font-weight: 700;
}
.au-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.au-mock-body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.au-cmt { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; }
.au-cmt .au-ava { width: 26px; height: 26px; font-size: 0.7rem; background: #c7c2cf; }
.au-cmt p { margin: 0; background: #f4f2f7; border-radius: 4px 14px 14px 14px; padding: 7px 11px; }
.au-cmt p b { font-weight: 700; margin-right: 4px; }
.au-kw { color: var(--au-deep); font-weight: 700; }
.au-dm {
  align-self: flex-end; max-width: 86%; background: var(--au-pink); color: #fff;
  border-radius: 14px 14px 4px 14px; padding: 9px 12px; font-size: 0.82rem; line-height: 1.45;
}
.au-dm-btn {
  display: block; margin-top: 8px; background: #fff; color: var(--au-deep); text-align: center;
  font-weight: 700; font-size: 0.78rem; border-radius: 9px; padding: 6px 10px;
}
.au-mock-foot { margin: 2px 0 0; font-size: 0.72rem; color: var(--au-mute); text-align: right; }

.au-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.au-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; color: rgba(255, 255, 255, 0.95); }
.au-points svg {
  flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2); color: #fff;
}
.au-rating { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 0.88rem; color: rgba(255, 255, 255, 0.9); }
.au-stars { display: inline-flex; gap: 2px; color: #fde68a; }
.au-stars svg { width: 16px; height: 16px; }
.au-rating b { color: #fff; }
.au-shield { display: inline-flex; color: #fde68a; }
.au-shield svg { width: 18px; height: 18px; }

/* ---------- main column ---------- */
.au-main { display: flex; flex-direction: column; min-width: 0; padding: 18px 16px 22px; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-back {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600;
  color: var(--au-soft); text-decoration: none; padding: 6px 10px; border-radius: 999px;
}
.au-back:hover { background: #fff; color: var(--au-deep); text-decoration: none; }
.au-back svg { width: 16px; height: 16px; }
.au-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 22px 0; }
.au-card {
  width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--au-line);
  border-radius: 20px; padding: 26px 20px; box-shadow: 0 1px 2px rgba(20, 18, 26, 0.04), 0 18px 40px -22px rgba(20, 18, 26, 0.22);
}
.au-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  font-size: 0.8rem; color: var(--au-mute);
}
.au-foot a { color: var(--au-mute); text-decoration: none; }
.au-foot a:hover { color: var(--au-deep); text-decoration: underline; }

/* mobile trust strip under the card */
.au-mtrust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 0 16px; font-size: 0.8rem; color: var(--au-soft); }
.au-mtrust span { display: inline-flex; align-items: center; gap: 5px; }
.au-mtrust svg { width: 14px; height: 14px; color: var(--au-pink); }
.au-mtrust .au-stars svg { color: #f59e0b; width: 13px; height: 13px; }

/* ---------- card content ---------- */
.au-head { margin-bottom: 22px; }
.au-ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--au-tint); color: var(--au-deep); border: 1px solid var(--au-tint-2);
}
.au-ico svg { width: 24px; height: 24px; }
.au-head h1 { font-size: 1.6rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--au-ink); }
.au-head p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--au-soft); }
.au-head p strong { color: var(--au-ink); word-break: break-word; }
.au-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.au-perk {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: var(--au-tint); color: var(--au-deeper); font-size: 0.76rem; font-weight: 700;
}
.au-perk svg { width: 13px; height: 13px; }

.au-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1.5px solid #e2dde8; border-radius: 12px; background: #fff;
  font-weight: 700; font-size: 0.95rem; color: var(--au-ink); text-decoration: none;
  box-shadow: 0 2px 0 #e2dde8; transition: border-color 0.15s, transform 0.1s, box-shadow 0.1s;
}
.au-google:hover { border-color: #f9a8d4; text-decoration: none; background: #fffafd; }
.au-google:active { transform: translateY(2px); box-shadow: 0 0 0 #e2dde8; }
.au-google svg { width: 20px; height: 20px; flex-shrink: 0; }
.au-or {
  display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--au-mute);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.au-or::before, .au-or::after { content: ""; flex: 1; height: 1px; background: var(--au-line); }

.au .field { margin-bottom: 16px; position: relative; }
.au .field label { font-size: 0.86rem; font-weight: 700; color: var(--au-ink); margin-bottom: 6px; }
.au .field input {
  padding: 12px 14px; border: 1.5px solid #e2dde8; border-radius: 12px; font-size: 0.95rem;
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
}
.au .field input::placeholder { color: #a39cae; }
.au .field input:hover { border-color: #d3cbdb; }
.au .field input:focus { border-color: var(--au-pink); box-shadow: 0 0 0 4px rgba(225, 29, 116, 0.14); }
.au .field .hint { font-size: 0.8rem; color: var(--au-mute); margin: 6px 0 0; }
.au-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.au-labelrow label { margin: 0 !important; }
.au-labelrow a { font-size: 0.82rem; font-weight: 600; color: var(--au-deep); }
.au-pw { position: relative; }
.au-pw input { padding-right: 70px !important; }
.au-reveal {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--au-soft); font: inherit; font-size: 0.78rem; font-weight: 700;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.au-reveal:hover { background: var(--au-tint); color: var(--au-deep); }
.au-match { font-size: 0.8rem; margin: 6px 0 0; min-height: 1.1em; }
.au-match.ok { color: #15803d; }
.au-match.bad { color: #b91c1c; }

.au-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 4px; }
.au-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--au-soft); cursor: pointer; }
.au-check input { width: 17px; height: 17px; margin: 0; accent-color: var(--au-pink); }

.au .btn-primary.au-submit, .au .au-submit {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--au-pink-aa); color: #fff; font: inherit; font-size: 1rem; font-weight: 800; text-decoration: none;
  box-shadow: 0 4px 0 var(--au-deeper), 0 14px 26px -14px rgba(225, 29, 116, 0.8);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.au .au-submit:hover { background: var(--au-deep); text-decoration: none; color: #fff; }
.au .au-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--au-deeper), 0 6px 14px -10px rgba(225, 29, 116, 0.7); }
.au .au-submit svg { width: 18px; height: 18px; }
.au .au-submit.au-inline { width: auto; display: inline-flex; padding: 12px 26px; }
.au-actions { display: flex; justify-content: flex-end; }
.au-quiet {
  display: flex; width: 100%; align-items: center; justify-content: center; margin-top: 10px;
  padding: 12px 16px; border: 1.5px solid #e2dde8; border-radius: 12px; background: #fff;
  color: var(--au-ink); font: inherit; font-size: 0.92rem; font-weight: 700; text-decoration: none;
}
.au-quiet:hover { border-color: #f9a8d4; color: var(--au-deep); text-decoration: none; }

.au-legal { margin: 14px 0 0; text-align: center; font-size: 0.76rem; line-height: 1.5; color: var(--au-mute); }
.au-legal a { color: var(--au-soft); text-decoration: underline; }
.au-swap { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--au-line); text-align: center; font-size: 0.9rem; color: var(--au-soft); }
.au-swap a { font-weight: 700; color: var(--au-deep); }
.au-swap .link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--au-deep); cursor: pointer; }
.au-swap .link-btn:hover { text-decoration: underline; }

/* alerts (c.alert + page-level ok/error) */
.au .alert {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px;
  border-radius: 12px; font-size: 0.88rem; font-weight: 600; line-height: 1.5;
}
.au .alert::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--au-alert-ico) center / contain no-repeat; mask: var(--au-alert-ico) center / contain no-repeat;
}
.au .alert.error {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  --au-alert-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
.au .alert.ok {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
  --au-alert-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}

/* checkout hint (auth/_checkout_hint.html) */
.au-hint {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding: 14px 16px;
  border-radius: 14px; background: var(--au-tint); border: 1px solid #fbcfe8;
}
.au-hint-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; color: var(--au-deep); border: 1px solid #fbcfe8;
}
.au-hint-ico svg { width: 18px; height: 18px; }
.au-hint-txt { font-size: 0.88rem; line-height: 1.5; color: #3b2436; }
.au-hint-txt strong { color: var(--au-deeper); }

/* verify page: email chip + steps */
.au-mail {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 18px;
  border-radius: 12px; background: #faf8fb; border: 1px dashed #e2dde8; font-size: 0.9rem;
}
.au-mail svg { width: 18px; height: 18px; color: var(--au-deep); flex-shrink: 0; }
.au-mail strong { min-width: 0; overflow-wrap: anywhere; }
.au-steps { list-style: none; counter-reset: au; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.au-steps li { counter-increment: au; display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; color: var(--au-soft); }
.au-steps li::before {
  content: counter(au); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--au-tint-2); color: var(--au-deeper); font-size: 0.72rem; font-weight: 800;
}
.au-sep { color: #c9c2d1; margin: 0 6px; }

@media (min-width: 480px) {
  .au-card { padding: 34px 32px; }
  .au-main { padding: 22px 28px 24px; }
}
@media (min-width: 1024px) {
  .au { grid-template-columns: minmax(420px, 46%) 1fr; }
  .au-brand { display: block; }
  .au-top .au-logo { visibility: hidden; }
  .au-mtrust { display: none; }
  .au-main { padding: 26px 40px 28px; }
}
@media (min-width: 1280px) {
  .au-brand-in { padding: 44px 72px 40px; }
  .au-brand h2 { font-size: 2.6rem; }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .au-mock { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .au * { transition: none !important; }
}
/* ================= end AUTH ================= */

/* ---- misc ---- */
/* ==========================================================================
   GROUP misc - Creator Collab apply page (prefix cb-)
   Page: public/collab_apply.html (in-app, extends base.html).
   lifetime_checkout.html (lc-) and errors/*.html (er-) keep inline styles.
   ========================================================================== */
.shell .cb-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.shell .cb-page .alert { margin-bottom: 0; }

/* ---- hero ---------------------------------------------------------------- */
.shell .cb-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 30px 32px; border-radius: 20px; border: 1px solid #f5d5e5; background: linear-gradient(120deg, #fdf2f8 0%, #fff 70%); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 18px 40px -30px rgba(157, 23, 77, 0.45); }
.shell .cb-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #fbcfe8; color: #be185d; font-size: 0.74rem; font-weight: 700; }
.shell .cb-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.shell .cb-hero h1 { margin: 0 0 10px; font-size: clamp(1.55rem, 3.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.shell .cb-hero h1 span { color: var(--brand); }
.shell .cb-hero p { margin: 0; color: #4a4553; font-size: 0.97rem; line-height: 1.6; max-width: 38rem; }
.shell .cb-hero p strong { color: var(--ink); }
.shell .cb-tiers { display: grid; gap: 10px; }
.shell .cb-tier { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid #ece8f0; border-radius: 16px; }
.shell .cb-tier.top { border-color: #f9a8d4; box-shadow: 0 10px 24px -18px rgba(225, 29, 116, 0.7); }
.shell .cb-tier b { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #fdf2f8; color: #be185d; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em; }
.shell .cb-tier.top b { background: var(--brand); color: #fff; box-shadow: 0 3px 0 #9d174d; }
.shell .cb-tier strong { display: block; font-size: 0.95rem; }
.shell .cb-tier small { display: block; color: var(--ink-soft); font-size: 0.8rem; margin-top: 2px; }

/* ---- layout -------------------------------------------------------------- */
.shell .cb-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.shell .cb-card { background: #fff; border: 1px solid #ece8f0; border-radius: 20px; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.14); min-width: 0; }
.shell .cb-card-h { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid #f4f1f6; }
.shell .cb-card-h h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; }
.shell .cb-card-h p { margin: 3px 0 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }
.shell .cb-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: #fdf2f8; color: #be185d; border: 1px solid #fce7f3; }
.shell .cb-ico svg { width: 19px; height: 19px; }
.shell .cb-card-b { padding: 20px 24px 8px; }
.shell .cb-card-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 24px; background: #fbfafc; border-top: 1px solid #f4f1f6; border-radius: 0 0 20px 20px; }
.shell .cb-card-f p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.shell .cb-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* ---- form ---------------------------------------------------------------- */
.shell .cb-form .cb-two { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
.shell .cb-form .field input, .shell .cb-form .field select, .shell .cb-form .field textarea { border-radius: 12px; }
.shell .cb-form .field input[readonly] { background: #f7f5f9; color: var(--ink-soft); }
.shell .cb-form .req { color: var(--danger); }
.shell .cb-form .opt { color: #9a92a6; font-weight: 500; }
.shell .cb-form .alert { margin: -8px 0 16px; }
.shell .cb-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-size: 0.95rem; font-weight: 700; border-radius: 14px; box-shadow: 0 4px 0 #9d174d, 0 14px 28px -12px rgba(225, 29, 116, 0.75); transition: transform .12s, box-shadow .12s; }
.shell .cb-cta:hover { transform: translateY(-1px); }
.shell .cb-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #9d174d; }

/* ---- side panels --------------------------------------------------------- */
.shell .cb-panel { padding: 22px 24px; }
.shell .cb-panel h2 { margin: 0 0 14px; font-size: 0.98rem; letter-spacing: -0.01em; }
.shell .cb-reqs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.shell .cb-reqs li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 0.88rem; line-height: 1.5; color: #4a4553; }
.shell .cb-reqs svg { width: 18px; height: 18px; color: #16a34a; margin-top: 1px; }
.shell .cb-reqs strong { color: var(--ink); }
.shell .cb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.shell .cb-steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.shell .cb-steps li:last-child { padding-bottom: 0; }
.shell .cb-steps li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: #fce7f3; }
.shell .cb-steps .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #f9a8d4; color: #be185d; font-weight: 800; font-size: 0.82rem; }
.shell .cb-steps h3 { margin: 5px 0 2px; font-size: 0.9rem; }
.shell .cb-steps p { margin: 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }
.shell .cb-help { padding: 18px 22px; background: #fdf2f8; border-color: #fbcfe8; font-size: 0.86rem; line-height: 1.55; color: #4a4553; }
.shell .cb-help p { margin: 0; }

/* ---- status states ------------------------------------------------------- */
.shell .cb-status { padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.shell .cb-status .cb-big { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; }
.shell .cb-status .cb-big svg { width: 28px; height: 28px; }
.shell .cb-status .cb-big.ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #059669; }
.shell .cb-status .cb-big.wait { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }
.shell .cb-status h2 { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.shell .cb-status p { margin: 0; color: #4a4553; line-height: 1.6; max-width: 34rem; font-size: 0.93rem; }
.shell .cb-status p strong { color: var(--ink); }
.shell .cb-status .cb-meta { font-size: 0.8rem; color: var(--ink-soft); }
.shell .cb-status .cb-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.shell .cb-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.shell .cb-status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.shell .cb-status-pill.green { background: #dcfce7; color: #166534; }
.shell .cb-status-pill.amber { background: #fef3c7; color: #92400e; }
.shell .cb-warn { display: flex; gap: 12px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 16px 20px; }
.shell .cb-warn svg { width: 20px; height: 20px; color: #d97706; flex-shrink: 0; margin-top: 2px; }
.shell .cb-warn p { font-size: 0.875rem; color: #92400e; margin: 4px 0 0; line-height: 1.5; }
.shell .cb-warn p:first-child { margin-top: 0; font-weight: 700; color: #78350f; }

@media (max-width: 960px) {
  .shell .cb-grid { grid-template-columns: minmax(0, 1fr); }
  .shell .cb-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .shell .cb-hero { padding: 22px 18px; }
  .shell .cb-form .cb-two { grid-template-columns: minmax(0, 1fr); }
  .shell .cb-card-h, .shell .cb-card-b, .shell .cb-card-f, .shell .cb-panel { padding-left: 18px; padding-right: 18px; }
  .shell .cb-card-f .cb-cta { width: 100%; }
  .shell .cb-status { padding: 26px 18px; }
}
@media (prefers-reduced-motion: reduce) { .shell .cb-cta { transition: none; } }

/* ---- adminA ---- */
/* =====================================================================
   ADMIN SHELL + SHARED ADMIN LOOK (group adminA, prefix ap-)
   Every rule is scoped under .adm (the admin/base.html root) so nothing
   leaks into the customer app. Restyles the existing adm-* shell classes
   and the shared component classes the admin pages already use
   (card / a-* / cm-* / bl-* / pg-* / input-field / btn-primary), plus a
   few new ap-* building blocks (KPI cards, section heads, danger zone).
   ===================================================================== */
.adm {
  --ap-pink: #e11d74; --ap-pink-d: #be185d; --ap-pink-dd: #9d174d;
  --ap-tint: #fdf2f8; --ap-tint-2: #fce7f3;
  --ap-ink: #17121c; --ap-ink-2: #4a4453; --ap-mut: #7a7384; --ap-faint: #a39cad;
  --ap-line: #ece8f0; --ap-line-2: #f4f1f6; --ap-canvas: #f7f5f9; --ap-row: #fbf9fc;
  --ap-side: #140c14; --ap-side-2: #1e1320; --ap-side-line: rgba(255, 255, 255, 0.07);
  --ap-side-txt: #b3a9b8;
  --ap-green: #15803d; --ap-green-bg: #dcfce7; --ap-amber: #b45309; --ap-amber-bg: #fef3c7;
  --ap-red: #b91c1c; --ap-red-bg: #fee2e2; --ap-gray-bg: #f1eef4;
  --ap-r: 14px; --ap-r-sm: 10px;
  --ap-shadow: 0 1px 2px rgba(23, 18, 28, 0.04), 0 1px 1px rgba(23, 18, 28, 0.02);
  --ap-shadow-2: 0 10px 30px -14px rgba(23, 18, 28, 0.22);
  color: var(--ap-ink);
}

/* ---------- shell ---------- */
.adm.adm-shell { background: var(--ap-canvas); }
.adm .adm-sidebar {
  width: 240px; background: linear-gradient(180deg, var(--ap-side) 0%, var(--ap-side-2) 100%);
  display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: #3a2a38 transparent;
}
.adm .adm-brand { height: 60px; padding: 0 18px; gap: 10px; border-bottom: 1px solid var(--ap-side-line); flex-shrink: 0; }
.adm .adm-brand img { width: 30px; height: 30px; border-radius: 8px; }
.adm .adm-brand .n { font-size: 1rem; line-height: 1.1; color: #fff; }
.adm .adm-brand .n .wm span { color: #f472b6; }
.adm .adm-brand .s {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fbcfe8; background: rgba(225, 29, 116, 0.22);
}
.adm .adm-nav { padding: 12px 10px 20px; gap: 2px; }
.adm .adm-nav-group { padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--ap-side-line); gap: 2px; }
.adm .adm-nav-title { padding: 0 12px 6px; font-size: 10px; font-weight: 700; color: #7c6d7a; letter-spacing: 0.08em; }
.adm .sidebar-link {
  position: relative; gap: 10px; padding: 8px 12px; font-size: 0.84rem; font-weight: 500;
  border-radius: 9px; color: var(--ap-side-txt);
}
.adm .sidebar-link svg { width: 18px; height: 18px; color: #8d7f8c; transition: color 0.15s; }
.adm .sidebar-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.adm .sidebar-link:hover svg { color: #e5dbe6; }
.adm .sidebar-link.active { background: rgba(225, 29, 116, 0.16); color: #fff; font-weight: 600; }
.adm .sidebar-link.active svg { color: #f472b6; }
.adm .sidebar-link.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--ap-pink);
}
.adm .sidebar-link:focus-visible { outline: 2px solid #f472b6; outline-offset: -2px; }
.adm .adm-overlay { background: rgba(20, 12, 20, 0.55); }

.adm .adm-header {
  background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid var(--ap-line);
}
.adm .adm-header-in { height: 56px; gap: 12px; }
.adm .adm-h1 { font-size: 1.05rem; line-height: 1.4; font-weight: 700; letter-spacing: -0.01em; color: var(--ap-ink); }
.adm .adm-burger { color: var(--ap-mut); padding: 6px; margin-left: -6px; border-radius: 8px; }
.adm .adm-burger:hover { background: var(--ap-line-2); color: var(--ap-ink); }
.adm .ap-hdr-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.adm .ap-hdr-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px;
  border: 1px solid var(--ap-line); background: #fff; color: var(--ap-ink-2);
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.adm .ap-hdr-link:hover { border-color: #e4d9e8; background: var(--ap-row); color: var(--ap-ink); text-decoration: none; }
.adm .ap-hdr-link svg { width: 15px; height: 15px; }
.adm .ap-me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm .ap-me-av {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, #f472b6, #e11d74); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.adm .ap-me-t { font-size: 0.78rem; line-height: 1.2; color: var(--ap-mut); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm .ap-me-t b { display: block; color: var(--ap-ink); font-weight: 600; }
@media (max-width: 767px) { .adm .ap-me-t, .adm .ap-hdr-link .t { display: none; } .adm .ap-hdr-link { padding: 6px 8px; } }

.adm .adm-content { max-width: 1440px; }
@media (min-width: 1024px) {
  .adm .adm-main { margin-left: 240px; }
  .adm .adm-header-in { padding: 0 28px; }
  .adm .adm-content { padding: 24px 28px 48px; }
}
@media (max-width: 639px) { .adm .adm-content { padding: 16px 16px 40px; } }

/* ---------- flashes (layout + every page family) ---------- */
.adm .adm-flash, .adm .alert.ok, .adm .alert.error, .adm .cm-flash, .adm .bl-flash, .adm .au-flash, .adm .uf-flash {
  margin-bottom: 18px; padding: 12px 14px 12px 16px; border-radius: 12px; border: 1px solid;
  border-left-width: 4px; font-size: 0.86rem; line-height: 1.45;
}
.adm .adm-flash, .adm .alert.ok, .adm .cm-flash.ok, .adm .bl-flash.ok, .adm .au-flash.ok, .adm .uf-flash.ok {
  background: #f0fdf4; border-color: #bbf7d0; border-left-color: #22c55e; color: #14532d;
}
.adm .alert.error, .adm .cm-flash.err, .adm .bl-flash.bad, .adm .au-flash.err, .adm .uf-flash.err {
  background: #fef2f2; border-color: #fecaca; border-left-color: #ef4444; color: #7f1d1d;
}
.adm .cm-flash.info { background: #eff6ff; border-color: #bfdbfe; border-left-color: #3b82f6; color: #1e3a8a; }

/* ---------- cards ---------- */
.adm .card, .adm .a-card, .adm .cm-card, .adm .bl-card, .adm .stat-card {
  background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-r); box-shadow: var(--ap-shadow);
}
.adm .stat-card { padding: 18px 20px; }
.adm .stat-card:hover { border-color: #f3c4db; }
.adm .stat-card .k, .adm .a-kicker, .adm .cm-k, .adm .bl-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-mut);
}
.adm .a-h2, .adm .cm-h2, .adm .bl-h2, .adm .card-h h2 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; color: var(--ap-ink); }
.adm .a-big { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ap-ink); }
.adm .a-mid { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.adm .a-head-b, .adm .card-h { border-bottom-color: var(--ap-line-2); }
.adm .a-p6 { padding: 20px 22px; }
.adm .a-p5 { padding: 18px 20px; }
.adm .a-tile { border-radius: 12px; border-color: var(--ap-line); background: var(--ap-row); }
.adm .a-tile-brand { border-color: #f9d0e3; background: var(--ap-tint); }
.adm .a-row { padding: 11px 22px; border-top-color: var(--ap-line-2); }
.adm .a-row.p5 { padding: 11px 20px; }
.adm a.a-row:hover { background: var(--ap-row); }
.adm .a-ava { background: var(--ap-tint-2); color: var(--ap-pink-d); font-weight: 700; }
.adm .a-link, .adm .a-link:hover { color: var(--ap-pink-d); font-weight: 600; }
.adm .a-track { background: var(--ap-line-2); }
.adm .a-legend { border-top-color: var(--ap-line-2); font-size: 0.8rem; gap: 18px; }
.adm .a-bar .tip { border-radius: 8px; }
.adm .a-blk { border-color: var(--ap-line); border-radius: 12px; }
.adm .a-blk summary:hover { background: var(--ap-row); border-radius: 12px; }
.adm .a-blk[open] { box-shadow: var(--ap-shadow); }

/* ---------- tables (all admin table families) ---------- */
.adm .cm-table th, .adm .bl th, .adm .a-rev-table th {
  background: var(--ap-row); color: var(--ap-mut); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; border-bottom: 1px solid var(--ap-line); padding-top: 10px; padding-bottom: 10px;
}
.adm .a-rev-table th { background: transparent; }
.adm .cm-table thead tr, .adm .bl thead tr { background: var(--ap-row); border-bottom-color: var(--ap-line); }
.adm .cm-table td, .adm .bl td { border-bottom-color: var(--ap-line-2); padding-top: 13px; padding-bottom: 13px; }
.adm .cm-table tbody tr:hover td, .adm .bl tr:hover td { background: var(--ap-row); }
.adm .cm-table th, .adm .cm-table td, .adm .bl th, .adm .bl td { padding-left: 20px; padding-right: 20px; }
.adm .cm-empty, .adm .bl-empty { color: var(--ap-faint); }
.adm .bl-scroll, .adm .ap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- buttons ---------- */
.adm .btn-primary, .adm .cm-btn {
  background: var(--ap-pink); color: #fff; border: 0; border-radius: 10px; font-weight: 700;
  box-shadow: 0 3px 0 var(--ap-pink-dd); transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.adm .btn-primary:hover, .adm .cm-btn:hover { background: #d0156a; color: #fff; }
.adm .btn-primary:active, .adm .cm-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ap-pink-dd); }
.adm .cm-btn-ghost, .adm .btn.quiet, .adm .ap-btn-ghost {
  border: 1px solid var(--ap-line); border-radius: 10px; background: #fff; color: var(--ap-ink-2); font-weight: 600;
  box-shadow: 0 1px 0 rgba(23, 18, 28, 0.04);
}
.adm .cm-btn-ghost:hover, .adm .btn.quiet:hover, .adm .ap-btn-ghost:hover { background: var(--ap-row); border-color: #e0d6e5; color: var(--ap-ink); }
.adm .cm-btn-danger, .adm .ap-btn-danger {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: #dc2626; color: #fff;
  font: inherit; font-size: 0.86rem; font-weight: 700; padding: 9px 16px; cursor: pointer; box-shadow: 0 3px 0 #991b1b;
}
.adm .cm-btn-danger:hover, .adm .ap-btn-danger:hover { background: #c81e1e; color: #fff; }
.adm .cm-btn-danger:active, .adm .ap-btn-danger:active { transform: translateY(2px); box-shadow: 0 1px 0 #991b1b; }
.adm .ap-btn-danger svg { width: 16px; height: 16px; }
.adm .ap-btn-outline-danger {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid #fca5a5; border-radius: 10px; background: #fff;
  color: #b91c1c; font: inherit; font-size: 0.86rem; font-weight: 700; padding: 8px 14px; cursor: pointer;
}
.adm .ap-btn-outline-danger:hover { background: #fef2f2; border-color: #f87171; }
.adm .ap-btn-outline-danger svg { width: 16px; height: 16px; }
.adm .ap-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.adm .ap-btn-ghost svg { width: 15px; height: 15px; }

/* ---------- form fields ---------- */
.adm .input-field, .adm .cm-input, .adm .bl-input, .adm .uf-input {
  border: 1px solid #e0d9e5; border-radius: 10px; background: #fff; color: var(--ap-ink);
  box-shadow: 0 1px 1px rgba(23, 18, 28, 0.03); transition: border-color 0.15s, box-shadow 0.15s;
}
.adm .input-field:focus, .adm .cm-input:focus, .adm .bl-input:focus, .adm .uf-input:focus,
.adm .a-sel:focus, .adm .au-sel:focus, .adm .au-search input:focus {
  outline: none; border-color: var(--ap-pink); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.14);
}
.adm .a-sel, .adm .au-sel { border-color: #e0d9e5; border-radius: 9px; }
.adm .cm-label, .adm .bl-label, .adm .uf-label, .adm .a-label { color: var(--ap-ink-2); font-weight: 600; font-size: 0.84rem; }
.adm .cm-help, .adm .bl-hint { color: var(--ap-faint); }
.adm input[type="checkbox"], .adm input[type="radio"] { accent-color: var(--ap-pink); }

/* ---------- pills ---------- */
.adm .cm-pill, .adm .bl-pill { font-weight: 600; font-size: 11.5px; padding: 2px 9px; }
.adm .ap-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--ap-gray-bg); color: var(--ap-ink-2);
}
.adm .ap-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.adm .ap-pill.nodot::before { display: none; }
.adm .ap-pill.green { background: var(--ap-green-bg); color: var(--ap-green); }
.adm .ap-pill.amber { background: var(--ap-amber-bg); color: var(--ap-amber); }
.adm .ap-pill.red { background: var(--ap-red-bg); color: var(--ap-red); }
.adm .ap-pill.pink { background: var(--ap-tint-2); color: var(--ap-pink-d); }
.adm .ap-pill.blue { background: #dbeafe; color: #1d4ed8; }

/* ---------- pagination (all three paginator families) ---------- */
.adm .pg-group, .adm .cm-pages, .adm .bl-pages { gap: 4px; box-shadow: none; border-radius: 0; }
.adm .pg-group > *, .adm .cm-pages a, .adm .cm-pages span, .adm .bl-pages > * {
  margin-left: 0; min-width: 34px; height: 34px; padding: 0 10px; justify-content: center;
  border: 1px solid var(--ap-line); border-radius: 9px !important; background: #fff; color: var(--ap-ink-2);
  font-size: 0.82rem; font-weight: 600;
}
.adm .pg-group > a:hover, .adm .cm-pages a:hover, .adm .bl-pages a:hover { border-color: #f3c4db; color: var(--ap-pink-d); background: var(--ap-tint); }
.adm .pg-group > .cur, .adm .cm-pages .cur, .adm .bl-pages .cur { background: var(--ap-pink); border-color: var(--ap-pink); color: #fff; }
.adm .pg-group > .off, .adm .pg-group > .gap, .adm .cm-pages .off, .adm .bl-pages .off { color: #cfc8d4; background: #fff; }
.adm .pg-group svg, .adm .cm-pages svg { width: 16px; height: 16px; }
.adm .pg-btn { border-color: var(--ap-line); border-radius: 9px; font-weight: 600; }
.adm .pg-info, .adm .cm-pager p, .adm .bl-pager p { color: var(--ap-mut); font-size: 0.82rem; }
.adm .pg-info b, .adm .cm-pager p b, .adm .bl-pager p b { color: var(--ap-ink); font-weight: 700; }
.adm .bl-pager { border-top-color: var(--ap-line-2); padding: 12px 20px; }

/* ---------- new ap-* building blocks ---------- */
.adm .ap-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.adm .ap-page-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.adm .ap-page-head p { margin: 3px 0 0; font-size: 0.84rem; color: var(--ap-mut); }
.adm .ap-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (min-width: 1024px) { .adm .ap-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .adm .ap-kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .adm .ap-kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adm .ap-kpi {
  position: relative; background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-r);
  padding: 16px 18px; box-shadow: var(--ap-shadow); min-width: 0;
}
.adm .ap-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm .ap-kpi-k { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-mut); }
.adm .ap-kpi-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--ap-tint-2); color: var(--ap-pink-d); }
.adm .ap-kpi-ico svg { width: 16px; height: 16px; }
.adm .ap-kpi-ico.green { background: #dcfce7; color: #15803d; }
.adm .ap-kpi-ico.blue { background: #dbeafe; color: #1d4ed8; }
.adm .ap-kpi-ico.violet { background: #ede9fe; color: #6d28d9; }
.adm .ap-kpi-ico.amber { background: #fef3c7; color: #b45309; }
.adm .ap-kpi-n { margin: 8px 0 0; font-size: 1.65rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--ap-ink); overflow-wrap: anywhere; }
.adm .ap-kpi-n.sm { font-size: 1.2rem; }
.adm .ap-kpi-s { margin: 4px 0 0; font-size: 0.76rem; color: var(--ap-faint); line-height: 1.4; }
.adm .ap-kpi-s.up { color: #15803d; font-weight: 600; }
.adm .ap-kpi-hero { background: linear-gradient(135deg, #fff 0%, #fff 55%, #fdf2f8 100%); border-color: #f6d3e4; }
.adm .ap-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--ap-line-2); }
.adm .ap-sec-h h2, .adm .ap-sec-h h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ap-ink); }
.adm .ap-sec-h p { margin: 2px 0 0; font-size: 0.76rem; color: var(--ap-mut); }
.adm .ap-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.adm .ap-strip div { min-width: 0; }
.adm .ap-strip .k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-faint); }
.adm .ap-strip .v { display: block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ap-ink); }
.adm .ap-strip .v.pink { color: var(--ap-pink-d); }
.adm .ap-strip .v small { font-size: 0.72rem; font-weight: 500; color: var(--ap-faint); }

/* toolbar card (search + filters) */
.adm .ap-toolbar { background: #fff; border: 1px solid var(--ap-line); border-radius: var(--ap-r); box-shadow: var(--ap-shadow); padding: 14px; margin-bottom: 14px; }

/* danger zone */
.adm .ap-danger { margin-top: 28px; border: 1px solid #f5c2c2; border-radius: 16px; background: #fff; overflow: hidden; }
.adm .ap-danger-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #fef2f2; border-bottom: 1px solid #f5c2c2; }
.adm .ap-danger-h svg { width: 20px; height: 20px; color: #dc2626; flex-shrink: 0; }
.adm .ap-danger-h h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: #7f1d1d; }
.adm .ap-danger-h p { margin: 1px 0 0; font-size: 0.76rem; color: #991b1b; opacity: 0.85; }
.adm .ap-danger-row { display: grid; gap: 16px; padding: 18px 20px; border-top: 1px solid #fbe3e3; }
.adm .ap-danger-row:first-of-type { border-top: 0; }
@media (min-width: 900px) { .adm .ap-danger-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; } }
.adm .ap-danger-row h4 { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--ap-ink); }
.adm .ap-danger-row .d { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--ap-mut); }
.adm .ap-danger-row .d strong { color: #7f1d1d; font-weight: 700; }

/* sub-nav tabs (collab status tabs etc.) */
.adm .ap-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: #efebf2; border-radius: 12px; width: fit-content; max-width: 100%; }

/* dashboard bits */
.adm .ap-chart-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.adm .ap-num { font-size: 0.86rem; font-weight: 700; color: var(--ap-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm .ap-rank {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--ap-line-2); color: var(--ap-mut); font-size: 11px; font-weight: 700;
}
.adm .a-row:nth-child(-n+3) > .ap-rank { background: var(--ap-tint-2); color: var(--ap-pink-d); }
.adm .a-cols-2 > .a-card, .adm .a-cols-3 > .a-card { align-self: start; }
.adm .ap-cur { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: #fff; border: 1px solid var(--ap-line); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--ap-ink-2); }
.adm .ap-cur.pink { background: var(--ap-pink); border-color: var(--ap-pink); color: #fff; }
.adm .a-blk summary { padding: 10px 12px; }
.adm .a-blk { margin-bottom: 6px; }

/* user detail (admin/user_form.html) */
.adm .ap-uhero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center;
  padding: 18px 20px; margin-bottom: 20px; background: linear-gradient(135deg, #fff 0%, #fff 60%, #fdf2f8 100%);
  border: 1px solid var(--ap-line); border-radius: 16px; box-shadow: var(--ap-shadow);
}
.adm .ap-uhero-av {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, #f472b6, #e11d74); color: #fff; font-size: 1.3rem; font-weight: 800;
  box-shadow: 0 3px 0 var(--ap-pink-dd);
}
.adm .ap-uhero-n { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.adm .ap-uhero-n h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.adm .ap-uhero-e { margin: 4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 0.86rem; color: var(--ap-mut); overflow-wrap: anywhere; }
.adm .ap-uhero-stats { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.adm .ap-uhero-stats > div { background: #fff; border: 1px solid var(--ap-line); border-radius: 12px; padding: 8px 12px; }
.adm .ap-uhero-stats dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ap-faint); }
.adm .ap-uhero-stats dd { margin: 2px 0 0; font-size: 0.95rem; font-weight: 800; color: var(--ap-ink); font-variant-numeric: tabular-nums; }
.adm .ap-uhero-stats dd a { color: var(--ap-pink-d); }
@media (min-width: 1100px) {
  .adm .ap-uhero { grid-template-columns: auto minmax(0, 1fr) auto; }
  .adm .ap-uhero-stats { grid-column: auto; grid-template-columns: repeat(4, minmax(96px, auto)); }
}
.adm .ap-deliv { margin-top: 24px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.adm .ap-deliv strong { font-size: 0.95rem; font-weight: 700; }
.adm .ap-deliv p { margin: 3px 0 0; font-size: 0.84rem; color: var(--ap-mut); }
.adm .ap-danger-act { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.adm .ap-danger-act form { width: 100%; }
@media (min-width: 900px) { .adm .ap-danger-act { align-items: flex-end; } .adm .ap-danger-act form:has(> .ap-btn-danger), .adm .ap-danger-act form:has(> .uf-lift) { width: auto; } }

/* app.css has a global .main (app shell column); billing forms reuse the word. */
.adm .bl-col.main { flex: none; padding: 0; max-width: none; }

/* ---- adminB ---- */
/* ==========================================================================
   ADMIN B - plans, coupons, broadcasts, blog, categories, site settings
   (prefix aq-). Scoped under .adm (admin shell). Dense Stripe/Linear-style
   lists and forms in the IGMsg pink language.
   ========================================================================== */
.adm { --aq-line: #ece8f0; --aq-line-soft: #f4f1f6; --aq-bg-soft: #fbfafc; --aq-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px -18px rgba(17, 24, 39, 0.18); }

/* ---- page frame ---------------------------------------------------------- */
.adm .aq-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; font-size: 0.875rem; }
.adm .aq-page p { margin: 0; }
.adm .aq-page.narrow { max-width: 880px; }
.adm .aq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.adm .aq-head-t { min-width: 0; flex: 1 1 320px; }
.adm .aq-head-t p { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5; }
.adm .aq-head-t a { color: var(--brand-deep); font-weight: 600; }
.adm .aq-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm .aq-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 500; font-size: 0.85rem; }
.adm .aq-back:hover { color: var(--ink); text-decoration: none; }
.adm .aq-back svg { width: 16px; height: 16px; }

/* ---- buttons ------------------------------------------------------------- */
.adm .aq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid var(--brand); border-radius: 10px; background: var(--brand); color: #fff; font: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 0 #9d174d; transition: transform .08s, box-shadow .08s, background .15s; text-decoration: none; }
.adm .aq-btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; text-decoration: none; }
.adm .aq-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9d174d; }
.adm .aq-btn:disabled { opacity: .6; cursor: default; }
.adm .aq-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.adm .aq-btn.lg { height: 44px; padding: 0 22px; font-size: 0.9rem; }
.adm .aq-btn.block { width: 100%; }
.adm .aq-btn.ghost { background: #fff; color: var(--ink); border-color: var(--aq-line); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05); font-weight: 600; }
.adm .aq-btn.ghost:hover { background: var(--aq-bg-soft); border-color: #dcd6e2; color: var(--ink); }
.adm .aq-btn.ghost:active { transform: none; }
.adm .aq-btn.danger { background: #fff; color: #b91c1c; border-color: #fecaca; box-shadow: none; font-weight: 600; }
.adm .aq-btn.danger:hover { background: #fef2f2; color: #991b1b; }
.adm .aq-btn.danger.solid { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 3px 0 #991b1b; }
.adm .aq-btn.danger.solid:hover { background: #b91c1c; }
.adm .aq-btn.sm { height: 32px; padding: 0 12px; font-size: 0.8rem; border-radius: 9px; }
.adm .aq-link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--brand-deep); cursor: pointer; text-decoration: none; }
.adm .aq-link:hover { color: #9d174d; text-decoration: none; }
.adm .aq-link.grey { color: var(--ink-soft); }
.adm .aq-link.grey:hover { color: var(--ink); }
.adm .aq-link.red { color: #dc2626; }
.adm .aq-link.red:hover { color: #991b1b; }
.adm .aq-ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; color: #9ca3af; cursor: pointer; padding: 0; }
.adm .aq-ibtn:hover { background: var(--aq-bg-soft); border-color: var(--aq-line); color: var(--ink); text-decoration: none; }
.adm .aq-ibtn.del:hover { background: #fef2f2; border-color: #fee2e2; color: #dc2626; }
.adm .aq-ibtn svg { width: 16px; height: 16px; }
.adm .aq-inline { display: inline-flex; margin: 0; }

/* ---- flash --------------------------------------------------------------- */
.adm .aq-flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid; font-size: 0.85rem; line-height: 1.5; }
.adm .aq-flash svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.adm .aq-flash.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.adm .aq-flash.err { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.adm .aq-flash.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.adm .aq-flash.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.adm .aq-flash[hidden] { display: none; }

/* ---- cards --------------------------------------------------------------- */
.adm .aq-card { background: #fff; border: 1px solid var(--aq-line); border-radius: 16px; box-shadow: var(--aq-shadow); min-width: 0; }
.adm .aq-card.clip { overflow: hidden; }
.adm .aq-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 0; flex-wrap: wrap; }
.adm .aq-card-h.line { padding-bottom: 14px; border-bottom: 1px solid var(--aq-line-soft); }
.adm .aq-card-h .t { min-width: 0; flex: 1 1 220px; }
.adm .aq-card-h h2, .adm .aq-card-h h3 { margin: 0; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm .aq-card-h h2 small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: #9ca3af; }
.adm .aq-card-h h2 small.warn { color: #b45309; }
.adm .aq-card-h p { margin-top: 3px; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; }
.adm .aq-card-b { padding: 16px 20px 20px; }
.adm .aq-card-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 20px; background: var(--aq-bg-soft); border-top: 1px solid var(--aq-line-soft); border-radius: 0 0 16px 16px; }
.adm .aq-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-tint); color: var(--brand-deep); font-size: 0.72rem; font-weight: 800; border: 1px solid #fce7f3; }
.adm .aq-sec { padding-top: 16px; margin-top: 16px; border-top: 1px dashed var(--aq-line); }
.adm .aq-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px !important; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; }
.adm .aq-eyebrow .aq-gw { letter-spacing: 0; text-transform: none; }

/* ---- layout -------------------------------------------------------------- */
.adm .aq-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.adm .aq-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1100px) {
  .adm .aq-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .adm .aq-layout.wide-side { grid-template-columns: minmax(0, 1fr) 340px; }
  .adm .aq-side.sticky { position: sticky; top: 84px; }
}
.adm .aq-g2, .adm .aq-g3, .adm .aq-g4 { display: grid; gap: 14px 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .adm .aq-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm .aq-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm .aq-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .adm .aq-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm .aq-stack { display: flex; flex-direction: column; gap: 14px; }
.adm .aq-stack.tight { gap: 10px; }

/* ---- form fields --------------------------------------------------------- */
.adm .aq-field { min-width: 0; }
.adm .aq-label { display: block; margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; color: #374151; }
.adm .aq-label span { color: #9ca3af; font-weight: 500; }
.adm .aq-input { display: block; width: 100%; height: 38px; padding: 0 12px; border: 1px solid #e2dde7; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 0.875rem; box-shadow: 0 1px 1px rgba(17, 24, 39, 0.03); transition: border-color .15s, box-shadow .15s; }
.adm textarea.aq-input { height: auto; padding: 9px 12px; line-height: 1.55; resize: vertical; }
.adm .aq-input::placeholder { color: #b3adb9; }
.adm .aq-input:hover { border-color: #d3ccda; }
.adm .aq-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.14); }
.adm .aq-input.bad { border-color: #fca5a5; background: #fffafa; }
.adm .aq-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.adm .aq-input.upper { text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; font-weight: 600; }
.adm .aq-input.lg { height: 46px; font-size: 1.05rem; font-weight: 600; }
.adm .aq-input.auto { width: auto; max-width: 100%; }
.adm select.aq-input { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px 16px; }
.adm .aq-affix { display: flex; align-items: stretch; border: 1px solid #e2dde7; border-radius: 10px; background: #fff; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.adm .aq-affix:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.14); }
.adm .aq-affix.bad { border-color: #fca5a5; }
.adm .aq-affix > span { display: flex; align-items: center; padding: 0 10px; background: var(--aq-bg-soft); color: #9ca3af; font-size: 0.8rem; font-weight: 600; border-right: 1px solid var(--aq-line); white-space: nowrap; }
.adm .aq-affix > span.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
.adm .aq-affix > input { flex: 1; min-width: 0; height: 36px; border: 0; padding: 0 10px; font: inherit; font-size: 0.875rem; color: var(--ink); background: transparent; }
.adm .aq-affix > input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.adm .aq-affix > input, .adm .aq-affix > input:hover, .adm .aq-affix > input:focus { outline: none; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.adm .aq-affix > button { display: none; border: 0; border-left: 1px solid var(--aq-line); background: #fff; color: var(--ink-soft); padding: 0 12px; font-size: 0.8rem; cursor: pointer; }
.adm .aq-affix > button.show { display: block; }
.adm .aq-affix > button:hover { color: var(--brand-deep); }
.adm .aq-hint { margin-top: 5px !important; font-size: 0.74rem; color: #9ca3af; line-height: 1.5; }
.adm .aq-hint a { color: var(--brand-deep); font-weight: 600; }
.adm .aq-hint code, .adm .aq-code { font-size: 0.72rem; background: var(--aq-bg-soft); border: 1px solid var(--aq-line); border-radius: 5px; padding: 0 4px; color: #4b5563; }
.adm .aq-err { margin-top: 5px !important; font-size: 0.74rem; font-weight: 500; color: #dc2626; }
.adm .aq-err[hidden] { display: none; }

/* toggle rows (a real checkbox styled as a switch) */
.adm .aq-toggles { display: flex; flex-direction: column; border: 1px solid var(--aq-line); border-radius: 12px; overflow: hidden; }
.adm .aq-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 14px; cursor: pointer; background: #fff; }
.adm .aq-toggle + .aq-toggle { border-top: 1px solid var(--aq-line-soft); }
.adm .aq-toggle:hover { background: var(--aq-bg-soft); }
.adm .aq-toggle .tx { min-width: 0; font-size: 0.84rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.adm .aq-toggle .tx small { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.adm .aq-toggle input[type=checkbox] { appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; width: 34px; height: 20px; margin: 1px 0 0; border-radius: 999px; background: #e5e1ea; cursor: pointer; transition: background .15s; }
.adm .aq-toggle input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.25); transition: transform .15s; }
.adm .aq-toggle input[type=checkbox]:checked { background: var(--brand); }
.adm .aq-toggle input[type=checkbox]:checked::after { transform: translateX(14px); }
.adm .aq-toggle input[type=checkbox]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- tables -------------------------------------------------------------- */
.adm .aq-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.adm table.aq-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.adm .aq-table th { padding: 10px 16px; text-align: left; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; background: var(--aq-bg-soft); border-bottom: 1px solid var(--aq-line); white-space: nowrap; }
.adm .aq-table td { padding: 12px 16px; border-bottom: 1px solid var(--aq-line-soft); vertical-align: middle; color: #374151; }
.adm .aq-table tbody tr:last-child td { border-bottom: 0; }
.adm .aq-table tbody tr:hover td { background: #fdfbfd; }
.adm .aq-table tbody tr.sel td { background: #fff5f9; }
.adm .aq-table .c { text-align: center; }
.adm .aq-table .r { text-align: right; }
.adm .aq-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm .aq-table .nw { white-space: nowrap; }
.adm .aq-table .w1 { width: 1%; }
.adm .aq-table th:first-child, .adm .aq-table td:first-child { padding-left: 20px; }
.adm .aq-table th:last-child, .adm .aq-table td:last-child { padding-right: 20px; }
.adm .aq-t { font-weight: 600; color: var(--ink); }
.adm a.aq-t:hover { color: var(--brand-deep); text-decoration: none; }
.adm .aq-sub { margin-top: 2px !important; font-size: 0.74rem; color: #9ca3af; }
.adm .aq-mut { color: #9ca3af; }
.adm .aq-soft { color: var(--ink-soft); }
.adm .aq-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.adm .aq-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm .aq-row.end { justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
.adm .aq-empty { padding: 48px 20px !important; text-align: center; color: var(--ink-soft); }
.adm .aq-empty svg { display: block; width: 36px; height: 36px; margin: 0 auto 10px; padding: 8px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); }
.adm .aq-empty b { display: block; color: var(--ink); font-size: 0.9rem; margin-bottom: 2px; }
.adm .aq-empty a { color: var(--brand-deep); font-weight: 600; }
.adm .aq-check { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; margin: 0; vertical-align: middle; }
.adm .aq-kv { display: flex; flex-direction: column; gap: 1px; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.5; }
.adm .aq-kv b { color: #374151; font-weight: 600; }
.adm .aq-price { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm .aq-price s { color: #9ca3af; font-weight: 500; margin-right: 4px; }

/* ---- pills / tags -------------------------------------------------------- */
.adm .aq-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.adm .aq-pill i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.adm .aq-pill.green { background: #ecfdf3; color: #067647; border-color: #d1fadf; }
.adm .aq-pill.amber { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.adm .aq-pill.red { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.adm .aq-pill.grey { background: #f4f3f6; color: #52525b; border-color: #e7e5ea; }
.adm .aq-pill.blue { background: #eff8ff; color: #175cd3; border-color: #d1e9ff; }
.adm .aq-pill.pink { background: var(--brand-tint); color: var(--brand-deep); border-color: #fce7f3; }
.adm .aq-pill.purple { background: #f4f3ff; color: #5925dc; border-color: #e4e0ff; }
.adm .aq-pill.cap { text-transform: capitalize; }
.adm .aq-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 5px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #fce7f3; }
.adm .aq-tag.purple { background: #f4f3ff; color: #5925dc; border-color: #e4e0ff; }
.adm .aq-tag.blue { background: #eff8ff; color: #175cd3; border-color: #d1e9ff; }
.adm .aq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.adm .aq-code-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 7px; background: #fff; border: 1px dashed #f9a8d4; color: var(--brand-deep); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em; }

/* ---- stat strip ---------------------------------------------------------- */
.adm .aq-stats { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--aq-line-soft); border-radius: 16px; overflow: hidden; border: 1px solid var(--aq-line); box-shadow: var(--aq-shadow); }
@media (min-width: 720px) { .adm .aq-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.adm .aq-stat { background: #fff; padding: 14px 18px; min-width: 0; }
.adm .aq-stat .k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; }
.adm .aq-stat .v { margin-top: 4px !important; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.2; }
.adm .aq-stat .v small { font-size: 0.78rem; font-weight: 600; color: #9ca3af; margin-left: 4px; letter-spacing: 0; }
.adm .aq-stat .v.green { color: #067647; }
.adm .aq-stat .v.blue { color: #175cd3; }
.adm .aq-stat .v.red { color: #b42318; }
.adm .aq-stat .v.mut { color: #9ca3af; }
.adm .aq-bar { height: 6px; margin-top: 8px; border-radius: 999px; background: #f1eef4; overflow: hidden; }
.adm .aq-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); }
.adm .aq-bar > i.green { background: #12b76a; }
.adm .aq-bar > i.blue { background: #2e90fa; }

/* ---- summary list (definition rows) -------------------------------------- */
.adm .aq-dl { display: flex; flex-direction: column; margin: 0; font-size: 0.82rem; }
.adm .aq-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--aq-line-soft); }
.adm .aq-dl > div:last-child { border-bottom: 0; }
.adm .aq-dl dt { color: var(--ink-soft); }
.adm .aq-dl dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }

/* ---- sticky save bar ----------------------------------------------------- */
.adm .aq-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 10px 12px 10px 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--aq-line); border-radius: 14px; box-shadow: 0 12px 30px -16px rgba(17, 24, 39, 0.3); }
.adm .aq-savebar p { font-size: 0.8rem; color: var(--ink-soft); min-width: 0; }
.adm .aq-savebar .aq-actions { margin-left: auto; }

/* ---- pager --------------------------------------------------------------- */
.adm .aq-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--aq-line-soft); }
.adm .aq-pager.bare { padding: 0; border-top: 0; }
.adm .aq-pager p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
.adm .aq-pager p b { color: var(--ink); font-weight: 600; }
.adm .aq-pages { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.adm .aq-pages > a, .adm .aq-pages > span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; margin: 0; border: 1px solid var(--aq-line); border-radius: 8px; background: #fff; color: #374151; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.adm .aq-pages > a:hover { border-color: #f9a8d4; color: var(--brand-deep); text-decoration: none; }
.adm .aq-pages > .cur { background: var(--brand); border-color: var(--brand); color: #fff; }
.adm .aq-pages > .off { color: #c9c4ce; background: var(--aq-bg-soft); cursor: default; }
.adm .aq-pages svg { width: 16px; height: 16px; }

/* ---- toolbar (filters) --------------------------------------------------- */
.adm .aq-filters { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); padding: 12px; border-bottom: 1px solid var(--aq-line-soft); }
@media (min-width: 720px) { .adm .aq-filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; } }
.adm .aq-search { position: relative; }
.adm .aq-search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.adm .aq-search .aq-input { padding-left: 34px; }

/* ---- plans page ---------------------------------------------------------- */
.adm .aq-gws { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .adm .aq-gws { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm .aq-gwc { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.adm .aq-gwc h3 { margin: 0; font-size: 0.875rem; font-weight: 700; font-family: var(--font-body); color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm .aq-gwc p { margin-top: 3px !important; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.5; }
.adm .aq-gwc code { font-size: 0.72rem; }
.adm .aq-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid #fce7f3; }
.adm .aq-ico svg { width: 18px; height: 18px; }
.adm .aq-ico.blue { background: #eff8ff; color: #175cd3; border-color: #d1e9ff; }
.adm .aq-ico.amber { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.adm .aq-ico.grey { background: var(--aq-bg-soft); color: #4b5563; border-color: var(--aq-line); }
.adm .aq-limits { display: flex; flex-wrap: wrap; gap: 4px; }
.adm .aq-limits span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: var(--aq-bg-soft); border: 1px solid var(--aq-line-soft); font-size: 0.72rem; color: #4b5563; white-space: nowrap; }
.adm .aq-limits span b { color: var(--ink); font-weight: 700; }

/* plan editor live summary */
.adm .aq-sum-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.adm .aq-sum-slug { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: #9ca3af; overflow-wrap: anywhere; }
.adm .aq-sum-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.adm .aq-sum-prices > div { padding: 10px 12px; border-radius: 12px; background: var(--aq-bg-soft); border: 1px solid var(--aq-line-soft); min-width: 0; }
.adm .aq-sum-prices .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #9ca3af; }
.adm .aq-sum-prices .v { margin-top: 2px !important; font-weight: 800; color: var(--ink); font-size: 0.95rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.adm .aq-sum-prices .v s { color: #9ca3af; font-weight: 500; font-size: 0.8rem; margin-right: 3px; }
.adm .aq-sum-prices .y { font-size: 0.72rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.adm .aq-caps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.adm .aq-caps span { padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: #f4f3f6; color: #a1a1aa; text-decoration: line-through; }
.adm .aq-caps span.on { background: var(--brand-tint); color: var(--brand-deep); text-decoration: none; }

/* ---- coupons ------------------------------------------------------------- */
.adm .aq-disc { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 0.95rem; white-space: nowrap; }
.adm .aq-use { min-width: 90px; }
.adm .aq-use .n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.adm .aq-use .n small { color: #9ca3af; font-weight: 500; }
.adm .aq-use .aq-bar { margin-top: 5px; height: 4px; }
.adm .aq-preview-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; font-weight: 800; letter-spacing: 0.06em; color: var(--brand-deep); padding: 12px; border: 1.5px dashed #f9a8d4; border-radius: 12px; background: var(--brand-tint); text-align: center; overflow-wrap: anywhere; }

/* ---- broadcasts ---------------------------------------------------------- */
.adm .aq-health { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; }
.adm .aq-health.ok { border-color: #bbf7d0; }
.adm .aq-health.idle { border-color: #fde68a; }
.adm .aq-health.stuck { border-color: #fecaca; background: #fffafa; }
.adm .aq-health-facts { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-soft); }
.adm .aq-health-facts strong { color: var(--ink); }
.adm .aq-health-state { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.adm .aq-ping { position: relative; display: inline-flex; width: 8px; height: 8px; }
.adm .aq-ping i { position: absolute; inset: 0; border-radius: 999px; opacity: 0.75; animation: aq-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.adm .aq-ping b { position: relative; width: 8px; height: 8px; border-radius: 999px; }
@keyframes aq-ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }
.adm .aq-help { padding: 0 16px 14px; }
.adm .aq-help[hidden] { display: none; }
.adm .aq-help pre { margin: 8px 0; font-size: 0.72rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #111827; color: #f3f4f6; padding: 12px; border-radius: 10px; overflow-x: auto; line-height: 1.6; }
.adm .aq-help p { font-size: 0.76rem; color: var(--ink-soft); line-height: 1.5; }
.adm .aq-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 16px; border-radius: 12px; border: 1px solid #fecaca; background: #fef2f2; color: #7f1d1d; font-size: 0.84rem; }
.adm .aq-bulk[hidden] { display: none; }
.adm .aq-rate { font-size: 0.72rem; color: #9ca3af; margin-left: 3px; }
.adm .aq-segs { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .adm .aq-segs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm .aq-seg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--aq-line); border-radius: 12px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s; min-width: 0; }
.adm .aq-seg:hover { border-color: #dcd6e2; background: var(--aq-bg-soft); }
.adm .aq-seg.on { border-color: var(--brand); background: #fffafc; box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.12); }
.adm .aq-seg input[type=radio] { margin: 2px 0 0; accent-color: var(--brand); flex-shrink: 0; }
.adm .aq-seg .b { flex: 1; min-width: 0; }
.adm .aq-seg .t { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.adm .aq-seg .d { font-size: 0.76rem; color: var(--ink-soft); margin-top: 1px !important; }
.adm .aq-seg .opt { margin-top: 8px; display: none; }
.adm .aq-seg.on .opt { display: block; }
.adm .aq-seg .opt.flex { align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); }
.adm .aq-seg.on .opt.flex { display: flex; }
.adm .aq-seg .aq-input { height: 34px; font-size: 0.82rem; }
.adm .aq-seg .aq-input.days { width: 5.5rem; }
.adm .aq-audience { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--brand-tint); border: 1px solid #fbcfe8; }
.adm .aq-audience .n { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: #831843; }
.adm .aq-audience .l { font-size: 0.76rem; color: #9d174d; margin-top: 1px !important; }
.adm .aq-tabs { display: inline-flex; gap: 2px; padding: 3px; background: #f4f3f6; border-radius: 10px; }
.adm .aq-tabs button { padding: 5px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.adm .aq-tabs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); }
.adm .aq-mergetags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.adm .aq-mergetags span { font-size: 0.74rem; color: #9ca3af; font-weight: 600; margin-right: 2px; }
.adm .aq-mergetags button { padding: 3px 8px; border: 1px solid var(--aq-line); border-radius: 7px; background: var(--aq-bg-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #374151; cursor: pointer; }
.adm .aq-mergetags button:hover { border-color: #f9a8d4; color: var(--brand-deep); background: #fff; }
.adm .aq-pane[hidden] { display: none !important; }
.adm .aq-editor { border: 1px solid var(--aq-line); border-radius: 12px; overflow: hidden; background: #fff; }
.adm .aq-editor .tt-fallback { min-height: 260px; padding: 16px; }
.adm textarea.aq-input.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; line-height: 1.6; }
.adm .aq-test { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm .aq-test .aq-input { width: 15rem; max-width: 100%; height: 36px; }
.adm .aq-mailbody { border: 1px solid var(--aq-line); border-radius: 12px; background: #fff; padding: 20px; font-size: 0.875rem; line-height: 1.7; color: #374151; overflow-x: auto; }
.adm .aq-mailbody img { max-width: 100%; height: auto; }
.adm .aq-mailbody a { color: var(--brand-deep); }
.adm .aq-mailbody > :first-child { margin-top: 0; }
.adm .aq-mailframe { background: var(--aq-bg-soft); border-radius: 0 0 16px 16px; padding: 16px 20px 20px; }
.adm .aq-mailmeta { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; border-bottom: 1px solid var(--aq-line-soft); font-size: 0.8rem; color: var(--ink-soft); }
.adm .aq-mailmeta b { color: var(--ink); font-weight: 600; }
.adm .aq-err-cell { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: #dc2626; }

/* ---- blog ---------------------------------------------------------------- */
.adm .aq-cat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: #f4f3f6; color: #374151; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.adm .aq-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); flex-shrink: 0; }
.adm .aq-wc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--aq-line-soft); background: var(--aq-bg-soft); font-size: 0.74rem; color: #9ca3af; border-radius: 0 0 16px 16px; }
.adm .aq-faq { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--aq-line); border-radius: 12px; background: var(--aq-bg-soft); }
.adm .aq-faq > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.adm .aq-faq .rm { flex-shrink: 0; }
.adm .aq-drop { display: block; border: 1.5px dashed #e2dde7; border-radius: 12px; padding: 16px; text-align: center; cursor: pointer; background: var(--aq-bg-soft); transition: border-color .15s, background .15s; }
.adm .aq-drop:hover { border-color: #f9a8d4; background: #fffafc; }
.adm .aq-drop.busy { opacity: 0.6; pointer-events: none; }
.adm .aq-drop svg { display: block; width: 22px; height: 22px; margin: 0 auto 6px; color: var(--brand); }
.adm .aq-drop .l { font-size: 0.8rem; font-weight: 600; color: #374151; }
.adm .aq-drop .s { font-size: 0.7rem; color: #9ca3af; margin-top: 2px !important; }
.adm .aq-fi { position: relative; margin-bottom: 10px; border: 1px solid var(--aq-line); border-radius: 12px; overflow: hidden; }
.adm .aq-fi[hidden] { display: none; }
.adm .aq-fi img { display: block; width: 100%; height: auto; }
.adm .aq-fi button { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--aq-line); background: rgba(255, 255, 255, 0.95); color: #dc2626; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.adm .aq-details summary { font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.adm .aq-details summary:hover { color: var(--ink); }
.adm .aq-sched { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px !important; padding: 8px 10px; border-radius: 10px; background: #eff8ff; border: 1px solid #d1e9ff; color: #175cd3; font-size: 0.76rem; font-weight: 600; line-height: 1.45; }
.adm .aq-meter { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px !important; font-size: 0.72rem; color: #9ca3af; }
.adm .aq-meter b { font-weight: 700; font-variant-numeric: tabular-nums; }
.adm .aq-meter b.ok { color: #067647; }
.adm .aq-meter b.warn { color: #b54708; }

/* category modal */
.adm .aq-modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(17, 24, 39, 0.5); backdrop-filter: blur(2px); }
.adm .aq-modal.open { display: flex; }
.adm .aq-modal-box { width: 100%; max-width: 30rem; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 24px 48px -12px rgba(17, 24, 39, 0.35); }
.adm .aq-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--aq-line-soft); }
.adm .aq-modal-h h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.adm .aq-modal-b { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.adm .aq-modal-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--aq-line-soft); background: var(--aq-bg-soft); border-radius: 0 0 18px 18px; }

/* ---- site settings ------------------------------------------------------- */
.adm .aq-set { display: grid; gap: 6px 24px; grid-template-columns: minmax(0, 1fr); padding: 14px 20px; border-top: 1px solid var(--aq-line-soft); }
.adm .aq-set:first-child { border-top: 0; }
@media (min-width: 860px) { .adm .aq-set { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.adm .aq-set .aq-label { margin: 0; padding-top: 9px; }
.adm .aq-set .aq-hint { margin-top: 4px !important; }
.adm .aq-set .input-field { width: 100%; max-width: 560px; height: 38px; padding: 0 12px; border: 1px solid #e2dde7; border-radius: 10px; font: inherit; font-size: 0.875rem; background: #fff; }
.adm .aq-set textarea.input-field { height: auto; padding: 9px 12px; line-height: 1.55; }
.adm .aq-set select.input-field.w-40 { width: 11rem; appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px 16px; }
.adm .aq-set .input-field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 29, 116, 0.14); }
.adm .aq-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.adm .aq-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--aq-line); background: #fff; color: #374151; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.adm .aq-nav a:hover { border-color: #f9a8d4; color: var(--brand-deep); text-decoration: none; }
.adm .aq-nav a span { font-size: 0.7rem; color: #9ca3af; font-weight: 700; }

/* ---- responsive tweaks --------------------------------------------------- */
@media (max-width: 639px) {
  .adm .aq-card-h { padding: 16px 16px 0; }
  .adm .aq-card-h.line { padding-bottom: 12px; }
  .adm .aq-card-b { padding: 14px 16px 16px; }
  .adm .aq-card-f { padding: 12px 16px; }
  .adm .aq-pager { padding: 12px 16px; }
  .adm .aq-set { padding: 12px 16px; }
  .adm .aq-head .aq-actions { width: 100%; }
  .adm .aq-savebar { bottom: 8px; }
  .adm .aq-savebar .aq-actions { width: 100%; }
  .adm .aq-savebar .aq-actions .aq-btn:first-child { flex: 1; }
  .adm .aq-test .aq-input { width: 100%; }
}

.shell .as-coupon-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: .86rem; }
.shell .as-coupon-chip[hidden], .shell #coupon-row[hidden] { display: none; }
.shell .as-coupon-chip > span { display: inline-flex; align-items: center; gap: 8px; }
.shell .as-coupon-chip svg { width: 16px; height: 16px; color: #16a34a; flex-shrink: 0; }
.shell .as-coupon-chip button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #15803d; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ================= TEAMS (Business) ================= */
/* sidebar: team mode card + "your teams" list; mobile bar */
.shell .sb-team { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3); border: 1px solid #f5c6dc; }
.shell .sb-team-ico svg { width: 18px; height: 18px; color: var(--brand); display: block; }
.shell .sb-team-txt { flex: 1; min-width: 0; line-height: 1.2; }
.shell .sb-team-txt .k { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep); }
.shell .sb-team-txt .v { display: block; font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .sb-team form { margin: 0; }
.shell .sb-team-btn { border: 1px solid #f5c6dc; background: #fff; color: var(--brand-deep); font: inherit; font-size: .74rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.shell .sb-team-btn:hover { border-color: var(--brand); }
.shell .sb-teams { margin-top: 8px; }
.shell .sb-teams-k { display: block; padding: 4px 4px 4px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a39cae; }
.shell .sb-teams form { margin: 0; }
.shell .sb-teams-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 9px; font: inherit; font-size: .84rem; color: var(--ink); cursor: pointer; text-align: left; }
.shell .sb-teams-opt svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }
.shell .sb-teams-opt span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .sb-teams-opt em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--brand-deep); }
.shell .sb-teams-opt:hover { background: var(--brand-tint); }
.shell .nav-pill { margin-left: auto; font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #f3e8ff; color: #7c3aed; }
.menu .menu-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.m-team { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; font-weight: 700; color: var(--brand-deep); }
.m-team span { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-team svg { width: 15px; height: 15px; flex-shrink: 0; }
.m-team button { border: 1px solid #f5c6dc; background: #fff; color: var(--brand-deep); font: inherit; font-size: .74rem; padding: 4px 9px; border-radius: 8px; }

/* /team page */
.shell .tm-page { display: flex; flex-direction: column; gap: 18px; max-width: 920px; }
.shell .tm-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(17,24,39,.04); }
.shell .tm-pad { padding: 22px 24px; }
.shell .tm-h2 { font-size: 1.08rem; font-weight: 750; }
.shell .tm-sub { margin: 3px 0 0; font-size: .86rem; color: var(--ink-soft); }
.shell .tm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shell .tm-invite { display: flex; gap: 8px; flex: 1; max-width: 440px; min-width: 260px; margin: 0; }
.shell .tm-invite input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid #d9d3e0; border-radius: 12px; font: inherit; font-size: .9rem; }
.shell .tm-invite input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225,29,116,.15); }
.shell .tm-invite .btn { min-height: 44px; }
.shell .tm-meter { height: 7px; border-radius: 999px; background: #f3e8ef; overflow: hidden; margin-top: 16px; }
.shell .tm-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f472b6, var(--brand)); }
.shell .tm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line-soft); }
.shell .tm-card > .tm-row:last-child, .shell .tm-in > .tm-row:last-child { border-bottom: 0; }
.shell .tm-in .tm-row { padding-left: 0; padding-right: 0; grid-template-columns: 38px minmax(0, 1fr) auto; }
.shell .tm-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f472b6, var(--brand-deep)); }
.shell .tm-who { min-width: 0; line-height: 1.3; }
.shell .tm-who b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .tm-who small { color: var(--ink-soft); font-size: .78rem; }
.shell .tm-pill { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.shell .tm-pill.ok { background: #dcfce7; color: #15803d; }
.shell .tm-pill.warn { background: #fef3c7; color: #b45309; }
.shell .tm-pill.grey { background: #f3f4f6; color: #6b7280; }
.shell .tm-meta { font-size: .78rem; color: var(--ink-soft); white-space: nowrap; }
.shell .tm-acts { display: flex; align-items: center; gap: 12px; }
.shell .tm-acts form { margin: 0; }
.shell .tm-link { border: 0; background: none; padding: 0; font: inherit; font-size: .82rem; font-weight: 700; color: var(--brand-deep); cursor: pointer; }
.shell .tm-link.danger { color: #dc2626; }
.shell .tm-link:hover { text-decoration: underline; }
.shell .tm-empty { text-align: center; padding: 36px 20px; }
.shell .tm-empty-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.shell .tm-empty-ico svg { width: 24px; height: 24px; }
.shell .tm-empty p { margin: 4px auto 0; max-width: 40ch; font-size: .86rem; color: var(--ink-soft); }
.shell .tm-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.shell .tm-rights-k { margin: 0 0 10px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9a92a6; }
.shell .tm-rights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.shell .tm-rights li { display: flex; align-items: center; gap: 9px; font-size: .88rem; }
.shell .tm-rights li svg { width: 18px; height: 18px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.shell .tm-rights .own li svg { background: #f3f4f6; color: #6b7280; border-radius: 6px; }
.shell .tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* locked: blurred real layout + gate card */
.shell .tm-locked { position: relative; min-height: 560px; }
.shell .tm-blur { display: flex; flex-direction: column; gap: 18px; filter: blur(5px) saturate(.9); opacity: .75; pointer-events: none; user-select: none; }
.shell .tm-invite-fake { display: flex; gap: 8px; align-items: center; }
.shell .tm-invite-fake span { padding: 11px 14px; border: 1px solid #d9d3e0; border-radius: 12px; color: #9a92a6; font-size: .9rem; min-width: 220px; }
.shell .tm-invite-fake b { padding: 11px 18px; border-radius: 12px; background: var(--brand); color: #fff; }
.shell .tm-gate { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 24px)); text-align: center;
  padding: 30px 28px 26px; background: rgba(255,255,255,.97); border: 1.5px solid #f5c6dc; border-radius: 24px;
  box-shadow: 0 30px 70px -28px rgba(157,23,77,.45), 0 2px 6px rgba(17,24,39,.06); }
.shell .tm-gate-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #f472b6, var(--brand-deep)); color: #fff; box-shadow: 0 10px 22px -10px rgba(225,29,116,.8); }
.shell .tm-gate-ico svg { width: 24px; height: 24px; }
.shell .tm-eyebrow { margin: 0 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); }
.shell .tm-gate h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.shell .tm-gate-sub { margin: 8px 0 16px; font-size: .92rem; color: #5d566b; }
.shell .tm-gate-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.shell .tm-gate-list li { display: flex; gap: 10px; font-size: .88rem; }
.shell .tm-gate-list svg { width: 19px; height: 19px; flex-shrink: 0; padding: 3px; border-radius: 50%; background: var(--brand); color: #fff; }
.shell .tm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; font-size: .95rem; font-weight: 700; border-radius: 14px;
  box-shadow: 0 4px 0 #9d174d, 0 14px 28px -12px rgba(225,29,116,.75); }
.shell .tm-cta svg { width: 17px; height: 17px; }
.shell .tm-cta:hover { text-decoration: none; transform: translateY(-1px); }
.shell .tm-gate-price { margin: 12px 0 0; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 720px) {
  .shell .tm-row { grid-template-columns: 38px minmax(0, 1fr) auto; row-gap: 6px; padding: 14px 16px; }
  .shell .tm-row .tm-meta { grid-column: 2 / -1; }
  .shell .tm-row .tm-acts { grid-column: 2 / -1; }
  .shell .tm-rights { grid-template-columns: 1fr; }
  .shell .tm-invite { max-width: none; min-width: 0; width: 100%; }
  .shell .tm-invite-fake span { min-width: 0; }
  .shell .tm-gate { top: 20px; padding: 24px 20px; }
}
/* invite landing (auth layout) */
.au .au-invite-to { margin: 0 0 16px; padding: 12px 14px; border: 1px dashed #e2dce8; border-radius: 12px; background: #faf8fb; font-size: .9rem; text-align: center; }
@media (max-width: 900px) {
  /* the old mobile rule hid the title/subtitle - the static top bar shows them now */
  .shell .tb-title, .shell .tb-sub { display: block; }
  .shell .tb-title:empty, .shell .tb-sub:empty { display: none; }
}
/* the top bar shows the page title on phones now - drop the dashboard's stand-in */
@media (max-width: 900px) { .shell .ad-head-title { display: none; } }
/* team activity log */
.shell .tm-log-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; }
.shell .tm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shell .tm-chips a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 650; color: #5d566b; background: #fff; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell .tm-chips a:hover { text-decoration: none; border-color: var(--brand-line); }
.shell .tm-chips a.on { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-deep); }
.shell .tm-log { list-style: none; margin: 0; padding: 0 0 6px; }
.shell .tm-log li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 24px; border-top: 1px solid var(--line-soft); font-size: .88rem; }
.shell .tm-log-txt { color: #4b4458; overflow-wrap: anywhere; }
.shell .tm-log-txt b { color: var(--ink); }
.shell .tm-log time { font-size: .76rem; color: #9a92a6; white-space: nowrap; }
.shell .tm-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: #cbd5e1; }
.shell .tm-dot.pink { background: var(--brand); }
.shell .tm-dot.blue { background: #3b82f6; }
.shell .tm-dot.green { background: #16a34a; }
.shell .tm-dot.violet { background: #7c3aed; }
.shell .tm-dot.amber { background: #f59e0b; }
.shell .tm-empty-sm { padding: 18px 20px 26px; }
@media (max-width: 720px) { .shell .tm-log li { padding: 10px 16px; } }

/* referrals dashboard */
.shell .as-refstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.shell .as-refstat { padding: 18px 20px; }
.shell .as-refstat .k { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a92a6; }
.shell .as-refstat .v { margin: 6px 0 2px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.shell .as-refstat .s { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.shell .as-refstat.hot { border-color: #f5c6dc; background: linear-gradient(135deg, #fff, #fdf2f8); }
.shell .as-refstat.hot .v { color: var(--brand-deep); }
.shell .as-payout { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.shell .as-payout > div:first-child { min-width: 160px; }
.shell .as-payout .as-grow { flex: 1; min-width: 220px; }
@media (max-width: 720px) { .shell .as-refstats { grid-template-columns: 1fr; } .shell .as-payout .as-btn { width: 100%; } }
/* post picker: account dropdown (several connected accounts) */
.shell .pp-sync { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shell .pp-acct { display: flex; align-items: center; gap: 8px; margin: 0; }
.shell .pp-acct-l { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.shell .pp-acct-sel { position: relative; display: inline-flex; align-items: center; }
.shell .pp-acct-av { position: absolute; left: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #f472b6, var(--brand-deep)); color: #fff; font-size: .7rem; font-weight: 800; pointer-events: none; }
.shell .pp-acct-sel select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0 36px 0 40px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; font: inherit; font-size: .9rem; font-weight: 650; color: var(--ink); cursor: pointer; max-width: 240px; }
.shell .pp-acct-sel select:hover { border-color: var(--brand-line); }
.shell .pp-acct-sel select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225,29,116,.15); }
.shell .pp-acct-caret { position: absolute; right: 12px; width: 16px; height: 16px; color: #9a92a6; pointer-events: none; }
@media (max-width: 720px) { .shell .pp-sync { width: 100%; } .shell .pp-acct { flex: 1; } .shell .pp-acct-sel, .shell .pp-acct-sel select { width: 100%; max-width: none; } }
@media (max-width: 720px) {
  .shell .pp-sync { flex-direction: column; align-items: stretch; }
  .shell .pp-sync > form { width: 100%; }
  .shell .pp-sync .pp-syncbtn { width: 100%; justify-content: center; }
}

/* ---- avatars: illustrated face + real photo overlay; IG account pictures ---- */
.uav { position: relative; display: inline-block; flex-shrink: 0; border-radius: 50%; overflow: hidden; line-height: 0; }
.uav .face { width: 100%; height: 100%; display: block; }
.uav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.uav img.ok { opacity: 1; }
.avatar-btn.has-uav { background: none; padding: 0; overflow: hidden; }
.avatar-btn.has-uav .uav { width: 100% !important; height: 100% !important; }
.menu-head-av { display: flex; align-items: center; gap: 12px; }
.menu-head-av > div { min-width: 0; }
.menu-head-av .e { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.igav { position: relative; overflow: hidden; }
.igav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.igav img.ok { opacity: 1; }

/* ---- Instagram token renewal notice (_renew_notice.html) ---- */
.rn {
  --rn-a: #f59e0b; --rn-b: #e11d74; --rn-soft: #fff7ed;
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, #fbbf24, #f472b6 55%, #a78bfa) border-box;
  border: 1.5px solid transparent; box-shadow: 0 10px 28px -18px rgba(225,29,116,.45);
  transition: opacity .2s ease, transform .2s ease;
}
.rn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 120px at 0% 0%, rgba(251,191,36,.12), transparent 70%); }
.rn-urgent { --rn-a: #ef4444; --rn-b: #be123c; --rn-soft: #fef2f2;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #f87171, #e11d74) border-box; }
.rn-urgent::before { background: radial-gradient(420px 120px at 0% 0%, rgba(239,68,68,.12), transparent 70%); }
.rn-out { opacity: 0; transform: translateY(-6px); }

.rn-ring { position: relative; width: 74px; height: 74px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--rn-a), var(--rn-b) calc(var(--p) * 1%), #f3f4f6 0); display: grid; place-items: center; }
.rn-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.rn-av { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #f59e0b, #e11d74); }
.rn-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.rn-av img.ok { opacity: 1; }
.rn-days { position: absolute; z-index: 2; right: -6px; bottom: -4px; min-width: 34px; padding: 3px 7px; border-radius: 999px;
  background: var(--rn-b); color: #fff; font-weight: 800; font-size: .82rem; line-height: 1; text-align: center;
  box-shadow: 0 0 0 3px #fff; display: flex; flex-direction: column; gap: 1px; }
.rn-days small { font-size: .56rem; font-weight: 600; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
.rn-urgent .rn-days { animation: rn-pulse 1.8s ease-in-out infinite; }
@keyframes rn-pulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(239,68,68,.22); } }

.rn-copy { position: relative; min-width: 0; }
.rn-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--rn-soft); color: var(--rn-b); font-size: .74rem; font-weight: 700; }
.rn-kicker svg { width: 13px; height: 13px; }
.rn-title { margin: 0; font-size: 1.02rem; font-weight: 750; color: var(--ink); letter-spacing: -.01em; }
.rn-p { margin: 3px 0 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }
.rn-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: .76rem; font-weight: 600; }
.rn-t { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; }
.rn-t i { width: 7px; height: 7px; border-radius: 50%; }
.rn-t-now { background: #f9fafb; color: #6b7280; text-decoration: line-through; text-decoration-color: rgba(107,114,128,.5); }
.rn-t-now i { background: var(--rn-a); }
.rn-t-new { background: #ecfdf5; color: #047857; }
.rn-t-new i { background: #10b981; }
.rn-arrow { width: 15px; height: 15px; color: #9ca3af; }

.rn-actions { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.rn-actions form { margin: 0; }
.rn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 42px; padding: 0 18px;
  border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: .88rem; color: #fff; white-space: nowrap;
  background: linear-gradient(120deg, var(--rn-a), var(--rn-b)); box-shadow: 0 8px 18px -10px var(--rn-b); transition: transform .15s, filter .15s; }
.rn-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.rn-btn svg { width: 16px; height: 16px; }
.rn-btn.rn-busy svg { animation: rn-spin .8s linear infinite; }
.rn-btn:disabled { cursor: progress; opacity: .85; }
@keyframes rn-spin { to { transform: rotate(360deg); } }
.rn-later { border: 0; background: none; padding: 4px; cursor: pointer; font: inherit; font-size: .78rem; color: var(--ink-soft); }
.rn-later:hover { color: var(--ink); text-decoration: underline; }
.rn-ask { margin: 0; max-width: 220px; font-size: .8rem; color: var(--ink-soft); }

@media (max-width: 720px) {
  .rn { grid-template-columns: auto 1fr; gap: 14px; padding: 14px; align-items: start; }
  .rn-ring { width: 62px; height: 62px; }
  .rn-av { width: 44px; height: 44px; }
  .rn-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .rn-actions form { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rn, .rn-btn { transition: none; }
  .rn-urgent .rn-days, .rn-btn.rn-busy svg { animation: none; }
}