:root{--bg:#0b0e14;--card:#141821;--border:#232938;--muted:#8b93a7;--text:#e6e8ee;--primary:#3b82f6;--green:#22c55e;--amber:#f59e0b;--red:#ef4444;--radius:14px}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--primary);text-decoration:none}
.topbar{position:sticky;top:0;z-index:10;background:#0f1320;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;min-height:56px}
.brand{font-weight:800;letter-spacing:.3px;flex-shrink:0;white-space:nowrap}
.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;flex:1;min-width:0}
.nav a{padding:8px 12px;border-radius:10px;color:var(--muted);border:1px solid transparent}
.nav a.active,.nav a:hover{color:var(--text);background:#1a2030;border-color:var(--border)}
.container{max-width:1200px;margin:24px auto;padding:0 18px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr} }
@media(max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.kpi h3{margin:0;color:var(--muted);font-size:12px;letter-spacing:.6px;text-transform:uppercase}
.kpi .val{font-size:22px;font-weight:800;margin-top:6px}
.kpi .sub{color:var(--muted);font-size:12px;margin-top:4px}
.btn{background:var(--primary);color:#fff;border:1px solid #2563eb;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.small{padding:7px 10px;font-size:12px}
.badge{padding:4px 8px;border-radius:999px;font-size:11px;border:1px solid var(--border);background:#1a2030;color:var(--muted)}
.badge.green{color:#86efac;border-color:#14532d;background:#0f2416}
.badge.amber{color:#fde68a;border-color:#7a4a0a;background:#241a05}
.badge.red{color:#fecaca;border-color:#7f1d1d;background:#2a0f0f}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
.table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.input,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0f1320;color:var(--text)}
.label{font-size:12px;color:var(--muted);margin:6px 0;display:block}
.row{display:flex;gap:12px;flex-wrap:wrap}
.progress{height:10px;background:#0f1320;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.progress>div{height:100%;background:linear-gradient(90deg,var(--primary),#22d3ee)}
.timeline{position:relative;margin:8px 0;padding-left:22px;border-left:1px dashed var(--border)}
.step{position:relative;margin:14px 0}
.step:before{content:"";position:absolute;left:-27px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--primary);border:2px solid var(--bg)}
.step.pending:before{background:var(--amber)}
.step.done:before{background:var(--green)}
.wallet-card{display:flex;justify-content:space-between;align-items:center}
.mono{font-family:ui-monospace,Menlo,monospace}
.qr{width:160px;height:160px;background:#fff;border-radius:12px;display:grid;place-items:center;color:#111;font-weight:800;max-width:100%}
.notice{background:#1a2030;border:1px solid var(--border);padding:12px;border-radius:12px;color:var(--muted);font-size:13px}
hr{border:none;border-top:1px solid var(--border);margin:12px 0}

/* ===== Mobile-first responsive (320-430) — no rebuild, only layout behavior ===== */
html{overflow-x:hidden;scroll-behavior:smooth}
body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,canvas{max-width:100%;height:auto}
.mono{word-break:break-all;overflow-wrap:anywhere}
.table{width:100%}
.table td .mono, .mono{word-break:break-all;overflow-wrap:anywhere}

/* Touch targets */
.btn,.input,select{font-size:16px;min-height:44px}
.btn{padding:12px 16px}
.btn.small{min-height:36px;padding:8px 12px}

/* Prevent horizontal scroll from grids */
.container,.card,.topbar,.grid{max-width:100%;min-width:0}
.card{overflow:hidden}

/* Hamburger + drawer */
.hamburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:#1a2030;color:var(--text);cursor:pointer;font-size:18px}
.drawer{position:fixed;inset:0 0 0 auto;width:82%;max-width:320px;background:#0f1320;border-left:1px solid var(--border);transform:translateX(100%);transition:transform .28s ease;z-index:40;padding:18px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:39}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer a{padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--muted)}

/* Bottom nav (user) */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#0f1320ee;backdrop-filter:blur(10px);border-top:1px solid var(--border);display:none;justify-content:space-around;align-items:center;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;color:var(--muted);font-size:11px;text-decoration:none;min-height:44px;justify-content:center}
.bottom-nav a.active{color:var(--text);background:#1a2030}
.bottom-nav .ico{font-size:18px;line-height:1}

/* Responsive breakpoints — polished mobile wallet */
@media(max-width:768px){
  .hamburger{display:inline-flex}
  .topbar .nav{ display:none }
  .container{padding:0 12px;margin:16px auto 88px}
  .topbar{padding:10px 12px}
  .brand{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Grids: KPIs 2x2 on tablet, 1 col on phone via 430 below */
  .grid[style*="1fr 1fr"]{grid-template-columns:1fr !important}
  .qr{width:140px;height:140px;margin:0 auto;display:grid}
  .wallet-card{flex-direction:column;align-items:stretch;gap:10px}
  .wallet-card .btn{flex:1;min-height:44px}
  /* Inputs one-hand, full width */
  .row{ gap:10px; flex-direction:column }
  .row .btn{width:100%}
  .card .row{flex-direction:column}
  .card .row .input, .card .row select{max-width:none !important;width:100%}
  /* Tables -> clean cards - no squeezed desktop */
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block;width:100%;max-width:100%}
  .table tr{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;padding:10px;background:var(--card);overflow:hidden}
  .table td{border:none;padding:7px 0;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;font-size:13px;min-width:0}
  .table td::before{content:attr(data-label);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;flex:0 0 36%;text-align:left;word-break:break-word;line-height:1.4}
  .table td[data-label=""]::before{display:none}
  .table td[data-label="Actions"]{flex-direction:column;align-items:stretch}
  .table td[data-label="Actions"] .row{flex-direction:column}
  .table td .progress{width:100% !important;max-width:100%}
  .table td[style*="max-width"]{max-width:none !important;width:auto !important;text-align:right;flex:1;min-width:0}
  .table td .mono{flex:1;min-width:0;text-align:right}
  .bottom-nav{display:flex}
  #dep-info .qr{margin:0 auto 10px}
  #dep-info > div{flex-direction:column !important}
}
@media(max-width:430px){
  .kpi .val{font-size:19px}
  .card{padding:12px}
  .container{padding:0 10px}
  .bottom-nav a{font-size:10px}
  .input,select{padding:11px 12px}
}
@media(max-width:390px){
  .kpi .val{font-size:18px}
  .card{padding:11px}
  .table td::before{flex:0 0 34%}
}
@media(max-width:375px){
  .brand{font-size:14px}
  .kpi .val{font-size:17px}
}
@media(max-width:360px){
  .container{padding:0 8px}
  .card{padding:10px}
  .bottom-nav a{font-size:9.5px;gap:1px}
  .bottom-nav .ico{font-size:16px}
}
@media(max-width:320px){
  .container{padding:0 8px}
  .kpi .val{font-size:16px}
  .kpi h3{font-size:11px}
  .table td{font-size:12.5px}
  .table td::before{font-size:9.5px;flex:0 0 32%}
}
@media(min-width:769px){
  .drawer,.drawer-backdrop,.bottom-nav{display:none !important}
  .hamburger{display:none !important}
  .topbar .nav{display:flex !important}
}
@media(min-width:1024px){
  .topbar{padding:12px 24px}
  .nav{gap:10px}
  .nav a{padding:8px 14px}
}
/* Ensure long hashes never break layout */
.mono, [style*="break-all"]{overflow-wrap:anywhere;word-break:break-all}
/* Modals full screen on mobile */
@media(max-width:640px){
  .modal, dialog{width:96vw;max-width:96vw;margin:2vw auto;border-radius:14px}
}