/* ── Tokens (مشابهة لـ const-hr) ── */
:root {
    --c-primary: #4f46e5;
    --c-primary-2: #6366f1;
    --c-accent: #8b5cf6;
    --c-bg: #f7f8fb;
    --c-card: #ffffff;
    --c-border: #e5e7eb;
    --c-border-soft: #f1f5f9;
    --c-text: #1f2937;
    --c-text-2: #374151;
    --c-muted: #6b7280;
    --c-muted-2: #9ca3af;
    --c-green: #22c55e;
    --c-orange: #f59e0b;
    --c-red: #ef4444;
    --r-card: 12px;
    --r-btn: 8px;
    --navbar-h: 58px;
    --sidebar-w: 220px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    direction: rtl;
    font-size: 14px;
}

a { color: inherit; text-decoration: none; }

.d-inline { display: inline; }
.text-end { text-align: end; }
.text-muted { color: var(--c-muted); }
.w-100 { width: 100%; }

/* ─────────────── Auth (login) ─────────────── */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fdf2f8 100%);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 50px rgba(99, 102, 241, .12), 0 4px 12px rgba(0, 0, 0, .04);
}

.auth-brand {
    text-align: center;
    margin-bottom: 24px;
}

.auth-brand-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.auth-brand h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--c-text);
}

.auth-brand p {
    margin: 0;
    font-size: 13px;
    color: var(--c-muted);
}

.auth-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }

/* ─────────────── Forms ─────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-2);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-btn);
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: var(--c-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.stack { display: flex; flex-direction: column; gap: 14px; }

.row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 540px) {
    .row-2 { grid-template-columns: 1fr; }
}

.form-group input[disabled] {
    background: #f9fafb;
    color: var(--c-muted);
    cursor: not-allowed;
}

/* ─────────────── Buttons ─────────────── */
.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: var(--r-btn);
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 10px rgba(99, 102, 241, .25);
}

.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

.btn-ghost {
    background: #fff;
    color: var(--c-text-2);
    border-color: var(--c-border);
}

.btn-ghost:hover {
    background: #f9fafb;
    color: var(--c-primary);
    border-color: #c7d2fe;
}

.btn-sm { padding: 7px 12px; font-size: 12.5px; }

.btn-warning { color: #d97706; }
.btn-warning:hover { background: #fffbeb; color: #b45309; border-color: #fcd34d; }

.btn-danger { color: var(--c-red); }
.btn-danger:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ─────────────── Navbar ─────────────── */
.ds-navbar {
    height: var(--navbar-h);
    background: #fff;
    border-bottom: 1px solid var(--c-border);
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 100;
}

.ds-navbar-inner {
    height: 100%;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ds-navbar-right, .ds-navbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ds-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    color: var(--c-text);
}

.ds-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ds-brand-name { font-size: 14.5px; }

/* Notifications bell in navbar */
.ds-bell {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}

.ds-bell:hover {
    background: #ede9fe;
    color: var(--c-primary);
    transform: scale(1.05);
}

.ds-bell-badge {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}

/* Profile dropdown */
.ds-profile-wrap { position: relative; }

.ds-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border: 1px solid var(--c-border);
    background: #fff;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    transition: all .15s;
}

.ds-profile-trigger:hover { border-color: #c7d2fe; background: #f5f3ff; }

.ds-profile-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.ds-profile-name { font-size: 12.5px; font-weight: 600; color: var(--c-text-2); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ds-profile-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 220px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    display: none;
    overflow: hidden;
    z-index: 200;
}

.ds-profile-panel.open { display: block; }

.ds-profile-info {
    padding: 13px 14px;
    border-bottom: 1px solid var(--c-border-soft);
}

.ds-profile-info-name { font-size: 13px; font-weight: 700; color: var(--c-text); }
.ds-profile-info-email { font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }

.ds-profile-logout {
    width: 100%;
    text-align: right;
    padding: 11px 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-red);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ds-profile-logout:hover { background: #fef2f2; }

/* ─────────────── Sidebar ─────────────── */
.ds-sidebar {
    width: var(--sidebar-w);
    height: calc(100vh - var(--navbar-h));
    background: #fff;
    border-left: 1px solid var(--c-border);
    position: fixed;
    top: var(--navbar-h);
    right: 0;
    display: flex;
    flex-direction: column;
}

.ds-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--c-muted);
    font-size: 13.5px;
    font-weight: 600;
    transition: all .15s;
}

.ds-nav-item:hover { background: #f5f3ff; color: var(--c-primary); }

.ds-nav-item.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 10px rgba(99, 102, 241, .25);
}

.ds-nav-item i { width: 18px; text-align: center; font-size: 14px; }

.ds-sidebar-footer {
    padding: 14px;
    border-top: 1px solid var(--c-border);
}

.ds-sidebar-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--c-muted);
    font-weight: 600;
}

.ds-pulse {
    width: 8px;
    height: 8px;
    background: var(--c-green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ─────────────── Main / Page ─────────────── */
.ds-main {
    margin-top: var(--navbar-h);
    margin-right: var(--sidebar-w);
    min-height: calc(100vh - var(--navbar-h));
}

.ds-page { padding: 22px; }

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.page-title { font-size: 20px; font-weight: 800; margin: 0 0 3px; color: var(--c-text); }
.page-sub { margin: 0; font-size: 13px; color: var(--c-muted); }

/* ─────────────── Cards ─────────────── */
.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    overflow: hidden;
}

.card-narrow { max-width: 520px; padding: 22px; }

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid var(--c-border-soft);
    background: #fafbfc;
}

.card-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-text); }
.card-title-sm { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--c-text); }

.card-link {
    font-size: 12.5px;
    color: var(--c-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ─────────────── Empty state ─────────────── */
.empty {
    text-align: center;
    padding: 50px 20px;
    color: var(--c-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.empty i { font-size: 32px; color: var(--c-muted-2); }
.empty p { margin: 0; font-size: 14px; }

/* ─────────────── Stats grid ─────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all .15s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
    text-decoration: none;
}

.stat-card.is-active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Filter bar (شريط الفلتر المفعّل) */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    margin-bottom: 14px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    font-size: 13px;
    color: var(--c-text-2);
}

.filter-bar i { color: var(--c-primary); margin-inline-end: 4px; }
.filter-bar strong { color: var(--c-primary); margin-inline-start: 4px; }

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--c-red);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .15s;
}

.filter-clear:hover { background: #fee2e2; }

/* ─────────────── Docs page ─────────────── */
.docs-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 900px) {
    .docs-grid { grid-template-columns: 1fr; }
}

/* TOC sidebar */
.docs-toc {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 16px 14px;
    position: sticky;
    top: calc(var(--navbar-h) + 14px);
    font-size: 13px;
    max-height: calc(100vh - var(--navbar-h) - 30px);
    overflow-y: auto;
}

.docs-toc h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 800;
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.docs-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-toc li { margin-bottom: 4px; }

.docs-toc a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--c-text-2);
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}

.docs-toc a:hover { background: #f5f3ff; color: var(--c-primary); }

.docs-toc ul ul {
    margin: 4px 0 6px 6px;
    padding-inline-start: 12px;
    border-inline-start: 1.5px solid var(--c-border-soft);
}

.docs-toc ul ul a { font-size: 12px; font-weight: 500; padding: 4px 8px; }

/* Main content */
.docs-main {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-card);
    padding: 20px 26px;
}

.docs-section {
    padding-block: 14px 22px;
    border-bottom: 1px dashed var(--c-border-soft);
}

.docs-section:last-child { border-bottom: 0; }

.docs-section h2 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 800;
    color: var(--c-text);
    padding-bottom: 6px;
    border-bottom: 2px solid #ede9fe;
    display: inline-block;
}

.docs-section h4 {
    margin: 18px 0 8px;
    font-size: 14.5px;
    color: var(--c-text);
    font-weight: 700;
}

