/* office.css — the only stylesheet. No inline styles anywhere else. */

:root {
    --bg: #f5f4ef;
    --topbar: #1c1b18;
    --card: #ffffff;
    --border: #e3e0d7;
    --border-soft: #efede6;
    --blue: #2345c9;
    --blue-dark: #16308f;
    --blue-tint: #e8edfc;
    --overdue: #a84b0c;
    --muted: #5f5b52;
    --ink: #1c1b18;
    --head-bg: #f9f8f4;
    --input-border: #d6d3ca;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 15px;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }

.is-hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: 'Geist Mono', monospace; }
.field-gap { margin-top: 12px; }

/* Fixed disposition palette. A colour is applied by adding a class, so
   JavaScript only ever toggles classes, never sets a style. */
.c-0 { --c: #2345c9; }
.c-1 { --c: #1d7a4d; }
.c-2 { --c: #7b3fb8; }
.c-3 { --c: #0e7490; }
.c-4 { --c: #b8860b; }
.c-5 { --c: #a84b0c; }
.c-6 { --c: #8a1f1f; }
.c-7 { --c: #5f5b52; }
.c-def { --c: #5f5b52; }

/* ---------- buttons ---------- */
.btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
    white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-light { background: var(--bg); color: var(--ink); font-weight: 600; }
.btn-ghost { background: transparent; color: inherit; border-color: var(--input-border); }
.btn-ghost:hover { background: rgba(0,0,0,.05); }
.btn-danger { background: #fff; color: #8a1f1f; border-color: #e2c4c4; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- inputs ---------- */
.text-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--input-border);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
}
textarea.text-input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.4; }
.text-input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }

.field-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}
.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ink);
    font-weight: 500;
}

/* ---------- login ---------- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-card {
    width: 360px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
}
.login-title { margin: 0; font-size: 22px; }
.login-sub { margin: 4px 0 22px; color: var(--muted); }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form .field-label { margin-top: 8px; }
.login-form .btn { margin-top: 18px; height: 44px; }
.login-error { color: #8a1f1f; font-size: 14px; margin: 10px 0 0; }

/* ---------- top bar ---------- */
.topbar {
    height: 64px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--topbar);
    color: var(--bg);
}
.topbar-brand { font-size: 18px; font-weight: 700; }
.topbar-search {
    width: 360px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 0;
    background: #33312c;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}
.topbar-search::placeholder { color: #b5b1a8; }
.topbar-spacer { flex: 1; }
.topbar-user { font-size: 14px; color: #cfccc4; }

/* AI cost pill */
.ai-pill {
    height: 40px; display: inline-flex; align-items: center; padding: 0 12px;
    border-radius: 999px; border: 1px solid #5f5b52; background: transparent;
    color: #cfccc4; font-size: 13px; font-family: 'Geist Mono', monospace;
    text-decoration: none; white-space: nowrap;
}
.ai-pill:hover { background: rgba(255,255,255,.08); color: var(--bg); text-decoration: none; }

/* notification bell */
.bell-wrap { position: relative; }
.bell-btn {
    position: relative; width: 40px; height: 40px; border-radius: 8px;
    border: 1px solid #5f5b52; background: transparent; color: var(--bg);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bell-btn:hover { background: rgba(255,255,255,.08); }
.bell-count {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: #c0392b; color: #fff;
    font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.bell-dropdown {
    position: absolute; top: 48px; right: 0; width: 340px; max-height: 70vh; overflow-y: auto;
    background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 70; padding: 6px;
}
.bell-empty { padding: 20px; text-align: center; color: var(--muted); }
.bell-item {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 10px 12px; border-radius: 8px; cursor: pointer; font-family: inherit;
    border-bottom: 1px solid var(--border-soft);
}
.bell-item:hover { background: #faf9f6; }
.bell-item-org { font-weight: 600; font-size: 14px; }
.bell-item-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-item-when { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bell-markall { display: block; width: 100%; text-align: center; border: 0; background: none; color: var(--blue); cursor: pointer; font-family: inherit; font-size: 14px; padding: 10px; }
.bell-markall:hover { text-decoration: underline; }
.topbar .btn-ghost { color: var(--bg); border-color: #5f5b52; }
.topbar .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- main layout ---------- */
.main { display: flex; height: calc(100vh - 64px); min-height: 0; }
.list-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    gap: 12px;
    min-width: 0;
}

/* quiet top-bar link (Analytics), like the AI pill */
.nav-quiet { color: #cfccc4; text-decoration: none; font-size: 13px; padding: 0 4px; white-space: nowrap; }
.nav-quiet:hover { color: var(--bg); text-decoration: underline; }

/* ---------- tabs ---------- */
.tabs-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.source-filter {
    height: 40px; flex: none; max-width: 220px; padding: 0 10px;
    border: 1px solid var(--input-border); border-radius: 999px;
    background: #fff; color: var(--ink); font-family: inherit; font-size: 14px;
}
.source-filter.is-on { border: 2px solid var(--blue); background: var(--blue-tint); color: var(--blue-dark); font-weight: 600; }
.tab {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}
.tab .tab-count { color: var(--muted); margin-left: 6px; }
.tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.tab.is-active .tab-count { color: #cfccc4; }
.tab.tab-overdue.is-active { background: var(--overdue); border-color: var(--overdue); }
.tab.tab-overdue.is-active .tab-count { color: #f5d8c4; }
.hint { font-size: 13px; color: var(--muted); }

/* ---------- list ---------- */
.list-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.list-head, .list-row {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.1fr 1.6fr 1fr 64px;
    gap: 12px;
    padding: 0 18px;
    align-items: center;
}
.list-head {
    padding: 12px 18px;
    background: var(--head-bg);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.list-rows { overflow-y: auto; flex: 1; outline: none; }
.list-row {
    height: 60px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    background: #fff;
}
.list-row:hover { background: #faf9f6; }
.list-row.is-selected { background: #eef2fd; }
.list-org { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-org-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }
.list-org-name .org-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-badge {
    flex: none; font-size: 11px; font-weight: 600; color: #fff; background: var(--blue);
    padding: 1px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.02em;
}
h1 .reply-badge { font-size: 12px; vertical-align: middle; }
.unsub-badge {
    flex: none; font-size: 11px; font-weight: 600; color: #fff; background: #c0392b;
    padding: 1px 7px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.02em;
}
h1 .unsub-badge { font-size: 12px; vertical-align: middle; }
.panel-unsub { margin-top: 6px; font-size: 13px; color: #c0392b; font-weight: 600; }
.check-badge {
    flex: none; font-size: 11px; font-weight: 600; color: #8a5a00; background: #fde7c2;
    padding: 1px 7px; border-radius: 999px; white-space: nowrap;
}
.panel-check { margin-top: 6px; font-size: 13px; color: #8a5a00; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bell-check { font-size: 12px; font-weight: 600; color: #8a5a00; margin-top: 2px; }
.hist-badge-unsub { color: #c0392b; background: #fbe6e2; }
.edit-unsub { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--border-soft); }
.list-org-contact { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-time { font-size: 14px; font-family: 'Geist Mono', monospace; }
.list-head > *, .list-row > * { min-width: 0; }
.list-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; overflow: hidden; }
.list-status .status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, #5f5b52); }
.list-next { font-size: 14px; color: #3d3a33; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-due { font-size: 14px; font-weight: 600; }
.due-late { color: var(--overdue); }
.due-today { color: var(--ink); }
.due-plain { color: var(--muted); font-weight: 500; }
.list-actions { display: flex; justify-content: flex-end; }
.icon-btn {
    width: 44px; height: 40px;
    border-radius: 8px; border: 0;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.icon-btn:hover { background: var(--blue-dark); }
.warn-badge { color: var(--overdue); font-size: 12px; font-weight: 600; }
.list-empty { padding: 40px; text-align: center; color: var(--muted); }

/* ---------- side panel ---------- */
.panel {
    width: var(--panel-w, 448px);
    flex: none;
    background: var(--card);
    overflow-y: auto;
}

/* Drag handle between the list and the side panel. */
.resize-handle {
    width: 8px;
    flex: none;
    cursor: ew-resize;
    position: relative;
    background: transparent;
}
.resize-handle::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: var(--border);
    transform: translateX(-50%);
}
.resize-handle:hover::before { width: 2px; background: var(--blue); }
body.resizing { cursor: ew-resize; user-select: none; }
.panel-empty { padding: 40px 24px; color: var(--muted); }
.panel-body { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.panel-head h1 { margin: 0; font-size: 22px; }
.panel-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.panel-links { display: flex; gap: 14px; font-size: 14px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.panel-linkedin { display: flex; gap: 14px; font-size: 14px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.panel-section-label {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted); margin-bottom: 8px;
}
.panel-section { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* call button */
.call-row { display: flex; gap: 10px; align-items: stretch; }
.call-btn {
    flex: 1; height: 56px; border-radius: 12px;
    background: var(--blue); color: #fff; font-size: 18px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.call-btn:hover { background: var(--blue-dark); color: #fff; text-decoration: none; }
.call-copy { width: 56px; }

.last-call {
    padding: 10px 12px; border-radius: 10px;
    background: #fdeee2; color: #8a3d08; font-size: 14px;
}

/* disposition buttons */
.disp-buttons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.disp-btn {
    height: 44px; border-radius: 10px; border: 1px solid var(--input-border);
    background: #fff; font-size: 14px; color: var(--ink); cursor: pointer;
    font-family: inherit; display: flex; align-items: center; gap: 8px; padding: 0 12px;
}
.disp-btn .status-dot { width: 11px; height: 11px; }
.disp-btn.is-active { border-width: 2px; border-color: var(--c, var(--blue)); font-weight: 600; }

.next-when { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.chip {
    height: 40px; padding: 0 14px; border-radius: 10px;
    border: 1px solid var(--input-border); background: #fff;
    font-size: 14px; color: var(--ink); cursor: pointer; font-family: inherit;
}
.chip.is-active { border: 2px solid var(--blue); background: var(--blue-tint); color: var(--blue-dark); font-weight: 600; }

.inline-times { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.inline-times .text-input { width: auto; }
.manila-note { font-size: 13px; color: var(--muted); }

.save-next { height: 54px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; margin-top: 8px; }
.save-next:hover { background: #000; }

/* intelligence */
.intel-box {
    font-size: 14px; line-height: 1.5; color: var(--ink);
    background: #faf9f6; border: 1px solid var(--border-soft);
    border-radius: 10px; padding: 12px; max-height: 300px; overflow-y: auto;
}
.intel-box h3 { font-size: 15px; margin: 10px 0 4px; }
.intel-box h4 { font-size: 14px; margin: 8px 0 4px; color: var(--muted); }
.intel-box ul { margin: 4px 0; padding-left: 20px; }
.intel-empty { color: var(--muted); font-size: 14px; }
.intel-meta { font-size: 12px; color: var(--muted); margin-top: 6px; }
.intel-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
#research-lead:disabled { opacity: .7; }
.research-meta { margin: 10px 0; font-size: 13px; }
.placeholder-list { font-size: 14px; line-height: 1.7; padding-left: 20px; }
.placeholder-list code { font-family: 'Geist Mono', monospace; background: #f0eee7; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.intel-textarea { font-family: 'Geist Mono', monospace; font-size: 13px; }

/* notes */
.note-add { display: flex; gap: 8px; margin-bottom: 10px; }
.note-add textarea { flex: 1; }
.note { padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.note.is-pinned { border-color: var(--blue); background: var(--blue-tint); }
.note-body { font-size: 14px; white-space: pre-wrap; }
.note-meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 10px; align-items: center; }
.note-meta button { background: none; border: 0; color: var(--blue); cursor: pointer; font-size: 12px; padding: 0; }
.pin-tag { color: var(--blue); font-weight: 600; }

/* history */
.hist { border-top: 1px solid var(--border-soft); padding: 10px 0; font-size: 14px; }
.hist:first-child { border-top: 0; }
.hist-top { display: flex; gap: 8px; align-items: center; }
.hist-note { color: var(--muted); margin-top: 3px; white-space: pre-wrap; }
.hist-when { font-size: 12px; color: var(--muted); }
.hist-badge { font-weight: 600; color: var(--blue); background: var(--blue-tint); padding: 1px 8px; border-radius: 999px; font-size: 13px; }
.hist-badge-in { color: #137333; background: #e3f2e5; }
.replies-status { margin-top: 12px; font-size: 15px; }
.email-msg-full { white-space: pre-wrap; margin-top: 4px; }
.email-msg.is-collapsed .email-msg-full {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.linklike { background: none; border: 0; color: var(--blue); cursor: pointer; font-family: inherit; font-size: 13px; padding: 2px 0; }
.linklike:hover { text-decoration: underline; }
.call-email { flex: none; }

/* ---------- modals ---------- */
.modal-back {
    position: fixed; inset: 0;
    background: rgba(28,27,24,.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 60px 20px; z-index: 50; overflow-y: auto;
}
.modal {
    width: 560px; max-width: 100%;
    background: var(--card); border-radius: 14px;
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
}
.modal-wide { width: 720px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); }
.modal-body { padding: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.narrow { grid-template-columns: 1fr 1fr; max-width: 480px; }
.span-2 { grid-column: 1 / -1; }
.modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.modal-foot-spacer { flex: 1; }

.dup-warning {
    background: #fdeee2; color: #8a3d08;
    border-radius: 10px; padding: 12px; font-size: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.dup-warning .dup-actions { display: flex; gap: 8px; }

/* import */
.map-rows { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; margin: 12px 0; }
.map-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.map-head { font-size: 14px; font-weight: 600; }
.map-sample { font-size: 12px; color: var(--muted); }
.import-summary { font-size: 15px; line-height: 1.8; }
.import-summary strong { font-size: 18px; }
.skip-list { margin-top: 12px; max-height: 200px; overflow-y: auto; font-size: 13px; color: var(--muted); }

/* ---------- add leads page ---------- */
.add-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 24px;
    align-items: start;
}
.add-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 420px;
}
.add-head { display: flex; flex-direction: column; gap: 6px; }
.add-badge {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--blue);
}
.add-card h2 { margin: 0; font-size: 22px; }
.add-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.add-card-foot { display: flex; flex-direction: column; gap: 8px; }
.add-go {
    width: 100%; height: 52px; border-radius: 12px;
    background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; border: 0;
}
.add-go:hover { background: #000; color: #fff; }
.site-url { border: 2px solid var(--blue); height: 48px; }
#site-result { display: flex; flex-direction: column; gap: 10px; }

.drop-area {
    border: 2px dashed #a9a497;
    background: #f9f8f4;
    border-radius: 12px;
    min-height: 120px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; text-align: center; padding: 16px;
}
.drop-area:hover, .drop-area.is-drag { border-color: var(--blue); background: #eef2fd; }
.drop-title { font-size: 15px; font-weight: 600; }

/* ---------- email window ---------- */
.email-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.email-templates { border-right: 1px solid var(--border-soft); padding-right: 16px; }
.email-tpl-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.email-tpl {
    text-align: left; padding: 10px 12px; border: 1px solid var(--input-border);
    border-radius: 10px; background: #fff; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; gap: 2px;
}
.email-tpl:hover { background: #faf9f6; }
.email-tpl.is-active { border: 2px solid var(--blue); background: var(--blue-tint); }
.email-tpl-name { font-weight: 600; font-size: 14px; }
.email-tpl-when { font-size: 12px; color: var(--muted); }
.email-compose { display: flex; flex-direction: column; }
.email-nextline { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.email-next-select { width: auto; height: 40px; }
.email-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
/* compact per-run model override drop-down */
.model-select {
    height: 34px; max-width: 180px; padding: 0 8px;
    border: 1px solid var(--input-border); border-radius: 8px;
    background: #fff; color: var(--muted); font-family: inherit; font-size: 13px;
}
.email-ai-row { flex-wrap: wrap; }

.email-aihead { padding: 16px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.email-number { font-size: 14px; font-weight: 600; color: var(--muted); }
.email-ai-row { display: flex; gap: 10px; align-items: center; }
.email-ai-row .text-input { flex: 1; }
.email-footer-preview {
    margin-top: 10px; padding: 12px; border-radius: 8px;
    background: #f0eee7; color: #3d3a33; font-size: 14px; line-height: 1.4;
    white-space: pre-wrap;
}
.email-footer-preview:empty { display: none; }

/* signature settings */
#signature-form { max-width: 480px; }
.sig-preview-label { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.sig-preview { border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px; background: #faf9f6; min-height: 40px; margin-bottom: 14px; font-size: 14px; line-height: 1.4; }
.sig-bold-row { margin: 10px 0; }

/* ---------- settings ---------- */
.settings-wrap { display: flex; gap: 24px; padding: 24px; max-width: 1000px; }
.settings-nav { display: flex; flex-direction: column; gap: 6px; width: 200px; flex: none; }
.settings-tab {
    text-align: left; height: 42px; padding: 0 14px; border-radius: 10px;
    border: 1px solid transparent; background: none; font-size: 15px;
    cursor: pointer; font-family: inherit; color: var(--ink);
}
.settings-tab:hover { background: rgba(0,0,0,.04); }
.settings-tab.is-active { background: #fff; border-color: var(--border); font-weight: 600; }
.settings-later { font-size: 13px; color: #a9a599; padding: 8px 14px; }
.settings-main { flex: 1; }
.settings-pane h2 { margin-top: 0; }
.settings-pane h3 { margin-top: 28px; }

.disp-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.disp-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.disp-item.is-inactive { opacity: .55; }
.disp-name { font-weight: 600; flex: 1; }
.disp-flags { font-size: 12px; color: var(--muted); }
.disp-arrows { display: flex; flex-direction: column; }
.disp-arrows button, .disp-item .mini { background: none; border: 1px solid var(--input-border); border-radius: 6px; cursor: pointer; font-family: inherit; }
.mini { height: 32px; padding: 0 10px; font-size: 13px; }
.disp-arrows button { width: 26px; height: 20px; line-height: 1; font-size: 11px; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; background: var(--c, #5f5b52); }
.swatch.is-active { border-color: var(--ink); }

.user-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 24px; }
.user-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.user-item .u-name { font-weight: 600; }
.user-item .u-role { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.user-item .spacer { flex: 1; }

/* ---------- Read window ---------- */
#read-modal { align-items: center; padding: 5vh 20px; }
.read-window {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 80vh;
    background: var(--card);
    border-radius: 14px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.read-x {
    position: absolute;
    top: 14px; right: 16px;
    z-index: 1;
}
.read-head {
    padding: 24px 28px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.read-head h2 { margin: 0; font-size: 20px; padding-right: 32px; }
.read-sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.read-content {
    overflow-y: auto;
    padding: 24px 28px 32px;
}
/* Comfortable reading column, centred. */
.read-content.read-intel, .read-content.read-notes, .read-content.read-emails {
    font-size: 17px;
    line-height: 1.6;
}
.read-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.read-intel h3 { font-size: 20px; margin: 24px 0 8px; }
.read-intel h4 { font-size: 17px; margin: 18px 0 6px; color: var(--muted); }
.read-intel ul { margin: 8px 0; padding-left: 24px; }
.read-intel li { margin: 4px 0; }
.read-note {
    max-width: 760px;
    margin: 0 auto 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}
.read-note:last-child { border-bottom: 0; }
.read-note-meta { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.read-note-body { white-space: pre-wrap; }

.read-email {
    max-width: 760px;
    margin: 0 auto 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border-soft);
}
.read-email:last-child { border-bottom: 0; }
.read-email-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.read-email-when { font-size: 13px; color: var(--muted); }
.read-email-addr { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.read-email-subject { font-weight: 700; margin-bottom: 8px; }
.read-email-body { white-space: pre-wrap; }
.read-email-attach { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* ---------- Settings: AI models & prices ---------- */
.ai-models { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 16px; max-width: 620px; }
.ai-model-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ai-model-row .field-label { gap: 6px; }
.ai-prices { margin: 12px 0 8px; max-width: 620px; }
.ai-price-head, .ai-price-row {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: center;
}
.ai-price-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 4px 0; }
.ai-price-row { padding: 6px 0; border-top: 1px solid var(--border-soft); }
.ai-price-web { grid-template-columns: 2fr 1fr; }
.ai-price-name { display: flex; flex-direction: column; }
.ai-price-id { font-size: 11px; color: var(--muted); font-family: 'Geist Mono', monospace; }
.ai-prices-note { max-width: 620px; }

/* ---------- costs report ---------- */
.costs-wrap { padding: 24px; max-width: 1100px; }
.costs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.costs-head h1 { margin: 0; font-size: 24px; }
.costs-head .field-label { width: 200px; }
.costs-figures { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.costs-fig { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.costs-fig-label { font-size: 13px; color: var(--muted); }
.costs-fig-val { font-size: 26px; font-weight: 700; margin-top: 4px; }
.costs-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.costs-card h2, .costs-runs-card h2 { margin: 0 0 10px; font-size: 16px; }
.costs-line { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.costs-line:first-child { border-top: 0; }
.costs-line span:first-child { flex: 1; font-weight: 500; }
.costs-runs-card { margin-top: 16px; }
.costs-runs-head, .costs-run {
    display: grid; grid-template-columns: 1.3fr 0.9fr 1fr 1.6fr 1.6fr 0.7fr 0.7fr 0.6fr 0.9fr;
    gap: 10px; align-items: center; font-size: 13px;
}
.costs-runs-head { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.costs-run { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.costs-run-model { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-failed { color: #c0392b; font-weight: 600; }
.costs-more-wrap { text-align: center; margin-top: 12px; }

/* ---------- sources settings ---------- */
.sources-imported { margin-bottom: 10px; }
.source-add { display: flex; gap: 8px; margin-top: 12px; max-width: 420px; }
.source-add .text-input { flex: 1; }

/* ---------- analytics ---------- */
.analytics-wrap { max-width: 1200px; }
.analytics-scroll { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.analytics-table th, .analytics-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; white-space: nowrap; }
.analytics-table thead th { cursor: pointer; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.analytics-table thead th:hover { color: var(--ink); }
.analytics-table td.num, .analytics-table th.num { text-align: right; }
.analytics-table .total-row th, .analytics-table .total-row td { border-top: 2px solid var(--border); font-weight: 700; }
.import-new-sources { margin-top: 8px; }

/* ---------- fit badges + panel control ---------- */
.fit-badge { flex: none; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.fit-good { color: #137333; background: #e3f2e5; }
.fit-maybe { color: #8a5a00; background: #fde7c2; }
.fit-no { color: #5f5b52; background: #ece9e1; }
.panel-fit { margin-top: 6px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-fit .fit-set { height: 30px; border: 1px solid var(--input-border); border-radius: 8px; font-family: inherit; font-size: 13px; }

/* ---------- automation settings ---------- */
.auto-master { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin-bottom: 16px; }
.auto-master.is-paused { border-color: #e4b35a; }
.auto-master-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auto-master-label { font-size: 16px; }
.auto-paused-banner { background: #fde7c2; color: #8a5a00; border: 1px solid #e4b35a; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-weight: 600; }
.paused-note { color: #8a5a00; background: #fde7c2; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.auto-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.auto-steps { display: flex; flex-direction: column; gap: 16px; }
.auto-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.auto-card.is-off { opacity: 0.6; }
.auto-h { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.auto-num { display: inline-flex; width: 24px; height: 24px; border-radius: 999px; background: var(--blue); color: #fff; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.auto-on { margin-left: auto; font-weight: 500; }
.auto-copyrow { display: flex; gap: 8px; align-items: center; }
.auto-copyrow .text-input { flex: 1; font-family: 'Geist Mono', monospace; font-size: 12px; }
.auto-srcs { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-height: 180px; overflow-y: auto; }
.auto-hours { display: flex; gap: 10px; }
.auto-side { display: flex; flex-direction: column; gap: 16px; }
.auto-side-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.auto-side-card.auto-dark { background: var(--ink); color: var(--bg); }
.auto-dark .muted { color: #cfccc4; }
.auto-side-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.auto-stats { font-size: 14px; margin: 6px 0; }
.auto-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); margin: 8px 0; overflow: hidden; }
.auto-bar-fill { height: 100%; width: var(--pct, 0); background: #6ea0ff; }
.auto-ready-btn { margin-top: 12px; width: 100%; }
.nav-quiet-inline { font-size: 13px; color: var(--blue); }

/* ---------- lead finder: searches + website-tool tags ---------- */
.search-list { display: flex; flex-direction: column; gap: 10px; }
.search-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.search-row.is-off { opacity: 0.6; }
.search-row-main { min-width: 0; }
.search-row-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; flex: none; }
.search-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.search-fieldset legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; max-height: 200px; overflow-y: auto; }
.check-inline { display: flex; align-items: center; gap: 8px; }
.panel-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tool-tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--chip, #eceadf); color: var(--ink); }
.ein-tag { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); font-family: 'Geist Mono', monospace; }

/* ---------- stage 11b: contact finder markers ---------- */
.general-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: 999px; background: var(--chip, #eceadf); color: #5f5b52; }
.src-mark { font-size: 11px; color: var(--blue); text-decoration: none; margin-left: 4px; }
.src-mark:hover { text-decoration: underline; }
.panel-contact-find { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.gap-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #f3e4d8; color: #8a5a1e; }

/* ---------- Ready to send (queue) ---------- */
.queue-wrap { padding: 24px; max-width: 760px; margin: 0 auto; }
.queue-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.queue-head h1 { margin: 0; font-size: 24px; }
.queue-list { display: flex; flex-direction: column; gap: 16px; }
.queue-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.queue-org { font-size: 17px; font-weight: 700; }
.queue-sub { margin-bottom: 8px; }
.queue-origin { margin-top: 8px; }
.queue-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.queue-actions .btn { height: 48px; }
@media (max-width: 560px) {
    .queue-actions .btn { flex: 1 1 100%; }
}

/* ---------- toast ---------- */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px;
    font-size: 14px; z-index: 80;
}

/* ---------- stage 12: calling-view switch ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #2a2825; }
.view-switch-btn { border: 0; background: transparent; color: #cfccc4; font: inherit; font-size: 13px; padding: 6px 14px; cursor: pointer; }
.view-switch-btn.is-active { background: var(--blue); color: #fff; }

/* ---------- stage 12: one lead at a time (dialer) ---------- */
body.is-dialer { height: auto; }
.dialer { padding: 18px 24px 28px; max-width: 1440px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 18px; }

.dialer-strip { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
    padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.dialer-count { font-weight: 700; font-size: 14px; white-space: nowrap; }
.dialer-bar { width: 200px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.dialer-bar-fill { height: 100%; width: var(--pct, 0); background: var(--blue); }
.dialer-strip-spacer { flex-grow: 1; }
.dialer-keys { font-family: 'Geist Mono', monospace; font-size: 12px; }

/* top: two equal columns */
.dialer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.dialer-pane { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px; }
.dialer-head h1 { font-size: 22px; margin: 0; }
.dialer-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dialer-pill { padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.dialer-pill-time { background: #eef7f0; color: #1f5e34; }
.dialer-fields { display: flex; flex-direction: column; }
.dialer-field { display: flex; gap: 12px; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--border-soft); }
.dialer-label { width: 80px; flex: none; color: var(--muted); }
.dialer-val { min-width: 0; }
.dialer-block { display: flex; flex-direction: column; gap: 6px; }
.dialer-block-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.fit-btns { display: flex; gap: 6px; }
.fit-btn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--input-border);
    background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.fit-btn.is-active { border: 2px solid var(--blue); background: var(--blue-tint); color: var(--blue-dark); font-weight: 600; }
.dialer-fit-reason { font-size: 13px; line-height: 1.4; }

/* right column: call strip + call card */
.dialer-callcol { display: flex; flex-direction: column; gap: 14px; }
.dialer-callbar { min-height: 76px; border-radius: 14px; background: var(--blue); color: #fff;
    display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 22px; flex-wrap: wrap; }
.dialer-number { font-size: 26px; flex-grow: 1; }
.dialer-number.is-empty { font-size: 18px; font-weight: 600; opacity: 0.85; }
.dialer-call { height: 50px; padding: 0 22px; border-radius: 10px; background: #fff; color: var(--blue-dark);
    font-size: 16px; font-weight: 700; display: flex; align-items: center; }
.dialer-call:hover { color: var(--blue-dark); text-decoration: none; opacity: 0.92; }
.dialer-callbtn { height: 50px; padding: 0 16px; border-radius: 10px; border: 1px solid #fff; background: transparent;
    color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.dialer-callcard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.dialer-callcard .disp-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: disp; }
.dialer-callcard .disp-btn { min-height: 44px; counter-increment: disp; text-align: left; }
.dialer-callcard .disp-btn:nth-child(-n+9)::before { content: counter(disp); font-weight: 700; opacity: 0.55; margin-right: 6px; }
.dialer-actions { display: flex; gap: 12px; align-items: center; margin-top: auto; }
.dialer-actions-spacer { flex-grow: 1; }
.dialer-skip { min-height: 54px; }
.dialer-save { min-height: 54px; font-size: 16px; }

/* full-width sections below */
.dialer-section { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px;
    display: flex; flex-direction: column; gap: 10px; }
.dialer-sec-head { display: flex; align-items: center; gap: 8px; }
.dialer-sec-head .dialer-block-h { flex-grow: 1; }

.dialer-histlist { display: flex; flex-direction: column; }
.dialer-hist-row { display: grid; grid-template-columns: 150px 150px 120px minmax(0, 1fr); gap: 14px; align-items: center;
    padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.hist-pill { justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--border-soft); color: var(--muted); font-size: 12px; font-weight: 600; }
.hist-pill-in { background: #e9f5ec; color: #1f5e34; }
.hist-pill-out { background: var(--blue-tint); color: var(--blue-dark); }
.hist-when, .hist-who { color: var(--muted); font-size: 13px; }
.hist-text { min-width: 0; display: flex; gap: 8px; }
.hist-subj { font-weight: 600; white-space: nowrap; }
.hist-start { color: #3d3a33; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dialer-hist-more { align-self: flex-start; padding-top: 8px; font-size: 13px; }

.dialer-intel-preview { font-size: 14px; line-height: 1.5; color: #3d3a33; max-width: 760px; }
.dialer-intel-h { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.dialer-intel-also { font-size: 13px; }

.dialer-notecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dialer-notecard { padding: 10px 12px; border-radius: 10px; background: var(--head-bg); font-size: 14px;
    display: flex; flex-direction: column; gap: 3px; }
.dialer-notecard.is-pinned { background: var(--blue-tint); }
.dialer-note-meta { font-size: 12px; color: var(--muted); }

.dialer-upnext { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dialer-upnext-card { text-align: left; background: #fcfbf8; border: 1px solid var(--border-soft); border-radius: 12px;
    padding: 12px 14px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.dialer-upnext-card:hover { border-color: var(--blue); }
.upnext-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upnext-org { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upnext-reason { font-size: 12px; padding: 1px 8px; border-radius: 999px; flex: none; background: var(--border-soft); color: var(--muted); }
.upnext-sub { font-size: 13px; }
.upnext-warm { background: #fdeee2; color: #8a4b1e; }
.upnext-overdue { background: #fdeee2; color: var(--overdue); }
.upnext-today { background: var(--border-soft); color: var(--ink); }
.upnext-new { background: #e9f5ec; color: #1f5e34; }

.due-badge { display: inline-block; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.due-badge.due-late { background: #fdeee2; color: #8a3d08; }
.due-badge.due-today { background: var(--blue-tint); color: var(--blue-dark); }
.due-badge.due-plain { background: var(--head-bg); color: var(--muted); }

.dialer-done { text-align: center; padding: 80px 20px; }
.dialer-done h2 { font-size: 22px; margin-bottom: 8px; }

@media (max-width: 1100px) {
    .dialer-top { grid-template-columns: 1fr; }
    .dialer-notecards { grid-template-columns: 1fr; }
    .dialer-upnext { grid-template-columns: 1fr 1fr; }
    .dialer-hist-row { grid-template-columns: 1fr; gap: 2px; }
    .hist-text { white-space: normal; }
}
@media (max-width: 680px) {
    .dialer-upnext { grid-template-columns: 1fr; }
}

/* ---------- stage 21: balanced automation page ---------- */
.settings-wrap.is-wide { max-width: none; }
.automation-root { display: flex; flex-direction: column; gap: 16px; }

.auto-top-head { display: flex; gap: 16px; align-items: flex-end; }
.auto-top-intro { flex-grow: 1; min-width: 0; }
.auto-top-intro h1 { margin: 0; font-size: 26px; }
.auto-top-intro p { margin: 6px 0 0; line-height: 1.5; }
.auto-status { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 15px; flex: none; }

.auto-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.auto-lastnight { background: var(--ink); color: #f5f4ef; border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.auto-ln-head { display: flex; align-items: center; }
.auto-ln-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #d6d3ca; flex-grow: 1; }
.auto-ln-ok { font-size: 12px; color: #a9d8b6; }
.auto-ln-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.auto-ln-stat { display: flex; flex-direction: column; gap: 2px; }
.auto-ln-num { font-size: 26px; font-weight: 700; color: #f5f4ef; }
.auto-ln-cap { font-size: 12px; color: #d6d3ca; }
.auto-ln-barwrap { display: flex; flex-direction: column; gap: 6px; }
.auto-ln-bar { height: 8px; border-radius: 4px; background: #33312c; overflow: hidden; }
.auto-ln-bar-fill { height: 100%; width: var(--pct, 0); background: #f5f4ef; }
.auto-ln-barlabel { font-size: 12px; color: #d6d3ca; }
.auto-ln-empty { color: #d6d3ca; font-size: 14px; }
.auto-ready-btn { height: 40px; border-radius: 10px; background: #f5f4ef; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin-top: auto; }
.auto-ready-btn:hover { color: var(--ink); text-decoration: none; opacity: 0.92; }

.auto-limits { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.auto-limits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.auto-lim-field { display: flex; flex-direction: column; gap: 5px; }
.auto-lim-label { font-size: 13px; font-weight: 600; color: #3d3a33; }
.auto-lim-input { width: 120px; font-family: 'Geist Mono', monospace; }
.auto-lim-hint { font-size: 12px; color: var(--muted); }
.auto-hours { display: flex; gap: 8px; align-items: center; }
.auto-limits-foot { display: flex; justify-content: flex-end; margin-top: auto; }

.auto-eachnight { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.auto-en-top { display: flex; align-items: center; gap: 14px; padding-bottom: 6px; }
.auto-en-top .auto-side-h { flex-grow: 1; margin: 0; }
.auto-en-table { display: flex; flex-direction: column; }
.auto-en-row { display: grid; grid-template-columns: 1.3fr repeat(6, minmax(0, 0.7fr)) 0.8fr 1fr; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: 14px; }
.auto-en-headrow { border-top: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-bottom: 6px; }
.auto-en-night { font-weight: 600; }
.auto-en-status { font-weight: 600; color: var(--muted); }
.auto-en-status.auto-en-ok { color: #1f5e34; }
.auto-en-month strong { color: var(--ink); }

.auto-steps-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding-top: 8px; }
.auto-step { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; display: grid; grid-template-columns: 300px minmax(0, 1fr) 260px; gap: 28px; align-items: start; }
.auto-step.is-off { opacity: 0.62; }
.auto-step-info { grid-column: 1; grid-row: 1; display: flex; gap: 12px; }
.auto-step-mid { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 12px; }
.auto-step-ctl { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.auto-find-table { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.auto-num { width: 30px; height: 30px; flex: none; border-radius: 999px; background: var(--blue-tint); color: var(--blue-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.auto-step-head { display: flex; flex-direction: column; gap: 5px; }
.auto-step-name { font-size: 17px; font-weight: 700; }
.auto-step-desc { font-size: 14px; line-height: 1.45; color: var(--muted); }

.auto-switch { display: flex; align-items: center; gap: 10px; }
.auto-switch-label { font-size: 14px; font-weight: 600; }
.auto-toggle { width: 52px; height: 30px; flex: none; border-radius: 999px; border: 0; background: var(--input-border); padding: 3px; display: flex; justify-content: flex-start; cursor: pointer; }
.auto-toggle[aria-pressed="true"] { background: var(--blue); justify-content: flex-end; }
.auto-knob { width: 24px; height: 24px; border-radius: 999px; background: #fff; }
.auto-toggle-sm { width: 44px; height: 26px; }
.auto-toggle-sm .auto-knob { width: 20px; height: 20px; }
.auto-ctl-field { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.auto-ctl-label { font-size: 13px; font-weight: 600; color: #3d3a33; }
.auto-ctl-field select { width: 240px; }
.auto-save { min-width: 90px; }
.auto-cron-meta { font-size: 13px; color: var(--muted); text-align: right; }
.auto-mid-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.auto-search-row { display: grid; grid-template-columns: 1.4fr 0.9fr 0.5fr 1fr 1fr 1.1fr 1.3fr 0.4fr 170px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.auto-search-head { border-top: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.auto-search-row.is-off { opacity: 0.55; }
.auto-search-name { font-weight: 600; font-size: 14px; }
.auto-search-ctl { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.auto-search-lastrun { grid-column: 1 / -1; font-size: 12px; color: var(--muted); padding-bottom: 4px; }
.src-code { padding: 2px 7px; border-radius: 6px; background: var(--head-bg); font-family: 'Geist Mono', monospace; font-size: 12px; }
.auto-search-add { align-self: flex-start; margin-top: 8px; }
.btn-dashed { border: 1px dashed var(--input-border); background: var(--card); color: var(--muted); }

/* ---------- stage 14: automation help ---------- */
.guide-q { width: 18px; height: 18px; flex: none; border-radius: 999px; border: 1px solid var(--input-border);
    background: var(--card); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
    padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 4px; }
.guide-q:hover { border-color: var(--blue); color: var(--blue); }
.auto-side-h-row { display: flex; align-items: center; gap: 4px; }
.auto-lastnight .guide-q { border-color: #5f5b52; background: transparent; color: #d6d3ca; }
.auto-lastnight .guide-q:hover { border-color: #f5f4ef; color: #f5f4ef; }

.read-guide h3 { font-size: 22px; margin: 0 0 10px; }
.read-guide h4 { font-size: 18px; margin: 22px 0 6px; }
.read-guide h5 { font-size: 16px; margin: 18px 0 6px; }
.read-guide ul, .read-guide ol { margin: 6px 0 10px; padding-left: 22px; }
.read-guide li { margin: 3px 0; }
.read-guide .intel-table { width: 100%; border-collapse: collapse; margin: 10px 0; table-layout: fixed; }
.read-guide .intel-table th, .read-guide .intel-table td { text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: top; word-wrap: break-word; overflow-wrap: anywhere; }
.read-guide .intel-table th { background: var(--head-bg); font-weight: 600; }

@media (max-width: 1000px) {
    .auto-top-head { flex-direction: column; align-items: stretch; }
    .auto-two { grid-template-columns: 1fr; }
    .auto-limits-grid { grid-template-columns: 1fr; }
    .auto-step { grid-template-columns: 1fr; }
    .auto-step-info, .auto-step-mid, .auto-step-ctl, .auto-find-table { grid-column: 1; grid-row: auto; }
    .auto-step-ctl { align-items: stretch; }
    .auto-ctl-field { align-items: stretch; }
    .auto-ctl-field select { width: 100%; }
    .auto-en-table, .auto-find-table { overflow-x: auto; }
    .auto-en-row, .auto-search-row { min-width: 640px; }
    .auto-search-lastrun { min-width: 0; }
}