/* ═══════════════════════════════════════════════════════════
   AxyraPay — Design System v3
   Mesmo padrão visual do login/cadastro
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --primary:     #E8001E;
  --primary-d:   #b5001a;
  --primary-rgb: 232,0,30;
  --bg:          #070709;
  --surface:     #0f0f12;
  --surface2:    #16161a;
  --surface3:    #1d1d22;
  --border:      rgba(255,255,255,.07);
  --border2:     rgba(255,255,255,.04);
  --text:        #f0f0f0;
  --text2:       #9ca3af;
  --text3:       #6b7280;
  --success:     #22c55e;
  --warning:     #f59e0b;
  --danger:      #ef4444;
  --info:        #6366f1;
  --sidebar-w:   252px;
  --topbar-h:    58px;
  --r:           10px;
  --r-lg:        14px;
  --r-xl:        18px;
  --shadow:      0 4px 32px rgba(0,0,0,.5);
  --shadow-lg:   0 8px 48px rgba(0,0,0,.6);
  --glow:        0 0 28px rgba(var(--primary-rgb),.25);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; touch-action:manipulation; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text);
       min-height:100vh; line-height:1.55; -webkit-font-smoothing:antialiased; overscroll-behavior-y:contain; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
input,select,textarea,button { font-family:inherit; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(var(--primary-rgb),.35); border-radius:4px; }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: #0a0a0d;
  border-right: 1px solid var(--border);
  position: fixed; top:0; left:0; bottom:0;
  z-index: 500;
  display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.sidebar-logo {
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.logo-mark {
  width: 34px; height: 34px;
  background: var(--primary); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px; color: #fff;
  flex-shrink: 0; box-shadow: var(--glow);
}
.logo-text { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.logo-text span { color: var(--primary); }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.nav-section { margin-bottom: 20px; }
.nav-section-label {
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 1.1px;
  padding: 0 16px; margin-bottom: 4px; display: block;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin: 1px 8px;
  border-radius: var(--r);
  color: var(--text2); font-size: 13px; font-weight: 500;
  transition: all .16s; position: relative; cursor: pointer;
}
.nav-item i { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-item:hover { background:rgba(255,255,255,.05); color:var(--text); }
.nav-item.active {
  background: rgba(var(--primary-rgb),.1);
  color: var(--primary); font-weight: 600;
}
.nav-item.active::before {
  content:''; position:absolute;
  left:-8px; top:8px; bottom:8px;
  width:3px; background:var(--primary); border-radius:0 3px 3px 0;
}
.nav-badge {
  margin-left:auto; background:var(--primary); color:#fff;
  font-size:9px; font-weight:700; padding:2px 6px; border-radius:20px;
}
.nav-item-hot { background:linear-gradient(90deg,rgba(var(--primary-rgb),.07),transparent); }
.nav-item-hot.active { background:rgba(var(--primary-rgb),.12); }
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: 12px;
  flex-shrink: 0;
}
.user-row { display:flex; align-items:center; gap:9px; }
.user-ava {
  width:33px; height:33px; background:rgba(var(--primary-rgb),.15);
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--primary); font-weight:700; font-size:13px; flex-shrink:0;
  overflow:hidden;
}
.user-ava img { width:100%; height:100%; object-fit:cover; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-bal { font-size:11px; color:var(--primary); font-weight:600; }
.btn-logout { color:var(--text3); padding:6px; border-radius:7px; transition:.18s; display:flex; }
.btn-logout:hover { color:var(--danger); background:rgba(239,68,68,.1); }

/* ── SIDEBAR OVERLAY ───────────────────────────────────── */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:499; backdrop-filter:blur(3px); }
.sidebar-overlay.open { display:block; }

