.bracket-panel {
  position: relative;
  background:
    linear-gradient(var(--amber), var(--amber)) left top / 16px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) left top / 1px 16px no-repeat,
    linear-gradient(var(--amber), var(--amber)) right top / 16px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) right top / 1px 16px no-repeat,
    linear-gradient(var(--amber), var(--amber)) left bottom / 16px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--amber), var(--amber)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--amber), var(--amber)) right bottom / 1px 16px no-repeat,
    rgba(9, 14, 24, .82);
}

.bracket-label {
  position: absolute;
  z-index: 5;
  top: -7px;
  left: 12px;
  padding: 0 5px;
  background: var(--bg);
  color: var(--amber);
  font: 9px "DM Mono", monospace;
  letter-spacing: .12em;
}

.route-mode { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; min-width: 178px; padding: 13px 15px; border: 1px solid var(--line); background: rgba(13,19,32,.72); }
.route-mode i { grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 15px var(--amber); }
.route-mode span, .route-mode b { font: 9px "DM Mono", monospace; letter-spacing: .1em; }
.route-mode span { color: var(--muted); }.route-mode b { color: var(--text); }

.route-console { display: grid; grid-template-columns: 230px minmax(420px, 1fr) 310px; gap: 14px; min-height: 590px; }
.route-records, .route-brief { padding: 28px 18px 20px; }
.route-mission-list { display: grid; gap: 5px; }
.route-mission {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 59px;
  padding: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
}
.route-mission:hover { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.025); }
.route-mission.is-active { border-color: rgba(241,184,75,.45); color: var(--text); background: linear-gradient(90deg,rgba(241,184,75,.12),transparent); }
.route-mission > span { color: #657188; font: 10px "DM Mono",monospace; }
.route-mission div { min-width: 0; }.route-mission strong, .route-mission small { display: block; }
.route-mission strong { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.route-mission small { margin-top: 4px; overflow: hidden; color: #748096; font: 8px "DM Mono",monospace; white-space: nowrap; text-overflow: ellipsis; }
.route-mission b { width: 6px; height: 6px; border-radius: 50%; background: #526078; box-shadow: 0 0 0 3px rgba(82,96,120,.12); }
.route-mission.is-active > span { color: var(--amber); }.route-mission.is-active b { background: var(--amber); box-shadow: 0 0 11px var(--amber); }

.route-field { position: relative; min-height: 590px; overflow: hidden; background: radial-gradient(circle at 55% 48%, rgba(105,212,208,.075), transparent 34%), radial-gradient(circle at 76% 20%,rgba(241,184,75,.06),transparent 17%), #070b14; }
.route-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(0,0,0,.62); }
.route-grid { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(circle, rgba(146,160,183,.65) 0 1px, transparent 1.5px), linear-gradient(rgba(91,109,138,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(91,109,138,.12) 1px,transparent 1px); background-size: 43px 43px, 86px 86px, 86px 86px; }
.route-path { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-path polyline { fill: none; stroke: rgba(241,184,75,.64); stroke-width: .25; stroke-dasharray: 1.3 1.8; vector-effect: non-scaling-stroke; }
.route-nodes { position: absolute; z-index: 3; inset: 0; }
.signal-node { position: absolute; display: grid; gap: 8px; justify-items: center; width: 110px; padding: 0; border: 0; background: transparent; color: #8994a6; cursor: pointer; transform: translate(-50%,-50%); }
.signal-node i { position: relative; display: block; width: 7px; height: 7px; border-radius: 50%; background: #8a7750; box-shadow: 0 0 0 7px rgba(241,184,75,.03); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.signal-node i::after { content: ""; position: absolute; inset: -13px; border: 1px solid transparent; border-radius: 50%; }
.signal-node span { padding: 4px 6px; background: rgba(5,8,16,.82); font: 8px "DM Mono",monospace; letter-spacing: .08em; white-space: nowrap; }
.signal-node:hover, .signal-node.is-active { color: var(--text); }
.signal-node:hover i { background: var(--amber-2); box-shadow: 0 0 16px var(--amber); transform: scale(1.2); }
.signal-node.is-active i { background: var(--amber-2); box-shadow: 0 0 11px var(--amber),0 0 30px rgba(241,184,75,.75); animation: route-pulse 1.8s ease-out infinite; }
.signal-node.is-active i::after { border-color: rgba(241,184,75,.46); }
.signal-node.is-active span { color: var(--amber-2); }
@keyframes route-pulse { 50% { box-shadow: 0 0 14px var(--amber),0 0 44px rgba(241,184,75,.78); } }
.route-field-readout { position: absolute; z-index: 4; right: 17px; bottom: 16px; display: grid; justify-items: end; gap: 5px; }
.route-field-readout span, .route-field-readout b { font: 8px "DM Mono",monospace; letter-spacing: .1em; }.route-field-readout span{color:#69758a}.route-field-readout b{color:#aab4c2}

.route-brief { display: flex; flex-direction: column; }
.route-brief-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.route-brief-head span,.route-brief-head b { font: 9px "DM Mono",monospace; letter-spacing: .1em; }.route-brief-head span{color:var(--amber)}.route-brief-head b{color:var(--red)}
.route-brief h3 { margin: 0; font-size: 28px; line-height: 1.02; }.route-subtitle { margin: 7px 0 18px; color: var(--cyan); font-size: 12px; }
.route-brief > p:not(.route-subtitle):not(.route-unlock) { color: var(--muted); font-size: 12px; line-height: 1.62; }
.route-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }.route-meta div{padding:10px;border:1px solid var(--line-soft);background:rgba(255,255,255,.02)}.route-meta dt,.route-objective>span,.route-unlock span{color:#6e7a8f;font:8px "DM Mono",monospace;letter-spacing:.11em}.route-meta dd{margin:6px 0 0;color:var(--text);font:10px "DM Mono",monospace}
.route-objective { padding: 13px; border-left: 2px solid var(--amber); background: rgba(241,184,75,.06); }.route-objective p{margin:6px 0 0;font-size:12px;line-height:1.55}
.route-teaches { margin: 17px 0; padding: 0; list-style: none; counter-reset: lessons; }.route-teaches li{position:relative;padding:8px 0 8px 27px;border-bottom:1px solid var(--line-soft);color:#b9c3d0;font-size:11px;line-height:1.4}.route-teaches li::before{counter-increment:lessons;content:"0" counter(lessons);position:absolute;left:0;color:var(--amber);font:8px "DM Mono",monospace}
.route-unlock { display:grid;gap:5px;margin:auto 0 16px }.route-unlock b{color:#d0d7e1;font-size:11px}.route-brief .button{width:100%}
.intro-walkthrough { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 16px; padding: 19px 21px; border: 1px solid var(--line); background: rgba(10,15,25,.7); }
.intro-walkthrough article{display:grid;grid-template-columns:25px 1fr;gap:10px;align-items:start}.intro-walkthrough article>span{color:var(--amber);font:9px "DM Mono",monospace}.intro-walkthrough b{font-size:12px}.intro-walkthrough p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.intro-walkthrough>i{color:#536078;font-style:normal}

.codex-count { display: grid; justify-items: end; padding: 0 0 4px; }.codex-count strong{color:var(--amber);font:36px "DM Mono",monospace}.codex-count span{color:var(--muted);font:8px "DM Mono",monospace;letter-spacing:.1em}
.codex-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 24px 18px 16px; margin-bottom: 14px; }
.codex-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.codex-filter { padding: 8px 10px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 9px "DM Mono",monospace; cursor:pointer; }
.codex-filter:hover,.codex-filter.is-active{border-color:rgba(241,184,75,.55);color:var(--amber);background:rgba(241,184,75,.07)}
.codex-search { width: min(300px,100%); color:var(--muted); font:9px "DM Mono",monospace;letter-spacing:.08em }.codex-search input{margin-top:6px;padding:9px 10px}
.codex-workspace { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 14px; }
.codex-record-list,.codex-detail{padding:28px 19px 19px;min-height:500px}.codex-record-list>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.codex-record { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 11px; align-items:center; padding:13px;border:1px solid var(--line-soft);background:rgba(255,255,255,.018);color:var(--muted);cursor:pointer;text-align:left }
.codex-record:hover,.codex-record.is-active{border-color:rgba(241,184,75,.38);background:linear-gradient(90deg,rgba(241,184,75,.07),transparent);color:var(--text)}
.codex-record>i{width:7px;height:7px;border-radius:50%;background:var(--record-color);box-shadow:0 0 10px var(--record-color)}.codex-record strong,.codex-record small{display:block}.codex-record strong{font-size:12px}.codex-record small{margin-top:4px;color:#748096;font:8px "DM Mono",monospace}.codex-record>span{color:#627087;font:8px "DM Mono",monospace;text-transform:uppercase}
#codex-empty{color:var(--muted);text-align:center;padding:70px 20px}
.codex-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:center}.codex-detail-head span{color:var(--amber);font:8px "DM Mono",monospace;letter-spacing:.08em}.codex-detail h3{margin:7px 0 4px;font-size:27px}.codex-detail-head p{margin:0;color:var(--muted);font-size:11px}.codex-detail-head i{display:block;width:40px;height:40px;background:var(--codex-color,var(--amber));clip-path:polygon(50% 0,100% 28%,83% 100%,17% 100%,0 28%);filter:drop-shadow(0 0 12px var(--codex-color,var(--amber)))}
.codex-status-row{display:flex;gap:9px;margin:19px 0}.codex-status-row b,.codex-status-row span{padding:6px 8px;border:1px solid var(--line);font:8px "DM Mono",monospace;letter-spacing:.09em}.codex-status-row b{color:var(--green)}.codex-status-row span{color:var(--muted)}
.codex-detail section{padding:13px 0;border-top:1px solid var(--line-soft)}.codex-detail section span{color:#6b778b;font:8px "DM Mono",monospace;letter-spacing:.1em}.codex-detail section p{margin:6px 0 0;color:#c0c8d4;font-size:12px;line-height:1.55}.codex-contract{margin:15px 0 0;padding:11px;border:1px dashed var(--line);color:#6f7a8e;font:8px "DM Mono",monospace;line-height:1.6;letter-spacing:.06em}

.route-mission:focus-visible,.signal-node:focus-visible,.codex-filter:focus-visible,.codex-record:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

@media (max-width: 1180px) {
  .route-console { grid-template-columns: 210px minmax(380px,1fr); }
  .route-brief { grid-column: 1 / -1; min-height: 0; }
  .route-unlock { margin-top: 0; }
}
@media (max-width: 860px) {
  .route-console,.codex-workspace { grid-template-columns: 1fr; }
  .route-records { padding-top: 25px; }.route-mission-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route-field{min-height:470px}.route-brief{grid-column:auto}
  .intro-walkthrough{grid-template-columns:1fr 1fr}.intro-walkthrough>i{display:none}
  .codex-toolbar{align-items:stretch;flex-direction:column}.codex-search{width:100%}
}
@media (max-width: 560px) {
  .route-mode { display:none }.route-mission-list,.codex-record-list>div{grid-template-columns:1fr}
  .route-field{min-height:390px}.signal-node{width:84px}.signal-node span{font-size:7px}.route-records,.route-brief,.codex-record-list,.codex-detail{padding-inline:15px}
  .intro-walkthrough{grid-template-columns:1fr}.codex-count{display:none}
}
@media (prefers-reduced-motion: reduce) { .signal-node.is-active i { animation: none; } }