
:root {
  --mz-mobile-bg: #f6f4ef;
  --mz-mobile-surface: #ffffff;
  --mz-mobile-ink: #151515;
  --mz-mobile-muted: #69706d;
  --mz-mobile-line: rgba(0,0,0,.09);
  --mz-mobile-accent: #123c36;
}
.mz-mobile-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px;
  color: var(--mz-mobile-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mz-mobile-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
  padding:14px 16px;
  border:1px solid var(--mz-mobile-line);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
}
.mz-mobile-topbar strong { display:block; font-size:15px; }
.mz-mobile-topbar span { display:block; font-size:12px; color:var(--mz-mobile-muted); }
.mz-mobile-topbar a { color:var(--mz-mobile-accent); text-decoration:none; font-weight:700; }
.mz-mobile-hero {
  padding:34px;
  border:1px solid var(--mz-mobile-line);
  border-radius:28px;
  background:linear-gradient(180deg, #fff, #f8f7f3);
  margin-bottom:24px;
}
.mz-mobile-hero h1 {
  margin:0 0 10px;
  font-size:clamp(32px, 6vw, 64px);
  letter-spacing:-.05em;
  line-height:.95;
}
.mz-mobile-hero p { max-width:760px; color:var(--mz-mobile-muted); font-size:17px; }
.mz-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:12px!important; color:var(--mz-mobile-accent)!important; font-weight:800; }
.mz-mobile-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; }
.mz-mobile-card {
  display:block; padding:24px; border:1px solid var(--mz-mobile-line); border-radius:24px;
  background:#fff; text-decoration:none; color:var(--mz-mobile-ink); min-height:210px;
}
.mz-mobile-card span {
  display:inline-block; padding:6px 10px; border-radius:999px; background:#eef3ef;
  color:var(--mz-mobile-accent); font-size:12px; font-weight:800; margin-bottom:20px;
}
.mz-mobile-card h3 { font-size:22px; margin:0 0 10px; letter-spacing:-.03em; }
.mz-mobile-card p { color:var(--mz-mobile-muted); }
.mz-phone-frame {
  width:min(420px, 100%);
  margin:0 auto;
  padding:18px;
  border:1px solid rgba(0,0,0,.14);
  border-radius:34px;
  background:#101513;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
}
.mz-phone-status { color:#fff; font-size:13px; font-weight:800; padding:10px 8px 18px; text-align:center; }
.mz-metric-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.mz-metric-row div, .mz-field-panel, .mz-checklist, .mz-supplier-mini {
  background:#fff; border-radius:18px; padding:16px;
}
.mz-metric-row strong { display:block; font-size:26px; }
.mz-metric-row span { display:block; color:var(--mz-mobile-muted); font-size:12px; }
.mz-action-list { display:grid; gap:10px; margin:12px 0; }
.mz-action-list button, .mz-supplier-mini button, .mz-field-panel button {
  width:100%; border:0; border-radius:14px; padding:13px 14px;
  background:var(--mz-mobile-accent); color:#fff; font-weight:800;
}
.mz-checklist h3, .mz-field-panel h3 { margin:0 0 12px; }
.mz-checklist label { display:block; margin:10px 0; color:#2d3531; font-size:14px; }
.mz-mobile-search { width:100%; box-sizing:border-box; border:0; border-radius:16px; padding:15px; margin-bottom:12px; }
.mz-supplier-mini { margin-bottom:10px; }
.mz-supplier-mini strong { display:block; font-size:15px; }
.mz-supplier-mini span { display:block; margin:6px 0 12px; color:var(--mz-mobile-muted); font-size:12px; }
.mz-admin-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.mz-admin-card { background:#fff; border:1px solid #dcdcde; border-radius:14px; padding:20px; }
@media (max-width: 780px) {
  .mz-mobile-shell { padding:14px; }
  .mz-mobile-grid { grid-template-columns:1fr; }
  .mz-mobile-hero { padding:24px; border-radius:22px; }
  .mz-mobile-topbar { position:sticky; top:8px; z-index:10; }
}
