/* sector.css — sector-view styles, scoped under #view-sector (P1 SPA migration).
   Generated from sector.html; base reset / :root / fonts / scanlines come from the
   shell, so only sector-specific rules live here. body.theme-* re-scoped to
   #view-sector[data-theme]; keyframes renamed sv-* to avoid clobbering the shell. */

@keyframes sv-fadeIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes sv-fadeUp  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes sv-glitch  { 0%{clip-path:inset(40% 0 61% 0);transform:translate(-2px,0)} 20%{clip-path:inset(92% 0 1% 0);transform:translate(2px,0)} 40%{clip-path:inset(43% 0 1% 0);transform:translate(-1px,0)} 60%{clip-path:inset(25% 0 58% 0);transform:translate(1px,0)} 80%{clip-path:inset(54% 0 7% 0);transform:translate(-2px,0)} 100%{clip-path:inset(58% 0 43% 0);transform:translate(1px,0)} }
@keyframes sv-pulse   { 0%,100%{opacity:0.6} 50%{opacity:1} }

#view-sector { --green: #00ff41;
  --green-dim: #00cc33;
  --green-dark: #003300;
  --green-faint: rgba(0,255,65,0.06);
  --amber: #ffb000;
  --red: #ff3333;
  --bg: #020c02; }

/* Token palette — applied BOTH globally (html[data-sector-theme], set by the sector view
   on mount → re-themes the whole SPA chrome) AND on the sector view itself. Cleared on
   unmount so leaving the sector reverts to the site theme. The component rules below stay
   scoped to #view-sector (they target sector-only elements). */
