:root {
  --bg: #f4f6f8; --panel: #ffffff; --panel-2: #f8fafb; --line: #e2e7ec; --line-2: #cfd7df;
  --text: #17212b; --muted: #5d6b78; --faint: #8794a0;
  --accent: #264ca4; --accent-2: #1d3d88; --accent-soft: #e7edf9; --on-accent: #ffffff; --brand-gray: #807e7e;
  --p1: #c62828; --p2: #e2700b; --p3: #2f6fcc; --p4: #6b7785;
  --ok: #1d8a4e; --warn: #b7791f; --bad: #c62828; --info: #2f6fcc;
  --ok-soft: #e3f4ea; --warn-soft: #fbf1dc; --bad-soft: #fbe5e5; --info-soft: #e5eefb;
  --term-bg: #0d1117; --term-fg: #d6dde4; --term-dim: #7d8a96;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --radius: 10px;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141a; --panel: #161d25; --panel-2: #1b232d; --line: #263241; --line-2: #33414f;
    --text: #e4e9ee; --muted: #9aa7b3; --faint: #6e7c89;
    --accent: #7f9ff0; --accent-2: #98b3f4; --accent-soft: #1b2a4b; --on-accent: #0f141a;
    --p1: #ef5350; --p2: #f59e3b; --p3: #5b9cf0; --p4: #8b97a4;
    --ok: #3fbf7a; --warn: #e0a640; --bad: #ef5350; --info: #5b9cf0;
    --ok-soft: #12301f; --warn-soft: #33270f; --bad-soft: #3a1717; --info-soft: #14253d;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141a; --panel: #161d25; --panel-2: #1b232d; --line: #263241; --line-2: #33414f;
  --text: #e4e9ee; --muted: #9aa7b3; --faint: #6e7c89;
  --accent: #7f9ff0; --accent-2: #98b3f4; --accent-soft: #1b2a4b; --on-accent: #0f141a;
  --p1: #ef5350; --p2: #f59e3b; --p3: #5b9cf0; --p4: #8b97a4;
  --ok: #3fbf7a; --warn: #e0a640; --bad: #ef5350; --info: #5b9cf0;
  --ok-soft: #12301f; --warn-soft: #33270f; --bad-soft: #3a1717; --info-soft: #14253d;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 20px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.right { margin-left: auto; }
.hidden { display: none !important; }

/* shell */
.shell { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; font-weight: 700; font-size: 16px; }
.brand { line-height: 1.2; }
.mark { height: 32px; width: auto; display: block; flex: none; }
.login-logo { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--line); }
.login-logo img { display: block; width: 100%; height: auto; }
.brand small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }
.nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow: auto; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-weight: 550; }
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.on { background: var(--accent-soft); color: var(--accent); }
.nav .sep { height: 1px; background: var(--line); margin: 8px 6px; }
.nav .badge { margin-left: auto; }
.me { border-top: 1px solid var(--line); padding: 12px 14px 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.me .acts { display: flex; width: 100%; gap: 2px; }
.me .acts .icon-btn:last-child { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.me .who { flex: 1; min-width: 0; }
.me .who b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .who span { font-size: 11px; color: var(--muted); }
.main { min-width: 0; padding: 22px 28px 60px; }
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.topbar .sub { color: var(--muted); font-size: 13px; }
.mobile-top { display: none; }

/* controls */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--panel); padding: 7px 13px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; }
.btn:hover { background: var(--panel-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); }
.btn.danger { color: var(--bad); }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.icon-btn { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 6px; border-radius: 6px; display: grid; place-items: center; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  border: 1px solid var(--line-2); background: var(--panel); border-radius: 8px; padding: 7px 10px; outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; min-height: 80px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
label.f > span.req::after { content: " *"; color: var(--bad); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-b { padding: 16px; }
.grid { display: grid; gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi.bad .v { color: var(--bad); }
.kpi.ok .v { color: var(--ok); }
.two { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .two { grid-template-columns: 1fr; } }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; line-height: 20px; white-space: nowrap; border: 1px solid transparent; }
.chip.P1 { background: var(--bad-soft); color: var(--p1); }
.chip.P2 { background: var(--warn-soft); color: var(--p2); }
.chip.P3 { background: var(--info-soft); color: var(--p3); }
.chip.P4 { background: var(--panel-2); color: var(--p4); border-color: var(--line); }
.chip.st-New { background: var(--info-soft); color: var(--info); }
.chip.st-In-Progress { background: var(--warn-soft); color: var(--warn); }
.chip.st-Waiting { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.chip.st-Resolved { background: var(--ok-soft); color: var(--ok); }
.chip.st-Closed { background: var(--panel-2); color: var(--faint); border-color: var(--line); }
.chip.lab { background: var(--accent-soft); color: var(--accent); }
.chip.plain { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.up { background: var(--ok); } .dot.down { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); } .dot.unknown { background: var(--faint); }
.sla { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sla.bad { color: var(--bad); } .sla.warn { color: var(--warn); } .sla.ok { color: var(--muted); } .sla.done { color: var(--faint); }

/* tables */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--panel-2); }
.tbl .key { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.tbl .ttl { font-weight: 600; }
.tbl-wrap { overflow-x: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 12px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 11px 10px; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* ticket detail */
.t-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.t-head h1 { font-size: 21px; }
.t-head .key { font-family: var(--mono); color: var(--muted); font-size: 13px; }
.t-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; align-items: start; }
@media (max-width: 1150px) { .t-grid { grid-template-columns: 1fr; } }
.desc { white-space: pre-wrap; word-wrap: break-word; }
.props { display: grid; grid-template-columns: 110px 1fr; gap: 9px 10px; align-items: center; font-size: 13px; }
.props > .k { color: var(--muted); font-weight: 600; font-size: 12px; }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.cm { display: flex; gap: 10px; }
.cm .body { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--panel); }
.cm.note .body { background: var(--warn-soft); border-color: transparent; }
.cm.worklog .body { background: var(--info-soft); border-color: transparent; }
.cm .meta { font-size: 12px; color: var(--muted); margin-bottom: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.cm .meta b { color: var(--text); }
.cm .txt { white-space: pre-wrap; word-wrap: break-word; }
.sys { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; padding-left: 42px; }
.sys::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--panel); padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.callout { border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.callout.info { background: var(--info-soft); } .callout.warn { background: var(--warn-soft); } .callout.ok { background: var(--ok-soft); } .callout.bad { background: var(--bad-soft); }
.files { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }

/* lab */
.topo { background: var(--panel-2); border-bottom: 1px solid var(--line); position: relative; }
.topo svg { display: block; width: 100%; height: 340px; }
.topo .node { cursor: pointer; }
.topo .node:hover .shape { stroke-width: 3; }
.topo .node.sel .shape { stroke: var(--accent); stroke-width: 3.5; }
.topo text { font-family: var(--sans); fill: var(--text); }
.topo .iflbl { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.topo .legend { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--muted); display: flex; gap: 10px; }
.topo .legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.devtabs { display: flex; gap: 2px; padding: 6px 8px 0; background: var(--term-bg); overflow-x: auto; }
.devtabs button { border: 0; background: transparent; color: var(--term-dim); font: 600 12px var(--mono); padding: 7px 12px; border-radius: 6px 6px 0 0; cursor: pointer; white-space: nowrap; }
.devtabs button.on { background: #1a222c; color: #fff; }
.term { background: #1a222c; color: var(--term-fg); font: 13px/1.45 var(--mono); height: 420px; overflow-y: auto; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; cursor: text; }
.term .cmd { color: #fff; }
.term .sysmsg { color: #e7c46a; }
.term .err { color: #ff8b80; }
.term .inrow { display: flex; }
.term .inrow input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; padding: 0; margin: 0; box-shadow: none; min-width: 40px; }
.lab-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.chk .ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; margin-top: 1px; }
.chk.pass .ic { background: var(--ok-soft); color: var(--ok); }
.chk.fail .ic { background: var(--bad-soft); color: var(--bad); }
.chk.todo .ic { background: var(--panel-2); color: var(--faint); border: 1px solid var(--line); }
.hint { background: var(--warn-soft); border-radius: 8px; padding: 8px 11px; font-size: 13px; }
.cmdlog { font: 12px/1.5 var(--mono); max-height: 320px; overflow: auto; background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }

/* scenario cards */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.sc { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color .15s; }
.sc:hover { border-color: var(--accent); }
.sc .t { font-weight: 650; }
.diff { letter-spacing: 2px; color: var(--warn); font-size: 12px; }

/* misc */
.spark { display: flex; gap: 1px; align-items: flex-end; height: 18px; }
.spark i { width: 3px; border-radius: 1px; background: var(--ok); }
.spark i.f { background: var(--bad); height: 18px; }
.bar { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: var(--accent); }
.pbars { display: flex; flex-direction: column; gap: 10px; }
.pbars .r { display: grid; grid-template-columns: 34px 1fr 30px; gap: 10px; align-items: center; font-size: 13px; }
.rank { font-weight: 800; color: var(--muted); width: 24px; text-align: center; display: inline-block; }
.rank.g1 { color: #d4a017; } .rank.g2 { color: #9aa5b1; } .rank.g3 { color: #b8733b; }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(1000px 500px at 10% -10%, var(--accent-soft), transparent), var(--bg); }
.login .card { width: 100%; max-width: 380px; padding: 28px; }
.login h1 { margin: 18px 0 4px; font-size: 21px; }

/* modal + toast */
.modal-bg { position: fixed; inset: 0; background: rgba(10,15,20,.45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; }
.modal.wide { max-width: 900px; }
.modal .card-b { display: flex; flex-direction: column; gap: 12px; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#toast .t { background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; box-shadow: var(--shadow); }
#toast .t.bad { background: var(--bad); color: #fff; }
pre.code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 12px/1.5 var(--mono); overflow: auto; white-space: pre-wrap; margin: 0; }

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 40; left: 0; top: 0; width: 240px; transform: translateX(-100%); transition: transform .2s; }
  .side.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .main { padding: 14px 16px 60px; }
  .mobile-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .term { height: 320px; font-size: 12px; }
  .topo svg { height: 240px; }
  .props { grid-template-columns: 96px 1fr; }
  .hide-sm { display: none; }
}