/* Copyright © 2026 Quick Lead. All rights reserved. */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* Brand */
      --blue: #3730A3;
      --blue-hover: #312E81;
      --blue-light: #EEF2FF;
      --red: #DC2626;
      --green: #059669;

      /* Backgrounds */
      --bg: #F8F7F4;
      --white: #FFFFFF;
      --sidebar-bg: #F1F3F5;
      --sidebar-hover: rgba(0,0,0,0.04);
      --sidebar-active: #E0E7FF;
      --bottom-nav-bg: #1E1B4B;

      /* Text */
      --text: #1F2937;
      --text2: #6B7280;
      --text3: #9CA3AF;

      /* Borders & hover */
      --border: #E5E7EB;
      --hover: #F3F4F6;
      --active: #EEF2FF;

      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);

      /* Badge palettes */
      --badge-green-bg: #D1FAE5;   --badge-green-text: #065F46;
      --badge-amber-bg: #FEF3C7;   --badge-amber-text: #92400E;
      --badge-red-bg: #FEE2E2;     --badge-red-text: #991B1B;
      --badge-blue-bg: #EEF2FF;    --badge-blue-text: #3730A3;
    }

    html, body { height: 100%; overflow: hidden; }

    body {
      font-family: 'Plus Jakarta Sans', 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      line-height: 1.6;
    }

    /* ── HEADER ──────────────────────────────── */
    .header {
      height: 64px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 16px;
      flex-shrink: 0;
      z-index: 10;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 22px;
      font-weight: 400;
      color: var(--text2);
      letter-spacing: -0.3px;
      user-select: none;
    }
    .logo strong { color: var(--text); font-weight: 700; }

    #header-greeting {
      flex: 1;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 16px;
      letter-spacing: -0.2px;
    }
    #header-greeting .greet-name { color: var(--blue); font-weight: 700; }
    #header-greeting .greet-dot  { color: var(--border); margin: 0 8px; }
    #header-greeting .greet-msg  { color: var(--text2); font-style: italic; }

    .header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    #status-text {
      font-size: 12px;
      color: var(--text3);
      white-space: nowrap;
    }

    .btn-sync {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
      white-space: nowrap;
    }
    .btn-sync:hover:not(:disabled) { background: var(--blue-hover); box-shadow: var(--shadow-md); }
    .btn-sync:active:not(:disabled) { transform: scale(0.97); }
    .btn-sync:disabled { background: #C7D2FE; cursor: default; }
    .btn-sync svg { width: 15px; height: 15px; transition: transform 0.6s; }
    .btn-sync.spinning svg { animation: spin 1s linear infinite; }

    @keyframes spin { to { transform: rotate(360deg); } }

    #user-avatar {
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      flex-shrink: 0;
      cursor: pointer;
      position: relative;
      user-select: none;
    }
    #user-avatar:hover { opacity: 0.88; }

    #avatar-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      min-width: 200px;
      z-index: 500;
      overflow: hidden;
    }
    #avatar-menu.open { display: block; }
    .av-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      font-size: 14px;
      color: var(--text);
      cursor: pointer;
      transition: background 0.1s;
    }
    .av-menu-item:hover { background: var(--hover); }
    .av-menu-item svg { width: 16px; height: 16px; fill: var(--text2); flex-shrink: 0; }
    .av-menu-item.danger { color: var(--red); }
    .av-menu-item.danger svg { fill: var(--red); }
    .av-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

    /* ── PROGRESS BAR ────────────────────────── */
    .progress-wrap { height: 3px; background: transparent; flex-shrink: 0; }
    #progress-bar {
      height: 100%;
      width: 0;
      background: var(--blue);
      transition: width 0.4s ease;
      border-radius: 0 2px 2px 0;
    }

    /* ── BODY LAYOUT ─────────────────────────── */
    .app-body { display: flex; flex: 1; overflow: hidden; }

    /* ── SIDEBAR ─────────────────────────────── */
    .sidebar {
      width: 220px;
      flex-shrink: 0;
      background: var(--sidebar-bg);
      padding: 12px 0;
      overflow-y: auto;
      border-right: 1px solid var(--border);
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 11px 16px 11px 22px;
      border-radius: 0 24px 24px 0;
      margin-right: 12px;
      cursor: pointer;
      font-size: 13.5px;
      font-weight: 500;
      color: #4B5563;
      transition: background 0.15s, color 0.15s;
      user-select: none;
      position: relative;
    }
    .nav-item:hover { background: rgba(0,0,0,0.05); color: #1F2937; }
    .nav-item.active {
      background: #EEF2FF;
      color: #3730A3;
      font-weight: 700;
      border-left: 3px solid #3730A3;
      padding-left: 19px;
    }
    .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }

    .nav-badge {
      display: none;
      margin-left: auto;
      font-size: 11px;
      font-weight: 700;
      background: #4338CA;
      color: #fff;
      min-width: 20px;
      text-align: center;
      padding: 1px 6px;
      border-radius: 10px;
    }

    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 6px 20px;
      opacity: 0.6;
    }

    /* ── MAIN PANEL ──────────────────────────── */
    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

    .toolbar {
      height: 52px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 28px;
      flex-shrink: 0;
    }
    .toolbar-title { font-size: 17px; font-weight: 500; }
    .toolbar-count { font-size: 13px; color: var(--text2); margin-left: 10px; }
    .btn-done-email {
      flex-shrink: 0;
      background: none;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 4px 11px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, color .15s, border-color .15s;
    }
    .btn-done-email:hover { background: #e6f4ea; color: var(--green); border-color: var(--green); }
    .btn-clear-handled {
      margin-left: auto;
      display: none;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
    }
    .btn-clear-handled.visible { display: flex; }
    .btn-clear-handled:hover { background: #e6f4ea; color: var(--green); border-color: var(--green); }
    .btn-bulk-select {
      display: none;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 5px 14px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
    }
    .btn-bulk-select.visible { display: flex; }
    .btn-bulk-select.active { border-color: var(--blue); color: var(--blue); background: #EEF2FF; }
    .email-row-check {
      width: 20px;
      min-width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color .15s, background .15s;
    }
    .email-row-check.checked { border-color: var(--blue); background: var(--blue); }
    .email-row-check.checked::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
    .bulk-action-bar {
      position: sticky;
      bottom: 0;
      background: #1a1a2e;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 500;
      flex-wrap: wrap;
      z-index: 10;
    }
    .bulk-action-bar button {
      border: none;
      border-radius: 16px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .bulk-btn-parse  { background: var(--blue); color: #fff; }
    .bulk-btn-dismiss { background: #fff; color: #333; }
    .bulk-btn-cancel  { background: none; color: #aaa; border: 1px solid #555 !important; }

    .btn-send-replies {
      margin-left: auto;
      display: none;
      align-items: center;
      gap: 8px;
      background: var(--green);
      color: #fff;
      border: none;
      border-radius: 20px;
      padding: 7px 18px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .btn-send-replies.visible { display: flex; }
    .btn-send-replies:hover { opacity: 0.9; }
    .reply-check-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0 2px;
      font-size: 13px;
      color: var(--text2);
      border-top: 1px solid var(--border);
      margin-top: 8px;
      cursor: pointer;
      user-select: none;
    }
    .reply-check-row input { cursor: pointer; width: 15px; height: 15px; }

    /* ── EMAIL LIST ──────────────────────────── */
    .email-list {
      flex: 1;
      overflow-y: auto;
      background: var(--bg);
      padding: 8px 0;
    }
    .email-list::-webkit-scrollbar { width: 8px; }
    .email-list::-webkit-scrollbar-track { background: transparent; }
    .email-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
    .email-list::-webkit-scrollbar-thumb:hover { background: #bbb; }

    .email-row {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      gap: 16px;
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      background: var(--white);
      margin: 6px 16px;
      cursor: default;
      transition: box-shadow 0.15s;
      min-height: 76px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    .email-row:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
    .email-row.unread .sender { font-weight: 700; }
    .email-row.unread .subject { font-weight: 700; color: var(--text); }
    .email-row.unread .date { font-weight: 700; }

    .avatar {
      width: 38px; height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      flex-shrink: 0;
      letter-spacing: -0.5px;
    }

    .email-content { flex: 1; min-width: 0; }

    .email-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 3px;
    }

    .sender {
      font-size: 14px;
      color: var(--text);
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 260px;
    }

    .date {
      font-size: 12px;
      color: var(--text2);
      font-weight: 400;
      flex-shrink: 0;
      margin-left: 12px;
    }

    .subject {
      font-size: 14px;
      color: var(--text);
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
    }

    .snippet {
      font-size: 13px;
      color: var(--text2);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ── PARSE BUTTON ────────────────────────── */
    .btn-parse {
      padding: 5px 14px;
      border-radius: 14px;
      border: none;
      background: #F3F4F6;
      color: var(--text);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    .btn-parse:hover { background: #E5E7EB; }
    /* "Likely Job" parse button stays indigo */
    .btn-parse.job-parse { background: var(--blue); color: #fff; }
    .btn-parse.job-parse:hover { background: var(--blue-hover); }
    .btn-parse.done { background: #D1FAE5; color: #065F46; cursor: default; border: none; }
    .btn-parse.parsing { color: var(--text3); background: var(--hover); cursor: default; }

    .parse-spinner {
      display: inline-block;
      width: 10px; height: 10px;
      border: 2px solid var(--border);
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-right: 4px;
      vertical-align: middle;
    }

    /* ── SKELETON ────────────────────────────── */
    .skeleton-row {
      display: flex;
      align-items: center;
      padding: 18px 28px;
      gap: 16px;
      border-bottom: 1px solid var(--border);
    }
    .skel {
      background: linear-gradient(90deg, #ebebeb 25%, #d6d6d6 50%, #ebebeb 75%);
      background-size: 400% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 6px;
    }
    .skel-circle { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
    .skel-body { flex: 1; display: flex; flex-direction: column; gap: 9px; }
    .skel-line { height: 13px; }
    .skel-line.w30 { width: 30%; }
    .skel-line.w55 { width: 55%; }
    .skel-line.w80 { width: 80%; }

    @keyframes shimmer { to { background-position: -400% 0; } }

    /* ── EMPTY / CENTER STATE ─────────────────── */
    .center-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 16px;
      color: var(--text2);
      text-align: center;
      padding: 40px;
    }
    .center-state svg { width: 72px; height: 72px; opacity: 0.25; }
    .center-state h3 { font-size: 20px; font-weight: 500; color: var(--text); }
    .center-state p { font-size: 14px; max-width: 320px; line-height: 1.6; }

    /* ── SETUP / SIGNIN CARDS ────────────────── */
    .card {
      background: var(--white);
      border-radius: 12px;
      padding: 40px;
      max-width: 500px;
      width: 100%;
      box-shadow: var(--shadow-md);
    }
    .card h2 { font-size: 22px; font-weight: 500; margin-bottom: 8px; }
    .card .subtitle { font-size: 14px; color: var(--text2); margin-bottom: 24px; }

    .setup-steps { list-style: none; counter-reset: steps; }
    .setup-steps li {
      counter-increment: steps;
      display: flex;
      gap: 14px;
      margin-bottom: 18px;
      font-size: 14px;
      color: var(--text2);
      line-height: 1.6;
      align-items: flex-start;
    }
    .setup-steps li::before {
      content: counter(steps);
      background: var(--blue);
      color: #fff;
      border-radius: 50%;
      width: 22px; height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .setup-steps code {
      background: var(--hover);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 6px;
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: var(--text);
    }
    .setup-steps strong { color: var(--text); font-weight: 600; }

    .btn-google {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--blue);
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 12px 28px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 8px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn-google:hover { background: var(--blue-hover); box-shadow: var(--shadow-sm); }

    /* ── LOGIN OVERLAY ───────────────────────────── */
    #login-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg, #F8F7F4);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    #login-overlay.hidden { display: none; }
    #login-card {
      background: #fff;
      border-radius: 20px;
      padding: 40px 32px;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
      max-width: 340px;
      width: 90%;
    }
    #login-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--blue, #3730A3);
      color: #fff;
      border: none;
      border-radius: 24px;
      padding: 14px 28px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      justify-content: center;
      transition: background 0.2s;
    }
    #login-btn:hover { background: #312E81; }

    /* ── AUTH FLOW ────────────────────────────── */
    .lc-brand { text-align: center; margin-bottom: 18px; }
    .lc-brand-name { font-size: 20px; font-weight: 700; color: #1F2937; margin-top: 8px; }

    .lc-view { display: none; }

    .lc-tagline { font-size: 14px; color: #6B7280; margin: 0 0 20px; text-align: center; }

    .lc-create-btn {
      display: block; width: 100%; padding: 12px; margin-top: 10px;
      background: #3730A3; color: #fff; border: none; border-radius: 24px;
      font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s;
    }
    .lc-create-btn:hover { background: #312E81; }

    .lc-signin-link {
      display: block; width: 100%; margin-top: 14px;
      background: none; border: none; color: #3730A3; font-size: 13px;
      cursor: pointer; text-align: center; font-weight: 500; padding: 4px 0;
    }
    .lc-signin-link:hover { text-decoration: underline; }

    @keyframes authStepIn {
      from { opacity: 0; transform: translateX(16px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes authStepInBack {
      from { opacity: 0; transform: translateX(-16px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes authShake {
      0%,100% { transform: translateX(0); }
      20%     { transform: translateX(-6px); }
      40%     { transform: translateX(6px); }
      60%     { transform: translateX(-4px); }
      80%     { transform: translateX(4px); }
    }
    .auth-step { display: none; text-align: left; }
    .auth-anim-fwd  { animation: authStepIn 0.22s ease; }
    .auth-anim-back { animation: authStepInBack 0.22s ease; }
    .auth-shake { animation: authShake 0.4s ease !important; }

    .auth-step-title { font-size: 18px; font-weight: 700; color: #1F2937; margin: 0 0 4px; }
    .auth-step-sub   { font-size: 13px; color: #6B7280; margin: 0 0 14px; }

    .auth-field { margin-bottom: 14px; }
    .auth-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; }
    .auth-input {
      display: block; width: 100%; box-sizing: border-box;
      padding: 11px 14px; border: 1.5px solid #D1D5DB; border-radius: 10px;
      font-size: 14px; color: #1F2937; outline: none;
      transition: border-color 0.15s, box-shadow 0.15s; background: #fff;
    }
    .auth-input:focus { border-color: #3730A3; box-shadow: 0 0 0 3px rgba(55,48,163,0.10); }

    .auth-pw-row { position: relative; }
    .auth-pw-row .auth-input { padding-right: 58px; }
    .auth-pw-toggle {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: #6B7280; font-size: 12px; font-weight: 600;
      cursor: pointer; padding: 4px 6px; border-radius: 4px;
    }
    .auth-pw-toggle:hover { color: #3730A3; }

    .pw-strength-wrap { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
    .pw-strength-track { flex: 1; height: 4px; background: #E5E7EB; border-radius: 2px; overflow: hidden; }
    .pw-strength-fill  { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; width: 0; }
    .pw-strength-label { font-size: 11px; white-space: nowrap; min-width: 40px; transition: color 0.3s; }

    .auth-btn-primary {
      display: block; width: 100%; padding: 12px; margin-bottom: 10px;
      background: #3730A3; color: #fff; border: none; border-radius: 24px;
      font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s, opacity 0.2s;
    }
    .auth-btn-primary:hover  { background: #312E81; }
    .auth-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

    .auth-link-btn {
      display: block; width: 100%; background: none; border: none;
      color: #6B7280; font-size: 12px; cursor: pointer; text-align: center;
      text-decoration: underline; margin-bottom: 6px; padding: 4px 0;
    }
    .auth-back-btn {
      display: block; width: 100%; background: none; border: none;
      color: #9CA3AF; font-size: 12px; cursor: pointer; text-align: center; margin-top: 6px; padding: 4px 0;
    }
    .auth-back-btn:hover { color: #6B7280; }

    .auth-email-pill {
      display: inline-block; background: #F3F4F6; border-radius: 20px;
      padding: 4px 12px; font-size: 12px; color: #374151; margin: 0 0 14px;
    }

    .su-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
    .su-dot  { width: 8px; height: 8px; border-radius: 50%; background: #E5E7EB; transition: background 0.25s, transform 0.25s; }
    .su-dot.su-dot-active { background: #3730A3; transform: scale(1.25); }

    .su-verify-icon { font-size: 38px; text-align: center; margin: 6px 0 10px; }

    .auth-terms { font-size: 11px; color: #9CA3AF; text-align: center; margin: 2px 0 8px; }
    .auth-terms a { color: #6B7280; }

    .login-divider {
      display: flex; align-items: center; gap: 10px;
      margin: 16px 0; color: #9CA3AF; font-size: 13px;
    }
    .login-divider::before, .login-divider::after {
      content: ''; flex: 1; height: 1px; background: #E5E7EB;
    }

    /* ── JOB CARDS ───────────────────────────── */
    .jobs-list { padding: 8px 0 24px; }

    .job-card {
      background: var(--white);
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      margin: 16px;
      padding: 24px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      transition: box-shadow 0.15s;
    }
    .job-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

    .job-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .badge-urgent   { background: #FEE2E2; color: #991B1B; }
    .badge-active   { background: #EEF2FF; color: #3730A3; }
    .badge-booked   { background: #D1FAE5; color: #065F46; }
    .badge-done     { background: #F3F4F6; color: #4B5563; }
    .badge-invoiced { background: #F3E8FF; color: #6B21A8; }
    .badge-reminder { background: #FEF3C7; color: #92400E; }
    .badge-overdue  { background: #FEE2E2; color: #991B1B; }

    .photo-thumbs { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0; }
    .photo-thumb  { width:58px; height:58px; object-fit:cover; border-radius:6px;
                    border:1px solid var(--border); cursor:pointer; }

    .timer-display { font-size:12px; color:var(--green); font-weight:600;
                     margin-top:6px; display:flex; align-items:center; gap:5px; }
    .timer-dot     { width:7px; height:7px; background:var(--green);
                     border-radius:50%; animation:pulse 1.2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

    .signed-row { font-size:12px; color:var(--green); font-weight:600;
                  margin-top:6px; display:flex; align-items:center; gap:5px; }

    /* ── LOG ─────────────────────────────────── */
    .log-list { padding: 8px 0 24px; }
    .log-entry {
      display: flex;
      gap: 14px;
      padding: 12px 24px;
      border-bottom: 1px solid var(--border);
      font-size: 13px;
      align-items: flex-start;
    }
    .log-entry:hover { background: var(--hover); }
    .log-icon {
      width: 32px; height: 32px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      font-size: 15px;
    }
    .log-body { flex: 1; min-width: 0; }
    .log-action { font-weight: 500; color: var(--text); }
    .log-detail { color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .log-time   { font-size: 11px; color: var(--text3); flex-shrink: 0; margin-top: 2px; }
    .log-clear  { font-size: 12px; color: var(--text3); cursor: pointer; text-decoration: underline; }
    .log-clear:hover { color: var(--red); }

    .job-company { font-size: 14px; font-weight: 600; color: var(--text); }
    .job-number  { font-size: 12px; color: var(--text3); }
    .job-due     { margin-left: auto; font-size: 12px; color: var(--text2); font-weight: 500; }

    .job-detail-row {
      display: flex;
      gap: 8px;
      font-size: 13px;
      color: var(--text2);
      margin-bottom: 5px;
      align-items: flex-start;
      line-height: 1.4;
    }
    .job-detail-row svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; fill: var(--text3); }

    .job-desc {
      font-size: 13px;
      color: var(--text2);
      background: var(--bg);
      border-left: 3px solid var(--blue);
      border-radius: 0 4px 4px 0;
      padding: 8px 12px;
      margin: 10px 0 0;
      line-height: 1.5;
    }

    .job-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .btn-action {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: white;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s;
      color: var(--text);
      font-family: inherit;
    }
    .btn-action:hover { background: var(--hover); box-shadow: var(--shadow-sm); }
    .btn-action.primary { background: var(--blue); color: white; border-color: var(--blue); }
    .btn-action.primary:hover { background: var(--blue-hover); }
    .btn-action.danger { color: var(--text3); }
    .btn-action svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

    /* ── SETTINGS ────────────────────────────── */
    .settings-panel { padding: 28px; max-width: 540px; }
    .settings-panel h2 { font-size: 18px; font-weight: 500; margin-bottom: 24px; }

    .setting-group { margin-bottom: 18px; }
    .setting-label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .setting-input {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      color: var(--text);
      outline: none;
      transition: border-color 0.2s;
      box-sizing: border-box;
      font-family: inherit;
    }
    .setting-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #C7D2FE; }
    .setting-hint { font-size: 12px; color: var(--text3); margin-top: 4px; line-height: 1.4; }

    .settings-section-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin: 24px 0 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }

    /* ── MODAL ───────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal {
      background: white;
      border-radius: 12px;
      padding: 28px;
      max-width: 620px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }

    .modal h3 { font-size: 18px; font-weight: 500; margin-bottom: 16px; }

    .modal-body-text {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text);
      white-space: pre-wrap;
      background: var(--bg);
      padding: 16px;
      border-radius: 8px;
      margin-bottom: 16px;
      border: 1px solid var(--border);
    }

    .modal-actions {
      display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
      position: sticky; bottom: 0; background: #fff;
      padding-top: 14px; margin-top: 4px;
      border-top: 1px solid var(--border);
      z-index: 2;
    }

    /* ── INVOICE (inside modal) ──────────────── */
    .invoice { font-family: Arial, sans-serif; color: #333; }
    .invoice-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--blue);
    }
    .invoice-from { font-size: 13px; line-height: 1.7; }
    .invoice-from strong { font-size: 16px; display: block; margin-bottom: 2px; }
    .invoice-title { text-align: right; }
    .invoice-title h2 { font-size: 30px; color: var(--blue); margin: 0; }
    .invoice-title .inv-meta { font-size: 12px; color: #666; margin-top: 4px; }
    .invoice-to { margin-bottom: 20px; font-size: 13px; line-height: 1.6; }
    .invoice-to strong { display: block; margin-bottom: 2px; font-size: 14px; }
    .invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: 13px; }
    .invoice-table th { background: var(--bg); padding: 9px 12px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); }
    .invoice-table td { padding: 9px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
    .invoice-table td:last-child, .invoice-table th:last-child { text-align: right; }
    .invoice-amount { width: 80px; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 13px; text-align: right; }
    .inv-line-desc { width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: 4px 7px; font-size: 13px; box-sizing: border-box; }
    .inv-remove-line { background: none; border: none; color: #c00; font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; opacity: 0.5; }
    .inv-remove-line:hover { opacity: 1; }
    .btn-add-inv-line { margin: 2px 0 8px; background: none; border: 1px dashed var(--border); border-radius: 6px; padding: 5px 14px; font-size: 13px; color: var(--blue); cursor: pointer; width: 100%; }
    .btn-add-inv-line:hover { background: var(--bg); }
    .jobs-toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 16px 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
    .jobs-search { flex: 1; min-width: 160px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; outline: none; }
    .jobs-search:focus { border-color: var(--blue); }
    .filter-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 12px; font-weight: 500; background: white; cursor: pointer; color: var(--text2); }
    .filter-btn:hover { border-color: var(--blue); color: var(--blue); }
    .filter-btn.active { background: var(--blue); color: white; border-color: var(--blue); }

    /* Hide sender button */
    .btn-hide-sender { background: none; border: none; color: var(--text3); font-size: 14px; cursor: pointer; padding: 4px 6px; border-radius: 4px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
    .email-row:hover .btn-hide-sender { opacity: 1; }
    .btn-hide-sender:hover { color: var(--red); background: #fce8e6; }

    /* Email action button group */
    .email-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

    /* Invoices view */
    .inv-view { padding: 20px; max-width: 800px; }
    .inv-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
    .inv-summary-card { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
    .inv-summary-card .label { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
    .inv-summary-card .value { font-size: 20px; font-weight: 700; color: var(--text); }
    .inv-summary-card .value.green { color: var(--green); }
    .inv-summary-card .value.red { color: var(--red); }
    .inv-toolbar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
    .inv-record { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 14px; }
    .inv-record-main { flex: 1; min-width: 0; }
    .inv-record-num { font-size: 13px; font-weight: 700; color: var(--blue); }
    .inv-record-client { font-size: 14px; font-weight: 500; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inv-record-meta { font-size: 12px; color: var(--text2); }
    .inv-record-amount { text-align: right; flex-shrink: 0; }
    .inv-record-total { font-size: 16px; font-weight: 700; }
    .inv-record-status { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; margin-top: 3px; display: inline-block; }
    .status-unpaid { background: #fce8e6; color: var(--red); }
    .status-paid { background: #e6f4ea; color: var(--green); }
    .btn-mark-paid { font-size: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: white; cursor: pointer; color: var(--text2); white-space: nowrap; }
    .btn-mark-paid:hover { border-color: var(--green); color: var(--green); }
    .btn-export { padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: white; font-size: 13px; cursor: pointer; color: var(--text2); display: flex; align-items: center; gap: 6px; }
    .btn-export:hover { border-color: var(--blue); color: var(--blue); }

    /* Route planner */
    .route-panel { padding: 20px; max-width: 700px; }
    .route-date-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; background: white; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
    .route-date-bar input[type=date] { border: none; font-size: 14px; font-weight: 500; color: var(--text); background: transparent; outline: none; cursor: pointer; }
    .route-date-label { font-size: 13px; color: var(--text2); flex: 1; }
    .btn-open-maps { padding: 8px 16px; background: var(--blue); color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .btn-open-maps:hover { background: var(--blue-hover); }
    .btn-open-maps:disabled { background: var(--border); color: var(--text3); cursor: default; }
    .route-stop { display: flex; align-items: center; gap: 12px; background: white; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: grab; user-select: none; transition: box-shadow .15s; }
    .route-stop:active { cursor: grabbing; }
    .route-stop.drag-over { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(55,48,163,0.15); }
    .route-stop.dragging { opacity: 0.4; }
    .route-stop-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: white; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .route-stop-body { flex: 1; min-width: 0; }
    .route-stop-addr { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .route-stop-meta { font-size: 12px; color: var(--text2); margin-top: 2px; }
    .route-drag-handle { color: var(--text3); font-size: 18px; cursor: grab; }
    .route-empty { text-align: center; padding: 48px 20px; color: var(--text2); font-size: 14px; line-height: 1.6; }
    .route-empty svg { width: 40px; height: 40px; fill: var(--border); margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }
    .route-empty strong { color: var(--text); display: block; font-size: 15px; margin-bottom: 6px; }

    /* Offline banner */
    .offline-banner { display: none; background: #e37400; color: white; text-align: center; padding: 7px 16px; font-size: 13px; font-weight: 500; flex-shrink: 0; z-index: 5; }
    .offline-banner.visible { display: block; }

    /* Onboarding */
    .onboard-overlay { position: fixed; inset: 0; background: var(--blue); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
    .onboard-card { background: white; border-radius: 16px; padding: 40px; max-width: 500px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
    .onboard-card h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
    .onboard-card .onboard-sub { color: var(--text2); font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
    .onboard-dots { display: flex; gap: 7px; margin-bottom: 24px; }
    .onboard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .2s; }
    .onboard-dot.active { background: var(--blue); }
    .onboard-fields { display: flex; flex-direction: column; gap: 10px; }
    .onboard-fields label { font-size: 12px; font-weight: 600; color: var(--text2); display: block; margin-bottom: 3px; }
    .onboard-fields input { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; box-sizing: border-box; }
    .onboard-fields input:focus { outline: none; border-color: var(--blue); }
    .onboard-fields .hint { font-size: 11px; color: var(--text3); margin-top: 2px; }
    .btn-onboard { width: 100%; padding: 12px; background: var(--blue); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 20px; }
    .btn-onboard:hover { background: var(--blue-hover); }
    .onboard-skip { text-align: center; margin-top: 12px; font-size: 12px; color: var(--text3); cursor: pointer; }
    .onboard-skip:hover { color: var(--text2); text-decoration: underline; }
    .onboard-card { max-height: calc(100vh - 80px); overflow-y: auto; }
    .trade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
    .trade-tile { border: 2px solid var(--border); border-radius: 10px; padding: 10px 6px 9px; text-align: center; cursor: pointer; font-size: 12px; font-weight: 500; transition: border-color .15s, background .15s; user-select: none; line-height: 1.3; }
    .trade-tile .trade-icon { font-size: 22px; display: block; margin-bottom: 4px; }
    .trade-tile:hover { border-color: var(--blue); background: #EEF2FF; }
    .trade-tile.selected { border-color: var(--blue); background: var(--active); color: var(--blue); font-weight: 700; }
    .edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .edit-form .full { grid-column: 1 / -1; }
    .edit-form label { font-size: 12px; font-weight: 600; color: var(--text2); display: block; margin-bottom: 3px; }
    .edit-form input, .edit-form textarea, .edit-form select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; box-sizing: border-box; font-family: inherit; }
    .edit-form textarea { resize: vertical; min-height: 60px; }
    .edit-form input:focus, .edit-form textarea:focus, .edit-form select:focus { outline: none; border-color: var(--blue); }
    .inv-amount-cell { text-align: right; width: 90px; }
    .inv-del-cell { width: 32px; text-align: center; }
    .invoice-totals { text-align: right; font-size: 13px; }
    .total-row { display: flex; justify-content: flex-end; gap: 48px; padding: 4px 0; }
    .total-row.grand { font-weight: 700; font-size: 15px; border-top: 2px solid var(--text); margin-top: 6px; padding-top: 8px; }
    .invoice-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: #888; text-align: center; }

    /* ── TOAST ───────────────────────────────── */
    #toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #323232;
      color: #fff;
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 9999;
      pointer-events: none;
      white-space: nowrap;
    }
    #toast.show { transform: translateX(-50%) translateY(0); }

    /* ── BOTTOM NAV (mobile only) ────────────── */
    .bottom-nav {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      height: calc(60px + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      background: var(--bottom-nav-bg);
      border-top: 1px solid rgba(255,255,255,.08);
      z-index: 200;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }
    .bottom-nav::-webkit-scrollbar { display: none; }
    .bottom-nav-inner {
      display: flex;
      height: 60px;
      min-width: max-content;
    }
    /* Scroll hint */
    .bottom-nav::after {
      content: '›';
      position: fixed;
      bottom: env(safe-area-inset-bottom, 0px); right: 0;
      width: 36px; height: 60px;
      background: linear-gradient(to right, transparent, rgba(30,27,75,0.98) 40%);
      color: rgba(255,255,255,.4);
      font-size: 22px;
      line-height: 60px;
      text-align: center;
      pointer-events: none;
      z-index: 201;
      transition: opacity 0.25s;
      animation: nav-hint-pulse 1.5s ease-in-out 1s 3;
    }
    .bottom-nav.scrolled-end::after { opacity: 0; }
    @keyframes nav-hint-pulse {
      0%, 100% { transform: translateX(0); opacity: 1; }
      50%       { transform: translateX(4px); opacity: 0.5; }
    }
    .bottom-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 0 14px;
      min-width: 60px;
      font-size: 10px;
      color: rgba(255,255,255,.45);
      cursor: pointer;
      user-select: none;
      position: relative;
    }
    .bottom-nav-item svg { width: 22px; height: 22px; fill: currentColor; }
    .bottom-nav-item.active { color: #fff; }
    .bottom-nav-item .nav-badge {
      position: absolute;
      top: 6px; right: 8px;
      background: var(--red);
      color: white;
      font-size: 10px;
      font-weight: 700;
      border-radius: 8px;
      padding: 1px 5px;
      min-width: 16px;
      text-align: center;
    }

    /* ── TABLET (iPad) ───────────────────────── */
    @media (max-width: 1024px) {
      .sidebar {
        width: 68px;
        padding: 12px 0;
      }
      .nav-item {
        padding: 10px 0;
        justify-content: center;
        border-radius: 0;
        margin-right: 0;
        flex-direction: column;
        gap: 4px;
        font-size: 10px;
        border-left: none !important;
        padding-left: 0 !important;
      }
      .nav-item svg { width: 22px; height: 22px; }
      .nav-divider { margin: 8px 10px; }
      .nav-badge {
        position: absolute;
        top: 5px; right: 8px;
        font-size: 10px;
        background: var(--red);
        color: white;
        border-radius: 8px;
        padding: 1px 5px;
        min-width: 16px;
        text-align: center;
        margin-left: 0;
      }
      .toolbar { padding: 0 16px; }
      .job-card { margin: 8px 10px; padding: 14px 14px; }
      .settings-panel { padding: 20px 16px; }
      .inv-view { padding: 14px; }
      .inv-summary { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── PHONE ───────────────────────────────── */
    @media (max-width: 640px) {
      /* Hide sidebar — use bottom nav instead */
      .sidebar { display: none; }
      .bottom-nav { display: block; }

      /* Push content above bottom nav (+ safe area for Android/iOS system bars) */
      .app-body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
      #toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

      /* Header */
      .header { padding: 0 12px; height: 50px; }
      .logo { font-size: 16px; gap: 8px; }
      .logo svg { width: 24px; height: 24px; }
      #status-text { display: none; }
      #header-greeting { display: none; }
      .btn-sync { padding: 7px 12px; font-size: 12px; }
      .btn-sync span { display: none; }

      /* Toolbar */
      .toolbar { padding: 0 12px; height: 46px; }
      .toolbar-title { font-size: 15px; }

      /* Toolbar buttons — shrink on small screens */
      #btn-create-invoice .btn-invoice-text { display: none; }
      #btn-create-invoice { padding: 5px 10px; }
      #btn-whatsapp-book .btn-wa-text { display: none; }
      #btn-whatsapp-book { padding: 5px 10px; min-width: 34px; justify-content: center; }
      #btn-paste-email .btn-paste-text { display: none; }
      #btn-paste-email { padding: 5px 10px; }

      /* Email list */
      .email-list { padding: 4px 0; }
      .email-row { padding: 12px 14px; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin: 4px 8px; border-radius: 10px; }
      .avatar { width: 34px; height: 34px; font-size: 13px; margin-top: 2px; }
      .email-content { flex: 1 1 0; min-width: 0; }
      .sender { max-width: calc(100vw - 160px); font-size: 13px; }
      .snippet { display: none; }
      .email-actions { margin-left: 44px; width: calc(100% - 44px); flex-wrap: wrap; }
      .btn-hide-sender { opacity: 0.3; margin-left: auto; }

      /* Job cards */
      .job-card { margin: 8px; padding: 16px; border-radius: 12px; }
      .job-card-header { gap: 6px; margin-bottom: 10px; }

      /* Job actions — scroll horizontally */
      .job-actions {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 4px;
        scrollbar-width: none;
      }
      .job-actions::-webkit-scrollbar { display: none; }
      .btn-action {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
      }

      /* Modal */
      .modal-overlay { padding: 0; align-items: flex-end; }
      .modal {
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        padding: 20px 16px;
        max-width: 100%;
      }

      /* Settings */
      .settings-panel { padding: 16px 12px; max-width: 100%; }

      /* Invoices */
      .inv-view { padding: 10px 8px; max-width: 100%; }
      .inv-summary { grid-template-columns: 1fr 1fr; gap: 8px; }
      .inv-summary-card { padding: 10px 12px; }
      .inv-summary-card .value { font-size: 17px; }
      .inv-record { flex-wrap: wrap; gap: 8px; }

      /* Route */
      .route-panel { padding: 12px 10px; max-width: 100%; }
      .route-date-bar { gap: 8px; padding: 8px 10px; }
      .route-drag-handle { font-size: 20px; padding: 8px; }
      .route-stop { padding: 12px 10px; }

      /* Analytics */
      .inv-view > div, [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Photo thumbs */
      .photo-thumb { width: 64px; height: 64px; }

      /* Onboarding */
      .onboard-card { padding: 24px 20px; }
    }

    /* ── PWA Install Banner ───────────────────────────────── */
    #pwa-install-banner {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #fff;
      border-top: 1px solid #e8eaed;
      box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
      padding: 14px 18px;
      z-index: 9999;
      align-items: center;
      gap: 12px;
    }
    #pwa-install-banner.show { display: flex; }
    .pwa-banner-icon {
      width: 44px; height: 44px;
      background: #3730A3;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .pwa-banner-text { flex: 1; min-width: 0; }
    .pwa-banner-text strong { display: block; font-size: 14px; color: #202124; }
    .pwa-banner-text span   { font-size: 12px; color: #5f6368; }
    .pwa-banner-install {
      background: #3730A3; color: #fff;
      border: none; border-radius: 20px;
      padding: 8px 18px; font-size: 13px; font-weight: 600;
      cursor: pointer; flex-shrink: 0;
    }
    .pwa-banner-dismiss {
      background: none; border: none;
      font-size: 20px; color: #9aa0a6;
      cursor: pointer; padding: 4px; flex-shrink: 0;
      line-height: 1;
    }

    /* ── iOS install hint (Safari only) ──────────────────── */
    #ios-install-hint {
      display: none;
      position: fixed;
      bottom: 24px; left: 50%; transform: translateX(-50%);
      background: #202124;
      color: #fff;
      border-radius: 12px;
      padding: 14px 18px;
      font-size: 13px;
      line-height: 1.6;
      z-index: 9999;
      max-width: 320px;
      width: calc(100% - 32px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
      text-align: center;
    }
    #ios-install-hint.show { display: block; }
    #ios-install-hint .ios-hint-close {
      position: absolute; top: 8px; right: 12px;
      background: none; border: none; color: #aaa;
      font-size: 18px; cursor: pointer; line-height: 1;
    }
    #ios-install-hint::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 50%; transform: translateX(-50%);
      border: 8px solid transparent;
      border-top-color: #202124;
      border-bottom: none;
    }