:root{
  --bg:#0a2f52;
  --panel:#0d3a63;
  --panel-2:#082444;
  --line:#2a5580;
  --line-soft:#1d4470;
  --ink:#bfe4ff;
  --ink-dim:#8fd0f2;
  --ink-faint:#6fa8c9;
  --accent:#7dd3fc;
  --accent-ink:#04202b;
  --tele:#7be0c4;
  --good:#1baf7a;
  --warn:#eda100;
  --bad:#e34948;
  --mode-air:#c9a8f5;
  --mode-sea:#7dd3fc;
  --mode-road:#eda100;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --head:'Rajdhani', 'Arial Narrow', sans-serif;
  --body:'Barlow', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);}
code{font-family:var(--mono); font-size:0.92em; background:var(--panel-2); border:1px solid var(--line); padding:1px 5px; border-radius:4px; color:var(--ink);}

.app{display:flex; flex-direction:column;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d3a63,#0a2f52);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand .mark{font-family:var(--head); font-weight:700; font-size:22px; letter-spacing:.04em; color:var(--ink);}
.brand .mark span{color:var(--accent);}
.brand .mark .version-badge{
  font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.02em; color:var(--ink-faint);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:2px 6px; vertical-align:middle;
}
.brand .sub{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.03em;}
.brand .sub .brand-credit{color:var(--ink-dim); font-weight:600;}
.back-link{
  font-family:var(--head); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none; padding:6px 10px; border:1px solid var(--line); border-radius:6px;
}
.back-link:hover{color:var(--accent); border-color:var(--accent);}

.layout{display:grid; grid-template-columns:300px 1fr 320px;}

.rail, .side-panel{
  border-right:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, rgba(125,211,252,.05) 0, rgba(125,211,252,.05) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(125,211,252,.05) 0, rgba(125,211,252,.05) 1px, transparent 1px, transparent 28px),
    var(--panel-2);
  overflow-y:auto; padding:18px 18px 28px; display:flex; flex-direction:column; gap:20px;
  max-height:calc(100vh - 57px);
}
.side-panel{border-right:none; border-left:1px solid var(--line);}
.rail::-webkit-scrollbar, .side-panel::-webkit-scrollbar{width:8px;}
.rail::-webkit-scrollbar-thumb, .side-panel::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

.rail-header{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.rail-h1{font-family:var(--head); font-weight:700; font-size:16px; letter-spacing:.04em; margin:0; color:var(--ink);}
.rail-note{font-size:11.5px; line-height:1.55; color:var(--ink-faint); margin:0; padding-bottom:8px;}

.rail-section{display:flex; flex-direction:column; gap:10px;}
.rail-section h2{
  margin:0; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); padding-bottom:8px; border-bottom:1px solid var(--line-soft);
}

.gen-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px;}
.gen-grid label{display:flex; flex-direction:column; gap:3px; font-family:var(--head); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}

input[type=number], input[type=text], select{
  font-family:var(--mono); font-size:12.5px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:5px; padding:5px 7px; width:100%;
}
input[type=number]:focus, input[type=text]:focus, select:focus{outline:none; border-color:var(--accent);}

.btn{
  font-family:var(--head); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:7px;
  padding:9px 12px; cursor:pointer; transition:border-color .15s, color .15s, box-shadow .15s; width:100%;
  text-align:center; text-decoration:none; display:inline-block; box-sizing:border-box;
}
.btn:hover{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 1px rgba(125,211,252,.25) inset;}
.btn:disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
.btn.active{border-color:var(--accent); color:var(--accent-ink); background:var(--accent);}
.btn.small{padding:6px 10px; font-size:11px; width:auto;}
.btn.danger:hover{border-color:var(--bad); color:var(--bad);}
.btn-row{display:flex; gap:8px; flex-wrap:wrap;}
.file-btn{display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}

.products-list{display:flex; flex-direction:column; gap:6px;}
.product-row{display:grid; grid-template-columns:1fr 60px 60px 22px; gap:6px; align-items:center;}
.product-row input{font-size:11.5px; padding:4px 6px;}
.product-row .rm{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:14px;}
.product-row .rm:hover{color:var(--bad);}

.mode-defaults{display:flex; flex-direction:column; gap:10px;}
.mode-card{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:8px 10px;}
.mode-card .mode-title{font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:6px;}
.mode-card.air .mode-title{color:var(--mode-air);}
.mode-card.sea .mode-title{color:var(--mode-sea);}
.mode-card.road .mode-title{color:var(--mode-road);}
.mode-fields{display:grid; grid-template-columns:1fr 1fr; gap:5px 8px;}
.mode-fields label{display:flex; flex-direction:column; gap:2px; font-size:10px; color:var(--ink-faint);}
.mode-fields input{font-size:11px; padding:3px 5px;}

