/* ---------------------------------------------------------------- desktop ---
   The RH Sniper desktop shell: a 1998 window manager wearing a hex dump.

   Two rules run this file:
     1. Chrome is drawn with the classic bevel — four inset box-shadows fake the
        raised/sunken edges Windows 98 drew with real 3D borders. Nothing here
        uses an image, so the whole OS is a few kilobytes of CSS. On a dark face
        the ramp inverts: the light stop is a lifted grey (--hi), never white,
        because a white bevel haloes every window it touches.
     2. Nothing is bright unless it means something. The ground is near-black,
        the wallpaper is hash rain — '#' glyphs falling one row per block — and
        only three colours are allowed to shout over it: phosphor green for
        live and money up, amber for the brand and every headline, red for
        money down. Those three glow (text-shadow, ~35% alpha) on interactive
        and live elements only; body copy and static panels never do.

   It intentionally does NOT ride on styles.css / sniper.css — those paint the
   app's own dark theme, and mixing the two would fight over <body>.          */

:root{
  /* brand — same roles, new paint */
  --gold:#ffc247;  --gold2:#f0a020; --goldD:#5a3c00;   /* headline / brand */
  --acc:#3dff9e;   --accD:#0d7d4e;                     /* phosphor: live, gains */
  --hot:#ff4f5f;                                       /* losses, alerts */

  /* chrome — dark bevel replacing parchment */
  --face:#12151a; --face2:#0d1015; --faceHi:#1c212a;
  --ink:#cfe0d7;  --ink2:#7d8e87;
  --hi:#2a323d;   --sh:#05070a;   --shD:#000000;

  /* the rain + the ground */
  --bg:#08090b;   --bg2:#0d0f13;
  --rain:#173a2b;      /* still used by the window chrome gradients */
  --rainLead:#3dff9e;
  --grid:#101820;

  /* The wallpaper is black and white on purpose. It sits behind everything,
     all day: colour there competes with the tools in front of it, and the one
     colour worth spending on this page is the tier of a pass. */
  --hrGrid:#101215;    /* the static lattice */
  --hrDim:#3a3f47;     /* a drop's tail */
  --hrHead:#ffffff;    /* the lit head of a drop */
  --hrWord:#e8ecf2;    /* the easter eggs */
  --hrBlock:#9aa1ab;   /* a blocked-out glyph */

  --tbarH:44px;
  --mono:'IBM Plex Mono','DejaVu Sans Mono',ui-monospace,Consolas,monospace;
  --pix:'Press Start 2P','IBM Plex Mono',Consolas,monospace;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;overflow:hidden;                 /* the shell never scrolls, its windows do */
  font-family:var(--mono);font-size:13px;color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* Bevels. .raise reads as a button you can press, .sink as a hole in the face. */
.raise{box-shadow:inset -1px -1px 0 1px var(--shD),inset 1px 1px 0 1px var(--hi),
                   inset -2px -2px 0 2px var(--sh),inset 2px 2px 0 2px var(--faceHi)}
.sink{box-shadow:inset 1px 1px 0 1px var(--sh),inset -1px -1px 0 1px var(--hi),
                 inset 2px 2px 0 2px var(--shD),inset -2px -2px 0 2px var(--faceHi)}

/* ------------------------------------------------------------- wallpaper -- */

#wallpaper{position:fixed;inset:0;z-index:0;
  background:linear-gradient(var(--bg) 0%,var(--bg2) 46%,var(--grid) 62%,var(--rain) 63%,var(--bg) 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The rain canvas sits over the ground and under everything else. It is never
   interactive, and it is the only thing on the page that repaints constantly —
   so it gets its own layer and stays out of the desktop's way. */
#rain{position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none}

/* Two passes over the top, both static, both cheap, and between them they are
   most of why it reads as a title sequence rather than a screensaver: a
   vignette that drops the corners so the middle of the screen is where the eye
   goes, and scanlines fine enough to be felt rather than seen. */
#wallpaper::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(rgba(255,255,255,.022) 0 1px,rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse 78% 68% at 50% 46%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
}

/* ------------------------------------------------------------------ desk -- */

#desk{position:fixed;inset:0 0 var(--tbarH) 0;z-index:1}

/* The icon layer is the WHOLE desktop now, not a column down the left, because
   icons can be dragged anywhere on it. Each one is absolutely placed and the
   arrangement is stored per wallet. */
#icons{position:absolute;inset:12px 12px 8px 10px}

.icon{
  position:absolute;
  width:92px;padding:7px 4px 6px;border:1px dotted transparent;border-radius:2px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;text-align:center;
  touch-action:none;              /* the drag is ours, not the browser's */
  user-select:none;
}
/* Lifted while it is being moved: no transition, or it lags the pointer. */
.icon.moving{z-index:4;opacity:.9;filter:brightness(1.1)}
.icon.moving .lbl{background:var(--gold2);color:#0a0d0b}
.icon .glyph{width:44px;height:44px;display:block;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.38))}
/* A chip behind the label, because phosphor-on-rain is a coin flip otherwise. */
.icon .lbl{
  font-size:11.5px;font-weight:600;line-height:1.3;color:var(--ink);letter-spacing:.2px;
  padding:2px 5px;max-width:88px;word-wrap:break-word;
  background:rgba(22,44,30,.62);border:1px solid rgba(0,0,0,.3);
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.icon.sel .lbl{background:var(--gold2);color:#0a0d0b;border-color:var(--hi);
  text-shadow:none;outline:1px dotted var(--hi)}
.icon:hover .glyph{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.38)) brightness(1.08)}
/* Coming soon: drained of colour and clearly inert. It still takes focus and
   still reads, because a greyed icon that cannot be tabbed to is invisible to
   anyone using a keyboard — it just does not open anything. */