html[data-sector-theme="leylines"],
#view-sector[data-theme="leylines"] {
  --green: #ffd7df;
  --green-dim: #ff9cab;
  --green-dark: #3c2731;
  --green-faint: rgba(255, 170, 190, 0.09);
  --amber: #ff7d9a;
  --red: #ff4050;
  --bg: #160910; /* dark wine/plum — pink-tinted so the whole-SPA background visibly shifts on leylines */
}
#view-sector * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
#view-sector *:focus, #view-sector *:focus-visible { outline:none !important; }
#view-sector a { color:inherit; text-decoration:none; }
#view-sector button { outline:none; cursor:pointer; }
#view-sector, #view-sector { background:var(--bg); color:var(--green); font-family:'Share Tech Mono',monospace; min-height:100vh; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce) {
}
#view-sector[data-theme="leylines"] .wrapper { max-width: 940px; }
#view-sector[data-theme="leylines"] .top-bar, #view-sector[data-theme="leylines"] footer { border-color: rgba(255,125,154,0.32); color: rgba(255,215,223,0.78); }
#view-sector[data-theme="leylines"] .back-link { color:#ff9cab; }
#view-sector[data-theme="leylines"] .sector-id { color:#ff9cab; text-shadow:0 0 18px rgba(255,125,154,0.7),0 0 32px rgba(255,242,0,0.12); }
#view-sector[data-theme="leylines"] .sector-id::before { color:#00f0ff; opacity:0.22; }
#view-sector[data-theme="leylines"] .sector-sub { color:rgba(255,215,223,0.72); }
#view-sector[data-theme="leylines"] .terminal-box { border-color:rgba(255,156,171,0.42); background:rgba(15,20,22,0.9); box-shadow:0 0 0 1px rgba(255,255,255,0.03),0 18px 60px rgba(0,0,0,0.28); }
#view-sector[data-theme="leylines"] .terminal-box::before { background:#151c1c; color:#ff9cab; }
#view-sector[data-theme="leylines"] .lore-body { color:rgba(255,241,244,0.9); }
#view-sector[data-theme="leylines"] .lore-em { color:#fff200; }
#view-sector[data-theme="leylines"] .lore-eyebrow, #view-sector[data-theme="leylines"] .lore-pull, #view-sector[data-theme="leylines"] .primary-name { color:#ff9cab; }
#view-sector[data-theme="leylines"] .cipher-text { color:rgba(255,215,223,0.72); }
#view-sector[data-theme="leylines"] .cipher-hint { color:rgba(255,215,223,0.52); }
#view-sector[data-theme="leylines"] .btn-amber { border-color:#ff7d9a; color:#ffd7df; background:rgba(255,125,154,0.08); }
#view-sector[data-theme="leylines"] .btn-amber:hover { background:#ff7d9a; color:#151c1c; box-shadow:0 0 22px rgba(255,125,154,0.42); }
html[data-sector-theme="cybermoon"],
#view-sector[data-theme="cybermoon"] {
  --green: #ff4f1f;
  --green-dim: #d8392f;
  --green-dark: #3a1e15;
  --green-faint: rgba(255,79,31,0.08);
  --amber: #fff200;
  --red: #ff3088;
  --bg: #1a0e08;
}
#view-sector[data-theme="cybermoon"] .wrapper { max-width:940px; }
#view-sector[data-theme="cybermoon"] .top-bar, #view-sector[data-theme="cybermoon"] footer { border-color:rgba(255,79,31,0.32); color:rgba(255,220,212,0.78); }
#view-sector[data-theme="cybermoon"] .back-link { color:#fff200; }
#view-sector[data-theme="cybermoon"] .sector-id { color:#ff4f1f; text-shadow:0 0 18px rgba(255,79,31,0.72),0 0 36px rgba(255,242,0,0.18); }
#view-sector[data-theme="cybermoon"] .sector-id::before { color:#fff200; opacity:0.26; }
#view-sector[data-theme="cybermoon"] .terminal-box { border-color:rgba(255,79,31,0.42); background:rgba(26,14,8,0.86); box-shadow:0 0 0 1px rgba(255,255,255,0.03),0 18px 60px rgba(0,0,0,0.36); }
#view-sector[data-theme="cybermoon"] .terminal-box::before { background:#1a0e08; color:#ff4f1f; }
#view-sector[data-theme="cybermoon"] .lore-body { color:rgba(255,232,222,0.9); }
#view-sector[data-theme="cybermoon"] .lore-em { color:#fff200; }
#view-sector[data-theme="cybermoon"] .lore-eyebrow, #view-sector[data-theme="cybermoon"] .lore-pull, #view-sector[data-theme="cybermoon"] .primary-name { color:#ff4f1f; }
#view-sector[data-theme="cybermoon"] .cipher-text { color:rgba(255,220,212,0.72); }
#view-sector[data-theme="cybermoon"] .btn-amber { border-color:#ff4f1f; color:#ffd9c9; background:rgba(255,79,31,0.08); }
#view-sector[data-theme="cybermoon"] .btn-amber:hover { background:#ff4f1f; color:#1a0e08; box-shadow:0 0 22px rgba(255,79,31,0.46); }
#view-sector .wrapper { max-width:860px; margin:0 auto; padding:24px 20px; position:relative; z-index:9002; }
#view-sector .top-bar { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(0,255,65,0.2); padding-bottom:10px; margin-bottom:6px; font-size:11px; color:var(--green-dim); flex-wrap:wrap; gap:6px; }
#view-sector .back-link { color:var(--amber); font-size:11px; letter-spacing:2px; transition:color 0.15s; }
#view-sector .back-link:hover { color:var(--green); }
#view-sector .sector-back { display:inline-block; margin:10px 0 24px; font-size:14px; }
#view-sector .sector-header { margin:32px 0 0; }
#view-sector .sector-id { font-family:'VT323',monospace; font-size:clamp(28px,6vw,58px); color:var(--green); text-shadow:0 0 20px var(--green),0 0 40px rgba(0,255,65,0.25); letter-spacing:3px; line-height:1.1; position:relative; }
#view-sector .sector-id::before { content:attr(data-text); position:absolute; left:0; top:0; color:var(--green); animation:sv-glitch 6s infinite; opacity:0.4; }
#view-sector .sector-sub { font-size:11px; color:var(--green-dim); letter-spacing:4px; margin-top:8px; }
#view-sector .terminal-box { border:1px solid var(--green-dim); padding:24px; margin:20px 0; background:var(--green-faint); position:relative; }
#view-sector .terminal-box::before { content:attr(data-label); position:absolute; top:-10px; left:16px; background:var(--bg); padding:0 8px; font-size:11px; color:var(--green-dim); letter-spacing:2px; }
#view-sector .lore-eyebrow { font-size:10px; color:var(--amber); letter-spacing:4px; margin-bottom:20px; border-bottom:1px solid rgba(255,176,0,0.2); padding-bottom:12px; }
#view-sector .lore-body { font-size:14px; line-height:2.2; color:rgba(0,255,65,0.85); overflow-wrap: anywhere; }
#view-sector .lore-body p { margin-bottom:20px; }
#view-sector .lore-body p:last-child { margin-bottom:0; }
#view-sector .lore-em { color:var(--green); font-style:normal; }
#view-sector .lore-redacted { background:var(--green-dark); color:var(--green-dark); padding:0 3px; cursor:default; transition:color 0.25s; border-radius:1px; }
#view-sector .lore-redacted:hover { color:var(--green); }
#view-sector .lore-pull { font-family:'VT323',monospace; font-size:26px; color:var(--amber); letter-spacing:2px; line-height:1.4; margin:28px 0; padding:16px 20px; border-left:3px solid var(--amber); background:rgba(255,176,0,0.04); }
#view-sector .lore-divider { border:none; border-top:1px solid rgba(0,255,65,0.12); margin:28px 0; }
#view-sector .lore-metadata { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0; margin-top:24px; border:1px solid rgba(0,255,65,0.15); }
#view-sector .lore-meta-item { padding:12px 16px; border-right:1px solid rgba(0,255,65,0.1); border-bottom:1px solid rgba(0,255,65,0.1); min-width: 0; }
#view-sector .lore-meta-item:nth-child(even) { border-right:none; }
#view-sector .lore-meta-key { font-size:9px; color:var(--green-dim); letter-spacing:3px; margin-bottom:4px; }
#view-sector .lore-meta-val { font-family:'VT323',monospace; font-size:20px; color:var(--green); letter-spacing:1px; overflow-wrap: anywhere; }
#view-sector .lore-meta-val.warn { color:var(--amber); }
#view-sector .cipher-block { margin:24px 0; border:1px solid rgba(0,255,65,0.2); background:rgba(0,0,0,0.3); padding:20px; position:relative; }
#view-sector .cipher-block::before { content:attr(data-label); position:absolute; top:-10px; left:16px; background:var(--bg); padding:0 8px; font-size:11px; color:var(--green-dim); letter-spacing:2px; }
#view-sector .cipher-hint { font-size:11px; color:rgba(0,255,65,0.4); letter-spacing:1px; margin-bottom:14px; font-style:italic; }
#view-sector .cipher-text { font-family:'Share Tech Mono',monospace; font-size:12px; color:rgba(0,255,65,0.5); line-height:2; letter-spacing:2px; white-space:pre-wrap; word-break:break-all; }
#view-sector .primary-banner { border:1px solid rgba(255,176,0,0.4); padding:14px 20px; margin:20px 0; background:rgba(255,176,0,0.04); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
#view-sector .primary-label { font-size:10px; letter-spacing:3px; color:rgba(255,176,0,0.6); flex-shrink:0; }
#view-sector .primary-name { font-family:'VT323',monospace; font-size:26px; color:var(--amber); letter-spacing:2px; flex:1; min-width: 0; overflow-wrap: anywhere; }
#view-sector .primary-time { font-size:10px; color:rgba(255,176,0,0.5); flex-shrink:0; }
#view-sector .locked-overlay { text-align:center; padding:50px 20px; }
#view-sector .locked-overlay h2 { font-family:'VT323',monospace; font-size:52px; color:var(--amber); margin-bottom:14px; letter-spacing:2px; animation:sv-pulse 3s infinite; }
#view-sector .locked-overlay p { font-size:12px; color:var(--green-dim); line-height:2.2; max-width:480px; margin:0 auto 20px; }
#view-sector .locked-overlay .back-cta { display:inline-block; border:1px solid rgba(0,255,65,0.3); color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:11px; padding:9px 20px; letter-spacing:2px; transition:all 0.15s; }
#view-sector .locked-overlay .back-cta:hover { border-color:var(--green); color:var(--green); background:var(--green-faint); }
#view-sector .lb-row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid rgba(0,255,65,0.08); font-size:12px; min-width: 0; }
#view-sector .lb-handle { min-width: 0; overflow-wrap: anywhere; }
#view-sector .lb-rank { width:28px; text-align:right; color:var(--green-dim); font-size:11px; }
#view-sector .lb-rank.gold { color:var(--amber); font-size:18px; font-family:'VT323',monospace; }
#view-sector .lb-badge { font-size:9px; border:1px solid var(--amber); color:var(--amber); padding:2px 7px; letter-spacing:2px; }
#view-sector .bg-hidden { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
#view-sector .bg-hidden-text { position:absolute; bottom:60px; right:12px; font-size:9px; color:rgba(0,255,65,0.025); letter-spacing:3px; text-align:right; line-height:2; white-space:pre; }
#view-sector .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:10000; align-items:center; justify-content:center; }
#view-sector .modal-overlay.show { display:flex; animation:sv-fadeIn 0.2s ease; }
#view-sector .modal-box { border:1px solid var(--green-dim); padding:30px; max-width:500px; width:92%; background:var(--bg); position:relative; box-shadow:0 0 50px rgba(0,255,65,0.1); }
#view-sector .modal-box::before { content:attr(data-label); position:absolute; top:-10px; left:16px; background:var(--bg); padding:0 8px; font-size:11px; color:var(--green-dim); letter-spacing:2px; }
#view-sector .modal-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--green-dim); font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:2px; }
#view-sector .modal-close:hover { color:var(--red); }
#view-sector .form-label { font-size:11px; color:var(--green-dim); display:block; margin-bottom:4px; letter-spacing:2px; margin-top:14px; }
#view-sector .term-input { background:transparent; border:1px solid var(--green-dim); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:14px; padding:10px 14px; width:100%; transition:border-color 0.2s; caret-color:var(--green); }
#view-sector .term-input:focus { border-color:var(--green); }
#view-sector .term-input::placeholder { color:rgba(0,255,65,0.3); }
#view-sector .btn { background:transparent; border:1px solid var(--green); color:var(--green); font-family:'Share Tech Mono',monospace; font-size:13px; padding:10px 24px; letter-spacing:2px; transition:all 0.15s; white-space:nowrap; display:block; width:100%; margin-top:14px; text-align:center; }
#view-sector .btn:hover { background:var(--green); color:var(--bg); }
#view-sector .btn-amber { border-color:var(--amber); color:var(--amber); }
#view-sector .btn-amber:hover { background:var(--amber); color:var(--bg); }
#view-sector .inline-alert { padding:10px 14px; font-size:12px; margin:10px 0 0; display:none; letter-spacing:1px; }
#view-sector .inline-alert.err { border:1px solid var(--red); color:var(--red); }
#view-sector .inline-alert.ok { border:1px solid var(--green); color:var(--green); }
#view-sector .inline-alert.warn { border:1px solid var(--amber); color:var(--amber); }
#view-sector .inline-alert.show { display:block; }
#view-sector .m-alert { padding:8px 12px; font-size:12px; margin:10px 0; display:none; }
#view-sector .m-alert.err { border:1px solid var(--red);   color:var(--red); }
#view-sector .m-alert.ok { border:1px solid var(--green); color:var(--green); }
#view-sector .m-alert.warn { border:1px solid var(--amber); color:var(--amber); }
#view-sector .m-alert.show { display:block; }
#view-sector .check-row { display:flex; gap:10px; align-items:flex-start; font-size:11px; color:var(--green-dim); line-height:1.7; margin:12px 0; }
#view-sector .check-row input { margin-top:4px; accent-color:var(--green); }
#view-sector .leylines-claim { overflow:hidden; }
#view-sector .leylines-claim::after { content:''; position:absolute; left:0; right:0; bottom:0; height:9px; background:linear-gradient(90deg,#ff1515 0 15%,#fff200 15% 31%,#00f3e8 31% 48%,#1028ff 48% 64%,#ff0fb4 64% 72%,#fff200 72% 86%,#ff1515 86%); opacity:0.9; }
#view-sector .leylines-claim-layout { display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:22px; align-items:center; }
#view-sector .leylines-album-art { position:relative; aspect-ratio:1/1; border:1px solid rgba(255,156,171,0.65); background:linear-gradient(180deg,#17201f 0 44%,#fffdf1 45% 100%); box-shadow:0 0 30px rgba(255,125,154,0.18); overflow:hidden; min-height:150px; }
#view-sector .leylines-album-art img { width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:2; }
#view-sector .leylines-album-art img[src=''] { display:none; }
#view-sector .leylines-claim-copy h2 { font-family:'VT323',monospace; font-size:clamp(32px,7vw,48px); color:#ff9cab; margin-bottom:8px; letter-spacing:2px; text-shadow:0 0 18px rgba(255,125,154,0.35); }
#view-sector .leylines-claim-copy p { font-size:13px; color:rgba(255,241,244,0.9); line-height:1.9; margin-bottom:12px; }
#view-sector .download-release-title { color:#fff200; }
#view-sector .download-profile-note { color:#ffb7c2; }
#view-sector .leylines-claim-meta { font-size:11px; color:rgba(255,215,223,0.74); letter-spacing:2px; margin-bottom:10px; }
/* Cybermoon claim panel matches the cybermoon sector theme (hot orange/red/yellow) —
   was a clashing blue/purple band (test-notes #16). */
