/* Shell: notice strip, left rail (244 / 64 px, off-canvas below 1024 px), top bar with breadcrumb, content column,
 * toasts, modals. Measurements follow the reference site's shell. */
.app{display:flex; min-height:100vh; flex-direction:column}
/* notice strip */
.notice{position:sticky; top:0; z-index:40; display:flex; height:var(--strip-h); align-items:center; justify-content:center; gap:8px; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--notice); padding:0 40px; font-size:12px; color:color-mix(in srgb,var(--on-notice) 70%,transparent)}
html[data-notice=off] .notice{display:none}
.notice strong{flex:none; font-weight:500; color:var(--on-notice)}
.notice .msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.notice .x{position:absolute; right:12px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:24px; height:24px; border-radius:4px;
  color:color-mix(in srgb,var(--on-notice) 60%,transparent)}
.notice .x:hover{background:color-mix(in srgb,var(--on-notice) 10%,transparent); color:var(--on-notice)}

.body{display:flex; flex:1}
.scrim{position:fixed; inset:0; z-index:40; background:color-mix(in srgb,var(--ink) 30%,transparent); opacity:0; pointer-events:none; transition:opacity .2s}
html[data-drawer=open] .scrim{opacity:1; pointer-events:auto}

/* rail */
.rail{position:fixed; inset:0 auto 0 0; z-index:50; display:flex; width:244px; flex-direction:column; border-right:1px solid var(--line); background:var(--card);
  transform:translateX(-100%); transition:transform .2s}
html[data-drawer=open] .rail{transform:none}
.rail-brand{display:flex; height:60px; flex:none; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:0 16px}
.rail-brand .logo{display:flex; width:32px; height:32px; flex:none; align-items:center; justify-content:center}
.rail-brand .logo img{width:32px; height:32px; max-width:none}
.rail-brand b{font-size:21px; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:-.045em}
.rail-nav{display:flex; min-height:0; flex:1; flex-direction:column; overflow-y:auto; padding:12px 12px 20px}
.rail-group{display:flex; flex-direction:column; gap:3px}
.rail-head{margin:24px 0 8px; padding:0 10px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); white-space:nowrap}
.rail-item{display:flex; min-height:40px; width:100%; align-items:center; text-align:left; gap:11px; border-radius:4px; padding:8px 10px; font-size:13.5px; color:var(--muted);
  transition:background .15s,color .15s; white-space:nowrap}
.rail-item:hover{background:color-mix(in srgb,var(--frame) 35%,transparent); color:var(--ink)}
.rail-item[aria-current]{background:var(--track); color:var(--ink); font-weight:500}
.rail-item .ico{color:var(--ink); flex:none}
.rail-item .txt{flex:1; overflow:hidden; text-overflow:ellipsis}
.rail-item .ne{color:color-mix(in srgb,var(--muted) 70%,transparent)}
.rail-foot{display:none; flex:none; border-top:1px solid var(--line); padding:8px 12px}
.rail-foot .rail-item{font-size:13px}

