/* ═══════════════════════════════════════════════════════════════
   rewards.css — #/rewards, "Invite & earn" (ui-rewards.js) and your
   network (ui-clans.js): the invite, earnings, your share of friends'
   fees as a step chart with the tier table, friends, the calculator,
   how it works, the operator console.
   ═══════════════════════════════════════════════════════════════ */

.gold{color:var(--warn)}
.rw-page h2{margin:0;font:650 15px/1.2 var(--display);letter-spacing:-.01em}

/* "X invited you" */
.rw-join{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;margin-bottom:14px;border-radius:var(--r-lg);background:var(--brand-soft);border:1px solid var(--brand-line)}
.rw-join.done{background:var(--card);border-color:var(--line)}
.rj-ic{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:10px;color:var(--brand-text);background:rgba(var(--brand-rgb),.12)}
.rj-ic.ok{color:var(--brand-ink);background:var(--brand)}
.rj-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rj-tx b{font-size:14px;font-weight:650}
.rj-tx span{color:var(--text-2);font-size:12.5px;line-height:1.5}
.rj-act{display:flex;gap:8px;flex-shrink:0}

/* ── the invite + earnings ── */
.rw-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:14px;align-items:stretch}
.rw-pass,.rw-earn,.rw-share,.rw-friends,.rw-calc,.rw-how,.rw-ops,.rw-net{padding:18px;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);min-width:0}
.rw-pass{display:flex;flex-direction:column;gap:14px}
.rp-h p{margin:5px 0 0;color:var(--text-2);line-height:1.5;max-width:560px}
.rp-sk{height:14px;border-radius:7px}
.rp-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.rp-link{flex:1;min-width:260px;display:flex;align-items:center;gap:8px;height:44px;padding:4px 4px 4px 14px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-2)}
.rp-link.dim{max-width:520px}
.rw-pass>.rp-link{flex:0 0 auto}
.rp-link.dim code{color:var(--faint)}
.rp-link code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px/1 var(--mono);color:var(--text)}
.rp-cp{height:34px;flex-shrink:0;border-radius:8px;min-width:96px}
.rp-code{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 12px;border-radius:10px;border:1px solid var(--line-2)}
.rp-code>span{font-size:11.5px;color:var(--mute)}
.rp-code b{font:700 15px/1 var(--mono);letter-spacing:.04em}
.rp-warn{display:flex;align-items:center;gap:6px;margin:-4px 0 0;font-size:11.5px;color:var(--mute)}
.rp-share{display:flex;flex-wrap:wrap;gap:6px}
.rp-sh{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--card-2);border:1px solid var(--line-2);transition:border-color .15s,color .15s}
.rp-sh:hover{color:var(--text);border-color:var(--text-2)}
.rp-sh[aria-pressed=true]{color:var(--text);border-color:var(--brand-line)}
.rp-setup{align-self:flex-start}
.rp-claim{display:flex;gap:8px;flex-wrap:wrap;width:100%;max-width:560px}
.rp-in{position:relative;flex:1;min-width:180px;display:block}
.rp-in .inp{width:100%;height:42px;padding-right:118px;font:600 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border-radius:10px}
.rp-in .inp:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px var(--brand-soft)}
.rp-av{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--mute);pointer-events:none;white-space:nowrap}
.rp-av.ok{color:var(--brand-text)}
.rp-av.bad{color:var(--down)}
.rp-claim .btn{height:42px}
.rp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.8;animation:rp-dot 1s ease-in-out infinite}
@keyframes rp-dot{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}}
.rp-qrbox{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--mute)}
.rp-qrbox .rw-qr{display:block;width:132px;height:132px;border-radius:8px}
.rp-qrsk{width:132px;height:132px;border-radius:8px}
.rp-qrerr{margin:0;font-size:12px;color:var(--mute);line-height:1.45}

