/* ═══════════════════════════════════════════════════════════════════════════
 * PRO DASHBOARD — the owner's Figma, brand skin.
 * TYPE RULE (owner, Aug 25): 42dot Sans is the default. SF Pro Display is used
 * ONLY on clickable buttons, EXCEPT the nav tabs which stay 42dot Sans. The
 * profile dropdown is entirely SF Pro.
 * NOTE: SF Pro is Apple-only on the web. Windows/Android fall back to their
 * system UI face, which is the closest equivalent available.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sf: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
        'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --page: #FFFFFF;
  /* KILL THE BLUE (owner, Aug 25): this file loads only on the dashboard, so
   * re-pointing the app.css accent tokens here retires every var()-driven
   * blue on this page in one move. Hard-coded blue hexes are overridden
   * rule-by-rule below. */
  --blue: var(--o-btn-a);
  --blue-soft: #FFF3E7;
  --accent: var(--o-btn-a);
  --accent-strong: #F4761B;
  --accent-deep: #FE6111;
  --grad: var(--grad-btn); /* paywall modals open over this page and use it */
}

/* app.css's .primary is a blue gradient with a literal hex in it — the token
 * remap can't reach that. Every primary on this page is the brand fade. */
.primary { background: var(--grad-btn); box-shadow: 0 4px 12px rgba(251, 130, 33,.26); }

/* app.css sets `body { display:flex; align-items:center }` for the EDITOR
   shell. The dashboard is a normal scrolling document, so undo that here or
   the whole page gets vertically centred and squeezed to content width. */
body.dash.brand {
  display: block; align-items: initial; justify-content: initial;
  height: auto; min-height: 100dvh; overflow: visible;
  background: var(--page); color: var(--ink);
  font-family: '42dot Sans', system-ui, sans-serif;
}
html { overflow: auto; }

/* buttons take SF Pro; the nav tabs deliberately do not */
button:not(.nav-tab), .primary, .ghost-btn, .pill-btn, .menu-item, .use-mini, .use-big { font-family: var(--sf); }
.nav-tab { font-family: '42dot Sans', system-ui, sans-serif; }
#wsMenu, #wsMenu * { font-family: var(--sf); }

/* ── top bar ── */
#topbar {
  background: #fff; border-bottom: 0; height: 64px;
  padding: 0 clamp(16px, 3vw, 40px); gap: 20px;
}
#topbar .brand-logo, #topbar .brand { height: 30px; display: flex; align-items: center; }
#topbar .brand-logo img { height: 30px; width: auto; display: block; }

#mainNav { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.nav-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill); border: 0;
  background: transparent; color: #4B5563; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: background var(--dur-ui) ease, color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
/* nav icons carry the fading orange in every state (owner fix list 1a);
   a gradient stroke needs the shared SVG paint server in dashboard.html */
