/* Aurora theme — visual layer inspired by yunwu.ai.
   Loaded last in index.html (after workspace-theme.css).

   IMPORTANT: every workspace rule below is prefixed with `.app-layout` so that it
   matches the specificity used by workspace-theme.css (.app-layout X = 0,2,0).
   Bare `.panel` / `.btn-primary` rules lose to `.app-layout .panel` and silently do nothing.

   Rollback: delete the <link rel="stylesheet" href="/theme-aurora.css"> line in index.html. */

:root {
  /* Accent ramp: Sanniao cyan (brand) -> indigo */
  --aurora-1: #00a6e8;
  --aurora-2: #3f8af5;
  --aurora-3: #5b6ef5;
  /* Filled surfaces always carry white text, so every stop must clear WCAG AA
     (>=4.5:1 against white). The brand cyans above are too light for that and
     stay reserved for decorative/gradient-text use; this ramp is the CTA-safe
     counterpart (4.98 / 5.16 / 5.54:1). */
  --aurora-cta-1: #0a72c4;
  --aurora-cta-2: #1f6ad4;
  --aurora-cta-3: #3a5fd6;
  --aurora-gradient: linear-gradient(120deg, var(--aurora-cta-1) 0%, var(--aurora-cta-2) 52%, var(--aurora-cta-3) 100%);
  --aurora-gradient-soft: linear-gradient(120deg, #e6f6fe 0%, #eaefff 100%);
  /* Hero headings are large text, so the floor is 3:1 — the original cyan end
     sat at 2.85:1. */
  --aurora-gradient-text: linear-gradient(100deg, #0090cd 0%, #3481ee 55%, #6359ef 100%);
  --aurora-sheen: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 100%);

  /* Surfaces */
  --aurora-canvas: #f5f6fd;
  --aurora-glass: rgba(255, 255, 255, .72);
  --aurora-glass-strong: rgba(255, 255, 255, .88);
  --aurora-hairline: rgba(101, 116, 168, .13);
  --aurora-hairline-soft: rgba(101, 116, 168, .075);

  /* Depth */
  --aurora-shadow-sm: 0 1px 2px rgba(84, 100, 176, .05), 0 4px 14px -6px rgba(84, 100, 176, .10);
  --aurora-shadow: 0 1px 2px rgba(84, 100, 176, .05), 0 14px 34px -14px rgba(84, 100, 176, .18);
  --aurora-shadow-lg: 0 2px 4px rgba(84, 100, 176, .05), 0 28px 60px -24px rgba(84, 100, 176, .26);
  --aurora-ring: 0 0 0 3px rgba(63, 138, 245, .16);

  /* Geometry */
  --aurora-radius-card: 18px;
  --aurora-radius-control: 11px;
  --aurora-radius-pill: 999px;

  /* Re-point the existing token layer at the new palette. */
  --radius: var(--aurora-radius-card);
  --radius-control: var(--aurora-radius-control);
  --shadow: var(--aurora-shadow-sm);
  --surface-canvas: var(--aurora-canvas);
  --surface-subtle: #f7f9fd;
  --surface-accent: #eaf3fe;
  --border-default: var(--aurora-hairline);
  --border-subtle: var(--aurora-hairline-soft);
  --border-control: rgba(101, 116, 168, .20);
  --brand-blue: var(--aurora-1);
  --brand: var(--aurora-1);
  --brand-sky: #a9dcf7;
  /* --brand-strong is only ever consumed as `color:` (195 uses), so it has to
     clear AA on white and on the tinted surfaces: #1a63c4 = 5.79:1 on white,
     5.17:1 on --surface-accent. The previous #2b7ef0 was 3.93:1. */
  --brand-strong: #1a63c4;
  --brand-display: #1a63c4;
  --brand-focus: #3f8af5;
  --brand-hover: #22b4ef;
  --border-brand: #bcd9fb;
  /* Fallback fill for primary buttons outside .app-layout — white label, so AA. */
  --action-primary: #1f6ad4;
  --action-primary-hover: #1a63c4;
  --text-primary: #1f2733;
  --text-secondary: #5b6675;
  --ease: cubic-bezier(.22, .68, .24, 1);
}

/* =========================================================
   Canvas
   ========================================================= */
body {
  background:
    radial-gradient(1100px 560px at 8% -12%, rgba(0, 166, 232, .10) 0%, transparent 62%),
    radial-gradient(980px 520px at 92% -6%, rgba(107, 99, 240, .11) 0%, transparent 64%),
    radial-gradient(800px 600px at 50% 108%, rgba(63, 138, 245, .07) 0%, transparent 60%),
    var(--aurora-canvas);
  background-attachment: fixed;
}

body:has(.app-layout) {
  padding: 14px;
  background:
    radial-gradient(1200px 600px at 10% -14%, rgba(0, 166, 232, .12) 0%, transparent 62%),
    radial-gradient(1000px 560px at 94% -8%, rgba(107, 99, 240, .13) 0%, transparent 64%),
    radial-gradient(900px 640px at 52% 110%, rgba(63, 138, 245, .07) 0%, transparent 62%),
    var(--aurora-canvas);
  background-attachment: fixed;
}

/* =========================================================
   App shell
   ========================================================= */
.app-layout {
  background: var(--aurora-glass-strong);
  border: 1px solid var(--aurora-hairline);
  border-radius: 22px;
  box-shadow: var(--aurora-shadow-lg);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  grid-template-columns: 238px minmax(0, 1fr);
}

.app-layout .sidebar {
  top: 15px;
  height: calc(100dvh - 30px);
  padding: 26px 13px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(246, 249, 255, .66) 100%);
  border-right: 1px solid var(--aurora-hairline-soft);
  border-radius: 21px 0 0 21px;
}

.app-layout .sidebar-brand { padding: 0 12px 20px; }

.app-layout .brand-caption::before {
  background: var(--aurora-gradient);
  border-radius: var(--aurora-radius-pill);
}

/* Nav: pill items, gradient when active */
.app-layout .nav-link {
  border-radius: var(--aurora-radius-control);
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}

.app-layout .nav-link:not(.active):hover {
  background: rgba(63, 138, 245, .085);
  color: var(--brand-strong);
}

