:root{
  --bg:#071019;--panel:#0c1722;--panel2:#101e2b;--text:#e9f2f7;--muted:#8ea3b3;
  --line:#4b6476;--accent:#6ee7ff;--accent2:#9b8cff;--ok:#63e6a4;--danger:#ff8585;
  --shadow:0 18px 55px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100%;color:var(--text);font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 0%,rgba(110,231,255,.10),transparent 27%),
    radial-gradient(circle at 88% 10%,rgba(177,140,255,.11),transparent 25%),
    linear-gradient(180deg,#071019 0%,#08131d 100%);
}
button,input,select,textarea{font:inherit}
a{color:inherit}
.shell{max-width:1540px;margin:auto;padding:30px 24px 50px}
.hero{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end}
.kicker{display:flex;gap:9px;align-items:center;color:var(--accent);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.kicker:before{content:"";width:28px;height:2px;background:var(--accent)}
h1{font-size:clamp(30px,4.5vw,58px);line-height:1.03;margin:10px 0 8px;letter-spacing:-.04em}
.hero p{max-width:900px;color:var(--muted);margin:0;font-size:16px}
.top-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  border:1px solid #234155;background:#0d1b28;color:#d7e4ec;border-radius:11px;padding:10px 13px;
  cursor:pointer;font-weight:750;min-height:42px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center
}
.btn:hover{border-color:#466b83}
.btn.primary{background:linear-gradient(135deg,rgba(110,231,255,.18),rgba(155,140,255,.15));border-color:#54758a}
.btn.danger{border-color:#6d3838;color:#ffc4c4}
.btn.small{padding:7px 9px;min-height:34px;font-size:12px}
.btn.active{border-color:var(--accent);color:#fff;background:rgba(110,231,255,.09)}
.toolbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:18px 0}
.toolbar .btn{width:100%}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;align-items:start}
.canvas{
  position:relative;border:1px solid #173044;background:rgba(8,19,29,.78);border-radius:22px;
  box-shadow:var(--shadow);overflow:auto
}
.canvas:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;
  background-image:linear-gradient(#254054 1px,transparent 1px),linear-gradient(90deg,#254054 1px,transparent 1px);
  background-size:32px 32px
}
.lanes{position:relative;z-index:2;min-width:1000px}
.lane{display:grid;grid-template-columns:112px minmax(0,1fr);border-bottom:1px solid #142b3d;min-height:138px}
.lane:last-child{border-bottom:0}
.lane-label{padding:20px 15px;border-right:1px solid #142b3d;background:linear-gradient(90deg,rgba(255,255,255,.015),transparent)}
.letter{font-size:38px;line-height:1;font-weight:900;letter-spacing:-.05em;color:var(--c)}
.lname{font-weight:800;margin-top:6px}
.ldesc{font-size:11px;color:var(--muted);margin-top:4px}
.nodes{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;padding:16px 18px;align-items:center}
.node{
  position:relative;min-height:92px;padding:12px;border:1px solid #254055;border-radius:15px;
  background:linear-gradient(180deg,rgba(20,37,52,.96),rgba(11,25,37,.96));cursor:pointer;
  transition:.18s ease;box-shadow:0 8px 24px rgba(0,0,0,.14);user-select:none
}
.node:hover{transform:translateY(-2px);border-color:#496d86}
.node:before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:3px;border-radius:4px;background:var(--c)}
.node .tag{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.node strong{display:block;margin-top:5px;font-size:14px;line-height:1.25}
.node small{display:block;color:#90a6b5;margin-top:6px;font-size:11px}
.node.selected{border-color:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent),0 0 30px color-mix(in srgb,var(--c) 15%,transparent)}
.node.link-first{outline:2px solid var(--accent);outline-offset:2px}
.node.scenario-member{box-shadow:0 0 0 2px rgba(110,231,255,.52) inset}
.node.dim{opacity:.20}
svg#links{position:absolute;inset:0;z-index:1;overflow:visible}
.link{fill:none;stroke:var(--line);stroke-width:1.7;opacity:.36;pointer-events:none}
.link.flow{stroke:var(--accent);stroke-width:3.2;opacity:1;filter:drop-shadow(0 0 5px rgba(110,231,255,.45))}
.link.neighbor{stroke:#8ab5cf;stroke-width:2.4;opacity:.75}
.link.selected-edge{stroke:#ffb86c;stroke-width:4;opacity:1}
.link-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.side{display:grid;gap:14px;position:sticky;top:16px}
.card{border:1px solid #173044;border-radius:18px;background:rgba(12,23,34,.92);padding:16px;box-shadow:0 12px 36px rgba(0,0,0,.16)}
.card h2{font-size:14px;margin:0 0 10px}
.card p{margin:0;color:var(--muted);font-size:13px}
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 10px}
.legend span{display:flex;gap:7px;align-items:center;color:#9fb1bd;font-size:11px}
.legend i{width:9px;height:9px;border-radius:3px;background:var(--x)}
.details-meta{font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.details-title{font-weight:850;margin-bottom:6px}
.footer{margin-top:18px;color:#728797;font-size:11px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.adminbar{
  margin:18px 0 12px;border:1px solid #234154;border-radius:18px;background:rgba(8,18,28,.96);padding:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.15)
}
.adminbar h2{font-size:14px;margin:0 0 10px}
.admin-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.editor{
  display:none;margin:0 0 12px;border:1px solid #26475e;border-radius:18px;background:#0d1924;padding:14px
}
.editor.open{display:block}
.editor-grid{display:grid;grid-template-columns:150px 180px 1fr 1.4fr;gap:10px}
.field{display:grid;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:11px;color:#9eb1be;font-weight:700}
input,select,textarea{
  width:100%;border:1px solid #29465a;background:#08131d;color:#eaf3f8;border-radius:10px;padding:9px 10px;outline:none
}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#6ee7ff}
.scenario-admin{
  margin:0 0 12px;border:1px solid #203d51;border-radius:18px;background:rgba(9,21,31,.92);padding:14px
}
.scenario-admin h2{font-size:14px;margin:0 0 10px}
.scenario-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.scenario-slot{border:1px solid #1d384a;border-radius:12px;padding:9px;background:#0b1722}
.scenario-slot.active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(110,231,255,.25)}
.scenario-slot input{margin-bottom:7px}
.scenario-slot .btn{width:100%}
.layer-admin{
  margin:0 0 12px;border:1px solid #203d51;border-radius:18px;background:rgba(9,21,31,.92);padding:14px
}
.layer-admin h2{font-size:14px;margin:0 0 10px}
.layer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.layer-card{display:grid;grid-template-columns:64px 1fr;gap:8px;border:1px solid #1d384a;border-radius:12px;padding:9px;background:#0b1722}
.layer-card .letterinput{font-size:22px;font-weight:900;text-align:center}
.statusline{min-height:20px;color:#9eb1be;font-size:12px;margin-top:8px}
.modepill{border:1px solid #35566c;border-radius:999px;padding:6px 10px;font-size:12px;color:#b9ccd8}
.login-wrap{max-width:460px;margin:90px auto;padding:0 18px}
.login-card{border:1px solid #244155;border-radius:22px;background:#0c1722;padding:22px;box-shadow:var(--shadow)}
.login-card h1{font-size:28px;margin:0 0 8px}
.login-card p{color:var(--muted)}
.error{color:#ffb1b1;font-size:13px;margin:8px 0}
@media(max-width:1150px){.layout{grid-template-columns:1fr}.side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}.top-actions{justify-content:flex-start}.side{grid-template-columns:1fr}.shell{padding:20px 14px 40px}
  .toolbar,.scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layer-grid{grid-template-columns:1fr}.editor-grid{grid-template-columns:1fr}
}
@media(max-width:520px){.toolbar,.scenario-grid{grid-template-columns:1fr}}

/* Admin interaction refinements */
.collapsible-admin{padding:0;overflow:hidden}
.collapsible-admin>summary{
  list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;user-select:none
}
.collapsible-admin>summary::-webkit-details-marker{display:none}
.collapsible-admin>summary:after{content:'▾';color:#8fa8b8;transition:transform .18s ease}
.collapsible-admin[open]>summary:after{transform:rotate(180deg)}
.collapsible-admin[open]>summary{border-bottom:1px solid #203d51}
.collapsible-body{padding:14px}
.node.edge-pick{
  outline:2px solid #ff6b6b;outline-offset:2px;border-color:#ff6b6b!important;
  box-shadow:0 0 0 1px rgba(255,107,107,.25),0 0 26px rgba(255,107,107,.18)!important
}
.link.edge-added{stroke:#63e6a4;stroke-width:4;opacity:1;filter:drop-shadow(0 0 6px rgba(99,230,164,.55))}
.link.edge-removed{stroke:#ff6b6b;stroke-width:4;opacity:1;stroke-dasharray:8 5;filter:drop-shadow(0 0 6px rgba(255,107,107,.45))}
.unsaved-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffd166;margin-right:7px;vertical-align:1px}

/* V3: unsaved state and tree/link editing */
.btn.unsaved{
  background:#7d2428!important;
  border-color:#ff777f!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(255,119,127,.16),0 0 18px rgba(255,80,90,.14)
}
.node.dim.edge-pick{opacity:1}