:root {
  --ink: #142826;
  --muted: #6d7f7c;
  --line: #dce7e4;
  --soft: #f2f7f5;
  --paper: #ffffff;
  --navy: #173b38;
  --teal: #087b72;
  --teal-2: #0e9688;
  --mint: #dff3ed;
  --amber: #d7902b;
  --amber-soft: #fff2da;
  --red: #d2574d;
  --red-soft: #fce9e7;
  --green: #2f8b67;
  --green-soft: #e2f3eb;
  --shadow: 0 10px 30px rgba(30, 70, 65, .07);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--soft); color: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.demo-ribbon { height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #d9e9e6; background: #102e2b; font-size: 12px; letter-spacing: .08em; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #55d7bd; box-shadow: 0 0 0 4px rgba(85,215,189,.12); }
.app-shell { min-height: calc(100vh - 28px); display: grid; grid-template-columns: 244px 1fr; }
.sidebar { position: sticky; top: 0; height: calc(100vh - 28px); z-index: 10; background: var(--navy); color: white; padding: 24px 16px 16px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 27px; }
.brand strong { display: block; font-size: 18px; letter-spacing: .03em; }
.brand small { display: block; color: #a8c0bc; margin-top: 4px; font-size: 11px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: #e6faf4; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.brand-mark span:first-child, .brand-mark span:last-child { position: absolute; background: var(--teal); border-radius: 3px; }
.brand-mark span:first-child { width: 20px; height: 6px; left: 10px; top: 17px; }
.brand-mark span:last-child { height: 20px; width: 6px; left: 17px; top: 10px; }
.main-nav { display: grid; gap: 6px; }
.nav-item { border: 0; background: transparent; color: #bad0cc; display: grid; grid-template-columns: 28px 1fr auto; text-align: left; align-items: center; min-height: 45px; padding: 0 12px; border-radius: 10px; transition: .18s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.06); }
.nav-item.active { background: rgba(80, 206, 183, .16); color: white; box-shadow: inset 3px 0 #56d0b9; }
.nav-item i { font-style: normal; font-size: 18px; color: #75cbbb; }
.nav-item span { font-size: 14px; }
.nav-item b { min-width: 20px; padding: 2px 5px; border-radius: 10px; background: rgba(255,255,255,.12); text-align: center; font-size: 10px; }
.nav-item b.warn { background: #9c5a2d; color: #ffe4ca; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 12px; }
.model-status { padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; display: flex; align-items: center; gap: 10px; }
.model-status strong, .model-status small { display: block; }
.model-status strong { font-size: 12px; font-weight: 500; }
.model-status small { color: #8fa9a5; margin-top: 3px; font-size: 10px; }
.status-dot { width: 8px; height: 8px; background: #4ed2a2; border-radius: 50%; box-shadow: 0 0 0 4px rgba(78,210,162,.1); }
.user-card { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: transparent; color: white; padding: 15px 5px 0; display: grid; grid-template-columns: 36px 1fr auto; text-align: left; align-items: center; gap: 9px; }
.user-card strong, .user-card small { display: block; }
.user-card strong { font-size: 13px; }.user-card small { color: #9eb3b0; font-size: 10px; margin-top: 3px; }.user-card em { font-style: normal; color: #9eb3b0; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #0e4a43; background: #bcf0e3; font-weight: 700; }

.main-area { min-width: 0; }
.topbar { height: 68px; position: sticky; top: 0; z-index: 9; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 0 30px; display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { display: flex; gap: 9px; align-items: center; font-size: 13px; }.breadcrumb span { color: var(--muted); }.breadcrumb i { color: #b5c1bf; font-style: normal; }.breadcrumb strong { font-weight: 600; }
.top-actions { display: flex; gap: 12px; align-items: center; }.date-label { font-size: 12px; color: var(--muted); }
.global-search { min-width: 240px; height: 36px; border: 1px solid var(--line); border-radius: 9px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #f8faf9; }
.global-search input { border: 0; outline: none; width: 100%; background: transparent; font-size: 12px; color: var(--ink); }.global-search span { color: var(--teal); font-size: 19px; }
.icon-button { border: 1px solid var(--line); border-radius: 9px; width: 36px; height: 36px; background: white; position: relative; color: var(--teal); }.icon-button b { position: absolute; top: -5px; right: -5px; color: white; background: var(--red); width: 16px; height: 16px; border-radius: 50%; font-size: 9px; display: grid; place-items: center; }
.mobile-menu { display: none; border: 0; background: transparent; color: var(--navy); font-size: 20px; }
.content { padding: 28px 30px 44px; max-width: 1540px; margin: 0 auto; }

.page-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 24px; }
.page-head h1 { margin: 4px 0 6px; font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 600; letter-spacing: -.02em; }.page-head p { margin: 0; color: var(--muted); font-size: 13px; }.eyebrow { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.head-actions { display: flex; gap: 10px; align-items: center; }
.button { min-height: 38px; border-radius: 9px; padding: 0 16px; border: 1px solid var(--line); background: white; color: var(--ink); font-size: 13px; font-weight: 600; }.button:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(0,0,0,.06); }.button.primary { color: white; background: var(--teal); border-color: var(--teal); }.button.dark { color: white; background: var(--navy); border-color: var(--navy); }.button.ghost { color: var(--muted); background: white; }.button.danger { color: var(--red); border-color: #e9bbb7; background: var(--red-soft); }.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button.small { min-height: 30px; padding: 0 10px; font-size: 11px; }
.select, .field-input { height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; padding: 0 11px; outline: none; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; box-shadow: 0 5px 18px rgba(30,70,65,.03); position: relative; overflow: hidden; }.kpi-card:after { content: ""; position: absolute; right: -18px; bottom: -30px; width: 80px; height: 80px; border-radius: 50%; background: var(--mint); opacity: .45; }.kpi-card span { color: var(--muted); font-size: 11px; }.kpi-card strong { display: block; margin: 8px 0 3px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; }.kpi-card small { color: var(--green); font-size: 10px; }.kpi-card small.warn { color: var(--amber); }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel + .panel { margin-top: 16px; }
.panel-head { padding: 17px 19px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; }.panel-head h2, .panel-head h3 { margin: 0; font-size: 14px; }.panel-head p { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
.toolbar { display: flex; flex-wrap: wrap; gap: 9px; padding: 14px 18px; background: #fbfcfc; border-bottom: 1px solid var(--line); }
.toolbar input { min-width: 220px; flex: 1; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-size: 10px; letter-spacing: .05em; background: #f7faf9; padding: 11px 15px; border-bottom: 1px solid var(--line); }
td { padding: 14px 15px; border-bottom: 1px solid #edf2f1; font-size: 12px; vertical-align: middle; }
tbody tr { transition: .15s; }.case-row { cursor: pointer; }.case-row:hover { background: #f3faf7; }.case-row.active { background: #ecf7f4; box-shadow: inset 3px 0 var(--teal); }
.case-id { display: flex; align-items: center; gap: 10px; }.case-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--mint); display: grid; place-items: center; color: var(--teal); font-size: 15px; }.case-id strong, .case-id small { display: block; }.case-id strong { font-size: 12px; }.case-id small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; gap: 5px; padding: 0 8px; border-radius: 11px; background: #eff3f2; color: #536461; font-size: 10px; font-weight: 600; white-space: nowrap; }.tag.green { color: var(--green); background: var(--green-soft); }.tag.amber { color: #a66a18; background: var(--amber-soft); }.tag.red { color: #b7463d; background: var(--red-soft); }.tag.teal { color: var(--teal); background: var(--mint); }.tag.outline { border: 1px solid var(--line); background: white; }.tag:before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.text-muted { color: var(--muted); }.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pagination { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; padding: 13px 18px; }.pager { display: flex; gap: 5px; }.pager button { border: 1px solid var(--line); background: white; border-radius: 7px; height: 28px; min-width: 28px; }.pager button.active { background: var(--teal); border-color: var(--teal); color: white; }

.case-banner { background: linear-gradient(110deg, #163d39, #1f5c55); color: white; padding: 17px 19px; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; box-shadow: 0 10px 25px rgba(17,55,51,.15); }.case-banner h2 { margin: 3px 0 0; font-size: 18px; }.case-banner .eyebrow { color: #7ee0cf; }.case-banner-meta { display: flex; gap: 24px; }.case-banner-meta span { display: grid; gap: 4px; color: #a7c9c3; font-size: 9px; }.case-banner-meta strong { color: white; font-size: 12px; font-weight: 500; }
.steps { display: grid; grid-template-columns: repeat(5,1fr); background: white; border: 1px solid var(--line); border-radius: 13px; padding: 12px; margin-bottom: 16px; }.step { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; position: relative; }.step:not(:last-child):after { content: ""; position: absolute; left: 33px; right: 7px; top: 12px; height: 1px; background: var(--line); }.step i { z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #edf2f1; display: grid; place-items: center; font-style: normal; font-size: 10px; }.step.done { color: var(--teal); }.step.done i { background: var(--teal); color: white; }.step.current { color: var(--ink); font-weight: 700; }.step.current i { color: var(--teal); background: var(--mint); box-shadow: 0 0 0 4px rgba(8,123,114,.07); }

.analysis-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .8fr); gap: 16px; }
.viewer { background: #0d1717; min-height: 496px; position: relative; overflow: hidden; }.viewer-toolbar { height: 48px; background: #142423; border-bottom: 1px solid rgba(255,255,255,.07); color: #a9bfbb; display: flex; justify-content: space-between; align-items: center; padding: 0 13px; }.plane-tabs { display: flex; gap: 5px; }.plane-tabs button { border: 0; color: #91aaa6; background: transparent; border-radius: 7px; padding: 7px 11px; font-size: 11px; }.plane-tabs button.active { color: white; background: rgba(83,205,182,.18); }.viewer-tools { display: flex; gap: 7px; font-size: 10px; }.viewer-tools button { border: 1px solid rgba(255,255,255,.1); background: transparent; color: #a9bfbb; height: 29px; border-radius: 7px; }
.scan-stage { height: 400px; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 50% 45%, #293534, #101817 63%, #0b1111); }
.scan { width: 73%; height: 82%; border-radius: 45% 44% 48% 47%; position: relative; overflow: hidden; filter: grayscale(1); box-shadow: 0 0 50px #000, inset 0 0 20px #000; background:
radial-gradient(ellipse at 50% 52%, transparent 0 12%, rgba(14,18,18,.95) 13% 20%, transparent 21%),
radial-gradient(ellipse at 50% 45%, rgba(226,230,225,.86) 0 7%, rgba(86,93,91,.9) 8% 17%, rgba(195,201,197,.9) 18% 24%, rgba(51,57,55,.9) 25% 30%, transparent 31%),
radial-gradient(ellipse at 31% 58%, rgba(180,186,182,.76) 0 8%, rgba(49,54,53,.85) 9% 18%, transparent 19%),
radial-gradient(ellipse at 70% 59%, rgba(180,186,182,.73) 0 9%, rgba(47,54,52,.9) 10% 20%, transparent 21%),
radial-gradient(ellipse at 50% 50%, #8a9290 0 43%, #242a29 44% 48%, #a5aaa8 49% 57%, #1c2221 58% 62%, #6b7270 63% 69%, #101515 70%);
}.scan.coronal { transform: scaleX(.82); border-radius: 30% 30% 48% 48%; }.scan.sagittal { transform: scaleX(.7) rotate(-3deg); border-radius: 40% 56% 44% 50%; }
.heatmap { position: absolute; width: 29%; height: 31%; left: 52%; top: 50%; border-radius: 50%; opacity: .75; filter: blur(8px) saturate(1.7); background: radial-gradient(circle, #fff100 0 13%, #ff8c00 30%, #ee214b 55%, transparent 72%); mix-blend-mode: screen; animation: breathe 2.7s ease-in-out infinite; }.heatmap.off { display: none; }
@keyframes breathe { 50% { opacity: .52; transform: scale(.94); } }
.scan-label { position: absolute; top: 62px; left: 14px; color: rgba(255,255,255,.8); font: 10px/1.6 ui-monospace, monospace; }.scan-orient { position: absolute; color: #7d9490; font: 11px ui-monospace, monospace; }.scan-orient.t { top: 58px; left: 50%; }.scan-orient.b { bottom: 55px; left: 50%; }.scan-orient.l { top: 50%; left: 15px; }.scan-orient.r { top: 50%; right: 15px; }
.viewer-foot { min-height: 48px; padding: 9px 13px; color: #90a5a1; display: flex; justify-content: space-between; align-items: center; font-size: 10px; }.legend { display: flex; align-items: center; gap: 7px; }.legend-bar { width: 90px; height: 6px; border-radius: 5px; background: linear-gradient(90deg, #172a77, #19d0c3, #ffe51a, #ef2647); }
.stack { display: grid; gap: 14px; }
.protocol-card, .risk-card, .evidence-card, .refusal-card { border: 1px solid var(--line); border-radius: 14px; background: white; padding: 16px; }.protocol-card h3, .risk-card h3, .evidence-card h3 { margin: 0 0 12px; font-size: 13px; }.protocol-ok { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 11px; }.protocol-ok i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-style: normal; }.protocol-list { display: grid; gap: 7px; margin-top: 11px; }.protocol-list div { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }.protocol-list strong { color: var(--ink); font-weight: 500; }
.risk-top { display: flex; justify-content: space-between; align-items: flex-start; }.risk-number strong { display: block; font: 38px Georgia, serif; color: var(--amber); }.risk-number small { color: var(--muted); font-size: 10px; }.confidence { text-align: right; }.confidence strong { display: block; color: var(--green); font-size: 13px; }.confidence small { color: var(--muted); font-size: 9px; }
.meter { height: 7px; border-radius: 6px; background: linear-gradient(90deg, #65b98d 0 33%, #f0bd5d 33% 66%, #da6a5f 66%); margin: 14px 0 5px; position: relative; }.meter i { position: absolute; left: 67%; top: -4px; width: 3px; height: 15px; background: #162f2c; border-radius: 2px; }.meter-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }
.evidence-list { display: grid; gap: 9px; }.evidence-item { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 10px; line-height: 1.5; color: #3e514e; }.evidence-item i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--mint); color: var(--teal); font-style: normal; }
.feedback-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }.feedback-actions .button { padding: 0 7px; font-size: 11px; }
.refusal-card { border-color: #e9c7c4; background: linear-gradient(135deg,#fff,#fdf5f4); text-align: center; padding: 28px 20px; }.refusal-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 13px; background: var(--red-soft); color: var(--red); font-size: 24px; }.refusal-card h3 { margin: 0 0 7px; }.refusal-card p { color: var(--muted); line-height: 1.6; font-size: 11px; }.refusal-reasons { text-align: left; border-top: 1px solid #efdcda; margin-top: 14px; padding-top: 12px; display: grid; gap: 7px; font-size: 10px; color: #8e4a44; }

.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; padding: 19px; }.field { display: grid; gap: 7px; }.field.full { grid-column: 1/-1; }.field label, .dialog label { color: var(--muted); font-size: 10px; font-weight: 600; }.field input, .field select, .dialog textarea { width: 100%; border: 1px solid var(--line); background: #fbfdfc; border-radius: 9px; padding: 9px 10px; outline: none; color: var(--ink); }.field input:focus, .field select:focus, .dialog textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,123,114,.08); }
.ihc-table input { width: 74px; height: 31px; border: 1px solid var(--line); border-radius: 7px; padding: 0 7px; }.score-pill { width: 34px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--mint); color: var(--teal); font-weight: 700; }.form-footer { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }.form-footer p { color: var(--muted); font-size: 10px; margin: 0; }
.score-ring { width: 150px; height: 150px; margin: 14px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--teal) 0 58%, #e7efed 58%); position: relative; }.score-ring:after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: white; }.score-ring div { z-index: 1; text-align: center; }.score-ring strong { display: block; font: 34px Georgia, serif; }.score-ring small { color: var(--muted); font-size: 9px; }
.checklist { display: grid; gap: 9px; padding: 0 18px 18px; }.check { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #edf2f1; font-size: 11px; }.check span:last-child { color: var(--green); }

.risk-hero { color: white; background: linear-gradient(125deg, #153b37 0%, #23645c 64%, #2e796d 100%); border-radius: 16px; padding: 24px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 25px; position: relative; overflow: hidden; }.risk-hero:after { content: ""; width: 270px; height: 270px; position: absolute; right: -90px; top: -110px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 30px rgba(255,255,255,.03),0 0 0 60px rgba(255,255,255,.02); }.risk-hero h2 { font-family: Georgia, "Songti SC", serif; font-size: 23px; margin: 6px 0; }.risk-hero p { color: #b5d2cd; font-size: 11px; line-height: 1.6; max-width: 440px; }.risk-points { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; z-index: 1; }.risk-point { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 17px; backdrop-filter: blur(5px); }.risk-point span { color: #add1ca; font-size: 10px; }.risk-point strong { display: block; font: 31px Georgia, serif; margin: 7px 0; }.risk-point small { font-size: 9px; color: #d5e4e1; }
.driver-bars { padding: 19px; display: grid; gap: 13px; }.driver-row { display: grid; grid-template-columns: 115px 1fr 50px; align-items: center; gap: 10px; font-size: 10px; }.bar-track { height: 7px; border-radius: 6px; background: #eaf0ef; overflow: hidden; }.bar-fill { height: 100%; background: var(--teal); border-radius: 6px; }.bar-fill.amber { background: var(--amber); }.bar-fill.red { background: var(--red); }
.timeline { padding: 20px; }.timeline-item { display: grid; grid-template-columns: 82px 22px 1fr; min-height: 72px; }.timeline-date { color: var(--muted); font-size: 10px; padding-top: 2px; }.timeline-mark { position: relative; }.timeline-mark:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); position: absolute; left: 3px; top: 2px; box-shadow: 0 0 0 4px var(--mint); }.timeline-mark:after { content: ""; width: 1px; background: var(--line); position: absolute; left: 7px; top: 15px; bottom: 0; }.timeline-item:last-child .timeline-mark:after { display: none; }.timeline-copy strong { display: block; font-size: 11px; }.timeline-copy p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.donut-wrap { display: grid; place-items: center; padding: 22px; }.donut { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--teal) 0 72%, var(--amber) 72% 88%, var(--red) 88% 94%, #e6eceb 94%); display: grid; place-items: center; }.donut:before { content: "94%\A 适用率"; white-space: pre; text-align: center; width: 106px; height: 106px; border-radius: 50%; background: white; display: grid; place-items: center; font: 18px/1.3 Georgia, serif; color: var(--ink); }
.trend { height: 215px; padding: 24px 18px 18px; display: flex; gap: 12px; align-items: flex-end; border-bottom: 1px solid var(--line); background-image: linear-gradient(#edf2f1 1px, transparent 1px); background-size: 100% 40px; }.trend-col { flex: 1; display: grid; gap: 5px; align-items: end; justify-items: center; height: 100%; }.trend-bar { width: 48%; min-width: 18px; background: linear-gradient(#45ae9c, var(--teal)); border-radius: 5px 5px 0 0; }.trend-col small { color: var(--muted); font-size: 8px; }

.toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 370px; transform: translateY(100px); opacity: 0; color: white; background: #153b37; box-shadow: 0 12px 35px rgba(0,0,0,.2); border-radius: 11px; padding: 13px 16px; font-size: 12px; transition: .25s ease; }.toast.show { transform: translateY(0); opacity: 1; }
.dialog { width: min(520px, calc(100vw - 28px)); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 22px 70px rgba(9,36,33,.3); }.dialog::backdrop { background: rgba(8,25,23,.58); backdrop-filter: blur(3px); }.dialog form { padding: 21px; }.dialog-head { display: flex; justify-content: space-between; margin-bottom: 17px; }.dialog-head h3 { margin: 5px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 22px; }.dialog-close { border: 0; background: var(--soft); border-radius: 50%; width: 30px; height: 30px; color: var(--muted); font-size: 20px; }.dialog label { display: grid; gap: 7px; margin-top: 13px; }.dialog textarea { resize: vertical; line-height: 1.55; }.notice { margin-top: 14px; border-radius: 9px; padding: 10px; color: #826123; background: var(--amber-soft); font-size: 10px; line-height: 1.5; display: flex; gap: 8px; }.notice span { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--amber); flex: 0 0 auto; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }.role-list { display: grid; gap: 8px; }.role-option { border: 1px solid var(--line); border-radius: 11px; background: white; padding: 12px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; text-align: left; }.role-option:hover, .role-option.active { border-color: var(--teal); background: #f0faf7; }.role-option strong, .role-option small { display: block; }.role-option strong { font-size: 12px; }.role-option small { font-size: 9px; color: var(--muted); margin-top: 3px; }.role-option em { color: var(--teal); font-style: normal; }
.empty { padding: 60px 20px; text-align: center; color: var(--muted); }.empty i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--soft); margin: 0 auto 12px; font-style: normal; font-size: 22px; }.empty h3 { color: var(--ink); margin: 0 0 7px; }
.loading-overlay { position: absolute; inset: 48px 0 48px; background: rgba(8,19,18,.86); display: none; z-index: 3; place-items: center; color: white; }.loading-overlay.show { display: grid; }.loader-card { width: 310px; text-align: center; }.loader { width: 48px; height: 48px; margin: 0 auto 15px; border: 3px solid rgba(255,255,255,.15); border-top-color: #5ed2bd; border-radius: 50%; animation: spin 1s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }.loader-card h3 { font-size: 14px; }.loader-card p { color: #90aaa5; font-size: 10px; }.progress-line { height: 4px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; margin-top: 13px; }.progress-line i { display: block; width: 10%; height: 100%; background: #5ed2bd; transition: width .4s; }

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 76px 1fr; }.sidebar { padding: 24px 10px 14px; }.brand { padding-left: 8px; }.brand > div:last-child, .nav-item span, .nav-item b, .model-status div, .user-card > span:nth-child(2), .user-card em { display: none; }.nav-item { grid-template-columns: 1fr; text-align: center; }.nav-item i { margin: auto; }.model-status { justify-content: center; }.user-card { display: flex; justify-content: center; }.analysis-grid, .two-col { grid-template-columns: 1fr; }.kpi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .demo-ribbon { font-size: 9px; }.app-shell { display: block; }.sidebar { position: fixed; transform: translateX(-100%); width: 244px; top: 28px; transition: .2s; }.sidebar.open { transform: translateX(0); }.sidebar .brand > div:last-child, .sidebar .nav-item span, .sidebar .nav-item b, .sidebar .model-status div, .sidebar .user-card > span:nth-child(2), .sidebar .user-card em { display: block; }.sidebar .nav-item { grid-template-columns: 28px 1fr auto; text-align: left; }.sidebar .nav-item i { margin: 0; }.sidebar .model-status { justify-content: flex-start; }.sidebar .user-card { display: grid; }.topbar { padding: 0 15px; }.mobile-menu { display: block; }.breadcrumb { margin-right: auto; }.global-search, .date-label { display: none; }.content { padding: 20px 14px 36px; }.page-head { align-items: flex-start; flex-direction: column; }.kpi-grid { grid-template-columns: 1fr 1fr; }.steps { overflow-x: auto; grid-template-columns: repeat(5,150px); }.case-banner { align-items: flex-start; flex-direction: column; gap: 13px; }.case-banner-meta { flex-wrap: wrap; gap: 13px; }.form-grid { grid-template-columns: 1fr; }.field.full { grid-column: auto; }.risk-hero { grid-template-columns: 1fr; }.table-scroll { overflow-x: auto; }.table-scroll table { min-width: 760px; }.feedback-actions { grid-template-columns: 1fr; }.driver-row { grid-template-columns: 85px 1fr 40px; }
}