/* ============================================================
   Voice AI SaaS — Purple+White Gradient theme + heartbeat UI
   ============================================================ */
:root {
    --bg1:       #faf5ff;
    --bg2:       #f3effe;
    --panel:     #ffffff;
    --line:      #ece8f7;
    --text:      #2a2342;
    --muted:     #8b85a3;
    --primary:   #7c3aed;
    --primary-2: #a855f7;
    --primary-3: #6d28d9;
    --primary-d: #2a1a52;
    --green:     #16a34a; --green-bg:#dcfce7;
    --red:       #e11d48; --red-bg:#ffe4e6;
    --amber:     #d97706; --amber-bg:#fef3c7;
    --blue:      #6366f1; --blue-bg:#e0e7ff;
    --radius:    16px;
    --grad:      linear-gradient(135deg, var(--primary-2), var(--primary), var(--primary-3));
    --shadow:    0 4px 20px rgba(124,58,237,.08), 0 1px 3px rgba(124,58,237,.06);
    --shadow-lg: 0 12px 40px rgba(124,58,237,.16);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #ece7fb);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { margin: 0 0 6px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
h2 { margin: 0 0 6px; color: var(--primary-d); }
.muted { color: var(--muted); }
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
code { background: #f3effe; padding: 2px 6px; border-radius: 6px; color: var(--primary-3); }

/* ---------------- Animations (heartbeat) ---------------- */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.07); }
    30% { transform: scale(1); }
    45% { transform: scale(1.04); }
    60% { transform: scale(1); }
}
@keyframes glowpulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.45); }
    70% { box-shadow: 0 0 0 9px rgba(124,58,237,0); }
}
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.heartbeat { animation: heartbeat 1.6s ease-in-out infinite; transform-origin: center; }
.glow { animation: glowpulse 1.8s ease-out infinite; }
.live-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--green); margin-right:6px; animation: glowpulse 1.6s ease-out infinite; box-shadow:0 0 0 0 rgba(22,163,74,.5); }

/* ---------------- Auth ---------------- */
.auth-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px;
    background: linear-gradient(135deg, #ede9fe, #faf5ff 40%, #f5d0fe);
}
.auth-wrap { width: 100%; max-width: 430px; animation: fadeup .5s ease; }
.auth-card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 22px; padding: 38px 34px; box-shadow: var(--shadow-lg); text-align: center;
}
.auth-logo {
    width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad); font-size: 30px; color:#fff; box-shadow: var(--shadow-lg);
    animation: heartbeat 2s ease-in-out infinite;
}
.auth-logo img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.auth-card h1 { font-size: 22px; line-height: 1.3; margin-bottom: 4px; }
.auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.auth-card .form { text-align: left; }
.auth-card .form label { font-weight: 600; color: var(--text); }
.btn-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px;
    border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text); font-weight:600; font-size:14px; cursor:pointer; margin-bottom:18px; }
.btn-google:hover { background:#faf5ff; text-decoration:none; }
.auth-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:6px 0 18px; }
.auth-divider::before, .auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-alt { text-align:center; margin-top:18px; color:var(--muted); font-size:14px; }
.auth-foot { display:flex; justify-content:space-between; margin-top:16px; font-size:14px; }

/* ---------------- App layout ---------------- */
body.app { display: flex; }
.sidebar {
    width: 236px; min-height: 100vh; background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
    border-right: 1px solid var(--line); position: sticky; top: 0;
    display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:18px; font-weight:700; font-size:16px;
    border-bottom:1px solid var(--line); color:var(--primary-d); }
.sb-dot { width:30px; height:30px; border-radius:50%; background:var(--grad); flex-shrink:0; animation: heartbeat 2s ease-in-out infinite; box-shadow:0 4px 12px rgba(124,58,237,.35); }
.sb-logo { height:30px; max-width:150px; object-fit:contain; }
.sidebar-nav { padding: 10px; flex: 1; overflow-y: auto; }
.nav-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px; color:#6b6485;
    font-size:14px; margin-bottom:2px; font-weight:500; transition: all .15s; position: relative; }
