/* لوحة التحكم — بتشتغل عربي (RTL) وإنجليزي (LTR) بنفس الملف (خصائص منطقية) */
:root {
    /* هوية المنصة: حبر + إنديجو + ذهبي (دي نفس ألوان اللوجو والإعلانات) */
    --bg: #F6F7FB; --card: #fff; --line: #E3E6F0; --line-2: #ECEEF5;
    --ink: #0F1B3D; --muted: #5B6275; --faint: #6B7288;
    --brand: #2F3FBF; --brand-dark: #232F94; --brand-soft: #EEF1FD; --brand-ink: #fff;
    --accent: #F2B134; --on-accent: #0F1B3D;
    --danger: #C0392B; --danger-soft: #FBE4E3; --danger-text: #8E2420;
    --ok: #17794A; --ok-soft: #DDF3E8; --ok-text: #0F5233;
    --warn: #7A5200; --warn-soft: #FDF1D6;
    --new-bg: #FDF1D6; --new-text: #7A5200;
    --radius: 14px; --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(15, 27, 61, .05), 0 6px 20px rgba(15, 27, 61, .06);
    --dir: 1;
    --side-w: 268px;
    --font: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}
[dir=ltr] { --dir: -1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--ink); background: var(--bg); }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--brand-dark); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

.i { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.22em; }
.i.b { fill: currentColor; stroke: none; }
[dir=rtl] .flip { transform: scaleX(-1); }
[dir=ltr] .flip-ltr { transform: scaleX(-1); }

/* ---------- الإطار العام ---------- */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.app > * { min-width: 0; }
.side { position: sticky; top: 0; z-index: 50; display: flex; flex-direction: column; height: 100vh; padding: 18px 14px 14px; background: #fff; border-inline-end: 1px solid var(--line); overflow-y: auto; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; color: var(--ink); font-weight: 800; font-size: 17px; text-decoration: none; }
.brand-logo { display: block; flex: none; width: auto; max-width: 100%; }
.side .side-brand .brand-logo { height: 27px; }
.side .side-brand { justify-content: center; padding: 6px 8px 18px; }
.side-tag { padding: 1px 9px; border-radius: 99px; background: rgba(242, 177, 52, .18); color: var(--accent); font-size: 12px; font-weight: 800; }
.nav a.nav-ext::after { content: ""; width: 14px; height: 14px; margin-inline-start: auto; opacity: .55; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.nav a.nav-ext .i.b { color: #4ADE80; }
.logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent); color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.side-site { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #FAFBFE; text-decoration: none; color: var(--ink); }
.side-site .av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; overflow: hidden; }
.side-site .av img { width: 100%; height: 100%; object-fit: cover; }
.side-site .tx { min-width: 0; line-height: 1.35; }
.side-site b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.side-site small { color: var(--muted); font-size: 12.5px; }
.nav-group { margin: 14px 10px 6px; color: var(--faint); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: #2C3558; font-weight: 600; text-decoration: none; transition: background .12s, color .12s; }
.nav a:hover { background: var(--bg); }
.nav a.on { background: var(--brand-soft); color: var(--brand-dark); }
.nav a .i { font-size: 18px; }
.nav .count { margin-inline-start: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800; text-align: center; line-height: 22px; }
.side-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; }
.side-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.me { display: flex; align-items: center; gap: 10px; padding: 10px 6px 0; border-top: 1px solid var(--line-2); margin-top: 6px; }
.me .av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; }
.me .tx { min-width: 0; flex: 1; line-height: 1.3; }
.me b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.me small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }

