:root{
  --green:#0b9a2c; --green2:#077a20; --gem:#c0c0c0; --ink:#000; --paper:#fff;
  --beige:#e4dcc6; --beige2:#cfc5aa; --beige3:#b3a888; --led:#3f3;
  --chrome: 'Press Start 2P', monospace; --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--mono); color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  background-color:var(--green);
  background-image:
    radial-gradient(var(--green2) 1px, transparent 1.2px),
    radial-gradient(var(--green2) 1px, transparent 1.2px);
  background-size:4px 4px; background-position:0 0, 2px 2px;
}
.menubar{display:flex;align-items:center;gap:18px;background:#fff;border-bottom:2px solid #000;padding:6px 12px;font-family:var(--chrome);font-size:10px}
.mb-brand{background:#000;color:#fff;padding:3px 6px}
.mb-item{cursor:default}
.mb-item:hover{background:#000;color:#fff}
#auth-status{margin-left:auto;font-size:9px}
#auth-status a,#auth-status button{font:inherit;color:#000;background:#fff;border:2px solid #000;padding:3px 6px;cursor:pointer;text-decoration:none}

.layout{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;padding:22px;max-width:1500px;margin:0 auto;width:100%}
@media (max-width:980px){.layout{grid-template-columns:1fr;padding:10px;gap:14px}}

/* monitor */
.monitor{background:linear-gradient(160deg,#ece5d2,var(--beige) 40%,var(--beige2));border-radius:22px 22px 14px 14px;padding:22px 22px 10px;box-shadow:0 10px 0 var(--beige3),0 18px 30px rgba(0,0,0,.4);animation:drop .7s cubic-bezier(.2,1.4,.4,1) both}
.bezel{background:#2b2a27;border-radius:14px;padding:16px;box-shadow:inset 0 0 0 3px #1a1917, inset 0 6px 14px rgba(0,0,0,.7)}
.screen-wrap{position:relative;aspect-ratio:16/10;background:#000;border-radius:8px;overflow:hidden}
#canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;cursor:none;outline:none;touch-action:none}
.crt{pointer-events:none;position:absolute;inset:0;display:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 40px rgba(120,255,160,.12)}
.screen-wrap.crton .crt{display:block}
.screen-wrap.crton #canvas{filter:saturate(1.15) contrast(1.05) blur(.35px)}
.focus-hint{position:absolute;bottom:6px;right:8px;font-family:var(--chrome);font-size:7px;color:#9f9;opacity:.7;pointer-events:none}
.chin{display:flex;align-items:center;gap:14px;padding:10px 6px 2px}
.logo{font-family:var(--chrome);font-size:9px;color:#7d745c;letter-spacing:2px;text-shadow:0 1px 0 #fff8}
.crt-toggle{margin-left:auto;font-family:var(--chrome);font-size:8px;color:#5c5440;display:flex;gap:6px;align-items:center}
.led{width:10px;height:10px;border-radius:50%;background:#253;box-shadow:inset 0 1px 2px #000}
.led.on{background:var(--led);box-shadow:0 0 8px var(--led);animation:pulse 2.4s infinite}
@keyframes pulse{50%{opacity:.6}}

/* case */
.case{margin-top:26px;background:linear-gradient(175deg,#efe8d6,var(--beige) 30%,var(--beige2));border-radius:10px 10px 18px 18px;padding:14px 18px 16px;
  box-shadow:0 8px 0 var(--beige3),0 16px 26px rgba(0,0,0,.4);transform:perspective(900px) rotateX(10deg);transform-origin:top;animation:drop .7s .15s cubic-bezier(.2,1.4,.4,1) both}
@keyframes drop{from{transform:translateY(-30px);opacity:0}}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.brand-plate{font-family:var(--chrome);font-size:10px;color:#4a4332;display:flex;flex-direction:column;gap:4px}
.brand-plate b{color:#a52a1a}
.brand-plate small{font-size:6px;color:#7d745c}
.drive{width:200px;padding:6px 8px;border-radius:4px;background:var(--beige2);box-shadow:inset 0 2px 3px rgba(0,0,0,.25);transition:transform .15s}
.drive.over{outline:3px dashed #a52a1a;outline-offset:3px}
.drive.clunk{animation:clunk .3s}
@keyframes clunk{30%{transform:translateY(3px)}}
.slot{height:10px;background:#1d1b16;border-radius:2px;position:relative;overflow:hidden}
.disk-tongue{position:absolute;left:20%;right:20%;top:2px;bottom:2px;background:#333;border-radius:1px;display:none}
.disk-tongue.in{display:block;background:var(--dc,#2a5bd7)}
.drive-row{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--chrome);font-size:7px;color:#5c5440}
.drive-led{width:12px;height:5px;background:#511;border-radius:1px}
.drive-led.on{background:#f33;box-shadow:0 0 6px #f33}
.eject{margin-left:auto;font:inherit;font-size:7px;background:var(--beige);border:1px solid var(--beige3);border-radius:2px;padding:3px 5px;cursor:pointer}
.keyboard{background:#bdb398;border-radius:6px;padding:8px;display:flex;flex-direction:column;gap:4px}
.krow{display:flex;gap:4px;justify-content:center}
.key{flex:1;min-width:0;max-width:44px;height:26px;background:linear-gradient(#a9a290,#8e8775);border:none;border-radius:3px;box-shadow:0 3px 0 #5e594b;font-family:var(--chrome);font-size:6px;color:#f4efe2;cursor:pointer;padding:0;overflow:hidden}
.key.fn{background:linear-gradient(#77736a,#5d5a52);height:18px;transform:skewX(-14deg);max-width:52px}
.key.wide{max-width:80px;flex:1.8}.key.space{max-width:320px;flex:8}
.key:active,.key.down{transform:translateY(2px);box-shadow:0 1px 0 #5e594b}
.key.fn:active{transform:skewX(-14deg) translateY(2px)}
.case-controls{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.hw-btn{font-family:var(--chrome);font-size:8px;padding:8px 10px;background:var(--beige2);border:2px solid var(--beige3);border-radius:4px;cursor:pointer;box-shadow:0 3px 0 var(--beige3)}
.hw-btn:active{transform:translateY(2px);box-shadow:none}
.hw-btn.power.on{background:#a52a1a;color:#fff;border-color:#6d1c10}
.meter{font-family:var(--chrome);font-size:8px;color:#2a4;background:#111;padding:6px 8px;border-radius:3px}
.sticker{margin-left:auto;font-family:var(--chrome);font-size:6px;line-height:1.6;background:#ffef6a;padding:5px 7px;transform:rotate(-3deg);box-shadow:1px 2px 3px rgba(0,0,0,.3)}
.spec-sticker{margin-top:10px;font-family:var(--chrome);font-size:6px;line-height:1.7;color:#fff;background:#222;padding:6px 8px;border-radius:2px;display:inline-block}

/* GEM windows */
.gem-win{background:#fff;border:2px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.6);display:flex;flex-direction:column;height:100%;min-height:600px;animation:drop .6s .3s both}
.gem-title{display:flex;align-items:center;height:22px;border-bottom:2px solid #000;background:repeating-linear-gradient(0deg,#000 0 1px,#fff 1px 3px);padding:0 3px}
.closebox,.fullbox{width:16px;height:16px;border:2px solid #000;background:#fff}
.closebox{position:relative}.closebox:after{content:"";position:absolute;inset:3px;background:#000}
.gem-title-text{margin:0 auto;background:#fff;padding:3px 10px;font-family:var(--chrome);font-size:9px}
.tabs{display:flex;border-bottom:2px solid #000;background:var(--gem)}
.tabs button{flex:1;font-family:var(--chrome);font-size:8px;padding:8px 4px;background:transparent;border:none;border-right:2px solid #000;cursor:pointer}
.tabs button:last-child{border-right:none}
.tabs button.on{background:#000;color:#fff}
.panel{flex:1;display:flex;flex-direction:column;min-height:0;padding:8px;gap:8px}
.hidden{display:none!important}
.toolbar{display:flex;gap:6px;align-items:center}
.toolbar.wrap{flex-wrap:wrap}
.fname{font-family:var(--chrome);font-size:9px;border:2px solid #000;padding:6px;width:130px;text-transform:uppercase}
.gbtn{font-family:var(--chrome);font-size:8px;background:#fff;border:2px solid #000;padding:7px 8px;cursor:pointer;box-shadow:2px 2px 0 #000}
.gbtn.primary{border-width:3px}
.gbtn:active{transform:translate(2px,2px);box-shadow:none}
.gbtn:hover{background:#000;color:#fff}

.editor{position:relative;flex:1;min-height:340px;border:2px solid #000;background:#fdfdf8}
.editor pre,.editor textarea{position:absolute;inset:0;margin:0;padding:10px;font-family:var(--mono);font-size:12.5px;line-height:1.45;white-space:pre;overflow:auto;tab-size:2;border:none}
.editor textarea{background:transparent;color:transparent;caret-color:#000;resize:none;outline:none}
.editor textarea::selection{background:rgba(0,0,0,.2);color:transparent}
.editor pre{color:#222;pointer-events:none}
.tc{color:#7a7a7a;font-style:italic}.ts{color:#a52a1a}.ti{color:#0b6b2a;font-weight:700}
.to{color:#1f3fae}.tk{color:#000;font-weight:700;text-decoration:underline 1px #bbb}.tn{color:#a0007a}
.console{height:90px;overflow:auto;border:2px solid #000;background:#000;color:#8f8;font-size:11px;padding:6px;font-family:var(--mono)}
.console .err{color:#f77}

.disk-info{font-family:var(--chrome);font-size:8px;line-height:1.8;border:2px solid #000;padding:6px;background:var(--gem)}
.filelist{flex:1;min-height:260px;overflow:auto;border:2px solid #000}
.frow{display:grid;grid-template-columns:20px 1fr 80px 90px;gap:6px;align-items:center;padding:4px 8px;font-size:12px;cursor:pointer;border-bottom:1px dotted #aaa}
.frow .ic{width:12px;height:14px;border:1.5px solid #000;background:linear-gradient(#000 0 2px,#fff 2px)}
.frow.sel{background:#000;color:#fff}.frow.sel .ic{border-color:#fff}
.frow.head{font-family:var(--chrome);font-size:7px;cursor:default;background:var(--gem)}
.empty{padding:20px;font-family:var(--chrome);font-size:8px;line-height:2;text-align:center}

.publish{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border:2px solid #000;padding:8px;background:var(--gem)}
.swatches{display:flex;gap:4px}
.sw{width:18px;height:18px;border:2px solid #000;cursor:pointer}
.sw.on{outline:2px solid #fff;outline-offset:-5px}
.shelf{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;align-content:start;padding:12px 6px 18px;border-bottom:10px solid #6b4a2a;background:linear-gradient(transparent 92%,#8a6238 92%)}
.floppy{aspect-ratio:1;background:var(--c);border-radius:3px 12px 3px 3px;position:relative;cursor:pointer;box-shadow:2px 3px 0 rgba(0,0,0,.5);transition:transform .15s}
.floppy:hover{transform:translateY(-6px) rotate(-2deg)}
.floppy:before{content:"";position:absolute;top:0;left:25%;width:50%;height:30%;background:linear-gradient(90deg,#999,#ddd 40%,#999);}
.floppy:after{content:"";position:absolute;top:6%;left:52%;width:10%;height:18%;background:#333}
.floppy .lab{position:absolute;left:10%;right:10%;bottom:8%;height:44%;background:#fff;font-family:var(--chrome);font-size:6px;line-height:1.5;padding:4px;overflow:hidden;word-break:break-all}
.floppy .lab small{display:block;color:#666;font-size:5px;margin-top:3px}

.memmap{width:100%;border-collapse:collapse;font-size:12px}
.memmap td,.memmap th{border:1px solid #000;padding:5px;text-align:left;vertical-align:top}
.memmap th{background:#000;color:#fff;font-family:var(--chrome);font-size:8px}
.memmap td:first-child{font-weight:700;white-space:nowrap}
#p-memmap{overflow:auto;font-size:12px}
#p-memmap h4{font-family:var(--chrome);font-size:9px;margin:10px 0 0}
code{background:#eee;padding:0 3px}

.statusbar{display:flex;gap:16px;align-items:center;background:#fff;border-top:2px solid #000;padding:7px 12px;font-family:var(--chrome);font-size:8px;flex-wrap:wrap}
.statusbar a{margin-left:auto;color:#000}
#statusMsg{color:#555}

.alert-back{position:fixed;inset:0;background:rgba(0,40,0,.35);display:flex;align-items:center;justify-content:center;z-index:50}
.gem-alert{background:#fff;border:3px double #000;outline:2px solid #000;outline-offset:3px;padding:18px;max-width:440px;width:90%;animation:pop .25s}
@keyframes pop{from{transform:scale(.8);opacity:0}}
.bombs{display:flex;gap:6px;margin-bottom:12px}
.bombs svg{width:30px;height:30px}
.alert-msg{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;margin-bottom:14px}
.alert-btns{display:flex;gap:10px;justify-content:flex-end}