/* 海思视觉主题：自动跟随系统浅色 / 深色设置。 */
:root {
  color-scheme: light dark;
  --ink-900: #102748; --ink-700: #294568; --ink-500: #5f7391;
  --ink-300: #8ea0b8; --ink-100: #d5dfec;
  --brand-700: #1355b7; --brand-600: #1768df; --brand-500: #347ffc;
  --brand-100: #eaf2ff; --cyan-600: #1886c7; --cyan-500: #49a9e8;
  --cyan-400: #65c5ef; --cyan-100: #edf8ff;
  --paper: #f6f9fe; --paper-deep: #edf3fb; --card: rgba(255, 255, 255, .94);
  --line: #d8e1ed; --line-strong: #c2cedd;
  --surface-soft: #f3f7fc; --surface-raised: #ffffff;
  --surface-accent: #edf4ff; --surface-warning: #fff9e9;
  --page-glow: rgba(73, 145, 255, .10);
  --risk-low: #269c60; --risk-low-bg: #e8f7ef;
  --risk-moderate: #bd8700; --risk-moderate-bg: #fff6dc;
  --risk-high: #ed7319; --risk-high-bg: #fff0e4;
  --risk-very-high: #cf3e47; --risk-very-high-bg: #fdebed;
  --st-draft: #687c96; --st-draft-bg: #eef2f7;
  --st-pending: #bd8700; --st-pending-bg: #fff6dc;
  --st-approved: #1768df; --st-approved-bg: #eaf2ff;
  --st-published: #269c60; --st-published-bg: #e8f7ef;
  --st-rejected: #cf3e47; --st-rejected-bg: #fdebed;
  --fresh: #269c60; --stale: #bd8700; --expired: #cf3e47; --seal-red: #347ffc;
  --chart-blue: #347ffc; --chart-cyan: #43a9e7; --chart-orange: #f47a20;
  --chart-red: #cf3e47; --chart-green: #299f65; --chart-purple: #7d72ca;
  --chart-text: #5f7391; --chart-axis: #b8c6d8; --chart-grid: #e5ebf3;
  --chart-tooltip-bg: #0b2241; --chart-tooltip-text: #f2f7ff;
  --chart-band: rgba(52, 127, 252, .20);
  --shadow-sm: 0 1px 3px rgba(19, 50, 89, .07);
  --shadow: 0 4px 14px rgba(19, 50, 89, .08);
  --shadow-lg: 0 12px 34px rgba(7, 25, 52, .18);
  --radius-sm: 5px; --radius: 8px; --header-h: 80px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-900: #f1f3f8; --ink-700: #d8dce8; --ink-500: #9da4b6;
    --ink-300: #727b91; --ink-100: #c7ccda;
    --brand-700: #91b3ff; --brand-600: #5f8fff; --brand-500: #477dff;
    --brand-100: #182347; --cyan-600: #77c7ee; --cyan-500: #54b7e6;
    --cyan-400: #72cdf2; --cyan-100: #12283a;
    --paper: #0c0c0f; --paper-deep: #101016; --card: rgba(18, 18, 32, .96);
    --line: #292b3c; --line-strong: #3b3e54;
    --surface-soft: #101018; --surface-raised: #171824;
    --surface-accent: #182347; --surface-warning: #302918;
    --page-glow: rgba(61, 126, 255, .15);
    --risk-low: #52c488; --risk-low-bg: #123627;
    --risk-moderate: #e3b94f; --risk-moderate-bg: #382f18;
    --risk-high: #ff9247; --risk-high-bg: #402719;
    --risk-very-high: #f27379; --risk-very-high-bg: #3e2029;
    --st-draft: #9bacc3; --st-draft-bg: #1d2c42;
    --st-pending: #e3b94f; --st-pending-bg: #382f18;
    --st-approved: #75a9ff; --st-approved-bg: #162d53;
    --st-published: #52c488; --st-published-bg: #123627;
    --st-rejected: #f27379; --st-rejected-bg: #3e2029;
    --fresh: #52c488; --stale: #e3b94f; --expired: #f27379;
    --chart-blue: #4b8dff; --chart-cyan: #5bbce8; --chart-orange: #ff852b;
    --chart-red: #f27379; --chart-green: #55c88c; --chart-purple: #a59ae8;
    --chart-text: #a3a9ba; --chart-axis: #45495f; --chart-grid: #242637;
    --chart-tooltip-bg: #eef2ff; --chart-tooltip-text: #101426;
    --chart-band: rgba(75, 141, 255, .24);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .24);
    --shadow: 0 8px 22px rgba(0, 0, 0, .20);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .34);
  }
}

