/* ─── Variables ─────────────────────────────────────── */
:root {
  --bg-base:    #0D0F14;
  --bg-surface: #161A23;
  --bg-card:    #1E2330;
  --bg-hover:   #252B3B;
  --border:     #2A3147;
  --border-light:#334060;
  --primary:    #6C63FF;
  --primary-dim: #4B44CC;
  --primary-glow:rgba(108,99,255,.25);
  --success:    #10B981;
  --warning:    #F59E0B;
  --danger:     #EF4444;
  --info:       #06B6D4;
  --text-1:     #F1F5F9;
  --text-2:     #94A3B8;
  --text-3:     #64748B;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.6);
  --sidebar-w:  260px;
  --topbar-h:   64px;
  --transition: .2s ease;
}

/* ─── Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg-base);color:var(--text-1);min-height:100vh;overflow-x:hidden;font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}
ul{list-style:none}

/* ─── Scrollbar ─────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-surface)}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:99px}

/* ─── Sidebar ───────────────────────────────────────── */
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;transition:transform var(--transition)}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px}
.brand-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),#8B5CF6);display:grid;place-items:center;color:#fff}
.brand-icon svg{width:18px;height:18px}
.brand-name{font-size:18px;font-weight:800;background:linear-gradient(135deg,var(--primary),#8B5CF6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-close{display:none;color:var(--text-2);padding:4px}
.sidebar-nav{flex:1;overflow-y:auto;padding:12px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-md);color:var(--text-2);font-size:13.5px;font-weight:500;transition:all var(--transition);margin-bottom:2px}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item:hover{background:var(--bg-hover);color:var(--text-1)}
.nav-item.active{background:var(--primary-glow);color:var(--primary);font-weight:600}
.nav-item.active svg{filter:drop-shadow(0 0 4px var(--primary))}
.sidebar-footer{padding:12px 8px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);margin-bottom:4px;justify-content:space-between;width:100%}
.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#8B5CF6);display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.user-info{flex:1;min-width:0;overflow:hidden}
.user-name{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-email{font-size:9.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logout-icon-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);color:var(--danger);border:1px solid rgba(239,68,68,0.45);transition:all var(--transition);flex-shrink:0}
.logout-icon-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 0 10px rgba(239,68,68,0.35)}
.logout-icon-btn svg{width:16px;height:16px}
.logout-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-md);color:var(--danger);font-size:13px;font-weight:500;transition:background var(--transition);width:100%}
.logout-btn:hover{background:rgba(239,68,68,.1)}
.logout-btn svg{width:16px;height:16px}

/* ─── Main Wrapper ──────────────────────────────────── */
.main-wrapper{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin var(--transition)}

/* ─── Topbar ────────────────────────────────────────── */
.topbar{height:var(--topbar-h);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:100}
.hamburger{display:none;color:var(--text-2);padding:6px;border-radius:var(--radius-sm)}
.hamburger:hover{background:var(--bg-hover)}
.hamburger svg{width:20px;height:20px}
.topbar-title{font-size:16px;font-weight:700;flex:1}
.topbar-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:var(--radius-md);display:grid;place-items:center;color:var(--text-2);background:var(--bg-card);border:1px solid var(--border);transition:all var(--transition);position:relative}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-1)}
.icon-btn svg{width:18px;height:18px}
.badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;border-radius:99px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg-surface)}

/* ─── Page Content ──────────────────────────────────── */
.page-content{flex:1;padding:24px;max-width:1400px;width:100%;margin:0 auto}

/* ─── Cards ─────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-title svg{width:18px;height:18px;color:var(--primary)}

/* ─── Stats Grid ─────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;transition:transform var(--transition),box-shadow var(--transition)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--primary))}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-icon{width:44px;height:44px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:12px;background:color-mix(in srgb,var(--accent,var(--primary)) 15%,transparent)}
.stat-icon svg{width:22px;height:22px;color:var(--accent,var(--primary))}
.stat-label{font-size:12px;color:var(--text-2);font-weight:500;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:22px;font-weight:800;letter-spacing:-.5px}
.stat-sub{font-size:12px;color:var(--text-3);margin-top:4px}

/* ─── Charts Grid ───────────────────────────────────── */
.charts-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:24px}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr}}