/* Coming soon means INERT, in every state. It kept lighting up on hover and
   its label still took the gold selected treatment, so a locked icon looked
   like a live one the moment a cursor crossed it — which is worse than no
   feedback at all, because it reads as a thing that is about to open.
   !important on the two state rules because they are the ones being overruled,
   and the specificity of .icon:hover .glyph is otherwise higher than this. */
/* Greyscale alone was not enough and it took measuring to see why: it removes
   HUE, not CONTRAST. The pass icons are twelve gold cells and a row of white
   marks on a dark card, so desaturating them left the brightest icons on the
   desktop — correctly grey, still shouting. Dropping opacity is what actually
   makes them recede, because it pulls them toward the wallpaper instead of
   just draining the colour out of them. */
.icon.soon{filter:grayscale(1) brightness(.5);opacity:.45;cursor:default}
.icon.soon:hover,
.icon.soon:focus,
.icon.soon.sel{filter:grayscale(1) brightness(.5);opacity:.45}
.icon.soon:hover .glyph{filter:none !important}
.icon.soon.sel .lbl{background:transparent !important;color:#8b93a1 !important;
  border-color:transparent}
.icon.soon .lbl{color:#8b93a1}
.soonTag{
  display:block;margin-top:5px;
  font-family:var(--mono);font-size:8px;letter-spacing:1.2px;text-transform:uppercase;
  color:#7d8695;background:rgba(4,6,10,.72);border:1px solid #2a303a;
  padding:2px 5px;
}
.icon.dragging{opacity:.45}
.icon.over .lbl{background:var(--acc);color:#04140d;text-shadow:none}

/* The desktop is open to everyone while only the scanner is live: the tools
   that need a pass are all "coming soon" anyway, so gating the whole surface
   on a wallet would just be a second wall in front of a locked door. */
body.signed-out #taskbar .btn98:not(.start){pointer-events:none;opacity:.6}

/* --------------------------------------------------------------- windows -- */

#windows{position:absolute;inset:0;pointer-events:none}

.win{
  position:absolute;pointer-events:auto;
  background:var(--face);border:2px solid var(--hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.35),
             inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);
  display:flex;flex-direction:column;min-width:220px;
}

.tbar{
  display:flex;align-items:center;gap:8px;height:28px;padding:0 4px 0 7px;flex:none;
  background:linear-gradient(180deg,var(--faceHi),var(--face2));color:var(--ink2);cursor:default;
  border-bottom:2px solid var(--hi);text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.tbar.active{text-shadow:none}
.tbar.active{background:linear-gradient(180deg,var(--gold),var(--gold2) 70%,var(--goldD));color:#0a0d0b}
.tbar .ttl{font-family:var(--pix);font-size:9px;letter-spacing:.4px;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px}
.tbar .tico{width:16px;height:16px;flex:none;display:block}
.tbar .tbtns{display:flex;gap:3px;flex:none}
.tbar button{
  width:20px;height:19px;padding:0;border:2px solid var(--hi);background:var(--face);
  font:700 12px/1 var(--mono);color:var(--ink);cursor:pointer;
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);
  display:grid;place-items:center;
}
.tbar button:hover{background:var(--faceHi)}
.tbar button:active{box-shadow:inset -1px -1px 0 var(--hi),inset 1px 1px 0 var(--sh);transform:translate(1px,1px)}
.tbar button.x:hover{background:var(--hot);color:#0a0d0b}

.wbody{
  flex:1;min-height:0;overflow:auto;padding:12px 13px 14px;
  background:var(--faceHi);
  box-shadow:inset 1px 1px 0 var(--sh),inset 2px 2px 0 var(--face2);
  line-height:1.5;
}
.win.max{inset:0 0 0 0 !important;width:auto !important;height:auto !important}
.win.min{display:none}

/* window content kit */
.wbody h2{font-family:var(--pix);font-size:11px;line-height:1.6;margin:0 0 10px;color:var(--gold)}
.wbody h3{font-family:var(--pix);font-size:8px;line-height:1.7;margin:16px 0 7px;color:var(--ink2);
  text-transform:uppercase}
.wbody p{margin:0 0 10px}
.wbody b{color:var(--gold)}
.wbody ul{margin:0 0 10px;padding-left:18px}
.wbody li{margin:0 0 4px}
.wbody a{color:#5cc8ff}

.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 7px;border:2px solid var(--hi);background:var(--acc);color:#04140d;margin-bottom:10px}
.pill.soon{background:var(--gold)}

.field{border:2px solid var(--hi);background:var(--face2);padding:9px 11px;margin:0 0 10px;
  box-shadow:inset 1px 1px 0 var(--sh)}
.field .k{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink2)}
.field .v{font-size:15px;font-weight:700}

.rows{border:2px solid var(--hi);background:var(--face2);box-shadow:inset 1px 1px 0 var(--sh);margin-bottom:12px}
.rows .r{display:flex;align-items:center;gap:9px;padding:6px 9px;border-bottom:1px dotted var(--hi);font-size:12px}
.rows .r:last-child{border-bottom:0}
.rows .r .sq{width:16px;height:16px;flex:none;border:1px solid var(--hi);
  background:linear-gradient(135deg,var(--gold),var(--gold2))}
.rows .r .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .r .tg{font-size:10.5px;font-weight:700;color:var(--acc)}
.rows .r .tg.bad{color:var(--hot)}

.kvs{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12px;margin-bottom:12px}
.kvs dt{color:var(--ink2)}
.kvs dd{margin:0;font-weight:700;word-break:break-all}

.note{font-size:11.5px;color:var(--ink2);border-left:3px solid var(--gold2);padding-left:9px;margin:0}

.rows .r svg,#startMenu svg,#tasks svg,.tbar .tico{flex:none;display:block}

/* ---------------------------------------------------------------- button -- */

.btn98{
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);
  background:var(--face);border:2px solid var(--hi);padding:6px 13px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);
}
.btn98:hover{background:var(--faceHi)}
.btn98:active{box-shadow:inset -1px -1px 0 var(--hi),inset 1px 1px 0 var(--sh);transform:translate(1px,1px)}
.btn98.primary{background:linear-gradient(180deg,var(--gold),var(--gold2));font-weight:700}
.btn98.primary:hover{filter:brightness(1.06)}
.btn98.go{background:linear-gradient(180deg,var(--acc),var(--accD));font-weight:700}
.btn98.wide{width:100%;justify-content:center}
.btn98[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btnRow{display:flex;gap:8px;flex-wrap:wrap}

/* --------------------------------------------------------------- taskbar -- */

/* A faint bar, not a branded one.
   It used to be a solid panel carrying the project name, a fake ETH ticker and
   a LIVE lamp — three things competing with the desktop for attention at the
   one edge of the screen nobody is looking at. Now it is translucent enough
   that the rain keeps falling behind it, with a start button and a clock: the
   shape everyone already knows, in this palette. */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--tbarH);z-index:5;
  display:flex;align-items:center;gap:6px;padding:0 6px;
  background:rgba(12,14,20,.82);
  backdrop-filter:blur(2px);
  border-top:1px solid rgba(255,194,71,.22);
  box-shadow:0 -1px 0 rgba(0,0,0,.6);
}
#taskbar .start{font-family:var(--pix);font-size:9px;padding:8px 14px;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--gold),var(--gold2));flex:none}
#taskbar .start .startMark{font-family:var(--mono);font-size:15px;color:#0a0d0b}
#taskbar .start .startTxt{text-transform:none}
#taskbar .start[aria-expanded="true"]{box-shadow:inset -1px -1px 0 var(--hi),inset 1px 1px 0 var(--sh)}

