/* ==========================================================================
   MetaPro Capital - Design System
   Bootstrap 5.3.3 companion stylesheet. Mobile first. High contrast.
   ========================================================================== */

:root{
  --bg:#0B0F19;
  --bg-2:#101728;
  --surface:#151E31;
  --card:#1A2337;
  --card-2:#202B42;
  --line:#2A3752;
  --line-2:#36456A;

  --gold:#F5C518;
  --gold-2:#FFD84D;
  --gold-3:#FFE894;
  --gold-dark:#B98F07;
  --gold-soft:rgba(245,197,24,.13);
  --gold-soft-2:rgba(245,197,24,.22);

  --text:#EFF3FB;
  --text-2:#C6D0E4;
  --muted:#93A2BF;
  --muted-2:#6E7E9E;

  --ok:#22C55E;
  --ok-soft:rgba(34,197,94,.14);
  --warn:#F59E0B;
  --warn-soft:rgba(245,158,11,.14);
  --bad:#EF4444;
  --bad-soft:rgba(239,68,68,.14);
  --info:#38BDF8;
  --info-soft:rgba(56,189,248,.14);
  --violet:#8B5CF6;
  --violet-soft:rgba(139,92,246,.14);

  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(0,0,0,.38);
  --shadow-sm:0 4px 14px rgba(0,0,0,.28);
  --sidebar:266px;
  --topbar:64px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{ -webkit-tap-highlight-color:transparent; }

html,body{ max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1100px 620px at 82% -12%,rgba(245,197,24,.10),transparent 62%),
    radial-gradient(900px 520px at 4% 4%,rgba(56,189,248,.08),transparent 60%),
    var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--gold-2); }

h1,h2,h3,h4,h5,h6{ font-weight:800; letter-spacing:-.02em; color:var(--text); }
h1{ font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1.12; }
h2{ font-size:clamp(1.45rem,3vw,2.15rem); line-height:1.18; }
h3{ font-size:clamp(1.15rem,2.1vw,1.4rem); }

