/* ==========================================================================
   PicPad, design tokens.

   DARK, DOCUMENTARY GROUND. A true black page, near-black cards lifted just
   far enough off it to read as surfaces, off-white ink, hairline structure.

   It went light for a pass, taking the instrument-panel craft from the
   reference the owner supplied: hairline structure instead of shadows, mono
   figures, measured greys, and a radius scale that is neither soft nor sharp.
   All of that stayed. The GROUND came back to black, because the product is a
   camera: the photograph is the only thing on any page that should be bright,
   and a pale sheet competes with it.

   One palette, defined once here. Everything else reads these tokens, so the
   ground moves by editing this block and nothing else. If a rule hardcodes a
   colour instead, that is a bug, with two deliberate exceptions: anything
   drawn ON the viewfinder, and the LIVE pill.

   TYPE, and this is the part to hold on to:

     TITLES are Roboto Mono, 500, .08em, UPPERCASE. Every h1 to h4 on the site.
     It is the same treatment as the small labels, scaled up, so a heading and
     a field label are visibly the same voice: a readout rather than a headline.
     Mono is WIDE, so every title size here is smaller than its sans equivalent
     would be; that is not timidity, it is the same optical width.

     EVERYTHING ELSE is Inter. 600 for emphasis inside titles and buttons, 500
     for labels and emphasis, 400 to 500 for body copy.

   There is no accent hue. STATE (live), ACTION (launch, buy, confirm) and
   DIRECTION (up, down) are carried by value, weight and a printed sign. --go
   resolves to white; --live keeps its red because a market going live is the
   one event worth a colour.

   FILL/FOREGROUND PAIRS. --ink and --go are FILLS, and on a dark ground a fill
   is light, so text on top of one has to be dark. Each carries a partner:
   --ink-fg, --go-fg, --live-fg. Never write a literal #fff on top of one of
   these; that is exactly what broke each time the ground flipped.

   Every grey below was measured against the grounds it appears on. Re-measure
   before changing one.
   ========================================================================== */
:root{
  --black:#000000;
  --page:#000000;        /* body ground: true black */
  /* Cards are not black. On a black page a black card is a void, so surfaces
     step UP from the ground in small increments and the hairline does the
     rest. Elevation on dark reads as a lighter surface, not as a shadow. */
  --panel:#0d0e11;       /* cards */
  --panel-2:#15171b;     /* inset / hover */
  --wash:#1b1e23;        /* chips, wells */
  --ink:#f5f6f7;         /* off-white: primary text */
  --ink-fg:#0b0c0e;      /* what sits ON an --ink fill */
  --ink-2:#c9ced4;       /* light grey */
  /* Both pinned to a measured ratio. Against --panel (#0d0e11), the ground
     under all body copy, AND against --wash (#1b1e23), the ground under every
     chip and pill. Do not darken either without re-measuring both. */
  --muted:#9ba2ab;       /* secondary text.  7.5:1 on --panel */
  --faint:#868d96;       /* labels, meta.    5.8:1 on --panel, 5.0:1 on --wash */
  --line:#22252a;        /* hairline */
  --line-2:#343941;      /* emphasised border */
  --slate:#9ba2ab;

  /* LIVE stays red. Everything else is monochrome, so the one moment a market
     actually opens is the one moment worth a hue. */
  --live:#e02020;
  --live-fg:#ffffff;

  /* The primary action is white. On a black ground that is the loudest thing
     available, which is what a primary action should be. Hover dims rather
     than brightens: there is nothing above white to go to. */
  --go:#ffffff;
  --go-2:#e4e6e9;
  --go-fg:#0b0c0e;
  --go-wash:#1b1e23;

  /* Direction is monochrome: ink for up, mid grey for down, sign printed. */
  --up:#f5f6f7;
  --down:#9ba2ab;

  /* Protocol identity only, and the one sanctioned exception to monochrome.
     Lightened for the black ground: the brand-accurate values are under 3:1
     on --wash and read as bruises rather than as identity. */
  --sol:#a78bfa;
  --sol-wash:rgba(167,139,250,.13);
  --sol-line:rgba(167,139,250,.34);
  --eth:#8aa6f7;
  --eth-wash:rgba(138,166,247,.13);
  --eth-line:rgba(138,166,247,.34);

  /* Inter for language, Roboto Mono for titles, labels and every figure. */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:var(--mono);
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Radii, landed between the two extremes this went through. The inherited
     8/14 was bubbly; the 2/6 taken straight off the reference was sharp
     enough that buttons read as unstyled boxes. 6 on controls and 10 on cards
     keeps the precision and gives the corners enough to look drawn. Pills stay
     fully round so a status never reads as something you can click. */
  --r:6px;               /* controls: buttons, inputs, chips */
  --r-sm:4px;            /* nested things inside a control */
  --r-lg:10px;           /* cards, panels */
  --r-pill:999px;        /* status pills */
  --shell:1200px;
}

