:root {
  --navy: #1E2761; --teal: #028090; --teal-l: #E0F4F6; --pink: #C0105A;
  --green: #2D7D46; --green-l: #E6F5EC; --amber: #8A5200; --amber-l: #FDF3E3;
  --red: #A32D2D; --red-l: #FCEBEB; --gray-l: #F5F6FA; --border: #E2E4EA;
  --white: #fff; --solid-red: #b3261e; --text: #1a1a2e; --text-s: #5b6270; --bg: #F0F2F8;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif; --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root { --white: #1b2036; --text: #eef0f7; --text-s: #a7aec0; --bg: #11152a; --border: #2f3652; --gray-l: #252b46;
    --teal-l: #12383f; --green-l: #14301f; --amber-l: #3a2a10; --red-l: #3a1818; --amber: #f0b45a; --green: #6fcf8f; --red: #f08a8a; --teal: #4ec3d3; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.45; }
a { color: var(--teal); }
button { font-family: inherit; }
.hidden { display: none !important; }

.emergency { background: var(--solid-red); color: #fff; padding: .45rem 1rem; font-size: 13px; text-align: center; }
.emergency a { color: #fff; font-weight: 700; }
.demo-banner { background: var(--amber-l); color: var(--amber); padding: .35rem 1rem; font-size: 12.5px; text-align: center; border-bottom: 1px solid var(--border); }
.topbar { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .7rem 1.25rem; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 18px; letter-spacing: -.3px; }
.brand small { font-weight: 400; opacity: .6; font-size: 12px; margin-left: .5rem; }
.topbar .spacer { flex: 1; }
.who { font-size: 12.5px; opacity: .85; text-align: right; }
.tabs { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 1.25rem; display: flex; gap: .25rem; flex-wrap: wrap; }
.tab { background: none; border: none; padding: .8rem 1rem; cursor: pointer; font-size: 13.5px; color: var(--text-s); border-bottom: 3px solid transparent; }
.tab.on { color: var(--teal); border-bottom-color: var(--teal); font-weight: 600; }
main { max-width: 1180px; margin: 0 auto; padding: 1.25rem; }
.grid2 { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cols4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 860px) { .grid2, .cols2, .cols4 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.card h2 { font-size: 14.5px; margin-bottom: .75rem; }
.card h3 { font-size: 13px; margin: .75rem 0 .35rem; color: var(--text-s); text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--text-s); font-size: 12.5px; }
.notice { background: var(--green-l); border: 1px solid var(--green); color: var(--green); border-radius: var(--radius); padding: .65rem .9rem; font-size: 12.5px; margin-bottom: 1rem; }
.notice.warn { background: var(--amber-l); border-color: var(--amber); color: var(--amber); }
.notice.err { background: var(--red-l); border-color: var(--red); color: var(--red); }

.field { margin-bottom: 1rem; }
.field > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-s); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; font: inherit; color: var(--text); background: var(--white); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
textarea { resize: vertical; min-height: 60px; }
input[type=range] { width: 100%; accent-color: var(--teal); }

.chip-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { border: 1px solid var(--border); background: var(--gray-l); color: var(--text-s); border-radius: 20px; padding: .32rem .75rem; font-size: 12.5px; cursor: pointer; }
.chip:hover { border-color: var(--teal); color: var(--teal); }
.chip.on { background: var(--teal-l); border-color: var(--teal); color: var(--teal); font-weight: 600; }
.chip.on.t-green { background: var(--green-l); border-color: var(--green); color: var(--green); }
.chip.on.t-amber { background: var(--amber-l); border-color: var(--amber); color: var(--amber); }
.chip.on.t-red { background: var(--red-l); border-color: var(--red); color: var(--red); }

.btn { background: var(--teal); color: #fff; border: none; border-radius: var(--radius); padding: .55rem 1.1rem; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.btn:hover { filter: brightness(.92); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; padding: .8rem; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
.btn.danger { background: var(--solid-red); }
.btn.small { padding: .3rem .7rem; font-size: 12.5px; }
.quick-exit { background: #fff; color: var(--red); border: 2px solid var(--red); border-radius: 8px; font-weight: 700; padding: .3rem .8rem; cursor: pointer; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; background: var(--gray-l); color: var(--text-s); }
.pill.g { background: var(--green-l); color: var(--green); } .pill.a { background: var(--amber-l); color: var(--amber); }
.pill.r { background: var(--red-l); color: var(--red); } .pill.b { background: var(--teal-l); color: var(--teal); }
.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.tag { font-size: 11.5px; padding: 2px 8px; border-radius: 10px; }
.tag.g { background: var(--green-l); color: var(--green); } .tag.a { background: var(--amber-l); color: var(--amber); }
.tag.r { background: var(--red-l); color: var(--red); } .tag.b { background: var(--teal-l); color: var(--teal); }

.steps { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .4rem; font-size: 12.5px; color: var(--text-s); }
.step i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.step.done i { background: var(--green); border-color: var(--green); color: #fff; }
.step.now i { background: var(--teal); border-color: var(--teal); color: #fff; }
.step.now { color: var(--teal); font-weight: 600; }

.rc { border: 1.5px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: .75rem; background: var(--white); }
.rc.sel { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(2,128,144,.15); }
.rc.dim { opacity: .7; }
.rc-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.rc-name { font-weight: 600; font-size: 15px; }
.bar { height: 6px; border-radius: 3px; background: var(--gray-l); overflow: hidden; margin-top: .5rem; }
.bar > div { height: 100%; background: var(--teal); }
.bar.green > div { background: var(--green); } .bar.amber > div { background: #d89a2b; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-s); padding: .45rem .6rem; border-bottom: 2px solid var(--border); }
td { padding: .55rem .6rem; border-bottom: 1px solid var(--gray-l); vertical-align: top; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--gray-l); }
.kpi { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.15rem; }
.kpi .n { font-size: 26px; font-weight: 700; color: var(--teal); }
.kpi .l { font-size: 11.5px; color: var(--text-s); text-transform: uppercase; letter-spacing: .04em; }
.hbar { display: grid; grid-template-columns: 110px 1fr 50px; gap: .5rem; align-items: center; margin: .3rem 0; font-size: 12.5px; }
.hbar .track { height: 10px; background: var(--gray-l); border-radius: 5px; overflow: hidden; }
.hbar .track > div { height: 100%; background: var(--teal); border-radius: 5px; }
.timeline { list-style: none; }
.timeline li { padding: .4rem 0; border-bottom: 1px solid var(--gray-l); font-size: 12.5px; display: flex; gap: .6rem; }
.timeline time { color: var(--text-s); min-width: 70px; }

dialog { border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; max-width: 560px; width: 92vw; background: var(--white); color: var(--text); }
dialog::backdrop { background: rgba(10,14,40,.55); }
.login { max-width: 420px; margin: 3rem auto; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.big-number { display: block; font-size: 30px; font-weight: 800; color: #fff; text-decoration: none; }
.emerg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 700px) { .emerg-grid { grid-template-columns: 1fr; } }
.emerg-box { background: var(--solid-red); color: #fff; border-radius: 14px; padding: 1rem 1.25rem; }
.emerg-box small { opacity: .9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; padding: .6rem 1.1rem; border-radius: 10px; font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.3); z-index: 50; }
.toast.err { background: var(--solid-red); }
.conv { margin-top: .75rem; border-top: 1px dashed var(--border); padding-top: .6rem; }
.conv h3 { margin: 0 0 .4rem; }
.chat { display: flex; flex-direction: column; gap: .35rem; max-height: 260px; overflow-y: auto; padding: .5rem; background: var(--gray-l); border-radius: 10px; margin-bottom: .5rem; }
.bubble { max-width: 82%; padding: .4rem .7rem; border-radius: 12px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.bubble time { display: block; font-size: 10.5px; color: var(--text-s); margin-top: 2px; }
.bubble.me { align-self: flex-end; background: var(--teal-l); border: 1px solid var(--teal); }
.bubble.them { align-self: flex-start; background: var(--white); border: 1px solid var(--border); }
.bubble .who-label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-s); }
.conv textarea { min-height: 48px; }
.checklist-view { list-style: none; margin: .3rem 0; }
.checklist-view li { font-size: 12.5px; padding: 1px 0; }

/* ---- Portal theme after design/webapplication-design.md: near-black, hairlines, Inter stack, white pill buttons,
   yellow→teal accent line. No web fonts are loaded (CSP + GDPR); Inter is used only if installed. ---- */
:root {
  color-scheme: dark;
  --navy: #0c0c0c; --teal: #78d0cd; --teal-l: rgba(120,208,205,.12); --green: #86ca8a; --green-l: rgba(134,202,138,.12);
  --amber: #ffd76a; --amber-l: rgba(255,212,0,.10); --red: #f08a8a; --red-l: rgba(240,138,138,.12);
  --gray-l: #171717; --border: rgba(255,255,255,.09); --white: #111111; --solid-red: #b3261e; --text: #eeeeee; --text-s: #9e9e9e; --bg: #0c0c0c;
  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif; --radius: 12px;
  --grad: linear-gradient(90deg, #ffe776 0%, #ffd400 22%, #ffd000 40%, #c9c93c 60%, #86ca8a 76%, #78d0cd 100%);
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.topbar { background: #0c0c0c; border-bottom: 1px solid transparent; border-image: var(--grad) 1; }
.brand small { opacity: .7; }
.card, .kpi, .rc, dialog { border-radius: 16px; }
.card { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.btn { background: #ffffff; color: #0c0c0c; border-radius: 999px; font-weight: 500; }
.btn:hover { background: #ededed; filter: none; }
.btn.ghost { background: transparent; color: #e8e8e8; border: 1px solid rgba(255,255,255,.30); }
.btn.ghost:hover { background: rgba(255,255,255,.06); }
.btn.danger { background: var(--solid-red); color: #fff; }
.quick-exit { background: #ffffff; color: #b3261e; border: 0; border-radius: 999px; padding: .35rem .95rem; }
.step.done i, .step.now i { color: #0c0c0c; }
.chip { border-radius: 999px; }
.toast { background: #1c1c1c; color: #fff; border: 1px solid var(--border); }
.toast.err { background: var(--solid-red); }
dialog::backdrop { background: rgba(0,0,0,.65); }
.rc.sel { box-shadow: 0 0 0 3px rgba(120,208,205,.18); }
.tab.on { border-bottom-color: transparent; border-image: var(--grad) 1; border-bottom-width: 3px; border-bottom-style: solid; }
a.brand { color: #fff; text-decoration: none; }
a.brand:hover small { opacity: 1; }
.home-link { color: #e8e8e8; text-decoration: none; }