body {
  min-height: 100vh;
  background:
    linear-gradient(164deg, transparent 0 25%, var(--page-glow) 48%, transparent 66%),
    radial-gradient(circle at 8% 2%, var(--page-glow), transparent 38%),
    var(--paper);
}
h1, h2, h3, h4, .brand-name, .page-title, .card-title, .kpi-value,
.risk-panel .risk-label { font-family: var(--font-body); }

.app-header {
  background:
    radial-gradient(circle at 16% -120%, rgba(71, 125, 255, .32), transparent 42%),
    linear-gradient(100deg, #101426, #11111d 62%, #15182a);
  border-bottom: 1px solid #2c3550;
  box-shadow: 0 4px 18px rgba(2, 15, 33, .18);
}
.app-header .container { min-height: var(--header-h); gap: 28px; }
.container { max-width: 1440px; padding-left: 32px; padding-right: 32px; }
.brand { gap: 12px; }
.brand-logo {
  display: block; width: 51px; height: 36px; object-fit: contain; flex: 0 0 auto;
}
.brand-name {
  font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: .01em;
}
.main-nav {
  align-self: stretch; align-items: stretch; gap: 26px; margin-left: 48px;
}
.main-nav a {
  display: inline-flex; align-items: center; padding: 0 8px; border-radius: 0;
  color: #adbed5; font-size: 15px;
}
.main-nav a:hover { color: #fff; background: transparent; }
.main-nav a.active::after {
  left: 5px; right: 5px; bottom: 14px; height: 3px; background: #55a0ff;
  box-shadow: 0 0 9px rgba(85, 160, 255, .65);
}

.page-body { padding-top: 30px; }
.page-head { margin-bottom: 18px; }
.page-title {
  font-size: 25px; line-height: 1.25; font-weight: 700;
  color: var(--ink-900); letter-spacing: .01em;
}
.page-title::before { width: 5px; height: 26px; background: var(--brand-500); }
.card { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }
.card-head { min-height: 56px; padding: 14px 20px; }
.card-title { color: var(--ink-900); font-weight: 700; }
.card-title .tick { background: var(--brand-500); }
.muted, .result-count { color: var(--ink-500); }
.badge-outline {
  color: var(--ink-500); background: var(--surface-raised); border-color: var(--line-strong);
}
.btn {
  min-height: 40px; background: var(--surface-raised);
  border-color: var(--line-strong); color: var(--ink-700);
}
.btn:hover { background: var(--surface-accent); }
.btn-primary { color: #fff; background: var(--brand-600); border-color: var(--brand-600); }
.btn-reject { background: var(--surface-raised); }
.input, .select, .textarea { background: var(--surface-raised); color: var(--ink-900); }
.table th { background: var(--surface-soft); }
.table td { color: var(--ink-700); }
.table tbody tr:hover { background: var(--cyan-100); }
.def-item dd { color: var(--ink-900); }
.dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-900) 6%, transparent); }

