/* cherry brand theme · overrides basecoat (:root) design tokens.
   MUST be linked AFTER the basecoat CDN stylesheet so these win on equal
   specificity. Scratch preview only (branch p2-portal-preview). */

:root {
  /* primary = Cartier-style deep cherry (≈ Pantone 187C). White text on this
     is ~7.5:1 → WCAG AA & AAA. */
  --primary: #a6192e;
  --primary-foreground: #ffffff;
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

  /* destructive = vermilion (brighter / more orange) so danger reads distinctly
     from the cherry brand at a glance. White text ~4.8:1 → WCAG AA. */
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --color-destructive: var(--destructive);

  /* focus ring derived from the brand */
  --ring: #a6192e;
  --color-ring: var(--ring);
}

/* primary button hover / active = one notch deeper cherry */
.btn:hover, .btn-primary:hover { background-color: #8c1428; }
.btn:active, .btn-primary:active { background-color: #76101f; }

/* destructive button hover / active = deeper vermilion */
.btn-destructive:hover { background-color: #b91c1c; }
.btn-destructive:active { background-color: #991b1b; }

/* link-style button uses the brand colour */
.btn-link { color: #a6192e; }

/* ── semantic status pills (all payout states) ──
   mirror the basecoat .badge shape, add a per-state colour. span.* keeps
   specificity above basecoat's single-class .badge-* variants. */
span.badge-received { background-color: #2563eb; color: #fff; border-color: transparent; }  /* blue · queued */
span.badge-warning  { background-color: #d97706; color: #fff; border-color: transparent; }  /* amber · processing */
span.badge-success  { background-color: #16a34a; color: #fff; border-color: transparent; }  /* green · succeeded */
span.badge-stuck    { background-color: #7c3aed; color: #fff; border-color: transparent; }  /* violet · stuck */
/* FAILED reuses basecoat .badge-destructive (vermilion) */

/* helpers built on basecoat tokens */
.muted { color: var(--color-muted-foreground); }
dt.muted { font-weight: 400; }
.border-subtle { border: 1px solid var(--color-border); }
.swatch { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* right-side drawer = native <dialog>.dialog repositioned as a full-height sheet */
.dialog.drawer { margin: 0 0 0 auto; width: min(28rem, 92vw); max-width: 92vw;
                 height: 100dvh; max-height: 100dvh; border-radius: 0; }
.dialog.drawer > article { height: 100%; max-height: 100dvh; border-radius: 0;
                           display: flex; flex-direction: column; }
.dialog.drawer > article > section { flex: 1 1 auto; overflow-y: auto; }

/* ── cherry portal shell · nav ── */
.cherry-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--color-border);
  background: var(--color-background); }
.cherry-brand { font-weight: 700; font-size: 1.15rem; color: var(--primary);
  text-decoration: none; letter-spacing: -.01em; }
.cherry-nav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.cherry-nav a { padding: .4rem .7rem; border-radius: .5rem; text-decoration: none;
  color: var(--color-muted-foreground); font-size: .9rem; line-height: 1.2; }
.cherry-nav a:hover { background: #f4f4f5; color: var(--color-foreground); }
.cherry-nav a.active { background: var(--primary); color: var(--primary-foreground); }
.cherry-spacer { flex: 1 1 auto; }
.cherry-client { color: var(--color-muted-foreground); font-size: .85rem; }

/* ── app shell (fin-style sidebar layout) ── */
.app-body { margin: 0; display: flex; min-height: 100dvh; background: #fafafa; }
.app-sidebar { width: 14rem; flex: 0 0 14rem; background: #fff;
  border-right: 1px solid var(--color-border); padding: 1rem .75rem;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; }
.app-sidebar-footer { margin-top: auto; padding-top: 1rem; }
.app-sidebar-footer .app-navitem { color: var(--color-muted-foreground); }
.app-sidebar-footer .app-navitem:hover { color: var(--destructive); }
.app-brand { display: block; font-weight: 700; font-size: 1.25rem; color: var(--primary);
  text-decoration: none; padding: .25rem .5rem 1rem; letter-spacing: -.01em; }
.app-nav { display: flex; flex-direction: column; gap: 1rem; }
.app-navsec { display: flex; flex-direction: column; gap: .1rem; }
.app-navsec-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-muted-foreground); padding: 0 .5rem .15rem; margin: 0; }
.app-navitem { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem;
  border-radius: .5rem; text-decoration: none; color: var(--color-foreground); font-size: .9rem; }
.app-navitem:hover { background: #f4f4f5; }
.app-navitem.active { background: var(--primary); color: var(--primary-foreground); }
.app-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.app-content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.app-main { padding: 1.5rem 2rem; max-width: 80rem; width: 100%; }

/* test-env banner (amber) */
.test-banner { display: flex; align-items: center; gap: .5rem; background: #fffbeb;
  color: #92400e; border-bottom: 1px solid #fcd34d; padding: .6rem 2rem; font-size: .875rem; }
.test-banner-icon { font-size: 1rem; }

/* welcome header */
.welcome-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.welcome-row h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.flag-badge { display: inline-flex; align-items: center; gap: .35rem; background: #f4f4f5;
  border: 1px solid var(--color-border); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }

/* stat cards */
.stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.stat-card { position: relative; background: #fff; border: 1px solid var(--color-border);
  border-radius: .75rem; overflow: hidden; }
.stat-card-bar { height: 4px; background: var(--accent); }
.stat-card-body { padding: 1rem 1.1rem; }
.stat-card-icon { width: 2.25rem; height: 2.25rem; border-radius: .6rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-bottom: .6rem; }
.stat-card-icon .app-icon { width: 1.25rem; height: 1.25rem; }
.stat-card-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card-label { font-size: .85rem; color: var(--color-muted-foreground); margin-top: .15rem; }
.stat-card-note { color: #b45309; }

/* donut (pure CSS conic-gradient ring) */
.donut-card-body { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.donut { width: 8.5rem; height: 8.5rem; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--fill) calc(var(--pct) * 1%), #e5e7eb 0); display: grid; place-items: center; }
.donut-hole { width: 6rem; height: 6rem; border-radius: 50%; background: #fff;
  display: grid; place-items: center; text-align: center; }
.donut-pct { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.donut-sub { font-size: .7rem; color: var(--color-muted-foreground); }
.donut-legend { display: grid; grid-template-columns: repeat(2, auto); gap: .3rem 1.5rem; margin: 0; }
.donut-legend dt { font-size: .75rem; color: var(--color-muted-foreground); }
.donut-legend dd { margin: 0; font-weight: 600; }

/* tabs */
.tabbar { display: flex; gap: .25rem; border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem; flex-wrap: wrap; }
.tab { padding: .5rem .85rem; text-decoration: none; color: var(--color-muted-foreground);
  font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--color-foreground); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* vertical stepper */
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stepper-step { display: flex; gap: .75rem; padding-bottom: 1.1rem; position: relative; }
.stepper-step:not(:last-child)::before { content: ""; position: absolute; left: .85rem;
  top: 1.9rem; bottom: 0; width: 2px; background: var(--color-border); }
.stepper-dot { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; z-index: 1; }
.stepper-title { font-weight: 600; margin: .15rem 0 0; }
.stepper-desc { font-size: .85rem; margin: .1rem 0 0; }

/* settings layout helpers */
.settings-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
.pw-reqs { font-size: .8rem; color: var(--color-muted-foreground); margin: .25rem 0 0; padding-left: 1rem; }

/* 待适配 callout */
.adapt-note { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  padding: .6rem .9rem; border-radius: .6rem; font-size: .85rem; margin-bottom: 1.25rem; }

/* IP allowlist tag/chip input (visual) */
.tag-input { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  border: 1px solid var(--color-border); border-radius: .5rem; padding: .5rem; min-height: 2.5rem; }
.tag-chip { display: inline-flex; align-items: center; gap: .35rem; background: #f4f4f5;
  border: 1px solid var(--color-border); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; }
.tag-chip button { border: 0; background: none; cursor: pointer; color: var(--color-muted-foreground); font-size: .9rem; line-height: 1; }
.tag-input input { border: 0; outline: none; flex: 1 1 8rem; min-width: 8rem; background: transparent; font-size: .9rem; }

/* settings key/value rows */
.kv-row { display: grid; grid-template-columns: 8rem 1fr auto; gap: .75rem; align-items: center;
  padding: .6rem 0; border-bottom: 1px solid var(--color-border); }
.kv-row:last-child { border-bottom: 0; }
.kv-row .kv-label { color: var(--color-muted-foreground); font-size: .85rem; }
.kv-row code { font-size: .8rem; word-break: break-all; }

/* split login */
.login-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.login-art { background: linear-gradient(150deg, #76101f 0%, var(--primary) 55%, #c8324a 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 3rem; gap: 1rem; }
.login-art-brand { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; }
.login-art-tag { font-size: 1.05rem; opacity: .9; max-width: 26rem; line-height: 1.6; }
.login-art-mark { margin-top: auto; opacity: .7; font-size: .8rem; }
.login-form-pane { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.login-form-pane .card { width: 100%; max-width: 22rem; }
/* 生产环境 2FA 占位块 · 测试环境视觉弱化(纯 UI) */
.login-2fa { border: 1px dashed var(--border); border-radius: var(--radius); padding: .75rem; display: grid; gap: .5rem; opacity: .75; }
.login-2fa-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
@media (max-width: 800px) { .login-split { grid-template-columns: 1fr; } .login-art { display: none; } }