.stage-wrap{position:relative; min-height:0; background:radial-gradient(ellipse at 50% 30%, #164a78 0%, #0a2f52 70%); overflow:hidden;}
#stage{position:absolute; inset:0;}
#map-svg{display:block; cursor:grab;}
#map-svg.panning{cursor:grabbing;}
.map-land{fill:#0d3a63; stroke:var(--line-soft); stroke-width:0.5;}
.map-edge{stroke-linecap:round; cursor:pointer;}
.map-edge.mode-air{stroke:var(--mode-air);}
.map-edge.mode-sea{stroke:var(--mode-sea);}
.map-edge.mode-road{stroke:var(--mode-road);}
.map-edge.disabled{stroke:var(--bad); stroke-dasharray:3,3;}
.map-edge.selected{stroke:#fff; stroke-width:3;}
.map-node{cursor:pointer; stroke:var(--panel-2); stroke-width:1;}
.map-node.type-production{fill:var(--good);}
.map-node.type-warehouse{fill:var(--accent);}
.map-node.type-consumer{fill:var(--tele);}
.map-node.disabled{fill:var(--bad);}
.map-node.selected{stroke:#fff; stroke-width:2.5;}

.stage-toolbar{
  position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
  pointer-events:none;
}
.stage-toolbar .btn, .stage-toolbar .viewmode-group, .stage-toolbar .toolbar-left{pointer-events:auto;}
.toolbar-left{display:flex; gap:8px; flex-wrap:wrap;}
.viewmode-group{display:flex; gap:6px; background:rgba(10,47,82,.72); border:1px solid var(--line); border-radius:8px; padding:4px; backdrop-filter:blur(6px);}
.viewmode-group .btn{background:transparent; border:none; width:auto;}
.viewmode-group .btn.active{background:var(--accent); color:var(--accent-ink);}
#btn-solve{width:auto;}
.map-diagram-label{font-family:var(--head); font-size:6px; font-weight:700; letter-spacing:.08em; fill:var(--ink-faint);}

.caption{
  position:absolute; left:14px; bottom:14px; font-family:var(--mono); font-size:11px; color:var(--ink-faint);
  background:rgba(10,47,82,.6); padding:5px 9px; border-radius:6px;
}

.kpi-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.kpi-tile{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 11px;}
.kpi-label{font-family:var(--head); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
.kpi-value{font-family:var(--head); font-size:19px; font-weight:700; color:var(--ink); margin-top:2px; font-variant-numeric:tabular-nums;}
.kpi-sub{font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-top:2px;}
.kpi-tile.status-warning{border-color:rgba(237,161,0,.5);}
.kpi-tile.status-warning .kpi-value{color:var(--warn);}
.kpi-tile.status-critical{border-color:rgba(227,73,72,.6); background:rgba(227,73,72,.06);}
.kpi-tile.status-critical .kpi-value{color:var(--bad);}
.kpi-tile.status-good .kpi-value{color:var(--good);}
.kpi-perproduct{display:flex; flex-direction:column; gap:4px;}
.kpi-pp-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; padding:3px 0; border-bottom:1px dashed var(--line-soft); color:var(--ink-dim);}
.kpi-pp-row b{color:var(--ink);}

.scenario-list{display:flex; flex-direction:column; gap:5px; max-height:180px; overflow-y:auto;}
.scenario-chip{display:flex; align-items:center; justify-content:space-between; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:5px 8px; font-family:var(--mono); font-size:11px;}
.scenario-chip .lbl{color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.scenario-chip button{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:13px;}
.scenario-chip button:hover{color:var(--bad);}
.scenario-empty{font-size:11.5px; color:var(--ink-faint); font-style:italic;}

.inspector{font-size:12.5px; color:var(--ink-dim); line-height:1.6;}
.inspector .hint{color:var(--ink-faint); font-size:12px;}
.insp-title{font-family:var(--head); font-weight:700; font-size:14px; color:var(--ink);}
.insp-type{font-family:var(--mono); font-size:10.5px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
.insp-row{display:flex; justify-content:space-between; gap:10px; padding:2px 0; border-bottom:1px dashed var(--line-soft);}
.insp-row span{color:var(--ink-faint); text-transform:capitalize;}
.insp-row b{color:var(--ink); font-weight:500; text-align:right;}
.insp-actions{display:flex; gap:8px; margin-top:8px;}

.scan-limit-label{display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:var(--head); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);}
.scan-limit-label input{width:70px;}
.scan-results{display:flex; flex-direction:column; gap:5px; max-height:280px; overflow-y:auto;}
.scan-row{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px 9px; cursor:pointer;}
.scan-row:hover{border-color:var(--accent);}
.scan-row .sr-top{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px;}
.scan-row .sr-id{color:var(--ink);}
.scan-row .sr-drop{color:var(--bad); font-weight:600;}
.scan-row .sr-sub{font-size:10px; color:var(--ink-faint); margin-top:2px;}

.lower{max-width:1500px; margin:0 auto; padding:26px 22px 0; width:100%;}
.lower-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px;}
.panel{position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:2px; padding:16px 18px;}
.panel:before, .panel:after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none; z-index:1;
  border-color:var(--accent); border-style:solid; border-width:0;
}
.panel:before{top:-1px; left:-1px; border-left-width:2px; border-top-width:2px;}
.panel:after{bottom:-1px; right:-1px; border-right-width:2px; border-bottom-width:2px;}
.panel h2{margin:0; font-family:var(--head); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);}
.panel-note{font-size:12px; color:var(--ink-faint); margin:0 0 10px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.count-badge{font-family:var(--mono); font-size:11px; color:var(--ink-faint); font-weight:400; text-transform:none; letter-spacing:0;}

.table-wrap{max-height:360px; overflow:auto; border:1px solid var(--line-soft); border-radius:6px;}
table.data-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px;}
table.data-table thead th{
  position:sticky; top:0; background:var(--panel); color:var(--ink-faint); text-align:left; padding:6px 8px;
  border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap; z-index:1;
}
table.data-table tbody td{padding:3px 8px; border-bottom:1px solid var(--line-soft); white-space:nowrap;}
table.data-table tbody tr:hover{background:rgba(125,211,252,.06);}
table.data-table tbody tr.selected{background:rgba(125,211,252,.14);}
table.data-table tbody tr.row-disabled{opacity:0.5;}
table.data-table input, table.data-table select{padding:2px 4px; font-size:11px; min-width:56px;}
table.data-table input[type=text]{min-width:90px;}
table.data-table .cell-del{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:13px;}
table.data-table .cell-del:hover{color:var(--bad);}
table.data-table .cell-disable{background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:11px; font-family:var(--mono);}
table.data-table .cell-disable.is-disabled{color:var(--bad);}

.section-title{font-family:var(--head); font-weight:700; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px; padding-top:6px; border-top:1px solid var(--line-soft);}
.phase2-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; margin-bottom:22px;}
.mc-controls{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.mc-controls label{display:flex; flex-direction:column; gap:3px; font-family:var(--head); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); flex:1 1 100px;}
.mc-controls input{width:100%;}
#mc-results, #res-results, #adv-results{margin-top:10px;}

.mc-kpi-row{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px;}
.mc-kpi{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px 10px; flex:1 1 80px;}
.mc-kpi .l{font-family:var(--head); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint);}
.mc-kpi .v{font-family:var(--mono); font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums;}

.histogram{display:flex; align-items:flex-end; gap:2px; height:70px; margin-bottom:6px;}
.histogram .bar{flex:1; background:var(--accent); border-radius:2px 2px 0 0; min-height:1px; opacity:.75;}
.histogram-labels{display:flex; justify-content:space-between; font-family:var(--mono); font-size:9px; color:var(--ink-faint); margin-bottom:10px;}

.worst-trial-box{background:var(--panel); border:1px solid rgba(227,73,72,.4); border-radius:6px; padding:8px 10px; font-size:11.5px; color:var(--ink-dim); line-height:1.6;}
.worst-trial-box b{color:var(--bad);}

.risk-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px;}
.risk-table th{text-align:left; color:var(--ink-faint); padding:4px 6px; border-bottom:1px solid var(--line);}
.risk-table td{padding:3px 6px; border-bottom:1px solid var(--line-soft);}
.risk-table tr.at-risk td{color:var(--bad);}
.risk-table tr.survives td{color:var(--ink-dim);}

