:root {
  color-scheme: dark;
  --bg: #06090c;
  --rail: #080d12;
  --panel: #0d1318;
  --panel-2: #101820;
  --panel-3: #121c23;
  --line: #24313a;
  --line-soft: #19242c;
  --text: #edf4f7;
  --muted: #93a2ac;
  --soft: #647580;
  --cyan: #27b8e7;
  --cyan-dark: #0d7294;
  --violet: #806cf5;
  --green: #56c878;
  --amber: #f0a33d;
  --coral: #f06a61;
  --radius: 5px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); letter-spacing: 0; }
body.nav-open { overflow: hidden; }
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: var(--text); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { letter-spacing: 0; }
p { color: var(--muted); line-height: 1.55; }

.app-shell { min-height: 100vh; }
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: 238px;
  border-right: 1px solid var(--line);
  background: var(--rail);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 70px;
  padding: 0 21px;
  border-bottom: 1px solid var(--line);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
}
.brand-mark { position: relative; display: block; width: 24px; height: 28px; border-radius: 5px; background: var(--cyan); }
.brand-mark::before { position: absolute; inset: 6px 5px; content: ""; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #071017; }
.brand-mark span { position: absolute; top: -3px; right: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.rail nav { display: grid; gap: 3px; padding: 18px 0; }
.rail nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; border-left: 2px solid transparent; color: #c0cbd1; font-size: 14px; text-decoration: none; }
.rail nav a:hover { color: #fff; background: #0d151b; }
.rail nav a.active { border-left-color: var(--cyan); color: var(--cyan); background: #101b22; }
.nav-icon { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #62727c; border-radius: 4px; color: #dbe4e8; font-size: 9px; font-weight: 800; }
.rail nav a.active .nav-icon { border-color: var(--cyan); color: var(--cyan); }
.rail-signup { display: grid; gap: 8px; margin: auto 14px 0; padding: 12px; border: 1px solid #285162; border-radius: var(--radius); background: #0b171d; }
.rail-signup span { color: var(--muted); font-size: 10px; }
.rail-signup a { color: var(--cyan); font-size: 12px; font-weight: 750; text-decoration: none; }
.rail-profile { display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 10px; margin-top: auto; padding: 16px 18px; border-top: 1px solid var(--line); }
.rail-signup + .rail-profile { margin-top: 10px; }
.rail-profile strong, .rail-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-profile strong { font-size: 13px; }
.rail-profile small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.rail-profile > a { color: var(--muted); font-size: 16px; text-decoration: none; }
.profile-dot, .avatar-mini { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border: 2px solid var(--violet); border-radius: 50%; background: #17232c; color: #fff; font-size: 12px; font-style: normal; font-weight: 800; }

.main { min-width: 0; min-height: 100vh; margin-left: 238px; overflow-x: hidden; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 10px 22px; border-bottom: 1px solid var(--line); background: rgba(6, 9, 12, .96); backdrop-filter: blur(16px); }
.title-cluster { display: flex; align-items: center; gap: 12px; min-width: 0; }
.title-cluster h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.title-cluster p { margin: 3px 0 0; color: var(--soft); font-size: 11px; }
.system-status { display: flex; align-items: center; gap: 14px; color: #c6d0d5; font-size: 12px; white-space: nowrap; }
.status-separator { width: 1px; height: 22px; background: var(--line); }
.status-chip { display: inline-flex; align-items: center; gap: 7px; }
.status-chip i, .table-status i, .signal-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-chip.success { color: var(--green); }
.status-chip.violet { color: var(--violet); }
.status-chip.amber { color: var(--amber); }
.user-role { display: flex; align-items: center; gap: 7px; }
.user-role i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #66757e; border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; }
.mobile-wallet, .menu-toggle { display: none; }
.page-content { width: 100%; max-width: 1700px; margin: 0 auto; padding: 12px; }
.owner-preview-bar { position: sticky; top: 70px; z-index: 14; display: grid; grid-template-columns: minmax(230px, .75fr) minmax(420px, 1.4fr) auto auto; align-items: center; gap: 12px; min-height: 66px; padding: 8px 14px; border-bottom: 1px solid #5f4d24; background: rgba(24, 20, 10, .97); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.owner-preview-identity { min-width: 0; }
.owner-preview-identity strong, .owner-preview-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-preview-identity strong { margin-top: 2px; font-size: 12px; }
.owner-preview-identity small { margin-top: 2px; color: #b6aa8c; font-size: 9px; }
.owner-preview-label { color: var(--amber); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.owner-preview-bar form { display: grid; grid-template-columns: auto minmax(230px, 1fr) auto; align-items: center; gap: 7px; min-width: 0; }
.owner-preview-bar form label { color: #b6aa8c; font-size: 9px; }
.owner-preview-bar select { min-width: 0; border-color: #5f4d24; background: #100f0a; }
.owner-preview-bar .ghost-btn { min-height: 34px; white-space: nowrap; }
.preview-readonly { padding: 6px 8px; border: 1px solid #6b5523; border-radius: 4px; color: var(--amber); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.owner-preview-mode .page-content { padding-top: 12px; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel:not(.feature-panel):not(.compact-panel):not(.message-workspace):not(.chat-panel) { padding: 14px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-head h2 { margin: 0; font-size: 14px; text-transform: uppercase; }
.section-head h2 small { color: var(--muted); font-size: 10px; font-weight: 500; text-transform: uppercase; }
.section-head p { margin: 4px 0 0; font-size: 11px; }
.section-head > a { color: var(--cyan); font-size: 11px; text-decoration: none; }
.compact-panel { padding: 14px; }

button, .primary-btn, .ghost-btn, .mini-btn, .icon-text-btn {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 650;
  text-decoration: none;
}
button:hover, .primary-btn:hover, .ghost-btn:hover, .mini-btn:hover { border-color: var(--cyan-dark); background: #14222a; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button:disabled { cursor: default; opacity: .65; }
.primary-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 15px; border-color: var(--cyan); background: var(--cyan); color: #031017; }
.ghost-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 0 10px; font-size: 11px; }
.mini-btn.accent { border-color: #5143a5; color: #b9aefc; }
.danger-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-color: #7d3733; background: #321917; color: #ffaaa3; }
.danger-btn:hover { border-color: var(--coral); background: #48201d; }
.icon-btn { display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; }
.menu-toggle.icon-btn { display: none; }
.icon-text-btn { padding: 0 10px; border-color: transparent; background: transparent; color: var(--muted); font-size: 12px; }
.leave-btn { min-width: 84px; border-color: var(--coral); background: var(--coral); color: #fff; }

.public-site { background: #070a0d; }
.public-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 74px; padding: 0 34px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(7,10,13,.94); backdrop-filter: blur(18px); }
.public-brand.brand { width: auto; height: auto; padding: 0; border: 0; background: transparent; }
.public-header > nav { display: flex; justify-content: center; gap: 28px; }
.public-header > nav a { padding: 27px 0 24px; border-bottom: 2px solid transparent; color: #aab6bd; font-size: 12px; font-weight: 650; text-decoration: none; }
.public-header > nav a:hover, .public-header > nav a.active { border-color: var(--cyan); color: #fff; }
.public-auth-actions, .public-hero-actions { display: flex; align-items: center; gap: 9px; }
.public-signin { padding: 10px 8px; color: #d8e2e7; font-size: 12px; font-weight: 700; text-decoration: none; }
.public-main { min-height: calc(100vh - 74px); }
.public-home-stage { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); background: #05090c url("/assets/public-hero-studio.png") center top / cover no-repeat; }
.public-home-stage::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,6,9,.98) 0%, rgba(3,6,9,.87) 30%, rgba(3,6,9,.34) 66%, rgba(3,6,9,.22) 100%), linear-gradient(0deg, rgba(3,6,9,.98) 0%, rgba(3,6,9,.82) 40%, rgba(3,6,9,.1) 78%); content: ""; }
.public-home-stage::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: 48%; background: rgba(4,8,11,.56); content: ""; backdrop-filter: blur(2px); }
.public-hero { position: relative; display: flex; align-items: center; height: min(650px, calc(100svh - 130px)); min-height: 500px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.1); }
.public-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.public-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,6,9,.98) 0%, rgba(3,6,9,.9) 27%, rgba(3,6,9,.36) 61%, rgba(3,6,9,.12) 100%), linear-gradient(0deg, rgba(3,6,9,.62), transparent 38%); }
.public-hero-copy { position: relative; z-index: 2; width: min(650px, 48%); margin-left: max(34px, calc((100% - 1360px) / 2)); }
.public-kicker { color: var(--cyan); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.public-hero h1 { margin: 10px 0 14px; font-size: 62px; line-height: .98; }
.public-hero-copy > p { max-width: 590px; margin-bottom: 25px; color: #c2cdd3; font-size: 17px; line-height: 1.55; }
.public-hero-actions .primary-btn, .public-hero-actions .ghost-btn { min-height: 43px; }
.public-trust-line { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 25px; color: #a9b7bf; font-size: 10px; }
.public-trust-line span::before { margin-right: 7px; color: var(--green); content: "\2713"; }
.public-live-link { position: absolute; right: max(24px, calc((100% - 1360px) / 2)); bottom: 24px; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; min-width: 190px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(7,10,13,.8); text-decoration: none; backdrop-filter: blur(12px); }
.public-live-link .pill { grid-row: span 2; align-self: center; }
.public-live-link b, .public-live-link small { display: block; }
.public-live-link b { font-size: 11px; }
.public-live-link small { color: #aab7be; font-size: 9px; }
.public-home-hero { height: 390px; min-height: 390px; border-bottom: 0; background: transparent; }
.public-home-hero .public-hero-shade { z-index: 1; background: linear-gradient(90deg, rgba(3,6,9,.98) 0%, rgba(3,6,9,.88) 32%, rgba(3,6,9,.28) 64%, rgba(3,6,9,.08) 100%), linear-gradient(0deg, rgba(3,6,9,.72), transparent 52%); }
.public-home-hero .public-hero-copy { width: min(620px, 52%); }
.public-home-hero h1 { margin: 8px 0 6px; font-size: 54px; }
.public-home-hero .public-hero-copy > p { margin: 0 0 20px; color: #d6e0e5; font-size: 15px; font-weight: 650; }
.public-home-hero .public-hero-actions { flex-wrap: wrap; }
.public-home-hero .public-hero-actions .primary-btn, .public-home-hero .public-hero-actions .ghost-btn { min-height: 39px; }
.public-hero-collage { position: absolute; top: 0; right: max(20px, calc((100% - 1360px) / 2)); bottom: 0; z-index: 0; display: grid; grid-template-columns: .9fr 1.08fr .9fr; align-items: end; width: min(720px, 58%); overflow: hidden; opacity: .92; mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 100%); }
.public-hero-collage img { width: 100%; height: 82%; object-fit: cover; object-position: center 18%; filter: saturate(.9) contrast(1.04); transform: translateY(7%) skewX(-2deg); transform-origin: center bottom; }
.public-hero-collage img:nth-child(2) { z-index: 1; height: 100%; transform: translateY(2%) scale(1.04); box-shadow: 0 0 34px rgba(39,184,231,.18); }
.public-hero-collage img:nth-child(3) { height: 88%; object-position: center 14%; transform: translateY(5%) skewX(2deg); }
.public-route-band { border-bottom: 1px solid var(--line); background: #071015; }
.public-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1360px; margin: 0 auto; padding: 0 34px; }
.public-route-grid > a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 18px; min-height: 230px; padding: 32px 30px 28px; border-left: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background .16s ease, box-shadow .16s ease; }
.public-route-grid > a:last-child { border-right: 1px solid var(--line); }
.public-route-grid > a:hover { background: #0b171e; box-shadow: inset 0 3px 0 var(--cyan); }
.public-route-grid > a:nth-child(2):hover { box-shadow: inset 0 3px 0 var(--violet); }
.public-route-grid > a:nth-child(3):hover { box-shadow: inset 0 3px 0 var(--amber); }
.route-number { color: #63747e; font-size: 12px; font-weight: 800; }
.public-route-grid em { color: var(--cyan); font-size: 9px; font-style: normal; font-weight: 800; }
.public-route-grid > a:nth-child(2) em { color: var(--violet); }
.public-route-grid > a:nth-child(3) em { color: var(--amber); }
.public-route-grid h2 { margin: 7px 0 8px; font-size: 22px; }
.public-route-grid p { max-width: 330px; margin: 0; color: #9eacb4; font-size: 11px; line-height: 1.55; }
.public-route-grid > a > strong { grid-column: 2; align-self: end; color: #e6eef2; font-size: 10px; }
.public-route-grid > a > strong span { margin-left: 5px; color: var(--cyan); }
.public-catalog-section { max-width: 1360px; margin: 0 auto; padding: 72px 34px 82px; }
.public-section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 24px; }
.public-section-head h2 { margin: 7px 0 8px; font-size: 30px; }
.public-section-head p { max-width: 760px; margin: 0; font-size: 12px; line-height: 1.55; }
.public-section-head > .ghost-btn { flex: 0 0 auto; }
.public-room-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.public-room-card { min-width: 0; overflow: hidden; border: 1px solid rgba(39,184,231,.43); border-radius: 6px; background: #091116; box-shadow: 0 0 18px rgba(39,184,231,.08); }
.public-room-card:nth-child(2) { border-color: rgba(128,108,245,.5); box-shadow: 0 0 18px rgba(128,108,245,.09); }
.public-room-card:nth-child(3) { border-color: rgba(255,190,92,.44); box-shadow: 0 0 18px rgba(255,190,92,.07); }
.public-room-media { position: relative; display: block; height: 188px; overflow: hidden; border-bottom: 1px solid var(--line); background: #030608; }
.public-room-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; opacity: .68; transition: opacity .16s ease, transform .2s ease; }
.public-room-card:nth-child(2) .public-room-media img { object-position: 76% 64%; }
.public-room-card:nth-child(3) .public-room-media img { object-position: 48% 56%; }
.public-room-media:hover img { opacity: .82; transform: scale(1.02); }
.public-room-media > .public-room-type, .public-room-media > .pill { position: absolute; z-index: 1; top: 12px; }
.public-room-media > .public-room-type { left: 12px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.22); background: rgba(4,8,11,.86); color: #dbe6eb; font-size: 8px; font-weight: 800; }
.public-room-media > .pill { right: 12px; }
.public-room-media > b { position: absolute; z-index: 1; right: 14px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cyan); border-radius: 50%; background: rgba(5,11,15,.9); color: #fff; font-size: 10px; box-shadow: 0 0 15px rgba(39,184,231,.25); }
.public-room-card:nth-child(2) .public-room-media > b { border-color: var(--violet); box-shadow: 0 0 15px rgba(128,108,245,.27); }
.public-room-card:nth-child(3) .public-room-media > b { border-color: var(--amber); box-shadow: 0 0 15px rgba(255,190,92,.22); }
.public-room-details { padding: 17px; }
.public-room-details > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: var(--cyan); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.public-room-details h3 { margin: 9px 0 4px; font-size: 17px; }
.public-room-details > p { margin: 0; color: var(--muted); font-size: 10px; }
.public-room-details > p a { color: #dce7ec; font-weight: 700; text-decoration: none; }
.public-room-access { display: grid; gap: 4px; min-height: 70px; margin: 15px 0; padding: 11px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.public-room-access strong { color: var(--amber); font-size: 9px; }
.public-room-access span { color: #9daab2; font-size: 9px; line-height: 1.45; }
.public-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.public-card-actions .primary-btn, .public-card-actions .ghost-btn { min-width: 0; min-height: 36px; padding: 0 9px; font-size: 9px; text-align: center; }
.public-creators-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #060b0e; }
.public-creators-inner { max-width: 1360px; margin: 0 auto; padding: 72px 34px 82px; }
.public-creator-list { display: grid; border-top: 1px solid var(--line); }
.public-creator-row { display: grid; grid-template-columns: 58px minmax(180px, .7fr) minmax(390px, 1.3fr) auto; align-items: center; gap: 18px; min-height: 104px; padding: 16px 8px; border-bottom: 1px solid var(--line); }
.public-creator-row:hover { background: #0a1217; }
.public-creator-avatar { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--violet); border-radius: 50%; background: #101820; color: #fff; font-size: 11px; font-weight: 800; text-decoration: none; box-shadow: 0 0 14px rgba(128,108,245,.17); }
.public-creator-avatar i { position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid #060b0e; border-radius: 50%; background: var(--cyan); color: #041016; font-size: 9px; font-style: normal; }
.public-creator-identity > span { color: var(--violet); font-size: 8px; font-weight: 800; }
.public-creator-identity h3 { margin: 5px 0 3px; font-size: 15px; }
.public-creator-identity p { margin: 0; color: var(--muted); font-size: 9px; }
.public-creator-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.public-creator-facts span, .public-creator-facts b { display: block; }
.public-creator-facts span { color: var(--muted); font-size: 8px; }
.public-creator-facts b { margin-bottom: 4px; color: #dbe5ea; font-size: 10px; }
.public-creator-actions { display: grid; grid-template-columns: repeat(2, minmax(105px, 1fr)); gap: 7px; }
.public-creator-actions .primary-btn, .public-creator-actions .ghost-btn { min-height: 34px; padding: 0 10px; font-size: 9px; }
.public-home-stage .public-creators-band { border: 0; background: transparent; }
.public-home-stage .public-creators-inner { padding-top: 14px; padding-bottom: 62px; }
.public-section-head-compact { align-items: center; margin-bottom: 16px; }
.public-section-head-compact h2 { margin-bottom: 0; font-size: 25px; }
.public-section-head-compact .ghost-btn { min-height: 32px; font-size: 9px; }
.public-creator-card-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 11px; perspective: 1000px; }
.public-creator-card { min-width: 0; overflow: hidden; border: 1px solid rgba(43,191,232,.62); border-radius: 6px; background: #081015; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 9px 0 rgba(1,4,6,.52), 0 16px 26px rgba(0,0,0,.44), 0 0 16px rgba(43,191,232,.15); transform: translateY(0) rotateX(0); transform-origin: center bottom; transform-style: preserve-3d; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.public-creator-card:nth-child(4n+2) { border-color: rgba(128,108,245,.7); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 9px 0 rgba(3,3,9,.55), 0 16px 26px rgba(0,0,0,.44), 0 0 16px rgba(128,108,245,.17); }
.public-creator-card:nth-child(4n+3) { border-color: rgba(81,191,128,.62); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 9px 0 rgba(2,7,5,.55), 0 16px 26px rgba(0,0,0,.44), 0 0 16px rgba(81,191,128,.14); }
.public-creator-card:nth-child(4n) { border-color: rgba(255,190,92,.65); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 9px 0 rgba(8,6,2,.55), 0 16px 26px rgba(0,0,0,.44), 0 0 16px rgba(255,190,92,.14); }
.public-creator-card:hover { z-index: 2; border-color: #6ddcff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 11px 0 rgba(1,4,6,.58), 0 21px 34px rgba(0,0,0,.5), 0 0 24px rgba(43,191,232,.3); transform: translateY(-6px) rotateX(2deg); }
.public-creator-card-link { display: grid; color: #fff; text-decoration: none; }
.public-creator-card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #101820; }
.public-creator-card-media::after { position: absolute; inset: 32% 0 0; z-index: 1; background: linear-gradient(0deg, rgba(3,7,10,.98), rgba(3,7,10,.58) 64%, transparent); content: ""; }
.public-creator-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; transition: transform .25s ease, filter .25s ease; }
.public-creator-card:hover .public-creator-card-media img { filter: saturate(1.08); transform: scale(1.035); }
.public-creator-card-status, .public-creator-card-verified { position: absolute; top: 8px; z-index: 2; display: inline-flex; align-items: center; min-height: 20px; border: 1px solid rgba(255,255,255,.24); border-radius: 3px; background: rgba(4,9,12,.86); color: #eaf2f5; font-size: 7px; font-weight: 800; text-transform: uppercase; backdrop-filter: blur(7px); }
.public-creator-card-status { left: 8px; gap: 5px; padding: 0 6px; }
.public-creator-card-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(255,190,92,.55); }
.public-creator-card-status.live i { background: var(--red); box-shadow: 0 0 8px rgba(255,75,105,.7); }
.public-creator-card-verified { right: 8px; justify-content: center; width: 20px; border-color: rgba(43,191,232,.62); color: var(--cyan); }
.public-creator-card-heading { position: absolute; right: 10px; bottom: 10px; left: 10px; z-index: 2; }
.public-creator-card-heading small, .public-creator-card-heading strong { display: block; }
.public-creator-card-heading small { overflow: hidden; margin-bottom: 4px; color: #c9d4d9; font-size: 7px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.public-creator-card-heading strong { overflow: hidden; font-size: 15px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.public-creator-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(7,14,18,.96); }
.public-creator-card-meta span, .public-creator-card-meta b, .public-creator-card-meta small { display: block; min-width: 0; }
.public-creator-card-meta b { overflow: hidden; color: var(--cyan); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.public-creator-card-meta small { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.public-creator-card-meta > i { color: #e9f1f4; font-size: 13px; font-style: normal; }
.public-home-live { max-width: 1360px; margin: 0 auto; padding: 52px 34px 58px; }
.public-home-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 230px)); justify-content: start; gap: 12px; }
.public-home-room-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; border: 1px solid rgba(39,184,231,.42); border-radius: 6px; background: #091116; color: #e7eef1; text-decoration: none; box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 14px rgba(39,184,231,.08); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.public-home-room-card:hover { border-color: rgba(39,184,231,.86); box-shadow: 0 14px 28px rgba(0,0,0,.38), 0 0 20px rgba(39,184,231,.17); transform: translateY(-4px); }
.public-home-room-card:nth-child(2) { border-color: rgba(128,108,245,.42); }
.public-home-room-card:nth-child(3) { border-color: rgba(255,190,92,.4); }
.public-home-room-thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: #030608; }
.public-home-room-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 56%; opacity: .82; transition: opacity .16s ease, transform .2s ease; }
.public-home-room-card:hover .public-home-room-thumb img { opacity: .96; transform: scale(1.025); }
.public-home-room-thumb .pill { position: absolute; top: 8px; left: 8px; }
.public-home-room-viewers { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px; background: rgba(4,8,11,.84); color: #dce7ec; font-size: 7px; font-weight: 800; }
.public-home-room-copy, .public-home-room-copy small, .public-home-room-copy strong, .public-home-room-copy em { display: block; min-width: 0; }
.public-home-room-copy { padding: 11px; }
.public-home-room-copy small { overflow: hidden; color: var(--cyan); font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.public-home-room-copy strong { overflow: hidden; margin: 6px 0 4px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.public-home-room-copy em { overflow: hidden; color: var(--muted); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.public-home-room-open { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); color: #e8f0f3; font-size: 8px; font-weight: 800; }
.public-home-room-open i { color: var(--cyan); font-size: 12px; font-style: normal; }
.public-access-band { display: grid; grid-template-columns: minmax(270px, .9fr) minmax(560px, 1.45fr) auto; align-items: center; gap: 42px; max-width: 1360px; margin: 0 auto; padding: 68px 34px; }
.public-access-band h2 { max-width: 410px; margin: 7px 0 0; font-size: 24px; line-height: 1.25; }
.public-access-band ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.public-access-band li { display: grid; grid-template-columns: auto 1fr; gap: 9px; min-height: 72px; padding: 8px 16px; border-left: 1px solid var(--line); }
.public-access-band li > b { color: var(--cyan); font-size: 10px; }
.public-access-band li strong, .public-access-band li small { display: block; }
.public-access-band li strong { font-size: 10px; }
.public-access-band li small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.public-access-band > .primary-btn { white-space: nowrap; }
.public-creator-apply { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 46px max(34px, calc((100% - 1292px) / 2)); border-top: 1px solid rgba(255,190,92,.28); background: #120e08; }
.public-creator-apply h2 { margin: 7px 0 6px; font-size: 24px; }
.public-creator-apply p { max-width: 780px; margin: 0; font-size: 11px; }
.public-creator-apply .public-kicker { color: var(--amber); }
.public-creator-apply > .primary-btn { flex: 0 0 auto; border-color: #c1842e; background: #f0b855; color: #171006; }
.public-directory-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 50px; min-height: 330px; padding: 82px max(34px, calc((100% - 1292px) / 2)) 58px; border-bottom: 1px solid var(--line); background: #071015; }
.public-directory-hero h1 { margin: 8px 0 12px; font-size: 46px; }
.public-directory-hero p { max-width: 760px; margin: 0; color: #aab7be; font-size: 13px; line-height: 1.6; }
.public-directory-hero aside { display: grid; min-width: 250px; gap: 4px; padding: 8px 0 8px 24px; border-left: 2px solid var(--cyan); }
.public-directory-hero aside strong { font-size: 32px; }
.public-directory-hero aside span { color: #dce6eb; font-size: 11px; font-weight: 700; }
.public-directory-hero aside small { color: var(--muted); font-size: 9px; }
.public-directory-content { max-width: 1360px; margin: 0 auto; padding: 64px 34px 82px; }
.public-access-band.compact { border-top: 1px solid var(--line); }
.public-directory-creators { border-top: 0; }
.public-fanclub-section { max-width: 1360px; margin: 0 auto; padding: 70px 34px 84px; }
.public-fanclub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.public-fanclub-grid > article { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 15px; min-height: 132px; padding: 18px; border: 1px solid rgba(128,108,245,.38); border-radius: 6px; background: #091015; }
.public-fanclub-grid .public-creator-avatar { grid-row: 1 / span 2; }
.public-fanclub-grid em { color: var(--violet); font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.public-fanclub-grid h3 { margin: 4px 0 5px; font-size: 14px; }
.public-fanclub-grid p { max-width: 390px; margin: 0; font-size: 9px; line-height: 1.45; }
.public-fanclub-grid > article > strong { min-width: 90px; color: var(--cyan); font-size: 12px; text-align: right; }
.public-fanclub-grid > article > strong small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 500; }
.public-fanclub-grid .primary-btn { grid-column: 3; min-height: 32px; padding: 0 10px; font-size: 9px; }
.public-profile-hero, .public-room-preview-hero { position: relative; display: flex; align-items: center; min-height: 530px; overflow: hidden; border-bottom: 1px solid var(--line); background: #030608; }
.public-profile-hero > img, .public-room-preview-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .48; }
.public-profile-shade, .public-room-preview-hero::after { position: absolute; inset: 0; background: rgba(3,6,9,.52); content: ""; }
.public-profile-copy, .public-room-preview-copy { position: relative; z-index: 1; width: min(720px, calc(100% - 68px)); margin-left: max(34px, calc((100% - 1292px) / 2)); }
.public-profile-copy > .public-creator-avatar, .public-room-preview-copy > .public-creator-avatar { width: 64px; height: 64px; margin-bottom: 18px; background: rgba(10,17,22,.9); }
.public-profile-copy h1, .public-room-preview-copy h1 { margin: 8px 0 12px; font-size: 44px; }
.public-profile-copy > p, .public-room-preview-copy > p { max-width: 690px; margin: 0; color: #c7d1d6; font-size: 13px; line-height: 1.6; }
.public-profile-facts, .public-room-preview-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0; color: #cbd5da; font-size: 10px; }
.public-profile-facts span, .public-room-preview-facts span { padding-right: 20px; border-right: 1px solid rgba(255,255,255,.2); }
.public-profile-facts span:last-child, .public-room-preview-facts span:last-child { border-right: 0; }
.public-profile-content { max-width: 1360px; margin: 0 auto; padding: 68px 34px 84px; }
.public-profile-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 62px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public-profile-offers > span { padding: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.public-profile-offers > span:first-child { border-left: 0; }
.public-profile-offers b { display: block; margin-bottom: 4px; color: var(--text); font-size: 19px; }
.tier-heading { margin-bottom: 16px; }
.public-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.public-tier-card { display: grid; align-content: start; gap: 12px; min-height: 260px; padding: 20px; border: 1px solid rgba(39,184,231,.35); border-radius: 6px; background: #091116; }
.public-tier-card.featured { border-color: rgba(128,108,245,.66); box-shadow: 0 0 20px rgba(128,108,245,.12); }
.public-tier-card > div { display: flex; justify-content: space-between; gap: 10px; }
.public-tier-card > div span { font-size: 12px; font-weight: 800; }
.public-tier-card em { color: var(--violet); font-size: 8px; font-style: normal; font-weight: 800; }
.public-tier-card > strong { color: var(--cyan); font-size: 20px; }
.public-tier-card > strong small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 500; }
.public-tier-card p { min-height: 66px; margin: 0; font-size: 10px; line-height: 1.5; }
.public-tier-card .primary-btn { align-self: end; margin-top: auto; }
.public-preview-labels { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.public-preview-labels .public-room-type { padding: 5px 7px; border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: 8px; font-weight: 800; }
.public-room-preview-copy > p a { color: #fff; font-weight: 800; text-decoration: none; }
.public-room-preview-facts b { margin-right: 4px; color: #fff; }
.public-room-preview-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(430px, .8fr); align-items: center; gap: 70px; max-width: 1240px; margin: 0 auto; padding: 66px 34px 78px; }
.public-room-preview-info h2 { margin: 8px 0 10px; font-size: 28px; }
.public-room-preview-info p { max-width: 690px; margin: 0; font-size: 12px; line-height: 1.6; }
.public-room-preview-info ol { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.public-room-preview-info li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 9px; }
.public-room-preview-info li b { color: var(--cyan); }
.public-room-preview-info li span { color: var(--muted); }
.public-value-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1360px; margin: 0 auto; padding: 24px 34px; border-bottom: 1px solid var(--line); }
.public-value-strip > span { display: block; min-width: 0; padding: 6px 28px; border-left: 1px solid var(--line); }
.public-value-strip > span:first-child { padding-left: 0; border-left: 0; }
.public-value-strip b, .public-value-strip small { display: block; }
.public-value-strip b { font-size: 13px; }
.public-value-strip small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.public-discovery-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .8fr); gap: 70px; align-items: center; max-width: 1260px; margin: 0 auto; padding: 86px 34px 94px; }
.public-discovery-band h2 { max-width: 680px; margin: 9px 0 14px; font-size: 36px; line-height: 1.12; }
.public-discovery-band > div:first-child > p { max-width: 690px; font-size: 13px; }
.public-discovery-band .public-hero-actions { margin-top: 22px; }
.public-room-list { display: grid; border-top: 1px solid var(--line); }
.public-room-list a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.public-room-list a:hover { background: #0c1318; }
.public-room-list .room-avatar { position: static; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--violet); border-radius: 50%; background: #121c23; font-size: 10px; font-weight: 800; }
.public-room-list b, .public-room-list small { display: block; }
.public-room-list b { font-size: 12px; }
.public-room-list small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 500; }
.public-room-list em { color: var(--cyan); font-size: 9px; font-style: normal; }
.public-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 108px; padding: 22px 34px; border-top: 1px solid var(--line); background: #05080a; }
.public-footer p { margin: 0; text-align: center; font-size: 10px; }
.public-footer nav { display: flex; gap: 18px; }
.public-footer nav a { color: var(--muted); font-size: 10px; text-decoration: none; }
.public-auth-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(390px, .7fr); align-items: center; gap: 80px; width: min(1080px, calc(100% - 48px)); min-height: calc(100vh - 182px); margin: 0 auto; padding: 60px 0; }
.public-auth-intro h1 { max-width: 620px; margin: 9px 0 14px; font-size: 42px; line-height: 1.1; }
.public-auth-intro > p { max-width: 570px; font-size: 13px; }
.public-auth-points { display: grid; gap: 12px; margin-top: 28px; color: #c6d1d7; font-size: 11px; }
.public-auth-points span { display: flex; align-items: center; gap: 10px; }
.public-auth-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.public-auth-card { padding: 20px; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-options .check { display: flex; align-items: center; gap: 7px; }
.login-options .check input { width: 15px; min-height: 15px; }
.login-options a, .auth-note a { color: var(--cyan); text-decoration: none; }
.auth-divider { position: relative; margin: 17px 0; border-top: 1px solid var(--line); text-align: center; }
.auth-divider span { position: relative; top: -8px; padding: 0 9px; background: var(--panel); color: var(--muted); font-size: 9px; }
.auth-create-link { width: 100%; }

.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.owner-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric { display: flex; align-items: center; justify-content: space-between; min-height: 102px; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.metric span, .metric strong, .metric small { display: block; }
.metric span { color: var(--muted); font-size: 12px; }
.metric strong { margin: 6px 0 2px; color: var(--cyan); font-size: 23px; line-height: 1.1; }
.metric small { color: var(--soft); font-size: 10px; }
.metric b { width: 34px; height: 34px; border: 2px solid currentColor; border-radius: 50%; color: var(--cyan); opacity: .75; }
.metric b::after { display: block; width: 10px; height: 10px; margin: 10px; border-radius: 2px; background: currentColor; content: ""; }
.tone-violet strong, .tone-violet b { color: var(--violet); }
.tone-green strong, .tone-green b { color: var(--green); }
.tone-amber strong, .tone-amber b { color: var(--amber); }
.tone-coral strong, .tone-coral b { color: var(--coral); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: 12px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.dashboard-side { display: grid; align-content: start; gap: 12px; }
.feature-panel { padding: 14px; }
.featured-stage { position: relative; display: block; height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #070b10; }
.featured-stage img, .live-media-surface > img { position: absolute; width: 139%; max-width: none; height: auto; left: 0; top: -4%; }
.featured-stage::after, .live-stage::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(3, 7, 10, .95), transparent 48%); pointer-events: none; }
.live-stage::after { z-index: 2; }
.featured-stage > .pill { position: absolute; z-index: 2; top: 14px; left: 14px; }
.stage-caption { position: absolute; z-index: 2; right: 16px; bottom: 14px; left: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.stage-caption strong, .stage-caption span { display: block; }
.stage-caption strong { font-size: 22px; }
.stage-caption span { margin-top: 4px; color: #c0ccd2; font-size: 12px; }
.stage-caption .watch-count { padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: rgba(7,12,16,.75); }
.goal-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 11px; color: var(--muted); font-size: 11px; }
.goal-row strong { color: var(--text); }
.progress { height: 5px; overflow: hidden; border-radius: 4px; background: #1c2931; }
.progress span { display: block; height: 100%; background: var(--cyan); }
.home-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 12px 6px 18px; }
.home-welcome h2 { margin: 4px 0 6px; font-size: 27px; }
.home-welcome p { margin: 0; font-size: 11px; }
.home-welcome > div:last-child { display: flex; gap: 8px; }
.welcome-kicker { color: var(--cyan); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.member-home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) 300px; gap: 12px; }
.home-live { grid-column: span 2; }
.home-live .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-schedule { grid-column: 3; }
.fan-feed { grid-column: span 2; }
.home-side-stack { display: grid; align-content: start; gap: 12px; }
.activity-list, .message-preview, .category-list, .new-creator-list { display: grid; }
.activity-list a, .message-preview a, .new-creator-list a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line-soft); text-decoration: none; }
.activity-list a:first-child, .message-preview a:first-child, .new-creator-list a:first-child { border-top: 0; }
.activity-list strong, .activity-list small, .message-preview strong, .message-preview small, .new-creator-list b, .new-creator-list small { display: block; }
.activity-list strong, .message-preview strong, .new-creator-list b { font-size: 10px; }
.activity-list small, .message-preview small, .new-creator-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.activity-list em { color: var(--cyan); font-size: 9px; font-style: normal; }
.message-preview time { align-self: start; color: var(--soft); font-size: 8px; }
.wallet-activity strong, .wallet-activity span, .wallet-activity small { display: block; }
.wallet-activity strong { color: var(--violet); font-size: 24px; }
.wallet-activity span { margin: 4px 0 14px; color: var(--muted); font-size: 10px; }
.wallet-activity small { margin-top: 8px; color: var(--soft); font-size: 9px; }
.category-list a { display: flex; align-items: center; justify-content: space-between; padding: 10px 1px; border-top: 1px solid var(--line-soft); font-size: 10px; text-decoration: none; }
.category-list a:first-child { border-top: 0; }
.category-list span { display: grid; place-items: center; min-width: 24px; height: 20px; border: 1px solid var(--line); border-radius: 3px; color: var(--cyan); font-size: 9px; }
.wallet-summary > strong { display: block; margin: 10px 0 2px; color: var(--violet); font-size: 30px; }
.wallet-summary > strong small { color: var(--text); font-size: 13px; }
.wallet-summary > p { margin: 0 0 14px; font-size: 11px; }
.wallet-summary .primary-btn { width: 100%; }
.schedule-list { display: grid; }
.schedule-list a { display: grid; grid-template-columns: 42px 1fr 8px; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line-soft); text-decoration: none; }
.schedule-list time, .schedule-list b, .schedule-list small { display: block; }
.schedule-list time { color: #d4dde1; font-size: 12px; }
.schedule-list time span, .schedule-list small { margin-top: 2px; color: var(--soft); font-size: 9px; }
.schedule-list b { font-size: 11px; }
.schedule-list i, .signal-dot { background: var(--green); }

.room-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.room-directory { grid-template-columns: repeat(6, minmax(145px, 1fr)); }
.room-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.room-visual { position: relative; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #18232b; text-decoration: none; }
.room-visual::before { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg, rgba(39,184,231,.08), rgba(128,108,245,.18)); }
.room-visual-1 { background: #151d23; }
.room-visual-2 { background: #1c2022; }
.room-visual-3 { background: #151723; }
.room-avatar { position: relative; display: grid; place-items: center; width: 66px; height: 76px; border-radius: 32px 32px 10px 10px; background: #34444d; color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 0 0 14px rgba(8,13,18,.2); }
.room-visual > .pill { position: absolute; z-index: 2; top: 8px; left: 8px; }
.viewer-count { position: absolute; z-index: 2; right: 8px; bottom: 7px; padding: 3px 6px; border-radius: 3px; background: rgba(0,0,0,.65); color: #fff; font-size: 9px; }
.room-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px; }
.room-meta strong, .room-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-meta strong { font-size: 11px; }
.room-meta small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.signal-dot { flex: 0 0 auto; }

.creator-list-panel { grid-column: 3; grid-row: 2; }
.creator-list { display: grid; gap: 8px; }
.creator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.creator-card { display: grid; grid-template-columns: 70px 1fr; gap: 11px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.creator-thumb, .profile-avatar { display: grid; place-items: center; overflow: hidden; border: 1px solid #495963; background: #1b2932; color: #fff; font-weight: 800; text-decoration: none; }
.creator-thumb { width: 70px; height: 70px; border-radius: 4px; }
.creator-card, .room-card, .featured-stage, .profile-shell, .storefront-card, .live-stage {
  border-color: rgba(39,184,231,.55);
  box-shadow: 0 0 0 1px rgba(128,108,245,.14), 0 0 14px rgba(39,184,231,.13), 0 0 24px rgba(128,108,245,.07);
}
.creator-card, .room-card, .storefront-card { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.creator-card:hover, .room-card:hover, .storefront-card:hover {
  border-color: rgba(69,210,250,.92);
  box-shadow: 0 0 0 1px rgba(128,108,245,.28), 0 0 18px rgba(39,184,231,.24), 0 0 32px rgba(128,108,245,.13);
}
.creator-thumb,
.profile-avatar,
.stage-top .profile-dot,
.post-author .profile-dot,
.new-creator-list .profile-dot,
.activity-list .profile-dot,
.message-preview .profile-dot,
.storefront-card .profile-dot,
.checkout-product .profile-dot,
.public-room-list .room-avatar,
.preview-catalog-grid .profile-dot,
.preview-room-grid .room-avatar,
.active-conversation > header .profile-dot,
.conversation-list > button:not(:last-child) .profile-dot,
.mode-studio .rail-profile .profile-dot {
  border-color: #45d2fa;
  box-shadow: 0 0 0 1px rgba(128,108,245,.72), 0 0 10px rgba(39,184,231,.68), 0 0 19px rgba(128,108,245,.32);
}
.creator-thumb:hover, .profile-avatar:hover {
  border-color: #8ce8ff;
  box-shadow: 0 0 0 1px rgba(151,133,255,.9), 0 0 15px rgba(39,184,231,.82), 0 0 28px rgba(128,108,245,.42);
}
.portrait-aria-volt { background: #252137; }
.portrait-mira-luxe { background: #26282a; }
.portrait-violet-ray { background: #152b35; }
.creator-body { min-width: 0; }
.creator-body h3 { margin: 0; font-size: 12px; }
.creator-body p { margin: 4px 0; font-size: 10px; }
.row { display: flex; align-items: center; gap: 8px; }
.between { justify-content: space-between; }
.verified { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); color: #071017; font-size: 9px; font-weight: 900; vertical-align: middle; }
.pill { display: inline-flex; align-items: center; width: max-content; min-height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; color: #bac7cd; font-size: 9px; font-style: normal; font-weight: 800; }
.pill.live { border-color: #b93842; background: #dc3e4c; color: #fff; }
.mini-stats { display: flex; gap: 8px; margin: 6px 0; color: var(--soft); font-size: 9px; }
.card-actions { display: flex; gap: 6px; }
.card-actions .mini-btn { flex: 1; }
.directory-panel .section-head { align-items: center; }
.search-box, .conversation-search { display: flex; align-items: center; gap: 8px; min-width: 260px; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #090f13; color: var(--muted); }
.search-box input, .conversation-search input { min-width: 0; height: auto; padding: 0; border: 0; background: transparent; }
.filter-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.filter-tabs.inline { margin: 0; }
.filter-tabs button, .profile-tabs a, .chat-tabs button, .period-control button { min-height: 30px; padding: 0 11px; border-color: transparent; background: transparent; color: var(--muted); font-size: 11px; }
.filter-tabs button.active, .profile-tabs a.active, .chat-tabs button.active, .period-control button.active { border-color: var(--cyan-dark); background: #11242c; color: var(--cyan); }
.fan-club-panel { margin-top: 12px; }

.ledger { overflow-x: auto; border: 1px solid var(--line-soft); }
.ledger-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(90px, 1fr); align-items: center; min-width: 620px; border-top: 1px solid var(--line-soft); }
.ledger-row:first-child { border-top: 0; background: #0a1014; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.ledger-row > span { min-width: 0; padding: 9px 10px; overflow: hidden; color: #c9d3d8; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.club-ledger .ledger-row { grid-auto-flow: initial; grid-template-columns: minmax(130px, 1fr) minmax(160px, 1.15fr) minmax(110px, .75fr) minmax(120px, .85fr) minmax(265px, 1.7fr); min-width: 930px; }
.club-ledger .ledger-row > span:last-child { overflow: visible; }
.membership-actions { display: flex; align-items: center; gap: 6px; }
.membership-actions form { display: flex; }
.membership-actions .mini-btn { white-space: nowrap; }
.table-status { display: inline-flex; align-items: center; gap: 5px; width: max-content; color: var(--green); }
.table-status.violet { color: var(--violet); }
.table-status.amber { color: var(--amber); }
.table-status.coral { color: var(--coral); }
.table-status.cyan { color: var(--cyan); }

.profile-shell { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.profile-cover { position: relative; height: 260px; overflow: hidden; border-bottom: 1px solid var(--line); background: #111920; }
.profile-cover img { position: absolute; width: 130%; height: 170%; top: -35%; left: -26%; object-fit: cover; object-position: center; }
.profile-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(8,13,18,.8), transparent 45%); }
.profile-identity { position: relative; display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 18px; min-height: 92px; padding: 12px 18px 12px 34px; }
.profile-avatar { width: 112px; height: 112px; margin-top: -58px; border: 3px solid var(--panel); border-radius: 50%; font-size: 26px; }
.profile-avatar { border-color: #45d2fa; }
.profile-copy h2 { margin: 0; font-size: 24px; }
.profile-copy p { margin: 4px 0 0; font-size: 11px; }
.profile-actions { display: flex; gap: 7px; }
.profile-tabs { display: flex; gap: 4px; padding: 0 18px 10px 164px; border-top: 1px solid var(--line-soft); }
.profile-tabs a { display: inline-flex; align-items: center; text-decoration: none; }
.profile-content { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 12px; }
.profile-feed, .profile-aside { display: grid; align-content: start; gap: 12px; }
.post-author { display: flex; align-items: center; gap: 10px; }
.post-author strong, .post-author small { display: block; }
.post-author small { margin-top: 3px; color: var(--soft); font-size: 9px; }
.pinned-post > p { margin: 14px 0; font-size: 12px; }
.post-actions { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.lock-note { color: var(--violet); font-size: 10px; }
.vault-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vault-grid > div { display: grid; align-content: end; min-height: 130px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #131d23; }
.vault-grid b { align-self: center; justify-self: center; margin-bottom: 28px; color: var(--muted); }
.vault-grid span, .vault-grid small { display: block; }
.vault-grid span { font-size: 11px; }
.vault-grid small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.next-live { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.next-live strong, .next-live small { display: block; }
.next-live small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.next-live a { color: var(--cyan); font-size: 10px; }
.tier-grid { display: grid; gap: 8px; }
.tier { padding: 11px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.tier > div { display: flex; justify-content: space-between; }
.tier span { font-size: 11px; font-weight: 800; }
.tier em { color: var(--violet); font-size: 9px; font-style: normal; }
.tier > strong { display: block; margin: 8px 0 5px; color: var(--cyan); font-size: 18px; }
.tier > strong small { color: var(--muted); font-size: 9px; }
.tier p { min-height: 32px; margin-bottom: 9px; font-size: 10px; }
.tier button { width: 100%; }
.featured-tier { border-color: #4e4492; }
.offer-purchase { margin: 0; }
.tier .offer-purchase, .support-offer-list .offer-purchase { width: 100%; }
.post-actions .inline-offer { min-height: 30px; margin-left: auto; padding: 0 10px; border-color: #544696; background: transparent; color: #c9c1ff; font-size: 11px; }
.monetization-banner { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; align-items: center; gap: 18px; margin-bottom: 12px; padding: 13px 16px; border: 1px solid #365867; border-radius: var(--radius); background: #0b171d; }
.monetization-banner strong, .monetization-banner small { display: block; }
.monetization-banner strong { margin: 3px 0; font-size: 16px; }
.monetization-banner small { color: var(--muted); font-size: 9px; }
.monetization-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.monetization-tags span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 9px; }
.monetized-vault > article { display: grid; align-content: end; min-height: 170px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #131d23; }
.monetized-vault article > b { align-self: center; justify-self: center; margin-bottom: 22px; color: var(--muted); }
.monetized-vault article > span, .monetized-vault article > small, .monetized-vault article > strong { display: block; }
.monetized-vault article > span { font-size: 11px; }
.monetized-vault article > small { min-height: 28px; margin-top: 3px; color: var(--muted); font-size: 9px; }
.monetized-vault article > strong { margin: 8px 0; color: var(--cyan); font-size: 13px; }
.support-offer-list { display: grid; gap: 7px; }
.support-offer-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.support-offer-list strong, .support-offer-list small { display: block; }
.support-offer-list strong { font-size: 10px; }
.support-offer-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.support-offer-list article > span { color: var(--violet); font-size: 10px; font-weight: 750; }
.support-offer-list .offer-purchase { grid-column: 1 / -1; }

.marketplace-head { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 28px; padding: 18px 8px 24px; }
.marketplace-head h2 { margin: 5px 0 8px; font-size: 28px; }
.marketplace-head p { max-width: 660px; margin: 0; font-size: 12px; }
.marketplace-head aside { display: grid; padding: 14px; border: 1px solid var(--line); background: var(--panel); }
.marketplace-head aside span, .marketplace-head aside strong, .marketplace-head aside small { display: block; }
.marketplace-head aside span { color: var(--muted); font-size: 9px; }
.marketplace-head aside strong { margin-top: 7px; color: var(--violet); font-size: 23px; }
.marketplace-head aside small { margin: 2px 0 12px; color: var(--muted); font-size: 9px; }
.revenue-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
.channel-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 70px; padding: 11px; border: 1px solid var(--line); background: var(--panel); }
.channel-card > b { width: 24px; height: 24px; border: 2px solid var(--cyan); border-radius: 50%; color: var(--cyan); }
.channel-card > b::after { display: block; width: 7px; height: 7px; margin: 6px; background: currentColor; content: ""; }
.channel-card div strong, .channel-card div small { display: block; }
.channel-card div strong { font-size: 11px; }
.channel-card div small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.channel-card > span { color: var(--cyan); font-size: 10px; font-weight: 750; text-align: right; }
.channel-card.tone-violet > b, .channel-card.tone-violet > span { border-color: var(--violet); color: var(--violet); }
.channel-card.tone-green > b, .channel-card.tone-green > span { border-color: var(--green); color: var(--green); }
.channel-card.tone-amber > b, .channel-card.tone-amber > span { border-color: var(--amber); color: var(--amber); }
.channel-card.tone-coral > b, .channel-card.tone-coral > span { border-color: var(--coral); color: var(--coral); }
.storefront-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.storefront-card { overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.storefront-card header { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 11px; border-bottom: 1px solid var(--line); }
.storefront-card header strong, .storefront-card header small { display: block; }
.storefront-card header strong { font-size: 11px; }
.storefront-card header small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.storefront-card header a { color: var(--cyan); font-size: 9px; }
.storefront-card > div { display: grid; }
.storefront-card > div > span { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; align-items: center; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line-soft); }
.storefront-card > div > span:first-child { border-top: 0; }
.storefront-card > div > span > b, .storefront-card > div > span > small { display: block; }
.storefront-card > div > span > b { font-size: 10px; }
.storefront-card > div > span > small { grid-column: 1; color: var(--muted); font-size: 8px; }
.storefront-card > div > span > strong { grid-column: 2; grid-row: 1 / span 2; color: var(--violet); font-size: 10px; }
.storefront-card > div > span > form { grid-column: 3; grid-row: 1 / span 2; }
.storefront-card .offer-purchase { min-height: 28px; padding: 0 8px; font-size: 9px; }

.upcoming-ledger { margin-top: 12px; }
.room-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.room-main { min-width: 0; }
.live-directory-actions { display: flex; align-items: center; gap: 10px; }
.live-directory-actions > .primary-btn { min-height: 32px; white-space: nowrap; }
.multiview-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 10px 2px 16px; border-bottom: 1px solid var(--line); }
.multiview-heading h2 { margin: 3px 0 4px; font-size: 20px; }
.multiview-heading p { max-width: 680px; margin: 0; font-size: 11px; }
.multiview-summary { display: flex; align-items: center; gap: 10px; }
.multiview-summary > span { display: grid; min-width: 108px; min-height: 44px; align-content: center; padding: 6px 10px; border-left: 2px solid var(--cyan); background: #0a1116; color: var(--muted); font-size: 9px; }
.multiview-summary > span:nth-child(2) { border-left-color: var(--violet); }
.multiview-summary > span:nth-child(3) { border-left-color: var(--amber); }
.multiview-summary b { color: var(--text); font-size: 15px; }
.multiview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 14px; }
.multiview-room { min-width: 0; }
.live-stage.multiview-stage { width: 100%; min-height: 0; aspect-ratio: 16 / 9; border-color: rgba(39,184,231,.7); border-radius: 5px; box-shadow: 0 0 0 1px rgba(128,108,245,.16), 0 0 18px rgba(39,184,231,.16), 0 0 28px rgba(128,108,245,.08); }
.multiview-room:nth-child(even) .multiview-stage { border-color: rgba(128,108,245,.72); box-shadow: 0 0 0 1px rgba(39,184,231,.14), 0 0 18px rgba(128,108,245,.17), 0 0 28px rgba(39,184,231,.07); }
.multiview-stage .live-media-state { width: min(340px, calc(100% - 28px)); padding: 14px; }
.multiview-stage .live-media-state > strong { font-size: 11px; }
.multiview-stage .stage-top { top: 10px; right: 10px; left: 10px; }
.multiview-stage .stage-controls { right: 10px; bottom: 10px; left: 10px; min-height: 48px; padding: 6px; }
.multiview-stage .stage-controls > .icon-btn { flex-basis: 34px; width: 34px; height: 34px; }
.multiview-room-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 2px 2px; }
.multiview-room-meta strong, .multiview-room-meta small { display: block; }
.multiview-room-meta strong { font-size: 10px; }
.multiview-room-meta small, .multiview-room-meta > span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.multiview-empty { margin-top: 14px; }
.multiview-empty h2 { font-size: 15px; }
.live-stage { position: relative; min-height: 580px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; background: #05080a; }
.live-media-surface { position: absolute; inset: 0; overflow: hidden; background: #030608; }
.live-media-surface > img { z-index: 0; top: -2%; cursor: zoom-in; transition: opacity .18s ease; }
.live-media-surface > img:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
.live-video-grid { position: absolute; z-index: 1; inset: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); place-items: stretch; background: #000; opacity: 0; transition: opacity .18s ease; }
.live-stage.has-video .live-video-grid { opacity: 1; }
.live-stage.has-video .live-media-surface > img { opacity: 0; pointer-events: none; }
.live-video-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #030608; }
.live-video-tile video { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.live-video-tile.is-local video { transform: scaleX(-1); }
.live-participant-label { position: absolute; right: 10px; bottom: 10px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: rgba(3,6,8,.75); color: #fff; font-size: 9px; font-weight: 700; }
.live-media-state { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: min(420px, calc(100% - 32px)); justify-items: center; gap: 9px; padding: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: rgba(4,8,11,.9); text-align: center; transform: translate(-50%, -50%); }
.live-media-state > span { color: var(--cyan); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.live-media-state > strong { max-width: 340px; font-size: 13px; line-height: 1.45; }
.live-media-state form { margin-top: 4px; }
.live-media-state.is-unavailable > span, .live-media-state.is-error > span { color: var(--amber); }
.live-stage.has-video .live-media-state { visibility: hidden; opacity: 0; pointer-events: none; }
.live-stage:fullscreen, .live-stage:-webkit-full-screen, .live-stage.fullscreen-fallback { width: 100vw; height: 100vh; min-height: 100vh; border: 0; border-radius: 0; background: #000; }
.live-stage:fullscreen .live-media-surface > img, .live-stage:-webkit-full-screen .live-media-surface > img, .live-stage.fullscreen-fallback .live-media-surface > img { inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; cursor: zoom-out; }
.live-stage:fullscreen .stage-top, .live-stage:-webkit-full-screen .stage-top, .live-stage.fullscreen-fallback .stage-top { top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); left: max(20px, env(safe-area-inset-left)); }
.live-stage:fullscreen .stage-controls, .live-stage:-webkit-full-screen .stage-controls, .live-stage.fullscreen-fallback .stage-controls { right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); }
.live-stage.fullscreen-fallback { position: fixed; inset: 0; z-index: 1000; }
body.stage-fullscreen-open { overflow: hidden; }
.stage-top { position: absolute; z-index: 4; top: 14px; right: 14px; left: 14px; display: flex; align-items: center; justify-content: space-between; }
.stage-top > div { display: flex; align-items: center; gap: 9px; }
.stage-top strong, .stage-top small { display: block; }
.stage-top small { margin-top: 2px; color: #ccd5da; font-size: 9px; font-weight: 500; }
.stage-controls { position: absolute; z-index: 4; right: 14px; bottom: 14px; left: 14px; display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(7,12,16,.86); }
.stage-controls > .icon-btn { flex: 0 0 36px; width: 36px; height: 36px; }
.stage-controls > span { flex: 1; }
.discovery-clock { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(255,190,92,.48); border-radius: 4px; background: rgba(28,19,8,.9); color: var(--amber); font-size: 9px; letter-spacing: 0; white-space: nowrap; box-shadow: 0 0 12px rgba(255,190,92,.12); }
.stage-controls button.is-active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(39,184,231,.2); }
.stage-controls button:disabled { cursor: not-allowed; opacity: .42; }
.room-progress { padding: 11px 14px; border: 1px solid var(--line); border-top: 0; background: var(--panel); }
.room-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 12px; border: 1px solid #6a592a; background: rgba(240,163,61,.07); }
.notice p { margin: 3px 0 0; font-size: 10px; }
.gift-dock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.gift-dock button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; }
.gift-dock b { color: var(--violet); font-size: 18px; }
.gift-dock span, .gift-dock small { display: block; }
.gift-dock span { font-size: 11px; }
.gift-dock small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.room-commerce-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.room-commerce-head strong, .room-commerce-head small { display: block; }
.room-commerce-head strong { font-size: 11px; }
.room-commerce-head small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.room-commerce-head a { color: var(--cyan); font-size: 10px; }
.gift-dock.monetized-gifts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.monetized-gifts article { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); background: var(--panel-2); }
.monetized-gifts article > b { color: var(--violet); font-size: 16px; text-align: center; }
.monetized-gifts article > span, .monetized-gifts article small { display: block; }
.monetized-gifts article > span { font-size: 10px; }
.monetized-gifts article small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.monetized-gifts .offer-purchase { grid-column: 1 / -1; min-height: 28px; padding: 0 8px; font-size: 9px; }
.chat-panel .offer-purchase.send-gift { margin: 10px; border-color: #544696; color: #c9c1ff; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto auto; min-height: 730px; padding: 0; overflow: hidden; }
.chat-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.chat-tabs button { border-radius: 0; }
.messages { display: grid; align-content: start; gap: 5px; padding: 10px; overflow: auto; }
.messages p { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; margin: 0; padding: 8px; border-bottom: 1px solid var(--line-soft); font-size: 10px; }
.messages strong, .messages span { display: block; }
.messages strong { margin-bottom: 3px; color: var(--text); }
.messages time { align-self: start; color: var(--soft); font-size: 8px; }
.messages .paid-message { border: 1px solid #493e83; background: rgba(128,108,245,.08); }
.messages .paid-message > b { color: var(--amber); }
.chat-empty { display: grid; place-content: center; gap: 5px; min-height: 180px; color: var(--muted); text-align: center; }
.chat-empty strong { color: var(--text); font-size: 11px; }
.chat-empty span { font-size: 9px; }
.send-gift { margin: 10px; border-color: #544696; color: #c9c1ff; }
.chat-membership-gate { display: grid; justify-items: stretch; gap: 6px; padding: 12px; border-top: 1px solid var(--line); background: #080e12; }
.chat-membership-gate strong { color: var(--amber); font-size: 10px; }
.chat-membership-gate span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.chat-membership-gate .room-membership-cta { width: 100%; min-height: 34px; margin-top: 2px; }
.live-media-state .room-membership-cta { min-height: 34px; margin-top: 4px; }
.inline-form { display: grid; grid-template-columns: 1fr 40px; gap: 7px; padding: 10px; border-top: 1px solid var(--line); }
input, select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; outline: none; background: #080e12; color: var(--text); }
select { appearance: auto; }

.wallet-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-bottom: 12px; }
.wallet-metrics .metric,
.wallet-layout > .panel,
.wallet-marketplace,
.wallet-transactions {
  border-color: rgba(39,184,231,.62);
  box-shadow: 0 0 0 1px rgba(128,108,245,.18), 0 0 15px rgba(39,184,231,.16), 0 0 26px rgba(128,108,245,.09);
}
.wallet-ledger {
  border-color: rgba(128,108,245,.58);
  box-shadow: 0 0 9px rgba(39,184,231,.12), inset 0 0 12px rgba(128,108,245,.04);
}
.fixed-rate { color: var(--violet); font-size: 10px; }
.purchase-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.purchase-options form { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); background: var(--panel-2); }
.purchase-options form > div > b, .purchase-options form > div > span, .purchase-options form > div > small { display: block; }
.purchase-options form > div > span { margin: 8px 0 2px; color: var(--violet); font-size: 20px; font-weight: 800; }
.purchase-options form > div > small { color: var(--muted); }
.receipt-note { margin: 12px 0 0; font-size: 10px; }
.receipt-note a { color: var(--cyan); }
.credit-final-sale { display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 7px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.credit-final-sale input { width: 15px; min-height: 15px; margin: 1px 0 0; padding: 0; accent-color: var(--cyan); }
.wallet-marketplace { margin-bottom: 12px; }
.wallet-spend-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.wallet-spend-grid a { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); background: var(--panel-2); text-decoration: none; }
.wallet-spend-grid b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--cyan-dark); color: var(--cyan); font-size: 8px; }
.wallet-spend-grid span, .wallet-spend-grid small { display: block; min-width: 0; }
.wallet-spend-grid span { font-size: 9px; font-weight: 750; }
.wallet-spend-grid small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.control-list { display: grid; }
.control-list label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.control-list label:first-child { border-top: 0; }
.control-list b, .control-list small { display: block; }
.control-list b { font-size: 11px; }
.control-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.control-list input[type="checkbox"] { width: 36px; min-height: 18px; accent-color: var(--cyan); }
.purchase-options form,
.wallet-spend-grid a {
  border-color: rgba(128,108,245,.58);
  box-shadow: 0 0 9px rgba(39,184,231,.12), inset 0 0 12px rgba(128,108,245,.04);
}
.wallet-spend-grid b {
  border-color: #45d2fa;
  box-shadow: 0 0 8px rgba(39,184,231,.56), 0 0 14px rgba(128,108,245,.24);
}
.wallet-spend-grid a { transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.wallet-spend-grid a:hover {
  border-color: rgba(69,210,250,.92);
  background: #122029;
  box-shadow: 0 0 13px rgba(39,184,231,.27), 0 0 22px rgba(128,108,245,.14);
}

.message-workspace { display: grid; grid-template-columns: 330px 1fr; min-height: calc(100vh - 95px); padding: 0; overflow: hidden; }
.conversation-list { border-right: 1px solid var(--line); }
.conversation-search { min-width: 0; margin: 12px; }
.conversation-list > button { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 72px; padding: 10px 12px; border-width: 1px 0 0; border-radius: 0; text-align: left; }
.conversation-list > button.active { border-left: 2px solid var(--cyan); background: #10202a; }
.conversation-list strong, .conversation-list small { display: block; }
.conversation-list strong { font-size: 11px; }
.conversation-list small { max-width: 190px; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list em { display: block; margin-top: 3px; color: var(--cyan); font-size: 8px; font-style: normal; }
.conversation-list time { align-self: start; color: var(--soft); font-size: 8px; }
.active-conversation { display: grid; grid-template-rows: auto 1fr auto auto; }
.active-conversation > header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.active-conversation header strong, .active-conversation header small { display: block; }
.active-conversation header small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.active-conversation header a { margin-left: auto; }
.message-thread { display: grid; align-content: center; justify-items: start; gap: 10px; padding: 30px; }
.message-thread p { max-width: 62%; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-2); color: #d5dfe3; font-size: 11px; }
.message-thread p.sent { justify-self: end; border-color: #315e6f; background: #102630; }
.message-thread time { display: block; margin-top: 5px; color: var(--soft); font-size: 8px; }
.conversation-label { padding: 7px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; text-align: center; }
.message-compose { display: grid; grid-template-columns: 36px 1fr 40px; gap: 7px; padding: 10px; border-top: 1px solid var(--line); }

.studio-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.studio-actions > div { display: flex; gap: 7px; }
.period-control { display: flex; border: 1px solid var(--line); border-radius: 4px; }
.period-control button { border-radius: 0; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; gap: 12px; }
.chart { display: flex; align-items: end; gap: 4px; height: 190px; padding: 14px 8px 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 37px, var(--line-soft) 38px); }
.chart span { flex: 1; height: var(--h); min-height: 4px; background: var(--cyan); }
.chart span:nth-child(2n) { background: var(--violet); }
.chart-axis { display: flex; justify-content: space-between; padding: 8px 0 0; color: var(--soft); font-size: 9px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.legend i { width: 10px; height: 3px; background: var(--cyan); }
.legend i:nth-child(2) { background: var(--violet); }
.balance-stack { display: grid; gap: 12px; margin: 20px 0; }
.balance-stack strong { color: var(--green); font-size: 23px; }
.balance-stack strong:nth-child(2) { color: var(--violet); }
.balance-stack small { color: var(--muted); font-size: 9px; }
.stack-form { display: grid; gap: 10px; }
.stack-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.account-panel { text-align: center; }
.completion-ring { display: grid; place-items: center; width: 104px; height: 104px; margin: 16px auto; border: 10px solid #1e313a; border-top-color: var(--cyan); border-right-color: var(--cyan); border-radius: 50%; }
.completion-ring span { font-size: 22px; font-weight: 800; }
.account-panel p { font-size: 10px; }
.content-ledger .ledger-row { min-width: 760px; }

.control-grid, .master-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.studio-channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.monetization-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); gap: 12px; margin-bottom: 12px; }
.monetization-side { display: grid; align-content: start; gap: 12px; }
.monetization-product-list { display: grid; margin-bottom: 12px; }
.monetization-product-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.monetization-product-row:first-child { border-top: 0; }
.product-enabled { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 9px; }
.product-enabled input { width: 16px; min-height: 16px; margin-top: 2px; accent-color: var(--cyan); }
.product-enabled b, .product-enabled small { display: block; }
.product-enabled b { color: var(--text); font-size: 11px; }
.product-enabled small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.product-price { display: grid; grid-template-columns: 1fr 52px auto; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.product-price input { min-width: 0; }
.product-price span { color: var(--violet); font-size: 9px; font-weight: 750; }
.split-visual { display: grid; grid-template-columns: var(--creator-share, 4fr) var(--platform-share, 1fr); min-height: 82px; margin-bottom: 10px; }
.split-visual span { display: grid; place-items: center; border: 1px solid #41509b; background: rgba(128,108,245,.09); color: var(--violet); font-size: 9px; text-align: center; }
.split-visual span + span { border-left: 0; border-color: #27657a; background: rgba(39,184,231,.07); color: var(--cyan); }
.split-visual b { display: block; font-size: 18px; }
.revenue-owner-grid { display: grid; grid-template-columns: minmax(310px, .7fr) minmax(0, 1.3fr); gap: 12px; margin-bottom: 12px; }
.revenue-wide { grid-column: 1 / -1; }
.fee-rule { margin: 12px 0 0; color: var(--amber); font-size: 9px; }
.permission-card .danger-btn { justify-self: start; }
.authority-list { display: grid; }
.authority-list > span { display: grid; grid-template-columns: minmax(100px, auto) 1fr; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 10px; }
.authority-list > span:first-child { border-top: 0; }
.authority-list + .ghost-btn { margin-top: 12px; }
.restriction-panel { margin-top: 12px; }
.restriction-list { display: grid; gap: 7px; }
.restriction-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); background: var(--panel-2); }
.restriction-list strong, .restriction-list small { display: block; }
.restriction-list strong { font-size: 11px; }
.restriction-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.restriction-list article > span { color: var(--amber); font-size: 9px; }
.empty-state { padding: 20px 2px; color: var(--muted); font-size: 11px; }
.case-list { display: grid; gap: 8px; }
.case-list article { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); background: var(--panel-2); }
.case-list strong, .case-list small { display: block; }
.case-list strong { font-size: 11px; }
.case-list small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.master-grid { align-items: start; }
.master-control-form { display: grid; }
.master-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.master-toggle:first-child { border-top: 0; }
.master-toggle b, .master-toggle small { display: block; }
.master-toggle b { font-size: 11px; }
.master-toggle small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.master-toggle input { flex: 0 0 auto; width: 38px; min-height: 19px; accent-color: var(--cyan); }
.master-control-form > button { justify-self: start; margin-top: 12px; }
.owner-protection { margin-top: 14px; padding: 11px; border-left: 3px solid var(--cyan); background: #0b171d; }
.owner-protection strong { font-size: 10px; }
.owner-protection p { margin: 4px 0 0; font-size: 9px; }
.emergency-panel { border-color: #63312e; }
.emergency-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.emergency-actions form, .emergency-actions button { width: 100%; }

.user-control-list { display: grid; gap: 8px; }
.user-control-row { display: grid; grid-template-columns: minmax(240px, 1fr) auto minmax(480px, 1.35fr); align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); background: var(--panel-2); }
.user-summary { display: flex; align-items: center; gap: 10px; min-width: 0; }
.user-summary strong, .user-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-summary strong { font-size: 11px; }
.user-summary small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.user-control-row form { display: grid; grid-template-columns: minmax(125px, .8fr) minmax(105px, .65fr) minmax(150px, 1fr) auto; gap: 6px; }
.user-owner-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
.user-owner-actions > .owner-protected { grid-column: 1 / -1; margin: 0; border-left-color: var(--green); color: var(--green); font-size: 10px; }
.view-as-btn { min-height: 36px; white-space: nowrap; }
.user-admin-secondary { margin-top: 12px; }
.moderator-preview { margin-top: 10px; }

.view-as-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 12px; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: #0c1115; }
.view-as-intro h2 { margin: 4px 0; font-size: 22px; }
.view-as-intro p { margin: 0; font-size: 10px; }
.preview-account-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 22px; }
.preview-account-facts span, .preview-account-facts b { display: block; }
.preview-account-facts span { color: var(--text); font-size: 10px; }
.preview-account-facts b { margin-bottom: 4px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.preview-control-card { padding: 15px; }
.preview-control-card > h2 { margin-bottom: 12px; font-size: 14px; }
.preview-control-card > p { font-size: 10px; }
.preview-control-card textarea { width: 100%; min-height: 118px; padding: 10px; resize: none; border: 1px solid var(--line); border-radius: 4px; outline: none; background: #080e12; color: var(--text); font: inherit; }
.preview-control-card > label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.preview-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.preview-action-grid > button { width: 100%; }
.preview-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.preview-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.preview-field-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.preview-check { display: flex; align-items: center; gap: 7px; margin: 10px 0; color: var(--muted); font-size: 9px; }
.preview-check input { width: 15px; min-height: 15px; accent-color: var(--violet); }
.owner-preview-mode input:disabled, .owner-preview-mode select:disabled, .owner-preview-mode textarea:disabled { color: #c4cdd2; opacity: .8; }
.owner-preview-mode button:disabled { border-color: #35434c; background: #111920; color: #9aa7ae; opacity: .82; }
.preview-membership-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(190px, auto) auto; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line-soft); }
.preview-membership-row:first-of-type { border-top: 0; }
.preview-membership-row strong, .preview-membership-row small, .preview-membership-row span, .preview-membership-row b { display: block; }
.preview-membership-row strong { font-size: 11px; }
.preview-membership-row small, .preview-membership-row span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.preview-membership-row b { margin-bottom: 4px; color: var(--soft); font-size: 8px; text-transform: uppercase; }
.preview-conversation-list { display: grid; }
.preview-conversation-list button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 8px 2px; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; text-align: left; }
.preview-conversation-list button:first-child { border-top: 0; }
.preview-conversation-list b, .preview-conversation-list small { display: block; }
.preview-conversation-list b { font-size: 10px; }
.preview-conversation-list small, .preview-conversation-list time { margin-top: 3px; color: var(--muted); font-size: 8px; }
.preview-room-grid, .preview-catalog-grid, .preview-tier-grid { display: grid; }
.preview-room-grid article, .preview-catalog-grid article, .preview-tier-grid article { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 2px; border-top: 1px solid var(--line-soft); }
.preview-room-grid article:first-child, .preview-catalog-grid article:first-child, .preview-tier-grid article:first-child { border-top: 0; }
.preview-room-grid strong, .preview-room-grid small, .preview-catalog-grid strong, .preview-catalog-grid small, .preview-tier-grid strong, .preview-tier-grid small { display: block; }
.preview-room-grid strong, .preview-catalog-grid strong, .preview-tier-grid strong { font-size: 10px; }
.preview-room-grid small, .preview-catalog-grid small, .preview-tier-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.preview-tier-grid article { grid-template-columns: minmax(0, 1fr) auto auto; }
.preview-tier-grid article > span { color: var(--violet); font-size: 11px; font-weight: 800; }
.preview-tier-grid article > span small { text-align: right; }
.preview-product-list { margin-bottom: 12px; }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 28px; max-width: 1040px; margin: 38px auto; }
.checkout-main { min-width: 0; }
.checkout-main > h2 { margin: 8px 0; font-size: 28px; }
.checkout-main > p { font-size: 11px; }
.checkout-back { display: block; margin-bottom: 22px; color: var(--cyan); font-size: 10px; text-decoration: none; }
.checkout-product { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 20px 0 12px; padding: 14px; border: 1px solid var(--line); background: var(--panel); }
.checkout-product > div > strong, .checkout-product > div > small { display: block; }
.checkout-product > div > strong { font-size: 13px; }
.checkout-product > div > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.checkout-product > div > p { margin: 7px 0 0; font-size: 10px; }
.checkout-product > b { color: var(--violet); font-size: 16px; text-align: right; }
.checkout-product > b small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.checkout-confirmation { display: grid; gap: 9px; }
.final-sale-check { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 10px; padding: 12px; border: 1px solid #65413d; background: rgba(240,106,97,.05); cursor: pointer; }
.final-sale-check input { width: 16px; min-height: 16px; margin: 2px 0 0; accent-color: var(--coral); }
.final-sale-check b, .final-sale-check small { display: block; }
.final-sale-check b { color: #ffaaa3; font-size: 10px; }
.final-sale-check small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.checkout-confirmation > button { justify-self: stretch; min-height: 42px; }
.renewal-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.renewal-choice legend { grid-column: 1 / -1; margin-bottom: 2px; color: var(--muted); font-size: 10px; }
.renewal-choice label { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 9px; min-height: 82px; padding: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.renewal-choice label:has(input:checked) { border-color: var(--cyan); background: rgba(39,184,231,.06); }
.renewal-choice input { width: 16px; min-height: 16px; margin: 1px 0 0; accent-color: var(--cyan); }
.renewal-choice b, .renewal-choice small { display: block; }
.renewal-choice b { font-size: 10px; }
.renewal-choice small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.renewal-note { padding: 10px 12px; border-left: 3px solid var(--amber); background: rgba(240,163,61,.06); }
.renewal-note strong { font-size: 10px; }
.renewal-note p { margin: 4px 0 0; font-size: 9px; }
.policy-link { margin-top: 11px; color: var(--soft); font-size: 9px; }
.policy-link a { color: var(--cyan); }
.checkout-summary { position: sticky; top: 84px; }
.checkout-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 10px; }
.checkout-line span { color: var(--muted); }
.checkout-line.total { margin-bottom: 12px; border-color: var(--line); }
.checkout-line.total strong { color: var(--violet); }
.checkout-summary > .primary-btn { width: 100%; }
.final-sale-badge { display: grid; gap: 4px; margin-top: 14px; padding: 11px; border: 1px solid #65413d; background: #211312; }
.final-sale-badge b { color: var(--coral); font-size: 10px; text-transform: uppercase; }
.final-sale-badge span { color: var(--muted); font-size: 8px; line-height: 1.45; }
.policy-page { max-width: 820px; margin: 30px auto; }
.policy-page h2 { margin: 7px 0 16px; font-size: 26px; }
.policy-page h3 { margin: 20px 0 6px; font-size: 13px; text-transform: uppercase; }
.policy-page p { font-size: 11px; }
.policy-page > .primary-btn { margin-top: 8px; }

.signup-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: start; gap: 36px; max-width: 1060px; margin: 42px auto; }
.signup-intro { padding: 20px 6px; }
.signup-intro h2 { margin: 7px 0 10px; font-size: 30px; }
.signup-intro > p { max-width: 560px; font-size: 12px; }
.signup-points { display: grid; gap: 12px; margin-top: 24px; }
.signup-points > span { display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: start; }
.signup-points i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--cyan-dark); border-radius: 50%; color: var(--cyan); font-size: 10px; font-style: normal; font-weight: 800; }
.signup-points b, .signup-points small { display: block; }
.signup-points b { font-size: 11px; }
.signup-points small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.5; }
.signup-card { padding: 18px; }
.role-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.role-choice legend { grid-column: 1 / -1; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.role-choice label { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 8px; padding: 11px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.role-choice input { width: 15px; min-height: 15px; margin: 2px 0 0; accent-color: var(--cyan); }
.role-choice b, .role-choice small { display: block; }
.role-choice b { color: var(--text); font-size: 11px; }
.role-choice small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.signup-card .check { display: grid; grid-template-columns: 16px 1fr; align-items: start; gap: 8px; line-height: 1.5; }
.signup-card .check input { width: 15px; min-height: 15px; margin-top: 1px; accent-color: var(--cyan); }
.auth-note { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 9px; }
.auth-alert { margin-bottom: 12px; padding: 10px 12px; border: 1px solid #7d3733; border-radius: var(--radius); background: #2a1514; color: #ffbbb5; font-size: 10px; line-height: 1.5; }
.invite-notice { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr); align-items: center; gap: 16px; margin-bottom: 12px; border-color: #8b6a25; background: #17130a; }
.invite-notice h2 { margin: 5px 0; font-size: 15px; }
.invite-notice p { margin: 0; font-size: 10px; }
.invite-notice input { width: 100%; color: var(--amber); }
.user-status-actions, .balance-adjustment { display: flex; flex-wrap: wrap; gap: 5px; }
.balance-adjustment input { min-width: 120px; }

.owner-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) 390px; gap: 12px; }
.live-monitor { grid-column: span 2; }
.live-monitor .room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.risk-panel { grid-column: 3; }
.risk-ledger .ledger-row { min-width: 680px; }
.risk { font-weight: 700; }
.risk.high { color: var(--coral); }
.risk.medium { color: var(--amber); }
.risk.low { color: var(--green); }
.payments-ledger, .payouts-ledger { min-width: 0; }
.trac-status { min-width: 0; }
.trac-chart { display: flex; align-items: center; justify-content: space-around; gap: 12px; padding: 12px 0; }
.completion-ring.trac { width: 128px; height: 128px; margin: 0; border-color: #1b2e23; border-top-color: var(--green); border-right-color: var(--green); border-bottom-color: var(--green); }
.completion-ring.trac span { color: var(--green); font-size: 22px; text-align: center; }
.completion-ring.trac small { display: block; margin-top: 4px; color: var(--text); font-size: 9px; }
.trac-chart ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.trac-chart li { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; align-items: center; color: var(--muted); font-size: 9px; }
.trac-chart li i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.trac-chart li i.cyan { background: var(--cyan); }
.trac-chart li i.amber { background: var(--amber); }
.trac-chart li strong { color: var(--text); }
.observer-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-size: 10px; }
.observer-bar > strong { color: var(--text); }
.observer-bar .push { margin-left: auto; }

.grid { display: grid; gap: 12px; }
.grid.two, .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric-row.vertical { grid-template-columns: 1fr; }
.table, .payout-list, .room-admin-list { display: grid; gap: 8px; }
.table > div, .payout-list article, .room-admin-list article { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); background: var(--panel-2); }
.table small, .payout-list p, .room-admin-list p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.payout-list form, .room-admin-list form { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.payout-list h3, .room-admin-list h3 { margin: 0; font-size: 12px; }
.link-grid, .compliance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.link-grid a, .compliance-grid article { padding: 14px; border: 1px solid var(--line); background: var(--panel-2); text-decoration: none; }
.compliance-grid h3 { margin-bottom: 5px; font-size: 12px; }
.compliance-grid p { margin: 0; font-size: 10px; }
.code-card { margin-bottom: 12px; padding: 13px; border: 1px solid #28523a; background: #0c1b12; color: #a9e8ba; font-family: Consolas, monospace; font-size: 10px; line-height: 1.8; }
.prose, .signup { max-width: 760px; margin: 30px auto; }
.prose h2, .signup h2 { font-size: 24px; }
.prose p, .signup p { font-size: 12px; }
.signup .check { display: flex; align-items: center; gap: 8px; }
.signup .check input { width: auto; min-height: auto; }
.empty { display: grid; place-items: start; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; max-width: 350px; padding: 12px 14px; border: 1px solid #2d7442; border-radius: 4px; background: #0b1710; color: #c5f0d1; font-size: 11px; box-shadow: 0 12px 30px rgba(0,0,0,.4); }

.discovery-access-heading { max-width: 960px; margin: 38px auto 22px; }
.discovery-access-heading h2 { margin: 6px 0 8px; font-size: 29px; }
.discovery-access-heading > p { max-width: 680px; margin: 0; font-size: 12px; }
.discovery-access-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border: 1px solid #315e40; border-radius: 6px; background: #0d1d14; }
.discovery-access-status strong { color: var(--green); font-size: 11px; text-transform: uppercase; }
.discovery-access-status span { color: #c9d7ce; font-size: 10px; }
.discovery-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 960px; margin: 0 auto 42px; }
.discovery-access-option { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 0 16px 36px rgba(0,0,0,.25); }
.discovery-access-option.platform-option { border-color: #286373; box-shadow: 0 0 28px rgba(51,205,231,.08), 0 16px 36px rgba(0,0,0,.25); }
.discovery-access-option.creator-option { border-color: #72522d; box-shadow: 0 0 28px rgba(232,172,74,.07), 0 16px 36px rgba(0,0,0,.25); }
.discovery-access-option h3 { margin: 6px 0 7px; font-size: 20px; }
.discovery-access-option p { margin: 0; font-size: 10px; line-height: 1.6; }
.discovery-access-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.discovery-access-price span { color: var(--text); font-size: 27px; }
.platform-option .discovery-access-price span { color: var(--cyan); }
.creator-option .discovery-access-price span { color: var(--amber); }
.discovery-access-price small { color: var(--muted); font-size: 9px; font-weight: 600; }
.discovery-access-features { display: grid; align-content: start; gap: 10px; margin: 0; padding: 0; list-style: none; }
.discovery-access-features li { position: relative; padding-left: 17px; color: #cbd2d6; font-size: 10px; line-height: 1.5; }
.discovery-access-features li::before { position: absolute; top: 1px; left: 0; color: var(--green); content: "\2713"; font-weight: 800; }
.discovery-access-option form { display: grid; gap: 11px; }
.discovery-access-option > .primary-btn, .discovery-access-option > .offer-purchase { width: 100%; }
.discovery-access-check { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.discovery-access-check input { width: 15px; min-height: 15px; margin: 0; accent-color: var(--cyan); }
.discovery-access-renewal { color: var(--muted); font-size: 8px; line-height: 1.5; }

@media (max-width: 1400px) {
  .room-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-monitor, .risk-panel { grid-column: span 1; }
  .trac-status { grid-column: span 2; }
  .owner-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .public-creator-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .public-fanclub-grid { grid-template-columns: 1fr; }
  .public-room-preview-info { gap: 40px; }
  .public-room-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-room-card:last-child { grid-column: 1 / -1; }
  .public-creator-row { grid-template-columns: 58px minmax(170px, .8fr) minmax(300px, 1.2fr); }
  .public-creator-actions { grid-column: 2 / -1; justify-self: end; }
  .public-access-band { grid-template-columns: minmax(250px, .8fr) minmax(480px, 1.2fr); }
  .public-access-band > .primary-btn { grid-column: 2; justify-self: end; }
  .system-status { display: none; }
  .mobile-wallet { display: block; color: var(--cyan); font-size: 11px; }
  .dashboard-grid, .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-live, .fan-feed { grid-column: span 2; }
  .home-schedule, .home-side-stack { grid-column: auto; }
  .dashboard-side, .creator-list-panel { grid-column: auto; grid-row: auto; }
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-content, .wallet-layout { grid-template-columns: 1fr; }
  .room-workspace { grid-template-columns: 1fr; }
  .chat-panel { min-height: 560px; }
  .user-control-row { grid-template-columns: minmax(220px, 1fr) auto; }
  .user-owner-actions { grid-column: 1 / -1; }
  .wallet-spend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .monetization-workspace { grid-template-columns: 1fr; }
  .owner-preview-bar { grid-template-columns: minmax(210px, .7fr) minmax(360px, 1.3fr) auto; }
  .owner-preview-bar .preview-readonly { display: none; }
  .preview-membership-row { grid-template-columns: minmax(180px, 1fr) auto; }
  .preview-membership-row .preview-check, .preview-membership-row .preview-action-row { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .discovery-access-heading { margin-top: 24px; }
  .discovery-access-grid { grid-template-columns: 1fr; }
  .discovery-access-status { grid-template-columns: 1fr; }
  .public-creator-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .public-header { grid-template-columns: auto 1fr; min-height: 66px; padding: 0 16px; }
  .public-header > nav { display: none; }
  .public-auth-actions { justify-content: flex-end; }
  .public-hero { height: min(650px, calc(100svh - 112px)); min-height: 520px; }
  .public-hero-copy { width: min(620px, calc(100% - 48px)); margin-left: 24px; }
  .public-hero-shade { background: linear-gradient(90deg, rgba(3,6,9,.97), rgba(3,6,9,.74) 58%, rgba(3,6,9,.25)), linear-gradient(0deg, rgba(3,6,9,.82), transparent 52%); }
  .public-hero h1 { font-size: 48px; }
  .public-home-hero { height: 360px; min-height: 360px; }
  .public-home-hero .public-hero-copy { width: min(520px, calc(100% - 48px)); }
  .public-hero-collage { right: -24px; width: 64%; opacity: .8; }
  .public-home-stage .public-creators-inner { padding-top: 8px; }
  .public-section-head-compact { align-items: center; flex-direction: row; }
  .public-section-head-compact h2 { font-size: 24px; }
  .public-home-live { padding: 46px 24px 52px; }
  .public-home-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-route-grid { grid-template-columns: 1fr; padding: 0 24px; }
  .public-route-grid > a { min-height: 0; padding: 24px 8px; border-right: 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .public-route-grid > a:last-child { border-right: 0; border-bottom: 0; }
  .public-catalog-section, .public-creators-inner { padding: 56px 24px 64px; }
  .public-section-head { align-items: start; flex-direction: column; }
  .public-section-head h2 { font-size: 27px; }
  .public-room-card-grid { grid-template-columns: 1fr; }
  .public-room-card:last-child { grid-column: auto; }
  .public-room-media { height: 220px; }
  .public-creator-row { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 18px 4px; }
  .public-creator-facts, .public-creator-actions { grid-column: 2; justify-self: stretch; }
  .public-creator-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-access-band { grid-template-columns: 1fr; gap: 26px; padding: 56px 24px; }
  .public-access-band > .primary-btn { grid-column: auto; justify-self: start; }
  .public-creator-apply { align-items: start; flex-direction: column; padding: 42px 24px; }
  .public-directory-hero { grid-template-columns: 1fr; align-items: start; gap: 28px; min-height: 0; padding: 62px 24px 48px; }
  .public-directory-hero h1 { font-size: 38px; }
  .public-directory-hero aside { min-width: 0; }
  .public-directory-content, .public-fanclub-section, .public-profile-content { padding: 54px 24px 64px; }
  .public-profile-hero, .public-room-preview-hero { min-height: 600px; }
  .public-profile-copy, .public-room-preview-copy { width: calc(100% - 48px); margin: 0 24px; }
  .public-profile-copy h1, .public-room-preview-copy h1 { font-size: 38px; }
  .public-tier-grid { grid-template-columns: 1fr; }
  .public-tier-card { min-height: 0; }
  .public-tier-card p { min-height: 0; }
  .public-room-preview-info { grid-template-columns: 1fr; gap: 34px; padding: 54px 24px 64px; }
  .public-value-strip { grid-template-columns: 1fr; padding: 18px 24px; }
  .public-value-strip > span, .public-value-strip > span:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .public-value-strip > span:first-child { border-top: 0; }
  .public-discovery-band { grid-template-columns: 1fr; gap: 38px; padding: 64px 24px; }
  .public-auth-layout { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .public-auth-intro h1 { font-size: 34px; }
  .public-footer { grid-template-columns: 1fr; justify-items: start; }
  .public-footer p { text-align: left; }
  .rail { transform: translateX(-100%); transition: transform .18s ease; }
  body.nav-open .rail { transform: translateX(0); box-shadow: 18px 0 50px rgba(0,0,0,.55); }
  .main { margin-left: 0; }
  .menu-toggle.icon-btn { display: grid; }
  .title-cluster p { display: none; }
  .metric-strip, .owner-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-grid { grid-template-columns: 1fr; }
  .owner-grid > *, .trac-status { grid-column: 1; }
  .profile-identity { grid-template-columns: 86px 1fr; padding-left: 18px; }
  .profile-avatar { width: 82px; height: 82px; margin-top: -38px; }
  .profile-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .profile-tabs { padding-left: 18px; overflow-x: auto; }
  .message-workspace { grid-template-columns: 250px 1fr; }
  .observer-bar { flex-wrap: wrap; padding: 10px; }
  .observer-bar .push { margin-left: 0; }
  .signup-layout { grid-template-columns: 1fr; gap: 10px; margin: 20px auto; }
  .signup-intro { padding: 10px 4px; }
  .checkout-layout { grid-template-columns: 1fr; margin: 20px auto; }
  .checkout-summary { position: static; }
  .marketplace-head { grid-template-columns: 1fr; }
  .marketplace-head aside { max-width: 360px; }
  .revenue-owner-grid { grid-template-columns: 1fr; }
  .revenue-wide { grid-column: 1; }
  .studio-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-preview-bar { position: relative; top: auto; grid-template-columns: 1fr auto; }
  .owner-preview-bar form { grid-column: 1 / -1; grid-row: 2; }
  .preview-account-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 600px) {
  .discovery-access-heading { margin: 18px 4px 16px; }
  .discovery-access-heading h2 { font-size: 23px; }
  .discovery-access-grid { gap: 9px; margin-bottom: 24px; }
  .discovery-access-option { gap: 14px; padding: 17px; }
  .discovery-access-price { align-items: flex-start; flex-direction: column; gap: 4px; }
  .invite-notice { grid-template-columns: 1fr; }
  .public-header { padding: 0 12px; }
  .public-brand.brand { gap: 7px; font-size: 15px; }
  .public-brand .brand-mark { width: 20px; height: 24px; }
  .public-auth-actions { gap: 4px; }
  .public-auth-actions .primary-btn { min-height: 32px; padding: 0 9px; font-size: 10px; }
  .public-signin { padding: 8px 5px; font-size: 10px; }
  .public-hero { min-height: 550px; }
  .public-hero > img { object-position: 62% center; }
  .public-hero-copy { width: calc(100% - 32px); margin: 0 16px; align-self: flex-end; padding-bottom: 112px; }
  .public-hero h1 { font-size: 42px; }
  .public-hero-copy > p { font-size: 14px; }
  .public-hero-actions { align-items: stretch; flex-direction: column; }
  .public-home-stage { background-position: 59% top; }
  .public-home-hero { height: 400px; min-height: 400px; align-items: flex-end; }
  .public-home-hero .public-hero-shade { background: linear-gradient(0deg, rgba(3,6,9,.99) 0%, rgba(3,6,9,.88) 45%, rgba(3,6,9,.2) 78%, rgba(3,6,9,.08) 100%); }
  .public-home-hero .public-hero-copy { width: calc(100% - 32px); margin: 0 16px; padding-bottom: 24px; }
  .public-home-hero .public-hero-copy > p { margin-bottom: 16px; }
  .public-home-hero .public-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .public-home-hero .public-hero-actions > :last-child { grid-column: 1 / -1; }
  .public-hero-collage { top: 0; right: -12%; bottom: auto; width: 104%; height: 72%; opacity: .76; mask-image: linear-gradient(0deg, transparent 0%, #000 28%, #000 100%); }
  .public-hero-collage img { height: 100%; transform: none; }
  .public-hero-collage img:nth-child(2) { height: 108%; transform: scale(1.02); }
  .public-hero-collage img:nth-child(3) { height: 100%; transform: none; }
  .public-live-link { right: 16px; bottom: 16px; left: 16px; }
  .public-route-grid { padding: 0 16px; }
  .public-route-grid > a { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .public-route-grid h2 { font-size: 20px; }
  .public-catalog-section, .public-creators-inner { padding: 46px 16px 52px; }
  .public-section-head h2 { font-size: 24px; }
  .public-room-media { height: 180px; }
  .public-card-actions { grid-template-columns: 1fr; }
  .public-creator-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .public-home-stage .public-creators-inner { padding: 8px 16px 48px; }
  .public-section-head-compact { align-items: center; flex-direction: row; }
  .public-section-head-compact h2 { font-size: 21px; }
  .public-section-head-compact .ghost-btn { min-height: 30px; padding: 0 9px; }
  .public-home-live { padding: 40px 16px 46px; }
  .public-home-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .public-home-room-copy { padding: 9px; }
  .public-home-room-viewers { right: 6px; bottom: 6px; }
  .public-creator-row { grid-template-columns: 48px minmax(0, 1fr); }
  .public-creator-avatar { width: 46px; height: 46px; }
  .public-creator-facts { grid-template-columns: 1fr; gap: 8px; }
  .public-creator-actions { grid-template-columns: 1fr; }
  .public-access-band { padding: 46px 16px; }
  .public-access-band h2 { font-size: 21px; }
  .public-access-band ol { grid-template-columns: 1fr; }
  .public-access-band li { min-height: 0; padding: 13px 8px; border-top: 1px solid var(--line); border-left: 0; }
  .public-creator-apply { padding: 38px 16px; }
  .public-creator-apply h2 { font-size: 21px; }
  .public-directory-hero { padding: 48px 16px 40px; }
  .public-directory-hero h1 { font-size: 33px; }
  .public-directory-content, .public-fanclub-section, .public-profile-content { padding: 46px 16px 54px; }
  .public-fanclub-grid > article { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
  .public-fanclub-grid .public-creator-avatar { grid-row: 1; width: 44px; height: 44px; }
  .public-fanclub-grid > article > strong { grid-column: 2; min-width: 0; text-align: left; }
  .public-fanclub-grid .primary-btn { grid-column: 2; }
  .public-profile-hero, .public-room-preview-hero { min-height: 660px; align-items: flex-end; }
  .public-profile-copy, .public-room-preview-copy { width: calc(100% - 32px); margin: 0 16px; padding-bottom: 40px; }
  .public-profile-copy h1, .public-room-preview-copy h1 { font-size: 33px; }
  .public-profile-facts, .public-room-preview-facts { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .public-profile-facts span, .public-room-preview-facts span { padding: 0; border-right: 0; }
  .public-profile-offers { grid-template-columns: 1fr; }
  .public-profile-offers > span, .public-profile-offers > span:first-child { border-top: 1px solid var(--line); border-left: 0; }
  .public-profile-offers > span:first-child { border-top: 0; }
  .public-room-preview-info { padding: 46px 16px 54px; }
  .public-discovery-band h2 { font-size: 29px; }
  .public-auth-layout { width: calc(100% - 24px); }
  .public-auth-intro h1 { font-size: 30px; }
  .public-footer { padding: 24px 16px; }
  .page-content { padding: 8px; }
  .topbar { padding: 8px; }
  .title-cluster h1 { font-size: 16px; }
  .metric-strip, .owner-metrics, .dashboard-grid, .member-home-grid, .studio-grid, .grid.two, .admin-grid { grid-template-columns: 1fr; }
  .home-live, .fan-feed { grid-column: 1; }
  .home-welcome { align-items: stretch; flex-direction: column; }
  .home-welcome > div:last-child > * { flex: 1; }
  .span-2, .span-3 { grid-column: 1; }
  .metric { min-height: 84px; }
  .metric strong { font-size: 20px; }
  .featured-stage { height: 260px; }
  .featured-stage img { width: 170%; }
  .goal-row { grid-template-columns: 1fr; }
  .room-grid, .room-directory, .creator-grid, .purchase-options, .gift-dock, .vault-grid, .link-grid, .compliance-grid, .multiview-grid { grid-template-columns: 1fr; }
  .live-directory-actions, .multiview-heading, .multiview-summary { align-items: stretch; flex-direction: column; }
  .multiview-summary > span { min-width: 0; }
  .multiview-summary > .primary-btn { width: 100%; }
  .multiview-room-meta { grid-template-columns: minmax(0, 1fr) auto; }
  .multiview-room-meta > a { grid-column: 1 / -1; }
  .directory-panel .section-head, .section-head { display: grid; }
  .search-box { min-width: 0; width: 100%; }
  .filter-tabs { overflow-x: auto; }
  .profile-cover { height: 180px; }
  .profile-cover img { width: 150%; height: 180%; top: -40%; left: -30%; }
  .profile-identity { grid-template-columns: 70px 1fr; }
  .profile-avatar { width: 66px; height: 66px; }
  .profile-copy h2 { font-size: 18px; }
  .profile-actions > * { flex: 1; }
  .live-stage { min-height: 360px; }
  .live-media-surface > img { width: 150%; }
  .stage-controls { right: 7px; bottom: 7px; left: 7px; }
  .stage-controls > .icon-btn { flex-basis: 32px; width: 32px; height: 32px; }
  .discovery-clock { padding: 5px 6px; font-size: 8px; }
  .notice { display: grid; }
  .message-workspace { grid-template-columns: 1fr; min-height: auto; }
  .conversation-list { max-height: 310px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .active-conversation { min-height: 560px; }
  .message-thread { padding: 16px; }
  .message-thread p { max-width: 88%; }
  .studio-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .studio-actions > div { overflow-x: auto; }
  .live-monitor .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-grid, .master-grid { grid-template-columns: 1fr; }
  .restriction-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .restriction-list article form { grid-column: 1 / -1; }
  .restriction-list article button { width: 100%; }
  .emergency-actions, .role-choice { grid-template-columns: 1fr; }
  .user-control-row { grid-template-columns: 1fr; }
  .user-ban-status { justify-self: start; }
  .user-owner-actions { grid-column: 1; grid-template-columns: 1fr; }
  .user-owner-actions form { grid-template-columns: 1fr; }
  .owner-preview-bar { grid-template-columns: 1fr; padding: 10px; }
  .owner-preview-bar form { grid-column: 1; grid-template-columns: 1fr; }
  .owner-preview-bar > .ghost-btn { width: 100%; }
  .view-as-intro { grid-template-columns: 1fr; padding: 14px; }
  .preview-account-facts { grid-template-columns: 1fr; }
  .preview-field-grid, .preview-action-grid { grid-template-columns: 1fr; }
  .preview-membership-row, .preview-room-grid article, .preview-catalog-grid article, .preview-tier-grid article { grid-template-columns: 1fr; }
  .preview-membership-row .preview-check, .preview-membership-row .preview-action-row { grid-column: 1; }
  .preview-tier-grid article > span small { text-align: left; }
  .monetization-banner { grid-template-columns: 1fr; }
  .monetization-tags { justify-content: flex-start; }
  .revenue-channel-grid, .storefront-grid, .wallet-spend-grid { grid-template-columns: 1fr; }
  .storefront-card > div > span { grid-template-columns: minmax(0, 1fr) auto 58px; }
  .gift-dock.monetized-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monetization-product-row { grid-template-columns: 1fr; }
  .product-price { grid-template-columns: 42px 1fr auto; }
  .checkout-product { grid-template-columns: 38px minmax(0, 1fr); }
  .checkout-product > b { grid-column: 2; text-align: left; }
  .renewal-choice { grid-template-columns: 1fr; }
}