#tasks{flex:1;min-width:0;display:flex;gap:5px;overflow:hidden;padding:0 4px}
#tasks .task{
  flex:0 1 172px;min-width:56px;justify-content:flex-start;font-size:11.5px;font-weight:600;
  padding:6px 9px;overflow:hidden;white-space:nowrap;
}
#tasks .task .tn{overflow:hidden;text-overflow:ellipsis}
#tasks .task.on{background:var(--face2);
  box-shadow:inset -1px -1px 0 var(--hi),inset 1px 1px 0 var(--sh)}
#tasks .task svg{flex:none}

/* Just the clock. No sunken tray well around a single item. */
#tray{flex:none;display:flex;align-items:center;height:32px;padding:0 12px}
.trayCell{font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;
  display:flex;align-items:center;color:#c3ccd9}
.trayCell.live{font-family:var(--pix);font-size:7px;color:var(--acc);text-shadow:0 0 6px rgba(61,255,158,.35)}
.trayCell .dot{width:8px;height:8px;background:var(--acc);border:1px solid #04140d;
  display:block;animation:blip 1.6s steps(2,end) infinite}
@keyframes blip{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* start menu */
#startMenu{
  position:fixed;left:6px;bottom:var(--tbarH);z-index:6;width:238px;
  background:var(--face);border:2px solid var(--hi);
  box-shadow:4px -4px 0 rgba(0,0,0,.3),inset 1px 1px 0 var(--hi);
  padding:4px;
}
#startMenu .smHead{font-family:var(--pix);font-size:8px;padding:9px 8px;margin-bottom:4px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));color:#0a0d0b}
#startMenu .smItem{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;
  background:none;border:0;font:600 12px var(--mono);color:var(--ink);cursor:pointer;text-align:left;
  text-decoration:none}
#startMenu .smItem:hover{background:var(--gold2);color:#0a0d0b}
#startMenu .smItem[disabled]{opacity:.5;cursor:not-allowed}
#startMenu hr{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:4px 2px}

/* ------------------------------------------------------------ login gate -- */

#gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(1px)}
body.signed-in #gate{display:none}

/* ---------------------------------------------------- wallet picker sheet -- */

.modal{position:fixed;inset:0;z-index:30;display:none;place-items:center;
  background:rgba(0,0,0,.68)}
.modal.on{display:grid}
.sheet{position:static;width:min(400px,calc(100vw - 32px))}
.sheetLede{margin:0 0 11px;font-size:12px;color:var(--ink2)}
#walletList{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.wbtn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;cursor:pointer;
  font:600 12.5px var(--mono);color:var(--ink);
  background:var(--face);border:2px solid var(--hi);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh)}
.wbtn:hover{background:var(--faceHi)}
.wbtn img{width:22px;height:22px;border:1px solid var(--hi)}
.wbtn .ph{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--hi);
  background:var(--gold)}
.wbtn small{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2)}
.msg{display:none;margin:0 0 10px;padding:8px 10px;font-size:11.5px;border:2px solid var(--hi);
  background:var(--face2)}