*{box-sizing:border-box}
/* Tells the browser this is a dark document, which is the ONLY way to reach
   the parts of the UI the page does not draw: the default ::placeholder grey,
   the scrollbars, the text caret, autofill backgrounds and any native select
   or date popup. Left on light after the ground flipped back, the page renders
   black with a pale scrollbar down the side of it. */
/* The site read as zoomed out: a 1200px shell of 15.5px type on a wide screen
   leaves everything small. Every length in this file is px, so a root
   font-size would move nothing; root zoom scales all of them at once - type,
   padding, radii, the shell and the breakpoints - so the design keeps its
   proportions exactly and simply lands larger.
   1.07 = 7%. Supported in Chrome, Edge, Safari and Firefox 126+; anywhere it
   is not, the property is ignored and the site renders at its old size, which
   is a graceful floor rather than a broken layout. */
html{scroll-behavior:smooth;color-scheme:dark;zoom:1.07}
html,body{margin:0;padding:0;background:var(--page);color:var(--ink)}
/* A backstop for inputs that no component rule matches (the trade amount and
   the chat box are bare <input>s). ::placeholder does not inherit. */
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
body{font-family:var(--font);font-size:15.5px;line-height:1.55;letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
input:focus,button:focus,select:focus,textarea:focus{outline:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--page)}
/* TITLES ARE MONO, UPPERCASE, .08em. Every heading on the site, from the
   hero down to a panel's h4, is the same treatment as the small labels simply
   scaled up: a readout rather than a headline. It is what makes the site sound
   like an instrument rather than a landing page.

   Mono is WIDE. Every explicit title size in this codebase is therefore
   smaller than its sans equivalent would have been, which is not timidity: at
   equal point size this face sets about a quarter wider, so matching the
   optical width means dropping the number. Line-heights come up to match,
   because uppercase has no descenders to separate the lines.

   Inter still does the talking: 600 in buttons and emphasis, 500 for labels,
   400 to 500 for body copy. */