#view-sector[data-theme="cybermoon"] .leylines-claim::after { background:linear-gradient(90deg,#ff1515 0 18%,#ff4f1f 18% 38%,#fff200 38% 58%,#ff4f1f 58% 78%,#ff1515 78%); }
#view-sector[data-theme="cybermoon"] .leylines-album-art { border-color:rgba(255,140,90,0.62); background:linear-gradient(180deg,#1a0e08,#2a0f06); box-shadow:0 0 30px rgba(255,79,31,0.18); }
#view-sector[data-theme="cybermoon"] .leylines-claim-copy h2 { color:#ffd9c9; text-shadow:0 0 18px rgba(255,79,31,0.4); }
#view-sector[data-theme="cybermoon"] .leylines-claim-copy p { color:rgba(255,232,222,0.9); }
#view-sector[data-theme="cybermoon"] .download-release-title { color:#ff4f1f; }
#view-sector[data-theme="cybermoon"] .download-profile-note { color:#fff200; }
#view-sector[data-theme="cybermoon"] .leylines-claim-meta { color:rgba(255,220,212,0.74); }
@media(max-width:640px) {
#view-sector .leylines-claim-layout { grid-template-columns:1fr; }
#view-sector .leylines-album-art { max-width:240px; width:100%; margin:0 auto; }
}
#view-sector .tb-eyebrow { font-size:10px; color:var(--amber); letter-spacing:4px; margin-bottom:14px; border-bottom:1px solid rgba(255,176,0,0.2); padding-bottom:12px; }
#view-sector .tb-blurb { font-size:13px; color:rgba(0,255,65,0.8); line-height:1.9; margin-bottom:18px; }
#view-sector .tb-count { font-size:10px; color:var(--green-dim); letter-spacing:3px; margin-bottom:12px; }
#view-sector .tb-feed { display:flex; flex-direction:column; max-height:420px; overflow-y:auto; border:1px solid rgba(0,255,65,0.12); background:rgba(0,0,0,0.25); }
#view-sector .tb-feed-loading, #view-sector .tb-feed-empty { display:block; padding:22px 16px; color:var(--green-dim); font-size:12px; letter-spacing:1px; text-align:center; }
#view-sector .tb-row { display:flex; align-items:center; gap:16px; padding:14px 16px; border-bottom:1px solid rgba(0,255,65,0.08); min-width:0; }
#view-sector .tb-row:last-child { border-bottom:none; }
#view-sector .tb-row-body { font-size:30px; line-height:1.25; letter-spacing:2px; flex:1; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
#view-sector .tb-row-meta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; text-align:right; }
#view-sector .tb-row-handle { font-size:12px; color:var(--green); letter-spacing:1px; overflow-wrap:anywhere; }
#view-sector .tb-row-time { font-size:9px; color:var(--green-dim); letter-spacing:2px; }
#view-sector .tb-composer { margin-top:22px; border:1px solid rgba(0,255,65,0.2); background:rgba(0,0,0,0.3); padding:22px 20px 20px; position:relative; }
#view-sector .tb-composer::before { content:attr(data-label); position:absolute; top:-10px; left:16px; background:var(--bg); padding:0 8px; font-size:11px; color:var(--green-dim); letter-spacing:2px; }
#view-sector .tb-locked-copy, #view-sector .tb-done-copy { font-size:12px; color:var(--green-dim); line-height:1.9; letter-spacing:1px; margin-bottom:14px; }
#view-sector .tb-done { border:1px solid rgba(0,255,65,0.3); padding:14px 16px; background:var(--green-faint); }
#view-sector .tb-done-copy { margin-bottom:0; color:var(--green); }
#view-sector .tb-quickpick { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
#view-sector .tb-quickpick button { background:rgba(0,255,65,0.04); border:1px solid rgba(0,255,65,0.18); border-radius:6px; font-size:18px; line-height:1; padding:5px 7px; cursor:pointer; transition:all 0.1s; }
#view-sector .tb-quickpick button:hover { border-color:var(--green); background:rgba(0,255,65,0.12); }
#view-sector .tb-input-row { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
#view-sector .tb-input { flex:1; min-width:180px; font-size:20px; letter-spacing:2px; }
#view-sector .tb-transmit { margin-top:0; width:auto; flex-shrink:0; align-self:stretch; }
#view-sector .tb-transmit:disabled { opacity:0.4; cursor:not-allowed; }
#view-sector .tb-transmit:disabled:hover { background:transparent; color:var(--amber); box-shadow:none; }
#view-sector .tb-status { font-size:10px; color:var(--green-dim); letter-spacing:2px; margin-top:12px; line-height:1.7; font-style:italic; }
#view-sector .tb-status.bad { color:var(--amber); }
#view-sector .tb-status.good { color:var(--green); }
@media(max-width:560px) {
#view-sector .tb-transmit { width:100%; }
#view-sector .tb-row-body { font-size:26px; }
}
#view-sector .ledger-wrap {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#view-sector .ledger-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#view-sector .ledger-tab {
  background: rgba(0,10,16,0.7);
  border: 1px solid rgba(0,240,255,0.22);
  color: rgba(0,240,255,0.55);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  gap: 8px;
}
#view-sector .ledger-tab:hover { border-color: rgba(0,240,255,0.6); color: rgba(0,240,255,0.85); }
#view-sector .ledger-tab.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255,176,0,0.08);
  box-shadow: 0 0 10px rgba(255,176,0,0.18);
}
#view-sector .ledger-tab .rank-badge {
  font-family: 'VT323', monospace;
  font-size: 15px;
  line-height: 1;
}
#view-sector .ledger-tab.filled::after {
  content: '●';
  font-size: 9px;
  color: var(--amber);
}
#view-sector .ledger-panel { display: none; flex-direction: column; gap: 12px; }
#view-sector .ledger-panel.active { display: flex; animation: sv-fadeIn 0.18s ease; }
#view-sector .ledger-panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
#view-sector .ledger-panel-rank {
  font-family: 'VT323', monospace;
  font-size: 26px;
  color: var(--amber);
  letter-spacing: 1px;
}
#view-sector .ledger-plot {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
#view-sector .ledger-field {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 5px;
  background:
    linear-gradient(rgba(0,240,255,0.04), rgba(0,240,255,0.04)),
    repeating-linear-gradient(90deg, transparent, transparent calc(12.5% - 1px), rgba(0,240,255,0.06) calc(12.5% - 1px), rgba(0,240,255,0.06) 12.5%);
  border: 1px solid rgba(0,240,255,0.18);
  border-left: 2px solid rgba(0,240,255,0.4);
  border-bottom: 2px solid rgba(0,240,255,0.4);
  padding: 6px;
}
#view-sector .ledger-cell {
  position: relative;
  min-height: 26px;
  border-radius: 2px;
  border: 1px solid rgba(0,240,255,0.12);
  background: rgba(0,18,26,0.6);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s, transform 0.1s;
}
#view-sector .ledger-cell:hover {
  border-color: rgba(0,240,255,0.45);
  background: rgba(0,40,55,0.6);
}
#view-sector .ledger-cell.on {
  background: radial-gradient(circle at 50% 45%, var(--amber), color-mix(in srgb, var(--amber) 40%, transparent));
  border-color: var(--amber);
  box-shadow: 0 0 10px rgba(255,176,0,0.7), inset 0 0 4px rgba(255,255,255,0.4);
  transform: scale(1.04);
}
#view-sector .ledger-cell.on.pinging {
  box-shadow: 0 0 16px rgba(255,176,0,0.95), inset 0 0 5px rgba(255,255,255,0.6);
}
#view-sector .ledger-panel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#view-sector .ledger-readout {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: rgba(255,176,0,0.6);
  letter-spacing: 3px;
  flex: 1;
  min-width: 120px;
}
#view-sector .ledger-btn {
  background: transparent;
  border: 1px solid rgba(0,240,255,0.25);
  color: rgba(0,240,255,0.65);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  padding: 5px 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.1s;
}
#view-sector .ledger-btn:hover { border-color: rgba(0,240,255,0.7); color: rgba(0,240,255,0.95); }
#view-sector .ledger-transmit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0,240,255,0.15);
  padding-top: 16px;
}
#view-sector .ledger-transmit {
  background: rgba(255,176,0,0.06);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  padding: 10px 24px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.12s;
  flex-shrink: 0;
}
#view-sector .ledger-transmit:hover:not(:disabled) {
  background: rgba(255,176,0,0.14);
  box-shadow: 0 0 14px rgba(255,176,0,0.3);
}
#view-sector .ledger-transmit:disabled { opacity: 0.4; cursor: not-allowed; }
#view-sector .ledger-status {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--green-dim);
  flex: 1;
  min-width: 160px;
  line-height: 1.7;
}
#view-sector .ledger-status.error { color: var(--red); }
#view-sector .ledger-status.ok { color: var(--amber); }
@media(max-width:520px) {
#view-sector .ledger-cell { min-height: 20px; }
}
#view-sector .oasis-sequencer {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#view-sector .oasis-config-note {
  font-size: 10px;
  color: rgba(0,255,65,0.35);
  letter-spacing: 2px;
  font-style: italic;
}
#view-sector .oasis-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media(max-width:700px) {
#view-sector .oasis-grid-container { grid-template-columns: 1fr; }
}
#view-sector .oasis-stem {
  border: 1px solid rgba(0,255,65,0.2);
  padding: 14px 16px 16px;
  background: rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
