/* Moonclutch V40 – app shell: header + sidebar + main + global chat as ONE CSS-grid layout.
 * States are driven by two attributes on #mbs:  data-side="open|rail"  and  data-chat="open|closed".
 * Desktop (>1100px): four states A–D.  Tablet (761–1100): icon rail + chat overlay.  Mobile (<=760): both overlays.
 * Loaded last so it wins over the legacy stacked layers. No magic margins: widths come from the variables below. */
@font-face{font-family:'MoonInter';font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-Medium.woff) format('woff')}
@font-face{font-family:'MoonInter';font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-SemiBold.woff) format('woff')}
@font-face{font-family:'MoonInter';font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-Bold.woff) format('woff')}
@font-face{font-family:'MoonInter';font-weight:800;font-style:normal;font-display:swap;src:url(/static/fonts/Inter-ExtraBold.woff) format('woff')}

:root{--mbs-bg:#0D0F13;--mbs-side:#12151B;--mbs-panel:#191D24;--mbs-hover:#242932;--mbs-line:#2A2F38;--mbs-tx:#F2F3F5;--mbs-mu:#949BA6;--mbs-ac:#8591C8;--mbs-gold:#E8B04B;--mbs-gold-d:#C98F2C;--mbs-green:#3FB950;--mbs-font:'MoonInter',Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
html{scroll-behavior:auto}
body{margin:0!important;padding:0!important;background:var(--mbs-bg)!important;font-family:var(--mbs-font)}
.mbs{--hdr:60px;--rail:72px;--wide:236px;--chatw:324px;--sw:var(--wide);--cw:var(--chatw);--ctl:38px;--dur:.22s;
  display:grid;grid-template-columns:var(--sw) minmax(0,1fr) var(--cw);grid-template-rows:var(--hdr) minmax(0,1fr);min-height:100vh;min-height:100dvh;
  background:var(--mbs-bg);color:var(--mbs-tx);font-family:var(--mbs-font);overflow-x:clip;transition:grid-template-columns var(--dur) cubic-bezier(.4,0,.2,1)}
.mbs[data-side=rail]{--sw:var(--rail)}
.mbs[data-chat=closed]{--cw:0px}
.mbs svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- header ---------- */
.mbs-header{grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:60;height:var(--hdr);display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--mbs-bg);border-bottom:1px solid var(--mbs-line);box-sizing:border-box}
.mbs-hl{display:flex;align-items:center;gap:10px;flex:none}
.mbs-hm{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center}
.mbs-hr{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.mbs-hm .mbs-account{display:flex;align-items:center;gap:8px;min-width:0}
.mbs-ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--ctl);height:var(--ctl);padding:0;border:1px solid var(--mbs-line);border-radius:8px;background:var(--mbs-panel);color:#c9ced6;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.mbs-ibtn:hover{background:var(--mbs-hover);color:var(--mbs-tx)}
.mbs-burger{background:transparent;border-color:transparent}
.mbs-ibtn[aria-expanded=true].mbs-chat-btn{background:var(--mbs-gold);border-color:var(--mbs-gold);color:#15120b}
.mbs-dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--mbs-gold);border:2px solid var(--mbs-panel)}
.mbs-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--mbs-tx);font:800 20px/1 var(--mbs-font);letter-spacing:-.4px;height:var(--ctl)}
.mbs-logo{width:26px;height:26px;flex:none}
.mbs-word b{color:var(--mbs-gold);font-weight:800}
.mbs-pill{display:inline-flex;align-items:center;gap:8px;height:var(--ctl);padding:0 14px;border-radius:8px;border:1px solid rgba(232,176,75,.45);background:rgba(232,176,75,.08);color:var(--mbs-gold);font:700 13px/1 var(--mbs-font);text-decoration:none;white-space:nowrap;transition:background .15s}
.mbs-pill:hover{background:rgba(232,176,75,.16)}
.mbs-header .wallet-pill{display:inline-flex!important;align-items:center;gap:9px;height:var(--ctl)!important;min-height:0!important;padding:0 14px!important;border-radius:8px!important;border:1px solid var(--mbs-line)!important;background:var(--mbs-panel)!important;box-shadow:none!important;color:var(--mbs-tx)!important;cursor:pointer;margin:0!important}
.mbs-header .wallet-pill .moon-mini{color:var(--mbs-gold)!important;background:none!important;width:auto!important;height:auto!important;min-width:0!important;font-size:17px!important;line-height:1!important}
.mbs-header .wallet-pill>span:last-child{display:flex;align-items:baseline;gap:7px}
.mbs-header .wallet-pill strong{font:700 14px/1 var(--mbs-font)!important;color:var(--mbs-tx)!important;font-variant-numeric:tabular-nums}
.mbs-header .wallet-pill small{font:600 10px/1 var(--mbs-font)!important;color:var(--mbs-mu)!important;letter-spacing:.06em}
.mbs-header .auth-btn{height:var(--ctl)!important;min-height:0!important;padding:0 16px!important;border-radius:8px!important;border:1px solid var(--mbs-line)!important;background:var(--mbs-panel)!important;color:var(--mbs-tx)!important;font:700 12px/1 var(--mbs-font)!important;letter-spacing:.04em;cursor:pointer;box-shadow:none!important}
.mbs-header .auth-btn.primary{background:var(--mbs-gold)!important;border-color:var(--mbs-gold)!important;color:#15120b!important}
.mbs-user{display:flex;align-items:center;gap:8px}
.mbs-user:empty{display:none}
.mbs-user .lvl-badge{height:var(--ctl)!important;box-sizing:border-box;padding:0 11px!important;border-radius:8px!important;font:800 12px/1 var(--mbs-font)!important;letter-spacing:.03em;cursor:pointer;display:inline-flex!important;align-items:center}
.mbs-user .profile-avatar{width:var(--ctl)!important;height:var(--ctl)!important;min-width:0!important;padding:0!important;border-radius:50%!important;font:800 14px/1 var(--mbs-font)!important;color:#fff!important;border:2px solid var(--mbs-gold)!important;cursor:pointer;box-shadow:none!important}
.mbs-user .mbs-avatar[data-av=purple]{background:linear-gradient(135deg,#7b5ad6,#4a3590)!important}
.mbs-user .mbs-avatar[data-av=blue]{background:linear-gradient(135deg,#4c8fe0,#28508f)!important}
.mbs-user .mbs-avatar[data-av=pink]{background:linear-gradient(135deg,#e0679f,#8f2f5f)!important}
.mbs-user .mbs-avatar[data-av=teal]{background:linear-gradient(135deg,#2fb8a6,#1a6b61)!important}
/* level tiers (shared by header badge and chat) */
.lvl-badge[data-tier="1"]{color:#aeb7c6!important;background:#232833!important;border:1px solid #343b49!important}
.lvl-badge[data-tier="2"]{color:#7fd98f!important;background:#16291d!important;border:1px solid #27573a!important}
.lvl-badge[data-tier="3"]{color:#7fb0ff!important;background:#15233a!important;border:1px solid #284b80!important}
.lvl-badge[data-tier="4"]{color:#c59bff!important;background:#251a3b!important;border:1px solid #4b3580!important}
.lvl-badge[data-tier="5"]{color:#f0c46a!important;background:#33260f!important;border:1px solid #7a5a1e!important}

/* ---------- sidebar ---------- */
.mbs-side{grid-column:1;grid-row:2;position:sticky;top:var(--hdr);align-self:start;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));min-width:0;overflow:hidden;background:var(--mbs-side);border-right:1px solid var(--mbs-line);display:flex;flex-direction:column;box-sizing:border-box;z-index:40}
.mbs-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:10px 8px;scrollbar-width:thin;scrollbar-color:#2f3541 transparent}
.mbs-link{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:40px;padding:0 0 0 16px;margin:2px 0;border:0;border-radius:8px;background:transparent;color:#b7bdc8;font:600 13.5px/1 var(--mbs-font);text-decoration:none;cursor:pointer;white-space:nowrap;box-sizing:border-box;text-align:left;transition:background .15s,color .15s}
.mbs-link:hover{background:var(--mbs-hover);color:var(--mbs-tx)}
.mbs-link.active{background:var(--mbs-panel);color:var(--mbs-tx)}
.mbs-link.active svg.i{color:var(--mbs-gold)}
.mbs-link.active::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--mbs-gold)}
.mbs-t{overflow:hidden;text-overflow:ellipsis;opacity:1;transition:opacity .16s ease .06s}
.mbs-cat{border-top:1px solid var(--mbs-line);margin-top:8px;padding-top:6px}
.mbs-home+.mbs-cat{margin-top:8px}
.mbs-cat-h{display:flex;align-items:center;justify-content:space-between;width:100%;height:28px;padding:0 10px 0 16px;border:0;background:transparent;color:var(--mbs-mu);font:700 10.5px/1 var(--mbs-font);letter-spacing:.1em;cursor:pointer;border-radius:6px;box-sizing:border-box}
.mbs-cat-h:hover{color:var(--mbs-tx)}
.mbs-caret{width:14px!important;height:14px!important;transition:transform .2s}
.mbs-cat-h[aria-expanded=false] .mbs-caret{transform:rotate(-90deg)}
.mbs-cat-b{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease}
.mbs-cat-b.collapsed{grid-template-rows:0fr}
.mbs-cat-in{overflow:hidden;min-height:0}
.mbs-foot{flex:none;padding:12px 18px;border-top:1px solid var(--mbs-line);color:#6f7785;font:500 10.5px/1.4 var(--mbs-font);white-space:nowrap;overflow:hidden}
/* collapsed rail */
.mbs[data-side=rail] .mbs-t{opacity:0;pointer-events:none;transition:opacity .08s}
.mbs[data-side=rail] .mbs-cat{padding-top:0}
.mbs[data-side=rail] .mbs-cat-h{height:8px;padding:0}
.mbs[data-side=rail] .mbs-cat-h .mbs-t,.mbs[data-side=rail] .mbs-caret{display:none}
.mbs[data-side=rail] .mbs-cat-b{grid-template-rows:1fr!important}
.mbs[data-side=rail] .mbs-foot{opacity:0;padding-left:0;padding-right:0}
.mbs-tip{position:fixed;z-index:200;pointer-events:none;padding:7px 10px;border-radius:6px;background:#1d222b;border:1px solid var(--mbs-line);color:var(--mbs-tx);font:600 12px/1 var(--mbs-font);white-space:nowrap;box-shadow:0 6px 18px #0008;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.mbs-tip.on{opacity:1;transform:none}

/* ---------- main ---------- */
#app.mbs-main{grid-column:2;grid-row:2;justify-self:stretch;margin:0!important;min-width:0;max-width:none!important;width:auto!important;padding:24px 28px 48px!important;box-sizing:border-box;min-height:calc(100vh - var(--hdr));min-height:calc(100dvh - var(--hdr));background:var(--mbs-bg)!important;overflow:clip}
#app.mbs-main:focus{outline:none}

/* ---------- chat column ---------- */
.mbs-chat{grid-column:3;grid-row:2;position:sticky;top:var(--hdr);align-self:start;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));width:var(--cw);min-width:0;overflow:hidden;background:var(--mbs-side);border-left:1px solid var(--mbs-line);z-index:40;box-sizing:border-box;transition:width var(--dur) cubic-bezier(.4,0,.2,1),border-color var(--dur)}
.mbs[data-chat=closed] .mbs-chat{border-left-width:0;visibility:hidden;transition:width var(--dur) cubic-bezier(.4,0,.2,1),border-color var(--dur),visibility 0s linear var(--dur)}
.mbs-scrim{position:fixed;inset:var(--hdr) 0 0 0;background:rgba(5,6,9,.62);z-index:45;opacity:0;transition:opacity .2s}
.mbs-scrim.on{opacity:1}

/* ---------- tablet: icon rail + chat overlay ---------- */
@media (max-width:1100px) and (min-width:761px){
  .mbs{--sw:var(--rail);--cw:0px}
  .mbs-chat{position:fixed;top:var(--hdr);right:0;bottom:0;height:auto;align-self:stretch;width:min(360px,92vw);transform:translateX(100%);visibility:hidden;border-left:1px solid var(--mbs-line);transition:transform var(--dur) cubic-bezier(.4,0,.2,1),visibility 0s linear var(--dur);box-shadow:-18px 0 40px #0009;z-index:55}
  .mbs[data-chat=open] .mbs-chat{transform:none;visibility:visible;transition:transform var(--dur) cubic-bezier(.4,0,.2,1),visibility 0s}
  .mbs-side.open{position:fixed;left:0;top:var(--hdr);width:var(--wide);height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));z-index:55;box-shadow:18px 0 40px #0009}
  #app.mbs-main{padding:20px 20px 40px!important}
}
/* ---------- mobile: both are overlays ---------- */
@media (max-width:760px){
  .mbs{--sw:0px;--cw:0px;--hdr:56px;--ctl:36px}
  .mbs-header{padding:0 10px;gap:8px}
  .mbs-hm{justify-content:flex-start;flex:1}
  .mbs-rewards span,.mbs-word{display:none}
  .mbs-hr{gap:6px}
  .mbs-header .wallet-pill{padding:0 10px!important}
  .mbs-header .wallet-pill small{display:none}
  .mbs-side{position:fixed;left:0;top:var(--hdr);bottom:0;height:auto;align-self:stretch;width:min(280px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform var(--dur) cubic-bezier(.4,0,.2,1),visibility 0s linear var(--dur);z-index:55;box-shadow:18px 0 40px #0009}
  .mbs-side.open{transform:none;visibility:visible;transition:transform var(--dur) cubic-bezier(.4,0,.2,1),visibility 0s}
  .mbs-chat{position:fixed;top:var(--hdr);right:0;bottom:0;height:auto;align-self:stretch;width:min(380px,100vw);transform:translateX(102%);visibility:hidden;transition:transform var(--dur) cubic-bezier(.4,0,.2,1),visibility 0s linear var(--dur);z-index:55;box-shadow:-18px 0 40px #0009}
  .mbs[data-chat=open] .mbs-chat{transform:none;visibility:visible;transition:transform var(--dur) cubic-bezier(.4,0,.2,1),visibility 0s}
  #app.mbs-main{padding:14px 12px 36px!important}
  .mbs-user .lvl-badge{padding:0 8px!important}
}
@media (max-width:420px){.mbs-user .lvl-badge{display:none!important}.mbs-header{gap:6px}}
@media (prefers-reduced-motion:reduce){.mbs,.mbs *{transition-duration:.001ms!important;transition-delay:0s!important;animation-duration:.001ms!important}}
/* notification popover */
.mbs-pop{position:absolute;top:calc(var(--hdr) - 4px);right:12px;width:min(340px,calc(100vw - 24px));background:#161a21;border:1px solid var(--mbs-line);border-radius:12px;box-shadow:0 14px 40px #000a;z-index:80;overflow:hidden}
.mbs-pop-h{padding:12px 14px;font:700 11px/1 var(--mbs-font);letter-spacing:.08em;color:var(--mbs-mu);border-bottom:1px solid var(--mbs-line)}
.mbs-pop ul{list-style:none;margin:0;padding:4px 0;max-height:320px;overflow:auto}
.mbs-pop li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 14px;font:500 12.5px/1.3 var(--mbs-font)}
.mbs-pop li b{display:block;font-weight:600;color:var(--mbs-tx)}.mbs-pop li small{color:var(--mbs-mu);font-size:11px}
.mbs-pop li .pos{color:var(--mbs-green);font-weight:700}.mbs-pop li .neg{color:#e5736b;font-weight:700}
.mbs-pop li.empty{color:var(--mbs-mu);justify-content:center;padding:22px}
.mbs-pop-f{display:block;padding:11px 14px;border-top:1px solid var(--mbs-line);color:var(--mbs-gold);font:700 12px/1 var(--mbs-font);text-decoration:none;text-align:center}
.mbs-pop-f:hover{background:var(--mbs-hover)}

/* V72 ban / self-exclusion screen */
#banScreen{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:16px;background:rgba(13,15,19,.94);backdrop-filter:blur(6px);font-family:MoonInter,system-ui,sans-serif}
#banScreen .ban-card{width:min(440px,100%);background:#191D24;border:1px solid #2A2F38;border-radius:14px;padding:28px 24px;text-align:center;color:#F2F3F5;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#banScreen .ban-ico{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;background:rgba(227,77,89,.14);color:#E34D59}
#banScreen h1{margin:0 0 18px;font-size:20px;line-height:1.25}
#banScreen .ban-kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;text-align:left;margin:0 0 16px;padding:14px 16px;background:#12151B;border:1px solid #2A2F38;border-radius:10px}
#banScreen dt{color:#949BA6;font-size:13px}
#banScreen dd{margin:0;font-weight:600;overflow-wrap:anywhere}
#banScreen dd small{display:block;color:#F5B84D;font-weight:500;margin-top:2px}
#banScreen .ban-note{color:#949BA6;font-size:13px;line-height:1.5;margin:0 0 18px}
#banScreen .ban-btn{min-height:44px;padding:0 28px;border-radius:10px;border:1px solid #2A2F38;background:#242932;color:#F2F3F5;font:600 14px MoonInter,sans-serif;cursor:pointer}
#banScreen .ban-btn:hover,#banScreen .ban-btn:focus-visible{border-color:#F5B84D;outline:none}

/* V72: phone header – account buttons must never run into the Rewards/chat/bell icons */
@media (max-width:760px){
  .mbs-hm{overflow:hidden}
  .mbs-hm .mbs-account{gap:6px;flex-wrap:nowrap}
  .mbs-hm .mbs-account>*{flex:0 1 auto;min-width:0;white-space:nowrap}
  .mbs-header .auth-btn,.mbs-header .mbs-account .btn,.mbs-header .mbs-account .dep-btn{padding:0 10px!important;font-size:12px!important;min-height:36px}
}
@media (max-width:420px){.mbs-header .auth-btn.primary{font-size:11px!important;padding:0 8px!important}}
@media (max-width:350px){.mbs-rewards{display:none!important}}   /* Rewards stays reachable from the menu; keeps balance + Deposit readable on very small phones */
@media (max-width:350px){.mbs-hm .mbs-account>*:not(.wallet-pill){padding:0 6px!important;font-size:11px!important}.mbs-header .wallet-pill{padding:0 6px!important}}
/* V73: Deposit never shrinks/clips on phones; the balance pill gives way instead */
@media (max-width:760px){.mbs-hm .mbs-account>.wallet-deposit{flex:0 0 auto!important;overflow:visible}.mbs-hm .mbs-account>.wallet-pill{flex:0 1 auto;min-width:46px;overflow:hidden;text-overflow:ellipsis}}
@media (max-width:420px){.mbs-hm .mbs-account>.wallet-deposit{padding:0 9px!important;font-size:11px!important}.mbs-header .wallet-pill .moon,.mbs-header .wallet-pill small,.mbs-header .wallet-pill .wp-unit{display:none}}

/* V75 – identity verification banner */
.kyc-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;max-width:min(720px,calc(100vw - 32px));padding:10px 12px 10px 16px;background:#191D24;border:1px solid #F5B84D;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);color:#F2F3F5;font:600 13px/1.35 MoonInter,Inter,system-ui,sans-serif}
.kyc-bar .kyc-t{flex:1;min-width:0}
.kyc-bar .kyc-go{flex:0 0 auto;height:32px;padding:0 14px;border:0;border-radius:6px;background:#F5B84D;color:#0D0F13;font:800 12px MoonInter,Inter,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
.kyc-bar .kyc-x{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:6px;background:#242932;color:#949BA6;cursor:pointer}
@media(max-width:640px){.kyc-bar{flex-wrap:wrap;bottom:16px}.kyc-bar .kyc-go{order:3;width:100%}}