:root{
  --teal:#0a8078; --teal-dk:#075e58;
  --silver:#c3c7cb; --silver-lt:#e8ebee; --silver-dk:#87898c; --silver-dkr:#5a5c5e;
  --navy:#00007b; --navy2:#1084d0;
  --ink:#0b0b0b; --ink-soft:#2a2a2a;
  --lcd-bg:#08150f; --lcd:#39ff6a; --lcd-dim:#1c7a38; --lcd-amber:#ffb000;
  --up:#0a8a2e; --up-lt:#d3f4dc; --down:#c81e1e; --down-lt:#f7d6d6;
  --gold:#ffb000;
  --mono:'VT323',ui-monospace,monospace;
  --pixel:'Press Start 2P',monospace;
  --sans:'Tahoma','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important;}
html,body{height:100%}
body{
  margin:0; background:var(--teal); color:var(--ink);
  font-family:var(--sans); font-size:13px;
  overflow:hidden;
  background-color:var(--teal);
  -webkit-font-smoothing:none;
}
/* Animated GIF as <img> — CSS background-image often freezes GIFs */
.bg-stonks{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
#desktop{z-index:1;}
#taskbar{z-index:50;}
#boot{z-index:200;}
/* ---- bevels ---- */
.out{border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.in{border:2px solid; border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.btn{
  font-family:var(--sans); font-size:12px; background:var(--silver); color:var(--ink);
  padding:4px 12px; cursor:pointer; min-width:70px;
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);
}
.btn:active{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr); padding:5px 11px 3px 13px;}
.btn:focus-visible{outline:1px dotted #000; outline-offset:-4px;}

/* ================= BOOT ================= */
#boot{position:fixed; inset:0; background:#000 url("assets/boot-splash.png") center/cover no-repeat; color:#c9c9c9; z-index:200;
  font-family:var(--mono); font-size:19px; padding:26px 30px; line-height:1.25;}
#boot::before{content:''; position:absolute; inset:0; background:rgba(0,0,0,.72); pointer-events:none;}
#boot > *{position:relative; z-index:1;}
#boot .amber{color:var(--lcd-amber);}
#boot .grn{color:var(--lcd);}
#boot .logo{font-family:var(--pixel); font-size:15px; color:#fff; margin:6px 0 20px; letter-spacing:1px;}
#boot .boot-brand{display:flex; align-items:center; gap:14px; margin:8px 0 18px;}
#boot .boot-brand img{width:72px; height:72px; image-rendering:pixelated; object-fit:contain;}
#boot .bar{margin-top:18px; width:340px;}
#boot .barTrack{height:16px; background:#111; border:1px solid #444; padding:2px;}
#boot .barFill{height:100%; width:0; background:var(--lcd);}
#boot .blink::after{content:'_'; animation:bl 1s steps(1) infinite;}
@keyframes bl{50%{opacity:0}}

/* ================= DESKTOP ================= */
#desktop{position:fixed; inset:0 0 32px 0; padding:10px;
  background:rgba(10,128,120,.28);}
.icons{display:flex; flex-direction:column; gap:16px; width:88px;}
.icon{display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; text-align:center;
  color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.6); font-size:11px; padding:3px;}
.icon:focus-visible{outline:1px dotted #fff;}
.icon .glyph{width:42px; height:42px; display:grid; place-items:center; font-size:26px;
  background:var(--silver); border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);
  padding:0; overflow:hidden;}
.icon .glyph img{width:100%; height:100%; object-fit:contain; image-rendering:pixelated; display:block;}
.icon .lbl{background:transparent; padding:1px 3px;}
.mascot{position:absolute; right:18px; bottom:14px; width:110px; height:110px; pointer-events:none; z-index:5;
  image-rendering:pixelated; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45));}
.coin-badge{width:28px; height:28px; object-fit:contain; image-rendering:pixelated; vertical-align:middle;}
.tbicon img,#start .logo img,.taskitem img{width:16px; height:16px; object-fit:contain; image-rendering:pixelated; display:block;}
#start .logo{display:inline-flex; align-items:center; gap:6px;}
.taskitem img{width:14px; height:14px;}

