@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ───────────────────────────────────────────────
   VALLET.BUZZ — PREMIUM INSTITUTIONAL DESIGN SYSTEM
   Midnight Gold • Glassmorphism • Fintech Luxury
   ─────────────────────────────────────────────── */
:root{
  --bg:#0A0E14;
  --bg2:#0D1219;
  --bg3:#111722;
  --card:#10151E;
  --card2:#151C28;
  --cardHover:#1A2230;
  --border:#222B3C;
  --border2:#1A2230;
  --borderGold:rgba(240,185,11,0.18);
  --gold:#F0B90B;
  --goldHover:#FFCC2F;
  --gold2:#1E1805;
  --goldSoft:rgba(240,185,11,0.10);
  --goldRing:rgba(240,185,11,0.14);
  --teal:#2DD4A8;
  --teal2:#0A1F18;
  --tealSoft:rgba(45,212,168,0.12);
  --green:#00D492;
  --green2:#0A1F18;
  --greenSoft:rgba(0,212,146,0.12);
  --red:#FF4D6B;
  --red2:#2B0F14;
  --blue:#6B8CFF;
  --blue2:#0F1830;
  --text:#E9EDF4;
  --textSec:#8B93A7;
  --textMuted:#5E6F8A;
  --shadow:0 12px 40px rgba(0,0,0,0.45), 0 2px 12px rgba(0,0,0,0.35);
  --shadowGold:0 8px 24px rgba(240,185,11,0.22);
  --radius:18px;
  --radiusSm:12px;
  --radiusXs:8px;
  --headerH:64px;
  --sidebarW:200px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#1E2F4F transparent;}
html,body{height:100%;}
body{
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(240,185,11,0.09) 0%, transparent 55%),
    radial-gradient(700px 500px at 92% 0%, rgba(107,140,255,0.06) 0%, transparent 50%),
    radial-gradient(600px 400px at 50% 120%, rgba(0,212,146,0.04) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:var(--gold);text-decoration:none;transition:color .15s;}
a:hover{color:var(--goldHover);}
::selection{background:rgba(240,185,11,0.28); color:#fff;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#1E2F4F;border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:#2A3F6B;}

/* ───────── HEADER ───────── */
header{
  height:var(--headerH);
  padding:0 1.25rem;
  border-bottom:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(14,19,30,0.88)!important;
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  position:sticky;top:0;z-index:100;
  gap:1rem;
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 24px rgba(0,0,0,0.35);
}
header h1{font-family:"Outfit",sans-serif;font-size:1.15rem;letter-spacing:-0.025em;font-weight:800;color:var(--text);display:flex;align-items:center;gap:.6rem;}
header h1 span{color:var(--gold);}
header h1 img{filter:drop-shadow(0 0 10px rgba(240,185,11,0.3));}
.header-left{flex:1;display:flex;align-items:center;gap:.85rem;min-width:0;}
.header-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-width:0;}
.brand-link{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex-shrink:0;}
.brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg, #F0B90B 0%, #FFD54F 100%);
  color:#070A12;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-family:"Outfit",sans-serif;font-size:15px;
  box-shadow:0 2px 12px rgba(240,185,11,0.35), 0 0 0 1px rgba(255,255,255,0.12) inset;
  position:relative;overflow:hidden;
}
.brand-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.22), transparent 55%);pointer-events:none;}
.brand-text{line-height:1;}
.brand-text .name{font-family:"Outfit",sans-serif;font-weight:800;font-size:14.5px;color:var(--text);letter-spacing:-0.02em;}
.brand-text .sub{font-size:7.5px;color:var(--gold);letter-spacing:0.11em;font-weight:700;font-family:"Inter",sans-serif;text-transform:uppercase;opacity:.95;}
.header-user-box{
  display:flex;align-items:center;gap:.55rem;
  background:rgba(17,26,46,0.9);border:1px solid var(--border);border-radius:12px;
  padding:.28rem .6rem .28rem .32rem;flex-shrink:0;min-width:0;
  backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.logout-btn{
  background:rgba(17,26,46,0.9);border:1px solid var(--border);padding:.45rem .85rem;border-radius:10px;
  color:var(--textSec);text-decoration:none;font-size:.8rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.32rem;transition:all .15s;flex-shrink:0;
}
.logout-btn:hover{border-color:rgba(255,77,107,0.5);color:#FF6B7A;background:rgba(43,15,20,0.6);}

/* ───────── LAYOUT ───────── */
.container{max-width:1180px;margin:1.6rem auto;padding:0 1.5rem;}
.binance-layout{display:flex;min-height:calc(100vh - var(--headerH));background:transparent;position:relative;}
.sidebar{
  width:var(--sidebarW);background:rgba(14,19,30,0.96);border-right:1px solid var(--border2);
  padding:0;position:sticky;top:var(--headerH);height:calc(100vh - var(--headerH));
  overflow-y:auto;overflow-x:hidden;flex-shrink:0;display:flex;flex-direction:column;
  backdrop-filter:blur(12px);
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar::-webkit-scrollbar-thumb{background:#1A2744;}
.sidebar a{
  display:flex;align-items:center;gap:.8rem;padding:.72rem 1.05rem;
  color:var(--textSec);font-size:.86rem;font-weight:500;
  border-left:3px solid transparent;text-decoration:none;transition:all .16s;
  font-family:"Inter",sans-serif;position:relative;white-space:nowrap;
}
.sidebar a .ico{width:18px;text-align:center;flex-shrink:0;font-size:.95rem;opacity:.9;transition:all .15s;}
.sidebar a:hover{background:rgba(22,34,64,0.9);color:var(--text);border-left-color:rgba(240,185,11,0.35);}
.sidebar a:hover .ico{opacity:1;transform:scale(1.05);}
.sidebar a.active{background:linear-gradient(90deg, rgba(240,185,11,0.11) 0%, rgba(22,34,64,0.9) 100%);color:var(--gold);border-left-color:var(--gold);font-weight:650;box-shadow:inset 1px 0 0 rgba(240,185,11,0.2);}
.sidebar a.active .ico{color:var(--gold);opacity:1;}
.sidebar .section-label{padding:1.1rem 1.05rem .4rem;font-size:.62rem;color:var(--textMuted);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-family:"Inter",sans-serif;opacity:.9;}
.main-content{flex:1;padding:1.6rem;max-width:1280px;min-width:0;background:transparent;overflow-x:hidden;}

/* Vault state badge */
.vault-state{
  display:flex;align-items:center;gap:.45rem;padding:.7rem 1.05rem;
  border-bottom:1px solid var(--border2);background:linear-gradient(180deg, rgba(240,185,11,0.06), transparent);
  font-size:.62rem;font-weight:700;letter-spacing:.075em;color:var(--textSec);font-family:"Inter",sans-serif;
}
.vault-state .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);flex-shrink:0;animation:pulse 2.2s infinite;}
.vault-state .badge{margin-left:auto;background:var(--green2);color:var(--green);font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:999px;border:1px solid rgba(0,212,146,0.22);letter-spacing:.04em;}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.75;transform:scale(.92);}}

/* ───────── CARDS ───────── */
.card{
  background:linear-gradient(180deg, rgba(18,26,46,0.96) 0%, rgba(15,22,38,0.98) 100%)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  padding:1.3rem!important;
  margin-bottom:1rem!important;
  box-shadow:var(--shadow)!important;
  transition:all .22s cubic-bezier(.2,.8,.2,1)!important;
  position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  pointer-events:none;
}
.card:hover{border-color:#263A62!important;box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3)!important;transform:translateY(-1px);}
.card h2{font-family:"Outfit",sans-serif;font-size:1.08rem;margin-bottom:.65rem;color:var(--text);font-weight:750;letter-spacing:-0.015em;}
.card h3{font-family:"Outfit",sans-serif;font-size:.92rem;margin:1rem 0 .55rem;color:var(--gold);font-weight:650;letter-spacing:-0.01em;}

/* ───────── STAT CARDS ───────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:.9rem;margin-bottom:1.25rem;}
.stat-card{
  background:linear-gradient(180deg, rgba(28,20,60,0.92) 0%, rgba(16,12,38,0.95) 100%);
  border:1px solid var(--border);border-radius:16px;padding:1.15rem;
  transition:all .2s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,0.28);
}
.stat-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
.stat-card:hover{border-color:#2A3F6B;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.38);}
.stat-card .label{color:var(--textSec)!important;font-weight:650;font-size:.66rem;letter-spacing:.065em;text-transform:uppercase;font-family:"Inter",sans-serif;margin-bottom:.35rem;opacity:.92;}
.stat-card .value{color:var(--text)!important;font-weight:800;font-family:"JetBrains Mono",monospace;letter-spacing:-0.02em;font-size:1.45rem;margin:.28rem 0 .2rem;line-height:1.1;}
.stat-card .sub{color:var(--textSec)!important;font-size:.76rem;font-weight:500;}

/* ───────── BADGES ───────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:650;letter-spacing:.01em;line-height:1;border:1px solid transparent;}
.badge.ok{background:var(--green2);color:var(--green);border-color:rgba(0,212,146,0.22);}
.badge.err{background:var(--red2);color:#FF7A8A;border-color:rgba(255,77,107,0.22);}
.badge.warn{background:var(--gold2);color:var(--gold);border-color:rgba(240,185,11,0.22);}
.badge.neutral{background:rgba(22,34,64,0.9);color:var(--textSec);border-color:var(--border);}

/* ───────── BUTTONS ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.65rem 1.15rem;border-radius:11px;
  background:linear-gradient(180deg, #F0B90B 0%, #E8A800 100%);
  color:#0A0E14;border:1px solid #F0B90B;cursor:pointer;
  font-weight:750;font-size:.88rem;font-family:"Outfit",sans-serif;
  transition:all .16s cubic-bezier(.2,.8,.2,1);letter-spacing:.01em;
  box-shadow:0 2px 10px rgba(240,185,11,0.28), 0 1px 0 rgba(255,255,255,0.22) inset;
  position:relative;overflow:hidden;
}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.18), transparent 50%);pointer-events:none;opacity:.85;}
.btn:hover{background:linear-gradient(180deg, #FFCC33 0%, #F0B90B 100%);transform:translateY(-1px);box-shadow:0 6px 18px rgba(240,185,11,0.34), 0 1px 0 rgba(255,255,255,0.22) inset;}
.btn:active{transform:translateY(0);box-shadow:0 1px 6px rgba(240,185,11,0.22);}
.btn.secondary{background:rgba(22,34,64,0.9);color:var(--text);border:1px solid var(--border);font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,0.22), 0 1px 0 rgba(255,255,255,0.05) inset;}
.btn.secondary::after{display:none;}
.btn.secondary:hover{background:rgba(30,45,85,0.95);border-color:#2A3F6B;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,0.3);}
.btn.ghost{background:transparent;color:var(--textSec);border:1px solid var(--border);box-shadow:none;}
.btn.ghost:hover{background:rgba(22,34,64,0.6);color:var(--text);border-color:#2A3F6B;}
.btn.small{padding:.38rem .75rem;font-size:.8rem;border-radius:9px;font-weight:650;}
.btn:disabled{opacity:.48;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

/* ───────── INPUTS ───────── */
input,textarea,select{
  width:100%;padding:.62rem .85rem;border-radius:11px;
  border:1px solid var(--border);background:rgba(10,14,24,0.9);color:var(--text);
  margin-top:.38rem;font-size:.88rem;font-family:"Inter",sans-serif;
  transition:border-color .15s, box-shadow .15s, background .15s;
  outline:none;
}
input::placeholder,textarea::placeholder{color:var(--textMuted);}
input:hover,textarea:hover,select:hover{border-color:#2A3F6B;}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--goldRing);background:rgba(12,16,28,0.95);}
label{font-size:.72rem;color:var(--textSec);font-weight:600;letter-spacing:.02em;display:block;margin-bottom:.15rem;}
label .req{color:var(--gold);}

/* ───────── TABLES ───────── */
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:.8rem;border-radius:12px;overflow:hidden;border:1px solid var(--border);}
th,td{text-align:left;padding:.78rem .7rem;border-bottom:1px solid var(--border);font-size:.84rem;}
th{color:var(--textSec);font-weight:650;text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;font-family:"Inter",sans-serif;background:rgba(14,19,30,0.9);}
td{color:var(--text);background:rgba(17,26,46,0.45);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(22,34,64,0.55);}
code{background:rgba(14,19,30,0.9);padding:.2rem .42rem;border-radius:7px;font-size:.78rem;border:1px solid var(--border);font-family:"JetBrains Mono",monospace;color:var(--blue);}
footer{text-align:center;padding:2rem;color:var(--textMuted);font-size:.84rem;border-top:1px solid var(--border2);margin-top:2rem;background:rgba(14,19,30,0.6);backdrop-filter:blur(8px);}

/* ───────── GRID HELPERS ───────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;}
.wallet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:.85rem;margin:1rem 0;}
.wallet-card{background:linear-gradient(180deg, rgba(28,20,60,0.92) 0%, rgba(16,12,38,0.95) 100%);border:1px solid var(--border);border-radius:14px;padding:1rem;text-align:center;transition:all .16s;box-shadow:0 4px 14px rgba(0,0,0,0.28);}
.wallet-card:hover{border-color:#2A3F6B;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,0.34);}
.hero-premium{background:radial-gradient(900px 500px at 18% -10%, rgba(240,185,11,0.09) 0%, transparent 60%), linear-gradient(180deg, rgba(15,22,38,0.96) 0%, rgba(7,10,18,0.98) 100%);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);}
.address-box{background:rgba(10,14,24,0.9);border:1px solid var(--border);border-radius:11px;padding:.75rem .9rem;font-family:"JetBrains Mono",monospace;font-size:.78rem;word-break:break-all;display:flex;justify-content:space-between;align-items:center;gap:.5rem;color:var(--blue);}
.qr-placeholder{width:120px;height:120px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#000;font-size:.7rem;font-weight:700;}
.tabs{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap;}
.tab{padding:.48rem .9rem;border-radius:10px;background:rgba(17,26,46,0.9);cursor:pointer;font-size:.82rem;border:1px solid var(--border);color:var(--textSec);font-weight:600;transition:all .15s;font-family:"Inter",sans-serif;user-select:none;}
.tab.active{background:var(--gold);color:#0A0E14;border-color:var(--gold);box-shadow:0 2px 10px rgba(240,185,11,0.28);font-weight:700;}
.tab:hover:not(.active){background:rgba(22,34,64,0.9);border-color:#2A3F6B;color:var(--text);}

.alert{padding:.75rem 1rem;border-radius:11px;font-size:.85rem;margin-bottom:1rem;display:none;line-height:1.5;font-weight:500;border:1px solid transparent;}
.alert.ok{display:block;background:var(--green2);color:var(--green);border-color:rgba(0,212,146,0.22);}
.alert.err{display:block;background:var(--red2);color:#FF7A8A;border-color:rgba(255,77,107,0.22);}
.alert.info{display:block;background:var(--blue2);color:var(--blue);border-color:rgba(107,140,255,0.22);}
.alert.warn{display:block;background:var(--gold2);color:var(--gold);border-color:rgba(240,185,11,0.22);}

/* ───────── MODALS & POPUPS ───────── */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(4,6,12,0.78);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px);
  z-index:300;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex;animation:fadeIn .18s ease;}
