:root {
  --navy: #0c2d57;
  --blue: #1677c8;
  --ice: #eaf7ff;
  --cyan: #33b5d5;
  --text: #17324d;
  --muted: #6d8194;
  --line: #d9e7f2;
  --surface: #ffffff;
  --bg: #f4f9fd;
  --a: #c62828;
  --a-bg: #ffebee;
  --b: #d66b00;
  --b-bg: #fff3e0;
  --c: #9a6b00;
  --c-bg: #fff8dd;
  --d: #6b4ca5;
  --d-bg: #f1ebff;
  --ok: #18794e;
  --shadow: 0 14px 40px rgba(12, 45, 87, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  background:
    radial-gradient(circle at 90% 5%, rgba(51,181,213,.15), transparent 28%),
    linear-gradient(180deg, #f8fcff 0%, var(--bg) 100%);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.hero {
  background: linear-gradient(125deg, #09284d 0%, #0d4f83 62%, #157ca7 100%);
  color: white;
  padding: 28px max(24px, calc((100vw - 1480px)/2));
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  right: -130px;
  top: -260px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255,255,255,.035), 0 0 0 86px rgba(255,255,255,.025);
}
.brand-row { display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark {
  width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(145deg,#fff,#bfeeff); color:var(--navy); font-weight:900; font-size:22px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.brand h1 { margin:0; font-size:clamp(22px,2.5vw,34px); letter-spacing:.2px; }
.brand p { margin:5px 0 0; opacity:.82; font-size:14px; }
.version-pill { padding:9px 13px; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.1); border-radius:999px; font-size:13px; white-space:nowrap; }

main { max-width:1480px; margin:0 auto; padding:24px; }
.toolbar, .panel, .summary-card, .notice {
  background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
}
.toolbar { padding:15px 17px; display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.toolbar-left, .toolbar-right { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
label.compact { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; }
select, .search-box {
  border:1px solid var(--line); background:white; border-radius:10px; padding:9px 11px; color:var(--text); outline:none;
}
.search-box { min-width:260px; }
.toggle { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; }
.toggle input { accent-color:var(--blue); }

.btn { border:none; border-radius:11px; padding:10px 15px; font-weight:700; transition:.18s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { color:white; background:linear-gradient(135deg,var(--blue),#0f5f9b); box-shadow:0 8px 18px rgba(22,119,200,.25); }
.btn-secondary { color:var(--navy); background:var(--ice); border:1px solid #c8e8f8; }
.btn-ghost { color:var(--muted); background:#f7fafc; border:1px solid var(--line); }

.workspace { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); gap:20px; align-items:start; }
.panel { padding:20px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.panel h2 { margin:0; font-size:19px; color:var(--navy); }
.panel-sub { margin:5px 0 0; color:var(--muted); font-size:13px; }
.meta-chip { padding:7px 10px; border-radius:999px; color:#0d5c83; background:var(--ice); font-size:12px; white-space:nowrap; }

.field { margin-bottom:16px; }
.field-title { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:7px; }
.field-title label { font-weight:750; font-size:14px; }
.counter { font-size:12px; color:var(--muted); }
textarea {
  width:100%; resize:vertical; min-height:80px; border:1px solid var(--line); border-radius:13px; padding:12px 13px;
  outline:none; color:var(--text); background:#fbfdff; line-height:1.58; transition:.18s ease;
}
textarea:focus { border-color:#76bce8; box-shadow:0 0 0 4px rgba(22,119,200,.09); background:white; }
textarea.title-input { min-height:92px; }
textarea.description-input { min-height:145px; }
.bullet-grid { display:grid; gap:10px; }
.bullet-row { display:grid; grid-template-columns:34px 1fr; gap:9px; align-items:start; }
.bullet-num { width:32px; height:32px; border-radius:10px; background:var(--ice); color:var(--blue); display:grid; place-items:center; font-weight:800; font-size:13px; margin-top:4px; }

.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.summary-card { padding:13px 12px; box-shadow:none; }
.summary-card .value { font-size:26px; font-weight:850; line-height:1; }
.summary-card .label { margin-top:6px; color:var(--muted); font-size:12px; }
.summary-card.a .value { color:var(--a); }
.summary-card.b .value { color:var(--b); }
.summary-card.c .value { color:var(--c); }
.summary-card.d .value { color:var(--d); }
.status-banner { border-radius:14px; padding:13px 15px; margin-bottom:14px; font-size:14px; font-weight:700; border:1px solid var(--line); background:#f7fafc; }
.status-banner.danger { background:var(--a-bg); color:#9e1f1f; border-color:#ffc9cf; }
.status-banner.warn { background:var(--b-bg); color:#9a4b00; border-color:#ffd9ae; }
.status-banner.ok { background:#eaf8f1; color:var(--ok); border-color:#bfe9d3; }

.result-controls { display:flex; gap:9px; align-items:center; justify-content:space-between; margin:10px 0; flex-wrap:wrap; }
.result-list { display:grid; gap:10px; max-height:730px; overflow:auto; padding-right:4px; }
.empty { text-align:center; color:var(--muted); padding:48px 15px; border:1px dashed #bdd4e5; border-radius:15px; background:#fbfdff; }
.result-card { border:1px solid var(--line); border-left-width:5px; border-radius:13px; padding:13px 14px; background:white; }
.result-card[data-severity="A"] { border-left-color:var(--a); }
.result-card[data-severity="B"] { border-left-color:var(--b); }
.result-card[data-severity="C"] { border-left-color:var(--c); }
.result-card[data-severity="D"] { border-left-color:var(--d); }
.result-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.result-term { font-weight:850; color:var(--navy); word-break:break-word; }
.badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.badge { padding:4px 8px; border-radius:999px; font-size:11px; background:#eef5fa; color:#526b7e; }
.badge.sev-A { background:var(--a-bg); color:var(--a); }
.badge.sev-B { background:var(--b-bg); color:var(--b); }
.badge.sev-C { background:var(--c-bg); color:var(--c); }
.badge.sev-D { background:var(--d-bg); color:var(--d); }
.result-body { display:grid; gap:7px; margin-top:10px; font-size:13px; line-height:1.55; }
.result-body strong { color:#38536a; }
.context { padding:8px 10px; border-radius:9px; background:#f5f9fc; color:#405b70; word-break:break-word; }
.context mark { border-radius:4px; padding:0 2px; }
.result-card[data-severity="A"] mark { background:#ffcdd2; color:#861820; }
.result-card[data-severity="B"] mark { background:#ffe0b2; color:#8b4800; }
.result-card[data-severity="C"] mark { background:#fff0a8; color:#6e5100; }
.result-card[data-severity="D"] mark { background:#ded1ff; color:#56348d; }
.source-link { color:var(--blue); text-decoration:none; word-break:break-all; }

.preview-section { margin-top:20px; }
.preview-grid { display:grid; gap:12px; }
.preview-card { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white; }
.preview-title { padding:9px 12px; background:#f2f8fc; font-weight:750; font-size:13px; border-bottom:1px solid var(--line); }
.preview-text { padding:12px; white-space:pre-wrap; line-height:1.7; font-size:13px; word-break:break-word; }
.preview-text mark { padding:1px 2px; border-radius:4px; }
.preview-text mark.A { background:#ffcdd2; color:#861820; }
.preview-text mark.B { background:#ffe0b2; color:#8b4800; }
.preview-text mark.C { background:#fff0a8; color:#6e5100; }
.preview-text mark.D { background:#ded1ff; color:#56348d; }

.notice { margin-top:20px; padding:14px 16px; color:var(--muted); font-size:13px; box-shadow:none; }
.footer { max-width:1480px; margin:0 auto; padding:2px 24px 28px; color:#7a8fa1; font-size:12px; text-align:center; }

@media (max-width:1080px) {
  .workspace { grid-template-columns:1fr; }
  .result-list { max-height:none; }
}
@media (max-width:720px) {
  main { padding:14px; }
  .hero { padding:21px 16px; }
  .version-pill { display:none; }
  .toolbar { align-items:stretch; }
  .toolbar-left, .toolbar-right { width:100%; }
  .toolbar-right .btn { flex:1; }
  .search-box { min-width:0; width:100%; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .panel { padding:15px; }
}

/* Dynamic dictionary V2 status */
.meta-chip.loading { background: #eef5fb; color: #536b7f; }
.meta-chip.online { background: #e6f7ef; color: #087a52; border-color: #bfe9d6; }
.meta-chip.cache { background: #fff4d8; color: #8a5a00; border-color: #f1d99e; }
.meta-chip.fallback { background: #fff0ee; color: #a43b32; border-color: #f0c4bf; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }