:root {
  color-scheme: dark;
  --bg: #111113;
  --surface: #1a1a1e;
  --raised: #222227;
  --line: #343339;
  --ink: #f6f3fa;
  --muted: #aaa5b0;
  --accent: #c3a6fc;
  --rail: 228px;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button,input,textarea,select { font: inherit; }
button,.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #21182e; border: 1px solid transparent; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 650; cursor: pointer; }
button:hover,.button:hover { filter: brightness(1.12); }
button:disabled { opacity: .45; cursor: default; }
a { color: inherit; text-decoration: none; }
.secondary { color: var(--ink); background: var(--raised); border-color: var(--line); }
.danger,.error { color: #ffc7c6; background: #42292c; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
header { min-height: 72px; padding: 12px max(5vw,calc((100vw - 1180px)/2)); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 30px; }
.brand,.actions,#account,.identity { display: flex; align-items: center; gap: 10px; }
.brand { font-weight: 750; font-size: 18px; letter-spacing: -.7px; }
.brand small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
#account { margin-left: auto; }
.discord { width: 19px; height: 19px; fill: currentColor; }
nav button { background: transparent; color: var(--muted); }
body:not(.panel-mode) nav { display: none; }
main,footer { width: min(90%,1180px); margin: auto; }
main { min-height: calc(100vh - 150px); padding: 32px 0 64px; }
footer { padding: 18px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(31px,3.3vw,48px); line-height: 1.08; letter-spacing: -.055em; }
h2 { font-size: 21px; letter-spacing: -.035em; line-height: 1.2; }
p,.muted,small,.hint { color: var(--muted); }
p { margin: 10px 0; }
small,.hint { font-size: 12px; }
.kicker,.nav-label { font: 600 11px/1.3 ui-monospace,monospace; letter-spacing: .12em; text-transform: uppercase; }
.directory-hero,.balance { position: relative; overflow: hidden; isolation: isolate; }
.directory-hero { padding: clamp(24px,4vw,54px); background: #201c28; border-radius: 15px; border: 1px solid #42374f; }
.directory-hero h1 { font-size: clamp(44px,5.4vw,82px); line-height: .95; margin: 18px 0 23px; }
.directory-hero h1 em { font-style: normal; color: var(--accent); }
.directory-hero .kicker { color: #beb0ce; }
.gate { position: absolute; right: 3%; top: 50%; transform: translateY(-50%); width: 45%; height: 106%; object-fit: contain; z-index: -1; }
.toolbar,.heading,.overview-title,.row,.account-strip,.account-row,.profile-person { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.toolbar { margin: 32px 0 16px; }.toolbar input { width: min(40%,240px); }.toolbar h2 small { font: 500 13px ui-monospace,monospace; margin-left: 8px; }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.member { display: flex; align-items: center; gap: 13px; min-height: 88px; border: 1px solid var(--line); border-radius: 11px; padding: 15px; background: var(--surface); }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 12px; color: #e3d3ff; background: #42344f; font-weight: bold; font-size: 22px; }
.member-name { min-width: 0; flex: 1; }.member-name h3,.member-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.member h3 { font-size: 16px; }.member-link { font-size: 12px; color: var(--accent); }.empty { grid-column: 1/-1; padding: 30px; }
.panel-mode { padding-left: var(--rail); }
.panel-mode header { position: fixed; inset: 0 auto 0 0; width: var(--rail); background: #161619; padding: 24px 14px 14px; border: 0; border-right: 1px solid var(--line); flex-flow: column; align-items: stretch; gap: 0; z-index: 2; }
.panel-mode .brand { padding: 0 10px; }.panel-mode nav { display: flex; flex-flow: column; gap: 4px; margin: 40px 0 auto; overflow: auto; }
.nav-label { color: var(--muted); padding: 0 10px 10px; }.panel-mode nav button,.back-site { justify-content: flex-start; text-align: left; padding: 12px 10px; }
nav .active { background: #342b40; color: #e3d0ff; }.nav-icon { width: 17px; text-align: center; }.back-site,.panel-mode nav .test-switch { color: var(--muted); font-size: 12px; }.panel-mode nav .test-switch { margin-top: 16px; border-top: 1px solid var(--line); border-radius: 0; }
.panel-mode #account { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); justify-content: space-between; }.account-info { min-width: 0; }.account-info strong,.account-info small { display: block; overflow-wrap: anywhere; }
.panel-mode main { width: min(100%,1350px); padding: clamp(24px,4vw,55px); min-height: 100vh; }.panel-mode footer { display: none; }
.heading,.panel-title { margin-bottom: 26px; }.identity { color: var(--ink); background: var(--surface); padding: 5px 12px 5px 5px; border-color: var(--line); }.identity .avatar { width: 28px; height: 28px; font-size: 14px; border-radius: 5px; }
.dashboard,.profile-layout,.grid,.payout-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(235px,1fr); gap: 16px; align-items: start; }
.balance { background: #ceb6f7; color: #201828; padding: 28px; border-radius: 14px; min-height: 212px; }.balance strong,.summary strong,.metric strong { display: block; font-variant-numeric: tabular-nums; letter-spacing: -.055em; line-height: 1.15; }
.balance strong { font-size: clamp(34px,4vw,59px); margin: 12px 0 26px; }.balance button { background: #29222f; color: white; }.balance .gate { width: 32%; right: -2%; opacity: .45; }
.summary { align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }.summary>div { align-content: center; padding: 16px 22px; }.summary>div+div { border-top: 1px solid var(--line); }.summary span,.metric span,.account-strip span { color: var(--muted); font-size: 13px; }.summary strong,.metric strong { font-size: clamp(22px,2.4vw,34px); margin-top: 5px; }
.panel,.info-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(17px,2vw,26px); min-width: 0; }
.section,.metrics+.panel,.form-actions,.account-strip { margin-top: 18px; }.metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.metric:first-child { background: #28232e; border-color: #54435f; }
.row,.account-row { padding: 12px 0; border-bottom: 1px solid var(--line); }.row:first-child { padding-top: 0; }.account-strip { padding: 16px 0; border-block: 1px solid var(--line); }.account-strip span { margin-right: auto; }
.stack,.steps { display: grid; gap: 14px; }.steps { margin-top: 20px; }.steps>div { display: flex; gap: 12px; align-items: baseline; }.steps b { color: var(--accent); font: 13px ui-monospace,monospace; }.steps small,.account-row small { display: block; }.steps strong { font-size: 14px; }
.profile-person { justify-content: flex-start; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.profile-person .badge { margin-left: auto; }.badge { display: inline-block; font-size: 11px; padding: 3px 8px; border: 1px solid #574961; border-radius: 14px; color: #d5bce9; }.service-icon { color: var(--accent); }.account-row>div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
label { display: grid; gap: 7px; margin-top: 16px; font-size: 13px; color: #d2cdd6; }input,select,textarea { width: 100%; max-width: 100%; min-width: 0; color: var(--ink); background: #131315; border: 1px solid #413d46; border-radius: 7px; padding: 11px 12px; }textarea { min-height: 80px; resize: vertical; }.actions { flex-wrap: wrap; }
.table-wrap { overflow-x: auto; margin-top: 14px; }table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; font-variant-numeric: tabular-nums; }td,th { padding: 11px 10px; border-bottom: 1px solid var(--line); }th { color: var(--muted); font-weight: 500; }td button { padding: 6px 8px; font-size: 11px; margin: 2px; }
.info-sheet { max-width: 700px; }.info-sheet h2 { margin: 10px 0 24px; font-size: 32px; }.info-sheet dl { display: grid; grid-template-columns: 1fr 2fr; }.info-sheet dt,.info-sheet dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); }.info-sheet dt { color: var(--muted); }
.notice,.error { padding: 12px 16px; margin-bottom: 16px; border-radius: 8px; }.notice { background: #2c2633; color: #ded0ec; }.panel>.muted { padding: 18px 0; }#notice { position: fixed; right: 18px; bottom: 20px; z-index: 5; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 12px 18px; display: none; }dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 24px; width: min(90vw,480px); }dialog::backdrop { background: #0009; }
@media(max-width:1000px) { :root { --rail: 200px; }.profile-layout,.grid,.payout-grid { grid-template-columns: 1fr; }.member { gap: 8px; padding: 12px; }.member .avatar { width: 40px; height: 40px; } }
@media(max-width:760px) {
  .panel-mode { padding: 0 0 66px; }.panel-mode header { position: static; width: 100%; flex-flow: row; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }.panel-mode #account { margin: 0; padding: 0; border: 0; }.panel-mode .brand { padding: 0; }.account-info { font-size: 12px; }
  .panel-mode nav { position: fixed; inset: auto 0 0; margin: 0; flex-flow: row; align-items: stretch; background: #19191d; border-top: 1px solid var(--line); padding: 5px 6px max(5px,env(safe-area-inset-bottom)); overflow-x: auto; }.nav-label { display: none; }.panel-mode nav button,.panel-mode nav .back-site { flex: 1 0 auto; flex-direction: column; gap: 2px; padding: 6px 9px; font-size: 11px; text-align: center; white-space: nowrap; }.panel-mode nav .test-switch { margin: 0; border: 0; max-width: 110px; white-space: normal; }.panel-mode #notice { bottom: 74px; }
  .dashboard { grid-template-columns: 1fr; }.summary { grid-template: auto / 1fr 1fr; }.summary>div+div { border-top: 0; border-left: 1px solid var(--line); }.cards { grid-template-columns: repeat(2,minmax(0,1fr)); }.heading,.overview-title { flex-wrap: wrap; }.panel-mode main { padding: 25px 16px; }
}
@media(max-width:520px) {
  .cards { grid-template-columns: 1fr; }.metrics { grid-template-columns: 1fr; gap: 6px; }.metric { display: flex; align-items: center; justify-content: space-between; }.metric strong { margin: 0; }.toolbar { align-items: stretch; flex-direction: column; }.toolbar input { width: 100%; }.gate { right: -8%; width: 52%; opacity: .7; }.directory-hero { padding: 22px; }.account-strip { flex-wrap: wrap; }.profile-person { flex-wrap: wrap; }.directory-hero h1 { font-size: 44px; }
}
/* Keep the desktop rail off the public masthead, including its mobile layout. */
body:not(.panel-mode) header { padding-inline: 5%; gap: 12px; }
body:not(.panel-mode) #account { min-width: 0; }
@media(max-width:520px) {
  .directory-hero { min-width: 0; }
  .cards { grid-template-columns: minmax(0,1fr); }
  .member { min-width: 0; }
  #notice:empty { display: none; }
}
@media(max-width:520px) {
  html { width: 100vw; overflow-x: clip; }
  .directory-hero .gate { right: 0; width: 45%; }
}

:root {
  --bg: #0d0d10; --surface: #141417; --line: rgba(255,255,255,.085);
  --accent: #c4a5f5; --violet: #a78bfa; --dark-button: #1a1523;
  --card-radius: 26px; --control-radius: 14px;
  --hero-shadow: 0 12px 54px -28px #b69ae0aa;
}
body { background: radial-gradient(ellipse at 88% 8%,#1d18254d,transparent 48%),var(--bg); }
h1,h2,h3 { letter-spacing: -.03em; } h1 { font-weight: 800; }
.panel,.info-sheet,.member,.directory-hero,.balance,.summary,dialog { border-radius: var(--card-radius); }
button,.button,input,textarea,select { border-radius: var(--control-radius); }
.panel,.member { transition: border-color .18s ease,transform .18s ease; }
@media(hover:hover){.member:hover,.metric:hover { border-color:#8c72ac; transform:translateY(-2px); }}
.balance { background:linear-gradient(112deg,#ddccf6,var(--accent));box-shadow:var(--hero-shadow);padding:clamp(24px,3vw,40px);min-height:240px; }
.balance .gate { opacity:.93;width:38%;right:-3%; }
.balance button { background:var(--dark-button); }
.balance strong { font-size:clamp(36px,4vw,66px);position:relative;width:fit-content; }
.balance .gate,.directory-hero .gate { animation:float-gate 6s ease-in-out infinite; }
@keyframes float-gate { 50%{transform:translateY(calc(-50% - 5px))} }
.periods { display:flex;gap:4px; }.periods button { padding:6px 10px;background:transparent;color:var(--muted); }
.periods button[aria-pressed=true] { color:var(--accent);background:#302738; }
.earn-chart svg { display:block;width:100%;height:150px;overflow:visible; }
.chart-labels { display:flex;justify-content:space-between;color:var(--muted);font-size:12px; }
.panel progress { accent-color:var(--violet);width:100%;height:10px; }
.empty-ledger { text-align:center;padding:24px 8px;color:var(--muted); }
.empty-ledger svg { display:block;margin:0 auto 8px;color:var(--accent); }
.skeleton { height:190px;border-radius:var(--card-radius);background:linear-gradient(105deg,#18171b 25%,#27232d 45%,#18171b 65%);background-size:250% 100%;animation:load 1.4s linear infinite; }
@keyframes load { to{background-position:-170% 0} }
#view>.panel,#view>.dashboard,#view>.profile-layout { animation:appear .23s ease-out both; }
@keyframes appear { from{opacity:.4;transform:translateY(5px)} }
.info-sheet details { padding:15px 0;border-bottom:1px solid var(--line); }.info-sheet summary { cursor:pointer;font-weight:650; }
@media(min-width:761px){.rail-control { align-self:flex-end;padding:4px 9px;background:transparent;color:var(--accent); }
body.slim { --rail:76px; }.slim .brand span,.slim .account-info,.slim .nav-label {display:none}
.slim nav button {font-size:0;justify-content:center}.slim nav .nav-icon{font-size:17px}
.slim nav .test-switch,.slim nav .back-site,.slim #logout {font-size:10px;padding:6px;overflow-wrap:anywhere}
.slim nav .back-site span {display:none}.slim #account {flex-wrap:wrap}.slim .brand {padding:0;justify-content:center}}
@media(max-width:760px){.rail-control {display:none}.balance .gate{width:35%}dialog[open]{margin:auto 0 0;width:100%;max-width:none;max-height:90dvh;border-radius:24px 24px 0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.ledger-tools { display:flex;flex-wrap:wrap;gap:8px;margin:16px 0; }.ledger-tools select{width:auto}
dialog form [type=button]{margin-top:8px}