/* ─── Tables ─────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-md)}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg-hover)}

/* ─── Forms ─────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.form-control{width:100%;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-1);padding:10px 14px;font-size:14px;transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.form-control::placeholder{color:var(--text-3)}
select.form-control option{background:var(--bg-card)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ─── Buttons ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--radius-md);font-size:13.5px;font-weight:600;transition:all var(--transition);white-space:nowrap;cursor:pointer;border:none}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dim);box-shadow:0 4px 12px var(--primary-glow)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#059669}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#DC2626}
.btn-warning{background:var(--warning);color:#fff}
.btn-warning:hover{background:#D97706}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-1)}
.btn-outline:hover{background:var(--bg-hover)}
.btn-sm{padding:7px 13px;font-size:12px}
.btn-full{width:100%;justify-content:center}
.btn-icon{width:36px;height:36px;padding:0;justify-content:center}

/* ─── Badges ─────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:600}
.chip-income{background:rgba(16,185,129,.15);color:var(--success)}
.chip-expense{background:rgba(239,68,68,.15);color:var(--danger)}
.chip-transfer{background:rgba(108,99,255,.15);color:var(--primary)}
.chip-warning{background:rgba(245,158,11,.15);color:var(--warning)}
.chip-info{background:rgba(6,182,212,.15);color:var(--info)}

/* ─── Progress Bar ──────────────────────────────────── */
.progress-wrap{background:var(--bg-base);border-radius:99px;height:8px;overflow:hidden}
.progress-bar{height:100%;border-radius:99px;transition:width .6s ease}

/* ─── Modals ─────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:500;display:none;place-items:center;padding:16px}
.modal-overlay.open{display:grid}
.modal{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);width:100%;max-height:90vh;overflow-y:auto;animation:modalIn .2s ease}
@keyframes modalIn{from{transform:scale(.95) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.modal-header h3 svg{width:18px;height:18px;color:var(--primary)}
.modal-header button{color:var(--text-2);padding:4px;border-radius:var(--radius-sm);transition:background var(--transition)}
.modal-header button:hover{background:var(--bg-hover)}
.modal-header button svg{width:18px;height:18px}
.modal-body{padding:24px}

/* ─── Notification Dropdown ─────────────────────────── */
.notif-wrapper{position:relative}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:300;display:none;flex-direction:column;overflow:hidden}
.notif-dropdown.open{display:flex}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700}
.mark-read-btn{font-size:11px;color:var(--primary);font-weight:500}
.notif-list{max-height:320px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background var(--transition);cursor:pointer}
.notif-item:hover{background:var(--bg-hover)}
.notif-item.unread{background:rgba(108,99,255,.05)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:6px}
.notif-item-content{}
.notif-item-title{font-size:13px;font-weight:600;margin-bottom:2px}
.notif-item-msg{font-size:12px;color:var(--text-2);line-height:1.5}
.notif-item-time{font-size:11px;color:var(--text-3);margin-top:4px}
.notif-footer{padding:12px 16px;text-align:center;font-size:12px;color:var(--primary);border-top:1px solid var(--border);font-weight:500}
.notif-loading{padding:24px;display:flex;justify-content:center;color:var(--text-3)}

/* ─── Type Tabs ─────────────────────────────────────── */
.type-tabs{display:flex;gap:4px;background:var(--bg-base);border-radius:var(--radius-md);padding:4px;margin-bottom:16px}
.type-tab{flex:1;padding:8px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--text-2);transition:all var(--transition);text-align:center}
.type-tab.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px var(--primary-glow)}

/* ─── Filters Bar ───────────────────────────────────── */
.filters-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters-bar .form-control{flex:1;min-width:150px}

/* ─── Empty State ───────────────────────────────────── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-3)}
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}
.empty-state h3{font-size:15px;font-weight:600;color:var(--text-2);margin-bottom:6px}
.empty-state p{font-size:13px}

/* ─── Alert Boxes ───────────────────────────────────── */
.alert{padding:12px 16px;border-radius:var(--radius-md);font-size:13px;display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.alert svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.alert-danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--danger)}
.alert-success{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--success)}
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);color:var(--warning)}
.alert-info{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);color:var(--info)}

/* ─── Pagination ─────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:4px;justify-content:center;padding:16px 0}
.page-btn{min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text-2);background:var(--bg-card);border:1px solid var(--border);transition:all var(--transition)}
.page-btn:hover{background:var(--bg-hover);color:var(--text-1)}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ─── Wallet Cards ──────────────────────────────────── */
.wallets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.wallet-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:relative;overflow:hidden;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition)}
.wallet-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wallet-card::after{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:var(--wcolor,var(--primary));opacity:.08}
.wallet-icon{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:16px}
.wallet-icon svg{width:24px;height:24px}
.wallet-name{font-size:13px;color:var(--text-2);margin-bottom:6px}
.wallet-balance{font-size:22px;font-weight:800;letter-spacing:-.5px}
.wallet-type{font-size:11px;color:var(--text-3);margin-top:4px;text-transform:capitalize}

