/* ===== UNIPEG 98 — shared chrome ===== */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: Tahoma, "MS Sans Serif", Verdana, Arial, sans-serif; font-size: 13px; color: #1A0510;
  background: #55002F;
  background-image: radial-gradient(circle at 50% 22%, #7A0947 0%, #55002F 58%, #3C0021 100%);
  background-attachment: fixed;
  padding-bottom: 46px;
}
::selection { background: #FF007A; color: #FFF; }
a { color: #B0005E; }
.wrap { max-width: 980px; margin: 0 auto; padding: 22px 14px 40px; }
.mono { font-family: "Courier New", monospace; }
.hl { color: #B0005E; font-weight: bold; }
.muted { color: #5C4152; }

/* ---------- windows ---------- */
.win {
  background: #CFC4CB; padding: 3px; margin-bottom: 20px;
  box-shadow: inset -1px -1px #1A0510, inset 1px 1px #EFE8ED, inset -2px -2px #8A7A84, inset 2px 2px #FFF, 4px 4px 0 rgba(20,0,12,.35);
}
.tbar {
  display: flex; align-items: center; gap: 6px; padding: 4px 5px 4px 8px; user-select: none;
  background: linear-gradient(90deg, #7A0040, #FF007A);
  color: #FFF; font-weight: bold; font-size: 11px;
}
.tbar .ttl { flex: 1; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbtn {
  width: 18px; height: 16px; font-size: 10px; line-height: 1; font-weight: bold; color: #1A0510;
  background: #CFC4CB; display: flex; align-items: center; justify-content: center;
  box-shadow: inset -1px -1px #1A0510, inset 1px 1px #FFF, inset -2px -2px #8A7A84, inset 2px 2px #EFE8ED;
}
.wbody { padding: 12px 14px; line-height: 1.55; }
.wbody.tight { padding: 7px; }
.statusbar { display: flex; gap: 3px; padding: 2px 3px 3px; }
.statusbar .cell {
  flex: 1; font-size: 10px; padding: 3px 7px; color: #3A2030; background: #CFC4CB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 1px 1px #8A7A84, inset -1px -1px #FFF;
}
.statusbar .cell.fix { flex: 0 0 auto; }

/* ---------- controls ---------- */
.b98 {
  display: inline-block; text-decoration: none; text-align: center;
  font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; font-size: 11px; color: #1A0510 !important;
  background: #CFC4CB; border: 0; padding: 5px 14px; min-width: 84px; cursor: pointer;
  box-shadow: inset -1px -1px #1A0510, inset 1px 1px #FFF, inset -2px -2px #8A7A84, inset 2px 2px #EFE8ED;
}
.b98:hover { text-decoration: none; background: #DBD1D7; }
.b98:active { box-shadow: inset -1px -1px #FFF, inset 1px 1px #1A0510, inset -2px -2px #EFE8ED, inset 2px 2px #8A7A84; }
.b98.primary { font-weight: bold; outline: 1px dotted #1A0510; outline-offset: -5px; }
.b98.big { font-size: 14px; padding: 10px 28px; min-width: 100px; }
.b98.wide { width: 100%; padding: 8px 0; font-size: 13px; }
.b98.sm { min-width: 0; padding: 3px 8px; font-size: 10px; }
.b98[disabled], .b98.off { color: #8A7A84 !important; text-shadow: 1px 1px 0 #FFF; cursor: default; }
.b98[disabled]:hover, .b98.off:hover { background: #CFC4CB; }
.b98.on { box-shadow: inset -1px -1px #FFF, inset 1px 1px #1A0510, inset -2px -2px #EFE8ED, inset 2px 2px #8A7A84; background: #E4DAE0; font-weight: bold; }
input.i98, select.i98 {
  font-family: "Courier New", monospace; font-size: 13px; color: #1A0510; background: #FFF; border: 0; padding: 5px 7px; width: 100%;
  box-shadow: inset -1px -1px #FFF, inset 1px 1px #1A0510, inset -2px -2px #EFE8ED, inset 2px 2px #8A7A84;
}
input.i98[readonly] { background: #E9E2E6; }
fieldset { margin: 0 0 10px; padding: 8px 10px 10px; border: 1px solid #8A7A84; box-shadow: 1px 1px 0 #FFF, inset 1px 1px 0 #FFF; }
legend { font-size: 11px; padding: 0 5px; background: #CFC4CB; }

/* ---------- tables ---------- */
.lvwrap { background: #FFF; box-shadow: inset -1px -1px #FFF, inset 1px 1px #1A0510, inset -2px -2px #EFE8ED, inset 2px 2px #8A7A84; overflow: auto; }
table.lv { width: 100%; border-collapse: collapse; font-size: 11px; background: #FFF; }
table.lv th {
  text-align: left; font-weight: normal; background: #CFC4CB; padding: 4px 9px; white-space: nowrap; position: sticky; top: 0; z-index: 2;
  box-shadow: inset -1px -1px #8A7A84, inset 1px 1px #FFF;
}
table.lv th.sortable { cursor: pointer; user-select: none; }
table.lv th.sortable:hover { background: #DBD1D7; }
table.lv td { padding: 4px 9px; border-bottom: 1px dotted #E4DAE0; font-family: "Courier New", monospace; font-size: 11px; white-space: nowrap; }
table.lv td.n, table.lv th.n { text-align: right; }
table.lv tr:hover td { background: #FFE0F1; }
table.lv tr.clickable { cursor: pointer; }
table.props { width: 100%; border-collapse: collapse; font-size: 12px; }
table.props td { padding: 4px 5px; vertical-align: top; }
table.props td:first-child { color: #5C4152; width: 38%; white-space: nowrap; }
.buyc { color: #0A7A2A; font-weight: bold; } .sellc { color: #B01818; font-weight: bold; }
.addc { color: #0A5A8A; font-weight: bold; } .remc { color: #8A5A0A; font-weight: bold; }
.up { color: #0A7A2A; } .down { color: #B01818; }

/* ---------- stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat { background: #CFC4CB; padding: 3px; box-shadow: inset -1px -1px #1A0510, inset 1px 1px #EFE8ED, inset -2px -2px #8A7A84, inset 2px 2px #FFF, 3px 3px 0 rgba(20,0,12,.3); }
.stat .sbody { padding: 9px 11px; }
.stat .lbl { font-size: 10px; color: #5C4152; text-transform: uppercase; letter-spacing: 1px; }
.stat .val { font-family: "Courier New", monospace; font-size: 16px; font-weight: bold; color: #B0005E; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .sub2 { font-size: 10px; color: #5C4152; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- progress ---------- */
.prog { height: 14px; background: #FFF; padding: 2px; box-shadow: inset -1px -1px #FFF, inset 1px 1px #1A0510, inset -2px -2px #EFE8ED, inset 2px 2px #8A7A84; }
.prog .bar { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, #FF007A 0 9px, #CFC4CB 9px 12px); transition: width .2s; }

/* ---------- taskbar ---------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 34px; background: #CFC4CB; z-index: 1000;
  display: flex; align-items: center; gap: 4px; padding: 3px 5px; overflow-x: auto;
  box-shadow: inset 0 1px #FFF, inset 0 2px #EFE8ED, 0 -1px #1A0510;
}
#taskbar .b98 { min-width: 0; padding: 4px 11px; font-size: 11px; flex: 0 0 auto; white-space: nowrap; }
#taskbar .start { font-weight: bold; }
#taskbar .start .peg { color: #FF007A; font-size: 14px; }
#taskbar .spacer { flex: 1; }
#tray { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 4px 9px; flex: 0 0 auto; box-shadow: inset 1px 1px #8A7A84, inset -1px -1px #FFF; }
#tray .dot { width: 8px; height: 8px; background: #0A7A2A; box-shadow: inset -1px -1px #063; }
#tray .dot.err { background: #B01818; }
#tray .dot.warn { background: #C89A00; }
.hide-m2 { display: inline-block; }

/* ---------- toast ---------- */
#toasts { position: fixed; right: 10px; bottom: 42px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
.toast { background: #CFC4CB; padding: 3px; box-shadow: inset -1px -1px #1A0510, inset 1px 1px #EFE8ED, inset -2px -2px #8A7A84, inset 2px 2px #FFF, 4px 4px 0 rgba(20,0,12,.4); }
.toast .tb { display: flex; gap: 6px; padding: 3px 5px 3px 8px; background: linear-gradient(90deg, #7A0040, #FF007A); color: #FFF; font-size: 11px; font-weight: bold; }
.toast .tb .ttl { flex: 1; }
.toast .tb .x { cursor: pointer; }
.toast .body { padding: 9px 11px; font-size: 11px; line-height: 1.5; word-break: break-word; }

/* ---------- pixel logo ---------- */
.pxlogo { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
.tbar .pxlogo { width: 14px; height: 14px; flex: 0 0 auto; }
#taskbar .pxlogo { width: 15px; height: 15px; margin-right: 3px; }

/* ---------- x / twitter ---------- */
.xbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; }
.xbtn svg { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }
.foot .xlink { color: #D983B4; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.foot .xlink:hover { color: #FFF; }
.foot .xlink svg { width: 11px; height: 11px; fill: currentColor; }

/* ---------- gmgn ---------- */
.gmgn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.gmgn-btn img { width: 20px; height: 20px; image-rendering: pixelated; display: block; }
.gmgn-btn .fallback { font-size: 16px; line-height: 1; }
.gmgn-note {
  background: #FFF3CD; padding: 8px 10px; font-size: 11px; line-height: 1.55; margin-top: 10px;
  box-shadow: inset 1px 1px #8A7A84, inset -1px -1px #FFF;
}
.gmgn-note b { color: #7A0040; }

.foot { text-align: center; color: #B25B8C; font-size: 11px; line-height: 1.7; padding: 8px 0 22px; }
.foot b { color: #D983B4; letter-spacing: 1px; }

@media (max-width: 820px) {
  .wrap { padding: 14px 8px 30px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat .val { font-size: 14px; }
  .hide-m2, .hide-m3 { display: none; }
  .wbody { padding: 10px 10px; }
  table.lv th, table.lv td { padding: 4px 6px; }
  table.props td:first-child { width: 34%; }
  table.props td.mono { word-break: break-all; white-space: normal; }
  #toasts { left: 8px; right: 8px; max-width: none; }
}
@media (max-width: 420px) {
  .stat .val { font-size: 12px; }
  .stat .sub2 { display: none; }
  .statusbar .cell.fix { display: none; }
  table.lv td, table.lv th { font-size: 10px; }
}