/* =========================================================
   VAULTX — Shared Design System
   Black / White / Yellow fintech wallet
   ========================================================= */

:root{
  --bg:        #0A0A0C;
  --bg-elev:   #131316;
  --bg-card:   #18181C;
  --bg-card-2: #202024;
  --border:    #2A2A30;
  --border-soft: #1E1E22;

  --yellow:     #FFD60A;
  --yellow-dim: #C9AC18;
  --yellow-glow: rgba(255,214,10,.18);

  --white:  #F5F5F7;
  --gray:   #9A9AA3;
  --gray-2: #6E6E78;

  --green: #00D67E;
  --red:   #FF4D5E;

  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --header-h: 68px;
  --sidebar-w: 240px;
  --bottomnav-h: 64px;
}

/* ===== LIGHT MODE ===== */
body.light{
  --bg:          #F0F0F3;
  --bg-elev:     #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-card-2:   #F5F5F8;
  --border:      #E0E0E8;
  --border-soft: #EBEBF0;

  --yellow:      #C9940A;
  --yellow-dim:  #A87A08;
  --yellow-glow: rgba(201,148,10,.15);

  --white:  #0A0A0C;
  --gray:   #5A5A65;
  --gray-2: #8A8A95;
}

body.light .topbar{
  background: rgba(240,240,243,.9);
}
body.light .bottom-nav{
  background: rgba(255,255,255,.92);
}
body.light .sidebar{
  background: #FFFFFF;
}
body.light .auth-wrap::before{
  background: radial-gradient(circle, rgba(201,148,10,.12) 0%, transparent 70%);
}
body.light .auth-card{
  box-shadow: 0 8px 40px rgba(0,0,0,.08);
}

/* Theme toggle button in topbar */
.theme-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--white); transition:all .15s ease; cursor:pointer;
}
.theme-btn:hover{ border-color:var(--yellow); color:var(--yellow); }

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4,.display{font-family:var(--font-display); letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--yellow); color:#000;}

/* Scrollbar */
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px;}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.app-main{
  flex:1; display:flex; flex-direction:column;
  min-width:0;
}
@media (min-width:1024px){
  .app-main{margin-left:var(--sidebar-w);}
}

/* ---------- Sidebar (desktop) ---------- */
.sidebar{
  position:fixed; top:0; left:0; height:100vh; width:var(--sidebar-w);
  background:var(--bg-elev); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; z-index:40;
  transform:translateX(-100%); transition:transform .25s ease;
}
@media (min-width:1024px){ .sidebar{transform:translateX(0);} }
.sidebar.open{transform:translateX(0);}

.sidebar-logo{
  display:flex; align-items:center; gap:10px;
  padding:22px 22px 18px; border-bottom:1px solid var(--border-soft);
}
.sidebar-logo .mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--yellow) 0%, var(--yellow-dim) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#0A0A0C; font-weight:700; font-family:var(--font-display);
  box-shadow:0 0 24px var(--yellow-glow);
}
.sidebar-logo .name{font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:.02em;}
.sidebar-logo .name span{color:var(--yellow);}

.sidebar-nav{flex:1; overflow-y:auto; padding:14px 12px;}
.nav-section-label{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--gray-2); padding:14px 10px 6px;
}
.nav-link{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--radius-sm);
  color:var(--gray); font-size:.92rem; font-weight:500;
  border-left:3px solid transparent;
  transition:all .15s ease;
}
.nav-link:hover{background:var(--bg-card); color:var(--white);}
.nav-link.active{
  background:var(--bg-card); color:var(--yellow);
  border-left:3px solid var(--yellow);
}
.nav-link i{width:18px; height:18px;}

.sidebar-footer{
  padding:14px; border-top:1px solid var(--border-soft);
}
.sidebar-balance{
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px;
}
.sidebar-balance .label{font-size:.72rem; color:var(--gray-2); text-transform:uppercase; letter-spacing:.1em;}
.sidebar-balance .amount{font-family:var(--font-display); font-size:1.35rem; font-weight:700; margin-top:4px;}
.sidebar-balance .amount span{color:var(--yellow);}

/* ---------- Sidebar backdrop (mobile) ---------- */
.sidebar-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:35;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sidebar-backdrop.show{opacity:1; pointer-events:auto;}