h1,h2,h3,h4{font-family:var(--mono);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;margin:0;line-height:1.2}
h1{line-height:1.12}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 22px}
.up{color:var(--up)}
.down{color:var(--down)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.hide{display:none!important}

/* ------------------------------------------------------------- animation */
/* Everything here animates opacity and transform only, those are the two the
   compositor can run without re-laying-out the page, which is the difference
   between smooth and the stutter this had before. */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* A soft breath, not a blink. The old 1 → .28 flash was a strobe on a 5px dot;
   .55 at the trough reads as "alive" without flickering. */
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
/* The ring is what actually says "broadcasting": it expands out of the dot and
   fades, like a signal leaving it. Pure transform+opacity, so it is free. */
@keyframes ring{0%{transform:scale(1);opacity:.5}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fade{animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.1s}.d3{animation-delay:.15s}.d4{animation-delay:.2s}
/* Shorter travel and a shorter duration: 16px over .7s is far enough that the
   eye tracks it as a slide, which is what made the grids feel like they lurched
   in. 8px over .45s registers as "settling" instead. */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* A group whose children arrive one after another rather than as a block. The
   delay is on the child, so the container itself can stay a plain grid. Capped
   at eight: past that the last card is still waiting while you have scrolled on. */
/* Children start slightly SMALLER as well as lower, so a grid of photographs
   settles into place rather than sliding in. 0.97 is deliberately shallow: at
   0.9 the cards read as zooming, which competes with the hover scale that
   follows and makes the page feel busy. */
.reveal-group > *{opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.reveal-group.in > *{opacity:1;transform:none}
.reveal-group.in > *:nth-child(1){transition-delay:0s}
.reveal-group.in > *:nth-child(2){transition-delay:.06s}
.reveal-group.in > *:nth-child(3){transition-delay:.12s}
.reveal-group.in > *:nth-child(4){transition-delay:.18s}
.reveal-group.in > *:nth-child(5){transition-delay:.24s}
.reveal-group.in > *:nth-child(6){transition-delay:.3s}
.reveal-group.in > *:nth-child(7){transition-delay:.36s}
.reveal-group.in > *:nth-child(n+8){transition-delay:.42s}
/* Entrance over: drop every delay so hover responds immediately. Set by
   app.js a beat after the group arrives. !important because the nth-child
   rules above are more specific than any plain selector could be here. */
.reveal-group.settled > *{transition-delay:0s!important}

/* Hover lift. Still restrained - past about 1.03 on a card this size it reads
   as the layout jumping rather than as the card responding - but the old 1.012
   was small enough to be missed entirely. */
.lift{transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,border-color .18s}
/* On dark, depth comes from the surface getting lighter and the border
   picking up, not from a shadow: a black shadow over black has nothing to
   darken. The shadow still seats the card, but the border does the work. */
.lift:hover{transform:translateY(-6px) scale(1.028);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8);border-color:var(--line-2)}
.lift:active{transform:translateY(-1px) scale(1.005);transition-duration:.09s}

/* The thumbnail pushes in slightly behind the card's own frame. This is the
   part that reads as "alive": the card moves, and the picture inside it moves
   a little more. overflow:hidden on .sc-thumb clips it, so nothing spills. */
.card .sc-thumb .art,.card .sc-thumb img,.card .sc-thumb video{
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.card:hover .sc-thumb .art,.card:hover .sc-thumb img,.card:hover .sc-thumb video{
  transform:scale(1.06)}

/* Table rows are not card-shaped, so they get the flat version of the same
   idea: the surface lifts in value instead of in space. */
.tbl tbody tr{transition:background .16s}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- header */
/* Glass bar, floating rather than pinned to the edge.

   The blur is back by request. It was removed earlier because a backdrop-filter
   on a sticky element re-composites the strip under it every scroll frame; the
   cost is contained here by keeping the blurred surface small (a floating bar,
   not a full-width strip) and by promoting it to its own layer with
   `will-change`, so the blur is computed once and reused rather than on each
   frame. */
/* Glass, on every page. It floats over the page rather than being pinned to
   the edge, and it carries its own surface rather than being tinted to match
   whatever is under it: switching on scroll was the alternative and it flickers
   at the handover.

   It is LIGHTER than the page, not darker. On a black ground a dark bar
   disappears into the page and stops reading as an object, so the bar is a
   lifted surface with a pale hairline. The blur keeps it reading as glass when
   a photograph scrolls beneath it, and it is contained: a floating bar is a
   small surface, and will-change promotes it so the blur is computed once
   rather than per scroll frame. */
.hdr{position:sticky;top:14px;z-index:90;margin:14px auto 0;width:calc(100% - 44px);
  max-width:var(--shell);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-lg);
  background:rgba(30,33,38,.72);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.8);
  will-change:transform}
/* Scroll state. At the top of a page the bar barely needs to exist; once the
   page has moved under it, it earns its edge. app.js sets this on <body> from
   a passive scroll listener, so it costs one class toggle rather than a style
   recalculation per frame. */
body.scrolled .hdr{background:rgba(30,33,38,.88);
  border-color:rgba(255,255,255,.16);box-shadow:0 12px 34px -14px rgba(0,0,0,.9)}
.hdr{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
/* Controls inside the bar invert with it: the bar is lighter than the page, so
   what sits on it is not what sits on a card. */
.hdr .brand{color:#fff}
.hdr .nav a{color:rgba(255,255,255,.62)}
.hdr .nav a:hover,.hdr .nav a.on{color:#fff}
.hdr .burger{border-color:rgba(255,255,255,.22);color:#fff}
.hdr .btn{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);color:#fff}
.hdr .btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.hdr .btn-live{background:#fff;border-color:#fff;color:var(--ink-fg)}
.hdr .btn-live:hover{background:rgba(255,255,255,.88);border-color:rgba(255,255,255,.88)}
.hdr .ca{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.66)}
.hdr .ca:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.hdr .hdr-in{padding:0 8px 0 16px}
/* The bar carries its own width, so the shell inside it must not add another. */
.hdr .shell{max-width:none;padding:0 8px 0 16px}
@media(max-width:900px){.hdr{top:8px;margin-top:8px;width:calc(100% - 24px)}}
.hdr-in{height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.hdr-l{display:flex;align-items:center;gap:28px;min-width:0}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;letter-spacing:-.02em}
/* No border-radius: the mark is transparent now, so there is no tile to round
   and a radius would only clip the glyph. */
.brand svg,.brand img{width:22px;height:22px;flex:none}
.nav{display:flex;align-items:center;gap:20px}
.nav a{font-size:13px;color:var(--muted);transition:color .15s}
.nav a:hover,.nav a.on{color:var(--ink)}
.hdr-r{display:flex;align-items:center;gap:8px}
.burger{display:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:var(--r);
  align-items:center;justify-content:center}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-r .btn-launch{display:none}
}
.sheet{position:fixed;inset:80px 0 auto 0;z-index:89;background:var(--panel);
  border-bottom:1px solid var(--line);padding:8px 0 14px;display:none}
.sheet.open{display:block;animation:fadeUp .22s ease both}
@media(max-width:900px){.sheet{inset:74px 0 auto 0}}
.sheet a{display:block;padding:11px 22px;font-size:15px;color:var(--muted)}
.sheet a.on{color:var(--ink)}
/* The sheet also contains a button, and ".sheet a" out-specifies ".btn-live",
   so without these the primary CTA inherits the nav link's muted grey straight
   onto its white fill. It was legible while --go was black; it is not now. */
.sheet a.btn{color:var(--ink);display:inline-flex;font-size:13px;padding:0 14px}
.sheet a.btn-live{color:var(--go-fg)}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;
  border-radius:var(--r);font-size:13px;font-weight:600;border:1px solid var(--line-2);
  color:var(--ink);background:var(--panel);white-space:nowrap;
  transition:background .15s,border-color .15s,transform .12s,opacity .15s}
.btn:hover{background:var(--panel-2);border-color:var(--slate)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
/* The primary action. Named .btn-live for continuity with the markup, but it is
   the ACTION colour, a live stream never uses it. */
.btn-live{background:var(--go);border-color:var(--go);color:var(--go-fg)}
.btn-live:hover{background:var(--go-2);border-color:var(--go-2)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn-lg{height:44px;padding:0 20px;font-size:14px}
.btn-sm{height:30px;padding:0 10px;font-size:12px}
.btn-block{width:100%}
/* NOTE: there is deliberately no shared "on a dark band" class here. The two
   places that need one (the home hero over its video, and the closing band)
   each carry their own .hero .btn / .band .btn overrides, because each also
   tunes its translucency to what is behind it. An unused shared class that
   hardcodes #fff is what breaks on the next ground change. */

/* ----------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r);
  background:var(--wash);border:1px solid var(--line);font-family:var(--mono);font-size:11px;
  font-weight:500;color:var(--muted);letter-spacing:.03em}
.chip-sol{color:var(--sol);border-color:var(--sol-line);background:var(--sol-wash)}
.chip-eth{color:var(--eth);border-color:var(--eth-line);background:var(--eth-wash)}
.chip-go{color:var(--ink);border-color:var(--ink);background:var(--panel);font-weight:500}

/* ------------------------------------------------------------------- CA */
/* The contract address. Monospace because it is a value, click to copy, and
   deliberately quiet: it sits next to the two buttons in the nav and must not
   compete with either. */
.ca{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);font-family:var(--mono);font-size:12px;
  transition:color .15s,border-color .15s,background .15s}
.ca:hover{color:var(--ink);border-color:var(--line-2);background:var(--panel)}
.ca svg{opacity:.55;flex:none}
.ca:hover svg{opacity:1}
.ca-soon{cursor:default;letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  color:var(--faint)}
.ca-soon:hover{color:var(--faint);border-color:var(--line);background:var(--panel-2)}
@media(max-width:900px){.hdr-r .ca{display:none}}
/* In the footer it has room for the whole address. */
.ftr .ca{height:auto;padding:8px 11px;font-size:12px;word-break:break-all;text-align:left}

/* LIVE. Fully round, because a status pill should not look like something you
   can click. It is the brightest object on the page by design: on black, a
   white fill is the loudest thing there is. */
.live-pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--live);color:var(--live-fg);font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase}
/* The dot breathes; a ring expands out of it and fades. The ring is a
   pseudo-element so it can scale past the dot without moving anything, and both
   properties are compositor-only. */
.live-pill .dot{position:relative;width:6px;height:6px;border-radius:50%;background:#fff;
  flex:none;animation:breathe 2.4s ease-in-out infinite}
.live-pill .dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:#fff;animation:ring 2.4s ease-out infinite;pointer-events:none}
.off-pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--wash);border:1px solid var(--line-2);color:var(--muted);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.dot{width:6px;height:6px;border-radius:50%;background:var(--go);display:inline-block;flex:none}
/* Connected-wallet dot. It only ever appears inside .hdr, which is lifted
   glass on every page, so it is white with a ring rather than ink. */
.conn-dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.18)}