.docs-section h5 {
    margin: 12px 0 6px;
    font-size: 12.5px;
    color: var(--c-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.docs-section p {
    margin: 0 0 10px;
    line-height: 1.85;
    color: var(--c-text-2);
    font-size: 14px;
}

.docs-section code {
    background: #f3f4f6;
    color: #6d28d9;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: 'Courier New', ui-monospace, monospace;
    direction: ltr;
    display: inline-block;
}

.docs-section a { color: var(--c-primary); text-decoration: none; font-weight: 700; }
.docs-section a:hover { text-decoration: underline; }

/* Callout */
.docs-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 13.5px;
}

.docs-callout strong { color: var(--c-primary); }
.docs-mono {
    font-family: 'Courier New', monospace;
    color: #1e40af;
    font-weight: 700;
    direction: ltr;
}

/* Steps list */
.docs-steps {
    margin: 0;
    padding-inline-start: 22px;
    line-height: 2;
    color: var(--c-text-2);
    font-size: 14px;
}

.docs-steps li { margin-bottom: 4px; }

/* Note */
.docs-note {
    background: #fffbeb;
    border-inline-start: 4px solid #f59e0b;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #78350f;
    margin: 12px 0;
}

.docs-note i { color: #d97706; margin-inline-end: 6px; }

/* Tables */
.docs-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 14px;
    font-size: 13px;
    background: #fafbfc;
    border: 1px solid var(--c-border-soft);
    border-radius: 8px;
    overflow: hidden;
}

.docs-table thead th {
    background: #f3f4f6;
    color: var(--c-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 10px 14px;
    text-align: start;
    border-bottom: 1px solid var(--c-border);
}

.docs-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--c-border-soft);
    color: var(--c-text-2);
    vertical-align: top;
}

.docs-table tr:last-child td { border-bottom: 0; }

.docs-errors-table td:first-child {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #6d28d9;
}

/* Endpoint card */
.docs-endpoint {
    background: #fafbfc;
    border: 1px solid var(--c-border-soft);
    border-radius: 10px;
    padding: 16px;
    margin-block: 14px;
    scroll-margin-top: calc(var(--navbar-h) + 14px);
}

.docs-ep-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.docs-method {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 5px;
    letter-spacing: .5px;
    color: #fff;
}

