:root{
  --bg:#f2f3f7; --panel:#ffffff; --panel-2:#f8f9fc; --border:#e5e7ee; --text:#171a21; --text-dim:#666d7c;
  --accent:#5b4fe9; --accent-2:#7c6ef2; --accent-dim:#efedfe; --accent-contrast:#ffffff;
  --r1:#178a4c; --r1-bg:#e2f8ec; --r2:#a8790a; --r2-bg:#fdf3d8; --r3:#c15a12; --r3-bg:#fdead9; --r4:#d13b3b; --r4-bg:#fce3e3;
  --shadow-sm: 0 1px 2px rgba(20,20,43,.06);
  --shadow-md: 0 4px 16px rgba(20,20,43,.08), 0 1px 3px rgba(20,20,43,.06);
  --shadow-lg: 0 12px 32px rgba(20,20,43,.14);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --sidebar-w:272px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101116; --panel:#181a21; --panel-2:#1e2029; --border:#2b2e38; --text:#eef0f5; --text-dim:#9298a6;
    --accent:#8b80ff; --accent-2:#a89bff; --accent-dim:#221f3d; --accent-contrast:#12111c;
    --r1:#3ecf7e; --r1-bg:#0f2d1d; --r2:#e6b93d; --r2-bg:#33280a; --r3:#f38a4d; --r3-bg:#38220d; --r4:#f0625f; --r4-bg:#3a1414;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#101116; --panel:#181a21; --panel-2:#1e2029; --border:#2b2e38; --text:#eef0f5; --text-dim:#9298a6;
  --accent:#8b80ff; --accent-2:#a89bff; --accent-dim:#221f3d; --accent-contrast:#12111c;
  --r1:#3ecf7e; --r1-bg:#0f2d1d; --r2:#e6b93d; --r2-bg:#33280a; --r3:#f38a4d; --r3-bg:#38220d; --r4:#f0625f; --r4-bg:#3a1414;
}
:root[data-theme="light"]{
  --bg:#f2f3f7; --panel:#ffffff; --panel-2:#f8f9fc; --border:#e5e7ee; --text:#171a21; --text-dim:#666d7c;
  --accent:#5b4fe9; --accent-2:#7c6ef2; --accent-dim:#efedfe; --accent-contrast:#ffffff;
  --r1:#178a4c; --r1-bg:#e2f8ec; --r2:#a8790a; --r2-bg:#fdf3d8; --r3:#c15a12; --r3-bg:#fdead9; --r4:#d13b3b; --r4-bg:#fce3e3;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent); color:#fff;}
#shell{display:flex; min-height:100vh;}

/* Sidebar */
#sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:30;
}
#sidebar .brand{padding:20px 18px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px;}
#sidebar .brand .logo{
  width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg, var(--accent), var(--accent-2));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex:0 0 34px;
  box-shadow:var(--shadow-sm);
}
#sidebar .brand h1{font-size:15px; margin:0; font-weight:700; letter-spacing:-.01em;}
#sidebar .brand p{margin:1px 0 0; font-size:11px; color:var(--text-dim);}

#progress-overview{padding:14px 18px 4px;}
#progress-overview .po-label{display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:6px;}
#progress-overview .po-track{height:6px; border-radius:4px; background:var(--panel-2); border:1px solid var(--border); overflow:hidden;}
#progress-overview .po-fill{height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:4px; transition:width .3s ease;}

nav#navlist{flex:1; padding:8px 10px;}
nav#navlist .navgroup-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); padding:14px 8px 6px; font-weight:700;}
nav#navlist button.navitem{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:9px 10px; border:none; background:none; color:var(--text);
  font-size:13px; border-radius:var(--radius-sm); cursor:pointer; margin-bottom:2px; transition:background .12s ease; min-height:40px;
}
nav#navlist button.navitem:hover{background:var(--panel-2);}
nav#navlist button.navitem.active{background:var(--accent-dim); color:var(--accent); font-weight:600;}
nav#navlist button.navitem .nav-label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
nav#navlist button.navitem .chip{
  font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700; background:var(--panel-2); color:var(--text-dim); flex:0 0 auto; border:1px solid var(--border);
}
nav#navlist button.navitem.active .chip{background:rgba(255,255,255,.5); color:var(--accent); border-color:transparent;}
nav#navlist button.navitem .chip.done{background:var(--r1-bg); color:var(--r1); border-color:transparent;}
#sidebar-footer{padding:12px 18px; border-top:1px solid var(--border); font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:6px;}
#sidebar-footer .dot{width:6px; height:6px; border-radius:50%; background:var(--r1); flex:0 0 6px;}

