*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f0f2f5;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ── Login ── */
    #login-view {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-card {
      background: #fff;
      border-radius: 16px;
      padding: 40px 36px;
      width: 360px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .login-card .brand { display: flex; align-items: center; gap: 10px; }
    .login-card h1 { font-size: 1.3rem; font-weight: 700; color: #1a1a2e; }
    .login-card p { font-size: 0.85rem; color: #94a3b8; margin-top: -12px; }
    .login-field { display: flex; flex-direction: column; gap: 5px; }
    .login-field label { font-size: 0.76rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
    .login-field input {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 0.9rem;
      font-family: inherit;
      color: #1e293b;
      outline: none;
      transition: border-color 0.15s;
    }
    .login-field input:focus { border-color: #3b82f6; }
    .login-btn {
      background: #1a1a2e;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 11px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .login-btn:hover { opacity: 0.85; }
    .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .login-error { font-size: 0.82rem; color: #dc2626; min-height: 18px; }

    /* ── App shell ── */
    #app-view { flex: 1; display: none; flex-direction: column; overflow: hidden; }

    header {
      background: #1a1a2e;
      color: #fff;
      padding: 0 20px;
      height: 52px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    header h1 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.03em; margin-right: 8px; }

    nav { display: flex; gap: 2px; }
    .nav-btn {
      background: none;
      border: none;
      color: rgba(255,255,255,0.6);
      font-size: 0.83rem;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.1s, color 0.1s;
    }
    .nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .nav-btn.active { background: rgba(255,255,255,0.15); color: #fff; }
    .hamburger-btn { display: none; background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.85); font-size: 1.25rem; padding: 5px 8px; border-radius: 6px; line-height: 1; transition: background 0.1s; }
    .hamburger-btn:hover { background: rgba(255,255,255,0.1); }

    .header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
    .user-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem;
      color: rgba(255,255,255,0.75);
    }
    .role-badge {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 7px;
      border-radius: 99px;
    }
    .role-admin     { background: #6366f1; color: #fff; }
    .role-manager   { background: #3b82f6; color: #fff; }
    .role-technician{ background: #64748b; color: #fff; }
    .signout-btn {
      background: rgba(255,255,255,0.1);
      border: none;
      color: rgba(255,255,255,0.7);
      font-size: 0.78rem;
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
    }
    .signout-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
    .review-alert-pill { background: #7c3aed; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 99px; animation: pulse 2s infinite; cursor: pointer; border: none; }
    .review-alert-pill:hover { background: #6d28d9; }
    @media (max-width: 600px) {
      .review-panel { position: fixed !important; top: 52px !important; left: 8px !important; right: 8px !important; max-width: unset !important; min-width: unset !important; width: calc(100vw - 16px) !important; }
    }
    .review-panel-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f8fafc; cursor: pointer; transition: background 0.1s; gap: 10px; }
    .review-panel-item:last-child { border-bottom: none; }
    .review-panel-item:hover { background: #faf5ff; }
    .review-panel-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .review-panel-item-title { font-size: 0.83rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .review-panel-item-meta { font-size: 0.72rem; color: #94a3b8; }

    /* ── Pages ── */
    .page { flex: 1; display: none; overflow: hidden; }
    .page.active { display: flex; }

    /* ── Main page (sidebar + chat) ── */
    #main-page { flex-direction: row; }

    .sidebar { display: none !important; }
    .summary-strip { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; flex-wrap: wrap; }
    .summary-pill { display: flex; align-items: center; gap: 5px; font-size: 0.71rem; font-weight: 500; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 99px; padding: 2px 8px; }
    .s-dot { width: 6px; height: 6px; border-radius: 50%; }
    .s-pending     { background: #f59e0b; }
    .s-inprogress  { background: #3b82f6; }
    .s-underreview { background: #7c3aed; }
    .s-completed   { background: #22c55e; }
    .tree-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; flex-shrink: 0; }
    .tree-header span:first-child { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; }
    .badge { background: #e2e8f0; color: #64748b; font-size: 0.68rem; font-weight: 600; padding: 1px 6px; border-radius: 99px; }
    .tree-container { flex: 1; overflow-y: auto; padding-bottom: 16px; }
    .tree-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 1px 6px; border-radius: 6px; cursor: pointer; user-select: none; transition: background 0.1s; }
    .tree-row:hover { background: #f1f5f9; }
    .tree-arrow { font-size: 0.5rem; color: #cbd5e1; transition: transform 0.15s, color 0.15s; width: 10px; flex-shrink: 0; display: inline-block; }
    .tree-arrow.open { transform: rotate(90deg); color: #94a3b8; }
    .tree-label-group { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .tree-label { font-size: 0.83rem; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tree-meta { font-size: 0.71rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .l0 { padding-left: 10px; }
    .l1 { padding-left: 22px; }
    .l2 { padding-left: 34px; }
    .svc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .task-row { display: flex; align-items: flex-start; flex-direction: column; padding: 4px 10px 4px 44px; margin: 1px 6px; border-radius: 6px; }
    .task-row:hover { background: #f8fafc; }
    .task-row-main { display: flex; align-items: center; gap: 8px; width: 100%; }
    .task-row input[type="checkbox"] { width: 13px; height: 13px; cursor: pointer; accent-color: #3b82f6; flex-shrink: 0; margin-top: 1px; }
    .task-label { font-size: 0.79rem; color: #334155; cursor: pointer; flex: 1; }
    .task-label.done { text-decoration: line-through; color: #94a3b8; }
    .task-notes-icon { background: none; border: none; cursor: pointer; font-size: 0.7rem; color: #cbd5e1; padding: 1px 3px; border-radius: 3px; flex-shrink: 0; line-height: 1; }
    .task-notes-icon:hover { color: #7c3aed; background: #f5f3ff; }
    .task-notes-icon.has-notes { color: #7c3aed; }
    .task-notes-preview { font-size: 0.72rem; color: #94a3b8; margin-top: 2px; padding-left: 21px; white-space: pre-wrap; word-break: break-word; }
    .tree-empty { font-size: 0.77rem; color: #cbd5e1; font-style: italic; padding: 5px 14px; }
    .tree-loading { font-size: 0.74rem; color: #e2e8f0; padding: 5px 14px; }
    .site-actions { display: none; gap: 4px; margin-left: auto; flex-shrink: 0; }
    .tree-row:hover .site-actions { display: flex; }
    .overdue-tag { background: #fee2e2; color: #dc2626; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
    .priority-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 4px; flex-shrink: 0; }
    .ptag-urgent { background: #fee2e2; color: #dc2626; }
    .ptag-low    { background: #f1f5f9; color: #94a3b8; }
    .icon-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 0.75rem; color: #94a3b8; line-height: 1; transition: background 0.1s, color 0.1s; }
    .icon-btn:hover { background: #e2e8f0; color: #334155; }
    .icon-btn.del:hover { background: #fee2e2; color: #dc2626; }

    /* Chat */
    .chat-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .chat-disabled { flex: 1; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 0.9rem; }
    .messages { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }
    .bubble-row { display: flex; gap: 10px; align-items: flex-start; }
    .bubble-row.user { flex-direction: row-reverse; }
    .avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
    .avatar-agent { background: #1a1a2e; color: #fff; }
    .avatar-user  { background: #3b82f6; color: #fff; }
    .bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 0.875rem; line-height: 1.5; word-break: break-word; }
    .bubble-user  { background: #3b82f6; color: #fff; border-top-right-radius: 4px; white-space: pre-wrap; }
    .bubble-agent { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-top-left-radius: 4px; }
    .bubble-agent p { margin: 0 0 6px; }
    .bubble-agent p:last-child { margin-bottom: 0; }
    .bubble-agent ul, .bubble-agent ol { margin: 4px 0 6px 18px; }
    .bubble-agent li { margin-bottom: 2px; }
    .bubble-agent strong { font-weight: 600; }
    .bubble-agent code { background: #f1f5f9; border-radius: 4px; padding: 1px 4px; font-size: 0.82em; }
    .typing-indicator { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
    .typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: bounce 1.2s infinite; }
    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
    .input-bar { padding: 16px 28px; background: #fff; border-top: 1px solid #e2e8f0; display: flex; gap: 10px; align-items: flex-end; }
    textarea { flex: 1; resize: none; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; font-size: 0.875rem; font-family: inherit; color: #1e293b; outline: none; max-height: 120px; overflow-y: auto; line-height: 1.5; transition: border-color 0.15s; }
    textarea:focus { border-color: #3b82f6; }
    textarea::placeholder { color: #cbd5e1; }
    #sendBtn { background: #3b82f6; color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-size: 0.875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s, opacity 0.15s; height: 40px; }
    #sendBtn:hover:not(:disabled) { background: #2563eb; }
    #sendBtn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Users page ── */
    #users-page, #service-types-page { flex-direction: column; overflow-y: auto; }
    .page-body { padding: 28px 32px; width: 100%; box-sizing: border-box; }
    .page-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .page-top h2 { font-size: 1.1rem; font-weight: 600; color: #1e293b; }
    .btn-primary { background: #3b82f6; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
    .btn-primary:hover { background: #2563eb; }
    .users-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
    .users-table th { background: #f8fafc; padding: 10px 16px; text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
    .users-table td { padding: 12px 16px; font-size: 0.85rem; color: #334155; border-bottom: 1px solid #f1f5f9; }
    .users-table tr:last-child td { border-bottom: none; }
    .users-table tr:hover td { background: #f8fafc; }
    .status-pill { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
    .pill-active   { background: #dcfce7; color: #16a34a; }
    .pill-inactive { background: #fee2e2; color: #dc2626; }
    .tbl-actions { display: flex; gap: 6px; }
    .tbl-btn { background: none; border: 1px solid #e2e8f0; color: #64748b; font-size: 0.78rem; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.1s; }
    .tbl-btn:hover { border-color: #94a3b8; color: #1e293b; }
    .tbl-btn.danger:hover { border-color: #fca5a5; background: #fee2e2; color: #dc2626; }

    /* ── Modals ── */
    .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 100; align-items: center; justify-content: center; }
    .modal-backdrop.open { display: flex; }
    .svc-type-preview { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px; max-height:160px; overflow-y:auto; padding:8px 12px; margin-top:4px; }
    .match-banner { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 14px; font-size:0.82rem; color:#92400e; display:flex; flex-direction:column; gap:6px; }
    .match-banner-title { font-weight:600; color:#78350f; font-size:0.8rem; }
    .match-item { display:flex; align-items:center; gap:8px; }
    .match-item-info { flex:1; min-width:0; }
    .match-item-desc { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .match-item-meta { font-size:0.74rem; color:#b45309; margin-top:1px; }
    .match-view-btn { background:none; border:1px solid #d97706; border-radius:5px; color:#d97706; font-size:0.74rem; padding:3px 9px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background 0.1s; }
    .match-view-btn:hover { background:#fef3c7; }
    .type-task-item { font-size:0.76rem; color:#475569; padding:2px 0; line-height:1.4; }
    .sd-task-actions { display:flex; gap:2px; margin-left:auto; flex-shrink:0; }
    .sd-task-btn { background:none; border:none; cursor:pointer; padding:2px 6px; border-radius:3px; font-size:0.72rem; color:#cbd5e1; line-height:1; }
    .sd-task-btn:hover { background:#f1f5f9; color:#64748b; }
    .sd-task-btn.del:hover { background:#fef2f2; color:#dc2626; }
    .sd-add-task { display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed #e2e8f0; }
    .sd-add-task input { flex:1; height:32px; font-size:0.82rem; padding:0 10px; border:1px solid #e2e8f0; border-radius:6px; }
    .sd-add-task input:focus { outline:none; border-color:#3b82f6; }
    .sd-add-task button { height:32px; padding:0 14px; font-size:0.82rem; background:#3b82f6; color:#fff; border:none; border-radius:6px; cursor:pointer; white-space:nowrap; }
    .sd-add-task button:hover { background:#2563eb; }
    .modal { background: #fff; border-radius: 14px; padding: 24px; width: 400px; max-width: calc(100vw - 48px); box-shadow: 0 8px 32px rgba(0,0,0,0.18); display: flex; flex-direction: column; gap: 14px; }
    .modal h2 { font-size: 1rem; font-weight: 600; color: #1e293b; }
    .field-group { display: flex; flex-direction: column; gap: 4px; }
    .field-group label { font-size: 0.75rem; font-weight: 500; color: #64748b; }
    .field-group input, .field-group select { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; font-size: 0.85rem; font-family: inherit; color: #1e293b; outline: none; transition: border-color 0.15s; background: #fff; }
    .field-group input:focus, .field-group select:focus { border-color: #3b82f6; }
    .field-row { display: flex; gap: 8px; }
    .field-row .field-group { flex: 1; }
    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
    .btn-cancel { background: #f1f5f9; color: #64748b; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.85rem; font-weight: 500; cursor: pointer; }
    .btn-cancel:hover { background: #e2e8f0; }
    .btn-save { background: #3b82f6; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
    .btn-save:hover { background: #2563eb; }
    .field-hint { font-size: 0.71rem; color: #94a3b8; }

    /* ── Technician card dashboard ── */
    #tech-dashboard { flex: 1; overflow-y: auto; padding: 24px 28px; display: none; flex-direction: column; gap: 28px; }
    .tech-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
    .tech-header h2 { font-size: 1rem; font-weight: 600; color: #1e293b; }
    .tech-header .refresh-btn { background: none; border: 1px solid #e2e8f0; color: #64748b; font-size: 0.78rem; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
    .tech-header .refresh-btn:hover { background: #f1f5f9; }
    .tech-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
    .tech-filter-group { display: flex; gap: 4px; background: #f1f5f9; border-radius: 8px; padding: 3px; }
    .tech-filter-btn { background: none; border: none; border-radius: 6px; padding: 4px 12px; font-size: 0.76rem; font-weight: 600; color: #64748b; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .tech-filter-btn:hover { background: #e2e8f0; color: #334155; }
    .tech-filter-btn.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .tech-filter-btn.urgent.active { background: #fef2f2; color: #dc2626; }
    .tech-section { display: flex; flex-direction: column; gap: 12px; }
    .tech-section-title { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #64748b; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; }
    .tech-section-title .s-dot { width: 8px; height: 8px; flex-shrink: 0; }
    .tech-count { background: #e2e8f0; color: #64748b; font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
    .svc-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); border-left: 4px solid #e2e8f0; overflow: hidden; transition: box-shadow 0.15s; }
    .svc-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.1); }
    .svc-card.status-pending     { border-left-color: #f59e0b; }
    .svc-card.status-inprogress  { border-left-color: #3b82f6; }
    .svc-card.status-underreview { border-left-color: #7c3aed; }
    .svc-card.status-completed   { border-left-color: #22c55e; }
    .card-header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
    .card-info { flex: 1; min-width: 0; }
    .card-customer { font-size: 0.95rem; font-weight: 600; color: #1e293b; }
    .card-site { font-size: 0.82rem; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-desc { font-size: 0.85rem; color: #334155; margin-top: 6px; line-height: 1.45; }
    .card-date { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; }
    .card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
    .card-overdue-tag { background: #fee2e2; color: #dc2626; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 5px; }
    .card-priority-urgent { background: #fee2e2; color: #dc2626; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 5px; }
    .card-priority-low    { background: #f1f5f9; color: #94a3b8;  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 5px; }
    .svc-card.urgent-card { box-shadow: 0 0 0 2px #fca5a5; }
    .card-status-select { border: 1px solid #e2e8f0; border-radius: 7px; padding: 5px 8px; font-size: 0.78rem; font-family: inherit; color: #334155; background: #f8fafc; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color 0.15s; }
    .card-status-select:focus { border-color: #3b82f6; }
    .card-footer { padding: 0 18px 14px; }
    .card-tasks-toggle { background: none; border: none; color: #64748b; font-size: 0.78rem; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 4px 0; }
    .card-tasks-toggle:hover { color: #1e293b; }
    .card-tasks-toggle .arrow { font-size: 0.5rem; transition: transform 0.15s; }
    .card-tasks-toggle .arrow.open { transform: rotate(90deg); }
    .card-tasks-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
    .card-task { display: flex; align-items: center; gap: 8px; }
    .card-task { flex-direction: column; align-items: stretch; gap: 0; }
    .card-task-main { display: flex; align-items: center; gap: 8px; }
    .card-task input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; accent-color: #3b82f6; flex-shrink: 0; }
    .card-task label { font-size: 0.82rem; color: #334155; cursor: pointer; flex: 1; }
    .card-task label.done { text-decoration: line-through; color: #94a3b8; }
    .card-notes-btn { background: none; border: 1px solid #e2e8f0; border-radius: 5px; cursor: pointer; font-size: 0.68rem; color: #94a3b8; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; transition: all 0.1s; }
    .card-notes-btn:hover { border-color: #7c3aed; color: #7c3aed; background: #f5f3ff; }
    .card-notes-btn.has-notes { border-color: #c4b5fd; color: #7c3aed; background: #f5f3ff; }
    .card-notes-area { margin-top: 6px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
    .card-notes-textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; font-family: inherit; color: #334155; outline: none; resize: vertical; min-height: 72px; transition: border-color 0.15s; line-height: 1.5; }
    .card-notes-textarea:focus { border-color: #7c3aed; }
    .card-notes-textarea::placeholder { color: #cbd5e1; }
    .notes-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .notes-save-btn { background: #7c3aed; color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
    .notes-save-btn:hover { opacity: 0.85; }
    .notes-saved-msg { font-size: 0.72rem; color: #22c55e; }
    .tech-empty { color: #94a3b8; font-size: 0.85rem; font-style: italic; padding: 12px 0; }
    .send-review-btn { background: #7c3aed; color: #fff; border: none; border-radius: 7px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.15s; }
    .send-review-btn:hover { opacity: 0.85; }
    .card-status-badge { font-size: 0.75rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; flex-shrink: 0; }
    .badge-underreview { background: #ede9fe; color: #7c3aed; }
    .badge-completed   { background: #dcfce7; color: #16a34a; }

    /* ── Customer search ── */
    .search-bar { padding: 8px 12px 4px; flex-shrink: 0; }
    .search-bar input { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; color: #1e293b; font-family: inherit; outline: none; transition: border-color 0.15s; }
    .search-bar input:focus { border-color: #3b82f6; }
    .search-bar input::placeholder { color: #cbd5e1; }

    /* ── Schedule page ── */
    #schedule-page { flex-direction: column; overflow: hidden; }
    .schedule-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 20px 24px 16px; gap: 14px; }
    .schedule-top { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
    .week-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .week-nav-btn { background: none; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 11px; font-size: 0.82rem; color: #64748b; cursor: pointer; transition: background 0.1s; }
    .week-nav-btn:hover { background: #f1f5f9; }
    .week-label { font-size: 0.9rem; font-weight: 600; color: #1e293b; min-width: 180px; text-align: center; }
    .tech-filter-strip { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
    .tech-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; font-size: 0.75rem; font-weight: 500; cursor: pointer; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #64748b; transition: all 0.12s; }
    .tech-pill:hover { border-color: #94a3b8; color: #334155; }
    .tech-pill.active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
    .workload-strip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 14px; background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; flex-shrink: 0; }
    .workload-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #334155; }
    .workload-dot { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; }
    .workload-label { font-weight: 500; }
    .workload-count { background: #eff6ff; color: #3b82f6; font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
    .workload-urgent { background: #fee2e2; color: #dc2626; font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
    .workload-divider { color: #e2e8f0; user-select: none; }
    .cal-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; overflow-y: auto; min-height: 0; }
    .cal-day { background: #fff; border-radius: 10px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; min-height: 140px; overflow: hidden; }
    .cal-day.today { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
    .cal-day-header { padding: 8px 10px 5px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; }
    .cal-day-name { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; }
    .cal-day-num { font-size: 1.05rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
    .cal-day.today .cal-day-num { color: #3b82f6; }
    .cal-events { flex: 1; padding: 5px 5px 7px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
    .cal-event { border-radius: 6px; padding: 5px 7px; font-size: 0.72rem; line-height: 1.35; border-left: 3px solid transparent; }
    .cal-event-pending     { border-left-color: #f59e0b; background: #fffbeb; }
    .cal-event-inprogress  { border-left-color: #3b82f6; background: #eff6ff; }
    .cal-event-underreview { border-left-color: #7c3aed; background: #f5f3ff; }
    .cal-event-completed   { border-left-color: #22c55e; background: #f0fdf4; opacity: 0.7; }
    .cal-event-customer { font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cal-event-desc { color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cal-event-tech { color: #94a3b8; font-size: 0.67rem; margin-top: 1px; }
    .cal-empty { color: #d1d5db; font-size: 0.74rem; padding: 4px 2px; }
    /* View toggle */
    .view-toggle { display: flex; border: 1px solid #e2e8f0; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
    .view-toggle-btn { background: none; border: none; padding: 5px 13px; font-size: 0.8rem; font-weight: 500; color: #64748b; cursor: pointer; transition: background 0.1s; }
    .view-toggle-btn.active { background: #1a1a2e; color: #fff; }
    .view-toggle-btn:hover:not(.active) { background: #f1f5f9; }
    /* Month view */
    .cal-month-hdr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; flex-shrink: 0; }
    .cal-month-hdr > span { text-align: center; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; padding: 2px 0 4px; }
    .cal-grid-month .cal-day { min-height: 90px; }
    .cal-day.other-month { background: #fafafa; }
    .cal-day.other-month .cal-day-num { color: #cbd5e1; }
    .cal-event-compact { padding: 2px 5px; font-size: 0.69rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
    .cal-more { font-size: 0.68rem; color: #94a3b8; padding: 1px 5px; }
    .cal-event { cursor: pointer; }
    .cal-event:hover { filter: brightness(0.95); }

    /* Week view — row layout */
    .cal-grid-week { grid-template-columns: 1fr; overflow-y: auto; }
    .cal-grid-week .cal-day { flex-direction: row; min-height: unset; }
    .cal-grid-week .cal-day-header { width: 72px; flex-shrink: 0; border-bottom: none; border-right: 1px solid #f1f5f9; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 8px; }
    .cal-grid-week .cal-events { flex-direction: row; flex-wrap: wrap; align-content: flex-start; overflow-y: visible; padding: 8px; gap: 6px; }
    .cal-grid-week .cal-event { width: 200px; flex-shrink: 0; }
    .cal-grid-week .cal-empty { display: flex; align-items: center; }

    /* ── Service detail modal ── */
    .service-detail-modal { width: 520px; max-width: 95vw; max-height: 85vh; overflow-y: auto; gap: 0; padding: 0; }
    .sd-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid #f1f5f9; }
    .sd-header-left { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
    .sd-customer { font-size: 1.08rem; font-weight: 700; color: #1e293b; }
    .sd-badges { display: flex; gap: 6px; flex-wrap: wrap; }
    .sd-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; }
    .sd-badge-pending     { background: #fef3c7; color: #92400e; }
    .sd-badge-inprogress  { background: #eff6ff; color: #1d4ed8; }
    .sd-badge-underreview { background: #ede9fe; color: #7c3aed; }
    .sd-badge-completed   { background: #dcfce7; color: #16a34a; }
    .sd-badge-urgent      { background: #fee2e2; color: #dc2626; }
    .sd-badge-low         { background: #f1f5f9; color: #64748b; }
    .sd-close { background: none; border: none; color: #94a3b8; font-size: 1rem; cursor: pointer; padding: 3px 7px; border-radius: 5px; line-height: 1; flex-shrink: 0; }
    .sd-close:hover { background: #f1f5f9; color: #334155; }
    .sd-body { padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
    .sd-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #334155; line-height: 1.45; }
    .sd-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.9rem; }
    .sd-tasks-section { border-top: 1px solid #f1f5f9; padding-top: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
    .sd-tasks-header { font-size: 0.71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; display: flex; align-items: center; gap: 8px; }
    .sd-task { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; border-bottom: 1px solid #f8fafc; }
    .sd-task:last-child { border-bottom: none; }
    .sd-task-icon { font-size: 0.85rem; flex-shrink: 0; line-height: 1.4; }
    .sd-task-body { flex: 1; min-width: 0; }
    .sd-task-title { font-size: 0.83rem; color: #334155; }
    .sd-task-title.done { text-decoration: line-through; color: #94a3b8; }
    .sd-task-notes { font-size: 0.76rem; color: #7c3aed; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
    .sd-footer { padding: 12px 22px 16px; border-top: 1px solid #f1f5f9; display: flex; justify-content: flex-end; }
    .sd-complete-btn { background: #16a34a; color: #fff; border: none; border-radius: 7px; padding: 8px 18px; font-size: 0.84rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
    .sd-complete-btn:hover:not(:disabled) { background: #15803d; }
    .sd-complete-btn:disabled { opacity: 0.6; cursor: default; }
    .sd-delete-btn { background: none; color: #dc2626; border: 1px solid #fecaca; border-radius: 7px; padding: 8px 14px; font-size: 0.84rem; font-weight: 500; cursor: pointer; }
    .sd-delete-btn:hover { background: #fef2f2; }
    .sd-tech-select { flex: 1; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 8px; font-size: 0.84rem; color: #334155; background: #fff; cursor: pointer; min-width: 0; }
    .sd-tech-select:focus { outline: none; border-color: #6366f1; }

    /* ── Site detail modal ── */
    .site-detail-modal { width: 540px; max-width: 95vw; max-height: 85vh; overflow-y: auto; gap: 0; padding: 0; }
    .site-svc-list { display: flex; flex-direction: column; gap: 6px; }
    .site-svc-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: #f8fafc; cursor: pointer; font-size: 0.83rem; color: #334155; border: 1px solid #f1f5f9; }
    .site-svc-row:hover { background: #f1f5f9; border-color: #e2e8f0; }
    .site-svc-desc { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .site-svc-meta { font-size: 0.76rem; color: #94a3b8; white-space: nowrap; }
    .tmpl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: #f8fafc; border: 1px solid #f1f5f9; margin-bottom: 6px; }
    .tmpl-row-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .tmpl-row-desc { font-size: 0.83rem; font-weight: 500; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tmpl-row-meta { font-size: 0.74rem; color: #94a3b8; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .tmpl-recur-badge { background: #ede9fe; color: #6d28d9; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; text-transform: capitalize; }
    .tmpl-status-badge { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
    .tmpl-active { background: #dcfce7; color: #16a34a; }
    .tmpl-inactive { background: #fee2e2; color: #dc2626; }

    /* ── Toast notifications ── */
    .toast { position: fixed; top: 20px; right: 20px; padding: 10px 18px; border-radius: 8px; font-size: 0.84rem; font-weight: 600; color: #fff; z-index: 9999; opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast-success { background: #16a34a; }
    .toast-error   { background: #dc2626; }

    /* ── FAB button ── */
    .fab-btn { position:fixed; bottom:24px; right:24px; width:52px; height:52px; border-radius:50%; background:#3b82f6; color:#fff; border:none; font-size:1.4rem; cursor:pointer; box-shadow:0 4px 14px rgba(59,130,246,0.45); z-index:200; transition:transform 0.15s, background 0.15s; display:flex; align-items:center; justify-content:center; }
    .fab-btn:hover { transform:scale(1.08); }
    .fab-btn.open { background:#1a1a2e; }

    /* ── FAB popup ── */
    .fab-popup { display:none; position:fixed; bottom:84px; right:24px; width:340px; height:440px; background:#fff; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,0.18); z-index:199; flex-direction:column; overflow:hidden; }
    .fab-popup.open { display:flex; }
    .fab-popup-header { padding:12px 16px; background:#1a1a2e; color:#fff; display:flex; align-items:center; justify-content:space-between; font-size:0.88rem; font-weight:600; flex-shrink:0; }
    .fab-new-chat { background:rgba(255,255,255,0.12); border:none; color:#fff; font-size:0.75rem; font-weight:500; padding:4px 10px; border-radius:6px; cursor:pointer; transition:background 0.15s; }
    .fab-new-chat:hover { background:rgba(255,255,255,0.22); }
    .fab-close { background:none; border:none; color:rgba(255,255,255,0.7); cursor:pointer; font-size:1rem; line-height:1; padding:2px 4px; }
    .fab-close:hover { color:#fff; }
    .fab-messages { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
    .fab-input-bar { padding:10px 12px; border-top:1px solid #e2e8f0; display:flex; gap:8px; align-items:flex-end; flex-shrink:0; }
    .fab-input-bar textarea { flex:1; resize:none; border:1px solid #e2e8f0; border-radius:10px; padding:8px 12px; font-size:0.85rem; font-family:inherit; color:#1e293b; outline:none; max-height:80px; overflow-y:auto; line-height:1.5; transition:border-color 0.15s; }
    .fab-input-bar textarea:focus { border-color:#3b82f6; }
    #fab-send-btn { background:#3b82f6; color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:0.85rem; font-weight:600; cursor:pointer; height:36px; white-space:nowrap; }
    #fab-send-btn:disabled { opacity:0.5; cursor:not-allowed; }
    #fab-send-btn:hover:not(:disabled) { background:#2563eb; }

    /* ── Results view ── */
    .results-header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #e2e8f0; background:#fff; flex-shrink:0; flex-wrap:wrap; }
    .results-title { font-size:0.95rem; font-weight:600; color:#1e293b; flex:1; min-width:120px; }
    .results-view-tabs { display:flex; gap:4px; }
    .results-tab { background:#f1f5f9; color:#64748b; border:none; border-radius:6px; padding:5px 12px; font-size:0.78rem; cursor:pointer; transition:all 0.1s; }
    .results-tab:hover { background:#e2e8f0; }
    .results-tab.active { background:#3b82f6; color:#fff; }
    .results-clear { background:none; border:1px solid #e2e8f0; color:#94a3b8; border-radius:6px; padding:5px 12px; font-size:0.78rem; cursor:pointer; white-space:nowrap; }
    .results-clear:hover { border-color:#94a3b8; color:#334155; }

    /* ── Kanban board ── */
    .kanban-wrap { display:flex; flex-direction:column; height:100%; }
    .kanban-toolbar { display:flex; align-items:center; justify-content:flex-end; padding:10px 16px 4px; gap:8px; flex-shrink:0; }
    .covisit-banner { margin:0 16px 4px; background:#fffbeb; border:1px solid #fde68a; border-radius:10px; overflow:hidden; flex-shrink:0; }
    .covisit-banner-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; cursor:pointer; user-select:none; }
    .covisit-banner-title { font-size:0.76rem; font-weight:700; color:#92400e; display:flex; align-items:center; gap:6px; }
    .covisit-banner-toggle { font-size:0.72rem; color:#b45309; background:none; border:none; cursor:pointer; font-weight:600; }
    .covisit-banner-list { border-top:1px solid #fde68a; padding:6px 12px 10px; display:flex; flex-direction:column; gap:6px; }
    .covisit-item { font-size:0.78rem; color:#78350f; display:flex; align-items:baseline; gap:6px; }
    .covisit-item-site { font-weight:700; }
    .covisit-item-techs { color:#92400e; }
    .card-covisit { display:flex; align-items:center; gap:5px; font-size:0.72rem; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:5px; padding:3px 7px; margin-top:4px; }
    .kanban-toggle-btn { background:#f1f5f9; border:1px solid #e2e8f0; color:#475569; border-radius:6px; padding:5px 12px; font-size:0.76rem; font-weight:600; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
    .kanban-toggle-btn:hover { background:#e2e8f0; border-color:#cbd5e1; }
    .kanban-toggle-btn.active { background:#dcfce7; border-color:#86efac; color:#166534; }
    .kanban-board { display:flex; gap:16px; padding:8px 16px 16px; flex:1; overflow-x:auto; align-items:stretch; }
    .kanban-col { background:#f8fafc; border-radius:12px; min-width:272px; flex:1; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
    .kanban-col-accent { height:4px; flex-shrink:0; }
    .kanban-col-accent.kca-pending    { background:#94a3b8; }
    .kanban-col-accent.kca-inprogress { background:#3b82f6; }
    .kanban-col-accent.kca-underreview{ background:#f59e0b; }
    .kanban-col-accent.kca-completed  { background:#22c55e; }
    .kanban-col-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; }
    .kanban-col-header-label { font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.07em; color:#334155; }
    .kanban-count { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:99px; }
    .kanban-count.kcnt-pending    { background:#e2e8f0; color:#475569; }
    .kanban-count.kcnt-inprogress { background:#dbeafe; color:#1d4ed8; }
    .kanban-count.kcnt-underreview{ background:#fef3c7; color:#92400e; }
    .kanban-count.kcnt-completed  { background:#dcfce7; color:#166534; }
    .kanban-col-body { display:flex; flex-direction:column; gap:8px; padding:4px 10px 12px; min-height:48px; }
    .kanban-empty { text-align:center; padding:20px 8px; color:#cbd5e1; font-size:0.78rem; font-style:italic; }
    .kanban-card { background:#fff; border-radius:8px; padding:11px 13px; box-shadow:0 1px 3px rgba(0,0,0,0.07); font-size:0.82rem; display:flex; flex-direction:column; gap:4px; border-left:4px solid #e2e8f0; cursor:pointer; transition:box-shadow 0.15s, transform 0.15s; }
    .kanban-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.11); transform:translateY(-2px); }
    .kanban-card.kc-pending    { border-left-color:#94a3b8; }
    .kanban-card.kc-inprogress { border-left-color:#3b82f6; }
    .kanban-card.kc-underreview{ border-left-color:#f59e0b; }
    .kanban-card.kc-completed  { border-left-color:#22c55e; }
    .kanban-card-title { font-weight:600; color:#0f172a; font-size:0.84rem; line-height:1.3; }
    .kanban-card-customer { font-size:0.76rem; color:#475569; font-weight:500; }
    .kanban-card-location { font-size:0.72rem; color:#64748b; margin-top:2px; }
    .kanban-card-row { display:flex; align-items:center; justify-content:space-between; font-size:0.72rem; color:#94a3b8; margin-top:2px; }
    .kanban-card-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; }
    @media (max-width:768px) {
      .kanban-board { flex-direction:column; overflow-x:unset; }
      .kanban-col { min-width:unset; flex:unset; width:100%; }
    }

    /* ── Results table ── */
    .results-table-wrap { padding:16px; }
    .results-table { width:100%; border-collapse:collapse; font-size:0.84rem; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
    .results-table th { background:#f8fafc; padding:9px 14px; text-align:left; font-size:0.71rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#64748b; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
    .results-table td { padding:10px 14px; color:#334155; border-bottom:1px solid #f1f5f9; }
    .results-table tr:last-child td { border-bottom:none; }
    .results-table tr:hover td { background:#f8fafc; }

    /* ── Results calendar ── */


    /* ── Mobile tab bar (hidden on desktop) ── */
    .mobile-tab-bar { display: none; }
    .tab-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; cursor: pointer; font-size: 0.72rem; color: #94a3b8; padding: 6px 0; transition: color 0.15s; }
    .tab-btn.active { color: #3b82f6; font-weight: 600; }
    .tab-btn span:first-child { font-size: 1.1rem; }

    /* ── Tech-mode class replaces inline display:none/flex ── */
    #main-page.tech-mode .sidebar       { display: none; }
    #main-page.tech-mode #chat-panel    { display: none; }
    #main-page.tech-mode #chat-disabled { display: none !important; }
    #main-page.tech-mode #tech-dashboard { display: flex; }

    /* ══════════════════════════════════════════
       RESPONSIVE — tablet  ≤ 768px
       ══════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* Header */
      header { padding: 0 12px; gap: 8px; }
      header h1 { font-size: 0.9rem; }
      .user-pill { display: none; }
      .signout-btn { padding: 4px 8px; font-size: 0.72rem; }
      .hamburger-btn { display: flex; align-items: center; }

      /* Nav becomes a fixed dropdown on mobile */
      header nav {
        position: fixed;
        top: 52px;
        left: 0; right: 0;
        display: none;
        flex-direction: column;
        background: #1e293b;
        padding: 6px 0 10px;
        z-index: 300;
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        border-top: 1px solid rgba(255,255,255,0.07);
      }
      header nav.open { display: flex; }
      header nav .nav-btn {
        padding: 13px 20px;
        border-radius: 0;
        font-size: 0.9rem;
        text-align: left;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.04);
      }

      /* Overlay to catch outside taps */
      #nav-overlay {
        display: none;
        position: fixed;
        inset: 52px 0 0 0;
        z-index: 299;
      }
      #nav-overlay.open { display: block; }

      /* Main layout */
      #main-page { flex-direction: column; }

      #results-view { width: 100%; }

      /* Tech mode */
      #main-page.tech-mode #tech-dashboard { display: flex; }

      /* Schedule: stacked days */
      .schedule-wrap { padding: 12px 12px 10px; }
      .schedule-top { gap: 8px; }
      .week-label { min-width: 130px; font-size: 0.82rem; }
      .cal-scroll-wrapper { flex: 1; overflow-y: auto; min-height: 0; }
      .cal-scroll-inner { display: flex; flex-direction: column; }
      .cal-grid { grid-template-columns: 1fr !important; overflow-y: visible; gap: 10px; }
      .cal-grid .cal-day { min-height: unset; }
      .cal-month-hdr { display: none !important; }
      .cal-grid-month { grid-template-columns: repeat(3, 1fr) !important; }

      /* Tech filter pills: horizontally scrollable */
      .tech-filter-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      .tech-filter-strip::-webkit-scrollbar { display: none; }

      /* Users table: horizontal scroll */
      .users-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
      .users-table { min-width: 520px; border-radius: 0; box-shadow: none; }
      .page-body { padding: 16px; }

      /* Modals: fluid */
      .modal { width: 92vw; max-height: 88vh; overflow-y: auto; padding: 18px 16px; }
      .service-detail-modal { width: 92vw; max-width: 92vw; }
      .field-row { flex-direction: column; gap: 10px; }

      /* Touch targets */
      .icon-btn { padding: 6px 8px; font-size: 0.85rem; }
      .task-row input[type="checkbox"] { width: 18px; height: 18px; }
      .tbl-btn { padding: 7px 13px; }
      .week-nav-btn { padding: 7px 13px; }

      /* Chat */
      .input-bar { padding: 10px 12px; }
      .messages { padding: 16px 14px; }

      /* Login */
      .login-card { width: calc(100vw - 32px); max-width: 400px; padding: 28px 20px; }

      /* Tech dashboard */
      #tech-dashboard { padding: 16px 12px; }

      /* FAB */
      .fab-btn { bottom: 24px; right: 16px; }
      .fab-btn.open { display: none; }
      .fab-popup { width: calc(100vw - 32px); right: 16px; bottom: 130px; height: 380px; }
    }

    /* ══════════════════════════════════════════
       RESPONSIVE — phone  ≤ 480px
       ══════════════════════════════════════════ */
    @media (max-width: 480px) {

      /* Header */
      header { padding: 0 10px; gap: 6px; }
      header h1 { font-size: 0.82rem; }
      #header-role-badge { display: none; }

      /* Modals: bottom sheet */
      .modal-backdrop.open { align-items: flex-end; }
      .modal { width: 100vw; max-width: 100vw; border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 90vh; }
      .service-detail-modal { width: 100vw; max-width: 100vw; }
      .modal-actions { flex-direction: column-reverse; gap: 8px; }
      .btn-cancel, .btn-save { width: 100%; text-align: center; padding: 11px 16px; }

      /* Schedule controls */
      .schedule-top { flex-wrap: wrap; }
      .week-nav { gap: 4px; }
      .week-nav-btn { padding: 5px 9px; font-size: 0.75rem; }
      .week-label { font-size: 0.78rem; min-width: 110px; }
      .view-toggle-btn { padding: 5px 10px; font-size: 0.74rem; }
      .cal-day { min-height: unset; }

      /* Touch targets */
      .icon-btn { padding: 8px 10px; }
      .login-btn { padding: 14px; font-size: 0.95rem; }
      .login-field input { padding: 12px; font-size: 0.95rem; }
      .fab-popup { width: 100vw; right: 0; border-radius: 16px 16px 0 0; bottom: 0; height: 70vh; }
    }