.rw-earn{display:flex;flex-direction:column;gap:12px}
.re-big{display:flex;flex-direction:column;gap:2px}
.re-big b{font:750 36px/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:proportional-nums}
.re-big>span{font-size:11.5px;color:var(--mute)}
.re-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
.re-row>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.re-row dt{font-size:11.5px;color:var(--mute)}
.re-row dd{margin:0;font:650 16px/1.1 var(--display);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:proportional-nums}
.re-row dd.due{color:var(--warn)}
.re-bars{display:grid;grid-template-columns:repeat(8,minmax(0,24px));justify-content:space-between;gap:4px;height:58px;align-items:end;margin-top:4px}
.re-bar{height:100%;display:flex;align-items:flex-end}
.re-bar i{display:block;width:100%;height:var(--h);border-radius:4px 4px 0 0;background:rgba(var(--brand-rgb),.35);transform-origin:50% 100%}
.re-bar.now i{background:var(--brand)}
.re-wk{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);margin-top:-6px}
.re-note{margin:0;font-size:11.5px;color:var(--mute);line-height:1.5}
.re-chk{display:inline-flex;align-items:center;gap:5px;color:var(--text-2)}
.re-chk .rp-dot{width:6px;height:6px;color:var(--warn)}

/* ── your share: the step chart and the tier table ── */
.rw-share{margin-top:14px}
.rs-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.rs-h p{margin:5px 0 0;font-size:12.5px;color:var(--mute);line-height:1.5;max-width:640px}
.rs-now{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.rs-now span{font-size:11.5px;color:var(--mute)}
.rs-now b{font:750 30px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:proportional-nums}
.rs-now small{font-size:12px;color:var(--text-2)}
.rs-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:20px;align-items:center;margin-top:12px}
.rs-chart{position:relative;margin:0;min-height:200px;cursor:crosshair}
.rs-chart svg{position:absolute;left:0;top:0;overflow:visible}
.rs-grid-l line{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.rs-ax text{font:500 11px var(--sans);fill:var(--mute);font-variant-numeric:tabular-nums}
.rs-ax .rs-axt{fill:var(--faint)}
.rs-area{fill:var(--brand);fill-opacity:.08}
.rs-line{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rs-reach{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rs-tn{font:600 11px var(--sans);fill:var(--mute)}
.rs-tn.cur{fill:var(--text)}
.rs-me-l{stroke:var(--brand);stroke-width:1;stroke-opacity:.5}
.rs-me{fill:var(--brand);stroke:var(--card);stroke-width:2}
.rs-x{stroke:var(--text-2);stroke-width:1;stroke-opacity:.5;pointer-events:none;opacity:0}
.rs-x.on{opacity:1}
.rs-tip{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:7px 10px;border-radius:8px;background:#16181d;border:1px solid var(--line-2);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.9);white-space:nowrap;pointer-events:none}
.rs-tip b{font-size:13px;font-weight:700}
.rs-tip span{font-size:11.5px;color:var(--text-2)}
.rs-tw{min-width:0;overflow-x:auto}
.rs-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.rs-tbl th,.rs-tbl td{height:34px;padding:0 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.rs-tbl th:first-child{text-align:left}
.rs-tbl thead th{height:30px;font-size:11.5px;font-weight:500;color:var(--mute)}
.rs-tbl tbody th{font-weight:600}
.rs-tbl tbody tr:last-child>*{border-bottom:0}
.rs-tbl tr.cur>*{background:rgba(var(--brand-rgb),.07)}
.rs-tbl tr.cur>th{box-shadow:inset 2px 0 0 var(--brand);color:var(--brand-text)}
.rs-tbl tr.nxt>th::after{content:"next";margin-left:7px;font-size:10px;font-weight:600;color:var(--mute)}
.rs-next{margin:12px 0 0;font-size:12.5px;color:var(--text-2)}
.rs-next b{color:var(--text)}

/* ── your network (ui-clans.js) ── */
.rw-net{--cc:#a78bfa;margin-top:14px}
.nw-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.nw-ht p{margin:5px 0 0;font-size:12.5px;color:var(--mute);line-height:1.5;max-width:680px}
.nw-legend{display:flex;gap:14px;font-size:11.5px;color:var(--mute);padding-top:2px}
.nw-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lg{display:inline-block;width:18px;height:0;border-top:2px solid}
.lg.act{border-color:var(--brand)}
.lg.idle{border-color:rgba(255,255,255,.25)}
.lg.clan{border-color:var(--cc)}
.nw-stage{position:relative;min-height:320px;margin-top:12px;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.nw-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.nw-guide{fill:none;stroke:rgba(255,255,255,.045);stroke-width:1}
.nl{fill:none;stroke-width:1.5;stroke-linecap:round}
.nl.act{stroke:rgba(var(--brand-rgb),.7)}
.nl.idle{stroke:rgba(255,255,255,.16)}
.nl.inclan{stroke:var(--cc);stroke-opacity:.75}
.nl.idle.inclan{stroke-opacity:.4}
.nl.ghost{stroke:rgba(255,255,255,.07)}
.nl.more{stroke:rgba(255,255,255,.14)}
.nf{fill:var(--brand-light)}
.nw-nodes{position:absolute;inset:0}
.nw-node{position:absolute;transform:translate(-50%,-50%);display:block;padding:0;border-radius:11px;z-index:1;-webkit-tap-highlight-color:transparent}
.nw-node:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.nn-av{position:relative;display:grid;place-items:center;transition:scale .2s var(--ease)}
.nw-node:hover .nn-av,.nw-node.sel .nn-av{scale:1.08}
.nw-node.act .mono-av{box-shadow:inset 0 0 0 1px hsl(var(--h) 30% 32% / .8),0 0 0 2px rgba(var(--brand-rgb),.7)}
.nw-node.inclan .mono-av{box-shadow:inset 0 0 0 1px hsl(var(--h) 30% 32% / .8),0 0 0 2px var(--cc)}
.nw-node.idle:not(.inclan) .nn-av{opacity:.75}
.nn-tag{position:absolute;left:-12px;top:-9px;height:15px;padding:0 4px;border-radius:4px;font:700 9px/15px var(--sans);letter-spacing:.03em;color:var(--text-2);background:var(--card-2);border:1px solid var(--line-2)}
.nn-lb{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);padding:1px 6px;border-radius:6px;font-size:11px;font-weight:550;color:var(--text-2);white-space:nowrap;
  background:rgba(12,13,16,.86);opacity:0;transition:opacity .15s;pointer-events:none}
.nw-node.lb .nn-lb,.nw-node:hover .nn-lb,.nw-node:focus-visible .nn-lb,.nw-node.sel .nn-lb{opacity:1}
.nw-node.up .nn-lb{top:auto;bottom:calc(100% + 5px)}
.nw-node.up .nn-tag{top:auto;bottom:-8px}
.nw-node.ghost .nn-av{width:34px;height:34px;border-radius:10px;border:1px dashed rgba(255,255,255,.2);color:var(--faint)}
.nw-node.ghost:hover .nn-av,.nw-node.ghost.sel .nn-av{border-color:var(--brand-line);color:var(--brand-text)}
.nw-node.more .nn-av{width:34px;height:34px;border-radius:10px;font-size:11.5px;font-weight:700;color:var(--text-2);background:var(--card-2)}
.nw-me{position:absolute;transform:translate(-50%,-50%);z-index:2}
.nm-av{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--brand),0 0 0 8px rgba(var(--brand-rgb),.08)}
.nm-cb{position:absolute;right:-10px;bottom:-4px;z-index:1}
.nw-stage.nar .nm-av{width:60px;height:60px}
.nm-lb{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;white-space:nowrap;padding:3px 9px;border-radius:8px;background:rgba(12,13,16,.86)}
.nm-lb b{font-size:13px;font-weight:650}
.nm-lb span{font-size:11px;color:var(--mute)}
.nw-pop{position:absolute;z-index:5;width:240px;padding:12px;border-radius:var(--r-lg);background:#15171c;border:1px solid var(--line-2);box-shadow:0 18px 40px -14px rgba(0,0,0,.9);
  display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.np-who{display:flex;align-items:center;gap:10px;min-width:0}
.np-who>div>b{display:block;font-size:14px;font-weight:650}
.np-who .mono{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--mute)}
.np-cp{display:inline-flex;color:var(--faint)}
.np-cp:hover{color:var(--text)}
.np-kv{display:flex;justify-content:space-between;gap:10px;color:var(--mute)}
.np-kv b{color:var(--text);font-weight:600}
.np-st{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:4px 8px;border-radius:7px;font-size:11.5px;font-weight:600;color:var(--mute);background:var(--card-2)}
.np-st.on{color:var(--brand-text);background:var(--brand-soft)}
.np-t{font-size:14px;font-weight:650}
.nw-pop p{margin:0;color:var(--text-2);line-height:1.5}
.nw-pop .btn{justify-content:center}
.nw-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line)}
.nw-strip .ns-t{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.nw-strip .ns-t b{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650}
.nw-strip .ns-t span{font-size:12px;color:var(--text-2);line-height:1.45}
.nw-strip .ns-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--brand-text);background:var(--brand-soft)}

/* ── friends + calculator ── */
.rw-mid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:14px;margin-top:14px;align-items:start}
.rf-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.rf-h .n{margin-left:4px;font-size:12px;font-weight:600;color:var(--brand-text)}
.rf-sub{font-size:12px;color:var(--mute)}
.rf-hd,.rf-row{display:grid;grid-template-columns:28px minmax(0,1fr) 88px 96px 96px;gap:12px;align-items:center}
.rf-hd{height:28px;font-size:11.5px;color:var(--mute);border-bottom:1px solid var(--line)}
.rf-hd>span:first-child{grid-column:1/3}
.rf-row{padding:8px 0;border-bottom:1px solid var(--line)}
.rf-row:last-child{border-bottom:0}
.rf-hd .r,.rf-row .r{text-align:right;justify-self:end}
.rf-who{display:flex;flex-direction:column;min-width:0}
.rf-who b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-who>span{font-size:11.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-cl{font-size:10.5px;font-weight:700;color:var(--mute)}
.rf-n{font-size:13px;font-weight:600}
.rf-st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--mute)}
.rf-row.on .rf-st{color:var(--brand-text)}
.rf-all{margin-top:10px}
.rf-empty{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 0 6px;color:var(--mute);font-size:12.5px}
.rf-empty b{color:var(--text);font-size:13.5px;font-weight:650}
.rf-empty p{margin:0;line-height:1.5}