.app-layout .nav-link.active {
  background: var(--aurora-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(43, 126, 240, .70), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.app-layout .nav-link.active > svg { color: #fff; }
.app-layout .nav-link.active::after { background: rgba(255, 255, 255, .9); }

.app-layout .nav-section { border-radius: var(--aurora-radius-control); }
.app-layout .nav-section:hover { background: rgba(63, 138, 245, .075); }

.app-layout .sidebar-bottom { border-top: 1px solid var(--aurora-hairline-soft); }

.app-layout .avatar {
  background: var(--aurora-gradient);
  color: #fff;
  box-shadow: 0 5px 14px -7px rgba(43, 126, 240, .65);
}

/* Topbar: frosted glass */
.app-layout .topbar {
  height: 68px;
  background: rgba(255, 255, 255, .62);
  border-bottom: 1px solid var(--aurora-hairline-soft);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
}

.app-layout .topbar select,
.app-layout .topbar input {
  border-radius: var(--aurora-radius-control);
  border-color: var(--aurora-hairline);
  background: rgba(255, 255, 255, .82);
  transition: box-shadow .16s var(--ease), border-color .16s var(--ease);
}

.app-layout .topbar select:focus,
.app-layout .topbar input:focus {
  border-color: var(--brand-focus);
  box-shadow: var(--aurora-ring);
  outline: 0;
}

.app-layout .topbar .icon-button {
  border-radius: var(--aurora-radius-control);
  transition: background .16s var(--ease), color .16s var(--ease);
}

.app-layout .topbar .icon-button:hover {
  background: rgba(63, 138, 245, .10);
  color: var(--brand-strong);
}

.app-layout .icon-button { border-radius: var(--aurora-radius-control); }
.app-layout .icon-button:hover { background: rgba(63, 138, 245, .10); }

/* =========================================================
   Buttons
   ========================================================= */
.app-layout .btn {
  border-radius: var(--aurora-radius-pill);
  padding: 9px 18px;
  transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}

.app-layout .btn-primary {
  background: var(--aurora-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(43, 126, 240, .80), inset 0 1px 0 rgba(255, 255, 255, .20);
}

.app-layout .btn-primary:hover {
  background: linear-gradient(120deg, #0a6cb8 0%, #1c63c9 52%, #3557ca 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(43, 126, 240, .92);
}

.app-layout .btn-secondary,
.app-layout .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) {
  background: rgba(255, 255, 255, .80);
  border-color: var(--aurora-hairline);
}

.app-layout .btn-secondary:hover,
.app-layout .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover {
  background: #fff;
  border-color: rgba(63, 138, 245, .38);
  box-shadow: var(--aurora-shadow-sm);
}

.app-layout .btn:active:not(:disabled) { transform: translateY(1px); }

.app-layout button:focus-visible,
.app-layout a:focus-visible,
.app-layout input:focus-visible,
.app-layout select:focus-visible,
.app-layout textarea:focus-visible {
  outline: 3px solid rgba(63, 138, 245, .30);
  outline-offset: 2px;
}

/* =========================================================
   Surfaces
   ========================================================= */
.app-layout .panel,
.app-layout .stat {
  border-radius: var(--aurora-radius-card);
  border-color: var(--aurora-hairline);
  background: var(--aurora-glass-strong);
  box-shadow: var(--aurora-shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.app-layout .panel { overflow: hidden; }

.app-layout .panel:hover,
.app-layout .stat:hover { box-shadow: var(--aurora-shadow); }

.app-layout .panel-head {
  border-bottom: 1px solid var(--aurora-hairline-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, 0));
}

.app-layout .stat { padding: 20px 22px; }

.app-layout .stat::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: var(--aurora-radius-pill);
  background: var(--aurora-gradient);
  margin-bottom: 14px;
  opacity: .9;
}

.app-layout .stat strong {
  font-size:var(--font-metric);
  font-weight:600;
  letter-spacing: -.03em;
}

.app-layout .page-head h1 { font-weight:600; letter-spacing: -.015em; }

.app-layout .welcome {
  border-radius: var(--aurora-radius-card);
  border: 1px solid var(--aurora-hairline);
  background:
    radial-gradient(560px 260px at 88% -30%, rgba(107, 99, 240, .13) 0%, transparent 66%),
    radial-gradient(460px 240px at 4% 120%, rgba(0, 166, 232, .13) 0%, transparent 62%),
    var(--aurora-glass-strong);
  box-shadow: var(--aurora-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

.app-layout .welcome::after {
  border-color: rgba(63, 138, 245, .07);
  box-shadow: 0 0 0 25px rgba(63, 138, 245, .035);
}

/* Signature accent: gradient keyword on hero headings */
.app-layout .welcome h2,
.auth-copy h1 > span {
  background: var(--aurora-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.app-layout .workspace-footer { border-top: 1px solid var(--aurora-hairline-soft); }

/* =========================================================
   Forms
   ========================================================= */
.app-layout .field input:not([type=checkbox]),
.app-layout .field select,
.app-layout .field textarea,
.app-layout .search-box input {
  border-radius: var(--aurora-radius-control);
  border-color: var(--aurora-hairline);
  background: rgba(255, 255, 255, .84);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}

.app-layout .field input:not([type=checkbox]):focus,
.app-layout .field select:focus,
.app-layout .field textarea:focus,
.app-layout .search-box input:focus {
  border-color: var(--brand-focus);
  outline: 0;
  box-shadow: var(--aurora-ring);
  background: #fff;
}

.app-layout .search-box input { border-radius: var(--aurora-radius-pill); }

/* =========================================================
   Tabs, badges, chips
   ========================================================= */
.app-layout .tab { border-radius: var(--aurora-radius-pill); }
.app-layout .tab:hover { background: rgba(63, 138, 245, .085); color: var(--brand-strong); }

.app-layout .tab.active {
  background: var(--aurora-gradient);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(43, 126, 240, .75);
  font-weight:600;
}

.app-layout .badge {
  border-radius: var(--aurora-radius-pill);
  padding: 5px 11px;
  font-weight:600;
}

.app-layout .badge.blue { background: var(--aurora-gradient-soft); color: #1a63c4; }

.app-layout .notice {
  border-radius: 13px;
  background: rgba(255, 255, 255, .62);
  border-color: var(--aurora-hairline);
}

/* =========================================================
   Tables
   ========================================================= */
.app-layout .table-scroll { border-radius: 14px; }

.app-layout .records-table thead th,
.app-layout .dashboard-table thead th,
.app-layout .overview-customer-table thead th {
  background: rgba(246, 248, 253, .92);
  color: var(--text-secondary);
  font-weight: 600;
}

.app-layout .records-table tbody tr:hover,
.app-layout .dashboard-table tbody tr:hover,
.app-layout .overview-customer-table tbody tr:hover {
  background: rgba(63, 138, 245, .055);
}

/* =========================================================
   Modal & toast
   ========================================================= */
.app-layout .modal,
.modal {
  border-radius: 20px;
  border-color: var(--aurora-hairline);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--aurora-shadow-lg);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

.modal-backdrop { background: rgba(38, 48, 84, .34); backdrop-filter: blur(3px); }

.modal-head { border-bottom: 1px solid var(--aurora-hairline-soft); }
.modal-footer { border-top: 1px solid var(--aurora-hairline-soft); background: rgba(246, 248, 253, .55); }

#toast .toast,
.toast { border-radius: var(--aurora-radius-pill); box-shadow: var(--aurora-shadow-lg); }

/* =========================================================
   Progress bars
   ========================================================= */
.app-layout progress::-webkit-progress-value,
.app-layout progress::-moz-progress-bar { background: var(--aurora-gradient); }

.app-layout .dh-company-progress progress::-webkit-progress-value,
.app-layout .dh-company-progress progress::-moz-progress-bar,
.app-layout .dv-contract-progress progress::-webkit-progress-value,
.app-layout .dv-contract-progress progress::-moz-progress-bar,
.app-layout .dv-confirmation progress::-webkit-progress-value,
.app-layout .dv-confirmation progress::-moz-progress-bar { background: var(--aurora-gradient); }

.app-layout progress::-webkit-progress-bar { background: var(--border-subtle); }

/* =========================================================
   Auth (public entry) — not under .app-layout, keeps its own scope
   ========================================================= */
.auth-brand {
  background:
    radial-gradient(900px 500px at 22% 78%, rgba(0, 166, 232, .16) 0%, transparent 58%),
    radial-gradient(820px 480px at 88% 6%, rgba(107, 99, 240, .16) 0%, transparent 60%),
    radial-gradient(700px 560px at 55% 50%, rgba(63, 138, 245, .06) 0%, transparent 62%),
    var(--aurora-canvas);
}

.auth-brand::before {
  background: linear-gradient(125deg, transparent 32%, rgba(255, 255, 255, .72) 32.1%, rgba(255, 255, 255, .06) 62%, transparent 62.1%);
  opacity: .7;
}

.auth-brand::after {
  border-color: rgba(63, 138, 245, .14);
  box-shadow: 0 0 0 85px rgba(63, 138, 245, .05), 0 0 0 170px rgba(107, 99, 240, .035);
}

.auth-brand wa-card.auth-card {
  border-radius: 24px;
  border-color: var(--aurora-hairline);
  background: rgba(255, 255, 255, .84);
  box-shadow: var(--aurora-shadow-lg);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.auth-brand .auth-copy h1 { font-weight:500; letter-spacing: -.02em; }

.auth-brand .portal-tabs {
  border-radius: 14px;
  border-color: var(--aurora-hairline);
  background: rgba(246, 248, 253, .82);
}

.auth-brand .portal-tabs a { border-radius: 10px; }

.auth-brand .portal-tabs a.active {
  background: var(--aurora-gradient);
  color: #fff;
  font-weight:600;
  box-shadow: 0 8px 18px -10px rgba(43, 126, 240, .75);
}

.auth-brand .portal-tabs a.active svg { color: #fff; }
.auth-brand .portal-tabs a:hover { color: var(--brand-strong); }
.auth-brand .portal-tabs a.active:hover { color: #fff; }

.auth-brand .auth-card .field input {
  border-radius: var(--aurora-radius-control);
  background: rgba(255, 255, 255, .82);
  border-color: var(--aurora-hairline);
}

.auth-brand .auth-card .field input:focus {
  border-color: var(--brand-focus);
  box-shadow: var(--aurora-ring);
  background: #fff;
}

.auth-brand .auth-card .auth-submit {
  border-radius: var(--aurora-radius-pill);
  background: var(--aurora-gradient);
  box-shadow: 0 12px 26px -13px rgba(43, 126, 240, .88);
  transition: box-shadow .18s var(--ease), transform .12s var(--ease), filter .18s var(--ease);
}

.auth-brand .auth-card .auth-submit:hover {
  background: var(--aurora-gradient);
  filter: brightness(1.05);
  box-shadow: 0 14px 30px -13px rgba(43, 126, 240, .95);
}

.auth-card-topline svg { color: var(--aurora-2); }
.auth-brand .auth-foot { border-top-color: var(--aurora-hairline-soft); }

/* =========================================================
   v3 — component sweep

   v1/v2 themed the shell (app-layout, sidebar, topbar, nav, .btn).
   The ~20 page stylesheets style their own components instead —
   wa-card.dh-panel / .dv-panel / .ap-* / .workflow-* / .dh-* / .gm-* —
   and they hard-code radii and greys that the shell rules never reached.
   Result: 8–10 different corner radii on a single screen.

   These rules normalise every component onto ONE radius scale and ONE
   palette. Load order breaks ties, so mirroring the page's own selector
   shape is enough — no !important anywhere.
   ========================================================= */

/* --- 3.1 Token top-ups ----------------------------------- */
:root {
  /* tokens the page layer consumes but the theme never re-pointed */
  /* #6b7685 was 4.37:1 on --surface-subtle, used at caption size. */
  --text-tertiary: #62707f;
  --brand-graphite: #1f2733;
  --brand-on-blue: #102a38;

  --status-success: #10704f;
  --status-success-border: #bfe5d3;
  --status-success-soft: #eef8f3;
  --status-warning: #8a5c07;
  --status-warning-border: #ecc37c;
  --status-warning-soft: #fff8e9;
  --status-error: #b0434d;
  --status-error-border: #f0cfd3;
  --status-error-soft: #fff2f3;

  /* one radius scale for the whole sweep */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* chart series ramp: brand cyan -> indigo (was cyan / grey / green) */
  --series-1: #00a6e8;
  --series-2: #3f8af5;
  --series-3: #5b6ef5;
  --series-4: #8b7ff2;
  --series-5: #b3a9f8;

  /* Pull Web Awesome's amber ramp into the same palette.
     wa-badge variant="warning" renders yellow-60 border + yellow-40 text,
     which read as a muddy brown against the cool accent. */
  --wa-color-yellow-30: #7a5207;
  --wa-color-yellow-40: #8a5c07;
  --wa-color-yellow-50: #b8801a;
  --wa-color-yellow-60: #d9a441;
  --wa-color-yellow-70: #e5b95f;
  --wa-color-yellow-80: #ecc87e;
  --wa-color-yellow-90: #f7e3b5;
  --wa-color-yellow-95: #fdf5e2;
  --wa-color-neutral-border-quiet: rgba(101, 116, 168, .075);
  --wa-color-neutral-border-normal: rgba(101, 116, 168, .13);
  --wa-color-neutral-border-loud: rgba(101, 116, 168, .22);

  /* Pull Web Awesome's grey ramp onto the same cool axis.
     The vendor ramp sits at hue 274 (violet-grey): --wa-color-neutral-40 = #545868
     drives --wa-color-neutral-on-quiet and --wa-color-text-quiet, so every
     variant="neutral" badge and quiet label rendered a muddy purple-grey next to
     our blue-grey text tokens (--text-secondary #5b6675, hue 215).
     Same lightness steps, hue 215. neutral-40 now clears AA everywhere it is
     used as text: 5.65:1 on white, 5.36:1 on --surface-subtle, 5.04:1 on
     --surface-accent. */
  --wa-color-gray-95: #f5f7fa;
  --wa-color-gray-90: #eaeef3;
  --wa-color-gray-80: #d4dae2;
  --wa-color-gray-70: #b8c0cc;
  --wa-color-gray-60: #9ca6b4;
  --wa-color-gray-50: #808c9d;
  --wa-color-gray-40: #5d6878;
  --wa-color-gray-30: #4c5665;
  --wa-color-gray-20: #3b424d;
  --wa-color-gray-10: #2b303a;
  --wa-color-gray-05: #1e2229;
  --wa-color-neutral-95: #f5f7fa;
  --wa-color-neutral-90: #eaeef3;
  --wa-color-neutral-80: #d4dae2;
  --wa-color-neutral-70: #b8c0cc;
  --wa-color-neutral-60: #9ca6b4;
  --wa-color-neutral-50: #808c9d;
  --wa-color-neutral-40: #5d6878;
  --wa-color-neutral-30: #4c5665;
  --wa-color-neutral-20: #3b424d;
  --wa-color-neutral-10: #2b303a;
  --wa-color-neutral-05: #1e2229;
}

/* --- 3.2 Cards & panels ----------------------------------
   wa-card paints its border on the HOST (1px solid #e4e5e9, r=12px),
   not on ::part(base) — the page's ::part(base) rules are dead code. */
.app-layout wa-card {
  border-color: var(--aurora-hairline);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--aurora-shadow-sm);
}

.app-layout wa-card::part(base) {
  border-color: var(--aurora-hairline);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
}

.app-layout wa-card::part(body) { border-radius: inherit; }

/* metric tiles sit inside a dense grid — a touch tighter */
.app-layout wa-card.dh-metric,
.app-layout wa-card.dv-metric-shell,
.app-layout wa-card.business-metric,
.app-layout .dh-metrics > wa-card,
.app-layout .dv-metrics > wa-card,
.app-layout .business-metrics > * {
  border-radius: var(--r-lg);
  box-shadow: var(--aurora-shadow-sm);
}

.app-layout .business-panel { border-radius: var(--r-lg); }
.app-layout .business-identity-icon { border-radius: var(--r-md); }
.app-layout .business-metric-icon { border-radius: var(--r-md); }

/* --- 3.3 Radii normalisation ----------------------------- */
.app-layout .project-picker-trigger { border-radius: var(--aurora-radius-control); }

.app-layout select,
.app-layout input:not([type=checkbox]):not([type=radio]):not([type=range]),
.app-layout textarea {
  border-radius: var(--aurora-radius-control);
}

.app-layout .field select,
.app-layout .field input,
.app-layout .field textarea { border-radius: var(--aurora-radius-control); }

.app-layout .dh-refresh-button,
.app-layout .ap-source,
.app-layout .tdk-filter,
.app-layout .dv-company-avatar,
.app-layout .workflow-skill-icon,
.app-layout .empty-icon {
  border-radius: var(--r-md);
}

.app-layout .empty-icon { border-radius: var(--r-xl); }

.app-layout .ap-goal-label,
.app-layout .country-marker.compact,
.app-layout .country-identity.compact { border-radius: 6px; }

/* chips / tags / status pills */
.app-layout .workflow-status,
.app-layout .workflow-version,
.app-layout .workflow-action-tags > span,
.app-layout .dh-heading-count,
.app-layout .dh-attention-mark,
.app-layout .dh-company-states > span,
.app-layout .dv-state-dot + span {
  border-radius: var(--r-xs);
}

/* raised sub-blocks */
.app-layout .workflow-status-tabs,
.app-layout .workflow-policy,
.app-layout .workflow-contract-link,
.app-layout .workflow-status-confirm,
.app-layout .workflow-library > .empty,
.app-layout .dh-stage-filters,
.app-layout .dv-view-switch { border-radius: var(--r-md); }

.app-layout .workflow-status-tabs button,
.app-layout .dh-stage-filters > button,
.app-layout .dv-view-switch > button,
.app-layout .dv-filter-tabs > button,
.app-layout .gm-tabs > button,
.app-layout .exec-board-filters > button,
.app-layout .ap-title-cell > button,
.app-layout .tdk-filter {
  border-radius: var(--r-sm);
  transition: background .16s var(--ease), color .16s var(--ease);
}

.app-layout .gm-delegation > button,
.app-layout .gm-rank-row,
.app-layout .gm-tab,
.app-layout [class*="-rank"] > button { border-radius: var(--r-sm); }

/* --- 3.4 Tables ------------------------------------------ */
.app-layout table { border-collapse: separate; border-spacing: 0; }

.app-layout table thead th {
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-weight: var(--font-weight-heading);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--border-default);
}

.app-layout table thead th:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.app-layout table thead th:last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }

.app-layout table tbody tr { transition: background .14s var(--ease); }
.app-layout table tbody tr:hover { background: rgba(63, 138, 245, .045); }
.app-layout table tbody td { border-bottom-color: var(--border-subtle); }

/* --- 3.5 Badges ------------------------------------------ */
.app-layout wa-badge { border-radius: var(--r-pill, 999px); }
.app-layout wa-badge::part(base) { border-radius: 999px; }

/* --- 3.6 Charts ------------------------------------------ */
.app-layout .time-chart-color-0,
.app-layout .time-chart-swatch.time-chart-color-0,
.app-layout .time-chart-bar.time-chart-color-0 { background: var(--series-1); }

.app-layout .time-chart-color-1,
.app-layout .time-chart-swatch.time-chart-color-1,
.app-layout .time-chart-bar.time-chart-color-1 { background: var(--series-2); }

.app-layout .time-chart-color-2,
.app-layout .time-chart-swatch.time-chart-color-2,
.app-layout .time-chart-bar.time-chart-color-2 { background: var(--series-3); }

.app-layout .time-chart-color-3,
.app-layout .time-chart-swatch.time-chart-color-3,
.app-layout .time-chart-bar.time-chart-color-3 { background: var(--series-4); }

.app-layout .time-chart-color-4,
.app-layout .time-chart-swatch.time-chart-color-4,
.app-layout .time-chart-bar.time-chart-color-4 { background: var(--series-5); }

.app-layout .time-chart-bar { border-radius: 3px 3px 0 0; }
.app-layout .time-chart-grid line,
.app-layout .time-chart-canvas line { stroke: var(--border-subtle); }

/* --- 3.7 Stray colours ----------------------------------- */
.app-layout .dv-website,
.app-layout .dv-website span,
.app-layout button.dv-website { color: var(--text-primary); }

.app-layout .workflow-card h3,
.app-layout .workflow-card h3 * { color: var(--text-primary); }

.app-layout .workflow-card,
.app-layout .workflow-card::part(base),
.app-layout .workflow-contract-link,
.app-layout .workflow-policy { border-color: var(--border-default); }

/* --- 3.8 Second radius pass ------------------------------
   Page CSS gives a lot of small inner elements their own radius
   (2/3/4/5/6/7/9/14px). They are the last thing keeping one screen
   from having a single, consistent corner language.
   Rule of thumb: an element nested inside a rounded parent uses
   parent-radius − 3px, so the two curves stay concentric. */

/* inner highlight layer of tab / segmented controls */
.app-layout .tabs > button > span,
.app-layout .dv-filter-tabs > button > span,
.app-layout .exec-board-filters > button > span,
.app-layout .gm-tabs > button > span,
.app-layout .ca-tabs > button > span,
.app-layout .customer-quick-ranges > button > span,
.app-layout .proposal-term-tabs > button > span,
.app-layout [id^="gm-tab-"] > span,
.app-layout [id^="ca-tab-"] > span {
  border-radius: 7px;
}

/* counters, chips and inline badges */
.app-layout .exec-event-count,
.app-layout .ap-priority,
.app-layout .ap-status,
.app-layout .ap-goal-label,
.app-layout .proposal-version,
.app-layout .proposal-catalog-heading > span,
.app-layout .dh-attention-number,
.app-layout .ca-references > button,
.app-layout .ca-peer-qualification,
.app-layout .ca-overlap-track,
.app-layout .dv-website-symbol,
.app-layout .proposal-option-number,
.app-layout .mi-country-rank-main > i,
.app-layout .mi-country-rank-main > i > em,
.app-layout .mi-map-legend i,
.app-layout .mi-legend-range > i,
.app-layout .mi-legend-empty > i { border-radius: var(--r-xs); }

/* country chips + their flag markers share one value
   (marker sits 2px inside the chip so the two curves stay concentric) */
.app-layout .country-identity.compact { border-radius: var(--r-xs); }
.app-layout .country-marker.compact { border-radius: var(--r-xs); }
.app-layout .country-marker.compact > img { border-radius: 6px; }

/* controls sitting in lists, rails and selectors */
.app-layout [id^="ca-dimension-"],
.app-layout .gm-recommendation-countries > button,
.app-layout .proposal-selector > button.proposal-option,
.app-layout .gm-report-management button,
.app-layout ol > li > button,
.app-layout .dv-website { border-radius: var(--r-sm); }

/* raised sub-blocks */
.app-layout .proposal-service-group,
.app-layout .gm-review-bar,
.app-layout .proposal-term-tabs,
.app-layout .table-scroll,
.app-layout ol > li { border-radius: var(--r-md); }

.app-layout .proposal-service-icon,
.app-layout .business-identity .business-identity-icon,
.app-layout td > div.business-identity > span.business-identity-icon { border-radius: var(--r-md); }

/* one table-header treatment everywhere */
.app-layout .workspace table thead th { background: var(--surface-subtle); }

/* --- 3.9 Interaction polish ------------------------------ */
.app-layout a,
.app-layout button,
.app-layout .nav-link,
.app-layout summary { -webkit-tap-highlight-color: transparent; }

.app-layout :focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 2px;
}

.app-layout input:focus-visible,
.app-layout select:focus-visible,
.app-layout textarea:focus-visible {
  outline: 0;
  border-color: var(--brand-focus);
  box-shadow: var(--aurora-ring);
}

.app-layout .btn,
.app-layout .icon-button,
.app-layout .nav-link,
.app-layout .project-picker-trigger,
.app-layout .dh-refresh-button {
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              transform .12s var(--ease);
}

.app-layout .btn-primary:active:not([disabled]),
.app-layout .btn:active:not([disabled]) { transform: translateY(1px); }

/* interactive cards lift very slightly — the only motion in the UI.
   Static containers stay still, so the effect reads as "this is clickable". */
.app-layout wa-card.dh-metric,
.app-layout wa-card.dv-metric-shell,
.app-layout wa-card.business-metric,
.app-layout .dh-metrics > wa-card,
.app-layout .dv-metrics > wa-card,
.app-layout .workflow-card,
.app-layout .dv-website {
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.app-layout wa-card.dh-metric:hover,
.app-layout wa-card.dv-metric-shell:hover,
.app-layout wa-card.business-metric:hover,
.app-layout .dh-metrics > wa-card:hover,
.app-layout .dv-metrics > wa-card:hover,
.app-layout .workflow-card:hover {
  box-shadow: var(--aurora-shadow);
  border-color: var(--border-brand);
}

/* rounded progress bars read as one family with the pills */
.app-layout progress { border-radius: 999px; overflow: hidden; }
.app-layout progress::-webkit-progress-bar { border-radius: 999px; }
.app-layout progress::-webkit-progress-value { border-radius: 999px; }
.app-layout progress::-moz-progress-bar { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .app-layout wa-card,
  .app-layout .panel,
  .app-layout .btn,
  .app-layout .icon-button,
  .app-layout .nav-link,
  .app-layout .project-picker-trigger,
  .app-layout .dh-refresh-button { transition: none; }
}

/* =========================================================
   v3.10 Legal pages (privacy.html / terms.html)

   These live outside .app-layout, so none of the shell rules above
   reach them. legal.css hard-codes a pale blue canvas, a #e3edf3
   border and a #596b79 body colour.
   ========================================================= */
.legal-page {
  background:
    radial-gradient(1100px 560px at 8% -14%, rgba(0, 166, 232, .10) 0%, transparent 62%),
    radial-gradient(980px 520px at 92% -8%, rgba(107, 99, 240, .11) 0%, transparent 64%),
    var(--aurora-canvas);
  background-attachment: fixed;
}

.legal-nav a[aria-current=page] { color: var(--brand-strong); }

.legal-document {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--aurora-hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--aurora-shadow);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.legal-document section + section { border-top: 1px solid var(--border-subtle); }
.legal-document h2 span { color: var(--brand-blue); }
.legal-document p,
.legal-document li { color: var(--text-secondary); }
.legal-document strong { color: var(--text-primary); }
.legal-document a { color: var(--brand-strong); }

.legal-callout {
  background: var(--surface-accent);
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.legal-footer { border-top: 1px solid var(--aurora-hairline); }
.legal-footer a { color: var(--text-secondary); }
.legal-page .eyebrow { color: var(--brand-strong); }

/* =========================================================
   v3.11 AI portal (ai.html)

   A separate document with its own stylesheet; it never had the
   theme applied at all. Same radius scale, same palette.
   ========================================================= */
.ai-header { padding: 27px 0; }

.ai-brand-mark {
  border-radius: var(--r-lg);
  border-color: var(--aurora-hairline);
  box-shadow: var(--aurora-shadow-sm);
}

.ai-board,
.ai-panel {
  border-color: var(--aurora-hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--aurora-shadow-sm);
}

.ai-board-toolbar,
.ai-panel-head { border-bottom-color: var(--border-subtle); }

.ai-board-controls select,
.ai-board-controls input {
  border-radius: var(--aurora-radius-control);
  border-color: var(--aurora-hairline);
  background: var(--surface-raised);
}

.ai-stage-tabs { border-bottom-color: var(--border-subtle); }

.ai-stage-tabs button {
  border-radius: var(--aurora-radius-control);
  transition: background .16s var(--ease), color .16s var(--ease);
}

.ai-stage-tabs button.active {
  background: var(--aurora-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -9px rgba(43, 126, 240, .75);
}

.ai-stage-tabs button.active > span { background: rgba(255, 255, 255, .22); color: #fff; }
.ai-stage-tabs button > span { border-radius: var(--r-xs); }

.ai-task-row { border-bottom-color: var(--border-subtle); }
.ai-task-row:hover,
.ai-task-row.selected { background: var(--surface-accent); }
.ai-task-row.selected { box-shadow: inset 3px 0 0 var(--brand-blue); }

.ai-task-symbol {
  border-radius: var(--r-md);
  border-color: var(--aurora-hairline);
  background: var(--surface-accent);
  color: var(--brand-strong);
}

.ai-badge { border-radius: var(--r-xs); }
.ai-badge.review { background: var(--status-warning-soft); border-color: var(--status-warning-border); color: var(--status-warning); }
.ai-badge.delivered { background: var(--status-success-soft); border-color: var(--status-success-border); color: var(--status-success); }

.ai-pagination { background: var(--surface-subtle); border-top-color: var(--border-subtle); }
.ai-portable { border-radius: var(--aurora-radius-control); border-color: var(--aurora-hairline); background: rgba(255, 255, 255, .7); }
.ai-access-fields { border-radius: var(--r-md); border-color: var(--aurora-hairline); }
.ai-access-secret input,
.ai-access-secret textarea { border-radius: var(--aurora-radius-control); }
.ai-file-label { border-radius: var(--aurora-radius-control); }
pre,
#ai-prompt,
#ai-result-json { border-radius: var(--aurora-radius-control); background: var(--surface-subtle); }

.ai-empty { color: var(--text-secondary); }

/* the AI portal's own login card */
wa-card.ai-login-card,
.ai-login-card {
  border-radius: 22px;
  border-color: var(--aurora-hairline);
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--aurora-shadow-lg);
  backdrop-filter: blur(20px) saturate(165%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
}

.ai-button { border-radius: var(--r-pill); }

/* --- 3.12 Last stragglers ---------------------------------
   Sub-8px radii left on chip-like elements. Nothing structural —
   these are the last values outside the 8/10/11/12/16/18/999 scale. */
.app-layout .ca-relationship,
.app-layout .ca-own-badge,
.app-layout .ca-status,
.app-layout .ap-edition-switch button,
.app-layout .ap-keywords > div,
.app-layout .ap-fact,
.app-layout .ap-publish-summary,
.app-layout .ap-prompt,
.app-layout .ai-badge,
.app-layout .ai-portable,
.app-layout .auth-brand .portal-tabs a,
.app-layout .auth-brand .portal-tabs {
  border-radius: var(--r-xs);
}

.app-layout .ap-fact,
.app-layout .ap-publish-summary,
.app-layout .ap-prompt,
.app-layout .ap-report-picker,
.app-layout .ap-library { border-radius: var(--r-md); }

.app-layout .ca-overlap-track,
.app-layout .ca-overlap-track > span { border-radius: 999px; }

/* =========================================================
   Misc
   ========================================================= */
.app-layout .sidebar-nav { scrollbar-color: rgba(63, 138, 245, .35) transparent; }

::selection { background: rgba(63, 138, 245, .18); color: var(--text-primary); }

/* Keep the print / PDF export view untouched. */
@media print {
  body, body:has(.app-layout) { background: #fff !important; }
  .app-layout { box-shadow: none; border: 0; border-radius: 0; backdrop-filter: none; }
}

/* =========================================================================
   HireFlow 风格试点 · 工作总台统计卡（2026-09-11）
   白底柔影卡 + 彩色图标瓦片 + 大数字 + hover 浮起；四卡四色
   ========================================================================= */
.app-layout wa-card.dh-metric,
.app-layout article.dv-metric{
  background:#fff;
  border:1px solid rgba(31,39,51,.06);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,40,72,.05), 0 10px 26px -14px rgba(16,40,72,.16);
  padding:18px 20px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.app-layout wa-card.dh-metric:hover,
.app-layout article.dv-metric:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(16,40,72,.06), 0 16px 34px -14px rgba(16,40,72,.22);
}
.app-layout wa-card.dh-metric[data-active="true"]{border-color:rgba(43,126,240,.38)}

/* 顶行：图标瓦片在左、标签在右 */
.app-layout .dh-metric>div:first-child{display:flex;align-items:center;gap:10px}
/* .dv-metric 的顶行必须保持 display:contents：它的 svg/span 靠 dashboard-workspace.css
   的 grid-column/grid-row 定位到 39px 图标列与文本列。改成 flex 会把标签挤进那 39px
   列里竖排，并压到大数字上（-Aurora 主题引入的回归）。 */
.app-layout .dv-metric .dv-metric-top{display:contents}
.app-layout .dh-metric>div:first-child>span,
.app-layout .dv-metric .dv-metric-top>span{order:2;font-size:var(--font-caption);font-weight:600;color:var(--text-secondary);letter-spacing:.01em}
.app-layout .dh-metric>div:first-child>svg,
.app-layout .dv-metric .dv-metric-top>svg{
  order:1;flex:0 0 auto;width:36px;height:36px;padding:9px;border-radius:12px;box-sizing:border-box;
  background:var(--tile-bg,#e8f1fe);color:var(--tile-fg,#2b7ef0);
}

/* 大数字 + 副文 */
.app-layout .dh-metric>strong,
.app-layout .dv-metric>strong{display:block;margin-top:10px;font-size:27px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--text-primary)}
.app-layout .dh-metric>p,
.app-layout .dv-metric>p{margin-top:3px;font-size:var(--font-caption);color:var(--text-tertiary)}

/* 四卡四色（HireFlow 色板，与 Aurora 协调） */
.app-layout .dh-metrics>:nth-child(1){--tile-bg:#e8f1fe;--tile-fg:#2b7ef0}
.app-layout .dh-metrics>:nth-child(2){--tile-bg:#e6f7ef;--tile-fg:#16a34a}
.app-layout .dh-metrics>:nth-child(3){--tile-bg:#f1eafe;--tile-fg:#7c5cf0}
.app-layout .dh-metrics>:nth-child(4){--tile-bg:#fef3e2;--tile-fg:#d97706}
.app-layout .dv-metrics .dv-metric-shell:nth-child(1){--tile-bg:#e8f1fe;--tile-fg:#2b7ef0}
.app-layout .dv-metrics .dv-metric-shell:nth-child(2){--tile-bg:#e6f7ef;--tile-fg:#16a34a}
.app-layout .dv-metrics .dv-metric-shell:nth-child(3){--tile-bg:#f1eafe;--tile-fg:#7c5cf0}
.app-layout .dv-metrics .dv-metric-shell:nth-child(4){--tile-bg:#fef3e2;--tile-fg:#d97706}

/* =========================================================================
   行内动作药丸 v2（2026-09-11）：升级选择器优先级（0,6,1）压过
   customers-workspace 的 .business-panel.customer-directory .records-table 链
   主动作=品牌浅蓝药丸；次动作=中性描边药丸
   ========================================================================= */
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn-text,
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn-text{
  padding:5px 13px;min-height:32px;border-radius:999px;
  background:#e8f1fe;border:1px solid rgba(26,99,196,.22);
  color:var(--brand-strong);font-weight:var(--font-weight-control);font-size:var(--font-control);letter-spacing:normal;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn-text:hover,
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn-text:hover{
  background:#d9e9fd;border-color:rgba(26,99,196,.38);transform:translateY(-1px);
}
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn-secondary{
  padding:5px 13px;min-height:32px;border-radius:999px;background:#fff;
  border:1px solid rgba(31,39,51,.14);color:var(--text-secondary);font-weight:var(--font-weight-control);font-size:var(--font-control);
  transition:border-color .15s ease,color .15s ease,transform .12s ease;
}
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn-secondary:hover{
  border-color:rgba(31,39,51,.3);color:var(--text-primary);transform:translateY(-1px);
}
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn,
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn{
  display:inline-flex;min-height:32px;white-space:nowrap;margin:3px 8px 3px 0}

/* =========================================================================
   药丸图标（2026-09-11）：行内动作按钮带语义图标
   查看=眼睛 / 完善=笔 / 补联系人=加用户 / 分配开户=加圈 / 核对=对勾圈
   ========================================================================= */
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn::before,
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn::before{
  content:"";flex:0 0 auto;width:14px;height:14px;background:center/contain no-repeat;
}
/* 眼睛：查看档案 / 组织详情（灰，配白底描边药丸） */
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn[data-action="customers-detail"]::before,
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn[data-action="customers-site-detail"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>")}
/* 眼睛（蓝）：待处理列内的查看/核对归属 */
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn[data-action="customers-detail"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a63c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>")}
/* 笔：完善合同 */
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn[data-action="contract-edit"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a63c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/></svg>")}
/* 加用户：补全联系人 */
.app-layout .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn[data-action="customers-contact-edit"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a63c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M19 8v6M22 11h-6'/></svg>")}
/* 加圈：按合同分配 / 开户 */
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn[data-action="gsc-sites-provision"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a63c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v8M8 12h8'/></svg>")}
/* 对勾圈：核对合同 */
.app-layout .business-panel.customer-directory .records-table td[data-label="操作"] .btn[data-action="customers-contracts"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a63c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m8.5 12.2 2.4 2.4 4.6-5'/></svg>")}


/* =========================================================================
   细节打磨（2026-09-11 全页自查）：圆角归刻度 + 筛选 chips 对比度
   ========================================================================= */
/* 7px 是游离档 → 归到刻度 8px（导航链接/分组标题/筛选输入框/下拉） */
.app-layout .nav-link,
.app-layout .nav-section,
.app-layout .business-panel.customer-directory .customer-filters input,
.app-layout .business-panel.customer-directory .customer-filters select,
.app-layout .dashboard-controls-row .field select{border-radius:8px}
/* 快捷筛选 chips：品牌蓝字在浅底上 3.9:1 偏弱 → 加深到 5.4:1 档 */
.app-layout .customer-quick-ranges button,
.app-layout .customer-quick-ranges button strong{color:var(--brand-strong)}


/* ==========================================================================
   排版节奏规范层 (rhythm layer) — 2026-09-12

   动机：同一角色的元素在 10+ 个模块样式里各写各的值。实测盘点结果：
     · h2/h3/h4 字号在 14/15/16/18/21/22.32px 之间漂移，行高 19.6–28.8px 共 11 种；
       工作总台上相邻两块面板的标题一个是 18px、一个是 22.32px。
     · 13px 副文有 20.8 / 19.5 / 22.1 / 21.45px 四种行高。
     · 字距出现 0.12 / 0.13 / 0.14px 与 -0.2 / -0.32 / -0.4px 这类无差别抖动。
     · 指标数字硬编码 27px，绕过了 --font-metric（视口 1440 时 28.88px）。

   这里把共用原语收敛到一套标尺，作用域限定 #page-content，避免影响登录页与法律页。
   模块若要刻意破格，仍可在自己文件里以更高优先级覆盖。
   ========================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --leading-tight: 1.35;
  --leading-snug: 1.5;
  --leading-body: 1.6;
}

/* 标题层级：页标题 24.88 → 区块 18 → 卡片 16 → 小标题 14 */
#page-content h1 {
  font-size: var(--font-title);
  line-height: 1.4;
  letter-spacing: -.015em;
  font-weight: var(--font-weight-heading);
}
#page-content h2 {
  font-size: var(--font-section);
  line-height: var(--leading-tight);
  letter-spacing: normal;
  font-weight: var(--font-weight-heading);
}

/* 页首「报告封面」卡片的标题是独立一档：它标的是被审阅的那份文档，不是区块。
   article-plan / competitor-analysis 原本都用 --font-report-title，只有
   global-market 用 --font-title（24–26px），三处由此统一到 20–24px。 */
#page-content .ap-overview h2,
#page-content .ca-overview h2,
#page-content .gm-overview h2 {
  font-size: var(--font-report-title);
  line-height: 1.35;
  letter-spacing: normal;
  font-weight: var(--font-weight-heading);
}
#page-content h3 {
  font-size: var(--font-subheading);
  line-height: var(--leading-snug);
  letter-spacing: normal;
  font-weight: var(--font-weight-heading);
}
#page-content h4 {
  font-size: var(--font-control);
  line-height: var(--leading-snug);
  letter-spacing: normal;
  font-weight: var(--font-weight-heading);
}

/* 次级与表格文字统一行高；正文段落仍按各模块的阅读行高，不在此收口。 */
#page-content .cell-sub,
#page-content .cell-main,
#page-content .small {
  line-height: var(--leading-body);
}
#page-content table th { line-height: var(--leading-snug); }

/* 段落行高收口：此前同一段正文出现 1.4 / 1.55 / 1.65 / 1.75 / 1.8 / 1.95 六种倍率。 */
#page-content p {
  line-height: 1.7;
}
/* 合同条款里的交付节奏标签此前是 1.8，与其他标签不一致。 */
#page-content .proposal-cadence {
  line-height: var(--leading-body);
}

/* 间距收口：全站按钮内图标与文字的间距此前是 7px（出现 434 次），
   与同一界面里 8px 的 gap 相差 1px，属于无意义抖动。 */
#page-content .btn {
  gap: var(--space-2);
}

/* 字距抖动收口：18px 以下一律 normal（.eyebrow 的大写字母加宽是有意为之，保留） */
#page-content :where(h2, h3, h4, td, th, .cell-sub, .cell-main, .badge, .btn, .tab, .small) {
  letter-spacing: normal;
}

/* 指标数字回到统一标尺（此前 aurora 硬编码 27px） */
.app-layout .dh-metric > strong,
.app-layout .dv-metric > strong {
  font-size: var(--font-metric);
}

/* ==========================================================================
   组件尺度归一 (component scale) — 2026-09-12

   动机：同一个「动作按钮」角色在 20 个模块样式里各写各的 min-height，
   实测取值为 24 / 25 / 26 / 27 / 28 / 29 / 30 / 31 / 32 / 33 / 34 / 36 / 38 / 40px，
   水平内边距为 7 / 8 / 9 / 10 / 11 / 12 / 13 / 14 / 18px —— 相邻两个页面同角色的
   按钮能差 4px，视觉上就是"对不齐"的来源。

   指标数字同样：字距在 -.02 / -.03 / -.035 / -.04 / -.045em 与 -.6 / -.8 / -1px 之间
   漂移（同一 28.88px 字号下相差 0.5px 以上），行高 1.2–1.5，字重 500/600 混用。

   这里把两者收敛到固定刻度。用 #page-content 作为作用域（ID 优先级高于各模块的
   纯 class 选择器），只覆盖尺寸，不动颜色与语义。
   ========================================================================== */
:root {
  /* 四档按钮高度：页面级动作 / 面板工具条 / 分页与紧凑工具 / 表内行内动作 */
  --btn-h-lg: 40px;
  --btn-h-md: 36px;
  --btn-h-sm: 32px;
  --btn-h-xs: 28px;
  --btn-px-lg: 18px;
  --btn-px-md: 14px;
  --btn-px-sm: 12px;
  --btn-px-xs: 10px;
  /* 指标数字：统一负字距，避免 8 种近似值在同一屏里各不相同 */
  --metric-tracking: -.02em;
  --metric-leading: 1.2;
  /* 眉标（眉题）字距：全站大写拉丁小标签统一一个值。
     实测此前有 .04/.09/.1/.13/.14/.16em 与 .7/1.15/1.5/1.7px 共 10 种。 */
  --eyebrow-tracking: .12em;
  /* 徽标内边距取整，消除 4.875px / 8.125px 这类半像素（会让描边在 1x 屏上发虚） */
  --badge-px: 8px;
  --badge-py: 4px;
}

/* --- 1. 页面级动作（顶部工具栏的主按钮、面板级操作组） --- */
#page-content .business-head .btn,
#page-content .dv-page-tools .btn,
#page-content .ca-review-actions .btn,
#page-content .gm-review-actions .btn,
#page-content .mi-section-heading > .btn,
#page-content .kl-result-actions .btn,
#page-content .keyword-library-page .page-head .page-actions .btn,
#page-content .business-panel.customer-directory .customer-filter-actions .btn,
#page-content .customer-filters .btn-primary {
  min-height: var(--btn-h-lg);
  padding: 9px var(--btn-px-lg);
}

/* 分页脚注：四个模块的翻页区高度此前是 27 / 30 / 34 / 36px，且每个都紧挨着一个
   36px 的下拉框，视觉上参差最明显。统一 36px 与相邻控件对齐。 */
#page-content .ap-pagination .btn,
#page-content .tdk-pagination .btn,
#page-content .kl-pagination .btn,
#page-content .mi-keyword-pages .btn,
#page-content .gm-report-pages .btn,
#page-content .kl-row-action .btn {
  min-height: var(--btn-h-md);
  padding: 8px var(--btn-px-md);
}

/* --- 2. 面板工具条（面板标题右侧动作、表单行、表格行内主操作） --- */
#page-content .ap-review-actions .btn,
#page-content .ap-prompt-head .btn,
#page-content .ca-context-actions .btn,
#page-content .ca-peer-card > footer .btn,
#page-content .mi-keyword-table .btn,
#page-content .gm-recommendation > .btn,
#page-content .proposal-workspace-actions .btn,
#page-content .proposal-scope-heading .btn,
#page-content .tdk-search .btn,
#page-content .execution-skill-tools .btn,
#page-content td .btn,
#page-content .page-actions .btn,
#page-content .modal-footer .btn,
#page-content .btn-sm,
#page-content .dv-customer-table td:last-child > .btn {
  min-height: var(--btn-h-md);
  padding: 8px var(--btn-px-md);
}

/* --- 3. 分页与紧凑工具（翻页、报告页码、快照选择、分段开关） --- */
#page-content .ap-report-pages .btn,
#page-content .ap-results-head .btn,
#page-content .ca-report-pages .btn,
#page-content .ca-overview > footer .btn,
#page-content .ca-peer-preview > header .btn,
#page-content .gm-decision-evidence > .btn,
#page-content .gm-tabs > button,
#page-content .gm-priority-filters button,
#page-content .gm-edition-switch button,
#page-content .mi-snapshot-picker .btn,
#page-content .tdk-discovery-item > .btn,
#page-content .legal-nav .btn {
  min-height: var(--btn-h-sm);
  padding: 6px var(--btn-px-sm);
}

/* 面板标题行里的文字动作（「研究范围」「全部市场建议」「配置 OAuth 参数」等）
   此前落回 .btn-text 自带的 30px，是全站最后剩的孤立档位。 */
#page-content .dv-panel-heading > .btn,
#page-content .gm-decision-workspace-head > .btn,
#page-content .gm-decision-preview > header > .btn,
#page-content .panel-body > .btn-text {
  min-height: var(--btn-h-sm);
  padding: 6px var(--btn-px-sm);
}

/* 页码按钮：此前误用 --font-section（18px），是全站唯一 18px 的按钮文字 */
#page-content .ap-report-pages .btn,
#page-content .ca-report-pages .btn {
  font-size: var(--font-control);
  line-height: 1.5;
}

/* --- 4. 表内行内动作（紧凑文字按钮） --- */
#page-content .business-panel.customer-directory .records-table td:last-child .btn,
#page-content .business-panel.customer-directory .customer-contact-action .btn,
#page-content .business-panel.customer-directory .customer-domain .btn,
#page-content .business-panel.customer-directory .customer-next-step .btn,
#page-content .dashboard-table td:last-child .btn,
#page-content .overview-site-links .btn,
#page-content .overview-contract-line .btn,
#page-content .tdk-table td > .btn,
#page-content .dv-panel-foot .btn,
#page-content .dv-kanban-card .btn,
#page-content .dv-carryover .btn,
#page-content .dh-refresh-warning > .btn,
#page-content .mi-keyword-table td > .btn,
#page-content .gm-market-table td > .btn,
#page-content .gm-editorial-hero > footer > .btn,
#page-content .gm-overview > footer .btn,
#page-content .gm-competitor > footer .btn,
#page-content .gm-language-card footer .btn {
  min-height: var(--btn-h-xs);
  padding: 4px var(--btn-px-xs);
}

/* 表内药丸按钮（客户列表操作列）保持胶囊形，但高度对齐同一档 */
#page-content .business-panel.customer-directory .records-table td[data-label="操作"] .btn,
#page-content .business-panel.customer-directory .records-table td[data-label="待处理事项"] .btn {
  min-height: var(--btn-h-sm);
  padding: 6px var(--btn-px-sm);
}

/* --- 5. 指标数字：统一字号 / 字重 / 字距 / 行高 ---
   分两档，因为界面上确实是两种角色：
     A 档 KPI 主数字（面板顶部的巨号数）         → --font-metric (28–30px)
     B 档 摘要数字（明细栏、汇总条里的次级量）    → --font-report-title (20–24px)
   先前 A 档有 26/27/28px 与 5 种字距混用；B 档在 20/23.76/25px 之间漂移，
   且字距在 -.025/-.03/-.04em 之间随机。 */
#page-content .dh-metric > strong,
#page-content .dv-metric > strong,
#page-content .exec-board-metric > strong,
#page-content .business-metric > strong,
#page-content .kl-metrics strong,
#page-content .ap-metrics strong,
#page-content .stat strong,
#page-content .dashboard-exposure-head strong,
#page-content .mi-stat > strong,
#page-content .mi-peer-comparison strong,
/* 全站只有 market-intelligence / global-market 的首格 KPI 用品牌蓝（.mi-stat.accent）。
   同一排里一个蓝三个深灰，读起来像漏改而不是强调；强调改由已有的左侧强调条
   （.mi-stat.accent:before）承担，数字颜色回到与其他 KPI 一致。 */
#page-content .mi-stat.accent > strong,
#page-content .mi-report-mode > .mi-stat-grid > .mi-stat.accent > strong,
#page-content .gm-coverage-numbers strong,
#page-content .ca-coverage-numbers strong,
#page-content .ca-peer-qualification > strong,
#page-content .ca-preview-overlap > strong,
#page-content .ca-selection-standard > aside > strong,
#page-content .ca-overlap-card > header > strong {
  font-size: var(--font-metric);
  font-weight: var(--font-weight-heading);
  letter-spacing: var(--metric-tracking);
  line-height: var(--metric-leading);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* B 档：摘要数字 */
#page-content .dv-attention-item > b,
#page-content .dashboard-keyword-counts dd,
#page-content .proposal-summary-strip .proposal-total dd,
#page-content .mi-country-detail dd,
/* 同业对照表：.pending（待核实）此前掉到 18px/500，同一列有数据时是 23.76px/600，
   数据有无会让行高和字号跳动。这里统一字号字重，「待核实」只靠颜色区分。 */
#page-content .ca-focus-value,
#page-content .ca-focus-value.pending {
  font-size: var(--font-report-title);
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* C 档：行内计数与图例数字（进度 0% / 3 项、图例、阶段计数）——统一 18px / 600 / normal。
   此前同为 18px 却混用 500 与 600 字重，字距一处 -.03em 一处 normal。 */
#page-content .dh-progress-heading strong,
#page-content .dh-progress-heading b,
#page-content .time-chart-legend .time-chart-series > strong,
#page-content .dv-contract-progress strong,
#page-content .dv-execution-stages > span > strong,
#page-content .dv-customer-table strong,
#page-content .dc-plan-total b,
#page-content .dc-month strong {
  font-size: var(--font-section);
  font-weight: var(--font-weight-heading);
  letter-spacing: normal;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

/* --- 7. 眉标字距收口 ---
   同一角色的眉题此前有 10 种字距（.04/.09/.1/.13/.14/.16em 与 .7/1.15/1.5/1.7px）。
   统一到 --eyebrow-tracking，需要用更宽字距时改这一个变量即可。 */
#page-content .business-eyebrow,
#page-content .ca-eyebrow,
#page-content .dv-kicker,
#page-content .dv-page-eyebrow,
#page-content .gm-eyebrow,
#page-content .mi-eyebrow,
#page-content .kl-dataset-label,
#page-content .ap-eyebrow {
  letter-spacing: var(--eyebrow-tracking);
}

/* --- 8. 残余字距抖动收口（标题与短标签上的 ±0.2~0.5px 微调无视觉意义） --- */
#page-content .dv-dates,
#page-content .dv-contract-title strong,
#page-content .ca-dimension-title > div > span,
#page-content .app-layout table thead th {
  letter-spacing: normal;
}

/* --- 9. 行高残余抖动收口 ---
   同一「说明文字」角色在 1.7 / 1.75 / 1.8 / 1.85 / 1.9 / 1.95 之间漂移。
   统一到 1.7（正文可读行高），表格内说明仍走 --leading-body (1.6)。 */
#page-content .muted,
#page-content .cell-sub,
#page-content .small,
#page-content .ap-selection,
#page-content .ap-product-links,
#page-content .dv-panel-heading p,
#page-content .mi-section-heading p,
#page-content .ca-section-heading p {
  line-height: 1.7;
}

/* --- 6. 徽标内边距取整 ---
   Web Awesome 的 padding 写在 HOST 上（0.375em/0.625em × 13px = 4.875px 8.125px），
   不是 ::part(base)。这里对齐站内 .badge 的 4px 8px。
   .business-section-heading wa-badge 与 .dv-heading-count/.dv-total-label 是
   有意做的零内边距文字徽标，显式排除。 */
/* --- 10. KPI 卡内边距归一 ---
   同一「面板顶部指标卡」角色，四个模块的实测内边距是
     .dh-metric（工作总台）      18px 20px
     .dv-metric（客户交付总览）   18px 20px
     .business-metric（客户）     16px 20px
     .exec-board-metric（执行）   17px 20px
   三档只差 1–2px，并排比较时才看得出来，但堆在一屏里就是"没对齐"的来源。
   小屏的降密值更乱（13/14/15/16/17px 都有），一并收到 16px → 14px 两档。 */
#page-content .dh-metric,
#page-content .dv-metric,
#page-content .business-metric,
#page-content .exec-board-metric {
  padding: 18px 20px;
}
@media (max-width: 1220px) {
  #page-content .dh-metric,
  #page-content .dv-metric,
  #page-content .business-metric,
  #page-content .exec-board-metric {
    padding: 16px;
  }
}
@media (max-width: 680px) {
  #page-content .dh-metric,
  #page-content .dv-metric,
  #page-content .business-metric,
  #page-content .exec-board-metric {
    padding: 14px;
  }
}

/* 证据来源卡：16px 17px 是唯一的奇数档 */
#page-content .ap-source {
  padding: 16px;
}

/* --- 11. 指标卡图标位归一 ---
   工作总台的指标卡是「图标瓦片在左、标签在右」，客户列表是镜像的
   「标签在左、图标瓦片在右」，同一个后台里翻两页就发现两套排法。
   这里把客户列表对齐总台：图标在左。瓦片尺寸也从 32px 提到与总台一致的 36px。 */
#page-content .business-metric-top .business-metric-icon {
  order: 1;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
}
#page-content .business-metric-top > span:not(.business-metric-icon) {
  order: 2;
}
@media (max-width: 680px) {
  #page-content .business-metric-top .business-metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }
}

/* 优先跟进条目：17px 竖向 */
#page-content .dv-attention-item {
  padding: 16px 0;
}

#page-content wa-badge:not([class]),
#page-content .exec-task-table wa-badge,
#page-content .exec-assignment-list wa-badge {
  padding: var(--badge-py) var(--badge-px);
}