.docs-method--get { background: #22c55e; }
.docs-method--post { background: #f59e0b; }
.docs-method--put { background: #3b82f6; }
.docs-method--delete { background: #ef4444; }

.docs-path {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--c-text);
    background: transparent;
    padding: 0;
    direction: ltr;
}

/* Code block */
.docs-code {
    background: #1e1e2e;
    color: #d4d4d4;
    padding: 14px 16px;
    border-radius: 10px;
    overflow-x: auto;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    direction: ltr;
    text-align: start;
    margin: 6px 0 10px;
    position: relative;
}

.docs-code code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
    display: block;
    white-space: pre;
}

.docs-copy {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: #d4d4d4;
    cursor: pointer;
    font-size: 12px;
    transition: all .15s;
}

.docs-copy:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.docs-copy--ok { background: #16a34a !important; color: #fff !important; }

/* Inline copy in callout */
.docs-callout .docs-copy {
    position: static;
    background: #fff;
    border: 1px solid #c7d2fe;
    color: var(--c-primary);
}

.docs-callout .docs-copy:hover { background: #ede9fe; }

/* Troubleshoot */
.docs-trouble {
    background: #fef2f2;
    border-inline-start: 4px solid #ef4444;
    padding: 12px 16px;
    border-radius: 8px;
    margin-block: 10px;
}

.docs-trouble h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #991b1b;
}

.docs-trouble h4 i { color: #ef4444; margin-inline-end: 6px; }

.docs-trouble p {
    margin: 4px 0;
    font-size: 13px;
    color: var(--c-text-2);
}

.docs-trouble code {
    background: #fff;
    color: #b91c1c;
}

/* ─────────────── Employees / Permissions ─────────────── */
.role-badge {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: .3px;
    vertical-align: middle;
}

.role-badge--admin { background: #ede9fe; color: #6d28d9; }
.role-badge--emp   { background: #dbeafe; color: #2563eb; }

/* Permission tags in employees list */
.perm-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 5px;
    margin-inline-end: 4px;
    margin-bottom: 3px;
}

.perm-tag--green { background: #d1fae5; color: #16a34a; }
.perm-tag--red   { background: #fee2e2; color: #dc2626; }

/* Permission checkboxes (custom toggle) */
.perm-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.perm-check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fafbfc;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}

.perm-check:hover { border-color: var(--c-primary); background: #f5f3ff; }

.perm-check input { display: none; }

.perm-check-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--c-border);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    flex-shrink: 0;
    transition: all .15s;
}

.perm-check input:checked ~ .perm-check-box {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

.perm-check input:checked ~ div strong { color: var(--c-primary); }

.perm-check strong {
    display: block;
    font-size: 13.5px;
    color: var(--c-text);
    margin-bottom: 2px;
}

.perm-check small {
    font-size: 11.5px;
    color: var(--c-muted);
}

/* ─────────────── Sidebar badge + credit + profile link ─────────────── */
.ds-nav-badge {
    margin-inline-start: auto;
    background: #ef4444;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
}

.ds-nav-item.active .ds-nav-badge { background: rgba(255, 255, 255, .25); }

.ds-credit {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--c-muted);
    text-align: center;
    border-top: 1px dashed var(--c-border-soft);
    padding-top: 8px;
    text-decoration: none;
    transition: color .15s;
}

.ds-credit:hover { color: var(--c-primary); }

.ds-profile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    color: var(--c-text-2);
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s;
}

.ds-profile-link:hover { background: #f5f3ff; color: var(--c-primary); }

/* ─────────────── Departments ─────────────── */
.dept-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
}

@media (max-width: 800px) {
    .dept-grid { grid-template-columns: 1fr; }
}

.dept-add { padding: 18px; }
.dept-add h3 { margin-top: 0; }

.dept-color-input {
    width: 60px !important;
    height: 38px;
    padding: 2px !important;
    cursor: pointer;
}

.dept-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dept-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dept-color {
    width: 6px;
    align-self: stretch;
    border-radius: 4px;
    min-height: 36px;
}

.dept-body { flex: 1; }
.dept-body strong { display: block; font-size: 14px; color: var(--c-text); margin-bottom: 2px; }
.dept-count { font-size: 12px; color: var(--c-muted); display: inline-flex; align-items: center; gap: 5px; }
.dept-actions { display: flex; gap: 6px; }

.dept-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.dept-modal.open { display: flex; }
.dept-modal-card { background: #fff; padding: 22px; border-radius: 14px; width: 90%; max-width: 380px; }
.dept-modal-card h3 { margin: 0 0 14px; font-size: 16px; color: var(--c-text); }

/* Department badge in clients table */
.dept-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
}

/* ─────────────── Settings ─────────────── */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.settings-grid textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    resize: vertical;
}

.settings-grid textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* ─────────────── Messages history ─────────────── */
.msg-text {
    font-size: 13px;
    color: var(--c-text-2);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge--blue { background: #dbeafe; color: #2563eb; }

/* ─────────────── Profile ─────────────── */
.profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border-soft);
}

.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-head strong { font-size: 16px; color: var(--c-text); }

/* ─────────────── Send templates row ─────────────── */
.iv-send-templates {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 10px;
    background: #f5f3ff;
    border: 1px dashed #c7d2fe;
    border-radius: 8px;
}

.iv-send-templates .btn-ghost {
    padding: 5px 10px;
    font-size: 12px;
}

.wa-dept-filter {
    padding: 7px 11px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.wa-dept-filter:focus { outline: none; border-color: var(--c-primary); }

/* ─────────────── Templates (settings page) ─────────────── */
.placeholder-help {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 18px;
    font-size: 12.5px;
    color: var(--c-text-2);
    line-height: 2;
}

.placeholder-help strong { color: var(--c-primary); margin-inline-end: 6px; }

.ph-tag {
    display: inline-block;
    background: #fff;
    color: #6d28d9;
    padding: 2px 8px;
    border-radius: 5px;
    margin-inline-start: 3px;
    margin-inline-end: 8px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 11.5px;
    border: 1px solid #ddd6fe;
}

.tpl-block {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 10px;
    border-inline-start: 4px solid;
    background: #fafbfc;
}

.tpl-block:last-child { margin-bottom: 0; }

.tpl-block--green  { border-color: #16a34a; background: #f0fdf4; }
.tpl-block--orange { border-color: #d97706; background: #fffbeb; }
.tpl-block--red    { border-color: #dc2626; background: #fef2f2; }
.tpl-block--purple { border-color: #6d28d9; background: #f5f3ff; }
.tpl-block--cyan   { border-color: #0891b2; background: #ecfeff; }

.tpl-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tpl-head i { font-size: 14px; }
.tpl-block--green  .tpl-head i { color: #16a34a; }
.tpl-block--orange .tpl-head i { color: #d97706; }
.tpl-block--red    .tpl-head i { color: #dc2626; }
.tpl-block--purple .tpl-head i { color: #6d28d9; }
.tpl-block--cyan   .tpl-head i { color: #0891b2; }

.tpl-head strong {
    font-size: 13.5px;
    color: var(--c-text);
    font-weight: 800;
}

.tpl-head small { color: var(--c-muted); font-size: 12px; font-weight: 500; }

.tpl-block textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 10px 13px;
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    resize: vertical;
}

.tpl-block textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

/* ─────────────── Templates buttons in show page ─────────────── */
.iv-send-templates-label {
    display: block;
    width: 100%;
    font-size: 12px;
    color: var(--c-muted);
    font-weight: 700;
    margin-bottom: 4px;
}

.iv-send-templates-label i { margin-inline-end: 4px; color: #6366f1; }

.tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid;
    border-radius: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
}

.tpl-btn:hover { transform: translateY(-1px); }
.tpl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.tpl-btn--green  { color: #16a34a; border-color: #a7f3d0; background: #f0fdf4; }
.tpl-btn--green:hover  { background: #dcfce7; }

.tpl-btn--orange { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.tpl-btn--orange:hover { background: #fef3c7; }

.tpl-btn--red    { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.tpl-btn--red:hover    { background: #fee2e2; }

.tpl-btn--purple { color: #6d28d9; border-color: #ddd6fe; background: #f5f3ff; }
.tpl-btn--purple:hover { background: #ede9fe; }

.tpl-btn--cyan   { color: #0891b2; border-color: #a5f3fc; background: #ecfeff; }
.tpl-btn--cyan:hover   { background: #cffafe; }

/* ─────────────── Dashboard report (WhatsApp report) ─────────────── */
.report-section {
    margin-block: 18px;
}

.report-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: var(--c-text);
}

.report-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 800px) {
    .report-grid { grid-template-columns: 1fr; }
}

.report-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 22px 24px;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.report-card--green {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
}

.report-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    background: #fff;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.report-card-icon--alt {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.report-card-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--c-text);
}

.report-card-sub {
    font-size: 12.5px;
    color: var(--c-muted);
    margin-top: 2px;
    margin-bottom: 12px;
}

.report-card-value {
    font-size: 30px;
    font-weight: 800;
    color: #16a34a;
    line-height: 1;
    direction: ltr;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.report-card-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-muted);
}

.report-card-bg {
    position: absolute;
    top: 50%;
    inset-inline-end: 24px;
    transform: translateY(-50%);
    font-size: 90px;
    color: rgba(22, 163, 74, .14);
    pointer-events: none;
    z-index: 1;
}

.report-card-ring {
    position: absolute;
    top: 50%;
    inset-inline-end: 28px;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    border: 9px solid #16a34a;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* النص يأخذ ~70% من عرض البطاقة ويتجنّب الزخرفة */
.report-card-body {
    position: relative;
    z-index: 2;
    max-width: 65%;
}

/* Bulk messaging cards */
.bulk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 700px) {
    .bulk-grid { grid-template-columns: 1fr; }
}

.bulk-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bulk-card-title {
    font-size: 13px;
    color: var(--c-muted);
    margin-bottom: 8px;
}

.bulk-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-text);
    direction: ltr;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.bulk-card-value--green { color: #16a34a; }
.bulk-card-value--red   { color: #dc2626; }

.bulk-card-unit {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-muted);
}

.bulk-card-icon {
    font-size: 26px;
    opacity: .85;
}

/* ════════════════════════════════════════
   ─────────── PUBLIC PAGES ──────────────
   ════════════════════════════════════════ */

.pub-nav {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border-soft);
    z-index: 100;
}

.pub-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.pub-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 16px;
    color: var(--c-text);
    text-decoration: none;
}

.pub-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pub-brand--small { font-size: 14px; }
.pub-brand--small .pub-brand-icon { width: 28px; height: 28px; font-size: 13px; }

.pub-nav-links {
    display: flex;
    gap: 22px;
}

.pub-nav-links a {
    color: var(--c-text-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    transition: color .15s;
}

.pub-nav-links a:hover, .pub-nav-links a.active { color: var(--c-primary); }

.pub-nav-cta { display: flex; gap: 8px; }

.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9px;
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all .15s;
    background: #fff;
}

.pub-btn--primary {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, .3);
}

.pub-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(22, 163, 74, .4); }

.pub-btn--ghost {
    background: #fff;
    color: var(--c-text-2);
    border-color: var(--c-border);
}

.pub-btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }

.pub-btn--lg { padding: 13px 26px; font-size: 14.5px; }

/* Hero */
.hero {
    padding: 60px 20px 50px;
    background:
        radial-gradient(ellipse at top right, rgba(22, 163, 74, .08), transparent 50%),
        radial-gradient(ellipse at top left, rgba(99, 102, 241, .08), transparent 50%),
        #fff;
}

.hero-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 50px;
    align-items: center;
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-anim { order: -1; max-width: 320px; margin: 0 auto; }
}

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #d1fae5;
    color: #16a34a;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 14px;
}

.hero-content h1 {
    font-size: 42px;
    line-height: 1.3;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--c-text);
}

@media (max-width: 600px) { .hero-content h1 { font-size: 30px; } }

.hero-grad {
    background: linear-gradient(135deg, #16a34a, #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}

.hero-content p {
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--c-text-2);
    margin: 0 0 24px;
    max-width: 540px;
}

.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

.hero-trust {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 600;
}

.hero-trust div { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust i { color: #16a34a; }

/* Phone animation */
.hero-anim { position: relative; }

.phone-frame {
    background: #efeae3;
    border-radius: 22px;
    padding: 16px 12px 12px;
    width: 320px;
    height: 460px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
    border: 8px solid #1f2937;
    overflow: hidden;
    position: relative;
}

.phone-top {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #128c7e;
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px 8px 0 0;
    margin: -8px -8px 8px;
}

.phone-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.phone-top strong { display: block; font-size: 13.5px; }
.phone-top small { display: block; font-size: 11px; opacity: .85; }

.phone-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phone-body::-webkit-scrollbar { display: none; }

.bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    animation: bubbleIn .3s ease;
    word-wrap: break-word;
}

.bubble--in {
    background: #fff;
    align-self: flex-start;
    border-radius: 12px 12px 12px 4px;
}

.bubble--out {
    background: #d9fdd3;
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
}

@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.phone-input {
    background: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 12.5px;
}

.phone-input-ph { flex: 1; }

.hero-floating {
    position: absolute;
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: floatY 3s ease-in-out infinite;
}

.hf-1 {
    top: 30px;
    inset-inline-start: -30px;
    color: #d97706;
    animation-delay: 0s;
}
.hf-1 i { color: #f59e0b; }

.hf-2 {
    bottom: 50px;
    inset-inline-end: -10px;
    color: #16a34a;
    animation-delay: 1.5s;
}
.hf-2 i { color: #16a34a; }

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Sections */
.pub-section {
    padding: 60px 20px;
    background: #fff;
}

.pub-section--alt { background: #f9fafb; }
.pub-section--narrow { padding-top: 40px; }

.pub-container { max-width: 1200px; margin: 0 auto; }

.pub-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}

.pub-section-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.pub-section-head h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--c-text);
    margin: 0 0 10px;
    line-height: 1.3;
}

.pub-section-head p { color: var(--c-muted); font-size: 15px; line-height: 1.7; margin: 0; }

/* Features grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: 14px;
    padding: 22px;
    transition: all .2s;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .06);
    border-color: transparent;
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    margin-bottom: 14px;
}

.feature-card h3 { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; }
.feature-card p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.7; }

/* Steps */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 700px) { .steps-grid { grid-template-columns: 1fr; } }

.step-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    text-align: center;
    border: 1px solid var(--c-border-soft);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 14px;
}

.step-card h3 { margin: 0 0 6px; font-size: 17px; }
.step-card p { margin: 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.6; }

/* Plans grid */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.plan-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--c-border-soft);
    border-radius: 16px;
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    transition: all .2s;
}

.plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }

.plan-card--popular {
    border-color: #16a34a;
    box-shadow: 0 12px 30px rgba(22, 163, 74, .12);
}

.plan-card--current { border-color: #16a34a; }

.plan-badge {
    position: absolute;
    top: -10px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: #16a34a;
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.plan-icon { font-size: 28px; margin-bottom: 12px; }
.plan-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.plan-desc { font-size: 12.5px; color: var(--c-muted); margin: 0 0 14px; }

.plan-price { margin-bottom: 14px; }
.plan-amount { font-size: 32px; font-weight: 800; color: var(--c-text); }
.plan-cur { font-size: 13px; color: var(--c-muted); margin-inline-start: 4px; }

.plan-features {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    flex: 1;
}

.plan-features li {
    padding: 6px 0;
    font-size: 13px;
    color: var(--c-text-2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-features li i { color: #16a34a; font-size: 11px; flex-shrink: 0; }
.plan-features li.off { color: var(--c-muted-2); text-decoration: line-through; }
.plan-features li.off i { color: var(--c-muted-2); }

/* CTA band */
.cta-band {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    padding: 60px 20px;
    text-align: center;
}

.cta-band h2 { color: #fff; font-size: 30px; margin: 0 0 8px; font-weight: 800; }
.cta-band p { color: rgba(255, 255, 255, .9); font-size: 15px; margin: 0 0 22px; }
.cta-band .pub-btn--primary {
    background: #fff;
    color: #16a34a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

/* Footer */
.pub-foot { background: #1f2937; color: #9ca3af; padding: 50px 20px 24px; }

.pub-foot-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

@media (max-width: 700px) { .pub-foot-inner { grid-template-columns: 1fr; gap: 24px; } }

.pub-foot-col h4 { color: #fff; font-size: 14.5px; margin: 0 0 12px; }
.pub-foot-col p { font-size: 13px; line-height: 1.7; margin: 8px 0 0; }
.pub-foot-col a {
    display: block;
    color: #9ca3af;
    text-decoration: none;
    padding: 4px 0;
    font-size: 13.5px;
}
.pub-foot-col a:hover { color: #fff; }

.pub-foot-bottom {
    max-width: 1200px;
    margin: 30px auto 0;
    padding-top: 20px;
    border-top: 1px solid #374151;
    text-align: center;
    font-size: 12.5px;
}

.pub-foot-bottom a { color: #d1d5db; text-decoration: none; }

/* Pricing FAQ */
.pricing-faq {
    max-width: 720px;
    margin: 60px auto 0;
}
.pricing-faq h3 { font-size: 22px; text-align: center; margin: 0 0 22px; }
.pricing-faq details {
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
}
.pricing-faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--c-text);
    font-size: 14px;
}
.pricing-faq p { margin: 10px 0 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.7; }

/* Signup */
.signup-wrap {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 32px;
}
.signup-head { text-align: center; margin-bottom: 24px; }
.signup-head h1 { font-size: 26px; margin: 0 0 6px; }
.signup-head p { color: var(--c-muted); margin: 0; font-size: 14px; }

.signup-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) { .signup-row { grid-template-columns: 1fr; } }

.signup-form { display: flex; flex-direction: column; gap: 16px; }

.signup-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.signup-plan {
    border: 2px solid var(--c-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.signup-plan input { display: none; }
.signup-plan:hover { border-color: #16a34a; }
.signup-plan.is-selected { border-color: #16a34a; background: #f0fdf4; }
.signup-plan-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.signup-plan strong { font-size: 13.5px; color: var(--c-text); }
.signup-plan-price { font-size: 13px; color: #16a34a; font-weight: 700; }
.signup-plan small { font-size: 11.5px; color: var(--c-muted); }

.signup-terms { font-size: 12.5px; color: var(--c-muted); }
.signup-terms label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.signup-terms a { color: var(--c-primary); }

.signup-foot { text-align: center; font-size: 13px; color: var(--c-muted); }
.signup-foot a { color: var(--c-primary); font-weight: 700; }

/* Success */
.success-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px;
    border: 1px solid var(--c-border-soft);
}
.success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #d1fae5;
    color: #16a34a;
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.success-card h1 { font-size: 24px; margin: 0 0 8px; }
.success-info {
    background: #fafbfc;
    border-radius: 10px;
    padding: 14px;
    margin: 18px 0;
}
.success-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}
.success-note { color: var(--c-muted); font-size: 13.5px; line-height: 1.7; }

/* Progress bar */
.progress {
    width: 100%;
    height: 9px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width .3s, background .3s;
}

/* w-100 + table tweak for portal billing */
.w-100 { width: 100%; }
.current-plan-card { border-width: 2px !important; border-radius: 14px; }

/* Quota exhausted (block) */
.quota-exhausted {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fecaca;
    border-radius: 14px;
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 18px;
}

.quota-exhausted-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.quota-exhausted h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #991b1b;
}

.quota-exhausted p {
    margin: 4px 0;
    color: var(--c-text-2);
    font-size: 14px;
}

.quota-exhausted strong { color: #991b1b; }

/* ─────────────── Custom confirm modal ─────────────── */
.cmd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 10000;
    direction: rtl;
}

.cmd-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cmd-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25), 0 8px 20px rgba(0, 0, 0, .12);
    width: 100%;
    max-width: 420px;
    padding: 28px 26px 22px;
    text-align: center;
    transform: translateY(20px) scale(.94);
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
    font-family: 'Cairo', sans-serif;
}

.cmd-overlay.is-open .cmd-card { transform: translateY(0) scale(1); }

.cmd-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 14px;
    background: #fee2e2;
    color: #dc2626;
}

.cmd-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: var(--c-text);
}

.cmd-card p {
    margin: 0 0 22px;
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.7;
}

.cmd-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.cmd-btn {
    flex: 1;
    max-width: 160px;
    padding: 11px 18px;
    border-radius: 9px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
}

.cmd-btn:focus { outline: 2px solid rgba(99, 102, 241, .35); outline-offset: 2px; }

.cmd-btn--ghost {
    background: #fff;
    color: var(--c-text-2);
    border-color: var(--c-border);
}

.cmd-btn--ghost:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.cmd-btn--primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
}

.cmd-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, .4);
}

.cmd-btn--danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .3);
}

.cmd-btn--danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, .4);
}

.cmd-btn--warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
}

.cmd-btn--warning:hover { transform: translateY(-1px); }

/* ════════════════════════════════════════
   ─────────── ERROR PAGES ───────────────
   ════════════════════════════════════════ */
.err-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    font-family: 'Cairo', sans-serif;
    background:
        radial-gradient(ellipse at top right, rgba(99, 102, 241, .08), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(236, 72, 153, .06), transparent 50%),
        #fff;
    position: relative;
    overflow: hidden;
}

.err-card {
    max-width: 540px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.err-code-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

.err-code {
    font-size: 140px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -3px;
}

.err-icon {
    position: absolute;
    bottom: -8px;
    inset-inline-end: -28px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    border: 5px solid #fff;
}

.err-card h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--c-text);
}

.err-card p {
    font-size: 15px;
    color: var(--c-muted);
    line-height: 1.85;
    margin: 0 0 28px;
}

.err-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.err-links {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 22px;
    border-top: 1px dashed var(--c-border-soft);
}

.err-links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color .15s;
}

.err-links a:hover { color: var(--c-primary); }

/* أشكال زخرفية في الخلفية */
.err-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .4;
    pointer-events: none;
    z-index: 1;
}

.err-bg-shape--1 {
    width: 320px;
    height: 320px;
    background: #c7d2fe;
    top: -100px;
    inset-inline-end: -100px;
}

.err-bg-shape--2 {
    width: 240px;
    height: 240px;
    background: #fbcfe8;
    bottom: -60px;
    inset-inline-start: -60px;
}

.err-bg-shape--3 {
    width: 180px;
    height: 180px;
    background: #d1fae5;
    top: 50%;
    inset-inline-start: 10%;
    opacity: .3;
}

/* ════════════════════════════════════════
   ─────────── AUTH SPLIT LAYOUT ────────
   ════════════════════════════════════════ */
.auth-split {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}

@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-visual-side { display: none; }
}

/* ── الفورم (يمين) ── */
.auth-form-side {
    background: #fff;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all .15s;
}

.auth-back:hover { background: #f5f3ff; color: var(--c-primary); }

.auth-form-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    padding: 30px 0;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
    color: var(--c-text);
    text-decoration: none;
    margin-bottom: 30px;
}

.auth-brand-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.auth-form-head h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--c-text);
}