.msg.on{display:block}
.msg.err{background:#2a0d12;color:var(--hot);font-weight:600}
.msg.info{background:#0b2019}

/* --------------------------------------------------------------- laptops -- */

/* ================================================================ phone ====
   The desktop metaphor stops here.

   A wrapping grid of icons and one full-screen window at a time. No dragging,
   no cascade, no arranging — none of which mean anything on a screen you hold
   in one hand, and all of which were actively in the way: the icon column ran
   off the bottom and piled up, and a "small" window came out 260px wide and
   pushed to the right to clear icons that are no longer in a column.

   Keep 760px in step with isPhone() in desktop.js. */
@media (max-width:760px){
  #icons{
    /* 52px of headroom: #connbar is fixed at the top and would otherwise
       sit on the first row of icons. */
    inset:52px 6px 8px 6px;width:auto;
    /* Grid, not flex, and the tracks are minmax(0,1fr) rather than 1fr.
       That zero is doing the work: flex items and default grid tracks both
       refuse to shrink below their content, and the widest child here is the
       COMING SOON tag — so four "25%" columns measured wider than the screen
       and the fourth was clipped off the right edge. */
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    align-content:start;gap:4px 0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  /* Beats the absolute placement the desktop uses; nothing sets inline
     left/top on a phone, but a layout saved on a desktop would still be in
     localStorage and would otherwise be applied here. */
  .icon{
    position:static !important;left:auto !important;top:auto !important;
    width:auto !important;max-width:none;min-width:0;padding:8px 2px 7px;
  }
  .icon .glyph{width:38px;height:38px}
  /* Wrap rather than clip: a two-line "My Portfolio" beats "My Portfoli". */
  .icon .lbl{font-size:10px;max-width:100%;line-height:1.15;word-break:break-word}
  /* The tag is the widest thing in the cell, so it is the thing that has to
     agree to be clipped. */
  .icon .soonTag{
    font-size:6px;letter-spacing:.4px;padding:1px 3px;
    max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  }
  .icon.bin{margin-top:0}

  /* One window, all of the desk. */
  .win{
    left:0 !important;top:0 !important;
    width:100% !important;height:100% !important;
    border-width:0;box-shadow:none;min-width:0;
  }
  /* A titlebar you can actually hit: 28px of chrome with 16px buttons is a
     desktop measurement being asked to take a thumb. */
  .tbar{height:44px;padding:0 6px 0 12px;gap:10px}
  .tbar .ttl{font-size:11px}
  .tbar .tico{width:20px;height:20px}
  .tbar .tbtns{gap:6px}
  .tbar button{min-width:40px;height:34px;font-size:15px}
}
/* Short screens are usually phones in landscape: keep the icon grid, just
   tighten it. The old rule assumed the vertical column. */
@media (max-height:660px) and (min-width:761px){
  #icons{gap:0}
  .icon{padding:3px 4px}
  .icon .glyph{width:34px;height:34px}
}

@media (prefers-reduced-motion:reduce){
  #taskbar .dot{animation:none}
}

/* ====================================================== the centre icon ====
   "Immerse yourself" is not in the icon column and cannot be binned, so it
   does not get the column's treatment either. It is a lit plinth standing over
   the wallpaper, and hovering it snaps a reticle onto it — aimed at the one
   thing on the desktop that is not a utility.                                */

#centre{position:absolute;inset:0;pointer-events:none;z-index:2}

.icon.centre{
  position:absolute;left:50%;top:41%;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;width:auto;padding:0;gap:0;border:0;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);
}
@keyframes haloPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
                     50%{opacity:.9;transform:translate(-50%,-50%) scale(1.04)}}

/* corner brackets that snap in from outside — the "lock on" */
.icon.centre .ret{position:absolute;left:50%;top:56px;width:150px;height:150px;
  transform:translate(-50%,-50%) scale(1.35);opacity:0;pointer-events:none;
  transition:transform .16s cubic-bezier(.2,1.5,.4,1),opacity .14s}
.icon.centre .ret i{position:absolute;width:26px;height:26px;
  border:4px solid var(--gold);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(1px 1px 0 rgba(0,0,0,.7))}
.icon.centre .ret i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.icon.centre .ret i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.icon.centre .ret i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.icon.centre .ret i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}

.icon.centre .plinth{position:absolute;left:50%;top:120px;width:150px;height:22px;
  transform:translate(-50%,0);pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,214,120,.7) 0%,rgba(255,209,102,0) 72%);
  transition:width .18s,opacity .18s}
.icon.centre .glyph{
  position:relative;width:116px;height:116px;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.45));
  animation:centreFloat 4.6s ease-in-out infinite;
}
@keyframes centreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.icon.centre .lbl{
  position:relative;margin-top:14px;max-width:none;
  font-family:var(--pix);font-size:12px;line-height:1.5;letter-spacing:.4px;
  padding:9px 15px;color:#0a0d0b;text-shadow:none;
  background:linear-gradient(180deg,var(--gold),var(--gold2) 72%,var(--goldD));
  border:2px solid var(--hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.4),inset 1px 1px 0 rgba(255,255,255,.28);
  transition:filter .18s,box-shadow .18s;
}
.icon.centre .hint{
  position:relative;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  color:var(--ink);padding:2px 7px;background:rgba(22,44,30,.72);border:1px solid rgba(0,0,0,.35);
  opacity:0;transform:translateY(-3px);transition:opacity .18s,transform .18s;
}

.icon.centre:hover,.icon.centre:focus-visible{transform:translate(-50%,-50%) scale(1.07);outline:0}
.icon.centre:hover .ret,.icon.centre:focus-visible .ret{opacity:1;transform:translate(-50%,-50%) scale(1)}
.icon.centre:hover .glyph,.icon.centre:focus-visible .glyph{
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,209,102,.95)) brightness(1.06)}
.icon.centre:hover .lbl,.icon.centre:focus-visible .lbl{
  filter:brightness(1.08);box-shadow:4px 4px 0 rgba(0,0,0,.45),inset 1px 1px 0 rgba(255,255,255,.3)}
.icon.centre:hover .hint,.icon.centre:focus-visible .hint{opacity:1;transform:translateY(0)}
.icon.centre:hover .plinth{width:185px;opacity:.8}
.icon.centre.sel .lbl{outline:2px dotted var(--hi);outline-offset:2px}
.icon.centre:active{transform:translate(-50%,-50%) scale(1.02)}