/* Inline link inside body copy and callouts. a{color:inherit} globally, so
   without this an <a class="in"> is indistinguishable from the text round it. */
a.in{text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-2);color:var(--ink);font-weight:500}
a.in:hover{text-decoration-color:var(--ink)}
.toast.bad a.in{color:var(--ink-fg);text-decoration-color:rgba(0,0,0,.45)}

/* ---------------------------------------------------------------- layout */
.sec{padding:70px 0}
.sec-tight{padding:40px 0}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.sec-head h2{font-size:17px}
.sec-head p{margin:8px 0 0;color:var(--muted);font-size:14px}
.link-more{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:5px;
  transition:color .15s}
.link-more:hover{color:var(--ink)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s,transform .18s,box-shadow .18s}
a.card:hover{border-color:var(--line-2);transform:translateY(-2px);
  background:var(--panel-2);box-shadow:0 10px 26px -8px rgba(0,0,0,.7)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}

/* ------------------------------------------------------------ stream card */
.sc-thumb{position:relative;aspect-ratio:16/9;background:var(--wash);overflow:hidden}
/* The platform’s own card: the mark on a black stage, no lettermark, no tint. */
.sc-thumb .art.sc-own img{width:56px;height:56px;opacity:.92}
.sc-thumb .art{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font);
  font-weight:600;font-size:42px;letter-spacing:-.04em;color:rgba(255,255,255,.34)}