.auth-form-head p {
    color: var(--c-muted);
    font-size: 14px;
    margin: 0 0 24px;
}

.auth-form .form-group { margin-bottom: 14px; }

.input-with-icon {
    position: relative;
}

.input-with-icon i {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-muted-2);
    font-size: 14px;
    pointer-events: none;
}

.input-with-icon input {
    width: 100%;
    padding: 12px 14px;
    padding-inline-start: 40px;
    border: 1.5px solid var(--c-border);
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: var(--c-text);
    transition: all .15s;
}

.input-with-icon input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
}

.input-with-icon input:focus + i,
.input-with-icon:focus-within i { color: var(--c-primary); }

.auth-form .pub-btn { margin-top: 6px; }

.auth-link-small {
    color: var(--c-primary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.auth-link-small:hover { text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--c-muted-2);
    font-size: 12px;
    font-weight: 600;
}

.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border);
}

.auth-foot {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--c-border-soft);
    text-align: center;
    font-size: 12px;
    color: var(--c-muted);
}

.auth-foot a {
    color: var(--c-muted);
    text-decoration: none;
    font-weight: 600;
    margin: 0 6px;
}

.auth-foot a:hover { color: var(--c-primary); }

/* ── الزخرفة (شمال) ── */
.auth-visual-side {
    background: linear-gradient(135deg, #064e3b 0%, #16a34a 50%, #4ade80 100%);
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.auth-visual-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .1), transparent 40%);
    pointer-events: none;
}