/* the burn ladder in the Immerse window */
.ladder{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ladder .tier{font-family:var(--pix);font-size:8px;line-height:1.6;padding:7px 8px;
  border:2px solid var(--hi);box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.ladder .lstep{font-size:10px;font-weight:700;color:var(--ink2)}

/* ==================================================== the two big windows ==
   The Mint Scanner and My Portfolio windows reproduce /index.html and
   /profile.html section for section — same order, same density, same
   information design — in the desktop's hex-dump chrome rather than the
   app's own layout. Both are namespaced (.sc- / .pf-) so nothing here can leak
   into the window kit above.                                                */

.win[data-id="portfolio"] > .wbody,
.win[data-id="scanner"] > .wbody{padding:0;background:var(--face)}

.pf,.sc{font-family:var(--mono);color:var(--ink);line-height:1.45}
.pf{min-width:960px}
.sc{min-width:920px}
.pf-grow{flex:1;min-width:0}
.pf-est{font-size:13px;color:var(--ink2);white-space:nowrap}

/* small control kit shared by both windows */
.pf-btn,.pf-qm{
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--face);border:2px solid var(--hi);padding:5px 10px;cursor:pointer;
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);white-space:nowrap;
}
.pf-btn:hover,.pf-qm:hover{background:var(--faceHi)}
.pf-btn.strong{background:linear-gradient(180deg,var(--gold),var(--gold2));font-weight:700}
.pf-qm{font-size:12px;padding:4px 9px}
.pf-tog{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);white-space:nowrap}
.pf-tog input{accent-color:var(--gold2);width:15px;height:15px;margin:0}
.pf-f{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2);white-space:nowrap}
.pf-f select,.pf-f input,.sc-filters input[type=search]{
  font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--face2);
  border:2px solid var(--hi);padding:3px 5px;box-shadow:inset 1px 1px 0 var(--sh)}
.pf-f input[type=number]{width:52px}

/* ------------------------------------------------------ portfolio: header -- */

.pf-id{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:13px 16px 11px;border-bottom:2px solid var(--hi);
  background:linear-gradient(180deg,var(--faceHi),var(--face))}
.pf-idmain{display:flex;align-items:center;gap:12px;min-width:0}
.pf-av{flex:none;width:58px;height:58px;display:grid;place-items:center;
  border:2px solid var(--hi);background:linear-gradient(160deg,var(--grid),var(--bg));
  box-shadow:inset 1px 1px 0 var(--hi),2px 2px 0 rgba(0,0,0,.25)}
.pf-idtext h1{font-family:var(--pix);font-size:16px;line-height:1.5;margin:0 0 9px;color:var(--gold);text-shadow:0 0 6px rgba(255,194,71,.35)}
.pf-chips{display:flex;gap:6px;flex-wrap:wrap}
.pf-pill{font-size:11.5px;font-weight:700;letter-spacing:.5px;padding:4px 9px;
  border:2px solid var(--hi);background:var(--face2);color:var(--ink)}
.pf-pill.mono{font-family:var(--mono)}
.pf-pill.chain{background:var(--acc);color:#04140d}
.pf-hstats{display:flex;gap:26px;flex-wrap:wrap}
.pf-hstat{text-align:right}
.pf-hstat span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;
  color:var(--ink2);margin-bottom:3px}
.pf-hstat b{font-size:26px;font-weight:700;line-height:1.1;color:var(--gold);text-shadow:0 0 6px rgba(255,194,71,.35);letter-spacing:-.5px}

/* ---------------------------------------------------- portfolio: tab nav -- */

.pf-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 16px;
  background:var(--face2);border-bottom:2px solid var(--hi)}
.pf-back{font-size:13px;font-weight:600;color:#5cc8ff;white-space:nowrap}
.pf-vr{width:2px;height:18px;background:var(--hi);flex:none}
.pf-tab{font-family:var(--mono);font-size:13.5px;font-weight:600;color:var(--ink);
  background:var(--face);border:2px solid var(--hi);padding:6px 13px;cursor:pointer;
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--sh);white-space:nowrap}
.pf-tab:hover{background:var(--faceHi)}
.pf-tab.on{background:linear-gradient(180deg,var(--gold),var(--gold2));font-weight:700;
  box-shadow:inset -1px -1px 0 var(--hi),inset 1px 1px 0 var(--sh)}
.pf-live{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--acc);
  padding:4px 9px;border:2px solid var(--hi);background:var(--face2);white-space:nowrap;text-shadow:0 0 6px rgba(61,255,158,.35)}
.pf-live i{width:8px;height:8px;background:var(--acc);border:1px solid #04140d;
  animation:blip 1.6s steps(2,end) infinite}

.pf-warn{padding:10px 16px;font-size:13.5px;line-height:1.5;color:var(--gold);
  background:var(--goldD);border-bottom:2px solid var(--hi)}

.pf-body{padding:14px 16px 18px}

/* -------------------------------------------------------- portfolio: hero -- */

.pf-hero{display:grid;grid-template-columns:minmax(330px,1fr) minmax(0,2.05fr);gap:16px;
  align-items:center;padding:15px 17px;border:2px solid var(--hi);
  background:linear-gradient(135deg,var(--rain),var(--face) 55%,var(--faceHi));
  box-shadow:inset 1px 1px 0 var(--hi),3px 3px 0 rgba(0,0,0,.16)}
.pf-herolabel{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--ink2);
  margin-bottom:6px}