.nav-item:hover { background:#f5f0ff; color:var(--primary-3); text-decoration:none; transform: translateX(2px); }
.nav-item.active { background: var(--grad); color:#fff; font-weight:600; box-shadow:0 6px 16px rgba(124,58,237,.3); }
.nav-ico { width:18px; text-align:center; font-size:15px; }
.sidebar-foot { border-top:1px solid var(--line); padding:14px; display:flex; align-items:center; justify-content:space-between; }
.sb-user { display:flex; flex-direction:column; font-size:13px; }
.sb-user strong { color:var(--text); } .sb-user span { color:var(--muted); font-size:12px; }
.sb-logout { font-size:16px; color:var(--muted); padding:5px 9px; border:1px solid var(--line); border-radius:9px; }
.sb-logout:hover { background:#f5f0ff; text-decoration:none; }

.app-main { flex:1; min-width:0; }
.app-topbar { height:56px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
    padding:0 26px; background:rgba(255,255,255,.7); backdrop-filter: blur(10px); position: sticky; top:0; z-index: 20; }
.trial-pill { color:var(--muted); font-size:13px; font-weight:600; }
.wallet-pill { color:var(--primary-3); font-size:13px; font-weight:600; background:#f3effe; padding:6px 12px; border-radius:999px; }
.app-content { padding:26px 28px; max-width:1200px; animation: fadeup .4s ease; }
.trial-banner { background:linear-gradient(135deg,#ede9fe,#fae8ff); border:1px solid #e9d5ff; color:var(--primary-3);
    border-radius:12px; padding:11px 16px; font-size:14px; margin-bottom:18px; }

/* ---------------- Page bits ---------------- */
.page-head { margin-bottom:22px; }
.page-head h1 { font-size:25px; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:22px; }
.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
    display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition: transform .18s, box-shadow .18s; }
.stat-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); }
.stat-card:hover { transform: translateY(-3px); box-shadow:var(--shadow-lg); }
.stat-label { color:var(--muted); font-size:13px; }
.stat-value { font-size:28px; font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow); }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} .sidebar{width:60px} .sb-name,.sb-user,.nav-item span:not(.nav-ico){display:none} }