/* ── TOPBAR (mobile) ────────────────────────────────────── */
.topbar {
  display:none; position:fixed;
  top:0; left:0; right:0; height:var(--topbar-h);
  background:#0a0a0d; border-bottom:1px solid var(--border);
  z-index:300; align-items:center; padding:0 14px; gap:10px;
}
.topbar-logo { font-size:15px; font-weight:800; }
.topbar-logo span { color:var(--primary); }
.btn-hamburger {
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:var(--text); width:36px; height:36px; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.18s; flex-shrink:0;
}
.btn-hamburger:hover { background:rgba(255,255,255,.09); }
.topbar-notif { margin-left:auto; position:relative; }
.topbar-notif-btn {
  background:none; border:none; color:var(--text2); cursor:pointer;
  font-size:19px; padding:6px; position:relative;
}
.notif-dot {
  position:absolute; top:4px; right:4px;
  width:7px; height:7px; background:var(--primary);
  border-radius:50%; border:2px solid #0a0a0d;
}

/* ── MAIN LAYOUT ────────────────────────────────────────── */
.main { margin-left:var(--sidebar-w); padding:28px 28px 48px; min-height:100vh; }

/* ── PAGE HEADER ────────────────────────────────────────── */
.page-header { margin-bottom:24px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.page-header-left h1 { font-size:21px; font-weight:900; letter-spacing:-.4px; }
.page-header-left p  { font-size:13px; color:var(--text2); margin-top:3px; }
/* Legacy compat */
.page-title    { font-size:21px; font-weight:900; letter-spacing:-.4px; }
.page-subtitle { font-size:13px; color:var(--text2); margin-top:3px; }

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px;
  margin-bottom: 20px;
}
.card:last-child { margin-bottom:0; }
.card-sm { padding:16px; }
.card-xs { padding:12px 14px; }
.card-title { font-size:14px; font-weight:700; margin-bottom:16px; }
.card-inner { background:var(--surface2); border:1px solid var(--border2); border-radius:var(--r-lg); padding:16px; }

/* ── STAT CARDS ─────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  transition:.22s; position:relative; overflow:hidden;
}
.stat-card::after { content:''; position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 0%,rgba(var(--primary-rgb),.07),transparent 70%); transition:.22s; }
.stat-card:hover { border-color:rgba(var(--primary-rgb),.2); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.3); }
.stat-card:hover::after { opacity:1; }
.stat-icon {
  width:42px; height:42px; border-radius:var(--r);
  background:rgba(var(--primary-rgb),.1); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:18px;
}
.stat-icon.green  { background:rgba(34,197,94,.1);  color:var(--success); }
.stat-icon.yellow { background:rgba(245,158,11,.1); color:var(--warning); }
.stat-icon.blue   { background:rgba(99,102,241,.1); color:var(--info); }
.stat-label { font-size:11.5px; color:var(--text2); margin-bottom:3px; font-weight:500; }
.stat-value { font-size:20px; font-weight:900; letter-spacing:-.3px; line-height:1; }
.stat-sub   { font-size:11px; color:var(--text3); margin-top:4px; }

/* ── NETWORK BANNER ─────────────────────────────────────── */
.network-banner {
  background:linear-gradient(135deg,rgba(var(--primary-rgb),.1) 0%,rgba(var(--primary-rgb),.03) 100%);
  border:1px solid rgba(var(--primary-rgb),.15);
  border-radius:var(--r-xl); padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:20px; text-decoration:none; color:inherit;
  transition:.22s; position:relative; overflow:hidden;
}
.network-banner::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(var(--primary-rgb),.04),transparent); transform:translateX(-100%); transition:.6s; }
.network-banner:hover { border-color:rgba(var(--primary-rgb),.3); transform:translateY(-1px); }
.network-banner:hover::before { transform:translateX(100%); }
.nb-icon { width:46px; height:46px; background:rgba(var(--primary-rgb),.12); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; color:var(--primary); overflow:hidden; }
.nb-icon img { width:100%; height:100%; object-fit:cover; }
.nb-title { font-size:14px; font-weight:700; }
.nb-sub   { font-size:12px; color:var(--text2); margin-top:2px; }
.nb-arrow { margin-left:auto; color:var(--primary); font-size:17px; flex-shrink:0; }

