/* Revamped dashboard (preview). Builds on css/styles.css + css/dashboard.css. */

/* Dev SPA frame: dashboard.css's .dashboard-main sets padding:3rem (48px) on
   all sides — way too much whitespace above the H1 on every view. Override
   just the dev SPA (id=view) so the legacy dashboard stays untouched. */
main#view { padding: 1.5rem 2rem 2rem; }

.hub-header { margin-bottom: 1rem; }
.hub-title { font-size: 1.9rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.4rem; }
.hub-subtitle { font-size: 0.95rem; color: var(--color-text-secondary); margin: 0; }
.hub-status { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.92rem; color: var(--color-text-secondary); }
.hub-status span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hub-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.hub-status .dot.blue { background: var(--color-primary); }

.nav-section-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-text-muted); font-weight: 600; padding: 0.5rem 1rem 0.25rem; margin-top: 0.5rem; }
.nav-section-label:first-child { margin-top: 0; }
.nav-item.support svg { color: #5865F2; }

.product-list { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; }
.product-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; transition: border-color 0.2s ease; }
.product-card.open { border-color: rgba(166, 117, 255,0.4); }
.pc-header { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; user-select: none; }
.pc-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary); flex-shrink: 0; }
.pc-icon svg { width: 22px; height: 22px; }
.pc-icon.mac svg { color: #e5e7eb; }
.pc-icon.win svg { color: #38bdf8; }
.pc-icon.ext svg { color: var(--color-primary); }
.pc-icon.upsell { background: rgba(148,163,184,0.1); }
.pc-icon.upsell svg { color: var(--color-text-secondary); }
.pc-titles { flex: 1; min-width: 0; }
.pc-name { font-size: 1.05rem; font-weight: 600; color: var(--color-text); }
.pc-tier { font-size: 0.82rem; color: var(--color-text-secondary); }
.pc-chevron { color: var(--color-text-secondary); transition: transform 0.2s ease; flex-shrink: 0; }
.product-card.open .pc-chevron { transform: rotate(180deg); }
.badge { font-size: 0.72rem; font-weight: 600; padding: 0.28rem 0.6rem; border-radius: 999px; white-space: nowrap; }
/* Neutral status pill on owned-product card headers — matches the muted look of the
   "Included with Pro" plan-action button, no shouty green gradient / uppercase / glow.
   .is-canceling gets a subtle amber tint so "Canceling" reads as a heads-up without
   screaming failure. */
.badge.status-pill {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.badge.status-pill.is-canceling {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}
.badge.upsell { background: rgba(166, 117, 255,0.12); color: var(--color-primary); border: 1px solid rgba(166, 117, 255,0.3); }
.badge.count { background: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

.pc-body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--color-border); }
.pc-meta { font-size: 0.85rem; color: var(--color-text-secondary); padding: 0.9rem 0 0.2rem; }
.pc-section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin: 1rem 0 0.5rem; font-weight: 600; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: rgba(166, 117, 255,0.04); border: 1px solid var(--color-border); border-radius: 10px; padding: 0.85rem 1rem; }
.device-name { font-size: 0.9rem; color: var(--color-text); font-weight: 500; }
.device-id { font-size: 0.78rem; color: var(--color-text-secondary); font-family: 'Monaco', monospace; word-break: break-all; }
.device-hint { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: 0.45rem; }
/* "Not set" state: dashed border + muted, no purple tint. */
.device-row.device-row-unset {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-border-light);
}
.device-name.device-name-muted { color: var(--color-text-muted); font-weight: 500; }
.device-hint.device-hint-inline { margin-top: 0.15rem; font-size: 0.72rem; }