.pf-herobig{font-size:54px;font-weight:700;line-height:1;letter-spacing:-2px;color:var(--gold);text-shadow:0 0 6px rgba(255,194,71,.35)}
.pf-herosub{margin-top:10px;font-size:15px;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.pf-herosub .sep,.pf-herosub .muted{color:var(--ink2)}
.pf-herosub b{color:var(--gold)}
.pnl.up{color:var(--acc)} .pnl.down{color:var(--hot)} .pnl.flat{color:var(--ink2)}

/* cost-vs-gain bar — the hero's other half, drawn to scale */
.pf-eq{margin-top:14px}
.pf-eq .eqbar{display:flex;height:20px;border:2px solid var(--hi);background:var(--face2);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.16)}
.pf-eq .eqbar b{display:block;height:100%}
.pf-eq .eqbar .base{background:repeating-linear-gradient(135deg,var(--hi) 0 5px,var(--faceHi) 5px 10px)}
.pf-eq .eqbar .gain{background:repeating-linear-gradient(135deg,var(--acc) 0 5px,var(--accD) 5px 10px);
  border-left:2px solid var(--hi)}
.pf-eq .eqk{display:flex;gap:16px;margin-top:7px;font-size:12.5px;color:var(--ink2);flex-wrap:wrap}
.pf-eq .eqk b{color:var(--gold)}
.pf-eq .sw{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
  border:1px solid var(--hi)}
.pf-eq .sw.base{background:var(--hi)} .pf-eq .sw.gain{background:var(--acc)}

/* exactly 6x2 — twelve cards, no orphan row */
.pf-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.pf-card{background:var(--face2);border:2px solid var(--hi);padding:8px 10px;
  box-shadow:inset 1px 1px 0 var(--sh)}
.pf-card span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink2);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-card b{display:block;font-size:21px;font-weight:700;line-height:1.15;color:var(--ink);
  letter-spacing:-.5px}
.pf-card b.up{color:var(--acc)} .pf-card b.gold{color:var(--gold)}
.pf-card em{font-style:normal;font-size:11px;color:var(--ink2);display:block;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------ portfolio: panels -- */

/* Padding is deliberately tight: the charts are the content, and every pixel
   of frame is a pixel the treemap and donut do not get. */
.pf-panel{background:var(--face2);border:2px solid var(--hi);padding:9px 9px 9px;margin-top:14px;
  min-width:0;box-shadow:inset 1px 1px 0 var(--sh),3px 3px 0 rgba(0,0,0,.14)}
.pf .pf-phead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:1px 3px 8px}
.pf .pf-phead.mt{margin-top:16px}
.pf .pf-phead h2{font-family:var(--pix);font-size:12px;line-height:1.6;margin:0;color:var(--gold);
  text-transform:uppercase}
.pf-legend{margin-left:auto;display:flex;gap:13px;font-size:12.5px;color:var(--ink2)}
.pf-legend i.sw{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-2px;
  border:1px solid var(--hi)}
.sw.up{background:var(--acc)} .sw.down{background:var(--hot)} .sw.flat{background:var(--face2)}

/* token positions — two columns, because four rows down one side left the
   right half of a full-width panel as bare ground */
.pf-tokgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
.pf-tokrow{display:flex;align-items:center;gap:12px;padding:9px 2px;
  border-bottom:1px dotted var(--hi)}
.pf-tokgrid .pf-tokrow:nth-last-child(-n+2){border-bottom:0}
.pf-tokrow .tk{width:40px;height:40px;flex:none;border:2px solid var(--hi);display:block;
  position:relative;overflow:hidden}
.pf-tokrow .tk .tpix{position:absolute;inset:0;width:100%;height:100%}
.pf-tokrow .ti{flex:1;min-width:0}
.pf-tokrow .tn{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:700}
.pf-tokrow .livetag{display:inline-flex;align-items:center;gap:5px;font-style:normal;
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--acc);text-shadow:0 0 6px rgba(61,255,158,.35)}
.pf-tokrow .livetag i{width:8px;height:8px;background:var(--acc);border:1px solid #04140d;
  animation:pulseDot 1.5s ease-in-out infinite}
.pf-tokrow .ts{display:block;font-size:12.5px;color:var(--ink2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-tokrow .tv{text-align:right;flex:none;min-width:118px}
.pf-tokrow .tv b{display:block;font-size:19px;font-weight:700;color:var(--ink)}
.pf-tokrow .tv span{font-size:11px;color:var(--ink2)}
.pf-tokrow .tacts{display:flex;gap:5px;flex:none}

/* the two-column bottom half — the pulse panel gets a real floor width so the
   donut inside it can be big instead of a coin in a field */
.pf-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,500px);gap:14px;
  align-items:start}
.pf-row2 > .pf-panel{margin-top:14px}

/* ---------------------------------------------------- portfolio: treemap --
   Four stacked layers per tile: the collection's colour field, its pixel glyph
   scaled to fit, the gain/loss tint over both, and a near-black plate pinned
   bottom-left. The plate is opaque on purpose — it is the one thing that keeps
   the name and the value legible whatever colour the tile underneath ends up,
   which a text-shadow over a saturated field never managed.                  */

.pf-tree{position:relative;width:100%;height:770px;border:2px solid var(--hi);
  background:var(--face2);overflow:hidden;box-shadow:inset 1px 1px 0 var(--sh)}
.pf-tile{position:absolute;overflow:hidden;border:1px solid rgba(0,0,0,.92);
  transition:filter .12s,transform .12s}
