/* ================================================================
   DesignerMind — mobile.css  v=1
   Mobile-only styles. Never loaded on desktop (index.html).
   Designed for iPhone / Android phones, max-width ~480px.
================================================================ */

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #F7F4EF;
  --bg2: #EDE8DF;
  --white: #FDFCFA;
  --ink: #1C1A17;
  --ink2: #2E2B26;
  --muted: #8C8479;
  --muted2: #B5AFA6;
  --border: rgba(28,26,23,.10);
  --border2: rgba(28,26,23,.18);
  --gold: #B8884A;
  --gold-lt: #D4AA72;
  --gold-bg: rgba(184,136,74,.08);
  --sage: #5E7260;
  --sage-bg: rgba(94,114,96,.08);
  --rust: #A84D3A;
  --rust-bg: rgba(168,77,58,.08);
  --blue: #3A6B8A;
  --blue-bg: rgba(58,107,138,.08);
  --r: 12px;
  --sh: 0 2px 20px rgba(28,26,23,.07);
  --shl: 0 8px 40px rgba(28,26,23,.13);
  --nb-h: 68px; /* bottom nav height */
}

/* Dark theme */
body.theme-dark {
  --bg: #0B0C0F; --bg2: #15171D; --white: #1B1E26;
  --ink: #F5F3EE; --ink2: #DED8CF; --muted: #B2AAA0;
  --muted2: #7F776F; --border: rgba(255,255,255,.12);
  --border2: rgba(255,255,255,.22); --gold: #E7B96F;
  --gold-lt: #F4D19A; --gold-bg: rgba(231,185,111,.14);
  --sage: #8EB594; --sage-bg: rgba(142,181,148,.15);
  --rust: #E37A62; --rust-bg: rgba(227,122,98,.16);
  --blue: #8AB7E8; --blue-bg: rgba(138,183,232,.15);
  --sh: 0 14px 40px rgba(0,0,0,.32);
  --shl: 0 26px 70px rgba(0,0,0,.45);
}

/* Pro theme */
body.theme-pro {
  --bg: #F5F7FB; --bg2: #E8EDF5; --white: #FFFFFF;
  --ink: #111827; --ink2: #243043; --muted: #667085;
  --muted2: #98A2B3; --border: rgba(17,24,39,.10);
  --border2: rgba(17,24,39,.20); --gold: #2563EB;
  --gold-lt: #60A5FA; --gold-bg: rgba(37,99,235,.10);
  --sage: #0F766E; --sage-bg: rgba(15,118,110,.10);
  --rust: #DC2626; --rust-bg: rgba(220,38,38,.10);
  --blue: #2563EB; --blue-bg: rgba(37,99,235,.10);
  --sh: 0 12px 34px rgba(15,23,42,.08);
  --shl: 0 24px 70px rgba(15,23,42,.14);
}

html, body {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  /* Prevent iOS bounce on body */
  overscroll-behavior: none;
}

/* All inputs 16px — prevents iOS auto-zoom */
input, select, textarea {
  font-size: 16px !important;
  font-family: 'Outfit', sans-serif;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
}

button { font-family: 'Outfit', sans-serif; cursor: pointer; }

/* ── Auth Screen ───────────────────────────────────────────────── */
#s-home {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(160deg, #1C1A17 0%, #2E2B26 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#s-home.on { display: flex; flex-direction: column; }

.m-auth-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 20px) 0 0;
}

.m-auth-brand {
  padding: 24px 24px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.m-auth-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.m-auth-name {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: #F7F4EF;
  font-weight: 300;
}

.m-auth-card {
  flex: 1;
  background: #FDFCFA;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.m-auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.m-auth-tab {
  flex: 1;
  padding: 16px 10px;
  font-size: .82rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: none;
  letter-spacing: .3px;
  transition: all .2s;
}
.m-auth-tab.on {
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  background: var(--gold-bg);
}

.m-auth-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 100px;
}

.m-auth-title {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 300;
  margin-bottom: 4px;
  color: var(--ink);
}
.m-auth-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ── Form elements ─────────────────────────────────────────────── */
.fi-wrap { margin-bottom: 16px; }
.fl {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.fi {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.fi:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-bg);
}
.fi-icon-wrap { position: relative; }
.fi-toggle {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  font-size: 1rem; color: var(--muted);
  padding: 4px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}

