/* // ------------------------------------------------------------------------------ // Author: DRS // Company: HAKROS INTERACTIVE // Website: https://www.hakros.com/ // Project: DOOM RESOURCES BROWSER // Website: https://drb.hakros.com/ // Created: APRIL 2026 // ------------------------------------------------------------------------------ */ :root{ --bg:#0b0d10; --bg-2:#12151b; --panel:#171b23; --panel-2:#1d222c; --line:#2a313d; --line-soft:#222835; --txt:#dfe4ec; --txt-dim:#8b93a3; --txt-faint:#5d6577; --amber:#f0a828; --brand:#f0a828; --img-zoom:1; --amber-dim:#a4741b; --cyan:#4fd6d2; --red:#e0543a; --sel:#f0a828; --sel-bg:rgba(240,168,40,.12); --tile:#101319; --shadow:0 10px 30px rgba(0,0,0,.45); --grid-min:150px; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"DejaVu Sans Mono",monospace; --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } html[data-theme="light"]{ --bg:#e9e7e1; --bg-2:#f4f2ed; --panel:#fbfaf7; --panel-2:#f0eee8; --line:#cdc8bd; --line-soft:#ddd8cf; --txt:#1d2128; --txt-dim:#5c6272; --txt-faint:#8a8f9c; --amber:#b06a00; --brand:#f0a828; --amber-dim:#d09a45; --cyan:#0d7f7c; --red:#bc3a20; --sel:#b06a00; --sel-bg:rgba(176,106,0,.12); --tile:#ffffff; --shadow:0 8px 24px rgba(50,45,35,.18); } *{box-sizing:border-box} /* The browser's own rule for the hidden attribute is display:none, but any class or inline style that sets a display wins over it — which is why a toolbar group marked hidden kept showing, and why #texUseCtrls needed its own patch. One rule settles it for every case: something marked hidden is hidden, whatever else says about its display. */ [hidden]{display:none!important} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--txt); font-family:var(--sans);font-size:14px; display:flex;flex-direction:column;overflow:hidden; -webkit-font-smoothing:antialiased; } button,input,select{font-family:inherit;font-size:inherit;color:inherit} input[type=range]{accent-color:var(--amber)} ::-webkit-scrollbar{width:12px;height:12px} ::-webkit-scrollbar-track{background:var(--bg-2)} ::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--bg-2);border-radius:8px} ::-webkit-scrollbar-thumb:hover{background:var(--txt-faint)} :focus-visible{outline:2px solid var(--amber);outline-offset:2px} /* ---------- top bar ---------- */ header{ display:flex;align-items:center;gap:18px;flex:0 0 auto; padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line); position:relative;z-index:20; } .brand{display:flex;align-items:center;gap:11px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;user-select:none;appearance:none} .brand:hover .mark{filter:brightness(1.08)} .brand .mark{ width:38px;height:38px;border-radius:50%;background:var(--brand); display:flex;align-items:center;justify-content:center;flex:0 0 auto; font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.04em;color:#000; } .brand .wm{line-height:1} .brand .n1{ font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.30em; color:var(--brand); } .brand .n2{ font-family:var(--sans);font-weight:700;font-size:16.5px;letter-spacing:.10em; color:#fff;margin-top:4px;text-transform:uppercase; } html[data-theme=light] .brand .n2{color:#12151b} .spacer{flex:1 1 auto} .tools{display:flex;align-items:center;gap:8px} .btn{ background:var(--panel-2);border:1px solid var(--line);color:var(--txt); padding:7px 12px;border-radius:5px;cursor:pointer;white-space:nowrap; display:inline-flex;align-items:center;gap:7px;transition:border-color .12s,background .12s; } .btn:hover{border-color:var(--amber-dim);background:var(--bg-2)} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--amber);border-color:var(--amber);color:#15100a;font-weight:650} html[data-theme=light] .btn.primary{color:#fff} .btn.primary:hover{filter:brightness(1.08)} .btn.danger{background:var(--red);border-color:var(--red);color:#fff;font-weight:650}.btn.danger:hover{border-color:var(--red);background:var(--red);filter:brightness(1.09)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn.icon{padding:7px 9px} #miMapPrev,#miMapNext,#m3MapPrev,#m3MapNext,#quakeViewerPrev,#quakeViewerNext{ font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.2;letter-spacing:0; } select.ctl{ background:var(--panel-2);border:1px solid var(--line);border-radius:5px; padding:7px 8px;cursor:pointer; } #lang,#licenseWelcomeLang{font-family:var(--sans);font-size:14px;font-weight:400;line-height:normal;color:var(--txt)} /* ---------- toolbar row ---------- */ .toolbar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto; padding:8px 14px;background:var(--bg-2);border-bottom:1px solid var(--line); } .toolbar-break{flex:0 0 100%;height:0;margin:0;padding:0} .miAnalysisProgressLabel{display:block;margin-top:13px;font:10px var(--mono);color:var(--txt-faint);text-transform:uppercase;letter-spacing:.06em}#miAnalysisLoading .bar.item i{background:#4078f2}#miAnalysisStep,#miAnalysisItemStep{display:block;min-height:14px;font:11px var(--mono);color:var(--txt-dim)}#miAnalysisCancel{width:100%;justify-content:center;margin-top:15px} .filters{display:flex;gap:4px;flex:1 1 0;min-width:0;flex-wrap:wrap}.toolbar-primary-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}.toolbar-primary-actions #expFormat{min-width:215px} .chip{ background:transparent;border:1px solid var(--line);color:var(--txt-dim); padding:5px 11px;border-radius:20px;cursor:pointer;font-size:12.5px; display:inline-flex;align-items:center;gap:6px;transition:.12s; } .chip:hover{color:var(--txt);border-color:var(--txt-faint)} .chip[aria-pressed="true"]{ background:var(--sel-bg);border-color:var(--sel);color:var(--sel);font-weight:600; } .chip .cnt{font-family:var(--mono);font-size:10.5px;opacity:.7} .search{ position:relative;display:flex;align-items:center; } .search input{ background:var(--panel);border:1px solid var(--line);border-radius:5px; padding:7px 10px 7px 30px;width:210px;font-family:var(--mono);font-size:12.5px; } .search input::placeholder{color:var(--txt-faint)} .search svg{position:absolute;left:9px;pointer-events:none;opacity:.5} .toolbar2{padding-top:6px;padding-bottom:8px} .toolbar2 .zoom{flex:0 0 auto} .vsep{width:1px;align-self:stretch;background:var(--line);margin:0 3px} .zoom .val{font-family:var(--mono);font-size:10.5px;color:var(--txt-faint);min-width:28px;text-align:right} #animSpeedBox{opacity:.45;pointer-events:none;transition:opacity .12s} #animSpeedBox.on{opacity:1;pointer-events:auto} .zoom{display:flex;align-items:center;gap:7px;color:var(--txt-dim);font-size:12px} .zoom input[type=range]{width:96px;accent-color:var(--amber)} /* ---------- layout ---------- */ main{flex:1 1 auto;display:flex;min-height:0} #gridWrap{flex:1 1 auto;min-width:0;position:relative;display:flex;flex-direction:column} #scroller{ flex:1 1 auto;overflow-y:scroll;overflow-x:hidden;position:relative;padding:14px; scrollbar-gutter:stable; user-select:none;-webkit-user-select:none; } #scroller ::selection{background:transparent} #sizer{position:relative;width:100%;overflow-anchor:none} /* the browser's scroll anchoring fights the virtual grid: tiles are added and removed on every scroll, and Chrome compensates by nudging scrollTop, which shows up as the whole mosaic jumping a few pixels */ #scroller,#scroller *{overflow-anchor:none} #sortItems{width:145px;padding:5px 8px} #sortItems option[hidden]{display:none} /* ---------- tiles ---------- */ .tile{ position:absolute;background:var(--tile);border:1px solid var(--line-soft); border-radius:6px;overflow:hidden;cursor:pointer; display:flex;flex-direction:column; transition:border-color .1s,box-shadow .1s; contain:strict; } .tile:hover{border-color:var(--txt-faint)} .tile.sel{border-color:var(--sel);box-shadow:0 0 0 1px var(--sel) inset,var(--shadow)} .tile.shadowed{opacity:.42} .tile.shadowed .nm{text-decoration:line-through} .grouphead{ position:absolute;left:0;right:0;height:26px;display:flex;align-items:center;gap:8px; padding:0 4px;font-family:var(--mono);font-size:11.5px;color:var(--txt-dim); border-bottom:1px solid var(--line-soft); } .grouphead i{width:10px;height:10px;border-radius:3px;display:block} .grouphead b{color:var(--txt)} .grouphead span{font-size:10px;color:var(--txt-faint);letter-spacing:.1em} .grouphead .groupcount{ min-width:22px;padding:2px 6px;border:1px solid var(--line);border-radius:999px; background:var(--panel);color:var(--txt-dim);font-weight:700;letter-spacing:0;text-align:center; } .tile .thumb{ flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center; background-color:var(--bg); background-image: linear-gradient(45deg,rgba(128,128,128,.12) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.12) 75%), linear-gradient(45deg,rgba(128,128,128,.12) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.12) 75%); background-size:16px 16px;background-position:0 0,8px 8px; overflow:hidden; } .tile .thumb img{ max-width:100%;max-height:100%;width:auto;height:auto;display:block; image-rendering:pixelated; transform:scale(var(--img-zoom,1));transform-origin:center center; } /* mirrored frames must keep the zoom: an inline transform would replace it */ .tile .thumb img.mir{transform:scale(var(--img-zoom,1)) scaleX(-1)} .tile .glyph{color:var(--txt-faint);display:flex;flex-direction:column;align-items:center;gap:6px} .tile .glyph span{font-family:var(--mono);font-size:10px;letter-spacing:.1em} .tile .meta{ flex:0 0 auto;padding:6px 7px;border-top:1px solid var(--line-soft);background:var(--panel); min-width:0; } .tile .nm{ font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--txt); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em; } .tile .sub{ font-family:var(--mono);font-size:9.5px;color:var(--txt-faint);margin-top:2px; display:flex;justify-content:space-between;gap:6px; } .tile .sub .k{color:var(--amber-dim);text-transform:uppercase;letter-spacing:.08em} /* Both halves of the footer stay on one line, so every card is the same height and every thumbnail therefore gets the same amount of room. */ .tile .sub .k,.tile .sub .sz{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tile .sub .k{min-width:0;flex:1 1 auto} .tile .sub .sz{flex:0 0 auto} .tile .head{ flex:0 0 auto;display:flex;align-items:center;min-width:0; padding:3px 6px;background:var(--panel);border-bottom:1px solid var(--line-soft); } .tile .badge{ font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--txt-faint); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } .tile .check{ position:absolute;top:5px;right:5px;width:16px;height:16px;border-radius:4px; border:1px solid var(--line);background:rgba(0,0,0,.4);display:none; } .tile .check.texUse{display:block;width:auto;min-width:18px;padding:1px 4px;color:#fff;font-family:var(--mono);font-size:10px;line-height:14px;text-align:center}.tile .check.texUse.used{background:#2f9e79;border-color:#2f9e79}.tile .check.texUse.unused{background:var(--red);border-color:var(--red)} #texUseCtrls[hidden]{display:none!important} #texUseMap{max-width:180px;padding:4px 7px} .tile.sel .check{display:block;background:var(--sel);border-color:var(--sel)} .tile.sel .check::after{content:"";position:absolute;inset:0;background: linear-gradient(45deg,transparent 44%,#15100a 44%,#15100a 56%,transparent 56%), linear-gradient(-45deg,transparent 44%,#15100a 44%,#15100a 56%,transparent 56%);} .tile.sel .check:not(.texUse){display:none}.tile.sel .check.texUse::after{display:none} .tile .selectMark{position:absolute;top:5px;left:5px;display:none;min-width:17px;height:17px;padding:0 3px;border-radius:4px;background:#4078f2;color:#fff;border:1px solid #4078f2;font-family:var(--mono);font-size:12px;line-height:15px;text-align:center}.tile.sel .selectMark{display:block} /* ---------- empty / dropzone ---------- */ #empty{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:18px;text-align:center;padding:30px;pointer-events:none; } #empty .box{ pointer-events:auto;border:1.5px dashed var(--line);border-radius:10px;padding:38px 46px; background:var(--panel);max-width:520px; } #empty h2{margin:0 0 8px;font-size:19px;letter-spacing:.02em} #empty p{margin:0 0 18px;color:var(--txt-dim);line-height:1.6;font-size:13px} #empty .welcomeActions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px} #empty .hint{font-family:var(--mono);font-size:11px;color:var(--txt-faint);margin-top:14px} body.drag #scroller{outline:2px dashed var(--amber);outline-offset:-8px;background:var(--sel-bg)} /* ---------- open archives ---------- */ #filesPanel{ flex:0 0 var(--files-w,260px);width:var(--files-w,260px);min-width:260px;background:var(--panel); border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden; } #filesPanel[hidden]{display:none} #filesPanel .fhead,#filesPanel .fopts{ padding:8px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--txt-faint);display:flex;align-items:center;gap:6px; } #filesPanel .fopts{ flex-direction:column;align-items:stretch;gap:7px;border-top:1px solid var(--line-soft); text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px;color:var(--txt-dim); } #filesPanel .fopts label{display:flex;align-items:center;gap:7px;cursor:pointer} #filesPanel .fopts .note{font-size:10.5px;line-height:1.45;color:var(--txt-faint)} #filesList{flex:1 1 auto;overflow:auto;padding:4px} .frow{ display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:6px;cursor:grab; border:1px solid transparent;touch-action:none;user-select:none; } .frow:hover{background:var(--panel-2);border-color:var(--line-soft)} .frow.dragging{cursor:grabbing;opacity:.55;background:var(--panel-2);border-color:var(--line-soft)} /* the line marks where the row would land, above or below the one under the pointer */ .frow.drop{box-shadow:inset 0 2px 0 var(--amber)} .frow.dropAfter{box-shadow:inset 0 -2px 0 var(--amber)} .frow .ord{display:flex;align-items:center;flex:0 0 auto} .frow .ord button{padding:2px 1px;font-size:11px;line-height:1} .frow .ord button:disabled{opacity:.25;cursor:default} .frow .ord button:disabled:hover{background:none;color:var(--txt-faint)} .frow.off{opacity:.45} .frow i{width:10px;height:10px;border-radius:3px;flex:0 0 auto} .frow .nm{flex:1 1 auto;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .frow .meta{font-family:var(--mono);font-size:9.5px;color:var(--txt-faint)} .frow button{ background:none;border:0;cursor:pointer;color:var(--txt-faint);padding:2px 3px;border-radius:4px;font-size:12px; } .frow button:hover{background:var(--line);color:var(--txt)} /* ---------- side panel ---------- */ #side{ flex:0 0 var(--side-w,340px);width:var(--side-w,340px);max-width:none;min-width:340px;overflow:hidden; background:var(--panel);border-left:1px solid var(--line); display:flex;flex-direction:column;min-height:0; } #side.hidden{display:none} #side .head{ padding:10px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px; } #side .head .t{ font-family:var(--mono);font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #side .body{flex:1 1 auto;overflow:auto;padding:12px;min-width:0} #side .head{min-width:0} #preview,#previewActions,#props{max-width:100%;min-width:0} #preview pre{max-width:100%;box-sizing:border-box} #preview{ background:var(--bg);border:1px solid var(--line-soft);border-radius:6px; min-height:180px;display:flex;align-items:center;justify-content:center;overflow:hidden; background-image: linear-gradient(45deg,rgba(128,128,128,.1) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.1) 75%), linear-gradient(45deg,rgba(128,128,128,.1) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.1) 75%); background-size:16px 16px;background-position:0 0,8px 8px; } .thumb-loading-overlay{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:rgba(0,0,0,.55);cursor:wait;touch-action:none;overscroll-behavior:contain} .thumb-loading-card{display:flex;flex-direction:column;gap:18px;width:min(420px,85vw);padding:28px;border-radius:10px;background:var(--bg);color:var(--txt);border:1px solid var(--line);box-shadow:0 12px 50px #0006} .thumb-loading-card progress{width:100%;height:18px;accent-color:var(--amber)} .thumb-loading-card span{font-family:var(--mono);text-align:center} #preview img{max-width:100%;image-rendering:pixelated} #preview canvas{max-width:100%;touch-action:none;cursor:grab} #preview pre{ margin:0;width:100%;max-height:340px;overflow:auto;padding:10px; font-family:var(--mono);font-size:11px;line-height:1.5;white-space:pre;color:var(--txt); background:var(--bg);text-align:left; } #preview audio{width:100%;padding:12px} dl.props{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:14px 0 0;font-size:12px} dl.props dt{color:var(--txt-faint);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;padding-top:1px} dl.props dd{margin:0;font-family:var(--mono);word-break:break-all;color:var(--txt)} /* an overridden lump is the kind of thing you want to spot straight away */ dl.props dd.warnval{color:#c81e1e;font-weight:700} html[data-theme=dark] dl.props dd.warnval{color:#dc143c} /* ---------- status bar ---------- */ footer{ flex:0 0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:7px 14px;background:var(--panel);border-top:1px solid var(--line); font-family:var(--mono);font-size:11px;color:var(--txt-dim); } footer .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:inline-block;margin-right:6px} footer b{color:var(--txt);font-weight:600} #progress{ position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;overflow:hidden; } #progress i{display:block;height:100%;width:0;background:var(--amber);transition:width .15s} /* ---------- sprite animation overlay ---------- */ .an-reverse{cursor:pointer;user-select:none} .an-reverse input{margin:0;accent-color:var(--amber)} #anBody{flex:1 1 auto;min-height:0;display:flex;gap:10px} #anCode{ flex:0 0 50%;min-width:180px;overflow:auto;user-select:text; background:var(--bg);border:1px solid var(--line-soft);border-radius:6px; font-family:var(--mono);font-size:11.5px;line-height:1.55;padding:0 4px 8px; } #anCode[hidden],#anSplit[hidden]{display:none} #anSplit{ flex:0 0 8px;cursor:col-resize;border-radius:4px;background:var(--line-soft); align-self:stretch;transition:background .12s; } #anSplit:hover,#anSplit.drag{background:var(--amber)} #anCode .ln{white-space:pre;padding:0 6px;border-radius:3px;color:var(--txt-faint)} #anCode .ln .no{ color:var(--txt-faint);opacity:.6;display:inline-block;width:46px; text-align:right;margin-right:10px;user-select:none; } #anCode .ln.own{color:var(--txt-dim)} #anCode .ln.hl{ background:var(--sel-bg);box-shadow:inset 2px 0 0 var(--amber); color:var(--txt);font-weight:700; } #anCode .hdr{ position:sticky;top:0;z-index:5;background:var(--panel);padding:7px 8px;margin:0 -4px 6px; border-bottom:1px solid var(--line);color:var(--txt-dim);font-size:10.5px; display:flex;align-items:center;gap:12px;box-shadow:0 2px 6px rgba(0,0,0,.16); } #anCode .hdr .p{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; letter-spacing:.06em; } #anCode .hdr label{ flex:0 0 auto;display:flex;align-items:center;gap:5px;cursor:pointer; font-family:var(--sans);font-size:11.5px;letter-spacing:0;color:var(--txt); } #anCode .gap{ padding:3px 6px;color:var(--txt-faint);text-align:center;border-top:1px dashed var(--line-soft); border-bottom:1px dashed var(--line-soft);margin:4px 0; } #anStage{ flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-soft);border-radius:6px;overflow:auto;background:#fff; } #anStage img{image-rendering:pixelated;display:block} #anStrip{ flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:6px; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2); } #anStrip button{ flex:0 0 auto;width:56px;height:62px;background:var(--panel);border:1px solid var(--line); border-radius:5px;cursor:pointer;padding:2px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px; } #anStrip button.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset} #anStrip img{max-width:100%;max-height:40px;image-rendering:pixelated} #anStrip .lt{font-family:var(--mono);font-size:10px;color:var(--txt-dim)} /* ---------- text editor + 3D viewer overlays ---------- */ #animModal,#txtModal,#modelModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:210; display:flex;align-items:center;justify-content:center;padding:18px; } #animModal[hidden],#txtModal[hidden],#modelModal[hidden]{display:none} #animModal .card,#txtModal .card,#modelModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;width:96vw;height:94vh; display:flex;flex-direction:column;gap:10px; } .edbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px} .edbar .grp{ display:flex;align-items:center;gap:6px;padding:4px 8px; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2); } .edbar input[type=text]{ background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:5px 8px; font-family:var(--mono);font-size:12px;width:150px; } .edbar input[type=color]{width:28px;height:24px;padding:0;border:1px solid var(--line);border-radius:4px;background:none} .edbar input[type=range]{width:110px;accent-color:var(--amber)} .edbar .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-faint)} /* ---------- version diff ---------- */ #dfModal,#cmModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:216; display:flex;align-items:center;justify-content:center;padding:16px; } #dfModal[hidden],#cmModal[hidden]{display:none} #dfModal .card,#cmModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;width:96vw;height:94vh; display:flex;flex-direction:column;gap:8px; } #dfMain{flex:1 1 auto;min-height:0;display:flex;gap:8px} #dfList{ flex:0 0 380px;overflow:auto;background:var(--bg-2); border:1px solid var(--line-soft);border-radius:6px;padding:4px; } #dfDetail{ flex:1 1 auto;min-width:0;overflow:auto;background:var(--bg-2); border:1px solid var(--line-soft);border-radius:6px;padding:4px; } #dfList .it,#dfDetail .it{ display:flex;gap:8px;align-items:baseline;padding:3px 7px;border-radius:4px; font-family:var(--mono);font-size:11.5px;color:var(--txt-dim);cursor:pointer; } #dfList .it:hover{background:var(--panel-2)} #dfList .it.on{background:var(--sel-bg);color:var(--amber);font-weight:600} #dfList .it .sg{flex:0 0 10px;font-weight:700} #dfList .it .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #dfList .it .ty{flex:0 0 auto;font-size:10px;color:var(--txt-faint)} #dfList .it.ok{color:#2f9e79} #dfList .it.err{color:var(--red)} #dfList .it.warn{color:var(--amber)} .dfbar{display:flex;gap:6px;align-items:center;padding:6px 10px;flex-wrap:wrap} .dfbar .chip{padding:3px 10px;font-size:11.5px} .dfstage{display:flex;gap:14px;flex-wrap:wrap;padding:8px 10px;align-items:flex-start} .dfimg{position:relative;background: linear-gradient(45deg,rgba(128,128,128,.14) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.14) 75%), linear-gradient(45deg,rgba(128,128,128,.14) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.14) 75%); background-size:16px 16px;background-position:0 0,8px 8px;border:1px solid var(--line-soft);border-radius:4px} .dfimg canvas{display:block;image-rendering:pixelated} .dfimg .lb{ position:absolute;top:2px;left:4px;font-family:var(--mono);font-size:10px; background:rgba(0,0,0,.5);color:#fff;padding:1px 5px;border-radius:3px; } .dfstack{position:relative} .dfstack canvas{position:absolute;top:0;left:0} .dfstack canvas:first-child{position:relative} .dfdiff{font-family:var(--mono);font-size:11px;line-height:1.45;padding:4px 6px;overflow:auto} .dfdiff .l{display:flex;gap:8px;white-space:pre;border-radius:3px} .dfdiff .l .n{flex:0 0 42px;text-align:right;color:var(--txt-faint);opacity:.7} .dfdiff .l .s{flex:1 1 auto;min-width:0} .dfdiff .add{background:rgba(47,158,121,.16);color:#177a56} .dfdiff .del{background:rgba(224,84,58,.14);color:#b3341c} .dfdiff .ctx{color:var(--txt-dim)} html[data-theme=dark] .dfdiff .add{color:#5fd6a6} html[data-theme=dark] .dfdiff .del{color:#ff8a70} /* ---------- package audit ---------- */ #audModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:214; display:flex;align-items:center;justify-content:center;padding:16px; } #audModal[hidden]{display:none} #audModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;width:94vw;height:92vh; display:flex;flex-direction:column;gap:8px; } #audWork{flex:1 1 auto;min-height:0;display:flex;gap:8px} #audBody{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding:2px 4px;font-size:var(--aud-fs,12px)} #audPreview{display:none;flex:0 0 310px;min-width:240px;min-height:0;overflow:auto;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;padding:8px} #audPreview.on{display:block} #audModal #audPreview{font-size:var(--aud-fs,12px)} #audModal #audPreview .audPvHead{font-size:calc(var(--aud-fs,12px) - 2px)} #audModal #audPvName{font-size:var(--aud-fs,12px)} #audModal #audPvBox pre,#audModal #audPvBox .audPvEmpty{font-size:calc(var(--aud-fs,12px) - 1.5px)} #audModal .audPvTools,#audModal .audPvTools .btn{font-size:calc(var(--aud-fs,12px) - 1px)} #audModal #audPvProps{font-size:var(--aud-fs,12px)} #audModal #audPvProps dt{font-size:calc(var(--aud-fs,12px) - 1.5px)} #audModal .audcrumbs{font-size:calc(var(--aud-fs,12px) - 1px)} /* ---------- actor visualizer ---------- */ #depModal{position:fixed;inset:0;z-index:215;background:rgba(4,6,9,.78);display:flex;align-items:center;justify-content:center;padding:16px} #depModal[hidden]{display:none} #depModal .card{width:min(1320px,97vw);height:min(840px,94vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden} .depbar{min-height:55px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft)} .depbar strong{font-size:14px}.depbar #depStatus{font:10.5px var(--mono);color:var(--txt-dim)} #depMain{display:grid;grid-template-columns:minmax(280px,340px) 1fr;min-height:0;flex:1} #depRoots{display:flex;flex-direction:column;min-height:0;padding:10px;border-right:1px solid var(--line-soft);background:var(--bg-2)} #depRoots .search,#depRoots .search input{width:100%;box-sizing:border-box}#depRootList{overflow:auto;margin-top:9px} .deproot{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;width:100%;min-height:54px;padding:6px 8px;border:0;border-bottom:1px solid var(--line-soft);background:none;color:var(--txt);text-align:left;cursor:pointer} .deproot:hover,.deproot.on{background:var(--sel-bg);color:var(--amber)}.deproot b{align-self:end;font:11px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deproot small{align-self:start;color:var(--txt-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .deppreview{grid-row:1/3;display:flex;width:44px;height:44px;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line-soft);border-radius:4px;background:var(--bg);color:var(--txt-faint);font-style:normal;font-size:17px}.deppreview.hasImage{background:linear-gradient(45deg,#bbb 25%,transparent 25%),linear-gradient(-45deg,#bbb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bbb 75%),linear-gradient(-45deg,transparent 75%,#bbb 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.depPreviewCanvas{display:block;max-width:42px;max-height:42px;width:auto;height:auto;image-rendering:pixelated} .deppreview.depMapPreview,.deppreview.depMapPreview.hasImage{background:#000} #depResults{min-width:0;min-height:0;overflow:auto;padding:15px}#depEmpty{display:grid;place-items:center;height:100%;color:var(--txt-faint);text-align:center;line-height:1.6} #depSummary{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:8px;margin-bottom:12px}.depstat{padding:11px;background:var(--tile);border:1px solid var(--line-soft);border-radius:6px}.depstat b{display:block;font:18px var(--mono);color:var(--amber)}.depstat span{font-size:10px;color:var(--txt-dim)} .depactions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 0 12px}.depactions label{font-size:11px;color:var(--txt-dim)}.depactions input{accent-color:var(--amber)} .depgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(230px,1fr);gap:12px}.depcol{min-width:0;border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}.depcol h4{margin:0;padding:9px 11px;background:var(--bg-2);font-size:11px}.depitem{display:grid;grid-template-columns:24px 48px minmax(130px,1fr) minmax(100px,1fr) auto;gap:7px;align-items:center;min-height:54px;padding:5px 9px;border-top:1px solid var(--line-soft);font-size:10.5px}.depitem b{font-family:var(--mono);overflow-wrap:anywhere}.depitem small{color:var(--txt-faint);overflow-wrap:anywhere}.depitem em{font-style:normal;color:var(--txt-dim)}.depitem input{accent-color:var(--amber)}.depitem .deppreview{grid-row:auto}.depmissing .depitem{grid-template-columns:24px minmax(0,1fr);min-height:38px}.depmissing .depitem b{color:var(--red)} @media(max-width:900px){#depMain{grid-template-columns:250px 1fr}.depgrid{grid-template-columns:1fr}#depSummary{grid-template-columns:repeat(2,1fr)}} /* ---------- port compatibility lab ---------- */ #portModal{position:fixed;inset:0;z-index:216;background:rgba(4,6,9,.8);display:flex;align-items:center;justify-content:center;padding:16px}#portModal[hidden]{display:none} .portAboveLab{z-index:217!important} #portModal .card{position:relative;width:min(1400px,97vw);height:min(880px,94vh);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}.portbar{min-height:56px;display:flex;align-items:center;gap:11px;padding:9px 14px;border-bottom:1px solid var(--line-soft)}.portbar label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--txt-dim)}#portStatus{font:10.5px var(--mono);color:var(--txt-dim)} #portModal.portLoadingActive{background:transparent;backdrop-filter:none}#portModal.portLoadingActive>.card{border-color:transparent;background:transparent;box-shadow:none;overflow:visible}#portModal.portLoadingActive .portbar,#portModal.portLoadingActive #portBody{visibility:hidden}#portLoading{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(4,6,9,.78);backdrop-filter:blur(3px)}#portLoading[hidden]{display:none}#portLoading .qkBatchProgressCard{width:min(520px,calc(100% - 40px))}#portLoading .qkBatchProgressFoot{min-height:28px} #portBody{display:grid;grid-template-columns:270px 1fr;min-height:0;flex:1}#portMatrix{overflow:auto;padding:10px;background:var(--bg-2);border-right:1px solid var(--line-soft)}.portprofile{width:100%;display:grid;grid-template-columns:38px 1fr auto;gap:3px 8px;align-items:center;padding:9px;border:1px solid transparent;border-radius:6px;background:none;color:var(--txt);text-align:left;cursor:pointer}.portprofile:hover,.portprofile.on{border-color:var(--amber);background:var(--sel-bg)}.portprofile .logo{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:5px;background:#15171b;color:#fff;font:700 10px var(--mono)}.portprofile b{font-size:11px}.portprofile small{color:var(--txt-faint)}.portprofile em{grid-column:3;grid-row:1/3;font:700 12px var(--mono);font-style:normal}.portprofile em.bad{color:var(--red)}.portprofile em.ok{color:#2f9e79} #portReport{min-width:0;min-height:0;overflow:auto;padding:14px}.porthead{position:sticky;top:-14px;z-index:5;margin:-14px 0 0;padding:14px 0 2px;background:var(--panel);border-bottom:1px solid var(--line-soft);box-shadow:0 7px 12px -12px rgba(0,0,0,.65)}#portSummary{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:8px}.portstat{padding:11px;border:1px solid var(--line-soft);border-radius:6px;background:var(--tile)}.portstat b{display:block;font:18px var(--mono)}.portstat span{font-size:10px;color:var(--txt-dim)}.portstat.err b{color:var(--red)}.portstat.warn b{color:var(--amber)}.portstat.ok b{color:#2f9e79}.portfilters{display:flex;align-items:center;gap:6px;padding:12px 0}.portfilters .search{margin-right:auto;max-width:340px}.portfilters .search input{width:100%}.portTypeFilter{display:flex;align-items:center;gap:6px;color:var(--txt-dim);font-size:10px;white-space:nowrap}.portTypeFilter .ctl{max-width:150px}.portfilters .chip.on{border-color:var(--amber);color:var(--amber);background:var(--sel-bg)} .portissue{display:grid;grid-template-columns:58px minmax(150px,1fr) minmax(220px,2fr) auto;grid-template-rows:auto auto;gap:3px 10px;align-items:center;min-height:67px;padding:7px 10px;border:1px solid var(--line-soft);border-left:4px solid var(--txt-faint);border-radius:5px;margin-bottom:6px;background:var(--tile)}.portissue.error{border-left-color:var(--red)}.portissue.warn{border-left-color:var(--amber)}.portissue.info{border-left-color:#4078f2}.portthumb{grid-row:1/3;display:grid;place-items:center;width:54px;height:54px;overflow:hidden;border-radius:4px;background:var(--bg);color:var(--txt-faint);font-size:18px}.portthumb.map,.portthumb.map.hasImage{background:#000}.portthumb.hasImage:not(.map){background:linear-gradient(45deg,#bbb 25%,transparent 25%),linear-gradient(-45deg,#bbb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bbb 75%),linear-gradient(-45deg,transparent 75%,#bbb 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.portthumb canvas{max-width:52px;max-height:52px;image-rendering:pixelated}.portissue b{font:11px var(--mono);overflow-wrap:anywhere}.portissue .reason{font-size:11px;line-height:1.4}.portissue .fix{grid-column:3/5;color:var(--txt-dim);font-size:10.5px}.portbadge{grid-column:4;grid-row:1;padding:3px 7px;border-radius:10px;background:var(--bg-2);font:9px var(--mono);text-transform:uppercase}.portempty{padding:50px;text-align:center;color:var(--txt-faint)} .portMore{display:flex;width:100%;justify-content:center;margin:8px 0 2px;padding:9px!important;color:var(--txt-dim)!important} @media(max-width:900px){#portBody{grid-template-columns:220px 1fr}#portSummary{grid-template-columns:repeat(2,1fr)}.portissue{grid-template-columns:58px 1fr}.portissue .reason,.portissue .fix{grid-column:2}.portbadge{grid-column:2;grid-row:auto;justify-self:start}} #actorModal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px} #actorModal[hidden]{display:none} #actorModal .card{width:min(1180px,96vw);height:min(760px,92vh);display:flex;flex-direction:column;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden} #actorModal .edbar{min-height:54px;padding:9px 14px;gap:12px;flex-wrap:nowrap;border-bottom:1px solid var(--line-soft)} #actorModal .edbar strong{white-space:nowrap;min-width:max-content} #actorModal .edbar .search{margin-left:10px!important;flex:0 1 290px;max-width:290px} #actorModal .edbar .search input{width:100%;box-sizing:border-box} #actorModal .edbar .btn{flex:0 0 auto} .actorThumbToggle{display:flex;flex:0 0 auto;align-items:center;gap:5px;margin-left:-4px;white-space:nowrap;font-size:11px;color:var(--txt-dim);cursor:pointer}.actorThumbToggle input{accent-color:var(--amber)} .actorImageFilters{display:flex;align-items:center;gap:4px;flex:0 0 auto}.actorImageFilters button{border:1px solid var(--line);border-radius:4px;background:var(--tile);color:var(--txt-dim);font:inherit;font-size:10px;padding:5px 7px;cursor:pointer;white-space:nowrap}.actorImageFilters button:hover,.actorImageFilters button.on{border-color:var(--amber);color:var(--amber);background:var(--sel-bg)} #actorMain{min-height:0;flex:1;display:grid;grid-template-columns:minmax(300px,42%) 1fr} #actorList{overflow:auto;padding:10px;border-right:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));align-content:start;gap:8px} .actorCard{display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:9px;align-items:center;background:var(--tile);border:1px solid var(--line);border-radius:6px;padding:10px;cursor:pointer;min-height:82px;text-align:left}.actorCard.noThumb{display:block}.actorCard:hover,.actorCard.on{border-color:var(--amber);background:var(--sel-bg)} .actorCard b{display:block;grid-column:2;margin:0 0 4px;font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}.actorCard .ty{display:block;grid-column:2;font-size:10px;overflow-wrap:anywhere}.actorCardPreview{grid-column:1;grid-row:1/5;width:68px;height:68px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-2);border-radius:3px}.actorCardPreview .actorSpritePreview{display:block;max-width:68px;max-height:68px;width:auto;height:auto;image-rendering:pixelated}.actorCard.noThumb b,.actorCard.noThumb .ty{grid-column:auto} #actorDetail{overflow:auto;padding:16px}.actorHead{font-family:var(--mono);font-size:16px;margin-bottom:12px}.actorState{display:inline-block;margin:3px;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:var(--tile);color:var(--txt);font:inherit;font-family:var(--mono);font-size:11px;line-height:1.2;cursor:pointer;box-shadow:none}.actorState:hover{border-color:var(--amber);background:var(--sel-bg);color:var(--txt)}.actorState:focus-visible{outline:2px solid var(--amber);outline-offset:1px} #actorDetail > .btn{margin:10px 0 14px} .actorCoverage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:2px 0 16px}.actorCoverage .relgrp{grid-column:1/-1;margin:0 0 2px}.actorCoverageState{min-width:0;text-align:left;padding:7px 8px;border:1px solid var(--line);border-radius:4px;background:var(--tile);font:inherit;cursor:pointer}.actorCoverageState b,.actorCoverageState span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actorCoverageState b{font-family:var(--mono);font-size:11px}.actorCoverageState span{font-size:10px;color:var(--txt-dim);margin-top:2px}.actorCoverageState.own{border-left:3px solid #3aa76d}.actorCoverageState.inherited{border-left:3px solid #4384e8}.actorCoverageState.override{border-left:3px solid var(--amber)}.actorCoverageState.missing{border-left:3px solid var(--red);opacity:.72;cursor:default}.actorCoverageState:not(:disabled):hover{border-color:var(--amber)} .actorLegend{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 16px;font-size:10px;color:var(--txt-dim)}.actorLegend span{display:inline-flex;align-items:center;gap:4px}.actorLegend span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line)}.actorLegend .own:before{background:#3aa76d}.actorLegend .inherited:before{background:#4384e8}.actorLegend .override:before{background:var(--amber)}.actorLegend .missing:before{background:var(--red)} .actorTabs{display:flex;gap:3px;overflow:auto;border-bottom:1px solid var(--line-soft);margin:0 -16px 12px;padding:0 16px}.actorTabs button{flex:0 0 auto;border:0;border-bottom:2px solid transparent;background:none;color:var(--txt-dim);font:inherit;font-size:11px;padding:8px 7px;cursor:pointer;white-space:nowrap}.actorTabs button:hover,.actorTabs button.on{color:var(--amber);border-bottom-color:var(--amber)}.actorTabPane > .btn{margin:10px 0 14px}.actorRows{display:grid;gap:5px;margin-bottom:14px}.actorRow{display:grid;grid-template-columns:minmax(90px,38%) 1fr;gap:10px;width:100%;text-align:left;border:1px solid var(--line);border-radius:4px;padding:7px 8px;background:var(--tile);font:inherit;cursor:pointer}.actorRow b{font-family:var(--mono);font-size:11px;overflow-wrap:anywhere}.actorRow span{font-size:10px;color:var(--txt-dim);overflow-wrap:anywhere}.actorRow.hasPreview{grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;min-height:52px}.actorRow.hasPreview b,.actorRow.hasPreview span{grid-column:2}.actorRowPreview{grid-column:1;grid-row:1/3;width:40px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px;background:var(--bg-2);color:var(--txt-faint);font-style:normal;font-size:18px;image-rendering:pixelated}.actorRowPreviewCanvas{max-width:40px;max-height:40px;image-rendering:pixelated}.actorRowPreview.needsIwad{color:var(--amber);border:1px dashed var(--amber);background:transparent;font-size:15px;cursor:help}.actorIwadHint{display:flex;gap:10px;align-items:flex-start;margin:18px 0 16px;padding:11px 13px;border:1px solid var(--amber);border-left-width:4px;border-radius:5px;background:linear-gradient(rgba(240,168,40,.11),rgba(240,168,40,.11)),var(--tile);color:var(--txt);font-size:11.5px;line-height:1.55}.actorIwadHint svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--amber)}.actorIwadHint p{margin:0}.actorRow.missing{border-left:3px solid var(--red);cursor:default}.actorRow.warn{border-left:3px solid var(--amber)}.actorRow:not(:disabled):hover{border-color:var(--amber)} #audPreview .audPvHead{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:5px} #audPvName{font-family:var(--mono);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px} #audPvBox{height:260px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;background:var(--bg);border:1px solid var(--line-soft);border-radius:5px} #audPvBox img,#audPvBox canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated} .audPvStage{min-height:0;flex:1;display:grid;place-items:center;overflow:auto}.audPvStage img{max-width:none!important;max-height:none!important} .audPvTools{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 8px;border-top:1px solid var(--line-soft);font-size:11px}.audPvTools label{display:flex;align-items:center;gap:5px;min-width:0}.audPvTools input{width:88px}.audPvTools .btn{margin-left:auto;padding:4px 7px;font-size:11px} .audPvMusicStatus{display:block!important;width:100%;flex:0 0 auto;margin:10px 0 0!important;white-space:pre-line;line-height:1.55;text-align:left} .props dd.mapuse{white-space:pre-line;line-height:1.55} #audPvBox audio{width:94%} #audPvBox pre{width:100%;height:100%;margin:0;overflow:auto;padding:9px;font-family:var(--mono);font-size:10.5px;white-space:pre} #audPvBox .audPvEmpty{padding:16px;text-align:center;color:var(--txt-faint);font-family:var(--mono);font-size:10.5px;line-height:1.45} #audBody .it.on{background:var(--sel-bg);color:var(--amber);box-shadow:inset 2px 0 0 var(--amber)} @media(max-width:1050px){#audPreview{flex-basis:250px}} #audBody .it{font-size:var(--aud-fs,12px)} #audBody .relgrp{font-size:calc(var(--aud-fs,12px) - 2px)} .audcrumbs{ display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 6px; font-family:var(--mono);font-size:11px;color:var(--txt-dim); } .audcrumbs button{ background:none;border:1px solid var(--line-soft);border-radius:5px;padding:2px 8px; cursor:pointer;color:inherit;font-family:inherit;font-size:inherit; } .audcrumbs button:hover{border-color:var(--amber);color:var(--amber)} .audcrumbs button:disabled{opacity:.4;cursor:not-allowed} .audcrumbs .sep{opacity:.4} #audTree rect{cursor:pointer} #audTree text{pointer-events:none} #audProgress{flex:0 0 3px;background:var(--line-soft);border-radius:2px;overflow:hidden} #audProgress[hidden]{display:none} #audProgress i{display:block;height:100%;width:0;background:var(--amber);transition:width .2s} .audcards{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px} .audcard{ flex:1 1 150px;min-width:150px;padding:12px 14px;border-radius:8px; background:var(--bg-2);border:1px solid var(--line-soft); } .audcard .v{font-family:var(--mono);font-size:calc(var(--aud-fs,12px) + 10px);font-weight:700;color:var(--txt)} .audcard .t{font-size:var(--aud-fs,12px);color:var(--txt-dim);margin-top:2px} .audcard .n{font-family:var(--mono);font-size:calc(var(--aud-fs,12px) - 2px);color:var(--txt-faint);margin-top:4px} .audcard.warn{border-color:var(--amber)} .audcard.warn .v{color:var(--amber)} .audcard.err{border-color:var(--red)} .audcard.err .v{color:var(--red)} .audcharts{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px} .audlegend{font-family:var(--mono);font-size:calc(var(--aud-fs,12px) - 1px);color:var(--txt-dim);margin-top:6px} .audlegend div{display:flex;align-items:center;gap:6px;padding:1px 0} .audlegend i{width:9px;height:9px;border-radius:2px;display:block} .audlegend span{margin-left:auto;padding-left:10px;color:var(--txt-faint)} #audBody .it{display:flex;gap:10px;align-items:baseline;padding:3px 7px;border-radius:4px; font-family:var(--mono);font-size:var(--aud-fs,12px);color:var(--txt-dim);cursor:default} #audBody .it .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #audBody .it .ty{flex:0 0 auto;font-size:calc(var(--aud-fs,12px) - 1.5px);color:var(--txt-faint)} .audHash{flex:0 0 150px;font-family:var(--mono);font-size:calc(var(--aud-fs,12px) - 1.5px);color:var(--txt-dim);text-align:left} .audLocation{flex:0 1 300px;min-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:calc(var(--aud-fs,12px) - 1.5px);color:var(--txt-dim)} #audBody .audDupRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start} #audBody .audDupRow .nm,#audBody .audDupRow .audLocation,#audBody .audDupRow .audHash,#audBody .audDupRow .ty{min-width:0;overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;flex:none} #audBody .audDupRow .audLocation,#audBody .audDupRow .audHash,#audBody .audDupRow .ty{font-family:var(--mono);color:var(--txt-dim);text-align:left} #audBody .it:hover{background:var(--panel-2)} #audBody .it.warn{color:var(--amber)} #audBody .it.err{color:var(--red)} /* ---------- texture inspector ---------- */ #txModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:212; display:flex;align-items:center;justify-content:center;padding:16px; } #txModal[hidden]{display:none} #txModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;width:94vw;height:92vh; display:flex;flex-direction:column;gap:8px; } #txMain{flex:1 1 auto;min-height:0;display:flex;gap:8px} #txStage{ flex:1 1 auto;min-width:0;overflow:auto;display:flex;align-items:center;justify-content:center; background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;padding:10px; } #txCanvas{image-rendering:pixelated;cursor:crosshair;box-shadow:0 0 0 1px var(--line)} #txSide{ flex:0 0 330px;display:flex;flex-direction:column;min-height:0; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);overflow:hidden; } #txLayers,#txUsage{flex:1 1 auto;overflow:auto;font-size:12px;padding:4px} #txSide .it{display:flex;gap:8px;align-items:baseline} #txSide .it .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #txSide .it .ty{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;color:var(--txt-faint)} #txSide .it.on{background:var(--sel-bg);color:var(--amber);font-weight:600} #txSide .it .src{flex:0 0 auto} /* ---------- map inspector ---------- */ #mapModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:210; display:flex;align-items:center;justify-content:center;padding:14px; } #mapModal[hidden]{display:none} #mapModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;width:98vw;height:96vh; display:flex;flex-direction:column;gap:8px; } #miLayers{display:flex;gap:5px;flex-wrap:wrap;padding-top:6px} #miLayers .chip{padding:3px 9px;font-size:11.5px} .miRotate{font-size:19px!important;line-height:1;padding:6px 9px!important;color:var(--amber)!important} .miMapNav{font-size:18px!important;line-height:1;padding:6px 10px!important}.miMapNavSep{min-height:28px;margin-inline:2px} .miDifficultyCount{min-width:82px;font:10px var(--mono);color:var(--txt-dim);white-space:nowrap} #miMain{flex:1 1 auto;min-height:0;display:flex;gap:8px} #miCanvasWrap{ flex:1 1 auto;min-width:0;position:relative;background:var(--bg-2); border:1px solid var(--line-soft);border-radius:6px;overflow:hidden; } #miCanvas{display:block;cursor:grab} #miNoLayers{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:color-mix(in srgb,var(--bg-2) 92%,transparent);color:var(--txt-dim)}#miNoLayers[hidden]{display:none}#miNoLayers .miNoLayersIcon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:4px;border:2px solid var(--amber);border-radius:50%;color:var(--amber);font-size:25px;box-shadow:0 0 0 7px rgba(240,168,40,.1)}#miNoLayers strong{font-size:16px;color:var(--txt)}#miNoLayers span{font-size:12px}#miNoLayers .btn{margin-top:6px;border-color:var(--amber);color:var(--amber);background:var(--panel)} #miSplit{ flex:0 0 8px;cursor:col-resize;border-radius:4px;background:var(--line-soft); align-self:stretch;transition:background .12s; } #miSplit:hover,#miSplit.drag{background:var(--amber)} #miPreview{ position:absolute;left:10px;bottom:10px;z-index:5;width:240px; background:var(--panel);border:1px solid var(--line);border-radius:8px; box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden; } #miPreview[hidden]{display:none} #miPreview .ph{ display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid var(--line-soft); font-family:var(--mono);font-size:11px; } #miPvCtrls[hidden]{display:none} #miPvBox{ height:180px;overflow:auto;display:flex;align-items:center;justify-content:center; background:#fff; } #miPvBox img{image-rendering:pixelated;display:block} #miPvBox audio{width:92%} #miPvBox .none{color:var(--txt-faint);font-size:11px;font-family:var(--mono)} #miRes .it{display:grid;gap:8px;align-items:baseline;grid-template-columns:repeat(var(--mi-cols,5),minmax(0,1fr))} #miRes .it .nm{min-width:0;overflow-wrap:anywhere} #miRes .it .ty{min-width:0;white-space:normal;overflow-wrap:anywhere;text-align:right} #miSide{ flex:0 0 500px;min-width:500px;display:flex;flex-direction:column;min-height:0; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);overflow:hidden; } #miInfo,#miRes,#miStats,#miGameplay,#miProgression,#miSound,#miScripts,#miCompat,#miDiagnostics,#miAnalysis,.miVisualPane{font-size:12px} .miVisualPane{overflow:auto}.miVisualHero{display:grid;gap:5px;padding:17px 18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(64,120,242,.14),rgba(240,168,40,.08))}.miVisualHero strong{font-size:17px}.miVisualHero span{color:var(--txt-dim);line-height:1.45}.miVisualHero.lighting{background:linear-gradient(135deg,rgba(255,214,80,.2),rgba(22,24,30,.06))}.miVisualHero.connectivity{background:linear-gradient(135deg,rgba(47,158,121,.17),rgba(64,120,242,.09))}.miVisualHero.xray{background:linear-gradient(135deg,rgba(0,210,255,.16),rgba(166,38,164,.09))}.miVisualHero.iso{background:linear-gradient(135deg,rgba(240,168,40,.17),rgba(60,90,140,.1))}.miVisualCard{display:grid;gap:11px;margin:12px;padding:13px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.miVisualCard h3{margin:0 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt-dim)}.miVisualField{display:grid;gap:6px}.miVisualField>span{display:flex;justify-content:space-between;color:var(--txt-dim)}.miVisualField b{color:var(--amber);font-family:var(--mono)}.miVisualField select{width:100%;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--soft);color:var(--txt)}.miVisualField input[type=range]{width:100%;accent-color:var(--amber)}.miVisualCheck{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer}.miVisualCheck input{accent-color:var(--amber);cursor:pointer}.miVisualLegend{display:grid;grid-template-columns:18px 1fr 18px 1fr;gap:7px;align-items:center;margin:12px;padding:10px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--txt-dim)}.miVisualLegend i{width:18px;height:10px;border-radius:3px;background:#2768e5}.miVisualLegend i:nth-of-type(2){background:#e53e3e}.miVisualNote{margin:12px;padding:11px;border-left:3px solid var(--amber);background:var(--soft);color:var(--txt-dim);line-height:1.5}.miVisualStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px}.miVisualStats>div{padding:11px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}.miVisualStats b{display:block;font:800 20px var(--mono);color:var(--amber)}.miVisualStats span{font-size:10px;color:var(--txt-dim)} .miConnLegend{display:flex;flex-wrap:wrap;gap:12px;margin:12px;padding:10px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--txt-dim)}.miConnLegend span{display:flex;align-items:center;gap:7px}.miConnLegend i{width:20px;height:12px;border:1px solid rgba(0,0,0,.18);border-radius:3px}.miConnLegend .reachable{background:#2f9e79}.miConnLegend .blocked,.miConnLegend .isolated{background:#e0543a}.miConnLegend .connected{background:#3f678e}.miConnLegend .componentA,.miConnLegend .lowLinks{background:#2768e5}.miConnLegend .componentB{background:#19b4aa}.miConnLegend .highLinks{background:#e53e3e} .miVisualColor{grid-template-columns:1fr auto;align-items:center}.miVisualColor input[type=color]{width:54px;height:32px;padding:2px;border:1px solid var(--line);border-radius:5px;background:var(--soft);cursor:pointer}#miVIsoReset{width:100%;justify-content:center;border-color:var(--amber);color:var(--amber)} .edtabs #miAnalysisTab{color:inherit}.edtabs #miAnalysisTab.on{border-bottom-color:var(--amber)} .miAnalysisSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}.miAnalysisSummary>div{padding:10px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}.miAnalysisSummary b{display:block;font:800 22px var(--mono)}.miAnalysisSummary span{color:var(--txt-dim)}.miAnalysisSummary .error b{color:#e0543a}.miAnalysisSummary .warn b{color:#c18401}.miAnalysisSummary .info b{color:#4078f2}.miAnalysisGroup{margin:0 10px 10px;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--panel)}.miAnalysisGroupHead{display:flex;width:100%;align-items:center;justify-content:space-between;margin:0;padding:9px 10px;border:0;background:var(--soft);color:var(--txt);font:600 11px inherit;text-align:left;cursor:pointer}.miAnalysisGroupHead:hover{background:color-mix(in srgb,var(--amber) 8%,var(--soft))}.miAnalysisGroupHead span{display:flex;align-items:center;gap:8px}.miAnalysisGroupHead span i{font-style:normal;font-size:18px;line-height:10px;transition:transform .15s}.miAnalysisGroupHead[aria-expanded="true"] span i{transform:rotate(90deg)}.miAnalysisGroupHead b{min-width:25px;padding:2px 7px;border-radius:10px;background:var(--line-soft);font:700 10px var(--mono);text-align:center}.miAnalysisGroupBody[hidden]{display:none}.miAnalysisResult{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--line-soft)}.miAnalysisResult>i{width:8px;height:8px;border-radius:50%;background:#4078f2}.miAnalysisResult.error>i{background:#e0543a}.miAnalysisResult.warn>i{background:#c18401}.miAnalysisResult small{display:block;margin-top:2px;color:var(--txt-dim)}.miAnalysisEmpty{margin:14px;padding:18px;border:1px solid #2f9e79;border-radius:6px;background:color-mix(in srgb,#2f9e79 8%,var(--panel));text-align:center;color:#2f9e79} #miAnalysisModal{position:fixed;inset:0;z-index:275;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.78)}#miAnalysisModal[hidden]{display:none}#miAnalysisModal>.card{width:min(620px,94vw);max-height:88vh;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}.miAnalysisHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.miAnalysisToggle{display:flex;gap:7px;padding:8px 2px;border-bottom:1px solid var(--line)}#miAnalysisChecks{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;padding:12px 2px}#miAnalysisChecks label{display:flex;gap:7px;align-items:flex-start;font-size:12px}#miAnalysisRun{width:100%;justify-content:center;margin-top:6px}#miAnalysisLoading{position:fixed;inset:0;z-index:290;display:flex;align-items:center;justify-content:center;background:rgba(6,9,14,.88);backdrop-filter:blur(2px)}#miAnalysisLoading[hidden]{display:none}#miAnalysisLoading .box{width:min(440px,78vw);padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 18px 48px rgba(0,0,0,.55)}#miAnalysisLoading .bar{height:7px;margin:12px 0;border-radius:4px;overflow:hidden;background:var(--line-soft)}#miAnalysisLoading .bar i{display:block;width:0;height:100%;background:var(--amber);transition:width .15s}#miAnalysisStep{font:11px var(--mono);color:var(--txt-dim)}@media(max-width:700px){#miAnalysisChecks{grid-template-columns:1fr}} #miItemViewer{position:fixed;inset:0;z-index:285;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.82);backdrop-filter:blur(2px)}#miItemViewer[hidden]{display:none}#miItemViewer>.card{width:min(720px,94vw);max-height:88vh;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}.miItemViewerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:11px}.miItemViewerHead>div{display:grid;gap:3px}.miItemViewerHead small{color:var(--txt-dim);font-family:var(--mono)}.miInspectorProblem,.miInspectorAdvice{display:grid;gap:5px;padding:13px 14px;border:1px solid var(--line);border-left:4px solid #e0543a;border-radius:6px;background:var(--soft)}.miInspectorProblem span,.miInspectorAdvice span{color:var(--txt-dim);font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em}.miInspectorProblem strong{font-size:14px;line-height:1.45}.miInspectorSection{margin-top:12px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.miInspectorSection h4{margin:0;padding:8px 11px;border-bottom:1px solid var(--line);background:var(--soft);font-size:11px}.miInspectorFacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.miInspectorFact{display:grid;gap:3px;padding:10px 12px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}.miInspectorFact span{color:var(--txt-dim);font-size:10px}.miInspectorFact b{font-family:var(--mono);overflow-wrap:anywhere}.miInspectorRelated{display:flex;flex-wrap:wrap;gap:7px;padding:10px}.miInspectorRelated .btn{display:flex;gap:6px;align-items:center}.miInspectorRelated .btn:before{content:"◎";color:var(--amber)}.miInspectorAdvice{margin-top:12px;border-left-color:#f0a828}.miInspectorAdvice p{margin:0;line-height:1.55}.miResultActions{display:flex;gap:5px}.miViewIssue{border-color:var(--amber)!important;color:var(--amber)!important}@media(max-width:600px){.miInspectorFacts{grid-template-columns:1fr}} .miSoundHero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;background:linear-gradient(135deg,rgba(47,158,121,.13),rgba(240,168,40,.10));border-bottom:1px solid var(--line)}.miSoundHero>div:first-child{display:grid;gap:4px}.miSoundHero span,.miSoundHero small{color:var(--txt-dim)}.miSoundHero b{font-size:18px}.miSoundDonut{width:92px;height:92px;flex:0 0 92px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle closest-side,var(--panel) 70%,transparent 72%),conic-gradient(#2f9e79 0 var(--direct-pct),#f0a828 var(--direct-pct) var(--audible-pct),#626b7a var(--audible-pct));box-shadow:0 0 0 1px var(--line)}.miSoundDonut b{font:800 20px var(--mono)}.miSoundDonut span{font-size:9px}.miSoundLegend{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:9px;padding:12px 18px;border-bottom:1px solid var(--line)}.miSoundLegend span{display:flex;gap:7px;align-items:center;color:var(--txt-dim)}.miSoundLegend i{width:12px;height:12px;border-radius:3px;background:#626b7a}.miSoundLegend .direct i{background:#2f9e79}.miSoundLegend .indirect i{background:#f0a828}.miSoundLegend .block i{height:4px;background:#e0543a}.miSoundLegend .closed i{height:4px;background:#727b8d}.miSoundLegend .awake i{border-radius:50%;background:#e0543a;box-shadow:0 0 0 2px #fff}.miSoundStats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:14px 18px}.miSoundStats>div{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-left:4px solid #626b7a;border-radius:5px;background:var(--panel)}.miSoundStats b{font:800 20px var(--mono)}.miSoundStats span{color:var(--txt-dim)}.miSoundStats .direct{border-left-color:#2f9e79}.miSoundStats .indirect{border-left-color:#f0a828}.miSoundStats .block,.miSoundStats .awake{border-left-color:#e0543a}.miSoundNote{margin:0 18px 16px;padding:11px;border:1px solid var(--line);border-radius:5px;color:var(--txt-dim);line-height:1.5;background:var(--soft)} .miSoundReset{width:max-content;margin-top:6px;border-color:#2f9e79!important;color:#2f9e79!important} .miGraphCard{margin:10px;border:1px solid var(--line);border-radius:5px;background:var(--panel);overflow:hidden}.miGraphHead{display:flex;justify-content:space-between;padding:8px 10px;background:var(--soft);border-bottom:1px solid var(--line)}.miGraphHead span{color:var(--txt-dim);font-family:var(--mono)}.miGraphCard svg{display:block;width:100%;min-width:520px;height:300px;background:radial-gradient(circle at center,var(--soft),var(--panel))}.miGraphEdge{stroke:var(--line);stroke-width:1}.miGraphNode{cursor:pointer;outline:none}.miGraphNode circle{stroke:var(--panel);stroke-width:2;transition:r .15s,filter .15s}.miGraphNode text{font:8px var(--mono);text-anchor:middle;fill:var(--txt-dim);pointer-events:none}.miGraphNode.reachable circle{fill:#4078f2}.miGraphNode.start circle{fill:#2f9e79}.miGraphNode.secret circle{fill:#a626a4}.miGraphNode.unreachable circle{fill:#e0543a}.miGraphNode:hover circle,.miGraphNode:focus circle{r:12;filter:drop-shadow(0 0 5px #f0a828)}.miGraphCard small{display:block;padding:6px 10px;color:var(--txt-dim)} .miRouteBoard{display:flex;gap:24px;align-items:flex-start;min-height:190px;padding:14px;overflow:auto;background:linear-gradient(90deg,var(--panel),var(--soft),var(--panel))}.miRouteStage{position:relative;flex:1 0 150px;display:grid;gap:7px;align-content:start}.miRouteStage:not(:last-child):after{content:"→";position:absolute;right:-19px;top:42px;color:var(--amber);font:bold 20px var(--mono)}.miRouteStageTitle{padding:5px 7px;border-bottom:2px solid var(--line);font:700 10px var(--mono);text-transform:uppercase;color:var(--txt-dim)}.miRouteNode{display:grid;grid-template-columns:10px 1fr;gap:2px 7px;text-align:left;padding:7px;border:1px solid var(--line);border-radius:5px;background:var(--tile);color:var(--txt);cursor:pointer}.miRouteNode:hover{border-color:var(--amber);transform:translateY(-1px)}.miRouteNode i{grid-row:1/3;width:9px;height:9px;margin-top:2px;border-radius:50%;background:#4078f2}.miRouteNode span{font-size:10px;font-weight:650}.miRouteNode small{padding:0;font:9px var(--mono);color:var(--txt-dim)}.miRouteNode.start i{background:#2f9e79}.miRouteNode.key i{background:#f0a828}.miRouteNode.door i{background:#c18401}.miRouteNode.teleport i{background:#00a0a0}.miRouteNode.secret i{background:#a626a4}.miRouteNode.exit i{background:#e0543a}.miRouteStage.unreachable{opacity:.85}.miRouteStage.unreachable .miRouteNode{border-color:#e0543a}.miRouteEmpty{margin:auto;color:var(--txt-dim)} .miDiagSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}.miDiagCount{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--txt);cursor:pointer}.miDiagCount b{font:800 22px var(--mono)}.miDiagCount.error b{color:#e0543a}.miDiagCount.warn b{color:#c18401}.miDiagCount.info b{color:#4078f2}.miDiagTableWrap{margin:0 10px 12px;overflow:auto;border:1px solid var(--line)}.miDiagTable{width:100%;border-collapse:collapse;font-size:10.5px}.miDiagTable th,.miDiagTable td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line)}.miDiagTable th{background:var(--soft);white-space:nowrap}.miDiagTable tr:last-child td{border-bottom:0}.miDiagTable tr.error .miSev{color:#e0543a}.miDiagTable tr.warn .miSev{color:#c18401}.miDiagTable tr.info .miSev{color:#4078f2}.miLocate{padding:3px 7px!important;font-size:10px!important} .miRouteNode.active{border-color:var(--amber);background:var(--sel-bg);box-shadow:0 0 0 2px rgba(240,168,40,.25),0 5px 16px rgba(0,0,0,.18)}.miRouteNode.active i{box-shadow:0 0 0 4px rgba(240,168,40,.24)} #miProgression{position:relative}.miRouteLegend{position:absolute;right:18px;top:38px;display:grid;grid-template-columns:repeat(2,minmax(105px,auto));gap:7px 18px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:var(--soft);font-size:10px;color:var(--txt-dim)}.miRouteLegend span{display:flex;align-items:center;gap:7px;white-space:nowrap}.miRouteLegend i{width:10px;height:10px;border-radius:50%;background:#4078f2}.miRouteLegend .start i{background:#2f9e79}.miRouteLegend .key i{background:#f0a828}.miRouteLegend .door i{background:#c18401}.miRouteLegend .teleport i{background:#00a0a0}.miRouteLegend .secret i{background:#a626a4}.miRouteLegend .exit i{background:#e0543a}.miRouteLegend .unreachable i{background:transparent;border:2px solid #e0543a}@media(max-width:1200px){.miRouteLegend{position:static;margin:8px 10px;grid-template-columns:repeat(3,minmax(100px,1fr))}} #miRes .it.on{background:var(--sel-bg);color:var(--amber);font-weight:600} /* Column header for the resource tables: same grid, not clickable. */ #miRes .it.hd{position:sticky;top:0;z-index:1;padding-bottom:2px;margin-bottom:2px;border-bottom:1px solid var(--line);background:var(--panel);color:var(--txt-dim);font-size:10px;text-transform:uppercase;letter-spacing:.6px;cursor:default} #miRes .it.hd:hover{background:var(--panel)} /* ---------- 3D map explorer ---------- */ #map3DModal{position:fixed;inset:0;z-index:260;background:rgba(4,6,9,.86);display:flex;padding:14px} #map3DModal[hidden]{display:none} #map3DModal .card{width:100%;height:100%;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden} #map3DModal .edbar{min-height:48px;padding:7px 10px;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)} #m3Name{font-family:var(--mono);font-size:12px;margin:0 8px 0 4px;line-height:1.3} .m3hint{font-family:var(--mono);font-size:10px;color:var(--txt-faint)} #m3Stage{position:relative;flex:1;min-height:0;background:#151922;overflow:hidden} #m3Canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair} #m3Map{position:absolute;right:16px;bottom:16px;width:220px;height:160px;border:1px solid rgba(255,255,255,.28);background:rgba(8,12,18,.78);pointer-events:none} #m3HelpOverlay,#m3KeyOverlay,#m3Lock{position:absolute;left:50%;transform:translateX(-50%);padding:7px 12px;border-radius:5px;background:rgba(0,0,0,.68);color:#fff;font:11px var(--mono);pointer-events:none;white-space:nowrap} /* the shortcut list sits under the movement help and is quieter: it is a reference, not an instruction */ #m3KeyOverlay{bottom:16px;color:rgba(255,255,255,.72);font-size:10px} #m3HelpOverlay{bottom:44px} #m3Lock{bottom:80px} #m3Stage.locked #m3Lock{display:none} #m3UnsafePosition{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:5;padding:10px 18px;border:2px solid #ff5548;border-radius:7px;background:rgba(55,4,2,.9);box-shadow:0 0 0 4px rgba(255,70,50,.18),0 0 24px rgba(255,60,40,.55);color:#fff;font:700 15px var(--mono);letter-spacing:.04em;text-transform:uppercase;pointer-events:none;animation:m3UnsafePulse 1s ease-in-out infinite alternate} #m3UnsafePosition[hidden]{display:none} @keyframes m3UnsafePulse{to{box-shadow:0 0 0 7px rgba(255,70,50,.1),0 0 34px rgba(255,60,40,.8)}} #m3ActionMessage{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);z-index:5;min-width:220px;max-width:min(620px,80vw);padding:10px 18px;border:2px solid #65ff79;border-radius:7px;background:rgba(5,67,22,.94);box-shadow:0 0 0 4px rgba(66,255,91,.18),0 0 24px rgba(34,255,75,.52);color:#fff;font:700 14px var(--mono);letter-spacing:.035em;text-align:center;text-transform:uppercase;pointer-events:none;animation:m3ActionIn .16s ease-out} #m3ActionMessage.is-error{border-color:#ff5a4f;background:rgba(83,9,9,.94);box-shadow:0 0 0 4px rgba(255,64,52,.17),0 0 24px rgba(255,45,35,.5)} #m3InteractionConfirm{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(3,6,11,.76);backdrop-filter:blur(3px)} #m3InteractionConfirm[hidden]{display:none} #m3InteractionConfirm .box{width:min(480px,calc(100vw - 48px));padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 22px 70px rgba(0,0,0,.55)} #m3InteractionConfirm strong{display:block;margin-bottom:10px;font-size:17px} #m3InteractionConfirm p{margin:0;color:var(--muted);line-height:1.55} #m3InteractionConfirm .actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px} #m3ActionMessage[hidden]{display:none} @keyframes m3ActionIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}} #m3Lock{bottom:122px} /* Building a large map blocks for a while; the overlay covers the whole modal so nothing half-drawn shows through, and swallows clicks meanwhile. */ /* Two rows: the title and the actions that leave the viewer on top, with the close button pinned to the corner, and every display option below. The help text is not repeated here — it already sits over the canvas. */ #map3DModal .m3bar{gap:8px} #map3DModal .m3bar .spacer{flex:1 1 auto} #map3DModal .m3bar2{min-height:40px;flex-wrap:nowrap;gap:4px 14px;padding:4px 10px;border-top:0;overflow-x:auto;overflow-y:hidden} #map3DModal .m3bar-display{border-bottom:1px solid var(--line-soft)} #map3DModal .m3bar-settings{border-bottom:1px solid var(--line)} #map3DModal .m3bar2>.grp{flex:0 0 auto} #map3DModal .m3bar2>.sep:first-child{display:none} #map3DModal .m3bar2 .sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--line)} #map3DModal .m3bar2 .grp{gap:5px} #m3Loading,#cmLoading{position:fixed;inset:0;z-index:240;display:flex;align-items:center;justify-content:center; background:rgba(6,9,14,.86);backdrop-filter:blur(2px)} #m3Loading .box,#cmLoading .box{display:flex;flex-direction:column;gap:10px;min-width:min(420px,72vw); padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:var(--panel); color:var(--txt);font-size:12.5px;box-shadow:0 18px 48px rgba(0,0,0,.5)} #cmLoading .box{min-width:min(420px,72vw)} #m3Loading .bar,#cmLoading .bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden} #m3Loading .bar i,#cmLoading .bar i{display:block;height:100%;width:0;background:var(--amber); transition:width .18s ease-out} #m3Loading .step,#cmLoading .step{font:11px var(--mono);color:var(--txt-dim);min-height:14px} /* ---------- relation graph ---------- */ #relModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:210; display:flex;align-items:center;justify-content:center;padding:18px; } #relModal[hidden]{display:none} #relModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;width:96vw;height:94vh; display:flex;flex-direction:column;gap:8px; } #relKinds{display:flex;gap:5px;flex-wrap:wrap;padding-top:6px} #relKinds .chip{padding:3px 9px;font-size:11.5px} /* Half and half by default, and the bar between them moves it. */ #relMain{flex:1 1 auto;min-height:0;display:flex} #relMain > #relLeft{flex:1 1 auto;min-width:300px} #relMain > #relSide{flex:0 0 var(--rel-side-w,50%);min-width:300px;max-width:none} #relMain > .splitter{flex:0 0 10px} #relLeft{ flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;min-height:0; } /* the trail back to where the tree was rooted before */ #relPath{ display:flex;flex-wrap:wrap;align-items:center;gap:2px;flex:0 0 auto; font-family:var(--mono);font-size:11px; } #relPath .crumb{ border:0;background:none;font:inherit;color:var(--txt-dim);cursor:pointer; padding:3px 7px;border-radius:4px;max-width:220px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; } #relPath .crumb:hover{background:var(--panel-2);color:var(--txt)} #relPath .crumb.on{color:var(--amber);font-weight:600} #relPath .crumb + .crumb::before{content:"›";margin-right:7px;color:var(--txt-faint)} #relTree{ flex:1 1 auto;min-width:0;min-height:0;overflow:auto;background:var(--bg-2); border:1px solid var(--line-soft);border-radius:6px;padding:4px; } .reltrow.grp{text-transform:none;color:var(--txt)} .reltrow.grp .lb{font-weight:600} .reltrow.cyc{opacity:.65;font-style:italic} .reltrow.start .tw{display:none} .reltrow.more{ color:var(--txt-faint);font-family:var(--mono);font-size:11px;cursor:pointer; padding:4px 8px;border-radius:5px; } .reltrow.more:hover{background:var(--panel-2);color:var(--txt)} .reltrow .adot{width:7px;height:7px;border-radius:2px;flex:0 0 auto;margin-left:auto} .reltrow .adot + .mt{margin-left:8px} .reltrow .mt b.bad{color:var(--red);font-weight:600} .reltrow .mt b.warnb{color:var(--amber);font-weight:600} .reltrow{ display:flex;align-items:center;gap:7px;padding:4px 8px;border-radius:5px;cursor:pointer; font-family:var(--mono);font-size:12px;color:var(--txt-dim);white-space:nowrap; } .reltrow:hover{background:var(--panel-2);color:var(--txt)} .reltrow.on{background:var(--sel-bg);color:var(--amber);font-weight:600} .reltrow .tw{width:12px;flex:0 0 auto;color:var(--txt-faint);text-align:center} .reltrow .ic{flex:0 0 auto} .reltrow .lb{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis} .reltrow .mt{margin-left:auto;padding-left:14px;font-size:10px;color:var(--txt-faint)} #relSide{ flex:0 0 280px;display:flex;flex-direction:column;min-height:0; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);overflow:hidden; } #relSide .search{margin:6px} #relSide .search input{width:100%} #relInfo,#relAudit,#relResults{font-size:12px} .relhead{padding:8px;border-bottom:1px solid var(--line-soft);font-size:13px} .relhead .ty{font-family:var(--mono);font-size:10px;color:var(--txt-faint);margin-left:6px} .relhead .p{font-family:var(--mono);font-size:10px;color:var(--txt-faint);word-break:break-all;margin-top:4px} .relgrp{ padding:6px 8px 3px;font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--txt-faint);position:sticky;top:0;background:var(--bg-2); } #relProgress{flex:0 0 3px;background:var(--line-soft);border-radius:2px;overflow:hidden} #relProgress[hidden]{display:none} #relProgress i{display:block;height:100%;width:0;background:var(--amber);transition:width .2s} #relSide .it .ty{font-family:var(--mono);font-size:9.5px;color:var(--txt-faint);margin-left:6px} /* Name, count and detail each in their own column, so the eye can run down any one of them instead of reading three values glued together. */ #relSide .it.cols{ display:grid;grid-template-columns:minmax(0,1.1fr) 4.5em minmax(0,1.4fr); gap:8px;align-items:baseline; } #relSide .it.cols .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #relSide .it.cols .ct{ font-family:var(--mono);font-size:10px;color:var(--txt-dim);text-align:right; } #relSide .it.cols .ty{ margin-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* ---------- code editor ---------- */ .edlang{ font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:3px 7px;border-radius:4px; background:var(--sel-bg);color:var(--amber);border:1px solid var(--amber-dim); } #edMain{flex:1 1 auto;min-height:0;display:flex;gap:0} #edSplitL,#edSplitR{ flex:0 0 8px;margin:0 2px;cursor:col-resize;border-radius:4px; background:var(--line-soft);align-self:stretch;transition:background .12s; } #edSplitL:hover,#edSplitR:hover,#edSplitL.drag,#edSplitR.drag{background:var(--amber)} #edSplitL[hidden],#edSplitR[hidden]{display:none} .edbar1{padding-bottom:2px} .edbar2{border-top:1px solid var(--line-soft);padding-top:8px} #edAudio audio{width:100%;height:32px} #edLink .btn{width:100%;justify-content:center;margin-top:4px} #edLink .p{font-family:var(--mono);font-size:10px;color:var(--txt-faint);word-break:break-all} .edzoom{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-dim)} .edzoom input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--amber)} .edzoom #edPvZoomVal{font-family:var(--mono);font-size:10px;width:26px;text-align:right} #edPre.plain span{color:inherit!important;font-style:normal;font-weight:400} #edSide{ flex:0 0 240px;min-width:0;display:flex;flex-direction:column; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);overflow:hidden; } #edSide[hidden],#edAside[hidden]{display:none} .edtabs{display:flex;border-bottom:1px solid var(--line-soft)} .edtabs button{ flex:1 1 auto;background:none;border:0;padding:7px 6px;cursor:pointer;color:var(--txt-dim); font-size:11.5px;border-bottom:2px solid transparent; } .edtabs button.on{color:var(--amber);border-bottom-color:var(--amber);font-weight:600} #audTabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible} #audTabs button{min-width:0} .audAnalysisTableWrap{margin:0 10px 12px;border:1px solid var(--line);overflow:auto;background:var(--panel)} .audAnalysisTable{width:100%;border-collapse:collapse;font-size:var(--aud-fs,12px);font-family:ui-monospace,monospace} .audAnalysisTable th{position:sticky;top:0;z-index:1;padding:7px 9px;text-align:right;white-space:nowrap;background:var(--soft);color:var(--txt-dim);border-bottom:1px solid var(--line);font-weight:600} .audAnalysisTable th:first-child,.audAnalysisTable td:first-child{text-align:left} .audAnalysisTable td{padding:6px 9px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)} .audAnalysisTable tbody tr{cursor:pointer} .audAnalysisTable tbody tr:hover,.audAnalysisTable tbody tr:focus{background:var(--sel);outline:0} .audAnalysisTable tbody tr:last-child td{border-bottom:0} .audMapName{font-weight:650} .audScoreCell{display:grid;grid-template-columns:minmax(90px,1fr) 42px;gap:8px;align-items:center;min-width:165px} .audScoreCell>i{display:block;height:9px;background:var(--line);border-radius:5px;overflow:hidden} .audScoreCell>i>b{display:block;height:100%;border-radius:5px} .audScoreCell>em{font-style:normal;text-align:right} #miTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:0 0 auto} #miTabs button{width:100%;min-width:0;padding:7px 5px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .edpane{flex:1 1 auto;overflow:auto;padding:4px} .edpane[hidden]{display:none} .edpane .it{ padding:3px 7px;border-radius:4px;cursor:pointer;font-family:var(--mono);font-size:11px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt-dim); } .edpane .it:hover{background:var(--panel-2);color:var(--txt)} .edpane .it.actor{color:var(--txt);font-weight:700;margin-top:4px} .edpane .it.state{padding-left:18px} .edpane .it.err{color:var(--red)} .edpane .it.warn{color:var(--amber)} .edpane .ln{opacity:.5;margin-right:6px} #edArea{flex:1 1 auto;min-width:0;display:flex;position:relative; border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff} #edGutter{ flex:0 0 58px;overflow:hidden;position:relative;background:rgba(128,128,128,.08); border-right:1px solid var(--line-soft); } #edGutter div{ position:absolute;left:0;right:8px;text-align:right;font-family:var(--mono); color:#8b93a3;opacity:.75; } #edCanvas{flex:1 1 auto;min-width:0;position:relative;overflow:hidden} #edPre,#edText{ margin:0;border:0;outline:none;font-family:var(--mono);tab-size:4; padding:0 12px;white-space:pre;overflow-wrap:normal;word-break:normal; } #edPre{ position:absolute;top:0;left:0;right:0;pointer-events:none; will-change:transform; } #edText{ position:absolute;inset:0;width:100%;height:100%;resize:none; background:transparent;color:transparent;caret-color:#111;overflow:auto; } #edText::selection{background:rgba(90,150,255,.35);color:transparent} #edCurLine{position:absolute;left:0;right:0;height:0;background:rgba(240,168,40,.10);pointer-events:none} #edPre .c{color:#7a8291;font-style:italic} #edPre .s{color:#0f7b4f} #edPre .n{color:#b5651d} #edPre .k{color:#a626a4;font-weight:600} #edPre .fl{color:#0b7285;font-weight:600} #edPre .lb{color:#c18401;font-weight:700} #edPre .fn{color:#4078f2} #edPre .sp{color:#a11;font-weight:700} #edPre .fr{color:#d19a66;font-weight:700} #edPre .ti{color:#0184bc} #edPre .pr{color:#383a42;font-weight:600} #edPre .er{text-decoration:wavy underline #e0543a} #edAuto{ position:absolute;z-index:20;background:var(--panel);border:1px solid var(--line); border-radius:6px;box-shadow:var(--shadow);max-height:220px;overflow:auto;min-width:220px; } #edAuto[hidden]{display:none} #edAuto .ac{ padding:5px 9px;cursor:pointer;font-family:var(--mono);font-size:12px;display:flex;gap:8px; } #edAuto .ac .t{margin-left:auto;font-size:10px;color:var(--txt-faint)} #edAuto .ac.on{background:var(--sel-bg);color:var(--amber)} #edAside{ flex:0 0 210px;display:flex;flex-direction:column;gap:8px; border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);padding:8px;overflow:auto; } #edSpriteBox{ flex:0 0 auto;height:190px;overflow:auto;display:flex;align-items:center;justify-content:center;background:#fff; border:1px solid var(--line-soft);border-radius:5px;overflow:hidden; } #edSpriteBox img{max-width:100%;max-height:100%;image-rendering:pixelated} #edSpriteInfo,#edDoc{font-family:var(--mono);font-size:10.5px;color:var(--txt-dim);line-height:1.5} #edDoc b{color:var(--txt)} #edStatus{ flex:0 0 auto;display:flex;gap:16px;align-items:center;font-family:var(--mono); font-size:10.5px;color:var(--txt-dim);padding-top:2px; } /* The model toolbar is two rows: identity plus the controls that frame the model on top, how it is drawn underneath. The close button is taken out of the flow and pinned to the corner of the bar, so it stays top-right however much the rows wrap; the first row reserves room for it. */ .mdbar{flex-direction:column;align-items:stretch;gap:7px;flex-wrap:nowrap;position:relative} .mdbar .mdbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .mdbar .mdbar-head{padding-right:34px} .mdbar .mdbar-head > strong,.mdbar .mdbar-head > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mdbar #mdClose{position:absolute;top:0;right:0;z-index:2} #modelBox{ flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center; position:relative;background:var(--thumb-bg,var(--bg));border:1px solid var(--line-soft);border-radius:6px;overflow:hidden; } #modelBox canvas{touch-action:none;max-width:100%;max-height:100%} #modelBox .model-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;height:100%;flex:1 1 auto;overflow:hidden} #modelBox .model-main{position:relative;z-index:2;cursor:grab} #modelBox .model-main:active{cursor:grabbing} #modelBox .model-guides{position:absolute;inset:0;z-index:1;pointer-events:none} #modelBox .model-axes{position:absolute;inset:0;z-index:3;pointer-events:none} #modelBox .model-view-column{display:none;flex:0 0 172px;align-self:stretch;border-color:var(--line-soft);background:transparent;z-index:3} #modelBox.fixed-views .model-view-column{display:grid;grid-template-rows:1fr 1fr} #modelBox .model-splitter{display:none;flex:0 0 7px;align-self:stretch;z-index:4;cursor:col-resize;touch-action:none;position:relative;background:transparent} #modelBox.fixed-views .model-splitter{display:block} #modelBox .model-splitter::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:34px;border-radius:2px;background:var(--line-soft)} #modelBox .model-splitter:hover::before,#modelBox .model-splitter.dragging::before{background:var(--amber);height:56px} #modelBox .model-view-column.left{border-right:1px solid var(--line-soft)} #modelBox .model-view-column.right{border-left:1px solid var(--line-soft)} #modelBox .model-fixed-view{position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:transparent} #modelBox .model-fixed-view+ .model-fixed-view{border-top:1px solid var(--line-soft)} #modelBox .model-fixed-view canvas{width:100%;height:100%;cursor:default} #modelBox .model-fixed-label{position:absolute;left:7px;top:7px;z-index:2;padding:2px 6px;border-radius:3px;background:var(--txt);color:var(--bg);font:700 9px var(--mono);letter-spacing:.06em} #mdPlayback{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-2);font-size:11px} #mdPlayback[hidden]{display:none} #mdPlayback #mdAnim{min-width:150px;max-width:240px} #mdPlayback #mdFrame{flex:1 1 220px;min-width:120px} #mdPlayback #mdFrameLabel{min-width:72px;text-align:center;font-family:var(--mono);color:var(--txt-dim)} #mdPlayback label{display:flex;align-items:center;gap:5px;white-space:nowrap} /* ---------- startup splash / fake loading ---------- */ html.startup-lock,html.startup-lock body{ width:100%;height:100%;overflow:hidden!important;overscroll-behavior:none;touch-action:none; } .startup-overlay{ position:fixed;inset:0;width:100vw;height:100vh;min-width:100vw;min-height:100vh; z-index:2147483647;display:grid;place-items:center;overflow:hidden;overscroll-behavior:none;touch-action:none; background:var(--bg);color:var(--txt); padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); opacity:1;transition:opacity .12s linear; -webkit-user-select:none;user-select:none;-webkit-touch-callout:none; } @supports(height:100dvh){.startup-overlay{height:100dvh;min-height:100dvh}} .startup-overlay.startup-done{opacity:0;pointer-events:none} .startup-inner{ width:min(430px,calc(100vw - 48px));display:flex;flex-direction:column;align-items:center;text-align:center; transform:translateY(-2vh); } .startup-mark{ width:92px;height:92px;border-radius:50%;display:grid;place-items:center;margin:0 0 18px; background:var(--brand);color:#000;font-family:var(--sans);font-size:27px;font-weight:900;letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.13); } .startup-hakros{ color:var(--brand);font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.38em; padding-left:.38em;text-transform:uppercase; } .startup-title{ margin-top:10px;color:var(--txt);font-family:var(--sans);font-size:clamp(19px,2.2vw,30px); font-weight:850;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap; } .startup-track{ width:min(320px,78vw);height:6px;margin-top:28px;border:1px solid var(--line);border-radius:999px; background:var(--bg-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.08); } .startup-bar{ width:0;height:100%;background:var(--brand);border-radius:inherit;will-change:width; } @media(max-width:520px){ .startup-inner{width:calc(100vw - 36px)} .startup-mark{width:78px;height:78px;font-size:23px;margin-bottom:16px} .startup-title{font-size:clamp(15px,5vw,21px);letter-spacing:.055em} .startup-track{width:min(280px,78vw);margin-top:24px} } /* ---------- minimum-width gate ---------- */ .gate{ position:fixed;inset:0;width:auto;height:auto;min-width:100vw;min-height:100vh;min-height:100dvh; z-index:2147483646;display:grid;place-items:center;overflow:hidden;overscroll-behavior:none;touch-action:none; background:var(--bg);padding:max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));text-align:center; } .gate[hidden]{display:none} .gate-inner{max-width:420px} .gate .mark{ width:96px;height:96px;border-radius:50%;background:var(--brand); display:flex;align-items:center;justify-content:center;margin:0 auto 20px; font-family:var(--sans);font-weight:800;font-size:32px;letter-spacing:.04em;color:#000; } .gate .n2{font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--brand)} .gate .n1{font-family:var(--sans);font-weight:800;font-size:26px;letter-spacing:.12em;text-transform:uppercase;margin-top:7px} .gate p{margin:22px 0 0;font-size:13px;line-height:1.65;color:var(--txt-dim)} /* Keep the resolution gate independent from JavaScript initialization. The JS handler still covers dynamic resizing, while this guarantees that narrow/mobile viewports cannot leave the gate hidden after an early error. */ @media (max-width:1399.98px){ html,body{overflow:hidden;overscroll-behavior:none} .gate[hidden]{display:grid!important} } /* ---------- toast ---------- */ #toast{ position:fixed;bottom:44px;left:50%;transform:translateX(-50%) translateY(20px); background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber); padding:10px 16px;border-radius:6px;box-shadow:var(--shadow);font-size:13px; opacity:0;pointer-events:none;transition:.18s;z-index:100;max-width:80vw; } #toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- thumbnail background ---------- */ .tile .thumb,#preview{background-color:var(--thumb-bg,var(--bg))} body.nochecker .tile .thumb,body.nochecker #preview{background-image:none} /* ---------- popup menus / advanced filters ---------- */ .menu{ position:absolute;z-index:60;background:var(--panel);border:1px solid var(--line); border-radius:7px;box-shadow:var(--shadow);padding:6px;min-width:190px; } .menu[hidden]{display:none} .menu button{ display:flex;align-items:center;gap:9px;width:100%;background:none;border:0; padding:8px 9px;border-radius:5px;cursor:pointer;text-align:left; } .menu button:hover{background:var(--panel-2)} .menu .sw{width:15px;height:15px;border-radius:4px;border:1px solid var(--line);flex:0 0 auto} .menu .row{display:flex;align-items:center;gap:9px;padding:8px 9px} .menu hr{border:0;border-top:1px solid var(--line-soft);margin:5px 2px} #advPanel{ flex:0 0 auto;display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start; padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line); } #advPanel[hidden]{display:none} .advcol{display:flex;flex-direction:column;gap:7px;min-width:190px} .advcol h4{ margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--txt-faint);font-weight:600; } .advcol input[type=text],.advcol input[type=number]{ background:var(--bg-2);border:1px solid var(--line);border-radius:5px;padding:6px 9px; font-family:var(--mono);font-size:12px; } .advcol .note{font-size:11px;color:var(--txt-faint);line-height:1.45} .sizerow{display:flex;align-items:center;gap:6px} .sizerow input{width:88px} .affix{ display:flex;flex-wrap:wrap;gap:5px;max-height:104px;overflow:auto; padding:6px;background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px; min-width:280px;max-width:460px; } .aff{ border:1px solid var(--line);background:var(--panel-2);color:var(--txt-dim); border-radius:4px;padding:3px 7px;cursor:pointer;font-family:var(--mono);font-size:11px; display:inline-flex;gap:5px;align-items:center; } .aff:hover{border-color:var(--txt-faint)} .aff .c{opacity:.55;font-size:9.5px} .aff[data-st="1"]{border-color:var(--cyan);color:var(--cyan);background:rgba(79,214,210,.12)} .aff[data-st="2"]{border-color:var(--red);color:var(--red);background:rgba(224,84,58,.12);text-decoration:line-through} .aff .empty{color:var(--txt-faint)} #previewActions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;padding-right:2px} #previewActions:empty{display:none} #previewActions .btn{ flex:1 1 130px;min-width:0;justify-content:center;text-align:center; white-space:normal;line-height:1.25; } /* ---------- lightboxes (map + image) ---------- */ #imgModal,#mapModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:210; display:flex;align-items:center;justify-content:center;padding:18px; } #mapModal{z-index:220} #imgModal[hidden],#mapModal[hidden]{display:none} #imgModal .mapcard,#mapModal .mapcard{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:12px;max-width:96vw;max-height:94vh; display:flex;flex-direction:column;gap:10px; } #imgModal .maphead,#mapModal .maphead{ display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:13px; } #imgBig,#mapBig{ overflow:auto;background:var(--thumb-bg,var(--bg));border:1px solid var(--line-soft);border-radius:6px; display:flex;align-items:center;justify-content:center;padding:8px; } #mapBig canvas{display:block;max-width:100%} #imgModal .mapcard{width:96vw;height:94vh} #imgBig{align-items:center;justify-content:center;flex:1 1 auto;min-height:0} #imgBig img{display:block;image-rendering:pixelated;height:auto} #imgModal .maphead input[type=range]{accent-color:var(--amber)} /* ---------- modal ---------- */ #modal{ position:fixed;inset:0;background:rgba(4,6,9,.62);display:flex;align-items:center;justify-content:center; z-index:200;padding:20px; } #modal[hidden]{display:none} #modal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:22px 24px;max-width:440px;width:100%; } #modal h3{margin:0 0 8px;font-size:16px} #modal p{margin:0 0 18px;color:var(--txt-dim);font-size:13px;line-height:1.55} #modal .acts{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap} @media (max-width:900px){ main{flex-direction:column} #side{flex:0 0 46%;width:auto;max-width:none;border-left:0;border-top:1px solid var(--line)} .search input{width:130px} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* Persistent audio player: independent from the asset preview panel. */ #audioDock{position:fixed;left:18px;right:18px;bottom:18px;max-width:620px;margin:auto;z-index:500;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px 12px;display:flex;flex-direction:column;gap:7px} #audioDock[hidden]{display:none} #audioDock .audioHead{display:flex;align-items:center;gap:8px;min-width:0} #audioDock .audioTitle{font-family:var(--mono);font-size:11px;color:var(--txt-faint);letter-spacing:.06em;text-transform:uppercase} #audioDock .audioName{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #audioDock .audioBody{min-height:34px} #audioDock audio{width:100%;height:34px} #audioDock .audioBody>div{width:100%!important;box-sizing:border-box} @media(max-width:700px){#audioDock{left:8px;right:8px;bottom:8px}} /* ---------- panel splitters ---------- */ /* The two side panels start at their minimum width, so the handle only ever grows them; the grid keeps whatever is left. */ .splitter{ flex:0 0 6px;cursor:col-resize;background:transparent;position:relative;z-index:5; touch-action:none;align-self:stretch; } .splitter[hidden]{display:none} .splitter::before{ content:"";position:absolute;top:0;bottom:0;left:2px;width:2px;background:transparent; transition:background .12s; } .splitter:hover::before,.splitter.on::before{background:var(--amber)} body.colresize{cursor:col-resize;user-select:none} /* ---------- side-by-side map comparison ---------- */ /* Both halves are the same size on purpose: at a shared scale, the map that fills less of its half is genuinely the smaller one. */ #cmMain{flex:1 1 auto;min-height:0;display:flex;gap:8px} #cmView{ flex:1 1 auto;min-width:0;min-height:0;position:relative;touch-action:none;cursor:grab; background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;overflow:hidden; } #cmView:active{cursor:grabbing} #cmSide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft)} #cmOverWrap{position:absolute;inset:0} #cmOverWrap[hidden],#cmSide[hidden]{display:none} .cmPane{position:relative;min-width:0;min-height:0;background:var(--bg-2);overflow:hidden} .cmPane canvas{display:block;width:100%;height:100%} #cmStats{ flex:0 0 var(--cm-stats-w,420px);min-width:320px;overflow:auto;font-size:11.5px; background:var(--bg-2);border:1px solid var(--line-soft);border-radius:6px;padding:4px 2px; } .cmgrp{ font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--txt-faint);padding:12px 10px 4px; } .cmrow{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr) 4.2em; gap:8px;align-items:center;padding:3px 10px;border-radius:4px; } .cmrow:hover{background:var(--panel-2)} .cmrow.head{border-bottom:1px solid var(--line-soft);padding-bottom:6px;margin-bottom:2px} .cmrow .k{color:var(--txt-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmrow .v{ font-family:var(--mono);font-size:11px;color:var(--txt);position:relative; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .cmrow .d{font-family:var(--mono);font-size:10px;color:var(--txt-faint);text-align:right} .cmrow .d.up{color:#2f9e79} .cmrow .d.down{color:#e0543a} /* a hairline under each number, so the eye catches the ratio before the digits */ .cmbar{display:block;height:2px;margin-top:2px;background:var(--line-soft);border-radius:2px} .cmbar i{display:block;height:100%;background:#e0543a;border-radius:2px} .cmbar i.b{background:#2f9e79} /* ---------- engine mismatch prompt ---------- */ #mixModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:260; display:flex;align-items:center;justify-content:center;padding:16px; } #mixModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:18px 20px;max-width:520px; display:flex;flex-direction:column;gap:12px; } #mixModal strong{font-size:14px} #mixModal p{margin:0;font-size:12.5px;line-height:1.55;color:var(--txt-dim)} #mixModal .row{display:flex;gap:8px;justify-content:flex-end} .cmnote{ margin:6px 10px 2px;padding:6px 8px;border-radius:5px;font-size:11px;line-height:1.45; background:var(--panel-2);border:1px solid var(--line-soft);color:var(--txt-dim); } /* ---------- Quake export dialog ---------- */ #qkModal{ position:fixed;inset:0;background:rgba(4,6,9,.78);z-index:262; display:flex;align-items:center;justify-content:center;padding:16px; } #qkModal .card{ background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:var(--shadow);padding:18px 20px;width:min(460px,94vw); display:flex;flex-direction:column;gap:12px; } #qkModal strong{font-size:14px} #qkModal .qkpresets{display:grid;grid-template-columns:1fr 1fr;gap:8px} #qkModal .qkpreset{min-width:0;padding:10px;text-align:left;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--txt);cursor:pointer} #qkModal .qkpreset:hover{border-color:var(--amber-dim)} #qkModal .qkpreset.on{border-color:var(--amber);background:var(--sel-bg);box-shadow:inset 0 0 0 1px var(--amber)} #qkModal .qkpreset b,#qkModal .qkpreset span{display:block} #qkModal .qkpreset b{font-size:12px} #qkModal .qkpreset span{margin-top:4px;color:var(--txt-dim);font-size:10.5px;line-height:1.35} #qkModal .qkpresetnote{margin:0;padding:8px 10px;border-left:3px solid var(--amber);border-radius:4px;background:var(--panel-2);color:var(--txt-dim);font-size:11.5px;line-height:1.45} #qkModal .qkrow{display:flex;align-items:center;gap:10px} #qkModal .qkrow > label{ flex:0 0 110px;font-family:var(--mono);font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--txt-faint); } #qkModal .qkchk{display:flex;align-items:center;gap:8px;font-size:12.5px} #qkModal #qkBatchSeparateRow[hidden]{display:none} /* A heading for the group of options below it: the same weight as a label but set apart, with a rule so the three checkboxes read as one thing. */ #qkModal .qkgrp{margin:12px 0 2px;padding-top:9px;border-top:1px solid var(--line,#d8dbe0); font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.72} #qkModal .qkgrp+.qkchk{margin-top:4px} #qkModal .qknote{margin:0;font-size:11.5px;line-height:1.5;color:var(--txt-dim)} #qkModal .qknote.warn{color:var(--amber)} #qkModal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:4px} /* Keep the source archives immutable while a batch reads from them. */ #qkBatchProgress{position:fixed;inset:0;z-index:350;display:grid;place-items:center;padding:20px;background:rgba(4,6,9,.78);backdrop-filter:blur(3px)} #qkBatchProgress[hidden]{display:none} .qkBatchProgressCard{width:min(520px,calc(100vw - 40px));padding:20px 22px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:9px;background:var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.58)} .qkBatchProgressHead,.qkBatchProgressFoot{display:flex;align-items:center;gap:10px}.qkBatchProgressHead strong{flex:1;font-size:12.5px}.qkBatchProgressHead span{font:10.5px var(--mono);color:var(--txt-dim)} .qkBatchProgressTrack{height:7px;margin:10px 0;border-radius:10px;background:var(--soft);overflow:hidden}.qkBatchProgressTrack i{display:block;width:0;height:100%;border-radius:inherit;background:var(--amber);transition:width .12s linear} .qkBatchProgressFoot span{min-width:0;flex:1;overflow:hidden;color:var(--txt-dim);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.qkBatchProgressFoot .btn{flex:0 0 auto;padding:4px 9px} /* ---------- integrated Quake MAP 3D viewer ---------- */ #quakeViewerModal{position:fixed;inset:0;z-index:260;background:rgba(0,0,0,.72);padding:18px} #quakeViewerModal[hidden]{display:none!important} .quake-viewer-shell{width:100%;height:100%;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:0 24px 90px rgba(0,0,0,.65)} .quake-viewer-head{height:46px;flex:0 0 46px;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;background:var(--panel);border-bottom:1px solid var(--line)} .quake-viewer-head strong{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #quakeViewerHost{display:block;position:relative;flex:1 1 auto;min-width:0;min-height:0;width:100%;height:auto;margin:0;padding:0;border:0;background:var(--bg);overflow:hidden} @media(max-width:1100px){#quakeViewerModal{padding:8px}.quake-viewer-head{height:42px;flex-basis:42px}} .miAutoFixWrap{padding:0 10px 10px}.miAutoFixWrap .btn{width:100%;justify-content:center;min-height:38px}.miAutoFixNote{display:block;margin-top:6px;color:var(--txt-dim);font-size:10px;text-align:center} .miAutoFixWrap{display:grid;gap:7px}.miAutoFixWrap .miSpecialActionsButton{background:var(--panel)!important;color:var(--amber)!important;border-color:var(--amber)!important} .miAnalysisLanding{display:grid;gap:8px;padding:14px}.miAnalysisLanding .btn{width:100%;min-height:38px;justify-content:center}.miAnalysisLanding .miSpecialActionsButton{border-color:var(--amber)!important;background:var(--panel)!important;color:var(--amber)!important} #miSpecialActionsModal{position:fixed;inset:0;z-index:287;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.84);backdrop-filter:blur(2px)}#miSpecialActionsModal[hidden]{display:none}#miSpecialActionsModal>.card{width:min(670px,94vw);max-height:88vh;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}.miSpecialIntro{margin:0 0 12px;color:var(--txt-dim);line-height:1.5}.miSpecialActionCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:9px;padding:14px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:6px;background:var(--soft)}.miSpecialActionCard.danger{border-left-color:#e0543a}.miSpecialActionCard>div:first-child{display:grid;gap:5px}.miSpecialActionCard span{color:var(--txt-dim);line-height:1.45}.miSpecialTexturePicker{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:9px}.miSpecialTexturePicker label{display:grid;gap:5px}.miSpecialTexturePicker input,.miSpecialTexturePicker select{width:100%;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--txt);font:11px var(--mono)}.miSpecialTexturePreview{grid-column:1/-1;display:grid;place-items:center;min-height:150px;padding:12px;border:1px solid var(--line);border-radius:5px;background:repeating-conic-gradient(var(--soft) 0 25%,var(--panel) 0 50%) 50%/18px 18px;overflow:auto}.miSpecialTexturePreview canvas,.miSpecialTexturePreview img{max-width:100%;max-height:220px;image-rendering:pixelated;box-shadow:0 3px 14px rgba(0,0,0,.3)}.miSpecialTexturePreview>span{padding:5px 8px;border-radius:4px;background:var(--panel);color:var(--txt-dim)}.miSpecialActionCard>button{grid-column:2}@media(max-width:600px){.miSpecialActionCard,.miSpecialTexturePicker{grid-template-columns:1fr}.miSpecialActionCard>button{grid-column:1}} .miSpecialStickyHead{position:sticky;top:-16px;z-index:3;margin:-16px -16px 12px;padding:16px;border-bottom:1px solid var(--line);background:var(--panel)}.miSpecialFeedback{position:sticky;top:53px;z-index:2;margin:0 0 10px;padding:9px 12px;border:1px solid #74b99b;border-radius:5px;background:#e7f5ee;color:#187653;font-weight:700}.miSpecialSurfaceModule{display:grid;gap:10px;margin-top:12px;padding:14px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:6px;background:var(--soft)}.miSpecialSurfaceModule h3{margin:0;color:var(--txt);font-size:14px}.miSpecialSurfaceModule>p{margin:-4px 0 2px;color:var(--txt-dim);line-height:1.45}.miSpecialModuleActions{display:flex;justify-content:flex-end;gap:8px;padding-top:2px}.miSpecialModuleActions .btn{min-width:132px;justify-content:center}@media(max-width:600px){.miSpecialTexturePicker{grid-template-columns:1fr}.miSpecialModuleActions{display:grid}.miSpecialModuleActions .btn{width:100%}} #miAutoFixConfirmModal{position:fixed;inset:0;z-index:286;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.82);backdrop-filter:blur(2px)}#miAutoFixConfirmModal[hidden]{display:none}#miAutoFixConfirmModal>.card{width:min(510px,94vw);padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}#miAutoFixConfirmModal p{margin:4px 0 18px;color:var(--txt-dim);line-height:1.6}.miAutoFixConfirmActions{display:flex;justify-content:flex-end;gap:8px} #reloadAllConfirm{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:rgba(4,6,9,.78);backdrop-filter:blur(4px)}#reloadAllConfirm[hidden]{display:none}#reloadAllConfirm>.card{width:min(460px,calc(100vw - 40px));padding:22px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:0 24px 80px rgba(0,0,0,.58)}#reloadAllConfirm strong{display:block;font-size:17px;color:var(--txt);margin-bottom:10px}#reloadAllConfirm p{margin:0;color:var(--txt-dim);line-height:1.55}#reloadAllConfirm .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px} #licenseWelcomeModal{ position:fixed;inset:0;z-index:405;display:grid;place-items:center;padding:20px; background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(7px); } #licenseWelcomeModal[hidden]{display:none} .license-welcome-card{ width:min(902px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 72%,var(--txt-faint));border-radius:14px; background:var(--panel);box-shadow:0 28px 100px rgba(0,0,0,.55);text-align:left; display:flex;flex-direction:column; } .license-first-head{display:block;position:static;padding:27px 28px 20px;border-bottom:1px solid var(--line);background:var(--panel)} .license-first-brand{margin-bottom:12px;font-size:14px;font-weight:850;letter-spacing:.055em;text-transform:uppercase} .license-first-brand span{color:var(--brand)} .license-first-brand strong{color:var(--txt);font-weight:850} .license-first-kicker{margin-bottom:8px;color:var(--txt-dim);font:700 10px var(--mono);letter-spacing:.22em;text-transform:uppercase} .license-first-head h2{margin:0;color:var(--txt);font-size:25px;line-height:1.18;letter-spacing:-.02em} .license-first-head p{margin:10px 0 0;color:var(--txt-dim);font-size:13.5px;line-height:1.55} .license-first-language-row{display:grid;grid-template-columns:175px 1fr;align-items:center;gap:18px;padding:13px 28px;border-bottom:1px solid var(--line);background:var(--panel-2)} .license-first-language-row label{color:var(--txt);font-size:13px;font-weight:750} .license-first-language-row .ctl{width:100%;height:43px;padding:7px 12px;background:var(--panel);font-size:14px} .license-first-body{min-height:0;padding:26px 28px 24px;display:flex;flex-direction:column} .license-first-section-label{margin-bottom:8px;color:var(--txt-dim);font:500 10px var(--mono);letter-spacing:.17em;text-transform:uppercase} .license-first-body h3{margin:0 0 7px;color:var(--txt);font-size:17px;line-height:1.3} .license-first-intro{margin:0 0 14px;color:var(--txt-dim);font-size:12.5px;line-height:1.5} .license-first-scroll{ min-height:220px;max-height:min(350px,40vh);overflow:auto;padding:18px 20px; border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--txt); font-size:12.5px;line-height:1.72;scrollbar-gutter:stable; } .license-first-scroll p{margin:0 0 16px}.license-first-scroll p:last-child{margin-bottom:0} .license-first-actions{display:flex;align-items:center;gap:18px;margin-top:18px} .license-first-check{display:flex;align-items:flex-start;gap:11px;min-width:0;flex:1;color:var(--txt);font-size:12.5px;line-height:1.45;cursor:pointer} .license-first-check input{flex:0 0 auto;width:14px;height:14px;margin:2px 0 0;accent-color:var(--brand);cursor:pointer} .license-first-actions .btn{min-width:172px;justify-content:center;padding:10px 15px} .license-first-actions .btn:disabled{filter:none;opacity:.42} @media(max-width:680px){ #licenseWelcomeModal{padding:12px}.license-welcome-card{width:100%;max-height:calc(100vh - 24px)} .license-first-head{padding:21px 20px 17px}.license-first-head h2{font-size:21px} .license-first-language-row{grid-template-columns:1fr;gap:8px;padding:13px 20px} .license-first-body{padding:20px}.license-first-scroll{min-height:190px;max-height:38vh} .license-first-actions{align-items:stretch;flex-direction:column}.license-first-actions .btn{width:100%} } #miAutoFixModeModal{position:fixed;inset:0;z-index:287;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.84);backdrop-filter:blur(2px)}#miAutoFixModeModal[hidden]{display:none}#miAutoFixModeModal>.card{width:min(650px,94vw);padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}.miAutoFixModes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.miAutoFixModeCard{position:relative;display:grid;gap:8px;min-height:150px;padding:17px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--txt);text-align:left;cursor:pointer}.miAutoFixModeCard:hover,.miAutoFixModeCard:focus{border-color:var(--amber);box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 15%,transparent)}.miAutoFixModeCard strong{font-size:15px}.miAutoFixModeCard span{color:var(--txt-dim);line-height:1.5}.miAutoFixModeCard em{width:max-content;align-self:end;padding:3px 7px;border-radius:10px;background:#2f9e79;color:#fff;font:700 9px var(--mono);font-style:normal;text-transform:uppercase}.miAutoFixModeCard.forced em{background:#e0543a}.miAutoFixModeCard.forced{border-left:4px solid #e0543a}.miAutoFixModeCard.safe{border-left:4px solid #2f9e79}.miAutoFixModeCancel{width:100%;justify-content:center;margin-top:10px}@media(max-width:620px){.miAutoFixModes{grid-template-columns:1fr}.miAutoFixModeCard{min-height:120px}} #miPendingChangesModal{position:fixed;inset:0;z-index:288;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.84);backdrop-filter:blur(2px)}#miPendingChangesModal[hidden]{display:none}#miPendingChangesModal>.card{width:min(510px,94vw);padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}#miPendingChangesModal p{margin:4px 0 18px;color:var(--txt-dim);line-height:1.6}#miPendingChangesDiscard{border-color:#e0543a!important;background:#e0543a!important;color:#fff!important} #miAnalysisChecks label,#miAnalysisChecks input,.miAnalysisToggle,.miAnalysisToggle input{cursor:pointer} .miResultActions .btn{min-height:26px;padding:4px 7px!important;font-size:10px!important}.miResultActions .miViewIssue,.miResultActions .miLocate{border-color:var(--amber)!important;background:var(--panel)!important;color:var(--amber)!important}.miResultActions .miViewIssue:hover,.miResultActions .miLocate:hover{background:color-mix(in srgb,var(--amber) 10%,var(--panel))!important}#miDiscardPending{border-color:#e0543a!important;background:#e0543a!important;color:#fff!important;font-weight:700}#miDiscardPending:hover{background:#c94531!important}#miDiscardPending[hidden]{display:none} #miAutoFixLogModal{position:fixed;inset:0;z-index:287;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(4,6,9,.84);backdrop-filter:blur(2px)}#miAutoFixLogModal[hidden]{display:none}#miAutoFixLogModal>.card{width:min(650px,94vw);max-height:88vh;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)}.miAutoFixLogSummary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.miAutoFixLogSummary>h4,.miAutoFixLogSummary>p{grid-column:1/-1;margin:3px 0 0}.miAutoFixLogSummary>h4{font-size:13px}.miAutoFixLogSummary>p{padding:8px 10px;border-radius:5px;background:var(--soft);color:var(--txt-dim);font-size:12px}.miAutoFixLogSummary>div{padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}.miAutoFixLogSummary b{display:block;font:800 22px var(--mono)}.miAutoFixLogSummary .error b{color:#e0543a}.miAutoFixLogSummary .warn b{color:#c18401}.miAutoFixLogSummary .info b{color:#4078f2}.miAutoFixLogSummary span{color:var(--txt-dim);font-size:12px}.miAutoFixLog{display:grid;gap:7px}.miAutoFixLogRow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:9px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:5px}.miAutoFixLogRow>i{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#2f9e79}.miAutoFixLogRow.pending>i{background:#e0543a}.miAutoFixLogRow small{display:block;margin-top:3px;color:var(--txt-dim);font-size:11px}.miAutoFixLogRow b{font-size:12px}.miAutoFixLogRow b:last-child{font-family:var(--mono)}.miAutoFixLogDone{width:100%;justify-content:center;margin-top:12px} .miResourceLinks{display:flex;flex-wrap:wrap;gap:5px}.miResourceLink{padding:3px 7px!important;border-color:var(--amber)!important;color:var(--amber)!important;font:600 10px var(--mono)!important}.miResourceLink:before{content:"▧";margin-right:5px}.miInspectorResourcePreview h4{display:flex;align-items:center;justify-content:space-between}.miInspectorResourcePreview h4 .btn{margin:-5px -7px -5px 8px}.miInspectorResourcePreview>div{display:grid;place-items:center;min-height:180px;max-height:360px;padding:14px;background:repeating-conic-gradient(var(--soft) 0 25%,var(--panel) 0 50%) 50%/18px 18px;overflow:auto}.miInspectorResourcePreview canvas,.miInspectorResourcePreview img{max-width:100%;max-height:330px;image-rendering:pixelated;box-shadow:0 3px 14px rgba(0,0,0,.28)} /* A toggle the current map cannot use: dimmed, but the label stays readable. */ .grp.disabled{opacity:.45} .grp.disabled input{cursor:not-allowed} /* The welcome blurb is authored as two lines; keep them. */ #empty .dropBody{white-space:pre-line}