/* ????? demo?????????????????????????? */
:root {
  --brand: #7b1e2e;
  --brand-tint: #f6ecee;
  --bg: #faf8f4;
  --paper: #ffffff;
  --ink: #1f1d1a;
  --ink2: #5b574f;
  --ink3: #8d887e;
  --line: #e6e1d7;
  --line2: #d6d0c3;
  --pos: #6f8f77;
  --neu: #bdb8ad;
  --neg: #a4493d;
  --hi: #d4351c;
  --hi-bg: #fdecea;
  --mid: #c77a00;
  --mid-bg: #fdf3e0;
  --lo: #5b7f95;
  --lo-bg: #eaf1f5;
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
  --sans: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.6 var(--sans); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 .6em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.serif { font-family: var(--serif); }
.eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); font-weight: 600; }
.muted { color: var(--ink3); }
.mt { margin-top: 14px; }
.note { color: var(--ink3); font-size: 12px; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
textarea { width: 100%; border: 1px solid var(--line2); background: #fff; padding: 8px 10px; border-radius: 2px; resize: vertical; }
input[type=text], input[type=search], input[type=password], input[type=email], select { border: 1px solid var(--line2); background: #fff; padding: 7px 10px; border-radius: 2px; min-height: 34px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- ?? ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--paper); border-right: 1px solid var(--line); padding: 22px 0 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 0 22px 22px; border-bottom: 1px solid var(--line); }
.bmark { width: 38px; height: 38px; background: var(--brand); color: #fff; font: 600 19px/38px var(--serif); text-align: center; flex: none; }
.bmark.sm { width: 28px; height: 28px; font-size: 14px; line-height: 28px; }
.side-client { font: 600 15px/1.2 var(--serif); }
.side-prod { font-size: 11px; color: var(--ink3); margin-top: 3px; letter-spacing: .04em; }
nav { padding: 14px 0; flex: 1; overflow: auto; }
.nav-group { padding: 6px 0 10px; }
.nav-gt { padding: 0 22px 6px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.nav-i { display: flex; justify-content: space-between; align-items: center; padding: 8px 22px; color: var(--ink2); border-left: 3px solid transparent; }
.nav-i:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.nav-i.on { border-left-color: var(--brand); color: var(--ink); font-weight: 600; background: var(--brand-tint); }
.badge { font-style: normal; font-size: 11px; background: var(--brand); color: #fff; border-radius: 9px; padding: 0 7px; line-height: 17px; }
.side-ft { padding: 12px 22px 0; font-size: 11px; color: var(--ink3); border-top: 1px solid var(--line); line-height: 1.7; }
body.no-powered .side-ft div:first-child { display: none; }
.main { min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 36px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.top-r { display: flex; align-items: center; gap: 14px; }
.asof { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.acct { display: flex; align-items: center; gap: 9px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; line-height: 30px; font-size: 13px; flex: none; }
.acct-t { display: flex; flex-direction: column; line-height: 1.25; }
.acct-t small { color: var(--ink3); font-size: 11px; }
.menu { display: none; }
.view { padding: 28px 36px 60px; max-width: 1240px; }
.page-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-hd h1 { font-size: 28px; line-height: 1.2; margin-top: 4px; }
.page-hd .sub { color: var(--ink2); margin-top: 6px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- ????? ---------- */
.btn { border: 1px solid var(--ink); background: transparent; color: var(--ink); padding: 7px 16px; border-radius: 2px; min-height: 34px; }
.btn:hover { background: var(--ink); color: #fff; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { border-color: var(--line2); color: var(--ink2); }
.btn.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink2); }
.btn.sm { padding: 3px 11px; min-height: 28px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; font-size: 17px; color: var(--ink3); padding: 2px 6px; line-height: 1; }
.icon-btn:hover { color: var(--ink); }
.icon-btn.fav.on { color: #b98a2b; }
.chip { display: inline-block; font-size: 12px; padding: 0 8px; line-height: 20px; border-radius: 10px; background: #ece8df; color: var(--ink2); }
.chip.up { background: #e7efe9; color: #46664e; }
.chip.down { background: #f5e5e2; color: var(--neg); }
.chip.muted { background: transparent; border: 1px dashed var(--line2); color: var(--ink3); }
.lv { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 8px; line-height: 20px; border-radius: 2px; }
.lv-high { background: var(--hi); color: #fff; }
.lv-mid { background: var(--mid-bg); color: var(--mid); }
.lv-low { background: var(--lo-bg); color: var(--lo); }
.lv-digest { background: #ece8df; color: var(--ink2); }
.st { display: inline-block; font-size: 12px; padding: 0 9px; line-height: 21px; border-radius: 11px; border: 1px solid var(--line2); color: var(--ink2); background: #fff; }
.st-pending { border-color: var(--hi); color: var(--hi); background: var(--hi-bg); }
.st-handling { border-color: var(--mid); color: var(--mid); background: var(--mid-bg); }
.st-responded { border-color: var(--lo); color: var(--lo); background: var(--lo-bg); }
.st-closed { color: var(--ink3); }
.tdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.tone-pos { background: var(--pos); } .tone-neu { background: var(--neu); } .tone-neg { background: var(--neg); }
.flag { display: inline-block; font-size: 11px; padding: 0 7px; line-height: 18px; border: 1px solid var(--line2); color: var(--ink2); border-radius: 2px; margin-right: 6px; }
.flag.ok { border-color: var(--pos); color: #46664e; }
.flag.warn { border-color: var(--mid); color: var(--mid); }
.src { display: inline-block; font-size: 11px; padding: 0 7px; line-height: 18px; border-radius: 2px; background: #ece8df; color: var(--ink2); margin-right: 6px; }
.src-official { background: var(--lo-bg); color: var(--lo); }
.src-kol { background: var(--mid-bg); color: var(--mid); }
.src-complaint { background: var(--hi-bg); color: var(--hi); }

/* ---------- ????? ---------- */
.card { background: var(--paper); border: 1px solid var(--line); padding: 20px 22px; }
.card + .card, .grid + .card, .card + .grid, .grid + .grid, .verdict + .grid, .verdict + .card { margin-top: 18px; }
.card h3 { font-size: 17px; margin-bottom: 4px; }
.card .card-sub { color: var(--ink3); font-size: 12px; margin-bottom: 12px; }
.card-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g21 { grid-template-columns: 2fr 1fr; }
.g12 { grid-template-columns: 1fr 2fr; }
.kpi { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px; }
.kpi-l { font-size: 12px; color: var(--ink3); letter-spacing: .04em; }
.kpi-v { font: 600 34px/1.15 var(--serif); margin-top: 6px; }
.kpi-v small { font-size: 14px; color: var(--ink3); font-weight: 400; margin-left: 4px; }
.kpi-s { margin-top: 6px; font-size: 12px; color: var(--ink2); min-height: 20px; }
.verdict { background: var(--brand-tint); border-left: 3px solid var(--brand); padding: 18px 24px 12px; margin-bottom: 18px; }
.verdict-hd { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.verdict-by { font-size: 12px; color: var(--ink2); }
.verdict-bd p { font: 15.5px/1.85 var(--serif); margin: 0 0 6px; }
.verdict.compact { padding: 12px 18px 6px; }
.verdict.compact .verdict-bd p { font-size: 14px; line-height: 1.7; }
.progress { height: 6px; background: #ece8df; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--brand); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- ????? ---------- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--ink3); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line2); }
.tbl td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: #fcfbf8; }
.tbl .r { text-align: right; }
.tbl a.t { font: 600 15px/1.4 var(--serif); color: var(--ink); }
.tbl a.t:hover { color: var(--brand); }
.tbl td small { display: block; color: var(--ink3); margin-top: 2px; font-size: 12px; }
.list-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row .t { font: 600 15px/1.4 var(--serif); color: var(--ink); display: block; }
.list-row small { color: var(--ink3); font-size: 12px; display: block; margin-top: 3px; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a, .tabs button { background: none; border: 0; padding: 8px 0; color: var(--ink2); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; }
.tabs .on { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line2); }
.seg button { border: 0; background: #fff; padding: 5px 14px; color: var(--ink2); border-right: 1px solid var(--line2); font-size: 13px; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: #fff; }

/* ---------- ????? ---------- */
.hbars { display: grid; gap: 9px; }
.hb { display: grid; grid-template-columns: 76px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.hb-l { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbars.wide .hb { grid-template-columns: minmax(96px, 40%) 1fr 64px; }
.hbars.wide .hb-l { white-space: normal; line-height: 1.35; }
.hb-t { height: 8px; background: #efebe2; display: block; }
.hb-t i { display: block; height: 100%; background: var(--brand); }
.hb-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.tonebar { display: flex; height: 10px; background: #efebe2; }
.tonebar i { display: block; height: 100%; }
.tonelegend { display: flex; gap: 16px; font-size: 12px; color: var(--ink2); margin-top: 8px; flex-wrap: wrap; }

/* ---------- ?? ---------- */
.chart { width: 100%; height: auto; display: block; }
.chart .gl { stroke: #ece8df; stroke-width: 1; }
.chart .ax { font-size: 10.5px; fill: var(--ink3); }
.chart .ln { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.chart .ln.bold { stroke-width: 2.4; }
.chart .ln.dash { stroke-dasharray: 4 3; }
.chart .endl { font-size: 11px; }
.chart .endl.bold { font-weight: 700; }
.chart .mk { stroke-width: 1; stroke-dasharray: 3 3; }
.chart .mk-project { stroke: var(--brand); fill: var(--brand); }
.chart .mk-event { stroke: var(--ink2); fill: var(--ink2); }
.chart .mk-high { stroke: var(--hi); fill: var(--hi); }
.chart .mk-mid { stroke: var(--mid); fill: var(--mid); }
.chart .mk-low { stroke: var(--lo); fill: var(--lo); }
.chart .mk-alert { stroke: var(--hi); fill: var(--hi); }
.chart .mk-act { stroke: var(--brand); fill: var(--brand); }
.chart .mkl { font-size: 10.5px; stroke: none; }
.chart .bar { fill: #d8d3c7; }
.chart .bar.neg { fill: var(--neg); }

/* ---------- ?? ---------- */
.art { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.art.lib-art { grid-template-columns: minmax(0, 1fr) auto; }
.art:first-child { padding-top: 4px; }
.art-main { min-width: 0; }
.art-main:after { content: ""; display: block; clear: both; }
.art-thumb-btn { float: left; position: relative; width: 72px; height: 72px; margin: 2px 12px 8px 0; padding: 0; border: 0; background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 6px, var(--line) 6px, var(--line) 7px); cursor: pointer; }
.art-thumb { width: 72px; height: 72px; object-fit: cover; display: block; }
.art-count { position: absolute; right: 4px; bottom: 4px; min-width: 18px; padding: 0 4px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.art-play { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.art-play:before { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }
.art-meta { font-size: 12px; color: var(--ink3); }
.art-title { font: 600 16px/1.45 var(--serif); margin: 4px 0 4px; }
.art-title a { color: var(--ink); }
.art-title a:hover { color: var(--brand); text-decoration: none; }
.art-sum { color: var(--ink2); font-size: 13px; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.art-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--ink2); min-width: 90px; }
.art-sel { padding-top: 3px; }
.art-detail h3 { font-size: 20px; line-height: 1.4; margin: 8px 0 8px; }
.art-detail .sum { color: var(--ink2); }
.art-body { margin-top: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.art-body img { max-width: 100%; height: auto; }
.trans { background: var(--bg); border-left: 3px solid var(--line2); padding: 10px 14px; margin: 14px 0; }
.trans h4 { font-size: 15px; margin: 4px 0; }
.trans p { color: var(--ink2); font-size: 13px; margin: 0; }
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 14px 0 0; font-size: 13px; }
.facts dt { color: var(--ink3); } .facts dd { margin: 0; }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 8px; grid-auto-flow: dense; align-items: start; column-gap: 16px; row-gap: 16px; }
.gcard { background: var(--paper); border: 1px solid var(--line); align-self: start; }
.gimgs { display: grid; gap: 2px; background: var(--line); }
.gimgs.n2, .gimgs.n3, .gimgs.n4 { grid-template-columns: 1fr 1fr; }
.g-cell { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--bg); cursor: pointer; }
.g-cell img { width: 100%; height: 140px; object-fit: cover; display: block; }
.gimgs.n1 .g-cell img { height: 220px; }
.g-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 22px; }
.gbody { padding: 10px 12px 12px; }
.gtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gtag { font-size: 12px; line-height: 1.35; color: var(--ink2); background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; }
.gtag.folder { color: var(--ink); }
.gbody h4 { margin: 0 0 4px; font: 600 14px/1.4 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gbody h4 a { color: inherit; }
.gbody h4 a:hover { color: var(--brand); text-decoration: none; }
.lib-zoom { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; }
.clip-shot { display: block; width: 100%; height: auto; margin: 12px 0 0; background: var(--bg); }
.clip { background: #f4f1ea; border: 1px solid var(--line2); padding: 10px 12px 8px; box-shadow: 2px 3px 0 #e9e5db; }
.clip-mast { display: flex; justify-content: space-between; font: 600 12px var(--serif); border-bottom: 2px solid var(--ink); padding-bottom: 4px; letter-spacing: .05em; }
.clip-body { padding: 8px 0 4px; }
.clip-sum { color: var(--ink2); font-size: 13px; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.clip-body h4 { font: 700 15px/1.35 var(--serif); margin: 0 0 8px; }
.clip-body h4 a { color: var(--ink); }
.clip-photo { float: right; width: 56px; height: 44px; margin: 0 0 4px 8px; object-fit: cover; background: repeating-linear-gradient(45deg, #cfc9bb, #cfc9bb 3px, #ddd8cb 3px, #ddd8cb 6px); }
.clip-lines { clear: both; }
.clip-lines i { display: block; height: 3px; background: #cfc9bb; margin: 5px 0; }
.clip-ft { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink2); border-top: 1px solid var(--line2); padding-top: 4px; }

/* ---------- ????? ---------- */
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters .search { flex: 1; min-width: 240px; }
.filters input[type=search] { width: 100%; }
.drawer { background: var(--paper); border: 1px solid var(--line); padding: 14px 18px; margin-bottom: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.drawer label { font-size: 12px; color: var(--ink3); display: block; }
.drawer select, .drawer input { width: 100%; margin-top: 4px; }
.radio { display: flex; align-items: center; gap: 8px; margin: 5px 0; cursor: pointer; font-size: 13px; }
.radios { margin-bottom: 8px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--ink3); margin-bottom: 4px; }
.field input[type=text], .field select { width: 100%; }
.switch { position: relative; width: 38px; height: 22px; background: var(--line2); border-radius: 11px; border: 0; padding: 0; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .15s; }
.switch.on { background: var(--brand); }
.switch.on::after { left: 19px; }

/* ---------- ??? ---------- */
.tl { position: relative; padding-left: 22px; margin: 0; list-style: none; }
.tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line2); }
.tl li { position: relative; padding: 0 0 16px; }
.tl li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--ink3); }
.tl li.st-pending::before { border-color: var(--hi); background: var(--hi); }
.tl li.st-handling::before { border-color: var(--mid); }
.tl li.st-responded::before { border-color: var(--lo); }
.tl li.st-closed::before { border-color: var(--ink3); background: var(--ink3); }
.tl .when { font-size: 12px; color: var(--ink3); }
.path { display: flex; gap: 0; flex-wrap: wrap; align-items: stretch; }
.path .node { background: var(--paper); border: 1px solid var(--line); padding: 10px 14px; min-width: 150px; max-width: 220px; font-size: 12.5px; position: relative; margin-right: 22px; margin-bottom: 10px; }
.path .node::after { content: "?"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); color: var(--ink3); }
.path .node:last-child { margin-right: 0; } .path .node:last-child::after { display: none; }
.path .node b { display: block; font-family: var(--serif); font-size: 14px; }
.path .node small { color: var(--ink3); }
.alertbar { display: flex; gap: 16px; align-items: center; padding: 14px 20px; background: var(--hi-bg); border-left: 4px solid var(--hi); margin-bottom: 18px; }
.alertbar.mid { background: var(--mid-bg); border-left-color: var(--mid); }
.alertbar.low { background: var(--lo-bg); border-left-color: var(--lo); }
.alertbar .t { font: 600 16px var(--serif); }
.empty { color: var(--ink3); padding: 28px 0; text-align: center; }

/* ---------- ?? / ?? / ??? ---------- */
.modal-wrap { position: fixed; inset: 0; background: rgba(31, 29, 26, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 100; overflow: auto; }
.modal { background: var(--paper); width: 100%; max-width: 480px; border-top: 3px solid var(--brand); }
.modal.wide { max-width: 680px; }
.modal-hd { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px 0; }
.modal-hd h3 { font-size: 17px; }
.modal-bd { padding: 12px 22px 18px; max-height: 66vh; overflow: auto; }
.modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 22px 18px; border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 36px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 20px; opacity: 0; transition: all .25s; z-index: 200; font-size: 13px; max-width: 86vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.presenter { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; background: #fff; border-left: 1px solid var(--line2); box-shadow: -8px 0 24px rgba(0, 0, 0, .08); z-index: 150; padding: 18px 20px; overflow: auto; transform: translateX(100%); transition: transform .2s; }
.presenter.open { transform: none; }
.pres-hd { display: flex; justify-content: space-between; align-items: center; }
.pres-g { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- ???A4 ????? ---------- */
.paper-wrap { background: #e9e5dc; padding: 28px 0 50px; }
.paper { width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto 22px; background: #fff; padding: 64px 68px; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); position: relative; page-break-after: always; }
.paper:last-child { page-break-after: auto; }
.paper .ph { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line2); padding-bottom: 8px; margin-bottom: 30px; }
.paper .pf { position: absolute; left: 68px; right: 68px; bottom: 30px; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink3); border-top: 1px solid var(--line); padding-top: 6px; }
.paper h2 { font-size: 22px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.paper h3 { font-size: 15px; margin: 20px 0 8px; }
.paper .cover { display: flex; flex-direction: column; justify-content: center; min-height: 900px; }
.paper .cover h1 { font-size: 40px; line-height: 1.25; margin: 20px 0 14px; }
.paper .cover .mk { width: 54px; height: 54px; background: var(--brand); color: #fff; font: 600 28px/54px var(--serif); text-align: center; }
.paper .cover .meta { color: var(--ink2); margin-top: 28px; line-height: 2; }
.paper .toc { list-style: none; padding: 0; margin: 14px 0; }
.paper .toc li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dotted var(--line2); font: 15px var(--serif); }
.paper .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin: 16px 0; }
.paper .kpis > div { padding: 14px 10px; border-right: 1px solid var(--line); }
.paper .kpis > div:last-child { border-right: 0; }
.paper .kpis .v { font: 600 28px var(--serif); }
.paper .kpis .l { font-size: 11px; color: var(--ink3); }
.paper .item { padding: 12px 0; border-bottom: 1px solid var(--line); page-break-inside: avoid; }
.paper .item h4 { font-size: 14.5px; margin: 0 0 3px; }
.paper .item .cm { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--brand); color: var(--ink); font-size: 13px; }
.paper .item .en { color: var(--ink2); font-size: 12.5px; }
.paper .verdict { margin-bottom: 14px; }
.paper p { font-size: 13.5px; }
.report-bar { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }

/* ---------- ?? ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.login-l { background: #1f1d1a; color: #eee9dd; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; }
.login-l h1 { font-size: 40px; line-height: 1.3; font-weight: 600; margin: 0 0 18px; color: #fff; }
.login-l p { color: #b8b2a3; max-width: 440px; font: 16px/1.9 var(--serif); }
.login-l .brand { font: 600 20px var(--serif); letter-spacing: .3em; }
.login-l .tag { font-size: 12px; color: #8d887e; letter-spacing: .08em; }
.login-r { display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-form { width: 100%; max-width: 360px; }
.login-form h2 { font-size: 26px; margin-bottom: 6px; }
.login-form .field input { width: 100%; }

/* ---------- ??? ---------- */
.phone-wrap { min-height: 100vh; background: #e9e5dc; display: flex; justify-content: center; }
.phone { width: 100%; max-width: 430px; min-height: 100vh; background: var(--bg); position: relative; }
.m-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.m-top .t { font: 600 16px var(--serif); flex: 1; }
.m-body { padding: 18px 18px 90px; }
.m-card { background: var(--paper); border: 1px solid var(--line); padding: 16px 16px; margin-bottom: 14px; }
.m-card h3 { font-size: 18px; line-height: 1.4; margin: 6px 0 8px; }
.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.m-kpis > div { padding: 10px 6px; border-right: 1px solid var(--line); text-align: center; }
.m-kpis > div:last-child { border-right: 0; }
.m-kpis .v { font: 600 22px var(--serif); }
.m-kpis .l { font-size: 11px; color: var(--ink3); }
.m-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; z-index: 10; }
.m-bar .btn { flex: 1; }
.wx { background: #ededed; padding: 14px; }
.wx-msg { display: flex; gap: 10px; margin-bottom: 14px; }
.wx-av { width: 38px; height: 38px; background: var(--brand); color: #fff; text-align: center; line-height: 38px; border-radius: 4px; font-family: var(--serif); flex: none; }
.wx-card { background: #fff; border-radius: 4px; padding: 12px 14px; flex: 1; border-left: 4px solid var(--hi); }
.wx-card.digest { border-left-color: var(--brand); }
.wx-card .t { font-weight: 600; margin-bottom: 4px; }
.wx-card .d { font-size: 12.5px; color: var(--ink2); }
.sheet-wrap { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 430px; background: #fff; padding: 18px 18px 26px; border-radius: 14px 14px 0 0; }
.sheet h4 { font-size: 16px; margin-bottom: 12px; }
.sheet .opt { display: block; width: 100%; text-align: left; border: 1px solid var(--line2); background: #fff; padding: 12px 14px; margin-bottom: 8px; }
.sheet .opt.on { border-color: var(--brand); background: var(--brand-tint); }
.fwd-preview { background: var(--bg); border: 1px solid var(--line); padding: 12px 14px; font-size: 13px; margin: 10px 0 14px; white-space: pre-line; }

/* ---------- ?????????? ---------- */
.info { border: 1px solid var(--line2); background: #fff; color: var(--ink3); width: 15px; height: 15px; border-radius: 50%; font: italic 600 10px/13px var(--serif); padding: 0; margin-left: 6px; vertical-align: 1px; }
.info:hover { border-color: var(--brand); color: var(--brand); }
.kpi-foot { margin: 10px 2px 0; }
.bench { margin-top: 10px; }
.bench-t { position: relative; display: block; height: 6px; background: #efebe2; }
.bench-t i { position: absolute; top: 0; bottom: 0; background: #d6d0c3; }
.bench-t b { position: absolute; top: -4px; width: 2px; height: 14px; background: var(--ink); transform: translateX(-1px); }
.bench-l { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 5px; }
.bench.good .bench-t b { background: #46664e; } .bench.good .bench-l { color: #46664e; }
.bench.bad .bench-t b { background: var(--neg); } .bench.bad .bench-l { color: var(--neg); }
.claim { font: 600 18px/1.45 var(--serif); margin: 0 0 4px; }
.stages { display: flex; gap: 0; margin: 10px 0 6px; }
.stg { flex: 1; text-align: center; font-size: 12.5px; padding: 6px 4px; background: #efebe2; color: var(--ink3); border-right: 2px solid var(--paper); position: relative; }
.stg:last-child { border-right: 0; }
.stg.past { background: #e1dcd0; color: var(--ink2); }
.stg.on { background: var(--ink); color: #fff; font-weight: 600; }
.stage-card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; align-items: center; }
.stage-card .big { font: 600 26px var(--serif); }
table.mx { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.mx th { font-weight: 500; color: var(--ink2); text-align: left; padding: 4px 6px; white-space: nowrap; }
.mx thead th { text-align: center; font-size: 11.5px; color: var(--ink3); }
.mx td { position: relative; text-align: center; height: 34px; background: #f4f1ea; }
.mx td i { position: absolute; inset: 0; background: var(--brand); }
.mx td span { position: relative; font-weight: 600; }
.mx td.zero span { color: var(--ink3); font-weight: 400; }
.chart .mk-cal { stroke: var(--ink3); fill: var(--ink3); }
.chart .lane { font-size: 11.5px; fill: var(--ink2); }
.chart .dot { fill: #b8b2a5; }
.chart .dot.neg { fill: var(--neg); }
.chart .ring { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.chart .kl { font-size: 10.5px; fill: var(--ink); font-weight: 600; }
.chart .qbg { fill: var(--brand-tint); }
.chart .ref { stroke: var(--line2); stroke-dasharray: 3 3; }
.chart .ql { font-size: 12px; fill: var(--ink3); }
.chart .bub { fill: #cfcabf; fill-opacity: .7; stroke: #8d887e; }
.chart .bub.self { fill: var(--brand); fill-opacity: .8; stroke: var(--brand); }
.chart .bl { font-size: 12.5px; fill: var(--ink2); }
.chart .bl.self { fill: var(--brand); font-weight: 700; }
.hist { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
.hist td, .hist th { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hist th { font-size: 11px; color: var(--ink3); font-weight: 600; }
.pv { border-left: 3px solid var(--lo); }
.pv .pv-done { background: var(--lo-bg); color: var(--lo); padding: 8px 12px; font-size: 13px; margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.packs > .card { margin: 0; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.pack h3 { font-size: 19px; }
.pack dl { display: grid; grid-template-columns: 76px 1fr; gap: 8px 12px; font-size: 13px; margin: 12px 0 0; }
.pack dt { color: var(--ink3); } .pack dd { margin: 0; }

/* ---------- ?????? 16:9 ??? ---------- */
.paper .cover .by { margin-top: 36px; display: flex; align-items: center; gap: 12px; color: var(--ink2); font-size: 13px; }
.paper .cover .by .mk2 { width: 34px; height: 34px; color: #fff; font: 600 17px/34px var(--serif); text-align: center; }
.paper-wrap.slides .paper { width: 1123px; min-height: 632px; padding: 40px 56px 56px; }
.paper-wrap.slides .paper .cover { min-height: 520px; }
.paper-wrap.slides .paper .cover h1 { font-size: 36px; }
.paper-wrap.slides .paper .bd { column-count: 2; column-gap: 40px; }
.paper-wrap.slides .paper .bd > * { break-inside: avoid; }
.paper-wrap.slides .paper .bd h3 { break-after: avoid; }
.paper-wrap.slides .paper .bd > .grid { column-span: all; }
.paper-wrap.slides .paper .pf { bottom: 18px; left: 56px; right: 56px; }
.method td, .method th { font-size: 12.5px; }

/* ---------- ?????? ---------- */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: 1fr; }
  .g2, .g21, .g12 { grid-template-columns: 1fr; }
  .stage-card { grid-template-columns: 1fr; }
  .drawer { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 90; left: 0; top: 0; width: 248px; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 8px 0 30px rgba(0, 0, 0, .2); }
  .menu { display: inline-block; }
  .view { padding: 20px 16px 50px; }
  .top { padding: 10px 16px; }
  .acct-t, .asof { display: none; }
  .login { grid-template-columns: 1fr; }
  .login-l { padding: 32px; }
  .paper { padding: 36px 24px; }
}
@media (max-width: 460px) {
  .phone { max-width: 100%; }
  .kpi-v { font-size: 28px; }
}
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .side, .top, .presenter, .toast, .no-print, .report-bar { display: none !important; }
  .shell { display: block; }
  .view { padding: 0; max-width: none; }
  .paper-wrap { background: #fff; padding: 0; }
  .paper { box-shadow: none; margin: 0; width: 210mm; min-height: 297mm; padding: 18mm 20mm; }
  .paper .pf { left: 20mm; right: 20mm; bottom: 10mm; }
  .paper-wrap.slides .paper { width: 297mm; min-height: 167mm; padding: 10mm 14mm 14mm; }
  .paper-wrap.slides .paper .pf { left: 14mm; right: 14mm; bottom: 5mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.packs-page { max-width: 1180px; margin: 0 auto; padding: 40px 28px 60px; }
.art.raw { background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(0,0,0,.015) 10px 20px); }
.art.raw .art-title { color: var(--ink2); }
.note-card { margin-bottom: 14px; background: #f6f3ec; }

/* ???? */
.sx-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: start; }
.sx-side .card + .card { margin-top: 14px; }
.sx-side .card { padding: 14px 16px; }
.sx-list { list-style: none; margin: 8px 0; padding: 0; font-size: 13px; }
.sx-list li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.sx-list li:last-child { border-bottom: 0; }
.sx-list li > a, .sx-list li > span:first-child { flex: 1; }
.sx-list li.on > a { color: var(--brand); font-weight: 700; }
.icon-btn.sm { width: 22px; height: 22px; font-size: 14px; line-height: 20px; }
.sx-main { min-width: 0; }
.sx-q { gap: 8px; flex-wrap: wrap; }
.sx-q input[type=search] { flex: 1; min-width: 260px; }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; margin-top: 12px; }
.sx-grid label, .sx-media > label { display: block; font-size: 12px; color: var(--ink3); margin-bottom: 4px; }
.sx-grid select, .sx-grid input { width: 100%; }
.sx-grid .wide { grid-column: 1 / -1; }
.sx-grid.adv { padding-top: 12px; border-top: 1px dashed var(--line); }
.sx-grid .checks { display: flex; gap: 18px; flex-wrap: wrap; }
.sx-media { margin-top: 12px; }
.chip-btn { border: 1px solid var(--line); background: var(--paper); border-radius: 14px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; color: var(--ink2); }
.chip-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sx-chips { margin: 10px 0 2px; }
.sx-chips .chip .x { border: 0; background: none; cursor: pointer; color: var(--ink3); padding: 0 0 0 2px; }
.sx-rhd { gap: 12px; margin-bottom: 8px; }
.sx-rhd .seg { margin-left: auto; }
.sx-batch { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--ink); color: #fff; padding: 10px 14px; margin-bottom: 10px; }
.sx-batch .btn { background: #fff; }
.sx-batch .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.sx-batch .btn.primary { background: var(--brand); color: #fff; }
.sx-row.sel, .sx-tbl tr.sel { background: #f6f1e6; }
.sx-act { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.flag.neg { color: var(--neg); border-color: var(--neg); }
mark { background: #f3e2a8; color: inherit; padding: 0 1px; }
.sx-pager { justify-content: center; gap: 12px; margin-top: 14px; }
.sx-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.sx-pre { white-space: pre-wrap; font-family: inherit; line-height: 1.9; margin: 0; }
.sx-fhd { margin-bottom: 12px; }
.tbl-wrap { overflow-x: auto; }
.sx-tbl small { display: block; color: var(--ink3); }
@media (max-width: 1000px) { .sx-wrap { grid-template-columns: 1fr; } .sx-side { order: 2; } }
.sx-list .badge { margin-left: 4px; }
.chip-btn.bell { padding: 0 7px; font-size: 11px; line-height: 18px; }