/* Mobile mockup shared tokens — đồng bộ với mockup web */
:root{
  --primary:#1676F3; --primary-50:#EFF6FF; --primary-700:#1556B0;
  --ink-5:#F7F8FA; --ink-10:#EEF1F4; --ink-20:#DDE2E8; --ink-30:#C6CDD6;
  --ink-50:#8893A1; --ink-70:#4A5562; --ink-90:#1F2933;
  --success:#16A34A; --warning:#F59E0B; --danger:#DC2626;
}
html,body{margin:0;font-family:Inter,system-ui,sans-serif;background:#E5E7EB;color:var(--ink-90)}
.m-frame{
  width:375px;height:812px;margin:24px auto;background:#F4F6F8;
  border-radius:36px;border:8px solid #111;overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 20px 60px -10px rgba(0,0,0,.35);
}
.m-status{height:24px;background:#111;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0}
.m-status .right{display:flex;gap:6px;align-items:center}
.m-header{background:#fff;padding:12px 16px;border-bottom:1px solid var(--ink-10);display:flex;align-items:center;gap:10px;flex-shrink:0}
.m-header h1{margin:0;font-size:16px;font-weight:600}
.m-header .sub{font-size:11px;color:var(--ink-50)}
.m-body{flex:1;overflow-y:auto;padding:12px}
.m-body::-webkit-scrollbar{width:0}
.m-nav{height:60px;background:#fff;border-top:1px solid var(--ink-10);display:grid;grid-template-columns:repeat(4,1fr);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0)}
.m-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:var(--ink-50);text-decoration:none}
.m-nav a.active{color:var(--primary)}
.m-card{background:#fff;border:1px solid var(--ink-10);border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.m-card-title{font-size:11px;text-transform:uppercase;color:var(--ink-50);letter-spacing:.04em;font-weight:600;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid var(--ink-20);background:#fff}
.chip-blue{background:var(--primary-50);border-color:#BFDBFE;color:var(--primary-700)}
.chip-green{background:#ECFDF5;border-color:#A7F3D0;color:#047857}
.chip-amber{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.chip-red{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-outline{background:#fff;border:1px solid var(--ink-20);color:var(--ink-90)}
.btn-danger{background:var(--danger);color:#fff}
.btn-block{width:100%}
.input{width:100%;padding:11px 12px;border:1px solid var(--ink-20);border-radius:8px;font-size:14px;background:#fff;box-sizing:border-box}
.kbd{font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.muted{color:var(--ink-50);font-size:12px}
.divider{height:1px;background:var(--ink-10);margin:10px -14px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.list-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--ink-10)}
.list-item:last-child{border-bottom:none}
.avatar{width:36px;height:36px;border-radius:8px;background:var(--primary-50);color:var(--primary-700);display:grid;place-items:center;flex-shrink:0}
.bigstat{font-size:24px;font-weight:700}
.fab{position:absolute;right:16px;bottom:74px;width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px -4px rgba(22,118,243,.5);border:none;cursor:pointer}
.banner{padding:8px 12px;border-radius:8px;font-size:12px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.banner-warn{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.banner-info{background:var(--primary-50);color:var(--primary-700);border:1px solid #BFDBFE}
.progress{height:6px;background:var(--ink-10);border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:var(--primary)}
.progress.warn > span{background:var(--warning)}
.progress.danger > span{background:var(--danger)}