/* ---------- Top header ---------- */
.topbar{
  height:var(--header-h); position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; background:rgba(10,10,12,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.topbar-left{display:flex; align-items:center; gap:14px;}
.menu-btn{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:var(--bg-card); border:1px solid var(--border); color:var(--white);
}
@media (min-width:1024px){ .menu-btn{display:none;} }

.topbar-title{font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
.topbar-right{display:flex; align-items:center; gap:10px;}

.icon-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border); color:var(--white);
  transition:all .15s ease;
}
.icon-btn:hover{border-color:var(--yellow); color:var(--yellow);}
.icon-btn .dot{
  position:absolute; top:7px; right:7px; width:8px; height:8px;
  border-radius:50%; background:var(--red); border:2px solid var(--bg);
}

/* ---------- Profile dropdown ---------- */
.profile-btn{
  display:flex; align-items:center; gap:8px; padding:6px 8px 6px 6px;
  border-radius:50px; border:1px solid var(--border); background:var(--bg-card);
}
.avatar{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dim));
  display:flex; align-items:center; justify-content:center;
  color:#0A0A0C; font-weight:700; font-size:.8rem; font-family:var(--font-display);
}
.dropdown{
  position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(0,0,0,.5); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all .15s ease; z-index:50;
}
.dropdown.show{opacity:1; visibility:visible; transform:translateY(0);}
.dropdown-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); font-size:.88rem; color:var(--gray);
}
.dropdown-item:hover{background:var(--bg-card); color:var(--white);}
.dropdown-item.danger:hover{color:var(--red);}
.dropdown-divider{height:1px; background:var(--border-soft); margin:6px 4px;}

.relative{position:relative;}

/* ---------- Page content ---------- */
.page{padding:20px; max-width:1280px; margin:0 auto; width:100%;}
@media (min-width:768px){ .page{padding:28px;} }
padding-bottom-nav{padding-bottom:90px;}
.pb-nav{padding-bottom:calc(var(--bottomnav-h) + 24px);}
@media (min-width:1024px){ .pb-nav{padding-bottom:28px;} }

/* ---------- Cards ---------- */
.card{
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
}
.card-accent{border-left:3px solid var(--yellow);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--radius-sm); font-weight:600; font-size:.92rem;
  border:1px solid transparent; transition:all .15s ease; white-space:nowrap;
}
.btn-primary{background:var(--yellow); color:#0A0A0C;}
.btn-primary:hover{background:#FFE34D; box-shadow:0 0 24px var(--yellow-glow);}
.btn-secondary{background:var(--bg-card-2); color:var(--white); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--yellow); color:var(--yellow);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--gray);}
.btn-outline:hover{border-color:var(--yellow); color:var(--yellow);}
.btn-danger{background:rgba(255,77,94,.12); color:var(--red); border-color:rgba(255,77,94,.3);}
.btn-danger:hover{background:rgba(255,77,94,.2);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:.8rem;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Form elements ---------- */
.field-label{font-size:.82rem; color:var(--gray); margin-bottom:6px; display:block; font-weight:500;}
.input, select.input{
  width:100%; background:var(--bg-card-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:13px 14px; color:var(--white);
  font-size:.92rem; transition:border-color .15s ease; outline:none;
}
.input:focus{border-color:var(--yellow);}
.input::placeholder{color:var(--gray-2);}
.input-group{position:relative;}
.input-group .input{padding-right:44px;}
.input-group .input-icon{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--gray); cursor:pointer;
}
.checkbox-row{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--gray);}
.checkbox-row input{accent-color:var(--yellow); width:16px; height:16px;}

/* Toggle switch */
.switch{position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider{
  position:absolute; cursor:pointer; inset:0; background:var(--bg-card-2);
  border:1px solid var(--border); border-radius:26px; transition:.2s;
}
.slider:before{
  position:absolute; content:""; height:18px; width:18px; left:3px; bottom:3px;
  background:var(--gray); border-radius:50%; transition:.2s;
}
.switch input:checked + .slider{background:var(--yellow-glow); border-color:var(--yellow);}
.switch input:checked + .slider:before{transform:translateX(20px); background:var(--yellow);}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; height:var(--bottomnav-h); z-index:30;
  background:rgba(19,19,22,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:space-around;
}
@media (min-width:1024px){ .bottom-nav{display:none;} }
.bn-link{display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--gray); font-size:.66rem; font-weight:500;}
.bn-link.active{color:var(--yellow);}
.bn-link i{width:20px; height:20px;}
.bn-link.fab{
  width:48px; height:48px; border-radius:50%; background:var(--yellow); color:#0A0A0C;
  display:flex; align-items:center; justify-content:center; margin-top:-22px;
  box-shadow:0 4px 18px var(--yellow-glow);
}
.bn-link.fab i{width:24px; height:24px;}