.phone-row { display: flex; gap: 8px; align-items: center; }
.phone-cc {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 13px 12px;
  font-size: .82rem;
  color: var(--ink2);
  white-space: nowrap;
  flex-shrink: 0;
}

.m-submit {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-family: 'Outfit', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  letter-spacing: .3px;
  min-height: 52px;
  transition: opacity .2s;
}
.m-submit:active { opacity: .85; }
.m-submit.green { background: var(--sage); }
.m-submit:disabled { opacity: .45; cursor: not-allowed; }

.m-auth-divider {
  text-align: center;
  color: var(--muted2);
  font-size: .7rem;
  margin: 16px 0;
  position: relative;
}
.m-auth-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.m-auth-divider span { background: #FDFCFA; padding: 0 12px; position: relative; }

.m-ghost-btn {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 400;
  min-height: 50px;
}
.m-ghost-btn:active { background: var(--bg2); }

.m-inline-err {
  font-size: .7rem;
  color: var(--rust);
  margin-top: 5px;
  display: none;
}
.m-inline-err.show { display: block; }

.m-auth-link {
  text-align: center;
  margin-top: 14px;
  font-size: .72rem;
  color: var(--muted);
}
.m-auth-link span {
  color: var(--gold);
  font-weight: 500;
  cursor: pointer;
}

.m-auth-footer {
  padding: 12px 24px env(safe-area-inset-bottom, 12px);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: .62rem;
  color: var(--muted2);
  line-height: 1.6;
  background: var(--white);
}

/* ── Main App Layout ───────────────────────────────────────────── */
#m-app {
  display: none;
  min-height: 100dvh;
  flex-direction: column;
  padding-bottom: var(--nb-h);
}
#m-app.on { display: flex; flex-direction: column; }

/* Top bar */
#m-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  box-shadow: 0 1px 12px rgba(28,26,23,.06);
}
.m-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  cursor: pointer;
}
.m-topbar-title {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  flex: 1;
  text-align: center;
}
.m-topbar-btn {
  width: 40px; height: 40px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.m-topbar-btn:active { background: var(--bg2); }

/* Screens */
.m-scr {
  display: none;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 24px;
}
.m-scr.on { display: block; }

/* ── Bottom Navigation ─────────────────────────────────────────── */
#m-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: rgba(253,252,250,.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: var(--nb-h);
  display: flex;
  align-items: stretch;
}
body.theme-dark #m-bottom-nav { background: rgba(24,24,30,.96); }

.m-nb-items {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
}

.m-nb-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 52px;
  position: relative;
}
.m-nb-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: background .15s, transform .12s;
  background: transparent;
}
.m-nb-item.active .m-nb-icon {
  background: var(--ink);
}
.m-nb-item:active .m-nb-icon { transform: scale(.9); }
.m-nb-label {
  font-size: .56rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .3px;
  transition: color .15s;
}
.m-nb-item.active .m-nb-label { color: var(--ink); font-weight: 600; }

/* More menu overlay */
#m-more-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
}
#m-more-menu.on { display: block; }
.m-more-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28,26,23,.45);
  backdrop-filter: blur(4px);
}
.m-more-sheet {
  position: absolute;
  bottom: var(--nb-h);
  left: 0; right: 0;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 16px 0 8px;
  max-height: 70dvh;
  overflow-y: auto;
}
.m-more-handle {
  width: 36px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.m-more-section {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 8px 20px 4px;
}
.m-more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: .9rem;
  color: var(--ink);
  font-family: 'Outfit', sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 52px;
}
.m-more-item:active { background: var(--bg2); }
.m-more-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── Project Cards ─────────────────────────────────────────────── */
.m-proj-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.m-proj-card {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--sh);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .12s;
}
.m-proj-card:active { transform: scale(.99); }

