
:root{--bg:#02070b;--panel:#071019;--panel2:#0a1721;--line:#1a394a;--txt:#e8f2f7;--muted:#7f9eac;--cyan:#28c7e8;--blue:#2b83ff;--red:#ed4059;--amber:#f5a524;--green:#42d49d;--accent:#28c7e8;--accent-rgb:40,199,232}
*{box-sizing:border-box}html{background:#02070b}body{margin:0;background:radial-gradient(circle at 82% -10%,rgba(var(--accent-rgb),.10),transparent 32%),linear-gradient(180deg,#02070b,#030a0f 55%,#020609);color:var(--txt);font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh}
.space-grid{position:fixed;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(#0d2633 1px,transparent 1px),linear-gradient(90deg,#0d2633 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:13px 22px;background:#02080deF;border-bottom:1px solid #174052;backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(var(--accent-rgb),.15)}
.ship-mark{border-left:4px solid var(--accent);padding-left:12px}.brand{letter-spacing:.22em;font-weight:900;color:#f5fbff;text-shadow:0 0 18px rgba(var(--accent-rgb),.45)}.brand+small{display:block;color:var(--muted);margin-top:4px;letter-spacing:.12em;font-size:.62rem}
header nav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}header a{color:#78909c;text-decoration:none;padding:8px;font-size:.8rem}
main{max-width:1280px;margin:24px auto;padding:0 18px 70px;position:relative}.card{position:relative;background:linear-gradient(145deg,rgba(10,23,33,.96),rgba(4,12,18,.98));border:1px solid #15384a;border-left:3px solid var(--accent);border-radius:3px;padding:18px;box-shadow:0 18px 60px #0008, inset 0 0 40px rgba(var(--accent-rgb),.025)}
.card:after{content:"";position:absolute;right:8px;top:8px;width:24px;height:2px;background:var(--accent);box-shadow:0 5px 0 var(--accent);opacity:.55}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
h1,h2,h3{margin-top:0}h1{letter-spacing:.03em}h2{font-size:1.05rem;color:var(--accent);text-transform:uppercase;letter-spacing:.12em}h3{letter-spacing:.04em}p,li{line-height:1.48}.muted{color:var(--muted)}
.alert,.ok,.info{padding:10px 12px;border-radius:2px;margin:10px 0}.alert{background:#35111a;border:1px solid #8d2b3e}.ok{background:#0b2d24;border:1px solid #1a6a51}.info{background:#071b26;border:1px solid #16495e}
label{display:block;color:#87a6b4;font-size:.82rem;margin:10px 0;text-transform:uppercase;letter-spacing:.05em}input,select,textarea{width:100%;margin-top:6px;background:#02070b;color:var(--txt);border:1px solid #234251;border-radius:2px;padding:10px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.12)}textarea{min-height:90px;resize:vertical}
button{border:1px solid rgba(var(--accent-rgb),.55);border-radius:2px;padding:10px 14px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.28),rgba(var(--accent-rgb),.10));color:white;font-weight:800;cursor:pointer;letter-spacing:.04em}button:hover{box-shadow:0 0 18px rgba(var(--accent-rgb),.16)}button.secondary{background:#0b1720;border:1px solid #284653}button.danger{background:#42151e;border-color:#8f2e41}button.ghost{background:transparent;border:1px solid #173847;color:#a8c6d1;font-size:.74rem}button:disabled{opacity:.35;cursor:not-allowed}
.pill{display:inline-block;padding:4px 8px;border-radius:2px;background:rgba(var(--accent-rgb),.08);color:#d8f7ff;border:1px solid rgba(var(--accent-rgb),.35);font-size:.78rem;margin:2px}.pill a{color:var(--red);text-decoration:none}
.steps{display:flex;gap:6px;overflow:auto;margin-bottom:18px}.step{min-width:34px;height:34px;border-radius:2px;display:grid;place-items:center;background:#061019;border:1px solid #1c3c4b;color:#6e8d9b}.step.active{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent),0 0 12px rgba(var(--accent-rgb),.15)}
.toolbar{display:flex;justify-content:space-between;gap:10px;margin-top:18px}.ability{display:grid;grid-template-columns:1fr 100px;align-items:center;gap:10px;padding:8px;border-bottom:1px solid #102b38}.score{font-size:1.4rem;font-weight:900;color:var(--accent)}
.sheet-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid rgba(var(--accent-rgb),.35);padding-bottom:15px}.stat{padding:13px;background:#040b10;border:1px solid #153747;border-top:2px solid var(--accent);border-radius:2px}.stat b{display:block;font-size:1.7rem;color:var(--accent)}.section-title{margin-top:20px;padding:8px 10px;border-left:4px solid var(--accent);border-bottom:1px solid #173a49;color:#fff;letter-spacing:.1em;text-transform:uppercase;font-size:.88rem}.reference{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem;max-height:70vh;overflow:auto;background:#010508;padding:18px;border-radius:2px;border:1px solid #183543}.search{position:sticky;top:75px;background:#071019;padding:8px 0;z-index:2}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px;border-bottom:1px solid #12303e}th{color:var(--accent);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.center{display:grid;place-items:center;padding:20px}.auth{width:min(440px,100%)}code{color:var(--amber)}
.dice-row{display:flex;gap:10px;align-items:center}.die{width:42px;height:42px;border-radius:8px;display:grid;place-items:center;font-weight:900;border:2px solid #8fb8ff;background:#1454a3;box-shadow:inset 0 0 13px #ffffff22,0 0 12px #2b83ff33}.die.drama{background:var(--accent);border-color:#fff8;box-shadow:inset 0 0 13px #ffffff33,0 0 18px rgba(var(--accent-rgb),.4);color:#071019}
.color-grid{display:flex;gap:9px;flex-wrap:wrap}.color-choice{width:54px;height:54px;border-radius:6px;border:3px solid transparent;padding:0}.color-choice.used{opacity:.25}.color-choice.selected{border-color:white;box-shadow:0 0 0 2px var(--accent)}
.inventory-item{display:grid;grid-template-columns:40px 1.5fr .5fr .7fr .7fr 1fr;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #12303e}.inventory-item input,.inventory-item select{margin:0}.mini{font-size:.74rem}.progress-card{border:1px solid #1b4557;border-left:4px solid var(--accent);padding:15px;margin:12px 0;background:#041017}.choice-list{display:grid;gap:8px;max-height:310px;overflow:auto;padding-right:6px}.choice{padding:10px;border:1px solid #173a49;background:#030b10;cursor:pointer}.choice.selected{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}.tag{font-size:.7rem;color:var(--muted)}
.suggestion{padding:10px;border:1px solid #163746;background:#030a0f;margin:7px 0;display:flex;justify-content:space-between;gap:12px}.suggestion span{line-height:1.4}
.user-badge{color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:900px){header{align-items:flex-start;gap:10px;flex-direction:column}.grid,.grid3,.grid4{grid-template-columns:1fr}.sheet-title{flex-direction:column}.inventory-item{grid-template-columns:35px 1fr 70px}.inventory-item>*:nth-child(n+4){grid-column:2/4}}
@media print{header,.no-print,.space-grid{display:none!important}body{background:white;color:black}.card{box-shadow:none;border:0;background:white}.stat{border:1px solid #aaa;background:white}.stat b,h2{color:black}}


/* ===== V4 / SHIP TERMINAL VISUAL LAYER ===== */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(120,210,235,.018) 4px);mix-blend-mode:screen}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 52% 8%,rgba(var(--accent-rgb),.055),transparent 30%),linear-gradient(90deg,rgba(0,0,0,.45),transparent 12%,transparent 88%,rgba(0,0,0,.5));}
.top-telemetry{position:sticky;top:0;z-index:22;height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#010509;border-bottom:1px solid #12313e;color:#638391;font:700 .62rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.top-telemetry .live{color:#86f6c2}.top-telemetry .live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#42d49d;box-shadow:0 0 10px #42d49d}
header{top:25px;background:linear-gradient(90deg,#02070c 0%,#06131c 47%,#02080d 100%);border-bottom:1px solid #1b4d61;box-shadow:0 8px 35px #000b}
header::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.65}
.ship-mark{position:relative;padding:4px 16px 4px 15px;border-left:0}.ship-mark::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.65)}.ship-mark::after{content:"OPS // CREW";position:absolute;left:15px;bottom:-10px;color:#4f7484;font:700 .52rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em}
.brand{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1rem;letter-spacing:.28em}.brand+small{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
header nav button.ghost{position:relative;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);border-color:#1d4b5f;background:linear-gradient(180deg,#07141e,#030b11);color:#b8d3df;padding:10px 15px}header nav button.ghost:hover{border-color:var(--accent);color:#fff;background:rgba(var(--accent-rgb),.10)}
main{max-width:1340px}.card{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));border-radius:0;border-left:1px solid #1c4658;background:linear-gradient(135deg,rgba(8,22,32,.985),rgba(3,10,15,.99) 68%,rgba(var(--accent-rgb),.025));box-shadow:0 30px 90px #000b,inset 0 0 0 1px rgba(var(--accent-rgb),.025)}
.card::before{content:"";position:absolute;left:0;top:0;width:44%;height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.85}.card::after{width:44px;height:3px;right:20px;top:13px;background:linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 17px,var(--accent) 17px 23px,transparent 23px 30px,var(--accent) 30px);box-shadow:none}
.sheet-title{position:relative;padding:5px 0 22px;border-bottom:1px solid #1a4556}.sheet-title::after{content:"CREW PERSONNEL FILE // LOCAL CACHE";position:absolute;bottom:4px;right:0;font:700 .56rem ui-monospace,SFMono-Regular,Consolas,monospace;color:#537887;letter-spacing:.16em}
.stat{position:relative;overflow:hidden;background:linear-gradient(145deg,#03090e,#07131b);border-color:#173b4a;border-top:1px solid #27627a;padding:14px 14px 12px}.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent);opacity:.75}.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:45px;height:45px;border:1px solid rgba(var(--accent-rgb),.18);transform:rotate(45deg)}.stat b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-shadow:0 0 14px rgba(var(--accent-rgb),.25)}
.section-title{position:relative;margin-top:24px;padding:9px 12px 8px 18px;border-left:0;border-bottom:1px solid #1d4e62;background:linear-gradient(90deg,rgba(var(--accent-rgb),.09),transparent 55%);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.section-title::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}.section-title::after{content:"";position:absolute;right:0;bottom:-1px;width:90px;height:1px;background:var(--accent);opacity:.55}
.ability{background:linear-gradient(90deg,rgba(2,8,12,.75),rgba(6,16,23,.35));border-bottom-color:#143443}.ability:hover{background:rgba(var(--accent-rgb),.04)}
.rule-chip{appearance:none;display:inline-flex;align-items:center;gap:7px;margin:3px;padding:5px 9px;border:1px solid rgba(var(--accent-rgb),.42);border-radius:2px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.035));color:#d7eff7;font:700 .76rem/1.2 Inter,Segoe UI,Arial,sans-serif;letter-spacing:0;cursor:pointer;text-transform:none}.rule-chip::after{content:"⌁";font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent);font-size:.9rem}.rule-chip:hover,.rule-chip:focus{border-color:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),.18),inset 3px 0 0 var(--accent);outline:none}.rule-chip.current-grade{box-shadow:inset 3px 0 0 var(--accent)}
.quick-ref-hint{display:flex;align-items:center;gap:8px;margin:8px 0 2px;color:#688a98;font:700 .64rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}.quick-ref-hint::before{content:"QUICK REF";color:var(--accent);border:1px solid rgba(var(--accent-rgb),.4);padding:2px 5px}
.rule-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(0,5,9,.78);backdrop-filter:blur(8px)}.rule-overlay[hidden]{display:none}.rule-console{position:relative;width:min(820px,100%);max-height:min(82vh,820px);overflow:auto;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));background:linear-gradient(145deg,#071823,#02090e 72%);border:1px solid #27617a;box-shadow:0 30px 100px #000,0 0 40px rgba(var(--accent-rgb),.14);padding:0}.rule-console::before{content:"";position:absolute;left:0;top:0;width:55%;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}.rule-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:18px 20px 14px;background:#06131cec;border-bottom:1px solid #1d4b5e;backdrop-filter:blur(10px)}.rule-kicker{font:800 .62rem ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--accent);letter-spacing:.18em;text-transform:uppercase}.rule-head h2{margin:5px 0 0;color:#f1f8fb;font-size:1.25rem}.rule-close{width:38px;height:34px;padding:0;background:#160a0e;border-color:#7d3543;color:#ff8998;font:900 1.1rem ui-monospace,SFMono-Regular,Consolas,monospace}.rule-body{padding:18px 20px 24px}.rule-description{font-size:1rem;color:#d7e5eb;margin:4px 0 15px}.rule-meta{padding:10px 12px;margin:10px 0 16px;border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.07);color:#a8c5d0}.rule-grade{position:relative;margin:12px 0;padding:12px 13px 12px 72px;border:1px solid #173b49;background:#030b10}.rule-grade::before{content:attr(data-grade);position:absolute;left:10px;top:12px;width:50px;color:#6d909d;font:900 .61rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}.rule-grade.active{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),0 0 20px rgba(var(--accent-rgb),.08)}.rule-grade.active::before{color:var(--accent)}.rule-foot{margin-top:16px;padding-top:12px;border-top:1px solid #173b49;color:#577684;font:700 .58rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.terminal-id{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 15px}.terminal-id span{padding:3px 7px;border:1px solid #173c4b;background:#02080d;color:#5d8595;font:700 .58rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}.terminal-id .accent{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
@media(max-width:700px){.top-telemetry{display:none}header{top:0}.sheet-title::after{display:none}.rule-console{max-height:90vh}.rule-grade{padding-left:12px;padding-top:34px}.rule-grade::before{top:10px}}
