:root{
    --bg:#fbf6f7;
    --surface:#ffffff;
    --surface-2:#f4e9ec;
    --border:#ecd9df;
    --text:#241a1e;
    --text-muted:#7a6169;
    --accent:#c81e5c;
    --accent-2:#ff477e;
    --accent-soft:#fde3ec;
    --success:#1f8a5f;
    --success-soft:#e3f5ec;
    --warning:#9c6b12;
    --warning-soft:#fbf0dc;
    --danger:#c0392b;
    --danger-soft:#fdeceb;
    --shadow: 0 1px 2px rgba(36,26,30,.04), 0 8px 24px -12px rgba(36,26,30,.10);
    --radius: 16px;
    --topbar-h: 66px;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* يضمن إخفاء العناصر اللي تعتمد على خاصية hidden حتى لو عندها display معرّف بقاعدة CSS ثانية */
body{
    margin:0;
    font-family:"IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.65;
}
h1,h2,h3{ font-family:"El Messiri", Tahoma, sans-serif; text-wrap:balance; margin:0 0 6px; }

/* ---------------- impersonation bar ---------------- */
.impersonate-bar{
    background:repeating-linear-gradient(135deg, #ff7a00, #ff7a00 14px, #ff9a2e 14px, #ff9a2e 28px);
    color:#2b1400; text-align:center; padding:12px 14px; font-size:13.5px; font-weight:700;
    position:sticky; top:0; z-index:999; box-shadow:0 3px 14px rgba(255,122,0,.35);
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.impersonate-bar .imp-dot{
    width:9px; height:9px; border-radius:50%; background:#c0392b; flex-shrink:0;
    animation:imp-pulse 1.4s ease-in-out infinite;
}
@keyframes imp-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.3); } }
.impersonate-bar a{
    color:#fff; font-weight:800; margin-inline-start:6px; text-decoration:none; background:#2b1400;
    padding:6px 14px; border-radius:100px; font-size:12.5px;
}
.impersonate-bar a:hover{ background:#1a0c00; }
.layout.with-impersonate-bar{ min-height:calc(100vh - 46px - var(--topbar-h)); }

/* ---------------- شريط علوي عام ثابت (زي أي موقع/تطبيق احترافي) ---------------- */
.app-topbar{
    position:sticky; top:0; z-index:250; background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:0 2px 12px rgba(36,26,30,.05);
}
.app-topbar.with-impersonate-offset{ top:46px; }
.app-topbar-inner{
    height:var(--topbar-h); display:flex; align-items:center; padding:0 28px; max-width:1500px; margin:0 auto;
}
.app-topbar-brand{
    font-family:"El Messiri",sans-serif; font-size:18px; font-weight:700; color:var(--text);
    display:flex; align-items:center; gap:8px; flex-shrink:0;
}

/* ---------------- layout ---------------- */
.layout{ display:flex; min-height:calc(100vh - var(--topbar-h)); }
.sidebar{
    width:230px; background:#1c1319; color:#f3e6ea; padding:22px 0; flex-shrink:0;
}
.sidebar nav{ display:flex; flex-direction:column; }
.sidebar nav a{
    color:#cbb3bb; text-decoration:none; padding:11px 22px; font-size:14px;
    border-right:3px solid transparent; display:flex; align-items:center; gap:10px;
}
.sidebar nav a .ic{ font-size:15px; width:18px; text-align:center; }
.sidebar nav a:hover, .sidebar nav a.active{
    background:rgba(255,255,255,.06); color:#fff; border-right-color:var(--accent-2);
}
.sidebar nav a.logout{ margin-top:10px; color:#ff9eb5; }
.sidebar nav .nav-group{
    font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#8a747c; padding:16px 22px 6px;
}
.content{ flex:1; padding:32px 40px; max-width:1180px; }

.subtitle{ color:var(--text-muted); margin-bottom:24px; font-size:14px; }

/* ---------------- cards ---------------- */
.card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; box-shadow:var(--shadow); margin-bottom:20px;
}
.card h3{ font-size:16.5px; }

.grid-stats{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.stat-box{
    flex:1; min-width:180px; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
}
.stat-box .eyebrow{ font-size:11.5px; color:var(--text-muted); font-weight:600; letter-spacing:.03em; }
.stat-box .num{ font-family:"El Messiri",sans-serif; font-size:28px; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; margin-top:2px; }
.stat-box .label{ color:var(--text-muted); font-size:12.5px; margin-top:4px; }

/* ---------------- badges / chips ---------------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:100px; }
.badge-accent{ background:var(--accent-soft); color:var(--accent); }
.badge-success{ background:var(--success-soft); color:var(--success); }
.badge-warning{ background:var(--warning-soft); color:var(--warning); }
.badge-danger{ background:var(--danger-soft); color:var(--danger); }
.badge-muted{ background:var(--surface-2); color:var(--text-muted); }

/* ---------------- progress ---------------- */
.progress-track{ background:var(--surface-2); border-radius:100px; height:10px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius:100px; transition:width .3s ease; }
.progress-fill.warn{ background:linear-gradient(90deg, #c0392b, #e67e22); }

/* ---------------- bar chart ---------------- */
.chart-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.chart-stat{ flex:1; min-width:110px; background:var(--surface-2); border-radius:12px; padding:10px 14px; }
.chart-stat .cs-num{ font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); }
.chart-stat .cs-label{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

.bar-chart{ display:flex; align-items:flex-end; gap:3px; height:120px; padding-top:26px; }
.bar-chart .bar{ flex:1; background:var(--surface-2); border-radius:4px 4px 0 0; position:relative; min-height:2px; cursor:default; }
.bar-chart .bar.active{ background:linear-gradient(180deg, var(--accent-2), var(--accent)); }
.bar-chart .bar::after{
    content: attr(data-count);
    position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
    background:var(--dark, #1c1319); color:#fff; font-size:11px; font-weight:600; line-height:1;
    padding:4px 7px; border-radius:6px; white-space:nowrap; pointer-events:none;
    opacity:0; visibility:hidden; transition:opacity .12s ease, transform .12s ease; z-index:5;
}
.bar-chart .bar:hover::after,
.bar-chart .bar:focus-visible::after,
.bar-chart .bar:active::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.bar-chart-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-muted); margin-top:6px; }

/* ---------------- tables ---------------- */
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table th, table td{ padding:11px 8px; text-align:right; border-bottom:1px solid var(--border); }
table th{ color:var(--text-muted); font-weight:600; font-size:12px; }

/* ---------------- buttons ---------------- */
.btn{
    display:inline-block; background:var(--accent-2); color:#fff; border:none; padding:11px 20px;
    border-radius:10px; cursor:pointer; font-size:14px; text-decoration:none; font-family:inherit;
    font-weight:600; transition:.15s;
}
.btn:hover{ background:var(--accent); }
.btn-secondary{ background:var(--surface-2); color:var(--text); }
.btn-secondary:hover{ background:var(--border); }
.btn-danger{ background:#fff; color:var(--danger); border:1px solid var(--danger); }
.btn-sm{ padding:6px 13px; font-size:12.5px; border-radius:8px; }

/* ---------------- forms ---------------- */
label{ display:block; margin-bottom:6px; font-size:13.5px; color:var(--text); font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select{
    width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:10px;
    margin-bottom:16px; font-size:14px; font-family:inherit; background:var(--surface); color:var(--text);
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--accent-2); outline-offset:1px; }
.form-row{ display:flex; gap:14px; }
.form-row > div{ flex:1; }

.alert{ padding:13px 17px; border-radius:12px; margin-bottom:18px; font-size:13.5px; }
.alert-error{ background:var(--danger-soft); color:var(--danger); }
.alert-success{ background:var(--success-soft); color:var(--success); }

/* ---------------- auth pages ---------------- */
.auth-page{
    display:flex; align-items:center; justify-content:center; min-height:100vh;
    background:radial-gradient(circle at 30% 20%, #ffe1ec, #fbf6f7 60%);
    font-family:"IBM Plex Sans Arabic", Tahoma, sans-serif;
}
.auth-box{
    background:var(--surface); padding:38px; border-radius:20px; width:380px; max-width:92vw;
    box-shadow:0 20px 50px -20px rgba(36,26,30,.25); border:1px solid var(--border);
}
.auth-box h1{ text-align:center; margin-bottom:4px; font-family:"El Messiri",sans-serif; }
.auth-box .subtitle{ text-align:center; }
.brand-tagline{ text-align:center; color:var(--text-muted); font-size:13px; margin:0 0 16px; }

/* ---------------- code box + copy button ---------------- */
.code-box-wrap{ background:#1c1319; border-radius:12px; overflow:hidden; }
.code-box-toolbar{ display:flex; justify-content:flex-end; padding:10px 14px 0; }
.code-text{
    margin:0; background:transparent; color:#f3e6ea; padding:6px 20px 18px;
    font-family:"IBM Plex Mono", Consolas, monospace; font-size:12.5px; line-height:1.8; direction:ltr; text-align:left;
    overflow-x:auto; white-space:pre;
}
.copy-btn{
    background:rgba(255,255,255,.1); color:#f3e6ea; flex-shrink:0;
    border:1px solid rgba(255,255,255,.2); border-radius:8px; font-size:12px; padding:6px 14px;
    cursor:pointer; font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:600; transition:background .15s;
}
.copy-btn:hover{ background:rgba(255,255,255,.18); }

/* ---------------- pricing cards (نفس لغة تصميم بطاقات الأسعار بالصفحة الرئيسية) ---------------- */
.plans-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; }
.plan-card{
    background:var(--surface); border:1.5px solid var(--border); border-radius:18px;
    padding:26px; text-align:center; position:relative;
}
.plan-card.popular{ border-color:var(--accent-2); box-shadow:0 0 0 4px var(--accent-soft); }
.plan-card.current{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.plan-card .tag{
    position:absolute; top:-12px; left:50%; transform:translateX(-50%);
    color:#fff; font-size:11px; padding:4px 13px; border-radius:100px; font-weight:700;
}
.plan-card.popular .tag{ background:var(--accent-2); }
.plan-card.current .tag{ background:var(--accent); }
.plan-card .plan-name{ font-family:"El Messiri",sans-serif; font-weight:700; font-size:16px; margin-bottom:10px; }
.plan-card .plan-price{ font-size:30px; font-weight:700; color:var(--accent); font-family:"El Messiri",sans-serif; }
.plan-card .plan-price small{ font-size:12px; color:var(--text-muted); font-weight:500; }
.plan-card .plan-limit{ color:var(--text-muted); font-size:13px; margin:10px 0 18px; }

/* ---------------- مقدمة صفحة الباقات (بنفس أسلوب عنوان الأقسام بالصفحة الرئيسية) ---------------- */
.plans-intro{ text-align:center; max-width:60ch; margin:0 auto 28px; }
.plans-intro .badge{ margin-bottom:14px; }
.plans-intro h1{ font-size:26px; margin-bottom:10px; }
.plans-intro p{ color:var(--text-muted); font-size:14.5px; margin:0; }

/* ---------------- الشريط العلوي وقائمة الحساب ---------------- */
.topbar-spacer{ flex:1; }
.account-menu{ position:relative; }
.account-trigger{
    display:flex; align-items:center; gap:9px; background:transparent; border:1px solid transparent;
    border-radius:100px; padding:5px 14px 5px 6px; cursor:pointer; font-family:inherit;
    transition:background .15s, border-color .15s;
}
.account-trigger:hover{ background:var(--surface-2); border-color:var(--border); }
.account-menu.open .account-trigger{ background:var(--surface-2); border-color:var(--border); }
.account-avatar{
    width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1.5px solid var(--surface);
    box-shadow:0 0 0 1.5px var(--border);
}
.account-avatar-initial{
    display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--accent-2),var(--accent));
    color:#fff; font-weight:700; font-size:14px;
}
.account-avatar-lg{ width:42px; height:42px; font-size:16px; }
.account-name{ font-size:14px; font-weight:700; color:var(--text); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-caret{ font-size:10px; color:var(--text-muted); transition:transform .15s; }
.account-menu.open .account-caret{ transform:rotate(180deg); color:var(--accent); }
.account-dropdown{
    display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:250px; background:var(--surface);
    border:1px solid var(--border); border-radius:16px; box-shadow:0 18px 40px -8px rgba(36,26,30,.22); padding:8px; z-index:200;
}
.account-menu.open .account-dropdown{ display:block; animation:sb-dropdown-in .16s ease; }
@keyframes sb-dropdown-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
.account-dropdown-head{ display:flex; align-items:center; gap:10px; padding:8px 8px 10px; }
.account-dropdown-id{ min-width:0; }
.account-dropdown-name{ font-size:14px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-dropdown-email{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; direction:ltr; text-align:right; }
.account-dropdown a{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:13.5px;
    color:var(--text); text-decoration:none; font-weight:600; transition:background .12s;
}
.account-dropdown a .ic{ width:18px; text-align:center; flex-shrink:0; }
.account-dropdown a:hover{ background:var(--surface-2); }
.account-dropdown a.active{ background:var(--accent-soft); color:var(--accent); }
.account-dropdown a.logout-link{ color:var(--danger); }
.account-dropdown a.logout-link:hover{ background:var(--danger-soft); }
.dropdown-divider{ height:1px; background:var(--border); margin:6px 4px; }

/* ---------------- رأس صفحة بعنوان + زر إجراء رئيسي ---------------- */
.page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.page-header .btn{ flex-shrink:0; }

/* ---------------- جدول المنتجات ---------------- */
.table-scroll{ overflow-x:auto; }
.products-table td, .products-table th{ vertical-align:middle; }
.product-thumb-cell{ width:52px; padding-left:4px !important; padding-right:4px !important; }
.product-thumb-cell img, .product-thumb-fallback{
    width:42px !important; height:42px !important; max-width:42px !important; max-height:42px !important;
    min-width:42px; min-height:42px; border-radius:10px; object-fit:cover; background:var(--surface-2);
    display:block; box-sizing:border-box;
}
.product-thumb-fallback{ display:flex; align-items:center; justify-content:center; font-size:18px; }
.actions-cell{ white-space:nowrap; }
.actions-cell .btn{ margin-inline-end:4px; }

/* ---------------- شارة إشعارات صغيرة (تذاكر الدعم بالقائمة الجانبية وغيرها) ---------------- */
.support-badge{
    background:var(--danger); color:#fff; font-size:11px; font-weight:700;
    min-width:20px; height:20px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
    padding:0 4px;
}

/* ---------------- نافذة منبثقة (Modal) ---------------- */
.modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(20,10,14,.45); z-index:1000;
    align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;
}
.modal-box{
    background:var(--surface); border-radius:var(--radius); padding:24px; width:100%; max-width:620px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-close{
    border:0; background:var(--surface-2); color:var(--text-muted); width:30px; height:30px; border-radius:50%;
    cursor:pointer; font-size:14px; line-height:1;
}
.modal-close:hover{ background:var(--border); }

/* ---------------- تبويبات (تستخدم بأكثر من صفحة) ---------------- */
.tabs{ display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:0; flex-wrap:wrap; }
.tab-btn{
    border:0; background:transparent; padding:10px 18px; font-size:13.5px; font-weight:600; color:var(--text-muted);
    cursor:pointer; font-family:inherit; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent-2); }

/* ---------------- معاينة الويدجت (صفحة بيضاء + الويدجت الحقيقي فوقها) ---------------- */
.preview-blank{
    min-height:calc(100vh - 220px); border:1.5px dashed var(--border); border-radius:var(--radius);
    background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:40px 20px; gap:10px;
}
.preview-blank .pb-icon{ font-size:40px; margin-bottom:6px; }
.preview-blank h2{ font-size:19px; color:var(--text); }
.preview-blank p{ color:var(--text-muted); font-size:14px; max-width:46ch; margin:0; }
.preview-blank .pb-hint{
    margin-top:18px; display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent);
    font-size:13px; font-weight:700; padding:9px 18px; border-radius:100px;
}

/* ---------------- صفحة الباقات ---------------- */
.usage-summary-card{ display:flex; flex-direction:column; gap:10px; }
.usage-summary-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.usage-summary-label{ font-size:12px; color:var(--text-muted); font-weight:600; margin-bottom:2px; }
.usage-summary-plan{ font-family:"El Messiri",sans-serif; font-size:19px; font-weight:700; }
.usage-summary-nums{ font-size:12.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.plans-cta-card{
    background:linear-gradient(160deg, var(--accent-soft), var(--surface)); border:1px solid var(--border);
}

/* ---------------- كود التضمين: قائمة تحقق الإعداد ---------------- */
.setup-checklist{ display:flex; flex-direction:column; gap:8px; }
.check-item{
    display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-radius:12px; font-size:13.5px;
    background:var(--surface-2);
}
.check-item .check-ic{ font-size:16px; flex-shrink:0; line-height:1.5; }
.check-item.ok{ background:var(--success-soft); color:#16603f; }
.check-item.warn{ background:var(--warning-soft); color:#7a5209; }
.check-item a{ color:inherit; font-weight:700; text-decoration:underline; }