*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --green: #33c47a;
      --green-dark: #25a060;
      --green-deeper: #1a4d35;
      --green-bg: #f0faf4;
      --gray-bg: #f5f7f6;
      --border: #e5ebe7;
      --text: #111;
      --text-muted: #6b7c72;
      --sidebar-w: 248px;
      --header-h: 60px;
      --bottom-nav-h: 66px;
    }

    body { font-family: 'Inter', -apple-system, sans-serif; background: var(--gray-bg); color: var(--text); height: 100dvh; overflow: hidden; }
    /* Auth gate */
    #authGate { position: fixed; inset: 0; z-index: 1000; background: var(--gray-bg); display: none; align-items: center; justify-content: center; padding: 24px; }
    #authGate.show { display: flex; }
    /* Sync failure banner */
    #syncFailBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: #991b1b; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 40px; display: none; align-items: center; justify-content: center; gap: 12px; text-align: center; }
    #syncFailBanner button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-weight: 700; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; }
    .auth-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 36px 32px; width: 100%; max-width: 400px; box-shadow: 0 8px 40px rgba(0,0,0,0.08); }
    .auth-logo { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 20px; }
    #authGate h1 { font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 4px; color: var(--text); }
    .auth-sub { text-align: center; color: var(--text-muted); font-size: 14px; margin: 0 0 24px; }
    .auth-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 9px; font-size: 16px; margin-bottom: 12px; outline: none; font-family: inherit; color: var(--text); background: #fafbfa; }
    .auth-input:focus { border-color: var(--green); background: #fff; }
    .auth-btn { width: 100%; padding: 13px; background: var(--green); color: #fff; border: none; border-radius: 9px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.12s; }
    .auth-btn:hover { background: var(--green-dark); }
    .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .auth-err { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.45; }
    .auth-toggle { text-align: center; margin-top: 18px; font-size: 13px; color: var(--text-muted); }
    .auth-toggle a { color: var(--green); font-weight: 600; cursor: pointer; margin-left: 4px; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; }

    /* ─── LAYOUT ─── */
    .app { display: flex; height: 100dvh; }

    /* ─── SIDEBAR ─── */
    .sidebar { width: var(--sidebar-w); background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; height: 100dvh; }
    .sidebar-logo { padding: 22px 20px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
    .nav-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); padding: 14px 20px 5px; }
    .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 14px; font-weight: 500; color: #4a5e52; cursor: pointer; transition: all 0.12s; border-left: 3px solid transparent; user-select: none; margin: 1px 0; }
    .nav-item:hover { background: var(--green-bg); color: var(--green); }
    .nav-item.active { border-left-color: var(--green); background: var(--green-bg); color: var(--green); font-weight: 600; }
    .nav-item svg { flex-shrink: 0; }
    .nav-badge { margin-left: auto; background: var(--green); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; min-width: 20px; text-align: center; }
    .addon-tag { margin-left: auto; font-size: 10px; background: var(--green-bg); color: var(--green); padding: 2px 8px; border-radius: 20px; font-weight: 600; }
    .sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); flex-shrink: 0; }
    .user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background 0.12s; }
    .user-card:hover { background: var(--green-bg); }
    .user-avatar { width: 34px; height: 34px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .user-name { font-size: 13px; font-weight: 600; color: var(--text); }
    .user-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .settings-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0; cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 500; transition: color 0.12s; }
    .settings-row:hover { color: var(--green); }

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

    /* ─── HEADERS ─── */
    .d-header { height: var(--header-h); background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 16px; flex-shrink: 0; }
    .d-header-title { font-size: 16px; font-weight: 700; flex: 1; }
    .m-header { display: none; height: var(--header-h); background: #fff; border-bottom: 1px solid var(--border); align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; }
    .m-header-title { font-size: 17px; font-weight: 700; flex: 1; }

    /* ─── BUTTONS ─── */
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.12s; white-space: nowrap; }
    .btn-primary { background: var(--green); color: #fff; }
    .btn-primary:hover { background: var(--green-dark); }
    .btn-ghost { background: transparent; color: #555; border: 1px solid var(--border); }
    .btn-ghost:hover { background: var(--green-bg); color: var(--green); border-color: var(--green); }
    .btn-outline { background: transparent; color: var(--green); border: 1px solid var(--green); }
    .btn-outline:hover { background: var(--green-bg); }
    .btn-danger { background: #fee2e2; color: #b91c1c; border: none; }
    .btn-danger:hover { background: #fecaca; }
    .btn-sm { padding: 6px 12px; font-size: 12px; }
    .icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer; color: #777; transition: all 0.12s; position: relative; flex-shrink: 0; }
    .icon-btn:hover { background: var(--green-bg); color: var(--green); }
    .notif-dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; background: var(--green); border-radius: 50%; border: 1.5px solid #fff; }

    /* ─── CONTENT ─── */
    .content { flex: 1; overflow-y: auto; padding: 28px; -webkit-overflow-scrolling: touch; }
    .section { display: none; }
    .section.active { display: block; }
    .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
    .page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
    .page-sub { font-size: 14px; color: var(--text-muted); margin-top: 3px; }
    .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    /* ─── STAT CARDS ─── */
    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
    .stat-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
    .stat-card-accent { border-left: 3px solid var(--green); }
    .stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
    .stat-value { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1; }
    .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
    .stat-up { color: var(--green); font-weight: 600; }
    .stat-warn { color: #d97706; font-weight: 600; }

    /* ─── CARDS ─── */
    .card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
    .card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    /* Settings section nav (sticky chips that scroll to each section) */
    .settings-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 12px; margin-bottom: 8px; background: var(--gray-bg); border-bottom: 1px solid var(--border); scrollbar-width: none; }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav-chip { flex-shrink: 0; padding: 7px 13px; border-radius: 20px; background: #fff; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
    .settings-nav-chip:hover { border-color: var(--green); color: var(--green-dark); }
    .settings-nav-chip.active { background: var(--green); border-color: var(--green); color: #fff; }
    #s-settings .card { scroll-margin-top: 70px; }
    .card-title { font-size: 14px; font-weight: 700; }
    .card-body { padding: 18px; }

    /* ─── EMPTY STATE ─── */
    .empty { text-align: center; padding: 48px 24px; }
    .empty-icon { width: 52px; height: 52px; background: var(--green-bg); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--green); }
    .empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
    .empty-sub { font-size: 13px; color: var(--text-muted); max-width: 280px; margin: 0 auto 20px; line-height: 1.6; }

    /* ─── ACTIVITY ─── */
    .activity-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border); }
    .activity-item:last-child { border-bottom: none; padding-bottom: 0; }
    .activity-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .activity-dot.dot-blue { background: #eff6ff; color: #3b82f6; }
    .activity-dot.dot-amber { background: #fffbeb; color: #d97706; }
    .activity-dot.dot-red { background: #fff5f5; color: #dc2626; }
    .activity-text { font-size: 13px; color: var(--text); line-height: 1.5; }
    .activity-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .dash-main { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
    .relay-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
    .relay-row:last-child { border-bottom: none; }
    .relay-row-label { color: var(--text-muted); }
    .relay-row-val { font-weight: 600; }

    /* ─── INTEL WIDGET ─── */
    .intel-empty { text-align:center; padding: 28px 20px; color: var(--text-muted); font-size: 13px; }
    .intel-card { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
    .intel-card:last-child { border-bottom: none; padding-bottom: 0; }
    .intel-reason { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; }
    .intel-btn-takeover { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; font-family: inherit; }
    .intel-btn-takeover:hover { border-color: var(--green); color: var(--green-dark); }
    .intel-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
    .intel-icon .ic { width: 1.3em; height: 1.3em; }
    .intel-icon.type-contact { background: #eff6ff; }
    .intel-icon.type-stage { background: var(--green-bg); }
    .intel-icon.type-nudge { background: #fffbeb; }
    .intel-icon.type-sentiment { background: #fff5f5; }
    .intel-icon.type-doc { background: #f5f3ff; }
    .intel-body { flex: 1; min-width: 0; }
    .intel-msg { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 8px; }
    .intel-time { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
    .intel-actions { display: flex; gap: 6px; }
    .intel-btn-accept { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: none; cursor: pointer; background: var(--green); color: #fff; }
    .intel-btn-accept:hover { background: var(--green-dark); }
    .intel-btn-dismiss { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 5px; border: 1px solid var(--border); cursor: pointer; background: transparent; color: var(--text-muted); }
    .intel-btn-dismiss:hover { background: var(--gray-bg); }
    .intel-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 20px; margin-bottom: 5px; }
    .intel-badge.type-contact { background: #dbeafe; color: #1d4ed8; }
    .intel-badge.type-stage { background: #dcfce7; color: #166534; }
    .intel-badge.type-nudge { background: #fef3c7; color: #92400e; }
    .intel-badge.type-sentiment { background: #fee2e2; color: #991b1b; }
    .intel-badge.type-doc { background: #ede9fe; color: #5b21b6; }

    /* ─── PIPELINE SNAPSHOT ─── */
    .snap-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
    .snap-row:last-child { border-bottom: none; }
    .snap-label { flex: 1; color: var(--text-muted); }
    .snap-count { font-weight: 700; min-width: 24px; text-align: right; }
    .snap-value { font-size: 12px; color: var(--green); font-weight: 600; min-width: 64px; text-align: right; }
    .snap-bar-wrap { width: 60px; height: 5px; background: var(--gray-bg); border-radius: 3px; overflow: hidden; }
    .snap-bar { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.4s; }

    /* ─── QUICK ACTIONS ─── */
    .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .quick-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 10px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text); transition: all 0.12s; }
    .quick-btn:hover { border-color: var(--green); background: var(--green-bg); color: var(--green); }
    .quick-btn svg { opacity: 0.7; }

    /* ─── PIPELINE ─── */
    .pipeline-board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; }
    .pipeline-col { min-width: 210px; flex-shrink: 0; }
    .pipeline-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .pipeline-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .pipeline-count { font-size: 11px; background: var(--gray-bg); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; color: var(--text-muted); }
    .pipeline-empty { min-height: 64px; border: 1.5px dashed var(--border); border-radius: 10px; background: var(--gray-bg); }
    .pipeline-add { border: 1.5px dashed var(--border); border-radius: 10px; padding: 13px; text-align: center; font-size: 13px; color: var(--text-muted); cursor: pointer; transition: all 0.12s; background: var(--gray-bg); }
    .pipeline-add:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }

    /* ─── FILTER TABS ─── */
    .filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .filter-tabs { display: flex; gap: 2px; background: var(--gray-bg); border-radius: 9px; padding: 3px; border: 1px solid var(--border); }
    .filter-tab { padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-muted); transition: all 0.12s; user-select: none; }
    .filter-tab.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

    /* ─── SEARCH ─── */
    .search-bar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; flex: 1; max-width: 280px; }
    .search-bar input { border: none; outline: none; font-size: 14px; font-family: inherit; color: var(--text); background: transparent; width: 100%; }
    .search-bar input::placeholder { color: var(--text-muted); }
    .search-bar svg { flex-shrink: 0; color: var(--text-muted); }

    /* ─── CONTACT TABLE ─── */
    .contact-table { width: 100%; border-collapse: collapse; }
    .contact-table th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); background: var(--gray-bg); white-space: nowrap; }
    .contact-table td { padding: 13px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
    .contact-table tr:last-child td { border-bottom: none; }
    .contact-table tbody tr { cursor: pointer; transition: background 0.1s; }
    .contact-table tbody tr:hover { background: var(--green-bg); }
    .contact-name { font-weight: 600; color: var(--text); }
    .contact-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* ─── BADGES ─── */
    .badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
    .badge-lead { background: #fff8e6; color: #b45309; }
    .badge-client { background: var(--green-bg); color: var(--green-dark); }
    .badge-past { background: var(--gray-bg); color: var(--text-muted); }

    /* ─── CONTACT MOBILE CARDS ─── */
    .contact-cards { display: none; flex-direction: column; gap: 10px; }
    .contact-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.12s; }
    .contact-card:hover { border-color: var(--green); box-shadow: 0 3px 12px rgba(51,196,122,0.1); }
    .contact-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
    .contact-card-name { font-size: 14px; font-weight: 600; }
    .contact-card-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

    /* ─── CENTER MODAL PANEL ─── */
    .panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; display: none; align-items: center; justify-content: center; padding: 16px; }
    .panel-overlay.open { display: flex; }
    .panel { width: 100%; max-width: 580px; max-height: 90dvh; background: #fff; border-radius: 14px; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.18); overflow: hidden; }
    .panel-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .panel-title { font-size: 16px; font-weight: 700; }
    .panel-body { flex: 1; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }
    .panel-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; flex-shrink: 0; }

    /* ─── MODAL ─── */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 400; display: none; align-items: center; justify-content: center; padding: 16px; }
    .modal-overlay.open { display: flex; }
    .modal { background: #fff; border-radius: 14px; width: 100%; max-width: 540px; max-height: 90dvh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0,0,0,0.18); }
    #genericModalBody { padding: 24px; overflow-y: auto; }
    .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .modal-title { font-size: 16px; font-weight: 700; }
    .modal-body { flex: 1; overflow-y: auto; padding: 24px; }
    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

    /* ─── FORMS ─── */
    .form-group { margin-bottom: 18px; }
    .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
    .form-label span { color: var(--green); margin-left: 2px; }
    .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); background: #fff; transition: border-color 0.12s, box-shadow 0.12s; outline: none; }
    .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(51,196,122,0.12); }
    .form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-hint { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

    /* ─── DROP ZONE ─── */
    .drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.15s; }
    .drop-zone:hover, .drop-zone.drag-over { border-color: var(--green); background: var(--green-bg); }
    .drop-zone input { display: none; }
    .drop-zone-icon { width: 48px; height: 48px; background: var(--green-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: var(--green); }

    /* ─── CSV PREVIEW TABLE ─── */
    .csv-preview { overflow-x: auto; margin-top: 20px; border: 1px solid var(--border); border-radius: 10px; }
    .csv-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .csv-preview th { padding: 8px 12px; background: var(--gray-bg); border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text-muted); text-align: left; white-space: nowrap; }
    .csv-preview td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
    .csv-preview tr:last-child td { border-bottom: none; }

    /* ─── KANBAN ─── */
    .kanban-wrap { overflow-x: auto; padding-bottom: 8px; }
    .kanban-board { display: flex; gap: 14px; min-width: max-content; padding: 2px; }
    .kanban-col { width: 224px; flex-shrink: 0; display: flex; flex-direction: column; }
    .kanban-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; }
    .kanban-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .kanban-count { font-size: 11px; background: var(--gray-bg); border: 1px solid var(--border); border-radius: 20px; padding: 1px 8px; color: var(--text-muted); }
    .kanban-body { flex: 1; min-height: calc(100dvh - 260px); display: flex; flex-direction: column; gap: 8px; border-radius: 10px; padding: 4px; transition: background 0.15s, border 0.15s; border: 2px solid transparent; }
    .kanban-body.drag-over { background: var(--green-bg); border-color: var(--green); }
    .deal-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all 0.12s; user-select: none; }
    .deal-card:hover { border-color: var(--green); box-shadow: 0 3px 12px rgba(51,196,122,0.1); }
    .deal-card.dragging { opacity: 0.35; cursor: grabbing; }
    .deal-card-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
    .deal-card-sub { font-size: 11px; color: var(--text-muted); }
    .deal-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 6px; }
    .deal-days { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--gray-bg); color: var(--text-muted); white-space: nowrap; }
    .deal-days.warn { background: #fef3c7; color: #b45309; }
    .deal-days.overdue { background: #fee2e2; color: #b91c1c; }
    .deal-move-select { font-size: 11px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--gray-bg); color: var(--text-muted); font-family: inherit; cursor: pointer; outline: none; }
    .deal-move-select:focus { border-color: var(--green); }
    .kanban-add { border: 1.5px dashed var(--border); border-radius: 10px; padding: 10px; text-align: center; font-size: 12px; color: var(--text-muted); cursor: pointer; transition: all 0.12s; margin-top: 2px; }
    .kanban-add:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }
    .kanban-divider { width: 1px; background: var(--border); flex-shrink: 0; margin: 0 6px; align-self: stretch; position: relative; }
    .kanban-divider-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; background: var(--gray-bg); padding: 0 6px; }
    .kanban-col-complete .kanban-col-label { color: var(--green-dark); }
    .kanban-col-complete .kanban-body { background: #f0faf4; }
    .kanban-col-lost .kanban-col-label { color: #b91c1c; }
    .kanban-col-lost .kanban-body { background: #fff5f5; }
    .kanban-rail { display: none; gap: 6px; overflow-x: auto; padding: 0 0 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .kanban-rail::-webkit-scrollbar { display: none; }
    .krail-pill { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 20px; background: var(--gray-bg); border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
    .krail-pill.active { background: var(--green); border-color: var(--green); color: #fff; }
    .krail-count { font-size: 11px; background: rgba(0,0,0,0.07); border-radius: 10px; padding: 0 6px; }
    .krail-pill.active .krail-count { background: rgba(255,255,255,0.22); }
    .deal-card-complete { border-color: #bbf7d0; }
    .deal-card-lost { border-color: #fecaca; opacity: 0.85; }
    .deal-card-reopen { font-size: 11px; color: var(--text-muted); cursor: pointer; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border); transition: all 0.12s; }
    .deal-card-reopen:hover { color: var(--green); border-color: var(--green); }
    .pipeline-archive { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; }
    .pipeline-archive-head { padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
    .pipeline-archive-head:hover { background: var(--green-bg); }
    .pipeline-archive-title { font-size: 13px; font-weight: 700; }
    .pipeline-archive-stats { display: flex; gap: 16px; font-size: 12px; }
    .pipeline-archive-stat { color: var(--text-muted); }
    .pipeline-archive-stat strong { color: var(--text); }
    .archive-list { border-top: 1px solid var(--border); }
    .archive-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; transition: background 0.1s; }
    .archive-row:last-child { border-bottom: none; }
    .archive-row:hover { background: var(--green-bg); }
    .archive-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
    .archive-badge-complete { background: var(--green-bg); color: var(--green-dark); }
    .archive-badge-lost { background: #fee2e2; color: #b91c1c; }
    .automation-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--green-deeper); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 999; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: opacity 0.3s; pointer-events: none; }

    /* ─── CONTACT PICKER ─── */
    .picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
    .picker-overlay.open { opacity: 1; pointer-events: all; }
    .picker-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 82vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.2); transform: translateY(8px); transition: transform 0.15s; overflow: hidden; }
    .picker-overlay.open .picker-modal { transform: translateY(0); }
    .picker-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
    .picker-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
    .picker-search { width: 100%; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 14px; outline: none; transition: border-color 0.12s; }
    .picker-search:focus { border-color: var(--green); }
    .picker-list { flex: 1; overflow-y: auto; padding: 6px 0; }
    .picker-item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; cursor: pointer; transition: background 0.1s; }
    .picker-item:hover { background: var(--green-bg); }
    .picker-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--green-bg); color: var(--green); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .picker-name { font-size: 14px; font-weight: 600; flex: 1; }
    .picker-meta { font-size: 12px; color: var(--text-muted); }
    .picker-badge-pipeline { font-size: 10px; font-weight: 700; background: var(--green-bg); color: var(--green); padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
    .picker-empty { text-align: center; padding: 32px 20px; color: var(--text-muted); font-size: 13px; }
    .picker-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; }
    .picker-sort { font-size: 11px; color: var(--text-muted); padding: 8px 20px 0; }
    @media (min-width: 769px) { .automation-toast { bottom: 24px; } }

    /* ─── INBOX ─── */
    .inbox-wrap { display: grid; grid-template-columns: 148px 280px 1fr; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; height: calc(100dvh - var(--header-h) - 56px - 28px); min-height: 400px; }
    .inbox-channels { border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; background: #fafbfa; padding: 8px 0; display: flex; flex-direction: column; }
    .inbox-chan-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; cursor: pointer; color: var(--text-muted); white-space: nowrap; }
    .inbox-chan-item:hover { background: var(--green-bg); color: var(--text); }
    .inbox-chan-item.active { background: var(--green-bg); color: var(--green-dark); font-weight: 600; border-right: 2px solid var(--green); }
    .inbox-chan-item.chan-soon { opacity: 0.6; cursor: default; }
    .inbox-chan-icon { font-size: 15px; flex-shrink: 0; }
    .soon-pill { font-size: 9px; font-weight: 700; background: #f5f3ff; color: #6d28d9; border-radius: 10px; padding: 1px 5px; margin-left: auto; }
    .inbox-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; }
    .inbox-sidebar-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .inbox-sidebar-title { font-size: 13px; font-weight: 700; }
    .conv-list { flex: 1; overflow-y: auto; }
    .conv-item { display: flex; gap: 10px; padding: 13px 16px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; }
    .conv-item:hover { background: var(--green-bg); }
    .conv-item.active { background: var(--green-bg); border-left: 3px solid var(--green); }
    .conv-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .conv-info { flex: 1; min-width: 0; }
    .conv-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .conv-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .conv-time { font-size: 10px; color: var(--text-muted); }
    .conv-unread { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
    .inbox-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
    .thread-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .thread-name { font-size: 14px; font-weight: 700; }
    .thread-sub { font-size: 12px; color: var(--text-muted); }
    .thread-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
    .msg-row { display: flex; }
    .msg-row.out { justify-content: flex-end; }
    .msg-bubble { max-width: 72%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; }
    .msg-bubble.in { background: var(--gray-bg); border-radius: 16px 16px 16px 4px; color: var(--text); }
    .msg-bubble.out { background: var(--green); color: #fff; border-radius: 16px 16px 4px 16px; }
    .msg-time { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-align: right; }
    .msg-time.in-time { text-align: left; }
    .thread-composer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: flex-end; flex-shrink: 0; }
    .thread-composer textarea { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit; resize: none; outline: none; min-height: 44px; max-height: 120px; line-height: 1.5; }
    .thread-composer textarea:focus { border-color: var(--green); }
    .thread-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; }
    .chan-tabs { display: flex; gap: 2px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .chan-tab { padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--text-muted); transition: all 0.12s; display:flex; align-items:center; gap:3px; }
    .chan-tab.active { background: var(--green); color: #fff; }
    .chan-soon { opacity: 0.75; }
    .chan-soon.active { background: #f5f3ff; color: #6d28d9; }
    .chan-soon-badge { font-size:9px; font-weight:700; background:#f5f3ff; color:#6d28d9; border-radius:4px; padding:1px 5px; margin-left:3px; }

    /* ─── ACTION NEEDED ─── */
    .action-needed-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .action-needed-item:last-child { border-bottom: none; }
    .action-needed-msg { font-size: 13px; line-height: 1.4; }

    /* ─── TAG PICKER ─── */
    .tag-input-wrap { position: relative; }
    .tag-add-btn { font-size: 11px; color: var(--green-dark); background: none; border: 1px dashed var(--border); border-radius: 20px; cursor: pointer; padding: 2px 8px; font-family: inherit; }
    .tag-add-btn:hover { border-color: var(--green); background: var(--green-bg); }
    .tag-picker-drop { position: absolute; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); width: 220px; z-index: 100; overflow: hidden; }
    .tag-picker-search { width: 100%; border: none; border-bottom: 1px solid var(--border); padding: 8px 12px; font-size: 12px; outline: none; box-sizing: border-box; font-family: inherit; }
    .tag-picker-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
    .tag-picker-item:hover { background: var(--green-bg); }
    .tag-picker-create { color: var(--green-dark); font-weight: 600; }
    .tag-mgr-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--green-bg); color: var(--green-dark); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }

    /* ─── CALENDAR UPCOMING ─── */
    .appt-date-header { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 0 4px; border-top: 1px solid var(--border); margin-top: 4px; }
    .appt-date-header:first-child { border-top: none; margin-top: 0; padding-top: 0; }
    .cal-day-detail { display: flex; flex-direction: column; overflow: hidden; }
    .cal-upcoming-header { padding: 10px 16px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .cal-appt-list { flex: 1; overflow-y: auto; padding: 12px 16px; }
    .cal-appt-list-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 24px 0; }

    /* ─── AUTOMATIONS ─── */
    .auto-mode-bar { display: flex; align-items: center; gap: 6px; background: var(--gray-bg); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
    .mode-btn { padding: 7px 18px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: transparent; color: var(--text-muted); transition: all 0.12s; font-family: inherit; }
    .mode-btn.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
    .custom-banner { display: none; align-items: center; justify-content: space-between; gap: 12px; background: #fff8e6; border: 1px solid #f59e0b44; border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; color: #92400e; flex-wrap: wrap; gap: 8px; }
    .auto-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 12px; display: flex; gap: 16px; align-items: flex-start; }
    .auto-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .auto-body { flex: 1; min-width: 0; }
    .auto-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
    .auto-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
    .auto-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .auto-chip { font-size: 11px; font-weight: 500; background: var(--gray-bg); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; color: var(--text-muted); }
    .auto-chip.trigger { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
    .auto-chip.action { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
    .auto-setting select { font-size: 12px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font-family: inherit; color: var(--text); outline: none; cursor: pointer; }
    .auto-setting select:focus { border-color: var(--green); }
    .auto-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
    .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 24px; cursor: pointer; transition: background 0.2s; }
    .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
    .toggle-switch input:checked + .toggle-slider { background: var(--green); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
    .auto-custom-fields { margin-top: 10px; display: none; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
    .auto-custom-fields.visible { display: flex; }
    .auto-field-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
    .auto-field-label { color: var(--text-muted); font-weight: 500; width: 60px; flex-shrink: 0; }
    .auto-field-row select, .auto-field-row input { flex: 1; font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; outline: none; }
    .auto-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin: 0 0 10px; }
    .auto-group-label.spaced { margin-top: 22px; }
    .auto-empty { font-size: 13px; color: var(--text-muted); padding: 10px 0 16px; }
    .auto-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
    .auto-ctl { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
    .auto-ctl select, .auto-ctl input { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font-family: inherit; color: var(--text); outline: none; cursor: pointer; }
    .auto-ctl select:focus, .auto-ctl input:focus { border-color: var(--green); }
    .auto-buttons { display: flex; gap: 8px; margin-top: 12px; }

    /* ─── REVIEWS ─── */
    .platform-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 20px; }
    .platform-card { border: 2px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; transition: all 0.12s; }
    .platform-card.active { border-color: var(--green); background: var(--green-bg); }
    .platform-card:hover { border-color: var(--green); }
    .platform-icon { font-size: 24px; margin-bottom: 6px; }
    .platform-name { font-size: 12px; font-weight: 600; }

    /* ─── EMAIL THREAD ─── */
    .email-header { background: #f5f3ff; border-bottom: 1px solid #e0d9ff; padding: 12px 20px; flex-shrink: 0; }
    .email-subject-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .email-subject-label { font-size: 11px; font-weight: 700; color: #6d28d9; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
    .email-subject-val { font-size: 13px; font-weight: 600; color: #3b0764; }
    .email-from-row { font-size: 11px; color: #7c3aed; }
    .msg-bubble.email-in { background: #f5f3ff; border: 1px solid #e0d9ff; border-radius: 4px 16px 16px 16px; color: var(--text); max-width: 82%; padding: 12px 16px; }
    .msg-bubble.email-out { background: #6d28d9; border-radius: 16px 4px 16px 16px; color: #fff; max-width: 82%; padding: 12px 16px; }
    .chan-tab.email-active { background: #7c3aed; color: #fff; }
    .composer-email-wrap { padding: 10px 20px; background: #f5f3ff; border-top: 1px solid #e0d9ff; border-bottom: 1px solid #e0d9ff; flex-shrink: 0; }
    .composer-email-subject { width: 100%; border: 1px solid #e0d9ff; border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none; background: #fff; margin-bottom: 0; }
    .composer-email-subject:focus { border-color: #7c3aed; }
    .conv-chan-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
    .conv-chan-badge.sms { background: var(--green-bg); color: var(--green-dark); }
    .conv-chan-badge.email { background: #f5f3ff; color: #6d28d9; }

    /* ─── FILES ─── */
    .panel-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .panel-tab { padding: 12px 20px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; transition: all 0.12s; user-select: none; }
    .panel-tab.active { color: var(--green); border-bottom-color: var(--green); }
    .cdr-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); padding: 7px 0; cursor: pointer; }
    .cdr-check input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; }
    .file-list { display: flex; flex-direction: column; gap: 8px; }
    .file-item { display: flex; align-items: center; gap: 12px; background: var(--gray-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
    .file-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
    .file-icon.pdf { background: #fee2e2; }
    .file-icon.img { background: #e0f2fe; }
    .file-icon.doc { background: #e0e7ff; }
    .file-icon.other { background: var(--gray-bg); }
    .file-name { font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .file-drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 28px; text-align: center; cursor: pointer; transition: all 0.15s; margin-top: 8px; }
    .file-drop-zone:hover { border-color: var(--green); background: var(--green-bg); }
    .file-drop-zone input { display: none; }

    /* ─── SETTINGS ─── */
    .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .settings-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .notif-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
    .notif-row:last-child { border-bottom: none; }
    .notif-label { font-size: 13px; font-weight: 500; }
    .notif-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

    /* ─── INVOICE BUILDER ─── */
    .inv-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
    .inv-status-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:0.06em; }
    .inv-status-draft { background:var(--gray-bg); color:var(--text-muted); border:1px solid var(--border); }
    .inv-status-sent { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
    .inv-status-accepted { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
    .inv-status-paid { background:var(--green-bg); color:var(--green-dark); border:1px solid #bbf7d0; }
    .inv-status-lost { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
    .inv-table-wrap { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:20px; }
    .inv-list-table { width:100%; border-collapse:collapse; }
    .inv-list-table th { text-align:left; padding:10px 16px; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid var(--border); background:var(--gray-bg); }
    .inv-list-table td { padding:13px 16px; font-size:13px; border-bottom:1px solid var(--border); }
    .inv-list-table tr:last-child td { border-bottom:none; }
    .inv-list-table tbody tr { cursor:pointer; transition:background 0.1s; }
    .inv-list-table tbody tr:hover { background:var(--green-bg); }
    .inv-num { font-weight:700; color:var(--text); }
    .inv-editor { display:none; }
    .inv-editor.active { display:block; }
    .inv-list-view { display:block; }
    .inv-list-view.hidden { display:none; }
    .inv-doc { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
    .inv-doc-head { background: linear-gradient(135deg, var(--green-deeper) 0%, #1a5c42 100%); color:#fff; padding:28px 32px; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
    .inv-doc-brand { font-size:22px; font-weight:800; letter-spacing:-0.02em; }
    .inv-doc-brand-sub { font-size:12px; opacity:0.7; margin-top:2px; }
    .inv-doc-meta { text-align:right; }
    .inv-doc-number { font-size:28px; font-weight:800; letter-spacing:-0.02em; }
    .inv-doc-number-label { font-size:11px; opacity:0.6; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:4px; }
    .inv-doc-body { padding:28px 32px; }
    .inv-from-to { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; }
    .inv-party-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:6px; }
    .inv-party-name { font-size:15px; font-weight:700; margin-bottom:2px; }
    .inv-party-info { font-size:12px; color:var(--text-muted); line-height:1.6; }
    /* Invoice client searchable picker */
    .inv-client-picker { position:relative; margin-bottom:6px; }
    .inv-client-drop { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.10); z-index:200; max-height:220px; overflow-y:auto; }
    .inv-client-drop.open { display:block; }
    .inv-client-opt { padding:9px 13px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:8px; }
    .inv-client-opt:hover, .inv-client-opt.selected { background:var(--green-bg); }
    .inv-client-drop-item { padding:9px 13px; font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .inv-client-drop-item:hover { background:var(--green-bg); }
    .inv-client-drop-sep { padding:5px 13px 3px; font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:0.05em; text-transform:uppercase; border-top:1px solid var(--border); }

    /* ─── VIDEO SYSTEM ─── */
    .modal-video .modal { max-width:860px; }
    .video-embed { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:10px; background:#000; }
    .video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:none; border-radius:10px; }
    .addon-video-wrap { max-width:700px; margin:0 auto 24px; }
    .video-help-btn { font-size:12px; color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:#fff; cursor:pointer; transition:all 0.12s; }
    .video-help-btn:hover { color:var(--green-dark); border-color:var(--green); background:var(--green-bg); }

    /* ─── HELP & SUPPORT ─── */
    .support-msg { display:flex; }
    .support-msg-bot { justify-content:flex-start; }
    .support-msg-user { justify-content:flex-end; }
    .support-msg-bubble { max-width:80%; padding:10px 14px; border-radius:12px; font-size:13px; line-height:1.5; }
    .support-msg-bot .support-msg-bubble { background:var(--gray-bg); color:var(--text); border-bottom-left-radius:4px; }
    .support-msg-user .support-msg-bubble { background:var(--green); color:#fff; border-bottom-right-radius:4px; }
    .video-tile { border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; transition:box-shadow 0.12s; }
    .video-tile:hover { box-shadow:0 4px 16px rgba(0,0,0,0.1); }
    .video-tile-thumb { height:90px; background:linear-gradient(135deg,#1a1a2e,#16213e); display:flex; align-items:center; justify-content:center; }
    .video-tile-play { width:36px; height:36px; background:rgba(255,255,255,0.9); border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .video-tile-label { padding:8px 10px; font-size:12px; font-weight:600; color:var(--text); }
    .faq-item { border-bottom:1px solid var(--border); }
    .faq-item:last-child { border-bottom:none; }
    .faq-q { display:flex; justify-content:space-between; align-items:center; padding:12px 0; cursor:pointer; font-size:13px; font-weight:600; gap:8px; }
    .faq-q:hover { color:var(--green-dark); }
    .faq-chevron { transition:transform 0.2s; flex-shrink:0; font-size:11px; color:var(--text-muted); }
    .faq-item.open .faq-chevron { transform:rotate(180deg); }
    .faq-a { display:none; padding:0 0 12px; font-size:13px; color:var(--text-muted); line-height:1.6; }
    .faq-item.open .faq-a { display:block; }
    .inv-client-opt .inv-client-phone { margin-left:auto; font-size:11px; color:var(--text-muted); }
    .inv-client-badge { font-size:10px; font-weight:700; background:#eff6ff; color:#1d4ed8; border-radius:6px; padding:2px 7px; white-space:nowrap; }
    .inv-client-sep { padding:6px 13px 4px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); border-top:1px solid var(--border); margin-top:2px; }
    .inv-client-empty { color:var(--text-muted); font-size:12px; font-style:italic; }
    /* Invoice list search */
    .inv-search-bar { margin-bottom:14px; }
    .inv-search-bar input { max-width:300px; }
    .inv-line-table { width:100%; border-collapse:collapse; margin-bottom:20px; table-layout:fixed; }
    .inv-line-table th { text-align:left; padding:8px 10px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:2px solid var(--border); white-space:nowrap; }
    .inv-line-table th.th-right { text-align:right; }
    .inv-line-table td { padding:8px 10px; font-size:13px; border-bottom:1px solid var(--border); vertical-align:top; }
    .inv-line-table tbody tr:last-child td { border-bottom:none; }
    .inv-line-table tbody tr.dragging-row { opacity:0.4; }
    .inv-line-table tbody tr.drag-over-row { border-top:2px solid var(--green); }
    .inv-line-input { width:100%; border:1px solid transparent; border-radius:6px; padding:5px 8px; font-size:13px; font-family:inherit; outline:none; background:transparent; transition:border-color 0.12s, background 0.12s; }
    .inv-line-input:focus { border-color:var(--green); background:#fff; box-shadow:0 0 0 2px rgba(51,196,122,0.1); }
    .inv-line-input.title { font-weight:600; }
    .inv-line-input.subdesc { font-size:11px; color:var(--text-muted); margin-top:3px; }
    .inv-line-input.num { width:100%; text-align:right; }
    .inv-line-amount { font-size:13px; font-weight:600; color:var(--text); text-align:right; padding:5px 0; }
    .drag-handle { cursor:grab; color:#ccc; font-size:14px; padding:6px 4px; user-select:none; display:flex; align-items:center; justify-content:center; }
    .drag-handle:hover { color:var(--text-muted); }
    .drag-handle:active { cursor:grabbing; }
    .inv-totals { display:flex; justify-content:flex-end; margin-bottom:24px; }
    .inv-totals-grid { width:260px; }
    .inv-total-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; border-bottom:1px solid var(--border); }
    .inv-total-row:last-child { border-bottom:none; font-size:15px; font-weight:800; padding-top:10px; }
    .inv-total-label { color:var(--text-muted); }
    .inv-total-val { font-weight:600; }
    .inv-doc-footer { background:var(--gray-bg); border-top:1px solid var(--border); padding:20px 32px; font-size:12px; color:var(--text-muted); }
    .del-line-btn { width:24px; height:24px; border-radius:6px; border:none; background:transparent; color:#ccc; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:all 0.12s; }
    .del-line-btn:hover { background:#fee2e2; color:#b91c1c; }

    /* ─── ADD-ON CARDS ─── */
    .addon-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 22px; display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; transition: box-shadow 0.12s; }
    .addon-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
    .addon-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; }
    .addon-card-body { flex: 1; min-width: 0; }
    .addon-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
    .addon-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
    .addon-card-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
    .addon-status-active { background: var(--green-bg); color: var(--green-dark); }
    .addon-status-available { background: #f5f3ff; color: #6d28d9; }
    .addon-status-coming { background: var(--gray-bg); color: var(--text-muted); }

    /* ─── BOTTOM NAV ─── */
    .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-h); background: #fff; border-top: 1px solid var(--border); z-index: 200; padding-bottom: env(safe-area-inset-bottom); }
    .bottom-nav-inner { display: flex; width: 100%; height: 100%; }
    .bn-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: #aab5af; transition: color 0.12s; font-size: 10px; font-weight: 600; user-select: none; -webkit-tap-highlight-color: transparent; }
    .bn-item.active { color: var(--green); }
    .bn-item:active { opacity: 0.7; }
    .bn-badge { position: absolute; top: 5px; left: calc(50% + 5px); background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1; }
    .bn-hero { color: var(--green); }
    .bn-hero-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -20px; box-shadow: 0 5px 14px rgba(51,196,122,0.45); border: 3px solid #fff; transition: background 0.12s, transform 0.12s; }
    .bn-hero:active .bn-hero-circle { transform: scale(0.94); }
    .bn-hero.active .bn-hero-circle { background: var(--green-dark); }
    /* More bottom sheet (mobile) */
    .more-sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 250; }
    .more-sheet-overlay.open { display: block; }
    .more-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 6px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 28px rgba(0,0,0,0.16); animation: sheetUp 0.22s ease; }
    @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .more-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: #d5ddd8; margin: 8px auto 14px; }
    .more-sheet-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 12px 4px; }
    .more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .more-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 4px; border-radius: 14px; background: var(--gray-bg); color: var(--text); font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
    .more-item:active { background: #e8efeb; }
    .more-item svg { color: var(--green); }

    /* ─── INVOICE PREVIEW MODAL ─── */
    .inv-preview-modal { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:700; display:flex; align-items:flex-start; justify-content:center; padding:24px 16px; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity 0.15s; }
    .inv-preview-modal.open { opacity:1; pointer-events:all; }
    .inv-preview-inner { background:#f4f5f7; border-radius:14px; width:100%; max-width:760px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
    .inv-preview-bar { background:#fff; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); gap:10px; }
    .inv-preview-doc { padding:24px; }
    .inv-clean { background:#fff; border-radius:10px; padding:40px 44px; font-family:'Inter',-apple-system,sans-serif; }
    .inv-clean-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:32px; }
    .inv-clean-brand { font-size:22px; font-weight:800; color:#111; }
    .inv-clean-brand-sub { font-size:12px; color:#888; margin-top:3px; }
    .inv-clean-num-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#aaa; }
    .inv-clean-num { font-size:26px; font-weight:800; color:var(--green); }
    .inv-clean-parties { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:28px; }
    .inv-clean-party-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#aaa; margin-bottom:6px; }
    .inv-clean-party-val { font-size:13px; color:#222; line-height:1.6; }
    .inv-clean-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
    .inv-clean-table th { text-align:left; padding:8px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#aaa; border-bottom:2px solid #eee; }
    .inv-clean-table th.r { text-align:right; }
    .inv-clean-table td { padding:12px 12px; font-size:13px; color:#222; border-bottom:1px solid #f0f0f0; vertical-align:top; }
    .inv-clean-table td.r { text-align:right; }
    .inv-clean-item-title { font-weight:600; }
    .inv-clean-item-desc { font-size:12px; color:#888; margin-top:2px; }
    .inv-clean-totals { display:flex; justify-content:flex-end; margin-bottom:24px; }
    .inv-clean-totals-grid { width:240px; }
    .inv-clean-total-row { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:#555; }
    .inv-clean-total-row.final { font-weight:800; font-size:15px; color:#111; border-top:2px solid #eee; margin-top:4px; padding-top:10px; }
    .inv-clean-total-row.final span:last-child { color:var(--green); }
    .inv-clean-notes { font-size:12px; color:#888; border-top:1px solid #eee; padding-top:16px; line-height:1.7; }
    .inv-sig-toggle { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
    .inv-clean-tos-note { font-size:11px; color:#aaa; border-top:1px dashed #eee; padding-top:12px; margin-top:12px; }
    .inv-clean-sig { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:32px; border-top:1px solid #eee; padding-top:24px; }
    .inv-clean-sig-line { border-bottom:1px solid #ccc; height:32px; margin-bottom:6px; }
    .inv-clean-sig-label { font-size:11px; color:#aaa; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }

    /* ─── CALENDAR ─── */
    .cal-wrap { display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start; }
    .cal-panel { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
    .cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
    .cal-month-label { font-size:15px; font-weight:700; color:var(--text); }
    .cal-grid-header { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px; }
    .cal-grid-header > div { font-size:11px; font-weight:600; color:var(--text-muted); text-align:center; padding:4px 0; text-transform:uppercase; letter-spacing:0.04em; }
    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
    .cal-day { display:flex; flex-direction:column; align-items:center; padding:6px 2px; cursor:pointer; border-radius:8px; transition:background 0.1s; min-height:44px; position:relative; }
    .cal-day:hover { background:var(--green-bg); }
    .cal-day-num { font-size:13px; font-weight:500; color:var(--text); width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
    .cal-day.today .cal-day-num { background:var(--green); color:#fff; font-weight:700; }
    .cal-day.selected { background:var(--green-bg); }
    .cal-day.selected .cal-day-num { background:var(--green-dark); color:#fff; }
    .cal-day.other-month .cal-day-num { color:#ccc; }
    .cal-day.has-appt::after { content:''; display:block; width:5px; height:5px; border-radius:50%; background:var(--green); margin-top:2px; }
    .cal-day-detail { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
    .cal-day-title { font-size:15px; font-weight:700; margin-bottom:16px; color:var(--text); }
    .cal-appt-list { display:flex; flex-direction:column; gap:10px; }
    .cal-empty-day { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:13px; }
    .appt-card { display:flex; gap:14px; padding:14px; border:1px solid var(--border); border-radius:10px; align-items:flex-start; cursor:pointer; transition:box-shadow 0.15s; }
    .appt-card:hover { box-shadow:0 2px 12px rgba(0,0,0,0.07); }
    .time-pill { flex-shrink:0; background:var(--green-bg); color:var(--green-dark); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; margin-top:2px; }
    .appt-body { flex:1; }
    .appt-name { font-size:14px; font-weight:600; color:var(--text); }
    .appt-type { font-size:12px; color:var(--green-dark); font-weight:500; }
    .appt-notes { font-size:12px; color:var(--text-muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
    .appt-actions { display:flex; gap:6px; opacity:0; transition:opacity 0.15s; }
    .appt-card:hover .appt-actions { opacity:1; }

    /* ─── CAMPAIGNS ─── */
    .camp-card { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px 20px; margin-bottom:10px; display:flex; align-items:center; gap:16px; }
    .camp-icon { width:40px; height:40px; border-radius:10px; background:var(--green-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--green); font-size:18px; }
    .camp-body { flex:1; }
    .camp-name { font-size:15px; font-weight:600; color:var(--text); }
    .camp-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
    .camp-status { display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
    .camp-status.draft { background:#fef3c7; color:#92400e; }
    .camp-status.sent { background:var(--green-bg); color:var(--green-dark); }
    .camp-actions { display:flex; gap:8px; }
    .chan-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; background:#f1f5f9; font-size:11px; font-weight:500; color:#475569; }
    .camp-seg-preview { font-size:12px; color:var(--text-muted); margin-top:2px; }
    .seg-count { font-size:12px; color:var(--green-dark); font-weight:600; margin-top:6px; }
    .sms-count { font-size:11px; color:var(--text-muted); margin-top:4px; }
    .chan-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:16px; }
    .chan-toggle-btn { flex:1; padding:8px; font-size:13px; font-weight:500; border:none; background:#fff; cursor:pointer; transition:background 0.15s; }
    .chan-toggle-btn.active { background:var(--green); color:#fff; font-weight:600; }

    /* ─── CAMPAIGN TEMPLATES ─── */
    .camp-tpl-wrap { position:relative; display:inline-block; }
    .camp-tpl-drop { position:absolute; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.1); width:260px; z-index:60; overflow:hidden; }
    .camp-tpl-item { padding:10px 14px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); color:var(--text); }
    .camp-tpl-item:last-child { border-bottom:none; }
    .camp-tpl-item:hover { background:var(--green-bg); }

    /* ─── CONV STATUS ─── */
    .conv-status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
    .conv-status-dot.new { background:#22c55e; }
    .conv-status-dot.in_progress { background:#3b82f6; }
    .conv-status-dot.closed { background:#d1d5db; }

    /* ─── TAGS ─── */
    .tag-input-wrap { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--border); border-radius:8px; padding:6px 10px; cursor:text; min-height:38px; }
    .tag-input-wrap:focus-within { border-color:var(--green); }
    .tag-chip { background:var(--green-bg); color:var(--green-dark); font-size:11px; font-weight:600; padding:2px 8px 2px 10px; border-radius:20px; display:flex; align-items:center; gap:5px; }
    .tag-chip-x { cursor:pointer; opacity:0.55; font-size:11px; line-height:1; }
    .tag-chip-x:hover { opacity:1; }
    .tag-input-field { border:none; outline:none; font-size:13px; min-width:80px; flex:1; background:transparent; padding:0; }
    .tag-chip-sm { font-size:10px; padding:1px 7px; background:var(--green-bg); color:var(--green-dark); border-radius:20px; white-space:nowrap; }
    .contact-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }

    /* ─── QUICK REPLIES ─── */
    .qr-wrap { position:relative; flex-shrink:0; }
    .qr-popover { position:absolute; bottom:calc(100% + 8px); left:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.12); width:300px; z-index:60; overflow:hidden; }
    .qr-popover-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .qr-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
    .qr-item:last-child { border-bottom:none; }
    .qr-item:hover { background:var(--green-bg); }
    .qr-item-info { flex:1; min-width:0; }
    .qr-item-title { font-size:13px; font-weight:600; color:var(--text); }
    .qr-item-preview { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .qr-item-actions { display:flex; gap:4px; flex-shrink:0; margin-top:2px; }

    /* ─── NOTIFICATIONS (bell dropdown) ─── */
    .notif-count { position:absolute; top:1px; right:1px; min-width:15px; height:15px; padding:0 4px; background:#ef4444; color:#fff; font-size:9px; font-weight:700; border-radius:8px; display:none; align-items:center; justify-content:center; border:1.5px solid #fff; box-sizing:border-box; }
    .notif-popover { 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.14); width:320px; max-width:calc(100vw - 32px); z-index:250; overflow:hidden; display:none; cursor:default; text-align:left; }
    .notif-popover.open { display:block; }
    .notif-pop-header { padding:12px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:13px; }
    .notif-pop-header button { background:none; border:none; color:var(--green); font-size:12px; font-weight:600; cursor:pointer; padding:0; }
    .notif-list { max-height:min(420px, 60vh); overflow-y:auto; }
    .notif-item { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid var(--border); cursor:pointer; }
    .notif-item:last-child { border-bottom:none; }
    .notif-item:hover { background:var(--gray-bg); }
    .notif-item.unread { background:var(--green-bg); }
    .notif-item.unread:hover { background:#e6f6ee; }
    .notif-item-icon { font-size:16px; line-height:1.2; flex-shrink:0; }
    .notif-item-body { flex:1; min-width:0; }
    .notif-item-title { font-size:13px; font-weight:600; color:var(--text); }
    .notif-item-text { font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.45; word-break:break-word; }
    .notif-item-time { font-size:11px; color:var(--text-muted); margin-top:4px; }
    .notif-item-unreaddot { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:5px; }
    .notif-empty { padding:28px 20px; text-align:center; font-size:13px; color:var(--text-muted); line-height:1.5; }

    /* ─── CONTACT STATS ─── */
    .contact-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:14px 0 6px; border-top:1px solid var(--border); margin-top:12px; }
    .contact-stat { text-align:center; padding:6px 4px; }
    .contact-stat-val { font-size:16px; font-weight:700; color:var(--text); }
    .contact-stat-lbl { font-size:10px; color:var(--text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:0.04em; }

    /* ─── SEND DROPDOWN ─── */
    .send-dropdown { position:relative; display:inline-flex; }
    .send-dropdown-menu { position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.1); min-width:180px; z-index:50; overflow:hidden; display:none; }
    .send-dropdown-menu.open { display:block; }
    .send-dropdown-item { padding:10px 16px; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:10px; transition:background 0.1s; }
    .send-dropdown-item:hover { background:var(--green-bg); color:var(--green); }
    .send-dropdown-divider { border-top:1px solid var(--border); }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .d-header { display: none; }
      .m-header { display: flex; }
      .bottom-nav { display: flex; }
      .content { padding: 16px 16px calc(var(--bottom-nav-h) + 16px); overflow-x: hidden; overscroll-behavior-x: none; }
      .section { max-width: 100%; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .inbox-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; height: calc(100dvh - var(--header-h) - var(--bottom-nav-h) - 96px); }
      /* Single-pane master/detail: list only by default, thread takes over when open */
      .inbox-thread { display: none; }
      .inbox-wrap.thread-open .inbox-channels,
      .inbox-wrap.thread-open .inbox-sidebar { display: none; }
      .inbox-wrap.thread-open .inbox-thread { display: flex; }
      .inbox-channels { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--border); padding: 4px 8px; }
      .inbox-chan-item { white-space: nowrap; border-right: none; border-bottom: 2px solid transparent; padding: 8px 10px; flex-direction: column; gap: 3px; font-size: 11px; }
      .inbox-chan-item.active { border-right: none; border-bottom: 2px solid var(--green); }
      .soon-pill { margin-left: 0; }
      .inbox-chan-item.chan-soon { display: none; }
      .two-col { grid-template-columns: 1fr; }
      .dash-main { grid-template-columns: 1fr; }
      .page-header { flex-direction: column; gap: 10px; }
      .page-actions { width: 100%; }
      .page-actions .btn { flex: 1; justify-content: center; }
      .search-bar { max-width: 100%; }
      .filter-row { gap: 8px; }
      .contact-table { display: none; }
      .contact-cards { display: flex; }
      .form-row { grid-template-columns: 1fr; }
      /* Modals & panels become bottom sheets on mobile */
      .panel-overlay, .modal-overlay { align-items: flex-end; padding: 0; }
      .panel, .modal { width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sheetUp 0.24s ease; }
      /* Phase E polish */
      .filter-row .search-bar { flex: 1 1 100%; max-width: 100%; }
      .thread-head { flex-wrap: wrap; }
      #threadStatusBar { width: 100%; margin-top: 6px; }
      .inv-table-wrap { overflow-x: auto; }
      .inv-table-wrap th:nth-child(3), .inv-table-wrap td:nth-child(3),
      .inv-table-wrap th:nth-child(4), .inv-table-wrap td:nth-child(4),
      .inv-table-wrap th:nth-child(7), .inv-table-wrap td:nth-child(7) { display: none; }
      .filter-tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
      .filter-tabs::-webkit-scrollbar { display: none; }
      .filter-tabs > * { flex-shrink: 0; }
      /* Prevent iOS auto-zoom on input focus — EVERY field must be >= 16px */
      input, select, textarea { font-size: 16px !important; }
      /* Pipeline: snap-scroll columns that peek the next stage + visible stage rail */
      .kanban-rail { display: flex; }
      .kanban-wrap { scroll-snap-type: x mandatory; scroll-padding-left: 4px; }
      .kanban-col { width: 82vw !important; scroll-snap-align: start; }
      .kanban-body { min-height: 45vh; }
      .kanban-divider { display: none; }
    }