.adv-step{display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:6px 10px; margin-bottom:5px; font-family:var(--mono); font-size:11.5px;}
.adv-step .step-n{color:var(--ink-faint); width:20px;}
.adv-step .step-id{color:var(--ink); flex:1;}
.adv-step .step-sl{color:var(--bad); font-weight:600;}

.explain-grid{display:flex; flex-direction:column; gap:14px; margin-bottom:10px;}
details.rules{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:4px 18px;}
details.rules summary{cursor:pointer; font-family:var(--head); font-weight:700; font-size:13.5px; padding:14px 0; color:var(--ink-dim); list-style:none;}
details.rules summary::-webkit-details-marker{display:none;}
details.rules summary:before{content:"▸ "; color:var(--accent);}
details.rules[open] summary:before{content:"▾ ";}
details.rules[open] summary{color:var(--ink);}
details.rules p{font-size:13.5px; line-height:1.65; color:var(--ink-dim); margin:8px 0 14px;}
details.rules a{color:var(--accent);}
details.rules .doc-link{font-family:var(--head); font-weight:700; font-size:13.5px; letter-spacing:.02em; text-decoration:none;}
details.rules .doc-link:hover{text-decoration:underline;}

footer.foot{max-width:1500px; margin:0 auto; padding:22px 22px 50px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:12.5px; line-height:1.7;}
footer.foot a{color:var(--ink-faint);}
footer.foot .consult{display:block; margin-bottom:6px; font-weight:600; color:var(--ink);}
footer.foot .consult a{color:var(--accent);}