#view-sector .oasis-stem-label {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--amber);
  letter-spacing: 3px;
}
#view-sector .oasis-stem-label span {
  font-size: 11px;
  color: var(--green-dim);
  letter-spacing: 1px;
  font-family: 'Share Tech Mono', monospace;
  margin-left: 8px;
}
#view-sector .oasis-melody-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 9px;
  gap: 2px;
  user-select: none;
}
#view-sector .oasis-cell {
  background: color-mix(in srgb, var(--green) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 8%, transparent);
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s, box-shadow 0.08s;
}
#view-sector .oasis-cell:hover { border-color: color-mix(in srgb, var(--green) 35%, transparent); }
#view-sector .oasis-cell.on {
  background: color-mix(in srgb, var(--green) 55%, transparent);
  border-color: color-mix(in srgb, var(--green) 70%, transparent);
  box-shadow: 0 0 4px color-mix(in srgb, var(--green) 40%, transparent);
}
#view-sector .oasis-cell.on.playing-now {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255,176,0,0.85);
}
#view-sector .oasis-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#view-sector .oasis-play {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  color: var(--green-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.1s;
}
#view-sector .oasis-play:hover { border-color: var(--green); color: var(--green); }
#view-sector .oasis-play.playing { color: var(--amber); border-color: var(--amber); }
#view-sector .oasis-gear {
  width: 20px; height: 20px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green-dim);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.12s;
}
#view-sector .oasis-gear:hover { color: var(--green); border-color: var(--green); }
#view-sector .oasis-gear[aria-expanded="true"] { color: var(--amber); border-color: var(--amber); }
#view-sector .oasis-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 16px;
  z-index: 30;
  min-width: 200px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,0.65);
  display: none;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--green-dim);
  letter-spacing: 1px;
}
#view-sector .oasis-popover.open { display: flex; }
#view-sector .oasis-popover .row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
#view-sector .oasis-popover label { letter-spacing: 2px; }
#view-sector .oasis-popover select, #view-sector .oasis-popover input {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  color: var(--green-dim);
  font-family: inherit;
  font-size: 13px;
  padding: 3px 6px;
}
#view-sector .oasis-popover input[type="number"] { width: 60px; }
#view-sector .oasis-submit {
  background: transparent;
  border: 1px solid rgba(0,255,65,0.14);
  color: rgba(0,255,65,0.28);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  padding: 5px 12px;
  letter-spacing: 2px;
  cursor: not-allowed;
  margin-left: auto;
}
#view-sector .oasis-submit-status {
  font-size: 9px;
  color: rgba(255,176,0,0.4);
  letter-spacing: 1px;
  font-style: italic;
}
#view-sector .oasis-play-all-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(0,255,65,0.1);
}
#view-sector .oasis-play-all {
  background: transparent;
  border: 1px solid rgba(0,255,65,0.4);
  color: var(--green-dim);
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  padding: 9px 22px;
  cursor: pointer;
  letter-spacing: 3px;
  transition: all 0.12s;
}
#view-sector .oasis-play-all:hover { border-color: var(--green); color: var(--green); }
#view-sector .oasis-play-all.playing { color: var(--amber); border-color: var(--amber); }
#view-sector .oasis-play-all-note {
  font-size: 10px;
  color: rgba(0,255,65,0.35);
  letter-spacing: 2px;
  font-style: italic;
}
#view-sector footer { margin-top:40px; padding-top:16px; border-top:1px solid rgba(0,255,65,0.12); font-size:10px; color:rgba(0,255,65,0.25); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
#view-sector { scrollbar-width:thin; scrollbar-color:#003300 #020c02; }
#view-sector ::-webkit-scrollbar { width:6px; }
#view-sector ::-webkit-scrollbar-track { background:var(--bg); }
#view-sector ::-webkit-scrollbar-thumb { background:var(--green-dark); }
@media(max-width:600px) {
#view-sector .wrapper {padding:12px;}
#view-sector .lore-metadata {grid-template-columns:1fr 1fr;}
}