/* ══════════════════════════════════════════════════════════ tokens ══ */
:root {
  --page:#fff; --card:#fff; --card-2:#f6f8f9; --ink:#0f1a1c; --ink-2:#0f1a1c; --meta:#5c6c74; --faint:#8ba2ad;
  --line:#e5ebee; --line-2:#eceef0; --hover:#f6f8f9; --hover-2:#e8eff2; --blue:#0045ac; --blue-2:#00306f;
  --up:#d93a00; --down:#6a5cff; --brand:#1a8348;
  --pill:#eaedef; --pill-h:#dfe4e7; --pill-ink:#0f1a1c; --alert:#c00; --ok:#019a41; --gold:#ffb000; --mod:#019a41;
  --ui:"Reddit Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Reddit Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --top:56px; --r:16px;
}
/* Light is the default look; dark is opt-in from the header, never from the OS setting. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --page:#0e1113; --card:#0e1113; --card-2:#181c1f; --ink:#f2f4f5; --ink-2:#f2f4f5; --meta:#8ba2ad; --faint:#6a7c85;
  --line:#25292c; --line-2:#1e2224; --hover:#181c1f; --hover-2:#22272a; --blue:#3aa5f5; --blue-2:#79c0ff;
  --pill:#1a282d; --pill-h:#223438; --pill-ink:#f2f4f5; --alert:#ff6a6a; --ok:#3ecf68; --mod:#3ecf68; --brand:#2fa862; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hide { display: none !important; }

/* ══════════════════════════════════════════════════════════ header ══ */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--top); display: flex; align-items: center; gap: 8px;
       padding: 0 16px; background: var(--page); }
.logo { display: flex; align-items: center; gap: 7px; flex: none; padding-right: 8px; }
.logo img { width: 42px; height: 42px; display: block; object-fit: contain; object-position: center; image-rendering: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.logo b { font: 800 22px/1 var(--ui); letter-spacing: -.9px; color: var(--brand); }
.hburger { display: none; width: 40px; height: 40px; border-radius: 999px; place-items: center; color: var(--ink); }
.hsearch { flex: 1 1 auto; max-width: 690px; position: relative; margin: 0 auto; }
.hsearch input { width: 100%; height: 40px; padding: 0 14px 0 44px; border-radius: 999px; border: 1px solid transparent; background: var(--card-2); font: 400 14px var(--ui); }
.hsearch input::placeholder { color: var(--meta); }
.hsearch input:hover { background: var(--hover-2); }
.hsearch input:focus { outline: none; border-color: var(--brand); background: var(--page); }
.hsearch > svg { position: absolute; left: 16px; top: 11px; width: 18px; height: 18px; fill: var(--meta); pointer-events: none; }
.sug { position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 6px); max-height: 60vh; overflow-y: auto;
       background: var(--page); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 8px; }