.risk-hero { grid-template-columns: 276px minmax(0, 1fr); min-height: 330px; }
.risk-hero .risk-panel { padding: 26px; }
.risk-panel .risk-label { font-size: 42px; }
.risk-panel .risk-en { letter-spacing: .28em; }
.risk-hero .risk-detail {
  display: flex; flex-direction: column; justify-content: center; padding: 26px 38px;
}
.risk-panel-high { background: linear-gradient(155deg, #ff8426, #d85b0b); }
.risk-panel-very_high { background: linear-gradient(155deg, #e55353, #ad2934); }
.kpi-card { min-height: 146px; }
.kpi-card .card-body {
  min-height: 144px; display: flex; flex-direction: column; justify-content: center;
  padding: 18px 24px;
}
.kpi-label { color: var(--ink-500); font-size: 13px; }
.kpi-value { color: var(--ink-900); font-size: 36px; }
.kpi-foot { color: var(--ink-500); }
.kpi-card::after { background: var(--brand-500); }
.kpi-card.kpi-cyan::after { background: var(--cyan-500); }
.kpi-card.kpi-amber::after {
  background: linear-gradient(180deg, var(--cyan-500), #7cc957);
}
.approval-bar {
  background: var(--surface-warning);
  border-color: color-mix(in srgb, var(--st-pending) 48%, var(--line));
}
.approval-bar .bar-title { color: var(--ink-900); }
.summary-callout {
  padding: 10px 14px; border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-sm); background: var(--surface-accent); font-weight: 600;
}
.hash-label, .theme-muted { color: var(--ink-500); }
.hash-block {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-700); background: var(--surface-soft); word-break: break-all;
}
.hash-tail { color: var(--ink-300); }
.scenario-card {
  padding: 8px 12px; margin-bottom: 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-soft);
}
.app-footer { background: var(--paper-deep); color: var(--ink-500); }
.toast { background: var(--chart-tooltip-bg); color: var(--chart-tooltip-text); }
@keyframes flash {
  0%, 55% { background: var(--surface-warning); }
  100% { background: transparent; }
}

@media (max-width: 1100px) {
  .main-nav { margin-left: 12px; gap: 12px; }
  .risk-hero { grid-template-columns: 1fr; min-height: 0; }
  .risk-hero .risk-panel { min-height: 180px; }
}
@media (max-width: 768px) {
  :root { --header-h: auto; }
  .container { padding-left: 14px; padding-right: 14px; }
  .app-header .container {
    min-height: 0; padding-top: 10px; padding-bottom: 0;
    display: flex; flex-wrap: wrap; gap: 8px 12px;
  }
  .brand { order: 1; min-width: 0; }
  .brand-logo { width: 43px; height: 31px; }
  .brand-name { max-width: 210px; font-size: 15px; white-space: normal; }
  .main-nav {
    order: 3; flex: 0 0 calc(100% + 28px); margin: 0 -14px;
    border-top: 1px solid rgba(109, 144, 188, .24); gap: 0; overflow: visible;
  }
  .main-nav a {
    flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: 13px;
  }
  .main-nav a.active::after { left: 28%; right: 28%; bottom: 1px; }
  .page-body { padding-top: 20px; padding-bottom: 30px; }
  .page-head { align-items: flex-start; gap: 12px; }
  .page-title { font-size: 21px; }
  .page-title::before { height: 22px; }
  .risk-hero .risk-panel { min-height: 160px; padding: 20px; }
  .risk-panel .risk-label { font-size: 34px; }
  .risk-hero .risk-detail { padding: 20px; }
  .kpi-card, .kpi-card .card-body { min-height: 124px; }
  .kpi-value { font-size: 32px; }
  .card-head { min-height: 50px; padding: 12px 16px; }
  .card-body, .card-pad { padding: 16px; }
  .grid { gap: 12px; }
  .approval-bar { top: 104px; }
}
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; font-size: 12px; }
  .top-strip, .app-header, .app-footer, .approval-bar, .no-print { display: none !important; }
  .container { max-width: none; padding: 0; }
  .page-body { padding: 0; }
  .card { background: #fff; box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .grid { display: block; }
  .grid > [class*="col-"] { margin-bottom: 12px; }
  a { color: #000; text-decoration: none; }
}