.m-proj-thumb {
  height: 140px;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
.m-proj-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.m-proj-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--bg2) 0%, var(--bg) 100%);
}
.m-proj-status {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(28,26,23,.7);
  color: white;
  font-size: .6rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: .5px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.m-proj-status.active { background: rgba(94,114,96,.85); }
.m-proj-status.completed { background: rgba(58,107,138,.85); }

.m-proj-body { padding: 14px 16px 16px; }
.m-proj-name {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.3;
}
.m-proj-meta {
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.m-proj-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.m-pill {
  font-size: .62rem;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--bg2);
  color: var(--muted);
  font-weight: 500;
}
.m-pill.gold { background: var(--gold-bg); color: var(--gold); }
.m-pill.sage { background: var(--sage-bg); color: var(--sage); }
.m-pill.rust { background: var(--rust-bg); color: var(--rust); }

/* ── Page header ───────────────────────────────────────────────── */
.m-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.m-page-title {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--ink);
}
.m-page-title em { font-style: italic; color: var(--gold); }
.m-page-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Action button (FAB-style) ─────────────────────────────────── */
.m-fab {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shl);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}
.m-fab:active { transform: scale(.93); }
.m-fab.gold { background: var(--gold); }

/* ── Cards / list items ────────────────────────────────────────── */
.m-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh);
}
.m-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.m-card-label {
  font-size: .7rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .3px;
  margin-bottom: 2px;
}
.m-card-value {
  font-size: .9rem;
  color: var(--ink);
  font-weight: 400;
}
.m-card-value.gold { color: var(--gold); font-weight: 600; }
.m-card-value.sage { color: var(--sage); }
.m-card-value.rust { color: var(--rust); }

/* ── Section label ─────────────────────────────────────────────── */
.m-section-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted2);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── Stats row ─────────────────────────────────────────────────── */
.m-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.m-stat-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: var(--sh);
}
.m-stat-label {
  font-size: .65rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.m-stat-value {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}
.m-stat-value.gold { color: var(--gold); }
.m-stat-value.sage { color: var(--sage); }

/* ── Bottom sheet modal ────────────────────────────────────────── */
.m-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28,26,23,.5);
  backdrop-filter: blur(6px);
  z-index: 800;
}
.m-sheet-backdrop.on { display: block; }
.m-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,0,.67,0);
}
.m-sheet.on { transform: translateY(0); }
.m-sheet-handle {
  width: 40px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 14px auto 4px;
  flex-shrink: 0;
}
.m-sheet-header {
  padding: 8px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.m-sheet-title {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink);
}
.m-sheet-close {
  width: 32px; height: 32px;
  border: none;
  background: var(--bg2);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.m-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
.m-sheet-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  background: var(--white);
}

/* ── Buttons ───────────────────────────────────────────────────── */
.m-btn {
  padding: 13px 20px;
  border-radius: 12px;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity .15s;
}
.m-btn:active { opacity: .8; }
.m-btn-primary { background: var(--ink); color: var(--bg); flex: 1; }
.m-btn-gold { background: var(--gold); color: white; flex: 1; }
.m-btn-ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border2);
  flex: 1;
}
.m-btn-sage { background: var(--sage); color: white; flex: 1; }
.m-btn-sm {
  padding: 9px 14px;
  font-size: .78rem;
  min-height: 38px;
  border-radius: 9px;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.m-toast {
  position: fixed;
  bottom: calc(var(--nb-h) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink2);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: .78rem;
  opacity: 0;
  transition: all .35s cubic-bezier(.22,1,.36,1);
  z-index: 1000;
  white-space: nowrap;
  max-width: 88vw;
  text-overflow: ellipsis;
  overflow: hidden;
  box-shadow: var(--shl);
  pointer-events: none;
}
.m-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Loading / empty states ────────────────────────────────────── */
.m-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
}
.m-empty-icon { font-size: 3rem; margin-bottom: 14px; }
.m-empty-title {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink2);
  margin-bottom: 6px;
}
.m-empty-sub { font-size: .78rem; line-height: 1.6; }

.m-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: var(--muted);
  font-size: .8rem;
  gap: 10px;
}
.m-loader::before {
  content: '';
  width: 18px; height: 18px;
  border: 2px solid var(--border2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: m-spin .7s linear infinite;
}
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ── Notification bell ─────────────────────────────────────────── */
#m-notif-btn {
  position: relative;
}
#m-notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--rust);
  border-radius: 50%;
  border: 2px solid var(--white);
  display: none;
}
#m-notif-dot.on { display: block; }