.auth-visual-content {
    position: relative;
    z-index: 2;
    max-width: 540px;
    width: 100%;
}

.auth-visual-title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    margin: 0 0 12px;
}

.auth-visual-title .grad {
    background: linear-gradient(90deg, #fef08a, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-visual-desc {
    color: rgba(255, 255, 255, .85);
    font-size: 14.5px;
    line-height: 1.85;
    margin: 0 0 26px;
}

/* ── محاكي WhatsApp ── */
.wa-mock {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    display: grid;
    grid-template-columns: 200px 1fr;
    height: 380px;
    border: 6px solid #1f2937;
    position: relative;
}

.wa-mock-side {
    background: #f0f2f5;
    overflow-y: auto;
    border-inline-end: 1px solid #e5e7eb;
}

.wa-mock-side::-webkit-scrollbar { display: none; }

.wa-mock-search {
    background: #fff;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-muted-2);
    font-size: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.wa-chat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background .15s;
}

.wa-chat:hover { background: #f9fafb; }

.wa-chat--active {
    background: #fff;
    border-inline-start: 3px solid #16a34a;
}

.wa-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.wa-chat-body {
    flex: 1;
    min-width: 0;
}

.wa-chat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--c-text-2);
    font-size: 11.5px;
    line-height: 1.4;
}

.wa-chat-row strong {
    font-size: 12.5px;
    color: var(--c-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-row small { font-size: 10px; color: var(--c-muted-2); flex-shrink: 0; }

.wa-chat-row span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-chat-badge {
    background: #16a34a;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 16px;
    text-align: center;
}

/* الجزء الأيسر: المحادثة */
.wa-mock-chat {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20l20-20 20 20-20 20z' fill='%23e5ddd5' opacity='.4'/%3E%3C/svg%3E"),
        #efeae3;
    display: flex;
    flex-direction: column;
}

.wa-mock-chathead {
    background: #128c7e;
    color: #fff;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.wa-mock-chathead strong { display: block; font-size: 12.5px; }
.wa-mock-chathead small { display: block; font-size: 10.5px; opacity: .85; }

.wa-mock-body {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.wa-mock-body::-webkit-scrollbar { display: none; }

/* (تستخدم نفس .bubble و .bubble--in/--out من الـ landing) */
.wa-bubble-typing {
    padding: 10px 14px !important;
    display: inline-flex !important;
    gap: 4px;
    align-self: flex-end;
    width: 50px;
}

.wa-bubble-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    opacity: .5;
    animation: dotPulse 1.2s infinite;
}

.wa-bubble-typing span:nth-child(2) { animation-delay: .2s; }
.wa-bubble-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes dotPulse {
    0%, 60%, 100% { opacity: .3; transform: scale(.9); }
    30% { opacity: 1; transform: scale(1.2); }
}

/* ── إحصائيات تطفو على الجانب ── */
.auth-stat {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
    color: var(--c-text);
    z-index: 3;
    animation: floatY 3.5s ease-in-out infinite;
}

.auth-stat i {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #d1fae5;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.auth-stat-num {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
    direction: ltr;
}

.auth-stat small { font-size: 11px; color: var(--c-muted); }

.auth-stat--1 {
    top: 60px;
    inset-inline-end: 40px;
    animation-delay: 0s;
}

.auth-stat--2 {
    bottom: 80px;
    inset-inline-start: 40px;
    animation-delay: 1.5s;
}

.auth-stat--2 i { background: #dbeafe; color: #2563eb; }

/* alert in auth split */
.auth-form .auth-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ════════════════════════════════════════
   ─────────── TERMS PAGE ────────────────
   ════════════════════════════════════════ */
.terms-head {
    text-align: center;
    margin-bottom: 30px;
}

.terms-head h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--c-text);
    margin: 8px 0 6px;
}

.terms-head p {
    color: var(--c-muted);
    font-size: 14px;
    margin: 0;
}

.terms-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 36px 40px;
    line-height: 1.95;
    color: var(--c-text-2);
    font-size: 14.5px;
}

@media (max-width: 600px) {
    .terms-card { padding: 24px 22px; font-size: 14px; }
}

.terms-card p {
    margin: 0 0 10px;
    line-height: 1.95;
}

.terms-main-heading {
    font-size: 22px;
    font-weight: 800;
    color: var(--c-text);
    margin: 0 0 18px;
    text-align: center;
}

.terms-heading {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-primary);
    margin: 22px 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #ede9fe;
    display: inline-block;
}