/* ── QUICK ACTIONS ──────────────────────────────────────── */
.quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:12px; margin-bottom:22px; }
.quick-btn {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:16px 14px;
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text2);
  transition:.22s; cursor:pointer;
}
.quick-btn:hover { border-color:rgba(var(--primary-rgb),.25); color:var(--text); transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.quick-btn i { font-size:20px; color:var(--primary); flex-shrink:0; }
.quick-btn strong { font-size:12px; font-weight:700; color:var(--text); display:block; }
.quick-btn small   { font-size:11px; color:var(--text3); }

/* ── TABLES ─────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:10.5px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; padding:10px 14px; border-bottom:1px solid var(--border); white-space:nowrap; }
td { padding:12px 14px; border-bottom:1px solid var(--border2); font-size:13px; color:var(--text2); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); color:var(--text); }
tr[data-href] { cursor:pointer; }

/* ── FORMS ──────────────────────────────────────────────── */
.form-group { margin-bottom:15px; }
.form-label { display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:6px; }
.input-wrap { position:relative; }
.input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text3); font-size:15px; pointer-events:none; }
.form-control {
  width:100%; padding:10px 13px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); font-size:13.5px;
  font-family:inherit; transition:border-color .18s, box-shadow .18s;
  -webkit-appearance:none; appearance:none; outline:none;
}
.form-control.with-icon { padding-left:38px; }
.form-control:focus { border-color:rgba(var(--primary-rgb),.5); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.09); }
.form-control::placeholder { color:var(--text3); }
select.form-control { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
textarea.form-control { resize:vertical; min-height:80px; }
.form-hint  { font-size:11.5px; color:var(--text3); margin-top:4px; }
.form-error { font-size:11.5px; color:var(--danger);  margin-top:4px; }
.form-row   { display:grid; gap:14px; }
.form-row-2 { grid-template-columns:1fr 1fr; }
.form-row-3 { grid-template-columns:1fr 1fr 1fr; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:9px 18px; border-radius:var(--r);
  font-size:13px; font-weight:600; cursor:pointer; border:none;
  text-decoration:none; transition:.18s; white-space:nowrap;
  font-family:inherit; -webkit-appearance:none; line-height:1;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; pointer-events:none; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 2px 14px rgba(var(--primary-rgb),.28); }
.btn-primary:hover { background:var(--primary-d); box-shadow:0 4px 20px rgba(var(--primary-rgb),.38); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text2); }
.btn-outline:hover { border-color:rgba(var(--primary-rgb),.35); color:var(--text); }
.btn-ghost   { background:transparent; border:none; color:var(--text2); }
.btn-ghost:hover { background:rgba(255,255,255,.05); color:var(--text); }
.btn-success { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.2); color:var(--success); }
.btn-success:hover { background:rgba(34,197,94,.2); }
.btn-danger  { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.2); color:var(--danger); }
.btn-danger:hover  { background:rgba(239,68,68,.22); }
.btn-warning { background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.2); color:var(--warning); }
.btn-sm  { padding:6px 12px; font-size:12px; border-radius:8px; }
.btn-lg  { padding:12px 24px; font-size:14px; }
.btn-xl  { padding:14px 28px; font-size:15px; border-radius:var(--r-lg); }
.btn-full { width:100%; }
.btn-icon { padding:8px; }
.btn-icon-sm { padding:5px; }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:600; line-height:1; }
.badge-success  { background:rgba(34,197,94,.12);       color:var(--success); }
.badge-warning  { background:rgba(245,158,11,.12);      color:var(--warning); }
.badge-danger   { background:rgba(239,68,68,.12);       color:var(--danger); }
.badge-secondary{ background:rgba(107,114,128,.12);     color:var(--text3); }
.badge-primary  { background:rgba(var(--primary-rgb),.12); color:var(--primary); }
.badge-info     { background:rgba(99,102,241,.12);      color:#818cf8; }

/* ── ALERTS ─────────────────────────────────────────────── */
.alert { padding:12px 15px; border-radius:var(--r); font-size:13px; margin-bottom:16px; display:flex; align-items:flex-start; gap:9px; border:1px solid; animation:alertIn .22s ease; }
.alert-success { background:rgba(34,197,94,.07);  border-color:rgba(34,197,94,.25);  color:#86efac; }
.alert-danger  { background:rgba(239,68,68,.07);  border-color:rgba(239,68,68,.25);  color:#fca5a5; }
.alert-warning { background:rgba(245,158,11,.07); border-color:rgba(245,158,11,.25); color:#fde68a; }
.alert-info    { background:rgba(99,102,241,.07); border-color:rgba(99,102,241,.25); color:#a5b4fc; }
@keyframes alertIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:none} }

/* ── MODALS ─────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:1000; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(6px); }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-xl); width:100%; max-width:500px; max-height:92vh; overflow-y:auto; animation:modalIn .22s ease; }
.modal-box-lg { max-width:700px; }
@keyframes modalIn { from{transform:translateY(16px);opacity:0} to{transform:none;opacity:1} }
.modal-head { padding:18px 20px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--surface2); z-index:1; }
.modal-title { font-size:15px; font-weight:700; }
.modal-body { padding:20px; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:9px; position:sticky; bottom:0; background:var(--surface2); }

/* ── KYC MODAL ──────────────────────────────────────────── */
.kyc-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:16px; }
.kyc-box { background:var(--surface2); border:1px solid rgba(245,158,11,.2); border-radius:var(--r-xl); width:100%; max-width:500px; max-height:92vh; overflow-y:auto; animation:modalIn .25s ease; }
.kyc-head { background:linear-gradient(135deg,rgba(245,158,11,.08),transparent); border-bottom:1px solid rgba(245,158,11,.12); padding:22px 20px 18px; text-align:center; }
.kyc-icon  { font-size:42px; margin-bottom:10px; }
.kyc-title { font-size:18px; font-weight:800; margin-bottom:4px; }
.kyc-sub   { font-size:13px; color:var(--text2); }

/* ── UPLOAD ZONE ────────────────────────────────────────── */
.upload-zone { border:2px dashed var(--border); border-radius:var(--r-lg); padding:26px 18px; text-align:center; transition:.2s; cursor:pointer; position:relative; }
.upload-zone:hover { border-color:rgba(var(--primary-rgb),.4); background:rgba(var(--primary-rgb),.03); }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-zone-icon  { font-size:26px; color:var(--text3); margin-bottom:8px; }
.upload-zone-label { font-size:13px; color:var(--text2); }
.upload-zone-hint  { font-size:11px; color:var(--text3); margin-top:3px; }
.upload-preview    { max-height:120px; width:auto; margin:10px auto 0; border-radius:8px; object-fit:cover; display:none; }

/* ── GRID ───────────────────────────────────────────────── */
.grid   { display:grid; gap:18px; }
.g-2    { grid-template-columns:repeat(2,1fr); }
.g-3    { grid-template-columns:repeat(3,1fr); }
.g-4    { grid-template-columns:repeat(4,1fr); }

/* ── PAGINATION ─────────────────────────────────────────── */
.pagination { display:flex; gap:5px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.page-btn { padding:7px 11px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text2); font-size:12.5px; cursor:pointer; text-decoration:none; transition:.16s; }
.page-btn:hover  { border-color:rgba(var(--primary-rgb),.3); color:var(--text); }
.page-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.page-btn.disabled { opacity:.35; pointer-events:none; }

/* ── MISC ───────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:16px 0; }
.empty-state { text-align:center; padding:48px 20px; color:var(--text3); }
.empty-state i { font-size:36px; margin-bottom:10px; display:block; opacity:.5; }
.empty-state p { font-size:13.5px; }
.code-text { font-family:'JetBrains Mono','Fira Code',monospace; font-size:12px; background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:10px 13px; word-break:break-all; color:var(--text2); }
.pix-qr { background:#fff; border-radius:var(--r-lg); padding:12px; display:inline-block; }
.pix-qr img { width:190px; height:190px; }
.copy-row { display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:9px 12px; }
.copy-row input { flex:1; background:none; border:none; color:var(--text2); font-size:12px; font-family:monospace; outline:none; min-width:0; }
.dev-chip { display:inline-flex; align-items:center; gap:5px; background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2); color:#a5b4fc; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:600; }
.hot-badge { display:inline-flex; align-items:center; gap:3px; background:linear-gradient(135deg,#ff4500,#ff8c00); color:#fff; padding:2px 6px; border-radius:20px; font-size:9px; font-weight:700; margin-left:3px; }
.rank-num { width:26px; height:26px; background:rgba(255,255,255,.06); border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--text3); flex-shrink:0; }
.rank-num.gold   { background:rgba(234,179,8,.15); color:#eab308; }
.rank-num.silver { background:rgba(148,163,184,.15); color:#94a3b8; }
.rank-num.bronze { background:rgba(180,115,63,.15); color:#cd853f; }
.rank-ava { width:32px; height:32px; border-radius:8px; background:rgba(var(--primary-rgb),.12); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:var(--primary); overflow:hidden; flex-shrink:0; }
.rank-ava img { width:100%; height:100%; object-fit:cover; }
.rank-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border2); }
.rank-row:last-child { border-bottom:none; }
.rank-name { flex:1; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-vol  { font-size:13px; font-weight:700; color:var(--primary); white-space:nowrap; }
.ptr-indicator { display:none; position:fixed; top:var(--topbar-h); left:0; right:0; z-index:200; background:var(--bg); border-bottom:1px solid var(--border); text-align:center; padding:11px; font-size:12px; color:var(--text3); }
.ptr-indicator.visible { display:block; }

/* ── NOTIF PANEL ────────────────────────────────────────── */
.notif-panel { position:absolute; top:calc(100% + 8px); right:0; width:300px; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-xl); z-index:400; overflow:hidden; box-shadow:var(--shadow-lg); display:none; }
.notif-panel.open { display:block; animation:modalIn .18s ease; }
.notif-head { padding:12px 15px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; }
.notif-list { max-height:300px; overflow-y:auto; }
.notif-item { display:flex; gap:9px; padding:11px 14px; border-bottom:1px solid var(--border2); cursor:pointer; transition:.16s; align-items:flex-start; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:rgba(255,255,255,.03); }
.notif-item.unread { border-left:3px solid var(--primary); }
.notif-dot2 { width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.notif-dot2.info    { background:var(--info); }
.notif-dot2.success { background:var(--success); }
.notif-dot2.warning { background:var(--warning); }
.notif-dot2.error   { background:var(--danger); }
.notif-ntitle { font-size:12.5px; font-weight:600; }
.notif-nmsg   { font-size:11.5px; color:var(--text3); margin-top:2px; }
.notif-ntime  { font-size:10.5px; color:var(--text3); margin-top:3px; }

/* ── PRODUCT / AWARD CARDS ──────────────────────────────── */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.product-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; transition:.22s; }
.product-card:hover { border-color:rgba(var(--primary-rgb),.22); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.28); }
.product-img { height:130px; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:32px; overflow:hidden; }
.product-img img { width:100%; height:100%; object-fit:cover; }
.product-body { padding:15px; }
.product-name  { font-size:14px; font-weight:700; margin-bottom:4px; }
.product-price { font-size:17px; font-weight:900; color:var(--primary); margin-bottom:11px; }
.product-link  { display:flex; align-items:center; gap:7px; background:var(--surface2); border:1px solid var(--border); border-radius:8px; padding:7px 10px; margin-bottom:11px; }
.product-link input { flex:1; background:none; border:none; color:var(--text2); font-size:11px; font-family:monospace; outline:none; cursor:text; min-width:0; }
.award-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.award-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:18px; text-align:center; transition:.22s; }
.award-card:hover { border-color:rgba(var(--primary-rgb),.2); transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.22); }
.award-img2 { width:64px; height:64px; border-radius:var(--r-lg); margin:0 auto 11px; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:30px; overflow:hidden; }
.award-img2 img { width:100%; height:100%; object-fit:cover; }
.award-name2 { font-size:13.5px; font-weight:700; margin-bottom:4px; }
.award-req2  { font-size:11.5px; color:var(--text3); margin-bottom:11px; line-height:1.4; }