.nav-tab svg { opacity: 1; stroke: url(#elGradIcon); }
.nav-tab.active { background: #FFF1E4; color: var(--ink); font-weight: 600; }
.nav-tab.is-soon { color: #6B7280; cursor: default; }
.nav-tab:not(:disabled):active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .nav-tab:not(.active):not(:disabled):hover { background: #F7F7F8; color: var(--ink); }
}

/* workspace chip */
#wsBtn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid #FCD9B6; cursor: pointer;
  box-shadow: 0 2px 10px rgba(251, 130, 33,.10);
  transition: border-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
#wsBtn:active { transform: scale(0.985); }
#wsAvatar { width: 34px; height: 34px; border-radius: 50%; background: #FFE9D2; display: grid; place-items: center; font-size: 19px; overflow: hidden; }
.ws-txt { text-align: left; line-height: 1.15; }
#wsName { font-size: 14px; font-weight: 600; font-family: var(--sf); }
.ws-sub { font-size: 11.5px; color: var(--ink-2); font-family: var(--sf); }

/* dropdown (all SF Pro) */
#wsMenu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 236px; background: #fff; border: 1px solid #F0F0F2;
  border-radius: var(--r-card); padding: 8px; box-shadow: 0 18px 44px rgba(16,24,40,.14);
  display: flex; flex-direction: column; gap: 2px;
}
#wsMenu .menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; background: transparent; border-radius: 10px;
  font-size: 14.5px; color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--dur-ui) ease;
}
#wsMenu .menu-item svg { width: 17px; height: 17px; opacity: .8; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) { #wsMenu .menu-item:hover { background: #F7F7F8; } }
#wsMenu .menu-item.hot { background: var(--grad-btn); color: var(--on-brand, #FFFFFF); font-weight: 600; }
#wsMenu .menu-item.hot svg { opacity: 1; }
@media (hover: hover) and (pointer: fine) { #wsMenu .menu-item.hot:hover { filter: brightness(1.04); background: var(--grad-btn); } }
#wsMenu .menu-sep { height: 1px; background: #F0F0F2; margin: 6px 4px; }

/* ── layout ──
 * Tight by design (owner fix list 3): with 1-3 signatures the whole page must
 * fit a normal viewport without scrolling. The soon panels STRETCH to the
 * left column's height instead of forcing their own. */
#viewDashboard { padding: 0 clamp(16px, 3vw, 40px) 20px; }
.dash-grid {
  display: grid; grid-template-columns: 0.94fr 1.22fr 1.22fr;
  gap: 14px; align-items: stretch; margin-bottom: 14px;
}
.col-left { display: flex; flex-direction: column; gap: 14px; }
.card {
  background: #fff; border: 1px solid #F0F0F2; border-radius: 22px;
  box-shadow: var(--shadow-card);
}

/* ── logo-processing card ── */
.proc-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.proc-l { flex: 1; min-width: 0; }
.proc-l h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 2px; }
.proc-sub { font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
/* no logo on the account (owner removed it): ask for one, claim nothing —
   no loading bar, no scan line (owner fix list 6) */
.proc-card.no-logo .proc-bar, .proc-card.no-logo .scan { display: none; }
/* the animation has been DELIVERED — stop claiming work is in progress
   (this state was missing entirely: the card nagged forever, Aug 27) */
.proc-card.anim-done .proc-bar, .proc-card.anim-done .scan { display: none; }
.proc-card.anim-done .proc-sub { margin-bottom: 0; color: #F4761B; font-weight: 600; }
.proc-card.no-logo .proc-sub { margin-bottom: 0; color: var(--orange-ink); font-weight: 600; }
.proc-card.no-logo .logo-thumb { border-style: dashed; border-color: #FCD9B6; }
/* FREE plan (owner's Figma): static logo, no processing claim, upgrade CTA
   under the thumb. The bar and scan line only exist while work is claimed. */
body.plan-free .proc-bar, body.plan-free .logo-thumb .scan { display: none; }
body.plan-free .proc-sub { margin-bottom: 0; }
body.plan-free .proc-sub b { color: var(--ink); }
.proc-r { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.proc-r #upgradeAnim { justify-content: center; }
body.plan-free #masterUpgrade { display: none; } /* buy-more-signatures is a paid affordance */
.proc-bar { height: 5px; border-radius: 999px; background: #EFEFF1; overflow: hidden; }
/* static by design: it claims no percentage */
.proc-bar i { display: block; height: 100%; width: 46%; border-radius: 999px; background: var(--grad-btn); }
.proc-r { flex: 0 0 auto; }
.logo-thumb {
  position: relative; width: 150px; height: 54px; border-radius: 12px;
  border: 1px solid #F0F0F2; background: #fff; overflow: hidden;
  display: grid; place-items: center;
}
.logo-thumb img { max-width: 82%; max-height: 62%; object-fit: contain; display: block; }
/* the scan line: this is the part that moves */
.logo-thumb .scan {
  position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 38%, var(--o-btn-a) 50%, rgba(255,255,255,.9) 62%, rgba(255,255,255,0) 100%);
  opacity: .85; animation: scanSweep 2.6s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes scanSweep { 0% { left: -12%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .logo-thumb .scan { animation: none; left: 50%; opacity: .35; } }

/* ── master signature ── */
.master-card { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; }
.card-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  padding: 9px 16px; border: 0; border-radius: var(--r-pill);
  background: var(--grad-btn); color: var(--on-brand, #FFFFFF); font-size: 13.5px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 12px rgba(251, 130, 33,.26);
  transition: filter var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.pill-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .pill-btn:hover { filter: brightness(1.04); } }
/* renderInto() refuses to draw when the slot's parent measures under 50px
   wide. `place-items: center` shrink-wraps an EMPTY slot to zero width, so
   the master never rendered and could never grow. The slot must own the
   width; centring happens inside it. */
.master-frame {
  border: 2px solid var(--o-btn-a); border-radius: 16px; background: #fff;
  margin: 0; /* dashboard.css adds 18/16px margins on top of the card padding */
  padding: 10px; min-height: 170px; flex: 1; display: flex; align-items: center;
  box-shadow: 0 0 0 4px rgba(251, 130, 33,.10);
  position: relative; overflow: hidden; /* hosts the action veil (owner's frame) */
}
.master-frame:hover .hover-veil, .master-frame:focus-within .hover-veil { opacity: 1; pointer-events: auto; }
.master-frame .hover-veil { border-radius: 13px; }
.master-frame .sig-slot {
  width: 100%; min-width: 0; border: 0; padding: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.master-frame.empty { border-style: dashed; border-color: #FCD9B6; box-shadow: none; }

/* ── coming-soon panels (blurred mock, owner's call) ──
   height comes from stretching to the left column, not a fixed minimum */
.soon-panel { position: relative; padding: 18px; min-height: 300px; overflow: hidden; }
.soon-badge {
  display: inline-block; padding: 9px 20px; border-radius: 12px;
  background: var(--grad-btn); color: var(--on-brand, #FFFFFF); font-size: 14.5px; font-weight: 600;
  /* 42dot by default: not a clickable button, so no SF Pro (type rule 2) */
  box-shadow: 0 4px 12px rgba(251, 130, 33,.26);
  position: relative; z-index: 2;
}
.soon-mock { position: absolute; inset: 66px 18px 18px; filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }
.mk-row { display: flex; gap: 12px; margin-bottom: 14px; }
.mk-stat { flex: 1; display: flex; align-items: center; gap: 9px; background: #FAFAFB; border: 1px solid #F0F0F2; border-radius: 12px; padding: 12px; }
.mk-stat div { flex: 1; }
.mk-stat i { display: block; height: 6px; width: 70%; background: #E4E4E7; border-radius: 3px; margin-bottom: 6px; }
.mk-stat b { display: block; height: 9px; width: 42%; background: #D4D4D8; border-radius: 3px; }
.mk-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.mk-dot.o { background: #FBD4AE; } .mk-dot.d { background: #D4D4D8; }
.mk-card { background: #FAFAFB; border: 1px solid #F0F0F2; border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.mk-line { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.mk-line i { flex: 1; height: 8px; background: #E4E4E7; border-radius: 4px; }
.mk-pill { width: 54px; height: 20px; border-radius: 999px; background: #EDEDEF; }
.mk-curve { height: 120px; border-radius: 12px; background: radial-gradient(120% 90% at 50% 100%, #F1F1F3 0%, #FAFAFB 70%); }
.mk-foot { margin-top: auto; }
.mk-big { height: 26px; width: 34%; background: #E4E4E7; border-radius: 6px; margin-bottom: 14px; }
.mk-cols { display: flex; gap: 10px; }
.mk-cols span { flex: 1; height: 34px; border-radius: 999px; background: #EDEDEF; }
.mk-thead { display: flex; gap: 16px; padding: 10px 4px 16px; }
.mk-thead i { height: 9px; background: #E4E4E7; border-radius: 4px; }
.mk-thead i:nth-child(1) { flex: 2; } .mk-thead i:nth-child(2) { flex: 2; } .mk-thead i:nth-child(3) { flex: 1; }
.mk-trow { display: flex; align-items: center; gap: 16px; padding: 13px 4px; border-top: 1px solid #F4F4F5; }
.mk-av { width: 30px; height: 30px; border-radius: 50%; background: #EFD9C4; flex: 0 0 auto; }
.mk-trow i { height: 9px; background: #E4E4E7; border-radius: 4px; }
.mk-trow i:nth-of-type(1) { flex: 2; } .mk-trow i:nth-of-type(2) { flex: 2; }
.mk-act { width: 42px; height: 14px; border-radius: 4px; background: #FBD4AE; flex: 0 0 auto; }

/* ── library ── */
.lib { padding: 14px; }
.lib-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0; flex-wrap: wrap; }
.search-wrap {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 1 420px;
  background: #fff; border: 1px solid #EDEDEF; border-radius: var(--r-pill); padding: 9px 16px;
  color: var(--ink-3);
}
.search-wrap input { border: 0; outline: 0; background: transparent; font: 500 14px '42dot Sans', system-ui, sans-serif; color: var(--ink); width: 100%; }
.count-pill { padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid #EDEDEF; font-size: 13px; color: var(--ink-2); }
.count-pill b { color: var(--ink); font-weight: 700; }
.lib-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Remove Watermark "toggle" (free only) — a conversion trigger dressed as a
   switch; the knob nudges and snaps back, it never actually turns on */
.rw-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-pill); cursor: pointer;
  background: #FFF6EE; border: 1px solid #FCD9B6;
  font: 600 13px var(--sf); color: var(--orange-ink);
  transition: border-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.rw-pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .rw-pill:hover { border-color: var(--orange-ink, #F4761B); } }
.rw-track {
  display: inline-block; width: 34px; height: 20px; border-radius: 999px;
  background: var(--grad-btn); position: relative; flex: 0 0 auto;
}
.rw-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25);
  transition: left 180ms var(--ease-out);
}
.rw-pill.nudge .rw-knob { left: 16px; }
@media (prefers-reduced-motion: reduce) { .rw-knob { transition: none; } .rw-pill.nudge .rw-knob { left: 2px; } }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 0; }

/* signature card */
.sig-card { border: 1px solid #F0F0F2; border-radius: 18px; background: #fff; padding: 10px; position: relative; }
.sig-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0; }
.sig-card-head .stat { display: none; }
.head-r { display: flex; align-items: center; gap: 8px; margin-left: 0; width: 100%; }
.master-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-radius: 10px; background: var(--grad-btn); color: var(--on-brand, #FFFFFF); font-size: 13px; font-weight: 600;
  /* 42dot by default: a status pill, not a clickable button (type rule 2) */
}
.use-mini { display: none; }
.head-r .dropdown { margin-left: auto; }
.kebab { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 18px; padding: 4px 6px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .kebab:hover { background: #F4F4F5; } }
/* dashboard.css pins .sig-body at 205px — the zoomed render owns the height now */
.sig-body { position: relative; border-radius: 14px; overflow: hidden; height: auto; }
/* the signature owns the box: light padding, low floor — the zoomed render
   sets the real height (owner fix list 2) */
.sig-slot { background: #fff; border: 1px solid #F0F0F2; border-radius: 14px; padding: 8px; display: grid; place-items: center; min-height: 140px; }

/* hover overlay — the design's 5 actions + Use Signature */
.hover-veil {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none; border-radius: 14px;
  transition: opacity var(--dur-ui) var(--ease-out);
}
.sig-card:hover .hover-veil, .sig-card:focus-within .hover-veil { opacity: 1; pointer-events: auto; }
.veil-icons { display: flex; gap: 10px; }
.veil-icons button {
  width: 46px; height: 46px; border-radius: 13px; border: 1px solid #F0F0F2;
  background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(16,24,40,.10);
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-ui) ease;
}
.veil-icons button:active { transform: scale(0.94); }
/* hover = the fading orange (owner fix list 1c). Unguarded on purpose:
   dashboard.css's blue hover is unguarded too, and must lose everywhere.
   Delete keeps its red danger hover — it was never blue. */
.veil-icons button:hover { background: #FFF3E7; color: var(--orange-ink); border-color: var(--orange-ink, #F4761B); }
.veil-icons button:hover svg[fill="none"] { stroke: url(#elGradIcon); }
.veil-icons button:hover svg:not([fill="none"]) { fill: url(#elGradIcon); }
.veil-icons button[title="Delete"]:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.veil-icons button[title="Delete"]:hover svg[fill="none"] { stroke: currentColor; }

/* library kebab + master kebab menus: hover text = the fading orange
   (owner fix list 1b; gradient text needs the two-layer clip trick — layer 1
   is the fade clipped to the glyphs, layer 2 paints the hover wash) */
.sig-card .menu-item:hover:not(.danger),
#masterMenu .menu-item:hover:not(.danger) {
  color: var(--orange-ink); /* fallback when background-clip:text is unsupported */
  background-image: var(--grad-btn), linear-gradient(#FFF3E7, #FFF3E7);
  -webkit-background-clip: text, padding-box;
  background-clip: text, padding-box;
  -webkit-text-fill-color: transparent;
}
.use-big {
  border: 0; border-radius: var(--r-pill); padding: 11px 26px;
  background: var(--grad-btn); color: var(--on-brand, #FFFFFF); font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px rgba(251, 130, 33,.30);
  transition: transform var(--dur-press) var(--ease-out), filter var(--dur-ui) ease;
}
.use-big:active { transform: scale(0.97); }

/* upgrade tile in the grid — dashboard.js renders the ring as .plus-circle
   (a .plus selector here never matched, which is why the tile stayed blue) */
.upgrade-tile {
  border: 1px solid #F0F0F2; border-radius: 18px; background: #FCFCFD;
  min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 20px; text-align: center; color: var(--ink-2); font-size: 14px;
}
.upgrade-tile .plus-circle {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--o-btn-a); color: var(--orange-ink, #F4761B);
  display: grid; place-items: center; font-size: 22px; line-height: 1;
}
/* the free-plan variant (owner's Figma): title + a small Create button */
.upgrade-tile.create-card { background: #FCFCFD; }
.upgrade-tile.create-card .cc-title { color: var(--ink); font-size: 15px; font-weight: 600; margin: 0; }

@media (max-width: 1200px) { .dash-grid { grid-template-columns: 1fr 1fr; } .col-left { grid-column: 1 / -1; } }
@media (max-width: 820px)  { .dash-grid { grid-template-columns: 1fr; } .soon-panel { min-height: 320px; } }

/* ══ MOBILE (owner task #7, Aug 25): most signups happen on a phone. The
   topbar wraps instead of overflowing its fixed height, the nav tabs wrap to
   two rows (no side-swiping, per the owner), cards stack full-width, and the
   library bar becomes a column. Nothing may scroll horizontally. ══ */
@media (max-width: 740px) {
  #topbar { height: auto; min-height: 0; flex-wrap: wrap; padding: 10px 14px; gap: 8px 10px; }
  .brand-logo img, .brand.brand-logo img { height: 20px; }
  #mainNav { order: 3; width: 100%; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .nav-tab { padding: 7px 11px; font-size: 12.5px; gap: 6px; }
  .nav-tab svg { width: 15px; height: 15px; }
  .ws-wrap { margin-left: auto; }
  #wsBtn { padding: 4px; border-width: 1px; }
  #wsBtn .ws-txt, #wsBtn > svg { display: none; }
  #wsAvatar { width: 30px; height: 30px; font-size: 16px; }

  #viewDashboard, #viewAnalytics, #viewTutorial { padding: 0 12px 20px; }
  .dash-grid { gap: 12px; margin-bottom: 12px; }
  .col-left { gap: 12px; }

  .proc-card { flex-wrap: wrap; padding: 14px; }
  .proc-l { flex: 1 1 100%; }
  .proc-r { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 10px; }
  .proc-r #upgradeAnim { flex: 1; }
  .logo-thumb { width: 140px; height: 50px; flex: 0 0 auto; }

  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-head .pill-btn { padding: 8px 12px; font-size: 12px; }

  .lib { padding: 12px; }
  .lib-bar { gap: 8px; }
  .search-wrap { flex: 1 1 100%; }
  .rw-pill { flex: 1 1 auto; justify-content: space-between; }
  .lib-actions { margin-left: 0; flex: 1 1 100%; }
  .lib-actions .pill-btn { flex: 1; justify-content: center; }
  .sig-grid { gap: 12px; }
  .upgrade-tile { min-height: 120px; }

  .soon-panel { min-height: 240px; }
}