.rc-k{font-size:12.5px;color:var(--text-2)}
.rc-sl{display:grid;grid-template-columns:1fr auto;gap:9px 10px;align-items:baseline;margin-top:16px;cursor:pointer}
.rc-sl b{font:700 15px/1 var(--display);letter-spacing:-.01em}
.rc-sl input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:6px 0;border-radius:99px;outline:0;cursor:pointer;
  background:linear-gradient(90deg,var(--brand) var(--fill,50%),var(--line-2) var(--fill,50%))}
.rc-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px var(--card),0 1px 6px rgba(0,0,0,.6)}
.rc-sl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 3px var(--card),0 1px 6px rgba(0,0,0,.6)}
.rc-sl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--brand)}
.rc-kind{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px}
.rc-out{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rc-out>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.rc-out b{font:750 30px/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:proportional-nums}
.rc-sub{font-size:12px;color:var(--mute)}
.rc-note{margin:10px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5}

/* how it works: a sequence, so it's numbered */
.rw-how{margin-top:14px}
.rh-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rh-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.rh-steps i{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font:700 13px/1 var(--display);font-style:normal;color:var(--text);background:var(--card-2);border:1px solid var(--line-2)}
.rh-steps b{display:block;font-size:13.5px;font-weight:650;margin-bottom:3px}
.rh-steps span{font-size:12.5px;color:var(--text-2);line-height:1.5}
.rh-fine{margin:16px 0 0;font-size:11.5px;color:var(--faint);line-height:1.55;max-width:860px}

/* operator console */
.rw-ops{margin-top:14px;border-style:dashed;border-color:var(--line-2)}
.ro-h{display:flex;align-items:center;gap:10px}
.ro-p{margin:8px 0 0;font-size:12.5px;color:var(--text-2);line-height:1.55;max-width:820px}
.ro-steps{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--text-2);line-height:1.55;max-width:900px}
.ro-steps code,.ro-p code{font:500 11.5px var(--mono);color:var(--brand-text);background:var(--bg-2);padding:1px 5px;border-radius:5px;border:1px solid var(--line)}
.ro-auth{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.ro-auth .inp{width:300px;max-width:100%;height:34px}
.ro-rem{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.ro-saved{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2)}
.ro-tot{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ro-tot span{display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);font-size:11.5px;color:var(--mute)}
.ro-tot b{font:650 15px/1.1 var(--display);color:var(--text)}
/* operator console → error reports */
.ro-h2{margin-top:26px}
.ro-errs{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.ro-err{border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.ro-err summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;list-style:none;font-size:12.5px}
.ro-err summary::-webkit-details-marker{display:none}
.ro-err summary b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ro-err[open] summary b{white-space:normal;overflow-wrap:anywhere}
.ro-err .tag.warn{color:var(--warn,#f0b44c)}
.ro-err-b{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:0 12px 12px;font-size:12px;color:var(--mute)}
.ro-err-b pre{margin:0;max-width:100%;overflow:auto;padding:8px 10px;border-radius:8px;background:var(--bg);font:11px/1.5 var(--mono);color:var(--text-2,var(--text))}
@media (max-width:640px){.ro-err summary{grid-template-columns:auto minmax(0,1fr) auto}.ro-err summary .r.mute{display:none}}
.ro-tot b.gold{color:var(--warn)}
.ro-tbl{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto}
.ro-hd,.ro-row{display:grid;grid-template-columns:110px minmax(190px,1.5fr) 64px 92px 92px 92px 110px;gap:10px;align-items:center;min-width:800px;padding:0 12px}
.ro-hd{height:32px;font-size:11.5px;color:var(--mute);background:var(--bg-2);border-bottom:1px solid var(--line)}
.ro-row{min-height:44px;border-bottom:1px solid var(--line);font-size:12.5px}
.ro-row:last-child{border-bottom:0}
.ro-row.due{background:var(--warn-soft)}
.ro-hd .r,.ro-row .r{text-align:right;justify-content:flex-end}
.ro-row .mono{display:flex;align-items:center;gap:6px;min-width:0}
.ro-cp{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;color:var(--mute)}
.ro-cp:hover{color:var(--text);background:var(--card-2)}
.ro-ch{font:500 10.5px var(--sans);color:var(--faint)}
.ro-pay{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:4px 0 12px}
.ro-pay label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--mute)}
.ro-pay .field{height:34px;width:140px}
.ro-pay .inp{height:34px;width:260px}
.ro-csv{margin-top:12px}

/* the invite sheet (after connecting a wallet with a pending invite) */
.rj-sheet{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 6px 2px;text-align:center}
.rj-big{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-lg);color:var(--brand-text);background:var(--brand-soft)}
.rj-sheet>b{font:700 17px/1.25 var(--display);letter-spacing:-.02em}
.rj-sheet p{margin:0;color:var(--text-2);line-height:1.55;max-width:380px}
.rj-sheet p b{color:var(--brand-text)}

/* ── narrower views ── */
@container view (max-width:1180px){
  .rw-top{grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr)}
  .rs-grid{grid-template-columns:1fr}
}
@container view (max-width:900px){
  .rw-top{grid-template-columns:1fr}
  .rw-mid{grid-template-columns:1fr}
  .rh-steps{grid-template-columns:1fr;gap:12px}
}
@container view (max-width:700px){
  .rw-pass,.rw-earn,.rw-share,.rw-friends,.rw-calc,.rw-how,.rw-ops,.rw-net{padding:14px}
  .rp-row{flex-direction:column}
  .rp-code{align-self:flex-start}
  .rs-now{align-items:flex-start;text-align:left}
  .rf-hd{display:none}
  .rf-row{grid-template-columns:28px minmax(0,1fr) auto;row-gap:4px}
  .rf-row>.rf-n:nth-of-type(1){display:none}
  .rf-row .rf-st{grid-column:2 / -1;justify-self:start}
  .rw-join{flex-wrap:wrap}
  .rj-act{width:100%}
  .rj-act .btn{flex:1}
  .nw-legend{gap:10px;font-size:11px}
}
@container view (max-width:480px){
  .rp-link{min-width:0;height:auto;flex-wrap:wrap;padding:10px}
  .rp-link code{flex-basis:100%;white-space:normal;word-break:break-all;line-height:1.4}
  .rp-cp{flex:1}
  .re-row{grid-template-columns:1fr 1fr}
  .re-row>div:last-child{grid-column:1/-1}
  .rc-out b{font-size:26px}
  .rs-tbl th,.rs-tbl td{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){ .rp-dot{animation:none} }

/* reported clan-room messages (operator console) */
.ro-reps .ro-err{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ro-eh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.ro-eh b{font-weight:500;overflow-wrap:anywhere}
.ro-ed{font-size:12px;color:var(--mute)}
.ro-ea{display:flex;gap:6px}