/* top bar */
.main-col{display:flex; min-width:0; flex:1; flex-direction:column}
.topbar{position:sticky; top:var(--strip-h); z-index:30; display:flex; height:60px; align-items:center; gap:12px; border-bottom:1px solid var(--line);
  padding:0 16px; background:var(--bar); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.crumb{display:flex; flex:none; align-items:center; gap:8px; font-size:13px; color:var(--muted); min-width:0}
.crumb-brand{display:flex; align-items:center; gap:7px}
.crumb-brand img{display:none}
.crumb .sl{color:var(--frame)}
.crumb strong{font-weight:500; color:var(--ink); white-space:nowrap}
.top-r{margin-left:auto; display:flex; flex:none; align-items:center; gap:6px}
.lang-btn{height:36px; min-width:36px; padding:0 8px; border-radius:4px; font-size:12px; font-weight:500; color:var(--muted)}
@media (max-width:420px){.lang-btn{min-width:30px; padding:0 4px; font-size:11.5px}}
.lang-btn:hover{background:color-mix(in srgb,var(--frame) 35%,transparent); color:var(--ink)}
.wallet-btn{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 13px; border-radius:4px; background:var(--fill); color:var(--on-fill); font-size:13.5px; font-weight:500; white-space:nowrap}
.wallet-btn:hover{background:var(--fill-lit)}
.wallet-btn.on{background:var(--card); color:var(--ink); border:1px solid var(--line); font-variant-numeric:tabular-nums}
.wallet-btn.on:hover{border-color:var(--frame)}
.wallet-btn .bnb{border-radius:999px; background:var(--well); padding:2px 7px; font-size:11px; color:var(--muted)}
.wmenu{position:absolute; right:0; top:calc(100% + 4px); z-index:100; width:224px; border-radius:6px; border:1px solid var(--line); background:var(--card); box-shadow:var(--pop)}
.wmenu .hd{border-bottom:1px solid var(--line); padding:10px 12px}
.wmenu .hd small{display:block; margin-bottom:4px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.wmenu .hd b{display:block; font-size:12.5px; font-weight:500; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
.wmenu .bd{padding:4px}
.wmenu .bd button,.wmenu .bd a{display:flex; width:100%; align-items:center; gap:8px; border-radius:4px; padding:8px 10px; font-size:12.5px; text-align:left}
.wmenu .bd button:hover,.wmenu .bd a:hover{background:var(--well)}

.content{margin:0 auto; width:100%; min-width:0; max-width:76rem; flex:1; padding:12px 12px 96px}
.foot-line{margin:28px auto 0; max-width:76rem; padding:0 12px 32px; font-size:11px; line-height:1.6; color:var(--muted); text-align:center}

/* toasts */
.toasts{pointer-events:none; position:fixed; right:20px; top:calc(var(--strip-h) + 76px); z-index:300; display:flex; width:min(320px,calc(100vw - 2.5rem)); flex-direction:column; gap:8px}
.toast{pointer-events:auto; display:flex; align-items:flex-start; gap:10px; border-radius:12px; border:1px solid var(--line); background:var(--card); padding:12px 14px;
  box-shadow:0 10px 30px rgb(0 0 0/.10),0 2px 6px rgb(0 0 0/.05); animation:toast-in .18s ease-out}
.toast .tt{font-size:12.5px; font-weight:600}
.toast .ts{margin-top:2px; font-size:11px; line-height:1.3; color:var(--muted); font-variant-numeric:tabular-nums}
.toast .dot{margin-top:5px; width:7px; height:7px; border-radius:999px; background:var(--head); flex:none}
.toast.err .dot{background:var(--alert)}

/* modals */
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:0 20px}
.modal .bg{position:absolute; inset:0; background:color-mix(in srgb,var(--ink) 40%,transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.modal .box{position:relative; width:100%; max-width:380px; border-radius:16px; background:var(--card); box-shadow:var(--pop); max-height:calc(100vh - 40px); overflow:auto}
.modal .box.desk{max-width:420px; border-radius:8px}
.modal .mh{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px 4px}
.modal .mh b{font-size:15px; font-weight:700; letter-spacing:-.01em}
.modal .mx{margin-right:-4px; display:grid; place-items:center; width:28px; height:28px; border-radius:999px; font-size:15px; color:color-mix(in srgb,var(--muted) 70%,transparent)}
.modal .mx:hover{background:var(--well); color:var(--ink)}
.wl{padding:12px 8px 8px}
.wl button{display:flex; width:100%; align-items:center; gap:12px; border-radius:12px; padding:10px 12px; text-align:left}
.wl button:hover{background:var(--well)}
.wl .wi{display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:6px; background:var(--well); font-size:11px; font-weight:700; color:var(--muted)}
.wl .wn{min-width:0; flex:1; font-size:12.5px; font-weight:600}
.wl .tag{border-radius:999px; background:var(--well); padding:3px 8px; font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.modal .mf{padding:4px 20px 16px; font-size:10.5px; line-height:1.6; color:color-mix(in srgb,var(--muted) 70%,transparent)}
.modal .mt{padding:20px; font-size:12px; line-height:1.6; color:var(--muted)}

@media (min-width:640px){.topbar{padding:0 24px} .content{padding:12px 16px 96px}}
@media (min-width:1024px){
  .rail{position:sticky; top:var(--strip-h); height:calc(100vh - var(--strip-h)); width:var(--rail-w); transform:none; transition:width .2s}
  .scrim,.menu-btn{display:none !important}
  .rail-foot{display:block}
  .content{padding:12px 20px 96px}
  html[data-rail=compact] .rail .txt,html[data-rail=compact] .rail-brand b,html[data-rail=compact] .rail-head,html[data-rail=compact] .rail .ne{display:none}
  html[data-rail=compact] .rail-brand{justify-content:center; padding:0}
  html[data-rail=compact] .rail-head{margin:12px 0 0; height:1px; background:var(--line)}
}
@media (max-width:639px){.wallet-btn{padding:0 11px; font-size:13px} .wallet-btn .bnb{display:none}}
@media (max-width:1023px){.crumb-brand img{display:block; width:24px; height:24px}}
/* very small phones: keep the brand mark and hide the wordmark so the top bar fits in 360 px */
@media (max-width:379px){.crumb-brand>span,.crumb .sl{display:none} .topbar{gap:8px} .wallet-btn{padding:0 10px; font-size:12.5px}}