/* ─── Goal Cards ─────────────────────────────────────── */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.goal-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.goal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.goal-icon{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:20px}
.goal-actions{display:flex;gap:4px}
.goal-name{font-size:15px;font-weight:700;margin-bottom:4px}
.goal-amounts{font-size:13px;color:var(--text-2);margin-bottom:10px}
.goal-deadline{font-size:11px;color:var(--text-3)}
.goal-monthly{font-size:12px;color:var(--primary);font-weight:600;margin-top:8px}

/* ─── Health Score ──────────────────────────────────── */
.health-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}
.health-score-num{position:absolute;font-size:40px;font-weight:900;letter-spacing:-2px}
.health-components{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.health-comp{background:var(--bg-base);border-radius:var(--radius-md);padding:14px}
.health-comp-title{font-size:12px;color:var(--text-2);font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}
.health-comp-score{font-size:20px;font-weight:800;margin-bottom:6px}

/* ─── Overlay sidebar ───────────────────────────────── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150}

/* ─── Spin animation ────────────────────────────────── */
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Toast ─────────────────────────────────────────── */
#toastContainer{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
@media(max-width:768px){#toastContainer{bottom:calc(var(--tabbar-h) + 16px);right:16px;left:16px}}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;font-size:13px;box-shadow:var(--shadow-lg);animation:slideIn .2s ease;display:flex;align-items:center;gap:10px;min-width:260px}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
.toast.warning{border-left:3px solid var(--warning)}
.toast.info{border-left:3px solid var(--primary)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ─── Responsive ─────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:block}
  .sidebar-overlay.open{display:block}
  .main-wrapper{margin-left:0}
  .hamburger{display:grid}
  .page-content{padding:16px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .notif-dropdown{right:-80px;width:300px}
  .health-components{grid-template-columns:1fr}
  .wallets-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .wallets-grid{grid-template-columns:1fr}
}

/* ─── Offline Sync — Connection Status ─────────────────── */
.conn-status {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  cursor: default;
  user-select: none;
  transition: border-color .25s, background .25s;
}
.conn-status.is-offline {
  border-color: rgba(239,68,68,.4);
  background: rgba(239,68,68,.06);
}
.conn-status.is-syncing {
  border-color: rgba(245,158,11,.4);
  background: rgba(245,158,11,.06);
}
.conn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conn-dot.online {
  background: #10B981;
  box-shadow: 0 0 0 2px rgba(16,185,129,.25);
}
.conn-dot.offline {
  background: #EF4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.25);
}
.conn-dot.syncing {
  background: #F59E0B;
  box-shadow: 0 0 0 2px rgba(245,158,11,.25);
  animation: connPulse 1s ease-in-out infinite;
}
@keyframes connPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
  50%      { opacity: .6; box-shadow: 0 0 0 5px rgba(245,158,11,.08); }
}
.conn-label { color: var(--text-2); }
.conn-badge {
  background: var(--warning);
  color: #000;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 2px;
  transition: opacity .15s;
}
.conn-badge:hover { opacity: .8; }

/* ─── Offline Queue Panel ────────────────────────────────── */
#offlineQueuePanel {
  display: none;
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9000;
  width: 340px;
  animation: modalIn .18s ease;
}
#offlineQueuePanel.open { display: block; }
.oq-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  overflow: hidden;
}
.oq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  background: rgba(245,158,11,.06);
}
.oq-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--warning);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
}
.oq-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}
.oq-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-3);
  font-size: 13px;
}
.oq-empty p { margin-top: 8px; }
.oq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.oq-item:last-child { border-bottom: none; }
.oq-item:hover { background: var(--bg-hover); }
.oq-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  display: grid;
  place-items: center;
  color: var(--warning);
  flex-shrink: 0;
}
.oq-item-body { flex: 1; min-width: 0; }
.oq-item-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oq-item-time {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}
.oq-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--text-3);
}
@media(max-width:480px) {
  #offlineQueuePanel { right: 8px; left: 8px; width: auto; top: 68px; }
  .conn-label { display: none; }
}

/* ─── Hide Balance Mode ────────────────────────────────── */
.sensitive-value { display: inline; }
.sensitive-placeholder { display: none; }
body.hide-balance-mode .sensitive-value { display: none !important; }
body.hide-balance-mode .sensitive-placeholder { display: inline !important; }

/* ═══════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   Only visible on ≤768px screens
══════════════════════════════════════════════════════════ */
:root {
  --tabbar-h: 72px;
  --tabbar-bg: rgba(22, 26, 35, 0.85);
  --tabbar-blur: blur(20px);
  --tabbar-border: rgba(108, 99, 255, 0.18);
  --tabbar-active: #6C63FF;
  --tabbar-inactive: #64748B;
}