.langsw { display: inline-grid; grid-auto-flow: column; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #F6F7FB; }
.langsw a { padding: 4px 12px; border-radius: 7px; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; }
.langsw a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.main { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { display: none; position: sticky; top: 0; z-index: 40; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.page { width: min(980px, 100%); padding: 30px 30px 110px; margin-inline: auto; }
.page.wide { width: 100%; padding: 0; margin: 0; flex: 1; display: flex; flex-direction: column; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.page-head h1 { font-size: 26px; font-weight: 800; line-height: 1.3; }
.page-head .sub { margin-top: 4px; color: var(--muted); }
.page-head .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(15, 27, 61, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---------- أزرار ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1.5px solid transparent; border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 14.5px; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, transform .1s, box-shadow .12s; }
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #F6F7FC; border-color: #C9CFE0; }
.btn-soft { background: var(--brand-soft); color: var(--brand-dark); }
.btn-soft:hover { background: #DDE3FB; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #9E2E22; }
.btn-soft-danger { background: var(--danger-soft); color: var(--danger); }
.btn-soft-danger:hover { background: #F6D2CF; }
.btn-wa { background: #128C4A; }
.btn-wa:hover { background: #0D703A; }
.btn-lg { padding: 13px 24px; font-size: 15.5px; }
.btn-sm, .btn.sm { padding: 6px 12px; font-size: 13.5px; border-radius: 9px; }
.btn-icon { padding: 9px; }
.btn-icon.sm { padding: 6px; }
.btn-block { display: flex; width: 100%; }
.btn .i { font-size: 1.15em; }

/* ---------- بطاقات ونماذج ---------- */
.card { margin-bottom: 18px; padding: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin-bottom: 18px; }
.card-h h2 { font-size: 17px; font-weight: 800; }
.card-h .sub { color: var(--muted); font-size: 13.5px; }
.card-h .ic { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-end: 8px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark); vertical-align: middle; }

.field { margin-bottom: 16px; }
.field > label, .lab { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.field .opt { color: var(--faint); font-weight: 500; font-size: 13px; }
.field input[type=text], .field input[type=search], .field input[type=date], .field input[type=email], .field input[type=password], .field input[type=tel], .field input[type=url], .field input[type=time], .field input[type=number], .field select, .field textarea, .input {
    width: 100%; padding: 10px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; line-height: 1.5; transition: border-color .12s, box-shadow .12s;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 63, 191, .14); }
.field input[disabled], .field select[disabled] { background: #F3F5FA; color: #8A98A6; }
.field input.err, .field.has-err input, .field.has-err textarea { border-color: var(--danger); }
.field input[dir=ltr], .ltr { text-align: start; direction: ltr; }
[dir=rtl] .field input[dir=ltr] { text-align: right; }
.hint { margin-top: 5px; color: var(--muted); font-size: 13px; }
.counter { margin-top: 4px; color: var(--faint); font-size: 12.5px; text-align: end; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.grid2 > .full, .grid3 > .full { grid-column: 1 / -1; }
.ig { display: flex; align-items: stretch; }
.ig > .pre { display: flex; align-items: center; padding: 0 12px; border: 1.5px solid #D3D8E8; border-inline-end: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: #F3F5FA; color: var(--muted); font-size: 13.5px; direction: ltr; white-space: nowrap; }
[dir=rtl] .ig > .pre { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-inline-end: 1.5px solid #D3D8E8; border-inline-start: 0; }
.ig > input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
[dir=rtl] .ig > input { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }

/* مفتاح تشغيل */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #C3CED9; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .15s; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { inset-inline-start: 23px; }
.switch input:focus-visible + .track { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.switch .tx b { display: block; }
.switch .tx small { color: var(--muted); }

/* تنبيهات */
.alert { display: flex; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid; border-radius: var(--radius-sm); font-size: 14.5px; }
.alert .i { margin-top: 3px; }
.alert-ok { background: var(--ok-soft); border-color: #BCE3CE; color: var(--ok-text); }
.alert-warn { background: var(--warn-soft); border-color: #EFD79B; color: var(--warn); }
.alert-err { background: var(--danger-soft); border-color: #F0C4C0; color: var(--danger-text); }
.alert-err ul { margin: 0; padding-inline-start: 18px; }
.tip { display: flex; gap: 10px; padding: 12px 15px; border-radius: var(--radius-sm); background: #EEF1FD; color: #2C3558; font-size: 14px; }
.tip .i { margin-top: 3px; color: var(--brand-dark); }
.toast-wrap { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 90; display: grid; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: tin .25s ease-out; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }

/* وسوم */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; background: #ECEFF7; color: #4A5B6B; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok-text); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.err { background: var(--danger-soft); color: var(--danger-text); }
.pill.brand { background: var(--brand-soft); color: var(--brand-dark); }
.pill.new { background: var(--new-bg); color: var(--new-text); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #9AABBB; }
.dot.ok { background: #17A35F; }

/* تبويبات */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #2C3558; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.tabs .on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs .n { min-width: 22px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: 12px; text-align: center; }
.tabs .on .n { background: rgba(255, 255, 255, .2); }

/* تبويب لغة المحتوى (عربي / English) */
.langtabs { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
.langtabs .lt-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.langtabs .lt-hint { color: var(--muted); font-size: 13px; }
.seg { display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 10px; background: #ECEFF7; }
.seg button { padding: 5px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
body[data-content-lang=ar] [data-lang=en], body[data-content-lang=en] [data-lang=ar] { display: none !important; }
[data-lang] input[dir=ltr], [data-lang] textarea[dir=ltr] { direction: ltr; text-align: left; }
[data-lang] input[dir=rtl], [data-lang] textarea[dir=rtl] { direction: rtl; text-align: right; }
body[data-single-lang] [data-lang=en], body[data-single-lang] .langtabs { display: none !important; }
.lang-badge { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 6px; background: #ECEFF7; color: var(--muted); font-size: 11px; font-weight: 800; vertical-align: middle; }

/* ---------- لوحة التحكم الرئيسية ---------- */
.share-card { margin-bottom: 18px; padding: 24px; border-radius: var(--radius); background: radial-gradient(520px 260px at 90% -20%, rgba(242, 177, 52, .22), transparent 70%), linear-gradient(135deg, #0F1B3D, #1B2A80 68%, #2F3FBF); color: #fff; box-shadow: var(--shadow); }
.share-card h2 { font-size: 18px; font-weight: 800; }
.share-card p { margin-top: 2px; color: #C9D2F5; font-size: 14px; }
.share-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 16px; }
.share-main { flex: 1 1 340px; min-width: 0; }
.urlbox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; padding-inline: 14px 6px; border-radius: 12px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); }
.urlbox input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: #fff; font-size: 14px; direction: ltr; text-align: start; }
.urlbox input:focus { outline: none; }
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-card .btn-ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.share-card .btn-ghost:hover { background: rgba(255, 255, 255, .22); }
.share-card .btn-light { background: #fff; color: var(--brand-dark); }
.qr-box { display: grid; justify-items: center; gap: 8px; text-align: center; }
.qr-box canvas, .qr-box img { width: 118px; height: 118px; padding: 8px; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.qr-box .btn { padding: 4px 12px; font-size: 12.5px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
a.stat:hover { border-color: #C5D1DC; }
.stat .ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 21px; }
.stat .ic.amber { background: var(--new-bg); color: var(--new-text); }
.stat .ic.blue { background: #E4F0F7; color: #1F5F86; }
.stat b { display: block; font-size: 26px; line-height: 1.1; font-weight: 800; }
.stat span { color: var(--muted); font-size: 13.5px; }
.cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.progress { height: 9px; border-radius: 99px; background: #E6EAF4; overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), #5C6CE8); transition: width .5s; }
.checklist { display: grid; gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.checklist a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.checklist a:hover { background: var(--bg); }
.checklist .tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #C9CFE0; color: #fff; font-size: 14px; }
.checklist .done .tick { background: var(--ok); border-color: var(--ok); }
.checklist .done span { color: var(--muted); text-decoration: line-through; text-decoration-color: #B4BCD3; }
.checklist .go { margin-inline-start: auto; color: var(--faint); }
.list { display: grid; margin: 0; padding: 0; list-style: none; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.list > li:first-child { border-top: 0; }
.empty { padding: 30px 16px; text-align: center; color: var(--muted); }
.empty .i { width: 42px; height: 42px; margin-bottom: 8px; color: #B4BCD3; }
.empty b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 16px; }

/* رسم الزيارات */
.chart { margin-top: 6px; }
.chart-top { display: flex; align-items: baseline; gap: 10px; }
.chart-top b { font-size: 28px; font-weight: 800; line-height: 1; }
.chart-top span { color: var(--muted); font-size: 13.5px; }
.bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 14px; padding-top: 6px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--line-2) 39px, var(--line-2) 40px); }
.bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar i { display: block; width: 100%; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--brand); opacity: .88; transition: opacity .12s, height .4s; }
.bar:hover i, .bar:focus i { opacity: 1; background: var(--brand-dark); }
.bar .tip-b { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%; z-index: 3; padding: 3px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(calc(var(--dir) * 50%), 4px); transition: .12s; }
.bar:hover .tip-b, .bar:focus .tip-b { opacity: 1; transform: translate(calc(var(--dir) * 50%), 0); }
.bars { overflow-x: clip; }
.bar:nth-child(-n+3) .tip-b { inset-inline-start: 0; transform: translate(0, 4px); }
.bar:nth-last-child(-n+3) .tip-b { inset-inline-start: auto; inset-inline-end: 0; transform: translate(0, 4px); }
.bar:nth-child(-n+3):hover .tip-b, .bar:nth-child(-n+3):focus .tip-b, .bar:nth-last-child(-n+3):hover .tip-b, .bar:nth-last-child(-n+3):focus .tip-b { transform: translate(0, 0); }
.bars-x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: 12px; }

/* ---------- نموذج الصور والرفع ---------- */
.imgfield { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1.5px dashed #C9CFE0; border-radius: 12px; background: #FAFBFE; }
.imgfield-preview { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: 12px; background: #ECEFF7; color: #9AA8B6; overflow: hidden; }
.imgfield.wide .imgfield-preview { width: 132px; height: 84px; }
.imgfield-preview img { width: 100%; height: 100%; object-fit: cover; }
.imgfield-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.imgfield-body input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.imgfield-name { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.imgfield.removed .imgfield-preview { opacity: .35; }
.dropzone { display: grid; justify-items: center; gap: 4px; padding: 30px 16px; border: 2px dashed #BDC5DD; border-radius: 14px; background: #FAFBFE; color: var(--muted); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone .i { width: 34px; height: 34px; color: var(--brand); }
.dropzone strong { color: var(--ink); }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.gal-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #ECEFF7; cursor: pointer; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
.gal-tile input { position: absolute; opacity: 0; }
.gal-tile .x { position: absolute; top: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .12s; }
.gal-tile:hover .x { opacity: 1; }
.gal-tile:has(input:checked) img { opacity: .25; }
.gal-tile:has(input:checked) .x { opacity: 1; background: var(--danger); }

/* ---------- محرر الأقسام ---------- */
.rowcard { margin-bottom: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.row-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.row-no { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: 13px; }
.row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.row-title:empty::before { content: attr(data-empty); color: var(--faint); font-weight: 500; }
.row-actions { display: flex; gap: 4px; }
.row-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 16px 16px 4px; }
.row-body .full, .row-body .field[data-lang] { grid-column: 1 / -1; }
.sticky-save { position: sticky; bottom: 14px; z-index: 30; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); box-shadow: 0 10px 34px rgba(15, 27, 61, .16); }
.sticky-save .push { margin-inline-start: auto; }
.sticky-save .dirty-note { color: var(--warn); font-weight: 700; font-size: 13.5px; }

/* قايمة الأقسام */
.blk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .12s, border-color .12s, opacity .12s; }
.blk.hidden-blk { opacity: .62; background: #FAFBFE; }
.blk.dragging { opacity: .5; border-style: dashed; }
.blk.over { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 63, 191, .15); }
.blk .grip { display: grid; place-items: center; width: 24px; height: 36px; color: #A3B0BD; cursor: grab; touch-action: none; }
.blk .grip:active { cursor: grabbing; }
.blk .ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 20px; }
.blk .tx { flex: 1; min-width: 0; line-height: 1.4; }
.blk .tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blk .tx small { color: var(--muted); }
.blk .acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.types { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.typecard { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: start; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.typecard:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.typecard .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 20px; }
.typecard b { font-size: 15.5px; }
.typecard span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* ---------- العيادات ---------- */
.clinic-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; }
.clinic-card .main-tx { flex: 1 1 280px; min-width: 0; }
.clinic-card h3 { font-size: 17px; }
.clinic-card p { margin-top: 4px; color: var(--muted); }
.hours-edit { display: grid; gap: 6px; }
.hrow { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFBFE; }
.hrow.off { opacity: .75; }
.hrow .times { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hrow .times input { width: auto; padding: 6px 10px; }
.hrow.off .times { visibility: hidden; }

/* ---------- الحجوزات ---------- */
.bk-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; margin-bottom: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.bk-item.is-new { border-inline-start: 4px solid var(--accent); }
.bk-item .who { flex: 1 1 220px; min-width: 0; line-height: 1.5; }
.bk-item .who b { font-size: 16px; }
.bk-item .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.bk-item .meta span { display: inline-flex; align-items: center; gap: 5px; }
.bk-item .note { flex-basis: 100%; padding: 8px 12px; border-radius: 10px; background: #F4F6FB; color: #38405E; font-size: 14px; }
.bk-item .acts { display: flex; flex-wrap: wrap; gap: 6px; }
.searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.searchbar .field { flex: 1; margin: 0; position: relative; }
.searchbar .field .i { position: absolute; top: 50%; inset-inline-start: 12px; margin-top: -9px; color: var(--faint); }
.searchbar input { padding-inline-start: 38px !important; }

/* ---------- الدومين ---------- */
.steps-v { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps-v > li { position: relative; padding-inline-start: 44px; counter-increment: s; }
.steps-v > li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; }
.dns { width: 100%; margin-top: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.dns th, .dns td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line-2); }
.dns tr:last-child td { border-bottom: 0; }
.dns th { background: #F4F6FB; color: var(--muted); font-size: 12.5px; }
.dns td code { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #ECEFF7; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; direction: ltr; unicode-bidi: embed; overflow-wrap: anywhere; }
.dns .copy-cell { display: flex; align-items: center; gap: 8px; }
.dnscheck { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; font-size: 14px; }
.dnscheck .i { padding: 3px; border-radius: 50%; color: #fff; }
.dnscheck.ok .i { background: var(--ok); }
.dnscheck.no .i { background: #B0BCC8; }

/* ---------- اللغات ---------- */
.lang-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.opt-card input { position: absolute; opacity: 0; }
.opt-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.opt-card:has(input:focus-visible) { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.opt-card .flag { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 800; }

/* ---------- السوشيال ---------- */
.soc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.soc { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: end; }
.soc .sic { display: grid; place-items: center; width: 40px; height: 42px; border-radius: 10px; background: #F0F2F9; color: #38405E; font-size: 20px; }
.soc label { display: block; margin-bottom: 5px; font-weight: 700; font-size: 13.5px; }

/* ---------- خطوات البداية ---------- */
.wiz-panel { display: none; }
.wiz-panel.on { display: block; animation: tin .25s ease-out; }
.wiz-nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 22px; }

/* ---------- قوالب وألوان ---------- */
.layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lay { position: relative; display: block; padding: 8px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.lay input { position: absolute; opacity: 0; }
.lay:hover { border-color: #BDC5DD; }
.lay:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 63, 191, .15); }
.lay:has(input:focus-visible) { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.lay svg { display: block; width: 100%; height: auto; border-radius: 8px; background: #F3F5FA; }
.lay b { display: block; margin-top: 6px; font-size: 14px; }
.lay small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { position: relative; display: inline-grid; justify-items: center; gap: 4px; width: 64px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; }
.sw .ball { display: block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); transition: box-shadow .12s, transform .12s; }
.sw:hover .ball { transform: scale(1.06); }
.sw input:checked + .ball { box-shadow: 0 0 0 3px var(--ink); }
.sw input:focus-visible + .ball { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 3px; }
.sw .nm { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.3; color: var(--muted); }
.sw input:checked ~ .nm { color: var(--ink); }
.colorrow { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 14px; padding: 14px; border-radius: 12px; background: #F4F6FB; }
.colorrow label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13.5px; }
.colorrow input[type=color] { width: 44px; height: 36px; padding: 2px; border: 1.5px solid #D3D8E8; border-radius: 9px; background: #fff; cursor: pointer; }

/* اختيار الخط */
.fp { position: relative; }
.fp-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; text-align: start; cursor: pointer; }
.fp-btn:hover { border-color: #AEBBC8; }
.fp-btn .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.fp-btn .i { color: var(--faint); font-size: 16px; }
.fp-pop { position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + 6px); display: none; flex-direction: column; min-width: 280px; max-height: 380px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(15, 27, 61, .22); overflow: hidden; }
.fp.open .fp-pop { display: flex; }
.fp-head { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line-2); }
.fp-head input { width: 100%; padding: 8px 12px; border: 1.5px solid #D3D8E8; border-radius: 9px; }
.fp-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-cats button { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fp-cats button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fp-list { flex: 1; overflow-y: auto; padding: 4px; }
.fp-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; text-align: start; cursor: pointer; min-height: 46px; }
.fp-opt:hover, .fp-opt.cur { background: var(--brand-soft); }
.fp-opt .nm { flex: 1; min-width: 0; font-size: 17px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-opt small { flex: none; padding: 0 7px; border-radius: 6px; background: #ECEFF7; color: var(--muted); font-size: 11px; font-weight: 800; }
.fp-opt .nm.pending { font-family: var(--font); color: var(--faint); font-size: 14px; }
.fp-none { padding: 20px; text-align: center; color: var(--muted); }
.fp-default { font-family: var(--font) !important; color: var(--muted); font-size: 14px !important; }

/* ---------- استوديو التصميم ---------- */
.studio { display: grid; grid-template-columns: 410px minmax(0, 1fr); flex: 1; min-height: calc(100vh - 0px); }
.studio-panel { display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; background: #fff; border-inline-end: 1px solid var(--line); }
.studio-panel .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; }
.studio-panel .sp-head h1 { font-size: 19px; font-weight: 800; }
.studio-panel .sp-body { flex: 1; overflow-y: auto; padding: 0 18px 18px; }
.studio-panel .sp-foot { display: flex; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fff; }
.acc { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.acc > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; font-weight: 800; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .i:last-child { margin-inline-start: auto; color: var(--faint); transition: transform .15s; }
.acc[open] > summary .i:last-child { transform: rotate(180deg); }
.acc > summary .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 16px; }
.acc-body { padding: 4px 14px 14px; }
.pairs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pairs button { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.pairs button:hover { border-color: var(--brand); color: var(--brand-dark); }
.sec-font { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.sec-font:first-of-type { border-top: 0; }
.sec-font > span { font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.studio-view { display: flex; flex-direction: column; height: 100vh; min-width: 0; background: #E8ECF5; }
.sv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sv-bar .sp { flex: 1; }
.sv-stage { flex: 1; min-height: 0; padding: 16px; overflow: hidden; }
.sv-frame { position: relative; direction: ltr; margin-inline: auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(15, 27, 61, .18); overflow: hidden; }
.sv-frame iframe { position: absolute; top: 0; left: 0; display: block; border: 0; transform-origin: 0 0; background: #fff; }
.studio-toggle { display: none; }

/* معاينة بالدرج */
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 80; display: flex; flex-direction: column; width: min(480px, 100vw); background: #fff; box-shadow: none; visibility: hidden; transform: translateX(calc(var(--dir) * -105%)); transition: transform .25s, visibility 0s .25s; }
[dir=rtl] .drawer { transform: translateX(-105%); }
.drawer.open { transform: none !important; visibility: visible; transition: transform .25s; box-shadow: -20px 0 60px rgba(15, 27, 61, .25); }
[dir=rtl] .drawer.open { box-shadow: 20px 0 60px rgba(15, 27, 61, .25); }
.drawer-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.drawer-h b { flex: 1; }
.drawer iframe { flex: 1; width: 100%; border: 0; }

/* ---------- صفحات الدخول ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: #fff; }
.auth-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 44px; background: radial-gradient(600px 360px at 100% 0%, rgba(242, 177, 52, .20), transparent 70%), linear-gradient(150deg, #0F1B3D, #17267A 62%, #2F3FBF); color: #fff; overflow: hidden; }
.auth-art::after { content: ""; position: absolute; inset-inline-end: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.auth-art h2 { font-size: 32px; line-height: 1.3; font-weight: 800; max-width: 14em; }
.auth-art ul { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; color: #D2D9F6; }
.auth-art li { display: flex; align-items: center; gap: 10px; }
.auth-art li .i { padding: 4px; border-radius: 50%; background: var(--accent); color: var(--ink); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.auth-box { width: min(420px, 100%); margin-inline: auto; }
.auth-box h1 { font-size: 26px; font-weight: 800; }
.auth-box .lead { margin: 4px 0 22px; color: var(--muted); }
.reg-trial { display: flex; gap: 10px; margin: -8px 0 20px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--ok-soft); color: var(--ok-text); font-size: 14px; line-height: 1.6; }
.reg-trial .i { flex: none; margin-top: .15em; color: var(--ok); }
.reg-trial b { display: block; }
.auth-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pw { position: relative; }
.pw button { position: absolute; top: 0; bottom: 0; inset-inline-end: 6px; padding: 0 10px; border: 0; background: transparent; color: var(--faint); cursor: pointer; }
.pw input { padding-inline-end: 44px !important; }

/* ---------- موبايل ---------- */
@media (max-width: 1080px) {
    .studio { grid-template-columns: 360px minmax(0, 1fr); }
}
@media (max-width: 960px) {
    .app { display: block; }
    .topbar { display: flex; }
    .side { position: fixed; z-index: 60; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); transform: translateX(calc(var(--dir) * 105%)); transition: transform .22s; box-shadow: none; }
    [dir=rtl] .side { transform: translateX(105%); }
    body.nav-open .side { transform: none; box-shadow: 0 0 60px rgba(15, 27, 61, .35); }
    body.nav-open .scrim { opacity: 1; pointer-events: auto; }
    .page { padding: 20px 14px 110px; }
    .cols, .grid2, .grid3, .row-body, .soc-grid, .lang-opts { grid-template-columns: 1fr; }
    .hrow { grid-template-columns: 1fr; }
    .auth { grid-template-columns: 1fr; }
    .auth-art { display: none; }
    .studio { display: block; }
    .studio-panel { position: static; height: auto; }
    .studio-panel .sp-body { overflow: visible; }
    .studio-view { height: auto; min-height: 70vh; }
    .studio-view.hide, .studio-panel.hide { display: none; }
    .studio-toggle { position: sticky; top: 0; z-index: 30; display: flex; gap: 6px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--line); }
    .studio-toggle button { flex: 1; }
}
@media (max-width: 560px) {
    .page-head h1 { font-size: 22px; }
    .card { padding: 18px; }
    .blk { flex-wrap: wrap; }
    .blk .acts { flex-basis: 100%; justify-content: flex-start; }
    .sticky-save .btn-lg { flex: 1; padding-inline: 12px; }
    .sticky-save .push { margin-inline-start: 0; }
    .sec-font { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* الاستوديو: النموذج جوه اللوحة */
.studio-panel form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.is-studio .side { z-index: 50; }
.is-studio .main { min-height: 100vh; }
.is-studio .studio-panel .alert { font-size: 13.5px; }
.layouts .lay b { font-size: 13.5px; }


/* ---------- القائمة الجانبية: حبر المنصة ---------- */
.side { background: var(--ink); border-inline-end: 0; color: #fff; }
.side :focus-visible { outline-color: var(--accent); }
.side .side-brand { color: #fff; }
.side .side-site { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: #fff; }
.side .side-site:hover { background: rgba(255, 255, 255, .12); }
.side .side-site .av { background: rgba(255, 255, 255, .16); color: #fff; }
.side .side-site small { color: #AEB8E0; }
.side .nav-group { color: #8F9BCB; }
.side .nav a { position: relative; color: #C9D1F0; }
.side .nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.side .nav a.on { background: rgba(255, 255, 255, .15); color: #fff; }
.side .nav a.on::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--accent); }
.side .langsw { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.side .langsw a { color: #B8C2EA; }
.side .langsw a.on { background: #fff; color: var(--ink); box-shadow: none; }
.side .me { border-top-color: rgba(255, 255, 255, .12); }
.side .me .av { background: var(--accent); color: var(--ink); }
.side .me b { color: #fff; }
.side .me small { color: #AEB8E0; }
.side .btn-ghost { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.side .btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); }

/* زر الذهبي: «ابدأ» والحاجات الجديدة */
.btn-gold { background: var(--accent); color: var(--on-accent); }
.btn-gold:hover { background: #E4A21F; }

/* ---------- اختيار اسم زر الحجز ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; }
.chip > span { display: inline-block; padding: 7px 15px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; font-size: 14px; transition: border-color .12s, background .12s; }
.chip:hover > span { border-color: #BDC5DD; }
.chip input:checked + span { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.chip input:focus-visible + span { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.bk-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--bg); }
.btn-demo { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.btn-demo b { font-weight: 800; }

/* ---------- مفاتيح عناصر الصفحة (الاستوديو) ---------- */
.tgls { display: grid; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.tgl { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; cursor: pointer; background: #fff; }
.tgl:first-child { border-top: 0; }
.tgl:hover { background: var(--bg); }
.tgl input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl-sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: #C3C9DD; transition: background .15s; }
.tgl-sw::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: inset-inline-start .15s; }
.tgl input:checked ~ .tgl-sw { background: var(--brand); }
.tgl input:checked ~ .tgl-sw::after { inset-inline-start: 18px; }
.tgl input:focus-visible ~ .tgl-sw { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.muted { color: var(--faint); font-weight: 500; }
.seg-wide { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; }
.seg-opt span { display: block; padding: 5px 4px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: 12.5px; text-align: center; cursor: pointer; line-height: 1.4; }
.seg-opt input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg-opt input:focus-visible + span { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 1px; }

/* ---------- ترتيب الغلاف في الاستوديو ---------- */
.seg-3 { grid-template-columns: repeat(3, 1fr); }
.seg-5 { grid-template-columns: repeat(5, 1fr); }
.seg.seg-wrap { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); row-gap: 4px; width: 100%; }
.ui-sub { padding: 4px 14px 14px; border-top: 1px dashed var(--line); margin-top: 6px; }
.ui-sub .lab { margin: 10px 0 8px; }
[data-hero-custom] { transition: opacity .18s ease; }
[data-hero-custom].is-off { opacity: .45; }
[data-hero-custom].is-off .seg { pointer-events: none; }
[data-hero-custom].is-off::before { content: attr(data-off-note); display: block; font-size: 12.5px; color: var(--muted); margin: 10px 0 -6px; }
.orderlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.orderlist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--ink); transition: background .15s, transform .15s; }
.orderlist li.moved { background: var(--mist); }
.ol-btns { display: inline-flex; gap: 4px; }
.ol-b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); cursor: pointer; }
.ol-b:hover:not(:disabled) { background: var(--mist); color: var(--ink); }
.ol-b:disabled { opacity: .35; cursor: default; }
.ol-b:focus-visible { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 1px; }
.ol-b .i { width: 16px; height: 16px; }
.field textarea[data-autogrow] { min-height: 0; resize: none; overflow: hidden; }

/* ---------- المعاينة الحيّة جنب الفورم ---------- */
.page.has-lp { width: min(1480px, 100%); }
.lp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 26px; align-items: start; }
.lp-main { min-width: 0; }
.lp-panel { position: sticky; top: 18px; display: flex; flex-direction: column; height: calc(100vh - 36px); border: 1px solid var(--line); border-radius: 16px; background: #E8ECF5; overflow: hidden; box-shadow: 0 8px 30px rgba(15, 27, 61, .08); }
.lp-panel .sv-bar { padding: 8px 10px; gap: 6px; flex-wrap: nowrap; }
.lp-panel .sv-stage { flex: 1; min-height: 0; padding: 12px; overflow: hidden; }
.lp-panel .btn-icon.sm { width: 32px; height: 32px; padding: 0; }
.lp-state .dot { transition: background .2s; }
.lp-state[data-state=loading] .dot { background: var(--warn, #F2B134); animation: lp-pulse 1s ease-in-out infinite; }
.lp-state[data-state=invalid] .dot, .lp-state[data-state=error] .dot { background: var(--danger, #D64545); }
@keyframes lp-pulse { 50% { opacity: .35; } }
.lp-msg { padding: 8px 12px; background: #FFF6E0; border-bottom: 1px solid #F4DFA8; color: #7A5600; font-size: 13px; line-height: 1.5; }
.lp-close, .lp-fab { display: none; }
.has-lp [data-preview-open] { display: none !important; }
@media (max-width: 1240px) {
    .lp-wrap { display: block; }
    .lp-panel { display: none; position: fixed; inset: 0; z-index: 70; height: auto; border-radius: 0; border: 0; }
    .lp-panel.open { display: flex; }
    .lp-close { display: inline-grid; }
    .lp-fab { display: inline-flex; position: fixed; inset-block-end: 92px; inset-inline-start: 16px; z-index: 55; box-shadow: 0 10px 30px rgba(15, 27, 61, .3); border-radius: 999px; }
    body.lp-lock { overflow: hidden; }
}

/* ---------- شريط التنقل السفلي (موبايل) ---------- */
.bnav { display: none; }
@media (max-width: 960px) {
    .bnav { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(15, 27, 61, .07); }
    .bnav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; color: var(--muted); font-size: 11.5px; font-weight: 700; text-decoration: none; line-height: 1.3; }
    .bnav a .i { width: 22px; height: 22px; }
    .bnav a.on { color: var(--brand-dark); background: var(--brand-soft); }
    .bnav .count { position: absolute; top: 1px; inset-inline-end: calc(50% - 22px); min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--gold, #F2B134); color: var(--ink); font-size: 11px; font-weight: 800; text-align: center; }
    .page { padding-bottom: 150px; }
    .sticky-save { bottom: 72px; }
    .toast-wrap { bottom: 76px; inset-inline: 12px; }
    .toast { max-width: none; }
    .lp-fab { inset-block-end: 150px; }
    .is-studio .bnav { display: none; }
}

/* ---------- البيكسل والتتبع ---------- */
.trk-list { display: grid; gap: 12px; }
.trk { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.trk.has-err { border-color: var(--danger); }
.trk-head { display: flex; align-items: center; gap: 12px; }
.trk-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-dark); }
.trk-name { flex: 1; min-width: 0; }
.trk-name b { display: block; }
.trk-name small { color: var(--muted); font-size: 12.5px; }
.trk-help { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.trk-help summary { cursor: pointer; font-weight: 700; color: var(--brand-dark); list-style: none; }
.trk-help summary::-webkit-details-marker { display: none; }
.trk-help p { margin: 6px 0 0; line-height: 1.7; }
.evt { display: grid; gap: 8px; }
.evt > div { padding: 10px 12px; border-radius: 10px; background: var(--mist, #EEF1FD); }
.evt b { display: block; font-size: 14px; }
.evt small { color: var(--muted); }
.err-tx { margin-top: 5px; color: var(--danger-text, #B42318); font-size: 13px; }

/* ---------- الرسائل (نماذج الزوار) ---------- */
.sub-data { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--mist, #EEF1FD); }
.sub-data dt { font-size: 12.5px; color: var(--muted); }
.sub-data dd { margin: 2px 0 0; font-weight: 700; word-break: break-word; white-space: pre-line; }

/* ---------- محرر الأزرار والنماذج ---------- */
.fb-list { display: grid; gap: 8px; }
.fb-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto auto; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.fb-row input[type=text], .fb-row select { width: 100%; padding: 8px 11px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; }
.fb-row input:focus, .fb-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 63, 191, .14); }
.fb-req { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.fb-acts { display: inline-flex; gap: 4px; }
.fb-acts .btn:disabled { opacity: .35; }
@media (max-width: 700px) { .fb-row { grid-template-columns: 1fr 1fr; } .fb-main { grid-column: 1 / -1; } .fb-acts { justify-content: flex-end; } }

.fm-side { position: sticky; top: 18px; align-self: start; }
.fm-side-in { border: 1px solid var(--line); border-radius: 16px; background: #E8ECF5; overflow: hidden; box-shadow: 0 8px 30px rgba(15, 27, 61, .08); }
.fm-side-bar { padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.fm-stage { display: grid; gap: 12px; padding: 16px; max-height: calc(100vh - 110px); overflow: auto; }
.fm-btnrow { display: flex; justify-content: center; }
.fm-btn { display: inline-block; padding: 10px 22px; border-radius: 12px; background: var(--accent, #F2B134); color: var(--ink); font-weight: 800; }
.fm-btn:empty::before { content: '…'; }
.fm-card { padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(15, 27, 61, .1); }
.fm-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.fm-intro { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.fm-f { margin-bottom: 11px; }
.fm-f label { display: block; margin-bottom: 4px; font-weight: 700; font-size: 13.5px; }
.fm-f label i { color: var(--danger, #D64545); font-style: normal; }
.fm-f input, .fm-f textarea { width: 100%; padding: 9px 12px; border: 1.5px solid #D3D8E8; border-radius: 10px; background: #F7F8FC; }
.fm-f textarea { min-height: 70px; }
.fm-submit { display: block; padding: 11px; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; text-align: center; }
.fm-ok { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--ok-soft, #E3F6EC); color: var(--ok-text, #0B6B3A); font-weight: 700; font-size: 14px; }
.fm-ok .i { flex: none; margin-top: 3px; }
@media (max-width: 1240px) { .lp-wrap[data-fm] { display: block; } .fm-side { position: static; margin-top: 18px; } .fm-stage { max-height: none; } }

/* ---------- رحلة البداية: اختيار الباقة وإنشاء الموقع ---------- */
.fl-page { min-height: 100vh; background: radial-gradient(1100px 380px at 50% -140px, #E1E6FB 0%, rgba(225, 230, 251, 0) 72%), var(--bg); }
.fl-top { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.fl-top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 10px 20px; }
.fl-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.fl-steps { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.fl-steps li { display: flex; align-items: center; gap: 8px; color: var(--faint); font-weight: 700; font-size: 13.5px; }
.fl-steps li + li::before { content: ""; width: 34px; height: 2px; margin-inline: 10px; border-radius: 2px; background: var(--line); }
.fl-steps li + li.done::before, .fl-steps li + li.on::before { background: var(--brand); }
.fl-steps .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E8EBF5; color: var(--muted); font-size: 12.5px; }
.fl-steps .n .i { width: 15px; height: 15px; stroke-width: 2.5; }
.fl-steps .on { color: var(--ink); }
.fl-steps .on .n { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(47, 63, 191, .16); }
.fl-steps .done { color: var(--ok-text); }
.fl-steps .done .n { background: var(--ok); color: #fff; }
.fl-main { max-width: 1120px; margin: 0 auto; padding: 30px 20px 40px; }
.fl-wrap { padding-bottom: 110px; }
.fl-wrap.narrow { max-width: 720px; margin: 0 auto; padding-bottom: 30px; }
.fl-head { margin: 0 auto 18px; text-align: center; }
.fl-head h1 { font-size: clamp(1.65rem, 3.4vw, 2.25rem); font-weight: 800; line-height: 1.3; }
.fl-head p { margin-top: 6px; color: var(--muted); font-size: 1.05rem; }
.fl-reassure { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto 28px; padding: 12px 16px; border: 1px solid #D5DBFA; border-radius: 14px; background: var(--brand-soft); font-size: 14.5px; line-height: 1.55; }
.fl-reassure .ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 27, 61, .1); }
.fl-reassure b { display: block; }
.fl-reassure span:not(.ic) { color: #3A4468; }
.fl-sec { margin-bottom: 32px; }
.fl-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fl-sec-h .fl-q { margin: 0; }
.fl-q { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.2rem; font-weight: 800; }
.fl-q .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .9rem; }

.types2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcard { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.tcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tcard:hover { border-color: #B9C1E6; }
.tcard .ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-dark); }
.tcard .ic .i { width: 24px; height: 24px; }
.tcard .tx { flex: 1; min-width: 0; line-height: 1.45; }
.tcard .tx b { display: block; font-size: 15.5px; }
.tcard .tx small { display: block; color: var(--muted); font-size: 13px; }
.tcard .tick { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid #CBD2E6; border-radius: 50%; color: transparent; }
.tcard .tick .i { width: 14px; height: 14px; stroke-width: 3; }
.tcard.on { border-color: var(--brand); background: #FAFBFF; box-shadow: 0 0 0 4px rgba(47, 63, 191, .12); }
.tcard.on .tick { border-color: var(--brand); background: var(--brand); color: #fff; }
.tcard.on .ic { background: var(--brand); color: #fff; }
.tcard:has(input:focus-visible) { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }

.period2 { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: #E3E7F5; }
.period2 label { position: relative; cursor: pointer; }
.period2 input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.period2 span { display: block; padding: 8px 20px; border-radius: 11px; color: var(--muted); font-weight: 700; transition: background .15s, color .15s; }
.period2 label:has(input:checked) span { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(15, 27, 61, .12); }
.period2 label:has(input:focus-visible) span { outline: 3px solid rgba(47, 63, 191, .45); }
.period2 em { margin-inline-start: 4px; padding: 1px 8px; border-radius: 99px; background: #DDF5E7; color: #0B6B3A; font-size: .75rem; font-style: normal; }

.plans2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; padding-top: 12px; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 28px 22px 22px; border: 2px solid var(--line); border-radius: 22px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .2s; }
.pcard[hidden] { display: none; }
.plans2[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
.pcard input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pcard:hover:not(.off) { transform: translateY(-3px); border-color: #B9C1E6; box-shadow: 0 14px 34px rgba(15, 27, 61, .1); }
.pcard.sel { border-color: var(--brand); box-shadow: 0 16px 44px rgba(47, 63, 191, .2); }
.pcard:has(input:focus-visible) { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 3px; }
.pcard.off { background: #F7F8FC; cursor: not-allowed; }
.pcard.off > :not(.ribbon):not(.lock) { opacity: .5; }
.pcard .ribbon { position: absolute; inset-block-start: -13px; inset-inline-start: 50%; transform: translateX(-50%); padding: 3px 16px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .8rem; white-space: nowrap; }
[dir=rtl] .pcard .ribbon { transform: translateX(50%); }
.pcard .ribbon.org { background: var(--brand); color: #fff; }
.pcard .ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcard h3 { font-size: 1.2rem; font-weight: 800; }
.pcard .chk { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 2px solid #CBD2E6; border-radius: 50%; color: transparent; }
.pcard .chk .i { width: 15px; height: 15px; stroke-width: 3; }
.pcard.sel .chk { border-color: var(--brand); background: var(--brand); color: #fff; }
.pcard.off .chk { visibility: hidden; }
.pcard .tag { color: var(--muted); font-size: .85rem; }
.pcard .price { margin-top: 12px; line-height: 1.2; }
.pcard .price b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.5px; }
.pcard .price span, .pcard .price small { color: var(--muted); font-weight: 600; }
.pcard .billed { min-height: 22px; margin-top: 2px; color: var(--muted); font-size: 13px; }
.pcard .sv { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 99px; background: #DDF5E7; color: #0B6B3A; font-weight: 700; font-size: 12.5px; }
.pcard .lims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 14px; }
.pcard .lims div { padding: 9px 4px; border-radius: 12px; background: #F2F4FC; text-align: center; line-height: 1.25; }
.pcard .lims b { display: block; color: var(--brand-dark); font-size: 1.3rem; font-weight: 800; }
.pcard .lims small { color: var(--muted); font-size: 12px; font-weight: 600; }
.pcard .feat { display: grid; gap: 9px; flex: 1; margin: 0 0 20px; padding: 0; list-style: none; }
.pcard .feat li { display: flex; align-items: flex-start; gap: 9px; font-size: .93rem; line-height: 1.5; }
.pcard .feat .i { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #0B9A5B; }
.pcard .feat .no { color: var(--faint); }
.pcard .feat .no .i { color: #B5BBCB; }
.pcard .pick { display: block; padding: 11px; border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--brand-dark); font-weight: 800; text-align: center; transition: background .15s, border-color .15s, color .15s; }
.pcard:hover:not(.off) .pick { border-color: var(--brand); }
.pcard.sel .pick { border-color: var(--brand); background: var(--brand); color: #fff; }
.pcard .lock { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-radius: 12px; background: #ECEEF5; color: var(--muted); font-weight: 700; font-size: 14px; }
.fl-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; font-size: 14.5px; }
.fl-note .i { flex: none; margin-top: 3px; color: var(--brand); }
.fl-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 4px 0 0; padding: 0; list-style: none; }
.fl-trust li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 600; }
.fl-trust .i { color: var(--ok); stroke-width: 2.5; }

.fl-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 25; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); box-shadow: 0 -8px 30px rgba(15, 27, 61, .08); }
.fl-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 12px 20px; }
.fl-bar .sum { min-width: 0; line-height: 1.45; }
.fl-bar .l1 b { font-size: 1.08rem; font-weight: 800; }
.fl-bar .l1 span { color: var(--muted); font-size: 14px; }
.fl-bar .l2 { color: var(--muted); font-size: 13.5px; }
.fl-bar .l2 b { color: var(--ink); }
.fl-bar .go { display: grid; justify-items: center; gap: 2px; flex: none; }
.fl-bar .go small { color: var(--muted); font-size: 12px; }

/* ---------- إنشاء الموقع (خطوتين) ---------- */
.wprog { height: 6px; margin-bottom: 8px; border-radius: 99px; background: #E0E5F4; overflow: hidden; }
.wprog i { display: block; width: 50%; height: 100%; border-radius: 99px; background: var(--brand); transition: width .3s; }
.wcount { margin: 0 0 14px; color: var(--muted); font-size: 13px; font-weight: 700; }
.ferr { margin-top: 6px; color: var(--danger-text); font-size: 13.5px; font-weight: 600; }
.field.has-err input { box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }
.field .hint .i, .later .i { width: 1.05em; height: 1.05em; }
.fl-sub { margin: 4px 0 12px; padding-top: 16px; border-top: 1px dashed var(--line); font-weight: 800; font-size: 14.5px; }
.fl-sub .opt { color: var(--faint); font-weight: 500; font-size: 13px; }
.later { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #F2F4FC; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.later .i { flex: none; margin-top: 3px; color: var(--brand); }
.fl-prev { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #FAFBFE; }
.fl-prev .av { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 800; transition: background .2s; }
.fl-prev .tx { min-width: 0; line-height: 1.4; }
.fl-prev .tx b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-prev .tx small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.fl-more { margin-top: 24px; border: 1.5px dashed #C7CFEA; border-radius: 14px; }
.fl-more summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; list-style: none; cursor: pointer; }
.fl-more summary::-webkit-details-marker { display: none; }
.fl-more summary small { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.fl-more .chev { flex: none; color: var(--faint); transition: transform .2s; }
.fl-more[open] .chev { transform: rotate(180deg); }
.fl-more .opt { color: var(--faint); font-weight: 500; font-size: 13px; }
.fl-more .more-body { padding: 4px 16px 8px; }
.wiz-after { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 960px) {
    .types2 { grid-template-columns: 1fr; }
    .plans2, .plans2[data-n="2"] { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 640px) {
    .fl-top-in { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; gap: 6px; }
    .fl-brand, .fl-out span { display: none; }
    .fl-steps { justify-content: center; min-width: 0; }
    .fl-steps li { gap: 6px; font-size: 12.5px; }
    .fl-steps li:not(.on) .lbl { display: none; }
    .fl-steps li + li::before { width: 12px; margin-inline: 4px; }
    .fl-steps .n { width: 24px; height: 24px; }
    .fl-tools { gap: 6px; }
    .fl-top .langsw a { padding: 4px 8px; font-size: 12px; }
    .fl-out { padding: 6px 9px; }
    .fl-main { padding: 20px 14px 30px; }
    .fl-reassure { font-size: 13.5px; }
    .period2 span { padding: 8px 14px; }
    .tcard { padding: 12px 14px; gap: 12px; }
    .tcard .ic { width: 40px; height: 40px; }
    .tcard:not(.on) .tx small { display: none; }
    .fl-bar .l2 .pre { display: none; }
    .fl-bar-in { gap: 10px; padding: 10px 14px; }
    .fl-bar .sum { flex: 1; }
    .fl-bar .sum > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fl-bar .l1 b { font-size: .95rem; }
    .fl-bar .go small { display: none; }
    .fl-bar .btn-lg { padding: 11px 14px; font-size: 14px; white-space: nowrap; }
    .fl-bar .btn-lg .i { display: none; }
    .wiz-nav { flex-wrap: wrap; }
    .wiz-nav > span { display: none; }
    .wiz-nav .btn-lg { flex: 1; justify-content: center; }
    .wiz-quick { order: 3; flex-basis: 100%; }
}

.locked { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
.locked .lk { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #FFF4DB; color: #B7791F; }
.locked .lk .i { width: 30px; height: 30px; }
.locked h2 { margin: 6px 0 0; }
.locked p { max-width: 460px; margin: 0 0 8px; color: var(--muted); }

/* اشتراكي */
.bill-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.bill-grid > div { padding: 12px 14px; border-radius: 12px; background: #F5F7FD; }
.bill-grid small { display: block; color: var(--muted); font-size: .8rem; }
.bill-grid b { font-size: 1.02rem; }
.bill-now .bar { height: 8px; margin-top: 14px; border-radius: 99px; background: #E5E9F6; overflow: hidden; }
.bill-now .bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent, #F2B134); }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pay-methods .pm { padding: 14px 16px; border: 1.5px dashed #c5cdea; border-radius: 14px; background: #FAFBFF; }
.pay-methods .pm small { display: block; color: var(--muted); }
.pay-methods .pm b { font-size: 1.1rem; user-select: all; }
.bill-list { display: grid; gap: 6px; margin-top: 14px; }
.bill-list .bl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #F5F7FD; font-size: .92rem; }
.pill.danger { background: #FDECEA; color: #A93226; }

/* ---------- لوحة المالك ---------- */
.o-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.o-stat { display: block; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.o-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 27, 61, .08); }
.o-stat small { display: block; color: var(--muted); font-size: .85rem; }
.o-stat b { font-size: 1.9rem; font-weight: 800; }
.o-stat b i { font-size: .9rem; font-style: normal; color: var(--muted); font-weight: 600; }
.o-stat.warn b { color: #B7791F; } .o-stat.ok b { color: #0B8A52; } .o-stat.bad b { color: #C0392B; }
.o-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.o-plan { display: block; padding: 16px 18px; border-radius: 16px; background: #F5F7FD; color: inherit; text-decoration: none; }
.o-plan h3 { margin: 0; font-size: 1rem; }
.o-plan .big { font-size: 2.2rem; font-weight: 800; line-height: 1.3; }
.o-plan .row { display: flex; justify-content: space-between; padding: 3px 0; font-size: .9rem; color: var(--muted); }
.o-plan .row b { color: var(--ink); }
.o-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.o-row:last-child { border-bottom: 0; }
a.o-row:hover { background: #F8F9FE; }
.o-row small { display: block; color: var(--muted); font-size: .82rem; font-weight: 500; }
.o-row .d { text-align: end; font-weight: 700; display: grid; justify-items: end; gap: 4px; }
.o-table-wrap { overflow-x: auto; }
.o-table { width: 100%; border-collapse: collapse; font-size: .9rem; white-space: nowrap; }
.o-table th { padding: 12px 14px; text-align: start; background: #F5F7FD; color: var(--muted); font-weight: 700; font-size: .8rem; }
.o-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.o-table td small { display: block; color: var(--muted); font-size: .78rem; }
.o-table a:not(.btn) { color: inherit; text-decoration: none; }
.o-preview { margin: 4px 0 16px; padding: 10px 14px; border-radius: 12px; background: #EEF8F2; color: #0B6B3A; font-weight: 700; }
.tabs.sub { margin-top: -6px; }

/* ---------- المساعدين ---------- */
.as-item { margin-bottom: 12px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.as-item.off { background: #FAFBFE; }
.as-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.as-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; font-size: 18px; }
.as-item.off .as-av { background: #ECEFF7; color: #7B8798; }
.as-id { flex: 1 1 200px; min-width: 0; line-height: 1.5; }
.as-id b { font-size: 16px; }
.as-id small { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: 13.5px; }
.as-id small span { display: inline-flex; align-items: center; gap: 5px; }
.as-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.as-link { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; border: 1px dashed #C9CFE0; border-radius: 10px; background: #FAFBFE; }
.as-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; font-size: 13px; color: #38405E; }
.as-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.meter-wrap { flex: 0 1 160px; min-width: 90px; }
.meter { height: 8px; border-radius: 999px; background: #ECEFF7; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.cred { border: 1.5px solid #BCE3CE; background: var(--ok-soft); }
.cred-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.cred-rows small { display: block; margin-top: 10px; color: var(--ok-text); font-weight: 700; }
.cred .as-link { background: #fff; }
.pw-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.pw-row .pw { flex: 1 1 220px; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; color: var(--muted); font-size: 13.5px; }
.chip { padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #2C3558; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.chip:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.perm-box { padding: 14px 16px 8px; border: 1px solid var(--line); border-radius: 14px; background: #FAFBFE; }
.perm-box h4 { margin: 0 0 10px; font-size: 14px; font-weight: 800; }
.perm-box .check { display: flex; align-items: flex-start; margin-bottom: 10px; }
.perm-box .check input { margin-top: 3px; flex: none; }
.perm-box .is-locked { opacity: .65; cursor: not-allowed; }
.lockhint { display: block; color: var(--warn); font-weight: 600; font-size: 12.5px; }
.never { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; padding: 12px 16px; border-radius: 12px; background: #F1F4FB; color: #38405E; font-size: 14px; }
.never .i { flex: none; margin-top: 2px; color: var(--brand-dark); font-size: 20px; }
.never b { display: block; margin-bottom: 2px; }
.assistant-panel .bnav { grid-template-columns: repeat(var(--n, 3), 1fr); }

/* ---------- فيديو شرح القسم ---------- */
.hh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.help-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; padding-inline: 4px 14px; border: 1px solid #D5DBFA; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: 13.5px; line-height: 1; cursor: pointer; transition: background .15s, box-shadow .15s, transform .15s; }
.help-btn:hover { background: #DDE3FB; box-shadow: 0 2px 10px rgba(47, 63, 191, .18); transform: translateY(-1px); }
.help-btn .hi { display: grid; place-items: center; flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(15, 27, 61, .12); }
.help-btn .hi img { width: 100%; height: 100%; object-fit: contain; }
.help-btn .hi .i { width: 18px; height: 18px; }
.help-btn.in-topbar { display: none; }
.studio-panel .sp-head .help-btn { margin-inline-start: auto; }
@media (max-width: 960px) {
    .page-head .help-btn { display: none; }
    .help-btn.in-topbar { display: inline-flex; padding: 3px; padding-inline: 3px; }
    .help-btn.in-topbar .hl { display: none; }
    .studio-panel .sp-head .help-btn .hl { display: none; }
    .studio-panel .sp-head .help-btn { padding: 3px; }
}

.hv-lock { overflow: hidden; }
.hv-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.hv-back { position: absolute; inset: 0; background: rgba(15, 27, 61, .62); backdrop-filter: blur(3px); animation: hvf .18s ease-out; }
.hv-card { position: relative; width: min(900px, 100%); max-height: 100%; overflow-y: auto; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(15, 27, 61, .4); animation: hvp .22s ease-out; }
.hv-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 14px; padding-inline: 16px 12px; }
.hv-head .hi { display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.hv-head .hi img { width: 100%; height: 100%; object-fit: contain; }
.hv-head .tt { flex: 1; min-width: 0; line-height: 1.35; }
.hv-head .tt small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.hv-head h2 { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.hv-player { position: relative; aspect-ratio: 16 / 9; background: #0B1226; }
.hv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hv-foot { padding: 10px 16px; font-size: 13px; }
.hv-foot .yt { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.hv-foot .yt:hover { color: var(--brand-dark); text-decoration: underline; }
.hv-list { padding: 4px 16px 16px; }
.hv-list .items { display: grid; gap: 6px; }
.hv-list .it { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: start; cursor: pointer; font-weight: 600; }
.hv-list .it:hover { border-color: #B9C1E6; }
.hv-list .it.on { border-color: var(--brand); background: var(--brand-soft); }
.hv-list .it .n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #E8EBF5; font-size: 12px; }
.hv-list .it.on .n { background: var(--brand); color: #fff; }
@keyframes hvf { from { opacity: 0; } }
@keyframes hvp { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 640px) {
    .hv-modal { padding: 0; align-items: end; }
    .hv-card { border-radius: 20px 20px 0 0; }
}

/* لوحة المالك: إدارة فيديوهات الشرح */
.hv-icon { display: flex; align-items: center; gap: 16px; }
.hv-icon .prev { display: grid; place-items: center; flex: none; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--brand-soft); color: var(--brand); }
.hv-icon .prev img { width: 100%; height: 100%; object-fit: contain; }
.hv-icon .body { flex: 1; min-width: 0; }
.hv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hv-inline input[type=file] { max-width: 260px; font-size: 13px; }
.hv-group { margin-top: 18px; }
.hv-group:first-of-type { margin-top: 0; }
.hv-gh { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.hv-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.hv-row.off { background: #F7F8FC; }
.hv-row.off .th, .hv-row.off .tx { opacity: .55; }
.hv-row .th { width: 120px; height: 68px; object-fit: cover; border-radius: 10px; background: #0B1226; }
.hv-row .tx { min-width: 0; line-height: 1.45; }
.hv-row .tx b { display: block; }
.hv-row .tx small { display: block; color: var(--muted); }
.hv-row .tx .ln { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: 12.5px; text-align: start; }
.hv-row .ac { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.hv-edit { grid-column: 1 / -1; }
.hv-edit summary { display: inline-flex; list-style: none; cursor: pointer; }
.hv-edit summary::-webkit-details-marker { display: none; }
.hv-edit form { margin-top: 12px; padding: 14px; border: 1px dashed #C7CFEA; border-radius: 12px; background: #FAFBFE; }
@media (max-width: 720px) {
    .hv-row { grid-template-columns: 96px minmax(0, 1fr); }
    .hv-row .th { width: 96px; height: 54px; }
    .hv-row .ac { grid-column: 1 / -1; justify-content: flex-start; }
    .hv-icon { flex-direction: column; align-items: flex-start; }
}


/* ---------- المعرض والفيديوهات: خيارات العرض والحدود ---------- */
.glay-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.glay-opt { position: relative; display: block; cursor: pointer; }
.glay-opt input { position: absolute; opacity: 0; }
.glay-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .12s, background .12s; }
.glay-card b { font-size: 14.5px; }
.glay-card small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.glay-pic { display: block; margin-bottom: 4px; padding: 6px; border-radius: 8px; background: var(--brand-soft); }
.glay-pic svg { display: block; width: 100%; height: auto; fill: var(--brand); }
.glay-opt:hover .glay-card { border-color: #B9C0EE; }
.glay-opt:has(input:checked) .glay-card { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(47, 63, 191, .12); }
.glay-opt:has(input:focus-visible) .glay-card { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
/* الإعدادات الفرعية بتظهر حسب الطريقة المختارة */
.glay:has(input[value=column]:checked) [data-glay-cols],
.glay:has(input[value=masonry]:checked) [data-glay-shape] { display: none; }
.glay:has(input[value=column]:checked) .glay-sub,
.glay:has(input[value=masonry]:checked) .glay-sub { grid-template-columns: 1fr; }
.glay:has(input[value=masonry]:checked) [data-glay-cols] { max-width: 50%; }

.quota-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; padding: 12px 16px; border: 1px solid #C9D0F3; border-radius: var(--radius-sm); background: var(--brand-soft); color: #2C3558; font-size: 14px; }
.quota-bar .i { color: var(--brand-dark); }
.quota-bar a { margin-inline-start: auto; font-weight: 800; color: var(--brand-dark); }
.quota-bar.full { border-color: #EBCB85; background: var(--warn-soft); color: var(--warn); }
.quota-bar.full .i, .quota-bar.full a { color: var(--warn); }

.plat-row { display: flex; align-items: center; gap: 14px; }
.plat-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.plat-row b { font-size: 16px; }
.plat-badge { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #3A4260; color: #fff; font-size: 22px; }
.plat-badge.p-youtube { background: #D92D2D; }
.plat-badge.p-tiktok { background: #111; }
.plat-badge.p-facebook { background: #1877F2; }
.plat-badge.p-upload { background: linear-gradient(135deg, #2B6CB0, #0E7C86); }
.vidfield .imgfield-preview video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; background: #0B1220; }
.plat-badge.p-instagram { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }

.blk-sub { display: block; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.usage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.usage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13.5px; }
.usage-pill.full { background: var(--warn-soft); color: var(--warn); }
.usage-link { margin-inline-start: auto; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* نافذة منبثقة بسيطة */
dialog.dlg { width: min(480px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px rgba(15, 27, 61, .35); }
dialog.dlg::backdrop { background: rgba(15, 27, 61, .55); }
.dlg-body { padding: 22px; }
.dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dlg-h h3 { font-size: 18px; font-weight: 800; }
.dlg-f { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 760px) {
    .glay-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glay:has(input[value=masonry]:checked) [data-glay-cols] { max-width: none; }
}

/* ================= أدوات النمو: التخصص، الاكتمال، الإحصائيات، المحتوى الجاهز ================= */

/* اختيار التخصص (قائمة فيها بحث) */
.spk { position: relative; }
.spk select[data-spec-select] { width: 100%; }
.spk.enh select[data-spec-select] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.spk-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.spk-btn:hover { border-color: #B9C0DA; }
.spk-btn:focus-visible, .spk.open .spk-btn { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 63, 191, .15); }
.spk-btn .ph { color: var(--faint); }
.spk-btn .alt { margin-inline-start: 6px; color: var(--faint); font-size: 12.5px; }
.spk-btn .chev { margin-inline-start: auto; color: var(--faint); transition: transform .15s; }
.spk.open .spk-btn .chev { transform: rotate(180deg); }
.spk-pop { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 40; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(15, 27, 61, .18); }
.spk-pop[hidden] { display: none; }
.spk-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.spk-search .i { color: var(--faint); }
.spk-search input { flex: 1; min-width: 0; padding: 4px 0; border: 0 !important; box-shadow: none !important; outline: none; font: inherit; background: transparent; }
.spk-list { max-height: 300px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.spk-list .g { padding: 10px 10px 4px; color: var(--faint); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.spk-list .o { display: flex; align-items: baseline; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.spk-list .o small { color: var(--faint); font-size: 12px; }
.spk-list .o.act, .spk-list .o:hover { background: var(--brand-soft); }
.spk-list .o[aria-selected=true] { color: var(--brand-dark); font-weight: 800; }
.spk-list .o.other { margin-top: 4px; border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; color: var(--brand-dark); font-weight: 700; }
.spk-list .none { padding: 14px 10px; color: var(--muted); font-size: 13.5px; }
.spk-other { margin: 12px 0 0; }
.spk-hint a { margin-inline-start: 4px; font-weight: 700; color: var(--brand-dark); }
.pro-tag, .nav-lock { display: inline-block; padding: 1px 6px; border-radius: 6px; background: linear-gradient(135deg, #F2B134, #E09A12); color: #0F1B3D; font-size: 10px; font-weight: 800; letter-spacing: .03em; vertical-align: middle; }
.nav-lock { margin-inline-start: auto; }

/* خيار المحتوى الجاهز في البداية */
.tpl-opt { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; padding: 14px 16px; border: 1.5px solid #C9D0F3; border-radius: 12px; background: linear-gradient(135deg, #F4F6FF, #FFF9EC); cursor: pointer; }
.tpl-opt input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--brand); flex: none; }
.tpl-opt .ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; }
.tpl-opt .tx b { display: block; font-size: 15px; }
.tpl-opt .tx small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.tpl-opt.locked { cursor: default; background: #F7F8FB; border-color: var(--line); }
.tpl-opt.locked .ic { background: #E9ECF4; color: var(--faint); }

/* اكتمال الموقع في القايمة الجانبية */
.side-prog { display: block; margin: 0 6px 12px; padding: 10px 12px; border: 1px solid #E5E0C9; border-radius: 12px; background: linear-gradient(135deg, #FFFBF0, #FFF4DB); color: var(--ink); text-decoration: none; }
.side-prog:hover { border-color: #E6C56E; }
.sp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sp-top b { font-size: 13.5px; }
.sp-top small { color: var(--warn); font-size: 12px; font-weight: 700; }
.sp-bar { display: block; height: 6px; margin: 7px 0 6px; border-radius: 99px; background: rgba(122, 82, 0, .12); overflow: hidden; }
.sp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #E09A12, #F2B134); }
.sp-next { display: block; color: var(--warn); font-size: 12px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* الاكتمال في الصفحة الرئيسية */
.prog-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; align-items: center; margin-bottom: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(420px 220px at 0% 0%, rgba(242, 177, 52, .16), transparent 70%), #fff; box-shadow: var(--shadow); }
[dir=rtl] .prog-hero { background: radial-gradient(420px 220px at 100% 0%, rgba(242, 177, 52, .16), transparent 70%), #fff; }
.ph-ring { position: relative; width: 112px; height: 112px; }
.ph-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ph-ring circle { fill: none; stroke-width: 11; }
.ph-ring .bg { stroke: #ECEFF7; }
.ph-ring .fg { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1); }
.lv-start .ph-ring .fg { stroke: #E08A1E; }
.lv-mid .ph-ring .fg { stroke: #E0A412; }
.lv-near .ph-ring .fg { stroke: var(--brand); }
.lv-done .ph-ring .fg { stroke: var(--ok); }
.ph-ring b { position: absolute; inset: 0; display: grid; place-content: center; font-size: 28px; font-weight: 800; line-height: 1; }
.ph-ring b small { font-size: 14px; color: var(--muted); }
.ph-ring b { grid-auto-flow: column; align-items: baseline; gap: 1px; }
.ph-level { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 12px; font-weight: 800; }
.lv-near .ph-level { background: var(--brand-soft); color: var(--brand-dark); }
.lv-done .ph-level { background: var(--ok-soft); color: var(--ok-text); }
.ph-main h2 { margin: 0 0 4px; font-size: 21px; }
.ph-main p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.ph-next { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.ph-next a { position: relative; display: grid; gap: 1px; padding: 10px 14px; padding-inline-start: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFCFE; color: var(--ink); text-decoration: none; transition: border-color .12s, transform .12s; counter-increment: st; }
.ph-next a::before { content: counter(st); position: absolute; inset-inline-start: 12px; top: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }
.ph-next a:hover { border-color: #C9CFE0; transform: translateY(-1px); }
.ph-next b { font-size: 14.5px; }
.ph-next small { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ph-next .w { justify-self: start; margin-bottom: 2px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.ph-next .w3 { background: #FDE7D2; color: #8A4A0B; }
.ph-next .w2 { background: var(--brand-soft); color: var(--brand-dark); }
.ph-next .w1 { background: #EEF0F4; color: var(--muted); }
.ph-all { grid-column: 1 / -1; border-top: 1px solid var(--line-2); padding-top: 10px; }
.ph-all summary { display: flex; align-items: center; gap: 8px; width: max-content; color: var(--brand-dark); font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.ph-all summary::-webkit-details-marker { display: none; }
.ph-all[open] summary .chev { transform: rotate(180deg); }
.ph-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.ph-tiers h3 { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ph-tiers .checklist { margin-top: 6px; }
.prog-hero.complete { grid-template-columns: auto minmax(0, 1fr); background: linear-gradient(135deg, #F0FAF4, #fff); }
.prog-hero.complete .ph-all { display: none; }

/* مصادر الزيارات (أشرطة أفقية) */
.hbars { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.hbars li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.hbars.big li { grid-template-columns: 130px minmax(0, 1fr) auto auto; }
.hbars .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.hbars .tr { height: 10px; border-radius: 99px; background: #EEF0F6; overflow: hidden; }
.hbars .tr i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.hbars.acts .tr i { background: #E0A412; }
.hbars b { min-width: 28px; text-align: end; font-variant-numeric: tabular-nums; }
.hbars small { min-width: 38px; color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.mini-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin: 16px 0 14px; }
.mini-acts div { padding: 10px; border-radius: 10px; background: #F6F7FB; text-align: center; }
.mini-acts b { display: block; font-size: 20px; line-height: 1.2; }
.mini-acts span { color: var(--muted); font-size: 12px; }
.teaser { text-align: center; }
.teaser p { margin: 12px 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.tz-fake { display: grid; gap: 8px; filter: blur(.4px); opacity: .7; }
.tz-fake span { display: block; width: var(--w); padding: 5px 10px; border-radius: 8px; background: linear-gradient(90deg, #DCE1F7, #EEF1FD); color: var(--brand-dark); font-size: 12px; font-weight: 700; text-align: start; }

/* المحتوى الجاهز */
.tpl-pick { padding: 18px 20px; }
.tpl-pick-row { display: flex; gap: 12px; align-items: flex-end; }
.tpl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.tpl-side { position: sticky; top: 18px; }
.tpl-langs { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: #ECEFF7; }
.tpl-langs button { padding: 5px 16px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.tpl-langs button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tpl-bio { margin: 0; color: #2C3558; line-height: 1.9; }
.tpl-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tpl-svc { padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFCFE; }
.tpl-svc b { display: block; margin-bottom: 4px; font-size: 14.5px; }
.tpl-svc span { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.tpl-faq details { border-top: 1px solid var(--line-2); }
.tpl-faq details:first-child { border-top: 0; }
.tpl-faq summary { padding: 12px 2px; font-weight: 700; cursor: pointer; }
.tpl-faq p { margin: 0 0 12px; color: var(--muted); line-height: 1.8; }
.tpl-parts, .tpl-mode { display: grid; gap: 10px; }
.tpl-parts .check, .tpl-mode .radio { align-items: flex-start; }
.tpl-parts .check span, .tpl-mode .radio span { display: grid; gap: 2px; }
.tpl-parts small, .tpl-mode small { color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.radio input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.check input { flex: none; }
.tpl-sw { display: inline-flex !important; align-items: center; gap: 4px; }
.tpl-sw i { width: 14px; height: 14px; border-radius: 50%; }
.tpl-links { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 6px; }
.tpl-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-dark); font-weight: 700; font-size: 13.5px; text-decoration: none; }

/* الإحصائيات */
.seg a { padding: 5px 14px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.stats4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat .delta { display: inline-flex; align-items: center; gap: 2px; margin-top: 3px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 12px; font-weight: 800; }
.stat .delta .i { width: 13px; height: 13px; }
.stat .delta.up { background: var(--ok-soft); color: var(--ok-text); }
.stat .delta.down { background: var(--danger-soft); color: var(--danger-text); }
.vchart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; height: 220px; margin-top: 10px; }
.vgrid { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; text-align: end; }
.vbars { position: relative; display: flex; align-items: flex-end; gap: 4px; height: 100%; border-bottom: 1px solid var(--line); background: linear-gradient(to top, var(--line-2) 1px, transparent 1px) 0 50% / 100% 50%; }
.vchart.dense .vbars { gap: 2px; }
.vb { position: relative; flex: 1; display: flex; align-items: flex-end; height: 100%; outline: none; }
.vb i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--brand); opacity: .9; transition: opacity .12s; }
.vb:hover i, .vb:focus i { opacity: 1; background: var(--brand-dark); }
.vb .tip-b { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%; z-index: 3; display: grid; padding: 5px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(calc(var(--dir) * 50%), 4px); transition: .12s; }
.vb .tip-b b { font-size: 12.5px; }
.vb:hover .tip-b, .vb:focus .tip-b { opacity: 1; transform: translate(calc(var(--dir) * 50%), 0); }
.vb:nth-child(-n+4) .tip-b { inset-inline-start: 0; transform: none; }
.vb:nth-last-child(-n+4) .tip-b { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.vb .tip-b { bottom: auto; top: -46px; }
.st-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: flex; gap: 2px; height: 18px; margin: 8px 0 14px; border-radius: 99px; overflow: hidden; }
.stack i { display: block; min-width: 4px; }
.card { --c1: #2F3FBF; --c2: #eb6834; --c3: #1baf7a; }
.legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.legend small { color: var(--muted); }
.wbars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 170px; padding-top: 8px; }
.wb { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.wb i { align-self: end; display: block; width: 100%; max-width: 36px; border-radius: 6px 6px 0 0; background: #C9D0F3; }
.wb.top i { background: var(--brand); }
.wb .v { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.wb .d { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wb { height: 100%; }
.tips-card ul { display: grid; gap: 8px; margin: 0; padding-inline-start: 20px; color: #2C3558; line-height: 1.8; }
.st-table summary { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; list-style: none; }
.st-table summary::-webkit-details-marker { display: none; }
.st-table[open] summary .chev { transform: rotate(180deg); }
.st-table .o-table-wrap { margin-top: 12px; max-height: 360px; overflow: auto; }

/* قفل الميزة */
.locked.rich { padding-bottom: 40px; }
.lk-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 10px; margin: 6px 0 14px; padding: 0; list-style: none; text-align: start; }
.lk-perks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #FBFCFE; font-size: 14px; line-height: 1.5; }
.lk-perks .ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); }

@media (max-width: 1080px) {
    .prog-hero { grid-template-columns: auto minmax(0, 1fr); }
    .ph-next { grid-column: 1 / -1; }
    .tpl-cols { grid-template-columns: 1fr; }
    .tpl-side { position: static; }
}
@media (max-width: 760px) {
    .st-cols { grid-template-columns: 1fr; }
    .ph-tiers { grid-template-columns: 1fr; }
    .lk-perks { grid-template-columns: 1fr; }
    .hbars.big li { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
}
@media (max-width: 560px) {
    .prog-hero { grid-template-columns: 1fr; justify-items: start; padding: 18px; }
    .ph-ring { width: 92px; height: 92px; }
    .vchart { height: 180px; }
    .wb .d { font-size: 10px; }
}

/* ---------- الوصول لحد الباقة ---------- */
.limit-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #F3D9A0; border-radius: 14px; background: linear-gradient(120deg, #FFF8E7, #FFF3D6); outline: none; }
.limit-box .lk { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #B7791F; box-shadow: 0 4px 12px rgba(183, 121, 31, .15); }
.limit-box .tx { flex: 1 1 260px; display: grid; gap: 2px; line-height: 1.6; }
.limit-box .tx b { color: var(--ink); font-size: 15px; }
.limit-box .tx span { color: #6B5A35; font-size: 14px; }
.limit-box .btn { flex: none; }
.limit-box.pulse { animation: lim-pulse .9s ease; }
@keyframes lim-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 177, 52, 0); } 30% { box-shadow: 0 0 0 6px rgba(242, 177, 52, .45); } }
.typecard.is-locked { cursor: pointer; opacity: .78; background: #FAFBFE; }
.typecard.is-locked:hover { opacity: 1; border-color: #E9C46A; }
.typecard.is-locked .ic { background: #F1F3F9; color: var(--muted); }
.lock-pill { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 0 8px; border-radius: 99px; background: #FFF2D1; color: #7A5200; font-size: 11.5px; font-weight: 800; vertical-align: 2px; }
.lock-pill .i { width: 12px; height: 12px; }

/* ---------- استوديو التصميم: تبويبات وكروت بصرية ---------- */
.st-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 18px 10px; padding: 4px; border-radius: 14px; background: #EEF1F7; }
.st-tabs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.st-tabs button .i { font-size: 18px; }
.st-tabs button:hover { color: var(--ink); }
.st-tabs button[aria-selected=true] { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 27, 61, .12), 0 4px 12px rgba(15, 27, 61, .06); }
.st-pane { animation: st-in .18s ease; }
@keyframes st-in { from { opacity: 0; transform: translateY(4px); } }
.st-sec + .st-sec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.st-h { margin-bottom: 12px; }
.st-h h2 { font-size: 16px; font-weight: 800; }
.st-h span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.fpair { position: relative; padding: 6px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-align: center; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.fpair:hover { border-color: #BDC5DD; transform: translateY(-1px); }
.fpair[aria-pressed=true] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 63, 191, .15); }
.tpls .lay:has(input:checked)::before, .fpair[aria-pressed=true]::after { content: ""; position: absolute; top: -7px; inset-inline-end: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px #fff; }
.tpls .lay:has(input:checked) { border-color: #2F3FBF; box-shadow: 0 0 0 3px rgba(47, 63, 191, .15); }
.tpls .lay:has(input:checked)::before { z-index: 1; background-color: #2F3FBF; }
.tpl-meta { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.tpl-meta i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 27, 61, .12); }
.tpl-meta em { margin-inline-start: auto; color: var(--ink); font-size: 13px; font-style: normal; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.tpl-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok-text); font-size: 13px; font-weight: 600; line-height: 1.5; }
.tpl-note > span { flex: 1 1 180px; }
.tpl-note .btn { padding: 4px 10px; font-size: 12.5px; }
.adv-lg { margin-top: 0; }
.adv-lg > summary { align-items: flex-start; padding: 13px 12px; }
.adv-lg > summary > .i:first-child { margin-top: 2px; }
.adv-t { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.adv-t small { color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.adv-sub { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.adv-sub-h { margin-bottom: 8px; color: var(--brand-dark); font-size: 13.5px; font-weight: 800; }
.adv { margin-top: 16px; border: 1px dashed #C9D0E3; border-radius: 12px; background: #FAFBFE; }
.adv > summary { display: flex; align-items: center; gap: 8px; padding: 11px 12px; color: var(--brand-dark); font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary small { color: var(--muted); font-size: 12px; font-weight: 600; }
.adv > summary .chev { margin-inline-start: auto; color: var(--faint); transition: transform .15s; }
.adv[open] > summary .chev { transform: rotate(180deg); }
.adv[open] { border-style: solid; background: #fff; }
.adv-body { padding: 2px 12px 14px; }
.fpairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fpair { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 12px 10px; text-align: start; }
.fpair b { font-size: 19px; font-weight: 700; line-height: 1.35; }
.fpair span { color: #4A5168; font-size: 12.5px; line-height: 1.5; }
.fpair small { margin-top: 6px; padding: 1px 8px; border-radius: 99px; background: #F1F3F9; color: var(--muted); font-size: 11.5px; font-weight: 800; }
.fpair[aria-pressed=true] small { background: var(--brand-soft); color: var(--brand-dark); }
.ui-grp { margin-bottom: 8px; border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow: hidden; }
.ui-grp > summary { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; font-weight: 800; font-size: 14.5px; }
.ui-grp > summary::-webkit-details-marker { display: none; }
.ui-grp > summary .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 15px; }
.ui-grp > summary .t { flex: 1; min-width: 0; }
.ui-grp > summary .cnt { padding: 1px 8px; border-radius: 99px; background: var(--ok-soft); color: var(--ok-text); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.ui-grp > summary .cnt.none { background: #F1F3F9; color: var(--muted); }
.ui-grp > summary .chev { color: var(--faint); transition: transform .15s; }
.ui-grp[open] > summary .chev { transform: rotate(180deg); }
.ui-grp .tgls { margin: 0 10px 10px; }
.st-dirty { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
@media (max-width: 960px) {
    .st-tabs { margin: 0 0 10px; position: sticky; top: 0; z-index: 5; }
}
@media (max-width: 420px) {
    .fpairs { grid-template-columns: 1fr; }
}

/* ---------- سطح المكتب: كل جزء بيسكرول لوحده ----------
   القائمة الجانبية ليها شريط سحب على طرفها الخارجي (ناحية حافة الشاشة)،
   والمحتوى ليه شريط سحب جنب القائمة، فكل شريط جنب الحاجة اللي بيحرّكها. */
@media (min-width: 961px) {
    html:has(> body > .app), body:has(> .app) { height: 100%; overflow: hidden; }
    body > .app { height: 100vh; height: 100dvh; min-height: 0; }
    .app > .side { height: 100%; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent; }
    .app > .main { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #B9C0D6 transparent; }
    [dir=rtl] .app > .side, [dir=rtl] .app > .main { direction: ltr; }
    [dir=rtl] .app > .side > *, [dir=rtl] .app > .main > * { direction: rtl; }
    [dir=ltr] .app > .side, [dir=ltr] .app > .main { direction: rtl; }
    [dir=ltr] .app > .side > *, [dir=ltr] .app > .main > * { direction: ltr; }
    .app > .side::-webkit-scrollbar, .app > .main::-webkit-scrollbar { width: 10px; }
    .app > .side::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: rgba(255, 255, 255, .26) padding-box; }
    .app > .side::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .42); }
    .app > .main::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: #B9C0D6 padding-box; }
    .app > .main::-webkit-scrollbar-thumb:hover { background-color: #8F98B5; }
    .app > .side::-webkit-scrollbar-track, .app > .main::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- قايمة الحجوزات: الأيام ورقم الدور ---------- */
.bk-days { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; }
.bk-days > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: #fff; border: 1px dashed var(--line); color: var(--muted); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.bk-days > a.on { border-style: solid; border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.bk-dayform input { padding: 5px 10px; border: 1px dashed var(--line); border-radius: 10px; background: #fff; color: var(--muted); font-size: 13.5px; }
.bk-dayhead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-bottom: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; }
.bk-dayhead span { opacity: .8; font-size: 14px; }
.bk-no { flex: none; display: grid; place-items: center; align-content: center; width: 60px; height: 60px; border-radius: 16px; background: var(--brand-soft); color: var(--brand-dark); line-height: 1; }
.bk-no small { font-size: 11px; font-weight: 700; opacity: .75; }
.bk-no b { font-size: 26px; font-weight: 900; }
.bk-item .bk-when { flex: 1 1 200px; }
.bk-item .bk-when small { display: block; margin-top: 2px; }
.bk-item .meta .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .5px; }
.bk-item.is-dim { opacity: .62; }
.bk-item.is-dim:hover { opacity: 1; }
.bk-extra { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bk-extra div { display: inline-flex; gap: 6px; padding: 4px 10px; border-radius: 8px; background: #F4F6FB; font-size: 13.5px; }
.bk-extra dt { color: var(--muted); }
.bk-extra dt::after { content: ":"; }
.bk-extra dd { margin: 0; font-weight: 700; }
.pill.done { background: #E6EAF5; color: #3A466E; }

/* ---------- إعدادات الحجز ---------- */
.bkset-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.bkset-side { position: sticky; top: 20px; }
@media (max-width: 1100px) { .bkset-grid { grid-template-columns: minmax(0, 1fr); } .bkset-side { position: static; order: -1; display: none; } }
.bk-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .bk-modes { grid-template-columns: 1fr; } }
.bk-mode { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.bk-mode input { position: absolute; opacity: 0; }
.bk-mode:hover { border-color: #B8C2EE; }
.bk-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(47, 63, 191, .12); }
.bk-mode:has(input:focus-visible) { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.bk-mode .tx b { display: block; font-size: 15.5px; }
.bk-mode .tx span { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.bk-mode .tick { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: transparent; }
.bk-mode:has(input:checked) .tick { background: var(--brand); border-color: var(--brand); color: #fff; }
.bk-mode .tick .i { width: 15px; height: 15px; }
.bk-mode-art { display: grid; place-items: center; height: 92px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); }
.bk-mode-art .tk { display: grid; justify-items: center; padding: 8px 18px; border-radius: 12px; background: var(--ink); color: #fff; line-height: 1.1; box-shadow: 0 6px 16px rgba(15, 27, 61, .2); }
.bk-mode-art .tk small { font-size: 11px; opacity: .75; }
.bk-mode-art .tk b { font-size: 30px; color: var(--accent); }
.bk-mode-art .tk i { font-style: normal; font-size: 11.5px; opacity: .85; }
.bk-mode-art .rq { display: grid; gap: 6px; width: 120px; }
.bk-mode-art .rq i { display: block; height: 12px; border-radius: 6px; background: #E3E6F0; }
.bk-mode-art .rq i:nth-child(2) { width: 70%; }
.bk-mode-art .rq i.ok { width: 50%; height: 18px; border-radius: 9px; background: var(--brand); }
.bk-dur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .bk-dur { grid-template-columns: 1fr; } }
.bk-dur .opt-card > span { display: grid; gap: 2px; }
.bk-dur .opt-card small { font-size: 12.5px; }
.unit { display: flex; align-items: stretch; }
.unit input { flex: 1; border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.unit span { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--line); border-inline-start: 0; border-start-end-radius: 10px; border-end-end-radius: 10px; background: #F4F6FB; color: var(--muted); font-weight: 700; font-size: 14px; }
.bk-example { margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: #FFF8E8; border: 1px solid #F4E1B3; color: #6B4A00; font-size: 14px; }
.bk-fields { display: grid; gap: 8px; }
.bkf { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: background .15s, opacity .15s; }
.bkf.is-off { background: #F7F8FB; }
.bkf.is-off .bkf-body, .bkf.is-off .bkf-ic { opacity: .55; }
.bkf.is-custom { border-style: dashed; border-color: #C9D0EA; }
.bkf.moved { animation: bkf-moved .6s ease; }
@keyframes bkf-moved { from { background: var(--brand-soft); } to { background: #fff; } }
.bkf-move { display: grid; gap: 2px; }
.bkf-move .btn { width: 28px; height: 24px; min-height: 0; padding: 0; }
.bkf-ic { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 2px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); }
.bkf-body { display: grid; gap: 8px; min-width: 0; }
.bkf-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bkf-top input, .bkf-top select { flex: 1 1 160px; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14.5px; }
.bkf-top select { flex: 0 1 170px; }
.bkf-type { flex: 0 1 auto; color: var(--muted); font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: #F1F3F9; }
.bkf-opts textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.bkf-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; }
.bkf-flags .check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.bkf-end { display: flex; align-items: center; gap: 4px; padding-top: 6px; }
.btn.danger { color: var(--danger); }
@media (max-width: 640px) { .bkf { grid-template-columns: auto minmax(0, 1fr) auto; } .bkf-ic { display: none; } }
.bk-phone { overflow: hidden; border: 8px solid var(--ink); border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.bk-phone-h { padding: 14px 16px 10px; background: var(--ink); color: #fff; }
.bk-phone-h b { display: block; font-size: 15px; }
.bk-phone-h small { color: var(--accent); font-size: 12px; font-weight: 700; }
.bk-phone-b { display: grid; gap: 9px; padding: 14px; min-height: 120px; }
.bk-phone-b .pf span { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; }
.bk-phone-b .pf em { color: var(--danger); font-style: normal; }
.bk-phone-b .pf i { display: block; height: 30px; border: 1.5px solid #D9DEEA; border-radius: 8px; }
.bk-phone-b .pf i.ta { height: 52px; }
.bk-phone-b .pf i.sel { background: linear-gradient(to var(--dir-end, left), transparent 85%, #F1F3F9 85%); }
.bk-phone-b .pf-q { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px dashed #B8C2EE; background: var(--brand-soft); font-size: 12px; color: var(--brand-dark); }
.bk-phone-b .pf-q b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand); color: #fff; }
.bk-phone-f { padding: 0 14px 16px; }
.bk-phone-f span { display: block; padding: 9px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 13.5px; text-align: center; }

/* ---------- سجل الحالات ---------- */
.cs-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: center; background: linear-gradient(135deg, #fff 55%, var(--brand-soft)); }
.cs-hero h2 { margin: 10px 0 8px; font-size: 21px; }
.cs-hero ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: #38405E; }
.cs-hero li { display: flex; gap: 8px; align-items: flex-start; }
.cs-hero li .i { color: var(--brand); margin-top: 3px; }
.cs-mini { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cs-mini > div { display: grid; grid-template-columns: 1.2fr 1fr .8fr .9fr; gap: 6px; }
.cs-mini i { display: block; height: 12px; border-radius: 4px; background: #ECEFF7; }
.cs-mini .h i { background: var(--ink); opacity: .85; }
.cs-mini i.f { display: flex; gap: 3px; background: none; }
.cs-mini i.f b { width: 14px; height: 12px; border-radius: 3px; background: var(--accent); }
@media (max-width: 760px) { .cs-hero { grid-template-columns: 1fr; } .cs-hero-art { display: none; } }
.cs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cs-side { position: sticky; top: 16px; }
@media (max-width: 1000px) { .cs-grid { grid-template-columns: 1fr; } .cs-side { position: static; } }
.card-h .ic:not(:has(svg)) { font-weight: 900; }
.cs-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cs-pack { display: grid; justify-items: start; gap: 4px; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: start; cursor: pointer; transition: border-color .12s, background .12s; }
.cs-pack:hover { border-color: #B8C2EE; }
.cs-pack.on { border-color: var(--brand); background: var(--brand-soft); }
.cs-pack .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); }
.cs-pack.on .ic { background: var(--brand); color: #fff; }
.cs-pack small { color: var(--muted); font-size: 12.5px; }
.cs-group { margin-bottom: 16px; }
.cs-group h3, .cs-custom h3 { margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; user-select: none; transition: border-color .12s, background .12s; }
.cs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cs-chip .i { color: var(--faint); }
.cs-chip:hover { border-color: #B8C2EE; }
.cs-chip.on, .cs-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.cs-chip.on .i, .cs-chip:has(input:checked) .i { color: var(--brand); }
.cs-chip:has(input:focus-visible) { outline: 3px solid rgba(47, 63, 191, .45); outline-offset: 2px; }
.cs-custom { padding-top: 14px; border-top: 1px dashed var(--line); }
.cs-custom-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-custom-row input { flex: 1 1 200px; }
.cs-custom-row input, .cs-custom-row select, .cs-custom textarea { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cs-custom textarea { width: 100%; margin-top: 8px; }
.cs-order { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: c; }
.cs-order li { counter-increment: c; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 10px; background: #FAFBFE; }
.cs-order li > .i { color: var(--brand); }
.cs-order li span { min-width: 0; line-height: 1.3; }
.cs-order li b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-order li small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-order .btn { width: 26px; height: 26px; min-height: 0; padding: 0; }
form.card > .cs-order { margin-top: 14px; }

.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cs-stats .stat { display: grid; gap: 2px; padding: 12px 14px; }
.cs-stats .stat small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.cs-stats .stat b { font-size: 22px; }
.cs-stats a.stat:hover { border-color: var(--brand); }
.cs-stats .stat.on { border-color: var(--brand); background: var(--brand-soft); }
.cs-stats .stat.warn b { color: var(--warn); }
.cs-table-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.cs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cs-table th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: #F4F6FB; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; font-size: 13px; }
.cs-table th a { color: var(--ink); text-decoration: none; }
.cs-table th a:hover { color: var(--brand); }
.cs-table th i { font-style: normal; color: var(--brand); }
.cs-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; max-width: 260px; }
.cs-table tbody tr { cursor: pointer; transition: background .1s; }
.cs-table tbody tr:hover { background: #F7F8FD; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table .c-no { position: sticky; inset-inline-start: 0; z-index: 1; width: 1%; background: inherit; font-weight: 800; }
.cs-table thead .c-no { z-index: 3; }
.cs-table tbody .c-no { background: #fff; }
.cs-table tbody tr:hover .c-no { background: #F7F8FD; }
.cs-table .c-no a { color: var(--brand-dark); text-decoration: none; }
.cs-table .c-date { white-space: nowrap; color: var(--muted); font-size: 13px; }
.cs-table td.t-longtext { min-width: 200px; color: #38405E; }
.cs-table td.t-number, .cs-table td.t-date, .cs-table td.t-phone { white-space: nowrap; }
.cs-fcount { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--new-bg); color: var(--new-text); font-weight: 800; font-size: 12.5px; }
.cs-pages { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 14px; }

.cs-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.cs-fields .wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .cs-fields { grid-template-columns: 1fr; } }
.cs-f label .i { color: var(--brand); }
.cs-yn { display: inline-flex; }
.cs-yn label { position: relative; padding: 5px 16px; border-radius: 8px; cursor: pointer; font-weight: 700; color: var(--muted); }
.cs-yn input { position: absolute; opacity: 0; }
.cs-yn label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cs-drop { position: relative; display: grid; justify-items: center; gap: 2px; padding: 18px; border: 2px dashed #C9D0EA; border-radius: 14px; background: #FAFBFE; text-align: center; cursor: pointer; }
.cs-drop.over { border-color: var(--brand); background: var(--brand-soft); }
.cs-drop > .i { font-size: 26px; color: var(--brand); }
.cs-drop small { color: var(--muted); }
.cs-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cs-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cs-file { position: relative; display: grid; gap: 4px; width: 110px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 12px; }
.cs-file img, .cs-file .pdf { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; background: #F1F3F9; }
.cs-file .pdf, .cs-thumb .pdf { display: grid; place-items: center; color: var(--danger); font-weight: 900; letter-spacing: 1px; }
.cs-file small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cs-file .rm { display: flex; align-items: center; gap: 4px; color: var(--danger); font-weight: 700; cursor: pointer; }
.cs-file:has(.rm input:checked) { opacity: .45; border-color: var(--danger); }
.cs-new .cs-file { border-style: dashed; border-color: var(--brand); }

.cs-show { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .cs-show { grid-template-columns: 1fr; } }
.cs-data dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.cs-data dl > div { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.cs-data dl > div.wide { grid-column: 1 / -1; }
.cs-data dl > div.is-empty dd { opacity: .6; }
.cs-data dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.cs-data dt .i { color: var(--brand); }
.cs-data dd { margin: 3px 0 0; font-size: 15.5px; font-weight: 600; white-space: normal; }
@media (max-width: 640px) { .cs-data dl { grid-template-columns: 1fr; } }
.cs-nav { display: flex; justify-content: space-between; gap: 8px; }
.cs-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cs-thumb { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cs-thumb > a { display: block; }
.cs-thumb img, .cs-thumb .pdf { display: block; width: 100%; height: 130px; object-fit: cover; background: #F1F3F9; }
.cs-thumb figcaption { position: relative; display: grid; padding: 8px 10px; padding-inline-end: 36px; font-size: 13px; }
.cs-thumb figcaption small { color: var(--muted); font-size: 11.5px; }
.cs-thumb figcaption a { position: absolute; top: 10px; inset-inline-end: 8px; color: var(--brand-dark); }
dialog.cs-lb { max-width: 96vw; max-height: 94vh; padding: 0; border: 0; border-radius: 14px; background: #111; }
dialog.cs-lb::backdrop { background: rgba(10, 14, 30, .8); }
dialog.cs-lb img { display: block; max-width: 96vw; max-height: 94vh; }
dialog.cs-lb [data-cs-lb-close] { position: absolute; top: 8px; inset-inline-end: 8px; background: rgba(255, 255, 255, .9); }
.cs-cols { display: grid; gap: 8px; }
.cs-col { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cs-col.is-hidden { background: #F7F8FB; }
.cs-col.is-hidden .cs-col-edit input { color: var(--muted); }
.cs-col-move { display: grid; gap: 2px; }
.cs-col-move .btn { width: 28px; height: 24px; min-height: 0; padding: 0; }
.cs-col-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cs-col-edit input, .cs-col-edit select, .cs-col-edit textarea { padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 14.5px; }
.cs-col-edit input { flex: 1 1 180px; min-width: 0; }
.cs-col-edit textarea { flex-basis: 100%; }
.cs-col-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
@media (max-width: 760px) { .cs-col { grid-template-columns: auto minmax(0, 1fr); } .cs-col .bkf-ic { display: none; } .cs-col-end { grid-column: 1 / -1; } }
.cs-danger { border-color: #F2C7C2; }
.cs-danger summary { display: flex; align-items: center; gap: 8px; color: var(--danger-text); font-weight: 800; cursor: pointer; }
.cs-danger p { margin: 12px 0; color: #5C2A26; }
.print-head { display: none; }

@media print {
    .side, .topbar, .scrim, .page-head .actions, .no-print, .alert, .help-btn, .sticky-save { display: none !important; }
    .app { display: block !important; }
    .main, .page { overflow: visible !important; height: auto !important; padding: 0 !important; }
    body { background: #fff; }
    .card { box-shadow: none !important; break-inside: avoid; }
    .print-head { display: flex; justify-content: space-between; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #000; }
    .cs-show { grid-template-columns: 1fr; }
}

/* ---------- ابنيلي موقعي ---------- */
.sv-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; background: radial-gradient(circle at 10% 0%, rgba(242, 177, 52, .18), transparent 45%), linear-gradient(135deg, var(--ink), #1E2B6B); color: #fff; border: 0; }
.sv-hero h2 { margin: 10px 0 6px; font-size: 24px; }
.sv-hero p { max-width: 60ch; color: #D4DAF2; }
.sv-hero .pill { background: rgba(255, 255, 255, .12); color: #fff; }
.sv-price { display: grid; justify-items: center; min-width: 200px; padding: 16px 22px; border-radius: 18px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.sv-price small { color: var(--muted); font-weight: 700; }
.sv-price b { font-size: 38px; line-height: 1.15; font-weight: 900; }
.sv-price b span { font-size: 16px; }
.sv-price em { font-style: normal; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12.5px; }
@media (max-width: 760px) { .sv-hero { grid-template-columns: 1fr; } }
.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .sv-grid { grid-template-columns: 1fr; } }
.sv-grid .card { margin: 0; }
.sv-list { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.sv-list li { display: flex; align-items: center; gap: 10px; }
.sv-list .ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); }
.sv-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.sv-steps li { counter-increment: s; position: relative; display: grid; padding-inline-start: 44px; }
.sv-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
.sv-steps li span { color: var(--muted); font-size: 14px; }
.sv-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.sv-track > div { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #F4F6FB; color: var(--muted); font-weight: 700; font-size: 14px; }
.sv-track i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); font-style: normal; }
.sv-track .done { background: var(--ok-soft); color: var(--ok-text); }
.sv-track .done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.sv-track .now { box-shadow: 0 0 0 2px var(--ok) inset; }
@media (max-width: 640px) { .sv-track { grid-template-columns: 1fr; } }
.sv-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sv-style > span:last-child { display: grid; gap: 2px; }
.sv-style small { font-size: 12.5px; line-height: 1.45; }
.sv-style .sw { flex: none; width: 34px; height: 34px; border-radius: 10px; }
.s-calm .sw { background: linear-gradient(135deg, #D8EFEC, #1B7F79); }
.s-modern .sw { background: linear-gradient(135deg, #E6EBFF, #2F3FBF); }
.s-luxury .sw { background: linear-gradient(135deg, #1A1A1A, #C9A44C); }
.s-friendly .sw { background: linear-gradient(135deg, #FFE0EC, #F2B134); }
.s-any .sw { background: conic-gradient(#1B7F79, #2F3FBF, #C9A44C, #F2B134, #1B7F79); }
.sv-order summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; cursor: pointer; }
.sv-order summary small { flex-basis: 100%; color: var(--muted); }
.sv-brief { margin-top: 14px; }
.sv-brief dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.sv-brief dl .wide { grid-column: 1 / -1; }
.sv-brief dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.sv-brief dd { margin: 2px 0 0; }
.sv-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.sv-upd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.sv-upd .field { margin: 0; }
.nav a.nav-new::after { content: "NEW"; margin-inline-start: auto; padding: 1px 6px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 900; }
.sv-promo { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--ink), #24337A); color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.sv-promo .ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-size: 20px; }
.sv-promo .tx { flex: 1; min-width: 0; }
.sv-promo .tx b { display: block; }
.sv-promo .tx small { color: #CDD5F3; }
.sv-promo .go { flex: none; padding: 7px 14px; border-radius: 10px; background: rgba(255, 255, 255, .12); font-weight: 800; font-size: 14px; }
.sv-promo:hover .go { background: var(--accent); color: var(--on-accent); }

/* ---------- علامة Docofolio على مربع ---------- */
.brand-lockup { display: inline-flex; align-items: center; direction: ltr; line-height: 0; }
.brand-lockup .brand-mark, .brand-mark { flex: none; display: block; }
.topbar .tb-mark { display: grid; place-items: center; flex: none; border-radius: 9px; color: var(--ink); }
.topbar .tb-mark .brand-mark { width: 32px; height: 32px; }

.opt-card.is-off { opacity: .75; cursor: not-allowed; background: #F7F8FB; }
.opt-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; color: var(--warn-text, #8A5A00); font-weight: 700; font-size: 12.5px; }
.opt-warn a { color: inherit; text-decoration: underline; }

/* ---------- القايمة الجانبية: مجموعات قابلة للطي + كارت ابنيلي موقعي والدعم ثابتين تحت ---------- */
.side .nav-main { margin-top: 10px; }
.side .nav-grp { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 4px; }
.side .nav-grp > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: #8F9BCB; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; cursor: pointer; list-style: none; user-select: none; transition: background .12s, color .12s; }
.side .nav-grp > summary::-webkit-details-marker { display: none; }
.side .nav-grp > summary:hover { background: rgba(255, 255, 255, .07); color: #DCE2F7; }
.side .nav-grp[open] > summary { color: #DCE2F7; }
.side .nav-grp .nm-dot { width: 8px; height: 8px; border-radius: 50%; background: #F87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .25); }
.side .nav-grp .nm-chev { margin-inline-start: auto; font-size: 14px !important; opacity: .7; transition: transform .2s; }
.side .nav-grp[open] .nm-chev { transform: rotate(180deg); }
.side .nav-grp[open] > .nav { animation: nm-in .2s ease; }
@keyframes nm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.side-pin { position: sticky; bottom: 0; z-index: 3; margin-top: auto; display: grid; gap: 4px; padding: 14px 0 4px; background: linear-gradient(to top, var(--ink) 78%, transparent); }
.side-pin + .side-foot { margin-top: 0; padding-top: 10px; }
.side-build { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(242, 177, 52, .38); border-radius: 13px; background: linear-gradient(135deg, rgba(242, 177, 52, .22), rgba(242, 177, 52, .07)); color: #fff; text-decoration: none; transition: background .12s, border-color .12s; }
.side-build:hover, .side-build.on { background: linear-gradient(135deg, rgba(242, 177, 52, .32), rgba(242, 177, 52, .12)); border-color: rgba(242, 177, 52, .6); }
.side-build .sb-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 17px; }
.side-build .sb-tx { flex: 1; min-width: 0; line-height: 1.35; }
.side-build .sb-tx b { display: block; font-size: 14px; }
.side-build .sb-tx small { display: block; color: #EBDDB5; font-size: 12px; }
.side-build .sb-new { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 10.5px; font-weight: 900; }
.sv-price.is-free s { color: var(--muted); font-size: 15px; }
.sv-price.is-free b { color: #0F7A40; }
.sv-gift { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 16px; border: 1px dashed #E7C46B; border-radius: 14px; background: #FFF8E6; color: #5C4200; text-decoration: none; }
.sv-gift .ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--on-accent); }
.sv-gift > span:nth-child(2) { flex: 1; }
.sv-gift .go { flex: none; font-weight: 800; text-decoration: underline; }
.sv-freebox { border-color: #B7E4C7; background: #F3FBF6; }

.demo-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border: 1px dashed #E7C46B; background: #FFF8E6; }
.demo-card.is-ready { border-style: solid; border-color: #B7E4C7; background: #F3FBF6; }
.demo-card p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.demo-card .demo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* =====================================================================
   سجل الحالات: جداول متعددة + كتابة روشتة + مكتبة الأدوية
   ===================================================================== */

/* تابات الجداول */
.cs-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; }
.cs-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14.5px; text-decoration: none; transition: border-color .12s, background .12s; }
.cs-tab small { padding: 0 8px; border-radius: 999px; background: #ECEFF7; color: var(--muted); font-weight: 800; font-size: 12px; }
.cs-tab:hover { border-color: #B8C2EE; }
.cs-tab.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.cs-tab.on small { background: rgba(255, 255, 255, .22); color: #fff; }
.cs-tab.add { border-style: dashed; color: var(--brand-dark); background: transparent; }
.cs-tab.add:hover { background: var(--brand-soft); }

.cs-tablebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cs-rename { display: flex; flex: 1 1 320px; gap: 8px; margin: 0; }
.cs-rename input { flex: 1; min-width: 0; padding: 9px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; font-weight: 700; }
.cs-tmove { display: flex; gap: 6px; }
.cs-tmove form { margin: 0; }

.cs-pick, .cs-choose { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; }
.cs-pick label, .cs-choose label { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.cs-pick label .i, .cs-choose label .i { color: var(--brand); }
.cs-pick select, .cs-choose select { flex: 1 1 220px; max-width: 380px; padding: 10px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; font-weight: 700; }
.cs-choose { max-width: 640px; margin-inline: auto; }

/* روشتات الحالة في ملفها */
.cs-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.cs-doc:first-of-type { border-top: 0; }
.cs-doc-t { display: grid; flex: 1 1 220px; min-width: 0; color: var(--ink); text-decoration: none; }
.cs-doc-t small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cs-doc-t:hover b { color: var(--brand); }

/* ---------- شاشة كتابة الروشتة ---------- */
.cw-step { display: inline-flex; align-items: center; gap: 10px; }
.cw-step .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 900; }
.cw-step label { font-weight: 800; }
.card-h h2 .cw-step { margin-inline-end: 8px; }
.cw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 20px; }
.cw-top select { flex: 1 1 240px; max-width: 420px; padding: 10px 13px; border: 1.5px solid var(--brand); border-radius: var(--radius-sm); background: #fff; font-weight: 800; }
.cw-fixed { display: inline-flex; align-items: center; gap: 8px; }
.cw-fixed .i { color: var(--brand); }
.cw-fixed a { margin-inline-start: 6px; font-size: 13.5px; }
.page.cw-page, .page.cd-pg { width: min(1280px, 100%); }
.cw-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
@media (max-width: 1080px) { .cw-grid { grid-template-columns: 1fr; } }
.cw-grid > .card { margin-bottom: 0; }
.cw-patient .cs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw-namef { margin-bottom: 14px; }
.cw-recent { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.cw-recent h3 { margin-bottom: 6px; color: var(--muted); font-size: 13.5px; }
.cw-rec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.cw-rec a { display: grid; min-width: 0; color: var(--ink); text-decoration: none; }
.cw-rec small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.cw-date { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; color: var(--muted); }
.cw-date input { padding: 4px 2px; border: 0; background: transparent; font-weight: 700; color: var(--ink); }
.cw-date input:focus { outline: none; }

.cw-rows { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.cw-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n main acts" ". use use"; align-items: start; gap: 8px 8px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #FAFBFE; }
.cw-row:focus-within { border-color: #B8C2EE; background: #fff; box-shadow: 0 0 0 3px rgba(47, 63, 191, .08); }
.cw-n { grid-area: n; display: grid; place-items: center; width: 28px; height: 42px; color: var(--brand-dark); font-weight: 900; font-size: 15px; }
.cw-cell { position: relative; min-width: 0; }
.cw-main { grid-area: main; }
.cw-use { grid-area: use; }
.cw-cell input, .cw-combo input { width: 100%; padding: 10px 12px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; line-height: 1.5; transition: border-color .12s, box-shadow .12s; }
.cw-cell input:focus, .cw-combo input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 63, 191, .14); }
.cw-main input { font-weight: 800; }
.cw-use input { font-size: 14.5px; }
.cw-acts { grid-area: acts; display: flex; align-items: center; gap: 0; height: 42px; }
.cw-ib { display: grid; place-items: center; width: 30px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
.cw-ib:hover:not(:disabled) { background: #ECEFF7; color: var(--ink); }
.cw-ib:disabled { opacity: .3; cursor: default; }
.cw-ib.star.on { color: #E0A100; }
.cw-ib.star.on .i { fill: #F2B134; }
.cw-ib.rm:hover { background: var(--danger-soft); color: var(--danger); }
.cw-ib.ok { color: var(--ok); }
@media (max-width: 520px) {
    .cw-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n main" ". use" ". acts"; }
    .cw-acts { justify-content: flex-end; height: auto; }
}
.cw-add { margin-bottom: 4px; }
.cw-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.cw-chip { padding: 4px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: border-color .12s, background .12s; }
.cw-chip:hover { border-color: var(--brand); background: var(--brand-soft); }

/* قايمة الاقتراحات */
.cw-combo { position: relative; }
.cw-sug { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 40; max-height: 280px; margin: 0; padding: 6px; overflow: auto; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 38px rgba(15, 27, 61, .2); }
.cw-sug li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cw-sug li .t { font-weight: 700; }
.cw-sug li small { color: var(--muted); font-size: 12.5px; }
.cw-sug li em { margin-inline-start: auto; padding: 0 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-style: normal; font-weight: 800; font-size: 11.5px; }
.cw-sug li.h { padding: 6px 10px 2px; color: var(--faint); font-size: 12px; font-weight: 800; cursor: default; }
.cw-sug li.plus { margin-top: 4px; border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; color: var(--brand-dark); }
.cw-sug li.plus::before { content: "+"; font-weight: 900; }
.cw-sug li[role=option]:hover, .cw-sug li.on { background: var(--brand-soft); }

.cw-wa { margin-top: 16px; padding: 14px; border: 1px solid #BFE6D0; border-radius: 14px; background: #F0FBF5; }
.cw-wa .btn { width: 100%; justify-content: center; }
.cw-design { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.cw-design .i { color: var(--brand); }
.cw-dlg { width: min(720px, calc(100vw - 20px)); }
.cw-dlg .cd-view { max-width: 100%; }
.cw-dlg .cd-canvas { width: auto; max-width: 100%; max-height: 70vh; margin-inline: auto; }

/* ---------- صفحة الروشتة المحفوظة (عرض وطباعة) ---------- */
.cd-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .cd-page { grid-template-columns: 1fr; } }
.cd-stage { display: grid; place-items: start center; padding: 22px; background: repeating-linear-gradient(45deg, #F3F5FA 0 12px, #EEF1F7 12px 24px); }
.cd-view { width: 100%; max-width: 620px; }
.cd-view.is-loading { aspect-ratio: var(--cd-w, 148) / var(--cd-h, 210); border-radius: 6px; background: linear-gradient(100deg, #E3E7F2 30%, #F1F3FA 50%, #E3E7F2 70%) 0 0 / 200% 100%; animation: cd-sh 1.2s linear infinite; }
@keyframes cd-sh { to { background-position: -200% 0; } }
.cd-canvas { display: block; width: 100%; height: auto; border-radius: 3px; background: #fff; box-shadow: 0 10px 34px rgba(15, 27, 61, .2); }
.cd-side { display: grid; gap: 14px; position: sticky; top: 16px; }
.cd-side .card { margin: 0; padding: 18px; }
.cd-side .card-h { margin-bottom: 12px; }
.cd-block { display: flex; width: 100%; justify-content: center; margin-bottom: 8px; }
.cd-only { display: flex; margin: 2px 0 10px; font-size: 13.5px; }
.cd-note { display: flex; gap: 10px; background: #FFF8E6; border-color: #F2DFA8; }
.cd-note > .i { flex: none; margin-top: 4px; color: var(--warn); }
.cd-note p { margin: 2px 0 8px; font-size: 13.5px; color: #5C4300; }
.cd-wa-note { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #E3F6EC; color: #0B5A33; font-size: 13.5px; line-height: 1.7; }
.cd-wa-note.is-warn { background: #FFF8E6; color: #5C4300; }
.cd-wa-note a { display: inline-block; margin-top: 4px; font-weight: 800; color: inherit; text-decoration: underline; }
.btn.is-nudge { animation: cd-nudge 1.1s ease-in-out 3; }
@keyframes cd-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } 50% { box-shadow: 0 0 0 8px rgba(37, 211, 102, .28); } }
@media (prefers-reduced-motion: reduce) { .btn.is-nudge { animation: none; } }
.cd-del { text-align: center; }
.btn.is-busy { opacity: .7; cursor: progress; }

/* ---------- مكتبة الأدوية ---------- */
.cl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cl .cl-sec:first-child { grid-row: span 2; }
@media (max-width: 1000px) { .cl { grid-template-columns: 1fr; } .cl .cl-sec:first-child { grid-row: auto; } }
.cl-sec { margin-bottom: 0; }
.cl-add textarea { width: 100%; min-height: 92px; padding: 10px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; line-height: 1.7; resize: vertical; }
.cl-add input[type=text] { width: 100%; padding: 9px 13px; border: 1.5px solid #D3D8E8; border-radius: var(--radius-sm); background: #fff; }
.cl-add textarea:focus, .cl-add input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 63, 191, .14); }
.cl-addbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cl-search { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); }
.cl-search input { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; }
.cl-search input:focus { outline: none; }
.cl-empty { margin: 16px 0 0; color: var(--muted); text-align: center; }
.cl-list { display: grid; gap: 4px; max-height: 460px; margin: 14px 0 0; padding: 0; overflow: auto; list-style: none; }
.cl-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #FAFBFE; }
.cl-list li:hover { border-color: #B8C2EE; background: #fff; }
.cl-t { display: grid; min-width: 0; }
.cl-t b { overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; }
.cl-t small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.cl-acts { display: flex; flex: none; }
.cl-list.boxes { display: flex; flex-wrap: wrap; gap: 8px; max-height: 420px; }
.cl-list.boxes li { flex: 1 1 200px; max-width: 100%; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 27, 61, .05); }
.cl-list li.editing { flex-wrap: wrap; border-color: var(--brand); background: #fff; }
.cl-edit { display: flex; flex: 1 1 200px; flex-wrap: wrap; gap: 6px; }
.cl-edit input { flex: 1 1 140px; min-width: 0; padding: 7px 10px; border: 1.5px solid #D3D8E8; border-radius: 9px; background: #fff; }
.cl-edit input:focus { outline: none; border-color: var(--brand); }

@media print { .cd-side, .cd-stage { box-shadow: none; } }

/* اقتراحات المرضى في «حالة جديدة» */
.cs-combo { position: relative; }
.cs-sug-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.cs-sug-hint .i { width: 16px; height: 16px; color: var(--brand); flex: none; }
.cs-found { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding: 14px 18px; border: 1.5px solid #BFE6CF; border-radius: var(--radius); background: #F0FAF4; }
.cs-found[hidden] { display: none; }
.cs-found > .i { width: 22px; height: 22px; flex: none; color: #1E8E4E; }
.cs-found-b { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.cs-found-b b { font-weight: 800; }
.cs-found-b span { color: #1B4E31; font-weight: 700; }
.cs-found-b small { color: var(--muted); font-size: 13px; }
.cs-found-b small[hidden] { display: none; }
.cs-found.is-in { animation: cs-found-in .28s ease-out; }
.cs-f.is-filled input, .cs-f.is-filled select, .cs-f.is-filled textarea { animation: cs-fill 1.4s ease-out; }
@keyframes cs-found-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes cs-fill { 0%, 35% { background: #E8F7EE; border-color: #7CCB9E; } 100% { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .cs-found.is-in, .cs-f.is-filled input, .cs-f.is-filled select, .cs-f.is-filled textarea { animation: none; } }

/* أدوات سجل الحالات + السلة */
.cs-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.cs-tools a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.cs-tools a .i { width: 16px; height: 16px; }
.cs-tools a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.cs-tools a.on { background: var(--brand); color: #fff; }
.cs-tools a em { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold, #F2B134); color: #3a2a00; font-style: normal; font-weight: 800; font-size: 12px; text-align: center; line-height: 20px; }
.cs-h { margin: 22px 0 10px; font-size: 16px; }
.cs-trash { display: grid; gap: 8px; }
.cs-trash-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cs-trash-main { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; }
.cs-trash-main small { color: var(--muted); }
.cs-left { color: var(--muted); font-size: 13px; font-weight: 700; }
.cs-left.warn { color: #B42318; }
.cs-trash-row form { margin: 0; }
.cs-more { position: relative; }
.cs-more > summary { list-style: none; cursor: pointer; }
.cs-more > summary::-webkit-details-marker { display: none; }
.cs-more-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60; min-width: 250px; padding: 6px; display: grid; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 14px 38px rgba(15, 27, 61, .2); }
.cs-more-menu a { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 8px; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.cs-more-menu a .i { width: 16px; height: 16px; color: var(--brand); }
.cs-more-menu a:hover { background: var(--brand-soft); }
@media (max-width: 640px) {
    .cs-more { position: static; }
    .cs-more-menu { position: fixed; inset-inline: 12px; top: auto; bottom: 12px; min-width: 0; padding: 8px; box-shadow: 0 -8px 40px rgba(15, 27, 61, .28); }
    .cs-more-menu a { padding: 13px 12px; font-size: 15px; }
}
/* المتابعات */
.cs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.cs-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 800; font-size: 14px; text-decoration: none; }
.cs-tabs a.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cs-tabs a em { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-style: normal; font-weight: 800; font-size: 12px; text-align: center; line-height: 20px; }
.cs-tabs a.on em { background: rgba(255, 255, 255, .22); color: #fff; }
.cs-tabs a.hot:not(.on) em { background: #FDE8E4; color: #B42318; }
.cs-tabs-sub a { padding: 6px 14px; font-size: 13px; }
.cs-fu-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 700; font-size: 14px; }
.cs-fu-filter select { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }
.cs-fu { display: grid; gap: 8px; }
.cs-fu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cs-fu-main { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; }
.cs-fu-main small { color: var(--muted); }
.cs-fu-due { display: grid; gap: 1px; min-width: 110px; font-weight: 800; font-size: 14px; color: var(--ink); }
.cs-fu-due small { color: var(--muted); font-weight: 600; font-size: 12px; }
.cs-fu-due.late { color: #B42318; }
.cs-fu-due.today { color: #B54708; }
.cs-fu-due.done { color: #067647; }
.cs-fu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-resched-form { padding: 12px; gap: 10px; min-width: 240px; }
.cs-resched-form label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; }
.cs-resched-form input[type=date] { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.cs-resched-btns { display: flex; gap: 6px; }
@media (max-width: 640px) {
    .cs-fu-due { min-width: 0; }
    .cs-fu-actions { width: 100%; }
    .cs-resched-form { position: static; box-shadow: none; border: 0; padding: 8px 0 0; min-width: 0; }
    .cs-more.cs-resched { width: 100%; }
}
/* سجل النشاط */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.cs-stats > div { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cs-stats b { font-size: 26px; line-height: 1.1; color: var(--ink); }
.cs-stats span { color: var(--muted); font-size: 13px; font-weight: 700; }
.cs-stats .warn b { color: #B42318; }
.cs-act-filter { flex-wrap: wrap; }
.cs-act-row { gap: 8px 14px; }
.cs-act-row.danger { border-color: #F5C2BC; background: #FFF8F7; }
.cs-act-time { display: grid; min-width: 64px; }
.cs-act-time small { color: var(--muted); font-size: 12px; }
.cs-act-label { font-weight: 600; margin-inline-start: 6px; }
.cs-act-label a { color: var(--brand); }
.cs-act-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
.cs-act-who.asst { background: #FEF3D6; color: #8A5A00; }
.cs-act-who em { font-style: normal; font-size: 11px; opacity: .8; }
.cs-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 0; color: var(--muted); font-weight: 700; font-size: 14px; }
/* تقرير الإيراد */
.cs-rep-range { margin: -4px 0 14px; color: var(--muted); font-weight: 700; font-size: 14px; }
.cs-rep-custom label { display: inline-flex; align-items: center; gap: 6px; }
.cs-rep-custom input[type=date] { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.cs-rep-stats .big { grid-column: span 2; }
.cs-rep-stats b small { font-size: 14px; font-weight: 700; color: var(--muted); }
.cs-rep-stats em { font-style: normal; font-weight: 800; font-size: 13px; }
.cs-rep-stats em.up { color: #067647; }
.cs-rep-stats em.down { color: #B42318; }
.cs-rep-stats em i { font-style: normal; font-weight: 600; color: var(--muted); }
.cs-bars { display: flex; align-items: flex-end; gap: 14px; height: 190px; padding: 14px 16px 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cs-bar { flex: 1 1 0; max-width: 90px; margin-inline: auto; height: 100%; display: grid; grid-template-rows: 18px 1fr 20px; justify-items: center; align-items: end; min-width: 0; }
.cs-bar i { display: block; width: 100%; max-width: 38px; background: var(--brand-soft); border: 1px solid #C9CFF5; border-radius: 4px 4px 0 0; }
.cs-bar.now i { background: var(--brand); border-color: var(--brand); }
.cs-bar .v { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.cs-bar .l { font-size: 12px; font-weight: 700; color: var(--muted); }
.cs-rep-row .cs-rep-share { flex: 1 1 140px; height: 8px; border-radius: 99px; background: var(--brand-soft); overflow: hidden; }
.cs-rep-row .cs-rep-share i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.cs-rep-sum { min-width: 100px; text-align: end; }
.cs-rep-sum small { color: var(--muted); font-weight: 700; }
.cs-rep-note { margin: 14px 2px 0; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .cs-rep-stats .big { grid-column: auto; } .cs-bars { gap: 6px; padding-inline: 8px; } }
/* المرضى وملف المريض */
.cs-pt-search { display: flex; align-items: center; gap: 8px; max-width: 520px; margin: 0 0 14px; padding: 6px 8px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cs-pt-search .i { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cs-pt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; padding: 8px 4px; }
.cs-pt-row { text-decoration: none; color: inherit; }
.cs-pt-row:hover { border-color: var(--brand); }
.cs-pt-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 17px; }
.cs-pt-av.lg { width: 56px; height: 56px; font-size: 24px; }
.cs-pf-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; margin: 0 0 18px; }
.cs-pf-id { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.cs-pf-id b { font-size: 20px; }
.cs-pf-id small { color: var(--muted); }
.cs-pf-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; width: 100%; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cs-pf-stats div { display: grid; gap: 2px; }
.cs-pf-stats dt { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.cs-pf-stats dd { margin: 0; font-weight: 800; font-size: 16px; }
.cs-pf-stats dd small { color: var(--muted); font-weight: 700; font-size: 12px; }
.cs-pf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.cs-pf .cs-h:first-child { margin-top: 0; }
.cs-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.cs-tl::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 7px; width: 2px; background: var(--line); }
.cs-tl li { position: relative; padding: 12px 16px; padding-inline-start: 34px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cs-tl li::before { content: ''; position: absolute; inset-inline-start: 9px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px #fff; }
.cs-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cs-tl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 12px; }
.cs-tl-chip.soft { background: #F1F3F9; color: var(--muted); }
.cs-tl-chip .i { width: 13px; height: 13px; }
.cs-tl-fee { font-weight: 800; font-size: 13px; color: #067647; }
.cs-tl-open { margin-inline-start: auto; font-weight: 800; font-size: 13px; color: var(--brand); text-decoration: none; }
.cs-tl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
.cs-tl-facts div { display: grid; gap: 1px; min-width: 0; }
.cs-tl-facts dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.cs-tl-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.cs-pf-list { display: grid; gap: 6px; }
.cs-pf-list > * { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; font-size: 14px; }
.cs-pf-list a:hover { border-color: var(--brand); }
.cs-pf-list small { color: var(--muted); }
@media (max-width: 900px) { .cs-pf { grid-template-columns: 1fr; } }

/* السعر الثابت للكشف والمتابعة */
.cs-fees-ask { padding: 22px; max-width: 560px; margin-inline: auto; }
.cs-fees-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.cs-fees-head > .i { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); flex: none; }
.cs-fees-head b { font-size: 18px; }
.cs-fees-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.cs-fees-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.cs-fees-grid .field span, .cs-fees-when .field span { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.cs-fees-grid .field small { color: var(--muted); font-weight: 600; }
.cs-fees-hint { margin: 6px 0 14px; color: var(--muted); font-size: 13px; }
.cs-fees-err { margin: 4px 0; color: #B42318; font-weight: 700; font-size: 13px; }
.cs-fees-when { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 6px 0 4px; }
.cs-fees-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; padding-bottom: 10px; }
.cs-fees-alt { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.cs-fees-alt a { font-weight: 800; color: var(--brand); }
.cs-fees { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.cs-fees > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: 14px; }
.cs-fees > summary::-webkit-details-marker { display: none; }
.cs-fees > summary .i { width: 20px; height: 20px; color: var(--brand); flex: none; }
.cs-fees > summary span { flex: 1; }
.cs-fees > summary em { font-style: normal; font-weight: 800; color: var(--brand); }
.cs-fees-body { padding: 4px 14px 16px; border-top: 1px solid var(--line); }
.cs-fees-body .cs-fees-form { margin-top: 14px; max-width: 520px; }
.cs-fees-h { margin: 18px 0 8px; font-size: 14px; }
.cs-fees-log { list-style: none; margin: 0 0 4px; padding: 0; }
.cs-fees-log li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.cs-fees-log li span { color: var(--muted); min-width: 120px; }
.cs-fees-log li b { flex: 1; }
.cs-fees-x { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.cs-fees-x:hover { background: #FEE4E2; color: #B42318; }
@media (max-width: 640px) { .cs-fees-grid { grid-template-columns: 1fr; } .cs-fees-ask { padding: 16px; } }

/* قايمة اللغات (فرنسي / إسباني / ألماني بجانب العربي والإنجليزي) */
.side .langmenu { display: block; }
.side .langmenu > summary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #D5DBF5; }
.side .langmenu > summary:hover { background: rgba(255, 255, 255, .14); }
.fl-top .langmenu > summary { padding: 5px 9px; font-size: 12px; }