:root {
  --bg: #0d1117; --bg2: #121822; --panel: #161d29; --panel2: #1c2533; --line: #263142; --line2: #324056;
  --text: #e6edf3; --muted: #93a1b5; --faint: #66758a;
  --up: #2fbf71; --down: #f05d5e; --flat: #d9b44a; --accent: #4c9aff; --accent2: #8b7cf6;
  --warn: #f0a443; --bad: #f05d5e; --good: #2fbf71; --info: #4c9aff;
  --radius: 10px; --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--accent); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.skip-link { position: fixed; top: -80px; left: 14px; z-index: 100; padding: 10px 16px; background: var(--panel2); }
.skip-link:focus { top: 8px; }
button { font: inherit; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--flat); }
.nowrap { white-space: nowrap; }

header.top { position: sticky; top: 0; z-index: 20; background: rgba(13,17,23,.96); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px); }
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px 6px; }
.topbar > * { min-width: 0; }
.brand { font-weight: 700; letter-spacing: .5px; font-size: 16px; white-space: nowrap; }
.brand span { color: var(--accent); }
.prov { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line2); border-radius: 999px;
  font-size: 12px; color: var(--muted); background: var(--bg2); white-space: nowrap; }
.chip b { color: var(--text); font-weight: 600; }
.chip.warn { border-color: #6b4e1f; color: var(--warn); }
.chip.bad { border-color: #6b2a2b; color: var(--bad); }
.chip.good { border-color: #1f5b3b; color: var(--good); }
.snaplbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.snapsel { background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: 6px; padding: 4px 6px; }
.snaplbl { display: grid; gap: 4px; }
.snapsel { max-width: 300px; }
nav.tabs { display: flex; gap: 2px; padding: 0 14px; overflow-x: auto; }
nav.tabs button { background: none; border: none; color: var(--muted); padding: 9px 14px; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; }
nav.tabs button:hover { color: var(--text); }
nav.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
nav.tabs .sep { flex: 1; }

main { padding: 16px 20px 40px; max-width: 1680px; margin: 0 auto; }
.workspace { max-width: 1680px; margin: 0 auto; padding: 14px 20px 0; }
.daily-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 14px; }
.flow-label { color: var(--muted); margin-right: 6px; font-size: 12px; }
.daily-flow button, .daily-flow a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; color: var(--text); text-decoration: none; cursor: pointer; }
.daily-flow button:hover, .daily-flow a:hover { background: var(--panel2); border-color: var(--accent); }
.daily-flow span:not(.flow-label) { display: inline-grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; color: var(--accent); background: var(--bg); font-size: 12px; }
.screen-guide { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 16px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.screen-guide h1 { margin: 0 0 4px; font-size: 20px; }
.screen-guide p { margin: 0; color: var(--muted); max-width: 850px; }
.screen-context { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.guide-intro { margin-bottom: 14px; border-left: 3px solid var(--accent); }
.guide-intro h2 { font-size: 23px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .8px; margin: 0 0 8px; }
.guide-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guide-steps ol { padding-left: 22px; }
.guide-steps li { padding: 0 0 10px 3px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-section { margin-top: 14px; }
.guide-section table { width: 100%; white-space: normal; }
.guide-section td, .guide-section th { white-space: normal; overflow-wrap: anywhere; }
.guide-section details { border-top: 1px solid var(--line); padding: 12px 0; }
.guide-section summary { cursor: pointer; color: var(--text); }
.guide-section details p { color: var(--muted); margin: 10px 0 0; }
.guide-glossary { display: grid; grid-template-columns: 190px 1fr; gap: 12px 18px; }
.guide-glossary dt { font-weight: 600; }
.guide-glossary dd { margin: 0; color: var(--muted); }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar .prov { order: 3; flex-basis: 100%; }
  .topbar .snaplbl { margin-left: auto; }
  .screen-guide { align-items: flex-start; flex-direction: column; }
  .screen-context { flex-direction: row; align-items: center; flex-wrap: wrap; flex-shrink: 1; }
}
@media (max-width: 600px) {
  header.top { position: static; }
  .topbar { padding: 12px; }
  .brand { font-size: 14px; }
  .topbar .snaplbl { width: 100%; margin: 0; white-space: normal; }
  .snapsel { width: 100%; max-width: 100%; min-height: 38px; }
  .chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  nav.tabs { padding: 0 6px; }
  nav.tabs button, nav.tabs a { min-height: 44px; }
  main { padding: 12px 12px 30px; }
  .workspace { padding: 12px 12px 0; }
  .flow-label { width: 100%; }
  .daily-flow button, .daily-flow a { flex: 1 1 calc(50% - 8px); font-size: 12px; min-height: 44px; }
  .guide-steps { grid-template-columns: minmax(0, 1fr); }
  .guide-glossary { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .guide-glossary dd { margin-bottom: 10px; }
  .guide-intro h2 { font-size: 20px; }
  .card { overflow-x: auto; overflow-wrap: anywhere; }
  .card h2 { flex-wrap: wrap; }
  .card select { max-width: 100%; }
  .dl { grid-template-columns: 100px minmax(0, 1fr); }
  .dl dd { overflow-wrap: anywhere; }
  .stance { flex-direction: column; }
  .stance-badge { min-width: 0; }
}
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.g-hero { grid-template-columns: 1.35fr 1fr; }
.g-wide { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1100px) { .g2, .g3, .g4, .g-hero, .g-wide { grid-template-columns: 1fr; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.card h2 .sub { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.card h3 { margin: 14px 0 6px; font-size: 13.5px; color: var(--muted); font-weight: 600; text-transform: none; }
.card .foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--faint); }
.section-title { font-size: 13px; color: var(--muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .6px; }

.stance { display: flex; gap: 16px; align-items: stretch; }
.stance-badge { min-width: 210px; border-radius: 10px; padding: 14px 16px; background: var(--panel2); border: 1px solid var(--line2); }
.stance-badge .lbl { font-size: 12px; color: var(--muted); }
.stance-badge .val { font-size: 22px; font-weight: 700; margin: 4px 0; }
.stance-badge.UU_TIEN_MUA { border-color: #1f6b44; } .stance-badge.UU_TIEN_MUA .val { color: var(--good); }
.stance-badge.THAM_DO { border-color: #2a4f7a; } .stance-badge.THAM_DO .val { color: var(--accent); }
.stance-badge.DUNG_NGOAI { border-color: #6b5a1f; } .stance-badge.DUNG_NGOAI .val { color: var(--flat); }
.stance-badge.GIAM_RUI_RO { border-color: #6b2a2b; } .stance-badge.GIAM_RUI_RO .val { color: var(--bad); }
.stance-badge.CHUA_DU_DU_LIEU .val { color: var(--muted); }
.conds { flex: 1; margin: 0; padding: 0; list-style: none; }
.conds li { display: grid; grid-template-columns: 22px 1fr; gap: 4px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.conds li:last-child { border-bottom: none; }
.conds .ev { grid-column: 2; color: var(--faint); font-size: 12px; }
.ok-mark { color: var(--good); font-weight: 700; } .no-mark { color: var(--bad); font-weight: 700; } .na-mark { color: var(--faint); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 20px; font-weight: 650; margin-top: 2px; }
.kpi .d { font-size: 12px; color: var(--faint); margin-top: 2px; }

table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line2);
  position: sticky; top: 0; background: var(--panel); white-space: nowrap; }
table.t td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: var(--panel2); }
.scroll { max-height: 620px; overflow: auto; }
table.t.wide { min-width: 1700px; }
.tk { font-weight: 700; color: var(--text); cursor: pointer; }
.tk:hover { color: var(--accent); text-decoration: underline; }

.tag { display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11.5px; margin: 1px 3px 1px 0; background: var(--panel2);
  border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.tag.good { color: var(--good); border-color: #1f5b3b; } .tag.bad { color: var(--bad); border-color: #6b2a2b; }
.tag.warn { color: var(--warn); border-color: #6b4e1f; } .tag.info { color: var(--accent); border-color: #2a4f7a; }
.tag.pat { color: #c9b8ff; border-color: #4b3f86; }

.alert { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.alert:last-child { border-bottom: none; }
.lvl { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-align: center; height: fit-content; }
.lvl.CAO { background: #3a1517; color: var(--bad); } .lvl.TB { background: #3a2c12; color: var(--warn); } .lvl.THAP { background: #12263a; color: var(--accent); }

.empty { padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: 8px; }
.notice { padding: 8px 12px; border-radius: 8px; background: #1a2333; border: 1px solid #2a3a55; color: #b9c7da; font-size: 12.5px; margin-bottom: 10px; }
.notice.warn { background: #2a2112; border-color: #5a4419; color: #e7c98b; }
.notice.bad { background: #2a1416; border-color: #5a2427; color: #f2a7a8; }
.notice.good { background: #12261b; border-color: #1f5b3b; color: #9fe0bb; }

.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.tile { border-radius: 8px; padding: 10px; min-height: 86px; cursor: pointer; border: 1px solid rgba(255,255,255,.06); }
.tile .n { font-weight: 650; font-size: 13px; }
.tile .m { font-size: 20px; font-weight: 700; margin-top: 4px; }
.tile .s { font-size: 11.5px; opacity: .85; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.filters label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
select, input[type=text], input[type=number], input[type=date], textarea {
  background: var(--bg2); color: var(--text); border: 1px solid var(--line2); border-radius: 6px; padding: 5px 7px; font: inherit; }
textarea { width: 100%; min-height: 90px; }
.btn { background: var(--accent); color: #fff; border: none; border-radius: 7px; padding: 7px 14px; cursor: pointer; font-weight: 600; }
.btn:hover { filter: brightness(1.1); } .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1px solid var(--line2); color: var(--text); }
.btn.danger { background: #b5393b; }
.btn.small { padding: 3px 9px; font-size: 12px; }

.radar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1300px) { .radar { grid-template-columns: repeat(2, 1fr); } }
.radar .col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.radar .col h3 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.radar .rule { font-size: 11.5px; color: var(--faint); margin-bottom: 8px; min-height: 44px; }
.radar .item { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12.5px; }

.progress { height: 8px; background: var(--bg2); border-radius: 99px; overflow: hidden; margin: 6px 0; }
.progress > div { height: 100%; background: var(--accent); transition: width .4s; }
.steps { list-style: none; padding: 0; margin: 6px 0; font-size: 12.5px; }
.steps li { padding: 2px 0; }
pre.log { background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-height: 220px; overflow: auto;
  font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; color: #c9d4e3; }

.drawer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; display: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(1280px, 96vw); background: var(--bg); border-left: 1px solid var(--line2);
  z-index: 51; display: none; overflow-y: auto; padding: 16px 20px 30px; }
.drawer.open, .drawer-bg.open { display: block; }
.drawer .head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.drawer .head .t { font-size: 22px; font-weight: 750; }
.drawer .close { margin-left: auto; }
.chartbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
canvas.chart { width: 100%; height: 560px; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); padding: 4px 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 4px; }
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; font-size: 13px; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 7px; overflow: hidden; }
.seg button { background: transparent; color: var(--muted); border: none; padding: 4px 12px; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
details summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line2); border-top-color: var(--accent); border-radius: 50%;
  animation: spin 1s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line2);
  padding: 9px 16px; border-radius: 8px; z-index: 60; display: none; max-width: 80vw; }
.toast.show { display: block; }
.inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }
.inline-form label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
table.edit input { width: 100%; min-width: 70px; }

.guide-section table { border-collapse: collapse; }
.guide-section td, .guide-section th { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
#dataPackage { scroll-margin-top: 140px; }
@media (max-width: 600px) {
  .radar { grid-template-columns: minmax(0, 1fr); }
  .radar .col { min-width: 0; overflow-wrap: anywhere; }
  .radar .item > span { min-width: 0; }
  .radar .item > span:first-child, .radar .item > span:last-child { flex-shrink: 0; }
  .dl { grid-template-columns: 100px minmax(0, 1fr); }
  .stance-badge { min-width: 0; }
  #dataPackage { scroll-margin-top: 12px; }
}

/* VISUAL R1 (SCOUT_UI_VISUAL_OFFLINE_R1): gauge, donut, rings and bars drawn inline; colours only for direction/condition */
.trust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; margin-bottom: 12px; padding: 8px 12px; text-align: left;
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.trust:hover { border-color: var(--accent); color: var(--text); }
.trust .t-ico { color: var(--good); }
.stance2 { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 16px; align-items: start; }
.g-col { text-align: center; } .c-col, .b-bars { min-width: 0; }
.gauge { width: 100%; max-width: 250px; display: block; margin: 0 auto; }
.g-seg { fill: none; stroke: var(--line2); stroke-width: 14; }
.g-seg.on.good { stroke: var(--good); } .g-seg.on.info { stroke: var(--accent); } .g-seg.on.flat { stroke: var(--flat); } .g-seg.on.bad { stroke: var(--bad); }
.g-seg.on.na { stroke: var(--faint); }
.g-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; } .g-hub { fill: var(--text); }
.g-t { fill: var(--faint); font-size: 11px; }
.g-label { font-size: 21px; font-weight: 700; margin: 2px 0; }
.g-label.good { color: var(--good); } .g-label.info { color: var(--accent); } .g-label.flat { color: var(--flat); } .g-label.bad { color: var(--bad); }
.g-label.na { color: var(--muted); }
.cchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.cchip { padding: 6px 9px; border-radius: 7px; font-size: 12.5px; border: 1px solid var(--line2); background: var(--panel2); color: var(--muted); }
.cchip.ok { color: var(--good); border-color: #1f5b3b; } .cchip.no { color: var(--bad); border-color: #6b2a2b; }
.breadth2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: center; }
.b-donut { display: flex; align-items: center; gap: 12px; }
.donut { width: 112px; height: 112px; flex-shrink: 0; }
.d-bg { fill: none; stroke: var(--panel2); stroke-width: 13; }
.d-arc { fill: none; stroke-width: 13; } .d-arc.up { stroke: var(--up); } .d-arc.down { stroke: var(--down); } .d-arc.flat { stroke: var(--faint); }
.d-n { fill: var(--text); font-size: 17px; font-weight: 700; } .d-u { fill: var(--faint); font-size: 10px; }
.b-legend { font-size: 13px; line-height: 1.8; } .b-legend .d { font-size: 12px; color: var(--faint); line-height: 1.4; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.sw.up { background: var(--up); } .sw.down { background: var(--down); } .sw.flat { background: var(--faint); }
.mbar { margin-bottom: 8px; } .mbar .d { font-size: 11.5px; color: var(--faint); }
.mbar-h { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); } .mbar-h b { color: var(--text); }
.track { height: 7px; background: var(--panel2); border-radius: 99px; overflow: hidden; margin: 3px 0; }
.track.na { background: repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 4px, var(--bg2) 4px, var(--bg2) 8px); }
.track .fill { height: 100%; background: var(--accent); }
.smini { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.scell { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-align: center; }
.ring { width: 54px; height: 54px; }
.ring-bg { fill: none; stroke: var(--line2); stroke-width: 4; } .ring-fg { fill: none; stroke: var(--accent); stroke-width: 4; }
.ring-t { fill: var(--text); font-size: 9.5px; font-weight: 600; }
.s-n { font-weight: 650; font-size: 13px; margin-top: 2px; } .s-m { font-size: 12px; color: var(--muted); }
.slist { display: grid; gap: 4px; }
.srow-h, .srow summary { display: grid; grid-template-columns: 44px 40px minmax(150px, 1.3fr) 56px minmax(230px, 2fr) minmax(170px, 1.3fr);
  gap: 10px; align-items: center; }
.srow-h { font-size: 12px; color: var(--muted); padding: 0 10px 4px; border-bottom: 1px solid var(--line2); }
.srow { border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.srow summary { list-style: none; padding: 6px 10px; cursor: pointer; color: var(--text); font-size: 13px; }
.srow summary::-webkit-details-marker { display: none; }
.srow[open] summary { border-bottom: 1px dashed var(--line); }
.srow .ring { width: 44px; height: 44px; }
.sr-rank { font-weight: 700; } .sr-name { font-weight: 600; }
.sr-rs { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 2px 6px; align-items: center; }
.zl { font-size: 11px; color: var(--faint); }
.zbar { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 6px; align-items: center; }
.ztrack { position: relative; height: 7px; background: var(--bg2); border-radius: 99px; }
.ztrack::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line2); }
.zfill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.zfill.pos { left: 50%; background: var(--up); } .zfill.neg { right: 50%; background: var(--down); }
.zfill.over.pos { border-right: 3px solid var(--text); } .zfill.over.neg { border-left: 3px solid var(--text); }
.zt { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.zbar.na .zt { grid-column: 2; }
.sr-tags { display: flex; flex-wrap: wrap; gap: 2px; }
.srow-d { padding: 6px 10px 10px; font-size: 12.5px; }
@media (max-width: 1100px) { .breadth2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .stance2 { grid-template-columns: minmax(0, 1fr); }
  .srow-h { display: none; }
  .srow summary { grid-template-columns: 34px 34px minmax(0, 1fr) 48px; }
  .srow summary .sr-rs, .srow summary .sr-tags { grid-column: 1 / -1; }
}

/* V2 task 3.1: who is logged in + logout, end of the top bar */
.session-box { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.session-box button { white-space: nowrap; }

/* V2 task 3.3: phone (checked by tests/test_phone_layout.py at 360 and 390 px): text at least 12px, what is tapped at
   least 36px high, form fields 16px (an iPhone then does not zoom in when one is touched), table cells keep words whole
   (a wide table scrolls inside its card instead of breaking a ticker into letters) */
@media (max-width: 600px) {
  .tag, .lvl, .zl, .eyebrow, .tile .s, .radar .rule, .mbar .d, .stock-metric small { font-size: 12px; }
  select, input[type=text], input[type=number], input[type=date], input[type=password], input:not([type]), textarea {
    font-size: 16px; min-height: 40px; }
  .btn, .btn.small, .seg button { min-height: 40px; }
  .btn.small { padding: 6px 12px; font-size: 13px; }
  details > summary { padding: 10px 0; }
  label:has(> input[type=radio]), label:has(> input[type=checkbox]) { padding: 9px 0; }
  input[type=radio], input[type=checkbox] { width: 20px; height: 20px; vertical-align: -5px; }
  .topbar > a { display: inline-flex; align-items: center; min-height: 40px; }
  table.t td, table.t th { overflow-wrap: normal; }
  table.t .tk { white-space: nowrap; }
  /* one part of a screen at a time (phone.js): the row of parts stays at the top while the part is read */
  .phone-parts { position: sticky; top: 0; z-index: 15; display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px;
    background: rgba(13,17,23,.97); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .phone-parts button { flex: 0 0 auto; min-height: 40px; padding: 6px 12px; border-radius: 999px; font-size: 13px;
    background: var(--panel); color: var(--muted); border: 1px solid var(--line2); white-space: nowrap; }
  .phone-parts button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
  .phone-hidden, .chip.phone-fold { display: none !important; }
  .phone-fold-toggle { order: 3; min-height: 36px; padding: 4px 12px; border-radius: 999px; font-size: 12px;
    background: var(--bg2); color: var(--accent); border: 1px dashed var(--line2); }
  /* the tabs already lead everywhere: no second row of steps, and the screen's title without its long text */
  .daily-flow, .screen-guide p, .screen-guide .btn { display: none; }
  .workspace { padding-top: 8px; }
  .screen-guide { padding: 10px 12px; gap: 6px; }
  .screen-guide h1 { font-size: 17px; margin: 0; }
}
.phone-fold-toggle[hidden], .phone-parts[hidden] { display: none; }

/* Plain view (static/plain.js, Owner 28/10): notes on method and checks of files are left out; "Hiện chi tiết kỹ thuật"
   in the help tab shows them again in this browser */
.plain .foot, .plain .radar .rule, .plain pre.stock-mono, .plain .tech-hidden, .plain .tech { display: none !important; }

/* V2 phase 3a: the family's income and spending (static/finance.js): a short form first, quick to fill on a phone */
.fin-kinds { display: flex; gap: 6px; margin: 4px 0 10px; }
.fin-kinds button { flex: 1; min-height: 40px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2);
  color: var(--muted); font-weight: 600; cursor: pointer; }
.fin-kinds button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fin-grid label, .fin-month, .fin-confirm label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.fin-grid .fin-wide, .fin-confirm .fin-wide { grid-column: 1 / -1; }
#finAmount { font-size: 20px; font-weight: 600; }
.fin-check { display: block; margin-top: 10px; color: var(--muted); }
.fin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fin-msg { min-height: 1.4em; margin-top: 8px; color: var(--good); }
.fin-msg.bad { color: var(--bad); }
.fin-history { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.fin-history li { margin-bottom: 6px; }
.fin-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-template { display: inline-flex; gap: 2px; }
.fin-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.fin-total { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.fin-total span { display: block; font-size: 12.5px; color: var(--muted); }
.fin-total b { font-size: 18px; }
.fin-pos { color: var(--up); } .fin-neg { color: var(--down); }
.fin-day { margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.fin-list { display: flex; flex-direction: column; gap: 4px; }
.fin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
  padding: 8px 10px; text-align: left; color: var(--text); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; }
.fin-row.gone { cursor: default; opacity: .75; }
.fin-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-what .faint { overflow-wrap: anywhere; }
.fin-amt { white-space: nowrap; font-weight: 600; }
.fin-deleted { margin-top: 12px; }
.fin-groups { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fin-groups > b { width: 100%; }
.fin-group { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--line2);
  border-radius: 999px; font-size: 12.5px; }
.fin-group.gone { opacity: .55; }
/* task 3a.4: the cash-flow plan (big items) */
.plan-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.plan-total { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.plan-total span { display: block; font-size: 12.5px; color: var(--muted); }
.plan-total b { font-size: 17px; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
  padding: 8px 10px; text-align: left; color: var(--text); background: var(--bg2); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; }
.plan-row.gone { cursor: default; opacity: .75; }
.plan-groups { flex-wrap: wrap; }
.plan-groups button { flex: 1 1 calc(50% - 6px); }
.plan-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.plan-months button { min-height: 40px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2);
  color: var(--muted); font-weight: 600; cursor: pointer; }
.plan-months button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.plan-neo { margin-top: 10px; }
.plan-suggest { cursor: default; flex-wrap: wrap; }
/* task 5.4: the investing policies card (finance.js policiesCard) */
.pol-row { cursor: default; flex-wrap: wrap; }
.pol-row.pol-later, .pol-row.pol-ended { opacity: .75; }
.pol-base { margin: 6px 0 0; padding-left: 18px; }
.pol-base li { margin-bottom: 4px; }
.pol-form { margin-bottom: 10px; }
.plan-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.plan-buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.plan-big { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.plan-big span { color: var(--warn); font-size: 14px; }
.plan-big b { font-size: 28px; font-variant-numeric: tabular-nums; }
table.plan-steps { width: 100%; }
table.t tr.plan-sum td { font-weight: 700; border-top: 1px solid var(--line2); }
table.t tr.plan-tight td { background: rgba(214, 90, 90, .10); }
.plan-settings { margin-top: 10px; }
.plan-debt { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plan-debt:last-of-type { border-bottom: 0; }
.plan-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.plan-option { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.plan-option-title { font-weight: 700; margin-bottom: 4px; }
.plan-line { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.plan-line span { color: var(--muted); }
.plan-line b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-close-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--line); }
.plan-check { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; cursor: pointer; }
.plan-check input { flex: none; width: 20px; height: 20px; }
.plan-close-row > input { flex: 0 0 160px; width: 160px; text-align: right; }
.neo-sum { margin: 8px 0 12px; padding-left: 18px; }
.neo-sum li { margin-bottom: 4px; }
.neo-part, .neo-sheet { margin: 8px 0; }
.neo-part > summary, .neo-sheet > summary { font-size: 13.5px; color: var(--text); }
.neo-sheets > .neo-sheet { margin-left: 12px; }
.neo-table { max-height: 420px; margin-top: 6px; }
.neo-table code { font-size: 12px; overflow-wrap: anywhere; }
.neo-table tr.neo-bad td { background: #2a1416; }
.neo-dup { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.neo-dup .fin-actions { margin-top: 4px; }
.neo-steps { padding-left: 18px; }
.neo-steps li { margin-bottom: 6px; }
.neo-steps code { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .fin-grid { grid-template-columns: minmax(0, 1fr); }
  .fin-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-options { grid-template-columns: 1fr; }
  .plan-close-row { flex-wrap: wrap; }
  .plan-close-row > input { flex: 1 1 100%; width: 100%; }
  .fin-actions .btn { flex: 1 1 auto; }
  .fin-group { font-size: 13px; }
}
.note-list { margin: 2px 0 4px; padding-left: 18px; } .note-list li { margin: 2px 0; }
/* V2 task 4.4: questions to Atlas */
.ask-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.ask-turn { display: flex; flex-direction: column; gap: 4px; }
.ask-q { align-self: flex-end; max-width: 85%; text-align: right; }
.ask-a { align-self: flex-start; max-width: 92%; }
.ask-bubble { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; overflow-wrap: anywhere; text-align: left; }
.ask-bubble.mine { background: var(--accent-soft, var(--panel2)); }
.ask-meta { font-size: 12px; margin-top: 2px; }
.ask-form textarea { width: 100%; box-sizing: border-box; }
.ask-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.ask-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-chips .chip { cursor: pointer; }
.ask-budget { margin-top: 10px; font-size: 13px; }
/* V2 task 4.5: Atlas proposes, Neo reviews */
.prop-set { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.prop-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); }
.prop-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.prop-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; font-size: 14px; }
.prop-dl dt { color: var(--muted); }
.prop-dl dd { margin: 0; overflow-wrap: anywhere; }
.prop-dl dd.prop-warn { color: var(--warn); }
.prop-options { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.prop-option { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px dashed var(--line2); border-radius: 8px; padding: 6px 8px; }
@media (max-width: 520px) { .prop-dl { grid-template-columns: 1fr; } .prop-dl dt { margin-top: 4px; } }
/* V2 task 5.1: portfolio weights */
.pf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 3px 0; }
.pf-name { min-width: 120px; }
.pf-track { flex: 0 0 120px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pf-fill { height: 100%; background: var(--accent, #4c8dff); }
@media (max-width: 520px) { .pf-track { flex-basis: 64px; } .pf-name { min-width: 90px; } }
/* V2 task 4.6: the decision journal */
.jr-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.jr-cell { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel2); }
.jr-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--panel2); }
.jr-grade { font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.jr-other { margin: 6px 0; overflow-wrap: anywhere; }
/* UI review 03/11 (đợt 1): the Gia đình tab (family.js): its bar of this month's figures and its sub-tabs stay in sight */
.fam-head { position: sticky; top: var(--fam-top, 0px); z-index: 10; background: var(--bg); padding: 6px 0 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line); }
.fam-bar { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.fam-month { align-self: center; font-weight: 700; color: var(--muted); padding-right: 4px; }
.fam-tile { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--panel); min-width: 0; }
.fam-tile span { display: block; font-size: 12px; color: var(--muted); }
.fam-tile b { display: block; font-size: 17px; overflow-wrap: anywhere; }  /* a figure is never cut off */
.fam-tile small { font-size: 12px; font-weight: 500; color: var(--warn); margin-left: 4px; }
.fam-tile.fam-key { border-color: var(--accent); }
.fam-tile.fam-key b { color: var(--accent); }
.fam-tile.fam-empty { grid-column: span 4; color: var(--muted); align-self: center; }
.fam-subs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fam-subs button { min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--panel); color: var(--muted);
  border: 1px solid var(--line2); cursor: pointer; }
.fam-subs button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fam-start { border-color: var(--accent); }
/* rule 3: the explanation behind a "?" */
.help-q { display: inline-block; vertical-align: middle; font-size: 14px; font-weight: 400; }
/* a 22px ring, tapped on 36px (the transparent border; the negative margin keeps the title's line as it was) */
.help-q > summary { list-style: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 36px; height: 36px;
  margin: -7px -4px; border: 7px solid transparent; border-radius: 50%; background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line2); color: var(--muted); cursor: pointer; font-size: 13px; padding: 0; }
.help-q > summary::-webkit-details-marker { display: none; }
.help-q[open] > summary { background-color: var(--accent); color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.help-text { margin-top: 6px; color: var(--muted); max-width: 70ch; line-height: 1.45; }
/* the 12 months as bars */
.cal-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 150px; align-items: end; margin: 6px 0; }
.cal-col { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.cal-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; justify-content: center; }
.cal-bars span { width: 40%; border-radius: 3px 3px 0 0; }
.cal-in, .cal-legend .cal-in { background: var(--good); }
.cal-out, .cal-legend .cal-out { background: var(--warn); }
.cal-col.tight .cal-label b { color: var(--bad); margin-left: 2px; }
.cal-label { text-align: center; font-size: 12px; color: var(--muted); margin-top: 4px; }
.cal-legend { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-legend span.cal-in, .cal-legend span.cal-out { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
/* has and owes side by side */
.worth-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.worth-col h3 b { margin-left: 6px; }
.worth-net { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); }
/* rule 7: suggestions ticked together; one to leave out reads paler */
.suggest-tick { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.plan-suggest > .fin-what { flex: 1 1 auto; min-width: 0; }
.plan-suggest.suggest-off { opacity: .7; }
.plan-inline { border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; background: var(--panel); }
.plan-form-title { margin: 0 0 8px; }
.plan-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-group-sum { font-weight: 500; color: var(--muted); font-size: 14px; }
@media (max-width: 600px) {
  .fam-head { position: static; }
  .fam-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fam-month { grid-column: span 2; }
  .fam-tile.fam-empty { grid-column: span 2; }
  .fam-tile { padding: 5px 8px; }
  .fam-subs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }  /* the four, none off screen */
  .fam-subs button { min-height: 40px; padding: 4px 4px; font-size: 13px; line-height: 1.2; }
  /* a suggestion: the tick beside its name, the amount and its button on one line */
  .plan-suggest { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 4px; align-items: start; }
  .plan-suggest > .suggest-tick { grid-row: span 2; }
  .plan-suggest > .plan-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .cal-chart { height: 110px; gap: 3px; }
}