.sc-thumb .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,17,22,0) 38%,rgba(14,17,22,.72))}
.sc-thumb .tl{position:absolute;top:9px;left:9px;display:flex;gap:6px}
.sc-thumb .tr{position:absolute;top:9px;right:9px}
.sc-thumb .bl{position:absolute;bottom:9px;left:9px;right:9px;display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.sc-title{font-size:12px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.viewers{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
  border-radius:var(--r);background:rgba(14,17,22,.74);color:#fff;font-family:var(--mono);
  font-size:11px;font-weight:500;flex:none}
.sc-body{padding:13px 14px 15px}
.sc-top{display:flex;align-items:center;gap:10px;min-width:0}
.sc-logo{width:32px;height:32px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;
  font-family:var(--font);font-weight:600;font-size:13px;color:#fff}
.sc-name{font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sc-sym{font-size:11px;color:var(--faint);font-family:var(--mono)}
.sc-stats{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line);font-size:13px}

/* ---------------------------------------------------------------- tables */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
.tbl-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:900px}
.tbl th{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);text-align:right;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap;user-select:none}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th.sortable{cursor:pointer}
.tbl th.sortable:hover{color:var(--ink)}
.tbl th .caret{opacity:0;margin-left:4px}
.tbl th.act{color:var(--ink)}
.tbl th.act .caret{opacity:1}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:right;font-size:14px;
  white-space:nowrap}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover{background:var(--panel-2);cursor:pointer}
