:root{--primary:#4A6FA5;--on-primary:#fff;--primary-container:#D4E3FF;--on-primary-container:#001C3A;--surface:#FAFBFF;--surface-dim:#D9DAE0;--surface-container:#EDEEF4;--surface-low:#F3F3FA;--surface-high:#E7E8EE;--on-surface:#1B1B1F;--on-surface-variant:#44474F;--outline:#74777F;--outline-variant:#C4C6D0;--error:#BA1A1A;--on-error:#fff;--ghost:rgba(27,27,31,.03);--whisper:rgba(27,27,31,.35);--anomaly-glow:rgba(74,111,165,.12);--shadow-1:0 1px 2px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);--shadow-2:0 2px 4px rgba(0,0,0,.1),0 1px 6px rgba(0,0,0,.08);--shadow-3:0 4px 8px rgba(0,0,0,.12),0 2px 12px rgba(0,0,0,.08);--r-s:8px;--r-m:12px;--r-l:16px;--r-xl:28px;--ease:cubic-bezier(.2,0,0,1);--dur-s:150ms;--dur-m:300ms;--dur-l:500ms;--sidebar-w:220px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font:400 .875rem/1.5 'Roboto','Noto Sans SC',system-ui,sans-serif;color:var(--on-surface);background:var(--surface);overflow-x:hidden;min-height:100vh}
@keyframes glitch{0%,100%{transform:translate(0)}25%{transform:translate(-1px,1px)}50%{transform:translate(1px,-1px)}75%{transform:translate(-.5px,.5px)}}
@keyframes corrupt{0%,88%,100%{opacity:1}90%{opacity:.3}93%{opacity:.9}95%{opacity:.15}97%{opacity:.7}}
@keyframes ghostPulse{0%,100%{opacity:.08}50%{opacity:.15}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes revealSlide{from{opacity:0;max-height:0}to{opacity:1;max-height:300px}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(74,111,165,0)}50%{box-shadow:0 0 12px 2px rgba(74,111,165,.15)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;padding:0 16px;background:var(--surface-container);box-shadow:var(--shadow-1);gap:12px}
.menu-btn{width:48px;height:48px;border:none;background:none;cursor:pointer;border-radius:var(--r-m);color:var(--on-surface);font-size:24px;display:none;align-items:center;justify-content:center;transition:background var(--dur-s) var(--ease)}
.menu-btn:hover{background:rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:8px}
.brand-icon{width:32px;height:32px;background:var(--primary);border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--on-primary);font-weight:700;font-size:14px}
.brand-text{font:500 1.1rem/1.3 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface)}
.version-tag{font:400 .75rem/1 'Roboto Mono',monospace;color:var(--on-surface-variant);background:var(--surface-high);padding:2px 8px;border-radius:var(--r-s);margin-left:8px}
.spacer{flex:1}
.top-actions{display:flex;gap:4px}
.icon-btn{width:40px;height:40px;border:none;background:none;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--on-surface-variant);transition:background var(--dur-s) var(--ease);font-size:20px}
.icon-btn:hover{background:rgba(0,0,0,.06)}
.sidebar{position:fixed;top:64px;left:0;bottom:0;width:var(--sidebar-w);background:var(--surface-container-low);padding:12px;display:flex;flex-direction:column;z-index:90;transition:transform var(--dur-m) var(--ease);overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-xl);cursor:pointer;font:400 .875rem/1.4 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant);text-decoration:none;transition:all var(--dur-s) var(--ease);border:none;background:none;width:100%;text-align:left}
.nav-item:hover{background:rgba(0,0,0,.04)}
.nav-item.active{background:var(--primary-container);color:var(--on-primary-container);font-weight:500}
.nav-item .material-symbols-outlined{font-size:22px;width:24px;text-align:center}
.nav-divider{height:1px;background:var(--outline-variant);margin:8px 16px}
.trash-nav{opacity:0;pointer-events:none;transition:opacity 1s linear}
.trash-nav.revealed{opacity:.15;pointer-events:auto}
.trash-nav.revealed:hover{opacity:.5;background:rgba(74,111,165,.06)}
.trash-nav.unlocked{opacity:1!important;pointer-events:auto}
.main{margin-left:var(--sidebar-w);margin-top:64px;padding:32px 48px 80px;max-width:920px;min-height:calc(100vh - 64px)}
.page{display:none;animation:fadeUp var(--dur-m) var(--ease)}
.page.active{display:block}
h1{font:600 1.75rem/1.3 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface);margin-bottom:8px;letter-spacing:-.01em}
h2{font:500 1.25rem/1.3 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface);margin:28px 0 12px}
.subtitle{font:400 .875rem/1.6 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant);margin-bottom:24px}
.card{background:var(--surface);border:1px solid var(--outline-variant);border-radius:var(--r-m);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-1);transition:box-shadow var(--dur-s) var(--ease)}
.card:hover{box-shadow:var(--shadow-2)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.card-link{cursor:pointer;text-decoration:none;color:inherit}
.card-link:hover{border-color:var(--primary)}
.card-icon{font-size:28px;color:var(--primary);margin-bottom:8px}
.card-title{font:500 1rem/1.4 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface);margin-bottom:4px}
.card-desc{font:400 .8125rem/1.5 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant)}
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-s);font:500 .6875rem/1 'Roboto','Noto Sans SC',sans-serif;white-space:nowrap}
.chip-ok{background:#E8F5E9;color:#2E7D32}
.chip-warn{background:#FFF3E0;color:#E65100}
.chip-err{background:#FFEBEE;color:#C62828}
.chip-lock{background:var(--surface-high);color:var(--outline)}
table.log-table{width:100%;border-collapse:collapse;font:400 .8125rem/1.5 'Roboto','Noto Sans SC',sans-serif;margin:12px 0}
.log-table th{text-align:left;padding:10px 12px;color:var(--on-surface-variant);font-weight:500;border-bottom:2px solid var(--outline-variant);font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em}
.log-table td{padding:10px 12px;border-bottom:1px solid var(--outline-variant);color:var(--on-surface)}
.anomaly-row{background:var(--anomaly-glow);cursor:pointer;position:relative}
.anomaly-row:hover{animation:glitch .2s ease-in-out}
.anomaly-row td{color:var(--primary);font-weight:500}
.hidden-panel{display:none;background:var(--surface-container);border:1px dashed var(--outline-variant);border-radius:var(--r-m);padding:20px;margin:12px 0;animation:revealSlide var(--dur-m) var(--ease) both;overflow:hidden}
.hidden-panel.visible{display:block}
.panel-text{font:400 .875rem/1.8 'Roboto','Noto Sans SC',sans-serif;color:var(--primary);font-style:italic}
.panel-sig{font:500 .8125rem/1 'Roboto Mono',monospace;color:var(--on-surface-variant);margin-top:8px}
.code-block{background:#1E1E2E;color:#CDD6F4;padding:16px 20px;border-radius:var(--r-m);font:400 .8125rem/1.7 'Roboto Mono',monospace;overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:12px 0;border:1px solid rgba(255,255,255,.05)}
.ghost-text{color:rgba(27,27,31,.08);font-size:.8125rem;user-select:all;-webkit-user-select:all;line-height:1.8;animation:ghostPulse 4s ease-in-out infinite}
.file-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--outline-variant);border-radius:var(--r-m);cursor:pointer;transition:all var(--dur-s) var(--ease);background:var(--surface);margin-bottom:8px}
.file-card:hover{box-shadow:var(--shadow-2);border-color:var(--primary);animation:pulseGlow 2s infinite}
.fc-icon{font-size:28px;color:var(--primary)}
.fc-info{flex:1}
.fc-name{font:500 .875rem/1.3 'Roboto Mono',monospace;color:var(--on-surface)}
.fc-meta{font:400 .75rem/1.4 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant)}
.corrupt{animation:corrupt 3s infinite}
.corrupt-block{display:inline-block;background:var(--on-surface);color:transparent;border-radius:2px;padding:0 3px;transition:all .3s}
.corrupt-block:hover{background:transparent;color:var(--on-surface-variant)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.overlay.open{display:flex}
.dialog{background:var(--surface);border-radius:var(--r-l);padding:28px 32px;max-width:460px;width:100%;box-shadow:var(--shadow-3);animation:fadeUp var(--dur-m) var(--ease);max-height:90vh;overflow-y:auto}
.dialog h2{font:500 1.25rem/1.3 'Roboto','Noto Sans SC',sans-serif;margin:0 0 8px;display:flex;align-items:center;gap:8px}
.dialog .hint{font:400 .8125rem/1.5 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant);margin-bottom:16px}
.dialog .hint-extra{font:400 .75rem/1.5 'Roboto','Noto Sans SC',sans-serif;color:var(--primary);margin:0 0 16px;display:none}
.input-field{width:100%;padding:12px 16px;border:1px solid var(--outline);border-radius:var(--r-s);font:400 1rem/1.5 'Roboto Mono',monospace;background:var(--surface-low);color:var(--on-surface);outline:none;transition:all var(--dur-s) var(--ease)}
.input-field:focus{border-color:var(--primary);border-width:2px;padding:11px 15px}
.input-field.error{border-color:var(--error);animation:shake .4s var(--ease)}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.btn{padding:10px 24px;border-radius:var(--r-xl);font:500 .875rem/1 'Roboto','Noto Sans SC',sans-serif;cursor:pointer;border:none;transition:all var(--dur-s) var(--ease);display:inline-flex;align-items:center;gap:8px}
.btn-filled{background:var(--primary);color:var(--on-primary)}
.btn-filled:hover{box-shadow:var(--shadow-1);filter:brightness(1.08)}
.btn-outlined{background:transparent;border:1px solid var(--outline);color:var(--primary)}
.btn-outlined:hover{background:var(--primary-container)}
.btn-text{background:transparent;color:var(--primary);padding:10px 12px}
.btn-text:hover{background:rgba(74,111,165,.06)}
.choice-grid{display:flex;gap:16px;margin-top:16px}
.btn-choice{flex-direction:column;align-items:flex-start;padding:20px 24px;border-radius:var(--r-l);border:2px solid var(--outline-variant);background:var(--surface);cursor:pointer;transition:all var(--dur-m) var(--ease);flex:1;text-align:left}
.btn-choice:hover{border-color:var(--primary);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.choice-icon{font-size:28px;margin-bottom:8px}
.choice-title{font:500 1rem/1.3 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface);margin-bottom:4px}
.choice-desc{font:400 .75rem/1.5 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant)}
.snackbar{position:fixed;bottom:-80px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:14px 24px;border-radius:var(--r-s);font:400 .875rem/1.4 'Roboto','Noto Sans SC',sans-serif;z-index:300;box-shadow:var(--shadow-3);transition:bottom var(--dur-m) var(--ease);max-width:500px;text-align:center}
.snackbar.show{bottom:24px}
.ending-overlay{position:fixed;inset:0;z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px;overflow-y:auto}
.ending-overlay.open{display:flex}
.ending-bg{position:fixed;inset:0;z-index:0}
.ending-content{position:relative;z-index:1;max-width:640px;width:100%;text-align:center;animation:fadeUp 1s var(--ease)}
.ending-content h1{font:600 2rem/1.3 'Roboto','Noto Sans SC',sans-serif;color:var(--on-primary);margin-bottom:20px}
.ending-text{font:400 1rem/2 'Roboto','Noto Sans SC',sans-serif;color:rgba(255,255,255,.85);margin-bottom:32px;text-align:left}
.ending-meta{font:400 .8125rem/1.5 'Roboto','Noto Sans SC',sans-serif;color:rgba(255,255,255,.4);margin-top:24px}
.ev-summary{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--r-m);padding:20px;margin-bottom:20px;text-align:left}
.ev-summary h3{font:500 .9375rem/1.3 'Roboto','Noto Sans SC',sans-serif;margin-bottom:12px}
.ev-summary ul{list-style:none;padding:0}
.ev-summary li{font:400 .8125rem/1.6 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant);padding:3px 0 3px 20px;position:relative}
.ev-summary li::before{content:'\2022';position:absolute;left:6px;color:var(--primary);font-weight:700}
.frag-display{background:var(--surface-container);border-radius:var(--r-m);padding:16px;margin-bottom:16px;text-align:left}
.frag-display h4{font:500 .6875rem/1 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant);margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.frag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.frag-item{background:var(--surface-high);border-radius:var(--r-s);padding:10px 6px;text-align:center}
.frag-label{font:400 .6875rem/1 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface-variant);margin-bottom:6px}
.frag-val{font:500 1.25rem/1 'Roboto Mono',monospace;color:var(--on-surface)}
.frag-val.empty{color:var(--outline-variant)}
.audio-log{background:#1E1E2E;border-radius:var(--r-m);padding:24px;color:#CDD6F4;font:400 .875rem/2 'Roboto','Noto Sans SC',sans-serif;white-space:pre-wrap}
.ts{color:#89B4FA}
.note-box{background:var(--primary-container);border-left:4px solid var(--primary);padding:14px 18px;border-radius:0 var(--r-s) var(--r-s) 0;margin:16px 0;font:400 .8125rem/1.6 'Roboto','Noto Sans SC',sans-serif;color:var(--on-primary-container)}
.warn-box{background:#FFF3E0;border-left:4px solid #E65100;padding:14px 18px;border-radius:0 var(--r-s) var(--r-s) 0;margin:16px 0;font:400 .8125rem/1.6 'Roboto','Noto Sans SC',sans-serif;color:#4E2600}
.about-section p{font:400 .875rem/1.8 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface);margin-bottom:12px}
.info-grid{display:grid;grid-template-columns:120px 1fr;gap:4px 16px;font:400 .8125rem/1.6 'Roboto','Noto Sans SC',sans-serif;margin:12px 0}
.info-grid dt{color:var(--on-surface-variant);font-weight:500}
.info-grid dd{color:var(--on-surface)}
.handbook-section{margin-bottom:24px}
.handbook-section h3{font:500 1rem/1.3 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface);margin-bottom:8px}
.handbook-section p,.handbook-section li{font:400 .8125rem/1.7 'Roboto','Noto Sans SC',sans-serif;color:var(--on-surface)}
.handbook-section ul{padding-left:20px;margin:8px 0}
.handbook-section li{margin-bottom:4px}
.status-bar{position:fixed;bottom:0;left:var(--sidebar-w);right:0;height:32px;background:var(--surface-container);border-top:1px solid var(--outline-variant);display:flex;align-items:center;padding:0 16px;font:400 .6875rem/1 'Roboto Mono',monospace;color:var(--on-surface-variant);z-index:80;gap:16px}
.ghost-bar{color:var(--ghost);user-select:all}
@media(max-width:1023px){.sidebar{width:72px;padding:8px}.nav-label{display:none}.nav-item{justify-content:center;padding:12px}.main{margin-left:72px;padding:24px 32px}.status-bar{left:72px}:root{--sidebar-w:72px}}
@media(max-width:767px){.sidebar{transform:translateX(-100%);width:260px}.sidebar.open{transform:translateX(0)}.main{margin-left:0;padding:16px 16px 80px}.menu-btn{display:flex}.frag-grid{grid-template-columns:repeat(2,1fr)}.choice-grid{flex-direction:column}.btn-choice{min-width:0}.status-bar{left:0}}