:root {
    /* TenTrade brand palette */
    --pink: #F66584;
    --magenta: #D925C8;
    --grad: linear-gradient(135deg, #F66584 0%, #D925C8 100%);
    --grad-soft: linear-gradient(135deg, rgba(246,101,132,.10), rgba(217,37,200,.10));
    --navy: #202462;
    --cyan: #9EB6FF;
    --accent-green: #61CE70;
    --dark-grad: linear-gradient(160deg, #4D144B 0%, #222545 58%, #252628 100%);
    /* Rich magenta from the brand header image (bg-magenta.webp) — used as a heading accent */
    --mag-rich: #8c205d;
    --mag-deep: #5a0c46;
    --rich-grad: linear-gradient(100deg, #8c205d 0%, #D925C8 55%, #F66584 100%);

    /* Surfaces & text */
    --bg: #f9f9f9;
    --panel: #ffffff;
    --subtle: #f3f3f3;
    --border: #e8e8e8;
    --border-strong: #d4d4d4;
    --text: #1c1d1f;
    --muted: #555555;
    --danger: #dc3545;
    --warn: #b45309;
    --ok: #2f9e44;

    --radius-sm: .375rem;
    --radius: .5rem;
    --radius-lg: .75rem;
    --transition: 250ms ease;

    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-head: "Questrial", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: .2px; color: var(--text); }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 17px; margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.hidden { display: none; }
.ok { color: var(--ok); }
.warn { color: var(--warn); }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.sidebar {
    width: 232px; flex-shrink: 0; background: var(--dark-grad); color: #c7cad3;
    display: flex; flex-direction: column; padding: 20px 0; position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.brand {
    flex-shrink: 0;
    font-family: var(--font-head); font-weight: 400; font-size: 22px;
    padding: 0 22px 20px; letter-spacing: 2px;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The nav scrolls; brand (top) and footer (bottom) stay fixed even when it overflows. */
.sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nav-section {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 14px 22px 6px; font-size: 11px; text-transform: uppercase; color: rgba(255,255,255,.4);
    letter-spacing: .9px; background: none; border: none; font-family: inherit; cursor: pointer; text-align: left;
}
.nav-section:hover { color: rgba(255,255,255,.7); }
.nav-section::after {
    content: ''; flex-shrink: 0; width: 6px; height: 6px; margin-top: -2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease;
}
.nav-group.open > .nav-section::after { transform: rotate(-135deg); margin-top: 2px; }
.nav-group-items { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.nav-group.open > .nav-group-items { max-height: 600px; }
.nav-link {
    display: block; padding: 9px 22px; color: #c7cad3;
    border-left: 2px solid transparent; transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.nav-link.active { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--pink); font-weight: 500; }
.nav-admin { font-size: 13px; color: #9ea2ad; }
.nav-admin::before { content: "· "; }
.sidebar-foot { flex-shrink: 0; margin-top: auto; padding: 16px 22px 0; border-top: 1px solid rgba(255,255,255,.1); }
.me { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; }
.me-name { color: #fff; font-size: 13px; }
.me-role { font-size: 11px; color: rgba(255,255,255,.5); text-transform: capitalize; }
.sidebar-foot .link-btn { color: rgba(255,255,255,.6); }
.sidebar-foot .link-btn:hover { color: #fff; }
.content { flex: 1; padding: 30px 34px; max-width: 1140px; }
/* Data-dense pages (activity, sessions) use the full available width. */
.content-wide { max-width: none; }

/* Headings / tabs */
.page-head { position: relative; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.page-head::after {
    content: ""; position: absolute; right: 0; left: auto; bottom: -1px;
    width: 64px; height: 3px; border-radius: 3px; background-image: var(--rich-grad);
}
.tabs, .composer-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--border); }
.inbox-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inbox-bar .tabs { flex: 1; }
.inbox-tools { display: flex; align-items: flex-end; gap: 8px; margin-top: 16px; }
.inbox-search { flex: 0 0 auto; }
.inbox-search input[type=search] { width: 280px; max-width: 56vw; }
.inbox-search input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* Filter dropdown */
.filter-wrap { position: relative; }
.filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--panel); color: var(--text); cursor: pointer; position: relative;
}
.filter-btn:hover { background: var(--subtle); }
.filter-btn i { width: 17px; height: 17px; }
.filter-btn.active { border-color: var(--magenta); color: var(--magenta); }
.filter-btn.active::after {
    content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
    border-radius: 50%; background-image: var(--grad); border: 2px solid var(--panel);
}
.filter-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 240px;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 14px;
}
.filter-menu-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.filter-menu .check { border: none; padding: 5px 0; }
.filter-menu .field { margin: 8px 0 0; }
.filter-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.country-list { max-height: 140px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; }
.country-list .check { padding: 3px 0; }
.tab { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { text-decoration: none; color: var(--text); }
.tab.active { color: var(--magenta); border-bottom-color: var(--magenta); font-weight: 600; }
.badge { background: var(--subtle); border-radius: 10px; padding: 0 7px; font-size: 11px; color: var(--muted); }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--radius);
    border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
    cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; line-height: 1.2;
    transition: all var(--transition);
}
.btn:hover { background: var(--subtle); text-decoration: none; }
.btn-primary { background-image: var(--grad); border: none; color: #fff; box-shadow: 0 2px 8px rgba(217,37,200,.25); }
.btn-primary:hover { background-image: var(--grad); filter: brightness(1.06); }
.btn-sm { padding: 5px 11px; font-size: 13px; font-weight: 500; }
.btn-block { display: flex; width: 100%; margin-top: 8px; }
.link-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 13px; font-weight: 500; }
.link-btn:hover { color: var(--text); text-decoration: underline; }
.link-btn.danger { color: var(--danger); }
.btn-google { font-weight: 600; }
.btn-google .g {
    display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center;
    background: #fff; color: #ea4335; border-radius: 2px; font-weight: 700; border: 1px solid var(--border);
}

/* Cards / panels */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.alert { background: var(--grad-soft); border: 1px solid rgba(217,37,200,.2); border-left: 3px solid var(--magenta); padding: 11px 15px; border-radius: var(--radius); margin-bottom: 16px; }
.alert.error { background: #fdf2f2; border-color: #f5c2c7; border-left-color: var(--danger); }
.alert code { background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; font-size: 12px; }
.empty { padding: 60px; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }

/* Forms */
.row-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.row-form input, .row-form select { flex: 1; min-width: 140px; }
input[type=text], input[type=email], input[type=search], input[type=url],
input[type=number], input[type=password], input[type=date], select, textarea {
    padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius);
    font-size: 14px; font-family: inherit; background: #fff; width: 100%; color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(217,37,200,.12); }
textarea { resize: vertical; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form select { width: auto; }
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.check { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition); }
.check:hover { border-color: var(--border-strong); }
.check input { width: auto; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table thead th { border-bottom-color: var(--border-strong); }
.table th { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; font-weight: 600; }

/* Conversation list */
.conv-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); }
.conv-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.conv-list li:last-child .conv-row { border-bottom: none; }
.conv-row:hover { background: var(--subtle); text-decoration: none; }
.conv-main { flex: 1; min-width: 0; }
.conv-from { font-weight: 600; margin-right: 8px; }
.conv-subject { color: var(--muted); }
.conv-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mailbox-tag { font-size: 11px; color: var(--muted); }
.time { font-size: 12px; color: var(--muted); width: 56px; text-align: right; }
.dir-icon { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; }
.dir-icon.dir-out { color: #1a9e4b; }
.dir-icon.dir-in { color: var(--muted); }
.dir-icon.dir-none { visibility: hidden; }
.pill { background: var(--grad-soft); border: 1px solid rgba(217,37,200,.2); border-radius: 11px; padding: 1px 9px; font-size: 11px; color: var(--magenta); font-weight: 500; }
.pill-group { background: rgba(32,36,98,.07); border-color: rgba(32,36,98,.18); color: var(--navy); }
.pill-country { background: rgba(32,36,98,.06); border-color: rgba(32,36,98,.18); color: var(--navy); text-transform: uppercase; letter-spacing: .3px; }

/* Customer name color by source/verification */
.name-verified { color: #1a9e4b; }
.name-unverified { color: var(--text); }
.name-external { color: #9aa0a6; }
.customer-name { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.customer-crm .crm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 28px; }

/* CRM trading accounts */
.accounts-h { font-size: 15px; margin: 16px 0 8px; }
.accounts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.accounts-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px; }
.account-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; min-width: 0; }
.acc-group { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.acc-login { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.acc-login.acc-link { color: var(--magenta); }
.acc-login.acc-link:hover { text-decoration: underline; }
.section-h { margin: 24px 0 12px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--border-strong); }
.status-new { background-image: var(--grad); }
.status-open { background: var(--accent-green); }
.status-pending { background: #f59f00; }
.status-closed { background: var(--border-strong); }

/* Conversation view */
.conv { display: grid; grid-template-columns: minmax(0, 1fr) 308px; gap: 24px; align-items: start; }
.conv-thread { min-width: 0; }
.conv-header { position: relative; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.conv-header::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 64px; height: 3px; border-radius: 3px; background-image: var(--rich-grad);
}
.conv-header h1 { margin: 8px 0 2px; }
.back { font-size: 13px; color: var(--muted); }
.back:hover { color: var(--magenta); }
.messages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.msg { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 17px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.msg.outbound { background: #f0faf3; border-color: #c6e9d2; }
.msg.note { background: #e9fafd; border-color: #bce6ee; }
.msg-head { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
.msg-body { word-wrap: break-word; overflow-wrap: anywhere; }
.email-html { font-size: 14px; }
.email-html img { max-width: 100%; height: auto; }
.email-frame { width: 100%; border: 0; background: #fff; display: block; min-height: 40px; }

.composer { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.composer-tabs { margin-top: 0; }
.ctab { background: none; border: none; padding: 8px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; font-size: 14px; }
.ctab.active { color: var(--magenta); border-bottom-color: var(--magenta); font-weight: 600; }
.composer-form { margin-top: 14px; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.assign-toggle { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: var(--text); cursor: pointer; font-size: 13px; }
.assign-toggle input { width: auto; }
.assign-note { color: var(--magenta); margin: 0 0 10px; }

/* Conversation sidebar */
.conv-side { display: flex; flex-direction: column; gap: 16px; }
.side-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 17px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.side-title { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; margin-bottom: 11px; font-weight: 600; }
/* Support conversation sidebar headers match the Calls right-column panel headings. */
.conv-side .side-title { font-family: var(--font-head); font-size: 17px; font-weight: 400; letter-spacing: .2px; text-transform: none; color: var(--text); margin-bottom: 14px; }
.side-subtitle { font-size: 11px; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; padding-top: 13px; border-top: 1px solid var(--border); font-weight: 600; }
.assignee { margin: 0 0 10px; }
.assign-form { margin-top: 10px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.kv span { color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { padding: 7px 0; border-bottom: 1px solid var(--border); }
.timeline li:last-child { border-bottom: none; }

/* Access editor */
.access-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.module-grant { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin: 0 0 16px; }
.module-grant legend { font-family: var(--font-head); font-size: 16px; padding: 0 8px; color: var(--magenta); }
.module-admin-toggle { margin-bottom: 12px; }
.perm-section { margin-top: 10px; }
.perm-section .side-title { margin-bottom: 6px; }

/* Connect row */
.connect-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.connect-form { min-width: 220px; }
.connect-form .field { margin-bottom: 10px; }
.danger-zone { border-color: var(--border); }

/* MT5 violation detector */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metric { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--panel); }
.metric .k { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.metric .v { font-family: var(--font-head); font-size: 21px; margin-top: 5px; color: var(--text); }
.metric .v.small-v { font-family: var(--font-body); font-size: 13px; font-weight: 500; }
.metric .v.group { font-family: var(--font-body); font-size: 14px; font-weight: 600; }
.metric .v.bad { color: #c1121f; }
.metric .v.good { color: #1a9e4b; }
.mt5-status.mt5-ok { border-left-color: #1a9e4b; background: #eefaf1; }
.mt5-status.mt5-warn { border-left-color: #c1121f; background: #fdf2f2; }
.mt5-status.mt5-info { border-left-color: var(--muted); }
.table-scroll { overflow-x: auto; }
.mt5-table { min-width: 860px; }
.mt5-table td.right, .mt5-table th.right { text-align: right; font-variant-numeric: tabular-nums; }
.mt5-table tr.hl-trade { background: #fdeef0; }
.mt5-table tr.hl-day { background: #fbeefa; }
.mt5-table tr.hl-both { background: #fde8ea; }
.mt5-table tr.hl-balance { background: #eefaf1; }
.tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.tag-trade { background: rgba(246,101,132,.10); color: #7a1d2b; border: 1px solid rgba(246,101,132,.35); }
.tag-day { background: rgba(217,37,200,.08); color: #5c0d5a; border: 1px solid rgba(217,37,200,.25); }
.tag-balance { background: rgba(97,206,112,.12); color: #1a5c22; border: 1px solid rgba(97,206,112,.4); }

/* Auth */
.centered { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--dark-grad); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.auth-card { width: 372px; text-align: center; }
.auth-title { margin-bottom: 4px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Mobile top bar + off-canvas sidebar (hidden on desktop) */
.topbar, .backdrop { display: none; }

@media (max-width: 820px) {
    .topbar {
        display: flex; align-items: center; gap: 12px;
        position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 30;
        background: var(--dark-grad); padding: 0 14px;
    }
    .call-audio { scroll-margin-top: 64px; } /* clear the fixed mobile top bar */
    .topbar-brand {
        font-family: var(--font-head); letter-spacing: 2px; font-size: 18px;
        background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .hamburger {
        background: none; border: 1px solid rgba(255,255,255,.3); color: #fff;
        font-size: 18px; line-height: 1; padding: 6px 11px; border-radius: 6px; cursor: pointer;
    }
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; height: 100vh; width: 252px; z-index: 50;
        transform: translateX(-100%); transition: transform .25s ease;
    }
    .layout.sidebar-open .sidebar { transform: translateX(0); }
    .backdrop {
        display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    .layout.sidebar-open .backdrop { opacity: 1; pointer-events: auto; }

    .content { padding: 68px 16px 24px; max-width: none; }
    .conv { grid-template-columns: 1fr; }
    .connect-row { flex-direction: column; align-items: stretch; }
    .panel { overflow-x: auto; }
    .tabs { flex-wrap: wrap; }
    .composer-actions { flex-wrap: wrap; gap: 10px; }
    .conv-meta { flex-wrap: wrap; justify-content: flex-end; }
    .auth-card { width: calc(100vw - 32px); max-width: 360px; }
}

/* --- Live session watch (mirror) --- */
.sess-row-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; }
.sess-row-head .inline-form { margin-left: auto; }
.watch-btn { display: inline-flex; align-items: center; gap: 6px; }
.watch-btn i { width: 14px; height: 14px; }
.watch-panel { padding: 0; overflow: hidden; }
/* Stage is the scaling viewport: JS sizes the iframe to the user's true
   width×height, then scales it (transform) to fit the stage width. */
#watch-stage { position: relative; overflow: hidden; background: #f6f6f7; min-height: 200px; }
#watch-stage[data-live="0"]::after {
    content: "Waiting for the user's screen…";
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--muted, #888); font-size: 14px; pointer-events: none; z-index: 1;
}
#watch-frame { display: block; border: 0; background: #fff; transform-origin: top left; }
.watch-blocked { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(24,24,32,.92); color: #fff; padding: 24px; }
.watch-blocked > div { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.watch-blocked strong { font-family: var(--font-head); font-weight: 400; font-size: 18px; }
.watch-blocked span { font-size: 13px; color: rgba(255,255,255,.75); }

/* --- Activity: filter bar + pagination --- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.filter-bar select, .filter-bar input[type="search"], .filter-bar input[type="date"] {
    padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; background: var(--panel);
}
.filter-bar input[type="search"] { min-width: 220px; flex: 1 1 220px; }
.filter-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.pill-nav { background: var(--subtle); color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 4px; }
.pager .btn.disabled { opacity: .4; pointer-events: none; }

/* --- Activity: clickable rows + detail key/value tables --- */
.table-rows tbody tr.row-link { cursor: pointer; }
.table-rows tbody tr.row-link:hover { background: var(--subtle); }
.table.kv th { width: 140px; text-align: left; color: var(--muted); font-weight: 500; vertical-align: top; }

/* --- API keys --- */
.token-reveal { border-color: var(--accent-green, #61CE70); background: rgba(97,206,112,.06); }
.token-secret { display: block; margin-top: 10px; padding: 12px 14px; background: var(--text); color: #fff;
    border-radius: var(--radius); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 10px; }
.scope-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 18px; }
.scope-group legend { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; padding: 0 6px; }
.scope-group .check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; line-height: 1.4; }
.scope-group .check + .check { border-top: 1px solid var(--subtle); }
.scope-group .check input { margin-top: 2px; }
/* Each scope on two lines: label, then its permission key beneath. */
.scope-group .check code { display: block; margin-top: 4px; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 180px; }

.webhook-actions { display: flex; gap: 8px; align-items: center; }

.row-actions { display: flex; align-items: center; gap: 12px; }
.row-actions form { margin: 0; }

/* --- Reports --- */
.report-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.kpi-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kpi-value { font-family: var(--font-head); font-size: 28px; margin-top: 4px; color: var(--text); }
.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
.report-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.report-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.report-card-head h3 { font-family: var(--font-head); font-weight: 400; font-size: 15px; margin: 0; }
.report-card-head .inline-form { display: inline; }
.report-chart { min-height: 300px; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.rb-grid + .rb-grid { margin-top: 14px; }
.rb-save { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.rb-save input[type=text] { flex: 1 1 260px; }

/* --- Reports: single-report viewer --- */
.report-viewer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: nowrap; }
.report-picker { flex: 0 1 340px; min-width: 0; font-size: 15px; padding: 9px 12px; }
.report-viewer-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.report-table-wrap { margin-top: 18px; }
.report-table-wrap .report-total td { border-top: 2px solid var(--border-strong); }

/* --- Response templates --- */
.composer-from { margin-bottom: 6px; }
.composer-templates { position: relative; display: flex; gap: 8px; margin-top: 8px; }
.tpl-menu, .tpl-saveform {
    position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 30; width: 360px; max-width: 90vw;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: 6px; max-height: 320px; overflow-y: auto;
}
.tpl-saveform { display: flex; gap: 8px; align-items: center; padding: 12px; }
.tpl-menu.hidden, .tpl-saveform.hidden { display: none; }
.tpl-saveform .tpl-s-title { flex: 1; }
.tpl-pad { padding: 10px; }
.tpl-scope { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 8px 8px 4px; }
.tpl-item { display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius); }
.tpl-item:hover { background: var(--subtle); }
.tpl-insert { flex: 1; text-align: left; background: none; border: none; cursor: pointer; padding: 8px; font: inherit; color: var(--text); }
.tpl-actions { display: flex; gap: 6px; padding-right: 8px; }
.tpl-actions button { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 12px; }
.tpl-actions button:hover { color: var(--text); }
.tpl-editform { padding: 8px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.tpl-manage { display: block; padding: 10px 8px 6px; border-top: 1px solid var(--border); font-size: 13px; }
.template-card .template-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.template-edit { margin-bottom: 8px; }
.template-body { white-space: normal; }

/* --- Call Monitoring --- */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.call-detail { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.call-main { display: flex; flex-direction: column; gap: 18px; }
.call-audio { width: 100%; margin-top: 6px; scroll-margin-top: 20px; }
.transcript { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.turn { padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--subtle); border-radius: var(--radius); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.turn.active { background: var(--grad-soft); border-left-color: var(--magenta); }
.turn-speaker { font-weight: 600; color: var(--magenta); margin-right: 6px; }
.turn-text { margin-top: 2px; }
.transcript-raw { white-space: pre-wrap; font-family: var(--font-body); background: var(--subtle); padding: 12px; border-radius: var(--radius); max-height: 60vh; overflow-y: auto; }
@media (max-width: 860px) { .call-detail { grid-template-columns: 1fr; } }

/* --- Transcript language picker --- */
.transcript-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.transcript-head h2 { margin: 0; }
.lang-pill { display: inline-block; padding: 2px 9px; border: 1px solid var(--border-strong); border-radius: 12px; font-size: 12px; font-weight: 600; margin-left: 6px; color: var(--muted); }
.lang-pill:hover { text-decoration: none; color: var(--text); }
.lang-pill.active { background-image: var(--grad); color: #fff; border: none; }

/* --- Calls list: clickable agent/team + active-filter chips --- */
.cell-link { color: inherit; }
.cell-link:hover { color: var(--magenta); text-decoration: underline; }
.filter-chips { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--subtle); border: 1px solid var(--border); border-radius: 14px; padding: 3px 10px; font-size: 12px; }
.chip a { color: var(--muted); font-weight: 700; }
.chip a:hover { color: var(--danger); text-decoration: none; }

/* --- Call summary --- */
.call-summary { margin: 0; padding-left: 20px; }
.call-summary li { margin-bottom: 7px; }
.call-summary li:last-child { margin-bottom: 0; }

/* --- Grid "table" with aligned headers + editable rows (MT5 funded groups) --- */
.grid-table { display: flex; flex-direction: column; }
.grid-row { display: grid; grid-template-columns: minmax(160px, 2fr) 130px 110px 140px minmax(120px, auto); gap: 10px; align-items: center; }
.grid-table .grid-row { padding: 9px 0; border-bottom: 1px solid var(--border); }
.grid-table .grid-row:last-child { border-bottom: none; }
.grid-head span { font-size: 11px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; font-weight: 600; }
.grid-table .grid-head { border-bottom-color: var(--border-strong); }
.grid-row input { width: 100%; min-width: 0; }
.grid-actions { display: flex; gap: 10px; align-items: center; }
.grid-empty { padding: 14px 0; }
.mt5-groups-add { margin-top: 4px; }

/* --- Voyager template editor --- */
.ve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ve-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-bottom: 18px; }
.ve-fields { display: flex; flex-direction: column; gap: 10px; }
.ve-fields input[type=text], .ve-fields input[type=email], .ve-fields select, .ve-fields textarea { width: 100%; }
.ve-row { display: flex; align-items: center; gap: 10px; }
.ve-label { font-size: 12px; color: var(--muted); min-width: 56px; }
.ve-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ve-tag { font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 3px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--subtle); cursor: pointer; color: var(--text); }
.ve-tag:hover { background: var(--panel); border-color: var(--magenta); color: var(--magenta); }
#tpl-html { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.ve-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ve-test { display: inline-flex; align-items: center; gap: 8px; }
.ve-test input { width: 220px; }
.ve-preview { position: sticky; top: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.ve-preview-head { padding: 8px 14px; background: var(--subtle); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
#tpl-preview { width: 100%; height: 640px; border: 0; background: #fff; display: block; }
@media (max-width: 900px) { .ve-grid, .ve-grid-2 { grid-template-columns: 1fr; } }

/* --- Voyager GrapesJS builder toolbar --- */
.ve-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ve-bar input[type=text] { flex: 1 1 200px; min-width: 160px; }
.ve-bar input[type=email] { width: 200px; }
.ve-bar select { max-width: 220px; }
.ve-bar-spacer { flex: 1 1 auto; }
.ve-hint { margin: 0 0 10px; }
#gjs { min-height: 640px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

/* --- GrapesJS retheme to match PanUI (dark chrome + magenta accents) --- */
/* GrapesJS reads these theme variables; setting them on #gjs cascades to all gjs- elements. */
#gjs {
    --gjs-primary-color: #24263f;       /* panels — deep navy, echoes the sidebar */
    --gjs-secondary-color: #c7cad3;     /* panel text + icons */
    --gjs-tertiary-color: #33354f;      /* insets / hover / inputs */
    --gjs-quaternary-color: #d925c8;    /* brand magenta — active/highlight accents */
    --gjs-font-color: #c7cad3;
    --gjs-font-color-active: #ffffff;
    --gjs-main-font: var(--font-body);
    --gjs-color-highlight: #d925c8;
    --gjs-color-warn: #b45309;
}
/* Mid-dark canvas so the white email floats; frame stays light. */
#gjs .gjs-cv-canvas { background-color: #1c1d33; }
#gjs .gjs-frame-wrapper { background: #fff; }
/* Block tiles: brand hover. */
#gjs .gjs-block { transition: border-color .15s ease, color .15s ease, box-shadow .15s ease; }
#gjs .gjs-block:hover { border-color: var(--magenta); color: var(--magenta); box-shadow: 0 1px 8px rgba(217,37,200,.18); }
/* Active toolbar button + brand primary buttons (export/done). */
#gjs .gjs-pn-btn.gjs-pn-active { color: var(--magenta); box-shadow: none; }
#gjs .gjs-btn-prim { background-image: var(--grad); color: #fff; border: 0; border-radius: var(--radius-sm); }
#gjs .gjs-btn-prim:hover { filter: brightness(1.06); }
/* Inputs/labels in the settings panel read cleanly on the dark chrome. */
#gjs .gjs-field { border-radius: 5px; }
#gjs .gjs-sm-sector-title, #gjs .gjs-label { letter-spacing: .3px; }

/* --- Voyager journey builder (flowchart) --- */
.jb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jb-head #jb-name { font-family: var(--font-head); font-size: 18px; padding: 6px 10px; min-width: 220px; }
.jb-head-spacer { flex: 1 1 auto; }
.jb-status { text-transform: capitalize; font-weight: 600; font-size: 12px; }
.jb { display: grid; grid-template-columns: 156px 1fr 268px; gap: 12px; height: 640px; }
.jb-palette, .jb-config { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; overflow-y: auto; }
.jb-pal-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.jb-pal-item { display: block; width: 100%; text-align: left; margin-bottom: 6px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--subtle); cursor: pointer; font-weight: 500; font-family: inherit; font-size: 13px; }
.jb-pal-item:hover { border-color: var(--magenta); color: var(--magenta); }
.jb-pal-hint { margin-top: 12px; }
.jb-canvas { position: relative; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background-color: #fafafb; background-image: radial-gradient(var(--border-strong) 1px, transparent 1px); background-size: 18px 18px; }
.jb-edges { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; overflow: visible; }
.jb-edges path { fill: none; stroke: #b6b8c2; stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.jb-edges path:hover { stroke: var(--danger); }
.jb-edge-tmp { stroke: var(--magenta) !important; stroke-dasharray: 5 4; pointer-events: none !important; }
.jb-node { position: absolute; width: 168px; background: #fff; border: 1px solid var(--border-strong); border-radius: 9px; z-index: 2; box-shadow: 0 1px 4px rgba(0,0,0,.07); cursor: grab; user-select: none; }
.jb-node.sel { border-color: var(--magenta); box-shadow: 0 0 0 2px rgba(217,37,200,.25); }
.jb-node-h { display: flex; align-items: center; gap: 7px; padding: 8px 11px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--border); }
.jb-ic { font-size: 13px; }
.jb-node-b { padding: 8px 11px; font-size: 12px; color: var(--muted); min-height: 16px; word-break: break-word; }
.jb-node-trigger .jb-node-h { color: #2f9e44; }
.jb-node-send .jb-node-h { color: var(--magenta); }
.jb-node-wait .jb-node-h { color: #b45309; }
.jb-node-branch .jb-node-h { color: #2563eb; }
.jb-node-exit .jb-node-h { color: #555; }
.jb-port { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--magenta); z-index: 3; }
.jb-in { top: -8px; left: 50%; transform: translateX(-50%); border-color: #b6b8c2; }
.jb-out { bottom: -8px; left: 50%; transform: translateX(-50%); cursor: crosshair; }
.jb-out.jb-yes, .jb-out.jb-no { width: 16px; height: 16px; font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; color: #fff; }
.jb-yes { left: 28%; background: #2f9e44; border-color: #2f9e44; }
.jb-no { left: auto; right: 28%; background: var(--danger); border-color: var(--danger); }
.jb-cfg-title { font-family: var(--font-head); font-size: 15px; margin-bottom: 12px; }
.jb-cfg-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px; }
.jb-cfg-f > span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.jb-cfg-f input, .jb-cfg-f select { width: 100%; }
.jb-del { margin-top: 6px; }
@media (max-width: 1000px) { .jb { grid-template-columns: 130px 1fr; } .jb-config { display: none; } }
/* journey node live-enrollee badge */
.jb-count { margin-left: auto; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 9px; min-width: 8px; text-align: center; }
/* A/B split node ports */
.jb-node-split .jb-node-h { color: #7c3aed; }
.jb-a, .jb-b { width: 16px; height: 16px; font-size: 9px; font-weight: 700; line-height: 13px; text-align: center; color: #fff; }
.jb-a { left: 28%; background: #2563eb; border-color: #2563eb; }
.jb-b { left: auto; right: 28%; background: #7c3aed; border-color: #7c3aed; }

/* --- Voyager journey: CRM segment enrollment form --- */
.jb-enroll { margin-top: 16px; }
.jb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; }
.jb-seg-f { display: flex; flex-direction: column; gap: 4px; }
.jb-seg-f > span { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.jb-seg-f input, .jb-seg-f select { width: 100%; }
.jb-seg-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
@media (max-width: 800px) { .jb-seg { grid-template-columns: 1fr; } }

/* --- journey audience: date modes, recipient list, test --- */
.jb-date select, .jb-date input { width: 100%; }
.jb-date-range { display: flex; gap: 6px; }
.jb-date-range input { width: 50%; }
.jb-seg-list { grid-column: 1 / -1; max-height: 200px; overflow-y: auto; margin-top: 4px; }
.jb-seg-list-h { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.jb-seg-row { font-size: 12px; padding: 2px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.jb-test { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.jb-test h3 { font-family: var(--font-head); font-weight: 400; font-size: 15px; margin: 0 0 8px; }
.jb-test-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jb-test-row input { width: 220px; }
.jb-test-email { margin-top: 8px; }
.jb-seg-wide { grid-column: 1 / -1; }
.jb-seg-wide textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* --- branch multi-conditions + config footer --- */
.jb-cond { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.jb-cond-top { display: flex; gap: 6px; align-items: center; }
.jb-cond-top select { flex: 1; min-width: 0; }
.jb-cond select, .jb-cond input { width: 100%; }
.jb-cond-del { background: none; border: none; color: var(--danger); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.jb-cond-add { margin-bottom: 8px; }
.jb-cfg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.jb-balance-row { display: flex; gap: 6px; }
.jb-balance-row select { width: 64px; flex: 0 0 auto; }
.jb-balance-row input { flex: 1; min-width: 0; }
#jb-seg-preview.jb-cancelling { border-color: var(--danger); color: var(--danger); }

/* Colour-coded groups + conversation labels */
.pill-group { border-color: transparent; }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle; border:1px solid rgba(0,0,0,.12); }
.color-input { width:46px; height:34px; padding:2px; border:1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); cursor:pointer; vertical-align:middle; }
.label-chip { display:inline-block; padding:1px 9px; border-radius:11px; font-size:11px; font-weight:600; line-height:1.7; white-space:nowrap; }
.conv-meta .label-chip { font-size:10px; padding:1px 8px; }
.label-list { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.label-editor .checklist { margin:8px 0; }