.tutorial-panel{
  position:fixed; right:20px; bottom:20px; width:320px; z-index:50;
  background:var(--panel-2); border:1px solid var(--accent); border-radius:10px;
  padding:14px 16px 16px; box-shadow:0 8px 30px rgba(0,0,0,.45);
}
.tutorial-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.tutorial-step-count{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase;}
.tutorial-close{background:none; border:none; color:var(--ink-faint); font-size:18px; line-height:1; cursor:pointer; padding:0 2px;}
.tutorial-close:hover{color:var(--bad);}
.tutorial-title{font-family:var(--head); font-weight:700; font-size:15px; color:var(--ink); margin-bottom:6px;}
.tutorial-body{font-size:12.5px; line-height:1.6; color:var(--ink-dim); margin-bottom:12px;}
.tutorial-actions{margin-bottom:10px;}
.tutorial-actions .btn{width:100%;}
.tutorial-nav{display:flex; gap:8px;}
.tutorial-nav .btn{flex:1; width:auto;}

@keyframes tutorial-pulse{
  0%, 100%{box-shadow:0 0 0 2px var(--accent), 0 0 0 2px var(--accent);}
  50%{box-shadow:0 0 0 2px var(--accent), 0 0 14px 4px rgba(125,211,252,.75);}
}
.tutorial-highlight{
  position:relative; z-index:30; border-radius:8px;
  animation:tutorial-pulse 1.4s ease-in-out infinite;
}

@media (max-width:640px){
  .tutorial-panel{left:16px; right:16px; width:auto; bottom:12px;}
}

/* ---------- solver-guide.html (documentation page) ---------- */
.docs-wrap{max-width:820px; margin:0 auto; padding:36px 22px 90px;}
.docs-intro{font-size:15px; line-height:1.7; color:var(--ink-dim); margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid var(--line-soft);}
.docs-toc{background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:32px;}
.docs-toc-title{font-family:var(--head); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px;}
.docs-toc ol{margin:0; padding-left:20px; font-size:13px; line-height:1.9;}
.docs-toc a{color:var(--ink-dim);}
.docs-toc a:hover{color:var(--accent);}
.docs-section{margin-bottom:38px; scroll-margin-top:20px;}
.docs-section h2{font-family:var(--head); font-weight:700; font-size:20px; letter-spacing:.02em; color:var(--ink); margin:0 0 6px; padding-top:6px; border-top:1px solid var(--line-soft);}
.docs-section h3{font-family:var(--head); font-weight:600; font-size:14.5px; letter-spacing:.02em; color:var(--ink-dim); margin:20px 0 8px;}
.docs-section p, .docs-section li{font-size:14px; line-height:1.75; color:var(--ink-dim);}
.docs-section ul, .docs-section ol{padding-left:22px;}
.docs-section li{margin-bottom:6px;}
.docs-section a{color:var(--accent);}
.docs-section code{font-size:0.88em;}
pre.code-block{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px;
  overflow-x:auto; font-family:var(--mono); font-size:12px; line-height:1.65; color:var(--ink-dim); margin:12px 0 16px;
}
pre.code-block code{background:none; border:none; padding:0; font-size:1em; color:inherit;}
.docs-callout{
  background:rgba(125,211,252,.06); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:12px 16px; margin:14px 0; font-size:13.5px; line-height:1.65; color:var(--ink-dim);
}
.docs-callout b{color:var(--ink);}
.docs-checklist{list-style:none; padding-left:0;}
.docs-checklist li{padding-left:26px; position:relative;}
.docs-checklist li:before{content:"\2610"; position:absolute; left:0; color:var(--accent);}

@media (max-width:1200px){
  .layout{grid-template-columns:1fr;}
  .rail, .side-panel{border:none; border-bottom:1px solid var(--line); max-height:none;}
  .stage-wrap{height:60vh;}
  .lower-grid{grid-template-columns:1fr;}
}
@media (min-width:1201px){
  .stage-wrap{height:76vh; min-height:520px; max-height:800px;}
}