.terms-card h2.terms-heading:first-child { margin-top: 0; }

.terms-item {
    background: #fafbfc;
    border-inline-start: 3px solid var(--c-primary);
    padding: 8px 14px;
    border-radius: 0 8px 8px 0;
    margin: 6px 0 !important;
    font-size: 14px;
}

.terms-cta {
    margin-top: 30px;
    padding: 28px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-radius: 14px;
    text-align: center;
    border: 1px solid #c7d2fe;
}

.terms-cta p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--c-text-2);
    font-weight: 600;
}

/* ════════════════════════════════════════
   ─────────── SUPPORT (PORTAL) ─────────
   ════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: all .15s;
}

.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.contact-card strong {
    display: block;
    font-size: 13px;
    color: var(--c-text);
    margin-bottom: 2px;
}

.contact-card span {
    font-size: 12.5px;
    color: var(--c-muted);
}

.support-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 800px) { .support-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-list { padding: 8px; }

.faq-item {
    background: #fafbfc;
    border: 1px solid var(--c-border-soft);
    border-radius: 10px;
    padding: 0;
    margin-bottom: 8px;
    overflow: hidden;
}

.faq-item[open] { background: #fff; border-color: #c7d2fe; }

.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-text);
    padding: 14px 18px;
    list-style: none;
    position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before {
    content: '+';
    color: var(--c-primary);
    font-size: 18px;
    font-weight: 800;
    margin-inline-end: 10px;
    display: inline-block;
    transition: transform .2s;
}

.faq-item[open] summary::before { content: '−'; }

.faq-item p {
    margin: 0;
    padding: 0 18px 16px 38px;
    color: var(--c-text-2);
    font-size: 13.5px;
    line-height: 1.85;
}

/* ════════════════════════════════════════
   ─────────── TICKETS / CONVERSATION ───
   ════════════════════════════════════════ */
.conv-list {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.conv-item {
    display: flex;
    gap: 10px;
    max-width: 85%;
}

.conv-item--me { align-self: flex-start; }
.conv-item--support { align-self: flex-end; flex-direction: row-reverse; }

.conv-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 14px;
}

.conv-item--support .conv-avatar { background: linear-gradient(135deg, #16a34a, #128c7e); }

.conv-bubble {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 10px 14px;
    border: 1px solid var(--c-border-soft);
}

.conv-item--support .conv-bubble {
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.conv-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: 12px;
}

.conv-meta strong { color: var(--c-text); }
.conv-meta small { color: var(--c-muted-2); font-size: 10.5px; }

.conv-body {
    color: var(--c-text-2);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

.conv-reply {
    padding: 16px 18px;
    border-top: 1px solid var(--c-border-soft);
    background: #fafbfc;
}

.conv-reply textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
}

.conv-reply textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

/* status select */
.status-select {
    padding: 6px 12px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    cursor: pointer;
    background: #fff;
}

/* Filter tabs (admin tickets) */
.filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 6px;
    margin-bottom: 14px;
}

.filter-tab {
    padding: 6px 14px;
    border-radius: 7px;
    color: var(--c-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all .15s;
}

.filter-tab:hover { background: #f3f4f6; color: var(--c-text); }
.filter-tab.is-active { background: #ede9fe; color: var(--c-primary); }

/* ════════════════════════════════════════
   ─────────── NOTIFICATIONS ──────────────
   ════════════════════════════════════════ */
.notif-list { padding: 4px; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: background .12s;
    border-bottom: 1px solid var(--c-border-soft);
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #fafbfc; }

.notif-item.is-unread { background: #f5f3ff; }
.notif-item.is-unread:hover { background: #ede9fe; }

.notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ede9fe;
    color: #6d28d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.notif-body { flex: 1; min-width: 0; }
.notif-body strong { font-size: 13.5px; color: var(--c-text); display: block; margin-bottom: 2px; }
.notif-body p { margin: 0 0 4px; color: var(--c-muted); font-size: 12.5px; line-height: 1.6; }
.notif-body small { font-size: 11px; color: var(--c-muted-2); }

.notif-dot {
    width: 8px;
    height: 8px;
    background: #6366f1;
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════
   ─────── ACCEPT TERMS MODAL PAGE ───────
   ════════════════════════════════════════ */
.terms-modal-body {
    margin: 0;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    min-height: 100vh;
    font-family: 'Cairo', sans-serif;
}

.terms-modal-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
}

.terms-modal-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(99, 102, 241, .15);
    width: 100%;
    max-width: 720px;
    overflow: hidden;
}

.terms-modal-head {
    padding: 30px 30px 20px;
    text-align: center;
    border-bottom: 1px solid var(--c-border-soft);
}

.terms-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #ede9fe;
    color: #6d28d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 14px;
}

.terms-modal-head h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.terms-modal-head p { margin: 0; color: var(--c-muted); font-size: 14px; }

.terms-modal-content {
    max-height: 50vh;
    overflow-y: auto;
    padding: 24px 30px;
    line-height: 1.85;
    color: var(--c-text-2);
    font-size: 13.5px;
}

.terms-modal-content h3 {
    color: var(--c-primary);
    font-size: 15px;
    font-weight: 800;
    margin: 18px 0 6px;
}

.terms-modal-content h3:first-child { margin-top: 0; }
.terms-modal-content p { margin: 4px 0; }

.terms-modal-foot {
    padding: 22px 30px;
    background: #fafbfc;
    border-top: 1px solid var(--c-border-soft);
}

.terms-modal-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    cursor: pointer;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--c-text-2);
}

.terms-modal-check input { margin-top: 4px; }

.terms-modal-decline {
    display: block;
    text-align: center;
    margin-top: 12px;
    color: var(--c-muted);
    font-size: 12.5px;
    text-decoration: none;
}

.terms-modal-decline:hover { color: #dc2626; text-decoration: underline; }

/* ════════════════════════════════════════
   ─────── FAQ editor (settings) ────────
   ════════════════════════════════════════ */
.faq-row {
    background: #fafbfc;
    border: 1px solid var(--c-border-soft);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-row input,
.faq-row textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--c-border);
    border-radius: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
}

.faq-row input { font-weight: 700; }
.faq-row textarea { resize: vertical; }

.faq-row-del {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 24px;
    height: 24px;
    border: 0;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.faq-row-del:hover { background: #fecaca; }

/* ════════════════════════════════════════
   ─────── BELL POPUP ─────────────────────
   ════════════════════════════════════════ */
.bell-wrap {
    position: relative;
}

.bell-wrap .ds-bell {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.bell-popup {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline-end: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18), 0 6px 16px rgba(0, 0, 0, .08);
    border: 1px solid var(--c-border);
    display: none !important;
    overflow: hidden;
    z-index: 9999;
    direction: rtl;
    animation: bellIn .2s ease;
}

.bell-popup.is-open { display: block !important; }

@keyframes bellIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bell-popup-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--c-border-soft);
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bell-popup-head strong {
    font-size: 14px;
    color: var(--c-text);
    font-weight: 800;
}

.bell-popup-head i { color: var(--c-primary); margin-inline-end: 5px; }

.bell-popup-body {
    max-height: 360px;
    overflow-y: auto;
}

.bell-popup-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--c-muted);
}

.bell-popup-empty i { font-size: 32px; color: var(--c-muted-2); margin-bottom: 8px; }
.bell-popup-empty p { margin: 0; font-size: 13px; }

.bell-popup-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 16px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--c-border-soft);
    transition: background .12s;
}

