@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root { --ink:#f8fafc; --muted:#94a3b8; --line:#334155; --card:#1e293b; --accent:#1d9bf0; --accent-soft:#0f2f4f; --bg:#0f172a; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:hidden; }
body { max-width:100%; margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:Manrope,system-ui,sans-serif; min-height:100vh; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(#25272d 1px,transparent 1px),linear-gradient(90deg,#25272d 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,#000,transparent 70%); }
.auth-view { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.1fr) minmax(420px,.9fr); position:relative; }
.auth-story { padding:54px clamp(40px,7vw,110px); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); background:radial-gradient(circle at 12% 76%,rgba(59,130,246,.18),transparent 36%); }
.auth-story h1 { font-size:clamp(48px,6.5vw,88px); max-width:850px; }
.auth-brand { width:max-content; font-size:18px; }
.auth-benefits { display:flex; gap:34px; color:#657068; font:10px DM Mono,monospace; }
.auth-benefits span { display:grid; gap:8px; }
.auth-benefits b { color:#b5bdb7; font:500 12px Manrope,sans-serif; }
.auth-panel { display:grid; place-items:center; padding:38px; background:rgba(17,18,20,.82); }
.auth-card { width:min(420px,100%); }
.auth-heading { margin-bottom:30px; }
.auth-heading h2 { font-size:32px; margin:10px 0 8px; letter-spacing:-.04em; }
.auth-heading>p:last-child { color:var(--muted); font-size:13px; margin:0; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; background:#151619; border:1px solid var(--line); border-radius:10px; margin-bottom:28px; }
.auth-tabs.single-tab { grid-template-columns:1fr; }
.auth-tabs button { padding:10px; color:#7f8981; background:transparent; border:0; border-radius:7px; }
.auth-tabs button.active { color:var(--ink); background:#24262d; box-shadow:0 1px 5px #0005; }
.auth-submit { margin-top:6px; }
.auth-switch { color:#707a72; text-align:center; font-size:12px; margin-top:22px; }
.auth-switch button { color:var(--accent); border:0; background:none; padding:3px; }
.shell { --sidebar-width:248px; width:100%; max-width:none; min-height:100vh; margin:0; padding:0 32px 0 calc(var(--sidebar-width) + 32px); position:relative; overflow-x:clip; }
.shell>main,.shell>footer { max-width:1180px; margin-left:auto; margin-right:auto; }
.app-sidebar { position:fixed; z-index:7; top:0; bottom:0; left:0; width:var(--sidebar-width); display:flex; flex-direction:column; gap:24px; padding:24px 18px; background:#151619; color:var(--ink); border-right:1px solid var(--line); box-shadow:10px 0 34px #0007; }
.mobile-header { display:none; }
.sidebar-backdrop { position:fixed; z-index:6; inset:0; border:0; background:#0008; backdrop-filter:blur(3px); }
.main-nav { display:grid; gap:5px; align-content:start; padding-top:8px; }
.nav-button { width:100%; min-height:42px; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; gap:10px; padding:10px 12px; border:1px solid transparent; border-radius:8px; background:transparent; color:#87918a; font-size:12px; text-align:left; }
.nav-button svg { width:16px; height:16px; justify-self:center; stroke-width:1.9; }
.nav-button:hover { color:var(--ink); background:#202126; border-color:#343741; }
.nav-button.active { color:var(--accent); background:#172033; border-color:#2457a6; box-shadow:inset 0 0 0 1px #3b82f622; }
.nav-button.active svg { color:var(--accent); }
.sidebar-spacer { flex:1; min-height:18px; }
.user-menu { display:grid; grid-template-columns:42px minmax(0,1fr); gap:10px; align-items:center; padding-top:18px; border-top:1px solid var(--line); }
.user-summary { min-width:0; display:grid; gap:3px; }
.user-menu strong { color:var(--ink); font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu span:not(.pill) { color:#77817a; font:9px DM Mono,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-version { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7e8880 !important; font:10px DM Mono,monospace !important; }
.user-menu .pill { grid-column:1/-1; width:100%; display:flex; align-items:center; justify-content:center; border-color:#343741; color:#87918a; background:#151619; }
.user-menu .outline-button { grid-column:1/-1; width:100%; justify-content:center; padding:10px 11px; border-color:#343741; color:#bdc4be; background:#151619; }
.notification-trigger { position:relative; grid-column:1/-1; width:100%; height:40px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 11px; border:1px solid #343741; border-radius:8px; color:#bdc4be; background:#151619; }
.notification-trigger svg { width:18px; height:18px; stroke-width:1.8; }
.user-menu .notification-trigger span,.user-menu .logout-button span { color:inherit; font:600 12px Manrope,sans-serif; }
.notification-trigger:hover,.notification-trigger[aria-expanded="true"] { color:var(--accent); border-color:#3f4552; background:#1a2333; }
.notification-trigger b { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 5px; border:2px solid #151619; border-radius:99px; background:#ff756f; color:white; font:700 9px DM Mono,monospace; }
.profile-trigger { width:42px; height:42px; display:grid; place-items:center; padding:0; overflow:hidden; border:1px solid #343741; border-radius:12px; background:#172033; }
.profile-trigger:hover { border-color:var(--accent); }
.avatar-fallback { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(145deg,#1a2333,#151619); color:var(--accent); }
.avatar-fallback svg { width:18px; height:18px; stroke-width:1.8; }
.avatar-fallback.has-image { background-position:center; background-size:cover; color:transparent; }
.logout-button { display:inline-flex; align-items:center; gap:7px; }
.logout-button svg { width:15px; height:15px; stroke-width:1.8; }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; letter-spacing:-.03em; }
.app-sidebar .brand { color:var(--ink); min-height:42px; }
.brand.has-logo { gap:0; }
.brand.has-logo [data-brand-name] { display:none; }
.brand strong { color:var(--accent); }
.brand-mark { width:34px; height:34px; border:1px solid var(--accent); color:var(--accent); border-radius:50%; display:grid; place-items:center; font-weight:700; background-position:center; background-size:cover; background-repeat:no-repeat; }
.brand-mark.has-image { width:118px; border-color:transparent; border-radius:6px; color:transparent; background-size:contain; }
.pill { border:1px solid var(--line); padding:8px 13px; border-radius:99px; font:12px DM Mono,monospace; color:var(--muted); }
.pill i { display:inline-block; width:7px; height:7px; background:#7c817d; border-radius:50%; margin-right:7px; }
.pill.live { color:var(--success); border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak)); }.pill.live i { background:var(--success); box-shadow:0 0 12px color-mix(in srgb, var(--success) 40%, transparent); }
.pill.attention { color:#ffc26b; border-color:#6f542c; }.pill.attention i { background:#ffc26b; box-shadow:0 0 12px #ffc26b88; }
.notification-backdrop { position:fixed; z-index:8; inset:0; background:#0008; backdrop-filter:blur(3px); }
.notifications-panel { position:fixed; z-index:9; top:0; right:0; width:min(460px,100vw); height:100dvh; display:flex; flex-direction:column; padding:27px; background:#151619; border-left:1px solid var(--line); box-shadow:-24px 0 70px #0009; transform:translateX(105%); transition:transform .24s ease; }
.notifications-panel.open { transform:translateX(0); }
.notifications-heading { display:flex; align-items:flex-start; justify-content:space-between; padding-bottom:23px; border-bottom:1px solid var(--line); }
.notifications-heading .eyebrow { margin:0 0 8px; }
.notifications-heading h2 { font-size:23px; }
.icon-button { width:34px; height:34px; border:1px solid #343741; border-radius:50%; color:#aab2ac; background:#202126; font-size:21px; line-height:1; }
.notification-controls { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:18px 0 12px; }
.notification-controls select { padding:9px 10px; }
.check-control { display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap; }
.check-control input { width:14px; height:14px; accent-color:var(--accent); }
.notifications-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:3px 0 14px; }
.notifications-toolbar span { color:#778079; font:10px DM Mono,monospace; }
.notifications-toolbar>div { display:flex; align-items:center; gap:8px; }
.text-button.subtle { color:#8b958d; }
.notifications-list { overflow:auto; display:grid; gap:9px; padding-right:3px; }
.notification-item { position:relative; display:grid; grid-template-columns:9px 1fr; gap:12px; padding:15px; border:1px solid #25272d; border-radius:11px; background:#151619; }
.notification-item.unread { border-color:#3f4552; background:#1b1c21; }
.notification-dot { width:8px; height:8px; margin-top:5px; border-radius:50%; background:#6e7770; }
.notification-item.error .notification-dot { background:#ff756f; box-shadow:0 0 11px #ff756f66; }
.notification-item.warning .notification-dot { background:#ffc26b; }
.notification-item.success .notification-dot { background:var(--success); }
.notification-content { min-width:0; }
.notification-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#707971; font:9px DM Mono,monospace; text-transform:uppercase; }
.notification-content h3 { margin:6px 0 5px; font-size:13px; }
.notification-content p { margin:0; color:#929c94; font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.notification-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:10px; }
.notification-footer small { color:#657068; font:9px DM Mono,monospace; }
.notification-action { width:auto; border:0; background:none; color:var(--accent); padding:2px 0; font-size:11px; }
.notification-empty { margin:40px 0; color:#707971; text-align:center; font-size:12px; }
.eyebrow,.step { font:500 11px DM Mono,monospace; letter-spacing:.16em; color:var(--accent); }
h1 { font-size:clamp(42px,6vw,76px); line-height:1.02; margin:13px 0 20px; letter-spacing:-.055em; font-weight:600; }
h1 em { color:var(--muted); font-style:normal; font-weight:400; }
.lead { color:var(--muted); max-width:590px; font-size:17px; line-height:1.65; }
.grid { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; align-items:start; }
.stack { display:grid; gap:18px; }
.card { background:color-mix(in srgb,var(--card) 94%,transparent); border:1px solid var(--line); border-radius:16px; padding:26px; backdrop-filter:blur(14px); }
.card-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.card-title>div { display:flex; align-items:center; gap:12px; }
h2 { font-size:17px; margin:0; letter-spacing:-.02em; }
label { display:grid; gap:8px; color:#bdc4be; font-size:12px; margin-bottom:15px; }
label span { color:#737b75; }
input,textarea,select { width:100%; border:1px solid #343741; background:#0e1310; color:var(--ink); border-radius:8px; padding:12px 13px; font:13px DM Mono,monospace; outline:none; resize:vertical; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #3b82f615; }
.password-input-wrap { position:relative; display:block; width:100%; }
.password-input-wrap input { padding-right:46px; margin:0; }
.password-toggle { position:absolute; top:50%; right:8px; width:31px; height:31px; display:grid; place-items:center; padding:0; transform:translateY(-50%); border:1px solid transparent; border-radius:7px; background:transparent; color:#7f8981; cursor:pointer; }
.password-toggle:hover,.password-toggle:focus-visible { color:var(--accent); border-color:#343741; background:#1a2333; outline:none; }
.password-toggle svg { width:16px; height:16px; stroke-width:1.9; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
button { cursor:pointer; font:600 13px Manrope,sans-serif; }
.primary,.secondary { width:100%; border-radius:8px; padding:13px 15px; display:flex; justify-content:space-between; border:0; }
.primary { background:var(--accent); color:#ffffff; }.secondary { color:var(--accent); background:var(--accent-soft); border:1px solid #2457a6; }
.primary.compact { width:auto; padding:11px 15px; display:inline-flex; }
.outline-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; color:#bdc4be; background:#1f2025; border:1px solid #343741; border-radius:8px; padding:10px 14px; font:600 13px Manrope,sans-serif; line-height:1.2; text-align:center; text-decoration:none; }
.outline-button:hover { border-color:#3f4552; color:var(--ink); }
.header-templates-button { padding:9px 12px; }
button:disabled { opacity:.55; cursor:wait; }
.hint,.muted { color:var(--muted); font-size:12px; line-height:1.55; }.hint { margin:13px 0 0; }
.mini-form { border-top:1px solid var(--line); margin-top:18px; padding-top:18px; }
.mini-form label { margin-bottom:10px; }
.full-button { width:100%; }
.integration-badge { color:#818a83; border:1px solid #343741; border-radius:99px; padding:5px 9px; font:9px DM Mono,monospace; text-transform:uppercase; }
.integration-badge.live { color:var(--success); border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak)); background:var(--success-soft); }
.integration-summary { display:grid; gap:6px; padding:16px; border:1px solid #343741; background:#151619; border-radius:10px; }
.integration-summary strong { color:var(--ink); font-size:15px; }
.integration-summary span { color:var(--accent); font:11px DM Mono,monospace; overflow:hidden; text-overflow:ellipsis; }
.integration-summary small { color:#829087; font-size:10px; line-height:1.45; }
.integration-summary small.error { color:#f87171; }
.integration-summary-list { display:grid; gap:10px; }
.integration-summary-item { display:grid; gap:8px; padding:16px; border:1px solid #343741; background:#151619; border-radius:10px; }
.integration-summary-item>strong { font-size:15px; }
.integration-summary-item>span { color:var(--accent); font:11px DM Mono,monospace; overflow:hidden; text-overflow:ellipsis; }
.integration-summary-item>small { color:#829087; font-size:10px; line-height:1.45; }
.integration-summary-item>small.error { color:#f87171; }
.integration-summary-item .integration-manage-button { margin-top:2px; }
.integration-binding { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0; }
.integration-binding div { min-width:0; padding:10px; border:1px solid #343741; border-radius:7px; background:#111214; }
.integration-binding dt { color:#6f8375; font-size:9px; text-transform:uppercase; }
.integration-binding dd { margin:4px 0 0; color:#d3dbd5; font:500 11px DM Mono,monospace; overflow-wrap:anywhere; }
.integration-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
.integration-actions #chatwoot-add-phone { margin-right:auto; }
.integration-manage-button { margin-top:12px; }
.text-button.danger { color:#e58d8d; }
.number-box { display:flex; align-items:center; gap:15px; border:1px solid #343741; background:#151619; padding:18px; border-radius:10px; }
.connection-alert { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; padding:13px 14px; border:1px solid #76542d; border-radius:9px; background:#2b2114; }
.connection-alert div { display:grid; gap:3px; }.connection-alert strong { color:#ffc26b; font-size:12px; }.connection-alert span { color:#b19e83; font-size:10px; line-height:1.4; }
.wa-icon { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#ffffff;font-weight:700; }
.number-box div:last-child { display:grid; }.number-box small { color:var(--accent); font:9px DM Mono; letter-spacing:.1em; }.number-box strong { font:500 18px DM Mono; margin:3px 0; }.number-box span { color:var(--muted);font-size:12px; }
.details { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:20px 0 0; gap:10px; }
.details div { overflow:hidden; }.details dt { color:#717a73; font-size:10px; }.details dd { margin:5px 0 0; font:11px DM Mono; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
.text-button { border:0;background:none;color:var(--accent);padding:4px; }
.auth-secondary { justify-self:start; margin:-8px 0 4px; font-size:11px; }
.account-bar { display:flex; justify-content:space-between; gap:18px; align-items:end; border:1px solid var(--line); background:#151619; border-radius:14px; padding:17px 19px; margin-bottom:18px; }
.account-bar>div:first-child { min-width:min(560px,62%); }.account-bar small { display:block; color:#717a73; font:9px DM Mono; letter-spacing:.13em; margin-bottom:7px; }
.account-bar select { padding:10px 12px; }.account-actions { display:flex; gap:9px; }
.account-list-panel { flex:1; min-width:0; }
.account-list { position:relative; max-width:760px; }
.account-picker { position:relative; }
.account-picker summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:10px; align-items:center; }
.account-picker summary::-webkit-details-marker { display:none; }
.account-picker summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:10px; }
.account-picker-chevron { width:34px; height:34px; display:grid; place-items:center; border:1px solid #25272d; border-radius:8px; background:#111214; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.account-picker-chevron::before { content:""; width:8px; height:8px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg) translate(-1px,-1px); }
.account-picker[open] .account-picker-chevron { transform:rotate(180deg); border-color:#0e5ea8; background:#172033; }
.account-picker-menu { position:absolute; z-index:20; top:calc(100% + 8px); left:0; right:0; max-height:min(420px,64vh); overflow:auto; display:grid; gap:8px; padding:10px; border:1px solid #343741; border-radius:12px; background:#111214; box-shadow:0 18px 42px rgba(0,0,0,.32); }
.account-list-item { width:100%; min-height:74px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 13px; border:1px solid #25272d; border-radius:8px; background:#151619; color:var(--ink); text-align:left; }
.account-list-current { min-height:62px; pointer-events:none; }
.account-picker-menu .account-list-item { min-height:62px; }
.account-list-item:hover,.account-list-item.active { border-color:#3f4552; background:#172033; }
.account-list-item.active { box-shadow:inset 0 0 0 1px #3b82f655; }
.account-list-item.attention { border-color:#76542d; background:#211a12; }
.account-list-item.attention.active { border-color:#ffc26b; box-shadow:inset 0 0 0 1px #ffc26b55; }
.account-list-main,.account-list-meta { min-width:0; display:grid; gap:5px; }
.account-list-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.account-list-main small,.account-list-meta small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; color:#737d75; letter-spacing:0; text-transform:none; }
.account-list-meta { justify-items:end; text-align:right; }
.account-list-meta b { color:var(--accent); font:500 9px DM Mono,monospace; text-transform:uppercase; }
.account-list-item.attention .account-list-meta b { color:#ffc26b; }
.dashboard-overview { display:grid; grid-template-columns:repeat(3,minmax(0,.72fr)) minmax(300px,1.6fr); gap:12px; margin-bottom:18px; }
.overview-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,#151619,#151619ee); }
.metric-card { position:relative; min-height:178px; padding:18px; }
.metric-heading,.chart-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.metric-heading>span,.chart-heading span { color:#737d75; font:500 8px DM Mono,monospace; letter-spacing:.15em; }
.metric-icon { width:29px; height:29px; display:grid; place-items:center; border:1px solid #0e5ea8; border-radius:8px; background:#063d50; color:var(--accent); font-style:normal; font-size:14px; }
.metric-card>strong { display:block; margin-top:17px; font:500 34px/1 DM Mono,monospace; letter-spacing:-.06em; }
.metric-card>small { display:block; margin-top:7px; color:#707a72; font-size:9px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric-action { margin-top:8px; font-size:10px; }
.templates-metric-card { padding-bottom:58px; }
.templates-metric-card .metric-action { position:relative; z-index:1; display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:28px; margin-top:10px; padding:3px 6px 3px 0; border-radius:6px; background:linear-gradient(90deg,#151619 78%,#15161900); }
.templates-metric-card .mini-bars { pointer-events:none; }
.mini-bars { position:absolute; z-index:0; inset:auto 18px 17px; height:24px; display:flex; align-items:flex-end; gap:5px; opacity:.72; }
.mini-bars i { flex:1; min-width:5px; border-radius:2px 2px 0 0; background:#0e5ea8; }
.mini-bars i:nth-child(1){height:30%}.mini-bars i:nth-child(2){height:58%}.mini-bars i:nth-child(3){height:42%}.mini-bars i:nth-child(4){height:82%}.mini-bars i:nth-child(5){height:68%;background:var(--accent)}
.phones-bars i:nth-child(1){height:62%}.phones-bars i:nth-child(2){height:38%}.phones-bars i:nth-child(3){height:76%}.phones-bars i:nth-child(4){height:52%}.phones-bars i:nth-child(5){height:92%}
.templates-bars i:nth-child(1){height:35%}.templates-bars i:nth-child(2){height:72%}.templates-bars i:nth-child(3){height:55%}.templates-bars i:nth-child(4){height:88%}.templates-bars i:nth-child(5){height:100%}
.account-chart-card { min-height:178px; padding:18px 19px; }
.chart-heading>div { display:grid; gap:5px; }
.chart-heading strong { font-size:14px; }
.chart-heading>small { color:#69736b; font:8px DM Mono,monospace; white-space:nowrap; }
.account-chart { display:grid; gap:10px; max-height:108px; margin-top:16px; padding-right:3px; overflow:auto; }
.account-chart>p { margin:26px 0 0; color:#687169; font-size:10px; text-align:center; }
.account-chart-row { display:grid; gap:5px; }
.account-chart-label { display:flex; justify-content:space-between; gap:10px; color:#778179; font:9px DM Mono,monospace; }
.account-chart-label span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chart-label b { color:#98a29a; font-weight:500; }
.account-chart-row.active .account-chart-label span,.account-chart-row.active .account-chart-label b { color:var(--accent); }
.account-chart-track { height:5px; overflow:hidden; border-radius:99px; background:#28302b; }
.account-chart-track i { display:block; height:100%; border-radius:inherit; background:#3b82f6; transition:width .35s ease; }
.account-chart-row.active .account-chart-track i { background:var(--accent); box-shadow:0 0 10px #3b82f655; }
.form-actions { display:flex; gap:10px; }.form-actions .primary { flex:1; }
.phone-list { display:grid; gap:8px; margin-top:18px; }
.social-channel-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.social-channel-option { display:grid; gap:6px; padding:12px 13px; border:1px solid #25272d; border-radius:9px; background:#151619; }
.social-channel-option.active { border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak)); background:var(--success-soft); }
.social-channel-option strong { font-size:12px; }
.social-channel-option span { color:#717a73; font-size:10px; line-height:1.45; }
.social-channel-option.active span { color:var(--success); }
.social-channel-help { margin:2px 0 2px; color:#7d877f; font-size:11px; line-height:1.5; }
.phone-item { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:12px 13px; border:1px solid #25272d; border-radius:8px; background:#151619; }
.phone-item.chatwoot-phone { border-color:#0e5ea8; background:#172033; }
.phone-item strong { display:block; font:12px DM Mono; }.phone-item span { color:#717a73; font-size:10px; }.phone-item em { color:var(--accent); font:9px DM Mono; font-style:normal; }
.phone-item-status { display:grid; justify-items:end; gap:5px; }
.phone-item .phone-chatwoot-badge { padding:4px 7px; border:1px solid color-mix(in srgb, var(--success) 42%, var(--border-weak)); border-radius:99px; color:var(--success); background:var(--success-soft); font:8px DM Mono,monospace; text-transform:uppercase; }
.phone-registration-badge { padding:4px 7px; border:1px solid #343741; border-radius:99px; color:#929b94 !important; background:#121813; font:8px DM Mono,monospace; text-transform:uppercase; }
.phone-registration-badge.registered { border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak)); color:var(--success) !important; background:var(--success-soft); }
.phone-registration-badge.pending { border-color:#6b552f; color:#ffc26b !important; background:#21190f; }
.phone-register-action { padding:2px 0; font-size:10px; }
.admin-platform-cell { min-width:150px; display:grid; gap:6px; }
.admin-platform-cell span { display:grid; gap:2px; }
.admin-platform-cell strong { max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.admin-platform-cell small,.admin-muted { color:#717a73; font-size:10px; line-height:1.35; }
.admin-platform-cell a { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--accent); font-size:11px; text-decoration:none; }
.admin-platform-cell a:hover { text-decoration:underline; }
.signup-box { min-height:390px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:38px 18px; border:1px solid #343741; background:radial-gradient(circle at 50% 25%,rgba(59,130,246,.16),transparent 46%),#151619; border-radius:12px; }
.signup-box h3 { margin:18px 0 9px; font-size:22px; letter-spacing:-.035em; }
.signup-box h2 { margin:18px 0 9px; font-size:22px; letter-spacing:-.035em; }
.signup-box p { max-width:390px; color:var(--muted); font-size:13px; line-height:1.65; margin:0 0 22px; }
.signup-box p.error { color:#ff9d99; }
.signup-box small { max-width:390px; color:#68736b; font-size:10px; line-height:1.5; margin-top:14px; }
.signup-actions { display:flex; flex-direction:column; gap:10px; width:min(100%,390px); }
.signup-actions button { width:100%; }
.meta-mark { width:50px; height:50px; display:grid; place-items:center; border-radius:14px; background:#1877f2; color:white; font-size:24px; font-weight:700; box-shadow:0 14px 38px #1877f244; }
.meta-button { width:min(340px,100%); display:flex; justify-content:space-between; padding:14px 16px; border:0; border-radius:8px; background:#1877f2; color:white; }
.meta-button:hover:not(:disabled) { background:#2d85f3; }
.standalone-connect-page { min-height:100vh; background:#111214; }
.standalone-connect-page::before { opacity:.18; }
.standalone-connect-shell { min-height:100dvh; display:grid; place-items:center; padding:clamp(16px,4vw,34px); }
.standalone-connect-card { width:min(640px,100%); padding:26px; border:1px solid var(--line); border-radius:14px; background:#151619; box-shadow:0 22px 70px #0007; }
.standalone-connect-heading { display:flex; align-items:center; gap:15px; margin:0 0 24px; }
.standalone-connect-heading h1 { margin:0; font-size:18px; letter-spacing:-.03em; }
.standalone-signup-box { min-height:min(390px,calc(100dvh - 138px)); }
.connection-management { display:grid; gap:20px; }
.management-heading h3 { margin:4px 0 7px; font-size:22px; letter-spacing:-.035em; }
.management-heading p:last-child { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.account-integration { padding:18px; border:1px solid #343741; border-radius:10px; background:#151619; }
.account-integration .card-title { margin-bottom:18px; }
.account-integration .card-title>div { display:grid; gap:3px; }
.account-integration .card-title .eyebrow { font-size:9px; }
.account-integration form>.muted { margin-top:0; }
.account-name-form { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; padding:16px; border:1px solid #343741; border-radius:10px; background:#151619; }
.account-name-form label { margin:0; }
.account-name-form input { margin-bottom:0; }
.account-name-form button { min-height:39px; }
.readonly-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; }
.readonly-details div { min-width:0; padding:12px 13px; border:1px solid #25272d; border-radius:8px; background:#151619; }
.readonly-details dt { color:#717a73; font-size:9px; }
.readonly-details dd { margin:5px 0 0; color:#c4cbc5; font:10px DM Mono,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.connection-actions-list { display:grid; gap:1px; overflow:hidden; border:1px solid #25272d; border-radius:10px; background:#25272d; }
.connection-actions-list>div { display:grid; grid-template-columns:1fr auto; align-items:center; gap:15px; padding:15px; background:#151619; }
.connection-actions-list span { display:grid; gap:4px; }
.connection-actions-list strong { font-size:12px; }
.connection-actions-list small { color:#737d75; font-size:10px; line-height:1.45; }
.connection-actions-list .danger-zone strong { color:#eaa0a0; }
.call-settings-list { display:grid; gap:8px; margin-top:14px; }
.call-settings-item { display:grid; gap:13px; padding:13px; border:1px solid #25272d; border-radius:8px; background:#151619; }
.call-settings-main { display:grid; gap:4px; min-width:0; }
.call-settings-main strong { font:12px DM Mono,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-settings-main span { color:#737d75; font-size:10px; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-settings-controls { display:grid; grid-template-columns:repeat(3,max-content) max-content max-content; align-items:center; gap:10px; }
.call-settings-controls .switch-control { min-width:82px; }
.call-settings-controls .switch-control small { min-width:auto; }
.call-settings-controls .text-button { min-height:34px; padding:8px 4px; }
.call-test-button { width:auto; min-height:34px; padding:8px 10px; font-size:11px; white-space:nowrap; }
.call-test-widget { position:fixed; z-index:40; right:18px; bottom:18px; width:min(286px,calc(100vw - 24px)); max-height:calc(100dvh - 36px); overflow:hidden; border:1px solid #343741; border-radius:14px; background:#1f2025; box-shadow:0 24px 80px #000b; transform:translateY(18px); opacity:0; pointer-events:none; transition:.18s ease; }
.call-test-widget.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.call-test-shell { display:grid; padding:0; }
.call-test-widget .dialog-title { align-items:center; margin:0; }
.call-test-widget .dialog-title h2 { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-test-widget .dialog-close { width:31px; height:31px; flex:0 0 auto; }
.call-test-widget iframe { width:100%; height:min(452px,calc(100dvh - 36px)); border:0; background:#1f2025; }
.analytics-toolbar { margin-top:0; }
.analytics-toolbar>div:first-child { flex:1; min-width:240px; }
.analytics-toolbar select { width:100%; max-width:420px; margin-top:6px; }
.analytics-filters { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)) auto; gap:10px; align-items:end; }
.analytics-filters label { display:grid; gap:6px; margin:0; }
.analytics-filters span { color:#717a73; font:9px DM Mono,monospace; text-transform:uppercase; }
.analytics-filters input { height:38px; margin:0; color-scheme:dark; }
.analytics-filters button { height:38px; padding:0 12px; }
.analytics-overview { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; }
.analytics-sent-bars i:nth-child(1){height:42%}.analytics-sent-bars i:nth-child(2){height:70%}.analytics-sent-bars i:nth-child(3){height:54%}.analytics-sent-bars i:nth-child(4){height:88%}.analytics-sent-bars i:nth-child(5){height:62%;background:#78a6ff}
.analytics-received-bars i:nth-child(1){height:80%}.analytics-received-bars i:nth-child(2){height:48%}.analytics-received-bars i:nth-child(3){height:92%}.analytics-received-bars i:nth-child(4){height:58%}.analytics-received-bars i:nth-child(5){height:76%;background:var(--accent)}
.analytics-failed-bars i { background:#6d3b36; }
.analytics-failed-bars i:nth-child(1){height:22%}.analytics-failed-bars i:nth-child(2){height:38%}.analytics-failed-bars i:nth-child(3){height:18%}.analytics-failed-bars i:nth-child(4){height:52%}.analytics-failed-bars i:nth-child(5){height:30%;background:#ff8b7c}
.analytics-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:18px; margin-top:18px; }
.analytics-card { min-width:0; }
.analytics-bars-list,.analytics-breakdown { display:grid; gap:10px; }
.analytics-bar-row { display:grid; gap:7px; }
.analytics-bar-label { display:flex; justify-content:space-between; gap:12px; color:#98a29a; font:10px DM Mono,monospace; text-transform:uppercase; }
.analytics-bar-label span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analytics-bar-label b { color:var(--accent); font-weight:500; }
.analytics-bar-track { height:10px; overflow:hidden; border-radius:99px; background:#343741; }
.analytics-bar-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3b82f6,var(--accent)); transition:width .25s ease; }
.analytics-breakdown-row { display:grid; gap:10px; padding:14px; border:1px solid #25272d; border-radius:8px; background:#151619; }
.analytics-breakdown-row strong { font:12px DM Mono,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analytics-breakdown-row>span { color:#717a73; font-size:10px; }
.analytics-breakdown-row dl { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; }
.analytics-breakdown-row div { min-width:0; padding:9px; border:1px solid #343741; border-radius:7px; background:#111214; }
.analytics-breakdown-row dt { color:#717a73; font:8px DM Mono,monospace; text-transform:uppercase; }
.analytics-breakdown-row dd { margin:5px 0 0; color:#e5e7eb; font:15px DM Mono,monospace; }
.events-card { margin-top:18px; }
.events-filters { display:grid; grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(120px,1fr)); gap:10px; align-items:end; margin:0 0 14px; }
.events-filters label { display:grid; gap:6px; min-width:0; }
.events-filters span { color:#717a73; font:9px DM Mono,monospace; text-transform:uppercase; }
.events-filters input,.events-filters select { width:100%; height:38px; min-width:0; padding:0 10px; border:1px solid #343741; border-radius:8px; background:#151619; color:#dfe6e1; font:12px Manrope,system-ui,sans-serif; }
.events-filters input[type="date"] { color-scheme:dark; }
.events-filter-actions { grid-column:1/-1; display:flex; justify-content:flex-end; min-height:22px; }
.events-filter-actions .text-button { min-height:22px; padding:0; color:#7f8981; font-size:11px; }
.events-filter-actions .text-button:disabled { opacity:.45; cursor:not-allowed; }
.events { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.event { background:#151619; padding:13px 15px; display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:14px; align-items:start; font-size:12px; }
.event-kind-stack { display:grid; gap:6px; justify-items:start; }
.event-kind { font:10px DM Mono; color:var(--accent); text-transform:uppercase; }
.event-outbound .event-kind { color:#78a6ff; }
.event-status .event-kind { color:#d9a85c; }
.event-channel { display:inline-flex; max-width:100%; padding:3px 7px; border:1px solid #2d3540; border-radius:999px; background:#101a1d; color:#9db0a6; font:9px DM Mono,monospace; text-transform:uppercase; letter-spacing:.04em; }
.event-channel-whatsapp { border-color:#1d5f43; background:#0c2118; color:#6ee7a8; }
.event-channel-facebook { border-color:#255ca8; background:#0d1a2e; color:#82b6ff; }
.event-channel-instagram { border-color:#8f3c62; background:#27121d; color:#ff9cc4; }
.event-body { min-width:0; display:grid; gap:3px; color:#c7cdc8; }
.event-body strong,.event-body span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.event-body strong { color:#717a73; font:9px DM Mono; font-weight:400; text-transform:uppercase; }
.event-time { color:#717a73;font:10px DM Mono; }
.event-payload { margin-top:7px; min-width:0; }
.event-payload summary { cursor:pointer; color:var(--accent); font:10px DM Mono,monospace; text-transform:uppercase; }
.event-payload pre { max-width:100%; max-height:280px; margin:8px 0 0; overflow:auto; padding:12px; border:1px solid #25272d; border-radius:8px; background:#0b0f0d; color:#aeb8b0; font:10px/1.55 DM Mono,monospace; white-space:pre; }
.empty { margin:0; background:#151619; color:#717a73; padding:24px; text-align:center; font-size:12px; }
.events-pagination { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; margin-top:14px; }
.events-pagination span { color:#7f8981; font:10px DM Mono,monospace; text-align:center; }
.events-pagination .outline-button { padding:8px 12px; }
.templates-view,.events-view,.analytics-view,.admin-view,.changelog-view { padding-bottom:40px; }
.page-actions { display:flex; justify-content:flex-end; padding:28px 0 14px; }
.page-actions .back-button { position:static; margin-bottom:0; }
.changelog-timeline { position:relative; display:grid; gap:0; max-width:920px; margin:10px 0 0; padding:12px 0 24px 28px; }
.changelog-timeline::before { content:""; position:absolute; left:8px; top:18px; bottom:18px; width:1px; background:#343741; }
.changelog-entry { position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); gap:14px; padding:0 0 22px; }
.changelog-marker { position:relative; z-index:1; width:17px; height:17px; margin-top:5px; border:3px solid #151619; border-radius:999px; background:var(--accent); box-shadow:0 0 0 1px var(--brand-border); }
.changelog-content { display:grid; gap:10px; padding:18px; border:1px solid #25272d; border-radius:10px; background:#151619; }
.changelog-entry-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; }
.changelog-entry-head time,.changelog-content small { color:#6f7971; font:9px DM Mono,monospace; text-transform:uppercase; }
.changelog-content h2 { margin:0; font-size:20px; line-height:1.2; }
.changelog-content p { margin:0; color:#a6afa8; font-size:13px; line-height:1.6; }
.changelog-content ul { display:grid; gap:8px; margin:0; padding-left:18px; color:#d5ddd7; font-size:13px; line-height:1.55; }
.templates-account-bar { margin-top:0; }
.template-sections-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:42px; align-items:start; margin-top:18px; }
.template-sections-content { display:grid; min-width:0; }
.template-section-pane { min-width:0; }
.template-blocks-nav { padding-top:1px; }
.template-blocks-nav button { min-height:60px; }
.template-blocks-nav button.active { border-color:#0e5ea8; background:#172033; }
.template-blocks-nav button.active>span:first-child,.template-blocks-nav button.active strong { color:var(--accent); }
.templates-drafts-card { display:grid; gap:15px; margin-top:18px; padding:22px; border:1px solid #25272d; border-radius:14px; background:linear-gradient(145deg,#151619,#151619); }
.template-sections-content .templates-drafts-card,.template-sections-content .templates-card { margin-top:0; }
.drafts-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.drafts-heading>div { display:grid; gap:6px; min-width:0; }
.drafts-heading h2 { font-size:18px; }
.drafts-heading p { max-width:620px; margin:0; color:#8e9890; font-size:12px; line-height:1.55; }
.template-drafts-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.draft-template-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:15px; align-items:center; padding:16px; border:1px solid #25272d; border-radius:10px; background:#151619; }
.admin-template-model-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:15px; align-items:center; padding:16px; border:1px solid #25272d; border-radius:10px; background:#151619; }
.admin-template-model-item h3 { margin:8px 0 7px; font:500 13px DM Mono,monospace; overflow-wrap:anywhere; }
.admin-template-model-item p { display:-webkit-box; margin:0; color:#a6afa8; font-size:11px; line-height:1.55; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.admin-template-model-item small { display:block; margin-top:10px; color:#6f7971; font:9px DM Mono,monospace; text-transform:uppercase; }
.admin-changelog-list { display:grid; gap:12px; }
.admin-changelog-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:15px; align-items:center; padding:16px; border:1px solid #25272d; border-radius:10px; background:#151619; }
.admin-changelog-item h3 { margin:8px 0 7px; font:500 13px DM Mono,monospace; overflow-wrap:anywhere; }
.admin-changelog-item p { display:-webkit-box; margin:0; color:#a6afa8; font-size:11px; line-height:1.55; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.admin-changelog-item small { display:block; margin-top:10px; color:#6f7971; font:9px DM Mono,monospace; text-transform:uppercase; }
.draft-template-item h3 { margin:8px 0 7px; font:500 13px DM Mono,monospace; overflow-wrap:anywhere; }
.draft-template-item p { display:-webkit-box; margin:0; color:#a6afa8; font-size:11px; line-height:1.55; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.draft-template-item small { display:block; margin-top:10px; color:#6f7971; font:9px DM Mono,monospace; text-transform:uppercase; }
.draft-template-actions { display:grid; justify-items:stretch; gap:8px; min-width:176px; }
.draft-template-actions .primary,.draft-template-actions .outline-button { width:100%; justify-content:center; padding:9px 11px; font-size:11px; }
.draft-empty { grid-column:1/-1; display:grid; gap:5px; padding:18px; border:1px dashed #343741; border-radius:10px; background:#151619; }
.draft-empty strong { font-size:13px; }
.draft-empty span { color:#7c857e; font-size:12px; }
.drafts-see-all { grid-column:1/-1; justify-self:center; margin-top:1px; }
.templates-card { margin-top:18px; }
.admin-template-card { margin-top:18px; }
.brand-form { display:grid; gap:18px; }
.brand-assets { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.brand-asset-editor { display:flex; align-items:center; gap:15px; padding:16px; border:1px solid #25272d; border-radius:10px; background:#151619; }
.brand-asset-editor>div { display:grid; gap:4px; min-width:0; }
.brand-asset-editor strong { font-size:13px; }
.brand-asset-editor p { margin:0 0 8px; color:#768078; font-size:11px; }
.brand-logo-preview,.brand-favicon-preview { flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border:1px solid #343741; background:#172033; color:var(--accent); font-weight:700; background-position:center; background-size:contain; background-repeat:no-repeat; }
.brand-logo-preview { width:118px; height:74px; border-radius:10px; }
.brand-favicon-preview { width:58px; height:58px; border-radius:14px; }
.brand-logo-preview span,.brand-favicon-preview span { width:100%; height:100%; display:grid; place-items:center; background-position:center; background-size:contain; background-repeat:no-repeat; }
.brand-logo-preview span.has-image,.brand-favicon-preview span.has-image { color:transparent; }
.brand-indexing-control { width:max-content; max-width:100%; padding:12px 14px; border:1px solid #25272d; border-radius:9px; background:#151619; }
.template-library-only { display:grid; grid-template-columns:1fr 170px; gap:14px; }
.templates-actions { gap:8px !important; }
.templates-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 180px auto; gap:10px; align-items:center; margin-bottom:16px; }
.templates-toolbar input,.templates-toolbar select { padding:10px 12px; }
.templates-toolbar span { color:#747e76; font:9px DM Mono,monospace; text-align:right; }
.templates-list { display:grid; gap:14px; }
.templates-table-wrap { overflow:hidden; border:1px solid #25272d; border-radius:10px; background:#151619; }
.template-list-wrap { display:grid; }
.template-list-header,.template-list-row { display:grid; grid-template-columns:minmax(220px,1.35fr) 104px minmax(220px,1fr) 132px; gap:14px; align-items:center; }
.template-list-header { padding:14px 16px; border-bottom:1px solid #25272d; background:#1b1c21; color:#aeb7b0; font:500 9px DM Mono,monospace; letter-spacing:.08em; text-transform:uppercase; }
.template-list-rows { display:grid; }
.template-list-row { min-height:116px; padding:18px 16px; border-bottom:1px solid #25272d; color:#d5dcd7; cursor:pointer; transition:background .16s ease; }
.template-list-row:last-child { border-bottom:0; }
.template-list-row:hover,.template-list-row.selected { background:#202126; }
.template-list-row:focus-visible { outline:2px solid #3b82f688; outline-offset:-2px; }
.template-row-main { min-width:0; display:grid; gap:7px; align-content:center; }
.template-row-main strong { color:var(--ink); font:500 12px DM Mono,monospace; overflow-wrap:anywhere; }
.template-row-main p { display:-webkit-box; margin:0; color:#7b867e; font-size:10px; line-height:1.45; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.template-row-status { min-width:0; display:flex; align-items:center; }
.template-row-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 14px; margin:0; }
.template-row-meta div { min-width:0; }
.template-row-meta dt { margin-bottom:3px; color:#6d7770; font:8px DM Mono,monospace; text-transform:uppercase; }
.template-row-meta dd { margin:0; color:#d5dcd7; font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
.template-row-actions-cell { min-width:0; }
.template-row-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; min-width:0; }
.template-row-actions button { min-height:30px; padding:6px 9px; font-size:10px; line-height:1.1; }
.template-row-actions .outline-button { width:auto; }
.template-row-actions .text-button { border:1px solid transparent; border-radius:7px; }
.template-status { flex:0 0 auto; padding:4px 7px; border:1px solid #343741; border-radius:99px; color:#929b94; font:8px DM Mono,monospace; text-transform:uppercase; }
.template-status.draft { border-color:#0e5ea8; color:#38bdf8; background:#172033; }
.template-status.approved { border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak)); color:var(--success); background:var(--success-soft); }
.template-status.pending { border-color:#6b552f; color:#ffc26b; }
.template-status.rejected,.template-status.disabled { border-color:#6b3838; color:#ff8f8f; }
.template-detail-panel { display:grid; gap:14px; padding:16px; border:1px solid #25272d; border-radius:10px; background:#151619; }
.template-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid #25272d; }
.template-detail-heading h3 { margin:8px 0 5px; font-size:19px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.template-detail-heading p { margin:0; color:#7f8981; font-size:12px; }
.template-detail-grid { display:grid; grid-template-columns:minmax(250px,340px) minmax(0,1fr); gap:14px; align-items:stretch; }
.template-detail-preview { overflow:hidden; border:1px solid #25272d; border-radius:8px; background:#151619; }
.template-detail-preview>strong { display:block; padding:14px 16px; border-bottom:1px solid #25272d; font-size:14px; }
.template-detail-preview .whatsapp-preview { min-height:230px; padding:28px 22px; }
.template-detail-info { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-content:start; }
.template-detail-info div { min-height:92px; padding:16px; border:1px solid #25272d; border-radius:8px; background:#121813; }
.template-detail-info span { display:block; margin-bottom:14px; color:#879189; font:9px DM Mono,monospace; text-transform:uppercase; }
.template-detail-info strong { color:var(--ink); font-size:20px; overflow-wrap:anywhere; }
.template-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.template-card-actions .template-row-actions { min-width:0; }
.template-rejection { margin:0; padding:9px 10px; border:1px solid #7f1d1d; border-radius:7px; background:#331516; color:#fca5a5; font-size:10px; line-height:1.5; }
.template-dialog { width:min(680px,94vw); max-height:92dvh; overflow:auto; }
.template-dialog form { padding:28px; }
.template-dialog label { margin-bottom:13px; }
.template-dialog input { margin:0; }
#template-create-dialog { width:min(1180px,96vw); max-height:94dvh; overflow:hidden; background:#151619; color:var(--ink); border-color:var(--line); }
#template-create-dialog form { display:flex; flex-direction:column; max-height:94dvh; padding:0; }
#template-create-dialog label { position:relative; margin-bottom:16px; color:#bdc4be; font-weight:700; }
#template-create-dialog label span { color:#737b75; font-weight:500; }
#template-create-dialog input,#template-create-dialog textarea,#template-create-dialog select { margin:0; border-color:#343741; background:#0e1310; color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
#template-create-dialog input:focus,#template-create-dialog textarea:focus,#template-create-dialog select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #3b82f615; }
.dialog-title { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:17px; }
.dialog-title .eyebrow { margin:0 0 7px; font-size:9px; }
.dialog-title h2 { font-size:23px; }
.dialog-close { width:34px; height:34px; border:1px solid #343741; border-radius:50%; background:#1f2025; color:#aeb7b0; font-size:21px; line-height:1; }
.template-builder-title { flex:0 0 auto; margin:0; padding:22px 26px; border-bottom:1px solid var(--line); background:#151619; }
.template-builder-title h2 { color:var(--ink); font-size:21px; }
.template-builder-title p:last-child { margin:6px 0 0; color:var(--muted); font-size:12px; }
.template-builder-title .dialog-close { border-color:#343741; background:#1f2025; color:#aeb7b0; }
.template-builder { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 360px; overflow:auto; }
.template-builder-main { display:grid; gap:14px; align-content:start; padding:16px; }
.template-section { padding:19px; border:1px solid var(--line); border-radius:8px; background:#151619e8; }
.template-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
.template-section-heading h3 { margin:0; color:var(--ink); font-size:18px; letter-spacing:0; }
.template-section-heading span { color:#737d75; font-size:12px; }
.template-section-copy { margin:0 0 14px; color:#98a19a; font-size:13px; line-height:1.55; }
.field-counter { position:absolute; right:13px; bottom:13px; color:#7f8981 !important; font:12px Manrope,system-ui,sans-serif !important; pointer-events:none; }
#template-create-dialog label:has(textarea) .field-counter { bottom:12px; }
#template-create-dialog label input,#template-create-dialog label textarea { padding-right:68px; }
.template-format-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:18px; min-height:30px; margin:-9px 3px 16px; color:#c7cec8; font-size:14px; }
.template-format-toolbar button { min-width:18px; padding:2px; border:0; background:transparent; color:#c7cec8; text-align:center; font-size:14px; line-height:1; }
.template-format-toolbar button:hover { color:var(--accent); }
.template-format-toolbar .text-button { color:var(--accent); font-size:13px; line-height:1.2; }
.template-preview { margin-bottom:18px; padding:17px; border:1px solid #343741; border-radius:10px; background:#151619; color:#b8c1ba; font-size:12px; line-height:1.6; white-space:pre-wrap; }
.template-parameters { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.template-parameters:empty { display:none; }
.template-buttons-editor { margin:0; }
.template-buttons-editor legend { padding:0 7px; color:var(--ink); font-size:18px; font-weight:700; }
.template-buttons-editor legend span { color:#737b75; font-size:12px; font-weight:500; }
.template-button-row { display:grid; grid-template-columns:145px 1fr 1fr auto; gap:8px; align-items:end; margin-bottom:8px; }
.template-button-row label { margin:0; }
.template-button-row .dialog-close { width:38px; height:38px; border-radius:8px; border-color:#343741; background:#1f2025; color:#aeb7b0; }
.preview-label { display:block; margin:2px 0 8px; color:#69736b; font:9px DM Mono,monospace; letter-spacing:.12em; }
.template-preview-panel { position:sticky; top:0; align-self:start; min-height:100%; padding:16px 18px; background:linear-gradient(180deg,#151619,#111214); border-left:1px solid var(--line); }
.template-preview-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#151619; box-shadow:0 18px 48px #0004; }
.template-preview-card>strong { display:block; padding:20px 18px; color:var(--ink); font-size:17px; }
.whatsapp-preview { min-height:290px; display:flex; align-items:flex-start; padding:27px 23px; margin:0; border:0; border-radius:0; background-color:#151619; background-image:radial-gradient(rgba(59,130,246,.16) 1px,transparent 1px); background-size:15px 15px; }
.whatsapp-bubble { width:min(390px,88%); display:grid; gap:6px; padding:10px 11px 7px; border-radius:8px 8px 8px 2px; background:#24262d; box-shadow:0 3px 10px #0005; color:#e4e9e5; font-size:12px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.whatsapp-bubble strong { font-size:13px; }
.whatsapp-bubble small { color:#b3bcb5; font-size:10px; }
.whatsapp-bubble time { justify-self:end; color:#7f9287; font:8px DM Mono,monospace; }
.whatsapp-template-buttons { display:grid; gap:1px; margin:4px -12px -7px; }
.whatsapp-template-buttons span { padding:8px; border-top:1px solid #343741; color:#60a5fa; text-align:center; font-size:11px; }
.template-builder-actions { flex:0 0 auto; justify-content:flex-end; padding:16px 26px; border-top:1px solid var(--line); background:#151619; box-shadow:0 -10px 26px #0003; }
.template-builder-actions .outline-button { width:auto; }
.template-builder-actions .primary { width:auto; min-width:190px; justify-content:center; gap:10px; }
.profile-view { padding-bottom:40px; }
.back-button { position:absolute; right:0; top:70px; padding:9px 13px; border:1px solid #343741; border-radius:99px; background:#1f2025; color:#aeb7b0; }
.back-button:hover { border-color:#3f4552; color:var(--accent); }
.settings-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:42px; padding-top:18px; align-items:start; }
.settings-nav { position:sticky; top:24px; display:grid; gap:7px; }
.settings-nav button { display:grid; grid-template-columns:27px 1fr; gap:10px; padding:13px 14px; border:1px solid transparent; border-radius:10px; background:transparent; color:#6f7971; text-align:left; }
.settings-nav button>span:first-child { padding-top:2px; color:#5f6861; font:9px DM Mono,monospace; }
.settings-nav button>span:last-child { display:grid; gap:3px; }
.settings-nav strong { color:#9da69f; font-size:12px; }
.settings-nav small { color:#626b64; font:9px DM Mono,monospace; }
.settings-nav button:hover { background:#1f2025; }
.settings-nav button.active { border-color:#0e5ea8; background:#172033; }
.settings-nav button.active>span:first-child,.settings-nav button.active strong { color:var(--accent); }
.settings-content { min-width:0; min-height:590px; }
.settings-section { border:1px solid var(--line); border-radius:16px; background:#151619e8; overflow:hidden; box-shadow:0 25px 70px #0002; }
.settings-title { display:flex; justify-content:space-between; align-items:center; gap:20px; min-width:0; padding:25px 28px; border-bottom:1px solid var(--line); background:#1b1c21; }
.settings-title>div { min-width:0; }
.settings-title .eyebrow { margin:0 0 7px; font-size:9px; }
.settings-title h2 { font-size:22px; }
.settings-title>span { color:#667068; font:9px DM Mono,monospace; text-transform:uppercase; }
.settings-section form { padding:28px; }
.avatar-editor { display:flex; align-items:center; gap:18px; padding-bottom:27px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.avatar-preview { position:relative; flex:0 0 86px; width:86px; height:86px; padding:0; overflow:visible; border:2px solid #343741; border-radius:50%; background:#151619; }
.avatar-preview .avatar-fallback { overflow:hidden; border-radius:50%; font-size:24px; }
.avatar-preview>b { position:absolute; right:-2px; bottom:2px; width:25px; height:25px; display:grid; place-items:center; border:3px solid #151619; border-radius:50%; background:var(--accent); color:#ffffff; font-size:15px; }
.avatar-editor>div { display:grid; gap:3px; }
.avatar-editor strong { font-size:14px; }
.avatar-editor p { margin:0 0 8px; color:#768078; font-size:11px; }
.avatar-actions { display:flex; gap:13px; align-items:center; }
.avatar-actions button { font-size:11px; }
.avatar-actions .outline-button { padding:7px 10px; }
input[readonly] { color:#747e76; cursor:not-allowed; }
.field-note { margin:-8px 0 21px; color:#667068; font-size:10px; }
.save-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:22px; margin-top:6px; border-top:1px solid var(--line); }
.save-row>span { color:#69736b; font:9px DM Mono,monospace; }
.save-row .primary { min-width:190px; justify-content:space-between; }
.security-feature { display:grid; grid-template-columns:43px minmax(0,1fr) auto; gap:14px; align-items:center; padding:27px 28px; }
.security-feature>div:not(.feature-icon),.alert-option>div,.channel-choice>div { min-width:0; }
.feature-icon { width:43px; height:43px; display:grid; place-items:center; border:1px solid #0e5ea8; border-radius:11px; background:#063d50; color:var(--accent); font-size:20px; }
.security-feature strong,.alert-option strong,.channel-choice strong { font-size:13px; }
.security-feature p,.alert-option p,.channel-choice p,.form-intro p { margin:5px 0 0; color:#7f8981; font-size:11px; line-height:1.5; }
.settings-divider { height:1px; margin:0 28px; background:var(--line); }
.form-intro { margin-bottom:22px; }
.form-intro h3 { margin:0; font-size:15px; }
.switch-control { display:flex; align-items:center; gap:9px; margin:0; cursor:pointer; }
.switch-control input { position:absolute; opacity:0; pointer-events:none; }
.switch-control>span { position:relative; width:41px; height:23px; border:1px solid #343741; border-radius:99px; background:#24262d; transition:.2s; }
.switch-control>span::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#9ca3af; transition:.2s; }
.switch-control input:checked+span { border-color:#0e5ea8; background:#172033; }
.switch-control input:checked+span::after { left:21px; background:var(--accent); box-shadow:0 0 10px #3b82f666; }
.switch-control small { min-width:64px; color:#7a847c; font:9px DM Mono,monospace; text-transform:uppercase; }
.password-strength { display:grid; grid-template-columns:repeat(4,32px) 1fr; gap:5px; align-items:center; margin:-2px 0 21px; }
.password-strength i { height:3px; border-radius:9px; background:#343741; }
.password-strength i.active { background:var(--accent); }
.password-strength span { margin-left:5px; color:#6f7971; font-size:9px; }
.alert-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; padding:19px 0; border-bottom:1px solid var(--line); }
.alert-option:first-child { padding-top:0; }
.alert-option:last-of-type { border-bottom:0; }
.alert-option small { display:inline-block; margin-top:8px; padding:3px 6px; border:1px solid #343741; border-radius:99px; color:var(--accent); font:8px DM Mono,monospace; }
.channel-choice { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:20px; align-items:center; padding:24px 0 5px; }
.channel-choice label { display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; }
.channel-choice input { width:15px; height:15px; accent-color:var(--accent); }
.admin-overview { grid-template-columns:repeat(4,minmax(0,1fr)); }
.admin-sections-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:42px; align-items:start; margin-top:18px; }
.admin-sections-content { display:grid; gap:18px; min-width:0; }
.admin-blocks-nav { padding-top:1px; }
.admin-blocks-nav button { min-height:60px; }
.admin-blocks-nav button.active { border-color:#0e5ea8; background:#172033; }
.admin-blocks-nav button.active>span:first-child,.admin-blocks-nav button.active strong { color:var(--accent); }
.admin-card { margin-top:0; scroll-margin-top:24px; }
.admin-card-title { align-items:center; }
.admin-platform-form { padding:0 28px 28px; }
.admin-platform-form .security-feature { padding:0 0 22px; }
.api-token-box { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:12px; max-width:640px; }
.api-token-box input { font:11px DM Mono,monospace; overflow:hidden; text-overflow:ellipsis; }
.admin-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:10px; margin-bottom:16px; }
.admin-table-wrap { overflow:auto; border:1px solid #25272d; border-radius:10px; background:#151619; }
.admin-table { width:100%; min-width:760px; border-collapse:collapse; }
.admin-table th,.admin-table td { padding:14px 15px; border-bottom:1px solid #343741; text-align:left; vertical-align:middle; }
.admin-table th { color:#758078; background:#151619; font:500 9px DM Mono,monospace; letter-spacing:.12em; text-transform:uppercase; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-user-cell { display:grid; gap:4px; min-width:0; }
.admin-user-cell strong { font-size:13px; }
.admin-user-cell span,.admin-operation { color:#78827a; font:10px DM Mono,monospace; }
.admin-badge { display:inline-flex; align-items:center; justify-content:center; min-width:84px; padding:5px 8px; border:1px solid #343741; border-radius:99px; font:9px DM Mono,monospace; text-transform:uppercase; }
.admin-badge.active { color:var(--success); border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak)); background:var(--success-soft); }
.admin-badge.disabled { color:#f87171; border-color:#7f1d1d; background:#331516; }
.admin-inline-select { min-width:118px; padding:8px 9px; font-size:11px; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; }
.admin-action-button { min-width:104px; padding:8px 10px; font-size:11px; }
footer { display:flex; align-items:center; justify-content:space-between; gap:18px; color:#555e57; border-top:1px solid var(--line); padding:24px 0 40px; margin-top:70px; font:10px DM Mono; text-transform:uppercase; letter-spacing:.1em; }
#toast { position:fixed; z-index:1000; right:24px; top:90px; max-width:360px; background:#23221f; color:#f8fafc; border-radius:9px; padding:13px 16px; font-size:13px; transform:translateX(120%); transition:.25s; box-shadow:0 12px 40px #0008; }
#toast.show { transform:translateX(0); } #toast.error { background:#ffdddd; color:#4b1010; }
dialog[open] > #toast { top:24px; }
.hidden { display:none !important; }
dialog { border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); padding:0; width:min(400px,90vw); }
dialog::backdrop { background:#000b;backdrop-filter:blur(5px); } dialog form { padding:26px; } dialog p { color:var(--muted); font-size:13px; } dialog input { margin:8px 0 16px; }
dialog .password-input-wrap { margin:8px 0 16px; }
dialog .password-input-wrap input { margin:0; }
.dialog-heading { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.dialog-heading .eyebrow { margin:0 0 5px; font-size:8px; }
.dialog-context { margin:-2px 0 16px; overflow-wrap:anywhere; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:7px; }
.dialog-actions .primary { width:auto; min-width:130px; }
.app-action-dialog { width:min(430px,92vw); border-color:#343741; background:#151619; box-shadow:0 28px 90px #000b; }
.app-action-dialog.wide-dialog { width:min(620px,94vw); }
.app-action-dialog form { padding:24px; }
.app-action-dialog .dialog-heading { margin-bottom:13px; }
.app-action-dialog .feature-icon { border-color:#343741; background:#1a2333; color:var(--accent); }
.app-action-dialog .dialog-context { margin:0 0 18px; color:#c1cac3; font-size:13px; line-height:1.55; }
.app-action-dialog label { margin:0 0 18px; }
.app-action-dialog .dialog-actions { padding-top:4px; }
.app-action-dialog .dialog-actions button { min-height:38px; }
.meta-channel-select-list { display:grid; gap:9px; max-height:min(420px,52dvh); overflow:auto; margin:0 0 18px; padding-right:4px; }
.meta-channel-select-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:start; padding:13px; border:1px solid #25272d; border-radius:10px; background:#111214; cursor:pointer; }
.meta-channel-select-item:has(input:checked) { border-color:#0e5ea8; background:#172033; box-shadow:inset 0 0 0 1px #3b82f633; }
.meta-channel-select-item input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent); }
.meta-channel-select-item span { min-width:0; display:grid; gap:4px; }
.meta-channel-select-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 13px Manrope,sans-serif; }
.meta-channel-select-item small { color:#717a73; font:10px DM Mono,monospace; }
.meta-channel-select-item em { color:var(--accent); font:10px DM Mono,monospace; font-style:normal; }
.primary.danger-action { background:#ff756f; color:#2b0c0c; }
.primary.danger-action:hover { background:#ff8d88; }
.totp-secret { display:grid; gap:7px; padding:13px; margin:16px 0; border:1px dashed #343741; border-radius:8px; background:#151619; text-align:center; }
.totp-secret span { color:#69746b; font:8px DM Mono,monospace; letter-spacing:.12em; }
.totp-secret strong { color:var(--accent); font:12px DM Mono,monospace; letter-spacing:.12em; overflow-wrap:anywhere; }
.totp-secret button { justify-self:center; margin-top:5px; }
.recovery-codes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.recovery-codes code { display:block; padding:10px 9px; border:1px solid #343741; border-radius:8px; background:#151619; color:var(--accent); font:12px DM Mono,monospace; text-align:center; letter-spacing:.08em; }
@media(max-width:1000px) { header{height:auto;min-height:84px;gap:14px;flex-wrap:wrap;padding:16px 0}.main-nav{order:3;width:100%;overflow:auto}.dashboard-overview{grid-template-columns:repeat(3,1fr)}.account-chart-card{grid-column:1/-1}.analytics-overview{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.admin-overview{grid-template-columns:repeat(2,1fr)} }
@media(max-width:900px) { #template-create-dialog{width:96vw}.template-builder{grid-template-columns:1fr}.template-preview-panel{position:relative;min-height:auto;border-left:0;border-top:1px solid var(--line)}.template-builder-actions{flex-wrap:wrap}.template-builder-actions .primary{flex:1;min-width:210px} }
@media(max-width:900px) { .template-detail-grid{grid-template-columns:1fr}.template-detail-info{grid-template-columns:1fr 1fr}.template-detail-heading{display:grid}.template-detail-heading .template-card-actions{justify-content:flex-start} }
@media(max-width:900px) { .template-list-header{display:none}.template-list-row{grid-template-columns:1fr;gap:13px;align-items:start}.template-row-status{order:-1}.template-row-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.template-row-actions,.template-row-actions-cell{justify-content:flex-start}.template-row-actions button{flex:0 0 auto} }
@media(max-width:900px) { .events-filters{grid-template-columns:1fr 1fr}.events-filters label:first-child{grid-column:1/-1}.events-filter-actions .text-button{width:auto}.analytics-toolbar{align-items:stretch;flex-direction:column}.analytics-filters{grid-template-columns:1fr 1fr auto}.analytics-toolbar select{max-width:none} }
@media(max-width:640px) { .call-settings-controls{grid-template-columns:1fr 1fr}.call-settings-controls .switch-control{min-width:0}.call-test-button,.call-settings-controls .text-button{width:100%} }
@media(max-width:560px) { .call-test-widget{right:10px; bottom:10px; width:min(286px,calc(100vw - 20px)); max-height:calc(100dvh - 20px)}.call-test-widget iframe{height:min(452px,calc(100dvh - 20px))} }
@media(max-width:800px) { .auth-view{grid-template-columns:1fr}.auth-story{min-height:42vh;padding:30px 24px;border-right:0;border-bottom:1px solid var(--line)}.auth-story h1{font-size:46px;margin-top:42px}.auth-benefits{display:none}.auth-panel{padding:48px 24px}.grid { grid-template-columns:1fr; }.row{grid-template-columns:1fr;gap:0}.event{grid-template-columns:70px 1fr}.event-time{display:none}.details{grid-template-columns:1fr 1fr}.shell{padding:0 16px}.account-bar{align-items:stretch;flex-direction:column}.account-bar>div:first-child{min-width:100%}.account-actions{display:grid;grid-template-columns:1fr 1fr}.primary.compact{width:100%}.dashboard-overview{grid-template-columns:1fr 1fr}.metric-card{min-height:164px}.account-chart-card{grid-column:1/-1}.analytics-overview{grid-template-columns:1fr 1fr}.analytics-filters{grid-template-columns:1fr 1fr}.analytics-filters button{grid-column:1/-1;width:100%}.user-menu .pill{display:none}.user-menu>div{display:none}.notifications-panel{padding:22px 18px}.notification-controls{grid-template-columns:1fr}.notification-controls .check-control{margin-top:3px}.page-actions{padding-top:22px}.drafts-heading{display:grid}.template-drafts-list,.draft-template-item,.admin-changelog-item{grid-template-columns:1fr}.draft-template-actions{min-width:0}.templates-heading{align-items:flex-start}.templates-actions{display:grid !important}.templates-toolbar{grid-template-columns:1fr}.templates-toolbar span{text-align:left}.templates-list{grid-template-columns:1fr}.template-parameters,.template-button-row{grid-template-columns:1fr}.template-button-row .dialog-close{width:100%}.settings-layout,.admin-sections-layout{grid-template-columns:1fr;gap:18px}.settings-nav{position:static;grid-template-columns:repeat(3,1fr)}.settings-nav button{grid-template-columns:1fr;text-align:center;padding:11px 4px}.settings-nav button>span:first-child,.settings-nav small{display:none}.settings-title{padding:21px}.settings-title>span{display:none}.settings-section form{padding:21px}.security-feature{grid-template-columns:43px 1fr;padding:22px}.security-feature .switch-control{grid-column:2}.channel-choice{grid-template-columns:1fr}.save-row{align-items:stretch;flex-direction:column}.save-row .primary{width:100%}.back-button{position:static;margin-bottom:33px}.avatar-editor{align-items:flex-start}.brand-assets{grid-template-columns:1fr}.brand-asset-editor{align-items:flex-start}.account-name-form{grid-template-columns:1fr}.readonly-details,.integration-binding,.call-settings-item{grid-template-columns:1fr}.call-settings-controls{justify-content:flex-start}.connection-actions-list>div{grid-template-columns:1fr}.connection-actions-list button{width:100%}.admin-toolbar{grid-template-columns:1fr}.admin-card-title{display:grid}.admin-overview{grid-template-columns:1fr 1fr}.changelog-timeline{padding-left:12px}.changelog-timeline::before{left:0}.changelog-entry{grid-template-columns:14px minmax(0,1fr);gap:10px} }
@media(max-width:480px) { .dashboard-overview{grid-template-columns:1fr}.account-chart-card{grid-column:auto}.metric-card{min-height:150px}.analytics-breakdown-row dl{grid-template-columns:1fr}.template-detail-info{grid-template-columns:1fr}.template-card-actions{justify-content:stretch}.template-card-actions button{flex:1}.social-channel-options{grid-template-columns:1fr} }
@media(max-width:1000px) {
  .shell { --sidebar-width:264px; padding:82px 18px 0; }
  .mobile-header { position:fixed; z-index:5; top:0; left:0; right:0; height:66px; min-height:0; display:flex; align-items:center; gap:12px; flex-wrap:nowrap; padding:0 18px; border-bottom:1px solid var(--line); background:rgba(21,22,25,.95); backdrop-filter:blur(16px); }
  .mobile-header .brand { min-width:0; }
  .mobile-header .brand [data-brand-name] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .menu-toggle { display:grid; place-items:center; flex:0 0 auto; border-radius:10px; }
  .menu-toggle svg { width:18px; height:18px; }
  .app-sidebar { transform:translateX(-105%); transition:transform .22s ease; }
  .app-sidebar.open { transform:translateX(0); }
  .main-nav { order:initial; width:100%; overflow:visible; }
}
@media(max-width:800px) {
  .shell { padding:82px 16px 0; }
  .user-menu { display:grid; }
  .user-menu>div.user-summary { display:grid; }
  .user-menu .pill { display:flex; }
}

html[data-layout="topbar"] .shell { padding:104px 32px 0; }
html[data-layout="topbar"] .shell>main,
html[data-layout="topbar"] .shell>footer { max-width:1128px; }
html[data-layout="topbar"] .app-sidebar { top:0; bottom:auto; left:50%; width:min(1128px,calc(100% - 48px)); height:80px; flex-direction:row; align-items:center; gap:24px; padding:0; transform:translateX(-50%); border-right:0; border-bottom:1px solid var(--line); background:rgba(21,22,25,.95); box-shadow:none; backdrop-filter:blur(16px); }
html[data-layout="topbar"] .app-sidebar.open { transform:translateX(-50%); }
html[data-layout="topbar"] .mobile-header,
html[data-layout="topbar"] .sidebar-backdrop,
html[data-layout="topbar"] .sidebar-spacer { display:none !important; }
html[data-layout="topbar"] .app-sidebar .brand { flex:0 0 auto; min-width:180px; }
html[data-layout="topbar"] .main-nav { width:auto; display:flex; align-items:center; justify-content:center; gap:4px; order:initial; padding:4px; overflow:visible; border:1px solid var(--line); border-radius:10px; background:#151619; }
html[data-layout="topbar"] .nav-button { width:auto; min-height:38px; display:flex; grid-template-columns:none; padding:9px 13px; border-radius:7px; white-space:nowrap; }
html[data-layout="topbar"] .nav-button svg { width:15px; height:15px; }
html[data-layout="topbar"] .user-menu { margin-left:auto; display:flex; align-items:center; gap:8px; grid-template-columns:none; padding:0; border-top:0; }
html[data-layout="topbar"] .user-menu>* { grid-column:auto !important; }
html[data-layout="topbar"] .user-summary { display:none; }
html[data-layout="topbar"] .profile-trigger { order:2; flex:0 0 auto; }
html[data-layout="topbar"] .notification-trigger { order:3; width:40px; height:40px; flex:0 0 auto; border-radius:10px; }
html[data-layout="topbar"] .notification-trigger span { display:none; }
html[data-layout="topbar"] .logout-button { order:4; width:auto; min-height:34px; flex:0 0 auto; padding:8px 11px; }
html[data-layout="topbar"] .user-menu .pill { order:5; width:auto; min-height:34px; padding:8px 14px; white-space:nowrap; }

.theme-choice,.layout-choice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.layout-choice { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:18px; }
.theme-choice label,.layout-choice label { min-height:118px; margin:0; }
.theme-choice input,.layout-choice input { position:absolute; opacity:0; pointer-events:none; }
.theme-choice span,.layout-choice span { height:100%; display:grid; align-content:center; gap:7px; padding:18px; border:1px solid #343741; border-radius:10px; background:#151619; color:var(--ink); transition:.18s; }
.layout-choice svg { width:21px; height:21px; color:var(--accent); stroke-width:1.8; }
.theme-choice b,.layout-choice b { font-size:13px; }
.theme-choice small,.layout-choice small { color:#768078; font-size:10px; line-height:1.45; }
.theme-choice input:checked+span,.layout-choice input:checked+span { border-color:#0e5ea8; background:#1a2333; box-shadow:inset 0 0 0 1px #3b82f633; }
.theme-choice input:focus-visible+span,.layout-choice input:focus-visible+span { border-color:var(--accent); box-shadow:0 0 0 3px #3b82f618; }

@media(max-width:800px) {
  html[data-layout="topbar"] .shell { padding:122px 16px 0; }
  html[data-layout="topbar"] .app-sidebar { left:0; right:0; width:100%; height:auto; min-height:104px; flex-wrap:wrap; gap:8px 12px; padding:10px 16px 12px; transform:none; }
  html[data-layout="topbar"] .app-sidebar.open { transform:none; }
  html[data-layout="topbar"] .app-sidebar .brand { min-width:0; flex:1 1 150px; }
  html[data-layout="topbar"] .app-sidebar .brand [data-brand-name] { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html[data-layout="topbar"] .main-nav { order:3; width:100%; justify-content:flex-start; overflow-x:auto; }
  html[data-layout="topbar"] .nav-button { flex:0 0 auto; }
  html[data-layout="topbar"] .user-menu { margin-left:0; }
  html[data-layout="topbar"] .user-summary,
  html[data-layout="topbar"] .user-menu .pill { display:none; }
  html[data-layout="topbar"] .logout-button span { display:none; }
  html[data-layout="topbar"] .logout-button { width:40px; height:40px; justify-content:center; padding:0; border-radius:10px; }
}

html[data-theme="light"] {
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --accent:#2563eb;
  --accent-soft:#eff6ff;
  --bg:#f8fafc;
}
html[data-theme="light"] body::before { opacity:.55; background-image:linear-gradient(#e5e7eb 1px,transparent 1px),linear-gradient(90deg,#e5e7eb 1px,transparent 1px); }
html[data-theme="light"] .auth-story { background:radial-gradient(circle at 12% 76%,rgba(191,219,254,.42),transparent 36%); }
html[data-theme="light"] .auth-panel { background:#ffffffb8; }
html[data-theme="light"] .auth-tabs,
html[data-theme="light"] .app-sidebar,
html[data-theme="light"] .user-menu .pill,
html[data-theme="light"] .user-menu .outline-button,
html[data-theme="light"] .notification-trigger,
html[data-theme="light"] .notifications-panel,
html[data-theme="light"] .card,
html[data-theme="light"] .account-bar,
html[data-theme="light"] .overview-card,
html[data-theme="light"] .templates-metric-card .metric-action,
html[data-theme="light"] .signup-box,
html[data-theme="light"] .events,
html[data-theme="light"] .events .empty,
html[data-theme="light"] .event,
html[data-theme="light"] .analytics-breakdown-row,
html[data-theme="light"] .analytics-breakdown-row div,
html[data-theme="light"] .analytics-bar-track,
html[data-theme="light"] .templates-drafts-card,
html[data-theme="light"] .draft-template-item,
html[data-theme="light"] .admin-template-model-item,
html[data-theme="light"] .admin-changelog-item,
html[data-theme="light"] .changelog-content,
html[data-theme="light"] .draft-empty,
html[data-theme="light"] .templates-table-wrap,
html[data-theme="light"] .templates-list>.empty,
html[data-theme="light"] .template-detail-panel,
html[data-theme="light"] .template-detail-info div,
html[data-theme="light"] .brand-asset-editor,
html[data-theme="light"] .brand-indexing-control,
html[data-theme="light"] .admin-table-wrap,
html[data-theme="light"] .settings-section,
html[data-theme="light"] .settings-title,
html[data-theme="light"] dialog,
html[data-theme="light"] .totp-secret,
html[data-theme="light"] .recovery-codes code,
html[data-theme="light"] .theme-choice span,
html[data-theme="light"] .layout-choice span {
  background:#ffffff;
}
html[data-theme="light"] .card,
html[data-theme="light"] .account-bar,
html[data-theme="light"] .overview-card,
html[data-theme="light"] .settings-section,
html[data-theme="light"] .signup-box,
html[data-theme="light"] .templates-drafts-card,
html[data-theme="light"] .draft-template-item,
html[data-theme="light"] .admin-template-model-item,
html[data-theme="light"] .admin-changelog-item,
html[data-theme="light"] .changelog-content,
html[data-theme="light"] .templates-table-wrap,
html[data-theme="light"] .brand-asset-editor {
  border-color:#e5e7eb;
  box-shadow:0 16px 44px #20362614;
}
html[data-theme="light"] .overview-card {
  background:linear-gradient(145deg,#ffffff,#f8fafc);
}
html[data-theme="light"] .account-bar {
  background:linear-gradient(145deg,#ffffff,#f8fafc);
}
html[data-theme="light"] .signup-box {
  background:radial-gradient(circle at 50% 22%,#eff6ff,transparent 45%),#ffffff;
}
html[data-theme="light"] .templates-drafts-card {
  background:linear-gradient(145deg,#ffffff,#f8fafc);
}
html[data-theme="light"] .auth-tabs button.active,
html[data-theme="light"] .settings-nav button:hover,
html[data-theme="light"] .nav-button:hover {
  background:#f3f4f6;
}
html[data-theme="light"] .nav-button.active,
html[data-theme="light"] .settings-nav button.active,
html[data-theme="light"] .admin-blocks-nav button.active,
html[data-theme="light"] .notification-trigger:hover,
html[data-theme="light"] .notification-trigger[aria-expanded="true"],
html[data-theme="light"] .theme-choice input:checked+span,
html[data-theme="light"] .layout-choice input:checked+span {
  background:#eff6ff;
  border-color:#bfdbfe;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .outline-button,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .notification-item,
html[data-theme="light"] .account-picker-menu,
html[data-theme="light"] .account-picker-chevron,
html[data-theme="light"] .account-list-item,
html[data-theme="light"] .event,
html[data-theme="light"] .analytics-breakdown-row,
html[data-theme="light"] .analytics-breakdown-row div,
html[data-theme="light"] .social-channel-option,
html[data-theme="light"] .meta-channel-select-item,
html[data-theme="light"] .draft-template-item,
html[data-theme="light"] .admin-template-model-item,
html[data-theme="light"] .admin-changelog-item,
html[data-theme="light"] .draft-empty,
html[data-theme="light"] .empty,
html[data-theme="light"] .template-detail-panel,
html[data-theme="light"] .template-detail-preview,
html[data-theme="light"] .template-detail-info div,
html[data-theme="light"] .profile-trigger,
html[data-theme="light"] .avatar-preview,
html[data-theme="light"] .feature-icon,
html[data-theme="light"] .switch-control>span {
  background:#ffffff;
  border-color:#d1d5db;
  color:var(--ink);
}
html[data-theme="light"] .meta-channel-select-item:has(input:checked) {
  border-color:#2563eb;
  background:#eff6ff;
}
html[data-theme="light"] .password-toggle {
  color:#6b7280;
}
html[data-theme="light"] .password-toggle:hover,
html[data-theme="light"] .password-toggle:focus-visible {
  color:var(--accent);
  border-color:#bfdbfe;
  background:#eff6ff;
}
html[data-theme="light"] .analytics-bar-track {
  background:#e5e7eb;
}
html[data-theme="light"] .account-list-item:hover,
html[data-theme="light"] .account-list-item.active {
  background:#eff6ff;
  border-color:#bfdbfe;
}
html[data-theme="light"] .account-picker[open] .account-picker-chevron {
  background:#eff6ff;
  border-color:#bfdbfe;
}
html[data-theme="light"] .brand-logo-preview,
html[data-theme="light"] .brand-favicon-preview {
  background:#172033;
  border-color:#bfdbfe;
  color:#dbeafe;
}
html[data-theme="light"] .metric-icon {
  background:#eff6ff;
  border-color:#bfdbfe;
  color:var(--accent);
}
html[data-theme="light"] .metric-card>strong,
html[data-theme="light"] .chart-heading strong {
  color:#111827;
}
html[data-theme="light"] .mini-bars i {
  background:#cbd5e1;
}
html[data-theme="light"] .mini-bars i:nth-child(5) {
  background:var(--accent);
}
html[data-theme="light"] .account-chart-track {
  background:#e5e7eb;
}
html[data-theme="light"] .account-chart-track i {
  background:#60a5fa;
}
html[data-theme="light"] .admin-table th {
  background:#f3f4f6;
  color:#6b7280;
}
html[data-theme="light"] .admin-table th,
html[data-theme="light"] .admin-table td {
  border-bottom-color:#e5e7eb;
}
html[data-theme="light"] .template-list-header {
  background:#f3f4f6;
  border-bottom-color:#e5e7eb;
  color:#6b7280;
}
html[data-theme="light"] .template-list-row {
  border-bottom-color:#e5e7eb;
  color:#111827;
}
html[data-theme="light"] .template-list-row:hover,
html[data-theme="light"] .template-list-row.selected {
  background:#eff6ff;
}
html[data-theme="light"] .template-status.approved,
html[data-theme="light"] .template-status.draft,
html[data-theme="light"] .admin-badge.active {
  background:#eff6ff;
  border-color:#bfdbfe;
  color:#059669;
}
html[data-theme="light"] .template-status.pending {
  background:#fff6df;
  border-color:#e4c177;
  color:#8a5a00;
}
html[data-theme="light"] .template-status.rejected,
html[data-theme="light"] .template-status.disabled,
html[data-theme="light"] .admin-badge.disabled {
  background:#fff0f0;
  border-color:#e5aaaa;
  color:#9f2d2d;
}
html[data-theme="light"] .notification-item.unread { background:#f3f4f6; border-color:#d1d5db; }
html[data-theme="light"] .avatar-fallback { background:linear-gradient(145deg,#eff6ff,#ffffff); }
html[data-theme="light"] .mobile-header { background:#f8fafcef; }
html[data-theme="light"] .sidebar-backdrop,
html[data-theme="light"] .notification-backdrop,
html[data-theme="light"] dialog::backdrop { background:rgba(17,24,39,.3); }
html[data-theme="light"] .auth-benefits,
html[data-theme="light"] .auth-switch,
html[data-theme="light"] .user-menu span:not(.pill),
html[data-theme="light"] .app-version,
html[data-theme="light"] .details dt,
html[data-theme="light"] .account-bar small,
html[data-theme="light"] .metric-heading>span,
html[data-theme="light"] .chart-heading span,
html[data-theme="light"] .chart-heading>small,
html[data-theme="light"] .metric-card>small,
html[data-theme="light"] .account-chart>p,
html[data-theme="light"] .account-chart-label,
html[data-theme="light"] .signup-box small,
html[data-theme="light"] .event-body strong,
html[data-theme="light"] .event-time,
html[data-theme="light"] .events-pagination span,
html[data-theme="light"] .drafts-heading p,
html[data-theme="light"] .draft-template-item p,
html[data-theme="light"] .admin-template-model-item p,
html[data-theme="light"] .admin-changelog-item p,
html[data-theme="light"] .changelog-content p,
html[data-theme="light"] .changelog-content li,
html[data-theme="light"] .draft-template-item small,
html[data-theme="light"] .admin-template-model-item small,
html[data-theme="light"] .admin-changelog-item small,
html[data-theme="light"] .changelog-entry-head time,
html[data-theme="light"] .draft-empty span,
html[data-theme="light"] .templates-toolbar span,
html[data-theme="light"] .template-row-main p,
html[data-theme="light"] .template-row-meta dt,
html[data-theme="light"] .template-detail-heading p,
html[data-theme="light"] .template-detail-info span,
html[data-theme="light"] .brand-asset-editor p,
html[data-theme="light"] .settings-nav button,
html[data-theme="light"] .settings-nav small,
html[data-theme="light"] .settings-title>span,
html[data-theme="light"] .field-note,
html[data-theme="light"] .save-row>span,
html[data-theme="light"] .switch-control small,
html[data-theme="light"] .password-strength span,
html[data-theme="light"] .notification-content p,
html[data-theme="light"] .notification-meta,
html[data-theme="light"] .notification-footer small,
html[data-theme="light"] footer {
  color:#6b7280 !important;
}
html[data-theme="light"] .auth-benefits b,
html[data-theme="light"] label,
html[data-theme="light"] .signup-box h3,
html[data-theme="light"] .signup-box h2,
html[data-theme="light"] .event-body,
html[data-theme="light"] .empty,
html[data-theme="light"] .draft-template-item h3,
html[data-theme="light"] .admin-template-model-item h3,
html[data-theme="light"] .admin-changelog-item h3,
html[data-theme="light"] .changelog-content h2,
html[data-theme="light"] .draft-empty strong,
html[data-theme="light"] .template-row-main strong,
html[data-theme="light"] .template-row-meta dd,
html[data-theme="light"] .template-detail-heading h3,
html[data-theme="light"] .template-detail-info strong,
html[data-theme="light"] .settings-nav strong,
html[data-theme="light"] .brand-asset-editor strong,
html[data-theme="light"] .account-chart-label b,
html[data-theme="light"] .outline-button,
html[data-theme="light"] .user-menu .outline-button,
html[data-theme="light"] .notification-trigger,
html[data-theme="light"] .readonly-details dd {
  color:#111827;
}
html[data-theme="light"] .primary { color:#ffffff; }
html[data-theme="light"] #toast { box-shadow:0 14px 44px rgba(31,41,55,.28); }
html[data-theme="light"][data-layout="topbar"] .main-nav { background:#ffffff; }

@media(max-width:800px) {
  .template-sections-layout { grid-template-columns:1fr; gap:18px; }
  .settings-nav { grid-template-columns:repeat(4,1fr); }
  .template-blocks-nav { position:static; grid-template-columns:repeat(3,1fr); }
  .template-blocks-nav button { grid-template-columns:1fr; text-align:center; padding:11px 4px; }
  .template-blocks-nav button>span:first-child,.template-blocks-nav small { display:none; }
  .theme-choice,.layout-choice { grid-template-columns:1fr; }
  .theme-choice label,.layout-choice label { min-height:84px; }
}

/* Chatwoot-aligned visual layer. The app keeps its markup while adopting
   Chatwoot's neutral surfaces, Inter typography and blue action color. */
:root {
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 10px 30px rgba(2, 6, 23, .18);
  --shadow-popover: 0 24px 72px rgba(2, 6, 23, .32);
  --danger:#ef4444;
  --danger-soft:#450a0a;
  --warning:#f59e0b;
  --warning-soft:#451a03;
  --success:#22c55e;
  --success-soft:#052e16;
  --info:#38bdf8;
  --blue-soft:#0b3b66;
  --surface-1:#0f172a;
  --surface-2:#111827;
  --surface-3:#1e293b;
  --surface-4:#273449;
  --surface-hover:#253247;
  --surface-active:#0b3b66;
  --text-strong:#f8fafc;
  --text-body:#e2e8f0;
  --text-muted:#94a3b8;
  --text-subtle:#64748b;
  --border-weak:#243244;
  --border-strong:#334155;
  --brand:#1d9bf0;
  --brand-hover:#0c8de4;
  --brand-soft:#082f49;
  --brand-border:#075985;
  --ink:var(--text-strong);
  --muted:var(--text-muted);
  --line:var(--border-weak);
  --card:var(--surface-2);
  --accent:var(--brand);
  --accent-soft:var(--brand-soft);
  --bg:var(--surface-1);
}

html[data-theme="light"] {
  --surface-1:#f8fafc;
  --surface-2:#ffffff;
  --surface-3:#f1f5f9;
  --surface-4:#e2e8f0;
  --surface-hover:#f1f5f9;
  --surface-active:#e0f2fe;
  --text-strong:#0f172a;
  --text-body:#334155;
  --text-muted:#64748b;
  --text-subtle:#94a3b8;
  --border-weak:#e2e8f0;
  --border-strong:#cbd5e1;
  --brand:#1d9bf0;
  --brand-hover:#0c8de4;
  --brand-soft:#e0f2fe;
  --brand-border:#bae6fd;
  --danger-soft:#fee2e2;
  --warning-soft:#fef3c7;
  --success-soft:#dcfce7;
  --ink:var(--text-strong);
  --muted:var(--text-muted);
  --line:var(--border-weak);
  --card:var(--surface-2);
  --accent:var(--brand);
  --accent-soft:var(--brand-soft);
  --bg:var(--surface-1);
}

body {
  background:var(--bg);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:14px;
  letter-spacing:0;
}

body::before {
  opacity:.55;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 42%, transparent), transparent 38%);
  background-size:auto;
  mask-image:none;
}

html[data-theme="light"] body::before {
  opacity:1;
  background:
    radial-gradient(circle at 14% 8%, rgba(186, 230, 253, .72), transparent 28%),
    linear-gradient(180deg, #f1f5f9, transparent 42%);
}

h1,h2,h3,.brand,button,input,textarea,select {
  font-family:var(--font-sans);
}

h1 {
  max-width:760px;
  font-size:clamp(34px,5vw,64px);
  line-height:1.04;
  letter-spacing:-.045em;
  color:var(--text-strong);
  font-weight:620;
}

h2 {
  color:var(--text-strong);
  font-size:18px;
  font-weight:620;
  letter-spacing:-.015em;
}

.auth-view {
  background:var(--surface-1);
}

.auth-story {
  border-right-color:var(--border-weak);
  background:
    radial-gradient(circle at 14% 68%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 34%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.auth-story h1 {
  font-size:clamp(42px,6vw,76px);
}

.auth-panel {
  background:color-mix(in srgb, var(--surface-1) 84%, transparent);
}

.auth-tabs,
html[data-layout="topbar"] .main-nav,
.theme-choice span,
.layout-choice span {
  background:var(--surface-3);
  border-color:var(--border-weak);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-tabs button,
.nav-button,
.settings-nav button {
  color:var(--text-muted);
  font-weight:520;
}

.auth-tabs button.active,
.nav-button.active,
.settings-nav button.active,
.admin-blocks-nav button.active,
.template-blocks-nav button.active,
.theme-choice input:checked+span,
.layout-choice input:checked+span {
  color:var(--brand);
  border-color:var(--brand-border);
  background:var(--brand-soft);
  box-shadow:none;
}

.auth-switch,
.auth-heading>p:last-child,
.lead,
.hint,
.muted,
label span,
.signup-box p,
.management-heading p:last-child {
  color:var(--text-muted);
}

.eyebrow,
.step,
.text-button,
.auth-switch button,
.notification-action,
.event-payload summary,
.admin-platform-cell a {
  color:var(--brand);
  font-family:var(--font-sans);
  font-weight:620;
  letter-spacing:.04em;
}

.step {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand);
  letter-spacing:0;
}

.app-sidebar,
html[data-layout="topbar"] .app-sidebar,
.mobile-header {
  background:color-mix(in srgb, var(--surface-2) 94%, transparent);
  border-color:var(--border-weak);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}

.app-sidebar {
  box-shadow:8px 0 28px rgba(2,6,23,.24);
}

html[data-layout="topbar"] .app-sidebar {
  box-shadow:none;
}

.brand {
  color:var(--text-strong);
  font-weight:620;
}

.brand strong {
  color:var(--brand);
}

.brand-mark,
.brand-logo-preview,
.brand-favicon-preview,
.profile-trigger,
.avatar-fallback {
  background:var(--brand-soft);
  border-color:var(--brand-border);
  color:var(--brand);
  box-shadow:none;
}

.nav-button:hover,
.settings-nav button:hover,
.notification-trigger:hover,
.notification-trigger[aria-expanded="true"],
.account-list-item:hover,
.account-list-item.active,
.account-picker[open] .account-picker-chevron,
.template-list-row:hover,
.template-list-row.selected,
.password-toggle:hover,
.password-toggle:focus-visible {
  color:var(--brand);
  border-color:var(--brand-border);
  background:var(--surface-active);
}

.card,
.account-bar,
.overview-card,
.settings-section,
.templates-drafts-card,
.signup-box,
.template-detail-panel,
.account-integration,
.account-name-form,
.standalone-connect-card,
dialog,
.app-action-dialog {
  background:var(--surface-2);
  border-color:var(--border-weak);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  backdrop-filter:none;
}

.overview-card,
.templates-drafts-card {
  background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-3) 54%, var(--surface-2)));
}

.settings-title,
.template-builder-title,
.template-builder-actions,
.template-section,
.template-preview-card,
.template-detail-preview,
.readonly-details div,
.connection-actions-list>div,
.call-settings-item,
.notification-item,
.account-picker-menu,
.account-picker-chevron,
.account-list-item,
.phone-item,
.integration-summary,
.integration-summary-item,
.integration-binding div,
.analytics-breakdown-row,
.analytics-breakdown-row div,
.draft-template-item,
.admin-template-model-item,
.admin-changelog-item,
.brand-asset-editor,
.brand-indexing-control,
.totp-secret,
.recovery-codes code,
.empty,
.event,
.templates-table-wrap,
.admin-table-wrap {
  background:var(--surface-2);
  border-color:var(--border-weak);
  box-shadow:none;
}

input,
textarea,
select,
.events-filters input,
.events-filters select,
#template-create-dialog input,
#template-create-dialog textarea,
#template-create-dialog select {
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text-strong);
  border-radius:var(--radius-md);
  font:400 14px/1.35 var(--font-sans);
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}

input:focus,
textarea:focus,
select:focus,
#template-create-dialog input:focus,
#template-create-dialog textarea:focus,
#template-create-dialog select:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

label {
  color:var(--text-body);
  font-size:13px;
  font-weight:520;
}

button {
  font:620 13px/1.2 var(--font-sans);
}

.primary,
.meta-button {
  background:var(--brand);
  color:#ffffff;
  border:1px solid var(--brand);
  border-radius:var(--radius-md);
  box-shadow:0 1px 2px rgba(2,6,23,.14);
}

.primary:hover:not(:disabled),
.meta-button:hover:not(:disabled) {
  background:var(--brand-hover);
  border-color:var(--brand-hover);
}

.secondary {
  background:var(--brand-soft);
  border:1px solid var(--brand-border);
  color:var(--brand);
  border-radius:var(--radius-md);
}

.outline-button,
.icon-button,
.dialog-close,
.back-button,
.theme-choice span,
.layout-choice span,
.notification-trigger,
.user-menu .outline-button,
.user-menu .pill {
  background:var(--surface-2);
  border-color:var(--border-strong);
  color:var(--text-body);
  border-radius:var(--radius-md);
  box-shadow:none;
}

.outline-button:hover,
.icon-button:hover,
.dialog-close:hover,
.back-button:hover {
  border-color:var(--brand-border);
  color:var(--brand);
  background:var(--surface-active);
}

.pill,
.integration-badge,
.template-status,
.phone-registration-badge,
.phone-item .phone-chatwoot-badge,
.admin-badge {
  background:var(--surface-3);
  border-color:var(--border-weak);
  color:var(--text-muted);
  font-family:var(--font-sans);
  font-weight:620;
  letter-spacing:.02em;
}

.pill.live,
.integration-badge.live,
.template-status.approved,
.phone-registration-badge.registered,
.admin-badge.active {
  background:var(--success-soft);
  border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak));
  color:var(--success) !important;
}

.pill.live i,
.notification-item.success .notification-dot {
  background:var(--success);
  box-shadow:none;
}

.pill.attention,
.template-status.pending,
.phone-registration-badge.pending {
  background:var(--warning-soft);
  border-color:color-mix(in srgb, var(--warning) 42%, var(--border-weak));
  color:var(--warning) !important;
}

.template-status.rejected,
.template-status.disabled,
.admin-badge.disabled,
.text-button.danger {
  color:var(--danger);
}

.template-status.rejected,
.template-status.disabled,
.admin-badge.disabled,
.template-rejection {
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 40%, var(--border-weak));
}

.connection-alert {
  background:var(--warning-soft);
  border-color:color-mix(in srgb, var(--warning) 42%, var(--border-weak));
}

.connection-alert strong {
  color:var(--warning);
}

.connection-alert span {
  color:color-mix(in srgb, var(--warning) 68%, var(--text-muted));
}

.wa-icon,
.meta-mark,
.metric-icon,
.feature-icon,
.avatar-preview>b {
  background:var(--brand-soft);
  border:1px solid var(--brand-border);
  color:var(--brand);
  box-shadow:none;
}

.meta-mark {
  background:#1877f2;
  border-color:#1877f2;
  color:#ffffff;
}

.metric-card>strong,
.analytics-breakdown-row dd,
.template-detail-info strong {
  color:var(--text-strong);
  font-family:var(--font-sans);
  font-weight:620;
  letter-spacing:-.025em;
}

.number-box,
.phone-item.chatwoot-phone,
.account-list-item.active,
.template-blocks-nav button.active,
.admin-blocks-nav button.active {
  background:var(--surface-active);
  border-color:var(--brand-border);
}

.number-box small,
.number-box strong,
.number-box span,
.phone-item strong,
.phone-item span,
.phone-item em,
.details dd,
.readonly-details dd,
.call-settings-main strong,
.event-kind,
.event-time,
.account-list-meta b,
.analytics-bar-label,
.analytics-bar-label b,
.template-row-main strong,
.template-row-meta dd,
.draft-template-item h3,
.admin-template-model-item h3,
.admin-changelog-item h3,
.changelog-entry-head time,
.changelog-content small,
.notification-meta,
.notification-footer small,
.save-row>span,
.switch-control small,
.totp-secret span,
.totp-secret strong,
.recovery-codes code,
.app-version,
.user-menu span:not(.pill) {
  font-family:var(--font-sans);
}

.event-kind,
.account-list-meta b,
.analytics-bar-label b,
.template-row-main strong,
.phone-item em,
.integration-summary span,
.integration-summary-item>span,
.number-box small,
.totp-secret strong,
.recovery-codes code {
  color:var(--brand);
}

.details dt,
.readonly-details dt,
.analytics-breakdown-row dt,
.template-row-meta dt,
.metric-heading>span,
.chart-heading span,
.account-bar small,
.events-filters span,
.templates-toolbar span,
.template-detail-info span {
  color:var(--text-muted);
  font-family:var(--font-sans);
  font-weight:620;
  letter-spacing:.04em;
}

.events,
.connection-actions-list {
  background:var(--border-weak);
  border-color:var(--border-weak);
}

.template-list-header,
.admin-table th {
  background:var(--surface-3);
  border-color:var(--border-weak);
  color:var(--text-muted);
  font-family:var(--font-sans);
  font-weight:620;
}

.template-list-row,
.admin-table td {
  border-color:var(--border-weak);
  color:var(--text-body);
}

.notifications-panel {
  background:var(--surface-2);
  border-color:var(--border-weak);
  box-shadow:var(--shadow-popover);
}

.notification-backdrop,
.sidebar-backdrop,
dialog::backdrop {
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(4px);
}

#toast {
  background:var(--surface-2);
  color:var(--text-strong);
  border:1px solid var(--border-weak);
  box-shadow:var(--shadow-popover);
}

#toast.error {
  background:var(--danger-soft);
  color:#fecaca;
  border-color:color-mix(in srgb, var(--danger) 44%, var(--border-weak));
}

.standalone-connect-page {
  background:var(--surface-1);
}

.standalone-connect-card {
  box-shadow:var(--shadow-popover);
}

#template-create-dialog,
.template-builder-title,
.template-builder-actions,
.template-preview-panel,
.template-section,
.template-preview-card {
  background:var(--surface-2);
  color:var(--text-body);
  border-color:var(--border-weak);
}

.template-preview,
.whatsapp-preview {
  background-color:var(--surface-3);
  background-image:radial-gradient(color-mix(in srgb, var(--brand) 18%, transparent) 1px, transparent 1px);
}

.whatsapp-bubble {
  background:var(--surface-2);
  color:var(--text-body);
  border:1px solid var(--border-weak);
  box-shadow:0 2px 8px rgba(2,6,23,.16);
}

.whatsapp-template-buttons span {
  border-color:var(--border-weak);
  color:var(--brand);
}

.analytics-bar-track,
.account-chart-track,
.password-strength i {
  background:var(--surface-4);
}

.analytics-bar-track i,
.account-chart-track i,
.mini-bars i:nth-child(5),
.password-strength i.active {
  background:var(--brand);
}

.account-chart-row.active .account-chart-track i {
  background:var(--brand);
  box-shadow:none;
}

.switch-control input:checked+span {
  border-color:var(--brand-border);
  background:var(--brand-soft);
}

.switch-control input:checked+span::after {
  background:var(--brand);
  box-shadow:none;
}

.primary.danger-action {
  background:var(--danger);
  border-color:var(--danger);
  color:#ffffff;
}

footer {
  color:var(--text-subtle);
  border-color:var(--border-weak);
  font-family:var(--font-sans);
  letter-spacing:.04em;
}

html[data-theme="light"] .primary,
html[data-theme="light"] .meta-button {
  color:#ffffff;
}

html[data-theme="light"] .auth-tabs,
html[data-theme="light"] .app-sidebar,
html[data-theme="light"] .user-menu .pill,
html[data-theme="light"] .user-menu .outline-button,
html[data-theme="light"] .notification-trigger,
html[data-theme="light"] .notifications-panel,
html[data-theme="light"] .card,
html[data-theme="light"] .account-bar,
html[data-theme="light"] .overview-card,
html[data-theme="light"] .templates-metric-card .metric-action,
html[data-theme="light"] .signup-box,
html[data-theme="light"] .events,
html[data-theme="light"] .event,
html[data-theme="light"] .analytics-breakdown-row,
html[data-theme="light"] .analytics-breakdown-row div,
html[data-theme="light"] .templates-drafts-card,
html[data-theme="light"] .draft-template-item,
html[data-theme="light"] .admin-template-model-item,
html[data-theme="light"] .admin-changelog-item,
html[data-theme="light"] .changelog-content,
html[data-theme="light"] .draft-empty,
html[data-theme="light"] .templates-table-wrap,
html[data-theme="light"] .templates-list>.empty,
html[data-theme="light"] .template-detail-panel,
html[data-theme="light"] .template-detail-info div,
html[data-theme="light"] .brand-asset-editor,
html[data-theme="light"] .brand-indexing-control,
html[data-theme="light"] .admin-table-wrap,
html[data-theme="light"] .settings-section,
html[data-theme="light"] .settings-title,
html[data-theme="light"] dialog,
html[data-theme="light"] .totp-secret,
html[data-theme="light"] .recovery-codes code,
html[data-theme="light"] .theme-choice span,
html[data-theme="light"] .layout-choice span {
  background:var(--surface-2);
}

html[data-theme="light"] .overview-card,
html[data-theme="light"] .account-bar,
html[data-theme="light"] .templates-drafts-card {
  background:linear-gradient(180deg, #ffffff, #f8fafc);
}

html[data-theme="light"] .nav-button.active,
html[data-theme="light"] .settings-nav button.active,
html[data-theme="light"] .admin-blocks-nav button.active,
html[data-theme="light"] .template-blocks-nav button.active,
html[data-theme="light"] .notification-trigger:hover,
html[data-theme="light"] .notification-trigger[aria-expanded="true"],
html[data-theme="light"] .theme-choice input:checked+span,
html[data-theme="light"] .layout-choice input:checked+span,
html[data-theme="light"] .account-list-item.active,
html[data-theme="light"] .account-picker[open] .account-picker-chevron,
html[data-theme="light"] .number-box,
html[data-theme="light"] .phone-item.chatwoot-phone {
  background:var(--brand-soft);
  border-color:var(--brand-border);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .outline-button,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .notification-item,
html[data-theme="light"] .account-picker-menu,
html[data-theme="light"] .account-picker-chevron,
html[data-theme="light"] .account-list-item,
html[data-theme="light"] .event,
html[data-theme="light"] .analytics-breakdown-row,
html[data-theme="light"] .analytics-breakdown-row div,
html[data-theme="light"] .draft-template-item,
html[data-theme="light"] .admin-template-model-item,
html[data-theme="light"] .admin-changelog-item,
html[data-theme="light"] .draft-empty,
html[data-theme="light"] .empty,
html[data-theme="light"] .template-detail-panel,
html[data-theme="light"] .template-detail-preview,
html[data-theme="light"] .template-detail-info div,
html[data-theme="light"] .profile-trigger,
html[data-theme="light"] .avatar-preview,
html[data-theme="light"] .feature-icon,
html[data-theme="light"] .switch-control>span {
  background:var(--surface-2);
  border-color:var(--border-weak);
  color:var(--text-body);
}

html[data-theme="light"] .auth-benefits,
html[data-theme="light"] .auth-switch,
html[data-theme="light"] .user-menu span:not(.pill),
html[data-theme="light"] .app-version,
html[data-theme="light"] .details dt,
html[data-theme="light"] .account-bar small,
html[data-theme="light"] .metric-heading>span,
html[data-theme="light"] .chart-heading span,
html[data-theme="light"] .chart-heading>small,
html[data-theme="light"] .metric-card>small,
html[data-theme="light"] .account-chart>p,
html[data-theme="light"] .account-chart-label,
html[data-theme="light"] .signup-box small,
html[data-theme="light"] .event-body strong,
html[data-theme="light"] .event-time,
html[data-theme="light"] .events-pagination span,
html[data-theme="light"] .drafts-heading p,
html[data-theme="light"] .draft-template-item p,
html[data-theme="light"] .admin-template-model-item p,
html[data-theme="light"] .admin-changelog-item p,
html[data-theme="light"] .changelog-content p,
html[data-theme="light"] .changelog-content li,
html[data-theme="light"] .draft-template-item small,
html[data-theme="light"] .admin-template-model-item small,
html[data-theme="light"] .admin-changelog-item small,
html[data-theme="light"] .changelog-entry-head time,
html[data-theme="light"] .draft-empty span,
html[data-theme="light"] .templates-toolbar span,
html[data-theme="light"] .template-row-main p,
html[data-theme="light"] .template-row-meta dt,
html[data-theme="light"] .template-detail-heading p,
html[data-theme="light"] .template-detail-info span,
html[data-theme="light"] .brand-asset-editor p,
html[data-theme="light"] .settings-nav button,
html[data-theme="light"] .settings-nav small,
html[data-theme="light"] .settings-title>span,
html[data-theme="light"] .field-note,
html[data-theme="light"] .save-row>span,
html[data-theme="light"] .switch-control small,
html[data-theme="light"] .password-strength span,
html[data-theme="light"] .notification-content p,
html[data-theme="light"] .notification-meta,
html[data-theme="light"] .notification-footer small,
html[data-theme="light"] footer {
  color:var(--text-muted) !important;
}

html[data-theme="light"] .auth-benefits b,
html[data-theme="light"] label,
html[data-theme="light"] .signup-box h3,
html[data-theme="light"] .signup-box h2,
html[data-theme="light"] .event-body,
html[data-theme="light"] .empty,
html[data-theme="light"] .draft-template-item h3,
html[data-theme="light"] .admin-template-model-item h3,
html[data-theme="light"] .admin-changelog-item h3,
html[data-theme="light"] .changelog-content h2,
html[data-theme="light"] .draft-empty strong,
html[data-theme="light"] .template-row-main strong,
html[data-theme="light"] .template-row-meta dd,
html[data-theme="light"] .template-detail-heading h3,
html[data-theme="light"] .template-detail-info strong,
html[data-theme="light"] .settings-nav strong,
html[data-theme="light"] .brand-asset-editor strong,
html[data-theme="light"] .account-chart-label b,
html[data-theme="light"] .outline-button,
html[data-theme="light"] .user-menu .outline-button,
html[data-theme="light"] .notification-trigger,
html[data-theme="light"] .readonly-details dd {
  color:var(--text-strong);
}

body,
body * {
  font-family:var(--font-sans) !important;
}

code,
pre,
kbd,
samp,
.event-payload pre {
  font-family:var(--font-mono) !important;
}

/* Chatwoot dark-match refinement: closer to the product UI shown in Chatwoot,
   with charcoal surfaces and blue used only as an interaction accent. */
:root {
  --shadow-card:none;
  --shadow-popover:0 18px 54px rgba(0, 0, 0, .42);
  --surface-1:#111214;
  --surface-2:#151619;
  --surface-3:#1b1c21;
  --surface-4:#24262d;
  --surface-hover:#202126;
  --surface-active:#1a2333;
  --text-strong:#f8fafc;
  --text-body:#d9dde5;
  --text-muted:#a8b0bd;
  --text-subtle:#717987;
  --border-weak:#25272d;
  --border-strong:#343741;
  --brand:#3b82f6;
  --brand-hover:#60a5fa;
  --brand-soft:#172033;
  --brand-border:#2457a6;
  --success:#10b981;
  --success-soft:#052e25;
  --warning:#f59e0b;
  --warning-soft:#31240b;
  --danger:#f87171;
  --danger-soft:#331516;
  --ink:var(--text-strong);
  --muted:var(--text-muted);
  --line:var(--border-weak);
  --card:var(--surface-2);
  --accent:var(--brand);
  --accent-soft:var(--brand-soft);
  --bg:var(--surface-1);
}

html[data-theme="light"] {
  --shadow-card:none;
  --surface-1:#f8fafc;
  --surface-2:#ffffff;
  --surface-3:#f1f5f9;
  --surface-4:#e5e7eb;
  --surface-hover:#f3f4f6;
  --surface-active:#eff6ff;
  --text-strong:#111827;
  --text-body:#374151;
  --text-muted:#6b7280;
  --text-subtle:#9ca3af;
  --border-weak:#e5e7eb;
  --border-strong:#d1d5db;
  --brand:#2563eb;
  --brand-hover:#1d4ed8;
  --brand-soft:#eff6ff;
  --brand-border:#bfdbfe;
  --success:#059669;
  --success-soft:#ecfdf5;
  --warning:#d97706;
  --warning-soft:#fffbeb;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --ink:var(--text-strong);
  --muted:var(--text-muted);
  --line:var(--border-weak);
  --card:var(--surface-2);
  --accent:var(--brand);
  --accent-soft:var(--brand-soft);
  --bg:var(--surface-1);
}

body {
  background:var(--surface-1);
  color:var(--text-body);
  font-size:14px;
}

body::before,
html[data-theme="light"] body::before {
  display:none;
}

h1 {
  font-size:clamp(32px,4.8vw,56px);
  letter-spacing:-.035em;
}

h2 {
  font-size:18px;
  font-weight:700;
}

.shell {
  background:var(--surface-1);
}

.shell>main,
.shell>footer {
  max-width:1128px;
}

html[data-layout="topbar"] .shell {
  padding-top:96px;
}

.app-sidebar,
html[data-layout="topbar"] .app-sidebar,
.mobile-header {
  background:var(--surface-2);
  border-color:var(--border-weak);
}

html[data-layout="topbar"] .app-sidebar {
  height:72px;
}

html[data-layout="topbar"] .main-nav {
  background:var(--surface-3);
  border-color:var(--border-weak);
  border-radius:8px;
  padding:3px;
}

.brand-mark {
  width:34px;
  height:34px;
  border:0;
  border-radius:8px;
  background:#063d50;
  color:#67e8f9;
}

.brand strong,
.eyebrow,
.text-button,
.auth-switch button,
.admin-platform-cell a,
.event-payload summary {
  color:var(--brand);
}

.nav-button,
html[data-layout="topbar"] .nav-button {
  min-height:38px;
  padding:8px 11px;
  border-radius:7px;
  color:var(--text-muted);
  font-size:13px;
}

.nav-button:hover,
.settings-nav button:hover {
  background:var(--surface-hover);
  border-color:transparent;
  color:var(--text-strong);
}

.nav-button.active,
.auth-tabs button.active,
.settings-nav button.active,
.admin-blocks-nav button.active,
.template-blocks-nav button.active {
  background:var(--brand-soft);
  border-color:#0e5ea8;
  color:#38bdf8;
}

.card,
.account-bar,
.overview-card,
.settings-section,
.templates-drafts-card,
.signup-box,
.template-detail-panel,
.account-integration,
.account-name-form,
.standalone-connect-card,
dialog,
.app-action-dialog {
  background:var(--surface-2);
  border:1px solid var(--border-weak);
  border-radius:14px;
  box-shadow:none;
}

.card {
  padding:26px;
}

.account-bar {
  padding:18px;
}

.overview-card,
.templates-drafts-card,
html[data-theme="light"] .overview-card,
html[data-theme="light"] .account-bar,
html[data-theme="light"] .templates-drafts-card {
  background:var(--surface-2);
}

.settings-title,
.template-builder-title,
.template-builder-actions,
.template-section,
.template-preview-card,
.template-detail-preview,
.readonly-details div,
.connection-actions-list>div,
.call-settings-item,
.notification-item,
.account-picker-menu,
.account-picker-chevron,
.account-list-item,
.phone-item,
.integration-summary,
.integration-summary-item,
.integration-binding div,
.analytics-breakdown-row,
.analytics-breakdown-row div,
.draft-template-item,
.admin-template-model-item,
.admin-changelog-item,
.brand-asset-editor,
.brand-indexing-control,
.totp-secret,
.recovery-codes code,
.empty,
.event,
.templates-table-wrap,
.admin-table-wrap {
  background:var(--surface-2);
  border-color:var(--border-weak);
}

.account-list-item,
.account-picker-chevron,
.phone-item,
.notification-item,
.draft-template-item,
.admin-template-model-item,
.admin-changelog-item,
.analytics-breakdown-row,
.template-detail-panel,
.template-detail-info div,
.readonly-details div,
.call-settings-item,
.integration-summary,
.integration-summary-item {
  border-radius:8px;
}

.account-list-item:hover,
.template-list-row:hover,
.template-list-row.selected {
  background:var(--surface-hover);
  border-color:var(--border-strong);
  color:var(--text-strong);
}

.account-list-item.active,
.number-box,
.phone-item.chatwoot-phone,
html[data-theme="light"] .account-list-item.active,
html[data-theme="light"] .account-picker[open] .account-picker-chevron,
html[data-theme="light"] .number-box,
html[data-theme="light"] .phone-item.chatwoot-phone {
  background:#172033;
  border-color:#0e5ea8;
  box-shadow:none;
}

.number-box,
.phone-item.chatwoot-phone {
  color:var(--text-body);
}

.number-box small,
.phone-item em,
.account-list-meta b,
.integration-summary span,
.integration-summary-item>span {
  color:#38bdf8;
}

.number-box strong,
.phone-item strong,
.account-list-main strong,
.integration-summary strong,
.integration-summary-item>strong {
  color:var(--text-strong);
}

.details dt,
.readonly-details dt,
.metric-heading>span,
.chart-heading span,
.account-bar small,
.events-filters span,
.templates-toolbar span,
.template-detail-info span,
.notification-meta,
.event-body strong {
  color:var(--text-subtle);
}

.details dd,
.readonly-details dd,
.template-row-meta dd,
.event-body,
.notification-content p,
.phone-item span,
.number-box span {
  color:var(--text-body);
}

input,
textarea,
select,
.events-filters input,
.events-filters select,
#template-create-dialog input,
#template-create-dialog textarea,
#template-create-dialog select {
  background:#111214;
  border-color:#343741;
  color:var(--text-strong);
  border-radius:7px;
  min-height:42px;
}

textarea {
  min-height:84px;
}

input::placeholder,
textarea::placeholder {
  color:#737987;
}

input:focus,
textarea:focus,
select:focus,
#template-create-dialog input:focus,
#template-create-dialog textarea:focus,
#template-create-dialog select:focus {
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59, 130, 246, .24);
}

label {
  color:var(--text-body);
  font-size:13px;
  font-weight:600;
}

.primary,
.meta-button {
  background:#2563eb;
  border-color:#2563eb;
  color:#ffffff;
  border-radius:8px;
  min-height:40px;
}

.primary:hover:not(:disabled),
.meta-button:hover:not(:disabled) {
  background:#1d4ed8;
  border-color:#1d4ed8;
}

.secondary {
  background:#12345a;
  border-color:#0e5ea8;
  color:#38bdf8;
  border-radius:8px;
  min-height:40px;
}

.outline-button,
.icon-button,
.dialog-close,
.back-button,
.notification-trigger,
.user-menu .outline-button,
.user-menu .pill {
  background:#1f2025;
  border-color:#343741;
  color:var(--text-body);
  border-radius:8px;
}

.outline-button:hover,
.icon-button:hover,
.dialog-close:hover,
.back-button:hover,
.notification-trigger:hover,
.notification-trigger[aria-expanded="true"] {
  background:#24262d;
  border-color:#3f4552;
  color:var(--text-strong);
}

.step {
  min-width:26px;
  height:24px;
  background:#063d50;
  color:#38bdf8;
  border-radius:999px;
  font-size:11px;
}

.wa-icon,
.metric-icon,
.feature-icon,
.avatar-preview>b {
  background:#063d50;
  border-color:#0e5ea8;
  color:#38bdf8;
}

.pill,
.integration-badge,
.template-status,
.phone-registration-badge,
.phone-item .phone-chatwoot-badge,
.admin-badge {
  background:#1f2025;
  border-color:#343741;
  color:var(--text-muted);
}

.pill.live,
.integration-badge.live,
.template-status.approved,
.phone-registration-badge.registered,
.admin-badge.active {
  background:var(--success-soft);
  border-color:color-mix(in srgb, var(--success) 42%, var(--border-weak));
  color:var(--success) !important;
}

.pill.attention,
.template-status.pending,
.phone-registration-badge.pending {
  background:#33240a;
  border-color:#8a5b05;
  color:#fbbf24 !important;
}

.template-status.rejected,
.template-status.disabled,
.admin-badge.disabled,
.template-rejection {
  background:#331516;
  border-color:#7f1d1d;
  color:#f87171;
}

.connection-alert {
  background:#33240a;
  border-color:#8a5b05;
}

.connection-alert strong {
  color:#fbbf24;
}

.connection-alert span {
  color:#d6b06c;
}

.metric-card {
  min-height:154px;
}

.metric-card>strong {
  font-size:32px;
}

.mini-bars i,
.analytics-bar-track,
.account-chart-track,
.password-strength i {
  background:#2a2d35;
}

.mini-bars i:nth-child(5),
.analytics-bar-track i,
.account-chart-track i,
.password-strength i.active {
  background:#3b82f6;
}

.templates-table-wrap,
.admin-table-wrap,
.events,
.connection-actions-list {
  background:var(--border-weak);
}

.template-list-header,
.admin-table th {
  background:#1b1c21;
  color:#8b94a5;
}

.template-list-row,
.admin-table td {
  background:#151619;
}

.notifications-panel {
  background:#18191c;
}

.notification-backdrop,
.sidebar-backdrop,
dialog::backdrop {
  background:rgba(0, 0, 0, .58);
}

#toast {
  background:#23221f;
  border-color:#454139;
  color:var(--text-strong);
  border-radius:18px;
}

.template-preview,
.whatsapp-preview {
  background-color:#151619;
  background-image:none;
}

.whatsapp-bubble {
  background:#24262d;
  border-color:#343741;
  color:var(--text-strong);
}

.whatsapp-template-buttons span {
  border-color:#343741;
  color:#60a5fa;
}

.auth-view,
.standalone-connect-page {
  background:#111214;
}

.auth-story {
  background:#151619;
}

.auth-panel {
  background:#111214;
}

.auth-tabs,
.theme-choice span,
.layout-choice span {
  background:#1b1c21;
  border-color:#343741;
}

html[data-theme="light"] .account-list-item.active,
html[data-theme="light"] .account-picker[open] .account-picker-chevron,
html[data-theme="light"] .number-box,
html[data-theme="light"] .phone-item.chatwoot-phone {
  background:var(--brand-soft);
  border-color:var(--brand-border);
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .template-list-row,
html[data-theme="light"] .admin-table td {
  background:#ffffff;
}