*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',system-ui,-apple-system,sans-serif}
html{-webkit-text-size-adjust:100%}
body{background:#080b0e;color:#e2e8f0;min-height:100dvh;-webkit-tap-highlight-color:transparent}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#0b0e11}::-webkit-scrollbar-thumb{background:#1e293b;border-radius:3px}

/* ===== TOKENS (single source of truth) ===== */
:root{
  --c-bg:#080b0e;--c-card:#131721;--c-border:#1e293b;--c-surface:#0b0e11;--c-muted:#94a3b8;
  --c-gold:#f0b90b;--c-green:#00d26a;--c-red:#ff4757;--c-blue:#3b82f6;--c-purple:#8b5cf6;
  --c-text:#e2e8f0;--c-text-dim:#64748b;
  --radius:12px;--radius-sm:8px;
  --gap:20px;--gap-sm:12px;--gap-xs:8px;
  --p-card:20px;--p-page:28px;--p-compact:10px;
  --fs-h1:24px;--fs-h2:20px;--fs-h3:16px;--fs-body:14px;--fs-sm:12px;--fs-xs:11px;
  --stat:28px;--topbar-h:60px;--drawer-w:280px;
}

/* ===== BASE COMPONENTS ===== */
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--p-card)}
.glow{box-shadow:0 0 20px rgba(240,185,11,.15)}
.btn{padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;border:none;transition:all .15s;user-select:none;-webkit-user-select:none;font-size:var(--fs-body)}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#f0b90b,#d4a00a);color:#000}
.btn-green{background:var(--c-green);color:#000}
.btn-red{background:var(--c-red);color:#fff}
.btn-blue{background:var(--c-blue);color:#fff}
.btn-sm{padding:6px 14px;font-size:var(--fs-sm)}
.badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.badge-green{background:#071d0e;color:var(--c-green)}.badge-red{background:#1c0a0a;color:var(--c-red)}
.badge-blue{background:#172554;color:var(--c-blue)}.badge-gold{background:#2d1f00;color:var(--c-gold)}
.stat-num{font-size:var(--stat);font-weight:800;line-height:1.2}
.progress-bar{height:8px;background:var(--c-border);border-radius:4px;overflow:hidden}
.progress-green{background:linear-gradient(90deg,var(--c-green),#00b359);height:100%;border-radius:4px;transition:width .4s}
.progress-red{background:linear-gradient(90deg,var(--c-red),#cc2233);height:100%;border-radius:4px;transition:width .4s}
.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.input-dark{background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);padding:10px 14px;border-radius:var(--radius-sm);width:100%;outline:none;font-size:16px}
.input-dark:focus{border-color:var(--c-blue)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px 10px;font-size:var(--fs-body)}
th{color:var(--c-muted);font-size:var(--fs-sm);font-weight:600;border-bottom:1px solid var(--c-border);white-space:nowrap}
td{border-bottom:1px solid var(--c-surface)}
tr:hover td{background:#0f1218}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:-4px;padding:4px}

/* ===== UTILITY (CSS-driven, no JS inline needed) ===== */
.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.text-center{text-align:center}.text-right{text-align:right}.w-full{width:100%}
.gap-2{gap:8px}.gap-3{gap:var(--gap-sm)}.gap-4{gap:var(--gap)}.gap-6{gap:24px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.space-y-2>*+*{margin-top:8px}.space-y-3>*+*{margin-top:12px}.space-y-4>*+*{margin-top:16px}.space-y-6>*+*{margin-top:24px}
.min-h-screen{min-height:100dvh}
.grid{display:grid}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}

/* Wallet card */
.wallet-card{cursor:pointer;transition:all .15s;border:2px solid transparent}
.wallet-card:hover{transform:translateY(-2px);border-color:var(--c-gold);box-shadow:0 4px 15px rgba(240,185,11,.12)}

/* ===== APP SHELL ===== */
.app-shell{display:flex;flex-direction:column;min-height:100dvh;background:var(--c-bg)}

/* ===== TOP NAVBAR ===== */
.topbar{position:sticky;top:0;z-index:150;background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--p-page);height:var(--topbar-h);flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-toggle{font-size:20px;cursor:pointer;color:var(--c-gold);padding:8px;border-radius:var(--radius-sm);transition:background .12s;user-select:none;-webkit-user-select:none;line-height:1;flex-shrink:0}
.topbar-toggle:hover{background:#1a1f2b}
.topbar-brand{font-weight:800;font-size:var(--fs-h3);color:var(--c-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topbar-badge{font-size:var(--fs-sm);color:var(--c-muted);display:none;white-space:nowrap}
.topbar-balance{font-size:var(--fs-sm);font-weight:700;color:var(--c-green);background:#1a1f2b;padding:4px 12px;border-radius:6px;white-space:nowrap}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:#1a1f2b;color:var(--c-gold);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;border:2px solid var(--c-gold);flex-shrink:0}

/* ===== MAIN CONTENT ===== */
.main-content{flex:1;padding:var(--p-page);max-width:1400px;width:100%;margin:0 auto;overflow-x:hidden}

/* ===== TOGGLE SIDEBAR ===== */
.drawer-overlay{position:fixed;inset:0;z-index:300}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:301;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.drawer-sidebar{position:fixed;left:0;top:0;bottom:0;width:min(var(--drawer-w),85vw);background:var(--c-surface);border-right:1px solid var(--c-border);z-index:302;display:flex;flex-direction:column;animation:slideIn .2s cubic-bezier(.4,0,.2,1)}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px}
.drawer-brand{font-weight:800;font-size:var(--fs-h3);color:var(--c-gold)}
.drawer-close{font-size:22px;color:var(--c-muted);cursor:pointer;padding:6px;border-radius:var(--radius-sm);transition:all .12s;line-height:1}
.drawer-close:hover{color:var(--c-text);background:#1a1f2b}
.sidebar-divider{height:1px;background:linear-gradient(90deg,var(--c-border),transparent);margin:0 12px}
.sidebar-nav{flex:1;padding:8px;overflow-y:auto}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-body);font-weight:500;color:var(--c-muted);transition:all .12s;user-select:none;-webkit-user-select:none}
.sidebar-item:hover{color:var(--c-text);background:#1a1f2b}
.sidebar-item.active{color:var(--c-gold);background:linear-gradient(90deg,#1a1500,var(--c-surface));font-weight:700;border-left:3px solid var(--c-gold)}
.sidebar-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0}
.sidebar-label{white-space:nowrap}
.sidebar-footer{padding:14px;border-top:1px solid var(--c-border)}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sidebar-avatar{width:34px;height:34px;border-radius:50%;background:#1a1f2b;color:var(--c-gold);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;border:2px solid var(--c-gold);flex-shrink:0}
.sidebar-user-info{min-width:0;flex:1}
.sidebar-user-name{font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-balance{font-size:var(--fs-sm);color:var(--c-green);font-weight:700}
.sidebar-disconnect{width:100%;background:var(--c-border);color:var(--c-red);padding:9px 0;font-size:var(--fs-sm)}

/* ===== RESPONSIVE: MAC (>1440px) ===== */
@media(min-width:1441px){
  :root{--stat:32px;--p-card:24px;--p-page:36px;--fs-h1:28px;--fs-h2:22px;--fs-h3:18px;--topbar-h:64px;--drawer-w:300px}
  .topbar-badge{display:inline}
}

/* ===== RESPONSIVE: Laptop (1025-1440px) ===== */
@media(min-width:1025px) and (max-width:1440px){
  .topbar-badge{display:inline}
}

/* ===== RESPONSIVE: Small laptop / tablet (769-1024px) ===== */
@media(min-width:769px) and (max-width:1024px){
  :root{--stat:22px;--p-card:14px;--p-page:20px;--fs-h1:22px;--fs-h2:18px;--fs-h3:15px;--gap:14px}
  .grid-cols-4{grid-template-columns:repeat(2,1fr)}
}

/* ===== RESPONSIVE: Mobile / Tablet (<=768px) ===== */
@media(max-width:768px){
  :root{--stat:20px;--p-card:14px;--p-page:16px;--fs-h1:20px;--fs-h2:18px;--fs-h3:15px;--fs-body:13px;--gap:12px;--topbar-h:54px}
  .topbar{padding:0 12px}
  .topbar-brand{font-size:14px}
  .topbar-balance{font-size:11px;padding:3px 8px}
  .topbar-avatar{width:28px;height:28px;font-size:10px}
  .grid-cols-4{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}
  .grid-cols-3{grid-template-columns:1fr;gap:var(--gap-sm)}
  .grid-cols-2{grid-template-columns:1fr;gap:var(--gap-sm)}
  .gap-4{gap:var(--gap-sm)}.gap-6{gap:16px}
  th,td{padding:6px 8px;font-size:var(--fs-sm)}
}

/* ===== RESPONSIVE: Small mobile (<=480px) ===== */
@media(max-width:480px){
  :root{--stat:17px;--p-card:var(--p-compact);--p-page:12px;--fs-h1:18px;--fs-h2:16px;--fs-h3:14px;--fs-body:12px;--fs-sm:11px;--gap:10px;--topbar-h:50px}
  .topbar{padding:0 10px}
  .card{border-radius:var(--radius-sm)}
  .btn{padding:7px 12px;font-size:var(--fs-sm);border-radius:6px}
  .grid-cols-4{grid-template-columns:repeat(2,1fr);gap:var(--gap-xs)}
  th,td{padding:5px 4px}
}

/* ===== RESPONSIVE: Tiny (<=360px) ===== */
@media(max-width:360px){
  :root{--stat:15px;--p-page:8px;--gap:6px}
  .grid-cols-4,.grid-cols-2{grid-template-columns:1fr;gap:6px}
  .topbar-brand{font-size:12px}
}

/* Card with table gets scroll */
.card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Safe area */
@supports(padding:max(0px)){
  .topbar{padding-top:max(0px,env(safe-area-inset-top))}
}

/* ===== COMPONENT CLASSES (JS-driven) ===== */
.connect-screen{display:flex;justify-content:center;align-items:center;min-height:100dvh;padding:12px}
.connect-box{max-width:500px;width:100%;padding:28px}
.brand-title{font-size:var(--fs-h1);font-weight:800;color:var(--c-gold);margin-bottom:8px}
.text-muted{color:var(--c-muted);font-size:var(--fs-sm)}
.text-accent{font-size:var(--fs-sm);color:#f97316}
.page-title{font-size:var(--fs-h2);font-weight:800}
.section-title{font-size:var(--fs-h3);font-weight:700}
.ref-link{font-size:var(--fs-h3);font-weight:700;color:var(--c-gold);word-break:break-all}
.wallet-icon{width:40px;height:40px;border-radius:50%;background:#1a1f2b;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.wallet-icon-sm{width:36px;height:36px;border-radius:8px;background:#1a1f2b;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.wallet-name{font-weight:700;font-size:var(--fs-body)}
.wallet-addr{font-size:var(--fs-xs);color:var(--c-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallet-bal{font-weight:700;color:var(--c-green);font-size:var(--fs-h3)}
.wallet-unit{font-size:var(--fs-xs);color:var(--c-muted)}
.pkg-name{font-size:var(--fs-h3);font-weight:700}
.pkg-price{font-size:var(--fs-h2);font-weight:800}
.pkg-details{font-size:var(--fs-sm);margin-bottom:16px}
.info-cell{padding:12px;background:var(--c-surface);border-radius:var(--radius-sm)}
.info-value{font-size:var(--fs-h3);font-weight:700;margin-top:4px}
.field-label{display:block;font-size:var(--fs-sm);margin-bottom:4px}
.field-input{display:block;width:100%;padding:8px;background:var(--c-border);color:#fff;border-radius:6px;border:none;font-size:var(--fs-body)}
.btn-locked{background:var(--c-border);color:var(--c-muted);cursor:not-allowed;opacity:.5}
.toast{position:fixed;top:20px;right:20px;z-index:9999;padding:14px 24px;border-radius:10px;font-weight:600;box-shadow:0 0 20px rgba(0,0,0,.3);max-width:90vw;word-break:break-word}
.connect-wallet{padding:14px !important}

/* ===== LOGIN PORTAL ===== */
.login-portal{display:flex;justify-content:center;align-items:center;min-height:100dvh;padding:12px;position:relative;overflow:hidden}
.portal-bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0}
.particle{position:absolute;width:3px;height:3px;background:var(--c-gold);border-radius:50%;opacity:0;bottom:-10px;animation:floatUp linear infinite}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:.6}90%{opacity:.3}100%{opacity:0;transform:translateY(-100vh) scale(0)}}
.portal-card{position:relative;z-index:1;background:var(--c-card);border:1px solid var(--c-border);border-radius:16px;padding:28px;max-width:480px;width:100%;box-shadow:0 0 40px rgba(240,185,11,.08)}
.portal-header{text-align:center;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--c-border)}
.portal-logo{font-size:36px;margin-bottom:8px}
.portal-title{font-size:var(--fs-h1);font-weight:800;color:var(--c-gold);margin-bottom:6px}
.portal-subtitle{color:var(--c-muted);font-size:var(--fs-sm);margin-bottom:12px}
.portal-badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.portal-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.portal-choice{background:var(--c-surface);border:2px solid var(--c-border);border-radius:12px;padding:20px 16px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;text-align:center}
.portal-choice:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.portal-choice-user:hover{border-color:var(--c-green);background:rgba(0,210,106,.04)}
.portal-choice-admin:hover{border-color:var(--c-gold);background:rgba(240,185,11,.04)}
.choice-icon{font-size:32px;margin-bottom:10px}
.choice-title{font-size:var(--fs-h3);font-weight:700;color:var(--c-text);margin-bottom:6px}
.choice-desc{font-size:var(--fs-xs);color:var(--c-muted);line-height:1.4;flex:1}
.choice-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--c-border);width:100%}
.choice-arrow{color:var(--c-gold);font-weight:700;font-size:var(--fs-sm)}
.portal-back{cursor:pointer;color:var(--c-muted);font-size:var(--fs-sm);font-weight:600;padding:6px 0;transition:color .15s}
.portal-back:hover{color:var(--c-text)}
.portal-wallet-list{max-height:340px;overflow-y:auto}
.portal-wallet-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:8px}
.portal-wallet-item:hover{border-color:var(--c-gold);transform:translateX(4px);background:#0f1218}
.portal-admin-section{padding-top:4px}
@media(max-width:520px){.portal-choices{grid-template-columns:1fr}.portal-card{padding:18px}}


/* Matrix Tree Connectors */
.tree-hbar {
  position: absolute !important;
  top: 0;
  height: 1px !important;
  background: #334155 !important;
}



/* ===== VAULT LOGIN COMPONENT ===== */
.vault-container {
  background: #0b0f19;
  border: 2px solid #f0b90b;
  box-shadow: 0 0 50px rgba(240, 185, 11, 0.15);
  border-radius: 16px;
  padding: 32px;
  width: 420px;
  position: relative;
  transition: all 0.3s ease;
  z-index: 10000;
  box-sizing: border-box;
}
.vault-title {
  color: #f0b90b;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  margin-top: 0;
  text-align: center;
}
.vault-dial-wrapper {
  perspective: 1000px;
  margin-bottom: 24px;
}
.vault-dial {
  width: 90px;
  height: 90px;
  border: 5px double #f0b90b;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  background: radial-gradient(circle, #1a2333 30%, #0d131f 70%);
  box-shadow: 0 0 20px rgba(240,185,11,0.2), inset 0 0 15px rgba(0,0,0,0.8);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.vault-dial::before, .vault-dial::after {
  content: '';
  position: absolute;
  background: #f0b90b;
}
.vault-dial::before {
  top: 5%;
  bottom: 5%;
  left: 47%;
  width: 6%;
}
.vault-dial::after {
  left: 5%;
  right: 5%;
  top: 47%;
  height: 6%;
}
.vault-dial-spoke-diag {
  position: absolute;
  background: #f0b90b;
  width: 6%;
  top: 5%;
  bottom: 5%;
  left: 47%;
  transform: rotate(45deg);
}
.vault-dial-spoke-diag-2 {
  position: absolute;
  background: #f0b90b;
  width: 6%;
  top: 5%;
  bottom: 5%;
  left: 47%;
  transform: rotate(-45deg);
}
.vault-dial-center {
  width: 24px;
  height: 24px;
  background: #f0b90b;
  border-radius: 50%;
  position: absolute;
  top: 33px;
  left: 33px;
  box-shadow: 0 0 10px rgba(240,185,11,0.6);
  z-index: 2;
}
.vault-dial.spin {
  animation: dialSpin 1.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes dialSpin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(720deg); }
}
.vault-indicators {
  display: flex;
  justify-content: space-around;
  margin-bottom: 24px;
  background: #111827;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #1f2937;
}
.indicator-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9ca3af;
}
.indicator-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #374151;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
  transition: all 0.25s ease;
}
.indicator-led.active {
  background: #10b981;
  box-shadow: 0 0 10px #10b981, inset 0 1px 3px rgba(255,255,255,0.5);
}
.vault-shake {
  animation: shake 0.4s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.vault-opening {
  transform: scale(0.9);
  opacity: 0.7;
}
.vault-label {
  display: block;
  text-align: left;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
}
.vault-input {
  width: 100%;
  padding: 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #f8fafc;
  font-size: 14px;
  margin-bottom: 16px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.vault-input:focus {
  border-color: #f0b90b;
  box-shadow: 0 0 8px rgba(240,185,11,0.15);
}