/* misanori Win98 chrome — v53: square bob hero frame + prior v52 polish */
:root{
  --desk:#008080;
  --face:#c0c0c0;
  --face2:#dfdfdf;
  --hilite:#ffffff;
  --shadow:#808080;
  --dkshadow:#000000;
  --title:#000080;
  --title2:#1084d0;
  --ink:#000000;
  --lime:#CCFF00;
  --field:#ffffff;
  --disabled:#808080;
  --magenta:#ff00ff;
  --win-w:min(960px,calc(100% - 24px));
  --font:"MS Sans Serif",Tahoma,"Segoe UI",sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--desk)}
body{
  font:11px/1.35 var(--font);
  color:var(--ink);
  background:var(--desk);
  -webkit-font-smoothing:none;
  image-rendering:auto;
  min-height:100%;
  padding:0 0 36px;
  overflow-x:hidden;
}
a{color:#000080;text-decoration:underline}
a:hover{color:#0000ff}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:#000080;color:#fff}

/* bevel helpers */
.raised{
  background:var(--face);
  border-top:2px solid var(--hilite);
  border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);
  border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--face2);
}
.sunken{
  background:var(--field);
  border-top:2px solid var(--shadow);
  border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);
  border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
}

/* desktop: empty teal, one centered app window */
.desk{min-height:calc(100vh - 36px);padding:16px 12px 48px;display:flex;justify-content:center;align-items:center}
.desk-icons,.dicon{display:none!important}
/* window */
.win{
  width:var(--win-w);
  margin:8px auto 0;
  background:var(--face);
  border-top:2px solid var(--hilite);
  border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);
  border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--face2), 2px 2px 0 rgba(0,0,0,.35);
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 52px);
}
.titlebar{
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(90deg,var(--title),var(--title2));
  color:#fff;padding:3px 3px 3px 4px;min-height:22px;user-select:none;
  flex-shrink:0;
}
.titlebar img{width:16px;height:16px;flex-shrink:0}
.titlebar .title{flex:1;font-weight:700;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px}
.wbtns{display:flex;gap:2px;flex-shrink:0}
.wb{
  width:16px;height:14px;padding:0;line-height:10px;font-size:10px;font-weight:700;
  background:var(--face);color:#000;
  border-top:1px solid var(--hilite);border-left:1px solid var(--hilite);
  border-right:1px solid var(--dkshadow);border-bottom:1px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
  display:grid;place-items:center;
}
.wb:active{border-top-color:var(--dkshadow);border-left-color:var(--dkshadow);border-right-color:var(--hilite);border-bottom-color:var(--hilite);box-shadow:none}
.menubar{display:none!important}
.menubar a,.menubar button{
  background:none;border:0;padding:2px 8px;color:#000;text-decoration:none;font:inherit;
}
.menubar a:hover,.menubar button:hover{background:#000080;color:#fff}
.client{
  flex:1;overflow:auto;padding:8px 12px 10px;
  background:var(--face);
  scrollbar-width:auto;
}
.statusbar{
  flex-shrink:0;display:flex;gap:2px;padding:2px;border-top:1px solid var(--hilite);
  background:var(--face);min-height:20px;
}
.sb-pane{
  flex:1;padding:1px 4px;font-size:11px;
  border-top:1px solid var(--shadow);border-left:1px solid var(--shadow);
  border-right:1px solid var(--hilite);border-bottom:1px solid var(--hilite);
}

/* taskbar */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:30px;display:flex;align-items:center;gap:3px;padding:2px 3px;
  background:var(--face);
  border-top:2px solid var(--hilite);
  box-shadow:inset 0 1px 0 var(--face2);
}
.start{
  display:inline-flex;align-items:center;gap:4px;
  height:24px;padding:0 8px 0 4px;font-weight:700;color:#000;text-decoration:none;
  background:var(--face);
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
}
.start img{width:16px;height:16px}
.start:active,.start.on{
  border-top-color:var(--dkshadow);border-left-color:var(--dkshadow);
  border-right-color:var(--hilite);border-bottom-color:var(--hilite);
  box-shadow:inset 1px 1px 0 var(--shadow);padding:1px 7px 0 5px;
}
.tasks{display:flex;gap:2px;flex:1;min-width:0;overflow:hidden}
.task{
  flex:1;max-width:120px;height:24px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  background:var(--face);color:#000;text-decoration:none;font:inherit;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.task.on,.task:active{
  border-top-color:var(--dkshadow);border-left-color:var(--dkshadow);
  border-right-color:var(--hilite);border-bottom-color:var(--hilite);
  box-shadow:inset 1px 1px 0 var(--shadow);background:#e0e0e0;font-weight:700;
}
.task .ic{display:none}
.tray{
  display:flex;align-items:center;gap:6px;height:24px;padding:0 6px;
  border-top:1px solid var(--shadow);border-left:1px solid var(--shadow);
  border-right:1px solid var(--hilite);border-bottom:1px solid var(--hilite);
  flex-shrink:0;
}
.tray .clock{font-variant-numeric:tabular-nums;min-width:42px;text-align:center}
.tray .xl{color:#000;display:grid;place-items:center;width:18px;height:18px;text-decoration:none}
.tray .navMe{text-decoration:none}

/* hide old top nav chrome if leftover */
.tabs{display:none!important}
.bar{display:none!important}

/* typography */
h1,.t1{font:700 18px/1.2 var(--font);margin:0 0 8px;color:#000}
h2{font:700 12px/1.2 var(--font);margin:10px 0 4px;color:#000;border-bottom:1px solid var(--shadow);padding-bottom:2px}
.lede,.muted{color:#404040}
.small{font-size:11px}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.sec h2{flex:1;margin-top:8px}
.sec a{font-size:11px}
footer{margin:12px 0 2px;text-align:center;color:#404040;font-size:11px}

/* panels / cards */
.card,.rules,.hcard,.pcard,.ivf,.ftot,.to,.amount,.sugg,.emp,.prof,.stats,.claimed,.nf,.drop{
  background:var(--face);
}
.card,.rules,.ivf,.ftot,.to,.sugg,.emp,.nf{
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
  padding:8px 10px;
  margin:0 0 8px;
}
.card.light,.card.blue,.card.ink{background:var(--face);color:#000}
.card.blue.hero h1,.card.blue .lede{color:#000}
.drop{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
  background:#fff;padding:8px 10px;margin:0;
}
.when{font-weight:700;font-size:14px}
.when small{font-weight:400;margin-left:4px;color:#404040}
.cd{display:flex;gap:4px}
.cd div{
  min-width:36px;text-align:center;padding:2px 4px;background:var(--face);
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
}
.cd b{display:block;font-size:14px}
.cd small{font-size:10px;color:#404040}

/* buttons */
.btn,.cgo,.fpill,.ivchip,.fmore,button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-height:24px;padding:3px 12px;
  background:var(--face);color:#000;text-decoration:none;font:700 11px var(--font);
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
  border-radius:0;
}
.btn:active,.cgo:active,.fpill:active,.ivchip:active,.fmore:active,
.btn:active:not(:disabled){
  border-top-color:var(--dkshadow);border-left-color:var(--dkshadow);
  border-right-color:var(--hilite);border-bottom-color:var(--hilite);
  box-shadow:inset 1px 1px 0 var(--shadow);padding:4px 11px 2px 13px;
}
.btn:disabled,.btn[disabled]{color:var(--disabled);text-shadow:1px 1px 0 #fff;cursor:default}
.btn.full,.cgo{width:100%}
.btn.sm{min-height:20px;padding:1px 8px;font-weight:400}
.btn.soft{font-weight:400}
.btn.white{background:var(--face)}
.btn.pill{border-radius:0}
/* primary actions: Win98 silver bevel; lime accent sparingly */
.btn:not(.soft):not(.white):not(.sm),
#payBtn,#signBtn{
  background:var(--lime);color:#000;font-weight:700;
}
#claimBtn,.cgo{
  background:var(--face);color:#000;font-weight:700;
  border-left:3px solid var(--lime);
}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.acts3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px}
.acts .btn,.acts3 .btn{width:100%}

/* inputs */
.input,.cpill,.inv{
  display:flex;align-items:center;gap:6px;
  background:#fff;min-height:28px;padding:2px 6px;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
}
.input span,.cpill>span,.inv>span{color:#404040;flex-shrink:0}
.input input,.cpill input,.inv input,input{
  flex:1;border:0;outline:0;background:transparent;min-width:0;padding:2px 0;font:11px var(--font);
}
.cpill{margin-top:8px}
.cgo{flex:0 0 auto;width:auto;min-width:72px;margin-left:4px}
.cpill .cgo svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hint,.msg{margin-top:6px;min-height:14px;font-size:11px}
.msg.err,.hint.err{color:#800000}
.msg.ok,.hint.ok{color:#008000}
.invtog{background:none;border:0;color:#000080;text-decoration:underline;padding:4px 0;margin-top:6px}
.inv{margin-top:6px}

/* hero win98: large square bob portrait in sunken picture frame */
.hero-media{
  display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px;align-items:center;
}
.hm-frame{
  width:min(300px,72vw);aspect-ratio:1;margin:0 auto;padding:5px;background:var(--face);
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
}
.hm-frame picture,.hero-media picture{display:block;width:100%;height:100%;margin:0;line-height:0}
.hm-bg{
  display:block;width:100%;height:100%;object-fit:contain;object-position:center center;
  background:#CCFF00;image-rendering:auto;-ms-interpolation-mode:bicubic;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
}
.hm-scrim{display:none}
.hm-body{padding:2px 0 0;min-width:0}
.hm-body h1{font-size:20px;margin:0 0 4px}
.hm-body .lede{margin:0 0 8px;font-size:11px}

/* points rules */
.rules .r{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px dotted var(--shadow)}
.rules .r:last-of-type{border-bottom:0}
.rules .pill{
  flex:0 0 36px;height:22px;display:grid;place-items:center;
  background:var(--lime);color:#000;font-weight:700;font-size:11px;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
}
.rules p{margin:0;font-size:11px}
.rules p b{display:block}
.rules p span{display:block;color:#404040}

/* member card = flat Win98 raised panel (no nested titlebar / no glass) */
.mc-wrap{perspective:none;margin:6px auto;max-width:420px}
.mc{
  position:relative;background:var(--face);color:#000;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
  transform:none!important;min-height:0;aspect-ratio:auto;padding:0;overflow:hidden;
}
.mc-shadow,.mc-edge,.mc-face,.mc-tb{display:none!important}
.mc-body{display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.mc-lk{display:block!important;height:40px;width:auto;max-width:220px;object-fit:contain;object-position:left center;image-rendering:auto;
  background:#000;padding:4px 8px 4px 4px;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow)}
.mc-bob{display:none!important}
.mc-mem{font-size:10px;font-weight:700;color:#000080;letter-spacing:.06em;margin-top:2px}
.mc-cap{display:none}
.mc-name{font:700 18px/1.2 var(--font);margin:0}
.mc-name .ccn{font:inherit}
.mc-num{margin-top:2px;font:13px var(--mono);letter-spacing:.08em;
  background:#fff;padding:6px 8px;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
}
.mc-url{font-size:10px;color:#404040}
.mc.idle{animation:none}
.hcard .mc-wrap{margin:0 auto}
.sk.cardk{display:block;height:120px;background:var(--face);
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite)}

/* pay pad */
.amount{text-align:center;padding:12px 0 4px;margin:0}
.amount .v{font:700 40px/1 var(--font);font-variant-numeric:tabular-nums}
.amount .v.zero{color:#808080}
.amount .c{margin-top:4px;color:#404040;font-size:11px}
.pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:8px 0;
}
.pad button{
  height:36px;font:700 16px var(--font);background:var(--face);color:#000;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow);
}
.pad button:active{
  border-top-color:var(--dkshadow);border-left-color:var(--dkshadow);
  border-right-color:var(--hilite);border-bottom-color:var(--hilite);
  box-shadow:inset 1px 1px 0 var(--shadow);
}
.to{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.to .input{flex:1;margin:0}
.note{margin-top:8px}
.sugg{margin-top:4px;padding:4px}
.tosub{padding:4px 2px;color:#404040}

/* avatars */
.av{
  width:32px;height:32px;border-radius:0;flex-shrink:0;
  display:grid;place-items:center;font-weight:700;background:#fff;color:#000;overflow:hidden;position:relative;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
}
.av.md{width:36px;height:36px}
.av.xl{width:56px;height:56px;font-size:22px}
.av.sm,.av.hic{width:28px;height:28px;font-size:11px}
.av .avi,.avi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.btn.av{width:24px;height:24px;padding:0;overflow:hidden;border-radius:0;min-height:24px}
.btn.av .avi{position:static}

/* lists / rows */
.row{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid var(--shadow);text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
.row .nm{font-weight:700}
.row .sub{color:#404040;font-size:11px}
.row .end{margin-left:auto;font-weight:700;text-align:right}
.row .end small{display:block;font-weight:400;color:#404040}
.rk{width:18px;text-align:right;color:#404040;font-variant-numeric:tabular-nums}
.tag{display:inline-block;padding:0 4px;background:var(--lime);border:1px solid #000;font-size:10px;font-weight:700}
.tag.ok{background:#c0ffc0}
.chev{color:#404040}

/* segment control */
.seg{display:flex;gap:0;margin:8px 0;background:var(--face);
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
}
.seg button{
  flex:1;border:0;background:transparent;padding:5px 4px;font:11px var(--font);
  border-right:1px solid var(--shadow);
}
.seg button:last-child{border-right:0}
.seg button.on{
  background:#e0e0e0;font-weight:700;
  box-shadow:inset 1px 1px 0 var(--shadow);
}

/* profile / stats */
.prof{text-align:center;padding:8px 0}
.prof .at{font:700 16px var(--font);margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 0}
.stats>div,.sk.statk{
  text-align:center;padding:6px 4px;background:#fff;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);
}
.stats b{display:block;font-size:16px}
.stats span{font-size:10px;color:#404040}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:4px 8px;background:#fff;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite)}
.chip b{display:block}
.chip small{color:#404040}

/* toggles look like checkbox rows */
.tog{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--shadow)}
.sw{position:relative;width:40px;height:18px;background:#fff;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow)}
.sw input{opacity:0;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw i{position:absolute;top:1px;left:1px;width:14px;height:12px;background:var(--face);
  border-top:1px solid var(--hilite);border-left:1px solid var(--hilite);
  border-right:1px solid var(--dkshadow);border-bottom:1px solid var(--dkshadow);
  transition:left .05s linear}
.sw input:checked+i{left:22px;background:var(--lime)}

/* invite */
.ivf-l{font:12px var(--mono);background:#fff;padding:6px;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite);
  box-shadow:inset 1px 1px 0 var(--dkshadow);word-break:break-all;margin-bottom:8px}
.ivf-b{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ivf-h{margin:10px 0 4px;font-weight:700}
.ivf-c{display:flex;flex-wrap:wrap;gap:4px}
.ivchip{font:11px var(--mono)}
.ivf-u{margin-top:8px;color:#404040;font-size:11px}
.legal{display:flex;gap:12px;justify-content:center;margin:16px 0 4px;font-size:11px}
.back{display:inline-block;margin:0 0 8px;color:#000080}

/* fees */
.ftot{text-align:center;margin-bottom:10px}
.ftot .big{font:700 28px var(--font)}
.frow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--shadow);text-decoration:none;color:inherit}
.frow.off{opacity:.55}
.fl{flex:1;text-decoration:none;color:inherit}
.fl b{display:block}
.fl small{color:#404040}
.fr{display:flex;align-items:center;gap:6px}
.fmore{width:100%;margin-top:6px}

/* empty / skeleton / toast / wallet sheet */
.emp{text-align:center;padding:16px 10px}
.emp-ic{display:none}
.emp b{display:block;margin-bottom:4px}
.emp p{margin:0 0 10px;color:#404040}
.sk{display:block;height:10px;margin:4px 0;background:repeating-linear-gradient(90deg,#dfdfdf 0 8px,#c0c0c0 8px 16px);
  border:1px solid var(--shadow);animation:sk 1s linear infinite}
.sk.av{width:56px;height:56px;margin:0 auto 8px}
.sk.w40{width:40%}.sk.w30{width:30%}.sk.big{height:28px}.sk.row{height:28px;margin:6px 0}
.sk.c{width:32px;height:32px;border-radius:0;flex-shrink:0}
.sk.l1{width:55%;height:10px}.sk.l2{width:35%;height:8px}.sk.e{width:40px;height:12px;margin-left:auto}
.skw .skr{display:flex;align-items:center;gap:8px;padding:6px 0}
.skw .skr span{flex:1}
@keyframes sk{to{background-position:16px 0}}
.meSk{padding:12px}
.so{opacity:1}
html:not([data-auth="1"]) .si{display:none}

#toasts{position:fixed;top:8px;right:8px;z-index:100;display:flex;flex-direction:column;gap:4px;max-width:280px}
.toast{
  display:flex;gap:6px;align-items:flex-start;padding:6px 8px;background:var(--face);color:#000;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:2px 2px 0 rgba(0,0,0,.35);font-size:11px;
}
.toast.err{background:#fff0f0;border-color:var(--magenta)}
.toast.ok{background:#f0fff0}
.toast svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}

/* wallet sheet = Win98 dialog */
.ws-bg{position:fixed;inset:0;background:transparent;z-index:80;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2' fill='%23000'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23000'/%3E%3C/svg%3E");
  background-size:2px 2px;opacity:1}
#wsRoot .ws-bg{opacity:.55}
.ws-box{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:81;width:min(320px,92vw);
  background:var(--face);padding:2px;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow);
  box-shadow:inset -1px -1px 0 var(--shadow), 3px 3px 0 rgba(0,0,0,.4);
}
.ws-hd{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--title),var(--title2));color:#fff;padding:3px 4px;font-weight:700;
}
.ws-x{width:16px;height:14px;padding:0;background:var(--face);border-top:1px solid var(--hilite);border-left:1px solid var(--hilite);border-right:1px solid var(--dkshadow);border-bottom:1px solid var(--dkshadow)}
.ws-x svg{width:10px;height:10px;stroke:#000;stroke-width:2.4;fill:none}
.ws-row{display:flex;align-items:center;gap:8px;width:calc(100% - 12px);margin:6px;padding:6px;background:var(--face);text-align:left;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow)}
.ws-row img{width:32px;height:32px}
.ws-row em{margin-left:auto;font-style:normal;color:#008000;font-size:10px}

.gift{display:flex;gap:8px;align-items:center;padding:8px;margin-bottom:8px;background:#fff;
  border-top:2px solid var(--shadow);border-left:2px solid var(--shadow);
  border-right:2px solid var(--hilite);border-bottom:2px solid var(--hilite)}
.gt-ic svg{width:20px;height:20px;stroke:#000;fill:none;stroke-width:1.6}
.vb{width:12px;height:12px;vertical-align:-1px;display:inline}
.txl{display:inline-flex;align-items:center;gap:2px}
.txl svg{width:10px;height:10px;stroke:currentColor;fill:none}
.note{color:#404040;font-size:11px;margin:8px 0}
.claimed{margin-bottom:12px}
.nf{text-align:center;padding:24px 12px}
.nf img{margin:0 auto 10px}

/* classic scrollbar (webkit) */
.client::-webkit-scrollbar{width:16px;height:16px}
.client::-webkit-scrollbar-track{background:var(--face);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E")}
.client::-webkit-scrollbar-thumb{background:var(--face);
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow)}
.client::-webkit-scrollbar-button{background:var(--face);height:16px;
  border-top:2px solid var(--hilite);border-left:2px solid var(--hilite);
  border-right:2px solid var(--dkshadow);border-bottom:2px solid var(--dkshadow)}

@media (min-width:720px){
  :root{--win-w:min(960px,calc(100% - 48px))}
  .hero-media{grid-template-columns:300px 1fr;align-items:center;gap:18px}
  .hm-frame{width:300px;margin:0}
  .hm-body h1{font-size:22px}
  .amount .v{font-size:48px}
  .home-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .home-grid .span2{grid-column:1/-1}
}
@media (min-width:900px){
  .client{padding:10px 16px 12px}
  .hero-media{grid-template-columns:320px 1fr;gap:22px}
  .hm-frame{width:320px}
}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none}
}

/* v53 wide single app */
.win{margin:0 auto}
.desk{align-items:flex-start;padding-top:20px}
@media (max-width:640px){.desk{padding:0 0 36px;align-items:stretch}.win{width:100%;max-height:calc(100vh - 36px);min-height:calc(100vh - 36px);margin:0;box-shadow:none}
.home-grid{display:block}}