/*!
 * LeadHunter PRO v2.5 - marine blue theme (colours are CSS variables, changeable in Settings)
 * © Tony Djurberg Consulting
 */
:root {
  --bg: #06142b; --panel: #0a1d3d; --card: #0e2650; --border: #1c3d72; --primary: #2f7cf6; --accent: #38bdf8; --text: #ffffff; --muted: #9fb3d9;
  --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --gold: #fbbf24; --purple: #a78bfa;
  --radius: 12px; --shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: .1px; }
h2 { font-size: 17px; }
h3.sub { font-size: 14px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
small { font-size: 12px; }
.block { display: block; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.err { color: #fca5a5; }
.center { text-align: center; }
.big { font-size: 18px; }
.mono, code, pre { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
.ic { flex: none; vertical-align: middle; }
::selection { background: var(--primary); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* boot */
.boot, .loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.boot { min-height: 100vh; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- forms ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), select, textarea {
  width: 100%; background: rgba(0, 0, 0, .22); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
input[readonly], textarea[readonly] { opacity: .85; }
select option { background: var(--panel); color: var(--text); }
textarea { resize: vertical; min-height: 38px; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; }
input[type=color] { width: 44px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: none; padding: 2px; cursor: pointer; }
input[type=date], input[type=time], input[type=datetime-local] { color-scheme: dark; }
label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; font-weight: 500; }
.field { margin-bottom: 12px; }
.field small { color: var(--muted); display: block; margin-top: 4px; }
.req { color: var(--danger); font-style: normal; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-section { grid-column: 1 / -1; margin: 10px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--accent); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; margin: 6px 0 12px; cursor: pointer; }
.check small { margin-left: 4px; color: var(--muted); }
.check.sm { margin: 0; font-size: 12.5px; }
.input-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.input-row input, .input-row select { flex: 1; }
.pw-wrap { position: relative; }
.pw-wrap .icon-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.note { background: color-mix(in srgb, var(--primary) 10%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; background: var(--card); color: var(--text); padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 550; white-space: nowrap; transition: filter .15s, background .15s, transform .05s; text-decoration: none !important; line-height: 1.3; }
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.success { background: var(--success); color: #062b14; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--border); }
.btn.ghost:hover { background: rgba(255, 255, 255, .05); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.xs { padding: 2px 8px; font-size: 12px; border-radius: 7px; }
.btn.lg { padding: 12px 20px; font-size: 15px; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--muted); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; position: relative; text-decoration: none !important; }
.icon-btn:hover { background: rgba(255, 255, 255, .07); color: var(--text); }
.icon-btn.xs { width: 22px; height: 22px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .08); color: var(--text); }
.badge.blue { background: rgba(59, 130, 246, .2); color: #93c5fd; }
.badge.cyan { background: rgba(34, 211, 238, .16); color: #67e8f9; }
.badge.green { background: rgba(34, 197, 94, .18); color: #86efac; }
.badge.orange { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.badge.red { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.badge.purple { background: rgba(167, 139, 250, .2); color: #c4b5fd; }
.badge.gold { background: rgba(251, 191, 36, .22); color: #fde68a; }
.badge.gray { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.badge.dark { background: #000; color: #fca5a5; }

/* ---------- alerts / banners ---------- */
.alert { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid; display: block; }
.alert.error { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .4); color: #fecaca; }
.alert.ok { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .4); color: #bbf7d0; }
.alert.warn { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); color: #fde68a; }
.alert.info { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--text); }
#banners:empty { display: none; }
#banners { padding: 12px 24px 0; display: flex; flex-direction: column; gap: 8px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; }
.banner span { flex: 1; }
.banner.warn { background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .4); color: #fde68a; }
.banner.danger { background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .45); color: #fecaca; }
.banner.info { background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }

/* ---------- auth / login ---------- */
body.auth { background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 60%), radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--bg); }
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 410px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 22px 30px 26px; backdrop-filter: blur(6px); }
.auth-top { display: flex; justify-content: flex-end; }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang-switch button { background: transparent; border: 0; padding: 3px 10px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; }
.lang-switch button.on { background: var(--primary); color: #fff; }
.auth-logo { text-align: center; margin: 4px 0 18px; }
.auth-logo img { width: 74px; height: 74px; }
.auth-logo h1 { font-size: 24px; margin-top: 8px; }
.auth-body h2 { font-size: 18px; margin-bottom: 14px; text-align: center; }
.auth-body .muted { text-align: center; }
.auth-links { text-align: center; margin-top: 14px; }
.auth-note { text-align: center; color: var(--muted); font-size: 12px; margin: 16px 0 0; }
.auth-foot { margin-top: 18px; color: var(--muted); font-size: 12px; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; flex: none; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); }
.brand img { width: 36px; height: 36px; }
.brand b { display: block; font-size: 15px; }
.brand small { color: var(--muted); display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { padding: 10px 8px; flex: 1; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-weight: 500; margin-bottom: 2px; text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.nav a.active { background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--primary); }
.nav a span { flex: 1; }
.nav-sep { margin: 14px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); opacity: .7; }
.nb { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px; font-style: normal; }
.side-foot { padding: 12px 16px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: color-mix(in srgb, var(--panel) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(6px); }
.topbar h1 { font-size: 18px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { display: flex; align-items: center; gap: 8px; }
#ctx-select { width: auto; max-width: 230px; padding: 6px 10px; }
.menu-btn { display: none; }
#notif-count { position: absolute; top: 3px; right: 2px; background: var(--danger); color: #fff; border-radius: 999px; font-size: 10px; min-width: 16px; line-height: 16px; padding: 0 4px; }
.lang-btn { font-weight: 700; font-size: 12px; }
.user-menu { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 4px 8px; cursor: pointer; }
.user-btn:hover { background: rgba(255, 255, 255, .05); }
.user-btn .un { text-align: left; line-height: 1.2; font-weight: 600; font-size: 13px; }
.user-btn .un small { display: block; color: var(--muted); font-weight: 400; }
.dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); min-width: 220px; padding: 6px; z-index: 50; }
.user-menu.open .dropdown, .more.open .dropdown { display: block; }
.dropdown a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 7px; color: var(--text); text-decoration: none; }
.dropdown a:hover { background: rgba(255, 255, 255, .06); }
.more { position: relative; }
#view { padding: 20px 24px 40px; flex: 1; min-width: 0; }
.nav-shade { display: none; }
.phone-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.phone-pill.green { color: #86efac; } .phone-pill.orange { color: #fcd34d; } .phone-pill.red { color: #fca5a5; } .phone-pill.blue { color: #93c5fd; }

/* ---------- avatars ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; overflow: hidden; flex: none; vertical-align: middle; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- cards / grids ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; min-width: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h.pad { padding: 14px 16px 0; }
.card-h h2 { display: flex; align-items: center; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid2 > *, .grid3 > * { min-width: 0; }
.center-box { text-align: center; padding: 50px 20px; }
.center-box select { max-width: 320px; margin: 10px auto 0; }
.big-icon { color: var(--primary); margin-bottom: 10px; }
.error-box { border-color: rgba(239, 68, 68, .5); color: #fecaca; }
.empty { text-align: center; color: var(--muted); padding: 22px 12px; }
.empty.ok { color: #86efac; }
.page-h { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-start; }
.page-h h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.danger-zone { border-color: rgba(239, 68, 68, .35); }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.hero h2 { font-size: 22px; }
.hero p { margin: 2px 0 0; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kpi-i { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--accent); flex: none; }
.kpi.gold .kpi-i { background: rgba(251, 191, 36, .16); color: var(--gold); }
.kpi.green .kpi-i { background: rgba(34, 197, 94, .16); color: var(--success); }
.kpi.orange .kpi-i { background: rgba(245, 158, 11, .16); color: var(--warning); }
.kpi.red .kpi-i { background: rgba(239, 68, 68, .16); color: var(--danger); }
.kpi-v { font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.kpi-l { color: var(--muted); font-size: 12.5px; }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-kpis div { background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 8px 10px; }
.mini-kpis b { display: block; font-size: 17px; }
.mini-kpis span { color: var(--muted); font-size: 12px; }

/* leaderboard */
.leader-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--text); text-decoration: none !important; border-radius: 8px; }
.leader-row:hover { background: rgba(255, 255, 255, .04); }
.leader-row:last-child { border-bottom: 0; }
.rank { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; background: rgba(255, 255, 255, .08); flex: none; }
.rank.r1 { background: #f5c542; color: #3b2a00; } .rank.r2 { background: #cbd5e1; color: #1e293b; } .rank.r3 { background: #d08b4c; color: #2b1300; }
.ln { flex: 1; min-width: 0; line-height: 1.25; }
.ln b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln small { color: var(--muted); }
.lv { color: var(--muted); font-size: 12.5px; white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.lv.money { color: var(--gold); font-weight: 650; min-width: 90px; justify-content: flex-end; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg button { background: transparent; border: 0; padding: 6px 12px; cursor: pointer; color: var(--muted); font-weight: 550; font-size: 13px; }
.seg button.on { background: var(--primary); color: #fff; }
.mini-list .mini-row { display: flex; gap: 12px; padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--text); text-decoration: none !important; align-items: flex-start; }
.mini-list .mini-row:last-child { border-bottom: 0; }
.when { color: var(--accent); font-weight: 600; font-size: 12.5px; white-space: nowrap; min-width: 92px; }
.checklist a { display: flex; gap: 10px; align-items: center; padding: 8px 6px; color: var(--text); border-radius: 8px; text-decoration: none; }
.checklist a:hover { background: rgba(255, 255, 255, .04); }
.checklist a.done { color: var(--muted); text-decoration: line-through; }
.checklist a.done .ic { color: var(--success); }
.checklist .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--warning); display: inline-block; margin: 0 2px; }
.feed { max-height: 420px; overflow-y: auto; }
.feed-row { display: flex; gap: 10px; padding: 6px 2px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 13px; }
.feed-t { color: var(--muted); white-space: nowrap; font-size: 12px; min-width: 86px; }

/* ---------- tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); background: rgba(0, 0, 0, .12); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.table.clickable tbody tr { cursor: pointer; }
.table .chk { width: 36px; }
.table audio { height: 32px; max-width: 230px; display: block; }
.card .table th { background: transparent; }
.pager { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 10px 14px; }
.pager .muted { margin-right: auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.toolbar select, .toolbar input[type=date] { width: auto; }
.toolbar label { display: flex; align-items: center; gap: 6px; margin: 0; }
.toolbar label.check { margin: 0; }
.search { display: flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .22); border: 1px solid var(--border); border-radius: 9px; padding: 0 10px; min-width: 220px; color: var(--muted); }
.search input { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; }
.search.sm { min-width: 0; flex: 1; }
.bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: color-mix(in srgb, var(--primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.bulkbar select { width: auto; }
.dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0 0 10px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; overflow-wrap: anywhere; }
.dl.compact { grid-template-columns: 110px 1fr; font-size: 13.5px; }

/* ---------- modal ---------- */
.modal-wrap { position: fixed; inset: 0; background: rgba(2, 8, 20, .7); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 100; overflow-y: auto; animation: fade .12s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 560px; box-shadow: var(--shadow); display: flex; flex-direction: column; max-height: 88vh; }
.modal.sm { max-width: 420px; }
.modal.lg { max-width: 820px; }
.modal.xl { max-width: 1000px; }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-h h3 { font-size: 16px; }
.modal-b { padding: 18px; overflow-y: auto; }
.modal-f { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.modal-b textarea.mono { font-size: 12.5px; }
#toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; max-width: min(420px, calc(100vw - 36px)); }
.toast { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); animation: slide .2s ease; }
.toast.error { border-left-color: var(--danger); }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .3s; }
@keyframes slide { from { transform: translateY(10px); opacity: 0; } }
.notif { padding: 10px 4px; border-bottom: 1px solid var(--border); }
.notif.unread { border-left: 3px solid var(--primary); padding-left: 10px; }
.notif small { color: var(--muted); }

/* ---------- dialer ---------- */
.dialer { display: grid; grid-template-columns: 260px 1fr 280px; gap: 16px; align-items: start; }
.dial-col .card select { margin-bottom: 12px; }
.dial-col .btn.lg { margin-bottom: 10px; }
.mode-box { margin-top: 6px; background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.dialpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dialpad button { background: rgba(0, 0, 0, .2); border: 1px solid var(--border); border-radius: 9px; padding: 8px; cursor: pointer; font-size: 16px; font-weight: 600; }
.dialpad button:hover { background: rgba(255, 255, 255, .06); }
.lead-card .lead-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lead-card h2 { font-size: 22px; }
.phones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.phone-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--success); color: #062b14; border: 0; border-radius: 12px; padding: 12px 20px; font-size: 19px; font-weight: 700; cursor: pointer; }
.phone-btn:hover { filter: brightness(1.08); }
.phone-btn small { font-size: 11px; opacity: .8; }
.callbox { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; border: 1px solid var(--border); flex-wrap: wrap; }
.callbox.ringing { background: rgba(59, 130, 246, .14); border-color: rgba(59, 130, 246, .45); }
.callbox.live { background: rgba(34, 197, 94, .13); border-color: rgba(34, 197, 94, .45); }
.callbox.ended { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .4); }
.call-state { font-weight: 600; }
.call-timer { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.call-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.results { margin-top: 6px; }
.results-h { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.res { border: 1px solid var(--border); background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 10px 8px; cursor: pointer; font-weight: 600; color: var(--text); }
.res:hover { filter: brightness(1.2); }
.res.green { background: rgba(34, 197, 94, .2); border-color: rgba(34, 197, 94, .5); }
.res.gold { background: rgba(251, 191, 36, .18); border-color: rgba(251, 191, 36, .5); }
.res.red { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .4); }
.res.purple { background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .45); }
.res.orange { background: rgba(245, 158, 11, .14); border-color: rgba(245, 158, 11, .4); }
.res.cyan { background: rgba(34, 211, 238, .12); border-color: rgba(34, 211, 238, .4); }
.res.dark { background: rgba(0, 0, 0, .4); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 12px; }
.pitch { white-space: normal; line-height: 1.6; font-size: 14px; background: rgba(0, 0, 0, .15); border-radius: 10px; padding: 12px; max-height: 420px; overflow-y: auto; }
.timeline .tl-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); font-size: 13px; }
.timeline .tl-t { color: var(--muted); white-space: nowrap; font-size: 12px; min-width: 110px; }
.timeline audio { height: 30px; margin-top: 4px; display: block; max-width: 100%; }

/* ---------- calendar ---------- */
.cal-bar h2 { font-size: 16px; text-transform: capitalize; margin-left: 6px; }
.cal-card { overflow: hidden; }
.cal-head { display: flex; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
.cal-gutter { width: 58px; flex: none; }
.cal-dh { flex: 1; text-align: center; padding: 8px 4px; font-size: 13px; color: var(--muted); text-transform: capitalize; border-left: 1px solid var(--border); }
.cal-dh b { color: var(--text); font-size: 16px; }
.cal-dh.today { color: var(--accent); background: color-mix(in srgb, var(--primary) 18%, transparent); }
.cal-body { display: flex; max-height: calc(100vh - 230px); min-height: 420px; overflow-y: auto; }
.cal-time { font-size: 11px; color: var(--muted); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.cal-cols { flex: 1; display: grid; }
.cal-cols.cols7 { grid-template-columns: repeat(7, 1fr); }
.cal-cols.cols1 { grid-template-columns: 1fr; }
.cal-col { position: relative; border-left: 1px solid var(--border); }
.cal-col.today { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cal-slot { border-top: 1px dashed color-mix(in srgb, var(--border) 50%, transparent); cursor: pointer; }
.cal-slot.hour { border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent); }
.cal-slot:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.cal-ev { position: absolute; background: color-mix(in srgb, var(--primary) 42%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 70%, transparent); border-left: 4px solid var(--primary); border-radius: 7px; padding: 2px 6px; font-size: 12px; overflow: hidden; cursor: pointer; line-height: 1.3; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cal-ev:hover { filter: brightness(1.15); z-index: 3; }
.cal-ev small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.cancelled { opacity: .45; text-decoration: line-through; }
.cal-ev.done { background: color-mix(in srgb, var(--success) 30%, var(--card)); }
.cal-ev.no_show { background: color-mix(in srgb, var(--danger) 30%, var(--card)); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 4; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; }
.month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: color-mix(in srgb, var(--primary) 12%, var(--card)); border-bottom: 1px solid var(--border); }
.month-head div { padding: 8px; text-align: center; color: var(--muted); font-size: 12px; text-transform: capitalize; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-cell { min-height: 104px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5px; cursor: pointer; overflow: hidden; }
.month-cell:hover { background: rgba(255, 255, 255, .03); }
.month-cell.other { opacity: .45; }
.month-cell.today .md { background: var(--primary); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.md { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.mev { font-size: 11.5px; background: color-mix(in srgb, var(--primary) 30%, transparent); border-left: 3px solid var(--primary); border-radius: 4px; padding: 1px 5px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-ev { font-size: 11px; color: var(--muted); }
.lead-pick { position: relative; }
.lead-sugg { position: absolute; left: 0; right: 0; top: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; z-index: 5; max-height: 240px; overflow-y: auto; box-shadow: var(--shadow); }
.lead-sugg:empty { display: none; }
.lead-sugg button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.lead-sugg button:hover { background: rgba(255, 255, 255, .06); }
.lead-sugg small { color: var(--muted); }
.steps { padding-left: 20px; color: var(--muted); }
.steps li { margin-bottom: 6px; }

/* ---------- chat ---------- */
.chat { display: grid; grid-template-columns: 270px 1fr; gap: 16px; height: calc(100vh - 140px); min-height: 460px; }
.chat .card { margin: 0; display: flex; flex-direction: column; }
.chat-side { overflow-y: auto; }
.chat-side-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.chat-side .ch { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; }
.chat-side .ch:hover { background: rgba(255, 255, 255, .04); }
.chat-side .ch.on { background: color-mix(in srgb, var(--primary) 18%, transparent); border-left-color: var(--primary); }
.online { width: 8px; height: 8px; border-radius: 50%; background: var(--success); display: inline-block; }
.chat-main { min-width: 0; }
.chat-h { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.bubble { background: rgba(0, 0, 0, .22); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 7px 11px; min-width: 0; }
.msg.mine .bubble { background: color-mix(in srgb, var(--primary) 35%, var(--card)); border-color: color-mix(in srgb, var(--primary) 55%, transparent); border-radius: 14px 14px 4px 14px; }
.msg-h { display: flex; gap: 8px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.msg-h small { color: var(--muted); }
.msg-b { overflow-wrap: anywhere; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-form textarea { flex: 1; max-height: 140px; }
.wa .msg.mine .bubble { background: color-mix(in srgb, var(--success) 26%, var(--card)); border-color: rgba(34, 197, 94, .45); }
.wa-conv small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }

/* ---------- users / profile ---------- */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.user-card { margin: 0; }
.user-card.pending { border-color: rgba(245, 158, 11, .55); }
.uc-top { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none !important; }
.uc-top b { display: block; }
.uc-co { margin-top: 10px; font-size: 13px; color: var(--muted); }
.uc-meta { margin-top: 6px; overflow-wrap: anywhere; }
.profile { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.profile-main { min-width: 0; }
.profile-head { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ph-photo { position: relative; }
.ph-up { position: absolute; right: 2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; border: 2px solid var(--card); }
.ph-info { flex: 1; min-width: 220px; }
.ph-info h2 { font-size: 22px; }
.ph-badges { margin: 8px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.ph-contact { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.ph-contact span { display: inline-flex; gap: 6px; align-items: center; }
.ph-actions { display: flex; flex-direction: column; gap: 6px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; cursor: pointer; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tabs button.on { color: var(--text); border-bottom-color: var(--primary); }
.profile-chat { position: sticky; top: 76px; height: calc(100vh - 100px); display: flex; flex-direction: column; margin: 0; }
.profile-chat .msg { max-width: 92%; }
#pc-recent { max-height: 35%; overflow-y: auto; border-top: 1px solid var(--border); padding: 0 12px; }
#pc-recent:empty { display: none; }
.docs .doc { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.docs .doc img { width: 84px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.doc-pdf { width: 84px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .2); border-radius: 6px; color: var(--muted); }
.docs .doc > div { flex: 1; min-width: 0; }

/* ---------- companies / licenses / invoices ---------- */
.license-box { background: rgba(0, 0, 0, .25); border: 1px dashed var(--accent); border-radius: 12px; padding: 12px 16px; margin: 6px 0 12px; text-align: center; }
.lic { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); margin: 2px 0; overflow-wrap: anywhere; }
.step-h { display: flex; align-items: center; gap: 10px; font-weight: 650; margin: 16px 0 10px; font-size: 15px; }
.step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.inv-table input { padding: 6px 8px !important; }
.inv-table td { padding: 5px 6px; }
.inv-tot { margin: 12px 0 12px auto; width: 280px; }
.inv-tot div { display: flex; justify-content: space-between; padding: 3px 0; }
.inv-tot .g { border-top: 1px solid var(--border); padding-top: 6px; font-size: 16px; }
.inv-preview iframe { width: 100%; height: 70vh; border: 0; border-radius: 10px; background: #eef2f8; }
.prov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.prov { border: 1px solid var(--border); border-radius: 12px; padding: 12px; cursor: pointer; color: var(--text); margin: 0; display: block; }
.prov input { float: right; }
.prov b { display: block; margin-bottom: 4px; }
.prov small { color: var(--muted); font-size: 12px; line-height: 1.4; display: block; }
.prov.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
pre.code { background: rgba(0, 0, 0, .3); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; overflow-x: auto; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.theme-row { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, .15); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; color: var(--text); margin: 0; cursor: pointer; }
.theme-row span { flex: 1; }
.theme-row code { color: var(--muted); font-size: 12px; }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 14px; }
.map-row { display: flex; gap: 10px; align-items: center; background: rgba(0, 0, 0, .15); border-radius: 9px; padding: 6px 10px; }
.map-row span { flex: 1; min-width: 0; overflow: hidden; }
.map-row select { width: 150px; }

/* ---------- charts ---------- */
.chart-h { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); }
.chart-h b { color: var(--text); }
.bars { display: flex; align-items: flex-end; height: 160px; gap: 2px; border-bottom: 1px solid var(--border); }
.bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.bar-fill { width: 70%; min-height: 2px; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 4px 4px 0 0; }
.bar-l { position: absolute; bottom: -18px; font-size: 10px; color: var(--muted); }
.chart { padding-bottom: 18px; }
.result-bars .rb { display: grid; grid-template-columns: 170px 1fr 50px; gap: 10px; align-items: center; margin-bottom: 8px; }
.rb-bar { background: rgba(0, 0, 0, .25); border-radius: 6px; height: 10px; overflow: hidden; }
.rb-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .dialer { grid-template-columns: 240px 1fr; }
  .dialer > .dial-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .profile { grid-template-columns: 1fr; }
  .profile-chat { position: static; height: 520px; }
  .prov-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-shade { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 25; }
  .menu-btn { display: inline-flex; }
  .grid2, .grid3, .dialer, .chat { grid-template-columns: 1fr; }
  .dialer > .dial-col:last-child { grid-template-columns: 1fr; }
  .chat { height: auto; }
  .chat-side { max-height: 260px; }
  .chat-main { height: 70vh; }
  .user-btn .un { display: none; }
  #view { padding: 16px; }
  #banners { padding: 12px 16px 0; }
  .topbar { padding: 0 12px; }
  #ctx-select { max-width: 150px; }
}
@media (max-width: 640px) {
  .form-grid, .map-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr 1fr; }
  .prov-grid { grid-template-columns: 1fr; }
  .search { min-width: 0; flex: 1 1 100%; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .topbar h1 { font-size: 15px; }
  #phone-status { display: none; }
  .dl { grid-template-columns: 1fr; }
  .modal-wrap { padding: 2vh 8px 8px; }
  .lv:not(.money) { display: none; }
  .result-bars .rb { grid-template-columns: 120px 1fr 40px; }
}
@media print {
  .sidebar, .topbar, #banners, .toolbar { display: none !important; }
  body { background: #fff; color: #000; }
}
.cal-gutter .cal-time:first-child { transform: none; }


/* ================= v2.6 – languages with flags, mobile app, Google, themes ================= */
:root { --beach-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%2364b9e8'/><stop offset='.58' stop-color='%23d7f1fc'/></linearGradient><linearGradient id='w' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23168ccc'/><stop offset='1' stop-color='%2348c3ea'/></linearGradient><linearGradient id='d' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23f8e8c2'/><stop offset='1' stop-color='%23e8c78a'/></linearGradient><radialGradient id='g'><stop offset='0' stop-color='%23fff4b8' stop-opacity='.95'/><stop offset='1' stop-color='%23fff4b8' stop-opacity='0'/></radialGradient></defs><rect width='1600' height='1000' fill='url(%23s)'/><circle cx='1270' cy='190' r='270' fill='url(%23g)'/><circle cx='1270' cy='190' r='88' fill='%23ffd84d'/><path d='M0 560 Q400 535 800 560 T1600 556 V1000 H0Z' fill='url(%23w)'/><path d='M0 605 Q200 595 400 605 T800 605 T1200 605 T1600 605' stroke='%23fff' stroke-opacity='.35' stroke-width='3' fill='none'/><path d='M0 665 Q200 655 400 665 T800 665 T1200 665 T1600 665' stroke='%23fff' stroke-opacity='.28' stroke-width='3' fill='none'/><path d='M0 772 Q300 736 650 762 T1600 742 V1000 H0Z' fill='url(%23d)'/><path d='M0 772 Q300 736 650 762 T1600 742' stroke='%23fff' stroke-opacity='.85' stroke-width='7' fill='none'/><path d='M300 230 q14 -12 28 0 q14 -12 28 0 M382 272 q10 -9 20 0 q10 -9 20 0' stroke='%232f5a78' stroke-width='3' fill='none' stroke-linecap='round'/></svg>"); }
.flag { display: inline-flex; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); flex: none; }
.flag svg { display: block; width: 100%; height: 100%; }
.lang-pick { position: relative; }
.lang-cur { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px; cursor: pointer; color: var(--text); font-size: 12px; }
.lang-cur:hover { background: rgba(255, 255, 255, .06); }
.lang-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; z-index: 60; min-width: 190px; max-height: 70vh; overflow-y: auto; }
.lang-pick.open .lang-menu { display: block; }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; padding: 7px 10px; border-radius: 7px; cursor: pointer; color: var(--text); text-align: left; font-size: 13.5px; }
.lang-menu button:hover { background: rgba(255, 255, 255, .07); }
.lang-menu button.on { background: color-mix(in srgb, var(--primary) 22%, transparent); font-weight: 600; }
.ph-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.app-btn { white-space: nowrap; }
.qr { display: flex; justify-content: center; margin: 6px 0 12px; min-height: 40px; }
.qr svg { width: 210px; height: 210px; background: #fff; border-radius: 10px; padding: 6px; }
.app-install p { margin-top: 0; }
.g-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.g-head h2 { display: flex; align-items: center; gap: 8px; }
.theme-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.theme-opt { border: 2px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--card); color: var(--text); padding: 0; text-align: left; font: inherit; }
.theme-opt.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); }
.theme-prev { height: 120px; }
.theme-prev.marine { background: radial-gradient(400px 160px at 20% 0%, rgba(47, 124, 246, .55), transparent 70%), linear-gradient(135deg, #06142b, #0e2650); }
.theme-prev.beach { background: var(--beach-img) center bottom / cover, #9fd8f5; }
.theme-opt .l { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 640px) { .theme-choice { grid-template-columns: 1fr; } .lang-cur b { display: none; } }

/* ---------- Summer beach (light) theme: sun, sea and sand, dark text, gold touches ---------- */
html.theme-beach { color-scheme: light; }
html.theme-beach body, html.theme-beach body.auth { background: var(--beach-img) center bottom / cover fixed, #d7f1fc; }
html.theme-beach a { color: #0a6fae; }
html.theme-beach .sidebar { background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); border-right-color: #ead7a6; }
html.theme-beach .brand { border-bottom-color: #ead7a6; }
html.theme-beach .side-foot { border-top-color: #ead7a6; }
html.theme-beach .topbar { background: rgba(255, 255, 255, .84); }
html.theme-beach .card, html.theme-beach .kpi { background: rgba(255, 255, 255, .92); box-shadow: 0 6px 24px rgba(14, 60, 100, .10); }
html.theme-beach .auth-card { background: rgba(255, 255, 255, .93); box-shadow: 0 12px 40px rgba(14, 60, 100, .18); border-color: #ead7a6; }
html.theme-beach .auth-foot { color: #3d5a70; font-weight: 600; }
html.theme-beach input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), html.theme-beach select, html.theme-beach textarea, html.theme-beach .search { background: #fff; }
html.theme-beach input[type=date], html.theme-beach input[type=time], html.theme-beach input[type=datetime-local] { color-scheme: light; }
html.theme-beach select option { background: #fff; color: #0f2a43; }
html.theme-beach .btn.ghost:hover, html.theme-beach .icon-btn:hover, html.theme-beach .nav a:hover, html.theme-beach .dropdown a:hover, html.theme-beach .user-btn:hover, html.theme-beach .lang-cur:hover, html.theme-beach .lang-menu button:hover, html.theme-beach .leader-row:hover, html.theme-beach .checklist a:hover, html.theme-beach .chat-side .ch:hover, html.theme-beach .lead-sugg button:hover, html.theme-beach .month-cell:hover, html.theme-beach .dialpad button:hover { background: rgba(11, 127, 199, .08); }
html.theme-beach .nav a.active { background: rgba(11, 127, 199, .13); }
html.theme-beach .table th { background: rgba(11, 127, 199, .06); }
html.theme-beach .table tbody tr:hover td { background: rgba(11, 127, 199, .04); }
html.theme-beach .badge { background: #e8eef3; color: #3f5568; }
html.theme-beach .badge.blue { background: #dbeafe; color: #1e4fa8; }
html.theme-beach .badge.cyan { background: #cffafe; color: #0e6170; }
html.theme-beach .badge.green { background: #dcfce7; color: #166534; }
html.theme-beach .badge.orange { background: #fef3c7; color: #92400e; }
html.theme-beach .badge.red { background: #fee2e2; color: #991b1b; }
html.theme-beach .badge.purple { background: #ede9fe; color: #5b21b6; }
html.theme-beach .badge.gold { background: #fdf0c8; color: #8a5a00; }
html.theme-beach .badge.dark { background: #1f2937; color: #fecaca; }
html.theme-beach .alert.error, html.theme-beach .banner.danger { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
html.theme-beach .alert.ok { background: #f0fdf4; border-color: #86efac; color: #166534; }
html.theme-beach .alert.warn, html.theme-beach .banner.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
html.theme-beach .empty.ok { color: #15803d; }
html.theme-beach .err, html.theme-beach .error-box { color: #b91c1c; }
html.theme-beach .phone-pill { background: rgba(15, 42, 67, .06); }
html.theme-beach .phone-pill.green { color: #15803d; } html.theme-beach .phone-pill.orange { color: #b45309; } html.theme-beach .phone-pill.red { color: #b91c1c; } html.theme-beach .phone-pill.blue { color: #1d4ed8; }
html.theme-beach .mini-kpis div, html.theme-beach .mode-box, html.theme-beach .pitch, html.theme-beach .dialpad button, html.theme-beach .bubble, html.theme-beach .license-box, html.theme-beach .theme-row, html.theme-beach .map-row, html.theme-beach pre.code, html.theme-beach .doc-pdf, html.theme-beach .rb-bar, html.theme-beach .rank { background: rgba(11, 127, 199, .06); }
html.theme-beach .modal-wrap { background: rgba(15, 42, 67, .45); }
html.theme-beach .msg.mine .bubble { background: #d9efff; border-color: #9fd2f3; }
html.theme-beach .wa .msg.mine .bubble { background: #dcfce7; border-color: #86efac; }
html.theme-beach .cal-ev { box-shadow: 0 2px 8px rgba(14, 60, 100, .15); }
html.theme-beach .lv.money, html.theme-beach .lic { color: #8a5a00; }
html.theme-beach .when { color: #0a6fae; }
html.theme-beach .form-section { color: #8a5a00; border-bottom-color: #ead7a6; }
html.theme-beach .btn.success { background: #16a34a; color: #fff; }
html.theme-beach .flag { box-shadow: 0 0 0 1px rgba(15, 42, 67, .2); }
html.theme-beach .toast { background: #fff; }
html.theme-beach ::-webkit-scrollbar-thumb { background: #b9cfdf; border-color: transparent; }
html.theme-beach .nav-shade { background: rgba(15, 42, 67, .35); }

/* ---------- v2.6.3 autodialer ---------- */
.autodial-box { margin-top: 10px; background: rgba(0, 0, 0, .18); border-radius: 10px; padding: 8px 10px; }
.autodial-box .ad-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.autodial-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 14%, transparent); flex-wrap: wrap; }
.autodial-bar > div:first-child { flex: 1; min-width: 200px; }
.ad-prog { height: 6px; background: rgba(0, 0, 0, .25); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.ad-prog i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 1s linear; }
html.theme-beach .autodial-box, html.theme-beach .ad-prog { background: rgba(11, 127, 199, .08); }

/* ---------- v2.7 AI Support ---------- */
.ai-wrap { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 420px; margin-bottom: 8px; }
.ai-wrap .msg { max-width: 86%; }
.ai-sugg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
@media (max-width: 960px) { .ai-wrap { height: 72vh; } }


/* ---------- login: lion crest background (added 2026-10-19) ---------- */
html:has(body.auth), html body.auth { background: #0b0b0d !important; background-image: none !important; }
html body.auth {
  --lhS: min(92vh, 58vw); --lhGap: 24px; --lhCard: 400px;
  --lhW: calc(var(--lhS) * .685 + var(--lhGap) + var(--lhCard));
  --lhImgL: calc(50vw - var(--lhW) / 2 - var(--lhS) * .16);
  --bg: #0b0b0d; --panel: #121214; --card: #121214;
  --border: rgba(212,165,116,.38); --text: #f4ede1; --muted: #b8a98f;
  --primary: #c9a063; --accent: #d4a574; --shadow: 0 18px 50px rgba(0,0,0,.6);
  color: var(--text); min-height: 100vh;
}
html body.auth::after { content: none; }
html body.auth::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  left: var(--lhImgL); top: calc(50vh - var(--lhS) / 2);
  width: var(--lhS); height: var(--lhS);
  background: url("../img/login-lion.jpg") center / contain no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 80%, transparent 100%);
}
html body.auth #app, html body.auth .auth-page { position: relative; z-index: 1; background: transparent !important; }
html body.auth .auth-page { align-items: flex-start; padding-left: calc(var(--lhImgL) + var(--lhS) * .845 + var(--lhGap)); }
html body.auth .auth-card { width: var(--lhCard); max-width: var(--lhCard); background: rgba(18,18,20,.94); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); }
html body.auth .auth-card h1, html body.auth .auth-card h2, html body.auth .auth-card label { color: var(--text); }
html body.auth .auth-card input, html body.auth .auth-card select { background: #0b0b0d !important; color: var(--text) !important; border: 1px solid rgba(212,165,116,.30) !important; }
html body.auth .auth-card input:focus { border-color: #d4a574 !important; box-shadow: 0 0 0 3px rgba(212,165,116,.18) !important; outline: none; }
html body.auth .auth-card button[type="submit"], html body.auth .auth-card .btn-primary, html body.auth .auth-card .btn.primary { background: linear-gradient(180deg, #e2bd84, #b98a4c) !important; color: #141414 !important; border: 0 !important; }
html body.auth .auth-card a, html body.auth .auth-foot a { color: #d4a574; }
html body.auth .auth-foot { width: var(--lhCard); text-align: center; color: var(--muted); }
@media (max-width: 900px), (orientation: portrait) {
  html body.auth { --lhM: min(62vw, 300px); }
  html body.auth::before { position: absolute; left: calc(50% - var(--lhM) / 2); top: 12px; width: var(--lhM); height: var(--lhM); }
  html body.auth .auth-page { align-items: center; justify-content: flex-start; padding: calc(var(--lhM) + 8px) 16px 24px; }
  html body.auth .auth-card, html body.auth .auth-foot { width: 100%; max-width: var(--lhCard); }
}html body.auth .auth-card input:-webkit-autofill, html body.auth .auth-card input:-webkit-autofill:hover, html body.auth .auth-card input:-webkit-autofill:focus { /* lion-autofill */ -webkit-box-shadow: 0 0 0 60px #0b0b0d inset !important; -webkit-text-fill-color: #f4ede1 !important; caret-color: #f4ede1; }html body.auth .auth-logo img { /* lion-nologo */ display: none !important; }html body.auth { /* lion-size */ --lhS: min(74vh, 46vw, 680px); }
@media (max-width: 900px), (orientation: portrait) { html body.auth { --lhM: min(56vw, 250px); } }

/* ---------- v2.9.8 extra themes: Lion (black & gold, like the login page), Autumn in Stockholm, Graphite ---------- */
:root { --autumn-img: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23140d16'/><stop offset='.5' stop-color='%23472117'/><stop offset='.72' stop-color='%23a0461c'/></linearGradient><radialGradient id='g'><stop offset='0' stop-color='%23ffcf7a' stop-opacity='.6'/><stop offset='1' stop-color='%23ffcf7a' stop-opacity='0'/></radialGradient></defs><rect width='1600' height='1000' fill='url(%23s)'/><circle cx='1180' cy='520' r='230' fill='url(%23g)' opacity='.5'/><path d='M0 705 H170 V665 H240 V690 H330 V640 H352 V600 L366 548 L380 600 V640 H420 V680 H560 V650 H618 V430 H636 V412 H664 V430 H682 V650 H760 V690 H900 V655 H958 V618 L974 530 L990 618 V655 H1080 V686 H1240 V652 H1300 V690 H1600 V1000 H0Z' fill='%23261510'/><path d='M636 404 l7 -10 l7 10 l7 -10 l7 10' stroke='%23e8b04a' stroke-width='3' fill='none'/><rect y='705' width='1600' height='34' fill='%232e1a12'/><path d='M0 716 H1600 M0 729 H1600' stroke='%23e8a33d' stroke-opacity='.16' stroke-width='2'/><path d='M0 742 Q400 724 800 744 T1600 736 V1000 H0Z' fill='%231e1108'/><path d='M650 1000 Q770 860 800 746 Q830 860 960 1000Z' fill='%23331e14'/><g fill='%23150b05'><rect x='186' y='600' width='26' height='400'/><rect x='432' y='660' width='16' height='300'/><rect x='1168' y='640' width='20' height='340'/><rect x='1380' y='590' width='28' height='410'/></g><g opacity='.95'><circle cx='200' cy='560' r='120' fill='%238c2f14'/><circle cx='120' cy='610' r='90' fill='%23b4441a'/><circle cx='290' cy='600' r='95' fill='%23d9772b'/><circle cx='215' cy='470' r='85' fill='%23e8a33d'/><circle cx='440' cy='640' r='70' fill='%23c2561f'/><circle cx='395' cy='600' r='55' fill='%23e8a33d'/><circle cx='1178' cy='610' r='80' fill='%23b4441a'/><circle cx='1235' cy='570' r='60' fill='%23e8a33d'/><circle cx='1395' cy='540' r='130' fill='%23a33a16'/><circle cx='1500' cy='600' r='100' fill='%23d9772b'/><circle cx='1320' cy='610' r='85' fill='%23c2561f'/><circle cx='1410' cy='440' r='80' fill='%23e8a33d'/></g><path d='M1000 1000 V770' stroke='%23150b05' stroke-width='8'/><circle cx='1000' cy='766' r='10' fill='%23ffd58a'/><circle cx='1000' cy='766' r='70' fill='url(%23g)'/><g fill='%23d9772b' opacity='.8'><ellipse cx='300' cy='900' rx='9' ry='4' transform='rotate(20 300 900)'/><ellipse cx='520' cy='940' rx='8' ry='4' fill='%23e8a33d' transform='rotate(-30 520 940)'/><ellipse cx='880' cy='960' rx='9' ry='4' fill='%23b4441a'/><ellipse cx='1120' cy='910' rx='8' ry='4' transform='rotate(40 1120 910)'/><ellipse cx='1450' cy='950' rx='10' ry='5' fill='%23e8a33d'/><ellipse cx='720' cy='880' rx='7' ry='3' fill='%23b4441a' transform='rotate(-15 720 880)'/></g></svg>"); --autumn-leaves: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><path d='M0 0 q9 -9 18 0 q-9 9 -18 0z' fill='%23d9772b' transform='translate(30 40) rotate(30)'/><path d='M0 0 q8 -8 16 0 q-8 8 -16 0z' fill='%23e8a33d' transform='translate(190 20) rotate(-40)'/><path d='M0 0 q10 -10 20 0 q-10 10 -20 0z' fill='%23b4441a' transform='translate(120 150) rotate(70)'/><path d='M0 0 q7 -7 14 0 q-7 7 -14 0z' fill='%23f2b134' transform='translate(250 200) rotate(10)'/><path d='M0 0 q9 -9 18 0 q-9 9 -18 0z' fill='%23c2561f' transform='translate(60 250) rotate(-60)'/></svg>"); }
.theme-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-prev { height: 150px; }
@media (max-width: 640px) { .theme-choice { grid-template-columns: 1fr; } }
.theme-prev.lion { background: url("../img/login-lion.jpg") center / auto 94% no-repeat, radial-gradient(260px 140px at 50% 50%, rgba(212, 165, 116, .18), transparent 70%), #0b0b0d; }
.theme-prev.autumn { background: var(--autumn-leaves) 0 0 / 150px 150px, var(--autumn-img) center bottom / cover, #3a2414; }
.theme-prev.graphite { background: radial-gradient(400px 160px at 20% 0%, rgba(37, 99, 235, .45), transparent 70%), linear-gradient(135deg, #111315, #23282e); }

/* Lion */
html.theme-lion body:not(.auth) { background: radial-gradient(1000px 520px at 80% -10%, rgba(212, 165, 116, .10), transparent 60%), #0b0b0d; }
html.theme-lion body:not(.auth)::before { content: ""; position: fixed; z-index: -1; pointer-events: none; right: 2vw; bottom: 2vh; width: min(80vh, 56vw); height: min(80vh, 56vw); background: url("../img/login-lion.jpg") center / contain no-repeat; opacity: .18; -webkit-mask-image: radial-gradient(closest-side, #000 75%, transparent 100%); mask-image: radial-gradient(closest-side, #000 75%, transparent 100%); }
html.theme-lion .card, html.theme-lion .kpi { background: rgba(23, 23, 26, .84); }
html.theme-lion .btn.primary { background: linear-gradient(180deg, #e2bd84, #b98a4c); color: #141414; }
html.theme-lion .btn.primary:hover { filter: brightness(1.06); }
html.theme-lion ::selection { color: #141414; }
html.theme-lion .nav a.active { box-shadow: inset 3px 0 0 #d4a574; }
html.theme-lion .form-section { color: #d4a574; }

/* Autumn in Stockholm */
html.theme-autumn body:not(.auth) { background: var(--autumn-img) center bottom / cover fixed, #1a120c; }
html.theme-autumn body:not(.auth)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--autumn-leaves) 0 0 / 300px 300px; opacity: .5; animation: lh-leaves 45s linear infinite; }
@keyframes lh-leaves { from { background-position: 0 0; } to { background-position: 300px 600px; } }
@media (prefers-reduced-motion: reduce) { html.theme-autumn body:not(.auth)::after { animation: none; } }
html.theme-autumn .sidebar { background: rgba(32, 22, 15, .90); backdrop-filter: blur(6px); }
html.theme-autumn .topbar { background: rgba(32, 22, 15, .86); }
html.theme-autumn .card, html.theme-autumn .kpi { background: rgba(42, 28, 18, .92); }
html.theme-autumn .form-section { color: #f59e0b; }

/* ---------- v2.9.9 AI theme: deep space, violet + cyan neural network ---------- */
:root { --ai-net: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 900'><defs><radialGradient id='c'><stop offset='0' stop-color='%2322d3ee' stop-opacity='.55'/><stop offset='1' stop-color='%2322d3ee' stop-opacity='0'/></radialGradient><radialGradient id='v'><stop offset='0' stop-color='%23a78bfa' stop-opacity='.55'/><stop offset='1' stop-color='%23a78bfa' stop-opacity='0'/></radialGradient><radialGradient id='f' cx='.56' cy='.48' r='.5'><stop offset='0' stop-color='%23fff'/><stop offset='.75' stop-color='%23fff'/><stop offset='1' stop-color='%23fff' stop-opacity='0'/></radialGradient><mask id='m'><rect width='1000' height='900' fill='url(%23f)'/></mask></defs><g mask='url(%23m)'><path d='M456 4L532 -4M456 4L400 68M456 4L493 72M532 -4L493 72M532 -4L587 85M311 73L400 68M311 73L266 154M311 73L361 160M400 68L493 72M400 68L361 160M400 68L462 155M493 72L587 85M493 72L462 155M493 72L544 161M587 85L662 72M587 85L544 161M587 85L630 162M662 72L765 76M662 72L630 162M662 72L717 163M765 76L717 163M765 76L813 152M266 154L361 160M266 154L215 222M361 160L462 155M462 155L544 161M462 155L508 246M544 161L630 162M544 161L508 246M544 161L597 247M630 162L717 163M630 162L597 247M630 162L668 220M717 163L813 152M717 163L668 220M717 163L752 220M813 152L897 165M813 152L752 220M813 152L847 242M897 165L847 242M508 246L597 247M508 246L464 315M508 246L533 305M597 247L668 220M597 247L533 305M597 247L632 300M668 220L752 220M668 220L632 300M752 220L847 242M752 220L726 320M752 220L796 302M847 242L796 302M847 242L889 319M282 317L346 325M282 317L233 389M282 317L322 403M346 325L322 403M346 325L397 389M464 315L533 305M464 315L397 389M464 315L497 387M533 305L632 300M533 305L497 387M533 305L592 387M632 300L726 320M632 300L592 387M632 300L673 382M726 320L796 302M726 320L673 382M726 320L780 406M796 302L889 319M796 302L780 406M889 319L866 404M889 319L949 381M146 406L233 389M233 389L322 403M233 389L275 470M322 403L397 389M322 403L275 470M322 403L360 478M397 389L497 387M397 389L360 478M397 389L458 456M497 387L592 387M497 387L458 456M497 387L541 461M592 387L673 382M592 387L541 461M592 387L624 462M673 382L780 406M673 382L624 462M673 382L718 457M780 406L866 404M780 406L718 457M780 406L820 482M866 404L949 381M866 404L820 482M275 470L360 478M275 470L303 533M360 478L458 456M360 478L303 533M458 456L541 461M458 456L486 553M541 461L624 462M541 461L486 553M541 461L584 563M624 462L718 457M624 462L584 563M624 462L680 556M718 457L820 482M718 457L680 556M718 457L762 535M820 482L762 535M486 553L584 563M486 553L532 639M584 563L680 556M584 563L532 639M584 563L638 625M680 556L762 535M680 556L638 625M680 556L734 635M762 535L734 635M762 535L812 622M173 631L237 715M532 639L638 625M532 639L490 716M532 639L592 718M638 625L734 635M638 625L592 718M638 625L666 697M734 635L812 622M734 635L666 697M734 635L753 717M812 622L900 626M812 622L753 717M812 622L859 711M900 626L859 711M237 715L313 704M313 704L352 795M490 716L592 718M490 716L445 788M490 716L528 777M592 718L666 697M592 718L528 777M592 718L615 772M666 697L753 717M666 697L615 772M666 697L706 789M753 717L859 711M753 717L706 789M753 717L800 774M859 711L800 774M352 795L445 788M445 788L528 777M528 777L615 772M615 772L706 789M706 789L800 774' stroke='%2322d3ee' stroke-opacity='.35' stroke-width='1.6' fill='none'/><circle cx='456' cy='4' r='29' fill='url(%23c)'/><circle cx='532' cy='-4' r='23' fill='url(%23c)'/><circle cx='493' cy='72' r='19' fill='url(%23c)'/><circle cx='765' cy='76' r='31' fill='url(%23c)'/><circle cx='897' cy='165' r='22' fill='url(%23v)'/><circle cx='508' cy='246' r='25' fill='url(%23v)'/><circle cx='597' cy='247' r='25' fill='url(%23v)'/><circle cx='668' cy='220' r='19' fill='url(%23v)'/><circle cx='464' cy='315' r='19' fill='url(%23c)'/><circle cx='726' cy='320' r='23' fill='url(%23v)'/><circle cx='889' cy='319' r='30' fill='url(%23v)'/><circle cx='360' cy='478' r='30' fill='url(%23c)'/><circle cx='624' cy='462' r='21' fill='url(%23v)'/><circle cx='762' cy='535' r='27' fill='url(%23c)'/><circle cx='638' cy='625' r='21' fill='url(%23c)'/><circle cx='900' cy='626' r='20' fill='url(%23c)'/><circle cx='592' cy='718' r='21' fill='url(%23c)'/><circle cx='528' cy='777' r='19' fill='url(%23c)'/><circle cx='706' cy='789' r='25' fill='url(%23c)'/><circle cx='456' cy='4' r='3.6' fill='%2322d3ee'/><circle cx='532' cy='-4' r='6.0' fill='%2322d3ee'/><circle cx='311' cy='73' r='6.6' fill='%2322d3ee'/><circle cx='400' cy='68' r='5.9' fill='%2322d3ee'/><circle cx='493' cy='72' r='6.7' fill='%2322d3ee'/><circle cx='587' cy='85' r='6.1' fill='%23a78bfa'/><circle cx='662' cy='72' r='4.3' fill='%23a78bfa'/><circle cx='765' cy='76' r='6.1' fill='%2322d3ee'/><circle cx='266' cy='154' r='3.3' fill='%2322d3ee'/><circle cx='361' cy='160' r='7.0' fill='%2322d3ee'/><circle cx='462' cy='155' r='3.5' fill='%2322d3ee'/><circle cx='544' cy='161' r='7.1' fill='%2322d3ee'/><circle cx='630' cy='162' r='7.0' fill='%2322d3ee'/><circle cx='717' cy='163' r='7.3' fill='%23a78bfa'/><circle cx='813' cy='152' r='3.8' fill='%23a78bfa'/><circle cx='897' cy='165' r='7.8' fill='%23a78bfa'/><circle cx='215' cy='222' r='7.7' fill='%2322d3ee'/><circle cx='508' cy='246' r='4.4' fill='%23a78bfa'/><circle cx='597' cy='247' r='5.8' fill='%23a78bfa'/><circle cx='668' cy='220' r='4.1' fill='%23a78bfa'/><circle cx='752' cy='220' r='6.1' fill='%2322d3ee'/><circle cx='847' cy='242' r='6.6' fill='%2322d3ee'/><circle cx='282' cy='317' r='4.9' fill='%2322d3ee'/><circle cx='346' cy='325' r='6.9' fill='%2322d3ee'/><circle cx='464' cy='315' r='6.0' fill='%2322d3ee'/><circle cx='533' cy='305' r='6.6' fill='%2322d3ee'/><circle cx='632' cy='300' r='5.7' fill='%2322d3ee'/><circle cx='726' cy='320' r='3.6' fill='%23a78bfa'/><circle cx='796' cy='302' r='4.7' fill='%23a78bfa'/><circle cx='889' cy='319' r='3.6' fill='%23a78bfa'/><circle cx='146' cy='406' r='7.3' fill='%23a78bfa'/><circle cx='233' cy='389' r='4.6' fill='%2322d3ee'/><circle cx='322' cy='403' r='7.0' fill='%23a78bfa'/><circle cx='397' cy='389' r='4.0' fill='%2322d3ee'/><circle cx='497' cy='387' r='3.2' fill='%23a78bfa'/><circle cx='592' cy='387' r='6.8' fill='%23a78bfa'/><circle cx='673' cy='382' r='7.1' fill='%2322d3ee'/><circle cx='780' cy='406' r='4.5' fill='%23a78bfa'/><circle cx='866' cy='404' r='7.4' fill='%2322d3ee'/><circle cx='949' cy='381' r='7.3' fill='%2322d3ee'/><circle cx='275' cy='470' r='6.8' fill='%2322d3ee'/><circle cx='360' cy='478' r='4.4' fill='%2322d3ee'/><circle cx='458' cy='456' r='3.8' fill='%2322d3ee'/><circle cx='541' cy='461' r='7.1' fill='%2322d3ee'/><circle cx='624' cy='462' r='7.1' fill='%23a78bfa'/><circle cx='718' cy='457' r='3.1' fill='%2322d3ee'/><circle cx='820' cy='482' r='6.1' fill='%2322d3ee'/><circle cx='303' cy='533' r='7.1' fill='%23a78bfa'/><circle cx='486' cy='553' r='5.3' fill='%2322d3ee'/><circle cx='584' cy='563' r='6.8' fill='%2322d3ee'/><circle cx='680' cy='556' r='5.5' fill='%23a78bfa'/><circle cx='762' cy='535' r='6.9' fill='%2322d3ee'/><circle cx='173' cy='631' r='5.8' fill='%2322d3ee'/><circle cx='532' cy='639' r='4.6' fill='%2322d3ee'/><circle cx='638' cy='625' r='6.2' fill='%2322d3ee'/><circle cx='734' cy='635' r='3.6' fill='%2322d3ee'/><circle cx='812' cy='622' r='7.4' fill='%2322d3ee'/><circle cx='900' cy='626' r='4.7' fill='%2322d3ee'/><circle cx='237' cy='715' r='3.3' fill='%2322d3ee'/><circle cx='313' cy='704' r='3.5' fill='%2322d3ee'/><circle cx='490' cy='716' r='5.3' fill='%23a78bfa'/><circle cx='592' cy='718' r='4.4' fill='%2322d3ee'/><circle cx='666' cy='697' r='5.2' fill='%23a78bfa'/><circle cx='753' cy='717' r='5.9' fill='%2322d3ee'/><circle cx='859' cy='711' r='5.5' fill='%2322d3ee'/><circle cx='352' cy='795' r='3.6' fill='%2322d3ee'/><circle cx='445' cy='788' r='7.5' fill='%2322d3ee'/><circle cx='528' cy='777' r='4.5' fill='%2322d3ee'/><circle cx='615' cy='772' r='4.5' fill='%2322d3ee'/><circle cx='706' cy='789' r='6.6' fill='%2322d3ee'/><circle cx='800' cy='774' r='6.9' fill='%23a78bfa'/></g></svg>"); }
.theme-prev.ai { background: var(--ai-net) 85% 50% / auto 130% no-repeat, radial-gradient(300px 160px at 85% 40%, rgba(124, 108, 246, .45), transparent 70%), linear-gradient(135deg, #070a14, #11163a); }
html.theme-ai body:not(.auth) { background: radial-gradient(1000px 560px at 88% -8%, rgba(124, 108, 246, .24), transparent 60%), radial-gradient(900px 520px at -5% 105%, rgba(34, 211, 238, .13), transparent 60%), #070a14; }
html.theme-ai body:not(.auth)::before { content: ""; position: fixed; z-index: -1; pointer-events: none; right: -6vw; top: 8vh; width: min(92vh, 62vw); height: min(84vh, 56vw); background: var(--ai-net) center / contain no-repeat; opacity: .55; animation: lh-ai-pulse 7s ease-in-out infinite; }
html.theme-ai body:not(.auth)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(124, 108, 246, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 108, 246, .07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%); }
@keyframes lh-ai-pulse { 0%, 100% { opacity: .42; } 50% { opacity: .66; } }
@media (prefers-reduced-motion: reduce) { html.theme-ai body:not(.auth)::before { animation: none; } }
html.theme-ai .sidebar { background: rgba(11, 16, 32, .9); backdrop-filter: blur(8px); border-right-color: rgba(124, 108, 246, .28); }
html.theme-ai .topbar { background: rgba(9, 13, 28, .78); border-bottom-color: rgba(124, 108, 246, .25); }
html.theme-ai .card, html.theme-ai .kpi { background: rgba(15, 21, 41, .80); border-color: rgba(124, 108, 246, .24); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(6px); }
html.theme-ai .kpi { transition: border-color .2s, box-shadow .2s; }
html.theme-ai .kpi:hover { border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 0 1px rgba(34, 211, 238, .25), 0 0 26px rgba(34, 211, 238, .18); }
html.theme-ai .kpi-i { box-shadow: 0 0 16px rgba(124, 108, 246, .35); }
html.theme-ai .btn.primary { background: linear-gradient(135deg, #8b7cf8, #5b4be0); color: #fff; box-shadow: 0 0 18px rgba(124, 108, 246, .45); }
html.theme-ai .btn.primary:hover { box-shadow: 0 0 26px rgba(34, 211, 238, .45); }
html.theme-ai .nav a.active { background: linear-gradient(90deg, rgba(124, 108, 246, .30), rgba(34, 211, 238, .06)); box-shadow: inset 3px 0 0 #22d3ee; }
html.theme-ai #page-title { background: linear-gradient(90deg, #ffffff, #c4b5fd 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.theme-ai .form-section { color: #22d3ee; }
html.theme-ai ::-webkit-scrollbar-thumb { background: #2f2a6b; }
html.theme-ai ::selection { background: #7c6cf6; color: #fff; }

/* ---------- v2.9.10 AI theme: dashboard hero ---------- */
.ai-hero { position: relative; overflow: hidden; border-radius: 16px; padding: 36px 34px; margin-bottom: 18px; border: 1px solid rgba(124, 108, 246, .38); background: var(--ai-net) 104% 50% / auto 175% no-repeat, radial-gradient(520px 280px at 85% 50%, rgba(124, 108, 246, .38), transparent 70%), linear-gradient(120deg, rgba(15, 21, 41, .94), rgba(17, 22, 58, .86)); box-shadow: 0 0 44px rgba(124, 108, 246, .16); }
.ai-hero-txt { max-width: 640px; position: relative; }
.ai-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase; color: #22d3ee; font-weight: 700; }
.ai-hero h1 { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.06; margin: 10px 0 12px; letter-spacing: -.5px; background: linear-gradient(90deg, #ffffff, #c4b5fd 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-hero p { margin: 0; color: #c7cdf0; font-size: 15.5px; line-height: 1.55; max-width: 560px; }
@media (max-width: 640px) { .ai-hero { padding: 24px 18px; background-position: 160% 50%, center, center; background-size: auto 120%, auto, auto; } }
.ai-hero { display: flex; align-items: center; gap: 24px; }
.ai-hero-txt { flex: 1; min-width: 0; }
.ai-hero-img { flex: none; width: min(40%, 420px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid rgba(34, 211, 238, .35); box-shadow: 0 0 34px rgba(124, 108, 246, .35); }
.ai-hero.has-img { background: radial-gradient(520px 280px at 85% 50%, rgba(124, 108, 246, .38), transparent 70%), var(--ai-net) 40% 50% / auto 175% no-repeat, linear-gradient(120deg, rgba(15, 21, 41, .94), rgba(17, 22, 58, .86)); }
@media (max-width: 760px) { .ai-hero { flex-direction: column; align-items: stretch; } .ai-hero-img { width: 100%; } }
.ai-hero-img { object-position: center 75%; }

/* WordPress version: license keys are managed only in the hosted LeadHunter PRO */
.host-wordpress .license-box, .host-wordpress #wz-regen, .host-wordpress [data-act="regen"] { display: none !important; }

/* Plans on the login page - same look in every theme (uses the theme colours) */
.auth-prices { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); font-size: 12px; line-height: 1.3; background: rgba(0, 0, 0, .28); border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.auth-price { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text); white-space: nowrap; }
.auth-price i { width: 8px; height: 8px; border-radius: 50%; align-self: center; background: #cd7f32; }
.auth-price.silver i { background: #c0c7d0; }
.auth-price.gold i { background: #d4af37; }
.auth-price b { font-weight: 700; }
.auth-price .p { font-weight: 700; color: var(--accent); }
.auth-price small { color: var(--muted); font-size: 11px; }
.auth-prices .more { color: var(--muted); font-size: 11px; }
html body.auth { padding-bottom: 46px; }
html.theme-beach .auth-prices { background: rgba(255, 255, 255, .55); }
@media (max-width: 640px) { .auth-prices { position: static; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 12px 18px; } html body.auth { padding-bottom: 0; } }

/* Login (lion layout) on wide screens: lion a bit further left, plans as blocks to the right of the login card */
@media (min-width: 1180px) {
  html body.auth { --lhP: 252px; --lhPG: 24px; --lhW: calc(var(--lhS) * .685 + var(--lhGap) + var(--lhCard) + var(--lhPG) + var(--lhP)); padding-bottom: 0; }
  .auth-prices { left: calc(var(--lhImgL) + var(--lhS) * .845 + var(--lhGap) + var(--lhCard) + var(--lhPG)); right: auto; bottom: auto; top: calc(50vh - 95px); transform: translateY(-50%); width: var(--lhP); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .auth-price { display: grid; grid-template-columns: 10px 1fr auto; grid-template-areas: "dot name price" ". sub sub"; align-items: center; column-gap: 9px; row-gap: 4px; padding: 13px 16px; border-radius: 13px; white-space: nowrap; background: rgba(18, 18, 20, .92); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); }
  .auth-price i { grid-area: dot; width: 10px; height: 10px; }
  .auth-price b { grid-area: name; font-size: 15.5px; }
  .auth-price .p { grid-area: price; font-size: 15.5px; }
  .auth-price small { grid-area: sub; font-size: 12.5px; }
  .auth-prices .more { text-align: center; font-size: 12.5px; padding-top: 2px; }
}

/* Login: short pitch above the plans */
.auth-pitch { flex-basis: 100%; text-align: center; color: var(--text); font-size: 12px; line-height: 1.4; }
.auth-pitch b { display: block; color: var(--accent); font-size: 13px; }
@media (min-width: 1180px) { .auth-pitch { flex-basis: auto; padding: 0 2px 4px; font-size: 12.5px; } .auth-pitch b { font-size: 15px; margin-bottom: 2px; } }

/* Server panel (super admin) */
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.sp-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.sp-tile small, .sp-tile span { color: var(--muted); font-size: 12px; }
.sp-tile b { font-size: 22px; line-height: 1.2; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.sp-grid .card { margin: 0; }
.sp-checks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-checks li { display: flex; gap: 8px; align-items: flex-start; }
.sp-checks li.ok .ic { color: #22c55e; }
.sp-checks li.bad .ic { color: #ef4444; }
.sp-checks small { display: block; color: var(--muted); font-size: 12px; }
.sp-bar { height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 4px 0 8px; }
.sp-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.sp-bar.warn i { background: #f59e0b; }
.sp-kinds td.num { text-align: right; white-space: nowrap; }
.sp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sp-inline label { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.sp-inline input { width: 110px; }

/* Login plans: Silver highlighted as the recommended package */
.auth-price.silver { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 26px rgba(0, 0, 0, .45); }
.auth-best { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #111; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .02em; vertical-align: 2px; }
.auth-feat { font-style: normal; color: var(--accent); }
/* Login packages: wrap feature lines, price per month next to price */
@media (min-width:1180px){.auth-prices .auth-price small,.auth-prices .auth-price .auth-feat{white-space:normal}}
@media (max-width:1179px){.auth-prices{position:static;background:none;border:0;backdrop-filter:none;padding:10px 12px 18px;flex-direction:column;align-items:center}.auth-prices .auth-price{display:grid;grid-template-columns:10px 1fr auto;grid-template-areas:"dot name price" ". sub sub";align-items:center;gap:2px 8px;width:100%;max-width:420px;box-sizing:border-box;border-radius:12px;padding:9px 12px;white-space:normal;text-align:left}.auth-prices .auth-price i{grid-area:dot}.auth-prices .auth-price b{grid-area:name}.auth-prices .auth-price .p{grid-area:price;white-space:nowrap}.auth-prices .auth-price small{grid-area:sub;white-space:normal}.auth-prices .auth-price.silver{border-color:var(--accent)}}
.auth-prices .auth-price .p .per{font-size:.72em;font-weight:500;opacity:.85;margin-left:3px;white-space:nowrap}