.bell-popup-item:last-child { border-bottom: none; }
.bell-popup-item:hover { background: #fafbfc; }

.bell-popup-item.is-unread { background: #f5f3ff; }
.bell-popup-item.is-unread:hover { background: #ede9fe; }

.bell-popup-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ede9fe;
    color: #6d28d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.bell-popup-text {
    flex: 1;
    min-width: 0;
}

.bell-popup-text strong {
    display: block;
    font-size: 12.5px;
    color: var(--c-text);
    font-weight: 700;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bell-popup-text small {
    display: block;
    font-size: 11.5px;
    color: var(--c-muted);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 3px;
}

.bell-popup-text span {
    font-size: 10.5px;
    color: var(--c-muted-2);
}

.bell-popup-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--c-border-soft);
    background: #fafbfc;
    color: var(--c-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background .12s;
}

.bell-popup-foot:hover { background: #ede9fe; }

/* ════════════════════════════════════════
   ─────── CONNECT ACTIONS (PORTAL) ──────
   ════════════════════════════════════════ */
.connect-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* ════════════════════════════════════════
   ─────── EMBED PAGE ─────────────────────
   ════════════════════════════════════════ */
.embed-grid {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    .embed-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   ─────── BRAND with Arabic tagline ─────
   ════════════════════════════════════════ */
.pub-brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}
.pub-brand-text strong { font-weight: 800; font-size: 16px; color: var(--c-text); }
.pub-brand-text small { font-size: 10.5px; color: var(--c-muted); font-weight: 600; margin-top: 1px; }
.auth-brand .pub-brand-text strong { font-size: 18px; }
.auth-brand .pub-brand-text small { font-size: 11px; color: var(--c-muted); }

/* ════════════════════════════════════════
   ─────── SECTORS GRID (landing) ────────
   ════════════════════════════════════════ */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 32px;
}

.sector-card {
    background: #fff;
    border: 1px solid var(--c-border-soft);
    border-radius: 16px;
    padding: 24px;
    transition: all .2s;
    display: flex;
    flex-direction: column;
}

.sector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.sector-card--featured {
    border-color: #16a34a;
    background: linear-gradient(135deg, #fff, #f0fdf4);
    box-shadow: 0 10px 30px rgba(22, 163, 74, .12);
}

.sector-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.sector-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text);
}

.sector-card > p {
    color: var(--c-muted);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0 0 14px;
}

.sector-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    flex: 1;
}

.sector-features li {
    padding: 5px 0;
    font-size: 13px;
    color: var(--c-text-2);
    display: flex;
    align-items: center;
    gap: 7px;
}

.sector-features li i { color: #16a34a; font-size: 11px; }

.sector-card .pub-btn { align-self: flex-start; }

/* Invoice demo */
.invoice-demo {
    margin-top: 20px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: center;
}

@media (max-width: 800px) {
    .invoice-demo { grid-template-columns: 1fr; }
}

.invoice-demo-text h3 {
    font-size: 22px;
    font-weight: 800;
    margin: 8px 0 10px;
    color: var(--c-text);
}

.invoice-demo-text p {
    color: var(--c-muted);
    line-height: 1.85;
    font-size: 14px;
    margin: 0 0 18px;
}

.invoice-demo-mock {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20l20-20 20 20-20 20z' fill='%23e5ddd5' opacity='.4'/%3E%3C/svg%3E"),
        #efeae3;
    padding: 24px;
    border-radius: 14px;
    border: 6px solid #1f2937;
}

.invoice-demo-mock .bubble--out {
    line-height: 1.9;
    font-size: 13px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.stat-card--purple .stat-icon { background: #ede9fe; color: #7c3aed; }
.stat-card--green  .stat-icon { background: #dcfce7; color: #16a34a; }
.stat-card--orange .stat-icon { background: #fef3c7; color: #d97706; }
.stat-card--red    .stat-icon { background: #fee2e2; color: #dc2626; }
.stat-card--blue   .stat-icon { background: #dbeafe; color: #2563eb; }

.stat-value { font-size: 22px; font-weight: 800; color: var(--c-text); line-height: 1; }
.stat-label { font-size: 12.5px; color: var(--c-muted); margin-top: 4px; }
.stat-cur { font-size: 11px; color: var(--c-muted); font-weight: 600; margin-inline-start: 4px; }

/* ─────────────── Tables ─────────────── */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.table thead th {
    background: #fafbfc;
    color: var(--c-muted);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--c-border);
    text-align: start;
}

.table tbody td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fafbfc; }

.cell-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #ede9fe;
    color: #7c3aed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    flex-shrink: 0;
}

.cell-avatar--placeholder {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

/* ─────────────── Badges ─────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge--green  { background: #dcfce7; color: #16a34a; }
.badge--orange { background: #fef3c7; color: #d97706; }
.badge--red    { background: #fee2e2; color: #dc2626; }

/* ─────────────── Show page ─────────────── */
.show-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px;
}

@media (max-width: 900px) {
    .show-grid { grid-template-columns: 1fr; }
}

.show-main { padding: 28px; min-height: 360px; display: flex; align-items: center; justify-content: center; }
.show-side { padding: 20px; }

.show-main-loader { text-align: center; color: var(--c-muted); }

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.qr-wrap { text-align: center; max-width: 360px; }
.qr-wrap h3 { font-size: 15px; margin: 0 0 14px; color: var(--c-text); }

.qr-steps {
    text-align: start;
    margin: 0 0 18px;
    padding: 14px 30px 14px 14px;
    background: #f5f3ff;
    border-radius: 10px;
    color: var(--c-text-2);
    font-size: 13px;
    line-height: 1.9;
}

.qr-img {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.qr-img img { display: block; width: 260px; height: 260px; }

.qr-hint { font-size: 12px; color: var(--c-muted); margin-top: 14px; }

.connected {
    text-align: center;
    padding: 12px;
}

.connected-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .25);
}

.connected-avatar img { width: 100%; height: 100%; object-fit: cover; }

.connected-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

.connected-phone { font-size: 22px; font-weight: 800; color: var(--c-text); direction: ltr; }
.connected-hint { margin-top: 10px; color: var(--c-muted); font-size: 13px; }

/* Side info rows */
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--c-border-soft);
    font-size: 13px;
}

.info-row:last-of-type { border-bottom: none; }
.info-label { color: var(--c-muted); }
.info-value { color: var(--c-text); font-weight: 600; }

.show-actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.show-actions form { width: 100%; }

/* ─────────────── WhatsApp Web Accounts (list) ─────────────── */
.wa-card { padding: 0; }

.wa-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-border-soft);
    flex-wrap: wrap;
}

.wa-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-card-title h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text);
    letter-spacing: -.2px;
}

.wa-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d1fae5;
    color: #16a34a;
    border-radius: 50%;
    font-size: 15px;
}

.wa-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-search {
    position: relative;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
}

.wa-search i {
    color: #9ca3af;
    font-size: 13px;
    margin-inline-end: 6px;
}

.wa-search input {
    background: transparent;
    border: 0;
    outline: 0;
    padding: 8px 4px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: var(--c-text);
    width: 220px;
}

.wa-btn-add,
.wa-btn-bulk-del {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .15s;
    text-decoration: none;
}

.wa-btn-add {
    background: #d1fae5;
    color: #16a34a;
}