.text-muted-2{ color:var(--muted) !important; }
.text-gold{ color:var(--gold) !important; }
.text-ok{ color:var(--ok) !important; }
.text-bad{ color:var(--bad) !important; }
.text-warn{ color:var(--warn) !important; }
.text-info2{ color:var(--info) !important; }
.fw-900{ font-weight:900; }
.fs-13{ font-size:13px; } .fs-14{ font-size:14px; } .fs-15{ font-size:15px; }
.fs-16{ font-size:16px; } .fs-18{ font-size:18px; } .fs-22{ font-size:22px; }
.mono{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-variant-numeric:tabular-nums; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Buttons ---------- */
.btn{ font-weight:700; border-radius:var(--radius-sm); padding:.6rem 1.15rem; font-size:14.5px; transition:.18s ease; }
.btn-gold{ background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%); border:none; color:#151A05; box-shadow:0 6px 18px rgba(245,197,24,.26); }
.btn-gold:hover{ background:linear-gradient(135deg,var(--gold-2),var(--gold-3)); color:#151A05; transform:translateY(-1px); }
.btn-outline-gold{ border:1.5px solid var(--gold); color:var(--gold); background:transparent; }
.btn-outline-gold:hover{ background:var(--gold-soft); color:var(--gold-2); border-color:var(--gold-2); }
.btn-dark2{ background:var(--card-2); border:1px solid var(--line-2); color:var(--text); }
.btn-dark2:hover{ background:var(--surface); color:var(--text); border-color:var(--gold); }
.btn-ok{ background:var(--ok); border:none; color:#04140A; }
.btn-ok:hover{ background:#2ee06a; color:#04140A; }
.btn-bad{ background:var(--bad); border:none; color:#fff; }
.btn-bad:hover{ background:#ff5c5c; color:#fff; }
.btn-lg{ padding:.85rem 1.6rem; font-size:16px; }
.btn-sm{ padding:.4rem .8rem; font-size:13px; }

/* ---------- Cards ---------- */
.card-mp{
  background:linear-gradient(180deg,var(--card) 0%,var(--surface) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-mp-h{ padding:1rem 1.15rem; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.card-mp-h h3,.card-mp-h h4,.card-mp-h h5{ margin:0; font-size:1rem; font-weight:800; }
.card-mp-b{ padding:1.15rem; }
.card-mp-b.tight{ padding:.85rem; }

.panel{
  background:rgba(21,30,49,.72);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
}

/* ---------- KPI ---------- */
.kpi{ padding:1.05rem 1.1rem; border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(180deg,var(--card),var(--surface)); height:100%; }
.kpi-l{ font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; margin-bottom:.35rem; }
.kpi-v{ font-size:clamp(1.25rem,2.6vw,1.75rem); font-weight:900; letter-spacing:-.02em; }
.kpi-d{ font-size:12.5px; margin-top:.25rem; }
.kpi-i{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px; flex:0 0 auto; }

.bg-gold-soft{ background:var(--gold-soft); color:var(--gold); }
.bg-ok-soft{ background:var(--ok-soft); color:var(--ok); }
.bg-bad-soft{ background:var(--bad-soft); color:var(--bad); }
.bg-warn-soft{ background:var(--warn-soft); color:var(--warn); }
.bg-info-soft{ background:var(--info-soft); color:var(--info); }
.bg-violet-soft{ background:var(--violet-soft); color:var(--violet); }

/* ---------- Badges / chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .68rem; border-radius:999px; font-size:12.5px; font-weight:700; border:1px solid transparent; }
.chip-gold{ background:var(--gold-soft); color:var(--gold); border-color:rgba(245,197,24,.34); }
.chip-ok{ background:var(--ok-soft); color:var(--ok); border-color:rgba(34,197,94,.34); }
.chip-bad{ background:var(--bad-soft); color:var(--bad); border-color:rgba(239,68,68,.34); }
.chip-warn{ background:var(--warn-soft); color:var(--warn); border-color:rgba(245,158,11,.34); }
.chip-info{ background:var(--info-soft); color:var(--info); border-color:rgba(56,189,248,.34); }
.chip-mute{ background:rgba(147,162,191,.12); color:var(--muted); border-color:var(--line-2); }

.tag{ display:inline-block; padding:.22rem .55rem; border-radius:6px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

/* ---------- Tables ---------- */
.table-mp{ width:100%; margin:0; color:var(--text-2); border-collapse:separate; border-spacing:0; }
.table-mp thead th{
  background:var(--bg-2); color:var(--muted); font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; padding:.7rem .85rem;
  border-bottom:1px solid var(--line); white-space:nowrap; text-align:left;
}
.table-mp tbody td{ padding:.75rem .85rem; border-bottom:1px solid rgba(42,55,82,.6); font-size:14px; vertical-align:middle; }
.table-mp tbody tr:hover{ background:rgba(245,197,24,.045); }
.table-mp tbody tr:last-child td{ border-bottom:none; }
.table-mp .num{ text-align:right; font-variant-numeric:tabular-nums; }
.table-mp tfoot td{ padding:.75rem .85rem; font-weight:800; color:var(--text); border-top:1px solid var(--line-2); }

.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.scroll-x::-webkit-scrollbar{ height:8px; }
.scroll-x::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }

/* ---------- Progress ---------- */
.bar{ height:9px; border-radius:999px; background:rgba(147,162,191,.16); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-2)); }
.bar.bar-ok > i{ background:linear-gradient(90deg,#15803D,var(--ok)); }
.bar.bar-info > i{ background:linear-gradient(90deg,#0369A1,var(--info)); }
.bar.bar-violet > i{ background:linear-gradient(90deg,#6D28D9,var(--violet)); }

/* ---------- Layout: sidebar + content ---------- */
.mp-shell{ min-height:100vh; }

.mp-side{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar);
  background:linear-gradient(180deg,#0D1425 0%,#0A0F1C 100%);
  border-right:1px solid var(--line);
  z-index:1045; display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .26s ease;
}
.mp-side.open{ transform:translateX(0); }

.mp-side-head{ padding:1rem 1.1rem; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.mp-logo{ display:flex; align-items:center; gap:.65rem; }
.mp-logo-mark{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--gold-3),var(--gold),var(--gold-dark));
  color:#141803; display:grid; place-items:center; font-weight:900; font-size:15px;
  box-shadow:0 5px 16px rgba(245,197,24,.34);
}
.mp-logo-txt{ line-height:1.05; }
.mp-logo-txt b{ display:block; font-size:14.5px; font-weight:900; letter-spacing:.05em; color:var(--text); }
.mp-logo-txt span{ display:block; font-size:9.5px; letter-spacing:.28em; color:var(--gold); font-weight:800; }

.mp-nav{ flex:1 1 auto; overflow-y:auto; padding:.7rem .6rem 1.4rem; }
.mp-nav::-webkit-scrollbar{ width:7px; }
.mp-nav::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.nav-group{ margin-bottom:.85rem; }
.nav-group > .ng-t{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.15em; font-weight:800;
  color:var(--muted-2); padding:.4rem .75rem; display:block;
}
a.nl{
  display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; margin:.1rem 0;
  border-radius:9px; color:var(--text-2); font-size:14px; font-weight:600;
  border-left:3px solid transparent; transition:.15s ease;
}
a.nl i{ font-size:16px; color:var(--muted); width:19px; text-align:center; flex:0 0 auto; }
a.nl:hover{ background:rgba(245,197,24,.08); color:var(--text); }
a.nl:hover i{ color:var(--gold); }
a.nl.on{ background:var(--gold-soft); color:var(--gold); border-left-color:var(--gold); font-weight:800; }
a.nl.on i{ color:var(--gold); }
a.nl .badge{ margin-left:auto; }

.mp-side-foot{ padding:.8rem; border-top:1px solid var(--line); flex:0 0 auto; }
.mp-user{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem; border-radius:10px; background:rgba(245,197,24,.06); border:1px solid var(--line); }
.mp-user .av{ width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg,var(--gold),var(--gold-dark)); color:#141803; display:grid; place-items:center; font-weight:900; font-size:13px; flex:0 0 auto; }

.mp-main{ min-height:100vh; display:flex; flex-direction:column; }

.mp-top{
  height:var(--topbar); position:sticky; top:0; z-index:1030;
  background:rgba(11,15,25,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:.7rem; padding:0 .85rem;
}
.mp-burger{
  width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--card); color:var(--text); display:grid; place-items:center; font-size:19px; flex:0 0 auto;
}
.mp-burger:hover{ border-color:var(--gold); color:var(--gold); }
.mp-title{ font-weight:800; font-size:16px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mp-body{ padding:1rem .85rem 2.4rem; flex:1 1 auto; }
.mp-overlay{ position:fixed; inset:0; background:rgba(4,7,14,.66); z-index:1040; opacity:0; pointer-events:none; transition:opacity .25s; }
.mp-overlay.on{ opacity:1; pointer-events:auto; }

@media (min-width:992px){
  .mp-side{ transform:translateX(0); }
  .mp-overlay{ display:none !important; }
  .mp-main{ margin-left:var(--sidebar); }
  .mp-burger{ display:none; }
  .mp-top{ padding:0 1.5rem; }
  .mp-body{ padding:1.4rem 1.5rem 2.6rem; }
}

/* ---------- Ticker ---------- */
.mp-ticker{ display:flex; gap:.55rem; overflow-x:auto; padding:.55rem .85rem; border-bottom:1px solid var(--line); background:rgba(16,23,40,.7); }
.mp-ticker::-webkit-scrollbar{ height:0; }
.tk{ display:flex; align-items:center; gap:.45rem; padding:.32rem .7rem; border-radius:8px; background:var(--card); border:1px solid var(--line); white-space:nowrap; font-size:13px; font-weight:700; flex:0 0 auto; }
.tk .s{ color:var(--muted); font-weight:700; }
.tk .p{ font-variant-numeric:tabular-nums; }

/* ---------- Live tape / order book ---------- */
.tape-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; padding:.3rem .55rem; font-size:12.5px; font-variant-numeric:tabular-nums; border-radius:5px; }
.tape-row.buy{ background:rgba(34,197,94,.10); color:var(--ok); }
.tape-row.sell{ background:rgba(239,68,68,.10); color:var(--bad); }
.ob-row{ position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; padding:.22rem .55rem; font-size:12.5px; font-variant-numeric:tabular-nums; }
.ob-row .fill{ position:absolute; top:0; bottom:0; right:0; opacity:.14; }
.ob-row.ask .fill{ background:var(--bad); }
.ob-row.bid .fill{ background:var(--ok); }
.ob-row.ask span:first-child{ color:var(--bad); }
.ob-row.bid span:first-child{ color:var(--ok); }

/* ---------- Ring ---------- */
.ring{ width:132px; height:132px; margin:0 auto; position:relative; }
.ring svg{ transform:rotate(-90deg); }
.ring-c{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.ring-c b{ display:block; font-size:22px; font-weight:900; line-height:1; }
.ring-c small{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }

/* ---------- Steps ---------- */
.steps{ display:grid; gap:.75rem; }
.step{ display:flex; gap:.85rem; align-items:flex-start; }
.step-n{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:900; font-size:13.5px; background:var(--gold-soft); color:var(--gold); border:1.5px solid rgba(245,197,24,.4); }
.step.done .step-n{ background:var(--ok-soft); color:var(--ok); border-color:rgba(34,197,94,.4); }

/* ---------- Split cards (20/80) ---------- */
.split{ display:grid; grid-template-columns:1fr; gap:.7rem; }
@media (min-width:576px){ .split{ grid-template-columns:1fr 1fr; } }
.split-card{ border-radius:var(--radius); padding:1rem; border:1px solid var(--line); }
.split-card.p20{ background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(139,92,246,.04)); border-color:rgba(139,92,246,.34); }
.split-card.p80{ background:linear-gradient(160deg,rgba(245,197,24,.16),rgba(245,197,24,.04)); border-color:rgba(245,197,24,.34); }
.split-card .pc{ font-size:28px; font-weight:900; line-height:1; }
.split-card.p20 .pc{ color:#A78BFA; }
.split-card.p80 .pc{ color:var(--gold); }

/* ---------- Rank cards ---------- */
.rank-card{ border-radius:var(--radius); border:1px solid var(--line); background:linear-gradient(180deg,var(--card),var(--surface)); padding:1rem; height:100%; position:relative; overflow:hidden; }
.rank-card::after{ content:''; position:absolute; top:0; left:0; right:0; height:4px; }
.rank-card.diamond::after{ background:linear-gradient(90deg,#38BDF8,#818CF8); }
.rank-card.corona::after{ background:linear-gradient(90deg,#F59E0B,#EF4444); }
.rank-card.ambassador::after{ background:linear-gradient(90deg,var(--gold),var(--gold-3)); }

/* ---------- Feature icon block ---------- */
.fx{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:21px; flex:0 0 auto; }

/* ---------- FAQ ---------- */
.acc{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:.6rem; overflow:hidden; }
.acc > summary{ padding:.9rem 1rem; cursor:pointer; font-weight:700; font-size:14.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.acc > summary::-webkit-details-marker{ display:none; }
.acc > summary::after{ content:'\002B'; color:var(--gold); font-weight:900; font-size:18px; }
.acc[open] > summary::after{ content:'\2212'; }
.acc[open] > summary{ color:var(--gold); border-bottom:1px solid var(--line); }
.acc .acc-b{ padding:.9rem 1rem; color:var(--text-2); font-size:14px; }

/* ---------- Forms ---------- */
.form-label{ font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.35rem; }
.form-control,.form-select{
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--text);
  border-radius:var(--radius-sm); padding:.65rem .85rem; font-size:14.5px;
}
.form-control:focus,.form-select:focus{ background:var(--bg-2); border-color:var(--gold); color:var(--text); box-shadow:0 0 0 .2rem rgba(245,197,24,.16); }
.form-control::placeholder{ color:var(--muted-2); }
.form-select option{ background:var(--bg-2); color:var(--text); }
.input-group-text{ background:var(--card-2); border:1px solid var(--line-2); color:var(--muted); font-weight:700; }
.form-check-input{ background-color:var(--bg-2); border-color:var(--line-2); }
.form-check-input:checked{ background-color:var(--gold); border-color:var(--gold); }
.form-switch .form-check-input{ width:2.6em; height:1.35em; }
.form-range::-webkit-slider-thumb{ background:var(--gold); }

/* ---------- Coin picker ---------- */
.coin-opt{ display:flex; align-items:center; gap:.75rem; padding:.85rem; border:1.5px solid var(--line-2); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; transition:.16s; height:100%; }
.coin-opt:hover{ border-color:var(--gold); background:var(--card-2); }
.coin-opt.on{ border-color:var(--gold); background:var(--gold-soft); box-shadow:0 0 0 3px rgba(245,197,24,.14); }
.coin-ic{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:13px; flex:0 0 auto; color:#0B0F19; }

/* ---------- Auth ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem 1rem; }
.auth-card{ width:100%; max-width:440px; background:linear-gradient(180deg,var(--card),var(--surface)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow); }

/* ---------- Landing ---------- */
.hero{ padding:clamp(2.2rem,6vw,5rem) 0 clamp(1.6rem,4vw,3rem); }
.hero-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:999px; background:var(--gold-soft); border:1px solid rgba(245,197,24,.34); color:var(--gold); font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.grad{ background:linear-gradient(100deg,var(--gold-3) 0%,var(--gold) 45%,var(--gold-dark) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

.site-nav{ position:sticky; top:0; z-index:1030; background:rgba(11,15,25,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.site-nav .navbar-nav .nav-link{ color:var(--text-2); font-weight:600; font-size:14px; padding:.55rem .8rem; }
.site-nav .navbar-nav .nav-link:hover{ color:var(--gold); }

.sec{ padding:clamp(2rem,5vw,3.6rem) 0; }
.sec-alt{ background:rgba(16,23,40,.5); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec-tag{ font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }

.stat-box{ text-align:center; padding:1rem .6rem; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); height:100%; }
.stat-box b{ display:block; font-size:clamp(1.4rem,3.4vw,2.1rem); font-weight:900; color:var(--gold); line-height:1.1; }
.stat-box span{ font-size:12.5px; color:var(--muted); }

.plan-card{ border:1.5px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--card),var(--surface)); padding:1.1rem; height:100%; transition:.18s; }
.plan-card:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow); }
.plan-card.feat{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,197,24,.12); }

/* ---------- Footer ---------- */
.mp-foot{ border-top:1px solid var(--line); background:rgba(10,15,28,.72); padding:2.2rem 0 1.4rem; margin-top:auto; }
.mp-foot h6{ font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); font-weight:800; margin-bottom:.8rem; }
.mp-foot a{ color:var(--text-2); font-size:13.5px; display:block; padding:.22rem 0; }
.mp-foot a:hover{ color:var(--gold); }
.legal-note{ font-size:12px; color:var(--muted-2); line-height:1.65; }

/* ---------- Misc ---------- */
.divider{ height:1px; background:var(--line); margin:1rem 0; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-ok{ background:var(--ok); box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
.notice{ border-radius:var(--radius-sm); padding:.85rem 1rem; font-size:13.5px; border:1px solid; }
.notice-warn{ background:var(--warn-soft); border-color:rgba(245,158,11,.34); color:#FCD9A0; }
.notice-info{ background:var(--info-soft); border-color:rgba(56,189,248,.34); color:#BAE6FD; }
.notice-gold{ background:var(--gold-soft); border-color:rgba(245,197,24,.34); color:var(--gold-3); }
.notice-ok{ background:var(--ok-soft); border-color:rgba(34,197,94,.34); color:#BBF7D0; }

.toast-wrap{ position:fixed; right:14px; bottom:14px; z-index:1090; display:flex; flex-direction:column; gap:.5rem; max-width:calc(100vw - 28px); }
.toast-mp{ background:var(--card-2); border:1px solid var(--line-2); border-left:4px solid var(--gold); border-radius:var(--radius-sm); padding:.75rem 1rem; font-size:14px; box-shadow:var(--shadow); animation:slideIn .25s ease; }
.toast-mp.ok{ border-left-color:var(--ok); }
.toast-mp.bad{ border-left-color:var(--bad); }
@keyframes slideIn{ from{ transform:translateX(24px); opacity:0; } to{ transform:translateX(0); opacity:1; } }

.modal-content{ background:var(--surface); border:1px solid var(--line); color:var(--text); border-radius:var(--radius); }
.modal-header,.modal-footer{ border-color:var(--line); }
/* Bootstrap 5.3.3: close buttons with contrast per surface. */
/* Default alerts have light backgrounds: use the original dark SVG X. */
.alert .btn-close{
  filter:none;
  opacity:.85;
}
.alert .btn-close:hover,
.alert .btn-close:focus-visible{ opacity:1; }

/* Dark modal/toast surfaces need a light X. */
.modal-content .btn-close,
.toast .btn-close,
[data-bs-theme="dark"] .btn-close{
  filter:invert(1) grayscale(100%) brightness(200%);
  opacity:.85;
}

/* In light Bootstrap alerts, retain a dark X even on a dark-themed page. */
.alert.alert-primary .btn-close,
.alert.alert-secondary .btn-close,
.alert.alert-success .btn-close,
.alert.alert-danger .btn-close,
.alert.alert-warning .btn-close,
.alert.alert-info .btn-close,
.alert.alert-light .btn-close{
  filter:none;
}

/* Bootstrap supplies the close glyph as a background SVG; don't layer an <i> icon. */
.alert .btn-close > i{ display:none; }

.avatar-l{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:13px; color:#0B0F19; flex:0 0 auto; }

.qr-box{ background:#fff; border-radius:var(--radius-sm); padding:10px; display:inline-block; }
.qr-box img,.qr-box canvas{ display:block; }

.doc-body{ max-width:920px; }
.doc-body h2{ margin-top:1.8rem; font-size:1.3rem; }
.doc-body h3{ margin-top:1.3rem; font-size:1.08rem; color:var(--gold); }
.doc-body p,.doc-body li{ color:var(--text-2); font-size:14.5px; }
.doc-body ul{ padding-left:1.15rem; }

.copy-inline{ display:flex; align-items:center; gap:.5rem; background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:.5rem .7rem; font-size:13px; }
.copy-inline code{ color:var(--gold); background:none; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.hero-visual{ border-radius:var(--radius-lg); border:1px solid var(--line); background:linear-gradient(160deg,var(--card),var(--bg-2)); padding:1rem; box-shadow:var(--shadow); }
.mini-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .6rem; border-radius:8px; background:rgba(147,162,191,.06); font-size:13.5px; }
.mini-row + .mini-row{ margin-top:.4rem; }