/* Topbar */
#topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); padding:12px 24px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end;
}
#topbar .field{display:flex; flex-direction:column; gap:4px; min-width:150px; flex:1 1 150px; max-width:220px;}
#topbar .field label{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
#topbar input[type=text], #topbar input[type=date]{
  padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel-2); color:var(--text); font-size:13px; width:100%;
  transition:border-color .12s ease, box-shadow .12s ease;
}
#topbar input[type=text]:focus, #topbar input[type=date]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);}
#topbar .actions{display:flex; gap:8px; margin-left:auto; align-self:center; flex-wrap:wrap;}
#status-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:20px;
  background:var(--panel-2); color:var(--text-dim); border:1px solid var(--border); align-self:center;
}
#status-chip.submitted{background:var(--r1-bg); color:var(--r1); border-color:transparent;}
#status-chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

button.btn{
  padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--panel-2); color:var(--text);
  font-size:12.5px; cursor:pointer; font-weight:600; white-space:nowrap; transition:transform .08s ease, border-color .12s ease, box-shadow .12s ease;
  min-height:38px; display:inline-flex; align-items:center; gap:6px;
}
button.btn:hover{border-color:var(--accent); box-shadow:var(--shadow-sm);}
button.btn:active{transform:scale(.97);}
button.btn.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color:transparent; box-shadow:var(--shadow-sm);}
button.btn.primary:disabled{opacity:.6; cursor:default; transform:none;}
button.btn.danger{color:var(--r4); border-color:var(--r4);}
#hamburger{display:none;}

/* Main */
#main{flex:1; min-width:0;}
#content{padding:26px 30px 70px; max-width:1120px; margin:0 auto;}
.page{display:none; animation:fadein .18s ease;}
.page.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

h2.page-title{font-size:21px; margin:0 0 4px; letter-spacing:-.01em;}
p.page-sub{color:var(--text-dim); margin:0 0 22px; font-size:13.5px;}

.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease;}
.card h3{margin:0 0 8px; font-size:15.5px; letter-spacing:-.005em;}
.card h3 .num{color:var(--accent); margin-right:6px;}

.def-text{color:var(--text-dim); font-size:13px; margin:0 0 14px; line-height:1.6;}

.ctx-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:760px){.ctx-grid{grid-template-columns:1fr;}}
.ctx-box{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px;}
.ctx-box .ctx-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); margin-bottom:10px;}
.pd-row{display:flex; gap:8px; margin-bottom:8px; align-items:center;}
.pd-row label{font-size:11px; color:var(--text-dim); width:16px; flex:0 0 16px; font-weight:700;}
.pd-row select{flex:1; padding:8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); font-size:12.5px; min-height:38px;}
.r-result{display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border);}
.r-result .r-value{font-size:12px; color:var(--text-dim);}
.badge{display:inline-block; padding:3px 11px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap;}
.badge.r1{background:var(--r1-bg); color:var(--r1);}
.badge.r2{background:var(--r2-bg); color:var(--r2);}
.badge.r3{background:var(--r3-bg); color:var(--r3);}
.badge.r4{background:var(--r4-bg); color:var(--r4);}
.badge.rna{background:var(--panel-2); color:var(--text-dim); border:1px solid var(--border);}

table.summary{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px;}
table.summary th, table.summary td{padding:9px 8px; border-bottom:1px solid var(--border); text-align:left;}
table.summary th{color:var(--text-dim); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em;}
table.summary tr.total-row td{font-weight:700; border-top:2px solid var(--border);}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

.mitigated-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px;}
@media (max-width:760px){.mitigated-grid{grid-template-columns:1fr;}}
.mitigated-box select{width:100%; padding:8px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); margin-top:6px; min-height:38px;}
.note-box{margin-top:10px;}
.note-box .note-label{font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; display:flex; align-items:center; gap:5px; font-weight:700;}
.note-box .note-label .pin{width:7px; height:7px; border-radius:50%; background:#d946ef; flex:0 0 7px;}
.note-box textarea{min-height:52px; font-size:12px;}
.def-input{min-height:60px;}
textarea{width:100%; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--text); font-family:inherit; font-size:12.5px; resize:vertical; min-height:70px; transition:border-color .12s ease, box-shadow .12s ease;}
textarea:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);}