/* ── BOQ mobile list ───────────────────────────────────────────── */
.m-boq-item {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.m-boq-item-name {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.m-boq-item-meta {
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.m-boq-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-boq-amt { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--ink); }
.m-boq-settled { font-size: .65rem; padding: 3px 8px; border-radius: 100px; font-weight: 600; }
.m-boq-settled.yes { background: var(--sage-bg); color: var(--sage); }
.m-boq-settled.no { background: var(--rust-bg); color: var(--rust); }

/* ── Payment item ──────────────────────────────────────────────── */
.m-pay-item {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.m-pay-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.m-pay-icon.in { background: var(--sage-bg); }
.m-pay-icon.out { background: var(--rust-bg); }
.m-pay-details { flex: 1; min-width: 0; }
.m-pay-name { font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.m-pay-sub { font-size: .7rem; color: var(--muted); }
.m-pay-amt { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 300; }
.m-pay-amt.in { color: var(--sage); }
.m-pay-amt.out { color: var(--rust); }

/* ── Snag item ─────────────────────────────────────────────────── */
.m-snag-item {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.m-snag-item:active { background: var(--bg2); }
.m-snag-title { font-size: .88rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.m-snag-meta { font-size: .7rem; color: var(--muted); margin-bottom: 8px; }
.m-snag-status {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.m-snag-status.open { background: var(--rust-bg); color: var(--rust); }
.m-snag-status.in_progress { background: var(--gold-bg); color: var(--gold); }
.m-snag-status.resolved { background: var(--sage-bg); color: var(--sage); }

/* ── Search bar ────────────────────────────────────────────────── */
.m-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: var(--sh);
}
.m-search input {
  flex: 1;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  font-family: 'Outfit', sans-serif;
}
.m-search-icon { color: var(--muted); font-size: .9rem; flex-shrink: 0; }

/* ── Filter chips ──────────────────────────────────────────────── */
.m-filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-filter-bar::-webkit-scrollbar { display: none; }
.m-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--border2);
  background: var(--white);
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.m-chip.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ── Profile screen ────────────────────────────────────────────── */
.m-profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gold-bg);
  border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--gold);
  margin: 0 auto 12px;
}

/* ── Analytics summary cards ───────────────────────────────────── */
.m-analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

/* ── Diary entry row ───────────────────────────────────────────── */
.m-diary-day {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 8px;
}
.m-diary-date {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.m-diary-workers {
  font-size: .82rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.m-diary-note { font-size: .75rem; color: var(--muted); }

/* ── Horizon divider ───────────────────────────────────────────── */
.m-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* ── Pull to refresh visual cue (cosmetic) ─────────────────────── */
.m-refresh-hint {
  text-align: center;
  font-size: .68rem;
  color: var(--muted2);
  padding: 8px 0 2px;
  letter-spacing: .3px;
}

/* ── Utility ───────────────────────────────────────────────────── */
.m-flex { display: flex; align-items: center; gap: 8px; }
.m-flex-between { display: flex; align-items: center; justify-content: space-between; }
.m-text-gold { color: var(--gold); }
.m-text-sage { color: var(--sage); }
.m-text-rust { color: var(--rust); }
.m-text-muted { color: var(--muted); }
.m-text-sm { font-size: .75rem; }
.m-text-xs { font-size: .65rem; }
.m-fw-500 { font-weight: 500; }
.m-mb-8 { margin-bottom: 8px; }
.m-mb-16 { margin-bottom: 16px; }
.m-mt-16 { margin-top: 16px; }

/* ── Project detail tabs ───────────────────────────────────────── */
.m-detail-tabs {
  display: flex;
  overflow-x: auto;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: -16px -16px 16px;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-detail-tabs::-webkit-scrollbar { display: none; }
.m-detail-tab {
  flex-shrink: 0;
  padding: 12px 16px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.m-detail-tab.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* ── Render thumbnail grid ─────────────────────────────────────── */
.m-render-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.m-render-thumb {
  aspect-ratio: 4/3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-render-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Vendor card ───────────────────────────────────────────────── */
.m-vendor-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.m-vendor-card:active { background: var(--bg2); }
.m-vendor-avatar {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--gold-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--gold);
  flex-shrink: 0;
}
.m-vendor-name { font-size: .88rem; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.m-vendor-cat { font-size: .7rem; color: var(--muted); }

/* ── Change order card ─────────────────────────────────────────── */
.m-co-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 8px;
}
.m-co-title { font-size: .88rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.m-co-meta { font-size: .7rem; color: var(--muted); margin-bottom: 8px; }
.m-co-status {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  text-transform: uppercase;
}
.m-co-status.pending { background: var(--gold-bg); color: var(--gold); }
.m-co-status.approved { background: var(--sage-bg); color: var(--sage); }
.m-co-status.declined { background: var(--rust-bg); color: var(--rust); }

/* ── Print — hide everything ───────────────────────────────────── */
@media print { body { display: none !important; } }

/* ==========================================================================
   INDEX.HTML MOBILE SKIN
   Real app, iOS-friendly presentation only. No feature/function overrides.
   ========================================================================== */

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
  }

  body {
    background: var(--bg);
    color: var(--ink);
    overscroll-behavior-y: none;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
  }

  button,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  button,
  .btn,
  .btn-ghost,
  .sb-item,
  .bn-item,
  .add-card,
  .pc,
  .plugin-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .page,
  body.sb-collapsed .page {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: calc(64px + env(safe-area-inset-top)) 14px calc(96px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box;
  }

  #dm-hamburger {
    display: none !important;
  }

  #global-notif-bell {
    display: none !important;
  }

  #dm-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    background: rgba(247,244,239,.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(28,26,23,.08);
  }

  #dm-mobile-topbar.visible {
    display: flex;
  }

  .dm-mob-icon,
  .dm-mob-avatar,
  .dm-mob-brand {
    border: 1px solid var(--border);
    background: rgba(253,252,250,.86);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(28,26,23,.08);
    font-family: 'Outfit', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  .dm-mob-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    position: relative;
    flex: 0 0 auto;
  }

  .dm-mob-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .dm-mob-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--white);
    background: var(--ink);
    letter-spacing: 0;
  }

  .dm-mob-brand {
    height: 42px;
    border-radius: 14px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gold);
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
  }

  .dm-mob-brand span {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--ink);
    white-space: nowrap;
  }

  #dm-mobile-notif-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rust);
    border: 1px solid var(--white);
    display: none;
  }

  #dm-sidebar,
  #dm-sidebar.open,
  #dm-sidebar-overlay,
  #dm-sidebar-overlay.open {
    display: none !important;
  }

  #s-home {
    background: linear-gradient(160deg, #1C1A17 0%, #2E2B26 100%);
  }

  .hp-hero {
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    padding: calc(88px + env(safe-area-inset-top)) 0 0 !important;
  }

  .hp-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: none;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
  }

  .hp-left { display: none !important; }
  .hp-right {
    flex: 1;
    min-height: 100vh;
    max-height: none !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--white) !important;
    overflow: visible !important;
  }

  #hp-mobile-logo {
    display: flex !important;
    position: absolute;
    left: 24px;
    top: calc(-64px - env(safe-area-inset-top));
    padding: 0 !important;
    color: var(--bg);
  }

  .hp-tabs {
    position: relative;
    top: auto;
    z-index: 2;
    border-bottom: 1px solid var(--border);
    background: var(--white);
  }

  .hp-tab {
    padding: 16px 10px !important;
    font-size: .82rem !important;
  }

  .hp-tab.on {
    background: var(--gold-bg);
    border-bottom: 2px solid var(--gold);
  }

  .hp-body {
    padding: 24px 24px 100px !important;
  }

  .hp-title {
    font-size: 1.4rem !important;
    line-height: 1.2;
    margin-bottom: 4px !important;
  }

  .hp-sub {
    font-size: .75rem !important;
    margin-bottom: 24px !important;
  }

  .hp-title,
  .s-title {
    letter-spacing: 0;
  }

  .s-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .s-head > div:last-child {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .s-title {
    font-size: 1.55rem !important;
    line-height: 1.15;
  }

  .s-sub {
    font-size: .78rem !important;
    line-height: 1.55;
  }

  .stats,
  .home-widgets,
  .bg2,
  .grid-2,
  .grid-2-sm,
  .grid-2-lg,
  .prof-grid,
  .pd-two,
  .analytics-charts-row {
    grid-template-columns: 1fr !important;
  }

  #pg,
  .pg,
  .rg,
  .rf-grid,
  .fav-grid,
  .port-proj-grid,
  .snag-grid {
    grid-template-columns: 1fr !important;
  }

  .pc,
  .hw-card,
  .stat,
  .card-bordered,
  .plugin-card,
  .prof-card,
  .add-card,
  .port-hero {
    border-radius: 16px !important;
    background: var(--white);
    box-shadow: 0 2px 18px rgba(28,26,23,.055);
  }

  .pc,
  .hw-card,
  .card-bordered,
  .plugin-card,
  .prof-card {
    padding: 16px !important;
  }

  .btn,
  .btn-ghost,
  .hp-submit,
  .bfs,
  .fi {
    min-height: 44px;
    border-radius: 12px !important;
  }

  .fi,
  textarea.fi,
  select.fi,
  .bfs {
    background: var(--white);
    border-color: var(--border2);
  }

  .boq-toolbar,
  .flex-between,
  .flex-gap-8 {
    flex-wrap: wrap;
  }

  .boq-summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .boq-main-tabs,
  .an-tab-bar,
  .lib-source-tabs,
  .pd-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .boq-main-tabs::-webkit-scrollbar,
  .an-tab-bar::-webkit-scrollbar,
  .lib-source-tabs::-webkit-scrollbar,
  .pd-tabs::-webkit-scrollbar {
    display: none;
  }

  .boq-tbl-wrap,
  .table-wrap,
  table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ph2-modal,
  .modal,
  .modal-card,
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
  }

  .ph2-ovl,
  .ovl {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #bottomNav.visible {
    display: flex !important;
    flex-direction: column;
    background: rgba(247,244,239,.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .bn-icon {
    border-radius: 12px;
  }

  #bottomNav {
    z-index: 1080;
    box-shadow: 0 -10px 34px rgba(28,26,23,.10);
  }

  .bottom-nav-items {
    padding: 0 8px;
    gap: 2px;
  }

  .bn-item {
    min-width: 0;
    flex: 1;
    padding: 7px 4px;
    border-radius: 14px;
  }

  .bn-icon {
    width: 38px;
    height: 34px;
    font-size: 1.05rem;
  }

  .bn-item.active .bn-icon {
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 6px 18px rgba(28,26,23,.16);
  }

  .bn-label {
    font-size: .56rem;
  }

  #dm-mobile-more {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: flex-end;
    background: rgba(28,26,23,.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  #dm-mobile-more.open {
    display: flex;
  }

  .dm-mobile-more-sheet {
    width: 100%;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 24px 24px 0 0;
    padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 60px rgba(28,26,23,.22);
  }

  .dm-mobile-more-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: var(--border2);
    margin: 0 auto 14px;
  }

  .dm-mobile-more-section {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: .08em;
    margin: 16px 4px 8px;
  }

  .dm-mobile-more-item {
    width: 100%;
    min-height: 54px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 2px 12px rgba(28,26,23,.045);
    -webkit-tap-highlight-color: transparent;
  }

  .dm-mobile-more-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-bg);
    flex: 0 0 auto;
  }

  /* iOS-style adapter for the real index.html app */
  #global-notif-bell {
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--white) 86%, transparent) !important;
    border: 1px solid var(--border2) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(28,26,23,.12) !important;
  }

  #global-notif-bell span:last-child,
  .ph2-mt,
  .ni-title {
    color: var(--ink) !important;
  }

  .ph2-ms,
  .ni-meta,
  .ni-time {
    color: var(--muted) !important;
  }

  .ph2-modal,
  .pd-card,
  .hw-card,
  .pc,
  .stat,
  .card-bordered,
  .plugin-card,
  .prof-card {
    background: color-mix(in srgb, var(--white) 96%, var(--bg)) !important;
    border-color: var(--border) !important;
  }

  .ph2-mh {
    background: color-mix(in srgb, var(--white) 92%, transparent);
    border-bottom: 1px solid var(--border);
  }

  .notif-item,
  .todo-item {
    background: var(--white) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
  }

  .notif-item.notif-overdue {
    background: var(--rust-bg) !important;
  }

  .notif-item.notif-today,
  .notif-item.unread {
    background: var(--gold-bg) !important;
  }

  .hp-tabs,
  .boq-main-tabs,
  .an-tab-bar,
  .lib-source-tabs,
  .pd-tabs {
    background: color-mix(in srgb, var(--bg2) 72%, var(--white)) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 4px !important;
    gap: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  }

  .hp-tab,
  .boq-mtab,
  .boq-main-tab,
  .an-tab,
  .an-tab-btn,
  .lib-stab,
  .pd-tab {
    min-height: 38px;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--muted) !important;
    background: transparent !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }

  .hp-tab.on,
  .boq-mtab.on,
  .boq-main-tab.on,
  .an-tab.on,
  .an-tab-btn.on,
  .lib-stab.on,
  .pd-tab.on,
  .pd-tab.active {
    color: var(--ink) !important;
    background: var(--white) !important;
    box-shadow: 0 3px 14px rgba(28,26,23,.10) !important;
  }

  .btn,
  .hp-submit {
    border-radius: 14px !important;
    background: var(--ink) !important;
    color: var(--bg) !important;
    font-weight: 650 !important;
  }

  .btn-ghost,
  .m-ghost-btn {
    color: var(--ink) !important;
    background: color-mix(in srgb, var(--white) 76%, transparent) !important;
    border-color: var(--border2) !important;
  }

  body.theme-dark #dm-mobile-topbar,
  body.theme-dark #bottomNav.visible {
    background: rgba(11,12,15,.76) !important;
    border-color: rgba(255,255,255,.12) !important;
  }

  body.theme-dark .dm-mob-icon,
  body.theme-dark .dm-mob-brand,
  body.theme-dark .dm-mob-avatar,
  body.theme-dark .dm-mobile-more-sheet,
  body.theme-dark .ph2-modal {
    background: rgba(27,30,38,.94) !important;
    color: var(--ink) !important;
  }

  body.theme-pro #dm-mobile-topbar,
  body.theme-pro #bottomNav.visible {
    background: rgba(245,247,251,.84) !important;
  }

  /* Project wizard: mobile-friendly version of the real desktop wizard */
  #s-wiz {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  #s-wiz .wiz {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #s-wiz .bc {
    position: sticky;
    top: calc(62px + env(safe-area-inset-top));
    z-index: 6;
    margin: -6px -2px 12px;
    padding: 10px 4px;
    background: rgba(247,244,239,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #s-wiz .stepper {
    position: sticky;
    top: calc(106px + env(safe-area-inset-top));
    z-index: 5;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0 -2px 14px !important;
    padding: 8px 0 10px;
    background: rgba(247,244,239,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #s-wiz .stepper::before {
    display: none !important;
  }

  #s-wiz .step {
    min-width: 0;
    align-items: center;
  }

  #s-wiz .step .sc {
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }

  #s-wiz .sl {
    display: block !important;
    font-size: .58rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  #s-wiz .sp {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px !important;
    box-shadow: 0 2px 18px rgba(28,26,23,.055);
  }

  #s-wiz .wf {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #s-wiz .wf-l {
    font-size: .68rem;
  }

  #s-wiz .uz,
  #s-wiz #uz {
    min-height: 180px;
    border-radius: 18px !important;
  }

  #s-wiz #roomsGrid,
  #s-wiz .rooms-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #s-wiz .rc {
    border-radius: 16px !important;
    overflow: hidden;
  }

  #s-wiz .rc-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #s-wiz .rdims {
    grid-template-columns: 1fr auto 1fr;
  }

  #s-wiz .ri {
    min-height: 42px;
    font-size: 16px;
    border-radius: 12px !important;
  }

  #s-wiz .sp .btn,
  #s-wiz .sp .btn-ghost {
    min-height: 44px;
    border-radius: 12px !important;
  }

  .toast {
    bottom: calc(88px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 28px);
    white-space: normal;
    text-align: center;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .page,
  body.sb-collapsed .page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .boq-summary {
    grid-template-columns: 1fr !important;
  }

  .stats {
    gap: 8px;
  }
}