/* PUMP95 apps: Launchpad, coin window, launch wizard, documents, DOS. */

/* toolbars (Explorer style: flat until hovered) */
.toolbar { display: flex; align-items: center; gap: 2px; padding: 2px 2px 4px; flex-wrap: wrap; box-shadow: inset 0 -1px var(--lo), inset 0 -2px var(--hi); margin-bottom: 3px; }
.tbtn { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border: 0; background: none; min-height: 24px; }
.tbtn svg { width: 20px; height: 20px; }
.tbtn:hover { box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi); }
.tbtn:active, .tbtn.on { box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--lo); }
.tbtn.big { font-weight: 700; }
.tsep { width: 2px; align-self: stretch; margin: 2px 3px; box-shadow: inset 1px 0 var(--lo), inset -1px 0 var(--hi); }
.toolbar .find { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.toolbar .find .fld { width: 170px; }

/* ---------- Launchpad ---------- */
.lp { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.koth { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 4px; background: var(--navy); color: #fff; cursor: pointer; box-shadow: var(--well); }
.koth img { width: 44px; height: 44px; image-rendering: pixelated; background: #fff; box-shadow: 0 0 0 2px #ffff00; }
.koth .crown { font: 900 13px "Arial Black", Arial, sans-serif; color: #ffff00; letter-spacing: .5px; }
.koth .k-name { font-weight: 700; font-size: 13px; }
.koth .k-meta { color: #c8d8ff; }
.koth .k-prog { margin-left: auto; width: min(240px, 30%); display: grid; gap: 2px; }
.koth .prog { background: #000040; box-shadow: inset 1px 1px #000, inset -1px -1px #3030a0; }
.koth .prog i { background: repeating-linear-gradient(90deg, #ffff00 0 8px, transparent 8px 10px); }
.lp-main { flex: 1; min-height: 0; display: flex; gap: 3px; }
.tree { width: 168px; flex: none; background: #fff; box-shadow: var(--field); padding: 4px 2px; overflow: auto; }
.tree .node { display: flex; align-items: center; gap: 4px; padding: 1px 4px; white-space: nowrap; cursor: default; }
.tree .node svg { width: 16px; height: 16px; }
.tree .node.root { font-weight: 700; }
.tree .node.sub { padding-left: 18px; position: relative; }
.tree .node.sub::before { content: ""; position: absolute; left: 10px; top: -4px; bottom: 50%; border-left: 1px dotted var(--lo); border-bottom: 1px dotted var(--lo); width: 6px; }
.tree .node.on span { background: var(--navy); color: #fff; outline: 1px dotted #ffff80; outline-offset: -1px; }
.tree .node span { padding: 0 2px; }
.tree .count { color: var(--lo); margin-left: 2px; }
.lp-list { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flash td { animation: flash .9s; }
@keyframes flash { 0% { background: #ffff80; } }
.pill { display: inline-block; padding: 0 4px; font-size: 10px; background: #ffff00; box-shadow: 0 0 0 1px #000; color: #000 !important; }
.pill.g { background: #00ff00; } .pill.me { background: #00ffff; }

/* ---------- coin window ---------- */
.coin { flex: 1; min-height: 0; display: flex; gap: 6px; padding: 2px; }
.coin-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.coin-r { width: 250px; flex: none; overflow: auto; }
.chead { display: flex; gap: 10px; align-items: flex-start; padding: 2px 2px 6px; }
.chead img { width: 84px; height: 84px; image-rendering: pixelated; background: #fff; box-shadow: var(--field); padding: 2px; flex: none; cursor: pointer; }
.chead h2 { margin: 0; font: 700 16px var(--ui); }
.chead .tk { font-weight: 700; color: var(--navy); }
.chead .meta { margin-top: 3px; color: #303030; line-height: 1.5; }
.chead .mc { margin-left: auto; text-align: right; flex: none; }
.chead .mc b { display: block; font: 900 22px "Arial Black", Arial, sans-serif; }
.chead .ca { display: flex; gap: 4px; align-items: center; margin-top: 3px; }
.chead .ca code { font: 11px "Courier New", monospace; background: #fff; box-shadow: var(--field); padding: 2px 4px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; }
.mini { min-width: 0; min-height: 0; padding: 1px 6px; }
.chart { flex: 1; min-height: 140px; position: relative; background: #000; box-shadow: var(--field); padding: 2px; }
.chart canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.chart .legend { position: absolute; left: 8px; top: 6px; color: #00ff00; font: 13px "VT323", "Courier New", monospace; pointer-events: none; }
.tf { display: flex; gap: 2px; margin: 4px 0; }
.tf .btn { min-width: 0; padding: 1px 8px; min-height: 20px; }
.tl { max-height: 100%; }
.tl td.b { color: #008000; font-weight: 700; } .tl td.s { color: #c00000; font-weight: 700; }
.thread { display: grid; gap: 6px; }
.post { background: #fff; box-shadow: var(--field); padding: 5px 7px; }
.post b { color: var(--navy); } .post small { color: var(--lo); margin-left: 6px; }
.post p { margin: 3px 0 0; user-select: text; }
.reply { display: flex; gap: 4px; margin-top: 6px; } .reply .fld { flex: 1; }
.trade .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 8px; }
.trade .seg .btn { min-width: 0; font-weight: 700; }
.trade .seg .btn.on.buy { background: #00c853; color: #000; } .trade .seg .btn.on.sell { background: #ff4d4d; color: #000; }
.trade .row { display: flex; gap: 4px; align-items: center; margin: 4px 0; }
.trade .row .fld { flex: 1; min-width: 0; font-size: 13px; }
.trade .quick { display: flex; gap: 2px; flex-wrap: wrap; } .trade .quick .btn { min-width: 0; padding: 1px 6px; min-height: 20px; }
.trade .route { margin: 6px 0; padding: 4px; background: #ffffe1; box-shadow: 0 0 0 1px #000; line-height: 1.4; }
.trade .route b { color: var(--navy); }
.trade .go { width: 100%; min-height: 32px; font-weight: 700; font-size: 12px; margin-top: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; } .kv span:nth-child(odd) { color: #404040; } .kv span:nth-child(even) { text-align: right; font-weight: 700; }

/* ---------- wizard ---------- */
.wiz { flex: 1; display: flex; gap: 10px; padding: 10px 10px 0; min-height: 0; }
.wiz-art { width: 150px; flex: none; box-shadow: var(--field); background: var(--teal); padding: 2px; }
.wiz-art canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.wiz-body { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.wiz-body .fld { width: 100%; min-width: 0; } .wiz-body label.f, .wiz-body .two > * { min-width: 0; }
.wiz-body h3 { margin: 0 0 8px; font: 700 15px var(--ui); }
.wiz-body p { margin: 0 0 8px; line-height: 1.4; }
.wiz-body label.f { display: grid; gap: 3px; margin-bottom: 7px; }
.wiz-body .two { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.wiz-body .tick { display: flex; align-items: center; gap: 2px; font-weight: 700; } .wiz-body .tick .fld { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 6px; } .chips .btn { min-width: 0; padding: 1px 6px; min-height: 19px; }
.radio { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0; }
.radio input { margin: 1px 0 0; }
.wiz-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 10px; box-shadow: inset 0 1px var(--lo), inset 0 2px var(--hi); margin-top: 10px; }
.wiz-foot .sp { flex: 1; }
.preview { display: flex; gap: 12px; align-items: flex-start; }
.preview canvas, .preview img { width: 128px; height: 128px; image-rendering: pixelated; box-shadow: var(--field); background: #fff; padding: 2px; }
.cardp { background: #fff; box-shadow: var(--field); padding: 8px; display: flex; gap: 8px; align-items: center; min-width: 0; }
.cardp img, .cardp canvas { width: 48px !important; height: 48px !important; border-radius: 50%; box-shadow: none !important; padding: 0 !important; }
.note { color: #404040; } .note.err { color: #a00000; font-weight: 700; }

/* ---------- documents ---------- */
.notepad { flex: 1; margin: 0; padding: 4px 6px; background: #fff; box-shadow: var(--field); overflow: auto; font: 13px/1.35 "Fixedsys", "Courier New", monospace; white-space: pre-wrap; user-select: text; }
.wordpad { flex: 1; min-height: 0; overflow: auto; background: var(--lo); box-shadow: var(--field); padding: 14px; }
.wordpad .page { max-width: 660px; margin: 0 auto; background: #fff; padding: 46px 56px 60px; box-shadow: 3px 3px 0 #000; font: 15px/1.5 "Times New Roman", Times, serif; user-select: text; }
.wordpad .page h1 { font: 700 26px "Times New Roman", serif; margin: 0 0 4px; text-align: center; }
.wordpad .page h2 { font: 700 18px "Times New Roman", serif; margin: 22px 0 6px; }
.wordpad .page .sub { text-align: center; font-style: italic; margin: 0 0 22px; }
.wordpad .page table { border-collapse: collapse; margin: 8px 0; } .wordpad .page td, .wordpad .page th { border: 1px solid #000; padding: 3px 8px; text-align: left; }
.ruler { height: 22px; background: #fff; box-shadow: var(--field); margin-bottom: 3px; background-image: repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 60px); background-size: 100% 4px, 100% 9px; background-repeat: no-repeat; background-position: 0 100%, 0 100%; }
.fmt { display: flex; gap: 3px; align-items: center; padding: 2px; } .fmt .fld { padding: 1px 3px; }
.fmt .tbtn { min-height: 20px; padding: 1px 6px; font-family: "Times New Roman", serif; font-size: 13px; }
.xl { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--field); }
.xl table { border-collapse: collapse; font: 12px Arial, sans-serif; }
.xl th { background: var(--face); box-shadow: var(--up); font-weight: 400; padding: 1px 6px; min-width: 26px; position: sticky; top: 0; }
.xl th.rh { position: sticky; left: 0; z-index: 1; }
.xl td { border: 1px solid #c8c8c8; padding: 1px 6px; height: 19px; min-width: 70px; white-space: nowrap; }
.xl td.n { text-align: right; } .xl td.h { font-weight: 700; } .xl td.big { font-size: 15px; font-weight: 700; color: var(--navy); }
.xl td.sel { outline: 2px solid #000; outline-offset: -2px; }
.fbar { display: flex; gap: 3px; align-items: center; margin-bottom: 3px; } .fbar .fld { flex: 1; font: 12px Arial, sans-serif; padding: 2px 4px; } .fbar .nm { width: 60px; flex: none; }
.dos { flex: 1; min-height: 0; background: #000; color: #c0c0c0; font: 18px/1.15 "VT323", "Courier New", monospace; padding: 6px 8px; overflow: auto; box-shadow: var(--field); white-space: pre-wrap; word-break: break-all; user-select: text; cursor: text; }
.dos .in { display: inline; outline: none; caret-color: transparent; }
.dos .cur { display: inline-block; width: .6em; height: 3px; background: #c0c0c0; vertical-align: -1px; animation: blinkc 1s steps(1) infinite; }
@keyframes blinkc { 50% { opacity: 0; } }
.dos .g { color: #00ff66; } .dos .y { color: #ffff55; } .dos .r { color: #ff5555; } .dos .w { color: #fff; }
.drives { flex: 1; }
.disp { display: grid; gap: 8px; padding: 8px; }
.monitor { width: 190px; height: 150px; margin: 0 auto; position: relative; background: var(--face); box-shadow: var(--up); padding: 12px 12px 26px; }
.monitor div { width: 100%; height: 100%; box-shadow: var(--field); background: var(--teal); background-size: cover; }
.help { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--field); padding: 10px 14px; font: 12px/1.5 Arial, sans-serif; user-select: text; }
.help h3 { margin: 12px 0 4px; color: var(--navy); } .help h3:first-child { margin-top: 0; }
.welcome { display: flex; gap: 12px; padding: 12px; flex: 1; min-height: 0; }
.welcome .wl { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.welcome .wl h2 { margin: 0; font: 900 24px "Arial Black", Arial, sans-serif; } .welcome .wl h2 b { color: var(--navy); } .welcome .wl h2 i { font-style: normal; color: #008000; }
.welcome .dyk { flex: 1; background: #ffffe1; box-shadow: var(--field); padding: 10px 12px; display: flex; gap: 10px; }
.welcome .dyk svg { width: 32px; height: 32px; flex: none; }
.welcome .dyk b { display: block; margin-bottom: 6px; font-size: 13px; }
.welcome .dyk p { margin: 0; font-size: 13px; line-height: 1.45; }
.welcome .wr { display: flex; flex-direction: column; gap: 6px; width: 130px; } .welcome .wr .btn { width: 100%; }

@media (max-width: 700px) {
  .tree, .coin-r .grp:not(.trade), .wiz-art { display: none; }
  .coin { flex-direction: column; overflow: auto; } .coin-r { width: auto; }
  .chart { min-height: 220px; }
  .koth .k-prog { display: none; }
  .wordpad .page { padding: 20px; }
}

/* ---------- coins living on the desktop ---------- */
.coinlayer { position: absolute; inset: 0; pointer-events: none; }
.dcoin { position: absolute; width: 100px; padding: 0; border: 0; background: none; color: #fff; pointer-events: auto; cursor: default; transition: left .7s ease, top .7s ease; outline: none; }
.dcoin .drop { display: grid; justify-items: center; gap: 3px; animation: coindrop .8s cubic-bezier(.3, 1.4, .6, 1) both; }
@keyframes coindrop { from { transform: translateY(-110vh) rotate(-25deg); } 70% { transform: translateY(6px) rotate(3deg); } to { transform: none; } }
.dcoin .cimg { display: block; transition: width .7s, height .7s; box-shadow: 0 0 0 1px #000, 3px 3px 0 rgba(0,0,0,.35); background: #fff; }
.dcoin .cimg img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.dcoin.grad .cimg { box-shadow: 0 0 0 2px #00ff00, 3px 3px 0 rgba(0,0,0,.35); }
.dcoin .lbl { display: grid; text-align: center; line-height: 12px; padding: 1px 3px; }
.dcoin .lbl b { display: inline-flex; align-items: center; gap: 2px; justify-content: center; }
.dcoin .lbl small { color: #c8ffc8; }
.dcoin.sel .lbl { background: var(--navy); outline: 1px dotted #ffff80; outline-offset: -1px; }
.dcoin.sel .cimg img { filter: sepia(1) hue-rotate(190deg) saturate(3) brightness(.7); }
.pill.chad { background: #000; color: #00ff66 !important; box-shadow: 0 0 0 1px #00ff66; display: inline-flex; align-items: center; gap: 2px; }
.pill.chad svg { width: 12px; height: 12px; }
.pill.chad svg rect[fill="#000"], .pill.chad svg polygon[fill="#000"] { fill: #00ff66; }

/* ---------- Setup (launch ritual) ---------- */
.setup { position: fixed; inset: 0; z-index: 950; background: linear-gradient(180deg, #0000b0 0%, #000060 55%, #000 100%); }
.setup-title { position: absolute; z-index: 3; left: 28px; top: 18px; color: #fff; font: italic 700 clamp(28px, 4vw, 44px) "Times New Roman", serif; text-shadow: 4px 4px 0 #000; }
.setup-dlg { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 24px)); background: var(--face); box-shadow: var(--up); padding: 3px; }
.setup-dlg .tb { background: var(--navy); color: #fff; }
.setup-body { padding: 14px 16px 10px; }
.copyanim { position: relative; display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 20px; }
.copyanim svg { width: 48px; height: 48px; }
.copyanim .fly { position: absolute; left: 70px; right: 70px; top: 0; bottom: 0; }
.copyanim .fly i { position: absolute; left: 0; top: 24px; animation: flyfile 1.2s linear infinite; }
.copyanim .fly i:nth-child(2) { animation-delay: .4s; } .copyanim .fly i:nth-child(3) { animation-delay: .8s; }
.copyanim .fly svg { width: 24px; height: 24px; }
@keyframes flyfile { 0% { left: 0; top: 30px; opacity: 0; } 10% { opacity: 1; } 50% { top: 0; } 90% { opacity: 1; } 100% { left: calc(100% - 24px); top: 30px; opacity: 0; } }
.setup-file { margin: 8px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-bb { margin-top: 12px; padding: 8px 10px; background: #000080; color: #ffff00; font-weight: 700; text-align: center; min-height: 32px; box-shadow: var(--field); }
.setup-done { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.setup-done img { width: 112px; height: 112px; image-rendering: pixelated; background: #fff; box-shadow: var(--field); padding: 2px; flex: none; }
.setup-done h3 { margin: 2px 0 8px; font: 700 16px var(--ui); }
.setup-done p { margin: 0 0 8px; line-height: 1.4; }
.setup .mbtns { display: flex; justify-content: flex-end; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2; }

/* ---------- share ---------- */
.share { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow: auto; }
.sh-gif { position: relative; background: #000; box-shadow: var(--field); padding: 2px; display: grid; place-items: center; min-height: 200px; }
.sh-gif img { max-width: 100%; display: block; }
.sh-gif span { position: absolute; color: #0f0; font: 18px "VT323", monospace; }
.share p { margin: 0; line-height: 1.4; }
.share .mbtns { display: flex; gap: 6px; flex-wrap: wrap; }
a.btn { display: inline-flex; align-items: center; justify-content: center; color: #000; text-decoration: none; }

/* ---------- dial-up ---------- */
.dial { padding: 14px; display: grid; gap: 10px; }
.dial-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dial-dots { display: flex; gap: 6px; } .dial-dots i { width: 6px; height: 6px; background: var(--navy); animation: dot 1s steps(1) infinite; }
.dial-dots i:nth-child(2) { animation-delay: .2s; } .dial-dots i:nth-child(3) { animation-delay: .4s; } .dial-dots i:nth-child(4) { animation-delay: .6s; } .dial-dots i:nth-child(5) { animation-delay: .8s; }
@keyframes dot { 50% { background: #00ff66; } }
.dial-st { text-align: center; }

/* ---------- screensaver ---------- */
.saver { position: fixed; inset: 0; z-index: 990; width: 100%; height: 100%; cursor: none; background: #000; }

/* ---------- skins ---------- */
.skins { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.skins p { margin: 0; line-height: 1.4; } .skins p svg { width: 16px; height: 16px; vertical-align: -3px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sk { background: #fff; border: 0; box-shadow: var(--field); padding: 8px 4px; display: grid; justify-items: center; gap: 4px; cursor: default; }
.sk img { width: 45px; height: 86px; image-rendering: pixelated; }
.sk.on { background: #000080; color: #fff; }
.skins .mbtns { display: flex; justify-content: flex-end; gap: 6px; }

/* ---------- PUMP95 Messenger ---------- */
.msn { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.msn-to { padding: 4px 6px; background: linear-gradient(90deg, #d8e8ff, #fff); box-shadow: var(--well); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-to span { color: #008000; }
.msn-main { flex: 1; min-height: 0; display: flex; gap: 4px; }
.msn-log { flex: 1; min-width: 0; background: #fff; box-shadow: var(--field); padding: 6px 8px; overflow: auto; font: 13px/1.35 Tahoma, Arial, sans-serif; user-select: text; }
.msn-msg { margin-bottom: 6px; } .msn-msg .who { color: #606060; } .msn-msg .txt { padding-left: 12px; word-wrap: break-word; }
.msn-msg.me .who { color: #000080; }
.msn-sys { color: #808080; font-style: italic; margin-bottom: 6px; }
.msn-side { width: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.msn-av { width: 96px; height: 96px; background: #fff; box-shadow: var(--field); padding: 3px; display: grid; place-items: center; }
.msn-av img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.msn-av.me img { height: 86px; }
.msn-tools { display: flex; align-items: center; gap: 2px; } .msn-tools svg { width: 16px; height: 16px; }
.msn-nick { margin-left: auto; color: #404040; }
.msn-in { display: flex; gap: 4px; } .msn-in textarea { flex: 1; font: 13px Tahoma, Arial, sans-serif; } .msn-in .btn { min-width: 64px; }
@media (max-width: 700px) { .msn-side { display: none; } .sk-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- bags, balloons, $PUMP95 monitor, KOTH heat ---------- */
.balloon { position: fixed; right: 8px; bottom: 34px; z-index: 880; width: 280px; background: #ffffe1; border: 1px solid #000; border-radius: 6px; padding: 8px 10px; box-shadow: 2px 2px 0 rgba(0,0,0,.3); cursor: pointer; line-height: 1.4; animation: balloonIn .25s ease-out; }
.balloon::after { content: ""; position: absolute; right: 60px; bottom: -9px; border: 9px solid transparent; border-top-color: #000; border-bottom: 0; }
.balloon b:first-child { display: block; margin-bottom: 3px; }
.balloon .tbb { position: absolute; right: 6px; top: 6px; }
.balloon svg { width: 16px; height: 16px; vertical-align: -3px; }
@keyframes balloonIn { from { transform: translateY(12px); opacity: 0; } }
.gadget { position: absolute; right: 12px; top: 8px; z-index: 1; display: grid; gap: 1px; width: 300px; padding: 2px 2px 4px; background: var(--face); border: 0; box-shadow: var(--up); text-align: left; cursor: pointer; }
.gadget .g-tb { display: flex; align-items: center; gap: 4px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: 700; padding: 2px 4px; }
.gadget .g-tb svg { width: 12px; height: 12px; }
.gadget .g-row { padding: 1px 6px; } .gadget .g-row b { font-size: 13px; } .gadget i { font-style: normal; }
.koth .k-prog.hot .prog i { animation: hot 0.8s steps(2) infinite; }
@keyframes hot { 50% { filter: brightness(1.6) drop-shadow(0 0 3px #ffff00); } }
.koth .k-prog b { color: #ffff00; }
.pumpw { padding: 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: auto; }
.pumpw .chead svg { width: 64px; height: 64px; flex: none; }
#bagtick b { font-size: 11px; }
@media (max-width: 700px) { .gadget { display: none; } .balloon { right: 4px; left: 4px; width: auto; } }

/* ---------- trader tools ---------- */
.warn { color: #a06000; }
.flt { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .flt .fld { padding: 1px 2px; }
.lv td.fav { width: 18px; text-align: center; color: #c08000; font-size: 13px; cursor: pointer; padding: 0 2px; }
.lv tr.sel td.fav { color: #ffff00; }
.lv td.qb { white-space: nowrap; } .lv td.qb .btn { min-width: 0; padding: 0 5px; min-height: 17px; font-size: 10px; margin-right: 2px; }
.lv td.r { font: 12px Tahoma, Verdana, sans-serif; font-variant-numeric: tabular-nums; }   /* numbers: crisper than the 11 px pixel font */
.hint { margin-top: 6px; color: #404040; font-size: 10px; line-height: 1.4; }
.safety { display: grid; gap: 4px; }
.sf-head { display: flex; gap: 10px; align-items: center; padding: 6px; background: #fff; box-shadow: var(--field); margin-bottom: 4px; } .sf-head svg { width: 32px; height: 32px; flex: none; }
.sf-row { display: grid; grid-template-columns: 20px 170px 1fr; gap: 0 8px; align-items: baseline; padding: 4px 6px; background: #fff; box-shadow: var(--well); }
.sf-row i { font-style: normal; font-weight: 700; text-align: center; color: #fff; width: 16px; height: 16px; line-height: 16px; }
.sf-row.ok i { background: #008000; } .sf-row.warn i { background: #c08000; } .sf-row.bad i { background: #c00000; }
.sf-row span { font-weight: 700; } .sf-row small { grid-column: 2 / 4; color: #606060; }

/* ---------- Pocket PC (phones) ---------- */
.cards95 { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--field); padding: 4px; display: grid; gap: 4px; align-content: start; }
.card95 { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; padding: 6px; background: var(--face); box-shadow: var(--up); }
.card95 img { width: 56px; height: 56px; image-rendering: pixelated; background: #fff; box-shadow: var(--field); }
.card95 .c-mid { display: grid; gap: 3px; min-width: 0; font-size: 12px; } .card95 .c-mid > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card95 .c-mid b { font-size: 13px; }
.card95 .c-qb { display: grid; gap: 3px; } .card95 .c-qb .btn { min-width: 44px; min-height: 22px; padding: 1px 4px; font-weight: 700; }
@media (max-width: 700px) {
  .helper { display: block !important; }
  .helper .clippy { width: 40px; height: 76px; }
  .bubble { width: 180px; font-size: 11px; }
  .tray .tk#pumptick { display: flex !important; }
  .toolbar .tbtn:not(.big) span, .flt { display: none; }
  .toolbar .find .fld { width: 120px; }
  .koth { padding: 4px 6px; } .koth img { width: 36px; height: 36px; }
  .tasks .btn { flex-basis: 100px; }
}

/* ---------- calm system ---------- */
.zoomfx { position: fixed; z-index: 990; pointer-events: none; border: 2px solid #808080; outline: 1px solid #fff; }
#mail { position: relative; } #mail .badge { position: absolute; right: -6px; top: -5px; min-width: 13px; height: 13px; padding: 0 2px; background: #c00000; color: #fff; font-size: 9px; line-height: 13px; text-align: center; border-radius: 6px; }
.tick95 { width: 190px; overflow: hidden; white-space: nowrap; cursor: pointer; box-shadow: var(--well); padding: 0 4px; height: 18px; align-items: center; }
.tick95 span { display: inline-block; animation: tick95 40s linear infinite; }
@keyframes tick95 { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tick95 span { animation: none; } }
.dcoin { width: 84px; } .dcoin .lbl small { display: none; }
.koth .k-prog.hot .prog i { animation: none; }
.flash td { animation: flash95 .6s; } @keyframes flash95 { 0% { background: #ffffd8; } }
/* two accents only: green = money / graduated, yellow = King of the Hill; everything else stays Win95 grey */
.pill { background: var(--face); box-shadow: inset -1px -1px #000, inset 1px 1px #fff; color: #000 !important; }
.pill.g { background: #00c853; box-shadow: 0 0 0 1px #000; } .pill.me { background: var(--face); font-weight: 700; }
.pill.chad { background: var(--face); color: #000 !important; box-shadow: inset -1px -1px #000, inset 1px 1px #fff; }
.pill.chad svg rect[fill="#000"], .pill.chad svg polygon[fill="#000"] { fill: #000; }
@media (max-width: 700px) { .tray .tk#mail { display: flex !important; } .tick95 { display: none !important; } }
.pill.kt { background: #ffff00; box-shadow: 0 0 0 1px #000; }