/* ── UTILS ──────────────────────────────────────────────── */
.text-primary { color:var(--primary)!important; }
.text-success { color:var(--success)!important; }
.text-danger  { color:var(--danger)!important; }
.text-warning { color:var(--warning)!important; }
.text-muted   { color:var(--text3)!important; }
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.flex         { display:flex; }
.flex-col     { flex-direction:column; }
.items-center { align-items:center; }
.items-start  { align-items:flex-start; }
.justify-between { justify-content:space-between; }
.justify-center  { justify-content:center; }
.gap-2   { gap:8px; }
.gap-3   { gap:12px; }
.gap-4   { gap:16px; }
.mb-0    { margin-bottom:0!important; }
.mb-2    { margin-bottom:8px; }
.mb-3    { margin-bottom:12px; }
.mb-4    { margin-bottom:16px; }
.mb-5    { margin-bottom:20px; }
.mb-6    { margin-bottom:24px; }
.mt-2    { margin-top:8px; }
.mt-3    { margin-top:12px; }
.mt-4    { margin-top:16px; }
.fw-bold { font-weight:700; }
.fw-800  { font-weight:800; }
.fs-sm   { font-size:13px; }
.fs-xs   { font-size:11.5px; }
.w-full  { width:100%; }
.d-none  { display:none!important; }
.flex-1  { flex:1; }
.min-w-0 { min-width:0; }
.nowrap  { white-space:nowrap; }
.break-all { word-break:break-all; }
.cursor-pointer { cursor:pointer; }
.relative { position:relative; }
.overflow-hidden { overflow:hidden; }
.rounded  { border-radius:var(--r); }
.rounded-lg { border-radius:var(--r-lg); }
.rounded-xl { border-radius:var(--r-xl); }
.opacity-50 { opacity:.5; }
.font-mono { font-family:'JetBrains Mono','Fira Code',monospace; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:960px){
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:8px 0 48px rgba(0,0,0,.6); }
  .topbar { display:flex; }
  .main { margin-left:0; padding:74px 14px 36px; }
  .g-4,.g-3 { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .form-row-3 { grid-template-columns:1fr 1fr; }
}
@media(max-width:580px){
  .g-2,.g-3,.g-4 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .card { padding:15px; }
  .form-row-2,.form-row-3 { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:1fr; }
  .award-grid { grid-template-columns:repeat(2,1fr); }
  .modal-box { border-radius:var(--r-lg) var(--r-lg) 0 0; align-self:flex-end; max-width:100%; max-height:88vh; }
  .modal-overlay { align-items:flex-end; padding:0; }
  .btn-full-xs { width:100%; }
  .stat-value { font-size:18px; }
}
@media(max-width:360px){
  .stats-grid { grid-template-columns:1fr; }
  .quick-grid { grid-template-columns:1fr; }
  .award-grid { grid-template-columns:1fr; }
}
@keyframes spin { to { transform:rotate(360deg); } }