/* ── Loading skeleton (rendered before real content, replaced on load) ───── */
@keyframes sk-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.sk {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.sk-title { height: 34px; width: 200px; margin-bottom: 0.5rem; }
.sk-sub   { height: 16px; width: 320px; }
.sk-card  { height: 110px; margin-top: 0.85rem; max-width: 760px; }

.action-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
@media (max-width: 600px) { .action-tiles { grid-template-columns: 1fr; } }
.tile { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; cursor: pointer; }
.tile:hover { border-color: var(--color-primary); background: rgba(166, 117, 255,0.06); }
.tile svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

/* Guides — force full-contrast titles (global `a` color was bleeding through). */
.guide-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0.6rem; border-radius: 9px; text-decoration: none; transition: background 0.15s ease; cursor: pointer; color: var(--color-text); }
.guide-row:hover { background: rgba(166, 117, 255,0.06); }
.guide-row + .guide-row { border-top: 1px solid var(--color-border); }
.guide-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--color-bg-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guide-ico svg { width: 16px; height: 16px; color: var(--color-primary); }
.guide-text { flex: 1; min-width: 0; }
.guide-title { font-size: 0.92rem; font-weight: 500; color: var(--color-text); }
.guide-desc { font-size: 0.78rem; color: var(--color-text-secondary); }
.guide-arrow { color: var(--color-text-muted); flex-shrink: 0; }

/* Manage account */
.acct-panel { max-width: 620px; display: flex; flex-direction: column; gap: 1.25rem; }
.acct-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.5rem; }
.acct-card h2 { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.35rem; }
.acct-card p.sub { font-size: 0.88rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.acct-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.acct-field label { font-size: 0.85rem; color: var(--color-text-secondary); font-weight: 500; }
.acct-field input { background: var(--color-bg-tertiary); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 0.9rem; color: var(--color-text); font-size: 0.95rem; }
.acct-field input:focus { outline: none; border-color: var(--color-primary); }
.acct-card.danger { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.03); }
.acct-card.danger h2 { color: #ef4444; display: flex; align-items: center; gap: 0.5rem; }
.danger-list { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0 0 1.1rem; padding-left: 1.1rem; }
.danger-list li { margin-bottom: 0.3rem; }
.danger-confirm-label { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: 0.4rem; }
.danger-confirm-label code { background: var(--color-bg-tertiary); color: #ef4444; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
.btn-danger { background: #ef4444; color: #fff; border: none; opacity: 0.45; pointer-events: none; }
.btn-danger.enabled { opacity: 1; pointer-events: auto; cursor: pointer; }
.acct-actions { margin-top: 0.25rem; }
.view-msg { margin: 0.75rem 0; }

/* ── Home upsell strip (compact tiles under owned plans) ─────────────────── */
.home-empty {
  padding: 1rem 1.25rem;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  max-width: 760px;
}
.home-empty p { margin: 0; }

.upsell-section { margin-top: 1.5rem; max-width: 760px; }
.upsell-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin-bottom: 0.65rem;
}
.upsell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
}
.upsell-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.upsell-tile:hover {
  border-color: color-mix(in srgb, var(--color-border) 45%, var(--color-primary));
  background: color-mix(in srgb, var(--color-bg-secondary) 92%, var(--color-primary));
  transform: translateY(-1px);
}
.upsell-tile-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.upsell-tile-icon svg { width: 16px; height: 16px; opacity: 0.85; }
.upsell-tile-body { flex: 1; min-width: 0; }
.upsell-tile-name { font-size: 0.9rem; font-weight: 600; color: var(--color-text); line-height: 1.25; }
.upsell-tile-price { font-size: 0.72rem; color: var(--color-text-secondary); margin-top: 0.1rem; }
.upsell-tile-arrow { color: var(--color-text-muted); font-size: 1.05rem; flex-shrink: 0; transition: transform 0.15s ease, color 0.15s ease; }
.upsell-tile:hover .upsell-tile-arrow { color: var(--color-primary); transform: translateX(2px); }

/* ── Sidebar polish (subtler active state — accent bar + tint, not solid) ── */
.dashboard-sidebar .nav-item {
  gap: 0.7rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  position: relative;
  border-radius: 8px;
}
.dashboard-sidebar .nav-item svg { width: 16px; height: 16px; }
.dashboard-sidebar .nav-item.active {
  background: rgba(166, 117, 255, 0.12);
  color: var(--color-text);
}
.dashboard-sidebar .nav-item.active svg { color: var(--color-primary); }
.dashboard-sidebar .nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* ── Toast (bottom-right slide-in, auto-dismiss) ─────────────────────────── */
#toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  padding: 10px 14px;
  border-radius: 10px;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 500;
  min-width: 220px;
  max-width: 380px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}
