:root{
  --bg:#0E1116;
  --bg-panel:#141821;
  --bg-card:#1A1F29;
  --bg-card-hover:#20262F;
  --border:#262B36;
  --border-strong:#323847;
  --text-primary:#F2F3F5;
  --text-secondary:#9098A8;
  --text-muted:#6B7280;
  --blue:#4C7DFF;
  --blue-dark:#3A63CC;
  --blue-bg:rgba(76,125,255,0.14);
  --blue-text:#8FADFF;
  --amber:#FBBF24;
  --amber-bg:rgba(251,191,36,0.14);
  --amber-text:#FBBF24;
  --violet:#A78BFA;
  --violet-bg:rgba(167,139,250,0.14);
  --violet-text:#C4B5FD;
  --green:#34D399;
  --green-bg:rgba(52,211,153,0.14);
  --green-text:#34D399;
  --orange:#FB923C;
  --orange-bg:rgba(251,146,60,0.14);
  --orange-text:#FB923C;
  --red:#F87171;
  --red-bg:rgba(248,113,113,0.14);
  --red-text:#F87171;

  /* Aliases: manager.js's injected triage-view styles reference --card-bg
     and --border-color, which aren't otherwise defined here. Without these,
     that CSS silently falls back to browser defaults instead of matching
     the rest of the theme (e.g. the sticky triage sidebar header). */
  --card-bg: var(--bg-card);
  --border-color: var(--border);
}
*{box-sizing:border-box;}
body{margin:0;}
#app{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text-primary);
  min-height:100vh;
  padding-bottom:3rem;
}
.mono{font-family:'IBM Plex Mono', monospace;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.75rem; border-bottom:1px solid var(--border);
  background:var(--bg-panel);
  flex-wrap:wrap; gap:1rem;
}
.brand{font-size:19px; font-weight:700; letter-spacing:0.01em;}
.brand span{color:var(--blue);}
.role-toggle{display:flex; gap:1.75rem;}
.role-toggle a, .role-toggle span{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em;
  text-decoration:none; padding:0.4rem 0; border-bottom:2px solid transparent;
}
.role-toggle a{ color:var(--text-secondary); }
.role-toggle a:hover{ color:var(--text-primary); }
.role-toggle span.active{ color:var(--blue); border-bottom-color:var(--blue); }
main{max-width:1100px; margin:0 auto; padding:1.75rem 1.5rem;}
h1,h2,h3{margin:0; font-weight:600;}
.section-label{
  font-family:'Inter', sans-serif; text-transform:uppercase; letter-spacing:0.07em;
  font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:0.6rem;
}
.card{
  background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border);
  border-radius:8px; padding:1.25rem 1.4rem; margin-bottom:1.25rem;
}
label{display:block; font-size:12.5px; color:var(--text-secondary); margin:0 0 0.3rem;}
input,select,textarea{
  width:100%; font-family:'Inter',sans-serif; font-size:14px;
  padding:0.55rem 0.65rem; border:1px solid var(--border-strong); border-radius:6px;
  background:var(--bg); color:var(--text-primary); margin-bottom:0.9rem;
}
textarea{min-height:70px; resize:vertical;}
input::placeholder, textarea::placeholder{color:var(--text-muted);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:0; border-color:var(--blue);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem;}
.btn{
  font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
  padding:0.6rem 1.2rem; border-radius:20px; border:1px solid var(--border-strong);
  background:transparent; color:var(--text-primary); cursor:pointer;
}
.btn:hover{background:var(--bg-card-hover);}
.btn.secondary{background:transparent; color:var(--text-primary); border:1px solid var(--border-strong);}
.btn.amber{background:var(--blue); border-color:var(--blue); color:#fff;}
.btn.amber:hover{background:var(--blue-dark);}
.btn:disabled{opacity:0.4; cursor:not-allowed;}
.chip{
  display:inline-flex; align-items:center; font-size:11px; font-weight:600;
  padding:0.2rem 0.55rem; border-radius:4px; text-transform:uppercase; letter-spacing:0.03em;
}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0.9rem; margin-bottom:1.5rem;}
.stat{background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:0.9rem 1rem;}
.stat .num{font-family:'Inter',sans-serif; font-size:26px; font-weight:700;}
.stat .lbl{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.table-head{
  display:flex; gap:1rem; padding:0.55rem 0; border-bottom:1px solid var(--border);
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--text-muted);
}
.table-head .th-check{width:20px; flex:none;}
.table-head .th-main{flex:2;}
.table-head .th-col{flex:1;}
.report-row{
  display:flex; align-items:flex-start; gap:0.75rem; padding:0.85rem 0;
  border-bottom:1px solid var(--border);
}
.report-row:last-child{border-bottom:none;}
.report-row input[type=checkbox]{width:auto; margin:0.2rem 0 0; flex:none; accent-color:var(--blue);}
.report-body{flex:1; min-width:0;}
.report-meta{font-size:12px; color:var(--text-secondary); margin-top:2px;}
.report-desc{font-size:13.5px; margin-top:4px; line-height:1.5; color:var(--text-primary);}
.empty{
  text-align:center; padding:2rem 1rem; color:var(--text-secondary); font-size:13.5px;
  border:1px dashed var(--border-strong); border-radius:8px;
}
.board{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;}
.col-head{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-secondary); margin-bottom:0.6rem; display:flex; justify-content:space-between;}
.topic-card{
  position:relative; background:var(--bg-card); color:var(--text-primary);
  border:1px solid var(--border); border-left:3px solid var(--border-strong);
  border-radius:8px; padding:1rem 1rem 0.9rem 1rem; margin-bottom:0.8rem; cursor:pointer;
}
.topic-card:hover{border-color:var(--border-strong); background:var(--bg-card-hover);}
.topic-id{font-size:11px; color:var(--text-muted);}
.topic-title{font-size:15px; font-weight:600; margin:0.2rem 0 0.5rem; line-height:1.3; color:var(--text-primary);}
.topic-meta{display:flex; gap:0.4rem; flex-wrap:wrap; margin-top:0.5rem;}
.topic-count{font-size:12px; color:var(--text-secondary); margin-top:0.5rem;}
.modal-overlay{
  position:fixed; inset:0; background:rgba(4,6,10,0.7); display:flex;
  align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto; z-index:50;
}
.modal{
  background:var(--bg-panel); border:1px solid var(--border); color:var(--text-primary);
  border-radius:10px; max-width:640px; width:100%;
  padding:1.5rem 1.6rem; margin-bottom:2rem;
}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem;}
.close-x{background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-secondary); line-height:1;}
.close-x:hover{color:var(--text-primary);}
.tab-row{display:flex; gap:0.5rem; margin-bottom:1rem;}
.tab-row button{
  flex:1; padding:0.5rem; border-radius:6px; border:1px solid var(--border-strong);
  background:transparent; font-size:13px; cursor:pointer; color:var(--text-secondary);
}
.tab-row button.active{background:var(--blue); color:#fff; border-color:var(--blue);}
.timeline-item{border-left:2px solid var(--border-strong); padding:0 0 0.9rem 0.9rem; margin-left:4px; position:relative;}
.timeline-item::before{content:''; position:absolute; left:-5px; top:2px; width:8px; height:8px; border-radius:50%; background:var(--blue);}
.timeline-date{font-size:11.5px; color:var(--text-muted);}
.timeline-note{font-size:13.5px; margin-top:2px; line-height:1.5; color:var(--text-primary);}
.linked-report{border:1px solid var(--border); border-radius:6px; padding:0.65rem 0.8rem; margin-bottom:0.5rem;}
.filter-row{display:flex; gap:0.6rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap;}
.filter-row select{width:auto; margin:0;}
.filter-row input{width:auto; margin:0;}
.note{font-size:12.5px; color:var(--text-muted); margin-top:0.4rem;}
.checklist{
  border:1px solid var(--border-strong); border-radius:6px; max-height:190px;
  overflow-y:auto; padding:0.4rem 0.75rem; margin-bottom:0.9rem; background:var(--bg);
}
.checklist label{
  display:flex; align-items:center; gap:0.55rem; font-size:13.5px; color:var(--text-primary);
  padding:0.3rem 0; margin:0; cursor:pointer; font-weight:400; text-transform:none; letter-spacing:normal;
}
.checklist input[type=checkbox]{ width:auto; margin:0; flex:none; accent-color:var(--blue); }
.checklist .muted{ color:var(--text-muted); font-size:12.5px; padding:0.35rem 0; }

.subtab-row{ display:flex; gap:0.5rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); }
.subtab-row button{
  background:transparent; border:none; color:var(--text-secondary); font-size:13px; font-weight:600;
  padding:0.5rem 0.2rem; margin-right:1.25rem; cursor:pointer; border-bottom:2px solid transparent;
}
.subtab-row button.active{ color:var(--blue); border-bottom-color:var(--blue); }
.subtab-row button:hover:not(.active){ color:var(--text-primary); }

.bar-row{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.55rem; }
.bar-label{ width:170px; flex:none; font-size:12.5px; color:var(--text-secondary); }
.bar-track{ flex:1; background:var(--bg); border:1px solid var(--border); border-radius:4px; height:14px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--blue); border-radius:4px 0 0 4px; }
.bar-count{ width:34px; flex:none; text-align:right; font-size:12px; color:var(--text-secondary); }

.trend-row{ display:flex; align-items:flex-end; gap:0.6rem; height:120px; padding-top:0.5rem; }
.trend-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.trend-bar{ width:100%; max-width:34px; background:var(--blue); border-radius:3px 3px 0 0; min-height:4px; }
.trend-label{ font-size:10px; color:var(--text-muted); margin-top:4px; white-space:nowrap; }
.trend-count{ font-size:11px; color:var(--text-secondary); }
@media (max-width:820px){
  .field-row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .board{grid-template-columns:1fr;}
  .table-head{display:none;}
}