kbd { background:#2a2a2a; padding:2px 6px; border-radius:4px; border:1px solid #444; font-size:11px; font-weight:700; color:#e5e5e5; font-family:inherit; }
  :root {
    --bg: #0a0a0a; --panel: #111; --panel2: #151515; --border: #222;
    --text: #c8c8c8; --text2: #999; --text3: #666;
    --me-bg: #1a2a3a; --me-border: #2a4a6a;
    --them-bg: #1e1e1e; --them-border: #333;
    --ig: #e6683c; --ig-bg: #2a1520;
    --wa: #25d366; --wa-bg: #0d2e1a;
    --sms: #a78bfa; --sms-bg: #1a1530;
    --email: #60a5fa; --email-bg: #0f1a2e;
    --tg: #29b6f6; --tg-bg: #0d1f2e;
    --call: #ff9800; --call-bg: #2e1e0a;
    --all: #888; --all-bg: #1a1a1a;
    --badge-ai: #065f46; --badge-ai-bg: #d1fae5;
    --badge-queued: #9a3412; --badge-queued-bg: #fff7ed;
    --badge-sent: #1e40af; --badge-sent-bg: #eff6ff;
    --accent: #8bb4d4;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* Header */
  .header {
    padding: 4px 20px; background: var(--panel); border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .header .title-group { display: flex; align-items: center; gap: 8px; }
  .header-tab {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px 3px; background: var(--panel2); color: var(--text3);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 5px 5px 0 0; text-decoration: none;
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s;
    position: relative; top: 1px;
  }
  .header-tab:hover { background: #1e1e1e; color: var(--text2); }
  .header-tab.active-tab {
    background: var(--bg); color: var(--text1); font-weight: 600;
    border-color: var(--border); z-index: 1;
  }
  .back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    background: var(--panel2); border: 1px solid var(--border);
    color: var(--text2); text-decoration: none;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: background .15s;
  }
  .back-btn:hover { background: #222; color: var(--text1); }
  .sheet-overlay {
    display: none; flex: 1; min-height: 0; z-index: 50;
    background: var(--bg);
  }
  .sheet-overlay.visible { display: flex; }
  .sheet-overlay iframe { width: 100%; height: 100%; border: none; }
  .header h1 { font-size: 14px; font-weight: 600; }
  .header .db-badge { background: #1a3a1a; color: #4ade80; padding: 2px 8px; border-radius: 10px; font-size: 10px; }

  /* Layout table */
  .layout { display: flex; width: 100%; }
  .info-col { width: 220px; min-width: 160px; flex-shrink: 0; padding: 10px; overflow-y: auto; max-height: calc(100vh - 45px); resize: horizontal; }
  .chat-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

  /* Info boxes */
  .box { border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 12px; background: var(--panel); }
  .box h3 { margin: 0 0 10px 0; font-size: 13px; font-weight: 600; color: var(--text2); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .small { font-size: 11px; color: var(--text3); }
  .info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-bottom: 6px; }
  .info-row.full { grid-template-columns: 1fr; }
  .info-row strong { font-size: 12px; }

  /* Action buttons */
  .action-rows { display: flex; flex-direction: column; gap: 4px; }
  .action-row { display: flex; flex-wrap: wrap; gap: 4px; }
  .action-row > * { flex: 0 1 auto; }
  .action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px;
    background: var(--panel2); color: var(--text2); font-size: 10px; cursor: pointer;
    text-decoration: none; white-space: nowrap; min-width: 0; overflow: hidden;
  }
  .action-btn:hover { background: #1a1a1a; border-color: #444; text-decoration: none; }
  .action-btn.danger { color: #ef4444; border-color: #7f1d1d; }
  .action-btn.danger:hover { background: #1a0a0a; }

  /* Mute toggle */
  .switch { position: relative; display: inline-block; width: 38px; height: 20px; }
  .switch input { opacity: 0; width: 0; height: 0; }
  .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #333; transition: .2s; border-radius: 20px; border: 1px solid #555; }
  .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background: #999; transition: .2s; border-radius: 50%; }
  input:checked + .slider { background: #166534; }
  input:checked + .slider:before { transform: translateX(18px); background: #4ade80; }

  /* Timeline: column headers (sticky) + scrollable body + input row */
  .timeline { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

  /* Horizontal scroll wrapper — wraps headers, body, and inputs together */
  .timeline-hscroll { display: flex; flex-direction: column; flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0; }
  .timeline-hscroll::-webkit-scrollbar { height: 6px; }
  .timeline-hscroll::-webkit-scrollbar-track { background: var(--bg); }
  .timeline-hscroll::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

  /* Column headers row */
  .tl-headers { display: flex; flex-shrink: 0; min-width: 1310px; }
  .tl-col-header {
    flex: 1 0 187px;
    font-size: 11px; font-weight: 600; padding: 6px 10px; background: var(--panel2);
    border-bottom: 1px solid var(--border); border-right: 2px solid #222;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
  }
  .tl-col-header:last-child { border-right: none; }
  .tl-col-header .icon {
    width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
  }
  .tl-col-header .icon.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  .tl-col-header .icon.wa { background: #25d366; }
  .tl-col-header .icon.sms { background: #a78bfa; }
  .tl-col-header .icon.email { background: #60a5fa; }
  .tl-col-header .icon.tg { background: #29b6f6; }
  .tl-col-header .icon.call { background: #ff9800; }
  .tl-col-header .icon.all { background: #555; }
  .tl-col-header .msg-count { font-weight: 400; color: var(--text3); margin-left: auto; }

  /* Active channel highlight */
  .tl-col-header.active-ch { box-shadow: inset 0 -3px 0 #8bb4d4; background: #1a2530; border-radius: 6px 6px 0 0; }
  .tl-cell.active-ch { background: rgba(139,180,212,0.04); box-shadow: inset 1px 0 0 rgba(139,180,212,0.15), inset -1px 0 0 rgba(139,180,212,0.15); }
  .tl-input-cell.active-ch, .tl-cta-cell.active-ch { background: rgba(139,180,212,0.06); box-shadow: inset 1px 0 0 rgba(139,180,212,0.15), inset -1px 0 0 rgba(139,180,212,0.15); }

  /* Scrollable message body */
  .tl-body { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 1310px; display: flex; flex-direction: column; }
  .tl-spacer { flex: 1 0 0; min-height: 0; }
  .tl-body::-webkit-scrollbar { width: 6px; }
  .tl-body::-webkit-scrollbar-track { background: var(--bg); }
  .tl-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

  /* Each row = one message across all columns */
  .tl-row { display: flex; min-width: 1310px; border-bottom: 1px solid #111; position: relative; }
  .tl-row.overlap { margin-top: -18px; }
  .tl-cell {
    flex: 1 0 187px; width: 0; padding: 3px 6px;
    border-right: 2px solid #222; min-height: 8px; overflow: hidden;
  }
  .tl-cell:last-child { border-right: none; }
  .tl-cell.has-msg { padding: 4px 6px; }

  /* Platform-tinted bubbles — worker (them) = dark, client (me) = noticeably lighter */
  .msg.them .bubble.plat-instagram { background: #3a1222; border-color: #5a2040; }
  .msg.me   .bubble.plat-instagram { background: transparent; border-color: #5a2040; color: #d0a0b0; }
  .msg.them .bubble.plat-whatsapp  { background: #0a3016; border-color: #1a5028; }
  .msg.me   .bubble.plat-whatsapp  { background: transparent; border-color: #1a5028; color: #a0d0a8; }
  .msg.them .bubble.plat-email     { background: #2a2208; border-color: #4a3c18; }
  .msg.me   .bubble.plat-email     { background: transparent; border-color: #4a3c18; color: #c8c098; }
  .msg.them .bubble.plat-sms       { background: #1e1540; border-color: #34255a; }
  .msg.me   .bubble.plat-sms       { background: transparent; border-color: #34255a; color: #b8b0d0; }
  .msg.them .bubble.plat-telegram  { background: #0a2038; border-color: #183858; }
  .msg.me   .bubble.plat-telegram  { background: transparent; border-color: #183858; color: #a0c8e0; }
  .msg.them .bubble.plat-call      { background: #2e1a08; border-color: #4a2e12; }
  .msg.me   .bubble.plat-call      { background: transparent; border-color: #4a2e12; color: #c8b898; }
  .plat-icon { display: inline-flex; width: 12px; height: 12px; border-radius: 50%; align-items: center; justify-content: center; font-size: 6px; font-weight: 700; color: #fff; flex-shrink: 0; vertical-align: middle; margin-right: 2px; }
  .plat-icon.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743); }
  .plat-icon.wa { background: #25d366; }
  .plat-icon.sms { background: #a78bfa; }
  .plat-icon.email { background: #d4a017; }
  .plat-icon.tg { background: #29b6f6; }
  .plat-icon.call { background: #ff9800; }

  /* Input row at bottom */
  .tl-inputs { display: flex; flex-shrink: 0; border-top: 1px solid var(--border); min-width: 1310px; }
  .tl-input-cell {
    flex: 1 0 187px;
    display: flex; gap: 4px; padding: 4px; background: var(--panel2);
    border-right: 2px solid #222; overflow: hidden;
  }
  .tl-input-cell:last-child { border-right: none; }
  .tl-input-cell textarea {
    flex: 1; min-height: 26px; max-height: 40px; resize: vertical; border: 1px solid var(--border);
    border-radius: 4px; padding: 6px; font-family: inherit; font-size: 11px;
    background: var(--bg); color: var(--text);
  }
  .tl-input-cell button.send-btn {
    padding: 0 8px; background: #1e3a5f; color: #93c5fd; border: 0; border-radius: 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    max-height: 40px; min-height: 26px; transition: background .15s;
  }
  .tl-input-cell button.send-btn:hover { background: #2a5a8f; }
  .tl-input-cell button.send-btn svg { width: 14px; height: 14px; fill: #93c5fd; transform: rotate(-30deg); }

  /* Bubbles */
  .msg { display: flex; padding: 0; }
  .msg.me { justify-content: flex-end; }
  .msg.them { justify-content: flex-start; }
  .bubble {
    max-width: 95%; padding: 5px 8px; border-radius: 8px; font-size: 11px; line-height: 1.3;
    word-break: break-word; display: flex; flex-direction: column; gap: 1px;
  }
  .msg.them .bubble { background: var(--them-bg); border: 1px solid var(--them-border); border-bottom-left-radius: 3px; }
  .msg.me .bubble { background: var(--me-bg); border: 1px solid var(--me-border); border-bottom-right-radius: 3px; }
  .bubble .text { white-space: pre-wrap; }
  .bubble .meta { font-size: 8px; color: var(--text3); display: flex; gap: 3px; align-items: center; line-height: 1; justify-content: flex-end; }

  .badge { display: inline-flex; padding: 0 3px; border-radius: 6px; font-size: 7px; font-weight: 600; }
  .badge.ai { background: var(--badge-ai-bg); color: var(--badge-ai); }
  .badge.queued { background: var(--badge-queued-bg); color: var(--badge-queued); }
  .badge.sent { background: var(--badge-sent-bg); color: var(--badge-sent); }

  /* Collapsible email bubbles */
  .bubble .text.email-collapsed { max-height: 2.6em; overflow: hidden; position: relative; }
  .bubble .email-expand {
    display: inline-flex; align-items: center; gap: 2px; cursor: pointer;
    font-size: 8px; color: var(--accent); margin-top: 2px; user-select: none;
  }
  .bubble .email-expand:hover { text-decoration: underline; }
  .bubble .text.email-expanded { max-height: none; }

  /* Call CTA + Email template buttons in input row */
  .tl-cta-cell {
    flex: 1 0 187px; display: flex; align-items: center; justify-content: center;
    padding: 6px; background: var(--panel2); border-right: 2px solid #222;
  }
  .tl-cta-cell:last-child { border-right: none; }
  .cta-call {
    padding: 4px 10px; background: #1a5a2a; color: #4ade80; border: 1px solid #2a7a3a;
    border-radius: 5px; cursor: pointer; font-size: 10px; font-weight: 600;
  }
  .cta-call:hover { background: #1e6e32; }
  .email-tpl-group { display: flex; flex-wrap: nowrap; gap: 4px; padding: 2px; overflow-x: auto; max-height: 48px; }
  .email-tpl-group::-webkit-scrollbar { height: 3px; }
  .email-tpl-group::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
  .email-tpl-btn {
    padding: 4px 8px; background: #1a2030; color: var(--email); border: 1px solid #2a3548;
    border-radius: 4px; cursor: pointer; font-size: 9px; font-weight: 600; white-space: nowrap;
  }
  .email-tpl-btn:hover { background: #243048; }

  /* Email status badges in activity log */
  .email-stat { display: inline-block; padding: 1px 5px; border-radius: 6px; font-size: 8px; font-weight: 700; text-transform: uppercase; margin-left: 4px; }
  .email-stat.opened { background: #1a2a1a; color: #86efac; }
  .email-stat.read { background: #1a2a3a; color: #93c5fd; }
  .email-stat.replied { background: #1a3a1a; color: #4ade80; }

  .empty-state { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text3); font-size: 12px; }

  /* AI Runs table */
  .runs-section { flex-shrink: 0; overflow: hidden; transition: max-height .2s ease; }
  .runs-section .runs-drag {
    height: 6px; cursor: ns-resize; background: var(--border);
    display: flex; align-items: center; justify-content: center;
  }
  .runs-section .runs-drag::after {
    content: ''; width: 30px; height: 2px; background: #555; border-radius: 1px;
  }
  .runs-section .runs-drag:hover { background: #333; }
  .runs-section .runs-inner { padding: 0 12px 12px; overflow-y: auto; height: 100%; }
  .runs-section.collapsed { max-height: 28px !important; }
  .runs-section.collapsed .runs-inner { display: none; }
  .runs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 12px; cursor: pointer; user-select: none;
  }
  .runs-header h3 { font-size: 12px; margin: 0; }
  .runs-header .collapse-arrow { font-size: 10px; color: var(--text3); transition: transform .2s; }
  .runs-section.collapsed .collapse-arrow { transform: rotate(180deg); }
  .runs-table { width: 100%; border-collapse: collapse; font-size: 11px; }
  .runs-table th, .runs-table td { border: 1px solid var(--border); padding: 4px 6px; vertical-align: top; }
  .runs-table td:first-child { white-space: nowrap; }
  .runs-table th { background: var(--panel2); color: var(--text2); font-weight: 600; font-size: 10px; }
  .runs-table td { color: var(--text3); }
  .runs-table td strong { color: var(--text2); }
  .runs-table tr.log-type-tool td:nth-child(3) { color: #c8a0ff; }
  .runs-table tr.log-type-msg-out td:nth-child(3) { color: var(--text2); }
  .runs-table tr.log-type-msg-in td:nth-child(3) { color: var(--text); }
  .runs-table .run-plat-pill { display: inline-block; padding: 1px 5px; border-radius: 6px; font-size: 8px; font-weight: 700; text-transform: uppercase; }
  .runs-table .run-plat-pill.instagram { background: var(--ig-bg); color: var(--ig); }
  .runs-table .run-plat-pill.whatsapp  { background: var(--wa-bg); color: var(--wa); }
  .runs-table .run-plat-pill.email     { background: var(--email-bg); color: var(--email); }
  .runs-table .run-plat-pill.sms       { background: var(--sms-bg); color: var(--sms); }
  .runs-table .run-plat-pill.telegram  { background: var(--tg-bg); color: var(--tg); }
  .runs-table .run-plat-pill.call      { background: var(--call-bg); color: var(--call); }

  /* Sidebar contact list */
  .sidebar { width: 140px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
  .sidebar-header { padding: 10px 10px; border-bottom: 1px solid var(--border); }
  .sidebar-header h2 { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
  .contact-list { flex: 1; overflow-y: auto; }
  .contact-item { padding: 6px 8px; border-bottom: 1px solid #1a1a1a; cursor: pointer; }
  .contact-item:hover { background: #1a1a1a; }
  .contact-item.active { background: #1a2a3a; border-left: 3px solid var(--accent); }
  .contact-item.escalated { background: #2a0a0a; }
  .contact-item.escalated:hover { background: #3a1010; }
  .contact-item.escalated.active { background: #2a1020; border-left-color: #ef4444; }
  .contact-name { font-size: 11px; font-weight: 600; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 5px; justify-content: space-between; }
  .notif-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .notif-dot.unread { background: #3b82f6; box-shadow: 0 0 4px #3b82f6; }
  .notif-dot.pending { background: #eab308; box-shadow: 0 0 4px #eab308; }
  .stale-badge { font-size: 8px; font-weight: 700; color: #f97316; background: #2a1a0a; padding: 1px 4px; border-radius: 6px; flex-shrink: 0; }
  .contact-count { font-weight: 400; color: var(--text3); font-size: 9px; }
  .contact-eltv { font-size: 9px; color: #4ade80; font-weight: 600; }
  .sort-controls { display: flex; gap: 1px; margin-top: 4px; flex-wrap: nowrap; }
  .sort-btn {
    padding: 1px 2px; border: 1px solid var(--border); border-radius: 3px; background: var(--panel2);
    color: var(--text3); font-size: 8px; cursor: pointer; display: flex; align-items: center; gap: 0; flex-shrink: 0; line-height: 1;
  }
  .sort-btn:hover { background: #1a1a1a; border-color: #444; }
  .sort-btn.active { color: var(--accent); border-color: var(--accent); }
  .contact-pills { display: flex; gap: 3px; }
  .pill { padding: 1px 5px; border-radius: 6px; font-size: 8px; font-weight: 700; text-transform: uppercase; }
  .pill.instagram { background: var(--ig-bg); color: var(--ig); }
  .pill.whatsapp { background: var(--wa-bg); color: var(--wa); }
  .pill.sms { background: var(--sms-bg); color: var(--sms); }
  .pill.email { background: var(--email-bg); color: var(--email); }
  .pill.telegram { background: var(--tg-bg); color: var(--tg); }
  .pill.call { background: var(--call-bg); color: var(--call); }

  /* Pipeline progress bar — chevron style */
  .pipeline-bar {
    display: flex; align-items: center; padding: 4px 20px;
    background: var(--panel2); border-bottom: 1px solid var(--border);
    min-height: 28px;
  }
  .pipeline { display: flex; align-items: center; gap: 0; overflow-x: auto; flex: 1; min-width: 0; }
  .pipeline::-webkit-scrollbar { height: 3px; }
  .pipeline::-webkit-scrollbar-track { background: transparent; }
  .pipeline::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
  .pipe-step {
    display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 14px;
    font-size: 9px; font-weight: 600; white-space: nowrap; position: relative;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
  }
  .pipe-step:first-child { padding-left: 8px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); border-radius: 3px 0 0 3px; }
  .pipe-step .pipe-icon { font-size: 8px; }
  .pipe-step.done { background: #0f3a1a; color: #4ade80; }
  .pipe-step.active { background: #1a2a3a; color: #60a5fa; }
  .pipe-step.pending { background: #1a1a1a; color: var(--text3); }
  .pipe-step.warn { background: #2a2008; color: #fbbf24; }
  .pipe-leads { margin-left: 8px; padding: 3px 8px; background: #1a1a2a; color: #a78bfa; border-radius: 10px; font-size: 9px; font-weight: 600; white-space: nowrap; }

  /* Info panel collapse */
  .info-col { transition: width .2s, padding .2s; }
  .info-col.collapsed { width: 0; min-width: 0; padding: 0; overflow: hidden; border: none; }
  .info-col:not(.collapsed) { overflow-y: auto; overflow-x: hidden; }
  .info-toggle { position: absolute; left: 0; top: 12px; z-index: 5;
    background: var(--panel); border: 1px solid var(--border); border-left: none; border-radius: 0 6px 6px 0;
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text3); font-size: 11px; font-weight: 700; font-style: italic; font-family: Georgia, serif; }
  .info-toggle:hover { color: var(--text); background: var(--panel2); }

  /* Typing indicator */
  .typing-indicator { padding: 4px 12px; font-size: 10px; color: var(--text3); font-style: italic; height: 18px; }
  .typing-indicator .dots { display: inline-block; }
  .typing-indicator .dots span { animation: blink 1.4s infinite both; }
  .typing-indicator .dots span:nth-child(2) { animation-delay: .2s; }
  .typing-indicator .dots span:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%,80%,100% { opacity: 0; } 40% { opacity: 1; } }

  /* Date divider */
  .date-divider { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
  .date-divider span { font-size: 9px; color: var(--text3); white-space: nowrap; font-weight: 600; }
  .date-divider::before, .date-divider::after { content: ''; flex: 1; border-top: 1px solid #222; }

  /* Contact hover preview */
  .contact-item { position: relative; }
  .contact-preview { display: none; position: absolute; left: 100%; top: 0; z-index: 20;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px;
    width: 220px; font-size: 10px; color: var(--text2); box-shadow: 0 4px 12px rgba(0,0,0,.5); pointer-events: none; }
  .contact-item:hover .contact-preview { display: block; }
  .contact-preview .preview-msg { color: var(--text); margin-top: 4px; font-style: italic; }

  /* Empty column state */
  .tl-empty { display: flex; align-items: center; justify-content: center; color: var(--text3);
    font-size: 9px; font-style: italic; padding: 20px 4px; text-align: center; }

  /* Avail toggle */
  .toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #444; border-radius: 20px; transition: .25s; }
  .toggle-slider::before { content: ''; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .25s; }
  .toggle-switch input:checked + .toggle-slider { background: #22c55e; }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

  /* World clock */
  .wclock { display: flex; gap: 10px; font-size: 11px; color: var(--text2); font-weight: 500; }
  .wclock span { white-space: nowrap; }
  .wclock span strong { font-weight: 700; }
  .wclock span.tz-active { color: #fbbf24; font-weight: 800; font-size: 12px; }
  .wclock span.tz-worker { color: #4ade80; font-weight: 800; font-size: 12px; }

  /* Full page layout */
  .page { display: flex; height: 100vh; overflow: hidden; }
  .right-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .main-content { flex: 1 0 0; min-height: 0; display: flex; overflow: hidden; transition: opacity 0.15s ease; }
  .main-content.fading { opacity: 0; }

  /* ============================================
     Shared page styles (all admin pages)
     ============================================ */

  /* Page wrapper */
  .v2-page { max-width: 1400px; margin: 0 auto; padding: 16px 20px; }

  /* Nav header */
  .v2-nav { display: flex; align-items: center; gap: 12px; padding: 8px 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
  .v2-nav h2 { font-size: 16px; font-weight: 600; margin: 0; }

  /* Dark tables */
  .v2-table { border-collapse: collapse; width: 100%; font-size: 12px; background: var(--panel); }
  .v2-table th, .v2-table td { border: 1px solid var(--border); padding: 6px 8px; vertical-align: middle; }
  .v2-table th { background: var(--panel2); font-weight: 600; color: var(--text2); font-size: 11px; white-space: nowrap; }
  .v2-table td { color: var(--text); }
  .v2-table tr:hover td { background: rgba(255,255,255,0.02); }
  .v2-table a { color: var(--accent); }
  .v2-table th[draggable="true"] { cursor: grab; user-select: none; position: relative; }
  .v2-table th[draggable="true"]:active { cursor: grabbing; }
  .v2-table th.dragging { opacity: 0.5; }
  .v2-table th.drag-over { border-left: 3px solid var(--accent); }

  /* Buttons */
  .v2-btn { padding: 6px 12px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel2); color: var(--text); font-size: 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .v2-btn:hover { background: #1e1e1e; border-color: #444; text-decoration: none; }
  .v2-btn.primary { background: #1e3a5f; color: #93c5fd; border-color: #2a5a8f; }
  .v2-btn.primary:hover { background: #2a5a8f; }
  .v2-btn.danger { background: #3a1010; color: #ef4444; border-color: #7f1d1d; }
  .v2-btn.danger:hover { background: #4a1515; }
  .v2-btn.success { background: #0f3a1a; color: #4ade80; border-color: #1a5a2a; }
  .v2-btn.success:hover { background: #1a5a2a; }
  .v2-btn.warn { background: #2a2008; color: #fbbf24; border-color: #4a3c18; }
  .v2-btn.warn:hover { background: #3a3010; }

  /* Form inputs */
  .v2-input, .v2-select, .v2-textarea { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 12px; }
  .v2-input:focus, .v2-select:focus, .v2-textarea:focus { outline: none; border-color: var(--accent); }
  .v2-textarea { resize: vertical; min-height: 44px; width: 100%; }

  /* Pagination */
  .v2-pagination { display: flex; justify-content: center; gap: 4px; margin: 16px 0; }
  .v2-pagination a, .v2-pagination span { padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; text-decoration: none; color: var(--text2); }
  .v2-pagination a:hover { background: var(--panel2); border-color: #444; text-decoration: none; }
  .v2-pagination .current { background: #1e3a5f; color: #93c5fd; border-color: #2a5a8f; }
  .v2-pagination .disabled { color: var(--text3); border-color: var(--border); }

  /* Filter/controls bar */
  .v2-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; }
  .v2-controls label { font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 4px; }
  .v2-controls select, .v2-controls input[type="text"] { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text); font-size: 12px; }

  /* Column toggle */
  .v2-col-toggle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .v2-col-toggle label { font-size: 11px; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--panel2); color: var(--text2); cursor: pointer; }
  .v2-col-toggle label:hover { border-color: #444; }
  .v2-col-toggle input:checked + span { color: var(--accent); font-weight: 600; }
  .v2-col-toggle .toggle-label { color: var(--text3); margin-right: 4px; }

  /* Message snippets */
  .v2-snippet { font-size: 11px; color: var(--text2); margin-bottom: 3px; border-left: 2px solid var(--border); padding-left: 6px; text-align: left; white-space: normal; }
  .v2-snippet.me { border-color: var(--accent); }
  .v2-snippet strong { color: var(--text); }

  /* Dark modal */
  .v2-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }
  .v2-modal { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 20px; width: 400px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
  .v2-modal h3 { margin: 0 0 16px; font-size: 14px; }
  .v2-modal label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 2px; }

  /* Status pills */
  .v2-pill { display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; }
  .v2-pill.online { background: #0f3a1a; color: #4ade80; }
  .v2-pill.offline { background: #3a1010; color: #ef4444; }
  .v2-pill.yes { background: #1a2a1a; color: #4ade80; }
  .v2-pill.no { color: var(--text3); }
  .v2-pill.muted { color: var(--text3); font-size: 10px; }

  /* Toggle button for sales online/offline */
  .v2-toggle-btn { padding: 4px 10px; border-radius: 16px; cursor: pointer; border: 1px solid var(--border); font-size: 11px; font-weight: 600; background: var(--panel2); }
  .v2-toggle-btn.online { background: #0f3a1a; color: #4ade80; border-color: #1a5a2a; }
  .v2-toggle-btn.offline { background: #3a1010; color: #ef4444; border-color: #7f1d1d; }

  /* Dark tooltip */
  [data-tooltip] { position: relative; }
  [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--panel2); color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100; margin-bottom: 4px; border: 1px solid var(--border); }

  /* Code blocks */
  .v2-code { background: var(--panel2); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--accent); }