:root {
  color-scheme: dark;
  --bg: #07100f;
  --panel: #0d1c1a;
  --panel-2: #112724;
  --line: #24413d;
  --text: #eef8f5;
  --muted: #9db7b1;
  --accent: #d9a441;
  --accent-2: #53c7ad;
  --danger: #ff7468;
  --warn: #ffc857;
  --ok: #6ee7a8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 10% 0%, #17342f 0, #07100f 34rem); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { border: 0; background: var(--accent); color: #160f02; font-weight: 750; border-radius: 12px; padding: 0.8rem 1rem; cursor: pointer; }
button:hover { filter: brightness(1.06); }
button.ghost { background: #18332f; color: var(--text); border: 1px solid var(--line); }
button.small { padding: 0.45rem 0.65rem; font-size: 0.85rem; }
.hidden { display: none !important; }
.login-card { width: min(460px, calc(100vw - 2rem)); margin: 12vh auto; padding: 2rem; background: rgba(13,28,26,.95); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.brand { letter-spacing: .22em; color: var(--accent); font-size: .78rem; font-weight: 900; }
h1, h2, h3 { margin: .25rem 0 .7rem; line-height: 1.05; }
p { color: var(--muted); line-height: 1.45; }
label { display: grid; gap: .4rem; margin: 1rem 0; color: var(--muted); }
input, textarea, select { width: 100%; border: 1px solid var(--line); background: #071513; color: var(--text); border-radius: 12px; padding: .85rem; outline: none; }
textarea { min-height: 115px; resize: vertical; }
.small { font-size: .85rem; }
#portal { width: min(1420px, calc(100vw - 2rem)); margin: 0 auto; padding: 1rem 0 3rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; }
.top-actions { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; padding: 1.25rem; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(135deg, rgba(17,39,36,.92), rgba(13,28,26,.7)); }
.hero p { margin-bottom: 0; }
.principles { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; max-width: 520px; }
.principles span, .badge { border: 1px solid var(--line); background: rgba(7,21,19,.7); color: var(--muted); padding: .35rem .55rem; border-radius: 999px; font-size: .82rem; }
.card { background: rgba(13,28,26,.95); border: 1px solid var(--line); border-radius: 20px; padding: 1rem; box-shadow: 0 12px 42px rgba(0,0,0,.18); }
.new-incident { margin: 1rem 0; display: grid; gap: .75rem; }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.chips button { background: #102520; color: var(--muted); border: 1px solid var(--line); font-weight: 650; padding: .5rem .7rem; }
.layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1rem; }
.incident-list { min-height: 540px; }
.incident-item { padding: .75rem; border: 1px solid var(--line); border-radius: 14px; margin: .55rem 0; cursor: pointer; background: #0a1715; }
.incident-item.active { border-color: var(--accent); background: #15231d; }
.incident-title { font-weight: 800; margin-bottom: .35rem; }
.meta { display: flex; gap: .4rem; flex-wrap: wrap; color: var(--muted); font-size: .82rem; }
.status { color: #061410; background: var(--accent-2); padding: .15rem .45rem; border-radius: 999px; font-weight: 800; }
.status.Escalated { background: var(--warn); }
.status.Resolved { background: var(--ok); }
.status.Waiting { background: #b6a6ff; }
.detail { min-height: 540px; }
.empty { min-height: 420px; display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 16px; }
.detail-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; border-bottom: 1px solid var(--line); padding-bottom: 1rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.thread { display: grid; gap: .75rem; }
.msg { padding: .85rem; border-radius: 14px; border: 1px solid var(--line); background: #091714; }
.msg.staff { background: #112722; }
.msg.coordinator { background: #171d16; border-color: #4b3d1b; }
.msg.system { color: var(--muted); font-size: .9rem; }
.msg .role { color: var(--accent); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; font-weight: 900; margin-bottom: .35rem; }
ul { margin-top: .45rem; }
.side-panel { display: grid; gap: 1rem; align-content: start; }
.check { padding: .7rem; border: 1px solid var(--line); border-radius: 12px; margin: .45rem 0; background: #091714; }
.check.warning { border-color: rgba(255,200,87,.55); }
.check.ok { border-color: rgba(110,231,168,.45); }
.check.info { border-color: rgba(83,199,173,.35); }
.pack { white-space: pre-wrap; background: #06110f; border: 1px solid var(--line); border-radius: 12px; padding: .8rem; max-height: 380px; overflow: auto; color: #dcebe7; font-size: .9rem; }
.evidence img { max-width: 100%; border-radius: 10px; border: 1px solid var(--line); margin-top: .5rem; }
.row { display: flex; gap: .5rem; align-items: center; }
.row > * { flex: 1; }
@media (max-width: 980px) { .layout, .grid, .hero { grid-template-columns: 1fr; } .principles { justify-content: flex-start; } .incident-list { min-height: auto; max-height: 55vh; overflow: auto; } .detail { scroll-margin-top: 1rem; } .detail-header { flex-direction: column; } .detail-header .row { flex: 1 1 auto !important; width: 100%; } }

.llm-warning { border: 1px solid rgba(255,200,87,.65); background: rgba(255,200,87,.1); color: #ffe6a3; padding: .65rem; border-radius: 10px; margin-bottom: .65rem; font-size: .9rem; }

.open-hint { margin-top: .55rem; color: var(--accent); font-size: .82rem; font-weight: 800; }
.next-step-banner { margin-top: .75rem; border: 1px solid rgba(217,164,65,.65); background: rgba(217,164,65,.12); color: #ffe2a4; border-radius: 12px; padding: .7rem; font-weight: 750; }

.diag-json { white-space: pre-wrap; overflow: auto; max-height: 320px; background: #06110f; border: 1px solid var(--line); border-radius: 10px; padding: .65rem; font-size: .78rem; color: #d8eee8; }
details.check summary { cursor: pointer; }