/* PowerKit Pro design system
   Ink #18202F · Mist #F3F5F8 · Line #DDE2EA · Paper #FFFFFF · Signal #F2B33D
   Each product sets --accent / --accent-ink. Display: Archivo. Text: Inter. */

:root {
  --ink: #18202F;
  --ink-2: #3A4456;
  --ink-3: #6B7486;
  --mist: #F3F5F8;
  --line: #DDE2EA;
  --line-2: #EBEEF3;
  --paper: #FFFFFF;
  --signal: #F2B33D;
  --ok: #157F4B;
  --warn: #A15C07;
  --bad: #B42318;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 18px;
  --display: 'Archivo', 'Inter', system-ui, sans-serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tint: color-mix(in srgb, var(--accent) 9%, white);
  --tint-2: color-mix(in srgb, var(--accent) 16%, white);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 15px/1.55 var(--text); color: var(--ink); background: var(--mist); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
svg:not(.mp-edit):not([data-free]) { max-width: 100%; }
input[type=file] { max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 0.75em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--line-2); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, white); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.center { justify-content: center; text-align: center; }
.inline { display: inline; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-right: 8px; flex: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- buttons & fields ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--r); border: 1px solid transparent; font: 600 14px/1 var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, white); }
.btn-danger:hover { background: #FEF3F2; }
.btn-sm { height: 34px; padding: 0 10px; font-size: 13px; }
@media (pointer: coarse) { .btn-sm { height: 40px; } }
.btn-lg { height: 48px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.hint { font-size: 12.5px; color: var(--ink-3); }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea {
  width: 100%; font: 15px/1.4 var(--text); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; min-height: 40px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type=color] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
input[type=file] { font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 16px; margin: 0; }
legend { font-weight: 700; font-size: 13px; padding: 0 6px; color: var(--ink-2); }
/* Collapsible editor section: looks like a fieldset, folds like <details>. Used for Advanced and optional groups on every tool. */
details.ed-sec { border: 1px solid var(--line); border-radius: var(--r); padding: 0 16px; margin: 0; background: var(--paper); min-width: 0; }
details.ed-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 14px 0; font-weight: 700; font-size: 13px; color: var(--ink-2); }
details.ed-sec > summary::-webkit-details-marker { display: none; }
details.ed-sec > summary::before { content: '+'; font-weight: 700; color: var(--ink-3); width: 14px; transition: transform .2s; flex: none; }
details.ed-sec[open] > summary::before { transform: rotate(45deg); }
details.ed-sec > summary .muted { font-weight: 500; }
nav[data-scrolls]:not([data-at-end]) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
details.ed-sec > .ed-body { display: flex; flex-direction: column; gap: 16px; padding: 0 0 16px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.style-grid .field:has(input[type=file]) { grid-column: 1 / -1; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.narrow { max-width: 640px; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
/* A wide child (a file input, a long link in a copy field) shrinks to its column instead of pushing the panel past the gutter on a phone. */
.grid-2 > *, .grid-3 > * { min-width: 0; }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: var(--ink); color: #C9D0DC; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 700 18px/1 var(--display); color: inherit; text-decoration: none; letter-spacing: -0.02em; }
.brand b { font-weight: 800; color: var(--signal); margin-left: 2px; }
.side .brand { color: #fff; padding: 4px 8px 18px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-label { font-size: 12px; color: #8A93A5; padding: 14px 10px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #C9D0DC; text-decoration: none; font-size: 14px; font-weight: 500; position: relative; }
.nav-item:hover { background: #232D40; color: #fff; }
.nav-item.active { background: #26324A; color: #fff; }
.nav-item[style*="--dot"] .nav-ico { color: var(--dot); }
.nav-ico { display: inline-flex; width: 18px; }
.side-foot { border-top: 1px solid #2A3448; padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 28px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumb-product { font-weight: 700; color: var(--ink) !important; display: inline-flex; align-items: center; }
.sep { color: var(--line); }
.top-user { font-size: 13px; color: var(--ink-3); }
.menu-btn { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink); }
.content { padding: 28px; max-width: 1180px; width: 100%; }
.content.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 30px; font-weight: 700; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.h2 { font-size: 19px; margin-bottom: 12px; }
.h3 { font-size: 17px; margin-bottom: 4px; }
.section { margin-bottom: 30px; }
.lede-app { font-size: 17px; color: var(--ink-2); margin-bottom: 24px; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  /* Phones: the drawer is as tall as the visible viewport (100vh overshoots behind Safari's toolbar and hid the
     bottom links, Admin and Log out above all), scrolls on its own, and leaves room for the home indicator. */
  .side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 20; transform: translateX(-100%); transition: transform .2s; height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .side .nav { flex: 0 0 auto; }
  .side-foot { padding-bottom: 8px; }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(24, 32, 47, .45); }
  .menu-btn { display: inline-flex; }
  .top { padding: 0 14px; }
  .top-user { display: none; }
  .content { padding: 18px 14px 40px; }
  .page-head h1 { font-size: 24px; }
}

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.notice { background: #FFF8E6; border: 1px solid #F5D98B; color: #6B4A00; padding: 12px 16px; border-radius: var(--r); margin-bottom: 20px; font-size: 14px; }
.flash { padding: 11px 16px; border-radius: var(--r); margin-bottom: 18px; font-size: 14px; font-weight: 500; animation: flash-in .25s ease-out; }
.flash-ok { background: #ECFDF3; color: #05603A; border: 1px solid #ABEFC6; }
.flash-err { background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } }

.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-muted { background: var(--line-2); color: var(--ink-2); }
.pill-ok { background: #E7F7EE; color: var(--ok); }
.pill-warn { background: #FEF4E2; color: var(--warn); }
.pill-bad { background: #FEECEB; color: var(--bad); }
.pill-accent { background: var(--tint-2); color: var(--accent-ink); }

/* home tool list */
.tool-list { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.tool-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line-2); }
.tool-row:first-child { border-top: 0; }
.tool-row:hover { background: color-mix(in srgb, var(--a) 5%, white); }
.tool-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 12%, white); color: var(--a); }
.tool-main { display: flex; flex-direction: column; min-width: 0; }
.tool-main .muted { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-link { display: inline-flex; align-items: center; color: var(--ink); font-weight: 600; text-decoration: none; }
.tool-link .dot { background: var(--a); }

/* tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; font-size: 14px; }
.table th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--ink-3); padding: 11px 14px; background: #FAFBFC; border-bottom: 1px solid var(--line); }
.table td { padding: 12px 14px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:first-child td { border-top: 0; }
.table tr.focus td { background: var(--tint); }
.table td a { text-decoration: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 10px 4px; border-top: 1px solid var(--line-2); }
  .table td { border: 0; padding: 3px 12px; }
  .truncate { max-width: 100%; }
  .num { text-align: left; }
}
/* Trash-can delete on list rows and cards (ui.ts rowDelete) */
.row-del { display: inline-flex; margin: 0; }
.row-del button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; transition: color .15s, background .15s; }
.row-del button:hover, .row-del button:focus-visible { color: var(--bad); background: #FEF3F2; outline: 0; }
.row-copy button:hover, .row-copy button:focus-visible, .row-link button:hover, .row-link button:focus-visible { color: var(--accent-ink, var(--ink)); background: var(--line-2); }
.row-link button.copied { color: var(--ok, #047857); background: #ECFDF5; }
.row-del-cell { white-space: nowrap; }
.row-del button:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 35%, white); }
.table th.row-del-cell, .table td.row-del-cell { width: 1%; text-align: right; padding-top: 6px; padding-bottom: 6px; }
.del-host { position: relative; display: flex; }
.del-host > :first-child { flex: 1; min-width: 0; }
.card-del { position: absolute; top: 8px; right: 8px; }
.card-del button { background: var(--paper); }
@media (max-width: 720px) { .table td.row-del-cell { text-align: left; width: auto; } }
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input { max-width: 320px; }
.toolbar select { max-width: 220px; }

/* stats & charts */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.stat { background: var(--paper); padding: 16px 18px; }
.stat-value { font: 700 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stat-label { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.stat-sub { font-size: 12px; color: var(--ink-3); }
.chart { margin: 0 0 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 8px; }
.chart figcaption { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.chart .bar { fill: var(--accent); }
.chart .bar:hover { fill: var(--accent-ink); }
.chart .bar-label { font-size: 10.5px; fill: var(--ink-3); }
.breakdown { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.breakdown h3 { font-size: 14px; font-family: var(--text); font-weight: 600; margin-bottom: 10px; }
.breakdown ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.breakdown li { display: grid; grid-template-columns: 110px 1fr 40px; gap: 10px; align-items: center; font-size: 13.5px; }
.bd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.bd-bar { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.bd-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bd-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* editor layout with sticky preview */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.preview-pane { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.preview-pane img { border-radius: 8px; background: #fff; }
.sticky { position: sticky; top: 78px; }
/* A sticky pane taller than the window could never be scrolled to its bottom; cap it and scroll inside. */
.preview-pane.sticky { max-height: calc(100vh - 94px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } .sticky { position: static; } .preview-pane.sticky { max-height: none; overflow: visible; } .preview-pane { order: -1; } }
.copy { display: flex; gap: 6px; width: 100%; }
.copy input { font-size: 13px !important; min-width: 0; }
.qr-block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.qr-actions { display: flex; gap: 8px; }
.logo-preview { max-height: 56px; width: auto; align-self: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }

/* empty states & upsell */
.empty { text-align: center; padding: 56px 20px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty-art { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background:
  linear-gradient(var(--accent), var(--accent)) 8px 8px / 20px 20px no-repeat,
  linear-gradient(var(--tint-2), var(--tint-2)) 36px 8px / 20px 20px no-repeat,
  linear-gradient(var(--tint-2), var(--tint-2)) 8px 36px / 20px 20px no-repeat,
  linear-gradient(var(--signal), var(--signal)) 36px 36px / 20px 20px no-repeat, var(--tint); }
.empty h2 { font-size: 21px; margin-bottom: 8px; }
.empty p { color: var(--ink-3); max-width: 420px; margin: 0 auto 18px; }
.upsell { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r); background: var(--tint); border: 1px solid var(--tint-2); margin-bottom: 18px; flex-wrap: wrap; }
.upsell p { margin: 0; font-weight: 500; color: var(--accent-ink); }
.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.suite-panel { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

/* list builder rows (menu items, line items, links...) */
.rows { display: flex; flex-direction: column; gap: 10px; }
.row-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.row-card .grow { flex: 1; min-width: 0; }
.drag { cursor: grab; color: var(--ink-3); user-select: none; padding: 0 2px; }

/* ---------- auth ---------- */
body.auth { background: var(--mist); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; gap: 24px; }
.auth-wrap .brand { color: var(--ink); }
.auth-card { width: 100%; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; }
.auth-card h1 { font-size: 26px; margin-bottom: 18px; }
.auth-card-wide { max-width: 560px; }
/* Honeypot field on public forms: off screen, never shown, bots fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Support ticket conversation */
.thread { display: flex; flex-direction: column; gap: 12px; }
.msg { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.msg-admin { border-color: var(--accent); background: var(--tint); }
.msg-meta { margin-bottom: 6px; font-size: 13.5px; }
.msg-body { font-size: 14.5px; line-height: 1.55; white-space: normal; }
.auth-product { display: flex; align-items: flex-start; font-size: 13.5px; background: var(--tint); color: var(--accent-ink); padding: 10px 12px; border-radius: var(--r); margin-bottom: 18px; }
.auth-product .dot { margin-top: 5px; }
.auth-alt { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); text-align: center; }

/* ---------- public pages (customer-facing) ---------- */
body.pub { background: var(--paper); }
.pub-msg { max-width: 480px; margin: 18vh auto; padding: 0 20px; text-align: center; }
.pub-msg h1 { font-size: 26px; margin-bottom: 10px; }
.made-with { text-align: center; padding: 28px 16px 36px; font-size: 12.5px; color: var(--ink-3); }
.made-with a { color: var(--ink-3); text-decoration: none; }
.made-with a:hover { color: var(--ink); }
.made-with-copy { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); }


/* Marketing pages: see marketing.css (loaded only by the hub and product landings). */

/* ---------- print ---------- */
@media print {
  .side, .top, .page-actions, .no-print, .made-with, .flash { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  body { background: #fff; }
}


/* ---------- color picker (replaces the native dialog on desktop) ---------- */
.cp { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.cp-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font: 500 13px/1 var(--text); color: var(--ink); cursor: pointer; }
.cp-btn:hover { border-color: var(--ink-3); }
.cp-swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); }
.cp-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 236px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 32px rgba(24,32,47,.16); padding: 12px; }
.cp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: 10px; }
.cp-grid button { aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); cursor: pointer; padding: 0; }
.cp-grid button[aria-pressed=true] { outline: 2px solid var(--ink); outline-offset: 1px; }
.cp-row { display: flex; gap: 6px; align-items: center; }
.cp-row input[type=text] { font-family: ui-monospace, monospace !important; font-size: 13px !important; min-height: 34px !important; }
.cp-row label { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.cp-row label input { opacity: 0; width: 0; height: 0; position: absolute; }
.cp-done { width: 100%; margin-top: 8px; }
.qr-style-form { width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.qr-style-form .style-grid { grid-template-columns: 1fr 1fr; }

/* ---------- lifecycle: usage-aware upgrade nudge ---------- */
.nudge { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px 14px; margin-bottom: 18px; border: 1px solid var(--line); border-left: 4px solid var(--a, var(--accent)); border-radius: var(--r); background: var(--paper); font-size: 14px; overflow: hidden; }
.nudge[hidden] { display: none; }
.nudge-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-2); }
.nudge-meter i { display: block; height: 100%; background: var(--a, var(--accent)); }
.nudge-text { flex: 1 1 260px; min-width: 0; }
.nudge-text b { color: var(--ink, var(--accent-ink)); }
.nudge-actions { display: flex; align-items: center; gap: 12px; }
.nudge-suite { font-size: 13px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.nudge-x { border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer; border-radius: 6px; }
.nudge-x:hover { background: var(--line-2); color: var(--ink); }

/* ---------- Sign in with Google ---------- */
.btn-google { height: 44px; width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line); gap: 10px; font-size: 15px; }
.btn-google:hover { border-color: var(--ink-3); background: #fff; }
.btn-google svg { width: 18px; height: 18px; flex: none; }
/* Inline variants (account page, pickers): natural width instead of the login card's full width. */
.btn-google.btn-sm { width: auto; height: 34px; font-size: 13px; padding: 0 12px; }
.btn-google.btn-sm svg { width: 16px; height: 16px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-3); font-size: 13px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.g-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; }
.g-status-item { display: inline-flex; align-items: center; gap: 8px; }
.g-status .inline button { padding-inline: 8px; }

/* ---------- admin console ---------- */
.nav-label-admin { color: var(--signal); font-weight: 700; letter-spacing: .02em; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--signal); color: var(--ink); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { background: var(--mist); }
.attn { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--signal); border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 24px; }
.attn-clear { border-left-color: var(--ok); }
.attn h2 { margin-bottom: 8px; }
.attn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.attn li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.grid-2-wide { grid-template-columns: 1.2fr 1fr; align-items: start; margin-bottom: 30px; }
.grid-2-wide > * { min-width: 0; }
.table-tight td { padding: 9px 14px; }
.who { display: inline-flex; align-items: center; gap: 8px; }
.who a { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.who a:hover b { text-decoration: underline; }
.who-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--signal); font: 700 11.5px/30px var(--display); text-align: center; letter-spacing: .02em; }
.who-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.who-txt b { font-weight: 600; }
.who-txt small { color: var(--ink-3); font-size: 12px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 4px; background: var(--mist); border-radius: var(--r-lg); width: fit-content; max-width: 100%; }
.seg a { padding: 6px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(24, 32, 47, .08); }
.chart-30 svg .bar { fill: var(--ink); }
.chart-30 svg .bar-zero { fill: var(--line); }
.chart-30 figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.acct-head { display: flex; align-items: center; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 22px; }
.acct-av { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--signal); font: 700 19px/56px var(--display); text-align: center; overflow: hidden; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.acct-name { font: 700 20px/1.2 var(--display); letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-meta { font-size: 13px; color: var(--ink-3); }
.acct-plans { display: flex; flex-wrap: wrap; gap: 4px; }
.acct-mrr { text-align: right; flex: none; }
.acct-mrr b { display: block; font: 700 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.acct-mrr span { font-size: 12.5px; color: var(--ink-3); }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.checks .pill { flex: none; margin-top: 1px; min-width: 62px; justify-content: center; }
@media (max-width: 860px) {
  .grid-2-wide { grid-template-columns: 1fr; }
  .acct-head { flex-wrap: wrap; }
  .acct-mrr { text-align: left; }
  .seg { width: 100%; }
}

/* ---------- Power up: top-bar button, upgrade page, plan cards ---------- */
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #0F1626; }
.btn-power { background: linear-gradient(180deg, #FFD36B, var(--signal)); color: #18202F; border-color: #D99A1E; box-shadow: 0 0 0 0 rgba(242,179,61,.55), 0 6px 18px -6px rgba(242,179,61,.8); animation: pk-pulse 2.4s ease-out infinite; }
.btn-power:hover { background: linear-gradient(180deg, #FFDC85, #F5BE55); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
.table-wrap .table { margin: 0; border: 0; }

.power-up { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; margin-left: auto; border-radius: 999px; font: 700 13px/1 var(--display); letter-spacing: .02em; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--line); white-space: nowrap; }
.power-up svg { color: #D99A1E; }
.power-up:hover { border-color: var(--signal); }
.power-up-loud { position: relative; color: #18202F; background: linear-gradient(180deg, #FFD36B, var(--signal)); border-color: #D99A1E; text-transform: uppercase; animation: pk-pulse 2.4s ease-out infinite; }
.power-up-loud svg { color: #18202F; animation: pk-flicker 2.4s ease-in-out infinite; }
.power-up-loud:hover { background: linear-gradient(180deg, #FFDC85, #F5BE55); }
.top .crumbs { flex: 1; min-width: 0; }
/* Breadcrumb pieces shrink with an ellipsis instead of pushing the right side of the bar off the screen. */
.crumbs > a, .crumbs > span:not(.sep) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumbs > .crumb-product { flex: none; }
.crumbs > .sep { flex: none; }
/* The way back to the marketing site once you are logged in. Sits with the user name, left of Power up. */
.top-user { white-space: nowrap; }
.top-site { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); background: var(--paper); white-space: nowrap; flex: none; }
.top-site:hover { color: var(--ink); border-color: var(--ink-3); }
.top-site svg { color: var(--accent); flex: none; }
.power-up { margin-left: 0; }
@media (max-width: 640px) {
  .top { gap: 8px; }
  .top-site { width: 34px; padding: 0; justify-content: center; }
  .top-site span { display: none; }
  /* A phone bar has room for one name. Deeper pages keep the product dot and the page name; the h1 repeats the rest. */
  .crumbs > .sep { display: none; }
  .crumbs > a:not(.crumb-product):not(:last-child), .crumbs > span:not(.crumb-product):not(:last-child) { display: none; }
  .crumbs:has(.sep) .crumb-product .crumb-name { display: none; }
  .crumbs:has(.sep) .crumb-product .dot { margin-right: 0; }
}
@keyframes pk-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,179,61,.6), 0 0 14px rgba(242,179,61,.45); } 70% { box-shadow: 0 0 0 12px rgba(242,179,61,0), 0 0 22px rgba(242,179,61,.25); } 100% { box-shadow: 0 0 0 0 rgba(242,179,61,0), 0 0 14px rgba(242,179,61,.45); } }
@keyframes pk-flicker { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: .55; } 55% { opacity: 1; } }
.nav-power { color: #8A5A00 !important; font-weight: 700; }
.nav-power .nav-ico { color: #D99A1E; }

.power-hero { position: relative; overflow: hidden; text-align: center; padding: 36px 20px 30px; margin-bottom: 24px; border-radius: var(--r-lg); color: #fff; background: radial-gradient(120% 140% at 50% -20%, #2B3A5A 0%, #18202F 55%, #0F1626 100%); }
.power-hero::after { content: ''; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(closest-side, rgba(242,179,61,.28), transparent 70%); pointer-events: none; }
.power-hero h2 { font-size: clamp(26px, 4vw, 38px); margin: 10px 0 8px; }
.power-hero p { color: #C9D1E0; max-width: 560px; margin: 0 auto; }
.power-hero-bolt { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #18202F; background: radial-gradient(circle at 35% 30%, #FFE29A, var(--signal)); animation: pk-pulse 2.4s ease-out infinite; position: relative; z-index: 1; }
.power-hero > * { position: relative; z-index: 1; }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 8px; }
.tier { position: relative; display: flex; flex-direction: column; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.tier h3 { font-size: 20px; margin-bottom: 4px; }
.tier .tier-top p { margin: 0; font-size: 14px; }
.tier-price { font: 800 38px/1 var(--display); letter-spacing: -0.02em; }
.tier-price small { font: 500 14px var(--text); color: var(--ink-3); letter-spacing: 0; margin-left: 2px; }
.tier-save { font-size: 13px; font-weight: 600; color: var(--ok); }
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; font-size: 14px; flex: 1; }
.tier-list li { padding-left: 24px; position: relative; }
.tier-list li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }
.tier form { margin: 0; }
.tier-current { text-align: center; padding: 10px 0; }
.tier-hot { border: 2px solid var(--signal); box-shadow: 0 0 0 4px rgba(242,179,61,.15), 0 18px 40px -18px rgba(217,154,30,.55); transform: translateY(-4px); }
.tier-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--signal); color: #18202F; font: 700 12px/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.tier-biz { background: linear-gradient(180deg, #fff, #F7F8FB); }

.compare td, .compare th { vertical-align: top; }
.compare td:first-child { white-space: nowrap; }
.tool-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tool-card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--a); border-radius: var(--r); padding: 14px; display: grid; gap: 12px; }
.tool-card-head { display: flex; gap: 10px; align-items: flex-start; }
.tool-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--a); background: color-mix(in srgb, var(--a) 12%, white); }
.tool-card .row-gap form { margin: 0; }
.tool-card .btn-primary { background: var(--a); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
  .tier-hot { transform: none; order: -1; margin-top: 10px; }
}
@media (max-width: 640px) {
  .power-up { height: 32px; padding: 0 11px; }
  .top-user { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .power-up-loud, .power-up-loud svg, .btn-power, .power-hero-bolt { animation: none; }
}
/* Free accounts: the label trades between "Power up" and "Buy now". Both sit in one grid cell so the width never jumps. */
.pu-swap { display: inline-grid; }
.pu-swap > span { grid-area: 1 / 1; text-align: center; animation: pk-swap-a 4.8s ease-in-out infinite; }
.pu-swap > span + span { animation-name: pk-swap-b; }
@keyframes pk-swap-a { 0%, 42% { opacity: 1; transform: translateY(0); } 50%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pk-swap-b { 0%, 42% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .pu-swap > span { animation: none; } .pu-swap > span + span { display: none; } }

/* Live QR preview: a logo picked but not saved yet sits on the clear centre spot the server leaves for it. */
.qr-live { position: relative; display: inline-block; line-height: 0; }
.qr-live > img[data-qr-preview] { display: block; }
.qr-live-logo { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; }
.qr-live-logo[hidden] { display: none; }

/* QR studio (wide screens): the QR panel becomes a centred window while customizing. */
.qr-studio-bg { position: fixed; inset: 0; z-index: 60; background: rgba(15,22,38,.55); backdrop-filter: blur(3px); animation: qs-fade .18s ease-out; }
.qr-block.qr-studio { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto;
  display: grid; grid-template-columns: 340px 1fr; grid-template-rows: auto auto 1fr; column-gap: 32px; row-gap: 14px; align-items: start; justify-items: center;
  background: var(--paper); border-radius: 22px; padding: 30px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); animation: qs-pop .22s cubic-bezier(.2,.7,.2,1); }
.qr-studio .qr-live { grid-column: 1; grid-row: 1; padding: 16px; border-radius: 18px; background: var(--mist); }
.qr-studio .qr-live img[data-qr-preview] { width: 280px; height: 280px; }
.qr-studio .qr-actions { grid-column: 1; grid-row: 2; }
.qr-studio > .hint { grid-column: 1; grid-row: 3; text-align: center; }
.qr-studio .qr-style-form { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; border: 0; align-self: stretch; }
.qr-studio .qr-style-form::before { content: 'Customize your QR code'; font: 800 22px/1.2 var(--display); letter-spacing: -0.02em; margin-bottom: 4px; }
.qr-studio .style-grid { grid-template-columns: 1fr 1fr; }
.qr-studio [data-toggle^="qrstyle-"] { display: none; }
.qr-studio-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--mist); color: var(--ink); font: 400 24px/1 system-ui; cursor: pointer; display: none; }
.qr-studio .qr-studio-x { display: grid; place-items: center; }
.qr-studio-x:hover { background: var(--line); }
@keyframes qs-fade { from { opacity: 0; } }
@keyframes qs-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .qr-studio-bg, .qr-block.qr-studio { animation: none; } }

/* Pop-up windows (native <dialog>) */
dialog.st-dlg, dialog.pk-dlg { width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 28px; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); overflow: auto; }
dialog.st-dlg[open], dialog.pk-dlg[open] { animation: qs-dlg .22s cubic-bezier(.2,.7,.2,1); }
dialog.st-dlg::backdrop, dialog.pk-dlg::backdrop { background: rgba(15,22,38,.55); backdrop-filter: blur(3px); }
@keyframes qs-dlg { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.st-dlg-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--mist); color: var(--ink); font: 400 22px/1 system-ui; cursor: pointer; display: grid; place-items: center; }
.st-dlg-x:hover { background: var(--line); }
@media (max-width: 640px) { dialog.st-dlg, dialog.pk-dlg { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; padding: 20px 16px; } }
@media (prefers-reduced-motion: reduce) { dialog.st-dlg[open], dialog.pk-dlg[open] { animation: none; } }

/* ---------- Get the app (install sheet) ---------- */
.pwa-sheet { position: fixed; inset: 0; z-index: 80; }
.pwa-sheet[hidden] { display: none; }
.pwa-scrim { position: absolute; inset: 0; background: rgba(15,22,38,.5); opacity: 0; transition: opacity .25s; }
.pwa-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: var(--paper); border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px -20px rgba(15,22,38,.45); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.pwa-sheet.on .pwa-scrim { opacity: 1; }
.pwa-sheet.on .pwa-panel { transform: none; }
.pwa-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.pwa-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--mist); color: var(--ink); font: 400 22px/1 system-ui; cursor: pointer; display: grid; place-items: center; }
.pwa-head { display: flex; gap: 14px; align-items: center; margin: 6px 40px 18px 0; }
.pwa-head svg { flex: none; }
.pwa-head h2 { font: 800 22px/1.15 var(--display); letter-spacing: -0.02em; margin: 0 0 3px; }
.pwa-head p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.4; }
.pwa-ico { display: block; border-radius: 12px; }
.pwa-choices { display: grid; gap: 10px; }
.pwa-choice { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pwa-choice:hover, .pwa-choice:focus-visible, .pwa-choice.picked { border-color: #F2B33D; box-shadow: 0 0 0 4px rgba(242,179,61,.18); }
.pwa-choice:active { transform: scale(.99); }
.pwa-choice b { display: block; font: 700 16px/1.2 var(--display); color: var(--ink); }
.pwa-choice small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.pwa-choice em { font: 800 11px/1 var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #18202F; background: #F2B33D; padding: 6px 9px; border-radius: 999px; }
.pwa-main { background: linear-gradient(180deg, #FFFBF0, #fff); }
.pwa-sub { margin: 18px 0 8px; font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pwa-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px 4px; }
.pwa-mini { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 6px; padding: 6px 2px; border-radius: 14px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-align: center; }
.pwa-mini:hover, .pwa-mini:focus-visible, .pwa-mini.picked { background: var(--mist); }
.pwa-mini .pwa-ico { border-radius: 11px; box-shadow: 0 6px 14px -8px rgba(15,22,38,.5); }
.pwa-ios { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--mist); }
.pwa-ios[hidden] { display: none; }
.pwa-ios-title { margin: 0 0 10px; font-weight: 700; }
.pwa-ios ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pwa-ios li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pwa-ios li svg { vertical-align: -4px; }
.pwa-step { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #18202F; color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--display); }
.pwa-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }
.pwa-note:empty, .pwa-note[hidden] { display: none; }
@media (min-width: 821px) {
  .pwa-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: 480px; border-radius: 22px; padding: 26px; transform: translate(-50%, -46%); opacity: 0; transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .2s; }
  .pwa-sheet.on .pwa-panel { transform: translate(-50%, -50%); opacity: 1; }
  .pwa-grab { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pwa-panel, .pwa-scrim { transition: none; } }
/* Pick, then one Add button pinned at the bottom of the sheet. */
.pwa-panel { padding-bottom: 0; }
.pwa-foot { position: sticky; bottom: 0; margin: 14px -20px 0; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); }
.pwa-add { all: unset; box-sizing: border-box; width: 100%; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: #18202F; color: #fff; font: 700 16px/1 var(--display); box-shadow: 0 12px 26px -12px rgba(15,22,38,.7); transition: transform .15s, background .15s; }
.pwa-add:hover { background: #0F1626; }
.pwa-add:active { transform: scale(.985); }
.pwa-add:focus-visible { outline: 3px solid #F2B33D; outline-offset: 3px; }
.pwa-add svg { color: #F2B33D; }
.pwa-head { margin-bottom: 14px; }
.pwa-sub { margin-top: 14px; }
.pwa-mini.picked { background: #FFF4DA; box-shadow: inset 0 0 0 1.5px #F2B33D; }
@media (min-width: 821px) { .pwa-foot { margin: 16px -26px 0; padding: 14px 26px 22px; border-radius: 0 0 22px 22px; } }

/* iPhone: after Add, the sheet steps aside and an arrow points at Safari's Share button. */
.pwa-sheet.coach { pointer-events: none; }
.pwa-sheet.coach .pwa-scrim, .pwa-sheet.coach .pwa-panel { display: none; }
.pwa-coach { position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 81; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.pwa-coach[hidden] { display: none; }
.pwa-coach-bubble { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px);
  padding: 14px 44px 14px 18px; border-radius: 16px; background: #18202F; color: #fff; font: 500 15px/1.35 var(--text); box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); animation: pwa-in .3s cubic-bezier(.2,.7,.2,1); }
.pwa-coach-bubble b { color: #F2B33D; }
.pwa-coach-bubble svg { background: #fff; border-radius: 6px; padding: 2px; }
.pwa-coach-x { all: unset; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #C9D1E0; font: 400 20px/1 system-ui; cursor: pointer; }
.pwa-coach-arrow { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 18px solid #F2B33D; animation: pwa-bob 1s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.pwa-coach.pwa-coach-top { bottom: auto; top: 10px; justify-items: end; padding-right: 60px; }
.pwa-coach.pwa-coach-top .pwa-coach-arrow { order: -1; border-top: 0; border-bottom: 18px solid #F2B33D; margin-right: 20px; }
@keyframes pwa-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.pwa-coach-top .pwa-coach-arrow { animation-name: pwa-bob-up; }
@keyframes pwa-bob-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pwa-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .pwa-coach-arrow, .pwa-coach-bubble { animation: none; } }
.pwa-coach-bubble { display: block; text-align: center; }
.pwa-coach-bubble svg { vertical-align: -5px; margin: 0 2px; }

/* Google approval note under Connect buttons (hidden once GOOGLE_VERIFIED=1). */
.g-review-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #FFF8E6; border: 1px solid #F5D98B; color: #6B4A00; font-size: 12.5px; line-height: 1.45; max-width: 640px; }
.g-review-note > b:first-child { color: #B45309; margin-right: 2px; }

/* ---------- Inkstand admin: 7-day sent bars (plain HTML, no chart lib) ---------- */
.ink-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 150px; padding: 4px 0 0; }
.ink-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.ink-bar i { display: block; width: 100%; max-width: 38px; background: var(--ink); border-radius: 4px 4px 2px 2px; transition: background .15s; }
.ink-bar i:hover { background: var(--accent); }
.ink-bar i.ink-bar-zero { background: var(--line); }
.ink-bar-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); margin-bottom: 4px; }
.ink-bar-l { font-size: 11px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; }
@media (max-width: 600px) {
  .acct-head { gap: 12px 14px; padding: 16px; }
  .acct-id { flex: 1 1 200px; }
  .acct-mrr { flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); }
}
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Paid accounts: the PowerKit Pro mark in the sidebar breathes gold, like the sign-up button on the home page. */
.brand-pro .logo { border-radius: 8px; animation: pk-mark-glow 2.4s ease-in-out infinite; }
.brand-pro .logo path { animation: pk-flicker 2.4s ease-in-out infinite; }
.brand-pro b { background: linear-gradient(90deg, #D99A1E, #FFD36B 40%, #F2B33D 60%, #D99A1E); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pk-shine 4.8s linear infinite; }
@keyframes pk-mark-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(242,179,61,.3)); } 45% { filter: drop-shadow(0 0 12px rgba(242,179,61,.9)); } }
@keyframes pk-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .brand-pro .logo, .brand-pro .logo path, .brand-pro b { animation: none; } }

/* Phones: tables stack into cards; each value gets its column name (filled in by table-labels.js). */
@media (max-width: 720px) {
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Create account: the optional "Have a promo code?" box. Big tap target on phones. */
.promo-field { margin: 0; }
.promo-field > summary { cursor: pointer; display: inline-block; padding: 8px 0; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.promo-field[open] > summary { margin-bottom: 4px; }
.promo-field input { width: 100%; max-width: 280px; font-size: 16px; }