.tbl tbody tr:last-child td{border-bottom:0}
.cell-coin{display:flex;align-items:center;gap:11px}

/* ---------------------------------------------------------------- filters */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);padding:2px}
.seg button{height:30px;padding:0 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
  color:var(--muted);transition:color .15s,background .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.5)}
.search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);min-width:210px}
.search:focus-within{border-color:var(--ink)}
.search input{background:none;border:0;width:100%;font-size:14px}
.search input::placeholder{color:var(--faint)}
.spacer{flex:1 1 auto}

/* ------------------------------------------------------------------ forms */
.field{margin-bottom:18px}
.field > label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--faint);font-weight:400}
.inp{width:100%;height:40px;padding:0 12px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--r);font-size:14px;transition:border-color .15s}
textarea.inp{height:auto;padding:11px 12px;resize:vertical;min-height:88px;line-height:1.5}
.inp:focus{border-color:var(--ink)}
.inp::placeholder{color:var(--faint)}
.inp.bad{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--wash)}
/* The message itself is set apart by weight and a rule, not by being red. */
.err{font-size:12px;color:var(--ink);margin-top:6px;font-weight:500;
  padding-left:9px;border-left:2px solid var(--ink)}
.note{font-size:12px;color:var(--faint);margin-top:6px;line-height:1.5}

/* ---------------------------------------------------------------- empty */
.empty{border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:50px 24px;text-align:center;
  background:var(--panel)}
.empty h3{font-size:13.5px;margin-bottom:9px}
.empty p{color:var(--muted);font-size:14px;margin:0 auto 18px;max-width:440px}

/* ------------------------------------------------------------------ footer */
.ftr{border-top:1px solid var(--line);background:var(--panel);margin-top:40px}
.ftr-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding:46px 0 32px}
@media(max-width:760px){.ftr-in{grid-template-columns:1fr 1fr;gap:26px}}
.ftr h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr ul a{font-size:13px;color:var(--muted);transition:color .15s}
.ftr ul a:hover{color:var(--ink)}
.ftr-bar{border-top:1px solid var(--line);padding:15px 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--faint)}
.ticks{display:flex;gap:16px;flex-wrap:wrap}
.tick{display:flex;align-items:center;gap:6px}
.tick b{font-family:var(--mono);font-weight:500;color:var(--muted);font-size:11px;letter-spacing:.06em}

/* ------------------------------------------------------------------ toast */
.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:grid;gap:9px;max-width:330px}
.toast{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:12px 14px;font-size:13px;box-shadow:0 12px 34px rgba(0,0,0,.65);
  animation:fadeUp .3s cubic-bezier(.22,1,.36,1) both}
.toast.good{border-left:2px solid var(--ink)}
.toast.bad{background:var(--ink);border-color:var(--ink);color:var(--ink-fg);
  box-shadow:0 10px 30px rgba(0,0,0,.6)}
