/* RIFF design system. Brand: RIFF Black ground, Signal Acid accent (used sparingly),
   Warm White text, Muted Gray-Green labels, Danger Red for negatives. Shared by every
   launchpad page; components are token-driven so a palette change flows everywhere. */
:root{
  --bg:#07100D;            /* RIFF Black */
  --panel:#101B17;         /* Surface Green-Black */
  --card:#101B17;
  --card-2:#0c1611;        /* inset fields */
  --card-hover:#14231c;
  --line:#1c2b24;          /* hairline */
  --line-acid:rgba(183,255,60,.16);
  --acid:#B7FF3C;          /* Signal Acid */
  --acid-dim:rgba(183,255,60,.12);
  --text:#F1F5E9;          /* Warm White */
  --muted:#85928A;         /* Muted Gray-Green */
  --dim:#5a655e;
  --up:#B7FF3C;            /* positive = acid */
  --down:#FF4D61;          /* Danger Red */
  --on-acid:#07100D;       /* text on an acid fill */
  --acid-panel:#14170e;    /* warm near-black panel under acid accents (create dev-buy) */
  --h1:24px; --h2:18px; --h3:15px;   /* one heading scale for every page */
  /* back-compat aliases so pages with inline styles (create.html) still resolve */
  --green:var(--acid); --green-bright:var(--acid); --amber:#d9b25a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 "Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* One focus ring for the whole app. Keyboard users get a visible target on a dark ground;
   :focus-visible means a mouse click does not leave a ring behind. */
:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
h1{font-size:var(--h1);font-weight:800;letter-spacing:-.01em}
h2{font-size:var(--h2);font-weight:700}
h3{font-size:var(--h3);font-weight:700}
.app{display:flex;min-height:100vh}
.mono{font-variant-numeric:tabular-nums;color:var(--text)}

/* Sidebar */
.side{width:212px;flex:0 0 212px;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:5px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:.01em;padding:6px 8px 20px}
.brand .mark{width:36px;height:36px;border-radius:9px;background:url(../assets/riff-mark.png) center/128% no-repeat;color:transparent;font-size:0;flex:0 0 auto}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:600}
.nav a.active{background:var(--acid-dim);color:var(--acid)}
.nav a:hover{background:var(--card-hover);color:var(--text)}
.side .create{margin-top:14px;background:var(--acid);color:var(--on-acid);border:none;border-radius:10px;padding:11px;font-weight:800;cursor:pointer;font-size:14px}
.side .links{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.side .links .lab{color:var(--muted);font-size:11px;padding:0 8px 8px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.side .links .row{display:flex;gap:7px;flex-wrap:wrap}
.side .links a{width:34px;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);text-decoration:none;font-size:14px}
.side .links a:hover{color:var(--acid);border-color:var(--line-acid)}
/* Legal row is text links, not icon buttons: opt out of the 34px square so
   the words (Terms / Privacy / Risk) fit instead of overflowing the box. */
.side .links .legal{display:block}
.side .links .legal a{width:auto;height:auto;display:inline;background:none;border:none;padding:0;font-size:11px;color:var(--muted)}
.side .links .legal a:hover{color:var(--acid);border-color:transparent}

/* Main / topbar */
.main{flex:1;min-width:0;padding:16px 24px 48px}
.content{max-width:1500px;margin:0 auto}
.content.narrow{max-width:1240px}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.search{flex:1;max-width:520px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:10px 14px;color:var(--muted)}
input.search{font:inherit;outline:none}
input.search:focus{border-color:var(--line-acid)}
input.search::placeholder{color:var(--muted)}
.back{color:var(--muted);font-size:13px;display:inline-block;font-weight:600}
.connect{margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:11px;padding:9px 16px;font-weight:700;cursor:pointer;font-size:13px}
.connect:hover{border-color:var(--line-acid)}

/* Section headers */
.sec-h{display:flex;align-items:center;gap:10px;margin:2px 2px 14px}
.sec-h h2{font-size:17px;font-weight:800}
.sec-h .paid{font-size:10px;color:var(--acid);background:var(--acid-dim);border:1px solid var(--line-acid);border-radius:6px;padding:2px 7px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
/* Neutral counterpart to .paid: same badge shape, surface tones (panel/line/muted)
   instead of the acid accent, so a plain time range (analytics.html's "Last 24h")
   doesn't read as a promoted placement the way index.html's "Featured" should. */
.sec-h .tag{font-size:10px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.sec-h .arrows{margin-left:auto;display:flex;gap:6px}
.sec-h .arrows span,.sec-h .arrows button{width:28px;height:28px;border-radius:8px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);cursor:pointer;font:inherit}

/* Trending strip: single row at every width, horizontal scroll instead of wrapping to
   more rows, so the strip can actually hold more cards than fit and the prev/next arrows
   have something real to scroll. flex-shrink:0 on the cards (below) is what turns "not
   enough room" into overflow instead of letting flex squeeze them thinner, which is what
   makes the container's scrollWidth exceed its clientWidth. Scrollbar chrome hidden (it's a
   small featured strip, not a content list); overflow-x:auto still scrolls by wheel,
   trackpad, touch and the arrows, native scrolling is never disabled. Only the container's
   own layout changes here, .tcard keeps all of its existing styling below unchanged. */
.trend{display:flex;flex-wrap:nowrap;gap:16px;margin-bottom:30px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.trend::-webkit-scrollbar{display:none}
.trend .tcard{flex:0 0 240px}
.card .img img,.tcard .img img,.head .art img{width:100%;height:100%;object-fit:cover;display:block}
.tcard{cursor:pointer;display:block;color:var(--text);text-decoration:none}
.tcard .img{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);display:grid;place-items:center;font-size:44px}
.tcard .rank{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:7px;background:rgba(7,16,13,.6);color:var(--acid);display:grid;place-items:center;font-weight:800;font-size:12px;border:1px solid var(--line-acid)}
.tcard .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,16,13,.88) 0%,rgba(7,16,13,.15) 45%,transparent 70%)}
.tcard .ov{position:absolute;left:10px;bottom:9px;right:10px}
.tcard .ov .mc{font-weight:900;font-size:16px}
.tcard .ov .nm{font-size:12px;color:var(--text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcard .ov .nm b{color:var(--muted);font-weight:600}
.tcard .desc{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.35;height:32px;overflow:hidden}

/* Explore header + sort pills */
.exp-h{display:flex;align-items:center;gap:10px;margin:0 2px 14px}
.exp-h h2{font-size:17px;font-weight:800;margin-right:6px}
.pills{display:flex;gap:7px;flex-wrap:wrap}
/* .pill is now a <button> (was a div): background/border/color are already explicit
   above so a button's UA chrome is already fully overridden; only font-family was
   missing (a button does not inherit the app typeface by default). */
.pill{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13px;font-family:inherit;cursor:pointer}
.pill:hover{color:var(--text)}
.pill.on{background:var(--acid-dim);color:var(--acid);border-color:var(--line-acid)}
.exp-h .right{position:relative;margin-left:auto;display:flex;gap:7px}
.exp-h .right .b{padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px}

/* Board grid */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 16px}
/* Grid toggle: same cards, one column, compact rows. Reuses the card tokens so the
   list is the same design system, not a second one. */
.grid.compact{grid-template-columns:1fr;gap:8px}
.grid.compact .card{display:flex;align-items:center;gap:12px;padding:8px 10px}
.grid.compact .img{width:44px;height:44px;flex:0 0 44px}
.grid.compact .spark,.grid.compact .gbar,.grid.compact .glabel{display:none}
.filterpop{position:absolute;z-index:20;margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.filterpop label{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;cursor:pointer}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;color:var(--text);text-decoration:none;display:block;transition:transform .08s,border-color .12s,background .12s}
.card:hover{transform:translateY(-2px);border-color:var(--line-acid);background:var(--card-hover)}
/* .card clips its own overflow (art thumbnail), which would clip the shared 2px outline;
   pull the ring inward so it stays visible on this component only. */
.card:focus-visible{outline-offset:-2px}
.card .img{position:relative;aspect-ratio:1/1;display:grid;place-items:center;font-size:46px;overflow:hidden}
.card .spark{position:absolute;left:0;right:0;bottom:0;height:34px}
.card .body{padding:9px 10px 10px}
.card .name{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ticker{color:var(--muted);font-size:11.5px;margin-top:1px}
.card .mc{margin-top:7px;font-weight:800;font-size:13.5px}
.card .mc b{color:var(--acid)} .card .mc span{color:var(--muted);font-weight:600;font-size:10.5px;margin-left:3px}
.card .meta{display:flex;align-items:center;gap:6px;margin-top:7px;color:var(--muted);font-size:10.5px}
.card .meta i{width:13px;height:13px;border-radius:50%;background:#243029;display:inline-block}
.card .gbar{margin-top:8px;height:3px;border-radius:3px;background:#0c1712;overflow:hidden}
.card .gbar i{display:block;height:100%;background:var(--acid)}
.card .glabel{margin-top:4px;color:var(--muted);font-size:10px;font-weight:600}
@keyframes birthFlash{0%{box-shadow:0 0 0 0 rgba(183,255,60,0);border-color:var(--line)}22%{box-shadow:0 0 18px 3px rgba(183,255,60,.9);border-color:#B7FF3C}100%{box-shadow:0 0 0 0 rgba(183,255,60,0);border-color:var(--line)}}
@keyframes birthReveal{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.card.birth{animation:birthFlash 1s ease-out}
.card.birth .img,.card.birth .body{animation:birthReveal .5s .22s both}
@media (prefers-reduced-motion:reduce){.card.birth,.card.birth .img,.card.birth .body{animation:none}}

/* Token header */
.head{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.head .art{width:58px;height:58px;border-radius:14px;overflow:hidden;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#1c3a24,#0b1a12);border:1px solid var(--line);flex:0 0 auto}
.head .id h1{font-size:21px;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.head .id .tk{color:var(--acid);font-weight:800;font-size:14px}
.head .id .sub{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-top:6px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 9px;color:var(--muted);font-size:11.5px;cursor:pointer;font-weight:600}
.chip:hover{color:var(--text)}
.tsoc{display:inline-flex;gap:8px;margin-left:2px}
.tsoc a{width:28px;height:28px;border-radius:8px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);text-decoration:none;font-size:12px}
.tsoc a:hover{color:var(--acid);border-color:var(--line-acid)}
/* Header action chips (Contract / Pool / Dexscreener / GeckoTerminal), pinned to the right of
   the token identity row. */
.tacts{display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap}
.tacts a{display:inline-flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 9px;color:var(--muted);text-decoration:none;font-size:11.5px;font-weight:600}
.tacts a:hover{color:var(--acid);border-color:var(--line-acid)}
/* A third party's own logo inside a chip. Block so it takes no baseline gap, and no shrink
   so it stays square when the row wraps on a phone. The chip's 5px gap does the spacing,
   which is why the label carries no leading space. */
.tacts a .bmark{display:block;flex:0 0 auto}

/* Metric row */
.metrics{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.met{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 15px;min-width:130px}
.met .k{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.met .v{font-weight:800;font-size:18px;margin-top:3px}
.met .v.up{color:var(--acid)} .met .v.grn{color:var(--acid)}
.grad{flex:1;min-width:240px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 15px;display:flex;flex-direction:column;justify-content:center}
.grad .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px}
.grad .row b{color:var(--text)}
.bar{height:7px;border-radius:5px;background:#0c1712;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acid)}

/* Body split */
.body{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px}

/* Chart (uPlot line/area) */
.chart-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line)}
.chart-h b{font-size:13px}
.tf{display:flex;gap:4px;margin-left:auto}
/* .tf holds <span>s on analytics.html's daily-metric switch (unconverted) and
   <button>s elsewhere (token.html's timeframe switch and analytics.html's own
   24h / All time window switch, converted for real focus/click
   semantics): styled together so neither drifts from the other. background:none
   and border:0 are a no-op on the span (already borderless/transparent) and the
   needed reset on the button. font-family:inherit is added rather than the `font`
   shorthand because font-size/font-weight are already explicit here and a
   shorthand would clobber them back to the button's UA default. */
.tf span,.tf button{padding:5px 10px;border-radius:8px;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;background:none;border:0;font-family:inherit}
.tf .on{background:var(--acid-dim);color:var(--acid)}
/* A disabled switch must not read as clickable. The All time window stays disabled until the
   indexer serves an allTime block, and without this it kept the pointer cursor and full contrast. */
.tf button:disabled{opacity:.45;cursor:not-allowed}
.chart-wrap{padding:10px 8px 6px}
#chart{width:100%;height:320px}
.uplot,.u-wrap{width:100%!important}

/* Tabs table */
.tabs2{display:flex;gap:2px;padding:11px 14px 0}
/* Same reasoning as .tf above: profile.html's .tabs2 still uses <b>, token.html's
   is now <button>. Shared rule, font-family:inherit added (not the `font`
   shorthand) so it doesn't clobber the font-size/font-weight already set here. */
.tabs2 b,.tabs2 button{padding:8px 14px;border-radius:9px 9px 0 0;font-size:12.5px;color:var(--muted);cursor:pointer;font-weight:700;background:none;border:0;font-family:inherit}
.tabs2 .on{color:var(--text);background:var(--card-2)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:10px 16px;border-bottom:1px solid var(--line)}
td{padding:9px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
tr:hover td{background:var(--card-hover)}
.b-buy{color:var(--acid);font-weight:800} .b-sell{color:var(--down);font-weight:800}
.dev{font-size:10px;background:var(--acid-dim);color:var(--acid);border:1px solid var(--line-acid);border-radius:5px;padding:1px 5px;margin-left:6px}

/* Trade panel */
.trade{padding:15px}
.seg{display:flex;gap:6px;margin-bottom:14px}
.seg button{flex:1;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:800;padding:10px;border-radius:10px;cursor:pointer;font-size:13px}
.seg button.buy.on{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}
.seg button.sell.on{background:var(--down);color:#2a0910;border-color:var(--down)}
.field{background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:10px}
.field .top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:7px}
.field .in{display:flex;align-items:center;gap:8px}
.field .in input{flex:1;background:transparent;border:none;color:var(--text);font-size:20px;font-weight:800;outline:none;width:100%}
.field .in .cur{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-weight:700;font-size:13px}
.field .in .cur .d{width:18px;height:18px;border-radius:50%;background:var(--acid-dim);display:grid;place-items:center;font-size:11px;color:var(--acid)}
.chips{display:flex;gap:6px;margin-bottom:11px}
/* .chips is only used on token.html, so this can be a straight rename (span -> button):
   background/border/color are already explicit, only font-family was missing. */
.chips button{flex:1;text-align:center;background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:6px;font-size:12px;color:var(--muted);font-family:inherit;cursor:pointer;font-weight:600}
.chips button:hover{color:var(--acid);border-color:var(--line-acid)}
.recv{display:flex;justify-content:space-between;align-items:baseline;padding:2px 2px 11px;color:var(--muted);font-size:12px}
.recv b{color:var(--text);font-size:15px;font-weight:800}
.line{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:5px 2px}
/* .slip is now a <button>: no font-size/weight was set here to lose, so `font:inherit`
   shorthand is safe. border:0 first, then border-bottom re-applies just the dashed
   underline a button's all-sides UA border would otherwise cover; padding:0 removes
   the UA button padding so it stays inline with the row's text baseline. */
.line .slip{color:var(--text);background:none;border:0;border-bottom:1px dashed var(--dim);padding:0;font:inherit;cursor:pointer}
.cta{width:100%;background:var(--acid);color:var(--on-acid);border:none;border-radius:12px;padding:13px;font-weight:800;font-size:14px;cursor:pointer;margin-top:9px}
.cta.sell{background:var(--down);color:#2a0910}
.cta.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.cta:disabled{opacity:.45;cursor:not-allowed}
.pow{text-align:center;color:var(--muted);font-size:11px;margin-top:10px}

/* Launch protection banner */
.prot{display:none;background:var(--acid-dim);border:1px solid var(--line-acid);border-radius:11px;padding:11px 13px;margin-bottom:12px;color:var(--text);font-size:12.5px;line-height:1.5}
.prot.show,body.fresh .prot{display:block}
.prot b{color:var(--acid)}
.prot .cd{font-variant-numeric:tabular-nums;font-weight:800}
body.fresh .cta{background:#233029;color:var(--dim);cursor:not-allowed}

/* Info + fees + about cards (shared .r rows) */
.info{margin-top:14px;padding:15px}
.info h3{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:700}
.info .r{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.info .r:last-child{border:none}
.info .r b{color:var(--text);font-weight:700}
.lock{color:var(--acid)}
#feesCard .cta,#aboutCard .cta{margin-top:12px}

/* Fees: accrued emphasis */
.accrued{display:flex;gap:10px;margin:10px 0 6px}
.accrued .box{flex:1;background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.accrued .box .k{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.accrued .box .v{font-size:16px;font-weight:800;color:var(--acid);margin-top:3px}
.accrued .box .v small{color:var(--muted);font-weight:600;font-size:11px}

/* About card */
.desc{color:#c7cfc3;font-size:12.5px;line-height:1.55;margin:2px 0 12px}
.burned{display:flex;align-items:center;gap:11px;margin:2px 0 14px}
.burned .ring{position:relative;width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(var(--acid) calc(var(--p,0)*1%),#122019 0)}
.burned .ring::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:var(--card)}
.burned .ring b{position:relative;z-index:1;color:var(--acid);font-size:10px;font-weight:800}
.burned .t b{color:var(--text);font-weight:800;font-size:14px;display:block}
.burned .t .lab{color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;margin-top:2px;display:block}
.linkchips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 4px}
.linkchips a{display:inline-flex;align-items:center;gap:6px;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:12px;color:var(--text);font-weight:600;text-decoration:none}
.linkchips a:hover{border-color:var(--line-acid);color:var(--acid)}
.editbtn{color:var(--acid);font-weight:700;cursor:pointer;font-size:12px}
.editform{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;display:none}
.editform.open{display:block}
.editform label{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:9px 0 5px}
.editform input{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--text);font-size:13px;outline:none}
.editform input:focus{border-color:var(--line-acid)}
.editform .act{display:flex;gap:8px;margin-top:12px}
.editform .act button{flex:1;padding:9px;border-radius:9px;font-weight:800;font-size:12.5px;cursor:pointer;border:1px solid var(--line)}
.editform .save{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}
.editform .cancel{background:transparent;color:var(--muted)}
.about-hint{color:var(--muted);font-size:11px;margin-top:8px}

/* Connect gate — blocking overlay */
.gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(7,16,13,.86);backdrop-filter:blur(4px)}
.gate-card{width:min(460px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.6)}
.gate-card h2{margin:0 0 6px;font-size:20px;font-weight:800}
.gate-card p{margin:6px 0;color:var(--muted);font-size:13.5px}
.gate-links a{color:var(--acid);text-decoration:none;font-weight:600}
.gate-card label{display:flex;gap:9px;align-items:flex-start;margin:13px 0;font-size:13px;line-height:1.45;cursor:pointer;color:var(--text)}
.gate-card label input{margin-top:2px;accent-color:var(--acid)}
.gate-actions{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.gate-actions .cta[disabled]{opacity:.45;cursor:not-allowed}
.gate-actions .ghost{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:11px;padding:11px;cursor:pointer;font-weight:700}

/* Mobile chrome (injected by js/mobilenav.js) — hidden on desktop. */
.mtop,.nav-backdrop,.side .mclose{display:none}

@media(max-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.body{grid-template-columns:1fr}}

@media(max-width:640px){
  /* Sticky mobile top bar: hamburger + brand + quick Create. */
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:60;
    background:rgba(7,16,13,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);padding:9px 12px}
  .mtop .burger{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);
    background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer;flex:0 0 auto;padding:0}
  .mtop .burger:active{border-color:var(--line-acid);color:var(--acid)}
  .mtop .brand{padding:0;font-size:16px;gap:9px;text-decoration:none;color:var(--text)}
  .mtop .brand .mark{width:28px;height:28px}
  .mtop .mcreate{margin-left:auto;background:var(--acid);color:var(--on-acid);border-radius:10px;
    padding:9px 14px;font-weight:800;font-size:13px;text-decoration:none;flex:0 0 auto}

  /* .side becomes a slide-in drawer over a blurred backdrop. */
  .side{display:flex;position:fixed;top:0;left:0;height:100dvh;width:min(286px,85vw);z-index:80;
    background:var(--bg);transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;box-shadow:2px 0 34px rgba(0,0,0,.55)}
  body.nav-open .side{transform:translateX(0)}
  .side .mclose{position:absolute;top:14px;right:12px;width:34px;height:34px;border-radius:9px;
    border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
  .side .mclose:active{color:var(--acid);border-color:var(--line-acid)}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:70;background:rgba(7,16,13,.62);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;
    transition:opacity .26s ease,visibility .26s ease}
  body.nav-open .nav-backdrop{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}

  /* Layout tightening for phones. */
  .main{padding:14px 14px 40px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .trend{gap:12px;margin-bottom:24px}
  .topbar{gap:10px;margin-bottom:16px}
  .exp-h,.sec-h{flex-wrap:wrap}
  .head .id .sub{flex-wrap:wrap;gap:8px}
  .tacts{margin-left:0}
  .metrics .met{flex:1 1 calc(50% - 5px);min-width:0}
  .grad{min-width:100%}

  /* ~44px touch targets, desktop sizing untouched. .tacts a and .chips button carry
     text labels, so padding grows the target while keeping the label centred (a fixed
     height would not); .tsoc a is an icon-only square already sized via width/height,
     so it grows the same way it's already built. */
  .tacts a{padding:14px 9px}
  .tsoc a{width:44px;height:44px}
  .chips button{padding:13px 6px}
}