.pf-tile:hover{filter:brightness(1.12) saturate(1.15);z-index:6}
.pf-tile .art{position:absolute;inset:0}
.pf-tile .pix{position:absolute;left:0;right:0;top:0;height:100%;width:100%;transform:scale(.72);transform-origin:50% 42%;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.pf-tile .tint{position:absolute;inset:0}
.pf-tile.more .art{filter:saturate(.4)}

.pf-tile .lbl{position:absolute;left:0;bottom:0;max-width:100%;
  padding:8px 12px 9px 10px;display:flex;flex-direction:column;gap:2px;color:var(--ink);
  background:rgba(10,13,15,.92);
  border-top:2px solid var(--hi);border-right:2px solid var(--hi)}
.pf-tile .nm{font-size:17px;font-weight:700;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* tall enough to afford a second line, so long names read in full */
.pf-tile.roomy .nm{white-space:normal;overflow-wrap:anywhere;text-overflow:clip;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pf-tile .vr{display:flex;align-items:baseline;gap:9px}
.pf-tile .vl{font-size:23px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.pf-tile .pc{font-size:15px;font-weight:700}
.pf-tile.up .pc{color:var(--acc)} .pf-tile.down .pc{color:var(--hot)}
.pf-tile.flat .pc{color:var(--ink2)}

.pf-tile.tiny .lbl{padding:5px 8px 6px 7px;gap:1px}
.pf-tile.tiny .nm{font-size:13px}
.pf-tile.tiny .vl{font-size:16px}
.pf-tile.tiny .pc{font-size:12px}
.pf-tile.micro .lbl,.pf-tile.micro .pix{display:none}

/* the single biggest gainer keeps a slow gold corner flash — one deliberate
   live moment, not a panel that will not sit still */
.pf-tile.star{border:3px solid var(--gold);outline:1px solid var(--hi);
  outline-offset:-4px;z-index:3}
.pf-tile.star::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--gold);opacity:0;animation:tileFlash 3.4s ease-in-out infinite}

/* ------------------------------------------------------- donut + legend --
   The donut is sized off the panel, not a fixed 196px — it used to sit in a
   third of its box with air all round it.                                   */
.pf-donutwrap{position:relative;width:100%;max-width:450px;margin:2px auto 0;
  aspect-ratio:1/1}
.pf-donut{width:100%;height:100%;display:block}
.pf-donutmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none}
.pf-donutmid span{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--ink2)}
.pf-donutmid b{font-size:36px;font-weight:700;margin-top:3px;color:var(--gold);letter-spacing:-1.5px}
.pf-dlegend{margin-top:13px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 16px}
.pf-dleg{display:flex;align-items:center;gap:8px;font-size:14.5px}
.pf-dleg i{width:13px;height:13px;flex:none;border:1px solid var(--hi)}
.pf-dleg .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-dleg .p{font-weight:700;color:var(--ink2)}

/* --------------------------------------------------------- biggest movers -- */
.pf-movers{display:flex;flex-direction:column;gap:6px}
.pf-mover{display:flex;align-items:center;gap:11px;padding:8px 10px;
  background:var(--face);border:2px solid var(--hi);box-shadow:inset 1px 1px 0 var(--hi)}
.pf-mover.up{border-left-width:6px;border-left-color:var(--acc)}
.pf-mover.down{border-left-width:6px;border-left-color:var(--hot)}
.pf-mover .mart{width:42px;height:42px;flex:none;border:2px solid var(--hi);display:block;
  position:relative;overflow:hidden}
.pf-mover .mart .mpix{position:absolute;inset:0;width:100%;height:100%}
.pf-mover .mi{flex:1;min-width:0}
.pf-mover .mn{display:block;font-size:15px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pf-mover .ms{display:block;font-size:12px;color:var(--ink2)}
.pf-mover .mspark{width:74px;height:24px;flex:none;display:block}
.pf-mover .mp{flex:none;text-align:right;font-size:18px;font-weight:700;letter-spacing:-.5px}
.pf-mover .mp small{display:block;font-size:12px;font-weight:600;opacity:.85;letter-spacing:0}
.pf-mover .mp.up{color:var(--acc)} .pf-mover .mp.down{color:var(--hot)}

/* the portfolio's two live moments */
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@keyframes tileFlash{0%,78%,100%{opacity:0}86%{opacity:.9}94%{opacity:.25}}

/* ------------------------------------------------------- scanner window -- */

.sc-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;
  border-bottom:2px solid var(--hi);background:linear-gradient(180deg,var(--faceHi),var(--face))}
.sc-brand{display:flex;align-items:center;gap:10px;flex:none}
.sc-logo{width:36px;height:36px;display:grid;place-items:center;font-family:var(--pix);font-size:11px;
  color:#0a0d0b;background:linear-gradient(180deg,var(--gold),var(--gold2));
  border:2px solid var(--hi);box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.sc-brand b{display:block;font-family:var(--pix);font-size:11px;line-height:1.5;color:var(--gold);text-shadow:0 0 6px rgba(255,194,71,.35)}
.sc-brand em{display:block;font-style:normal;font-size:10.5px;color:var(--ink2);margin-top:4px}
.sc-stats{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.sc-stat{border:2px solid var(--hi);background:var(--face2);padding:4px 9px;min-width:66px;
  box-shadow:inset 1px 1px 0 var(--sh)}
.sc-stat b{display:block;font-size:16px;font-weight:700;line-height:1.15;color:var(--ink)}
.sc-stat span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.7px;
  color:var(--ink2)}
.sc-stat.ok b{color:var(--acc)} .sc-stat.hot b{color:var(--hot)}
.sc-stat.super b{color:var(--gold)} .sc-stat.bot b{color:var(--gold2)}
.sc-ctl{display:flex;gap:5px;align-items:center;flex:none;flex-wrap:wrap}
.sc-live{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--acc);
  padding:4px 8px;border:2px solid var(--hi);background:var(--face2);text-shadow:0 0 6px rgba(61,255,158,.35)}
.sc-live i{width:7px;height:7px;background:var(--acc);border:1px solid #04140d;
  animation:blip 1.6s steps(2,end) infinite}

.sc-chainbar{display:flex;gap:8px;flex-wrap:wrap;padding:7px 14px;
  background:var(--face2);border-bottom:2px solid var(--hi)}
.sc-cstat{display:flex;align-items:center;gap:7px;font-size:10.5px;padding:3px 8px;
  border:2px solid var(--hi);background:var(--face);white-space:nowrap}