.methodology-table{width:100%; border-collapse:collapse; font-size:12.5px; margin:10px 0 18px;}
.methodology-table th, .methodology-table td{border:1px solid var(--border); padding:9px 11px; text-align:left; vertical-align:top;}
.methodology-table th{background:var(--panel-2); font-size:11px; text-transform:uppercase; color:var(--text-dim);}
.process-block{white-space:pre-line; font-size:13px; color:var(--text-dim); line-height:1.65; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px;}
.sources-block{font-size:12.5px; color:var(--text-dim); background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:12px;}
.sources-block a{color:var(--accent); text-decoration:underline; word-break:break-word;}
.sources-block a:hover{color:var(--accent-2);}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.stat-grid{grid-template-columns:1fr;}}
.stat-tile{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm);}
.stat-tile .stat-label{font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-bottom:8px;}
.stat-tile .stat-value{display:flex; align-items:baseline; gap:8px;}
.stat-tile .stat-value .num{font-size:22px; font-weight:800; letter-spacing:-.02em;}

.overall-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:920px){.overall-grid{grid-template-columns:1fr;}}

.measures-toolbar{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.measures-toolbar input[type=text]{flex:1; min-width:180px; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--text);}
.measures-toolbar select{padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel); color:var(--text);}
table.measures{width:100%; border-collapse:collapse; font-size:12.5px;}
table.measures th, table.measures td{padding:10px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;}
table.measures th{color:var(--text-dim); font-size:11px; text-transform:uppercase; background:var(--panel-2);}
table.measures td.resp{white-space:nowrap;}
.resp-tag{font-size:10.5px; padding:2px 8px; border-radius:10px; background:var(--accent-dim); color:var(--accent); font-weight:700;}
tr.measure-row.selected{background:var(--accent-dim);}
tr.measure-row input[type=checkbox]{width:18px; height:18px;}

.section-divider{margin:28px 0 14px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); display:flex; align-items:center; gap:10px;}
.section-divider::after{content:''; flex:1; height:1px; background:var(--border);}

/* Toast */
#toast{
  position:fixed; bottom:20px; right:20px; z-index:100; max-width:340px; display:flex; flex-direction:column; gap:8px;
}
.toast-item{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; box-shadow:var(--shadow-lg);
  font-size:13px; animation:toastin .2s ease; display:flex; gap:10px; align-items:flex-start;
}
.toast-item.success{border-left:3px solid var(--r1);}
.toast-item.error{border-left:3px solid var(--r4);}
@keyframes toastin{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

@media (max-width:900px){
  #sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg);}
  #sidebar.open{transform:translateX(0);}
  #hamburger{display:inline-flex;}
  #content{padding:18px 16px 70px;}
  #topbar{padding:10px 14px;}
  #topbar .field{max-width:none; flex:1 1 46%;}
  #topbar .actions{width:100%; justify-content:flex-start;}
  #toast{left:12px; right:12px; max-width:none;}
}
@media (max-width:480px){
  #topbar .field{flex:1 1 100%;}
  .card{padding:16px;}
  #content{padding:14px 12px 70px;}
}
#overlay{display:none; position:fixed; inset:0; background:rgba(10,10,20,.45); z-index:25;}
#overlay.show{display:block;}

/* Full report (used for print/PDF export — contains every section, not just the active page) */
#print-report{display:none;}
#print-report h1{font-size:20px; margin:0 0 14px;}
#print-report h2{font-size:16px; margin:28px 0 4px; border-bottom:2px solid var(--accent); padding-bottom:4px;}
#print-report h4{font-size:13px; margin:14px 0 4px;}
table.rep-table{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:14px;}
table.rep-table th, table.rep-table td{border:1px solid var(--border); padding:5px 7px; text-align:left; vertical-align:top;}
table.rep-meta td{padding:4px 8px;}
.rep-def{font-size:12px; color:var(--text-dim); margin:2px 0 6px;}

@media print{
  #shell, #toast, .no-print{display:none !important;}
  #print-report{display:block !important; max-width:900px; margin:0 auto; padding:20px; color:#1c2128;}
  #print-report .card{box-shadow:none; border:1px solid #ccc; page-break-inside:avoid;}
}