.toast.is-open { opacity: 1; transform: translateY(0); }
.toast-success {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border: 1px solid #15803d;
}
.toast-error {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border: 1px solid #b91c1c;
}
.toast-info {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-light);
  color: var(--color-text);
}

/* ── Reduced motion — respect the OS preference ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .upsell-tile, .plan-card, .dl-row, .toast { transition: none; }
  .upsell-tile:hover, .plan-card:hover, .dl-row:hover { transform: none; }
}

/* ── Keyboard focus rings (a11y) ────────────────────────────────────────────
   Bright accent ring on any interactive element that receives keyboard
   focus. :focus-visible (not :focus) so mouse clicks don't paint rings. */
main#view :is(button, a, input, textarea, select, [tabindex]):focus-visible,
.dashboard-sidebar .nav-item:focus-visible,
.plan-feats-toggle:focus-visible,
.guide-toc a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Plans page (grouped platform sections + priced tier cards) ──────────── */
.hub-header-tight { margin-bottom: 0; }

/* ── Pre-download acknowledgment panel ──
   Shown on first visit to #/downloads. Three FAQ cards stacked + a T&C
   checkbox gate at the bottom. Vertical rhythm matches the download rows
   so the switch from precheck → actual downloads doesn't feel like a
   different page. */
.dl-prechecks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  max-width: 760px;
}
.dl-precheck-card {
  padding: 1.25rem 1.4rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.dl-precheck-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--color-text-primary);
}
.dl-precheck-card p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
  font-size: 0.95rem;
}
.dl-precheck-card a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--color-primary);
}
.dl-precheck-card a:hover { color: var(--color-primary-light); border-bottom-style: solid; }
.dl-precheck-eyebrow {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: 0.35rem;
}
.dl-precheck-tc {
  margin-top: 0.5rem;
  padding: 1.1rem 1.4rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dl-precheck-tc-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 1.5;
  user-select: none;
}
/* The native input is positioned off-screen but NOT display:none so screen
   readers + keyboard focus still work. The styled .dl-precheck-tc-box sibling
   is what the user actually sees; it reacts to :checked and :focus-visible on
   the input via adjacent-sibling selectors. */
.dl-precheck-tc-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.dl-precheck-tc-box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  border: 1.5px solid var(--color-border-light);
  border-radius: 6px;
  background: var(--color-bg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.dl-precheck-tc-box svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Hover (over the whole label row, since the native box is invisible) */
.dl-precheck-tc-row:hover .dl-precheck-tc-box {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-secondary));
}
/* Checked */
.dl-precheck-tc-input:checked + .dl-precheck-tc-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.dl-precheck-tc-input:checked + .dl-precheck-tc-box svg {
  opacity: 1;
  transform: scale(1);
}
/* Keyboard focus ring (only on explicit keyboard focus, not click) */
.dl-precheck-tc-input:focus-visible + .dl-precheck-tc-box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Active press — subtle squish */
.dl-precheck-tc-row:active .dl-precheck-tc-box {
  transform: scale(0.92);
}
.dl-precheck-tc-label a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
  text-underline-offset: 2px;
}
.dl-precheck-tc-label a:hover { text-decoration-color: var(--color-primary); }
.dl-precheck-tc button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* styles.css sets a bare `section { padding: 4rem 0 }` rule for the marketing
   site's stacked-scroll layout. Our .plan-group uses <section>, so without
   this override each group gets 64px top + 64px bottom padding, creating
   ~130px of dead space between mac / windows / autosolver sections. */
.plan-group { margin-bottom: 0; padding: 0; }
/* All space between sections lives on plan-group-head margin-top so mac,
   windows, and autosolver all get identical breathing room above their
   icon+title (~16px). */
