/* ── Design Tokens ─────────────────────────────────────────────────────── */
  :root {
    --primary: #1b5e35;
    --primary-dark: #144a29;
    --primary-light: #f0f4f1;
    --bg: #f0f2ee;
    --surface: #ffffff;
    --surface2: #f6f8f5;
    --text: #141c15;
    --text-muted: #6a7a6b;
    --border: #d6ddd7;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow: 0 2px 8px rgba(0,0,0,0.07);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.1);
    --radius: 8px;
    --radius-sm: 5px;
    --radius-lg: 12px;
  }
  body.dark {
    --bg: #111714;
    --surface: #1a2118;
    --surface2: #222c20;
    --text: #edf0ec;
    --text-muted: #8a9e8b;
    --border: #2d3e2f;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.5);
  }

  * { box-sizing: border-box; }
  body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg); color: var(--text);
    transition: background 0.25s, color 0.25s;
    -webkit-font-smoothing: antialiased;
  }

  /* ── Cards ──────────────────────────────────────────────────────────────── */
  .card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
  }
  .card:hover { box-shadow: var(--shadow); }

  /* ── Sidebar ────────────────────────────────────────────────────────────── */
  .sidebar { width: 256px; min-height: 100vh; background: #0f1f12; }
  .sidebar-item { transition: background 0.15s; border-radius: 6px; margin: 1px 8px; }
  .sidebar-item:hover { background: rgba(255,255,255,0.08); }
  .sidebar-item.active { background: rgba(255,255,255,0.12); }

  /* ── Status Badges ──────────────────────────────────────────────────────── */
  .status-ok      { background: #e4eeea; color: #1b5e35; }
  .status-warning { background: #f2ead8; color: #7a5418; }
  .status-error   { background: #f2e4e4; color: #8b2020; }
  .status-maintenance { background: #dde6f5; color: #1e40af; }
  .badge {
    padding: 3px 9px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  }

  /* ── Buttons ────────────────────────────────────────────────────────────── */
  .btn-primary {
    background: var(--primary); color: white;
    padding: 9px 20px; border-radius: var(--radius-sm);
    border: none; cursor: pointer; font-weight: 600; font-size: 14px;
    transition: background 0.15s, box-shadow 0.15s;
    display: inline-flex; align-items: center;
  }
  .btn-primary:hover { background: var(--primary-dark); }
  .btn-primary:active { background: #0f3b22; }

  .btn-secondary {
    background: var(--surface); color: var(--text);
    padding: 9px 20px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); cursor: pointer;
    font-weight: 600; font-size: 14px; transition: background 0.15s;
    display: inline-flex; align-items: center;
  }
  .btn-secondary:hover { background: var(--surface2); }
  .btn-secondary:active { background: var(--border); }

  .btn-danger {
    background: #8b2020; color: white;
    padding: 9px 20px; border-radius: var(--radius-sm);
    border: none; cursor: pointer; font-weight: 600; font-size: 14px;
    transition: background 0.15s; display: inline-flex; align-items: center;
  }
  .btn-danger:hover { background: #6f1a1a; }

  /* ── Inputs ─────────────────────────────────────────────────────────────── */
  input, select, textarea {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 9px 12px; width: 100%; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-size: 14px; background: var(--surface); color: var(--text);
    font-family: inherit;
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(27,94,53,0.1);
  }

  /* ── Modal ──────────────────────────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
  }
  .modal {
    background: var(--surface); border-radius: var(--radius-lg);
    padding: 28px; max-width: 560px; width: 90%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    border: 1px solid var(--border);
  }

  /* ── Tabs ───────────────────────────────────────────────────────────────── */
  .tab-btn {
    padding: 7px 16px; border-radius: var(--radius-sm);
    border: none; cursor: pointer; font-weight: 600; font-size: 13px;
    transition: background 0.15s, color 0.15s;
    background: transparent; color: var(--text-muted);
  }
  .tab-btn:hover { background: var(--surface2); color: var(--text); }
  .tab-btn.active { background: var(--primary); color: white; }

  /* ── Calendar ───────────────────────────────────────────────────────────── */
  .calendar-day { min-height: 80px; border: 1px solid var(--border); padding: 4px; font-size: 12px; background: var(--surface); }
  .calendar-day.today { background: #f0f4f1; border-color: var(--primary); }
  .calendar-event { background: #d4e8da; color: #144a29; border-radius: 3px; padding: 2px 6px; margin-bottom: 2px; font-size: 11px; cursor: pointer; }
  .calendar-event.tuev { background: #eddfc0; color: #7a5418; }
  .calendar-event.repair { background: #edcfcf; color: #8b2020; }

  /* ── Progress ───────────────────────────────────────────────────────────── */
  .progress-bar { height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; }
  .progress-fill { height: 100%; background: var(--primary); border-radius: 99px; transition: width 0.5s ease; }
  .progress-fill.warn { background: #c8882a; }
  .progress-fill.danger { background: #8b2020; }

  /* ── Notifications ──────────────────────────────────────────────────────── */
  .notification-item { border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .notification-item.urgent { border-left-color: #8b2020; }
  .notification-item.warning { border-left-color: #c8882a; }

  /* ── Forms ──────────────────────────────────────────────────────────────── */
  .onboarding-step { display: none; }
  .onboarding-step.active { display: block; }
  .role-card { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: all 0.15s; background: var(--surface); }
  .role-card:hover, .role-card.selected { border-color: var(--primary); background: var(--primary-light); }

  /* ── Role Manager ───────────────────────────────────────────────────────── */
  .perm-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; user-select:none; gap:10px; padding:8px 12px; border-radius:6px; transition:background 0.12s; }
  .perm-toggle:hover { background:var(--surface2); }
  .perm-toggle input { position:absolute; opacity:0; width:0; height:0; }
  .perm-slider { width:34px; height:19px; background:#c8d0c9; border-radius:20px; transition:background 0.2s; flex-shrink:0; position:relative; }
  .perm-slider::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; background:#fff; border-radius:50%; transition:transform 0.18s; }
  .perm-toggle input:checked + .perm-slider { background:var(--primary); }
  .perm-toggle input:checked + .perm-slider::after { transform:translateX(15px); }
  .perm-group { border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:12px; }
  .perm-group-header { padding:10px 16px; background:var(--surface2); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
  .role-manager-card { border:1px solid var(--border); border-radius:8px; padding:14px 16px; cursor:pointer; transition:all 0.15s; background:var(--surface); display:flex; align-items:center; gap:12px; }
  .role-manager-card:hover { border-color:var(--primary); background:var(--primary-light); }
  .role-manager-card.active { border-color:var(--primary); background:var(--primary-light); }
  .role-color-swatch { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; flex-shrink:0; transition:transform 0.12s; }
  .role-color-swatch.selected { border-color:var(--primary); transform:scale(1.2); }
  .role-icon-btn { width:34px; height:34px; border-radius:6px; border:1px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all 0.12s; }
  .role-icon-btn:hover, .role-icon-btn.selected { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
  .photo-upload { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: all 0.15s; }
  .photo-upload:hover { border-color: var(--primary); background: var(--primary-light); }

  /* ── Machine Cards ──────────────────────────────────────────────────────── */
  .machine-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 18px; transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer; background: var(--surface);
  }
  .machine-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }

  /* ── Priority ───────────────────────────────────────────────────────────── */
  .priority-high { color: #8b2020; }
  .priority-medium { color: #c8882a; }
  .priority-low { color: var(--primary); }

  /* ── Stat Cards ─────────────────────────────────────────────────────────── */
  .stat-card {
    border-radius: var(--radius); padding: 20px; color: white;
    position: relative; overflow: hidden;
  }
  .stat-card::before {
    content: ''; position: absolute; right: -20px; top: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
  }
  .stat-card.green  { background: #1b5e35; }
  .stat-card.yellow { background: #7a5418; }
  .stat-card.red    { background: #8b2020; }
  .stat-card.blue   { background: #1e3a6e; }

  /* ── Health score ───────────────────────────────────────────────────────── */
  .health-ring { transform: rotate(-90deg); }
  .health-score-ok   { color: var(--primary); }
  .health-score-warn { color: #c8882a; }
  .health-score-bad  { color: #8b2020; }

  /* ── Timeline ───────────────────────────────────────────────────────────── */
  .timeline-item { position: relative; padding-left: 28px; }
  .timeline-item::before { content: ''; position: absolute; left: 9px; top: 24px; bottom: -8px; width: 2px; background: var(--border); }
  .timeline-item:last-child::before { display: none; }
  .timeline-dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: white; }

  /* ── FAB ────────────────────────────────────────────────────────────────── */
  .fab {
    display: none; position: fixed; right: 20px; bottom: 80px;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: white; border: none; cursor: pointer;
    font-size: 20px; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .fab:hover { background: var(--primary-dark); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
  .fab-menu { position: fixed; right: 20px; bottom: 148px; z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
  .fab-action { display: flex; align-items: center; gap: 10px; animation: fabIn 0.18s ease; }
  .fab-action-label { background: var(--surface); color: var(--text); padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap; border: 1px solid var(--border); }
  .fab-action-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: white; border: none; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
  @keyframes fabIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

  /* ── Dark Mode Toggle ───────────────────────────────────────────────────── */
  .dark-toggle { width: 40px; height: 22px; background: rgba(255,255,255,0.15); border-radius: 11px; position: relative; cursor: pointer; transition: background 0.2s; border: none; }
  .dark-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; transition: transform 0.18s; }
  body.dark .dark-toggle { background: rgba(255,255,255,0.2); }
  body.dark .dark-toggle-thumb { transform: translateX(18px); }

  /* ── Scrollbar ──────────────────────────────────────────────────────────── */
  .scrollbar-thin::-webkit-scrollbar { width: 4px; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  [style*="scrollbarWidth"]::-webkit-scrollbar { display: none; }

  /* ── Animations ─────────────────────────────────────────────────────────── */
  @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .animate-in { animation: fadeSlideIn 0.22s ease; }

  /* ── Notifications swipe-to-delete ─────────────────────────────────────── */
  .notif-wrapper { position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: 8px; }
  .notif-delete-bg {
    position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #8b2020);
    display: flex; align-items: center; justify-content: flex-end; padding-right: 20px;
    border-radius: var(--radius);
  }
  .notif-card {
    position: relative; background: var(--surface); border-radius: var(--radius);
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), opacity 0.22s, max-height 0.3s ease, margin 0.3s ease;
    will-change: transform;
  }
  .notif-card.removing {
    opacity: 0; transform: translateX(-110%) !important;
    max-height: 0 !important; margin-bottom: 0 !important; padding: 0 !important; overflow: hidden;
  }
  .notif-card.swiped { transform: translateX(-80px); }
  .notif-hover-del { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
  .notif-card:hover .notif-hover-del { opacity: 1; pointer-events: all; }
  @keyframes pulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:0.5; transform: scale(0.85); } }
  @keyframes toastIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
  @keyframes toastOut { from { opacity:1; } to { opacity:0; transform: translateY(16px); } }
  .toast-notif {
    position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
    background: #1a2118; color: white; padding: 11px 18px; border-radius: 8px;
    font-size: 13px; font-weight: 600; z-index: 500; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25); animation: toastIn 0.22s ease;
    white-space: nowrap; border: 1px solid rgba(255,255,255,0.08);
  }
  .toast-notif.hiding { animation: toastOut 0.22s ease forwards; }

  /* ── Maintenance Tracking ───────────────────────────────────────────────── */
  .maint-card { border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; transition: box-shadow 0.15s; }
  .maint-card.red    { border: 1px solid #e8c0c0; background: #fdf5f5; }
  .maint-card.orange { border: 1px solid #e0d0a0; background: #fdfaf2; }
  .maint-card.green  { border: 1px solid #b8d4be; background: #f5faf6; }
  body.dark .maint-card.red    { border-color: #5a1e1e; background: #201414; }
  body.dark .maint-card.orange { border-color: #5a3e0e; background: #201a0e; }
  body.dark .maint-card.green  { border-color: #1e4028; background: #111a12; }
  .maint-item { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 6px; padding: 10px 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
  .maint-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .maint-btn { font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 5px; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 5px; transition: filter 0.12s; color: white; }
  .maint-btn:hover { filter: brightness(1.1); }
  .maint-log-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .maint-log-row:last-child { border-bottom: none; }
  .maint-status-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; }
  .maint-status-badge.red    { background: #f2e4e4; color: #8b2020; }
  .maint-status-badge.orange { background: #f2ead8; color: #7a5418; }
  .maint-status-badge.green  { background: #e4eeea; color: #1b5e35; }

  /* ── Mobile Layout ──────────────────────────────────────────────────────── */
  @media (max-width: 768px) {
    .sidebar { display: none; }
    .desktop-only { display: none !important; }
    .mobile-main { margin-left: 0 !important; }
    .mobile-header { display: flex; }
    .bottom-nav { display: flex; }
  }
  @media (min-width: 769px) {
    .mobile-header { display: none !important; }
    .bottom-nav { display: none !important; }
  }

  /* ── Mobile Header ───────────────────────────────────────────────────────── */
  .mobile-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: #0f1f12;
    height: 56px; align-items: center; justify-content: space-between;
    padding: 0 16px; box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    padding-top: env(safe-area-inset-top);
  }

  /* ── Bottom Navigation ───────────────────────────────────────────────────── */
  .bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -1px 0 var(--border);
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    align-items: stretch; justify-content: space-around;
  }
  .bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; border: none; background: none;
    cursor: pointer; color: var(--text-muted); font-size: 10px; font-weight: 600;
    transition: color 0.15s; padding: 4px 4px 0; position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item.active { color: var(--primary); }
  .bottom-nav-item.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 2px; background: var(--primary); border-radius: 0 0 3px 3px;
  }
  .bottom-nav-item i { font-size: 19px; line-height: 1.2; }
  .bottom-nav-badge {
    position: absolute; top: 4px; right: calc(50% - 20px);
    background: #8b2020; color: white; border-radius: 999px;
    font-size: 9px; font-weight: 700; min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
    border: 2px solid var(--surface);
  }

  /* ── Mehr Bottom Sheet ───────────────────────────────────────────────────── */
  .mehr-sheet-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200;
    display: flex; align-items: flex-end;
  }
  .mehr-sheet {
    background: var(--surface); width: 100%; border-radius: 14px 14px 0 0;
    padding: 10px 0 calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    border-top: 1px solid var(--border);
    animation: sheetUp 0.24s cubic-bezier(.32,1,.54,1);
  }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .mehr-sheet-handle {
    width: 36px; height: 3px; background: var(--border); border-radius: 2px;
    margin: 0 auto 14px;
  }
  .mehr-item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 14px 24px; border: none; background: none; cursor: pointer;
    font-size: 15px; font-weight: 500; color: var(--text); text-align: left;
    transition: background 0.1s; -webkit-tap-highlight-color: transparent;
  }
  .mehr-item:active { background: var(--surface2); }
  .mehr-item i {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-size: 16px; background: var(--primary-light);
    border-radius: 6px; flex-shrink: 0;
  }
  .mehr-item.danger { color: #8b2020; }
  .mehr-item.danger i { color: #8b2020; background: #f2e4e4; }

  /* ── Modal as Bottom Sheet on Mobile ─────────────────────────────────────── */
  @media (max-width: 768px) {
    .mobile-main { padding-top: calc(56px + env(safe-area-inset-top)); padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .modal-overlay { align-items: flex-end; }
    .modal {
      width: 100% !important; max-width: 100% !important;
      border-radius: 14px 14px 0 0 !important;
      max-height: 92vh !important;
      padding: 0 20px 24px !important;
      padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
      animation: sheetUp 0.24s cubic-bezier(.32,1,.54,1);
      border-top: 1px solid var(--border);
    }
    .modal::before {
      content: ''; display: block;
      width: 36px; height: 3px; background: var(--border); border-radius: 2px;
      margin: 12px auto 18px;
    }
    .p-6 { padding: 16px !important; }
    .p-5 { padding: 14px !important; }
    .fab { display: flex; bottom: calc(72px + env(safe-area-inset-bottom)); right: 16px; }
    .fab-menu { bottom: calc(144px + env(safe-area-inset-bottom)); right: 16px; }
    button { -webkit-tap-highlight-color: transparent; }
    .tab-btn { white-space: nowrap; padding: 6px 12px !important; font-size: 12px !important; }
  }

  /* ── QR Sticker Print ────────────────────────────────────────────────────── */
  @media print {
    body * { visibility: hidden; }
    #qr-print-area, #qr-print-area * { visibility: visible; }
    #qr-batch-print-area, #qr-batch-print-area * { visibility: visible; }
    #qr-print-area { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: white; }
    #qr-batch-print-area { position: fixed; inset: 0; background: white; padding: 10mm; box-sizing: border-box; }
    .qr-label-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; }
    .qr-label-sticker { border: 1.5px solid #1b5e35 !important; border-radius: 4px !important; padding: 6px !important; break-inside: avoid; }
  }
  .qr-sticker { border: 2px solid #1b5e35; border-radius: 10px; padding: 20px; text-align: center; background: white; display: inline-block; }
  .qr-sticker canvas, .qr-sticker img { display: block; margin: 0 auto; }
  .qr-label-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .qr-label-sticker { border: 1.5px solid #1b5e35; border-radius: 6px; padding: 10px; text-align: center; background: white; }

  /* ── Landing Page Mobile ──────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    .landing-hero-grid { flex-direction: column !important; }
    .landing-app-preview { display: none !important; }
    .landing-cta-row { flex-direction: column !important; }
    .landing-cta-row a, .landing-cta-row button { width: 100%; justify-content: center; }
  }

  /* ── Onboarding ──────────────────────────────────────────────────────────── */
  @media (max-width: 480px) {
    .onboarding-mode-grid { grid-template-columns: 1fr !important; }
    .machine-type-grid { gap: 6px !important; }
    .machine-type-btn { min-width: 54px !important; padding: 8px !important; }
  }

  /* ── Touch-friendly Inputs ───────────────────────────────────────────────── */
  @media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; padding: 13px 14px; }
    .btn-primary { min-height: 48px; font-size: 15px; }
    .btn-secondary { min-height: 44px; }
    .machine-card { padding: 14px; }
    .badge { font-size: 11px; }
  }