/* ---------- Misc ---------- */
.text-yellow{color:var(--yellow);}
.text-green{color:var(--green);}
.text-red{color:var(--red);}
.text-gray{color:var(--gray);}
.muted{color:var(--gray); font-size:.85rem;}
.divider{height:1px; background:var(--border-soft); border:none;}

.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
  padding:4px 10px; border-radius:50px;
}
.badge-green{background:rgba(0,214,126,.12); color:var(--green);}
.badge-red{background:rgba(255,77,94,.12); color:var(--red);}
.badge-yellow{background:var(--yellow-glow); color:var(--yellow);}
.badge-gray{background:var(--bg-card-2); color:var(--gray); border:1px solid var(--border);}

.coin-icon{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:.85rem; font-family:var(--font-display);
  flex-shrink:0;
}

/* Auth screens */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; position:relative; overflow:hidden;
}
.auth-wrap::before{
  content:""; position:absolute; top:-20%; right:-10%; width:480px; height:480px;
  background:radial-gradient(circle, var(--yellow-glow) 0%, transparent 70%);
  pointer-events:none;
}
.auth-card{
  width:100%; max-width:420px; background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:36px 30px; position:relative; z-index:1;
}
.auth-logo{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:28px;}
.auth-logo .mark{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--yellow) 0%, var(--yellow-dim) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#0A0A0C; font-weight:700; font-family:var(--font-display); font-size:1.3rem;
  box-shadow:0 0 30px var(--yellow-glow);
}
.auth-logo .name{font-family:var(--font-display); font-size:1.4rem; font-weight:700;}
.auth-logo .name span{color:var(--yellow);}

/* Seed phrase grid */
.seed-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
@media (min-width:480px){ .seed-grid{grid-template-columns:repeat(3,1fr);} }
.seed-chip{
  display:flex; align-items:center; gap:8px; background:var(--bg-card-2);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:.88rem; font-weight:500;
}
.seed-chip .idx{color:var(--gray-2); font-size:.75rem; min-width:16px;}

/* Tabs */
.tabs{display:flex; gap:4px; background:var(--bg-card-2); border-radius:var(--radius-sm); padding:4px;}
.tab{
  flex:1; text-align:center; padding:10px; border-radius:7px; font-weight:600; font-size:.85rem;
  color:var(--gray);
}
.tab.active{background:var(--bg-card); color:var(--white);}
.tab.tab-long.active{color:var(--green);}
.tab.tab-short.active{color:var(--red);}

/* Stat grid */
.stat-grid{display:grid; gap:16px; grid-template-columns:repeat(1,1fr);}
@media (min-width:640px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .stat-grid{grid-template-columns:repeat(4,1fr);} }

.grid-2{display:grid; gap:20px; grid-template-columns:1fr;}
@media (min-width:1024px){ .grid-2{grid-template-columns:1.4fr 1fr;} }

.grid-3{display:grid; gap:16px; grid-template-columns:repeat(1,1fr);}
@media (min-width:640px){ .grid-3{grid-template-columns:repeat(3,1fr);} }

/* Asset row */
.asset-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--border-soft);
}
.asset-row:last-child{border-bottom:none;}

/* List item link */
.list-link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-card-2); transition:.15s;
}
.list-link:hover{border-color:var(--yellow);}

/* Section title */
.section-title{font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:14px;}

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--bg-elev); border:1px solid var(--yellow); color:var(--white);
  padding:12px 20px; border-radius:var(--radius-sm); font-size:.88rem; font-weight:500;
  opacity:0; pointer-events:none; transition:all .25s ease; z-index:100;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.fade-in{animation:fadeIn .4s ease both;}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

.skeleton{
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card-2) 50%,var(--bg-card) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite;
}
@keyframes shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}