/* ================= WINDOW ================= */
.win{position:absolute; background:var(--silver); display:flex; flex-direction:column;
  box-shadow:2px 2px 0 rgba(0,0,0,.35);}
.win.out{padding:2px;}
#win-trader{ width:min(980px,96vw); height:min(660px,calc(100vh - 120px)); left:120px; top:24px;}
.titlebar{background:linear-gradient(90deg,var(--navy),var(--navy2)); color:#fff;
  display:flex; align-items:center; gap:6px; padding:3px 4px; font-weight:bold; cursor:move; user-select:none;}
.titlebar .tbicon{font-size:14px}
.titlebar .ttl{font-size:12px; letter-spacing:.3px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tbtn{width:20px; height:18px; display:grid; place-items:center; background:var(--silver);
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);
  font-size:11px; font-weight:bold; cursor:pointer; color:#000; line-height:1; font-family:var(--sans);}
.tbtn:active{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.menubar{display:flex; gap:2px; padding:2px 4px; background:var(--silver); border-bottom:1px solid var(--silver-dk);}
.menubar span{padding:2px 8px; cursor:default;}
.menubar span:hover{background:var(--navy); color:#fff;}
.menubar u{text-decoration:underline;}

.workspace{flex:1; padding:6px; display:grid; gap:6px; overflow:auto;
  grid-template-columns:1.15fr 1.45fr 1fr; grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "lcd    lcd    ticket"
    "book   chart  ticket"
    "book   blotter positions";
  background:var(--teal-dk);}

.panel{background:var(--silver); padding:3px; display:flex; flex-direction:column; min-height:0;}
.panel > .cap{font-size:11px; font-weight:bold; padding:2px 5px; color:#fff;
  background:linear-gradient(90deg,#3a3a3a,#6a6a6a); display:flex; justify-content:space-between; align-items:center; letter-spacing:.3px;}
.panel > .body{flex:1; min-height:0; background:#fff; padding:5px; overflow:auto;}

/* ---- LCD ticker ---- */
#lcd{grid-area:lcd;}
#lcd .body{background:var(--lcd-bg); color:var(--lcd); font-family:var(--mono);
  display:flex; align-items:center; gap:18px; padding:8px 12px; position:relative;
  box-shadow:inset 0 0 26px rgba(0,0,0,.9);}
#lcd .body::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);}
.lcdSym{font-family:var(--pixel); font-size:13px; color:#fff; display:flex; align-items:center; gap:8px;}
.lcdSym .coin-badge{width:22px; height:22px;}
.lcdPx{font-size:44px; line-height:.8; font-weight:bold; letter-spacing:1px; text-shadow:0 0 8px var(--lcd);}
.lcdChg{font-size:26px; line-height:1;}
.lcdChg.dn{color:#ff5b5b; text-shadow:0 0 8px #ff5b5b;}
.lcdMeta{margin-left:auto; font-size:19px; text-align:right; color:var(--lcd-dim); line-height:1.15;}
.lcdMeta b{color:var(--lcd-amber); text-shadow:0 0 6px var(--lcd-amber);}

/* ---- order book (L2) ---- */
#book{grid-area:book;}
#book .body{padding:0; font-family:var(--mono); font-size:17px;}
.l2head{display:grid; grid-template-columns:1fr 1fr 1.3fr; padding:3px 8px; font-size:12px;
  font-family:var(--sans); font-weight:bold; color:#333; border-bottom:1px solid #999; position:sticky; top:0; background:#eee;}
.l2head span:nth-child(2){text-align:right} .l2head span:nth-child(3){text-align:right}
.l2row{display:grid; grid-template-columns:1fr 1fr 1.3fr; padding:1px 8px; position:relative; align-items:center;
  font-variant-numeric:tabular-nums;}
.l2row .depth{position:absolute; top:1px; bottom:1px; right:0; opacity:.85; z-index:0;}
.l2row.ask .depth{background:var(--down-lt);}
.l2row.bid .depth{background:var(--up-lt);}
.l2row > span{position:relative; z-index:1;}
.l2row .px{font-weight:bold}
.l2row.ask .px{color:var(--down)} .l2row.bid .px{color:var(--up)}
.l2row .sz{text-align:right; color:#333} .l2row .tot{text-align:right; color:#666}
.l2spread{display:flex; justify-content:space-between; padding:3px 8px; background:var(--lcd-bg); color:var(--lcd);
  font-family:var(--mono); font-size:16px; border-block:1px solid #000;}
.l2spread b{color:var(--lcd-amber)}

/* ---- chart ---- */
#chart{grid-area:chart;}
#chart .body{padding:0; background:var(--lcd-bg); position:relative;}
#chart canvas{display:block; width:100%; height:100%;}
.tf{display:flex; gap:3px;}
.tf button{font-family:var(--sans); font-size:10px; padding:1px 6px; cursor:pointer; background:var(--silver);
  border:1px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt); color:#000;}
.tf button.on{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr); background:var(--gold);}

/* ---- ticket ---- */
#ticket{grid-area:ticket;}
#ticket .body{display:flex; flex-direction:column; gap:7px; background:var(--silver); padding:7px;}
.balbox{background:var(--lcd-bg); color:var(--lcd); font-family:var(--mono); padding:6px 8px; font-size:17px; line-height:1.35;}
.balbox .row{display:flex; justify-content:space-between}
.balbox b{color:#fff} .balbox .amber{color:var(--lcd-amber)}
.segbtns{display:flex; gap:0;}
.segbtns button{flex:1; font-family:var(--pixel); font-size:11px; padding:9px 0; cursor:pointer; color:#fff;
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.segbtns .buy{background:#1a7f38;} .segbtns .buy.on{background:var(--up); box-shadow:inset 0 0 0 2px #fff;}
.segbtns .sell{background:#a33;} .segbtns .sell.on{background:var(--down); box-shadow:inset 0 0 0 2px #fff;}
.segbtns button:not(.on){filter:brightness(.62) saturate(.6);}
.fld{display:flex; flex-direction:column; gap:2px;}
.fld label{font-size:11px; font-weight:bold; color:#333; text-transform:uppercase; letter-spacing:.4px;}
.fld input,.fld select{font-family:var(--mono); font-size:18px; padding:3px 6px; background:#fff; color:#000;
  border:2px solid; border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.fld input:focus,.fld select:focus{outline:1px dotted #000; outline-offset:-4px;}
.ordtype{display:flex; gap:8px; font-size:12px;}
.ordtype label{display:flex; align-items:center; gap:3px; cursor:pointer; text-transform:none; letter-spacing:0;}
.qq{display:flex; gap:3px;}
.qq button{flex:1; font-size:11px; padding:3px 0; cursor:pointer; background:var(--silver-lt);
  border:1px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}
.estimate{font-family:var(--mono); font-size:16px; color:#333; display:flex; justify-content:space-between;
  background:#fff; padding:4px 6px; border:1px solid #aaa;}
.estimate b{color:#000}
.placebtn{font-family:var(--pixel); font-size:12px; padding:12px 0; color:#fff; cursor:pointer; width:100%;
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt); background:var(--up);}
.placebtn.sell{background:var(--down);}
.placebtn:active{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.msg{font-family:var(--mono); font-size:15px; min-height:20px; padding:2px 4px; color:var(--down);}
.msg.ok{color:var(--up);}

/* ---- tables ---- */
#positions{grid-area:positions;} #blotter{grid-area:blotter;}
table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:16px;}
th{font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.3px; text-align:right;
  background:#eee; color:#333; padding:2px 6px; position:sticky; top:0; border-bottom:1px solid #999;}
th:first-child{text-align:left}
td{padding:1px 6px; text-align:right; font-variant-numeric:tabular-nums; border-bottom:1px dotted #ddd;}
td:first-child{text-align:left; font-weight:bold;}
.pos-up{color:var(--up)} .pos-dn{color:var(--down)}
.empty{color:#999; font-family:var(--sans); font-size:12px; padding:10px; text-align:center;}
.pill{font-family:var(--sans); font-size:10px; font-weight:bold; padding:0 5px; color:#fff;}
.pill.b{background:var(--up)} .pill.s{background:var(--down)}
.cancel{font-family:var(--sans); font-size:10px; padding:0 4px; cursor:pointer; background:var(--silver);
  border:1px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt);}

/* ---- news ticker ---- */
#newsbar{grid-column:1/-1; display:flex; align-items:center; gap:0; background:#000; height:24px; overflow:hidden;}
#newsbar .tag{background:var(--down); color:#fff; font-family:var(--pixel); font-size:9px; padding:0 8px; height:100%;
  display:flex; align-items:center; white-space:nowrap; z-index:2;}
#newsbar .track{white-space:nowrap; font-family:var(--mono); font-size:17px; color:var(--lcd);
  animation:mar 46s linear infinite; padding-left:100%;}
#newsbar .track span{margin-right:44px;}
#newsbar .track b{color:var(--lcd-amber);}
@keyframes mar{to{transform:translateX(-100%)}}

/* ================= TASKBAR ================= */
#taskbar{position:fixed; left:0; right:0; bottom:0; height:32px; background:var(--silver);
  border-top:2px solid var(--silver-lt); display:flex; align-items:center; gap:5px; padding:3px 5px;}
#start{display:flex; align-items:center; gap:6px; font-weight:bold; padding:2px 10px; cursor:pointer;}
#start .logo{font-family:var(--pixel); font-size:11px; color:var(--navy);}
.taskitem{flex:0 0 200px; display:flex; align-items:center; gap:6px; padding:2px 8px; font-size:12px; cursor:pointer;}
.taskitem.on{border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.tray{margin-left:auto; display:flex; align-items:center; gap:8px; padding:3px 10px; font-family:var(--mono); font-size:16px;}
.tray .net{color:var(--up); font-weight:bold;}

@media (max-width:760px){
  #win-trader{left:2vw !important; top:8px !important; width:96vw !important; height:calc(100vh - 100px) !important;}
  .workspace{grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas:"lcd" "ticket" "book" "chart" "blotter" "positions";}
  #chart .body{min-height:150px} #book .body{max-height:200px}
  .icons{display:none}
}
@media (prefers-reduced-motion:reduce){
  #newsbar .track{animation:none; padding-left:8px;}
  #boot .blink::after{animation:none}
}

/* ==================================================================== */
/* ===================== PONS OS — MULTI-WINDOW ======================= */
/* ==================================================================== */
.app-win:not(.active) .titlebar{background:linear-gradient(90deg,#7c7c88,#9a9aa6);}
.app-win{min-width:220px;}
#startmenu{z-index:60;}
#shutdown{z-index:300;}
.tbicon{font-size:14px;}

/* generic app-window body */
.wbody{flex:1; min-height:0; overflow:auto; background:var(--silver); padding:8px; display:flex; flex-direction:column; gap:8px;}
.cap2{font-size:11px; font-weight:bold; color:#fff; background:linear-gradient(90deg,#3a3a3a,#6a6a6a); padding:2px 6px; letter-spacing:.3px;}

/* ---- Market Watch ---- */
.wtoolbar{display:flex; justify-content:space-between; font-size:11px; font-weight:bold; color:#333; background:var(--silver-lt); padding:3px 6px; border:1px solid var(--silver-dk);}
#watchStatus{color:var(--up);}
.wscroll{flex:1; min-height:0; overflow:auto; background:#fff; border:2px solid; border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
table.mkt{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:16px;}
table.mkt th{font-family:var(--sans); font-size:10px; text-transform:uppercase; letter-spacing:.3px; text-align:right; background:#e6e6e6; color:#333; padding:3px 8px; position:sticky; top:0; border-bottom:1px solid #999;}
table.mkt th:first-child, table.mkt th:nth-child(2){text-align:left;}
table.mkt td{padding:2px 8px; text-align:right; border-bottom:1px dotted #e0e0e0; font-variant-numeric:tabular-nums;}
table.mkt td:first-child{text-align:left; font-weight:bold;}
table.mkt td.nm{text-align:left; color:#555; font-family:var(--sans); font-size:12px;}
table.mkt tbody tr{cursor:pointer;}
table.mkt tbody tr:hover{background:#eef3ff;}
.mkt .up{color:var(--up);} .mkt .dn{color:var(--down);}
canvas.spark{display:block; width:100px; height:24px;}
.wmovers{display:flex; gap:8px;}
.mover{flex:1; display:flex; justify-content:space-between; align-items:center; padding:4px 8px; background:#fff; border:1px solid #aaa; font-family:var(--mono); font-size:16px;}
.mover .mlbl{font-family:var(--sans); font-size:10px; font-weight:bold;}
.mover.up{border-left:4px solid var(--up);} .mover.up b{color:var(--up);}
.mover.dn{border-left:4px solid var(--down);} .mover.dn b{color:var(--down);}

/* ---- Portfolio ---- */
.pfgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
.stat{background:#fff; border:1px solid #aaa; padding:5px 8px; display:flex; flex-direction:column; gap:2px;}
.stat .k{font-size:10px; font-weight:bold; color:#666; text-transform:uppercase; letter-spacing:.3px;}
.stat .v{font-family:var(--mono); font-size:21px; line-height:1;}
.stat .v.amber{color:#b47500;}
.allocbar{display:flex; height:26px; background:#fff; overflow:hidden;}
.seg{display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:bold; color:#fff; white-space:nowrap; overflow:hidden; transition:width .4s ease;}
.seg.cash{background:var(--navy2);} .seg.pons{background:var(--up);}
.pfchart{flex:1; min-height:120px; display:flex; flex-direction:column;}
.pfcv{flex:1; min-height:110px; background:var(--lcd-bg);}
.pfcv canvas{width:100%; height:100%; display:block;}
.pfstats2{display:flex; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:15px; background:var(--lcd-bg); color:var(--lcd); padding:5px 8px;}
.pfstats2 b{color:var(--lcd-amber);}

/* ---- News ---- */
.newsbody{flex-direction:row; gap:8px;}
.newslist{width:216px; flex:none; overflow:auto; background:#fff;}
.newsitem{padding:6px 8px; border-bottom:1px solid #e0e0e0; cursor:pointer;}
.newsitem:hover{background:#eef3ff;}
.newsitem.sel{background:var(--navy); color:#fff;}
.newsitem .cat{font-size:9px; font-weight:bold; letter-spacing:.4px; opacity:.85;}
.newsitem .h{font-size:12px; line-height:1.25;}
.newsread{flex:1; overflow:auto; background:#fff; padding:14px 16px; line-height:1.55;}
.newsread .nmeta{font-size:10px; font-weight:bold; color:var(--down); letter-spacing:.4px; text-transform:uppercase;}
.newsread h2{font-size:18px; margin:4px 0 10px; text-wrap:balance;}
.newsread p{margin:0 0 9px; font-size:13px;}

/* ---- Macro ---- */
.macrogrid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.mtile{background:#fff; border:1px solid #aaa; padding:5px 7px; display:flex; flex-direction:column; gap:1px;}
.mtile .k{font-size:9px; font-weight:bold; color:#666; text-transform:uppercase; letter-spacing:.2px;}
.mtile .v{font-family:var(--mono); font-size:20px; line-height:1;}
.mtile .sub{font-size:9px; color:#999;}
.fngwrap{background:#fff; padding:6px; display:flex; flex-direction:column; align-items:center; gap:2px;}
#fngCv{width:260px; height:140px; max-width:100%;}
.fngtxt{display:flex; gap:12px; align-items:baseline;}
#fngVal{font-family:var(--mono); font-size:32px; line-height:1;}
.fnglabel{font-family:var(--pixel); font-size:12px;}

/* ---- Calculator ---- */
.calcbody{gap:6px;}
.cfld{display:flex; flex-direction:column; gap:2px;}
.cfld label{font-size:10px; font-weight:bold; color:#555; text-transform:uppercase; letter-spacing:.3px;}
.cfld input{font-family:var(--mono); font-size:18px; padding:3px 6px; background:#fff; color:#000; border:2px solid; border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr);}
.cfld input:focus{outline:1px dotted #000; outline-offset:-4px;}
.calcout{background:var(--lcd-bg); color:var(--lcd); font-family:var(--mono); padding:7px 9px; font-size:16px; display:flex; flex-direction:column; gap:3px; margin-top:2px;}
.calcout .row{display:flex; justify-content:space-between;}
.calcout .big{font-size:21px; border-top:1px solid #2a6b3d; margin-top:3px; padding-top:4px;}
.calcout b{color:#fff;}

/* ---- About ---- */
.aboutbody{gap:9px;}
.abhead{display:flex; align-items:center; gap:12px;}
.abhead img{width:56px; height:56px; image-rendering:pixelated; object-fit:contain;}
.ablogo{font-family:var(--pixel); font-size:19px; color:var(--navy); letter-spacing:2px; line-height:1.4;}
.ablogo span{font-size:10px; color:#555;}
.aboutbody p{margin:0; font-size:12px;}
.aboutbody .dim{color:#555;}
.specs{background:var(--lcd-bg); color:var(--lcd); font-family:var(--mono); font-size:15px; padding:6px 9px; display:flex; flex-direction:column; gap:2px;}
.specs div{display:flex; justify-content:space-between;}
.specs b{color:var(--lcd-amber);}
.warn{font-size:11px; color:#7a1414; background:#fff2f2; border:1px solid var(--down); padding:6px 8px; line-height:1.4;}

/* ---- Start menu ---- */
#startmenu{position:fixed; left:4px; bottom:34px; width:236px; display:flex; background:var(--silver);
  border:2px solid; border-color:var(--silver-lt) var(--silver-dkr) var(--silver-dkr) var(--silver-lt); box-shadow:2px 2px 0 rgba(0,0,0,.45);}
.smrail{width:28px; background:linear-gradient(180deg,var(--navy2),var(--navy) 40%,#000); color:#fff; font-family:var(--pixel); font-size:12px; letter-spacing:2px; writing-mode:vertical-rl; transform:rotate(180deg); display:flex; align-items:center; justify-content:center; padding:10px 0; gap:6px;}
.smrail span{color:var(--lcd-amber); font-size:8px;}
.smitems{flex:1; padding:3px;}
.smitem{display:flex; align-items:center; gap:9px; padding:6px 9px; cursor:pointer; font-size:13px;}
.smitem:hover{background:var(--navy); color:#fff;}
.smitem span{width:18px; text-align:center; font-size:15px;}
.smsep{height:0; margin:3px 4px; border-top:1px solid var(--silver-dkr); border-bottom:1px solid var(--silver-lt);}

/* ---- Shutdown ---- */
#shutdown{position:fixed; inset:0; background:#000; display:grid; place-items:center;}
.sdbox{text-align:center; font-family:var(--mono); font-size:26px;}
#shutdown .amber{color:var(--lcd-amber);}

/* ---- dynamic taskbar items ---- */
#taskitems{display:flex; gap:5px; flex:1; overflow:hidden;}
.taskitem{flex:0 1 190px; min-width:60px;}
.taskitem.active{background:var(--silver-lt); border-color:var(--silver-dkr) var(--silver-lt) var(--silver-lt) var(--silver-dkr); font-weight:bold;}
.taskitem span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---- mobile ---- */
@media (max-width:760px){
  .app-win{left:2vw !important; width:96vw !important;}
  .pfgrid{grid-template-columns:repeat(2,1fr);}
  .macrogrid{grid-template-columns:repeat(2,1fr);}
  .newsbody{flex-direction:column;}
  .newslist{width:auto; max-height:130px;}
  .mascot{display:none;}
}