.modal-card{
  background:linear-gradient(180deg, #121A2E 0%, #0F1628 100%);
  border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  max-width:440px;width:100%;position:relative;overflow:hidden;animation:slideUp .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(240,185,11,0.35), 0 0 40px rgba(240,185,11,0.12);}50%{box-shadow:0 0 28px rgba(240,185,11,0.5), 0 0 52px rgba(240,185,11,0.18);transform:scale(1.015);}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Sidebar overlay for mobile */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(4,6,12,0.55);z-index:150;}
.sidebar-overlay.open{display:block;animation:fadeIn .2s ease;}
.mobile-menu-btn{display:none;align-items:center;justify-content:center;background:rgba(17,26,46,0.9);border:1px solid var(--border);border-radius:10px;width:38px;height:38px;font-size:1.15rem;cursor:pointer;flex-shrink:0;color:var(--text);transition:all .15s;}
.mobile-menu-btn:hover{background:rgba(22,34,64,0.95);border-color:#2A3F6B;}

/* ───────── PREMIUM EFFECTS ───────── */
.gold-glow{box-shadow:0 0 20px rgba(240,185,11,0.25), 0 4px 16px rgba(0,0,0,0.3);}
.shimmer{position:relative;overflow:hidden;}
.shimmer::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);transform:translateX(-100%);animation:shimmer 2.8s infinite;}
.text-gradient-gold{background:linear-gradient(90deg, #F0B90B, #FFD54F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hide-mobile{display:flex;}
@media(max-width:900px){ .hide-mobile{display:none!important;} }

/* ───────── LIGHT THEME (kept functional) ───────── */
body.light{background:#F2F4F8!important;color:#12141A!important;}
body.light header,body.light .sidebar{background:#FFFFFF!important;border-color:#E6EAF0!important;}
body.light .card,body.light .stat-card{background:#FFFFFF!important;border-color:#E6EAF0!important;color:#12141A!important;box-shadow:0 2px 16px rgba(0,0,0,0.06)!important;}
body.light .stat-card .value{color:#12141A!important;}
body.light .stat-card .sub{color:#5E6F8A!important;}
body.light .sidebar a{color:#5E6F8A!important;}
body.light .sidebar a.active{color:#9A7B00!important;background:linear-gradient(90deg, rgba(240,185,11,0.14), rgba(250,245,220,0.9))!important;}
body.light table th{color:#5E6F8A!important;background:#F8F9FC!important;border-color:#E6EAF0!important;}
body.light table td{border-color:#E6EAF0!important;color:#12141A!important;background:#FFFFFF!important;}
body.light .address-box,body.light code{background:#F8F9FC!important;border-color:#E6EAF0!important;color:#12141A!important;}
body.light input,body.light textarea,body.light select{background:#FFFFFF!important;border-color:#D6DDEA!important;color:#12141A!important;}
body.light .binance-layout{background:#F2F4F8;}

/* ───────── RESPONSIVE ───────── */
@media (max-width: 768px){
  :root{--headerH:56px;--sidebarW:280px;}
  header{padding:.6rem .8rem!important;gap:.5rem!important;}
  header .brand-text{display:none!important;}
  #themeToggle{display:none!important;}
  .header-user-box{padding:.22rem .5rem .22rem .3rem!important;}
  .header-user-box #headerUser{max-width:92px!important;font-size:.72rem!important;}
  .logout-btn{padding:.38rem .65rem!important;font-size:.74rem!important;}
  .mobile-menu-btn{display:flex!important;}
  .sidebar-overlay{position:fixed;inset:0;}
  .sidebar{
    position:fixed!important;top:var(--headerH)!important;left:-100%!important;
    width:min(300px, 86vw)!important;height:calc(100vh - var(--headerH))!important;
    flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;
    background:rgba(14,19,30,0.98)!important;z-index:200!important;transition:left .26s cubic-bezier(.2,.8,.2,1)!important;
    display:flex!important;border-right:1px solid var(--border2)!important;border-bottom:none!important;padding:0 0 calc(92px + env(safe-area-inset-bottom, 0px))!important;gap:0!important;align-items:stretch!important;
    box-shadow:12px 0 40px rgba(0,0,0,0.5);
  }
  .sidebar.open{left:0!important;}
  /* Mobile drawer must sit above every page layer when open (taps + scroll
     must reach it first); overlay stays just beneath the drawer. */
  .sidebar.open{z-index:2000!important;}
  .sidebar-overlay.open{display:block;animation:fadeIn .2s ease;z-index:1999!important;}
  .sidebar{touch-action:pan-y!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;}
  /* Mobile More bottom-sheet (same tap mechanics as bottom nav) */
  #moreSheetOverlay{display:none;position:fixed;inset:0;background:rgba(4,6,12,0.6);z-index:2001;}
  #moreSheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:2002;max-height:72vh;overflow-y:auto;
    touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:rgba(14,19,30,0.98);border-top:1px solid var(--border2);border-radius:18px 18px 0 0;
    padding:.4rem .9rem calc(1rem + env(safe-area-inset-bottom, 0px));box-shadow:0 -12px 40px rgba(0,0,0,0.55);}
  #moreSheet .msheet-handle{width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,0.18);margin:.35rem auto .2rem;}
  #moreSheet .msheet-title{font-family:"Outfit",sans-serif;font-weight:800;font-size:.85rem;color:var(--text);padding:.45rem .2rem .15rem;}
  #moreSheet a{display:flex;align-items:center;gap:.7rem;min-height:46px;padding:.55rem .2rem;color:var(--textSec);
    font-size:.86rem;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.05);font-family:"Inter",sans-serif;}
  #moreSheet a span{width:20px;text-align:center;}
  #moreSheet .msheet-close{width:100%;margin-top:.6rem;background:transparent;border:1px solid var(--border);
    color:var(--textSec);border-radius:10px;padding:.6rem;font-weight:700;font-size:.82rem;cursor:pointer;}
  .sidebar .section-label{display:flex!important;padding:.8rem 1rem .35rem!important;font-size:.62rem!important;}
  .sidebar a{min-height:44px!important;padding:.7rem 1rem!important;font-size:.84rem!important;border-radius:0!important;flex:0 0 auto!important;border-left:3px solid transparent!important;border-bottom:none!important;justify-content:flex-start!important;}
  .sidebar a.active{border-left-color:var(--gold)!important;background:linear-gradient(90deg, rgba(240,185,11,0.11), rgba(22,34,64,0.9))!important;}
  .binance-layout{flex-direction:column!important;overflow-x:hidden!important;}
  .main-content{padding:.9rem!important;max-width:100vw!important;overflow-x:hidden!important;}
  .container{padding:0 1rem!important;max-width:100vw!important;overflow-x:hidden!important;}
  .card{padding:1rem!important;border-radius:16px!important;max-width:100%!important;overflow:hidden!important;}
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:.6rem!important;}
  .stat-card{padding:.9rem!important;}
  .stat-card .value{font-size:1.2rem!important;}
  .grid{grid-template-columns:1fr!important;gap:.8rem!important;}
  .wallet-grid{grid-template-columns:1fr 1fr!important;gap:.55rem!important;}
  table{display:block!important;max-width:100%!important;overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;border-radius:10px!important;}
  th,td{padding:.6rem .55rem!important;font-size:.78rem!important;white-space:nowrap!important;}
  .tabs{overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch!important;padding-bottom:.3rem!important;gap:.35rem!important;scrollbar-width:none!important;}
  .tabs::-webkit-scrollbar{display:none!important;}
  .tab{white-space:nowrap!important;flex-shrink:0!important;min-height:38px!important;display:inline-flex;align-items:center;}
  .address-box{flex-direction:column!important;align-items:stretch!important;gap:.45rem!important;padding:.65rem .75rem!important;max-width:100%!important;overflow:hidden!important;}
  .address-box button{width:100%!important;min-height:40px!important;}
  input,textarea,select{font-size:16px!important;min-height:44px!important;}
  .btn{min-height:44px!important;}
  .btn.small{min-height:36px!important;}
  /* Hide desktop-only telemetry details */
  .hide-mobile-sub{display:none!important;}
  .welcome-left{flex-direction:column!important;align-items:flex-start!important;gap:.6rem!important;}
  .vip-tier-badge{display:none!important;}
  .welcome-sub-row{display:none!important;}
  .welcome-telemetry{display:none!important;}
  .quick-actions{grid-template-columns:1fr!important;gap:.5rem!important;}
  .balance-grid{grid-template-columns:1fr 1fr!important;gap:.6rem!important;}
  .balance-grid > div{height:auto!important;min-height:0!important;}
  /* Auth brand 2-card stack — prevent cut */
  .auth-brand div[style*="display:grid;gap:.6rem"]{grid-template-columns:1fr!important;}
  .auth-brand div[style*="border-radius:14px;overflow:hidden"] img{width:100%!important;height:auto!important;max-height:200px!important;object-fit:cover!important;}
  #annPopup .card,#receivePopup .card,#sendPopup .card{max-width:95vw!important;width:94%!important;max-height:90vh!important;overflow-y:auto!important;}
  #popupQr{width:160px!important;height:160px!important;max-width:70vw!important;max-height:70vw!important;}
  .modal-card{max-width:94vw!important;}
  main section{overflow-x:hidden!important;}
}
@media (max-width: 600px){
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:.5rem!important;}
  .wallet-grid{grid-template-columns:1fr!important;gap:.5rem!important;}
  .balance-grid{grid-template-columns:1fr!important;gap:.6rem!important;}
}
@media (max-width: 480px){
  .stat-grid{grid-template-columns:1fr 1fr!important;gap:.5rem!important;}
  .wallet-grid{grid-template-columns:1fr!important;gap:.5rem!important;}
  .balance-grid{grid-template-columns:1fr!important;gap:.6rem!important;}
  header{padding:.5rem .65rem!important;}
  .card{padding:.9rem!important;}
  html,body{overflow-x:hidden!important;max-width:100vw!important;}
  .main-content{padding:.8rem!important;}
}
@media (max-width: 360px){
  .header-user-box #headerUser{max-width:64px!important;}
  .stat-card{padding:.75rem!important;}
  .stat-card .value{font-size:1.05rem!important;}
}

/* ───────── LANDING SPECIFIC (also works for index) ───────── */
.landing-hero{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(17,26,46,0.98) 0%, rgba(7,10,18,0.99) 100%);box-shadow:var(--shadow);padding:2.2rem 1.6rem;}
.landing-pill{display:inline-flex;align-items:center;gap:.4rem;background:rgba(240,185,11,0.10);border:1px solid rgba(240,185,11,0.20);color:var(--gold);font-size:.62rem;font-weight:750;letter-spacing:.06em;padding:.28rem .6rem;border-radius:999px;text-transform:uppercase;}
.landing-title{font-family:"Outfit",sans-serif;font-size:clamp(1.9rem, 4vw, 2.6rem);font-weight:800;letter-spacing:-0.03em;line-height:1.08;margin:.6rem 0 .5rem;}
.landing-title span{background:linear-gradient(90deg, #F0B90B, #FFD54F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.landing-sub{color:var(--textSec);max-width:680px;margin:0 auto;line-height:1.6;font-size:.92rem;}
.btn-gold{background:linear-gradient(180deg, #F0B90B, #E8A800);color:#070A12;border:none;border-radius:11px;padding:.7rem 1.25rem;font-weight:800;font-family:"Outfit",sans-serif;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;transition:all .16s;box-shadow:0 4px 14px rgba(240,185,11,0.28);}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(240,185,11,0.34);color:#070A12;}
.feature-card{background:linear-gradient(180deg, rgba(17,26,46,0.96) 0%, rgba(14,22,40,0.98) 100%);border:1px solid var(--border);border-radius:16px;padding:1.15rem;transition:all .18s;position:relative;overflow:hidden;}
.feature-card:hover{transform:translateY(-2px);border-color:#2A3F6B;box-shadow:0 10px 28px rgba(0,0,0,0.38);}
.feature-card h3{font-family:"Outfit",sans-serif;font-size:.95rem;margin:0 0 .4rem;display:flex;align-items:center;gap:.45rem;font-weight:700;letter-spacing:-0.01em;}
.feature-card p{color:var(--textSec);font-size:.82rem;line-height:1.55;margin:0;}

/* Global responsive images — fix cut/resize */
img{max-width:100%;height:auto;vertical-align:middle;}
/* Auth split */
.auth-wrap{min-height:calc(100vh - var(--headerH));display:grid;grid-template-columns:1.05fr .95fr;gap:0;overflow:hidden;background:var(--bg);}
.auth-brand{
  background:
    radial-gradient(700px 400px at 20% 10%, rgba(240,185,11,0.14) 0%, transparent 55%),
    radial-gradient(600px 400px at 80% 90%, rgba(107,140,255,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #0E131E 0%, #070A12 100%);
  border-right:1px solid var(--border2);padding:2.2rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.auth-brand::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><circle cx="1" cy="1" r="1" fill="rgba(255,255,255,0.04)"/></svg>');opacity:.4;pointer-events:none;}
.auth-card-wrap{display:flex;align-items:center;justify-content:center;padding:1.8rem 1.2rem;background:var(--bg);position:relative;}
.auth-card{width:100%;max-width:440px;background:linear-gradient(180deg, rgba(18,26,46,0.98) 0%, rgba(15,22,38,0.99) 100%);border:1px solid var(--border);border-radius:20px;padding:1.6rem;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, var(--gold), #FFD54F);opacity:.9;}
.auth-tabs{display:flex;gap:.35rem;margin-bottom:1.2rem;background:rgba(10,14,24,0.9);border:1px solid var(--border);border-radius:11px;padding:.3rem;}
.auth-tab{flex:1;text-align:center;padding:.58rem;border-radius:8px;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--textSec);transition:all .15s;font-family:"Outfit",sans-serif;user-select:none;}
.auth-tab.active{background:var(--gold);color:#070A12;box-shadow:0 2px 10px rgba(240,185,11,0.28);}
/* Hide top TxID search — user bola inko hata do */
div:has(> #txSearch){display:none!important;}
/* Quick-action tiles BACK (approved v3): rose / blue / gold */
.quick-actions{display:grid!important;}
.quick-actions .q-btn{border:none!important;color:#fff!important;border-radius:18px!important;
  padding:1rem .5rem!important;font-weight:800!important;box-shadow:0 8px 20px rgba(0,0,0,.35)!important;}
.quick-actions .q-btn:nth-child(1){background:linear-gradient(135deg,#b0436f,#93355a)!important;}
.quick-actions .q-btn:nth-child(2){background:linear-gradient(135deg,#1f7a94,#2b5cb8)!important;}
.quick-actions .q-btn:nth-child(3){background:linear-gradient(135deg,#b07a2a,#b0511f)!important;}
/* Wallet header fixes — Aggregated ... hide, TOTAL NET small+up, Live Rates one line */
.assets-ledger-header p{display:none!important;}
.assets-ledger-header div[style*="min-width:180px"]{display:block!important; padding:0.75rem 1.1rem!important; min-width:250px!important; width:280px!important; margin-top:-2.6rem!important; border-radius:12px!important; align-self:flex-start!important;} /* TOTAL NET wapas — Image 1 jaisa gap ke saath */
.assets-ledger-header div[style*="min-width:180px"] div[style*="font-size:1.4rem"]{font-size:1.15rem!important;}
#liveRateTicker{flex-wrap:nowrap!important; overflow-x:auto!important; gap:0.35rem!important; padding-bottom:0.15rem!important; scrollbar-width:none!important;}
#liveRateTicker::-webkit-scrollbar{display:none!important;}
#liveRateTicker span[style*="background"]{flex:0 0 auto!important; white-space:nowrap!important;}

/* ───────────────────────────────────────────────
   AURORA v3 THEME (approved preview, CSS-only)
   Soft aurora bg + muted jewel accents.
   Logic/IDs untouched. Hides above respected.
   ─────────────────────────────────────────────── */
:root{
--bg:#0A0E14; --bg2:#0D1219; --bg3:#111722;
--card:#10151E; --card2:#151C28; --cardHover:#1A2230;
--border:#222B3C; --border2:#1A2230;
}
body{
  background:
    radial-gradient(700px 420px at 8% -6%, rgba(240,185,11,0.07) 0%, transparent 60%),
    radial-gradient(640px 420px at 94% 4%, rgba(240,185,11,0.05) 0%, transparent 60%),
    radial-gradient(720px 480px at 50% 112%, rgba(0,212,146,0.05) 0%, transparent 60%),
    #0A0E14;
}
.hero-premium{
  background:linear-gradient(135deg,#1A2230 0%,#141A26 60%,#1A1A10 100%)!important;
  border:1px solid rgba(240,185,11,0.22)!important;
  box-shadow:0 16px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.25)!important;
}
.card{
  background:linear-gradient(180deg, rgba(20,26,38,0.92), rgba(14,19,30,0.94))!important;
  border:1px solid rgba(255,255,255,0.09)!important;
}
.matrix-tier-card{border:1px solid rgba(255,255,255,0.09)!important;}
/* Tier jewel tints beat inline backgrounds (approved preview) */
div:has(> .matrix-tier-card) > .matrix-tier-card:nth-of-type(1){
  background:linear-gradient(160deg,#4a3a1c 0%,#2a2113 55%,#14101a 100%)!important;}
div:has(> .matrix-tier-card) > .matrix-tier-card:nth-of-type(2){
  background:linear-gradient(160deg,#173f52 0%,#1d2f5e 55%,#12132a 100%)!important;}
div:has(> .matrix-tier-card) > .matrix-tier-card:nth-of-type(3){
  background:linear-gradient(160deg,#3f2a5e 0%,#2c2152 55%,#151230 100%)!important;}
/* Balance bento cards beat inline backgrounds */
.balance-grid > div{
  background:linear-gradient(180deg, rgba(28,20,60,0.9), rgba(16,12,38,0.94))!important;
  border-color:rgba(255,255,255,0.12)!important;}
.btn,.btn.primary{
  background:linear-gradient(90deg,#b07a2a,#b0436f)!important;
  border:none!important; color:#fff!important;
  box-shadow:0 6px 18px rgba(176,67,111,0.35)!important;
}
.btn.ghost,.btn.secondary{
  background:rgba(255,255,255,0.08)!important;
  border:1px solid rgba(255,255,255,0.22)!important; color:#fff!important; box-shadow:none!important;
}
/* Aurora sky: fixed soft blobs behind everything */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(480px 380px at 6% 4%, rgba(139,92,246,.20), transparent 65%),
    radial-gradient(460px 380px at 96% 8%, rgba(45,150,170,.16), transparent 65%),
    radial-gradient(560px 420px at 50% 108%, rgba(176,67,111,.14), transparent 65%);}
.binance-layout,.main-content{position:relative;z-index:1;}
/* Sidebar aurora */
.sidebar{background:linear-gradient(180deg, rgba(24,14,54,.96), rgba(12,10,32,.97))!important;}
.sidebar a.active{background:linear-gradient(90deg, rgba(139,92,246,.45), rgba(176,67,111,.35))!important;
  color:#fff!important;border-left-color:#e879f9!important;font-weight:700!important;}
.sidebar a.active .ico{color:#fcd34d!important;}
/* Welcome + hero jewel */
.welcome-bar{background:linear-gradient(135deg,#141A26 0%,#1A1A10 100%)!important;
  border:1px solid rgba(255,255,255,0.22)!important;}
/* Cards: aurora top stripe */
.card::before{background:linear-gradient(90deg,rgba(240,185,11,.55),rgba(240,185,11,0))!important;height:2px!important;}
/* Tables + tabs aurora */
th{background:rgba(10,14,24,.92)!important;}
.tab.active{background:linear-gradient(90deg,#F0B90B,#FFD54F)!important;color:#070A12!important;border-color:transparent!important;}

/* ───────────────────────────────────────────────
   AURORA AUTH + LANDING (v53): soft 3D + motion
   IDs/logic untouched.
   ─────────────────────────────────────────────── */
@keyframes glow{0%,100%{box-shadow:0 6px 24px rgba(240,185,11,.38),0 0 0 1px rgba(255,255,255,.18) inset;transform:rotate(-4deg) scale(1)}50%{box-shadow:0 6px 34px rgba(139,92,246,.6),0 0 0 1px rgba(255,255,255,.25) inset;transform:rotate(4deg) scale(1.06)}}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes sweep{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
.auth-card{border-color:rgba(139,92,246,.4)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 44px rgba(139,92,246,.16)!important;
  transform-style:preserve-3d;transition:transform .2s ease,box-shadow .2s ease;}
.auth-card::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);
  animation:sweep 5.5s ease-in-out infinite;pointer-events:none;}
.auth-brand{background:radial-gradient(600px 400px at 80% 0%, rgba(139,92,246,.14) 0%, transparent 60%),radial-gradient(500px 380px at 10% 90%, rgba(176,67,111,.10) 0%, transparent 60%),linear-gradient(180deg, #12102e 0%, #0b0820 100%)!important;}
.float-c{position:absolute;font-size:1.5rem;pointer-events:none;z-index:1;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));animation:floatY 4s ease-in-out infinite;}
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr;}
  .auth-brand{display:flex!important;padding:1.2rem 1rem 1rem!important;border-right:none!important;border-bottom:1px solid var(--border2);min-height:auto!important;}
  .auth-brand > div{max-width:100%!important;width:100%!important;}
  .auth-brand img{height:auto!important;max-height:180px!important;object-fit:cover!important;width:100%!important;}
  .auth-brand p{font-size:.82rem!important;line-height:1.5!important;word-break:break-word!important;overflow-wrap:anywhere!important;}
  .auth-card-wrap{padding:1rem 1rem 1.2rem!important;}
  .auth-card{padding:1.15rem!important;max-width:100%!important;}
}

/* ───────────────────────────────────────────────
   PHASE 3B-1 — GLOBAL VISUAL THEME + SHELL
   (CSS-only foundation. IDs/classes/JS untouched.
   dashboard.js, backend, APIs, DB, workers frozen.)
   ─────────────────────────────────────────────── */
:root{
  /* Extended tokens (existing names preserved above) */
  --bg-deep:#05070D;
  --gold-deep:#9A7B00;
  --cyan-glow:rgba(34,211,238,0.10);
  --violet-glow:rgba(139,92,246,0.12);
  --success:#00D492;
  --danger:#FF4D6B;
  --focus-ring:rgba(240,185,11,0.35);
  --shell-max:1280px;
}
/* Layered cinematic background (body::before already used by Aurora;
   use ::after as extra depth layer, pointer-events safe) */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 380px at 88% 88%, rgba(34,211,238,0.05) 0%, transparent 60%),
    radial-gradient(620px 420px at 12% 78%, rgba(240,185,11,0.05) 0%, transparent 60%);
}
@supports not (backdrop-filter:blur(1px)){
  body::before,body::after{display:none;}
  header,.sidebar,.card,.modal-card{background:#0E131E!important;}
}
/* Page overflow guard (390x844 / 412x915 / desktop) */
html,body{overflow-x:hidden;max-width:100vw;}
.binance-layout,.main-content,main section{min-width:0;}
img,video,canvas,svg{max-width:100%;}
/* Header shell (behavior untouched) */
header{
  border-bottom:1px solid rgba(255,255,255,0.07)!important;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 32px rgba(0,0,0,0.42)!important;
}
/* Sidebar shell (data-sec + showSec untouched; hidden items stay hidden) */
.sidebar{
  box-shadow:8px 0 32px rgba(0,0,0,0.35);
}
.sidebar a{position:relative;}
.sidebar a.active::after{
  content:"";position:absolute;right:10px;top:50%;width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px var(--gold);transform:translateY(-50%);
  pointer-events:none;
}
/* Card depth system (class names preserved) */
.card,.stat-card,.wallet-card,.feature-card{
  transform-style:preserve-3d;
}
.card:hover,.stat-card:hover,.wallet-card:hover,.feature-card:hover{transform:translateY(-2px);}
/* Button hierarchy (existing .btn/.secondary/.ghost/.small preserved) */
.btn{min-height:48px;}
.btn.small{min-height:40px;}
.btn.success{
  background:linear-gradient(180deg,#00D492,#00A973);border-color:#00D492;color:#04120C;
  box-shadow:0 2px 12px rgba(0,212,146,0.30);
}
.btn.danger{
  background:linear-gradient(180deg,#FF4D6B,#D93654);border-color:#FF4D6B;color:#fff;
  box-shadow:0 2px 12px rgba(255,77,107,0.30);
}
.btn.success:hover{filter:brightness(1.06);}
.btn.danger:hover{filter:brightness(1.06);}
/* Inputs / forms (behavior untouched) */
input,textarea,select{min-height:48px;}
input:focus-visible,textarea:focus-visible,select:focus-visible,
button:focus-visible,a:focus-visible,.tab:focus-visible,.auth-tab:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
  box-shadow:0 0 0 4px var(--focus-ring);
}
@supports not selector(:focus-visible){
  input:focus,textarea:focus,select:focus,button:focus,a:focus{outline:2px solid var(--gold);outline-offset:2px;}
}
/* Modal foundation (existing IDs + JS injection preserved) */
#annPopup,#receivePopup,#referralPopup,#sendPopup,
#vbSecretModal,#ticketMyViewModal,#userTxEyeModal,.modal-overlay{
  padding:1rem;
  padding-top:max(1rem, env(safe-area-inset-top));
  padding-bottom:max(1rem, env(safe-area-inset-bottom));
}
#annPopup .card,#receivePopup .card,#referralPopup .card,#sendPopup .card,
#vbSecretModal .card,#ticketMyViewModal .card,#userTxEyeModal .card{
  border-radius:18px;
  box-shadow:0 24px 64px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
/* Tables / ledgers (data + behavior untouched) */
table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
th{position:sticky;top:0;}
tr{transition:background .12s ease;}
/* Badges / status (existing states only, no new semantics) */
.badge.ok{box-shadow:0 0 12px rgba(0,212,146,0.18);}
.badge.err{box-shadow:0 0 12px rgba(255,77,107,0.18);}
.badge.warn{box-shadow:0 0 12px rgba(240,185,11,0.18);}
/* 3D / depth — lightweight CSS only (no WebGL, no canvas) */
.card,.modal-card,.auth-card{perspective:800px;}
.lift{transition:transform .18s ease, box-shadow .18s ease;}
.lift:hover{transform:translateY(-2px);}
/* Motion: lightweight only + reduced-motion guard */
.card,.btn,.tab,.sidebar a,.stat-card,.wallet-card{transition-timing-function:cubic-bezier(.2,.8,.2,1);}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .shimmer::after,.auth-card::after{display:none!important;}
  .vault-state .dot{animation:none!important;}
}
/* Mobile foundation (drawer preserved; NO bottom nav in this phase) */
.main-content{max-width:var(--shell-max);}
@supports (padding:env(safe-area-inset-bottom)){
  .sidebar{padding-bottom:env(safe-area-inset-bottom);}
  header{padding-top:env(safe-area-inset-top);}
}
/* WebView fallback: blur off -> solid */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header,.sidebar,.modal-overlay,.header-user-box{background:#0E131E!important;}
}

/* ───────────────────────────────────────────────
   PHASE 3B-2 — DASHBOARD CINEMATIC VISUALS
   Scoped to #sec-dashboard only. No IDs/handlers/
   APIs/logic touched. dashboard.js frozen.
   ─────────────────────────────────────────────── */
#sec-dashboard{position:relative;}
/* Welcome / identity hero */
#sec-dashboard .welcome-bar{box-shadow:0 16px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.22)!important;}
#sec-dashboard .welcome-bar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.07) 48%, transparent 62%);
}
/* Portfolio hero: per-card identity glow (gold/blue/green/red order) */
#sec-dashboard .balance-grid-4 > div{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-dashboard .balance-grid-4 > div:hover{transform:translateY(-2px);}
#sec-dashboard .balance-grid-4 > div:nth-child(1):hover{box-shadow:0 12px 30px rgba(240,185,11,0.20);}
#sec-dashboard .balance-grid-4 > div:nth-child(2):hover{box-shadow:0 12px 30px rgba(107,140,255,0.20);}
#sec-dashboard .balance-grid-4 > div:nth-child(3):hover{box-shadow:0 12px 30px rgba(0,212,146,0.20);}
#sec-dashboard .balance-grid-4 > div:nth-child(4):hover{box-shadow:0 12px 30px rgba(255,77,107,0.18);}
/* Quick actions: depth + touch target (handlers untouched) */
#sec-dashboard .quick-actions .q-btn{min-height:48px;transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;}
#sec-dashboard .quick-actions .q-btn:hover{transform:translateY(-2px);filter:brightness(1.05);}
#sec-dashboard .quick-actions .q-btn:active{transform:translateY(0);}
/* Price ticker (IDs priceETH/BNB/TRX/USDT/POL untouched, values live) */
#sec-dashboard .welcome-telemetry{box-shadow:0 4px 18px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);}
#liveTicker span{white-space:nowrap;}
/* Matrix / referral / vault summary cards */
#sec-dashboard section .card, #sec-dashboard > div:nth-of-type(4) > div{transition:transform .18s ease, box-shadow .18s ease;}
/* Recent ledger rows (real data only; generic row styling) */
#figmaRecentTx > div{border-radius:10px;transition:background .12s ease;}
#figmaRecentTx > div:hover{background:rgba(22,34,64,0.55);}
#figmaRecentTx{scrollbar-width:thin;}
/* Announcement banner (API/behavior untouched) */
#annBanner:empty{display:none!important;}
#annBanner .card{border-color:var(--borderGold)!important;}
/* Cinematic reveal (lightweight, once; reduced-motion guarded globally + here) */
@keyframes dashRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#sec-dashboard.dash-cine > div{animation:dashRise .45s cubic-bezier(.2,.8,.2,1) both;}
#sec-dashboard.dash-cine > div:nth-child(2){animation-delay:.04s;}
#sec-dashboard.dash-cine > div:nth-child(3){animation-delay:.08s;}
#sec-dashboard.dash-cine > div:nth-child(4){animation-delay:.12s;}
#sec-dashboard.dash-cine > div:nth-child(5){animation-delay:.16s;}
@media (prefers-reduced-motion: reduce){
  #sec-dashboard.dash-cine > div{animation:none!important;}
  #sec-dashboard .welcome-bar::after{display:none!important;}
}
/* Dashboard mobile guards (drawer nav preserved; no bottom nav) */
#sec-dashboard,#sec-dashboard > div{min-width:0;max-width:100%;}
@media (max-width: 768px){
  #sec-dashboard .balance-grid-4{grid-template-columns:1fr 1fr!important;}
  #sec-dashboard .quick-actions{grid-template-columns:1fr!important;}
  #figmaTotalPortfolio,#figmaUsdtLiquidity,#figmaEvm,#figmaTron{font-size:1.35rem!important;overflow-wrap:anywhere;}
}
@media (max-width: 480px){
  #sec-dashboard .balance-grid-4{grid-template-columns:1fr!important;}
}

/* ───────────────────────────────────────────────
   PHASE 3B-3 — WALLET & ASSETS CINEMATIC VISUALS
   Scoped to #sec-assets only. No IDs/handlers/
   APIs/logic touched. dashboard.js frozen.
   Six assets only: ETH BNB TRX POL BSC_USDT TRC20_USDT
   (BSC vs TRC20 USDT stay visually distinct).
   ─────────────────────────────────────────────── */
#sec-assets{position:relative;}
/* Wallet hero: total-net card glow + ticker chips */
#sec-assets .total-net-card{
  box-shadow:0 16px 44px rgba(0,0,0,0.45), 0 0 0 1px rgba(240,185,11,0.08), inset 0 1px 0 rgba(255,255,255,0.06)!important;
}
#sec-assets .total-net-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(240,185,11,0.35), transparent);
}
#sec-assets .total-net-card{position:relative;overflow:hidden;}
#liveRateTicker > span{transition:border-color .15s ease, transform .15s ease;}
#liveRateTicker > span:hover{border-color:#2A3F6B!important;transform:translateY(-1px);}
/* Injected asset cards (#assetsBox): hover depth (JS HTML untouched) */
#sec-assets #assetsBox .card{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-assets #assetsBox .card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.42)!important;}
#sec-assets #assetsWallets{font-size:.72rem;color:var(--textSec);}
/* Asset ledger table (#assetsTable): premium rows + action buttons */
#sec-assets #assetsTable table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
#sec-assets #assetsTable tbody tr{transition:background .12s ease;}
#sec-assets #assetsTable tbody tr:hover td{background:rgba(30,45,85,0.55);}
#sec-assets #assetsTable td button{
  min-width:40px;min-height:40px;border-radius:9px;font-size:.9rem;
  border:1px solid transparent;transition:all .14s ease;
}
#sec-assets #assetsTable td button:hover{border-color:var(--borderGold);background:rgba(240,185,11,0.08);}
/* Send/Receive panes + address rows (IDs/handlers untouched) */
#sec-assets #walletSendPane,#sec-assets #walletReceivePane{transition:opacity .18s ease;}
#sec-assets #tabSendBtn,#sec-assets #tabReceiveBtn{min-height:40px;}
#sec-assets #evmAddr,#sec-assets #tronAddr{overflow-wrap:anywhere;}
/* Wallet entrance (lightweight, once; reduced-motion guarded) */
@keyframes walletRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#sec-assets.wallet-cine > div{animation:walletRise .45s cubic-bezier(.2,.8,.2,1) both;}
#sec-assets.wallet-cine > div:nth-child(2){animation-delay:.05s;}
#sec-assets.wallet-cine > div:nth-child(3){animation-delay:.1s;}
@media (prefers-reduced-motion: reduce){
  #sec-assets.wallet-cine > div{animation:none!important;}
  #sec-assets .total-net-card::before{display:none!important;}
}
/* Wallet mobile guards (drawer nav preserved; no bottom nav) */
#sec-assets,#sec-assets > div{min-width:0;max-width:100%;}
@media (max-width: 768px){
  #sec-assets .total-net-card{flex-direction:column!important;align-items:stretch!important;}
  #sec-assets #assetsTable{font-size:.75rem;}
}

/* ───────────────────────────────────────────────
   PHASE 3B-4 — P2P MATRIX CINEMATIC VISUALS
   Scoped to #sec-matrix only. No IDs/handlers/tiers/
   amounts/logic touched. dashboard.js + backend frozen.
   Tiers: Gold($25u/$50req/70-30) Platinum($50u/$100req/75-25)
   Diamond($100u/$200req/75-25). No fake nodes/members.
   ─────────────────────────────────────────────── */
#sec-matrix{position:relative;}
/* Matrix hero: node badge glow (text content live) */
#sec-matrix #matrixNodeBadge{box-shadow:0 0 14px rgba(240,185,11,0.18);}
/* Stat cards: hover depth (values live) */
#sec-matrix > div:nth-child(2) > div{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-matrix > div:nth-child(2) > div:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.40);border-color:#2A3F6B!important;}
/* Tier identity: gold / platinum / diamond rails + glow (names/reqs untouched) */
#sec-matrix .matrix-tier-card{position:relative;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-matrix .matrix-tier-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}
#sec-matrix .matrix-tier-card:hover{transform:translateY(-2px);}
#sec-matrix .matrix-tier-card:nth-of-type(1){border-left:3px solid #F0B90B!important;}
#sec-matrix .matrix-tier-card:nth-of-type(1):hover{box-shadow:0 12px 30px rgba(240,185,11,0.20);}
#sec-matrix .matrix-tier-card:nth-of-type(2){border-left:3px solid #6B8CFF!important;}
#sec-matrix .matrix-tier-card:nth-of-type(2):hover{box-shadow:0 12px 30px rgba(107,140,255,0.20);}
#sec-matrix .matrix-tier-card:nth-of-type(3){border-left:3px solid #93C5FD!important;}
#sec-matrix .matrix-tier-card:nth-of-type(3):hover{box-shadow:0 12px 30px rgba(147,197,253,0.20);}
/* Join buttons: touch target + lift (handlers/validation untouched) */
#sec-matrix .matrix-tier-card button{min-height:48px;transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;}
#sec-matrix .matrix-tier-card button:hover{transform:translateY(-1px);filter:brightness(1.06);}
/* Progress rails (widths driven live by JS) */
#sec-matrix #goldProgress,#sec-matrix #platProgress,#sec-matrix #diamondProgress{transition:width .4s ease;}
/* Status badges (text/logic untouched; decorative pulse only) */
#sec-matrix #goldTierBadge,#sec-matrix #platTierBadge,#sec-matrix #diamondTierBadge{letter-spacing:.04em;}
/* Live matrix lists (#matrixMy/Upline/Tree render real rows only) */
#sec-matrix #matrixMy table,#sec-matrix #matrixUpline table,#sec-matrix #matrixTree table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
#sec-matrix #matrixMy tbody tr:hover td,#sec-matrix #matrixUpline tbody tr:hover td,#sec-matrix #matrixTree tbody tr:hover td{background:rgba(30,45,85,0.55);}
/* Auto-reentry row + refresh actions */
#sec-matrix #autoReentryCheck{accent-color:var(--gold);}
#sec-matrix .btn.small{min-height:40px;}
/* Matrix entrance (lightweight, once; reduced-motion guarded) */
@keyframes matrixRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#sec-matrix.matrix-cine > div{animation:matrixRise .45s cubic-bezier(.2,.8,.2,1) both;}
#sec-matrix.matrix-cine > div:nth-child(2){animation-delay:.05s;}
#sec-matrix.matrix-cine > div:nth-child(3){animation-delay:.1s;}
@media (prefers-reduced-motion: reduce){
  #sec-matrix.matrix-cine > div{animation:none!important;}
  #sec-matrix .matrix-tier-card::before{display:none!important;}
}
/* Matrix mobile guards (drawer nav preserved; no bottom nav) */
#sec-matrix,#sec-matrix > div{min-width:0;max-width:100%;}
@media (max-width: 768px){
  #sec-matrix #matrixMy,#sec-matrix #matrixUpline,#sec-matrix #matrixTree{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ───────────────────────────────────────────────
   PHASE 3B-FINAL — REMAINING SCREENS (Matrix kept
   from 3B-4; 3B-1/3B-2/3B-3 intact). Scoped only.
   No IDs/handlers/APIs/logic touched. dashboard.js
   frozen. No fake data. No new features.
   ─────────────────────────────────────────────── */
/* — Transactions (sec-history) — */
#sec-history{position:relative;}
#sec-history .hist-stats > div{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-history .hist-stats > div:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.40);border-color:#2A3F6B!important;}
#sec-history #historyBox table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
#sec-history #historyBox tbody tr{transition:background .12s ease;}
#sec-history #historyBox tbody tr:hover td{background:rgba(30,45,85,0.55);}
#sec-history .tabs .tab{min-height:40px;}
#sec-history #exportLedgerBtn{min-height:44px;}
/* — Vault (sec-vault) — */
#sec-vault{position:relative;}
#sec-vault > div:nth-child(2) > div{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-vault > div:nth-child(2) > div:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.40);}
#sec-vault #vaultLedger table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
#sec-vault #vaultLedger tbody tr:hover td{background:rgba(30,45,85,0.55);}
#sec-vault button{min-height:44px;}
/* — Referral (sec-referral) — */
#sec-referral{position:relative;}
#sec-referral > div:nth-child(2) > div{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
#sec-referral > div:nth-child(2) > div:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.40);}
#sec-referral #refActivityTable table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
#sec-referral #refActivityTable tbody tr:hover td{background:rgba(30,45,85,0.55);}
#sec-referral button{min-height:44px;}
#sec-referral #refCode{overflow-wrap:anywhere;}
/* — Security Center (sec-security): visual only, existing controls untouched — */
#sec-security{position:relative;}
#sec-security .card button{min-height:44px;}
#sec-security input{font-family:"JetBrains Mono",monospace;}
#sec-security #totpQr{background:#fff;border-radius:10px;}
/* — Profile (sec-profile) — */
#sec-profile{position:relative;}
#sec-profile #profileAvatar{box-shadow:0 6px 22px rgba(240,185,11,0.28), 0 0 0 1px rgba(255,255,255,0.06);}
#sec-profile #bankList > div{transition:border-color .15s ease, background .15s ease;}
#sec-profile #bankList > div:hover{border-color:#2A3F6B;}
#sec-profile .card button{min-height:44px;}
/* Phase 8: Profile hero + grid (profile-scoped only) */
#sec-profile .prof-hero{background:linear-gradient(135deg, rgba(14,19,30,0.98) 0%, rgba(24,22,10,0.85) 100%);border:1px solid rgba(240,185,11,0.18);border-radius:16px;padding:1.05rem;display:flex;gap:1rem;align-items:center;margin-bottom:1rem;box-shadow:0 6px 20px rgba(0,0,0,0.22);}
#sec-profile .prof-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:1rem;margin-bottom:0;align-items:start;}
#sec-profile .prof-card{margin:0;}
#sec-profile .prof-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem;margin-bottom:1rem;}
#sec-profile label{font-size:.72rem;color:var(--textSec);display:block;margin-bottom:.3rem;}
#sec-profile input:focus-visible,#sec-profile textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
@media (max-width: 900px){
  #sec-profile .prof-grid{grid-template-columns:1fr;}
  #sec-profile .prof-hero{flex-wrap:wrap;}
}
/* — Support / Tickets (sec-tickets): visual only, existing controls untouched — */
#sec-tickets{position:relative;min-width:0;max-width:100%;}
#sec-tickets .tickets-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:start;}
#sec-tickets .tickets-side{margin:0;background:linear-gradient(135deg, rgba(14,19,30,0.98) 0%, rgba(24,22,10,0.85) 100%);border:1px solid rgba(240,185,11,0.18);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.25rem;min-height:300px;box-shadow:0 6px 20px rgba(0,0,0,0.22);}
#sec-tickets .card button{min-height:44px;}
#sec-tickets #myTicketsBox{overflow-x:auto;}
#sec-tickets label{font-size:.72rem;color:var(--textSec);display:block;margin-bottom:.3rem;}
#sec-tickets input:focus-visible,#sec-tickets textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
#sec-tickets.tickets-cine > div,#sec-tickets.tickets-cine > section{animation:screenRise .45s cubic-bezier(.2,.8,.2,1) both;}
@media (prefers-reduced-motion: reduce){
  #sec-tickets.tickets-cine > div,#sec-tickets.tickets-cine > section{animation:none!important;}
}
@media (max-width: 900px){
  #sec-tickets .tickets-grid{grid-template-columns:1fr;}
  #sec-tickets .tickets-side{min-height:0;}
}
@media (max-width: 768px){
  #sec-tickets #myTicketsBox{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
/* — Transactions toolbar (sec-history): search + actions one row, filters second — */
#sec-history .hist-toolbar{display:flex;gap:.6rem;margin-bottom:.75rem;flex-wrap:wrap;align-items:stretch;}
#sec-history .hist-search{flex:1;min-width:220px;}
#sec-history .hist-search input{width:100%;background:rgba(10,14,24,0.9);border:1px solid var(--border);border-radius:10px;padding:.55rem .8rem;color:var(--text);font-size:.78rem;}
#sec-history .hist-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
#sec-history .hist-filter-row{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap;align-items:center;}
@media (max-width: 640px){
  #sec-history .hist-toolbar{flex-direction:column;align-items:stretch;gap:.5rem;}
  #sec-history .hist-search{min-width:0;width:100%;}
  #sec-history .hist-actions{width:100%;display:flex;gap:.5rem;align-items:stretch;}
  #sec-history .hist-actions>*{flex:1 1 0;min-width:0;}
  #sec-history .hist-actions button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;}
  #sec-history .hist-filter-row{flex-direction:column;align-items:stretch;gap:.5rem;}
  #sec-history .hist-filter-row>div:last-child{margin-left:0!important;flex-wrap:wrap;justify-content:flex-start;}
}
/* — INR desk form (rendered by dashboard.js into #sec-inr): labeled grid, aligned rows — */
#sec-inr .inr-side-row{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between;}
#sec-inr .inr-seg{display:inline-flex;gap:4px;background:rgba(22,34,64,.9);border:1px solid var(--border);border-radius:13px;padding:4px;}
#sec-inr .inr-seg .btn{flex:1;border:none!important;background:transparent!important;color:var(--textSec)!important;box-shadow:none!important;border-radius:9px!important;padding:.55rem 1.2rem!important;}
#sec-inr .inr-seg .btn:not(.secondary){background:linear-gradient(135deg,#F0B90B,#FFD54F)!important;color:#070A12!important;font-weight:800;}
#sec-inr .inr-rate{font-size:.85rem;color:var(--gold);font-weight:800;font-family:"JetBrains Mono",monospace;background:rgba(240,185,11,.1);border:1px solid rgba(240,185,11,.25);padding:.45rem .8rem;border-radius:10px;}
#sec-inr .inr-form-grid{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:.85rem;font-size:.82rem;align-items:end;}
#sec-inr .inr-form-grid>div:nth-child(3):not(.inr-pin-row){grid-column:1/-1;}
#sec-inr .inr-form-grid label{font-size:.68rem;color:var(--textSec);display:block;margin-bottom:.35rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
#sec-inr .inr-form-grid select,#sec-inr .inr-form-grid input{width:100%;margin-top:0;height:46px;font-size:.9rem;font-weight:600;}
#sec-inr .inr-pin-row{display:flex;gap:.5rem;align-items:flex-end;}
#sec-inr .inr-pin-row>div{flex:1;min-width:0;}
#sec-inr .inr-pin-row .btn{flex-shrink:0;height:46px;padding:0 1rem!important;font-weight:800;white-space:nowrap;}
@media (max-width: 900px){
  #sec-inr .inr-form-grid{grid-template-columns:1fr;}
}
@media (max-width: 480px){
  #sec-inr .inr-pin-row{flex-wrap:wrap;}
  #sec-inr .inr-pin-row .btn{width:100%;}
}
/* — Agent (sec-agent): visual only, existing controls untouched — */
#sec-agent{position:relative;min-width:0;max-width:100%;}
#sec-agent .agent-hero{background:rgba(10,14,24,0.9);border:1px solid var(--border);border-radius:14px;padding:.95rem;margin-bottom:1rem;display:flex;gap:.7rem;align-items:center;}
#sec-agent .agent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-bottom:0;align-items:start;}
#sec-agent .agent-card{margin:0;}
#sec-agent .agent-card button{min-height:44px;}
#sec-agent #agentComms{overflow-x:auto;}
#sec-agent.agent-cine > div{animation:screenRise .45s cubic-bezier(.2,.8,.2,1) both;}
@media (prefers-reduced-motion: reduce){
  #sec-agent.agent-cine > div{animation:none!important;}
}
@media (max-width: 768px){
  #sec-agent #agentComms{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}
/* — Logout confirmation modal (calls existing logout()) — */
#logoutConfirmModal{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
#logoutConfirmModal .logout-cine-card{
  background:linear-gradient(180deg, rgba(28,20,60,0.97) 0%, rgba(14,11,36,0.98) 100%)!important;
  border:1px solid rgba(240,185,11,0.25)!important;
  box-shadow:0 24px 64px rgba(0,0,0,0.6), 0 0 32px rgba(240,185,11,0.12), inset 0 1px 0 rgba(255,255,255,0.08)!important;
}
#logoutConfirmModal .btn{min-height:48px;}
/* — Entrances (lightweight, once; reduced-motion guarded) — */
@keyframes screenRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#sec-history.hist-cine > div,#sec-vault.vault-cine > div,#sec-referral.ref-cine > div,
#sec-security.seccine > div,#sec-profile.prof-cine > div{animation:screenRise .45s cubic-bezier(.2,.8,.2,1) both;}
@media (prefers-reduced-motion: reduce){
  #sec-history.hist-cine > div,#sec-vault.vault-cine > div,#sec-referral.ref-cine > div,
  #sec-security.seccine > div,#sec-profile.prof-cine > div{animation:none!important;}
}
/* — Remaining-screens mobile guards (drawer nav preserved; no bottom nav) — */
#sec-history,#sec-history > div,#sec-vault,#sec-vault > div,#sec-referral,#sec-referral > div,
#sec-security,#sec-profile{min-width:0;max-width:100%;}
@media (max-width: 768px){
  #sec-history #historyBox,#sec-vault #vaultLedger,#sec-referral #refActivityTable{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #logoutConfirmModal .logout-cine-card{max-width:94vw!important;}
}

/* ───────────────────────────────────────────────
   PHASE 1 — CINEMATIC 3D DASHBOARD ONLY
   (CSS-only, additive, dashboard-scoped.
   IDs/classes/onclick/data-sec/JS hooks untouched.
   dashboard.js, backend, APIs, DB, workers frozen.
   No new dependencies. No WebGL/Three.js.)
   ─────────────────────────────────────────────── */
/* 1. Perspective stage (dashboard section only) */
#sec-dashboard.cine-stage{perspective:1500px;}
/* 2. Atmosphere drift — animates the existing 3B-1 body::after
   depth layer with opacity + composited transform only */
body::after{animation:cineAtmo 26s ease-in-out infinite alternate;}
@keyframes cineAtmo{from{opacity:.65;transform:scale(1);}to{opacity:1;transform:scale(1.05);}}
/* 3. Hero / portfolio card — layered depth + metallic edge light */
#sec-dashboard .cine-hero{
  position:relative;transform-style:preserve-3d;transform:translateZ(0);
  box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 44px rgba(240,185,11,0.10), inset 0 1px 0 rgba(255,255,255,0.07)!important;
  border-color:rgba(240,185,11,0.22)!important;
}
/* Hero light sweep — clipped by the hero's own overflow:hidden */
#sec-dashboard .cine-hero::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.10),transparent);
  transform:translateX(-140%) skewX(-16deg);
  animation:cineSweep 9s ease-in-out infinite;pointer-events:none;
}
@keyframes cineSweep{0%{transform:translateX(-140%) skewX(-16deg);}55%,100%{transform:translateX(320%) skewX(-16deg);}}
/* Hero inner grid — barely-there floating depth (grandchild: no entrance conflict) */
#sec-dashboard .cine-hero .balance-grid{animation:cineFloat 8s ease-in-out infinite;}
@keyframes cineFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
/* 4. Portfolio value — elegant animated glow, real values only */
#sec-dashboard #figmaTotalPortfolio{animation:cineGlow 5s ease-in-out infinite;}
@keyframes cineGlow{
  0%,100%{text-shadow:0 0 12px rgba(240,185,11,0.25);}
  50%{text-shadow:0 0 22px rgba(240,185,11,0.45), 0 0 44px rgba(240,185,11,0.15);}
}
/* 5. Quick actions — premium 3D buttons (existing .q-btn, no new buttons) */
#sec-dashboard .cine-qa{perspective:900px;}
#sec-dashboard .cine-qa .q-btn{
  position:relative;overflow:hidden;transform-style:preserve-3d;
  box-shadow:0 6px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12)!important;
}
#sec-dashboard .cine-qa .q-btn:hover{transform:translateY(-2px) translateZ(10px)!important;filter:brightness(1.06);}
#sec-dashboard .cine-qa .q-btn:active{transform:translateY(1px) scale(.98)!important;filter:brightness(.97);}
#sec-dashboard .cine-qa .q-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:translateX(-150%) skewX(-16deg);pointer-events:none;
}
#sec-dashboard .cine-qa .q-btn:hover::after{animation:cineSheen .7s ease;}
@keyframes cineSheen{to{transform:translateX(320%) skewX(-16deg);}}
/* 6. Asset/summary cards — subtle 3D hover (existing colored glows preserved) */
#sec-dashboard .cine-hero .balance-grid-4{perspective:1000px;}
#sec-dashboard .cine-hero .balance-grid-4 > div{transform-style:preserve-3d;}
#sec-dashboard .cine-hero .balance-grid-4 > div:hover{transform:translateY(-2px) translateZ(8px);}
/* 7. Ledger rows — premium hover illumination (JS-rendered rows, generic) */
#sec-dashboard .cine-ledger #figmaRecentTx > div{transition:background .15s ease,box-shadow .15s ease;border-radius:10px;}
#sec-dashboard .cine-ledger #figmaRecentTx > div:hover{background:rgba(30,45,85,0.5);box-shadow:0 4px 16px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(240,185,11,0.12);}
/* 8. Reduced motion — stillness first, keep simple fades */
@media (prefers-reduced-motion: reduce){
  body::after{animation:none!important;}
  #sec-dashboard .cine-hero::after{display:none!important;}
  #sec-dashboard .cine-hero .balance-grid{animation:none!important;}
  #sec-dashboard #figmaTotalPortfolio{animation:none!important;}
  #sec-dashboard .cine-qa .q-btn:hover::after{animation:none!important;}
  #sec-dashboard.cine-stage{perspective:none;}
  #sec-dashboard .cine-hero .balance-grid-4 > div:hover{transform:translateY(-2px);}
  #sec-dashboard .cine-qa .q-btn:hover{transform:translateY(-2px)!important;}
}
/* 9. Dashboard mobile guards — perspective off on touch, no overflow */
@media (max-width: 768px){
  #sec-dashboard.cine-stage{perspective:none;}
  #sec-dashboard .cine-hero .balance-grid{animation:none;}
  #sec-dashboard .cine-hero::after{width:60%;}
  #sec-dashboard .cine-qa{perspective:none;}
}

/* ───────────────────────────────────────────────
   STITCH REDESIGN — PRIMARY REFERENCE
   stitch_vallet.buzz_user_panel_redesign (mobile 335px)
   + (1) desktop variant (1354px). DESIGN.md tokens.
   Dashboard-scoped. IDs/JS hooks untouched.
   dashboard.js, backend, DB, workers frozen.
   Decisions: Buy/Sell→sec-inr, Referral card hidden
   (IDs kept), bottom-nav added (existing nav logic).
   ─────────────────────────────────────────────── */
#sec-dashboard{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
#sec-dashboard .crypto-mono{font-family:'JetBrains Mono',monospace;}
/* Flatten old violet/pink bias inside dashboard (inline-style overrides) */
#sec-dashboard .welcome-bar{background:linear-gradient(180deg,#141821 0%,#0e1220 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;box-shadow:0 12px 32px rgba(0,0,0,0.45)!important;}
#sec-dashboard .cine-hero{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;border-top:1px solid rgba(255,255,255,0.14)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
/* Stitch has no continuous 3D motion — neutralize Phase-1 motion in dashboard */
#sec-dashboard .cine-hero::after{display:none!important;}
#sec-dashboard .cine-hero .balance-grid{animation:none!important;}
#sec-dashboard #figmaTotalPortfolio{animation:none!important;}
#sec-dashboard .cine-hero .balance-grid-4 > div:hover{transform:translateY(-2px);}
#sec-dashboard .cine-qa .q-btn:hover{transform:translateY(-1px)!important;}
#sec-dashboard .cine-qa .q-btn:hover::after{display:none!important;}
/* Masked privacy balances (values stay in DOM for dashboard.js; display masked) */
#sec-dashboard.masked .maskable{color:transparent!important;text-shadow:none!important;position:relative;}
#sec-dashboard.masked .maskable::after{content:'••••••';position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--text);font:inherit;letter-spacing:.02em;white-space:nowrap;}
/* Stitch quad tiles — per-domain gradients (DESIGN.md action pairs) */
#sec-dashboard .stitch-qa{perspective:none;}
#sec-dashboard .stitch-qa .q-btn{min-height:64px;box-shadow:0 8px 20px -6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22)!important;transition:transform .12s ease, filter .12s ease;}
#sec-dashboard .stitch-qa .q-btn:hover{transform:translateY(-1px)!important;filter:brightness(1.08);}
#sec-dashboard .stitch-qa .q-btn:active{transform:scale(.985)!important;}
#sec-dashboard .stitch-qa .qa-buy{background:linear-gradient(135deg,#10B981 0%,#34D399 100%)!important;}
#sec-dashboard .stitch-qa .qa-sell{background:linear-gradient(135deg,#F97316 0%,#FBBF24 100%)!important;}
#sec-dashboard .stitch-qa .qa-send{background:linear-gradient(135deg,#F0B90B 0%,#B8860B 100%)!important;}
#sec-dashboard .stitch-qa .qa-receive{background:linear-gradient(135deg,#1E40AF 0%,#0369A1 100%)!important;}
#sec-dashboard .stitch-qa .q-btn::after{display:none!important;}
/* Custody rows + strip hover */
#sec-dashboard .stitch-custody > div > div[onclick]:hover{border-color:rgba(212,175,55,0.4)!important;background:rgba(212,175,55,0.05);}
#sec-dashboard .stitch-strip button:hover{filter:brightness(1.1);}
/* Sidebar — Stitch solid-gold active pill (nav logic untouched) */
.sidebar a.active{background:linear-gradient(90deg,#F0B90B,#E8A800)!important;color:#070A12!important;font-weight:800!important;border-left-color:transparent!important;box-shadow:0 4px 16px rgba(240,185,11,0.25)!important;}
.sidebar a.active .ico{color:#070A12!important;}
.sidebar a.active::after{display:none!important;}
/* Stitch mobile bottom nav (mobile only; desktop keeps sidebar) */
.stitch-bottomnav{display:none;}
@media (max-width: 1023px){
  .stitch-bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:120;background:rgba(12,14,21,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,0.08);padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom));}
  .stitch-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--textSec);text-decoration:none;font-size:.6rem;font-weight:700;padding:.35rem 0;min-height:52px;justify-content:center;border-radius:10px;}
  .stitch-bottomnav a.active{color:var(--gold);}
  .stitch-bottomnav .bnav-ico{font-size:1.05rem;line-height:1;}
  .binance-layout{padding-bottom:76px;}
}
@media (min-width: 641px) and (max-width: 1023px){
  #sec-dashboard .stitch-qa{grid-template-columns:repeat(4,1fr)!important;}
}
@media (max-width: 640px){
  #sec-dashboard .stitch-qa{grid-template-columns:repeat(2,1fr)!important;}
  #showBalPill{display:none!important;}
}
@media (prefers-reduced-motion: reduce){
  #sec-dashboard .stitch-qa .q-btn{transition:none;}
}

/* ───────────────────────────────────────────────
   STITCH WALLET & ASSETS — PRIMARY REFERENCE
   stitch_vallet.buzz_user_panel_redesign (2) desktop
   + (3) mobile. Obsidian + brass, masked totals,
   quad tiles, flat table chrome. IDs/JS untouched.
   dashboard.js, backend, DB, workers frozen.
   ─────────────────────────────────────────────── */
#sec-assets{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
#sec-assets .total-net-card{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;border-top:1px solid rgba(255,255,255,0.14)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
/* Neutralize wallet-cine entrance motion (Stitch: static terminal) */
#sec-assets.wallet-cine > div{animation:none!important;}
#sec-assets .total-net-card::before{display:none!important;}
/* Masked wallet total (value stays in DOM for dashboard.js) */
#sec-assets.masked #walletTotalUsd{color:transparent!important;text-shadow:none!important;position:relative;}
#sec-assets.masked #walletTotalUsd::after{content:'••••••';position:absolute;right:0;top:50%;transform:translateY(-50%);color:var(--text);font:inherit;letter-spacing:.02em;white-space:nowrap;}
/* Wallet quad tiles — same per-domain gradients as dashboard */
#sec-assets .stitch-qa .q-btn{min-height:64px;box-shadow:0 8px 20px -6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22)!important;transition:transform .12s ease, filter .12s ease;}
#sec-assets .stitch-qa .q-btn:hover{transform:translateY(-1px)!important;filter:brightness(1.08);}
#sec-assets .stitch-qa .q-btn:active{transform:scale(.985)!important;}
#sec-assets .stitch-qa .qa-buy{background:linear-gradient(135deg,#10B981 0%,#34D399 100%)!important;}
#sec-assets .stitch-qa .qa-sell{background:linear-gradient(135deg,#F97316 0%,#FBBF24 100%)!important;}
#sec-assets .stitch-qa .qa-send{background:linear-gradient(135deg,#F0B90B 0%,#B8860B 100%)!important;}
#sec-assets .stitch-qa .qa-receive{background:linear-gradient(135deg,#1E40AF 0%,#0369A1 100%)!important;}
#sec-assets .stitch-qa .q-btn::after{display:none!important;}
/* Assets table chrome — flat obsidian, mono numerics preserved */
#sec-assets #assetsTable table{box-shadow:0 4px 18px rgba(0,0,0,0.35);}
#sec-assets #assetsTable tbody tr{transition:background .12s ease;}
#sec-assets #assetsTable tbody tr:hover td{background:rgba(212,175,55,0.06);}
/* Send/Receive panes + tabs keep existing behavior, flatter chrome */
#sec-assets #tabSendBtn,#sec-assets #tabReceiveBtn{min-height:44px;}
@media (min-width: 641px) and (max-width: 1023px){
  #sec-assets .stitch-qa{grid-template-columns:repeat(4,1fr)!important;}
}
@media (max-width: 640px){
  #sec-assets .stitch-qa{grid-template-columns:repeat(2,1fr)!important;}
}
@media (prefers-reduced-motion: reduce){
  #sec-assets .stitch-qa .q-btn{transition:none;}
  #sec-assets #assetsTable tbody tr{transition:none;}
}

/* ───────────────────────────────────────────────
   STITCH P2P MATRIX — PRIMARY REFERENCE
   stitch_vallet.buzz_user_panel_redesign (4) desktop
   + (5) mobile. Obsidian + brass, mono numerics,
   tier accents, static rule legend. Business logic
   frozen — display of frozen tier rules only.
   dashboard.js, backend, DB, workers frozen.
   ─────────────────────────────────────────────── */
#sec-matrix{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
/* Neutralize matrix-cine entrance motion (Stitch: static terminal) */
#sec-matrix.matrix-cine > div{animation:none!important;}
#sec-matrix .matrix-tier-card::before{display:none!important;}
/* Tier cards — flat obsidian, restrained gold accent */
#sec-matrix .matrix-tier-card{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;border-top:1px solid rgba(255,255,255,0.14)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
#sec-matrix .matrix-tier-card:hover{transform:translateY(-2px);}
/* Matrix tables + upline/tree — mono preserved, brass hover */
#sec-matrix #matrixMy table,#sec-matrix #matrixUpline table,#sec-matrix #matrixTree table{box-shadow:0 4px 18px rgba(0,0,0,0.35);}
#sec-matrix #matrixMy tbody tr:hover td,#sec-matrix #matrixUpline tbody tr:hover td,#sec-matrix #matrixTree tbody tr:hover td{background:rgba(212,175,55,0.06);}
#sec-matrix .btn.small{min-height:44px;}
@media (prefers-reduced-motion: reduce){
  #sec-matrix .matrix-tier-card{transition:none;}
}

/* ───────────────────────────────────────────────
   STITCH TRANSACTIONS — PRIMARY REFERENCE
   stitch_vallet.buzz_user_panel_redesign (6) desktop.
   Breadcrumb + search + working type tabs + flat stat
   cards + table chrome. No asset tabs / dropdowns /
   mask (no JS support — omitted, not faked).
   dashboard.js, backend, DB, workers frozen.
   ─────────────────────────────────────────────── */
#sec-history{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
/* Neutralize hist-cine entrance motion (Stitch: static terminal) */
#sec-history.hist-cine > div{animation:none!important;}
/* Stat cards — flat obsidian */
#sec-history .hist-stats > div{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;border-top:1px solid rgba(255,255,255,0.14)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
/* Search — visible, mono placeholder preserved */
#sec-history #txSearch{font-family:'JetBrains Mono',monospace;}
/* Reveal txSearch wrapper (old global div:has rule hid it; filter is real) */
#sec-history div:has(> #txSearch){display:block!important;}
#sec-history #txSearch:focus{outline:none;border-color:rgba(212,175,55,0.5)!important;box-shadow:0 0 0 3px rgba(212,175,55,0.12);}
/* Type tabs — gold active (existing loadHistory logic) */
#sec-history .tabs .tab{transition:background .12s ease,color .12s ease;}
#sec-history .tabs .tab.active{background:linear-gradient(90deg,#F0B90B,#E8A800)!important;color:#070A12!important;font-weight:800!important;border-color:transparent!important;}
/* Ledger table chrome — mono numerics preserved, brass hover */
#sec-history #historyBox{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
#sec-history #userHistTable tbody tr{transition:background .12s ease;}
#sec-history #userHistTable tbody tr:hover td{background:rgba(212,175,55,0.06);}
#sec-history .btn.small{min-height:40px;}
@media (prefers-reduced-motion: reduce){
  #sec-history .tabs .tab,#sec-history #userHistTable tbody tr{transition:none;}
}

/* ───────────────────────────────────────────────
   STITCH VAULT — PRIMARY REFERENCE
   stitch_vallet.buzz_user_panel_redesign (mobile)
   + (1) desktop. Breadcrumb + status panel +
   dashed empty box. Live IDs moved, never
   duplicated. dashboard.js, backend, DB frozen.
   ─────────────────────────────────────────────── */
#sec-vault{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
/* Neutralize vault-cine entrance motion (Stitch: static terminal) */
#sec-vault.vault-cine > div{animation:none!important;}
/* Stat cards + yield station + refer panel + ledger — flat obsidian */
#sec-vault div[style*="rgba(26,18,58"]{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
#sec-vault #vaultLedger table{box-shadow:0 4px 18px rgba(0,0,0,0.35);}
#sec-vault #vaultLedger tbody tr{transition:background .12s ease;}
#sec-vault #vaultLedger tbody tr:hover td{background:rgba(212,175,55,0.06);}
#sec-vault #redeemAmt{min-height:44px;}
#sec-vault button{min-height:44px;}
@media (prefers-reduced-motion: reduce){
  #sec-vault button,#sec-vault #vaultLedger tbody tr{transition:none;}
}

/* ───────────────────────────────────────────────
   STITCH REFERRAL — PRIMARY REFERENCE
   stitch Downloads/stitch (7) mobile. Breadcrumb +
   conduit + real stats + members + activity.
   Demo nodes/placeholders removed. dashboard.js,
   backend, DB, workers frozen.
   ─────────────────────────────────────────────── */
#sec-referral{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
/* Neutralize ref-cine entrance motion (Stitch: static terminal) */
#sec-referral.ref-cine > div{animation:none!important;}
/* Cards — flat obsidian */
#sec-referral div[style*="rgba(26,18,58"]{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
/* Members + activity tables */
#sec-referral #refList table{width:100%;border-collapse:collapse;font-size:.8rem;}
#sec-referral #refList th,#sec-referral #refList td{padding:.45rem .4rem;border-bottom:1px solid var(--border);text-align:left;}
#sec-referral #refActivityTable{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#sec-referral #refActivityTable tbody tr{transition:background .12s ease;}
#sec-referral #refActivityTable tbody tr:hover td{background:rgba(212,175,55,0.06);}
#sec-referral button{min-height:44px;}
@media (prefers-reduced-motion: reduce){
  #sec-referral #refActivityTable tbody tr{transition:none;}
  #sec-referral button{transition:none;}
}

/* ───────────────────────────────────────────────
   STITCH SECURITY CENTER — PRIMARY REFERENCE
   Downloads/stitch (9) desktop. Breadcrumb +
   status card + TOTP/OTP/password/PIN cards +
   honest empty-state note. Fake scores removed.
   dashboard.js, backend, DB, workers frozen.
   ─────────────────────────────────────────────── */
#sec-security{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;}
/* Neutralize seccine entrance motion (Stitch: static terminal) */
#sec-security.seccine > div{animation:none!important;}
/* Cards — flat obsidian */
#sec-security .card{background:linear-gradient(180deg,#141821 0%,#0c0f18 100%)!important;border:1px solid rgba(255,255,255,0.08)!important;box-shadow:0 16px 36px -8px rgba(0,0,0,0.6)!important;}
/* Mono for OTP/TOTP codes + key */
#sec-security #secOtp,#sec-security #totpCode,#sec-security #totpKey{font-family:'JetBrains Mono',monospace;}
#sec-security input{min-height:44px;}
#sec-security .btn{min-height:44px;}
#sec-security #totpQr{background:#fff;border-radius:10px;}
@media (prefers-reduced-motion: reduce){
  #sec-security .btn{transition:none;}
}
/* ───────────────────────────────────────────────
   PHASE A — Kraken-hybrid watchlist rows + polish
   CSS-ONLY. public/js/dashboard.js FROZEN (SHA locked).
   No IDs/handlers/APIs/data touched. Dark + gold intact.
   ─────────────────────────────────────────────── */
/* Watchlist thead: muted Kraken-style headers (both ledgers) */
#sec-assets #assetsTable thead th,#sec-history #userHistTable thead th{background:rgba(10,14,24,.92);color:var(--textSec);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;font-weight:700;}
/* Watchlist rows: rounded table ends (base table already overflow:hidden) */
#sec-assets #assetsTable tbody tr:first-child td:first-child{border-top-left-radius:10px;}
#sec-assets #assetsTable tbody tr:first-child td:last-child{border-top-right-radius:10px;}
#sec-assets #assetsTable tbody tr:last-child td:first-child{border-bottom-left-radius:10px;}
#sec-assets #assetsTable tbody tr:last-child td:last-child{border-bottom-right-radius:10px;}
#sec-history #userHistTable tbody tr:first-child td:first-child{border-top-left-radius:10px;}
#sec-history #userHistTable tbody tr:first-child td:last-child{border-top-right-radius:10px;}
#sec-history #userHistTable tbody tr:last-child td:first-child{border-bottom-left-radius:10px;}
#sec-history #userHistTable tbody tr:last-child td:last-child{border-bottom-right-radius:10px;}
/* ───────────────────────────────────────────────
   FULL REDESIGN — shared Kraken-hybrid system layer
   CSS-ONLY. dashboard.js FROZEN. Dark + gold identity.
   Beats aurora-purple leakage panel-wide (user screens).
   ─────────────────────────────────────────────── */
/* Tabs: gold active everywhere in user panel */
#sec-dashboard .tabs .tab.active,#sec-assets .tabs .tab.active,#sec-history .tabs .tab.active,
#sec-matrix .tabs .tab.active,#sec-referral .tabs .tab.active,#sec-vault .tabs .tab.active,
#sec-inr .tabs .tab.active{background:var(--gold)!important;color:#0A0E14!important;border-color:var(--gold)!important;box-shadow:0 2px 10px rgba(240,185,11,0.28)!important;font-weight:750;}
/* Ledger tables: muted thead + row hover + rounded ends (all user ledgers) */
#sec-matrix #matrixMy table thead th,#sec-matrix #matrixUpline table thead th,
#sec-vault #vaultLedger table thead th,#sec-referral #refActivityTable table thead th,
#sec-agent #agentComms table thead th,#sec-tickets #myTicketsBox table thead th,
#sec-inr #inrHistBox table thead th{background:rgba(10,14,24,.92)!important;color:var(--textSec)!important;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;font-weight:700;}
#sec-matrix #matrixMy tbody tr:hover td,#sec-matrix #matrixUpline tbody tr:hover td,
#sec-vault #vaultLedger tbody tr:hover td,#sec-referral #refActivityTable tbody tr:hover td,
#sec-agent #agentComms tbody tr:hover td,#sec-tickets #myTicketsBox tbody tr:hover td,
#sec-inr #inrHistBox tbody tr:hover td{background:rgba(212,175,55,0.06);}
#sec-matrix table,#sec-vault #vaultLedger table,#sec-referral #refActivityTable table,
#sec-agent #agentComms table,#sec-tickets #myTicketsBox table,#sec-inr #inrHistBox table{box-shadow:0 4px 18px rgba(0,0,0,0.25);}
/* Ledger action buttons: 44px touch */
#sec-matrix table .btn,#sec-vault table .btn,#sec-referral table .btn,
#sec-agent table .btn,#sec-tickets table .btn,#sec-inr table .btn{min-height:44px;}
/* Stat cards: hover lift (referral/vault/matrix/dashboard bento) */
#sec-referral .ref-cine > div:nth-child(2) > div,#sec-vault .vault-cine > div:nth-child(3) > div,
#sec-matrix .matrix-cine > div:nth-child(2) > div{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
#sec-referral .ref-cine > div:nth-child(2) > div:hover,#sec-vault .vault-cine > div:nth-child(3) > div:hover,
#sec-matrix .matrix-cine > div:nth-child(2) > div:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.40);border-color:#2A3F6B;}
/* Matrix progress bars: gold gradient (JS sets width only) */
#sec-matrix #goldProgress,#sec-matrix #platProgress,#sec-matrix #diamondProgress{background:linear-gradient(90deg,var(--gold),#FFD54F)!important;}
/* Matrix featured tier (Platinum): elevated */
#sec-matrix .matrix-tier-card:nth-child(2){border-color:rgba(240,185,11,0.35)!important;box-shadow:0 10px 30px rgba(0,0,0,0.35),0 0 0 1px rgba(240,185,11,0.08)!important;}
/* Quick-action press states (dashboard + wallet quads) */
#sec-dashboard .quick-actions .q-btn:active,#sec-assets .quick-actions .q-btn:active{transform:scale(.97);filter:brightness(1.1);}
#sec-dashboard .quick-actions .q-btn,#sec-assets .quick-actions .q-btn{min-height:64px;}
/* Dashboard welcome band: dark/gold identity (beats aurora purple) */
#sec-dashboard .welcome-bar{background:linear-gradient(135deg,rgba(28,20,60,0.96) 0%,rgba(24,22,10,0.88) 100%)!important;border:1px solid var(--border)!important;}
/* Referral copy/share: 44px touch */
#sec-referral [onclick^="copyRef"],#sec-referral [onclick^="shareReferral"]{min-height:44px;}
/* Matrix tier entry: 44px touch */
#sec-matrix .matrix-tier-card > button{min-height:44px;}
/* Vault redeem row: 44px touch */
#sec-vault [onclick="doRedeem()"],#sec-vault [onclick="loadVault()"]{min-height:44px;}
/* Detail/code boxes: consistent mono treatment */
#sec-referral #refLink,#sec-referral #refCode,#sec-vault #vaultRefLink{overflow-wrap:anywhere;}
@media (prefers-reduced-motion: reduce){
  #sec-referral .ref-cine > div:nth-child(2) > div,#sec-vault .vault-cine > div:nth-child(3) > div,
  #sec-matrix .matrix-cine > div:nth-child(2) > div{transition:none!important;transform:none!important;}
  #sec-dashboard .quick-actions .q-btn,#sec-assets .quick-actions .q-btn{transition:none!important;}
}
/* ───────────────────────────────────────────────
   PHASE C — Kraken-hybrid Wallet transformation
   HTML hero band + CSS rail/rows. JS FROZEN. Dark+gold.
   ─────────────────────────────────────────────── */
/* Sidebar rail: icon chips + gold pill (behavior untouched) */
.sidebar{background:rgba(10,14,20,0.97)!important;}
.sidebar a{border-radius:10px;margin:1px 8px;padding:.6rem .8rem!important;font-size:.82rem!important;gap:.65rem!important;}
.sidebar a .ico{background:rgba(255,255,255,0.04);border:1px solid transparent;border-radius:8px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar a.active{background:linear-gradient(90deg,#F0B90B 0%,#FFD54F 100%)!important;color:#070A12!important;border-left-color:transparent!important;box-shadow:0 4px 14px rgba(240,185,11,0.28)!important;font-weight:800;}
.sidebar a.active .ico{background:rgba(7,10,18,0.14)!important;border-color:transparent!important;color:#070A12!important;}
.sidebar .section-label{opacity:.85;padding:.9rem .9rem .35rem!important;font-size:.6rem!important;}
/* Kraken hero band: fluid value, tidy divider rhythm */
#sec-assets .kraken-hero{min-width:0;max-width:100%;}
#sec-assets .kraken-hero-top{column-gap:1rem;}
#sec-assets .assets-head-row{flex-direction:column;align-items:stretch;gap:.75rem;}
#sec-assets .assets-head-left{min-width:0;}
@media (max-width: 640px){
  /* Watchlist mobile: hide ALLOCATION + PRICE cols, keep Asset/Holdings/USD/Actions */
  #sec-assets #assetsTable th:nth-child(3),#sec-assets #assetsTable td:nth-child(3),
  #sec-assets #assetsTable th:nth-child(5),#sec-assets #assetsTable td:nth-child(5){display:none;}
}
/* Modal close (✕) controls: 44px touch targets, look unchanged */
#sendPopup button[onclick="closeSendPopup()"],#receivePopup button[onclick="closeReceivePopup()"]{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
/* ───────────────────────────────────────────────
   PHASE B — Transactions Kraken-hybrid UX
   CSS-ONLY. dashboard.js FROZEN. Dark + gold kept.
   Neutralizes aurora-purple leakage INSIDE #sec-history
   only; all IDs/handlers/APIs/data untouched.
   ─────────────────────────────────────────────── */
/* Tabs: gold active (beats aurora purple), clear focus */
#sec-history .tabs .tab.active{background:var(--gold)!important;color:#0A0E14!important;border-color:var(--gold)!important;box-shadow:0 2px 10px rgba(240,185,11,0.28)!important;font-weight:750;}
/* Muted thead (beats aurora th) */
#sec-history #userHistTable thead th,#sec-history #historyBox table thead th{background:rgba(10,14,24,.92)!important;color:var(--textSec)!important;text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;font-weight:700;}
/* Card top stripe: gold whisper instead of aurora */
#sec-history .card::before{background:linear-gradient(90deg,rgba(240,185,11,.55),rgba(240,185,11,0))!important;height:2px!important;}
/* Row hierarchy: right-aligned tabular amounts, muted time/hash */
#sec-history #userHistTable td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
#sec-history #userHistTable td:nth-child(5){color:var(--textSec);font-size:.76rem;white-space:nowrap;}
#sec-history #userHistTable td:nth-child(4){max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Row actions: 44px touch targets */
#sec-history #userHistTable .btn{min-height:44px;}
/* Detail modal ✕: 44px touch target, look unchanged */
#userTxEyeModal > div > button:first-child{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
/* Detail modal: safe-area aware on small screens */
@media (max-width: 640px){
  #userTxEyeModal > div{width:94%!important;padding:1rem!important;}
  #sec-history #userHistTable td:nth-child(4){max-width:120px;}
}
/* RESTART system: retint legacy violet inline surfaces panel-wide (JS frozen) */
#sec-dashboard [style*="28,20,60"],#sec-assets [style*="28,20,60"],#sec-history [style*="28,20,60"],#sec-matrix [style*="28,20,60"],#sec-referral [style*="28,20,60"],#sec-vault [style*="28,20,60"],#sec-agent [style*="28,20,60"],#sec-profile [style*="28,20,60"],#sec-security [style*="28,20,60"],#sec-tickets [style*="28,20,60"],#sec-send [style*="28,20,60"],#sec-receive [style*="28,20,60"],#sec-inr [style*="28,20,60"],
#sec-dashboard [style*="26,18,58"],#sec-assets [style*="26,18,58"],#sec-history [style*="26,18,58"],#sec-matrix [style*="26,18,58"],#sec-referral [style*="26,18,58"],#sec-vault [style*="26,18,58"],#sec-agent [style*="26,18,58"],#sec-profile [style*="26,18,58"],#sec-security [style*="26,18,58"],#sec-tickets [style*="26,18,58"],#sec-send [style*="26,18,58"],#sec-receive [style*="26,18,58"],#sec-inr [style*="26,18,58"],
#sec-dashboard [style*="16,12,38"],#sec-assets [style*="16,12,38"],#sec-history [style*="16,12,38"],#sec-matrix [style*="16,12,38"],#sec-referral [style*="16,12,38"],#sec-vault [style*="16,12,38"],#sec-agent [style*="16,12,38"],#sec-profile [style*="16,12,38"],#sec-security [style*="16,12,38"],#sec-tickets [style*="16,12,38"],#sec-send [style*="16,12,38"],#sec-receive [style*="16,12,38"],#sec-inr [style*="16,12,38"],
#sec-dashboard [style*="14,11,36"],#sec-assets [style*="14,11,36"],#sec-history [style*="14,11,36"],#sec-matrix [style*="14,11,36"],#sec-referral [style*="14,11,36"],#sec-vault [style*="14,11,36"],#sec-agent [style*="14,11,36"],#sec-profile [style*="14,11,36"],#sec-security [style*="14,11,36"],#sec-tickets [style*="14,11,36"],#sec-send [style*="14,11,36"],#sec-receive [style*="14,11,36"],#sec-inr [style*="14,11,36"]{background:linear-gradient(180deg,#141B29 0%,#0F141E 100%)!important;}