.wa-btn-add:hover { background: #a7f3d0; transform: translateY(-1px); }

.wa-btn-bulk-del {
    background: #fee2e2;
    color: #dc2626;
}

.wa-btn-bulk-del:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.wa-btn-bulk-del:not(:disabled):hover { background: #fecaca; }

/* Table */
.wa-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Cairo', sans-serif;
}

.wa-table thead th {
    background: #fafbfc;
    color: #9ca3af;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 13px 14px;
    text-align: start;
    border-bottom: 1px solid var(--c-border-soft);
}

.wa-table tbody td {
    padding: 14px;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: middle;
    font-size: 13px;
    color: var(--c-text-2);
}

.wa-table tbody tr:last-child td { border-bottom: none; }
.wa-table tbody tr:hover { background: #fafbfc; }

.wa-col-check { width: 40px; }
.wa-col-check input,
.wa-row-check { cursor: pointer; }

/* Account cell */
.wa-account {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.wa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.wa-avatar--ph {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
}

.wa-account-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.wa-account-meta strong {
    font-size: 13.5px;
    color: var(--c-text);
    font-weight: 700;
}

.wa-account-phone {
    font-size: 12px;
    color: var(--c-muted);
    direction: ltr;
}

/* Mono fields with copy */
.wa-mono {
    font-family: 'Courier New', monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.wa-mono--green { color: #059669; }

.wa-copy {
    margin-inline-start: 6px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 0;
    background: #f3f4f6;
    color: #9ca3af;
    cursor: pointer;
    font-size: 11px;
    transition: all .15s;
}

.wa-copy:hover { background: #e5e7eb; color: #374151; }

.wa-copy--ok { background: #d1fae5 !important; color: #16a34a !important; }

/* Platform */
.wa-platform { text-align: center; font-size: 18px; }

/* Date */
.wa-date {
    color: var(--c-muted);
    font-size: 12.5px;
    direction: ltr;
    white-space: nowrap;
}

/* Status pill */
.wa-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
}

.wa-status--ok { background: #d1fae5; color: #16a34a; }
.wa-status--pending { background: #fef3c7; color: #d97706; }
.wa-status--off { background: #fee2e2; color: #dc2626; }

/* Actions */
.wa-actions {
    text-align: end;
    white-space: nowrap;
}

.wa-actions > * + * { margin-inline-start: 6px; }

.wa-btn-logout,
.wa-btn-connect {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}

.wa-btn-logout {
    background: #fee2e2;
    color: #dc2626;
}

.wa-btn-logout:hover { background: #fecaca; }

.wa-btn-connect {
    background: #ede9fe;
    color: #6d28d9;
}

.wa-btn-connect:hover { background: #ddd6fe; }

.wa-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .15s;
}

.wa-icon-btn--blue {
    background: #dbeafe;
    color: #2563eb;
}

.wa-icon-btn--blue:hover { background: #bfdbfe; }

.wa-icon-btn--red {
    background: #fee2e2;
    color: #dc2626;
}

.wa-icon-btn--red:hover { background: #fecaca; }

.wa-icon-btn--green {
    background: #d1fae5;
    color: #16a34a;
}

.wa-icon-btn--green:hover { background: #a7f3d0; }

.wa-icon-btn--cyan {
    background: #cffafe;
    color: #0891b2;
}

.wa-icon-btn--cyan:hover { background: #a5f3fc; }

/* عدّاد على أي wa-icon-btn (للرسائل وغيرها) */
.wa-icon-btn { position: relative; }

.wa-icon-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #0891b2;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Cairo', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}

/* Remaining days badge */
.wa-rem {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

.wa-rem--green  { background: #d1fae5; color: #16a34a; }
.wa-rem--orange { background: #fef3c7; color: #d97706; }
.wa-rem--red    { background: #fee2e2; color: #dc2626; }

/* Amount cell */
.wa-amount { white-space: nowrap; }
.wa-amount-val { font-weight: 700; color: var(--c-text); font-size: 13px; }
.wa-amount-cur { font-size: 11px; color: var(--c-muted); margin-inline-start: 3px; }

@media (max-width: 768px) {
    .wa-search input { width: 130px; }
    .wa-table { font-size: 12px; }
    .wa-account-meta strong { font-size: 12.5px; }
    .wa-mono { font-size: 11.5px; }
}

/* ─────────────── Instance view (show page) ─────────────── */
.page-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-muted);
    font-weight: 600;
}

.page-breadcrumb a { color: var(--c-primary); text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb i { font-size: 10px; color: var(--c-muted-2); }
.page-breadcrumb span { color: var(--c-text); }

/* === Top bar (status + creds) === */
.iv-bar {
    padding: 16px 20px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.iv-bar-account {
    display: flex;
    align-items: center;
    gap: 12px;
}

.iv-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    flex-shrink: 0;
}

.iv-avatar--ph {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
}

.iv-account-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.iv-account-meta strong {
    font-size: 14.5px;
    color: var(--c-text);
    font-weight: 800;
}

.iv-phone {
    font-size: 12.5px;
    color: var(--c-muted);
    direction: ltr;
}

.iv-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Cairo', sans-serif;
}

.iv-status-pill i { font-size: 8px; }

.iv-status-pill[data-status="connected"] { background: #d1fae5; color: #16a34a; }
.iv-status-pill[data-status="pending"] { background: #fef3c7; color: #d97706; }
.iv-status-pill[data-status="disconnected"] { background: #fee2e2; color: #dc2626; }

.iv-bar-creds {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.iv-cred {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fafbfc;
    border: 1px solid var(--c-border-soft);
    border-radius: 8px;
    padding: 6px 11px;
}

.iv-cred-label {
    font-size: 10.5px;
    color: var(--c-muted-2);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.iv-cred-value { font-size: 12.5px; }

/* === Grid (main + side) === */
.iv-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 14px;
}

@media (max-width: 900px) {
    .iv-grid { grid-template-columns: 1fr; }
}

.iv-main {
    padding: 0;
    min-height: 360px;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.iv-loader,
.iv-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--c-muted);
    text-align: center;
}

.iv-placeholder i { font-size: 36px; margin-bottom: 14px; color: var(--c-muted-2); }
.iv-placeholder p { margin: 0; font-size: 14px; }

/* === QR view === */
.iv-qr {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
}

.iv-qr-head {
    text-align: center;
    margin-bottom: 22px;
}

.iv-qr-head h2 {
    margin: 8px 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--c-text);
}

.iv-qr-head p {
    margin: 0;
    font-size: 13px;
    color: var(--c-muted);
}

.iv-qr-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
}

@media (max-width: 700px) {
    .iv-qr-grid { grid-template-columns: 1fr; }
}

.iv-qr-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iv-qr-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: var(--c-text-2);
}

.iv-step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ede9fe;
    color: #6366f1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

.iv-qr-box {
    text-align: center;
}

.iv-qr-box img {
    width: 240px;
    height: 240px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
    display: block;
}

.iv-qr-hint {
    font-size: 11.5px;
    color: var(--c-muted);
    margin: 10px 0 0;
}

/* === Connected view === */
.iv-conn { flex: 1; }

.iv-conn-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border-bottom: 1px solid #a7f3d0;
}

.iv-conn-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(34, 197, 94, .25);
}

.iv-conn-avatar img { width: 100%; height: 100%; object-fit: cover; }

.iv-conn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #16a34a;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 4px;
    border: 1px solid #a7f3d0;
}

.iv-conn-phone {
    font-size: 19px;
    font-weight: 800;
    color: var(--c-text);
    direction: ltr;
}

/* === Send form === */
.iv-send { padding: 22px; }

.iv-send-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.iv-send-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--c-text);
}

.iv-send .form-group { margin-bottom: 14px; }

.iv-send textarea {
    resize: vertical;
    min-height: 90px;
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-btn);
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
}

.iv-send textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

.iv-hint {
    color: var(--c-muted);
    font-size: 11.5px;
    font-weight: 500;
    margin-inline-start: 4px;
}

.iv-send-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.iv-msg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
}

.iv-msg--ok { background: #d1fae5; color: #16a34a; }
.iv-msg--err { background: #fee2e2; color: #dc2626; }

/* === Side panel === */
.iv-side {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.iv-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-actions form { width: 100%; }

.iv-meta {
    border-top: 1px solid var(--c-border-soft);
    padding-top: 12px;
}