:root {
  color-scheme: dark;
  --page: #0e0e10;
  --surface: #18181b;
  --border: #2c2c31;
  --text: #efeff1;
  --muted: #adadb8;
  --green: #85f4ad;
  --green-bright: #55ed94;
  --red: #eb3158;
  --purple: #b891ff;
  font-family: Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); color: var(--text); }
body { overflow: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { height: 100vh; min-height: 500px; display: grid; grid-template-rows: 50px minmax(0, 1fr); }
.topbar { display: flex; align-items: center; gap: 20px; padding: 0 12px; background: #18181b; border-bottom: 1px solid #0a0a0c; z-index: 10; box-shadow: 0 2px 7px #0005; }
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; font-weight: 800; font-size: 18px; white-space: nowrap; }
.brand .brand-logo { width: 42px; height: 42px; flex: 0 0 42px; display: block; overflow: visible; }
.brand-eye-blink { transform-box: fill-box; transform-origin: center; }
.brand:is(:hover, :focus-visible) .brand-eye-blink { animation: brand-eye-blink 3s linear infinite; }
@keyframes brand-eye-blink { 0%, 3%, 9%, 100% { transform: scaleY(1); } 5%, 7% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) { .brand:is(:hover, :focus-visible) .brand-eye-blink { animation: none; } }
.brand-wordmark { width: 132px; height: 38px; object-fit: contain; }
.top-nav { align-self: stretch; display: flex; align-items: center; gap: 23px; font-weight: 700; font-size: 15px; }
.top-nav a { height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; }
.top-nav a.selected { color: var(--green); border-bottom-color: var(--green); }
.top-nav a:hover { color: var(--green); }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--text); font-size: 19px; }
.icon-button:hover, .player-button:hover { background: #ffffff18; }
.icon-button svg, .player-button svg, .topbar svg, .channel-actions svg, .chat-panel svg { width: 18px; height: 18px; stroke-width: 2.2; }
.top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.sign-in-button { background: #5fcb88; color: #102318; border: 0; border-radius: 4px; padding: 7px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.sign-in-button:hover { background: #85f4ad; }
.account-username { max-width: 180px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
#accountDialog, #chatNameDialog { width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px; border: 1px solid #3d3d44; border-radius: 6px; background: #18181b; color: var(--text); box-shadow: 0 16px 60px #0008; }
#accountDialog::backdrop, #chatNameDialog::backdrop { background: #000a; }
.account-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.account-dialog-head h2 { margin: 0; font-size: 20px; }
.account-tabs { display: flex; border-bottom: 1px solid #36363d; margin-bottom: 20px; }
.account-tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; padding: 10px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; }
.account-tabs button[aria-selected="true"] { border-bottom-color: #5fcb88; color: #85f4ad; }
#accountForm label, #chatNameForm label { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 600; }
#accountForm input, #chatNameForm input { width: 100%; padding: 10px; border: 1px solid #505058; border-radius: 4px; background: #0e0e10; color: var(--text); font-size: 14px; }
#accountError, #chatNameError { color: #f2a1a9; font-size: 12px; line-height: 1.5; }
#chatNameSubmit { width: 100%; margin-top: 20px; }
.account-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; color: var(--muted); font-size: 12px; }
.account-divider::before, .account-divider::after { content: ''; flex: 1; height: 1px; background: #36363d; }
.wallet-sign-in { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid #505058; border-radius: 4px; background: #26262c; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }
.wallet-sign-in:hover { border-color: var(--green); }
.wallet-sign-in svg { width: 16px; height: 16px; }
.account-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#chatNickname { cursor: pointer; }
#accountSubmit { width: 100%; margin-top: 24px; }
@media (max-width: 700px) { .top-actions #signOutButton { display: inline-grid; } .account-username { max-width: 95px; } }
.account { width: 30px; height: 30px; display: grid; place-items: center; margin-left: 5px; border: 2px solid #28282d; border-radius: 50%; background: #ddf717; color: #141511; font-size: 15px; font-weight: 800; }

.workspace { --chat-width: 340px; display: grid; grid-template-columns: 50px minmax(0, 1fr) var(--chat-width); min-height: 0; }
.channel-rail { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0; background: #1f1f23; border-right: 1px solid var(--border); }
.channel-rail .icon-button svg { width: 20px; height: 20px; }
.rail-avatar { width: 34px; height: 34px; overflow: hidden; border: 2px solid #5fcb88; border-radius: 50%; background: #08090b; }
.rail-avatar:hover { border-color: #fff; }
.rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace.chat-collapsed { --chat-width: 48px; }
.live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--red); }

.stream-main { min-width: 0; overflow-y: auto; overflow-x: hidden; background: var(--page); scrollbar-color: #4b4b53 transparent; }
.player { width: 100%; aspect-ratio: 16 / 9; min-height: 250px; position: relative; overflow: hidden; background: #08090b; isolation: isolate; }
.player.compact-market {min-height:420px;}
.player-capture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.player::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #0008 0, transparent 18%, transparent 70%, #000b 100%); }
.player:has(.trench-browser)::after {background:none;}
.player.is-paused .player-capture { filter: brightness(.48) saturate(.55); }
.player-top { position:absolute;top:var(--scene-top,0px);left:var(--scene-left,0px);width:var(--scene-width,100%);height:52px;padding:6px 12px;z-index:2;display:flex;align-items:center;gap:10px;min-width:0;background:#0c0e10;font-size:16px;line-height:20px;font-weight:700;pointer-events:none; }
.live-badge { padding: 3px 6px; border-radius: 3px; background: #eb1845; color: #fff; font-size: 12px;line-height:16px;flex-shrink:0; font-weight: 800; text-shadow: none; }
.stream-topic { min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere; }
.webcam { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: clamp(160px, 32%, 360px); aspect-ratio: 16 / 9; border: 2px solid #85f4ad; background: #08090b; box-shadow: 0 10px 30px #0009, 0 0 0 1px #000; }
.webcam > img, .webcam > canvas { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.channel-avatar { object-position: 50% 48%; }
.player-status { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px 16px; border-radius: 4px; background: #0e0e10e8; font-size: 15px; font-weight: 700; white-space: nowrap; }
.player:has(.trench-browser) .player-status {left:auto;right:10px;top:12px;transform:none;font-size:10px;padding:4px 7px;color:#babcc5;border:1px solid #333640;}
.player:has(.trench-browser).is-paused .player-top {padding-right:100px;}
.subscription-alert { position: absolute; z-index: 5; left: 50%; top: 50%; width: min(340px, 88%); max-height: calc(100% - 16px); overflow: auto; min-height: min(210px, calc(100% - 16px)); transform: translate(-50%, -50%); padding: 8px 18px 20px; border: 2px solid #5fcb88; border-radius: 4px; background: #0c1311f2; box-shadow: 0 0 0 4px #0c131188, 0 18px 50px #000c; text-align: center; pointer-events: none; animation: subscription-enter 420ms steps(7, end) both; }
.subscription-alert-art { height: 128px; display: grid; place-items: center; }
.subscription-alert-art img { width: 116px; height: 116px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 #0009); animation: subscription-bounce 900ms steps(5, end) infinite alternate; }
.subscription-alert-title { margin: 0 0 5px; overflow-wrap: anywhere; color: #fff; font-size: clamp(15px, 2vw, 22px); font-weight: 800; line-height: 1.2; }
.subscription-alert-caption { margin: 0; color: #85f4ad; font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.donation-alert-message { margin: 12px 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#donationDialog { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 24px; border: 1px solid #3d3d44; border-radius: 6px; background: #18181b; color: var(--text); }
#donationDialog::backdrop { background: #000a; }
.donation-test-label { color: var(--muted); font-size: 13px; }
#donationForm label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 600; }
#donationForm input, #donationForm textarea { width: 100%; padding: 10px; border: 1px solid #505058; border-radius: 4px; background: #0e0e10; color: var(--text); font-size: 14px; }
#donationForm textarea { resize: vertical; }
#donationSubmit { width: 100%; margin-top: 18px; }
#donationError { color: #f2a1a9; font-size: 13px; line-height: 1.5; }
.donation-amounts { display: flex; gap: 6px; align-items: stretch; }
#donationForm .donation-amounts input { flex: 1 1 90px; min-width: 0; }
.donation-preset { flex: 0 0 auto; padding: 0 10px; border: 1px solid #505058; border-radius: 4px; background: #26262c; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.donation-preset:hover { border-color: var(--green); }
.donation-status { margin: 12px 0 0; color: var(--green); font-size: 13px; line-height: 1.5; }
.donation-secondary { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid #505058; border-radius: 4px; background: transparent; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.donation-secondary:hover { border-color: var(--green); }
.donation-qr { margin-top: 12px; text-align: center; }
.donation-qr svg { display: block; width: min(220px, 100%); height: auto; margin: 0 auto 8px; border-radius: 6px; background: #fff; }
.donation-qr a { color: var(--green); font-size: 13px; }
.donation-wallet { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.donation-wallet code { color: var(--text); font-size: 12px; }
.donation-copy { margin-left: 4px; padding: 2px 8px; border: 1px solid #505058; border-radius: 4px; background: #26262c; color: var(--text); font-size: 12px; cursor: pointer; }
.donation-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.donation-manual { margin-top: 14px; border-top: 1px solid #2f2f35; padding-top: 12px; }
.donation-manual summary { cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; }
#donationForm .donation-manual input { margin-top: 10px; font-family: ui-monospace, monospace; font-size: 12px; }
@keyframes subscription-enter { from { opacity: 0; transform: translate(-50%, -35%) scale(.75); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes subscription-bounce { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .subscription-alert, .subscription-alert-art img { animation: none; } }
.player-controls { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 12px; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .player-controls { opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
  .player:hover .player-controls, .player:has(:focus-visible) .player-controls { opacity: 1; pointer-events: auto; }
}
.player.is-paused .player-controls { opacity: 1; pointer-events: auto; }
.stream-countdown {position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#080d10;color:#fff;pointer-events:none;overflow:hidden;}
.stream-countdown[hidden] {display:none;}
.player:has(.stream-countdown:not([hidden])) .player-top {visibility:hidden;}
.countdown-pepe {width:min(200px,35%);max-height:32%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:3px solid #53fc18;animation:countdown-bob 1s ease-in-out infinite alternate;}
.countdown-label {font-size:12px;font-weight:800;color:#85f4ad;letter-spacing:0;}
.countdown-number {font-size:64px;line-height:1;font-weight:900;font-variant-numeric:tabular-nums;min-width:100px;text-align:center;color:#85f4ad;}
.countdown-track {width:min(220px,55%);height:6px;background:#29323b;margin-top:6px;}
.countdown-track span {display:block;height:100%;width:var(--countdown-progress,0%);background:#85f4ad;transition:width 100ms linear;}
@keyframes countdown-bob {from{transform:translateY(0) rotate(-2deg);}to{transform:translateY(-5px) rotate(2deg);}}
.stream-countdown.is-final .countdown-number {color:#fff;text-shadow:0 0 24px rgba(133,244,173,.75);}
.stream-countdown.is-final .countdown-pepe {animation-duration:.35s;}
.stream-countdown.is-ending {animation:countdown-out 1.4s ease-in forwards;}
.stream-countdown.is-ending .countdown-number {font-size:72px;color:#fff;background:#e91916;padding:2px 18px;border-radius:6px;letter-spacing:2px;animation:countdown-live .45s cubic-bezier(.2,.9,.3,1.3);}
.stream-countdown.is-ending .countdown-track {opacity:0;transition:opacity .3s;}
@keyframes countdown-live {from{transform:scale(1.8);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes countdown-out {0%,55%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.06);}}
.offline-slate {position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;background:radial-gradient(circle at 50% 40%,#16202a 0%,#080d10 70%);color:#dfe5ea;text-align:center;}
.offline-slate[hidden] {display:none;}
.offline-pepe {width:min(170px,30%);max-height:34%;aspect-ratio:1;object-fit:cover;border-radius:50%;filter:grayscale(1) brightness(.7);animation:offline-sleep 3s ease-in-out infinite alternate;}
.offline-slate strong {font-size:clamp(18px,3.2vw,30px);font-weight:900;}
.offline-slate span {font-size:13px;color:#8d98a3;}
.offline-badge {font-size:11px;font-weight:800;letter-spacing:1px;color:#fff;background:#45454c;padding:3px 8px;border-radius:4px;}
.player:has(.offline-slate:not([hidden])) .player-top, .player:has(.offline-slate:not([hidden])) .webcam {visibility:hidden;}
@keyframes offline-sleep {from{transform:translateY(0) rotate(-3deg);}to{transform:translateY(4px) rotate(-1deg);}}
@media(prefers-reduced-motion:reduce){.countdown-pepe{animation:none;}.countdown-track span{transition:none;}.stream-countdown.is-ending,.stream-countdown.is-ending .countdown-number,.offline-pepe{animation:none;}}
.trench-browser { position: absolute; inset: 0; background: #0c0e10; color: #eef0ef; overflow: hidden; padding-top:var(--scene-title-space,52px); font-size: 12px; pointer-events: none; user-select: none; display:grid; grid-template-rows:30px 26px minmax(0,1fr); container-type:size; }
.browser-toolbar svg { width: 13px; height: 13px; flex-shrink: 0; }
.browser-back { display:grid;place-items:center;width:22px;height:22px;flex-shrink:0; }
.browser-toolbar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #171b1d; color: #aeb7b2; }
.browser-address { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; }
.read-only-label { color: #5fcb88; white-space: nowrap; }
.browser-status { display: flex; align-items:center;justify-content: space-between; gap: 8px; padding: 4px 10px; border-bottom: 1px solid #303738; color: #929f9b; font-size: 10px;min-width:0; }
.browser-source,.browser-action {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;}
.browser-action {max-width:35%;color:#90b2a1;}
.market-content { min-height:0; overflow:hidden; padding:8px 10px; display:grid; grid-template-rows:28px minmax(0,1fr); gap:6px; }
.browser-cursor { position: absolute; left: 0; top: 0; z-index: 1; width: 25px; height: 25px; transform: translate(32px,185px); color: #14271d; filter: drop-shadow(0 1px 2px #000); }
.browser-cursor svg { width: 25px; height: 25px; fill: #fff; stroke-width: 1.7px; }
.browser-cursor.is-clicking::after { content: ''; position: absolute; width: 28px; height: 28px; left: -12px; top: -12px; border: 2px solid #5fcb88; border-radius: 50%; animation: cursor-click 450ms ease-out forwards; }
@keyframes cursor-click { from { transform: scale(.3);opacity:1; } to { transform:scale(1.2);opacity:0; } }
@media(prefers-reduced-motion:reduce) { .browser-cursor {transition:none;}.browser-cursor.is-clicking::after {animation:none;} }
.market-heading { display: flex; align-items: center; gap: 8px; margin:0; min-width:0; overflow:hidden; }
.market-heading h2 { font-size: 18px; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.market-label { color: #aeb7b2; font-size: 11px; }
.market-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.market-table th { font-size: 10px; font-weight: 500; color: #96a29d; text-align: right; padding: 8px 6px; }
.market-table th:first-child { width: 30%; text-align: left; }
.market-table td { text-align: right; padding: 10px 6px; border-top: 1px solid #202628; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.market-token { display: flex; align-items: center; gap: 8px; text-align: left !important; }
.market-token img,.token-placeholder { width: 28px; height: 28px; border-radius: 5px; flex-shrink: 0; }
.token-placeholder { display: grid; place-items: center; background: #303b36; color: #98e6b3; font-size: 10px; }
.market-token div { min-width: 0; }.market-token strong,.market-token span:not(.token-placeholder) { display: block; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-token div>span { color: #8f9c96; margin-top: 3px; }
.positive { color: #5fcb88; }.negative { color: #ef727c; }
.coin-address { font-size: 10px; color: #89968f; overflow-wrap: anywhere; }.coin-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #303738; border-bottom: 1px solid #303738; padding: 18px 0; gap: 12px; }
.coin-stat span,.change-cell span { display: block; color: #97a29c; font-size: 11px; margin-bottom: 6px; }.coin-stat strong { font-size: 17px; overflow-wrap: anywhere; }
.coin-stats:has(.coin-stat:nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.market-content.showing-coin {grid-template-columns:minmax(0,1fr) var(--camera-reserved,34%);grid-template-rows:86px minmax(0,1fr) 24px;gap:8px;padding-bottom:48px;}
.showing-coin>.market-heading {grid-column:1 / -1;white-space:nowrap;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:40px 38px;column-gap:10px;row-gap:8px;}
.showing-coin>.market-heading .coin-detail-image {width:40px;height:40px;grid-column:1;grid-row:1;}
.showing-coin>.market-heading h2 {grid-column:2;grid-row:1;}
.showing-coin>.market-heading>.market-label {grid-column:3;grid-row:1;}
.coin-terminal-metrics {grid-column:1 / -1;grid-row:2;width:100%;border:0;}
.showing-coin .coin-terminal-metrics {padding:0;gap:8px;}
.coin-terminal-metrics .coin-stat span {font-size:11px;margin-bottom:3px;}
.coin-terminal-metrics .coin-stat strong {display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d8e7f6;}
.coin-terminal-footer {grid-column:1;grid-row:3;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;white-space:nowrap;font-size:9px;color:#8b9baf;border-top:1px solid #242832;}
.coin-terminal-footer>span {overflow:hidden;text-overflow:ellipsis;}
.showing-coin>.market-heading h2 {overflow:hidden;text-overflow:ellipsis;font-size:20px;}
.coin-detail-panel {grid-column:2;grid-row:2;min-width:0;max-height:calc(100% - var(--camera-height,100px));overflow:hidden;border-left:1px solid #242730;padding-left:10px;}
.showing-coin .coin-stats {padding:8px 0;}
.showing-coin .coin-address {margin:4px 0;}
.coin-chart {grid-column:1;grid-row:2;width:100%;height:100%;min-width:0;margin:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.coin-chart-heading,.coin-chart-note {font-size:12px;color:#aeb7b2;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coin-chart-plot {width:100%;flex:1;min-height:60px;}
.coin-chart-heading,.coin-chart-note {flex-shrink:0;}
.coin-chart-heading {padding:0 0 6px;border-bottom:1px solid #22262b;}
.coin-chart-note {padding-top:4px;}
.coin-detail-image {width:40px;height:40px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.coin-description {margin:0 0 10px;color:#aeb7b2;font-size:13px;line-height:19px;max-height:76px;overflow:hidden;flex-shrink:0;}
.coin-stage {margin:0 0 5px;color:#85f4ad;font-size:11px;line-height:16px;}
.coin-metric-source {margin:0 0 8px;color:#858b98;font-size:8px;line-height:12px;}
.coin-metadata {display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:10px;color:#aeb7b2;min-height:24px;margin-bottom:4px;flex-shrink:0;}
.coin-creator {display:flex;align-items:center;gap:5px;white-space:nowrap;}
.coin-creator img,.coin-creator .token-placeholder {width:20px;height:20px;object-fit:cover;border-radius:50%;}
.coin-social {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#5fcb88;}
.chart-empty {color:#aeb7b2;font-size:12px;}
.chart-attribution {margin:0;padding:8px 16px;font-size:11px;color:#929f9b;}
.chart-attribution a {color:#5fcb88;}
.trenches-board {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;overflow:hidden;}
.trench-column {min-width:0;min-height:0;display:grid;grid-template-rows:32px minmax(0,1fr);border:1px solid #252731;border-radius:6px;overflow:hidden;background:#101114;}
.trench-column-heading {display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #252731;}
.market-content .trench-column-heading h3 {margin:0;font-size:16px;}
.trench-column-count {font-size:10px;color:#9b9ca7;font-variant-numeric:tabular-nums;}
.trench-column-list {position:relative;min-height:0;overflow:hidden;}
.trench-token {display:flex;gap:10px;min-height:112px;padding:12px 10px;border-bottom:1px solid #22242c;}
.trench-token-media {flex:0 0 62px;min-width:0;}
.trench-token-image {display:block;width:62px;height:62px;border:1px solid #3d8560;border-radius:4px;object-fit:cover;}
.trench-token-mint {display:block;margin-top:4px;color:#85868e;font-size:8px;white-space:nowrap;}
.trench-token-body {flex:1;min-width:0;}
.trench-token-name {display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;}
.trench-token-name strong {max-width:65%;overflow:hidden;text-overflow:ellipsis;font-size:16px;}
.trench-token-name>span {flex:1;overflow:hidden;text-overflow:ellipsis;color:#85868e;font-size:10px;}
.trench-token-meta {display:flex;gap:7px;align-items:center;margin-top:7px;font-size:12px;white-space:nowrap;overflow:hidden;}
.trench-token-social {color:#9ba1ae;}
.trench-token-source {color:#9ba1ae;font-size:9px;}
.trench-token-creator {height:15px;margin-top:3px;color:#3dc5ee;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trench-token-stats {display:flex;align-items:center;gap:4px;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;}
.trench-token-stats>span {color:#93949f;}
.trench-token-stats strong {color:#cbd3ee;font-weight:600;}
.trench-column-empty {margin:12px 10px;color:#777985;font-size:10px;line-height:1.5;}
@container (max-width:700px) {
  .trenches-board {gap:5px;}.trench-token {gap:5px;padding:7px 5px;min-height:76px;}
  .trench-token-media {flex-basis:32px;}.trench-token-image {width:32px;height:32px;}
  .trench-token-name {display:block;}.trench-token-name strong {display:block;max-width:100%;font-size:10px;}.trench-token-name>span {display:none;}
  .trench-token-meta {gap:4px;font-size:9px;}.trench-token-source,.trench-token-mint {display:none;}
  .trench-token-stats {flex-wrap:wrap;gap:2px;white-space:normal;}.trench-column-heading {padding:0 6px;}
  .coin-detail-panel .coin-stat strong {font-size:12px;}.coin-detail-panel .coin-stat span {font-size:9px;}
}
@container (max-width:450px) {
  .trench-token {flex-direction:column;min-height:120px;}.trench-token-media {flex-basis:auto;}
  .trench-token-creator {font-size:8px;}.market-content .trench-column-heading h3 {font-size:10px;}
  .coin-detail-panel .coin-description,.coin-detail-panel .coin-metadata,.coin-detail-panel .coin-address {display:none;}
  .coin-detail-panel .coin-stats {display:block;}.coin-detail-image {width:22px;height:22px;}
  .coin-chart-heading,.coin-chart-note {font-size:8px;line-height:12px;}
  .coin-detail-panel {padding-left:6px;}.coin-detail-panel .coin-stats {padding-top:0;border-top:0;}
  .coin-detail-panel .coin-stat {margin-bottom:10px;}
}
.market-content h3 { margin: 20px 0 12px; font-size: 12px; }.coin-changes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.coin-activity { display: flex; gap: 20px; flex-wrap: wrap; }.market-external { display: inline-block; color: #9ad9fc; margin-top: 18px; }
@container(max-width:600px) { .browser-toolbar {height:24px;}.browser-status {padding:5px 8px;font-size:9px;overflow:hidden;white-space:nowrap;}.market-content {padding:6px;}.market-heading h2 {font-size:14px;}.coin-stats {gap:6px;padding:10px 0;} }
.enable-pepe-audio { position: absolute; z-index: 4; bottom: 52px; left: 16px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #5fcb88; color: #101814; border: 0; border-radius: 4px; font-weight: 600; cursor: pointer; }
.enable-pepe-audio svg { width: 18px; height: 18px; }
.voice-options { display: flex; align-items: center; gap: 8px; padding: 5px 16px; min-width: 0; border-bottom: 1px solid #29292e; font-size: 12px; }
.voice-options select { min-width: 0; width: 220px; max-width: 45%; color: #efeff1; background: #18181b; border: 1px solid #3b3b42; border-radius: 4px; padding: 5px; }
.voice-options > span { color: #adadb8; min-width: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .player-controls { transition: none; }
}
.control-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.player-button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 3px; background: transparent; color: #fff; font-size: 19px; }
.volume-slider { -webkit-appearance: none; appearance: none; width: 64px; height: 3px; margin: 0 8px 0 2px; border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right, #fff var(--level, 100%), rgba(255,255,255,.3) var(--level, 100%)); }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0; }
.volume-slider::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0; }
.volume-slider:focus-visible { outline: 2px solid #53fc18; outline-offset: 3px; }
.live-control { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; }

.channel-summary { display: flex; align-items: flex-start; gap: 12px; min-height: 115px; padding: 14px 16px 16px; border-bottom: 1px solid #25252a; }
.channel-summary { border-bottom: 0; }
/* Top donators: a compact card under the channel info. Five ranks side by side on wide screens, a list on narrow ones. */
.donor-board { margin: 4px 5.5% 0; padding: 12px 16px 14px; background: #18181b; border-radius: 6px; }
.donor-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.donor-board h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.donor-board h2 svg, .donor-chip summary svg { width: 16px; height: 16px; color: #e8b84a; }
.donor-period { color: #adadb8; font-size: 12px; font-weight: 600; }
.donor-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.donor-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 6px; background: #1f1f23; border: 1px solid #2c2c32; min-width: 0; transition: background-color .6s ease, border-color .6s ease; }
.donor-rank { grid-row: span 2; font: 700 13px/1 inherit; color: #adadb8; min-width: 22px; }
.donor-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.donor-total { font-size: 12px; color: #5bc98c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.donor-rank-1 { border-color: rgba(232,184,74,.45); } .donor-rank-1 .donor-rank { color: #e8b84a; }
.donor-rank-2 { border-color: rgba(200,206,214,.35); } .donor-rank-2 .donor-rank { color: #c8ced6; }
.donor-rank-3 { border-color: rgba(205,127,50,.4); } .donor-rank-3 .donor-rank { color: #cd7f32; }
.donor-changed { animation: donor-flash 1.6s ease-out 1; }
@keyframes donor-flash { 0% { background: rgba(91,201,140,.28); } 100% { background: #1f1f23; } }
.donor-empty { grid-column: 1 / -1; color: #adadb8; font-size: 13px; padding: 6px 2px; }
@media (max-width: 900px) { .donor-list { grid-template-columns: 1fr; gap: 6px; } .donor-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto; }
  .donor-rank { grid-row: auto; } }
/* Fullscreen: only a collapsed chip in the top bar; it opens on click and never covers the stream by itself. */
.donor-chip { display: none; position: relative; margin-left: 10px; z-index: 6; }
.workspace:is(:fullscreen, .fullscreen-fallback) .donor-chip { display: block; }
.donor-chip summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 12px/1 inherit; color: #efeff1;
  padding: 6px 10px; border-radius: 999px; background: rgba(14,14,16,.78); border: 1px solid #2c2c32; }
.donor-chip summary::-webkit-details-marker { display: none; }
.donor-chip .donor-list { position: absolute; top: calc(100% + 6px); left: 0; width: 260px; grid-template-columns: 1fr; gap: 4px; padding: 8px;
  background: rgba(14,14,16,.92); border: 1px solid #2c2c32; border-radius: 8px; }
.donor-chip .donor-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto; padding: 6px 8px; }
.donor-chip .donor-rank { grid-row: auto; }
.channel-about { padding: 16px 5.5% 52px; }
.channel-about h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.about-summary { background: #18181b; display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 32px; min-height: 152px; padding: 22px 24px; border-radius: 3px; }
.about-summary p { white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; margin: 0; max-width: 640px; }
.social-links { display: grid; gap: 11px; align-content: start; font-size: 14px; }
.social-links a, .social-links strong { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.social-links svg, .social-links .x-mark { width: 17px; height: 17px; flex: 0 0 17px; }
.social-links a:hover { color: #5fcb88; text-decoration: underline; }
.profile-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 40px; padding-top: 30px; }
.profile-banner { min-height: 110px; display: flex; align-items: center; justify-content: space-between; padding: 18px; border: 2px solid; border-radius: 3px; gap: 14px; }
.profile-banner > span:not(.x-mark) { font-size: 17px; line-height: 1.3; flex: 1; }
.profile-banner .x-mark, .profile-banner > svg:first-child { font-size: 44px; width: 42px; height: 42px; }
.profile-banner > svg:last-child { width: 18px; height: 18px; flex: 0 0 18px; }
.x-banner { color: #b5cef5; }
.pump-banner { color: #5fcb88; }
.profile-panels a:hover .profile-banner { background: #ffffff06; }
.panel-link { display: inline-block; margin-top: 12px; color: #85f4ad; text-decoration: underline; font-size: 13px; }
.sync-status { color: #efa35e; font-size: 12px; }
.is-offline .live-badge { background: #45454c; }
.is-offline .live-dot { background: #898991; }
#liveDuration { font-variant-numeric: tabular-nums; min-width: 54px; }
.channel-identity { position: relative; flex: 0 0 56px; width: 56px; height: 56px; }
.channel-avatar { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.avatar-live { position: absolute; bottom: -5px; left: 8px; padding: 1px 4px; border-radius: 2px; background: #eb1845; color: #fff; font-size: 10px; font-weight: 800; }
.channel-copy { min-width: 0; flex: 1; }
.channel-name { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 19px; font-weight: 800; }
.verified { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--green); color: #123c22; font-size: 10px; font-weight: 800; vertical-align: middle; }
.channel-copy h1 { margin: 0 0 7px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.channel-category { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #cfcfd6; font-size: 12px; }
.channel-category a { color: var(--green); margin-right: 3px; }
.channel-category a:hover { text-decoration: underline; }
.tag { border-radius: 100px; padding: 3px 8px; background: #303036; font-size: 11px; font-weight: 700; }
.channel-actions { flex: 0 0 auto; display: grid; justify-items: end; gap: 10px; }
.action-buttons, .broadcast-stats { display: flex; align-items: center; gap: 7px; }
.follow-button, .subscribe-button { height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 0; border-radius: 4px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.follow-button { background: var(--green); color: #102318; }
.follow-button { min-width: 104px; }
.follow-button:disabled { cursor: wait; opacity: .6; }
.follow-button.is-following { background: #303036; color: #e9e9ec; }
.subscribe-button { background: #303036; color: var(--text); }
.subscribe-button:hover { background: #404046; }
.subscribe-button:disabled { cursor: default; opacity: .7; }
.subscribe-button.is-subscribed { background: #20392d; color: #85f4ad; }
.broadcast-stats { color: #bdbdc6; font-size: 12px; white-space: nowrap; }
.broadcast-stats .viewer-count { display: inline-flex; align-items: center; gap: 3px; color: #f15c76; }
.broadcast-stats svg { width: 16px; height: 16px; }
.broadcast-stats .icon-button { width: 26px; height: 26px; }
.below-stream { padding: 0 16px 42px; }
.below-tabs { display: flex; gap: 24px; height: 44px; border-bottom: 1px solid #2b2b31; }
.below-tab { position: relative; border: 0; padding: 0; background: transparent; color: #b7b7c0; font-size: 13px; font-weight: 700; }
.below-tab.active { color: var(--green); }
.below-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--green); }
.below-content { padding: 20px 0; }
.below-content h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.below-content p { margin: 0 0 17px; color: #c7c7cf; font-size: 13px; line-height: 1.5; }
.stats-strip { display: flex; flex-wrap: wrap; gap: 30px; padding-top: 16px; border-top: 1px solid #29292e; }
.stats-strip div { display: grid; gap: 4px; }
.stats-strip span { color: #a8a8b2; font-size: 11px; }
.stats-strip strong { font-size: 13px; }

.chat-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid #2c2c31; background: var(--surface); }
.chat-header { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid #303036; }
.chat-header h2 { margin: 0; font-size: 13px; font-weight: 800; }
.chat-header .icon-button { width: 28px; height: 28px; }
.chat-promo { display: grid; justify-items: center; gap: 6px; padding: 9px 10px 10px; border-bottom: 1px solid #303036; text-align: center; font-size: 12px; font-weight: 700; }
.chat-promo button { display: inline-flex; align-items: center; gap: 5px; height: 25px; border: 0; border-radius: 4px; padding: 0 10px; background: var(--green); color: #102918; font-size: 11px; font-weight: 800; }
.chat-promo svg { width: 14px; height: 14px; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 9px 11px 16px; scrollbar-color: #4a4a52 transparent; }
.chat-messages p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.48; overflow-wrap: anywhere; }
.chat-messages time { color: #a4a4af; margin-right: 4px; font-size: 11px; }
.chat-messages b { font-weight: 800; }
.subscriber-badge { display: inline-block; width: 16px; height: 16px; margin: -3px 0 -4px; object-fit: contain; vertical-align: middle; }
.admin-badge { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: -3px 0 -4px; border-radius: 2px; background: #00ad65; color: #fff; vertical-align: middle; font-size: 11px; font-weight: 800; }
.admin-badge svg { width: 13px; height: 13px; }
.chat-emote { display: inline-block; width: 22px; height: 22px; margin: -4px 1px -5px; object-fit: contain; vertical-align: middle; }
.chat-message { position: relative; margin-bottom: 9px; padding-right: 54px; font-size: 12.5px; line-height: 1.48; overflow-wrap: anywhere; }
.chat-message-actions { position: absolute; right: 0; top: 0; display: flex; opacity: 0; background: #18181b; border-radius: 3px; }
.chat-message:hover .chat-message-actions, .chat-message:focus-within .chat-message-actions { opacity: 1; }
.chat-message-actions .icon-button { width: 26px; height: 26px; }
.chat-message-actions svg { width: 15px; height: 15px; }
.chat-pumpsey { font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.chat-pumpsey-answered { color: #5bc98c; background: rgba(91,201,140,.12); }
.chat-pumpsey-answering { color: #f2c94c; background: rgba(242,201,76,.12); }
.chat-message-answering { background: rgba(242,201,76,.06); }
.chat-reply-quote { display: block; color: #aaaab4; border-left: 2px solid #5bc98c; padding-left: 6px; margin-bottom: 3px; font-size: 11px; max-height: 34px; overflow: hidden; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chat-reaction { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 2px 6px; border: 1px solid #45454d; border-radius: 4px; background: #26262b; color: #efeff1; font-size: 11px; cursor: pointer; }
.chat-reaction img { width: 18px; height: 18px; object-fit: contain; }
.chat-reaction.is-own { border-color: #5bc98c; background: #203c30; }
.chat-reply-bar { display: flex; align-items: center; gap: 5px; color: #c8c8ce; font-size: 11px; border-top: 1px solid #3a3a42; padding: 5px 0; }
.chat-reply-bar[hidden] { display: none; }
.chat-reply-bar span { flex: 1; min-width: 0; max-height: 34px; overflow: hidden; overflow-wrap: anywhere; }
.chat-reply-bar .icon-button { flex: 0 0 24px; width: 24px; height: 24px; }
.emote-tooltip { position: fixed; z-index: 100; padding: 6px 8px; border-radius: 3px; background: #f0f0f3; color: #18181b; font-size: 12px; font-weight: 700; pointer-events: none; box-shadow: 0 2px 8px #0008; }
@media (hover: none) { .chat-message-actions { position: static; opacity: 1; width: fit-content; margin-top: 3px; } }
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-message-actions,
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-reactions,
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-reply-quote { display: none; }
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-message { padding-right: 0; font-size: 15px; }
.chat-empty { color: #9f9fa9; }
.chat-sync { color: #adadb8; }
.chat-sync svg { width: 16px; height: 16px; }
.chat-identity { display: flex; align-items: center; gap: 2px; min-width: 0; color: #85f4ad; font-size: 12px; font-weight: 700; }
.chat-identity span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-identity .icon-button { width: 27px; height: 27px; flex: 0 0 27px; }
.chat-message-pending { opacity: .65; }
.name-green { color: #64dd9a; }
.name-purple { color: #b993ff; }
.name-orange { color: #efa35e; }
.name-red { color: #f27583; }
.chat-composer { position: relative; flex: 0 0 auto; border-top: 1px solid #2f2f34; padding: 10px 9px 9px; }
.chat-access { display: flex; align-items: center; gap: 6px; padding: 0 1px 9px; color: #bdbdc7; font-size: 11px; font-weight: 700; }
.chat-access[hidden] { display: none; }
.chat-access svg { width: 13px; height: 13px; }
.chat-access button { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--green); font: inherit; cursor: pointer; }
.chat-access button:disabled { opacity: .5; cursor: wait; }
.emote-picker { position: absolute; z-index: 4; right: 8px; bottom: calc(100% + 7px); width: min(270px, calc(100% - 16px)); max-height: min(280px, 60vh); overflow-y: auto; padding: 0 10px 11px; border: 1px solid #47474e; border-radius: 4px; background: #18181b; box-shadow: 0 10px 30px #0009; }
.emote-picker-head { margin: 0 -10px 10px; padding: 8px 12px; border-bottom: 1px solid #34343a; background: #f5f5f7; color: #18181b; font-size: 12px; font-weight: 800; text-align: center; }
.emote-picker h3 { margin: 0 0 8px; font-size: 11px; font-weight: 800; }
.emote-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; }
.emote-option { display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 3px; border: 1px solid transparent; border-radius: 3px; background: transparent; cursor: pointer; }
.emote-option:hover, .emote-option:focus-visible { border-color: var(--green); background: #303a34; }
.emote-option img { width: 28px; height: 28px; object-fit: contain; border-radius: 2px; }
.chat-input-wrap { height: 39px; display: flex; align-items: center; border: 1px solid #6a6a74; border-radius: 4px; background: #18181b; }
.chat-input-wrap:focus-within { border-color: var(--green); }
.chat-input-wrap:has(input:disabled) { border-color: #414148; opacity: .65; }
.chat-input-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0 9px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.chat-input-wrap input::placeholder { color: #c0c0c9; }
.emote-button { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); }
.emote-button:disabled { cursor: not-allowed; }
.chat-form-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 9px; }
.points { display: flex; align-items: center; gap: 4px; color: #a8a8b1; font-size: 12px; font-weight: 700; }
.points svg { color: var(--green); }
.chat-send { height: 29px; min-width: 51px; border: 0; border-radius: 4px; background: var(--green); color: #0f2818; font-size: 12px; font-weight: 800; }
.chat-send:disabled { background: #45454c; color: #a2a2aa; cursor: not-allowed; }
.chat-collapsed .chat-panel > :not(.chat-header), .chat-collapsed .chat-header h2, .chat-collapsed .chat-header > .icon-button:last-child { display: none; }
.chat-collapsed .chat-header { justify-content: center; padding: 0; }
.toast { position: fixed; bottom: 20px; left: 50%; z-index: 30; transform: translateX(-50%); max-width: min(90vw, 400px); padding: 10px 14px; border: 1px solid #4b8160; border-radius: 5px; background: #1d2720; color: #e8fff0; box-shadow: 0 10px 30px #0008; font-size: 13px; font-weight: 700; text-align: center; }

@media (max-width: 1180px) {
  .workspace { --chat-width: 300px; }
  .topbar { gap: 15px; }
  .volume-slider { width: 44px; }
  .channel-summary { flex-wrap: wrap; }
  .channel-actions { width: calc(100% - 68px); margin-left: 68px; display: flex; align-items: center; justify-content: space-between; }
}

@media (max-width: 950px) {
  .workspace { --chat-width: 280px; }
}

@media (max-width: 700px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; display: block; }
  .topbar { height: 50px; position: sticky; top: 0; gap: 13px; }
  .top-actions .icon-button:not(.admin-link) { display: none; }
  .top-nav { gap: 17px; }
  .top-actions { margin-left: auto; }
  .workspace { display: flex; flex-direction: column; }
  .channel-rail { display: none; }
  .stream-main { overflow: visible; }
  .player { min-height: 0; }
  .subscription-alert { width: min(210px, 84%); min-height: 0; padding: 4px 9px 10px; }
  .subscription-alert-art { height: 78px; }
  .subscription-alert-art img { width: 75px; height: 75px; }
  .subscription-alert-title { font-size: 13px; }
  .subscription-alert-caption { font-size: 9px; letter-spacing: 0; }
  .player-top {padding-left:8px;padding-right:8px;}
  .webcam { width: clamp(130px, 38%, 180px); min-width: 0; }
  .player-controls { min-height: 35px; padding: 2px 5px; }
  .player-button { width: 27px; height: 27px; }
  .player-button svg { width: 16px; height: 16px; }
  .volume-slider, .live-control { display: none; }
  .channel-summary { padding: 12px; }
  .channel-identity { flex-basis: 48px; width: 48px; height: 48px; }
  .channel-avatar { width: 48px; height: 48px; }
  .channel-name { font-size: 17px; }
  .channel-actions { width: 100%; margin-left: 0; gap: 8px; flex-wrap: wrap; }
  .broadcast-stats .icon-button { display: none; }
  .below-stream { padding: 0 12px 16px; }
  .channel-about { padding: 20px 16px 32px; }
  .about-summary { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .social-links { gap: 12px; }
  .profile-panels { grid-template-columns: 1fr; gap: 24px; }
  .chat-panel { height: 450px; border-left: 0; border-top: 1px solid #33333a; }
  .chat-collapsed .chat-panel { height: 44px; }
  .chat-collapsed .chat-header { justify-content: space-between; padding: 0 9px; }
  .chat-collapsed .chat-header h2 { display: block; }
}

.workspace:is(:fullscreen, .fullscreen-fallback) {
  --webcam-width: min(360px, 25vw, 50dvh);
  --webcam-bottom: 8px;
  --webcam-right: 8px;
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #08090b;
}
.workspace.fullscreen-fallback { position: fixed; inset: 0; z-index: 100; }
.workspace:is(:fullscreen, .fullscreen-fallback) .channel-rail { display: none; }
.workspace:is(:fullscreen, .fullscreen-fallback) .stream-main { height: 100%; min-height: 0; display: flex; overflow: hidden; }
.workspace:is(:fullscreen, .fullscreen-fallback) .stream-main > :not(.player) { display: none; }
.workspace:is(:fullscreen, .fullscreen-fallback) .player { flex: 1; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
.workspace:is(:fullscreen, .fullscreen-fallback) .player-capture { object-fit: contain; }
.workspace:is(:fullscreen, .fullscreen-fallback) .webcam { right: var(--webcam-right); bottom: var(--webcam-bottom); width: var(--webcam-width); min-width: 0; }
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-panel { position: absolute; z-index: 3; right: var(--webcam-right); bottom: calc(var(--webcam-bottom) + var(--webcam-width) * 9 / 16 + 12px); width: clamp(260px, 26vw, 420px); height: min(320px, calc(100dvh - var(--webcam-bottom) - var(--webcam-width) * 9 / 16 - 28px)); min-height: 0; border: 0; background: transparent; pointer-events: none; }
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-header,
.workspace:is(:fullscreen, .fullscreen-fallback) .chat-composer { display: none; }
.workspace:is(:fullscreen, .fullscreen-fallback):not(.chat-collapsed) .chat-messages { padding: 0; overflow: hidden; background: transparent; text-shadow: 0 1px 2px #000, 1px 0 2px #000, 0 0 4px #000; }
.workspace:is(:fullscreen, .fullscreen-fallback):not(.chat-collapsed) .chat-empty,
.workspace:is(:fullscreen, .fullscreen-fallback):not(.chat-collapsed) .chat-sync { display: none; }
.workspace:is(:fullscreen, .fullscreen-fallback):not(.chat-collapsed) .chat-messages p { margin-bottom: 8px; font-size: 15px; line-height: 1.5; }
.workspace:is(:fullscreen, .fullscreen-fallback).chat-collapsed .chat-panel { display: none; }
@media (max-width: 700px) {
  .workspace:is(:fullscreen, .fullscreen-fallback) { --webcam-width: min(220px, 40vw, 50dvh); }
  .workspace:is(:fullscreen, .fullscreen-fallback) .chat-panel { width: min(300px, 75vw); }
  .workspace:is(:fullscreen, .fullscreen-fallback):not(.chat-collapsed) .chat-messages p { font-size: 12px; }
}

.admin-page { overflow: auto; }
.ai-test-section { border-top: 1px solid var(--border); margin-top: 36px; padding-top: 28px; }
#aiTestSubmit { margin-top: 16px; }
#aiTestStatus { color: var(--muted); font-size: 13px; }
.ai-test-reply { white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid #5fcb88; padding: 12px 16px; background: #18181b; line-height: 1.6; }
.admin-page .topbar { height: 58px; }
.back-link { margin-left: auto; color: var(--muted); font-size: 13px; }
.back-link:hover { color: var(--green); }
.admin-main { max-width: 900px; margin: 42px auto; padding: 0 24px 48px; }
.admin-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 32px; }
.admin-heading h1 { font-size: 26px; margin: 6px 0 0; }
.eyebrow { color: #5fcb88; font-size: 11px; font-weight: 700; margin: 0; }
.admin-main h2 { font-size: 18px; margin: 0 0 24px; }
.admin-main label { display: block; font-size: 13px; font-weight: 600; margin: 20px 0 9px; }
.admin-main input, .admin-main textarea { width: 100%; border: 1px solid #4c4c54; border-radius: 4px; background: #18181b; padding: 11px 12px; color: #efeff1; font-size: 14px; }
.admin-main textarea { resize: vertical; line-height: 1.6; min-height: 140px; }
.admin-main input:focus, .admin-main textarea:focus { outline: 2px solid #5fcb88; outline-offset: 1px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 9px 16px; border: 0; border-radius: 4px; font-size: 13px; font-weight: 700; }
.primary-button { background: #5fcb88; color: #102318; }
.primary-button:hover { background: #85f4ad; }
.secondary-button { background: #303036; color: #efeff1; }
.admin-main button svg, .admin-counters svg { width: 17px; height: 17px; }
.admin-main button:disabled { opacity: .5; cursor: wait; }
.login-form { max-width: 380px; border-top: 1px solid #303036; padding-top: 26px; }
.login-form .primary-button { margin-top: 20px; width: 100%; }
.admin-message { color: #f2a1a9; font-size: 13px; line-height: 1.6; }
.live-settings { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; margin-bottom: 32px; border-top: 1px solid #303036; border-bottom: 1px solid #303036; }
.status-label { display: inline-block; font-size: 11px; font-weight: 800; padding: 4px 7px; background: #34343b; border-radius: 3px; }
.status-label.is-live { background: #eb1845; }
.admin-counters { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 13px; font-size: 13px; color: #adadb8; }
.admin-counters > span { display: flex; align-items: center; gap: 6px; }
.admin-counters b { color: #efeff1; font-variant-numeric: tabular-nums; }
.danger-button { background: #eb3158; color: #fff; }
.danger-button:hover { background: #fa4d71; }
.broadcast-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.agent-usage { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0 18px; color: #bcbcc4; font-size: 12px; border-bottom: 1px solid #303036; margin-bottom: 18px; }
.social-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.streamer-settings { border-top: 1px solid #303036; padding-top: 16px; margin-top: 20px; }
.streamer-settings select { width: 100%; min-height: 40px; padding: 8px; background: #18181b; color: #efeff1; border: 1px solid #53535f; border-radius: 4px; font: inherit; }
.streamer-settings .pepe-toggle { margin-bottom: 16px; }
.save-row { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
#saveState { font-size: 12px; color: #85f4ad; }
@media(max-width: 600px) {
  .admin-main { margin-top: 28px; padding: 0 18px 32px; }
  .admin-heading h1 { font-size: 22px; }
  .social-fields { grid-template-columns: 1fr; gap: 0; }
  .admin-counters { gap: 12px; }
  .live-settings { gap: 14px; }
}

@media (max-width: 380px) {
  .channel-actions { margin-left: 0; }
  .channel-summary { gap: 9px; }
  .broadcast-stats { font-size: 11px; }
  .action-buttons { gap: 4px; }
  .follow-button, .subscribe-button { padding: 0 8px; }
}
.pepe-toggle { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.pepe-toggle input { width: 18px; height: 18px; accent-color: #5ccb8d; }
.stream-scene {position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:top left;overflow:hidden;background:#0c0e10;}
.player:has(.stream-scene) {min-height:0;aspect-ratio:16 / 9;}
.stream-scene .webcam,.workspace:is(:fullscreen,.fullscreen-fallback) .stream-scene .webcam {width:360px;min-width:0;right:8px;bottom:8px;}
.cam-chat {position:absolute;z-index:3;right:8px;bottom:223px;width:360px;max-height:230px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;overflow:hidden;pointer-events:none;color:#fff;font-size:15px;line-height:1.35;text-shadow:0 1px 2px #000;}
.cam-chat:not(:empty) {padding:6px 4px;border-radius:8px;background:rgba(8,10,12,.82);box-shadow:0 4px 16px rgba(0,0,0,.4);}
.cam-chat-line {margin:0;padding:1px 6px;border-left:3px solid transparent;overflow-wrap:anywhere;}
.cam-chat-answering {border-left-color:#f2c94c;background:rgba(0,0,0,.35);}
.cam-chat-answered {border-left-color:#5bc98c;}
.cam-chat-pumpsey {background:rgba(91,201,140,.18);}
.workspace:is(:fullscreen,.fullscreen-fallback) .cam-chat {display:none;}
.stream-scene .subscription-alert {width:340px;min-height:210px;padding:8px 18px 20px;}
.stream-scene .subscription-alert-art {height:128px;}
.stream-scene .subscription-alert-art img {width:116px;height:116px;}
.stream-scene .subscription-alert-title {font-size:22px;}
.stream-scene .subscription-alert-caption {font-size:11px;letter-spacing:0;}
.workspace:is(:fullscreen,.fullscreen-fallback) .chat-panel {right:var(--scene-right,8px);bottom:var(--scene-camera-bottom,222px);width:360px;height:280px;transform:scale(var(--scene-scale,1));transform-origin:bottom right;}

/* pump.fun-style activity card in the coin view */
.pump-activity {display:grid;gap:6px;margin:0 0 8px;}
.pump-window {display:grid;grid-template-columns:28px auto 1fr;align-items:center;gap:2px 8px;font-size:11px;}
.pump-window-label {color:#858b98;font-weight:700;}
.pump-window strong {font-size:12px;}
.pump-window-volume {color:#b7c1c7;text-align:right;white-space:nowrap;}
.pump-pressure {grid-column:1 / -1;height:4px;border-radius:2px;background:linear-gradient(90deg,#2fc988 var(--buy-share,50%),#ec4452 var(--buy-share,50%));}
.pump-counts {grid-column:1 / -1;display:flex;justify-content:space-between;font-size:10px;}

/* Pepe's wallet / stream P&L card, right side of the stream's top bar */
.pnl-card {margin-left:auto;flex:none;height:44px;width:auto;display:grid;grid-template-columns:auto auto;align-items:center;gap:10px;
  padding:3px 12px;border-radius:8px;border:1px solid #23463a;background:linear-gradient(120deg,#0b1210 0%,#123126 55%,#0c1612 100%);color:#e8f2ec;}
.pnl-side {display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1;}
.pnl-right {align-items:flex-end;text-align:right;}
.pnl-label {font-size:9px;font-weight:800;letter-spacing:.5px;color:#f2f6f4;}
.pnl-big {display:flex;align-items:center;gap:4px;font-size:21px;line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pnl-sol {width:.85em;height:.7em;flex:none;}
.pnl-sub {font-size:9px;color:#9aa8a1;font-variant-numeric:tabular-nums;min-height:10px;}
.pnl-pct {font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;}
.pnl-card[data-direction="up"] .pnl-value,.pnl-card[data-direction="up"] .pnl-pct,.pnl-card[data-direction="up"] .pnl-usd {color:#2fe08b;}
.pnl-card[data-direction="down"] .pnl-value,.pnl-card[data-direction="down"] .pnl-pct,.pnl-card[data-direction="down"] .pnl-usd {color:#ff5b6b;}
.stream-topic {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:700px){.pnl-card{gap:12px;}.pnl-big{font-size:16px;}}