.plan-group-head { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.5rem; margin-bottom: 0.35rem; }
.plan-group-icon { width: 26px; height: 26px; border-radius: 6px; }
.plan-group-icon svg { width: 14px; height: 14px; }
.plan-group-title { font-size: 1.05rem; font-weight: 700; color: var(--color-text); margin: 0; letter-spacing: -0.01em; }

/* padding-top gives the floating ribbon room to hang above the featured card
   without being clipped by the grid box. */
.plan-cards { display: grid; gap: 0.75rem; padding-top: 12px; align-items: start; }
/* align-items: start stops sibling cards from stretching to match the tallest
   row. Without it, expanding Basic's "Requirements" or "View more features"
   also stretched the Pro card alongside it, which visually looked like Pro
   was expanding too. */
.plan-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-cards-1 { grid-template-columns: minmax(0, 520px); }
@media (max-width: 720px) { .plan-cards-2 { grid-template-columns: 1fr; } }

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem 0.95rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
  overflow: visible; /* let the "Most popular" ribbon hang outside the top edge */
}
.plan-card:hover { border-color: color-mix(in srgb, var(--color-border) 50%, var(--color-primary)); }
.plan-card-featured {
  border-color: rgba(166, 117, 255, 0.45);
  background: linear-gradient(180deg, rgba(166, 117, 255, 0.06), var(--color-bg-secondary) 45%);
}
/* Floating chip that sits above the card's top border, centered. */
.plan-card-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: linear-gradient(90deg, var(--color-primary), #9a63f7);
  color: #ffffff;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  box-shadow: 0 6px 18px -6px rgba(166, 117, 255, 0.7);
  white-space: nowrap;
}
.plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.plan-tier { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); }
.plan-price { display: inline-flex; align-items: baseline; color: var(--color-text); }
.plan-price-amt { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; }
.plan-price-per { font-size: 0.85rem; color: var(--color-text-secondary); margin-left: 0.15rem; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.plan-feats-extra { display: none; }
.plan-feats-extra.is-open { display: flex; }
.plan-feats li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; line-height: 1.35; color: var(--color-text); }
.plan-feat-check { color: var(--color-primary); font-weight: 700; flex-shrink: 0; width: 1.05rem; text-align: center; }
.plan-feat-cross { color: #ef4444; font-weight: 700; flex-shrink: 0; width: 1.05rem; text-align: center; }
.plan-feats li.plan-feat-x { color: var(--color-text-secondary); }
.plan-feats-toggle {
  background: transparent;
  color: var(--color-primary);
  border: none;
  padding: 0.15rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.plan-feats-toggle:hover { color: #9a63f7; }
.plan-feats-toggle .arrow { transition: transform 0.15s ease; display: inline-block; font-size: 0.72rem; }
.plan-feats-toggle.open .arrow { transform: rotate(180deg); }
/* .plan-card-tail packs Includes + notice + action + requirements into ONE
   tight bottom block, with margin-top:auto so it sinks to the card's bottom
   (Basic vs Pro cards keep their buttons aligned via the grid's stretch). */
.plan-card-tail {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: auto;
}
/* Full override for .plan-includes — dashboard.css defines a purple-tinted
   box for the legacy purchase page with padding:0.75rem 1rem, a full
   1px purple border, border-radius:10px, AND margin-bottom:1.5rem (that
   was the 24px gap between Includes and the button). We keep the box
   look but reset margin to 0 and tighten padding. */
.plan-includes {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  padding: 0.55rem 0.8rem;
  margin: 0;
  background: rgba(166, 117, 255, 0.08);
  border: 1px solid rgba(166, 117, 255, 0.15);
  border-radius: 10px;
}
.plan-includes strong { color: var(--color-text); font-weight: 600; }
.plan-notice { font-size: 0.78rem; padding: 0.5rem 0.7rem; border-radius: 8px; line-height: 1.4; }
.plan-notice-warn { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.28); color: #fca5a5; }
.plan-card-foot { display: flex; justify-content: center; margin-top: 0; }

/* Shared button used by plans + downloads (subscribe-family) */
.plan-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  width: 100%;
}
.plan-action-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 14px -4px rgba(166, 117, 255, 0.5);
}
.plan-action-primary:hover { background: #9a63f7; transform: translateY(-1px); }
.plan-action-primary:disabled { opacity: 0.55; pointer-events: none; }
.plan-action-disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: not-allowed;
}
.plan-action-active {
  /* Match .plan-action-disabled ("Included with Pro") — same tertiary bg + secondary
     text + border, inherits font-size/weight from .plan-action so the two disabled
     button states read as one visual family instead of the old shouty uppercase pill. */
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  cursor: default;
  box-shadow: none;
}
.plan-action-active:disabled { opacity: 1; pointer-events: none; }

.plan-reqs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* left button | centered pills | spacer */
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.plan-reqs-left {
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.plan-reqs-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.plan-reqs-right { /* empty balancer column so the pills stay centered */ }
.plan-req {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Expandable requirements ──
   Toggle button mirrors .plan-feats-toggle: plain purple text + chevron,
   sits inline with the compact .plan-req pills. The collapsible dl drops
   below the pills row with a flat label/value grid. */
/* Mirrors .plan-feats-toggle exactly: sentence case, no letter-spacing,
   same font-size/weight, so the two toggles feel like one pattern. */
.plan-reqs-toggle {
  background: transparent;
  color: var(--color-primary);
  border: none;
  padding: 0.15rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.plan-reqs-toggle:hover { color: var(--color-primary-light); }
.plan-reqs-toggle .arrow {
  display: inline-block;
  font-size: 0.72rem;
  transition: transform 0.15s ease;
}
.plan-reqs-toggle.open .arrow { transform: rotate(180deg); }
.plan-reqs-details {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.plan-reqs-details[hidden] { display: none; }
.plan-reqs-details-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.plan-reqs-details-row dt {
  color: var(--color-text-secondary);
  font-weight: 600;
}
.plan-reqs-details-row dd {
  color: var(--color-text-primary);
  margin: 0;
  font-weight: 400;
}
@media (max-width: 520px) {
  .plan-reqs-details-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Downloads page (row-strip layout: one row per owned download) ───────── */
.dl-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 820px;
}
.dl-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.dl-row:hover { border-color: color-mix(in srgb, var(--color-border) 50%, var(--color-primary)); }
.dl-row-icon { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.dl-row-icon svg { width: 22px; height: 22px; }
.dl-row-body { flex: 1; min-width: 0; }
.dl-row-name { font-size: 0.98rem; font-weight: 600; color: var(--color-text); line-height: 1.25; }
.dl-row-meta { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.25rem; flex-wrap: wrap; }
.dl-row-platform { font-size: 0.78rem; color: var(--color-text-secondary); }
.dl-row-app {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-primary);
  padding: 0.14rem 0.45rem;
  background: rgba(166, 117, 255, 0.1);
  border: 1px solid rgba(166, 117, 255, 0.3);
  border-radius: 999px;
}
/* Two side-by-side arch buttons on the Windows row when UA-CH detection failed
   (Firefox / Safari / older browsers). Stacks vertically on narrow screens. */
.dl-arch-picker { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dl-arch-picker .dl-row-btn { flex: 1 1 auto; min-width: 140px; }
@media (max-width: 500px) {
  .dl-arch-picker { flex-direction: column; width: 100%; }
  .dl-arch-picker .dl-row-btn { width: 100%; }
}
.dl-row-ver {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  padding: 0.14rem 0.5rem;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.01em;
}
.dl-row-foot { flex-shrink: 0; }
.dl-row-btn { width: auto; padding: 0.55rem 1rem; font-size: 0.85rem; }
.dl-row-soon {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  padding: 0.5rem 0.85rem;
  background: var(--color-bg-tertiary);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-style: italic;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .dl-row { flex-wrap: wrap; }
  .dl-row-foot { width: 100%; }
  .dl-row-btn { width: 100%; }
}
.dl-empty {
  max-width: 480px;
  margin: 2rem auto;
  padding: 2.25rem 1.5rem;
  text-align: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
}
.dl-empty-icon {
  width: 52px; height: 52px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: 12px;
  color: var(--color-text-secondary);
}
.dl-empty-icon svg { width: 24px; height: 24px; }
.dl-empty-title { font-size: 1.05rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.35rem; }
.dl-empty-desc { font-size: 0.9rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
.dl-empty .plan-action { display: inline-flex; width: auto; padding: 0.6rem 1.15rem; text-decoration: none; }

/* ============================================================
   Partner Dashboard (Phase 3) — Overview / Buy / Codes / Analytics
   Scoped exclusively via .partner-* class names so there is zero
   bleed into other dashboard views. Design tokens inherited from
   dashboard.css + styles.css (no new color variables).
   ============================================================ */

/* Force-hide Partner sidebar elements when the [hidden] attribute is set.
   `.nav-item { display: flex }` from dashboard.css:88 would otherwise win
   over the UA stylesheet's `[hidden]{display:none}`, leaking the Partner
   section to every user before /api/user/my-roles returns. */
[data-partner-only][hidden] { display: none !important; }

/* Revoke button inside the partner codes table needs to be live by default.
   Global `.btn-danger` (dashboard-app.css:114) is deliberately dimmed with
   pointer-events:none unless `.enabled` is also present — that pattern is
   for arm-then-confirm destructive buttons elsewhere. In the partner codes
   view the native confirm() dialog provides the two-step guard, so re-enable
   pointer events scoped to the partner table only. */
.partner-table .btn-danger {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.partner-table .btn-danger:disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

.partner-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1.75rem;
}
.partner-stat {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.partner-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.partner-stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.partner-section-head {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1.5rem 0 0.75rem;
}

.partner-table-wrap { overflow-x: auto; }
.partner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.partner-table th,
.partner-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
.partner-table th {
  background: var(--color-bg-tertiary);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.partner-table tbody tr:last-child td { border-bottom: none; }
.partner-table .partner-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  color: var(--color-text);
}

.partner-status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: lowercase;
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}
.partner-status-active,
.partner-status-redeemed { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.partner-status-unredeemed { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.partner-status-revoked,
.partner-status-revoked_dispute,
.partner-status-expired,
.partner-status-cut { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.partner-status-grandfathered,
.partner-status-disputed { background: rgba(99, 102, 241, 0.15); color: #4f46e5; }

.partner-form {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.partner-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.partner-field-inline { flex-direction: row; align-items: center; gap: 0.6rem; }
.partner-field-label {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.partner-form select,
.partner-form input[type="number"] {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: 0.95rem;
}

.partner-codes-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}
.partner-codes-footer {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.partner-codes-count {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.partner-empty-cell {
  text-align: center;
  color: var(--color-text-secondary);
  padding: 1.5rem !important;
  font-style: italic;
}
.partner-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  max-width: 480px;
  margin: 2rem auto;
}
.partner-empty p { margin-bottom: 1rem; }

.btn-small {
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

.partner-histogram {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 440px;
}
.partner-histogram li {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.9rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.partner-hist-bucket { color: var(--color-text-secondary); font-size: 0.9rem; }
.partner-hist-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); }

@media (max-width: 620px) {
  .partner-codes-controls { flex-direction: column; align-items: stretch; }
  .partner-field-inline { flex-direction: column; align-items: stretch; }
  .partner-table th,
  .partner-table td { padding: 0.5rem 0.6rem; font-size: 0.85rem; }
  .partner-actions .btn { flex: 1; min-width: 140px; }
}

/* Partner Downloads grid — three cards (Mac v1, Mac v3, Windows).
   Cards fill a 3-up grid on wide screens, stack to one column on mobile. */
.partner-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
}
.partner-download-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.partner-download-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-sm);
}
.partner-download-label {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.partner-download-platform {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}
.partner-download-meta {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    word-break: break-all;
}
.partner-download-empty {
    font-style: italic;
    color: var(--color-text-faint, var(--color-text-muted));
}
.partner-download-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.partner-download-actions .btn {
    width: 100%;
}
.partner-download-card .partner-download-meta + .partner-download-meta {
    margin-top: 2px;
}