.sug .hd { padding: 8px 10px 4px; font: 500 11px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--meta); }
.sug a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); }
.sug a:hover, .sug a.on { background: var(--hover-2); }
.sug .g { min-width: 0; flex: 1; display: grid; gap: 2px; }
.sug .t1 { font: 600 14px/18px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug .t2 { font: 400 12px/16px var(--ui); color: var(--meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pill); flex: none; }
.sug .ic svg { width: 16px; height: 16px; fill: var(--meta); }
.sug .none { padding: 14px 10px; color: var(--meta); font-size: 13px; }
.hright { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.fee-tracker { height: 32px; display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; padding: 0 11px;
               border: 1px solid var(--line); border-radius: 999px; background: var(--card); white-space: nowrap;
               font-family: var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fee-tracker:hover { background: var(--hover-2); }
.fee-tracker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.fee-tracker .fee-label { color: var(--meta); font: 700 10px/1 var(--ui); text-transform: uppercase; letter-spacing: .7px; }
.fee-tracker b { color: var(--ink); font: 700 12px/1 var(--ui); }
.fee-tracker.loading b { color: var(--meta); }
.x-link { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
          margin-right: 5px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); }
.x-link:hover { background: var(--ink); color: var(--card); }
.x-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.x-link svg { width: 13px; height: 13px; fill: currentColor; }
.ibtn { position: relative; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: var(--ink); }
.ibtn:hover { background: var(--hover-2); }
.ibtn svg { width: 20px; height: 20px; fill: currentColor; }
.ibtn .badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
               background: var(--brand); color: #fff; font: 700 10px/16px var(--ui); text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px;
       border-radius: 999px; font: 600 14px/1 var(--ui); transition: background .1s, color .1s, border-color .1s; white-space: nowrap; }
.btn.fill { background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.btn.fill:hover { background: var(--blue-2); border-color: var(--blue-2); }
.btn.out { background: var(--pill); color: var(--ink); border: 1px solid transparent; }
.btn.out:hover { background: var(--pill-h); }
.btn.grey { color: var(--ink); } .btn.grey:hover { background: var(--hover-2); }
.btn.gm { background: var(--gold); border: 1px solid var(--gold); color: #241a00; }
.btn.gm:hover { filter: brightness(1.06); }
.btn.sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.uchip { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 8px; border-radius: 999px; border: 1px solid transparent; }
.uchip:hover { background: var(--hover-2); }
.uchip .ustack { display: grid; gap: 2px; justify-items: start; }
.acct > summary { list-style: none; cursor: pointer; padding: 0; height: auto; }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary:hover { background: none; }
.acct[open] > summary { background: none; }
.acct[open] .uchip { background: var(--hover-2); }
.acct .dd-m { min-width: 232px; }
.wrow { display: grid; gap: 8px; }
.wrow .btn { width: 100%; justify-content: flex-start; height: 44px; }
.uchip .n { font: 600 12px/1 var(--ui); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uchip .k { font: 400 10px/1 var(--ui); color: var(--meta); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════ layout ══ */
.wrap { display: flex; justify-content: center; gap: 24px; padding: 0 24px 60px; }
.col-main { width: 100%; max-width: 756px; display: grid; gap: 0; align-content: start; padding-top: 16px; }
.col-side { width: 316px; flex: none; display: grid; gap: 16px; align-content: start; position: sticky; top: calc(var(--top) + 16px); padding-top: 16px; }
.lnav { width: 270px; flex: none; position: sticky; top: var(--top); height: calc(100vh - var(--top));
        overflow-y: auto; padding: 16px 12px 24px; scrollbar-width: thin; border-right: 1px solid var(--line); }
.lnav h5 { margin: 0; padding: 14px 16px 6px; font: 500 12px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--meta);
           display: flex; align-items: center; justify-content: space-between; }
.lnav a, .lnav button.na { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; border-radius: 8px;
                           font: 400 14px/20px var(--ui); color: var(--ink); text-align: left; }
.lnav a:hover, .lnav button.na:hover { background: var(--hover-2); }
.lnav a.on { background: var(--pill); font-weight: 600; }
.lnav svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.lnav .dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 11px/1 var(--ui); color: #fff; }
.lnav .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnav .tk { font: 500 10px/1 var(--mono); color: var(--meta); flex: none; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lnav hr { border: 0; border-top: 1px solid var(--line); margin: 12px 8px; }
.lnav p.n { padding: 2px 16px 8px; color: var(--meta); font: 400 12px/1.5 var(--ui); }
.lnav .foot { padding: 8px 16px; color: var(--meta); font: 400 12px/1.6 var(--ui); margin: 0; }
.lnav summary { list-style: none; cursor: pointer; }
.lnav summary::-webkit-details-marker { display: none; }
.lnav summary h5:hover { color: var(--ink); }
.lnav summary .cr { width: 16px; height: 16px; transition: transform .15s; }
.lnav details[open] summary .cr { transform: rotate(180deg); }

.c { background: var(--card-2); border: 1px solid transparent; border-radius: var(--r); overflow: hidden; }
.c.pad { padding: 16px; }
.c-h { padding: 14px 16px 6px; font: 500 12px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--meta);
       display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.c-b { padding: 0 16px 16px; }

.mk { display: flex; align-items: center; gap: 8px; padding: 0 0 16px; }
.mk .fake { flex: 1; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2);
            display: flex; align-items: center; padding: 0 16px; color: var(--meta); font-size: 14px; }
.mk .fake:hover { border-color: var(--faint); background: var(--hover-2); }

.sortbar { display: flex; align-items: center; gap: 4px; padding: 0 0 4px; flex-wrap: wrap; }
.sortbar .sp { flex: 1; }
.dd { position: relative; }
.dd > summary { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 999px;
                font: 600 14px/1 var(--ui); color: var(--ink); cursor: pointer; list-style: none; user-select: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd > summary:hover { background: var(--hover-2); }
.dd > summary svg { width: 16px; height: 16px; fill: currentColor; }
.dd > summary .cr { width: 12px; height: 12px; opacity: .8; }
.dd[open] > summary { background: var(--pill); }
.dd-m { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 200px; padding: 8px; border-radius: 12px;
        background: var(--page); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.18); display: grid; gap: 2px; }
.dd-m.r { left: auto; right: 0; }
.dd-m button, .dd-m a { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: 8px;
                        font: 400 14px/1 var(--ui); color: var(--ink); text-align: left; }
.dd-m button:hover, .dd-m a:hover { background: var(--hover-2); }
.dd-m button.on { font-weight: 700; }
.dd-m svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.dd-m .hd { padding: 6px 10px 4px; font: 500 11px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--meta); }
.range { height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--pill); color: var(--ink); font: 600 13px var(--ui); cursor: pointer; }
.range:focus { outline: none; }

/* ═════════════════════════════════════════════════════════════ post ══ */
.p { display: grid; grid-template-columns: minmax(0,1fr); position: relative; padding: 8px 8px 12px; border-radius: var(--r);
     border-bottom: 1px solid var(--line); }
.p:not(.detail) { cursor: pointer; }
.p:hover { background: var(--card-2); }
.p .pt, .p .px, .p .pm a, .p .pm b { cursor: pointer; }
.p.detail, .p.detail:hover { background: transparent; border-bottom: 0; padding: 12px 8px 4px; }
.p.sel { background: var(--card-2); box-shadow: inset 3px 0 0 var(--brand); }
.p.pinned .pt::before { content: ""; }
.vv { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 2px; border-radius: 999px; background: var(--pill); flex: none; }
.vv:hover { background: var(--pill-h); }
.vv.up { background: var(--up); } .vv.down { background: var(--down); }
.vv.up .sc, .vv.down .sc, .vv.up .arw, .vv.down .arw { color: #fff; }
.arw { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: var(--pill-ink); }
.arw svg { width: 18px; height: 18px; fill: currentColor; }
.arw:hover { color: var(--up); }
.arw.d:hover { color: var(--down); }
.vv.up .arw.u:hover, .vv.down .arw.d:hover { color: #fff; opacity: .8; }
.sc { font: 600 12px/1 var(--ui); font-variant-numeric: tabular-nums; min-width: 14px; text-align: center; color: var(--pill-ink); }
.pb { padding: 0; min-width: 0; }
.pm { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font: 400 12px/16px var(--ui); color: var(--meta); margin-bottom: 6px; padding-right: 40px; }
.pm .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--ui); color: #fff; flex: none; margin-right: 4px; }
.pm b { color: var(--ink); font: 600 12px/16px var(--ui); }
.pm b:hover, .pm a:hover { text-decoration: underline; }
.pm .sp { color: var(--faint); }
.pm .edited { font-style: italic; }
.pm .jn { margin-left: 4px; height: 24px; padding: 0 12px; font-size: 12px; }
.ptop { position: absolute; top: 8px; right: 8px; }
.tag { display: inline-block; padding: 1px 5px; border-radius: 3px; font: 700 9px/14px var(--ui); letter-spacing: .5px; vertical-align: 1px; }
.tag.bot { background: var(--blue); color: #fff; }
.tag.mod { background: var(--mod); color: #fff; }
.tag.pin { background: var(--mod); color: #fff; }
.tag.nsfw { background: var(--alert); color: #fff; }
.tag.spoil { background: var(--meta); color: #fff; }
.tag.lock { background: var(--gold); color: #241a00; }
.flair { display: inline-block; padding: 2px 8px; border-radius: 20px; background: var(--pill); color: var(--pill-ink); font: 700 12px/16px var(--ui); }
.pt { margin: 0 0 8px; font: 600 18px/22px var(--ui); color: var(--ink-2); word-break: break-word; letter-spacing: -.1px; }
.p.detail .pt { font-size: 28px; line-height: 34px; font-weight: 700; margin-bottom: 12px; }
.px { font: 400 14px/21px var(--body); color: var(--ink); word-break: break-word; }
.px.clip { position: relative; max-height: 138px; overflow: hidden; cursor: pointer;
            -webkit-mask-image: linear-gradient(180deg,#000 64%,transparent); mask-image: linear-gradient(180deg,#000 64%,transparent); }
.seemore { position: absolute; left: 0; bottom: 0; padding: 12px 0 0; font: 600 13px var(--ui); color: var(--blue); }
.px.clip:hover .seemore { text-decoration: underline; }
.px p { margin: 0 0 8px; } .px p:last-of-type { margin-bottom: 0; }
.px a { color: var(--blue); } .px a:hover { text-decoration: underline; }
.px h1,.px h2,.px h3 { font-family: var(--ui); margin: 12px 0 6px; line-height: 1.3; }
.px h1 { font-size: 20px; } .px h2 { font-size: 17px; } .px h3 { font-size: 15px; }
.px ul,.px ol { margin: 0 0 8px; padding-left: 22px; } .px li { margin: 2px 0; }
.px blockquote { margin: 0 0 8px; padding: 0 0 0 10px; border-left: 3px solid var(--line); color: var(--meta); }
.px code { font: 500 12px var(--mono); background: var(--pill); padding: 1px 4px; border-radius: 2px; }
.px pre { background: var(--pill); padding: 8px 10px; border-radius: 4px; overflow-x: auto; margin: 0 0 8px; }
.px pre code { background: none; padding: 0; font-size: 12px; }
.px hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.px .spoil { background: var(--ink); color: transparent; border-radius: 2px; cursor: pointer; }
.px .spoil.on { background: var(--pill); color: var(--ink); }
.pimg { display: block; max-width: 100%; max-height: 512px; margin: 0 auto 8px; object-fit: contain; background: var(--card-2); border-radius: var(--r); border: 1px solid var(--line); }
.pvideo { display: block; width: 100%; max-height: 620px; margin: 0 auto 8px; background: #000; border-radius: var(--r); border: 1px solid var(--line); }
.pvideo.blur, .gallery.blur { filter: blur(28px); }
.gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; margin: 0 0 8px; overflow: hidden; border-radius: var(--r); background: #000; }
.gallery.n1 { grid-template-columns: 1fr; }
.gallery-item { min-height: 180px; max-height: 560px; position: relative; display: grid; background: #000; overflow: hidden; }
.gallery.n1 .gallery-item { min-height: 0; aspect-ratio: 16 / 10; }
.gallery-item img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; }
.gallery:not(.n1) .gallery-item img { object-fit: cover; }
.gallery-item.extra { display: none; }
.gallery-item > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: 30px; font-weight: 700; }
.gallery-item.media-failed::after { content: "Image unavailable"; display: grid; place-items: center; min-height: 180px; color: #aeb8bd; font: 500 13px var(--ui); }
.thumb.media-failed { display: none; }
.video-thumb { display: grid; place-items: center; background: #111; color: #fff; }
.video-thumb svg { width: 24px; height: 24px; fill: currentColor; }
.pimg.blur { filter: blur(28px); }
.blurwrap { position: relative; }
.blurwrap .rev { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; justify-items: center; }
.pl { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--blue); font-size: 12px; word-break: break-all; }
.pl svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.pa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pa > button, .pa > a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
                        background: var(--pill); color: var(--pill-ink); font: 600 12px/1 var(--ui); }
.pa > button:hover, .pa > a:hover { background: var(--pill-h); }
.pa > button.ico { width: 32px; padding: 0; justify-content: center; }
.pa svg { width: 18px; height: 18px; fill: currentColor; }
.pa .on { color: var(--gold); }
.p.detail .pa { margin-top: 14px; margin-bottom: 4px; }
.ovf > summary { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--pill-ink);
                 list-style: none; cursor: pointer; }
.ovf > summary::-webkit-details-marker { display: none; }
.ovf > summary:hover, .ovf[open] > summary { background: var(--pill-h); }
.ovf > summary svg { width: 18px; height: 18px; fill: currentColor; }
.ovf { position: relative; }
.ovf-m { position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; min-width: 208px; padding: 8px; border-radius: 12px;
         background: var(--page); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.18); display: grid; gap: 2px; }
.ovf-m button { display: flex !important; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px !important;
                border-radius: 8px !important; background: none !important; color: var(--ink) !important; font: 400 14px/1 var(--ui) !important; text-align: left; }
.ovf-m button:hover { background: var(--hover-2) !important; }
.ovf-m svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ovf-m button.warn:hover { color: var(--alert) !important; }
.ovf-m button.modx:hover { color: var(--mod) !important; }
.ovf-m button.on { color: var(--gold) !important; }
.ovf-m .ovf-h { padding: 8px 10px 4px; font: 500 11px/1 var(--ui); letter-spacing: .5px; text-transform: uppercase; color: var(--meta);
                border-top: 1px solid var(--line); margin-top: 4px; }
.ptop .ovf-m { min-width: 190px; }
.removed { padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); color: var(--meta); font-size: 13px; margin-bottom: 8px; }

/* compact + classic modes */
.p.compact, .p.classic { grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; align-items: start; }
.p.compact .pb, .p.classic .pb { grid-column: 1; }
.p.compact .thumb, .p.classic .thumb { grid-column: 2; grid-row: 1; margin-top: 4px; }
.p.compact { padding: 6px 8px 8px; }
.p.compact .pt { font-size: 15px; line-height: 20px; margin-bottom: 4px; }
.p.compact .pm { margin-bottom: 2px; }
.p.compact .px, .p.compact .pimg, .p.compact .pvideo, .p.compact .gallery, .p.compact .pl, .p.compact .poll, .p.compact .aws { display: none; }
.p.compact .pa { margin-top: 6px; }
.p.compact .pa > button, .p.compact .pa > a { height: 28px; padding: 0 10px; }
.p.compact .pa > button.ico, .p.compact .ovf > summary { width: 28px; height: 28px; }
.p.compact .pa svg, .p.classic .pa svg { width: 16px; height: 16px; }
.p.compact .vv { height: 28px; } .p.compact .arw { width: 24px; height: 24px; }
.p.compact .thumb { width: 76px; height: 56px; }
.p.classic .px, .p.classic .pimg, .p.classic .pvideo, .p.classic .gallery { display: none; }
.thumb { width: 108px; height: 76px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line);
         display: grid; place-items: center; overflow: hidden; flex: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 22px; height: 22px; fill: var(--faint); }
.p.card .thumb { display: none; }

/* awards */
.aws { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.aw { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 10px;
      background: var(--pill); font: 700 11px/1 var(--ui); color: var(--meta); }
.aw em { font-style: normal; font-size: 12px; }

/* polls */
.poll { border: 1px solid var(--line-2); border-radius: 4px; padding: 10px; margin-bottom: 8px; display: grid; gap: 6px; }
.poll .opt { position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 7px 12px; font-size: 13px; overflow: hidden; cursor: pointer; }
.poll .opt:hover { border-color: var(--blue); }
.poll .opt .bar { position: absolute; inset: 0 auto 0 0; background: rgba(0,121,211,.14); }
.poll .opt .lb { position: relative; display: flex; justify-content: space-between; gap: 8px; }
.poll .opt.mine { border-color: var(--blue); font-weight: 700; }
.poll .tot { font-size: 11px; color: var(--meta); }

/* token chip */
.tk { display: inline-flex; align-items: stretch; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.tk a { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 26px; font: 700 12px/1 var(--ui); color: var(--ink); }
.tk a:hover { background: var(--hover); }
.tk a.gm { background: var(--gold); color: #241a00; border-left: 1px solid var(--line); }
.tk a.gm:hover { filter: brightness(1.05); background: var(--gold); }
.tk svg { width: 13px; height: 13px; fill: currentColor; }
.tk .cn { font: 500 10px/1 var(--mono); color: var(--meta); }

/* ═════════════════════════════════════════════════════════════ chat ══ */
#chat { position: fixed; right: 20px; bottom: 0; z-index: 55; width: 340px; max-height: min(560px, calc(100vh - 80px));
        display: none; flex-direction: column; background: var(--page); border: 1px solid var(--line);
        border-radius: 16px 16px 0 0; box-shadow: 0 -2px 28px rgba(0,0,0,.16); overflow: hidden; }
#chat.open { display: flex; }
.ch-h { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); flex: none; }
.ch-h b { font: 600 15px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-h .sp { flex: 1; }
.ch-h #ch-back svg { transform: rotate(90deg); }
.ch-list { overflow-y: auto; padding: 6px; }
.ch-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 10px; text-align: left; }
.ch-i:hover { background: var(--hover-2); }
.ch-i .g { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ch-i .t1 { font: 600 13px var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-i .t2 { font: 400 12px var(--ui); color: var(--meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-i .t3 { font: 400 11px var(--ui); color: var(--meta); flex: none; }
.ch-i.unread .t1::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-left: 6px; }
.ch-i.unread .t2 { color: var(--ink); font-weight: 600; }
.ch-e { padding: 24px 18px; color: var(--meta); font-size: 13px; text-align: center; line-height: 1.6; }
.ch-b { flex: 1; overflow-y: auto; padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.ch-m { display: grid; gap: 3px; justify-items: start; margin-top: 8px; }
.ch-m.run { margin-top: 1px; }
.ch-m.me { justify-items: end; }
.ch-m .who { display: flex; align-items: center; gap: 6px; font: 400 11px var(--ui); color: var(--meta); }
.ch-m .who b { font: 600 11px var(--ui); color: var(--ink); }
.ch-m .who i { font-style: normal; }
.ch-m .bub { max-width: 86%; padding: 7px 12px; border-radius: 16px; background: var(--pill); font: 400 13px/18px var(--body); word-break: break-word; }
.ch-m.me .bub { background: var(--blue); color: #fff; }
.ch-m.me .bub a { color: #fff; text-decoration: underline; }
.ch-m .bub p { margin: 0; } .ch-m .bub p + p { margin-top: 6px; }
.ch-f { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--line); flex: none; }
.ch-f textarea { flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 10px 14px; border: 1px solid var(--line);
                 border-radius: 20px; background: var(--card-2); font: 400 13px/18px var(--body); }
.ch-f textarea:focus { outline: none; border-color: var(--faint); }
.ch-f .btn { width: 40px; height: 40px; padding: 0; flex: none; }
@media (max-width: 700px) { #chat { right: 0; left: 0; width: auto; border-radius: 0; max-height: 100vh; height: 100vh; } }

/* ═════════════════════════════════════════════════════════ comments ══ */
.cw { background: transparent; border: 0; }
.cf { padding: 8px; }
.addc { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
        background: var(--page); color: var(--meta); font: 400 14px var(--ui); }
.addc:hover { background: var(--hover-2); }
.addc svg { width: 18px; height: 18px; fill: currentColor; }
.cf .as { font-size: 12px; color: var(--meta); margin-bottom: 6px; }
.cf .as b { color: var(--blue); }
textarea.ta { width: 100%; min-height: 104px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 0 0 16px 16px; background: var(--page); font: 400 14px/20px var(--body); resize: vertical; }
textarea.ta:focus, input.ti:focus, select.ti:focus { outline: none; border-color: var(--faint); }
input.ti, select.ti { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); font-size: 14px; }
.cf .row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.mdbar { display: flex; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--card-2); }
.mdbar button { height: 28px; min-width: 30px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; color: var(--meta); font: 600 12px var(--ui); }
.mdbar button:hover { background: var(--hover-2); color: var(--ink); }
.mdbar button.on { background: var(--pill); color: var(--ink); }
.mdprev { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; padding: 12px 14px; min-height: 100px; background: var(--card-2); }
.csorts { display: flex; align-items: center; gap: 6px; padding: 10px 8px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--meta); }
.csorts select { height: 32px; border: 0; background: none; font: 600 13px var(--ui); color: var(--ink); cursor: pointer; }
.csorts .sp { flex: 1; }
.thread { padding: 12px 8px 16px; }
.cm { padding: 6px 0 0; }
.cm .ch { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--body); color: var(--meta); flex-wrap: wrap; }
.cm .ch b { color: var(--ink); font: 700 12px var(--ui); }
.cm .ch b:hover { text-decoration: underline; }
.cm .ch .op { color: var(--blue); font-weight: 700; font-size: 11px; }
.cm .col { width: 18px; height: 18px; border-radius: 2px; display: grid; place-items: center; color: var(--faint); font: 700 11px var(--mono); flex: none; }
.cm .col:hover { background: var(--hover); color: var(--ink); }
.cm .cb { padding-left: 26px; font: 400 14px/21px var(--body); word-break: break-word; }
.cm .ca { display: flex; align-items: center; padding-left: 20px; margin-top: 2px; flex-wrap: wrap; }
.cm .ca button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px; border-radius: 999px; color: var(--meta); font: 600 12px/1 var(--ui); }
.cm .ca button:hover { background: var(--hover-2); color: var(--ink); }
.cm .ca svg { width: 16px; height: 16px; fill: currentColor; }
.cm .ca .v.on.u { color: var(--up); } .cm .ca .v.on.d { color: var(--down); }
.cm .cb { padding-left: 30px; }
.kids { padding-left: 16px; margin-left: 14px; }
.cm .ca .warn:hover { color: var(--alert); }
.kids { padding-left: 12px; margin-left: 12px; border-left: 1px solid var(--line-2); }
.kids:hover { border-color: var(--faint); }
.cm.folded > .cb, .cm.folded > .ca, .cm.folded > .kids, .cm.folded > .rslot { display: none; }
.rslot:empty { display: none; }
.more { padding-left: 26px; font-size: 12px; color: var(--blue); font-weight: 700; }
.av { border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-family: var(--ui); font-weight: 700; flex: none; }
.av img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.user-handle { color: var(--meta); font-weight: 400; }
.pm > .av { margin-left: 1px; }
.ch .user-handle { font-size: 11px; }
.ch-m .who small { color: var(--meta); font-size: 10px; font-style: normal; }
.modlist a > span { display: grid; gap: 1px; }
.modlist a small { color: var(--meta); font-size: 10px; font-weight: 400; }
.profile-head { display: flex; align-items: flex-start; gap: 16px; padding: 22px; flex-wrap: wrap; }
.profile-main { flex: 1; min-width: 180px; }
.profile-main h1 { margin: 2px 0 1px; font: 750 22px/1.15 var(--ui); letter-spacing: -.25px; }
.profile-handle { color: var(--meta); font: 500 13px var(--ui); }
.profile-main p { max-width: 620px; margin: 13px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.profile-stats { margin-top: 12px; color: var(--meta); font: 12px var(--ui); }
.profile-stats b { color: var(--ink); }
.profile-stats span { margin: 0 5px; }
.profile-editor { gap: 18px !important; }
.profile-photo-edit { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.profile-photo-edit .h { margin: 7px 0 0; }
.profile-photo-loading { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--pill); color: var(--meta); font: 11px var(--ui); }
.profile-username { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; background: var(--field); }
.profile-username:focus-within { border-color: var(--blue); }
.profile-username span { padding-left: 12px; color: var(--meta); font: 600 14px var(--ui); }
.profile-username .ti { border: 0; padding-left: 2px; background: transparent; }

/* ════════════════════════════════════════════════════════ community ══ */
.chero { background: var(--card); border-bottom: 1px solid var(--line-2); margin: -20px -24px 20px; }
.chero .bnr { height: 96px; }
.chero .in { max-width: 1016px; margin: 0 auto; padding: 0 24px 12px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.chero .big { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--card); display: grid; place-items: center; font: 700 26px/1 var(--ui); color: #fff; flex: none; margin-top: -14px; }
.chero h1 { margin: 0; font: 700 28px/32px var(--ui); color: var(--ink-2); }
.chero .sl { font: 400 14px/18px var(--body); color: var(--meta); }
.chero .gr { flex: 1; min-width: 140px; padding-bottom: 4px; }
.chero .ac { display: flex; gap: 8px; padding-bottom: 6px; }
.jbtn.joined:hover { border-color: var(--alert); color: var(--alert); background: transparent; }
.tabs2 { display: flex; gap: 4px; max-width: 1016px; margin: 0 auto; padding: 0 24px; }
.tabs2 a { padding: 10px 12px; font: 700 13px var(--ui); color: var(--meta); border-bottom: 2px solid transparent; }
.tabs2 a.on { color: var(--ink); border-color: var(--up); }

/* ═════════════════════════════════════════════════════════════ side ══ */
.side-hd { padding: 12px; color: #fff; font: 700 14px/18px var(--ui); }
#side .stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 10px 0 6px; }
#side .stats div { display: grid; gap: 1px; }
#side .stats b { font: 700 16px/20px var(--ui); font-variant-numeric: tabular-nums; }
#side .stats span { color: var(--meta); font-size: 12px; line-height: 16px; }
#side p.d { margin: 0 0 12px; font: 400 14px/18px var(--body); }
#side .cre { margin: 0; font-size: 12px; color: var(--meta); line-height: 1.5; }
.rank a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.rank a:last-child { border-bottom: 0; }
.rank a:hover { background: var(--hover); }
.rank .n { font: 700 12px/1 var(--mono); color: var(--meta); width: 12px; flex: none; }
.rank .g { min-width: 0; flex: 1; }
.rank .g > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .t1 { font: 700 12px/16px var(--ui); }
.rank .t2 { font: 400 11px/14px var(--mono); color: var(--meta); }
.rank .ct { font: 500 11px/1 var(--mono); color: var(--meta); flex: none; }
.rank .rw { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.rank .rw:last-child { border-bottom: 0; }
.rank .rw > a:first-child { flex: 1; min-width: 0; border-bottom: 0; }
.rank .rw .go { flex: none; margin-right: 12px; }
.rules { margin: 0; padding: 0; counter-reset: r; }
.rules li { list-style: none; counter-increment: r; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; display: flex; gap: 8px; }
.rules li:last-child { border-bottom: 0; }
.rules li::before { content: counter(r) "."; color: var(--meta); font-weight: 700; flex: none; }
.modlist { display: grid; gap: 6px; }
.modlist a { display: flex; align-items: center; gap: 8px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════ modals ══ */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 20px; }
.md { width: min(640px,100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.md.wide { width: min(760px,100%); }
.md hgroup { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.md hgroup h2 { margin: 0; font: 600 20px/24px var(--ui); }
.md .mb { padding: 16px; overflow-y: auto; display: grid; gap: 14px; }
.md footer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-2); }
.md footer .sp { flex: 1; }
.welcome-scrim { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: rgba(8,12,10,.68); backdrop-filter: blur(2px); }
.wallet-welcome { position: relative; width: min(820px, 100%); min-height: 430px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #fff; color: #0f1a1c; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.34); }
.welcome-art { min-height: 430px; background: #dff4cc; }
.welcome-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.welcome-copy { display: flex; flex-direction: column; justify-content: center; padding: 44px 42px 36px; text-align: center; }
.welcome-logo { width: 56px; height: 56px; margin: 0 auto 14px; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.welcome-copy h2 { margin: 0 0 12px; font: 800 27px/1.08 var(--ui); letter-spacing: -.7px; }
.welcome-copy > p { margin: 0 auto 24px; max-width: 330px; color: #526068; font-size: 13px; line-height: 1.45; }
.welcome-btn { width: 100%; min-height: 42px; border-radius: 999px; font: 700 13px var(--ui); }
.welcome-btn + .welcome-btn { margin-top: 10px; }
.welcome-btn.primary { background: #101614; color: #fff; }
.welcome-btn.primary:hover { background: var(--brand); }
.welcome-btn.secondary { background: #e9edef; color: #101614; }
.welcome-btn.secondary:hover { background: #dce3e5; }
.welcome-paste-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.welcome-paste-row .welcome-btn { width: auto; padding: 0 18px; }
.welcome-account { margin: 18px auto 0; color: #536068; font: 600 12px var(--ui); text-decoration: underline; text-underline-offset: 3px; }
.welcome-skip { position: absolute; top: 14px; right: 16px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(233,237,239,.9); color: #536068; font: 600 11px var(--ui); }
.welcome-skip:hover { background: #dce3e5; color: var(--brand); }
#welcome-msg .bad { margin: 10px 0 0; font-size: 12px; }
.f { display: grid; gap: 6px; }
.f > label { font: 700 12px/1 var(--ui); letter-spacing: .3px; text-transform: uppercase; color: var(--meta); }
.f .h { font-size: 12px; color: var(--meta); line-height: 1.5; }
.tabs { display: flex; border-bottom: 1px solid var(--line-2); }
.tabs button { flex: 1; height: 40px; font: 700 14px var(--ui); color: var(--meta); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-color: var(--brand); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sw button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; }
.sw button.on { border-color: var(--ink); }
.bad { color: var(--alert); font-size: 12px; }
.good { color: var(--ok); font-size: 12px; }
.drop { border: 1px dashed var(--line); border-radius: 4px; padding: 24px; text-align: center; color: var(--meta); font-size: 13px; }
.drop.over { border-color: var(--blue); background: rgba(0,121,211,.06); }
.pv { position: relative; }
.pv img { width: 100%; max-height: 280px; object-fit: contain; background: var(--card-2); border-radius: 4px; display: block; }
.upload-previews { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 8px; margin-top: 8px; }
.pv video { width: 100%; max-height: 280px; background: #000; border-radius: 4px; display: block; }
.pv small { display: block; overflow: hidden; padding: 4px 2px; color: var(--meta); text-overflow: ellipsis; white-space: nowrap; }
.pv button svg { width: 14px; height: 14px; fill: currentColor; }
.pv button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; }
.togs { display: flex; gap: 14px; flex-wrap: wrap; }
.togs label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.awgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 8px; }
.awgrid button { display: grid; gap: 4px; justify-items: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 6px; }
.awgrid button:hover { border-color: var(--blue); background: var(--hover); }
.awgrid em { font-style: normal; font-size: 26px; }
.awgrid span { font: 700 12px var(--ui); }
.kbd { display: grid; gap: 8px; }
.kbd div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.kbd b { font: 600 12px var(--mono); background: var(--pill); padding: 2px 7px; border-radius: 3px; }

/* CA scanner */
.scan { border: 1px solid var(--line); border-radius: 4px; }
.scan .sh { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card-2); border-bottom: 1px solid var(--line-2); }
.scan .sh svg { width: 16px; height: 16px; fill: var(--up); }
.scan .sh b { font: 700 12px/1 var(--ui); letter-spacing: .3px; text-transform: uppercase; }
.scan .sh .o { margin-left: auto; font-size: 11px; color: var(--meta); }
.scan .sb { padding: 12px; display: grid; gap: 10px; }
.res { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--card-2); }
.res .rr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res .rr b { font: 700 16px/1 var(--ui); }
.res .rr .bg { font: 700 10px/1 var(--ui); letter-spacing: .4px; text-transform: uppercase; padding: 4px 6px; border-radius: 3px; background: var(--pill); color: var(--meta); }
.res .ad { display: flex; align-items: center; gap: 6px; font: 400 12px/1.4 var(--mono); word-break: break-all; }
.res .lk { display: flex; gap: 6px; flex-wrap: wrap; }
.res .lk a { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); font: 700 12px var(--ui); color: var(--blue); }
.res .lk a:hover { background: var(--hover); }
.res .lk a.gm { background: var(--gold); border-color: var(--gold); color: #241a00; }
.res .lk svg { width: 12px; height: 12px; fill: currentColor; }
.res .note { font-size: 12px; color: var(--meta); border-top: 1px solid var(--line-2); padding-top: 8px; }

/* inbox */
.inbox a { display: grid; gap: 3px; padding: 12px; border-bottom: 1px solid var(--line-2); }
.inbox a:last-child { border-bottom: 0; }
.inbox a:hover { background: var(--hover); }
.inbox a.unread { background: rgba(0,121,211,.06); }
.inbox .t { font: 700 12px var(--ui); color: var(--meta); }
.inbox .t b { color: var(--ink); }
.inbox .bd { font-size: 13px; line-height: 1.5; }
.cres a { display: grid; gap: 5px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cres a:last-child { border-bottom: 0; }
.cres a:hover { background: var(--hover-2); }
.cres .t { display: flex; align-items: center; gap: 6px; font: 400 12px var(--ui); color: var(--meta); }
.cres .t b { color: var(--ink); font-weight: 600; }
.cres .bd { font: 400 14px/20px var(--body); }
.cres .on { font: 400 12px var(--ui); color: var(--meta); }

.zero { display: grid; gap: 8px; place-items: center; text-align: center; padding: 48px 24px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; }
.zero svg { width: 42px; height: 42px; fill: var(--line); }
.zero h3 { margin: 0; font: 500 18px var(--ui); }
.zero p { margin: 0; color: var(--meta); max-width: 40ch; line-height: 1.6; font-size: 14px; }
.warnbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; background: var(--card); border: 1px solid var(--alert); color: var(--alert); font-size: 13px; }
.warnbar svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; padding: 10px 18px; border-radius: 4px; background: var(--ink); color: var(--card); font: 700 13px var(--ui); }
.sk { height: 88px; border-radius: 4px; border: 1px solid var(--line); background: var(--card); position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,var(--hover),transparent); animation: sh 1.2s infinite; }
@keyframes sh { to { transform: translateX(100%); } }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--meta); margin-bottom: 4px; }
.crumbs a:hover { text-decoration: underline; }
.backb { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 8px; margin-right: 4px;
         border-radius: 999px; background: var(--pill); color: var(--pill-ink); font: 600 12px/1 var(--ui); }
.backb:hover { background: var(--pill-h); }
.backb svg { width: 16px; height: 16px; fill: currentColor; transform: rotate(90deg); }
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
.tagrow a { padding: 4px 10px; border-radius: 20px; background: var(--pill); font: 700 12px var(--ui); color: var(--pill-ink); }
.tagrow a:hover { color: var(--ink); }

@media (max-width: 1100px) { .col-side { display: none; } }
@media (max-width: 960px) {
  .lnav { position: fixed; left: 0; top: var(--top); bottom: 0; width: 260px; z-index: 70; border-radius: 0; border-width: 0 1px 0 0; max-height: none; transform: translateX(-100%); transition: transform .2s ease; }
  body.nav .lnav { transform: none; }
  body.nav::after { content: ""; position: fixed; inset: var(--top) 0 0; background: rgba(0,0,0,.5); z-index: 65; }
  .hburger { display: grid; } .logo b { display: none; }
  .fee-tracker .fee-label { display: none; }
  .wrap { padding: 16px 12px 60px; } .chero { margin: -16px -12px 16px; }
}
@media (max-width: 560px) {
  .fee-tracker { padding: 0 8px; margin-right: 1px; }
  .pa button span, .pa a span { display: none; }
  .md { max-height: 100vh; height: 100%; border-radius: 0; } .scrim { padding: 0; }
  .welcome-scrim { padding: 12px; }
  .wallet-welcome { grid-template-columns: 1fr; max-height: calc(100vh - 24px); overflow-y: auto; }
  .welcome-art { min-height: 220px; height: 34vh; }
  .welcome-copy { padding: 28px 24px 24px; }
  .welcome-copy h2 { font-size: 24px; }
  .profile-head { padding: 18px; }
  .profile-head > .btn { width: 100%; }
  .profile-photo-edit { align-items: flex-start; }
  .cf { padding: 12px; } .csorts { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }