.button { display: inline-flex; min-height: 45px; padding: 10px 17px; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line-bright); border-radius: 3px; color: var(--text); background: var(--surface-2); font: 800 .68rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.button:hover { border-color: var(--mint); background: var(--surface-3); }.button.primary { border-color: var(--mint); color: #07120d; background: var(--mint); }.button.primary:hover { background: #9affce; }.button.ghost { color: var(--muted); background: transparent; }.button.danger { border-color: var(--red); color: #190706; background: var(--red); }
.drawer { position: fixed; z-index: 80; inset: 0; overflow:hidden;visibility: hidden; opacity: 0; transition: visibility .22s, opacity .22s; }.drawer.is-open { visibility: visible; opacity: 1; }.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 5, 7, .76); backdrop-filter: blur(5px); }.drawer-panel { position: absolute; top: 0; right: 0; width: min(680px, 96vw); height: 100%; padding: clamp(22px, 4vw, 42px); overflow-y: auto; border-left: 1px solid var(--line-bright); background: #081418; box-shadow: -24px 0 70px rgba(0,0,0,.42); transform: translateX(40px); transition: transform .25s ease; }.drawer.is-open .drawer-panel { transform: none; }.drawer-panel.wide { width: min(980px, 98vw); }.drawer-panel.compact { width: min(520px, 96vw); }
.drawer-header { display: flex; margin-bottom: 28px; padding-bottom: 20px; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }.drawer-header small { color: var(--mint); font: 700 .55rem/1 var(--mono); letter-spacing: .14em; }.drawer-header h2 { margin: 6px 0 0; font: 900 clamp(2rem, 4vw, 3.4rem)/.9 var(--display); }
.case-list { display: grid; gap: 9px; }.campaign-case { display: grid; min-height: 89px; padding: 13px; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.campaign-case.is-available { border-color: rgba(115,242,180,.3); }.campaign-case.is-locked { opacity: .52; }.campaign-number { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-bright); color: var(--mint); font: 700 .61rem/1 var(--mono); }.campaign-case strong, .campaign-case small { display: block; }.campaign-case strong { font-size: .76rem; letter-spacing: .035em; }.campaign-case small { margin-top: 5px; color: var(--muted); font: .54rem/1.35 var(--mono); }.campaign-state { color: var(--muted); font: 700 .54rem/1 var(--mono); }.campaign-case.is-complete .campaign-state { color: var(--amber); }
.learning-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 18px; }.structure-nav { display: flex; flex-direction: column; gap: 7px; }.structure-tab { display: grid; min-height: 52px; padding: 10px 12px; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; border: 1px solid var(--line); color: var(--muted); background: transparent; text-align: left; }.structure-tab.is-active { border-color: var(--mint); color: var(--text); background: var(--mint-soft); }.structure-tab:disabled { opacity: .45; }.structure-tab span:first-child { font-size: 1rem; }.structure-tab strong { font-size: .68rem; letter-spacing: .05em; }
.structure-content { min-height: 430px; padding: clamp(20px,4vw,36px); border: 1px solid var(--line); background: var(--surface); }.locked-content { display: grid; min-height: 350px; place-items: center; color: var(--muted); text-align: center; }.locked-content span { display: block; margin-bottom: 12px; font-size: 2rem; }.locked-content p { max-width: 330px; font-size: .78rem; line-height: 1.6; }.structure-content .eyebrow { margin-bottom: 7px; }.structure-content h3 { margin-bottom: 8px; font: 900 clamp(2.2rem,5vw,4rem)/.9 var(--display); }.structure-content h3 span { color: var(--muted); font: 600 .7rem/1 var(--mono); }.structure-definition { color: #bdc9cc; font-size: .86rem; line-height: 1.7; }.lifo-callout { display: flex; margin: 22px 0; padding: 16px; align-items: center; gap: 14px; border: 1px solid rgba(244,201,107,.3); background: var(--amber-soft); }.lifo-callout strong { color: var(--amber); font: 900 1.3rem/1 var(--mono); }.lifo-callout span { color: #c8d3d6; font-size: .75rem; }.operation-table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: .72rem; }.operation-table th, .operation-table td { padding: 10px; border: 1px solid var(--line); text-align: left; }.operation-table th { color: var(--muted); font: 600 .52rem/1 var(--mono); }.operation-table code { color: var(--mint); }.complexity { color: var(--amber); font-family: var(--mono); }.application-tags { display: flex; padding: 0; flex-wrap: wrap; gap: 7px; list-style: none; }.application-tags li { padding: 7px 9px; border: 1px solid var(--line); color: var(--muted); font: .57rem/1.2 var(--mono); }
.achievement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.achievement-card { min-height: 150px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.achievement-card.is-unlocked { border-color: rgba(244,201,107,.34); background: var(--amber-soft); }.achievement-icon { display: grid; width: 40px; height: 40px; margin-bottom: 15px; place-items: center; border: 1px solid var(--line-bright); color: var(--muted); font-size: 1.15rem; }.is-unlocked .achievement-icon { border-color: var(--amber); color: var(--amber); }.achievement-card strong, .achievement-card small { display: block; }.achievement-card strong { font-size: .72rem; }.achievement-card small { margin-top: 7px; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.settings-list { display: grid; gap: 8px; }.setting-row { display: flex; min-height: 74px; padding: 12px 14px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.018); cursor: pointer; }.setting-row > span { display: flex; align-items: center; gap: 12px; }.setting-row b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); color: var(--mint); }.setting-row strong, .setting-row small { display: block; }.setting-row strong { font-size: .72rem; }.setting-row small { margin-top: 4px; color: var(--muted); font-size: .59rem; }.setting-row input { position: absolute; opacity: 0; }.setting-row > i { position: relative; width: 42px; height: 23px; flex: 0 0 auto; border: 1px solid var(--line-bright); border-radius: 999px; background: #071014; }.setting-row > i::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--muted); transition: .2s; content: ""; }.setting-row input:checked + i { border-color: var(--mint); background: var(--mint-soft); }.setting-row input:checked + i::after { background: var(--mint); transform: translateX(19px); }.setting-row:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }.privacy-note { margin-top: 18px; padding: 13px; border-left: 2px solid var(--mint); color: var(--muted); background: rgba(115,242,180,.04); font-size: .66rem; line-height: 1.6; }
.confirm-dialog, .discovery-dialog { max-width: min(520px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line-bright); color: var(--text); background: #09171b; box-shadow: var(--shadow); }.confirm-dialog::backdrop, .discovery-dialog::backdrop, .evidence-dialog::backdrop { background: rgba(0,5,7,.83); backdrop-filter: blur(5px); }.confirm-dialog form { padding: clamp(25px,5vw,44px); text-align: center; }.dialog-alert { display: grid; width: 48px; height: 48px; margin: 0 auto 18px; place-items: center; border: 1px solid var(--red); color: var(--red); font: 900 1.1rem/1 var(--mono); }.confirm-dialog h2 { font: 900 2.2rem/.95 var(--display); }.confirm-dialog form > p:not(.eyebrow) { color: var(--muted); font-size: .78rem; line-height: 1.6; }.confirm-dialog form > div { display: flex; margin-top: 23px; justify-content: center; gap: 8px; }
.evidence-dialog { width:min(680px,calc(100vw - 24px));max-height:calc(100vh - 28px);padding:0;overflow:visible;border:0;background:transparent;box-shadow:var(--shadow); }.evidence-paper { position:relative;padding:clamp(25px,5vw,48px);overflow:hidden;color:#202423;background:linear-gradient(97deg,#e8e2d3,#f5f0e2 52%,#e4ddcc);box-shadow:0 30px 90px rgba(0,0,0,.55);transform:rotate(-.35deg); }.evidence-paper::before { position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(50,45,35,.025) 0 1px,transparent 1px 4px);pointer-events:none;content:""; }.evidence-paper>header { position:relative;z-index:1;display:flex;padding-bottom:14px;align-items:flex-start;justify-content:space-between;border-bottom:3px double #363a37; }.evidence-paper>header span,.evidence-paper>header small{display:block}.evidence-paper>header span{font:900 .7rem/1 var(--sans);letter-spacing:.12em}.evidence-paper>header small{margin-top:5px;font:700 .55rem/1 var(--mono)}.paper-close{width:34px;height:34px;border:1px solid #565b57;color:#252a27;background:transparent;font-size:1.2rem}.paper-stamp{position:absolute;z-index:1;top:88px;right:42px;padding:9px;border:3px double #a0473f;color:#a0473f;font:900 .56rem/1.25 var(--mono);text-align:center;transform:rotate(8deg);opacity:.78}.paper-kicker{position:relative;z-index:1;margin:27px 0 7px;color:#585f5b;font:700 .6rem/1 var(--mono);letter-spacing:.08em}.evidence-paper>time{position:relative;z-index:1;display:block;color:#143f35;font:900 clamp(2.7rem,8vw,5.4rem)/.9 var(--display)}.evidence-paper>h2{position:relative;z-index:1;max-width:500px;margin:10px 0 22px;font:900 clamp(1.8rem,5vw,3.5rem)/.92 var(--display)}.evidence-paper>dl{position:relative;z-index:1;display:grid;margin:0 0 15px;grid-template-columns:1fr 1fr;border:1px solid #777a71}.evidence-paper>dl div{padding:9px 11px;border-right:1px solid #777a71}.evidence-paper>dl div:last-child{border:0}.evidence-paper dt{font:700 .48rem/1 var(--mono)}.evidence-paper dd{margin:5px 0 0;font-size:.68rem}.paper-section{position:relative;z-index:1;padding:13px 0;border-top:1px solid #919084}.paper-section h3{margin-bottom:6px;font:900 .58rem/1 var(--mono);letter-spacing:.06em}.paper-section p{margin:0;font-family:Georgia,serif;font-size:.86rem;line-height:1.55}.paper-section.finding{padding:13px;border:1px solid #777a71;background:rgba(28,75,62,.07)}.paper-section.finding h3{color:#14513f}.evidence-paper>footer{position:relative;z-index:1;display:flex;margin-top:18px;align-items:center;justify-content:space-between;gap:12px}.evidence-paper>footer>span{font:700 .48rem/1.3 var(--mono)}.paper-button{border-color:#303733!important;color:#f4f0e6!important;background:#303733!important}
.paper-timeline-nav { position:relative;z-index:1;display:grid;margin-top:16px;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;border-top:1px solid #777a71;border-bottom:1px solid #777a71; }.paper-timeline-nav[hidden]{display:none}.paper-timeline-nav button { min-height:44px;padding:8px 10px;border:0;color:#26312d;background:transparent;font:800 .57rem/1 var(--mono);text-transform:uppercase; }.paper-timeline-nav button:first-child{text-align:left}.paper-timeline-nav button:last-child{text-align:right}.paper-timeline-nav button:hover:not(:disabled){color:#0f513e;background:rgba(20,81,63,.08)}.paper-timeline-nav button:disabled{color:#aaa597}.paper-timeline-nav>span{text-align:center}.paper-timeline-nav small,.paper-timeline-nav strong{display:block}.paper-timeline-nav small{font:700 .43rem/1 var(--mono)}.paper-timeline-nav strong{margin-top:4px;color:#14513f;font:900 .62rem/1 var(--mono)}
.suspect-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 40px);padding:0;overflow:auto;border:1px solid #526a72;color:var(--text);background:#08161c;box-shadow:0 28px 90px rgba(0,0,0,.7)}.suspect-dossier{padding:clamp(20px,3vw,34px)}.suspect-dossier>header{display:flex;padding-bottom:15px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line-bright)}.suspect-dossier>header span,.suspect-dossier>header small{display:block}.suspect-dossier>header span{font:900 .58rem/1 var(--mono);letter-spacing:.11em}.suspect-dossier>header small{margin-top:5px;color:var(--mint);font:700 .43rem/1 var(--mono)}.suspect-dialog-close{width:38px;height:38px;border:1px solid var(--line-bright);color:var(--text);background:transparent;font-size:1.2rem}.suspect-dialog-close:hover,.suspect-dialog-close:focus-visible{border-color:var(--mint);color:var(--mint)}.suspect-dossier-identity{display:grid;margin:20px 0;grid-template-columns:105px minmax(0,1fr) 120px;align-items:center;gap:18px}.suspect-dossier-identity>img{width:105px;height:118px;border:1px solid var(--line-bright);object-fit:cover;object-position:center 24%;filter:saturate(.65)}.suspect-dossier-identity h2{margin:5px 0;font:900 clamp(1.7rem,4vw,2.8rem)/.95 var(--display)}.suspect-dossier-identity p{margin:0}.suspect-dossier-identity #suspect-dossier-role{color:var(--muted);font:.53rem/1.4 var(--mono)}.suspect-dossier-suspicion{text-align:right}.suspect-dossier-suspicion small,.suspect-dossier-suspicion strong{display:block}.suspect-dossier-suspicion small{color:var(--muted);font:.42rem/1.2 var(--mono)}.suspect-dossier-suspicion strong{margin:7px 0;color:var(--amber);font:900 1.35rem/1 var(--mono)}.suspect-dossier-suspicion>span{display:block;height:5px;background:var(--line)}.suspect-dossier-suspicion i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--red))}.suspect-profile-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}.suspect-profile-grid section{padding:13px;border-right:1px solid var(--line)}.suspect-profile-grid section:last-child{border:0}.suspect-profile-grid small,.suspect-statement small,.suspect-facts small{color:var(--mint);font:700 .43rem/1 var(--mono);letter-spacing:.07em}.suspect-profile-grid p{margin:7px 0 0;color:#c2cfd2;font-size:.65rem;line-height:1.5}.suspect-statement{margin-top:12px;padding:14px;border-left:2px solid var(--amber);background:var(--amber-soft)}.suspect-statement blockquote{margin:8px 0 0;color:#ddd5bf;font:italic .72rem/1.55 Georgia,serif}.suspect-facts{margin-top:18px}.suspect-facts>header{display:flex;padding-bottom:10px;align-items:flex-end;justify-content:space-between;border-bottom:1px solid var(--line)}.suspect-facts h3{margin:5px 0 0;font-size:.8rem}.suspect-facts>header>span{color:var(--amber);font:700 .44rem/1 var(--mono)}.suspect-facts ol{display:grid;margin:0;padding:0;list-style:none}.suspect-facts li{display:grid;padding:11px 0;grid-template-columns:82px minmax(0,1fr);gap:11px;border-bottom:1px solid var(--line)}.suspect-facts li>span{color:var(--mint);font:800 .46rem/1.4 var(--mono)}.suspect-facts li p{margin:0;color:#c2cfd2;font-size:.63rem;line-height:1.45}.suspect-facts li.is-unknown{opacity:.58}.suspect-dossier>footer{display:flex;margin-top:20px;align-items:center;justify-content:space-between;gap:16px}.suspect-dossier>footer>small{max-width:310px;color:var(--muted);font:.44rem/1.45 var(--mono)}
.discovery-dialog { width: min(620px, calc(100vw - 24px)); overflow: hidden; text-align: center; }.discovery-content { position: relative; z-index: 1; padding: clamp(35px,7vw,70px); }.discovery-content .large { width: 92px; margin: 0 auto 26px; }.discovery-content .large i { height: 20px; }.discovery-content h2 { margin-bottom: 9px; font: 900 clamp(3rem,8vw,5.4rem)/.9 var(--display); }.discovery-content h2 span { display: block; margin-top: 8px; color: var(--muted); font: 700 .68rem/1 var(--mono); letter-spacing: .18em; }.discovery-content > strong { display: block; color: var(--amber); font: 900 1.5rem/1 var(--mono); }.discovery-content > p:not(.eyebrow) { color: #bac8cb; font-size: .81rem; line-height: 1.7; }.discovery-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(115,242,180,.025) 0 3deg, transparent 3deg 12deg); }
.toast-region { position: fixed; z-index: 120; right: 20px; bottom: 20px; display: grid; width: min(380px, calc(100vw - 40px)); gap: 8px; pointer-events: none; }.toast { position: relative; padding: 14px 15px 14px 47px; overflow: hidden; border: 1px solid var(--line-bright); background: rgba(7,19,23,.97); box-shadow: var(--shadow); }.toast::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--mint); content: ""; }.toast.error::before { background: var(--red); }.toast.hint::before { background: var(--amber); }.toast-icon { position: absolute; top: 15px; left: 17px; color: var(--mint); font-weight: 900; }.toast.error .toast-icon { color: var(--red); }.toast.hint .toast-icon { color: var(--amber); }.toast strong, .toast span { display: block; }.toast strong { font-size: .67rem; letter-spacing: .05em; }.toast span { margin-top: 4px; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.debug-panel { position: fixed; z-index: 150; right: 10px; bottom: 10px; width: min(420px,calc(100vw - 20px)); max-height: 45vh; overflow: auto; border: 1px solid var(--amber); background: rgba(2,7,9,.96); box-shadow: var(--shadow); }.debug-panel header { position: sticky; top: 0; padding: 8px 10px; color: #0b0b06; background: var(--amber); font: 700 .58rem/1 var(--mono); }.debug-panel pre { margin: 0; padding: 12px; color: var(--mint); font: .56rem/1.5 var(--mono); white-space: pre-wrap; }
@media (max-width:700px){.learning-layout{grid-template-columns:1fr}.structure-nav{display:grid;grid-template-columns:1fr 1fr}.achievement-grid{grid-template-columns:1fr}.confirm-dialog form>div{align-items:stretch;flex-direction:column}.drawer-panel{width:100vw}.toast-region{right:10px;bottom:10px;width:calc(100vw - 20px)}}