.toast.bad a{color:var(--ink-fg);text-decoration:underline}

/* ==========================================================================
   PicPad additions.

   The photo card, which is the only card this site has. Everything above is
   inherited from the system this forked out of; anything stream-shaped up
   there is unused here and left alone rather than half-removed.
   ========================================================================== */

.pic-card{display:block}
/* Square, like the frame it was shot in and like every place a token image is
   shown. A 16:9 thumbnail would crop someone's photograph a second time. */
.pic-thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--wash)}
.pic-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card:hover .pic-img{transform:scale(1.04)}
/* Under the photo, not instead of it: this is what is left when a gateway will
   not answer, which is the only case a PicPad coin has no picture. */
/* The tile under a photograph stays dark and its lettermark stays white: this
   is inside the picture's own frame, not on the page. */
.pic-letters{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:26px;letter-spacing:-.02em;color:rgba(255,255,255,.8)}
.pic-veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%)}
.pic-meta{position:absolute;left:11px;right:11px;bottom:9px;z-index:3;display:flex;
  align-items:baseline;gap:8px;justify-content:space-between}
.pic-name{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pic-sym{font-size:12px;color:rgba(255,255,255,.72);flex:none}
.pic-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;font-size:12.5px;border-top:1px solid var(--line)}

/* The CA slot's label. The pill carries an address most of the time, and a
   40-character hex string with no label is not self-describing: two mono
   characters say what it is without spending a line of copy on it. */
.ca-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);
  border-right:1px solid var(--line-2);padding-right:7px}
.hdr .ca-tag{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.5)}
.hdr .ca:hover .ca-tag{color:rgba(255,255,255,.7)}

/* A square icon link in the bar, sized to sit level with the CA pill and the
   wallet button. Used for X; anything else social would use the same shape. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);flex:none;transition:color .2s,border-color .2s,background .2s}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--panel)}
.hdr .icon-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.7)}
.hdr .icon-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
/* The bar is tight on a phone and the sheet already carries the same link. */
@media(max-width:520px){.hdr-r .icon-btn{display:none}}

/* The "Official" tag on the pad's own coin, and the placeholder tile that
   stands in for it before it exists. The placeholder is dashed on purpose:
   every other card on this site is a photograph that was actually taken, and
   this one is not a coin yet. */
.pic-tag{position:absolute;top:9px;left:9px;z-index:4;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.92);color:#0b0c0e}
.pic-soon{border-style:dashed}
.pic-thumb-soon{display:grid;place-items:center;align-content:center;gap:14px;
  background:var(--panel-2)!important}
.pic-soon-mark{width:64px;height:64px;object-fit:contain;opacity:.92}
.pic-soon-sym{font-size:14px;letter-spacing:.1em;color:var(--muted)}
.pic-tag-soon{background:var(--wash);border:1px solid var(--line-2);color:var(--faint)}

/* ------------------------------------------------------- wallet sheet */
/* Shown when the browser has no wallet in it and cannot be given one: a
   phone. It is a bottom sheet there, where the thumb is, and a centred card
   on anything larger. */
.wsheet{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;
  animation:fadeUp .18s ease both}
@media(min-width:620px){.wsheet{align-items:center}}
.wsheet-card{width:100%;max-width:420px;margin:12px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px 20px 18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9)}
.wsheet-card h3{font-size:13px;margin-bottom:10px}
.wsheet-card p{color:var(--muted);font-size:13.5px;line-height:1.6;margin:0 0 16px}
.wsheet-card p b{color:var(--ink);font-weight:500}
.wsheet-card .note{margin:14px 0 12px}
.wsheet-list{display:grid;gap:8px}
/* Each row is a destination, so the name sits left and the leaving-arrow right
   rather than both being centred like a normal button. */
.wsheet-list .btn{justify-content:space-between;height:46px;font-size:14px}
.wsheet-list .btn svg{opacity:.5}
.wsheet-list .btn:hover svg{opacity:1}