/* ---------------- Tables ---------------- */
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; color:var(--muted); font-weight:600; padding:10px 8px; border-bottom:2px solid var(--line); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.table td { padding:12px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background:#faf7ff; }
.table .empty { text-align:center; color:var(--muted); padding:26px; }
.table small { font-size:12px; }

/* ---------------- Badges ---------------- */
.badge { display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.badge-ok { background:var(--green-bg); color:var(--green); }
.badge-bad { background:var(--red-bg); color:var(--red); }
.badge-warn { background:var(--amber-bg); color:var(--amber); }
.badge-info { background:var(--blue-bg); color:var(--blue); }

/* ---------------- Buttons ---------------- */
.btn-primary,.btn-ghost,.btn-dark { display:inline-block; padding:11px 20px; border-radius:12px; font-weight:600; cursor:pointer; border:1px solid transparent; font-size:14px; text-align:center; transition: all .16s; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 6px 16px rgba(124,58,237,.28); background-size:200% 200%; }
.btn-primary:hover { text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,58,237,.4); animation: shimmer 1.2s linear; }
.btn-dark { background:linear-gradient(135deg,var(--primary-3),var(--primary-d)); color:#fff; box-shadow:0 6px 16px rgba(42,26,82,.25); }
.btn-dark:hover { text-decoration:none; transform:translateY(-2px); }
.btn-ghost { background:#fff; border-color:var(--line); color:var(--primary-3); }
.btn-ghost:hover { background:#f5f0ff; text-decoration:none; }
.btn-block { width:100%; border:none; }
.btn-dark.btn-block,.btn-primary.btn-block { border:none; }
.btn-mini { background:#fff; border:1px solid var(--line); color:var(--primary-3); padding:5px 12px; border-radius:9px; font-size:12px; cursor:pointer; transition:all .14s; }
.btn-mini:hover { border-color:var(--primary); background:#f5f0ff; }
.btn-mini.danger { color:var(--red); } .btn-mini.danger:hover { border-color:var(--red); background:var(--red-bg); }

/* ---------------- Forms ---------------- */
.form { display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:#6b6485; font-weight:600; }
.form input,.form select,.form textarea { background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; color:var(--text); font-size:14px; outline:none; font-family:inherit; transition: border .14s, box-shadow .14s; }
.form input:focus,.form select:focus,.form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(124,58,237,.12); }
.form textarea { min-height:70px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------------- Flash ---------------- */
.flash { padding:11px 15px; border-radius:12px; margin-bottom:16px; font-size:14px; border:1px solid transparent; animation: fadeup .3s ease; }
.flash-success { background:var(--green-bg); border-color:#bbf7d0; color:#166534; }
.flash-error { background:var(--red-bg); border-color:#fecdd3; color:#9f1239; }

/* ---------------- Misc ---------------- */
.todo-list { line-height:1.9; padding-left:20px; }
.coming { text-align:center; padding:48px 22px; }
.coming-ico { font-size:42px; margin-bottom:10px; animation: heartbeat 1.8s ease-in-out infinite; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.mini-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .18s; }
.mini-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.mini-card h3 { margin:0 0 4px; font-size:16px; color:var(--primary-d); }
.bar { height:9px; background:#efe9fb; border-radius:6px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--grad); }
pre { background:#f7f4fe; padding:14px; border-radius:12px; overflow:auto; font-size:13px; border:1px solid var(--line); }

/* ---------------- Modal ---------------- */
.modal-overlay { position:fixed; inset:0; background:rgba(42,26,82,.45); backdrop-filter:blur(3px); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:30px 16px; overflow-y:auto; }
.modal-overlay.open { display:flex; animation: fadeup .25s ease; }
.modal { background:var(--panel); border-radius:20px; width:100%; max-width:600px; box-shadow:var(--shadow-lg); overflow:hidden; margin:auto; }
.modal-head { background:var(--grad); color:#fff; padding:20px 24px; display:flex; justify-content:space-between; align-items:flex-start; }
.modal-head h2 { color:#fff; margin:0 0 2px; font-size:19px; }
.modal-head p { margin:0; font-size:13px; opacity:.9; }
.modal-close { background:rgba(255,255,255,.2); border:none; color:#fff; width:30px; height:30px; border-radius:9px; cursor:pointer; font-size:16px; }
.modal-body { padding:22px 24px; max-height:70vh; overflow-y:auto; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; background:#faf8ff; }

/* ---- Campaign script sections ---- */
.script-box { border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; border-left:4px solid var(--primary); background:#fdfcff; }
.script-box.b-blue { border-left-color:#3b82f6; } .script-box.b-green { border-left-color:#22c55e; }
.script-box.b-amber { border-left-color:#f59e0b; } .script-box.b-purple { border-left-color:var(--primary); }
.script-box label { font-weight:700; color:var(--text); font-size:14px; }
.script-box .hint { color:var(--muted); font-size:12px; margin:2px 0 8px; }
.script-box textarea { width:100%; }
.section-card { border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; background:#fff; }
.section-card h4 { margin:0 0 10px; font-size:14px; color:var(--primary-d); }
.fu-group { margin:8px 0; padding-left:4px; }
.fu-head { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin:10px 0 6px; }
.fu-head.green { color:var(--green); } .fu-head.amber { color:var(--amber); } .fu-head.blue { color:var(--blue); }
.check { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text); font-weight:500; margin:7px 0; cursor:pointer; }
.check input { width:17px; height:17px; accent-color:var(--primary); }
.check.sub { margin-left:24px; font-size:13px; color:#6b6485; }
.inline-num { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#6b6485; margin:6px 0; }
.inline-num input { width:64px; padding:7px 8px; }
.ai-btn { background:linear-gradient(135deg,#f0abfc,#a855f7); color:#fff; border:none; padding:7px 13px; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(168,85,247,.3); }
.ai-btn:hover { filter:brightness(1.06); }
.lead-pick { max-height:170px; overflow-y:auto; border:1px solid var(--line); border-radius:11px; padding:10px; }
.lead-pick .check { margin:5px 0; }
.toggle-card { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px; }

/* ---- Dashboard cards ---- */
.stat-top { display:flex; align-items:center; justify-content:space-between; }
.stat-ico-box { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.stat-ico-box.blue { background:#e0e7ff; } .stat-ico-box.green { background:#dcfce7; }
.stat-ico-box.purple { background:#ede9fe; } .stat-ico-box.amber { background:#fef3c7; }
.stat-sub { color:var(--muted); font-size:12.5px; }
a.stat-sub:hover { color:var(--primary); }
.qa-list { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.qa-row { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:12px; color:var(--text); font-weight:600; font-size:14px; transition:all .15s; background:#fff; }
.qa-row:hover { border-color:var(--primary); background:#faf7ff; text-decoration:none; transform:translateX(3px); }
.qa-ico { font-size:17px; } .qa-arrow { margin-left:auto; color:var(--primary); }
.sub-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.sub-row:last-of-type { border-bottom:none; } .sub-row span { color:var(--muted); }
/* provider grid */
.prov-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.prov-card { border:1px solid var(--line); border-radius:13px; padding:14px; background:#fff; text-align:center; transition:all .15s; box-shadow:var(--shadow); }
.prov-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--primary); }
.prov-card .pico { font-size:24px; } .prov-card .pname { font-weight:700; font-size:14px; margin:6px 0 2px; }

/* ============ DARK MODE ============ */
[data-theme="dark"]{
  --bg1:#0f0b1e; --bg2:#160f2c; --panel:#1a1330; --line:#2c2347; --text:#ece8fb; --muted:#9b93bd;
  --green-bg:rgba(22,163,74,.2); --red-bg:rgba(225,29,72,.2); --amber-bg:rgba(217,119,6,.2); --blue-bg:rgba(99,102,241,.22);
  --shadow:0 4px 20px rgba(0,0,0,.45); --shadow-lg:0 12px 40px rgba(0,0,0,.55);
}
[data-theme="dark"] body{ background:linear-gradient(160deg,#0f0b1e,#160f2c 60%,#1a1040); }
[data-theme="dark"] .sidebar,[data-theme="dark"] .app-topbar{ background:rgba(26,19,48,.85); }
[data-theme="dark"] .nav-item:hover{ background:#241a45; }
[data-theme="dark"] .btn-ghost,[data-theme="dark"] .form input,[data-theme="dark"] .form select,[data-theme="dark"] .form textarea,
[data-theme="dark"] .mini-card,[data-theme="dark"] .prov-card,[data-theme="dark"] .qa-row,[data-theme="dark"] .stat-card,
[data-theme="dark"] .panel,[data-theme="dark"] .section-card,[data-theme="dark"] .script-box,[data-theme="dark"] .btn-mini{ background:#1a1330; color:var(--text); }
[data-theme="dark"] code{ background:#241a45; }
[data-theme="dark"] pre{ background:#150f28; }
[data-theme="dark"] .table tbody tr:hover{ background:#201840; }

/* ============ TOPBAR controls (theme + language) ============ */
.top-controls{ display:flex; align-items:center; gap:10px; }
.theme-toggle{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 11px; cursor:pointer; font-size:15px; color:var(--text); }
.theme-toggle:hover{ border-color:var(--primary); }
.lang-wrap{ position:relative; }
.lang-btn{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px 11px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.lang-btn:hover{ border-color:var(--primary); }
.lang-menu{ position:absolute; right:0; top:110%; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; min-width:160px; display:none; z-index:50; }
.lang-menu.open{ display:block; animation:fadeup .2s ease; }
.lang-menu a{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:13.5px; color:var(--text); }
.lang-menu a:hover{ background:#f5f0ff; text-decoration:none; }
[data-theme="dark"] .lang-menu a:hover{ background:#241a45; }
.lang-menu a.active{ background:color-mix(in srgb,var(--primary) 14%,transparent); color:var(--primary); font-weight:700; }
[dir="rtl"] .lang-menu{ right:auto; left:0; }

/* ============ TOAST (gradient + heartbeat) ============ */
.toast-stack{ position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
[dir="rtl"] .toast-stack{ right:auto; left:18px; }
.toast{ display:flex; align-items:center; gap:12px; min-width:280px; max-width:380px; padding:13px 16px; border-radius:14px; color:#fff;
  box-shadow:0 12px 34px rgba(124,58,237,.35); animation:toastIn .4s cubic-bezier(.2,.8,.2,1); font-size:14px; font-weight:600; }
.toast.success{ background:linear-gradient(135deg,#34d399,#10b981,#059669); }
.toast.error{ background:linear-gradient(135deg,#fb7185,#e11d48,#be123c); }
.toast.warning{ background:linear-gradient(135deg,#fbbf24,#f59e0b,#d97706); }
.toast .t-heart{ font-size:18px; animation:heartbeat 1.1s ease-in-out infinite; }
.toast .t-close{ margin-left:auto; cursor:pointer; opacity:.85; background:rgba(255,255,255,.2); border:none; color:#fff; width:22px; height:22px; border-radius:7px; }
[dir="rtl"] .toast .t-close{ margin-left:0; margin-right:auto; }
.toast.hide{ animation:toastOut .35s forwards; }
@keyframes toastIn{ from{opacity:0; transform:translateX(40px) scale(.9)} to{opacity:1; transform:none} }
@keyframes toastOut{ to{opacity:0; transform:translateX(40px) scale(.9)} }