.sc-cstat .cdot{width:9px;height:9px;flex:none;border:1px solid var(--hi)}
.sc-cstat .nm{font-weight:700}
.sc-cstat .v{color:var(--ink2)}
.sc-cstat .v.dim{opacity:.75}

.sc-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;
  border-bottom:2px solid var(--hi);background:var(--face)}
.sc-filters input[type=search]{flex:1;min-width:150px;max-width:250px}
.sc-chips{display:flex;gap:4px;flex-wrap:wrap}
.sc-chip{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:3px 8px;cursor:pointer;
  border:2px solid var(--hi);background:var(--face);color:var(--ink2);
  box-shadow:inset 1px 1px 0 var(--hi)}
.sc-chip.on{background:var(--faceHi);box-shadow:inset -1px -1px 0 var(--hi),inset 1px 1px 0 var(--sh)}

.sc-main{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:12px;padding:12px 14px 16px;
  align-items:start}
.sc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:10px}

.sc-card{border:2px solid var(--hi);background:var(--face2);padding:9px 10px 8px;min-width:0;
  box-shadow:inset 1px 1px 0 var(--sh),3px 3px 0 rgba(0,0,0,.14)}
.sc-card.hot{background:#1b1408;border-color:var(--gold2)}
.sc-card.superhot{background:#241a06;border-color:var(--gold);box-shadow:inset 1px 1px 0 var(--hi),
  3px 3px 0 rgba(240,165,0,.5)}
.sc-card.botflag{background:#200d10;border-color:var(--hot)}
.sc-chead{display:flex;gap:9px;align-items:flex-start;margin-bottom:8px}
.sc-thumb{width:42px;height:42px;flex:none;border:2px solid var(--hi);display:block}
.sc-cinfo{flex:1;min-width:0}
.sc-cname{font-size:13px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--ink)}
.sc-cmeta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;
  font-size:9.5px;color:var(--ink2)}
.sc-cbdg{font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:1px 5px;
  border:1px solid;background:var(--face2)}
.sc-ct{font-weight:600;text-decoration:underline dotted}
.sc-badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.sc-bdg{font-size:9px;font-weight:700;letter-spacing:.3px;padding:2px 5px;border:1px solid var(--hi)}
.sbSuper{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#0a0d0b}
.sbHot{background:var(--gold2);color:#0a0d0b}
.sbNew{background:var(--acc);color:#04140d}
.sbBot{background:#3a0d13;color:var(--hot)}
.sbActive{background:var(--face2);color:var(--ink2)}
.sbWarm{background:var(--goldD);color:var(--gold)}

.sc-spark{display:flex;align-items:flex-end;gap:2px;height:30px;margin:0 0 8px;
  padding:2px 3px;border:2px solid var(--hi);background:var(--face2)}
.sc-spark i{flex:1;min-height:1px;background:linear-gradient(180deg,var(--gold2),var(--goldD));
  border-top:1px solid var(--hi)}

.sc-kv{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:7px}
.sc-kv div{border:2px solid var(--hi);background:var(--faceHi);padding:3px 5px;min-width:0}
.sc-kv b{display:block;font-size:13px;font-weight:700;line-height:1.2;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis}
.sc-kv span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2)}

.sc-bar{height:8px;border:2px solid var(--hi);background:var(--face2);overflow:hidden}
.sc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--gold2) 55%,var(--hot))}
.sc-barlbl{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;color:var(--ink2);
  margin:4px 0 7px}
.sc-cfoot{display:flex;align-items:center;gap:8px;border-top:1px dotted var(--hi);padding-top:7px}
.sc-lnk{font-family:var(--mono);font-size:10.5px;font-weight:700;color:#5cc8ff;background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline}

.sc-rail{border:2px solid var(--hi);background:var(--face2);min-width:0;
  box-shadow:inset 1px 1px 0 var(--sh),3px 3px 0 rgba(0,0,0,.14)}
.sc-tabs{display:flex;gap:0;border-bottom:2px solid var(--hi)}
.sc-tab{flex:1;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink2);
  background:var(--face2);border:0;border-right:2px solid var(--hi);padding:7px 6px;cursor:pointer}
.sc-tab:last-child{border-right:0}
.sc-tab.on{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#0a0d0b}
.sc-badge{display:inline-block;font-size:9px;padding:0 4px;border:1px solid var(--hi);
  background:var(--face2);margin-left:4px}
.sc-feedbox{max-height:520px;overflow:auto}
.sc-frow{display:flex;align-items:center;gap:7px;padding:4px 8px;font-size:10.5px;
  border-bottom:1px dotted var(--hi)}
.sc-frow:last-child{border-bottom:0}
.sc-frow.fresh{background:#0b2019}
.sc-frow .t{flex:none;color:var(--ink2);font-variant-numeric:tabular-nums}
.sc-frow .n{flex:1;min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sc-frow .n i{width:7px;height:7px;flex:none;border:1px solid var(--hi)}
.sc-frow .n em{font-style:normal;color:var(--ink2);font-weight:400}
.sc-frow .m{flex:none;color:var(--ink2)}

/* narrow windows: the dense pages fold to one column rather than clipping */
@media (max-width:1180px){
  .pf-row2,.pf-hero{grid-template-columns:1fr}
  .sc-main{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .icon.centre .halo,.icon.centre .glyph,.pf-live i,.pf-tokrow .livetag i,.sc-live i,
  .pf-tile.star::after{animation:none}
  .pf-tile.star::after{opacity:.55}      /* keep the marker, drop the motion */
  .icon.centre,.icon.centre .ret,.icon.centre .lbl,.icon.centre .hint,
  .icon.centre .plinth,.pf-tile{transition:none}
}