/* ── Tab Bar + More Sheet: hidden on desktop ───────── */
.mobile-tabbar,
.tabmore-overlay,
.tabmore-sheet {
  display: none;
}

@media (max-width: 768px) {
  /* Give page-content breathing room above tab bar */
  .page-content {
    padding-bottom: calc(var(--tabbar-h) + 20px);
  }

  /* ── Tab Bar ──────────────────────────────────────── */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    padding: 0 12px env(safe-area-inset-bottom, 12px);
    pointer-events: none;
  }

  .tabbar-inner {
    pointer-events: all;
    width: 100%;
    height: var(--tabbar-h);
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--tabbar-bg);
    backdrop-filter: var(--tabbar-blur);
    -webkit-backdrop-filter: var(--tabbar-blur);
    border: 1px solid var(--tabbar-border);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(108,99,255,.08);
    padding: 0 4px;
    position: relative;
    overflow: hidden;
  }

  /* Gradient top shimmer line */
  .tabbar-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.6;
  }

  /* ── Individual tab item ───────────────────────────── */
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    padding: 10px 4px 8px;
    border-radius: 18px;
    color: var(--tabbar-inactive);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    min-width: 0;
  }

  .tabbar-item:active {
    transform: scale(0.92);
  }

  .tabbar-item.active {
    color: var(--tabbar-active);
  }

  /* ── Tab icon ──────────────────────────────────────── */
  .tabbar-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
  }

  .tabbar-item.active .tabbar-icon {
    background: rgba(108, 99, 255, 0.15);
    box-shadow: 0 0 12px rgba(108, 99, 255, 0.3);
  }

  .tabbar-icon svg {
    width: 20px;
    height: 20px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .tabbar-item.active .tabbar-icon svg {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 6px rgba(108,99,255,.5));
  }

  /* ── Tab label ─────────────────────────────────────── */
  .tabbar-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: opacity 0.2s ease;
  }

  /* ── Active indicator dot ──────────────────────────── */
  .tabbar-active-dot {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px var(--primary);
    animation: dotPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes dotPop {
    from { transform: translateX(-50%) scale(0); opacity: 0; }
    to   { transform: translateX(-50%) scale(1); opacity: 1; }
  }

  /* ─────────────────────────────────────────────────────
     MORE SHEET (bottom sheet overlay)
  ───────────────────────────────────────────────────── */
  .tabmore-overlay {
    display: block; /* visible on mobile (hidden via opacity until .open) */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 450;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .tabmore-overlay.open {
    opacity: 1;
    pointer-events: all;
  }

  .tabmore-sheet {
    display: block; /* visible on mobile (hidden via transform until .open) */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 460;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    padding: 0 0 env(safe-area-inset-bottom, 12px);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
    will-change: transform;
  }
  .tabmore-sheet.open {
    transform: translateY(0);
  }

  /* Drag handle */
  .tabmore-handle {
    width: 36px;
    height: 4px;
    background: var(--border-light);
    border-radius: 99px;
    margin: 12px auto 0;
  }

  /* Sheet header with brand + user */
  .tabmore-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
  }

  .tabmore-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), #8B5CF6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .tabmore-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--primary), #8B5CF6);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    -webkit-text-fill-color: #fff;
  }
  .tabmore-brand-icon svg { width: 16px; height: 16px; }

  .tabmore-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .tabmore-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #8B5CF6);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
  }

  .tabmore-username {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
  }
  .tabmore-useremail {
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
  }

  /* Grid of items */
  .tabmore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 12px 12px 4px;
  }

  .tabmore-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border-radius: 16px;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
  }
  .tabmore-item:active { transform: scale(0.94); }
  .tabmore-item:hover  { background: var(--bg-hover); color: var(--text-1); }
  .tabmore-item.active { color: var(--primary); background: rgba(108,99,255,.1); }

  .tabmore-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .tabmore-item-icon svg { width: 22px; height: 22px; }
  .tabmore-item.active .tabmore-item-icon {
    background: rgba(108,99,255,.15);
    border-color: rgba(108,99,255,.4);
    box-shadow: 0 0 14px rgba(108,99,255,.2);
  }

  .tabmore-item-label {
    font-size: 10.5px;
    font-weight: 600;
    color: inherit;
  }

  /* Logout row */
  .tabmore-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 16px 16px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    justify-content: center;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .tabmore-logout svg { width: 16px; height: 16px; }
  .tabmore-logout:hover { background: rgba(239, 68, 68, 0.15); }

  /* Prevent body scroll when sheet open */
  body.tabmore-open { overflow: hidden; }
}