:root {
  --bg: #f3f6f6; --surface: #ffffff; --surface-2: #eaf1f0; --line: #d9e4e2; --text: #12201f; --muted: #5a6b68; --trail: #c9dcd8;
  --primary: #0e5a52; --primary-2: #127468; --primary-soft: #e3f1ee; --accent: #c8962b; --accent-soft: #fbf3e2; --on-primary: #ffffff; --on-accent: #1c1403;
  --danger: #c2372b; --warn: #c27a10; --ok: #11845b; --info: #23798c;
  --radius: 14px; --shadow: 0 1px 2px rgba(16,40,36,.06), 0 4px 16px rgba(16,40,36,.06);
  /* هوية أثر: Noto Kufi Arabic للعناوين، وIBM Plex Sans Arabic للنصوص والأزرار، وNoto Naskh Arabic للجداول */
  --font-display: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  --font: "IBM Plex Sans Arabic", "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  --font-table: "Noto Naskh Arabic", Arial, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1413; --surface: #141d1c; --surface-2: #1b2625; --line: #273533; --text: #e7efed; --muted: #97a8a4;
    --primary: #3fb3a3; --primary-2: #5cc7b8; --primary-soft: #16302d; --accent: #e0b45a; --accent-soft: #2d2616; --on-primary: #0d1413; --trail: #2a3d3a;
    --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1413; --surface: #141d1c; --surface-2: #1b2625; --line: #273533; --text: #e7efed; --muted: #97a8a4;
  --primary: #3fb3a3; --primary-2: #5cc7b8; --primary-soft: #16302d; --accent: #e0b45a; --accent-soft: #2d2616; --on-primary: #0d1413; --trail: #2a3d3a;
  --shadow: 0 1px 2px rgba(0,0,0,.4); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { overflow-x: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
table, table th, table td { font-family: var(--font-table); }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.4; font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .tiny { font-size: .75rem; }
.num { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 1px solid var(--line); background: var(--surface); padding: .55em 1.05em; border-radius: 10px; cursor: pointer; font-weight: 600; transition: .15s; white-space: nowrap; }
.btn:hover { border-color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-2); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: .3em .7em; font-size: .85rem; border-radius: 8px; }
.btn.lg { padding: .8em 1.5em; font-size: 1.05rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* forms */
label.f { display: block; margin-bottom: .9rem; }
label.f > span { display: block; font-size: .87rem; font-weight: 600; margin-bottom: .3rem; }
input.i, select.i, textarea.i { width: 100%; padding: .65em .85em; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); outline: none; transition: .15s; }
input.i:focus, select.i:focus, textarea.i:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea.i { min-height: 96px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 820px) { .grid2, .grid3, .grid4 { grid-template-columns: minmax(0,1fr); } .grid4.keep2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; box-shadow: var(--shadow); }
.card + .card { margin-top: 1rem; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
.card-h h2, .card-h h3 { margin: 0; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.spacer { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: .3em; padding: .12em .65em; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pill.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.pill.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.pill.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.pill.pri { background: var(--primary-soft); color: var(--primary); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty .big { font-size: 2.4rem; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }

/* progress */
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .6s; }
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { transform: rotate(-90deg); }
.ring .v { position: absolute; text-align: center; line-height: 1.1; }
.ring .v b { font-size: 1.6rem; display: block; }

/* stat */
.stat { display: flex; flex-direction: column; gap: .2rem; }
.stat .k { font-size: .82rem; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tbl th, table.tbl td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; }
table.tbl th { background: var(--surface-2); font-weight: 700; font-size: .8rem; color: var(--muted); white-space: nowrap; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tr.click { cursor: pointer; } table.tbl tr.click:hover td { background: var(--surface-2); }

/* app shell */
.shell { display: grid; grid-template-columns: 260px minmax(0,1fr); min-height: 100vh; }
.side { background: var(--surface); border-inline-end: 1px solid var(--line); padding: 1rem .8rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem 1rem; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.brand img { width: 36px; height: 36px; }
.brand small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); }
.nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 10px; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.nav a:hover { background: var(--surface-2); }
.nav a.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav .ic { width: 1.4em; text-align: center; }
.nav .grp { font-size: .72rem; color: var(--muted); font-weight: 700; padding: .9rem .75rem .3rem; letter-spacing: .02em; }
.nav .badge { margin-inline-start: auto; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); }
.topbar .ttl { font-weight: 700; font-size: 1.05rem; }
.content { padding: 1.4rem; max-width: 1200px; margin: 0 auto; }
.icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1.05rem; }
.icon-btn .dot { position: absolute; top: 5px; inset-inline-end: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--danger); color: #fff; font-size: .68rem; display: grid; place-items: center; font-weight: 700; }
.banner { padding: .7rem 1.4rem; font-size: .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.banner.warn { background: var(--accent-soft); color: var(--text); }
.banner.danger { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.mob-only { display: none !important; }
.bottom-nav { display: none; }
@media (max-width: 980px) {
  .shell { grid-template-columns: minmax(0,1fr); }
  .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(280px, 86vw); z-index: 60; display: none; box-shadow: var(--shadow); }
  @keyframes side-in { from { transform: translateX(100%); } to { transform: none; } }
  @keyframes side-in-ltr { from { transform: translateX(-100%); } to { transform: none; } }
  [dir="ltr"] .side.open { animation-name: side-in-ltr; }
  .side.open { display: flex; animation: side-in .22s ease-out; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55; }
  .mob-only { display: inline-grid !important; }
  .content { padding: 1rem 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: .6rem 16px; }
  /* الشريط السفلي مخفي افتراضيا (القائمة ☰ أعلى الصفحة تكفي)، ويفعّله الأدمن من الإعدادات */
  body.bn-on .content { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  body.bn-on .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.bn-on .shell ~ .wa-float { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav { display: none; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; inset-inline: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; padding: .45rem 0 .5rem; font-size: .7rem; color: var(--muted); gap: 1px; }
  .bottom-nav a .ic { font-size: 1.2rem; }
  .bottom-nav a.on { color: var(--primary); font-weight: 700; }
  body.bn-on .bottom-nav { display: grid; }
}

/* dashboard */
.hero-card { background: linear-gradient(135deg, #0e5a52 0%, #0b3f3a 100%); color: #fff; border: 0; }
.hero-card .muted { color: rgba(255,255,255,.75); }
.dash-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; }
@media (max-width: 980px) { .dash-top { grid-template-columns: minmax(0,1fr); } }
.next-list a { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 10px; background: var(--surface-2); color: var(--text); margin-bottom: .5rem; font-weight: 500; }
.next-list a:hover { background: var(--primary-soft); }
.next-list a .n { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none; }
.next-list a .arr { margin-inline-start: auto; color: var(--muted); }
/* «يحتاج إجراء» في لوحة المدير */
.na-card { margin-bottom: 1rem; }
.na-card .card-h h3 { display: flex; align-items: center; gap: .45rem; }
.na-card .card-h h3 .aic { width: 20px; height: 20px; color: var(--primary); }
.na-tabs { margin-bottom: .8rem; }
.na-tabs button { min-height: 40px; }
.na-tabs .num { opacity: .75; margin-inline-start: .15rem; }
.na-list { margin: 0; }
.na-list a { min-height: 44px; }
.na-list a:last-child { margin-bottom: 0; }
.na-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.na-dot.g-late { background: var(--danger); }
.na-dot.g-today { background: var(--accent); }
.na-dot.g-approve { background: var(--info); }
.na-dot.g-soon { background: var(--trail); box-shadow: inset 0 0 0 2px var(--primary); }
.na-tx { flex: 1; min-width: 0; }
.na-tx b { display: block; line-height: 1.5; overflow-wrap: anywhere; }
.na-tx small { display: block; color: var(--muted); font-weight: 400; }
.next-list a.na-more { justify-content: center; background: none; color: var(--primary); }
.domain-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 60px; gap: .7rem; align-items: center; padding: .55rem 0; }
.domain-row .ic { font-size: 1.3rem; }
.countdown { text-align: center; }
.countdown b { font-size: 2.6rem; display: block; line-height: 1; }

/* journey */
.stage-h { display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 .6rem; font-weight: 700; }
.stage-h .pill { font-size: .75rem; }
.step { display: flex; gap: .9rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: .55rem; align-items: flex-start; }
.step .chk { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; cursor: pointer; font-size: .9rem; background: var(--surface); }
.step.done .chk { background: var(--ok); border-color: var(--ok); color: #fff; }
.step.done .t { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.step .t { font-weight: 600; }

/* wizard */
.wiz-steps { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1rem; }
.wiz-steps button { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: .35rem .8rem; cursor: pointer; font-size: .85rem; display: flex; gap: .35rem; align-items: center; }
.wiz-steps button.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.wiz-steps button.done:not(.on) { border-color: var(--ok); color: var(--ok); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips button, .chips a { color: inherit; text-decoration: none; }
.chips button, .chips a { border: 1px solid var(--line); background: var(--surface); padding: .45rem .9rem; border-radius: 99px; cursor: pointer; }
.chips button.on, .chips a.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* rating scale */
.scale { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .45rem; }
.scale button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: .6rem .3rem; cursor: pointer; font-weight: 600; font-size: .85rem; line-height: 1.3; transition: .12s; }
.scale button b { display: block; font-size: 1.15rem; }
.scale button:hover { border-color: var(--c, var(--primary)); }
.scale button.on { background: var(--c, var(--primary)); border-color: var(--c, var(--primary)); color: #fff; }
.scale button .emo { font-size: 1.6rem; display: block; }
@media (max-width: 520px) { .scale button { font-size: .75rem; } }

/* indicators */
.ind-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: .5rem; cursor: pointer; color: var(--text); }
.ind-item:hover { border-color: var(--primary); }
.ind-code { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; background: var(--surface-2); padding: .15rem .45rem; border-radius: 6px; direction: ltr; unicode-bidi: bidi-override; display: inline-block; }
.score-dot { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--line); }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; overflow-x: auto; }
.tabs button, .tabs a { border: 0; background: none; padding: .6rem .9rem; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tabs button.on, .tabs a.on { color: var(--primary); border-bottom-color: var(--primary); }
.drop { border: 2px dashed var(--line); border-radius: 12px; padding: 1.4rem; text-align: center; cursor: pointer; color: var(--muted); transition: .15s; }
.drop.over, .drop:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ev { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .45rem; }
.ev .ic { font-size: 1.3rem; }
.comment { padding: .7rem .9rem; background: var(--surface-2); border-radius: 12px; margin-bottom: .5rem; }

/* survey public */
.sv-wrap { max-width: 560px; margin: 0 auto; padding: 1.2rem 16px 2rem; min-height: 100vh; display: flex; flex-direction: column; }
.sv-q { font-size: 1.3rem; font-weight: 700; margin: 1.6rem 0 1.4rem; min-height: 4.5em; }
.sv-opts { display: grid; gap: .6rem; }
.sv-opts button { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font-size: 1.05rem; font-weight: 600; text-align: start; transition: .12s; }
@media (hover: hover) { .sv-opts button:hover { border-color: var(--primary); } }
.sv-opts button { -webkit-tap-highlight-color: transparent; }
.sv-opts button:focus:not(:focus-visible) { outline: none; }
.sv-warn { background: var(--accent-soft); color: var(--warn, #8a6414); border: 1px solid var(--accent); border-radius: 12px; padding: .6rem .9rem; font-weight: 700; margin-top: .8rem; }
.sv-opts button.on { border-color: var(--primary); background: var(--primary-soft); }
.sv-opts .emo { font-size: 1.7rem; }

/* landing */
.land-nav { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; }
@media (max-width: 560px) { .land-nav { gap: .4rem; flex-wrap: wrap; } .land-nav .brand img { width: 30px; height: 30px; } .land-nav .btn { padding: .4rem .65rem; font-size: .85rem; } .land-nav .btn.sm { padding: .3rem .5rem; } }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.hero { padding: 3.5rem 0 3rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: 2.6rem; line-height: 1.25; margin-bottom: .6rem; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .lead { font-size: 1.12rem; color: var(--muted); margin-bottom: 1.4rem; }
.hero .pill { white-space: normal; max-width: 100%; line-height: 1.6; padding-block: .25em; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0,1fr); padding-top: 1.5rem; } .hero h1 { font-size: 1.9rem; } }
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(14,90,82,.14); padding: 1.1rem; }
.section { padding: 3rem 0; }
.section h2 { font-size: 1.7rem; text-align: center; margin-bottom: .4rem; }
.section .sub { text-align: center; color: var(--muted); max-width: 640px; margin: 0 auto 2rem; }
.feat { padding: 1.3rem; }
.feat .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--primary-soft); display: grid; place-items: center; font-size: 1.4rem; margin-bottom: .7rem; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vs .card ul { padding-inline-start: 1.2rem; margin: 0; } .vs li { margin-bottom: .45rem; }
@media (max-width: 760px) { .vs { grid-template-columns: minmax(0,1fr); } }
.price { display: flex; flex-direction: column; }
.price.hot { border: 2px solid var(--primary); position: relative; }
.price .amt { font-size: 2.3rem; font-weight: 800; }
.price ul { list-style: none; padding: 0; margin: .8rem 0 1.2rem; flex: 1; }
.price li { padding: .3rem 0; } .price li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-inline-end: .5rem; }
.foot { border-top: 1px solid var(--line); padding: 2rem 0; color: var(--muted); font-size: .87rem; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 16px; }
.auth { width: 100%; max-width: 460px; }
.auth.wide { max-width: 680px; }

/* modal / toast */
.modal-bg { position: fixed; inset: 0; background: rgba(8,20,18,.5); display: grid; place-items: center; z-index: 100; padding: 16px; grid-template-columns: minmax(0, 1fr); }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; min-width: 0; overflow-wrap: break-word; padding: 1.3rem; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal.wide { max-width: 860px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #13201e; color: #fff; padding: .7rem 1.2rem; border-radius: 12px; z-index: 200; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.toast.err { background: var(--danger); }
@media (max-width: 980px) { .toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } }
.notif { display: flex; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--text); }
.notif.unread { background: var(--primary-soft); }
.notif:last-child { border-bottom: 0; }

/* charts */
.hbar { display: grid; grid-template-columns: minmax(0,1fr) 3fr 44px; gap: .6rem; align-items: center; margin-bottom: .45rem; font-size: .85rem; }
.dist { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.dist i { display: block; height: 100%; }
.vbars { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.vbars i { flex: 1; max-width: 34px; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }

/* doc actions / dropdown */
.doc-actions { display: flex; gap: .35rem; }
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .3rem; z-index: 50; min-width: 150px; }
.dd-menu button { display: block; width: 100%; text-align: start; border: 0; background: none; padding: .5rem .7rem; border-radius: 8px; cursor: pointer; font-weight: 600; }
.dd-menu button:hover { background: var(--surface-2); }
@media (max-width: 600px) { .hide-sm { display: none; } }
#print-area { display: none; }

/* nav steps */
.nav .stp { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: var(--muted); flex: none; margin-inline-start: auto; }
.nav .stp.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.nav a.on .stp:not(.ok) { border-color: var(--primary); color: var(--primary); }
.nav .grp .n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #1c1403; font-size: .66rem; margin-inline-end: .35rem; }
.seq { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 12px; background: var(--accent-soft); margin-bottom: 1rem; font-size: .88rem; flex-wrap: wrap; }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; }
@keyframes sk { to { background-position: -200% 0; } }

/* celebrate */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti i { position: absolute; top: -40px; font-style: normal; font-size: 26px; animation: fall 2.2s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: .2; } }

/* onboarding */
.ob-dots { display: flex; gap: .35rem; justify-content: center; margin-bottom: 1rem; }
.ob-dots i { width: 28px; height: 5px; border-radius: 99px; background: var(--line); }
.ob-dots i.on { background: var(--primary); }
.task { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: .5rem; }
.task.late { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.task.done .tt { color: var(--muted); text-decoration: line-through; }
.saved-flag { font-size: .8rem; color: var(--ok); font-weight: 600; opacity: 0; transition: opacity .3s; }
.saved-flag.show { opacity: 1; }

/* help & guide */
.help-box { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1rem; }
.help-box summary { cursor: pointer; font-weight: 700; font-size: .9rem; list-style: none; }
.help-box summary::-webkit-details-marker { display: none; }
.help-box[open] summary { margin-bottom: .5rem; }
.guide-sec summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; }
.guide-sec summary::-webkit-details-marker { display: none; }
.guide-sec summary::after { content: "＋"; margin-inline-start: auto; color: var(--muted); }
.guide-sec[open] summary::after { content: "－"; }
.guide-body { margin-top: .8rem; line-height: 1.9; }
.guide-body table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.guide-body th, .guide-body td { border: 1px solid var(--line); padding: .4rem .6rem; text-align: start; }
.guide-body th { background: var(--surface-2); }
.guide-body ol, .guide-body ul { padding-inline-start: 1.3rem; }
.guide-body li { margin-bottom: .35rem; }
.logo-prev { width: 84px; height: 84px; border-radius: 14px; border: 1px dashed var(--line); display: grid; place-items: center; overflow: hidden; background: #fff; }
.logo-prev img { max-width: 100%; max-height: 100%; }
.ce-table input.i, .ce-table textarea.i, .ce-table select.i { padding: .35em .5em; font-size: .85rem; border-radius: 8px; }
.ce-table textarea.i { min-height: 54px; }
.ce-table td { padding: .35rem .4rem; }
.sticky-bar { position: sticky; bottom: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); padding: .7rem 1rem; margin: 1rem -1.15rem -1.15rem; display: flex; gap: .6rem; align-items: center; z-index: 10; flex-wrap: wrap; }
.content > .sticky-bar { margin-inline: 0; margin-bottom: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.attn a, .attn .ev { color: inherit; }

/* stage switcher */
.unit-sw { display: grid; gap: 2px; margin: -.4rem .5rem .8rem; }
.unit-sw select { font: inherit; font-size: .85rem; font-weight: 600; padding: .4rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--primary-soft); color: var(--primary); }
.alert-row { display: flex; gap: .7rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border-bottom: 0; }

/* report print */
.report { background: #fff; color: #111; }
.report h1, .report h2 { color: #0e5a52; }
.report .tbl th { background: #eef2f0; color: #333; }
@media print {
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing #print-area { display: block !important; }
  @page { size: A4; margin: 1cm; @top-left { content: ""; } @top-center { content: ""; } @top-right { content: ""; } @bottom-left { content: ""; } @bottom-right { content: ""; } @bottom-center { content: "صفحة " counter(page) " من " counter(pages); font: 9px "Noto Kufi Arabic", Arial, sans-serif; color: #888; } }
  .content, .report, .invoice, .legal-doc { overflow-wrap: break-word; }
  .content td, .content th, .invoice td, .invoice th { overflow-wrap: anywhere; }
  table { break-inside: auto; } tr, img { break-inside: avoid; } thead { display: table-header-group; }
  h1, h2, h3, h4 { break-after: avoid; }
  body { background: #fff; }
  .side, .topbar, .bottom-nav, .banner, .no-print { display: none !important; }
  .shell { display: block; } .content { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
  .report { font-size: 12px; }
  .pg-break { break-before: page; }
}

/* رسم الإيراد الشهري */
.mchart { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-top: .6rem; }
.mcol { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; }
.mcol .mv { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.mcol .ml { font-size: .78rem; color: var(--muted); }
.mbar { height: 110px; width: 100%; max-width: 48px; background: transparent; border-bottom: 2px solid var(--line); border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; overflow: hidden; }
.mbar i { display: block; width: 100%; background: var(--primary); border-radius: 8px 8px 0 0; transition: height .4s; }
.mcol.cur .mbar i { background: var(--accent); }
.mcol.cur .ml, .mcol.cur .mv { color: var(--text); font-weight: 700; }

/* محرر النماذج الجاهزة */
.fm-card.off { opacity: .65; }
.fm-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.fm-head { display: flex; gap: .7rem; flex-wrap: wrap; }
.fm-field { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-bottom: .6rem; }
.fm-num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.fm-body { flex: 1; min-width: 0; }
.fm-tools { display: flex; flex-direction: column; gap: .2rem; }
.fm-preview { position: sticky; top: 1rem; }
.fm-paper { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; max-height: 75vh; overflow: auto; box-shadow: var(--shadow); }
@media (max-width: 900px) { .fm-layout { grid-template-columns: 1fr; } .fm-preview { position: static; } }

/* سياسة الخصوصية والشروط */
.legal-wrap { min-height: 100vh; background: var(--bg); }
.legal-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .8rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.2rem; max-width: 1080px; margin: 0 auto; padding: 1.2rem; align-items: start; }
.legal-toc { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem; }
.legal-toc a { color: var(--muted); font-size: .88rem; padding: .3rem .5rem; border-radius: 8px; }
.legal-toc a:hover { background: var(--primary-soft); color: var(--primary); }
.legal-doc { padding: 1.6rem 2rem; line-height: 1.95; }
.legal-doc h1 { margin: 0 0 .2rem; text-wrap: balance; }
.legal-doc section { margin-top: 1.6rem; scroll-margin-top: 80px; }
.legal-doc h2 { font-size: 1.12rem; display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.legal-doc ul { padding-inline-start: 1.3rem; margin: .4rem 0; }
.legal-doc li { margin-bottom: .35rem; }
.lg-n { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: .85rem; }
.ph { background: var(--accent-soft); color: var(--accent); border: 1px dashed var(--accent); border-radius: 6px; padding: 0 .35rem; font-weight: 600; }
.agree { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; margin: .4rem 0 1rem; cursor: pointer; line-height: 1.7; }
.agree input { margin-top: .35rem; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
@media (max-width: 820px) { .legal { grid-template-columns: 1fr; padding: 1rem; } .legal-toc { position: static; } .legal-doc { padding: 1.1rem; } }
@media print { .legal-top, .legal-toc { display: none; } .legal { display: block; } }

/* التسجيل: ثلاثة خيارات تبقى متجاورة في الجوال */
@media (max-width: 820px) { .grid3.keep3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid3.keep3 > .card { padding: .6rem !important; } .grid3.keep3 .tiny { display: none; } }

/* الفاتورة */
.inv-actions { max-width: 820px; margin: 1rem auto 0; padding: 0 1.2rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.invoice { max-width: 820px; margin: 1rem auto 2rem; background: #fff; color: #111; border: 1px solid #dde4e0; border-radius: 14px; padding: 2rem; font-size: .95rem; }
.inv-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-bottom: 2px solid #0e5a52; padding-bottom: 1rem; }
.inv-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.2rem; color: #0e5a52; margin-bottom: .3rem; }
.inv-title h1 { margin: 0; font-size: 1.35rem; color: #0e5a52; }
.inv-meta { margin-top: .5rem; border-collapse: collapse; font-size: .85rem; }
.inv-meta td { padding: .15rem .5rem .15rem 0; }
.inv-meta td:first-child { color: #5d6b67; padding-inline-end: 1rem; }
.inv-buyer { margin: 1rem 0; padding: .8rem 1rem; background: #f4f6f4; border-radius: 10px; }
.inv-lines { width: 100%; border-collapse: collapse; }
.inv-lines th { background: #0e5a52; color: #fff; padding: .55rem .6rem; text-align: start; font-weight: 600; font-size: .85rem; }
.inv-lines td { padding: .6rem; border-bottom: 1px solid #e5eae7; }
.inv-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.inv-qr svg { width: 130px; height: 130px; display: block; }
.inv-totals { border-collapse: collapse; min-width: 280px; margin-inline-start: auto; }
.inv-totals td { padding: .4rem .6rem; border-bottom: 1px solid #e5eae7; }
.inv-totals td:last-child { text-align: end; white-space: nowrap; }
.inv-totals .grand td { font-weight: 700; font-size: 1.1rem; color: #0e5a52; border-bottom: 2px solid #0e5a52; }
.inv-note { margin-top: 1.5rem; border-top: 1px dashed #dde4e0; padding-top: .8rem; }
@media (max-width: 600px) { .invoice { padding: 1rem; border-radius: 0; } .inv-totals { min-width: 0; width: 100%; } }
@media print { .no-print { display: none !important; } body { background: #fff; } .legal-wrap { background: #fff; } .invoice { border: 0; margin: 0; padding: 0; max-width: none; } }
@media (max-width: 820px) { .grid2.keep2m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .7rem; } }
.seq-sm { padding: .5rem .8rem; gap: .4rem; font-size: .82rem; } .seq-sm .pill { font-size: .75rem; padding: .1rem .5rem; }

/* تفاصيل المعيار عند المشرف */
.std-link { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .25rem; padding: .35rem .6rem; margin-inline-start: .4rem; border-radius: 8px; color: inherit; font-size: .85rem; }
.std-link:hover { background: var(--primary-soft); }
.std-link .chev { color: var(--muted); font-size: 1.1rem; line-height: 1; }
.std-counts { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1rem; font-size: .85rem; }
.std-counts .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: .35rem; }
.ind-row { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.ind-row:last-child { border-bottom: 0; }
.ind-rate { width: 82px; flex: none; border-radius: 12px; padding: .5rem .3rem; text-align: center; display: flex; flex-direction: column; gap: .1rem; }
.ind-rate b { font-size: 1.3rem; line-height: 1.1; }
.ind-rate span { font-size: .7rem; line-height: 1.3; }
@media (max-width: 600px) { .ind-rate { width: 64px; } }

/* تحليل الواقع */
.swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sw-box { margin: 0; }
.sw-item { display: flex; gap: .4rem; align-items: flex-start; margin-bottom: .45rem; }
.sw-item textarea { flex: 1; min-height: 38px; resize: none; overflow: hidden; line-height: 1.6; }
.sw-item .ind-code { margin-top: .5rem; cursor: help; }
@media (max-width: 820px) { .swot { grid-template-columns: 1fr; } }

/* الخطة التشغيلية */
.op-start .op-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.op-stage { cursor: pointer; }
.op-stage input { position: absolute; opacity: 0; pointer-events: none; }
.op-stage span { display: block; text-align: center; padding: .8rem .4rem; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 600; background: var(--surface); }
.op-stage input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.op-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.op-mode { text-align: start; cursor: pointer; margin: 0; display: flex; flex-direction: column; gap: .25rem; border: 1.5px solid var(--line); font: inherit; color: inherit; }
.op-mode:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.op-mode:disabled { opacity: .55; cursor: not-allowed; }
.op-goal summary { cursor: pointer; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; list-style: none; font-weight: 700; }
.op-goal summary::-webkit-details-marker { display: none; }
.op-goal summary::before { content: "▸"; color: var(--muted); transition: transform .2s; }
.op-goal[open] summary::before { transform: rotate(90deg); }
[dir="rtl"] .op-goal summary::before { content: "◂"; }
[dir="rtl"] .op-goal[open] summary::before { transform: rotate(-90deg); }
.op-goal[open] summary { margin-bottom: .8rem; }
.op-std { flex: 1; min-width: 0; }
.op-prog { border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: .7rem; margin-bottom: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.op-pname { font-weight: 700; flex: 1; }
.op-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.op-grid label span { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .15rem; }
@media (max-width: 820px) { .op-start .op-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } .op-modes, .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .op-modes { grid-template-columns: 1fr; } }

/* الشواهد كروابط */
.ev-link { background: var(--primary-soft); border-radius: 12px; padding: .8rem; }
.ev-help { margin-top: .5rem; }
.ev-help summary { cursor: pointer; color: var(--warn); font-weight: 600; }
.ev-help ol { margin: .4rem 0; padding-inline-start: 1.2rem; }
.ev-help p { margin: .35rem 0; }

/* جاهزية الإطلاق */
.launch-row { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.launch-row:last-child { border-bottom: 0; }
.launch-row.ok b { color: var(--ok); }
.launch-ic { font-size: 1.2rem; line-height: 1.4; }

/* خدمة المعلمين — المتابعة الصفية */
.t-now { margin-bottom: 1rem; }
.t-slot { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
.t-slot:last-child { border-bottom: 0; }
.t-slot.on { background: var(--primary-soft); border-radius: 10px; padding-inline: .6rem; }
.t-p { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; }
.t-slot .chev, .std-link .chev { color: var(--muted); }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.t-counts { display: flex; gap: .5rem; flex-wrap: wrap; }
.t-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; }
.t-stu { display: flex; align-items: center; gap: .6rem; padding: .75rem .8rem; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; min-height: 52px; transition: background .15s, border-color .15s; }
.t-stu .t-x { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); }
.t-stu.abs { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.t-stu.abs .t-x { background: var(--danger); color: #fff; }
.t-stu.abs .t-name { text-decoration: line-through; color: var(--muted); }
.t-name { font-weight: 600; min-width: 0; }
.t-fol { padding: .7rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .45rem; }
.t-fol:last-child { border-bottom: 0; }
.t-fol.abs { opacity: .55; }
.t-ctrl { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { border: 1.5px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: .35rem .75rem; font: inherit; font-size: .82rem; cursor: pointer; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.chip.on { background: var(--c, var(--primary)); border-color: var(--c, var(--primary)); color: var(--on-primary); }
.chip.on.ok, .chip.on.no { color: #fff; }
.chip.on.ok { --c: var(--ok); } .chip.on.no { --c: var(--danger); }
.chip.noted::after { content: " ✎"; }
.t-pick { max-height: 45vh; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .3rem .8rem; border: 1px solid var(--line); border-radius: 10px; padding: .6rem; }
.t-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.t-step { display: flex; gap: .5rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: 12px; }
.t-step.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--surface)); }
.t-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; }
.t-step.ok .t-n { background: var(--ok); color: #fff; }
.t-add { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1fr auto; gap: .4rem; margin: .8rem 0; }
.t-tt { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; margin-top: .4rem; }
.t-tt summary { cursor: pointer; }
.t-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: .4rem; }
.t-stlist { max-height: 300px; overflow: auto; margin-top: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .4rem .6rem; }
.t-stlist .row { padding: .2rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .t-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-add { grid-template-columns: 1fr 1fr; } .t-add > #aT, .t-add > #aAdd { grid-column: 1 / -1; } .t-list { grid-template-columns: 1fr; } }
.t-more { margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: .7rem; }
.t-more summary { cursor: pointer; color: var(--muted); }
.names-add textarea { font-size: .95rem; line-height: 1.7; }
.otp-in { text-align: center; font-size: 1.6rem; letter-spacing: .35em; font-weight: 700; }
.backup-codes { background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; padding: .8rem; font-size: 1.05rem; letter-spacing: .08em; text-align: center; line-height: 1.9; }

/* بطاقات الأسعار: شارة واضحة في أعلى البطاقة */
.price { position: relative; }
.price-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--primary); color: var(--on-primary); font-size: .8rem; font-weight: 700; padding: .3rem .9rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.12); z-index: 1; }
.price-badge.new { background: var(--accent); }
.price-grid { gap: 1rem; align-items: stretch; }
.price-grid .price .amt { font-size: 2rem; }
@media (max-width: 1100px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }
/* البطاقات داخل الشبكات تبدأ من نفس الخط (بدون مسافة إضافية للبطاقات التالية) */
.grid2 > .card, .grid3 > .card, .grid4 > .card, .tiers > .card { margin-top: 0; }
.price-grid .price h3 { font-size: 1.05rem; min-height: 1.6em; }
.price-grid .price ul { font-size: .9rem; }
.price-grid .price li { padding: .25rem 0; line-height: 1.6; }
.price-grid .price .btn.block { margin-top: auto; }

/* ───────── الواجهة العامة: شريط المزايا، الآراء، الفوتر، الأزرار العائمة، العرض الموسمي ───────── */
.feat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-top: 0; padding-bottom: 0; }
.fs-item { display: flex; gap: .7rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.fs-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); font-size: 1.35rem; }
@media (max-width: 900px) { .feat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .feat-strip { grid-template-columns: 1fr; } }

.sec-divider { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: -.4rem 0 1.6rem; }
.sec-divider span { width: 90px; height: 2px; background: var(--text); opacity: .75; }
.sec-divider i { width: 12px; height: 12px; border: 2px solid var(--text); border-radius: 50%; opacity: .75; }
.testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.testi-card { margin: 0; position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; }
.testi-q { position: absolute; top: .4rem; inset-inline-end: 1rem; font-size: 3.4rem; line-height: 1; color: var(--line); font-family: Georgia, serif; }
.testi-card blockquote { margin: 0; line-height: 1.9; flex: 1; }
.testi-card figcaption { display: flex; gap: .7rem; align-items: center; }
.testi-av { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; flex: none; }
.testi-stars { color: #f5b301; letter-spacing: .1em; font-size: .95rem; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; } }

.site-foot { --fbg: #1c2322; --ftx: #e9efed; --fmu: #a9b6b2; --fln: rgba(255,255,255,.1); position: relative; margin-top: 4rem; background: var(--fbg); color: var(--ftx); }
.sf-wave { position: absolute; top: -48px; left: 0; right: 0; height: 50px; background: var(--fbg); clip-path: ellipse(75% 100% at 50% 100%); }
.sf-inner { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 2rem; padding: 2.5rem 1.4rem 2rem; max-width: 1180px; margin: 0 auto; align-items: start; text-align: center; }
.sf-col { display: flex; flex-direction: column; gap: .75rem; align-items: center; }
.sf-col h3, .sf-col h4 { margin: 0 0 .3rem; font-size: 1.05rem; color: #fff; }
.sf-col a { color: var(--ftx); opacity: .9; }
.sf-col a:hover { opacity: 1; color: #fff; }
.sf-brand b { font-size: 1.2rem; color: #fff; }
.sf-brand p { margin: 0; color: var(--fmu); max-width: 380px; line-height: 1.8; }
.sf-brand img { background: #fff; border-radius: 14px; padding: 4px; }
.sf-cr { display: flex; gap: .6rem; align-items: center; text-align: start; background: rgba(255,255,255,.06); border: 1px solid var(--fln); border-radius: 12px; padding: .5rem .9rem; }
.sf-cr-ic { color: #7fd1c3; }
.sf-shield { color: #7fd1c3; }
.sf-trust b { color: #fff; }
.sf-trust-note { color: var(--fmu); max-width: 260px; line-height: 1.7; }
.sf-contact { border-top: 1px dashed var(--fln); padding: 1.4rem 1.4rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sf-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
.sf-c { display: flex; align-items: center; gap: .6rem; color: var(--ftx); }
.sf-ci, .sf-social a { width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; transition: background .2s; }
.sf-social { display: flex; flex-wrap: wrap; gap: .7rem; }
.sf-social a:hover, .sf-c:hover .sf-ci { background: rgba(255,255,255,.12); }
.sf-bottom { background: rgba(0,0,0,.25); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.4rem; color: var(--fmu); font-size: .85rem; }
.sf-pay { display: flex; gap: .45rem; flex-wrap: wrap; }
.sf-pay span { background: #fff; color: #1c2322; font-weight: 700; font-size: .75rem; border-radius: 8px; padding: .3rem .6rem; }
@media (max-width: 820px) { .sf-inner { grid-template-columns: 1fr; gap: 1.6rem; } }

.wa-float { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.2); z-index: 60; transition: transform .2s; }
.wa-float:hover { transform: scale(1.06); }
.top-float { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 18px; width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--text); border: 2px solid var(--text); display: grid; place-items: center; cursor: pointer; z-index: 60; box-shadow: var(--shadow); }


.promo { text-align: center; position: relative; padding-top: .4rem; }
.promo-x { position: absolute; top: -.4rem; inset-inline-end: -.4rem; background: none; border: 0; font-size: 1.1rem; color: var(--muted); cursor: pointer; }
.promo-art { font-size: 3.2rem; line-height: 1.2; }
.promo h3 { margin: .4rem 0; font-size: 1.35rem; }
.promo-code { display: inline-flex; flex-direction: column; gap: .15rem; border: 2px dashed var(--accent); background: var(--accent-soft); border-radius: 12px; padding: .5rem 1.4rem; margin: .6rem 0; }
.promo-code b { font-size: 1.3rem; letter-spacing: .12em; color: var(--accent); }
.promo-prev { border: 1px dashed var(--line); border-radius: 14px; padding: 1.2rem; background: var(--surface); }
.tm-row { border: 1px solid var(--line); margin-bottom: .6rem; }

/* أيقونات الواجهة ورسومها التوضيحية */
.feat .feat-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 0; margin-bottom: .6rem; }
.feat-ic.c0 { background: #e3f1ee; color: #0e5a52; } .feat-ic.c1 { background: #fbf3e2; color: #a5761a; }
.feat-ic.c2 { background: #e6effb; color: #2461c7; } .feat-ic.c3 { background: #f3e9f7; color: #7c3aa8; }
:root[data-theme="dark"] .feat-ic, :root[data-theme="dark"] .fs-ic { filter: saturate(1.1); }
.fs-ic { color: var(--primary); font-size: 0; }
.vs-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; vertical-align: middle; margin-inline-end: .3rem; }
.vs-ic.bad { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.vs-ic.good { background: var(--primary-soft); color: var(--primary); }
.stat-ic { position: relative; }
.st-ic { position: absolute; top: 1rem; inset-inline-end: 1rem; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.aud-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.aud-card { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.aud-art svg { display: block; width: 100%; height: auto; }
.aud-card h3 { margin: .9rem 1rem .4rem; }
.aud-card ul { list-style: none; margin: 0 1rem 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.aud-card li { display: flex; gap: .45rem; align-items: center; font-size: .9rem; }
.aud-card li svg { color: var(--ok); flex: none; }
@media (max-width: 1000px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aud-grid { grid-template-columns: 1fr; } }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; position: relative; }
.how::before { content: ""; position: absolute; top: 38px; left: 16%; right: 16%; border-top: 2px dashed var(--line); z-index: 0; }
.how-step { text-align: center; position: relative; z-index: 1; }
.how-ic { width: 76px; height: 76px; margin: 0 auto .7rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); color: var(--primary); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.how-n { position: absolute; top: -6px; inset-inline-end: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.how-step h3 { margin: 0 0 .2rem; }
@media (max-width: 700px) { .how { grid-template-columns: 1fr; } .how::before { display: none; } }
.dom-card { border-top: 4px solid var(--dc); }
.dom-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: color-mix(in srgb, var(--dc) 12%, var(--surface)); margin-bottom: .5rem; }
.pay-ic { background: #fff; border-radius: 8px; padding: .2rem .45rem; display: inline-grid; place-items: center; height: 34px; }
.pay-ic svg { display: block; }
.site-foot { margin-top: 5rem; }
.pay-ic { direction: ltr; height: 36px; padding: .15rem .35rem; }
.pay-ic svg text { direction: ltr; unicode-bidi: plaintext; }
/* الأيقونات بعيدة عن زر «للأعلى» في الزاوية */
.sf-bottom { padding-left: 96px; }
@media (max-width: 600px) { .sf-bottom { flex-direction: column; align-items: center; text-align: center; padding: 1rem 1rem 80px; } }

/* admin: plans & coupons */
.plan-grid { gap: 1.2rem; align-items: stretch; margin-top: .8rem; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: .7rem; padding-top: 1.4rem; }
.plan-card.off { opacity: .7; border-style: dashed; }
.plan-amt b { font-size: 1.7rem; font-weight: 800; }
.plan-feats { list-style: none; padding: 0; margin: 0; font-size: .88rem; flex: 1; }
.plan-feats li { padding: .18rem 0; } .plan-feats li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-inline-end: .45rem; }
.plan-feats li.more { color: var(--muted); } .plan-feats li.more::before { content: ""; margin: 0; }
.plan-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.plan-actions { gap: .25rem; }
.plan-edit { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.4rem; margin-top: .8rem; }
.plan-form h4 { margin: 1.1rem 0 .6rem; font-size: .95rem; color: var(--primary); } .plan-form h4:first-child { margin-top: 0; }
.plan-form label.f { margin-bottom: .8rem; }
.plan-prev { position: sticky; top: 0; align-self: start; padding-top: .4rem; }
.plan-prev .price { padding-top: 1.4rem; }
.toggle-row { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; margin-bottom: .6rem; cursor: pointer; }
.toggle-row input { margin-top: .3rem; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.toggle-row .tiny { display: block; }
.code-tag { font-family: ui-monospace, Consolas, monospace; background: var(--surface-2); padding: .15rem .5rem; border-radius: 6px; letter-spacing: .04em; }
.coupon-prev { background: var(--primary-soft); border-radius: 10px; padding: .7rem .9rem; margin-top: .4rem; }
@media (max-width: 760px) { .plan-edit { grid-template-columns: 1fr; } .plan-prev { position: static; } }
.price-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; align-items: stretch; }
.rr-card { border: 1.5px dashed var(--primary); background: var(--primary-soft); }
.rr-h { margin: 1.1rem 0 .5rem; font-size: .95rem; color: var(--primary); }
.rr-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .35rem; }
.rr-row [data-t] { flex: 1; } .rr-row [data-p] { width: 80px; flex: none; }
/* بطاقة نافس */
.nf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: .9rem 0; }
.nf-kpis > div { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .1rem; }
.nf-kpis b { font-size: 1.45rem; color: var(--primary); }
.nf-h { margin: .9rem 0 .4rem; font-size: .92rem; display: flex; gap: .4rem; align-items: center; }
.nf-dist { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font-size: .75rem; font-weight: 700; }
.nf-dist span { display: flex; align-items: center; justify-content: center; min-width: 30px; }
.nf-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin: .4rem 0; }
.nf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: .3rem; vertical-align: middle; }
.nf-in td, .nf-in th { padding: .3rem .4rem; }
.pf-sec { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; margin-top: .7rem; }
.pf-sec > summary { cursor: pointer; font-weight: 700; }
/* معاينة الطباعة A4 */
.a4-wrap { background: #e9edeb; border-radius: 10px; padding: 16px; margin-top: .8rem; max-height: 72vh; overflow: auto; }
.a4-page { background: #fff; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 14mm; box-shadow: 0 6px 24px rgba(0,0,0,.15); box-sizing: border-box; color: #111; }

/* مكتبة النماذج ومولّد الأسابيع */
.tpl-sec { margin: 1.2rem 0 .5rem; font-size: 1rem; color: var(--primary); display: flex; gap: .4rem; align-items: baseline; }
.tpl-card h3 { font-size: .98rem; margin: .4rem 0 .2rem; }
.tpl-card[hidden], [data-sec][hidden], [data-dbox][hidden], #pf_storage_txt[hidden] { display: none !important; }
.cal-box { border: 1.5px dashed var(--accent); background: var(--accent-soft); }

/* خصم الباقة */
.old-price { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--muted); font-weight: 600; font-size: .62em; margin-inline-end: .35rem; }
.disc-tag { display: inline-block; margin-inline-start: .45rem; background: var(--danger); color: #fff; font-size: .78rem; font-weight: 800; border-radius: 999px; padding: .1rem .6rem; vertical-align: middle; }
.disc-box { border: 1px dashed var(--line); border-radius: 12px; padding: .8rem .9rem .2rem; margin-bottom: .9rem; background: var(--surface-2); }
/* متطلبات التقويم الذاتي */
.req-grid { align-items: start; }
.req-docs { display: grid; gap: .4rem; margin-top: .7rem; }
.req-doc { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }

/* تثبيت التطبيق على الشاشة الرئيسية */
.inst-bar { background: var(--primary-soft); align-items: center; }
.inst-head { display: flex; align-items: center; gap: .8rem; margin: .9rem 0 .4rem; }
.inst-head img { border-radius: 15px; box-shadow: 0 4px 14px rgba(4, 29, 26, .25); }
.inst-steps { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .55rem; }
.inst-step { display: flex; gap: .7rem; align-items: center; background: var(--soft, rgba(14, 90, 82, .06)); border-radius: 12px; padding: .6rem .8rem; line-height: 1.7; }
.inst-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
@media print { .inst-bar { display: none !important; } }

/* شريط توزيع الإجابات بالنسب */
.dist-pc { height: 18px; border-radius: 6px; }
.dist-pc i { display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; }
.lik-legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; }
.lik-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: .3rem; }

/* بيانات المدرسة في حساب مشرف الدعم */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem 1rem; }
.info-grid > div { background: var(--surface-2); border-radius: 10px; padding: .55rem .75rem; }

/* جدول المستخدمين في لوحة الأدمن: كل خلية بسطر واحد مع تمرير أفقي */
.tbl.sortable td { white-space: nowrap; }
.tbl.sortable th .sort-ic { opacity: .5; font-size: .75em; }

/* ───── الصفحات التعريفية: من نحن، تواصل معنا، دليل الاستخدام ───── */
.land-links { display: flex; gap: 1.2rem; margin-inline-start: 1.6rem; }
.land-links a { color: var(--muted); font-weight: 600; font-size: .92rem; }
.land-links a:hover { color: var(--primary); }
@media (max-width: 900px) { .land-links { display: none; } }
.info-nav { display: flex; gap: .3rem; margin-inline-start: 1rem; }
.info-nav a { color: var(--muted); padding: .35rem .7rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.info-nav a:hover, .info-nav a.on { background: var(--primary-soft); color: var(--primary); }
@media (max-width: 640px) { .info-nav { order: 9; width: 100%; margin: .3rem 0 0; justify-content: center; } }
.info-main { max-width: 1040px; margin: 0 auto; padding: 1rem 1.2rem 3rem; display: flex; flex-direction: column; gap: 1.6rem; }
.info-hero { text-align: center; padding: 2rem 0 .4rem; }
.info-hero h1 { margin: .5rem 0 .4rem; text-wrap: balance; }
.info-hero p { color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.9; }
.info-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--primary-soft); font-size: 1.9rem; }
.info-h { font-size: 1.2rem; margin: 0 0 .8rem; }
.info-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.info-grid2 h2 { font-size: 1.1rem; margin: 0 0 .4rem; }
.info-grid2 p { margin: 0; line-height: 1.9; }
.info-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.info-feat { display: flex; flex-direction: column; gap: .3rem; }
.info-feat span { font-size: 1.6rem; }
.info-feat p { margin: 0; line-height: 1.8; }
.info-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.info-val { border-top: 3px solid var(--accent); padding-top: .7rem; }
.info-val p { margin: .3rem 0 0; line-height: 1.8; }
.info-note { text-align: center; margin: 0; }
.info-cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: linear-gradient(135deg, var(--primary-soft), var(--surface)); }
.info-cta h3 { margin: 0; }
.info-cta p { margin: .2rem 0 0; }
.info-contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.info-contact form h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.info-side { display: flex; flex-direction: column; gap: 1rem; }
.info-side h3 { margin: 0 0 .6rem; font-size: 1rem; }
.info-ch { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; color: var(--text); border-bottom: 1px dashed var(--line); }
.info-ch:last-child { border-bottom: 0; }
.info-ci { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.info-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.hp { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.info-done { text-align: center; padding: 1.5rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.info-done h2 { margin: .4rem 0 0; }
.info-done .btn svg { width: 18px; height: 18px; vertical-align: middle; }
.info-before h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.info-before ul { margin: 0; line-height: 2; }
.info-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .8rem; }
.info-steps li { display: flex; gap: .8rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.info-steps p { margin: .2rem 0 0; line-height: 1.8; }
.info-n { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.info-faq { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.info-faq summary { cursor: pointer; font-weight: 700; }
.info-faq p { margin: .5rem 0 0; }
@media (max-width: 820px) { .info-grid2, .info-contact, .info-faq { grid-template-columns: minmax(0, 1fr); } .info-grid3 { grid-template-columns: 1fr 1fr; } .info-grid4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .info-grid3, .info-grid4 { grid-template-columns: 1fr; } }

/* قسم التقنيات */
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.tech-item { display: flex; gap: .7rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.tech-item b { font-size: .95rem; }
.tech-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
@media (max-width: 900px) { .tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tech-grid { grid-template-columns: 1fr; } }

/* الفوتر: هوية + ثلاثة أعمدة */
.site-foot .sf-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; text-align: start; }
.site-foot .sf-col { align-items: flex-start; gap: .65rem; }
.site-foot .sf-col h3, .site-foot .sf-col h4 { position: relative; padding-bottom: .45rem; }
.site-foot .sf-col h3::after, .site-foot .sf-col h4::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 28px; height: 2px; background: #c8962b; border-radius: 2px; }
.sf-logo { display: flex; align-items: center; gap: .7rem; color: #fff; }
.sf-ver { display: flex; align-items: center; gap: .5rem; color: #fff; font-size: .9rem; }
.sf-ver svg { width: 26px; height: 26px; }
.sf-help { color: #fff; font-size: 1.05rem; }
@media (max-width: 900px) { .site-foot .sf-inner { grid-template-columns: 1fr 1fr; } .site-foot .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-foot .sf-inner { grid-template-columns: 1fr; text-align: center; } .site-foot .sf-col { align-items: center; } .site-foot .sf-col h3::after, .site-foot .sf-col h3::after, .site-foot .sf-col h4::after { inset-inline-start: calc(50% - 14px); } }

/* رسائل التواصل */
.msg-list { display: flex; flex-direction: column; gap: .8rem; }
.msg-new { border-inline-start: 4px solid var(--accent); }
.msg-body { white-space: pre-wrap; line-height: 1.9; margin: .6rem 0; }

/* ───── الجدول المدرسي وحصص الانتظار ───── */
.tt-steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.tt-step { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: .92rem; }
.tt-step.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.tt-step.ok .t-n { background: var(--ok); color: #fff; }
.tt-day { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: .9rem; background: var(--surface); }
.tt-day:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.tt-add { display: grid; grid-template-columns: 2fr 110px 1.5fr auto; gap: .6rem; align-items: end; }
@media (max-width: 700px) { .tt-add { grid-template-columns: 1fr 1fr; } }
.tt-class summary, .tt-rule summary { cursor: pointer; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tt-class .tbl-wrap, .tt-rule .tbl-wrap { margin-top: .7rem; }
.tt-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 1px solid; margin-inline-end: .4rem; vertical-align: middle; }
.tt-loads { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .4rem; }
.tt-load { display: flex; justify-content: space-between; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: .9rem; }
.tt-avail td, .tt-avail th { padding: .2rem; }
.tt-av { width: 38px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--primary-soft); color: var(--primary); font-weight: 700; cursor: pointer; }
.tt-av.off { background: var(--danger, #c0392b); color: #fff; border-color: transparent; text-decoration: line-through; }
.tt-issues { margin-top: .8rem; padding: .7rem .9rem; border-radius: 12px; font-size: .9rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.tt-issues.err { background: color-mix(in srgb, var(--danger, #c0392b) 10%, transparent); }
.tt-issues.warn { background: var(--accent-soft); }
.tt-sum { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.tt-grid { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 640px; table-layout: fixed; }
.tt-grid th:first-child { width: 72px; }
.tt-grid th { font-size: .85rem; color: var(--muted); font-weight: 700; }
.tt-grid tbody th { text-align: start; white-space: nowrap; }
.tt-c { height: 58px; background: var(--surface-2); border-radius: 10px; padding: 0; vertical-align: middle; }
.tt-e { cursor: pointer; }
.tt-e:hover { outline: 2px dashed var(--primary); }
.tt-c.sel { outline: 3px solid var(--accent); }
.tt-l { height: 100%; min-height: 58px; border: 1px solid; border-radius: 10px; padding: .3rem; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 1.35; }
.tt-l b { font-size: .82rem; }
.tt-l small { font-size: .72rem; opacity: .85; }

/* ───── التحويل الإلكتروني ───── */
.t-staff-add { gap: .4rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); align-items: center; }
.t-duty { margin-top: .3rem; max-width: 210px; padding: .2rem .4rem; font-size: .8rem; }
.rf-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
.rf-type { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.rf-type input { display: none; }
.rf-type small { color: var(--muted); font-size: .72rem; }
.rf-type:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.rf-who { box-shadow: none; background: var(--primary-soft); padding: .6rem .9rem; margin-bottom: .6rem; }
.rf-filter { margin-top: .5rem; }
.rf-filter button { font-size: .8rem; }
.rf-list { display: flex; flex-direction: column; gap: .6rem; }
.rf-item { color: var(--text); display: flex; flex-direction: column; gap: .3rem; }
.rf-item:hover { border-color: var(--primary); }
.rf-new { border-inline-start: 4px solid var(--accent); }
.rf-note { color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-t { background: var(--surface-2); }
.rf-behavior, .rf-late { background: color-mix(in srgb, var(--danger, #c0392b) 12%, transparent); }
.rf-academic, .rf-psych, .rf-talent { background: var(--primary-soft); }
.rf-health { background: color-mix(in srgb, #23798c 12%, transparent); }
.rf-activity { background: var(--accent-soft); }
.rf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: .9rem; }
.rf-facts > div { display: flex; flex-direction: column; gap: .1rem; }
@media (max-width: 600px) { .rf-facts { grid-template-columns: 1fr; } }
.rf-desc { margin-top: .9rem; padding: .7rem .9rem; background: var(--surface-2); border-radius: 12px; white-space: pre-wrap; line-height: 1.9; }
.rf-sts { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rf-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.rf-ev { display: flex; gap: .7rem; align-items: flex-start; position: relative; }
.rf-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: .45rem; flex: none; }
.rf-priv .rf-dot { background: var(--accent); }
.rf-txt { white-space: pre-wrap; margin: .2rem 0; }
.rf-hist { padding: .45rem 0; border-bottom: 1px solid var(--line); color: var(--text); }
.rf-item .row, .rf-item > .row > .row { align-items: center; }
.rf-item .pill, .card .row .pill.rf-t { align-self: center; }
.rf-list .rf-item { margin: 0; }
.t-duty { height: auto; min-height: 0; }

/* ───── محرك نور ───── */
.nr-cta { gap: .7rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 .8rem; }
.nr-how { margin: 0 0 .8rem; padding-inline-start: 1.2rem; line-height: 1.9; }
.nr-file { cursor: pointer; }
.nr-map { margin-top: 1rem; padding: .8rem; background: var(--surface-2); border-radius: 12px; }
.nr-sum { display: flex; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.nr-tbl { max-height: 320px; overflow: auto; margin-top: .6rem; }
.nr-bad td { background: color-mix(in srgb, var(--danger, #c0392b) 9%, transparent); }
.nr-warn td { background: var(--accent-soft); }

/* ───── السجلات وملف الطالب ولوحة التميز ولوحة المدير ───── */
.rc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .rc-layout { grid-template-columns: 1fr; } }
.rc-side { display: flex; flex-direction: column; gap: .8rem; position: sticky; top: 70px; }
@media (max-width: 860px) { .rc-side { position: static; } }
.rc-g { display: flex; flex-direction: column; gap: .1rem; }
.rc-gh { margin-bottom: .2rem; font-weight: 700; }
.rc-side a { display: flex; justify-content: space-between; gap: .4rem; padding: .35rem .55rem; border-radius: 8px; color: var(--text); font-size: .9rem; }
.rc-side a:hover { background: var(--surface-2); }
.rc-side a.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.rc-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rc-main > .card { margin: 0; }
.rc-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; }
.rc-form .rc-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .rc-form { grid-template-columns: 1fr; } }
.rc-checks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.rc-view th { width: 34%; text-align: start; background: var(--surface-2); font-weight: 600; }
.rc-view td, .rc-view th { padding: .45rem .6rem; vertical-align: top; }
.sf-tiles .stat .v { font-size: 1.5rem; }
.sf-rec { border-bottom: 1px solid var(--line); padding: .4rem 0; }
.sf-rec summary { cursor: pointer; }
.sf-rec .rc-view { margin: .5rem 0; }
.hn-list { display: flex; flex-direction: column; gap: .2rem; }
.hn-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; }
.hn-row:nth-child(odd) { background: var(--surface-2); }
.hn-row.top { background: var(--accent-soft); }
.hn-m { width: 32px; text-align: center; font-size: 1.2rem; }
.hn-p { color: var(--primary); font-size: 1.1rem; }
.ex-tile { color: var(--text); }
a.ex-tile:hover { border-color: var(--primary); }
.ex-bars { display: flex; align-items: flex-end; gap: .8rem; height: 150px; padding-top: .4rem; }
.ex-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; height: 100%; }
.ex-bar i { display: block; width: 100%; max-width: 46px; min-height: 3px; background: var(--primary); border-radius: 8px 8px 3px 3px; }
.ex-list { display: flex; flex-direction: column; }
.ex-list > * { padding: .5rem 0; border-bottom: 1px solid var(--line); color: var(--text); }
.ps-card .ps-ic { font-size: 3.4rem; }
.ps-card.ok { border-top: 6px solid var(--ok); }
.ps-card.old { border-top: 6px solid var(--warn); }
.ps-card.bad { border-top: 6px solid var(--danger, #c0392b); }
/* ───── بنك أسئلة نافس ───── */
.qb-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 560px) { .qb-choices { grid-template-columns: 1fr; } }
.qb-ch { display: flex; align-items: center; gap: .4rem; }
.qb-ch .i { flex: 1; }
.qb-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: .8rem; }
.qb-list .qb-q { margin: 0; }
.qb-stem { margin: .4rem 0; line-height: 1.9; font-weight: 600; }
.qb-opts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.qb-opts li { padding: .3rem .5rem; border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.qb-opts li.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); font-weight: 700; }

/* ───── حضور الموظفين والمساءلات والرسائل ───── */
.sa-sig { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; padding: .7rem .9rem; background: var(--surface-2); border-radius: 12px; }
.sa-sigimg { max-height: 56px; max-width: 180px; background: #fff; border-radius: 8px; padding: 4px; }
.sa-due { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.t-group { gap: .6rem; flex-wrap: wrap; padding-bottom: .7rem; margin-bottom: .5rem; border-bottom: 1px dashed var(--line); }
.wa-list { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 50vh; overflow: auto; }
.sa-entry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .8rem; align-items: end; }
@media (max-width: 700px) { .sa-entry { grid-template-columns: 1fr 1fr; } }
.sa-late { font-size: 1.2rem; display: block; padding: .45rem 0; }
.sa-late.bad { color: var(--danger, #c0392b); }
button.sa-sug { cursor: pointer; border: 0; font: inherit; }

/* أعمدة النماذج: قوائم وتاريخ وتوليد */
.ce-table select.i { min-width: 120px; }
.ce-table .ce-other { margin-top: .3rem; }
.ce-ai { display: flex; gap: .25rem; align-items: center; }
.ce-ai .i { flex: 1; min-width: 160px; }
.ce-table th .btn { padding: .1rem .4rem; font-size: .75rem; }
.ce-table td:first-child > .i { min-width: 150px; }
.ce-ai .i { min-width: 260px; }

/* الجوال: لا شيء يتجاوز عرض الشاشة — الأزرار الطويلة تلتف، والعناصر داخل الصفوف والشبكات تنكمش */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; }
  .row > *, .grid2 > *, .grid3 > *, .grid > * { min-width: 0; }
  .content img, .content video, .content iframe { max-width: 100%; height: auto; }
  .content pre, .content code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
/* زر واتساب لا يغطي القائمة الجانبية ولا النوافذ المنبثقة */
body:has(.side.open) .wa-float, body:has(.modal-bg) .wa-float { display: none; }
/* إحساس التطبيق على الجوال */
html { -webkit-tap-highlight-color: transparent; }
a, button, .btn, .toggle-row, label, .bottom-nav a { touch-action: manipulation; }
@media (max-width: 980px) {
  /* خط 16 في خانات الإدخال يمنع آيفون من تكبير الصفحة عند الكتابة */
  input.i, select.i, textarea.i, .dp-btn { font-size: 16px; }
  .side { overscroll-behavior: contain; }
}
@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
  .topbar { padding-top: calc(.6rem + env(safe-area-inset-top, 0px)); }
  .side { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
  .side, .bottom-nav, .topbar, .btn { -webkit-user-select: none; user-select: none; }
}

/* زر الحساب وقائمته في الشريط العلوي */
.acct { position: relative; }
.acct-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: var(--on-primary, #fff); font: 800 1rem var(--font); border: 2px solid var(--accent); cursor: pointer; display: grid; place-items: center; }
.acct-btn:hover, .acct.open .acct-btn { box-shadow: 0 0 0 4px var(--primary-soft); }
.acct-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 250px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.16); padding: .4rem; display: none; z-index: 60; }
.acct.open .acct-menu { display: block; animation: acctIn .14s ease-out; }
@keyframes acctIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.acct-hd { display: flex; gap: .65rem; align-items: center; padding: .55rem .6rem .75rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.acct-hd b { display: block; font-size: .95rem; }
.acct-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; display: grid; place-items: center; }
.acct-menu a, .acct-menu button { display: flex; width: 100%; align-items: center; gap: .55rem; padding: .62rem .7rem; border-radius: 10px; background: none; border: 0; font: inherit; font-size: .93rem; color: var(--text); text-align: start; cursor: pointer; text-decoration: none; min-height: 0; box-shadow: none; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--primary-soft); }
.acct-menu a > span, .acct-menu button > span { width: 1.4em; text-align: center; }
.acct-sep { height: 1px; background: var(--line); margin: .3rem 0; }
.acct-menu .acct-out { color: var(--danger); font-weight: 700; }
.acct-menu .acct-out:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* تصاميم الشهادات: مصغّر حي (الشهادة بحجمها مصغّرة على عرض الخانة)، والمعرض بفلتر المراحل، ومعاينة كبيرة للمختار */
.cz-mini { display: block; position: relative; width: 100%; aspect-ratio: 297 / 210; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.cz-sc { position: absolute; top: 0; right: 0; width: 1123px; height: 794px; transform-origin: top right; pointer-events: none; }
.cz-pv { max-width: 560px; margin: 0 auto .8rem; }
.cz-stages { justify-content: center; margin-bottom: .7rem; }
.cz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; max-height: 46vh; overflow-y: auto; padding: .2rem; }
.cz-th { display: grid; gap: .35rem; padding: .35rem; border: 2px solid transparent; border-radius: 12px; background: var(--surface-2); cursor: pointer; font: inherit; color: var(--text); text-align: center; }
.cz-th b { font-size: .82rem; }
.cz-th.on { border-color: var(--primary); background: var(--primary-soft); }
.cz-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; position: sticky; bottom: -1.3rem; z-index: 1; background: var(--surface); padding: .7rem 0 2rem; margin-bottom: -1.3rem; border-top: 1px solid var(--line); }
.cz-pick { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .7rem; align-items: center; }
.cz-pick > div { display: grid; gap: .4rem; justify-items: start; }
.cz-pick-th { display: block; }
@media (max-width: 520px) { .cz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cz-pick { grid-template-columns: 120px minmax(0, 1fr); } }
/* نافذة الطباعة (كل الأجهزة): اتجاه الورقة، ثم طباعة أو PDF أو كتيب (تختفي في الورق المطبوع) */
#print-go { position: fixed; inset: 0; z-index: 9999; background: rgba(6,20,18,.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#print-go .pg-card { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; background: var(--surface); color: var(--text); border-radius: 20px; padding: 1.2rem 1.1rem 1rem; text-align: center; display: grid; gap: .55rem; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: acctIn .18s ease-out; }
#print-go .pg-ic { font-size: 2.2rem; display: flex; justify-content: center; color: var(--primary); }
#print-go .pg-ic .aic { width: 2.1rem; height: 2.1rem; }
#print-go b { font-size: 1rem; }
#print-go p { margin: 0 0 .3rem; font-size: .9rem; color: var(--muted); }
#print-go .pg-opts { display: grid; gap: .5rem; text-align: start; margin: .15rem 0 .25rem; }
#print-go .pg-row { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: center; gap: .5rem; }
#print-go .pg-lbl { font-size: .85rem; color: var(--muted); }
#print-go .pg-row .chips { gap: .35rem; }
#print-go .pg-row .chips button { display: inline-flex; align-items: center; gap: .3rem; min-height: 40px; padding: .3rem .75rem; font-size: .88rem; }
#print-go .pg-row .chips button small { font-size: .76rem; opacity: .8; }
@media (max-width: 480px) { #print-go .pg-card { padding-inline: .9rem; } #print-go .pg-row { grid-template-columns: 4.1rem minmax(0, 1fr); gap: .35rem; } #print-go .pg-lbl { font-size: .8rem; } #print-go .pg-row .chips { gap: .3rem; } #print-go .pg-row .chips button { padding: .3rem .55rem; font-size: .84rem; gap: .2rem; } #print-go .pg-paper { width: 1rem; height: 1rem; } }
#print-go .pg-paper { width: 1.15rem; height: 1.15rem; }
#print-go .pg-warn { font-size: .78rem; color: var(--muted); line-height: 1.6; }
#print-go .pg-acts { display: flex; gap: .5rem; }
#print-go .pg-acts .btn { flex: 1 1 0; min-width: 0; padding-inline: .5em; }
#print-go .pg-acts .btn[hidden] { display: none; }
#print-go .pg-note { margin: 0; background: var(--primary-soft); color: var(--text); border-radius: 12px; padding: .6rem .75rem; text-align: start; font-size: .85rem; line-height: 1.7; }
@media (min-width: 700px) { #print-go { align-items: center; } }
@media print { #print-go { display: none !important; } }
/* أزرار طريقة الدفع: العنوان وتحته وصف صغير */
.btn.co-m { flex-direction: column; align-items: center; justify-content: center; gap: .15rem; line-height: 1.35; white-space: normal; }
.btn.co-m > span { display: block; }
.co-sum .old-price { margin-inline-end: .3rem; }
.co-ok { color: var(--ok); }

/* مجموعة «الإدارة» القابلة للطي في القائمة الجانبية */
.nav .grp-tg { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; cursor: pointer; font: inherit; text-align: start; color: inherit; }
.nav .grp-tg:hover { color: var(--primary); }
.nav .grp-tg .gcount { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-size: .72em; margin-inline-start: .3em; }
.nav .grp-tg .chev { font-size: .9em; opacity: .7; }
.nav a[data-gm][hidden] { display: none !important; }

/* الصفحة الرئيسية: الفيديو والأسئلة الشائعة وملاحظة المراحل */
.intro-video .iv-frame { max-width: 880px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(14,90,82,.45); border: 1px solid var(--line); background: #0b3a35; aspect-ratio: 16 / 9; }
.intro-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b3a35; }
.stages-note { display: flex; gap: .8rem; align-items: flex-start; max-width: 720px; margin: 1.2rem auto 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--accent-soft); border: 1px dashed var(--accent); color: var(--text); }
.stages-note > svg { flex: none; color: var(--accent); margin-top: .15rem; }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: .6rem; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 1.1rem; }
.faq-item[open] { border-color: var(--primary); }
.faq-item summary { cursor: pointer; list-style: none; padding: .95rem 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--primary); line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 1rem; color: var(--muted); line-height: 1.9; }
.tech h2 { text-align: center; }
.tech .tech-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tech .tech-grid { grid-template-columns: 1fr 1fr; } }
.tech .tech-ic { color: var(--primary); display: grid; place-items: center; }
.feat-toggle { display: none; text-align: center; margin-top: 1rem; }
@media (max-width: 640px) {
  .feats-grid:not(.all) .feat:nth-child(n+5) { display: none; }
  .feat-toggle { display: block; }
  .aud-card .aud-art { display: none; }
  .dom-card .small.muted { display: none; }
  .tech .tech-grid { gap: .6rem; }
  .tech-item { padding: .7rem .8rem; }
  .tech-item .tiny { display: none; }
}

.swipe-hint { display: none; }
@media (max-width: 640px) {
  /* الأرقام الثلاثة في صف واحد */
  .stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .stats3 .stat { padding: .8rem .5rem; text-align: center; align-items: center; }
  .stats3 .st-ic { display: none; }
  .stats3 .stat .v { font-size: 1.6rem; }
  .stats3 .stat .k { font-size: .78rem; }
  .stats3 .stat .small { display: none; }
  /* بطاقات المزايا مضغوطة: الأيقونة بجانب العنوان */
  .feats-grid .feat { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; padding: 1rem; align-items: start; }
  .feats-grid .feat .ic { grid-row: span 2; margin: 0; width: 42px; height: 42px; }
  .feats-grid .feat h3 { margin: 0; font-size: 1rem; }
  /* الأدوار والباقات: سحب أفقي بدل تكديس طويل */
  .price-grid.price-auto { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin-inline: -16px; padding: .3rem 16px 1rem; scrollbar-width: none; }
  .price-grid.price-auto::-webkit-scrollbar { display: none; }
  .price-grid.price-auto > .price { flex: 0 0 84%; scroll-snap-align: center; }
  .swipe-hint { display: block; text-align: center; font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }
  /* كيف تبدأ: خطوات أفقية مضغوطة */
  .how { gap: .7rem; }
  .how-step { display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; text-align: start; align-items: center; }
  .how-step .how-ic { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
  .how-step .how-ic svg { width: 24px; height: 24px; }
  .how-step p { margin: 0; }
}

/* آراء المدارس: بطاقات متساوية، وسحب أفقي على الجوال */
.testi-grid { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 380px)); justify-content: center; }
.testi-grid .testi-card { height: 100%; box-sizing: border-box; }
@media (max-width: 640px) {
  .testi-grid { display: flex; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin-inline: -16px; padding: .3rem 16px 1rem; scrollbar-width: none; }
  .testi-grid::-webkit-scrollbar { display: none; }
  .testi-grid > .testi-card { flex: 0 0 84%; height: auto; scroll-snap-align: center; }
}
/* نجوم التقييم في نافذة «قيّم أثر التعليم» */
.rv-stars { display: flex; gap: .25rem; justify-content: center; margin: .2rem 0 .8rem; direction: ltr; }
.rv-stars button { background: none; border: 0; cursor: pointer; font-size: 2.1rem; line-height: 1; color: var(--line); padding: .1rem; transition: transform .1s; }
.rv-stars button.on { color: #f5b301; }
.rv-stars button:hover { transform: scale(1.12); }

/* مجموعات المراحل القابلة للطي: رقم المرحلة وشارة الإنجاز */
.nav .grp-tg > span:first-child { display: inline-flex; align-items: center; }
.nav .grp-tg .gcount.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }

/* الشواهد مع الباركود في صفحة التقرير */
.report .rp-ev .ev-q { display: flex; align-items: center; gap: .5rem; margin: .2rem 0; font-size: .82rem; line-height: 1.4; }
.report .rp-ev .ev-q img { flex: none; background: #fff; }
.evg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem .6rem; }
.evg-i { display: flex; align-items: center; gap: .45rem; font-size: .82rem; line-height: 1.4; }
.evg-i img { flex: none; background: #fff; }
.ev-hint { font-size: .68rem; color: #777; }
.report .ind-code { white-space: nowrap; }

/* صفحة الاطلاع العامة على شاهد (من الباركود) */
.pev { max-width: 820px; margin: 0 auto; padding: 1rem 16px 2rem; display: grid; gap: 1rem; }
.pev-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.pev-card { padding: 1.3rem; }
.pev-kv { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 1rem; }
.pev-kv td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pev-kv td:first-child { color: var(--muted); white-space: nowrap; width: 1%; }
.pev-body { display: grid; gap: .7rem; }
.pev-img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; background: #f4f4f4; }
.pev-pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pev-sheet { background: #fff; color: #111; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; overflow-x: auto; }

/* «لكل من في المدرسة» على الجوال: شبكة 2×2 ببطاقات متساوية تماما */
@media (max-width: 640px) {
  .aud-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .aud-grid > .aud-card { height: 100%; }
  .aud-card h3 { margin: .8rem .75rem .35rem; font-size: .92rem; line-height: 1.5; }
  .aud-card ul { margin: 0 .75rem .85rem; gap: .35rem; }
  .aud-card li { font-size: .78rem; align-items: flex-start; line-height: 1.5; }
  .aud-card li svg { width: 15px; height: 15px; margin-top: .15rem; }
}

/* البطاقات داخل الشبكات على نفس المستوى (بدون هامش «بطاقة بعد بطاقة») */
.aud-grid > .card, .testi-grid > .card, .price-grid > .card { margin-top: 0; }
@media (max-width: 640px) { .aud-grid > .aud-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* الجولة التعريفية */
.tour { position: fixed; inset: 0; z-index: 9000; }
.tour-dim { position: fixed; inset: 0; background: rgba(8, 28, 25, .55); }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(8, 28, 25, .55), 0 0 0 3px var(--accent); transition: top .25s, left .25s, width .25s, height .25s; pointer-events: none; }
.tour-box { position: fixed; z-index: 1; background: var(--surface); color: var(--text); border-radius: 16px; padding: 1rem 1.1rem .85rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); width: min(360px, calc(100vw - 32px)); border-top: 4px solid var(--accent); }
.tour-box.center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); text-align: center; }
.tour-box.sheet { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); top: auto; }
.tour-box.sheet.top { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; }
.tour-prog { display: grid; gap: .3rem; margin-bottom: .5rem; font-size: .72rem; color: var(--muted); }
.tour-prog i { display: block; height: 4px; border-radius: 99px; background: var(--accent); max-width: 100%; }
.tour-ttl { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--primary); }
.tour-txt { margin: 0 0 .8rem; line-height: 1.85; font-size: .92rem; }
.tour-act { display: flex; align-items: center; gap: .4rem; }
.tour-act .spacer { flex: 1; }
.tour-box.center .tour-act { justify-content: center; }
.tour-act [hidden] { display: none; }

/* الشريط السفلي: أعمدة متساوية لا تتمدد مع النص الطويل (كان يوسّع الصفحة على الجوال) */
@media (max-width: 900px) { .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } .bottom-nav a { min-width: 0; text-align: center; line-height: 1.3; padding-inline: 2px; overflow-wrap: anywhere; } }

/* الشريط العلوي على الجوال: العنوان ينكمش ويلتف بدل ما يدفع الأزرار خارج الشاشة */
@media (max-width: 640px) {
  .topbar { gap: .35rem; }
  .topbar > * { flex-shrink: 0; }
  .topbar .ttl { flex: 1 1 0; min-width: 0; font-size: .95rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; word-break: normal; }
  .topbar [data-ptour] { display: none; }
  .topbar .spacer { display: none; }
  .topbar .icon-btn { width: 34px; height: 34px; }
}

/* «جولة هذه الصفحة» في قائمة الحساب تظهر على الجوال فقط (على الكمبيوتر الزر في الشريط العلوي) */
.acct-menu .acct-ptour { display: none !important; }
@media (max-width: 640px) { .acct-menu .acct-ptour { display: flex !important; } }

/* زر واتساب داخل المنصة: في الجهة المقابلة لأزرار الحفظ، وفوق الشريط السفلي، ويختفي أثناء الجولة */
.shell ~ .wa-float { right: auto; left: 18px; }
@media (max-width: 760px) { .shell ~ .wa-float { width: 50px; height: 50px; left: 14px; } }
body:has(.tour) .wa-float { display: none; }

/* مساحة أسفل كل صفحة حتى تصعد آخر الأزرار (مثل «الخطوة التالية») فوق زر واتساب ولا ينغطى شي */
body.wa-on .content { padding-bottom: calc(1.4rem + 76px); }
@media (max-width: 760px) { body.wa-on.bn-on .content { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } body.wa-on:not(.bn-on) .content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
.shell ~ .wa-float { transition: opacity .25s, transform .25s; }
.shell ~ .wa-float.wa-away { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }

/* المحتوى النصي الجاهز من الخادم (لمحركات البحث) قبل تشغيل التطبيق */
.seo-static { max-width: 860px; margin: 0 auto; padding: 1.5rem 16px 3rem; line-height: 1.9; color: var(--text); }
.seo-static header a { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); text-decoration: none; font-size: 1.2rem; }
.seo-static h1 { font-size: 1.6rem; color: var(--primary); margin: 1rem 0 .5rem; }
.seo-static h2 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.seo-static dt { font-weight: 700; margin-top: .7rem; } .seo-static dd { margin: 0; color: var(--muted); }
.seo-static nav { margin-top: 2rem; font-size: .9rem; }

/* المقالات */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1rem; }
.art-grid > .card { margin-top: 0; }
.art-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem; color: inherit; text-decoration: none; transition: transform .15s, border-color .15s; }
.art-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.art-card h2, .art-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--primary); }
.art-card p { margin: 0; flex: 1; line-height: 1.8; }
.art-more { font-size: .85rem; font-weight: 700; color: var(--accent); }
.art-head { text-align: center; } .art-head h1 { margin-bottom: .3rem; }
.art-page { max-width: 760px; margin: 0 auto; padding: 1rem 0 2rem; }
.art-page h1 { font-size: 1.7rem; line-height: 1.5; margin: .6rem 0 .3rem; color: var(--primary); text-wrap: balance; }
.art-crumbs a { color: var(--muted); } .art-meta { margin-bottom: 1rem; }
.art-lead { font-size: 1.05rem; line-height: 1.9; font-weight: 600; border-inline-start: 4px solid var(--accent); padding-inline-start: .9rem; }
.art-body { font-size: 1rem; line-height: 2; }
.art-body h2 { font-size: 1.25rem; margin: 1.8rem 0 .6rem; color: var(--primary); }
.art-body h3 { font-size: 1.08rem; margin: 1.3rem 0 .5rem; }
.art-body li { margin: .35rem 0; }
.art-body blockquote { margin: 1.4rem 0; padding: .9rem 1.1rem; background: var(--primary-soft); border-radius: 12px; border-inline-start: 4px solid var(--primary); }
.art-body a { color: var(--primary); font-weight: 700; }
.art-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; padding: 1.2rem; border: 1.5px solid var(--primary); }
.art-rel-h { font-size: 1.15rem; margin: 2rem 0 1rem; }
.seo-static article h2 { font-size: 1.15rem; }

/* حماية نص المقالات وعلامة مائية */
.art-page, .art-grid { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.art-page { position: relative; }
.art-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160'%3E%3Ctext x='10' y='90' font-family='Tahoma' font-size='22' fill='%230e5a52' transform='rotate(-18 130 80)'%3Eatharapps.com%3C/text%3E%3C/svg%3E"); }
.art-page > * { position: relative; z-index: 1; }
@media print { .art-page, .art-grid, .seo-static article { display: none !important; } body:has(.art-page, .art-grid, .seo-static article)::after { content: "المحتوى محمي — اقرأه على atharapps.com"; display: block; text-align: center; padding: 3rem; font-size: 1.3rem; } }

.acct-menu .acct-ver { text-align: center; font-size: .72rem; color: var(--muted); padding: .35rem .5rem .1rem; }
.sf-bottom .sf-ver { font-size: .78rem; opacity: .8; }

/* شارة آخر تحديث للمنصة */
.ver-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .4rem .3rem .75rem; border-radius: 999px; font-size: .74rem; line-height: 1.4; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: inherit; flex-wrap: wrap; max-width: 100%; }
.ver-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3ecf8e; box-shadow: 0 0 0 0 rgba(62,207,142,.6); animation: verPulse 2.2s infinite; flex: none; }
@keyframes verPulse { 0% { box-shadow: 0 0 0 0 rgba(62,207,142,.55); } 70% { box-shadow: 0 0 0 .45rem rgba(62,207,142,0); } 100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); } }
.ver-t { opacity: .75; } .ver-d { font-weight: 700; }
.ver-v { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: #c8962b; color: #1d1405; }
.sf-bottom .sf-ver { font-size: inherit; opacity: 1; }
.acct-menu .acct-ver { padding: .5rem .4rem .2rem; }
.acct-menu .ver-pill { background: var(--primary-soft); border-color: transparent; color: var(--text); white-space: normal; flex-wrap: wrap; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ver-dot { animation: none; } }

/* المقالات داخل المنصة */
.art-page.art-in { max-width: 820px; margin-inline: auto; padding: 1.4rem 1.6rem; }
.art-grid.art-in { margin-top: 1rem; }
@media (max-width: 640px) { .art-page.art-in { padding: 1rem; } }

/* جدول المستخدمين في لوحة الأدمن: يظهر كاملا بدون سحب أفقي */
.u-tbl { width: 100%; }
.u-tbl td, .u-tbl th { vertical-align: top; }
.u-tbl .u-who { min-width: 0; }
.u-tbl .u-sub { font-size: .78rem; color: var(--muted); margin-top: .15rem; word-break: break-all; text-align: right; }
.u-tbl td:last-child { width: 1%; }

/* صفحة الواجهة والتسويق (لوحة الأدمن) */
.mk-tabs { margin: 1rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .25rem .4rem; }
.mk-tabs button { white-space: nowrap; }
[data-mp] > .card + .card, .mk-grid > .card + .card { margin-top: 0; }
.mk-h { margin-bottom: .9rem; } .mk-h h3 { margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; } .mk-h p { margin: 0; }
.mk-f > span:first-child { display: flex; align-items: center; gap: .4rem; }
.mk-in { position: relative; display: flex; align-items: center; }
.mk-in .mk-ic { position: absolute; inset-inline-start: .75rem; display: inline-flex; color: var(--primary); font-size: 1rem; pointer-events: none; }
.mk-in .mk-ic svg { width: 18px; height: 18px; }
.mk-in .mk-ic + .i { padding-inline-start: 2.5rem; }
.mk-hint { font-weight: 400; display: block; margin-top: .25rem; }
.mk-socs { display: grid; gap: .6rem; }
.mk-soc { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.mk-soc-ic { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.mk-soc-ic.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.mk-soc-b { flex: 1; min-width: 0; display: grid; gap: .25rem; } .mk-soc-b b { font-size: .82rem; } .mk-soc-b .i { background: var(--surface); }
.mk-switch { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; padding: .75rem .85rem; border: 1px dashed var(--line); border-radius: 12px; margin-top: .4rem; }
.mk-switch input { margin-top: .3rem; } .mk-switch > span { display: grid; gap: .2rem; } .mk-switch b { font-size: .88rem; }
.mk-save { justify-content: space-between; align-items: center; }
.mk-save #mkDirty { display: inline-flex; align-items: center; gap: .4rem; color: var(--warn, #b7791f); font-weight: 600; }
.mk-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #e0a43a; }

/* إعدادات المنصة في تبويبات */
.st-pane { display: grid; gap: 1rem; align-items: start; }
.st-pane.st-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-pane > .card { margin: 0 !important; }
@media (max-width: 900px) { .st-pane.st-two { grid-template-columns: 1fr; } }
.st-save { justify-content: space-between; align-items: center; }
.st-save #stDirty { display: inline-flex; align-items: center; gap: .4rem; color: #b7791f; font-weight: 600; }
.st-pane[hidden] { display: none; }

/* لوحة الأدمن: شارات القائمة والبحث السريع وسجل العمليات */
.side .nav a .nav-l { flex: 1; }
.side .nav a .nav-n { min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: #c8962b; color: #fff; font-size: .7rem; font-weight: 800; display: inline-grid; place-items: center; }
.qs-box { min-width: min(560px, 86vw); } .qs-in { font-size: 1.05rem; padding: .8rem 1rem; }
.qs-res { margin-top: .6rem; display: grid; gap: .2rem; max-height: 52vh; overflow: auto; }
.qs-it { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px; color: inherit; }
.qs-it .tiny { margin-inline-start: auto; } .qs-it.on, .qs-it:hover { background: var(--primary-soft); color: var(--primary); }
.qs-tip { margin-top: .6rem; text-align: center; }
.au-list { display: grid; }
.au-day { font-size: .78rem; font-weight: 800; color: var(--primary); padding: .9rem .2rem .35rem; border-bottom: 1px solid var(--line); }
.au-row { display: flex; gap: .75rem; align-items: flex-start; padding: .65rem .2rem; border-bottom: 1px dashed var(--line); }
.au-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; }
.au-main { flex: 1; min-width: 0; } .au-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; justify-content: flex-end; }
.au-kv { font-size: .72rem; background: var(--surface-2); border-radius: 6px; padding: .1rem .4rem; color: var(--muted); } .au-kv b { color: var(--text); font-weight: 600; }
.au-side { display: grid; justify-items: end; gap: .1rem; flex: none; }
.bc-bell { display: flex; gap: .75rem; padding: .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.bc-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); display: grid; place-items: center; flex: none; }
.mk-links { display: grid; gap: .5rem; }
@media (max-width: 640px) { .au-side .tiny { display: none; } }
.mk-save[hidden], .st-save[hidden], .mk-tabs[hidden], .card[hidden], [data-mp][hidden] { display: none !important; }

/* القائمة الجانبية الديناميكية */
.nav .grp-t { display: flex; align-items: center; gap: .4rem; width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: start; border-radius: 8px; }
.nav .grp-t:hover { color: var(--primary); }
.nav .grp-t .chev { margin-inline-start: auto; font-size: .7rem; transition: transform .2s; opacity: .7; }
.nav .grp-wrap.closed .chev { transform: rotate(90deg); }
.nav .grp-wrap.closed .grp-items { display: none; }
.nav .grp-t .grp-n { display: none; } .nav .grp-wrap.closed .grp-t .grp-n { display: inline-grid; }
.nav a { position: relative; }
.nav .nav-pin { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: .9rem; padding: 0 .15rem; opacity: 0; transition: opacity .15s; line-height: 1; }
.nav a:hover .nav-pin, .nav a:focus-within .nav-pin, .nav .grp-wrap.fav .nav-pin { opacity: .8; }
.nav .nav-pin.on { color: #c8962b; }
.nav .grp-wrap.fav { background: color-mix(in srgb, #c8962b 7%, transparent); border-radius: 12px; padding-bottom: .3rem; margin-bottom: .3rem; }
.nav-tools { display: flex; gap: .4rem; justify-content: center; padding: .9rem .5rem .4rem; }
.nav-tools button { border: 1px dashed var(--line); background: none; color: var(--muted); border-radius: 999px; padding: .2rem .7rem; font-size: .72rem; cursor: pointer; font-family: inherit; }
.nav-tools button:hover { color: var(--primary); border-color: var(--primary); }
@media (hover: none) { .nav .nav-pin { opacity: .45; } }
/* صحة العملاء */
.hb { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .95rem; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent); }
.hb-good { background: #2f9e6e; } .hb-watch { background: #d08a1a; } .hb-risk { background: #c0392b; }
.hb-big { width: 64px; height: 64px; font-size: 1.3rem; }
.hc-list { display: grid; gap: .55rem; }
.hc-row { display: flex; align-items: center; gap: .85rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.hc-row.compact { padding: .5rem .2rem; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; }
.hc-main { flex: 1; min-width: 0; display: grid; gap: .25rem; }
.hc-why { display: flex; flex-wrap: wrap; gap: .3rem; } .hc-why span { font-size: .74rem; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text); } .hc-why span.ok { color: #2f9e6e; }
.hc-act { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.wa-btn { background: #25d366 !important; color: #fff !important; border-color: #25d366 !important; }
.hc-tile.hc-risk .v { color: #c0392b; } .hc-tile.hc-watch .v { color: #d08a1a; } .hc-tile.hc-good .v { color: #2f9e6e; }
@media (max-width: 640px) { .hc-row { flex-wrap: wrap; } .hc-act { width: 100%; justify-content: flex-start; } }
/* النبض ومسار التحويل وآخر نشاط */
.pulse-card { margin-bottom: 1rem; background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary) 6%, var(--surface))); }
.pl-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.pl-col { border: 1px solid var(--line); border-radius: 14px; padding: .8rem; background: var(--surface); }
.pl-h { font-size: .78rem; font-weight: 800; color: var(--primary); margin-bottom: .5rem; }
.pl-g { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .pl-g div { display: grid; } .pl-g b { font-size: 1.25rem; } .pl-g span { font-size: .72rem; color: var(--muted); }
@media (max-width: 900px) { .pl-wrap { gap: .4rem; } .pl-col { padding: .55rem .5rem; } .pl-g { grid-template-columns: 1fr; gap: .35rem; } .pl-g b { font-size: 1.05rem; } .pl-h { font-size: .7rem; } }
.fn-step { margin: .55rem 0; } .fn-bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #c8962b); }
.fn-t { font-size: .85rem; margin-top: .25rem; }
.feed { display: grid; } .feed-it { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.feed-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.mr-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.mr-t { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; display: grid; gap: .1rem; } .mr-t b { font-size: 1.3rem; }
@media (max-width: 640px) { .mr-g { grid-template-columns: 1fr 1fr; } }
/* ملف المدرسة */
.sp-health { border-inline-start: 4px solid var(--primary); }
.tag-box { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: .25rem; background: var(--primary-soft); color: var(--primary); border-radius: 999px; padding: .2rem .35rem .2rem .7rem; font-size: .8rem; font-weight: 600; }
.tag button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; }
.tag-in { flex: 1; min-width: 140px; }
.note-it { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; margin-top: .6rem; background: color-mix(in srgb, #c8962b 6%, var(--surface)); } .note-it p { margin: 0 0 .3rem; white-space: pre-wrap; }
.tl { display: grid; max-height: 520px; overflow: auto; } .tl-it { display: flex; gap: .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.tl-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex: none; font-size: .85rem; }
/* الإجراءات الجماعية والجلسات */
.bulk-bar { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .55rem .7rem; margin-bottom: .7rem; border-radius: 12px; background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.bulk-bar[hidden] { display: none !important; } .bulk-bar b { margin-inline-end: .4rem; } .bulk-bar .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.25); }
.ses-it { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
/* الردود الجاهزة في رسائل التواصل */
.tpl-row { display: grid; grid-template-columns: 200px 1fr auto; gap: .5rem; align-items: start; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
@media (max-width: 700px) { .tpl-row { grid-template-columns: 1fr auto; } .tpl-row textarea { grid-column: 1 / -1; } }
.msg-note { font-size: .8rem; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: .35rem .6rem; margin: -.2rem 0 .6rem; white-space: pre-wrap; }
.msg-quote { background: var(--surface-2); border-inline-start: 3px solid var(--primary); padding: .5rem .7rem; border-radius: 8px; white-space: pre-wrap; }

/* تنبيه الدفع الإلكتروني قيد التفعيل */
.pay-soon { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; margin-bottom: .6rem; border-radius: 12px; background: color-mix(in srgb, #c8962b 10%, var(--surface)); border: 1px solid color-mix(in srgb, #c8962b 35%, transparent); font-size: 1.1rem; }
.pay-soon div { display: grid; gap: .15rem; font-size: .85rem; } .pay-soon span { color: var(--muted); line-height: 1.7; }
.mk-off td:not(:last-child) { opacity: .5; }

/* بطاقات الأرقام في النظرة العامة: قابلة للضغط */
.kpi-top { margin: .2rem 0 1rem; }
.kpi-top .card { margin: 0; }
a.kpi-link { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
a.kpi-link:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 22px rgba(14,90,82,.12); }
a.kpi-link .kpi-go { opacity: 0; color: var(--primary); transition: opacity .15s; } a.kpi-link:hover .kpi-go { opacity: 1; }
.pl-g a { display: grid; color: inherit; text-decoration: none; border-radius: 8px; padding: .2rem .3rem; margin: -.2rem -.3rem; }
.pl-g a:hover { background: var(--primary-soft); }

/* نافذة إرسال بيانات الدفع */
.sp-bank { display: grid; gap: .35rem; background: var(--surface-2); border-radius: 12px; padding: .6rem .7rem; }
.sp-row { display: flex; align-items: center; gap: .6rem; } .sp-row > span { min-width: 78px; } .sp-row > b { flex: 1; min-width: 0; text-align: left; word-break: break-all; font-size: .88rem; }
.sp-url { font-weight: 500; font-size: .78rem !important; color: var(--primary); }

.sh-to { margin: .8rem 0 .4rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.sh-who { display: grid; gap: .1rem; } .sh-ct { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .45rem; font-size: .88rem; } .sh-ct #shEd { margin-inline-start: auto; }
.sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; } .sh-btns .btn { justify-content: center; }
.sh-btns a.disabled { opacity: .5; }
.sh-more { margin-top: .8rem; } .sh-more summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: .88rem; }
@media (max-width: 520px) { .sh-btns { grid-template-columns: 1fr; } }
#shEdit[hidden] { display: none !important; }

/* صفحة باقات إدارة المدرسة */
.mg-hero { text-align: center; padding-bottom: 1rem; } .mg-hero h1 { margin: .4rem 0; text-wrap: balance; }
.mg-k { display: inline-block; padding: .25rem .9rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: .85rem; }
.mg-toggle { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin-top: 1rem; }
.mg-toggle button { border: 0; background: none; padding: .45rem 1.1rem; border-radius: 999px; font-family: inherit; font-weight: 700; cursor: pointer; color: var(--muted); }
.mg-toggle button.on { background: var(--primary); color: #fff; }
.mg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .mg-grid { grid-template-columns: 1fr; } }
.mg-card { position: relative; display: grid; gap: .45rem; padding: 1.3rem; margin: 0 !important; }
.mg-card.hot { border: 2px solid #c8962b; box-shadow: 0 14px 34px rgba(200,150,43,.18); }
.mg-chip { justify-self: start; font-size: .8rem; font-weight: 700; padding: .15rem .7rem; border-radius: 999px; background: var(--surface-2); }
.mg-card h3 { margin: 0; font-size: 1.25rem; } .mg-tag { color: var(--primary); font-weight: 700; font-size: .92rem; } .mg-desc { margin: 0; line-height: 1.8; }
.mg-price { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; } .mg-amt { font-size: 2.4rem; font-weight: 800; color: var(--primary); line-height: 1; }
.mg-unit { display: grid; font-size: .82rem; color: var(--muted); } .mg-unit b { color: var(--text); }
.mg-save { color: #2f9e6e; font-weight: 700; }
.mg-count { font-size: .85rem; padding: .35rem .6rem; border-radius: 10px; background: var(--primary-soft); color: var(--primary); justify-self: start; }
.mg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .mg-list li { position: relative; padding-inline-start: 1.5rem; font-size: .9rem; line-height: 1.6; }
.mg-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #2f9e6e; font-weight: 800; } .mg-list li.star::before { content: "★"; color: #c8962b; }
.mg-best { font-size: .82rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: .6rem; margin-top: .2rem; }
.mg-link-card { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; padding: 1.3rem; background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary) 7%, var(--surface))); }
.mg-link-flow { display: flex; align-items: center; gap: .6rem; } .mg-link-flow > div { display: grid; justify-items: center; text-align: center; gap: .15rem; padding: .7rem .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 120px; }
.mg-link-flow > div.mid { border-color: #c8962b; } .mg-link-flow span { font-size: 1.5rem; } .mg-link-flow small { color: var(--muted); font-size: .72rem; } .mg-link-flow i { font-style: normal; color: #c8962b; font-weight: 800; }
@media (max-width: 900px) { .mg-link-card { grid-template-columns: 1fr; } .mg-link-flow { flex-wrap: wrap; justify-content: center; } }
.mg-cmp .tbl td.c, .mg-cmp .tbl th.c { text-align: center; } .mg-grp td { background: var(--surface-2); }
.mg-yes { color: #2f9e6e; font-weight: 800; font-size: 1.1rem; } .mg-no { color: var(--muted); }
.mg-admin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; } .mg-admin > .card { margin: 0; }
@media (max-width: 1100px) { .mg-admin { grid-template-columns: 1fr; } }

/* أقفال أقسام إدارة المدرسة وصفحة الباقة */
.nav a.is-locked { opacity: .65; } .nav-lock { margin-inline-start: auto; font-size: .8rem; }
.mg-locked { text-align: center; padding: 2.5rem 1.2rem; max-width: 560px; margin: 2rem auto; } .mg-locked h2 { margin: .4rem 0; }
.mg-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; } @media (max-width: 760px) { .mg-grid.two { grid-template-columns: 1fr; } }
.mg-link-note { margin: 1rem 0; padding: .7rem .9rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); text-align: center; }
/* الربط بالتقويم الذاتي */
.el-kpis { display: flex; gap: .6rem; } .el-kpis div { background: rgba(255,255,255,.12); border-radius: 12px; padding: .45rem .8rem; text-align: center; color: #fff; min-width: 84px; } .el-kpis b { display: block; font-size: 1.4rem; } .el-kpis span { font-size: .75rem; color: #e9f3f1; }
.el-list { display: grid; gap: .5rem; } .el-row { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .el-row.is-locked { opacity: .6; }
.el-ic { font-size: 1.3rem; line-height: 1.4; } .el-main { flex: 1; min-width: 0; } .el-act { display: flex; gap: .35rem; align-items: center; flex-shrink: 0; }
.el-codes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .el-code { font-size: .72rem; direction: ltr; padding: .1rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); } .el-code.on { background: var(--primary-soft); color: var(--primary); border-color: transparent; font-weight: 700; }
.el-inds { margin-top: .3rem; line-height: 1.6; }
@media (max-width: 600px) { .el-row { flex-wrap: wrap; } .el-act { width: 100%; justify-content: flex-end; } }
.el-idle { margin-top: .7rem; } .el-idle summary { cursor: pointer; font-size: .85rem; color: var(--muted); padding: .3rem 0; } .el-idle-list { display: grid; gap: .3rem; margin-top: .4rem; }
.el-mini { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .4rem .6rem; border-radius: 10px; background: var(--surface-2); font-size: .85rem; }

/* بنود التقييم في السجلات (الزيارة الصفية وتقويم الأداء) */
.rc-rubric { display: grid; gap: .35rem; } .rc-ri { display: flex; gap: .6rem; align-items: center; justify-content: space-between; padding: .35rem .6rem; border-radius: 10px; background: var(--surface-2); } .rc-ri span { flex: 1; font-size: .88rem; } .rc-ri select { max-width: 170px; }
.rc-rub-t { font-weight: 700; background: var(--primary-soft) !important; color: var(--primary); }
table.rc-rub { width: 100%; border-collapse: collapse; } table.rc-rub td { padding: .25rem .4rem; border-bottom: 1px dashed var(--line); font-size: .85rem; } table.rc-rub tr.rc-rub-t td { border: 0; }
.rc-ack { margin: .6rem 0; padding: .6rem .8rem; border-radius: 12px; background: var(--surface-2); text-align: center; font-size: .9rem; } .rc-ack.ok { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
@media (max-width: 600px) { .rc-ri { flex-wrap: wrap; } .rc-ri select { max-width: 100%; width: 100%; } }
table.rc-rub td.num { white-space: nowrap; width: 1%; }
/* حقل الجدول في السجلات: إدخال صف صف (الجدول يتمرر أفقيا في الجوال)، وعرضه جدول بإطار */
.rc-grid th { font-size: 13px; white-space: nowrap; }
.rc-grid td { padding: .2rem; }
.rc-grid .i { min-width: 6.5rem; padding: .35rem .45rem; font-size: 13px; }
table.rc-gt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.rc-gt th, table.rc-gt td { border: 1px solid var(--line); padding: .3rem .45rem; text-align: start; vertical-align: top; }
.rc-view table.rc-gt th { width: auto; background: var(--surface-2); }
/* التعاميم الداخلية والتوقيع الإلكتروني */
.ci-list { display: grid; gap: .45rem; } .ci-row { display: flex; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; background: var(--surface); } .ci-row:hover { border-color: var(--primary); } .ci-row.is-new { border-inline-start: 4px solid var(--warn, #d97706); }
.ci-no { font-size: .75rem; color: var(--muted); min-width: 56px; direction: ltr; text-align: center; } .ci-main { flex: 1; min-width: 0; }
.ci-body { margin-top: 1rem; line-height: 2; font-size: 1rem; } .ci-sig { height: 34px; max-width: 120px; display: block; }
.ci-prog { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: .7rem 0; } .ci-prog span { display: block; height: 100%; background: var(--primary); }
.sig-pad { position: relative; border: 2px dashed var(--line); border-radius: 14px; background: #fff; } .sig-pad canvas { width: 100%; height: 170px; display: block; touch-action: none; cursor: crosshair; }
.sig-clear { position: absolute; top: .3rem; inset-inline-start: .3rem; } .sig-hint { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sig-cur { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .sig-cur img { height: 48px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .2rem; }
@media (max-width: 600px) { .ci-row { flex-wrap: wrap; } .ci-no { min-width: 0; } }
.sig-hint[hidden] { display: none !important; }
/* كنترول الاختبارات */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; } .ex-com { margin: 0; } .ex-mini { margin-top: .5rem; display: grid; gap: .2rem; font-size: .82rem; } .ex-mini .num { color: var(--primary); font-weight: 700; }
.ex-board { text-align: center; padding: .4rem; margin: .8rem 0; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; font-size: .85rem; }
.ex-kroki { display: grid; gap: .45rem; } .ex-desk { border: 1.5px solid var(--line); border-radius: 10px; padding: .45rem .3rem; text-align: center; display: flex; flex-direction: column; gap: .1rem; min-height: 64px; justify-content: center; background: var(--surface); font-size: .76rem; } .ex-desk b { font-size: 1rem; color: var(--primary); } .ex-desk i { font-style: normal; color: var(--muted); font-size: .7rem; } .ex-desk.empty { border-style: dashed; opacity: .45; }
.ex-load { display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 600px) { .ex-desk span { display: none; } .ex-desk { min-height: 48px; } }
/* الموجز التنفيذي ورادار المخاطر */
.br-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; } .br-tiles .card { margin: 0; padding: .7rem .8rem; } .br-tiles b { display: block; font-size: 1.35rem; margin-top: .15rem; }
.br-sum { font-size: 1.02rem; line-height: 1.9; } .br-ul { margin: .3rem 0 0; padding-inline-start: 1.2rem; line-height: 1.9; }
.br-risks { display: grid; gap: .45rem; } .br-risk { padding: .6rem .8rem; border-radius: 12px; background: var(--surface-2); border-inline-start: 4px solid var(--line); } .br-risk.danger { border-color: #dc2626; } .br-risk.warn { border-color: #d97706; } .br-risk.info { border-color: #2563eb; }
.br-inds { display: grid; gap: .35rem; }
.br-radar { display: grid; gap: .4rem; margin-top: .6rem; } .br-st { display: flex; gap: .7rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.br-score { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); flex-shrink: 0; } .br-st.high .br-score { background: #fee2e2; color: #b91c1c; } .br-st.medium .br-score { background: #fef3c7; color: #b45309; }
/* التربية الخاصة */
.sp-goal { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; margin-bottom: .6rem; background: var(--surface-2); } .sp-goal input[type=range] { width: 100%; accent-color: var(--primary); }
.sp-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8rem; margin-inline-end: .3rem; } .sp-due { color: #b91c1c; font-weight: 700; }
/* الميزانية التشغيلية */
.bg-lines { display: grid; gap: .7rem; } .ci-prog.hot span { background: #d97706; } .bg-tx { align-items: flex-start; } .bg-tx > b { white-space: nowrap; }
.rc-ri input.i[data-n] { flex: 1; }
@media (max-width: 600px) { .bg-tx > .row { width: 100%; justify-content: flex-end; } }
/* صوت الطالب */
.vc-wrap .vc-card { max-width: 520px; } .vc-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; } .vc-kind input { position: absolute; opacity: 0; pointer-events: none; }
.vc-kind span { display: block; padding: .55rem .6rem; border: 1.5px solid var(--line); border-radius: 12px; font-size: .88rem; cursor: pointer; text-align: center; } .vc-kind input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.vc-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; border: 0; padding: 0; } .vc-code { font-size: 2rem; font-weight: 800; letter-spacing: 3px; direction: ltr; margin: .4rem 0 .6rem; color: var(--primary); }
.vc-track { margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: .6rem; } .vc-track summary { cursor: pointer; font-size: .88rem; color: var(--muted); }
.vc-qr img { background: #fff; padding: .4rem; border-radius: 12px; border: 1px solid var(--line); } .vc-snip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ci-row.vc-urgent { border-inline-start: 4px solid #dc2626; }
/* المناوبة */
.dt-grid td { vertical-align: top; min-width: 120px; } .dt-p { display: block; padding: .2rem .45rem; margin-bottom: .2rem; border-radius: 8px; background: var(--surface-2); font-size: .82rem; color: inherit; text-decoration: none; } .dt-p.ok { background: var(--primary-soft); color: var(--primary); } .dt-today td { background: color-mix(in srgb, var(--primary-soft) 45%, transparent); }
.lt-form { display: flex; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; } .lt-form #ltQ { flex: 1; min-width: 200px; font-size: 1.05rem; }
/* ملف الإنجاز */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .8rem; } .pf-sec { margin: 0; display: flex; flex-direction: column; gap: .5rem; } .pf-sec.has { border-inline-start: 4px solid var(--primary); }
.pf-items { display: grid; gap: .35rem; } .pf-it { display: flex; gap: .5rem; align-items: center; padding: .35rem .5rem; border-radius: 10px; background: var(--surface-2); font-size: .85rem; } .pf-it img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; } .pf-ic { font-size: 1.3rem; }
/* نقاط التحفيز */
.pt-cats { display: flex; flex-wrap: wrap; gap: .4rem; } .pt-cat { font-size: .85rem; } .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem; }
.pt-st { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .pt-st:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .pt-st .ci-main { display: flex; flex-direction: column; }
.pt-bal { min-width: 38px; text-align: center; padding: .2rem .4rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 800; cursor: pointer; }
.pt-board { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; } .pt-board li { display: flex; gap: .6rem; align-items: center; padding: .4rem .5rem; border-radius: 10px; background: var(--surface-2); } .pt-rank { width: 28px; text-align: center; font-weight: 800; }
/* الصيانة والتقويم المدرسي */
.mt-ph { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.cl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin-top: .8rem; } .cl-h { text-align: center; font-size: .75rem; color: var(--muted); font-weight: 700; }
.cl-c { min-height: 84px; border: 1px solid var(--line); border-radius: 10px; padding: .25rem; display: flex; flex-direction: column; gap: .15rem; background: var(--surface); overflow: hidden; } .cl-c.empty { border: 0; background: none; } .cl-c.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.cl-n { font-size: .75rem; color: var(--muted); } .cl-e { display: block; font-size: .68rem; line-height: 1.3; padding: .1rem .3rem; border-radius: 6px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); text-decoration: none; border-inline-start: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .cl-c { min-height: 56px; } .cl-e { font-size: .6rem; } }
/* بوابة ولي الأمر */
.pp-wrap .pp-card { max-width: 560px; } .pp-tiles { margin: 1rem 0; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-tiles .card { padding: .55rem; text-align: center; } .pp-tiles b { font-size: 1.2rem; }
.pp-sec { border-top: 1px dashed var(--line); padding-top: .7rem; margin-top: .7rem; } .pp-sec h3 { font-size: 1rem; margin: 0 0 .5rem; } .pp-chips { display: flex; flex-wrap: wrap; gap: .3rem; } .pp-row { padding: .3rem 0; border-bottom: 1px solid var(--line); } .pp-row:last-child { border: 0; }
.cm-list { display: grid; gap: .6rem; } .cm-row { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: .35rem; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .45rem; } .sl { border: 1px dashed var(--line); border-radius: 12px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem; } .sl.booked { border-style: solid; border-color: var(--primary); background: var(--primary-soft); }
/* مخطط الجلوس */
.st-grid { display: grid; gap: .4rem; } .st-seat { min-height: 58px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; font-size: .78rem; cursor: pointer; padding: .3rem; } .st-seat.empty { border-style: dashed; } .st-seat.pick { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); } .st-seat.watch::after { content: ""; display: inline-block; width: .95em; height: .95em; margin-inline-start: .3em; vertical-align: -.12em; background: #b8902a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 600px) { .st-seat { min-height: 44px; font-size: .66rem; } }
/* مساعد اللوائح والمعرض */
.rg-q { margin: .3rem 0; padding: .5rem .8rem; border-inline-start: 3px solid var(--primary); background: var(--surface-2); border-radius: 8px; font-size: .85rem; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .8rem; } .gl-item { margin: 0; display: flex; flex-direction: column; gap: .35rem; } .gl-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.gl-pub { max-width: 1100px; margin: 0 auto; padding: 1rem; } .gl-head { text-align: center; padding: 1.5rem 1rem; margin-bottom: 1rem; border-radius: 16px; background: var(--primary); color: #fff; } .gl-head h1 { margin: .3rem 0; font-size: 1.6rem; }

/* زر انتقال المدير بين التقويم الذاتي وإدارة المدرسة */
.sw-btn { border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 700; margin-inline-end: .4rem; white-space: nowrap; }
@media (max-width: 600px) { .sw-btn span { display: none; } }

/* صفحتا الدخول والتسجيل: تبويبان، ونوع التسجيل */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; border-radius: 14px; background: var(--surface-2); margin-bottom: 1rem; } .auth-tabs a { text-align: center; padding: .6rem; border-radius: 11px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: .92rem; } .auth-tabs a.on { background: var(--surface); color: var(--text, inherit); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.reg-type { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .reg-type button { text-align: start; padding: .8rem .9rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: .25rem; } .reg-type button small { color: var(--muted); font-size: .78rem; line-height: 1.6; } .reg-type button.on { border-color: var(--primary); background: var(--primary-soft); }
.reg-note { margin: .8rem 0 1rem; border-radius: 12px; font-size: .85rem; } .reg-stages > b, .reg-stages > .chips { display: none; } .reg-stages #moreStages { margin-top: 0 !important; }
@media (max-width: 520px) { .reg-type { grid-template-columns: 1fr; } }

.em-fix { margin-top: .3rem; color: #b45309; } .em-fix a { font-weight: 700; }

/* صفحة أسعار إدارة المدرسة: طي الخدمات الإضافية */
.mg-more summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: .88rem; margin: .2rem 0 .4rem; } .mg-more[open] summary { margin-bottom: .2rem; }
tr.mg-x { display: none; } tr.mg-showall td { text-align: center; }

/* «كل الخدمات» و«ابدأ هنا» */
.hb-sec { margin-bottom: 1rem; } .hb-h { font-weight: 700; color: var(--muted); font-size: .85rem; margin: 0 .2rem .5rem; }
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; } .hb-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .5rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; color: inherit; text-decoration: none; font-size: .88rem; font-weight: 600; position: relative; } .hb-tile:hover { border-color: var(--primary); } .hb-ic { font-size: 1.6rem; } .hb-tile.is-locked { opacity: .6; } .hb-tile .nav-lock { position: absolute; top: .35rem; inset-inline-end: .45rem; }
.start-here { border: 2px solid var(--primary); } .sh-steps { display: grid; gap: .4rem; margin-top: .6rem; } .sh-step { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 12px; background: var(--surface-2); color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; } .sh-step.ok { opacity: .55; text-decoration: line-through; } .sh-step .t-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: .8rem; flex-shrink: 0; }
@media (max-width: 520px) { .hb-grid { grid-template-columns: repeat(2, 1fr); } }
.hb-search { margin-bottom: 1rem; position: sticky; top: 0; z-index: 2; } .hb-search .i { width: 100%; }
@media (max-width: 520px) { .hb-grid { grid-template-columns: repeat(3, 1fr); gap: .4rem; } .hb-tile { padding: .6rem .3rem; font-size: .78rem; border-radius: 12px; } .hb-ic { font-size: 1.35rem; } }

.mg-up { background: var(--accent-soft); border-radius: 10px; padding: .5rem .7rem; margin: .4rem 0 .6rem; }

/* خصم الباقتين وبطاقة التقويم الذاتي */
.mg-bundle { background: #ecfdf3; color: #166534; border-radius: 8px; padding: .3rem .55rem; margin: .3rem 0; font-weight: 700; } .mg-grid.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1rem; } .mg-eval { border-style: dashed; }

/* اختيار الخدمة عند التسجيل */
.prod-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; } .prod-pick button { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .4rem; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; text-align: center; } .prod-pick button.on { border-color: var(--primary); background: var(--primary-soft); } .prod-pick .pp-ic { font-size: 1.5rem; } .prod-pick small { color: var(--muted); font-size: .72rem; line-height: 1.4; }
@media (max-width: 520px) { .prod-pick { grid-template-columns: 1fr; } .prod-pick button { flex-direction: row; text-align: start; gap: .6rem; } .prod-pick small { margin-inline-start: auto; } }
.price-h { text-align: center; margin: 2rem 0 .3rem; font-size: 1.3rem; }

.up-btn { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff !important; border: 0; font-weight: 700; } @media (max-width: 520px) { .up-btn span { display: none; } }

.mg-try { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; border: 2px solid var(--primary); } .mg-try b { flex: 1 1 100%; } .mg-try .small { flex: 1 1 240px; }

.news-card { border: 2px solid var(--primary); background: linear-gradient(135deg, var(--primary-soft), var(--surface)); }

.mk-dsc-on { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; font-weight: 700; }

/* الجوال: الشاشات الصغيرة جدا (320) وأهداف اللمس */
@media (max-width: 360px) { .topbar { padding-inline: .6rem; gap: .25rem; } .topbar .btn.sm > span { display: none; } }
/* شاشات اللمس: الأزرار الصغيرة بارتفاع مريح للإصبع (بدون تغيير على الكمبيوتر) */
@media (pointer: coarse) { .btn.sm { min-height: 36px; } .chips button, .chips a > button { min-height: 36px; } }
/* آيفون يكبّر الصفحة عند لمس حقل خطه أقل من 16px: الحقول على شاشات اللمس بخط 16 */
@media (pointer: coarse) { input.i, select.i, textarea.i { font-size: 16px; } }
/* النوافذ المنبثقة: الارتفاع يتبع المساحة الظاهرة فعلا (تتقلص مع لوحة المفاتيح على الجوال) */
.modal { max-height: 90dvh; }
/* بطاقات التواصل: البريد الطويل يلتف بدل ما يتجاوز الشاشة */
.info-ch > div { min-width: 0; } .info-ch b { overflow-wrap: anywhere; }
/* أزرار الحفظ والإلغاء في آخر النافذة تبقى ظاهرة أسفلها أثناء تمرير النماذج الطويلة */
@media (max-width: 820px) { .modal > .row:last-child:has(> .btn.primary) { position: sticky; bottom: -1.3rem; background: var(--surface); margin: .6rem -1.3rem -1.3rem; padding: .75rem 1.3rem calc(.75rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); z-index: 2; } }

/* الصفحة الرئيسية: خدمتان في منصة واحدة */
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.svc-card { display: flex; flex-direction: column; gap: .3rem; margin: 0; border-top: 4px solid var(--primary); }
.svc-card.svc-mgmt { border-top-color: #d97706; }
.svc-card h3 { margin: .2rem 0 0; font-size: 1.25rem; } .svc-card p { margin: 0 0 .4rem; }
.svc-card ul { margin: 0 0 1rem; padding-inline-start: 1.1rem; line-height: 1.9; }
.svc-ic { font-size: 2.2rem; }
.svc-link { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3rem; max-width: 150px; padding: .5rem; }
.svc-link > span:first-child { font-size: 1.8rem; } .svc-link small { color: var(--muted); line-height: 1.5; }
@media (max-width: 820px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc-link { max-width: none; flex-direction: row; flex-wrap: wrap; } }

/* ───────── البروفايل التعريفي ───────── */
.pf-wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px 2rem; }
.pf-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.pf-brand { display: flex; align-items: center; gap: .45rem; font-weight: 800; color: var(--text); text-decoration: none; } .pf-brand img { width: 30px; height: 30px; }
.pf-tabs { display: flex; gap: .3rem; flex-wrap: wrap; flex: 1; justify-content: center; } .pf-tabs a { padding: .4rem .9rem; border-radius: 99px; text-decoration: none; color: var(--muted); font-weight: 700; font-size: .9rem; } .pf-tabs a.on { background: var(--primary); color: #fff; }
.pf-acts { display: flex; gap: .4rem; }
.pf-cover { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; margin: 1.2rem 0 1.5rem; padding: 2.4rem 2rem; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #0e5a52 0%, #157a6e 55%, #1f9b8a 100%); box-shadow: 0 20px 50px rgba(14, 90, 82, .25); position: relative; overflow: hidden; }
.pf-cover::after { content: ""; position: absolute; inset-inline-end: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.pf-cover h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: .3rem 0 .6rem; color: #fff; line-height: 1.25; } .pf-cover p { font-size: 1.08rem; line-height: 1.9; max-width: 640px; margin: 0; color: #e6f4f1; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; } .pf-chips span { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); padding: .35rem .8rem; border-radius: 99px; font-size: .85rem; font-weight: 700; }
.pf-cover-qr { display: flex; flex-direction: column; align-items: center; gap: .4rem; background: #fff; color: #0e5a52; padding: .8rem; border-radius: 16px; position: relative; z-index: 1; } .pf-cover-qr small { font-size: .72rem; font-weight: 700; }
.pf-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--primary); text-transform: uppercase; } .pf-kicker.light { color: #bfe7df; }
.pf-sec { padding: 1.6rem 0; border-bottom: 1px dashed var(--line); } .pf-sec h2 { font-size: 1.5rem; margin: .2rem 0 1rem; }
.pf-lead { font-size: 1.05rem; line-height: 2; max-width: 760px; margin: 0; }
.pf-grid { display: grid; gap: .9rem; } .pf-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-item { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: .3rem; } .pf-item b { font-size: 1rem; } .pf-item p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.8; }
.pf-ic { font-size: 1.8rem; }
.pf-svcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .pf-svc { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); text-decoration: none; color: var(--text); transition: .2s; } .pf-svc:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .08); } .pf-svc b { font-size: 1.2rem; } .pf-svc p { margin: 0; color: var(--muted); line-height: 1.8; } .pf-more { color: var(--primary); font-weight: 800; margin-top: auto; } .pf-svc .pf-qr { position: absolute; top: 1rem; inset-inline-end: 1rem; }
.pf-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.2rem; } .pf-list > div { display: flex; flex-direction: column; padding: .55rem .2rem; border-bottom: 1px solid var(--line); } .pf-list b { font-size: .95rem; } .pf-list span { color: var(--muted); font-size: .86rem; line-height: 1.7; }
.pf-prices { display: flex; flex-wrap: wrap; gap: 1rem; } .pf-price { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: 1.2rem; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); text-align: center; } .pf-price.hot { border-color: var(--primary); background: var(--primary-soft); } .pf-price .num { font-size: 2.4rem; font-weight: 800; color: var(--primary); line-height: 1.2; } .pf-price small { color: var(--muted); font-weight: 700; } .pf-price em { font-style: normal; font-size: .82rem; color: var(--muted); margin-top: .3rem; }
.pf-note { margin: .9rem 0 0; padding: .7rem 1rem; border-radius: 12px; background: var(--accent-soft); font-weight: 600; line-height: 1.8; }
.pf-steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0; } .pf-steps li { counter-increment: s; display: flex; flex-direction: column; gap: .3rem; padding: 1rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); } .pf-steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; } .pf-steps span { color: var(--muted); font-size: .9rem; line-height: 1.8; }
.pf-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; } .pf-cta { display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .55rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); font-weight: 700; transition: .15s; } .pf-cta:hover { border-color: var(--primary); } .pf-cta.pri { background: var(--primary); color: #fff; border-color: var(--primary); } .pf-cta.pri .pf-qr { background: #fff; border-radius: 6px; padding: 3px; }
.pf-qr { display: inline-grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; } .pf-qr svg { width: 100%; height: 100%; } .pf-qr.big { width: 120px; height: 120px; }
.pf-contact { border-bottom: 0; }
.pf-foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
@media (max-width: 820px) { .pf-grid.c3, .pf-grid.c4, .pf-svcs, .pf-list, .pf-steps { grid-template-columns: minmax(0, 1fr); } .pf-cover { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1.2rem; } .pf-cover-qr { justify-self: start; } .pf-tabs { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } .pf-tabs a { white-space: nowrap; } }
@media (min-width: 821px) and (max-width: 1100px) { .pf-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* النسخة المطبوعة (PDF): الألوان كما هي، ورموز QR بدل الضغط، وكل قسم لا ينقسم */
@media print {
  body:has(.pf-wrap) { background: #fff; }
  .pf-bar, .pf-acts, #print-go, .float-btns, .wa-float { display: none !important; }
  .pf-wrap { max-width: none; padding: 0; }
  .pf-wrap * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pf-cover { box-shadow: none; margin-top: 0; break-after: page; }
  .pf-sec { break-inside: avoid; padding: 1rem 0; } .pf-sec h2 { break-after: avoid; }
  .pf-svc:hover, .pf-cta:hover { transform: none; box-shadow: none; }
  .pf-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cta .pf-qr { width: 64px; height: 64px; }
  .pf-cta::after { content: attr(href); font-size: 9px; font-weight: 400; direction: ltr; color: #555; display: none; }
  @page { size: A4; margin: 12mm; }
}
.pf-cta { max-width: 100%; min-width: 0; } .pf-cta-t { min-width: 0; overflow-wrap: anywhere; }
/* روابط القائمة العلوية في سطر واحد، وتتقارب على الشاشات المتوسطة */
.land-links a { white-space: nowrap; }
@media (max-width: 1240px) { .land-links { gap: .85rem; margin-inline-start: 1rem; } .land-links a { font-size: .86rem; } }
@media (max-width: 1100px) { .land-links a[href="/help"], .land-links a[href="#faq"] { display: none; } }
.land-nav .brand { white-space: nowrap; flex-shrink: 0; }

/* جذب: خصم الخدمتين وتوفير الفصلين */
.bundle-hero { display: flex; gap: .8rem; align-items: flex-start; max-width: 720px; margin: .4rem auto 1.2rem; padding: .9rem 1.1rem; border-radius: 16px; background: linear-gradient(135deg, #fff7e6, #ecfdf3); border: 1px solid #fde4b0; }
.bundle-hero .bh-ic { font-size: 1.8rem; } .bundle-hero b { font-size: 1.02rem; } .bundle-hero details summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: .85rem; margin-top: .2rem; } .bundle-hero details span { display: block; margin-top: .3rem; line-height: 1.8; color: var(--muted); }
.two-save { display: inline-block; margin: .1rem 0 .4rem; padding: .2rem .6rem; border-radius: 99px; background: #ecfdf3; color: #166534; font-size: .82rem; font-weight: 700; }
.save-pill { display: inline-block; margin-inline-start: .3rem; padding: .05rem .45rem; border-radius: 99px; background: #f59e0b; color: #fff; font-size: .72rem; font-weight: 800; vertical-align: middle; }
.ev-upsell { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; border: 2px dashed #f59e0b; background: linear-gradient(135deg, #fffbeb, var(--surface)); margin-bottom: 1rem; } .ev-upsell .eu-ic { font-size: 2.2rem; } .ev-upsell > div { flex: 1 1 240px; } .ev-upsell b { font-size: 1.05rem; }
/* البروفايل: عناصر الشرح المفصل */
.pf-bul { margin: .6rem 0 0; padding-inline-start: 1.2rem; line-height: 2; } .pf-bul li::marker { color: var(--primary); }
.pf-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; } .pf-vs-c { border-radius: 16px; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--surface); } .pf-vs-c.bad { border-color: #fecaca; background: color-mix(in srgb, #fee2e2 45%, var(--surface)); } .pf-vs-c.good { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-soft); } .pf-vs-c > b { font-size: 1.02rem; }
.pf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; } .pf-qa { padding: .9rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .pf-qa b { display: block; margin-bottom: .3rem; } .pf-qa p { margin: 0; color: var(--muted); line-height: 1.85; font-size: .92rem; }
.pf-cover-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: #fff; margin-bottom: 1rem; } .pf-cover-brand img { width: 34px; height: 34px; background: #fff; border-radius: 9px; padding: 3px; }
.pf-cover-url { margin-top: 1rem; font-weight: 700; color: #bfe7df; letter-spacing: .02em; }
.pf-price s { font-size: .95rem; }
.pf-social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .pf-social a { padding: .3rem .8rem; border-radius: 99px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 600; font-size: .85rem; }
.pf-disc { margin: 1.2rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.8; }
.pf-break { display: none; }
@media (max-width: 820px) { .pf-vs, .pf-faq { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .pf-break { display: block; break-before: page; height: 0; }
  .pf-cover { min-height: 255mm; align-content: center; border-radius: 18px; margin: 0; padding: 26mm 16mm; grid-template-columns: minmax(0, 1fr); }
  .pf-cover h1 { font-size: 46px; } .pf-cover p { font-size: 17px; max-width: none; }
  .pf-cover-qr { justify-self: start; margin-top: 1rem; } .pf-qr.big { width: 150px; height: 150px; }
  .pf-sec { border-bottom: 0; } .pf-sec h2 { font-size: 22px; }
  .pf-item, .pf-qa, .pf-vs-c, .pf-price, .pf-steps li, .pf-list > div, .pf-svc { break-inside: avoid; }
  .pf-sec#daily, .pf-sec#pro { break-inside: auto; }
  .pf-foot { display: none; }
  @page { size: A4; margin: 12mm 12mm 16mm; @bottom-center { content: "أثر التعليم · atharapps.com · " counter(page); font: 9px "Noto Kufi Arabic", Arial, sans-serif; color: #7a8783; } }
  @page :first { @bottom-center { content: ""; } }
}
/* البروفايل مطبوعا: أعمدة متعددة على صفحة A4 (عرض الطباعة يقع ضمن مقاسات الجوال) */
@media print {
  .pf-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .pf-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pf-vs, .pf-faq, .pf-svcs, .pf-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .pf-steps:has(li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pf-item { padding: .7rem .8rem; } .pf-item p, .pf-list span, .pf-qa p { font-size: 11.5px; line-height: 1.7; } .pf-item b, .pf-list b, .pf-qa b { font-size: 12.5px; }
  .pf-lead { font-size: 13.5px; line-height: 1.95; } .pf-bul { font-size: 12.5px; line-height: 1.9; }
  .pf-ic { font-size: 1.4rem; } .pf-prices { gap: .6rem; } .pf-price { padding: .8rem; } .pf-price .num { font-size: 1.9rem; }
}
@media print { html, body { overflow: visible !important; } .pf-wrap, .pf-wrap * { max-width: 100%; } .pf-svc { break-inside: auto; } .pf-sec { break-inside: auto; } .pf-sec > h2, .pf-sec > .pf-kicker { break-after: avoid; } }
@media print { .pf-prices { flex-wrap: nowrap; } .pf-price { flex: 1 1 0; min-width: 0; } .pf-price em { font-size: 10.5px; } }

.dt-add { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 2px; border-radius: 8px; border: 1px dashed var(--primary); color: var(--primary); font-weight: 800; text-decoration: none; }
/* الجولة على يوتيوب: صورة + زر تشغيل، والإطار لا يُحمّل إلا عند الضغط */
.intro-video .iv-yt { position: relative; cursor: pointer; }
.intro-video .iv-yt img, .intro-video .iv-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.intro-video .iv-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 60px; border: 0; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); transition: transform .15s; }
.intro-video .iv-yt:hover .iv-play { transform: scale(1.08); }
.intro-video .iv-more { text-align: center; margin-top: .8rem; font-weight: 700; }
/* القائمة المنسدلة الموحدة لحقول الاقتراحات (combo.js) */
input.i.cb-in, .f input.cb-in { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 16px 55%, 21px 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 34px; }
.cb-panel { position: fixed; z-index: 3000; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(16,40,36,.18); padding: .3rem; overscroll-behavior: contain; }
.cb-o { padding: .65rem .8rem; border-radius: 8px; cursor: pointer; font-size: .95rem; line-height: 1.4; }
.cb-o small { display: block; color: var(--muted); font-size: .8rem; text-align: start; font-variant-numeric: tabular-nums; }
.cb-o:hover, .cb-o.on { background: var(--primary-soft); color: var(--primary); }
.cb-none { padding: .7rem .8rem; color: var(--muted); font-size: .85rem; }

/* وسم الخدمة على بطاقات المقالات في الصفحة الرئيسية */
.art-card .art-svc { align-self: flex-start; margin-bottom: .45rem; background: var(--primary-soft); color: var(--primary); }
.art-card .art-svc.mg { background: var(--accent-soft); color: #8a6516; }
@media (min-width: 900px) { .art-grid.art-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.art-card[hidden] { display: none !important; }

/* المطبوعات بالألوان الفاتحة دائما حتى لو كان الجهاز في الوضع الليلي */
@media print { :root { color-scheme: light !important; } }

/* آراء المستخدمين: الاستبيانات والاقتراحات */
.fb-wrap { max-width: 760px; margin: 0 auto; padding: 1rem 16px 3rem; display: flex; flex-direction: column; gap: .9rem; }
.fb-wrap > .card { margin: 0; }
.fb-top { gap: .5rem; flex-wrap: wrap; }
.fb-head { display: flex; gap: .9rem; align-items: flex-start; background: var(--primary-soft); border: 0; }
.fb-svs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.fb-svs > .fb-sv, .fb-wrap > .card + .card { margin: 0; }
.fb-sv { display: flex; gap: .8rem; align-items: center; }
.fb-sv:hover { border-color: var(--primary); }
.fb-q { display: flex; flex-direction: column; gap: .6rem; transition: border-color .2s; }
.fb-q.fb-miss { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.fb-qh { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.fb-qn { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.2rem; }
.fb-rate { direction: ltr; align-self: flex-start; display: flex; flex-direction: column; gap: .15rem; max-width: 100%; }
.fb-rate.n { width: min(460px, 100%); }
.fb-stars { justify-content: flex-start; margin: 0; }
.fb-scale { display: flex; justify-content: space-between; gap: 1rem; }
.fb-nps { display: grid; grid-template-columns: repeat(11, 1fr); gap: .3rem; }
.fb-nps button { border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 8px; padding: .5rem 0; font: inherit; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.fb-nps button.on.lo { background: #d64545; border-color: #d64545; color: #fff; }
.fb-nps button.on.mid { background: #e0a106; border-color: #e0a106; color: #fff; }
.fb-nps button.on.hi { background: #1f9d6b; border-color: #1f9d6b; color: #fff; }
.fb-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fb-chips button { border: 1px solid var(--line); background: var(--surface); color: inherit; border-radius: 999px; padding: .4rem .85rem; font: inherit; font-size: .9rem; cursor: pointer; }
.fb-chips button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fb-idea { padding: .7rem 0; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: .3rem; }
.fb-idea:last-child { border-bottom: 0; }
.fb-reply { background: var(--primary-soft); border-radius: 10px; padding: .55rem .75rem; margin-top: .2rem; }
.fb-bar { background: var(--accent-soft, var(--primary-soft)); }
.fb-bars { display: flex; flex-direction: column; gap: .35rem; }
.fb-bars .r { display: grid; grid-template-columns: minmax(110px, 38%) 1fr 3.2rem; gap: .5rem; align-items: center; font-size: .85rem; }
.fb-bars .t { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.fb-bars .t i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.fb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.fb-kpis .card { margin: 0; text-align: center; }
.fb-kpis b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .fb-nps { gap: .18rem; } .fb-nps button { padding: .45rem 0; font-size: .85rem; } }
.fb-idea[hidden], .fb-icard[hidden] { display: none !important; }
.fb-sec { font-weight: 700; color: var(--primary); font-size: .95rem; margin: .6rem .2rem -.2rem; display: flex; align-items: center; gap: .5rem; }
.fb-sec::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }

/* مشاركة الباقة وإبرازها عند فتح رابطها */
.card.price, .card.mg-card { position: relative; }
.plan-share { order: 99; align-self: center; justify-self: center; margin-top: .55rem; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .9rem; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--primary); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }
.plan-share:hover { border-style: solid; border-color: var(--primary); background: var(--primary-soft); }
.plan-share:hover { border-color: var(--primary); }
.plan-hl { outline: 3px solid var(--accent); outline-offset: 4px; animation: planPulse 1.4s ease-out 2; }
@keyframes planPulse { 0% { box-shadow: 0 0 0 0 rgba(200,150,43,.55); } 100% { box-shadow: 0 0 0 22px rgba(200,150,43,0); } }
@media (prefers-reduced-motion: reduce) { .plan-hl { animation: none; } }

/* أيقونات أثر الخطية بدل الإيموجي في القوائم */
.aic { width: 1.25em; height: 1.25em; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.has-aic, .hb-ic.has-aic { display: inline-grid; place-items: center; color: var(--muted); }
.nav a:hover .ic.has-aic { color: var(--text); }
.nav a.on .ic.has-aic, .bottom-nav a.on .ic.has-aic { color: var(--primary); }
.bottom-nav a .ic.has-aic .aic { width: 1.35rem; height: 1.35rem; }
.hb-ic.has-aic { color: var(--primary); }
.hb-ic.has-aic .aic { width: 1.5rem; height: 1.5rem; }

/* ───────── الصفحة الرئيسية: سنة مدرستك مع أثر ───────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: var(--primary); background: var(--primary-soft); padding: .2rem .8rem; border-radius: 999px; }
.hm-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.hm-hero h1 { margin-top: .9rem; font-size: 2.9rem; font-weight: 800; line-height: 1.3; }
.hm-checks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1rem; }
.hm-checks span { display: inline-flex; align-items: center; gap: .4rem; }
.hm-checks span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
@media (max-width: 900px) { .hm-hero h1 { font-size: 2.1rem; } }
.hm-plan { padding: 1.3rem; display: grid; gap: .9rem; border-top: 3px solid var(--primary); }
.hm-plan-h { display: flex; align-items: center; gap: .6rem; }
.hm-plan-h h2 { font-size: 1.12rem; margin: 0; }
.hm-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); flex: none; }
.hm-plan-in { display: grid; gap: .55rem; }
.hm-plan-in label.f { margin: 0; }
.hm-chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.hm-chip { font: inherit; font-size: .82rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: .25rem .8rem; border-radius: 999px; cursor: pointer; }
.hm-chip:hover { border-color: var(--primary); color: var(--primary); }
.hm-chip.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.hm-count { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 .6rem; padding: .8rem 1rem; background: var(--surface-2); border-radius: 12px; }
.hm-count b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--primary); grid-row: span 2; }
.hm-count span { font-weight: 600; }
.hm-count small { color: var(--muted); font-size: .8rem; }
.hm-ms { list-style: none; margin: 0; padding: 0; display: grid; }
.hm-ms li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; position: relative; padding-bottom: .7rem; }
.hm-ms li::before { content: ""; position: absolute; inset-inline-start: 10px; top: 16px; bottom: -2px; width: 2px; background: repeating-linear-gradient(to bottom, var(--trail) 0 5px, transparent 5px 10px); }
.hm-ms li:last-child::before { display: none; }
.hm-ms .m { display: grid; place-items: center; height: 22px; position: relative; z-index: 1; }
.hm-ms .m i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); }
.hm-ms li.now .m i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hm-ms p { margin: .1rem 0 0; }
.hm-note { margin: 0; }
.hm-plan-empty { display: grid; gap: .8rem; }
.hm-plan-empty p { margin: 0; color: var(--muted); }

.hm-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; max-width: 980px; margin: 0 auto; }
.hm-path::before { content: ""; position: absolute; top: 19px; inset-inline: 10%; height: 3px; border-radius: 3px; background: repeating-linear-gradient(to left, var(--trail) 0 10px, transparent 10px 16px); }
.hm-st { font: inherit; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: .3rem; padding: 0 .3rem .6rem; color: var(--text); text-align: center; position: relative; min-width: 0; }
.hm-st .m { width: 40px; height: 40px; display: grid; place-items: center; position: relative; z-index: 1; }
.hm-st .m i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--trail); transition: .2s; }
.hm-st.done .m i { background: var(--primary); border-color: var(--primary); }
.hm-st.on .m i { width: 22px; height: 22px; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 7px var(--accent-soft); }
.hm-st.on .m::before { content: ""; position: absolute; bottom: 28px; width: 28px; height: 16px; border: 3px solid var(--primary); border-bottom: 0; border-radius: 16px 16px 0 0; }
.hm-st b { font-size: .95rem; }
.hm-st small { font-size: .76rem; color: var(--muted); }
.hm-st.on b { color: var(--primary); }
.hm-st:hover .m i { border-color: var(--primary); }
.hm-st:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.hm-daily { max-width: 980px; margin: .4rem auto 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .55rem .9rem; border: 1px dashed var(--trail); border-radius: 12px; }
.hm-daily-l { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .85rem; color: var(--primary); }
.hm-daily-l .aic { width: 1.2rem; height: 1.2rem; }
.hm-daily-t { display: flex; gap: .35rem; flex-wrap: wrap; }
.hm-daily-t i { font-style: normal; font-size: .78rem; padding: .1rem .6rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.hm-st-panel { max-width: 980px; margin: 1rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; padding: 1.4rem; }
.hm-st-txt h3 { font-size: 1.25rem; margin: .5rem 0 .3rem; }
.hm-st-txt p { margin: 0; }
.hm-tag { font-size: .74rem; font-weight: 700; padding: .1rem .65rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.hm-st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hm-st-list li { display: flex; gap: .55rem; align-items: flex-start; }
.hm-st-list .aic { width: 1.25rem; height: 1.25rem; color: var(--primary); flex: none; margin-top: .15rem; }
@media (max-width: 760px) {
  .hm-path { overflow-x: auto; grid-template-columns: repeat(5, minmax(96px, 1fr)); scrollbar-width: none; }
  .hm-path::before { inset-inline: 48px; }
  .hm-st-panel { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
}

.hm-roles { padding: 0; overflow: hidden; }
.hm-tabs { padding: 0 1rem; margin: 0; }
.hm-tabs .tab { position: relative; }
.hm-role-p { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; padding: 1.4rem; }
.hm-role-txt { display: grid; gap: .9rem; justify-items: start; }
.hm-role-txt h3 { font-size: 1.25rem; margin: 0; }
.hm-phone { justify-self: center; width: min(260px, 100%); border: 8px solid var(--text); border-radius: 30px; background: var(--bg); padding: .8rem .7rem 1.1rem; display: grid; gap: .5rem; box-shadow: var(--shadow); }
.hm-ph-top { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; padding-bottom: .3rem; }
.hm-ph-top img { width: 24px; height: 24px; }
.hm-ph-row { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .55rem .7rem; font-size: .82rem; }
.hm-ph-row b { font-family: var(--font-display); color: var(--primary); font-size: 1.05rem; }
.hm-ph-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: .2rem; }
.hm-ph-bar i { display: block; height: 100%; width: 68%; background: var(--primary); border-radius: inherit; }
@media (max-width: 760px) { .hm-role-p { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; } }

.svc-ic .aic { width: 2.1rem; height: 2.1rem; color: var(--primary); }
.svc-link .aic { width: 1.6rem; height: 1.6rem; color: var(--primary); }

.hm-commit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.6rem; max-width: 980px; margin: 0 auto; }
.hm-cm { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: .2rem 0; }
.hm-cm > .aic { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.hm-cm b { display: block; }
.hm-cm p { margin: .15rem 0 0; }

.hm-cta { margin: 1rem 0 3rem; padding: 2rem; border-radius: 20px; background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.hm-cta::after { content: ""; position: absolute; inset-inline-start: 2rem; bottom: 1.1rem; width: 90px; height: 3px; border-radius: 3px; background: var(--accent); }
.hm-cta h2 { color: inherit; margin: 0 0 .3rem; font-size: 1.6rem; }
.hm-cta p { margin: 0; opacity: .9; }
.hm-cta-btn { background: var(--surface); color: var(--primary); border-color: var(--surface); }
.hm-cta-btn:hover { border-color: var(--accent); }
.hm-cta-ghost { color: var(--on-primary); }
.hm-cta-ghost:hover { background: rgba(255,255,255,.12); }
@media (max-width: 560px) { .hm-cta { padding: 1.4rem; } .hm-cta h2 { font-size: 1.3rem; } }

.hm-tabs .tab[aria-selected="true"] { color: var(--primary); }
.hm-tabs .tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: .6rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.hm-tabs .tab[aria-selected="true"]::before { content: ""; position: absolute; top: .45rem; inset-inline-start: .25rem; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hm-path::after { content: ""; position: absolute; top: 19px; inset-inline-start: 10%; width: calc(80% * var(--p, .5)); height: 3px; border-radius: 3px; background: var(--primary); transition: width .3s; }
@media (max-width: 760px) { .hm-path::after { inset-inline-start: 48px; width: calc((100% - 96px) * var(--p, .5)); } }

/* ───────── الرئيسية: بوابة الخدمتين ───────── */
.land-links a.on { color: var(--primary); font-weight: 700; }
.hm-gw { padding: 2.6rem 0 2rem; display: grid; gap: 1.6rem; }
.hm-gw-head { text-align: center; display: grid; justify-items: center; gap: .2rem; }
.hm-gw-head h1 { margin: .8rem 0 .3rem; font-size: 2.6rem; font-weight: 800; }
.hm-gw-head .lead { max-width: 640px; color: var(--muted); font-size: 1.1rem; margin: 0; }
.hm-gw-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; max-width: 1040px; margin: 0 auto; width: 100%; }
.hm-gw-grid.one { grid-template-columns: minmax(0, 560px); justify-content: center; }
.hm-gw-card { display: grid; gap: 1rem; align-content: start; padding: 1.5rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); transition: border-color .15s, transform .15s; position: relative; }
.hm-gw-card::before { content: ""; position: absolute; inset-inline: 1.5rem; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
.hm-gw-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.hm-gw-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hm-gw-top { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; }
.hm-gw-top h2 { margin: 0; font-size: 1.45rem; }
.hm-gw-top p { margin: .1rem 0 0; font-size: .92rem; }
.hm-gw-ic { width: 54px; height: 54px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.hm-gw-ic .aic { width: 1.8rem; height: 1.8rem; }
.hm-mini { display: flex; position: relative; padding: .2rem 0 .1rem; }
.hm-mini::before { content: ""; position: absolute; top: 9px; inset-inline: 6%; height: 2px; background: repeating-linear-gradient(to left, var(--trail) 0 6px, transparent 6px 10px); }
.hm-mini span { flex: 1; display: grid; justify-items: center; gap: .3rem; font-size: .7rem; color: var(--muted); text-align: center; line-height: 1.35; position: relative; min-width: 0; }
.hm-mini i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--primary); }
.hm-mini span:first-child i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hm-gw-go { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--primary); margin-top: auto; }
.hm-gw-card:hover .hm-gw-go span { transform: translateX(-3px); }
.hm-gw-go span { transition: transform .15s; }
.hm-gw-link { display: grid; justify-items: center; align-content: center; gap: .3rem; color: var(--primary); }
.hm-gw-link span { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px dashed var(--primary); display: grid; place-items: center; }
.hm-gw-link .aic { width: 1.3rem; height: 1.3rem; }
.hm-gw-link small { font-weight: 700; font-size: .75rem; }
.hm-gw-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; color: var(--muted); text-align: center; }
.hm-gw-note .aic { width: 1.2rem; height: 1.2rem; color: var(--accent); flex: none; }
.hm-gw-cta { display: flex; justify-content: center; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
@media (max-width: 820px) {
  .hm-gw-head h1 { font-size: 1.9rem; }
  .hm-gw-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-gw-link { display: flex; justify-content: center; align-items: center; gap: .5rem; }
  .hm-gw-link span { width: 36px; height: 36px; }
}

/* ───────── صفحات الخدمات ───────── */
.hm-svc-head { text-align: center; display: grid; justify-items: center; padding: 2.4rem 0 0; }
.hm-svc-head h1 { margin: .8rem 0 .3rem; font-size: 2.5rem; font-weight: 800; }
.hm-svc-head .lead { max-width: 660px; color: var(--muted); font-size: 1.08rem; margin: 0; }
.hm-svc-head + .hm-path-sec { padding-top: 2rem; }
@media (max-width: 820px) { .hm-svc-head h1 { font-size: 1.9rem; } }
.hm-plan-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: start; max-width: 1040px; margin: 0 auto; }
.hm-plan-why h2 { text-align: start; font-size: 1.5rem; }
.hm-vs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.hm-vs > div { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; background: var(--surface); }
.hm-vs > div.good { border-color: var(--primary); }
.hm-vs h3 { font-size: .95rem; margin: 0 0 .4rem; }
.hm-vs .good h3 { color: var(--primary); }
.hm-vs ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .3rem; font-size: .88rem; }
.hm-vs > div:not(.good) ul { color: var(--muted); }
@media (max-width: 820px) { .hm-plan-wrap, .hm-vs { grid-template-columns: minmax(0, 1fr); } }
.hm-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem 1.8rem; max-width: 1040px; margin: 0 auto; }
.hm-feat { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.hm-feat > .aic { width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.hm-feat h3 { margin: 0 0 .15rem; font-size: 1rem; }
.hm-feat p { margin: 0; }
.hm-plans-link .card { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; }
.hm-plans-link h2 { text-align: start; margin: 0 0 .2rem; font-size: 1.3rem; }

/* البوابتان الإضافيتان: النماذج والملفات، والتطوير المهني (قريبا) */
.hm-gw-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 1040px; margin: 0 auto; width: 100%; }
.hm-gw-mini { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: 1rem 1.2rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: border-color .15s, transform .15s; }
a.hm-gw-mini:hover { border-color: var(--primary); transform: translateY(-2px); }
a.hm-gw-mini:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hm-gw-mini h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hm-gw-mini p { margin: .1rem 0 0; }
.hm-gw-mini .hm-gw-go { margin: 0; font-size: 1.1rem; }
.hm-gw-ic.sm { width: 44px; height: 44px; border-radius: 13px; }
.hm-gw-ic.sm .aic { width: 1.45rem; height: 1.45rem; }
.hm-gw-mini.soon { grid-template-columns: auto 1fr; background: transparent; border-style: dashed; cursor: default; }
.hm-gw-mini.soon .hm-gw-ic { background: var(--surface-2); color: var(--muted); }
.hm-gw-mini.soon h3 { color: var(--muted); }
.hm-soon { font-family: var(--font); font-size: .72rem; font-weight: 700; padding: .05rem .6rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
@media (max-width: 820px) { .hm-gw-sub { grid-template-columns: minmax(0, 1fr); } }

/* صفحة النماذج والملفات */
.hm-forms-tools { max-width: 1040px; margin: 0 auto 1.2rem; display: grid; gap: .7rem; }
.hm-forms-tools label.f { margin: 0; max-width: 420px; }
.hm-chip .num { opacity: .65; font-size: .75rem; margin-inline-start: .2rem; }
.hm-forms { max-width: 1040px; margin: 0 auto; columns: 3 280px; column-gap: 1.6rem; }
.hm-fcat { break-inside: avoid; margin-bottom: 1.3rem; }
.hm-fcat h3 { font-size: 1rem; margin: 0 0 .45rem; padding-bottom: .35rem; border-bottom: 2px solid var(--primary-soft); color: var(--primary); }
.hm-fcat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.hm-fcat li { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; padding: .25rem 0; }
.hm-fcat li .aic { width: 1.05rem; height: 1.05rem; color: var(--muted); flex: none; margin-top: .25rem; }
.hm-forms-empty { text-align: center; }

/* ───────── متجر النماذج والملفات ───────── */
.st-disc { max-width: 1040px; margin: 0 auto; display: flex; gap: .6rem; align-items: center; padding: .7rem 1rem; border-radius: 12px; border: 1px dashed var(--accent); background: var(--accent-soft); font-size: .9rem; }
.st-disc .aic { width: 1.3rem; height: 1.3rem; color: var(--accent); flex: none; }
.st-disc.on { border-style: solid; border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.st-disc.on .aic { color: var(--ok); }
.st-sec { padding-top: 2rem; }
.st-cat { max-width: 1040px; margin: 0 auto 2rem; scroll-margin-top: 1rem; }
.st-cat-h { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--primary-soft); flex-wrap: wrap; }
.st-cat-h h2 { font-size: 1.2rem; margin: 0; text-align: start; }
.st-grp { max-width: 1040px; margin: 2rem auto 1rem; text-align: center; }
.st-grp h2 { margin: 0 0 .3rem; font-size: 1.4rem; }
.st-grp p { margin: 0 auto; max-width: 68ch; }
.st-item-t p, .lib-idea { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .9rem; align-items: stretch; }
/* مكتبة المعلم: أقسام نافذة البطاقة وطباعتها */
.tl-sec h4 { margin: .9rem 0 .3rem; font-size: 14px; color: var(--primary); }
.tl-sec ul, .tl-sec ol { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .25rem; }
.tl-sec p { margin: 0; }
@media (max-width: 480px) { .lib-tabs .pill { display: none; } .lib-tabs a { padding-inline: .6rem; } }
.lib-card { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.lib-card .lib-idea { margin: .35rem 0 .3rem; }
.lib-card > .row:last-child { margin-top: auto !important; padding-top: .6rem; }
.rc-proc { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; }
.rc-proc ol { margin: .4rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .25rem; line-height: 1.7; }
.st-cat-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }
.st-cat-ic .aic { width: 1.25rem; height: 1.25rem; }
.st-bundle { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; margin-bottom: .8rem; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--primary); position: relative; }
.st-bundle::before { content: ""; position: absolute; top: -6px; inset-inline-start: 1.1rem; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.st-bundle p { margin: .1rem 0 0; }
.st-price { display: grid; justify-items: end; line-height: 1.2; }
.st-price s { font-size: .8rem; }
.st-price b { font-family: var(--font-display); font-size: 1.2rem; color: var(--primary); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .7rem; }
.st-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: .85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); align-content: space-between; }
.st-item-t { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; }
.st-item-t .aic { width: 1.25rem; height: 1.25rem; color: var(--primary); margin-top: .2rem; }
.st-item-t b { font-size: .95rem; }
.st-item-t p { margin: .15rem 0 0; }
.st-item-f { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.st-type { font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .05rem .5rem; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.st-p { margin-inline-start: auto; font-family: var(--font-display); color: var(--text); }
.st-item .btn.on, .st-bundle .btn.on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.st-item .btn:disabled { opacity: 1; cursor: default; }
.st-empty { padding: .6rem 0; }
.st-cart-btn { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); inset-inline-start: 50%; transform: translateX(50%); z-index: 40; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.2rem; border-radius: 999px; border: 0; background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
[dir="ltr"] .st-cart-btn { transform: translateX(-50%); }
.st-cart-btn .aic { width: 1.3rem; height: 1.3rem; }
.st-cart-btn #stCartN { min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: inline-grid; place-items: center; font-size: .78rem; }
.st-cart h3 { display: flex; align-items: center; gap: .5rem; }
.st-cart h3 .aic { width: 1.3rem; height: 1.3rem; color: var(--primary); }
.st-lines { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.st-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.st-lines li > span { display: flex; gap: .45rem; align-items: center; min-width: 0; }
.st-lines .aic { width: 1.05rem; height: 1.05rem; color: var(--muted); flex: none; }
.st-sum { display: grid; gap: .25rem; font-size: .9rem; margin-bottom: 1rem; }
.st-sum div { display: flex; justify-content: space-between; }
.st-sum .ok { color: var(--ok); }
.st-sum .tot { font-weight: 800; font-size: 1.05rem; padding-top: .35rem; border-top: 2px solid var(--line); }
.st-co h4 { margin: .4rem 0 .6rem; font-size: .95rem; }
.st-pay-note { text-align: center; margin: .5rem 0 0; }
.st-order { max-width: 640px; margin: 2rem auto; display: grid; gap: .8rem; justify-items: start; padding: 1.6rem; }
.st-order h2 { text-align: start; margin: 0; }
.st-ok { width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); display: grid; place-items: center; }
.st-ok .aic { width: 1.7rem; height: 1.7rem; }
.st-dl { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .4rem; }
.st-dl li { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; }
.st-dl li > span:nth-child(2) { flex: 1 1 10rem; min-width: 0; }
.st-g { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.st-dl .aic { width: 1.15rem; height: 1.15rem; color: var(--primary); }
.hm-gw-mini.soon { grid-template-columns: auto 1fr auto; }
.hm-gw-mini.soon .btn { display: inline-flex; gap: .35rem; align-items: center; white-space: nowrap; }
.hm-gw-mini.soon .btn .aic { width: 1rem; height: 1rem; }
@media (max-width: 640px) {
  .st-bundle { grid-template-columns: 1fr auto; }
  .st-bundle .btn { grid-column: 1 / -1; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-gw-mini.soon { grid-template-columns: auto 1fr; }
  .hm-gw-mini.soon .btn { grid-column: 1 / -1; justify-self: start; }
}

/* المسار بعدد محطات متغير، وزر السلة يختفي وهي فاضية */
.st-cart-btn[hidden] { display: none; }
.hm-path { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.hm-path::before { inset-inline: calc(50% / var(--n, 5)); }
.hm-path::after { inset-inline-start: calc(50% / var(--n, 5)); width: calc((100% - 100% / var(--n, 5)) * var(--p, .5)); }
@media (max-width: 760px) { .hm-path { grid-template-columns: repeat(var(--n, 5), minmax(96px, 1fr)); } .hm-path::before { inset-inline: 48px; } .hm-path::after { inset-inline-start: 48px; width: calc((100% - 96px) * var(--p, .5)); } }
@media (max-width: 760px) { .hm-path { padding-top: 14px; } .hm-path::before, .hm-path::after { top: 33px; } }
.modal h3 > .aic { display: inline-block; vertical-align: -.2em; width: 1.15em; height: 1.15em; margin-inline-end: .3rem; color: var(--primary); }
.hm-mg-plans { max-width: 640px; margin: 1.2rem auto 0; display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; padding: .7rem 1rem; border: 1px dashed var(--trail); border-radius: 12px; font-size: .92rem; color: var(--muted); }

/* صفحتا مشرف الدعم وولي الأمر */
.hm-trust-row { max-width: 760px; margin: 0 auto; padding-top: 1rem; }
.hm-one-plan { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; padding: 1.5rem; border-top: 3px solid var(--primary); }
.hm-one-plan h3 { margin: 0 0 .7rem; font-size: 1.2rem; }
.hm-one-plan-p { display: grid; justify-items: center; gap: .2rem; text-align: center; }
.hm-one-plan-p b { font-family: var(--font-display); font-size: 2.6rem; color: var(--primary); line-height: 1; }
.hm-one-plan-p span { color: var(--muted); font-size: .85rem; margin-bottom: .6rem; }
.hm-parent-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hm-parent-grid .card { display: grid; gap: .6rem; align-content: start; justify-items: start; padding: 1.3rem; }
.hm-parent-grid h3 { margin: 0; }
.hm-parent-grid .btn .aic { width: 1.05rem; height: 1.05rem; }
@media (max-width: 700px) { .hm-one-plan, .hm-parent-grid { grid-template-columns: minmax(0, 1fr); } }
.hm-parent-grid .card + .card { margin-top: 0; }
/* صفوف البوابات بنفس الأعمدة حتى تتساوى المربعات */
.hm-gw-grid:not(.one) { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
.hm-gw-row2.one { grid-template-columns: minmax(0, 560px); }
@media (max-width: 820px) { .hm-gw-grid:not(.one) { grid-template-columns: minmax(0, 1fr); } .hm-gw-row2 > span[aria-hidden] { display: none; } }
/* البوابات اللي «قريبا»: نفس الحجم، شكل باهت */
.hm-gw-card.soon { background: transparent; border-style: dashed; box-shadow: none; cursor: default; }
.hm-gw-card.soon:hover { transform: none; border-color: var(--line); }
.hm-gw-card.soon::before { background: var(--trail); }
.hm-gw-card.soon .hm-gw-ic { background: var(--surface-2); color: var(--muted); }
.hm-gw-card.soon h2 { color: var(--muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hm-gw-card.soon .hm-mini i { border-color: var(--trail); }
.hm-gw-card.soon .hm-mini span:first-child i { background: var(--surface); box-shadow: none; }
.hm-gw-card.soon .hm-st-list .aic { color: var(--muted); }
.hm-gw-notify { display: grid; gap: .6rem; justify-items: start; margin-top: auto; }
.hm-gw-notify p { margin: 0; }
.hm-gw-notify .btn { display: inline-flex; gap: .4rem; align-items: center; }
.hm-gw-notify .btn .aic { width: 1rem; height: 1rem; }
.hm-gw-grid + .hm-gw-row2 { margin-top: -.6rem; }

/* شريط التنقل داخل صفحات البوابات */
.hm-subnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; margin: 1.4rem auto 0; max-width: 1040px; }
.hm-subnav > div { display: flex; gap: .3rem; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: .4rem; border-radius: 999px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--shadow); width: fit-content; max-width: 100%; margin: 0 auto; }
.hm-subnav a { white-space: nowrap; padding: .35rem .95rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.hm-subnav a:hover { color: var(--primary); }
.hm-subnav a.on { background: var(--primary); color: var(--on-primary); }
.hm-path-sec, #plan, #features, #pricing, #faq, #roles, #compare { scroll-margin-top: 4.5rem; }
/* المقارنة المنطوية والأسئلة المختصرة */
.hm-cmp-sec { padding-top: 0; }
.hm-cmp { max-width: 1040px; margin: 0 auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hm-cmp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.hm-cmp > summary::-webkit-details-marker { display: none; }
.hm-cmp > summary span:first-child { display: grid; gap: .1rem; }
.hm-cmp-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-weight: 700; transition: transform .2s; }
.hm-cmp[open] .hm-cmp-ic { transform: rotate(45deg); }
.hm-cmp[open] > summary { border-bottom: 1px solid var(--line); }
.hm-cmp .mg-cmp { margin: 0; border: 0; border-radius: 0 0 16px 16px; }
.hm-faq-more { display: flex; margin: 1rem auto 0; }
.mg-link-flow span .aic { width: 1.6rem; height: 1.6rem; color: var(--primary); }
.iv-frame.iv-empty { display: grid; place-items: center; text-align: center; min-height: 220px; border: 2px dashed var(--trail); background: var(--surface-2); border-radius: 16px; padding: 1.5rem; }
.iv-frame.iv-empty > div { display: grid; gap: .5rem; justify-items: center; max-width: 420px; }
.iv-frame.iv-empty p { margin: 0; }
/* المسار في الجوال: يتسع للشاشة بدون تمرير جانبي، والخط متصل لآخر محطة */
@media (max-width: 760px) {
  .hm-path { overflow: visible; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
  .hm-path::before { inset-inline: calc(50% / var(--n, 5)); }
  .hm-path::after { inset-inline-start: calc(50% / var(--n, 5)); width: calc((100% - 100% / var(--n, 5)) * var(--p, .5)); }
  .hm-st { padding-inline: 2px; }
  .hm-st b { font-size: .76rem; line-height: 1.35; }
  .hm-st small { font-size: .64rem; line-height: 1.35; }
}

/* ───────── ألوان البوابات: عائلة ألوان متناسقة مع هوية أثر ───────── */
:root { --p-eval: #0e5a52; --p-mgmt: #2457a6; --p-sup: #6b4bb4; --p-par: #c04a64; --p-forms: #a96a12; --p-pd: #3b8240; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p-eval: #3fb3a3; --p-mgmt: #6b9be6; --p-sup: #a68ce8; --p-par: #ec8aa0; --p-forms: #e0a650; --p-pd: #7cc483; } }
:root[data-theme="dark"] { --p-eval: #3fb3a3; --p-mgmt: #6b9be6; --p-sup: #a68ce8; --p-par: #ec8aa0; --p-forms: #e0a650; --p-pd: #7cc483; }
.hm-gw-eval, .c1 { --pc: var(--p-eval); } .hm-gw-mgmt, .c2 { --pc: var(--p-mgmt); } .hm-gw-district, .c3 { --pc: var(--p-sup); }
.hm-gw-parents, .c4 { --pc: var(--p-par); } .hm-gw-forms, .c5 { --pc: var(--p-forms); } .hm-gw-pd, .c6 { --pc: var(--p-pd); }
.hm-gw-card { --pc-soft: color-mix(in srgb, var(--pc, var(--primary)) 12%, var(--surface)); }
.hm-gw-card::before { background: var(--pc, var(--primary)); height: 4px; }
.hm-gw-card .hm-gw-ic { background: var(--pc-soft); color: var(--pc, var(--primary)); }
.hm-gw-card .hm-mini i { border-color: var(--pc, var(--primary)); }
.hm-gw-card .hm-mini span:first-child i { background: var(--pc, var(--accent)); border-color: var(--pc, var(--accent)); box-shadow: 0 0 0 4px var(--pc-soft); }
.hm-gw-card .hm-st-list .aic { color: var(--pc, var(--primary)); }
.hm-gw-card .hm-gw-go { color: var(--pc, var(--primary)); }
.hm-gw-card:not(.soon):hover { border-color: var(--pc, var(--primary)); box-shadow: 0 10px 30px color-mix(in srgb, var(--pc, var(--primary)) 18%, transparent); }
.hm-gw-card { background: linear-gradient(180deg, color-mix(in srgb, var(--pc, var(--primary)) 5%, var(--surface)) 0, var(--surface) 140px); }
.hm-gw-card.soon { background: transparent; }
.hm-gw-card.soon::before { background: color-mix(in srgb, var(--pc, var(--primary)) 35%, transparent); }
.hm-gw-card.soon .hm-gw-ic { background: color-mix(in srgb, var(--pc, var(--primary)) 8%, transparent); color: color-mix(in srgb, var(--pc, var(--primary)) 60%, var(--muted)); }
/* أول الصفحة: خلفية ناعمة بلمسات من ألوان البوابات */
.hm-gw { position: relative; isolation: isolate; }
.hm-gw::before { content: ""; position: absolute; z-index: -1; inset: -1rem 0 auto; height: 520px; pointer-events: none;
  background: radial-gradient(420px 220px at 78% 18%, color-mix(in srgb, var(--p-eval) 14%, transparent), transparent 70%),
    radial-gradient(380px 200px at 22% 14%, color-mix(in srgb, var(--p-mgmt) 12%, transparent), transparent 70%),
    radial-gradient(300px 180px at 50% 2%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.hm-gw-head h1 { background: linear-gradient(90deg, var(--p-mgmt), var(--p-eval) 55%, var(--p-eval)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not (background-clip: text) { .hm-gw-head h1 { color: var(--text); } }
/* شريط «وش يميز أثر» */
.hm-why { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.hm-why span { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--pc); background: color-mix(in srgb, var(--pc) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--pc) 25%, transparent); }
.hm-why .aic { width: 1rem; height: 1rem; }
/* الالتزامات بأيقونات ملونة */
.hm-cm > .aic { background: color-mix(in srgb, var(--pc, var(--primary)) 12%, var(--surface)); color: var(--pc, var(--primary)); }
/* ألوان البوابات من عائلة هوية أثر (الأخضر المزرق والذهبي ودرجاتهما) */
:root { --p-eval: #0e5a52; --p-mgmt: #17607a; --p-sup: #2f6a3e; --p-par: #a8791d; --p-forms: #95582a; --p-pd: #5d7d45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p-eval: #3fb3a3; --p-mgmt: #5bb1cc; --p-sup: #78c08b; --p-par: #e2b65c; --p-forms: #d99a66; --p-pd: #a6c58c; } }
:root[data-theme="dark"] { --p-eval: #3fb3a3; --p-mgmt: #5bb1cc; --p-sup: #78c08b; --p-par: #e2b65c; --p-forms: #d99a66; --p-pd: #a6c58c; }
.hm-gw-head h1 { background: linear-gradient(90deg, var(--p-mgmt), var(--p-eval) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-gw::before { background: radial-gradient(420px 220px at 78% 18%, color-mix(in srgb, var(--p-eval) 13%, transparent), transparent 70%), radial-gradient(380px 200px at 22% 14%, color-mix(in srgb, var(--p-mgmt) 11%, transparent), transparent 70%), radial-gradient(320px 180px at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.hm-gw::before { -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 30%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 50% 60% at 50% 30%, #000 45%, transparent 100%); }

/* ───────── روح الرئيسية: الوعد، وخط الأثر، والشاشات الحقيقية ───────── */
.hm-hero2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.5rem; align-items: center; max-width: 1140px; margin: 0 auto; width: 100%; padding-top: 1rem; }
.hm-hero2-txt { display: grid; gap: .9rem; justify-items: start; }
.hm-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.hm-brand img { border-radius: 8px; }
.hm-hero2 h1 { margin: 0; font-size: 3.1rem; font-weight: 800; line-height: 1.25; background: linear-gradient(90deg, var(--p-mgmt), var(--p-eval) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-hero2 .lead { margin: 0; font-size: 1.1rem; color: var(--muted); max-width: 52ch; }
.hm-hero2 .hm-why { justify-content: flex-start; margin: 0; }
.hm-hero2-cta { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
.hm-today { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); min-height: 1.4em; }
.hm-today:empty { display: none; }
.hm-today-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
/* خط الأثر */
.hm-trail { width: 240px; max-width: 70%; height: 24px; overflow: visible; }
.hm-trail .t-base { stroke: var(--trail); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; fill: none; }
.hm-trail .t-draw { stroke: var(--primary); stroke-width: 3; stroke-linecap: round; fill: none; stroke-dasharray: 224; stroke-dashoffset: 0; }
.hm-trail .t-dot { fill: var(--accent); transform: translateX(-224px); }
@media (prefers-reduced-motion: no-preference) {
  .hm-trail .t-draw { animation: trailDraw 1.6s cubic-bezier(.6,.1,.3,1) .3s both; }
  .hm-trail .t-dot { animation: trailDot 1.6s cubic-bezier(.6,.1,.3,1) .3s both; }
}
@keyframes trailDraw { from { stroke-dashoffset: 224; } to { stroke-dashoffset: 0; } }
@keyframes trailDot { from { transform: translateX(0); } to { transform: translateX(-224px); } }
[dir="ltr"] .hm-trail { transform: scaleX(-1); }
.hm-svc-head .hm-trail { margin: -.2rem auto .4rem; display: block; }
/* إطار الكمبيوتر والجوال */
.hm-devices { position: relative; padding: 0 0 2.4rem 3.2rem; }
.hm-devices.solo { padding: 0; max-width: 980px; margin: 1.6rem auto 0; }
.hm-laptop { border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(14,60,56,.18), 0 2px 6px rgba(14,60,56,.08); }
.hm-laptop-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); direction: ltr; }
.hm-laptop-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.hm-laptop-bar i:first-child { background: #e8695f; } .hm-laptop-bar i:nth-child(2) { background: #e9b949; } .hm-laptop-bar i:nth-child(3) { background: #5dbb6b; }
.hm-laptop img { display: block; width: 100%; height: auto; }
.hm-phone2 { position: absolute; inset-inline-start: 0; bottom: 0; width: 30%; max-width: 190px; border: 7px solid #12201f; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.hm-phone2 img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 600; object-fit: cover; object-position: top; }
.hm-gw-title { text-align: center; margin-top: 2.4rem; }
.hm-gw-title h2 { margin: 0 0 .2rem; font-size: 1.7rem; }
.hm-gw-title p { margin: 0; }
@media (max-width: 900px) {
  .hm-hero2 { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .hm-hero2 h1 { font-size: 2.2rem; }
  .hm-devices { padding: 0 0 1.6rem 2rem; }
}
.hm-gw::before { -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 40%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 55% 50% at 50% 40%, #000 25%, transparent 78%); }
@media (max-width: 640px) { .hm-why span { font-size: .78rem; padding: .3rem .7rem; } }

/* ───────── لوحة «كل الخدمات» والتثبيت ⭐ ───────── */
body.as-open { overflow: hidden; }
.as-ov { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, #0b1413 45%, transparent); backdrop-filter: blur(3px); display: grid; place-items: start center; padding: max(4vh, env(safe-area-inset-top, 0px)) 16px 16px; overflow-y: auto; }
.as-box { width: min(1040px, 100%); background: var(--bg); border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.3); padding: 1.1rem 1.2rem 1.4rem; }
.as-head { display: flex; gap: .5rem; align-items: center; position: sticky; top: 0; background: var(--bg); padding-bottom: .5rem; z-index: 1; }
.as-head .i { font-size: 1.05rem; padding: .8rem 1rem; border-radius: 14px; border: 2px solid var(--primary); }
.as-tip { margin: .1rem 0 .9rem; }
.as-tip kbd { font-family: inherit; font-size: .72rem; padding: .05rem .4rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); }
.as-cols { columns: 3 260px; column-gap: 1.2rem; }
.as-grp { break-inside: avoid; margin-bottom: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .7rem .7rem .5rem; }
.as-grp h3 { font-size: .85rem; color: var(--muted); margin: .1rem .3rem .5rem; }
.as-tile { display: flex; align-items: center; gap: .2rem; border-radius: 10px; }
.as-tile:hover { background: var(--surface-2); }
.as-tile a { flex: 1; display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; color: var(--text); font-weight: 500; min-width: 0; }
.as-tile a .hb-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--primary-soft); display: inline-grid; place-items: center; flex: none; }
.as-tile a .hb-ic .aic { width: 1.15rem; height: 1.15rem; }
.as-tile.is-locked a { opacity: .6; }
.as-pin { border: 0; background: none; font-size: 1.15rem; line-height: 1; color: var(--muted); cursor: pointer; padding: .35rem .45rem; border-radius: 8px; }
.as-pin:hover { background: var(--accent-soft); color: var(--accent); }
.as-pin.on { color: var(--accent); }
.as-none { text-align: center; padding: 1rem 0; }
@media (max-width: 640px) { .as-ov { padding: 0; } .as-box { border-radius: 0; min-height: 100%; border: 0; } }
.as-tile[hidden], .as-grp[hidden], .as-none[hidden] { display: none; }
@media (hover: none) { .as-tip kbd, .as-tip .kb { display: none; } }

/* ───────── القائمة الجانبية لإدارة المدرسة: بطاقة المستخدم، بحث، أقسام تنطوي ───────── */
.sb-user { display: flex; align-items: center; gap: .6rem; margin: .2rem .4rem .7rem; padding: .6rem .7rem; border-radius: 14px; background: var(--surface-2); color: var(--text); }
.sb-user:hover { background: var(--primary-soft); }
.sb-av { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 800; font-family: var(--font-display); flex: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }
.sb-who { display: grid; min-width: 0; line-height: 1.35; }
.sb-who b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-who small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-search { display: block; margin: 0 .4rem .6rem; }
.sb-search .i { padding: .5rem .8rem; border-radius: 10px; font-size: .88rem; background: var(--surface); }
.sb-nav a[hidden], .sb-sec[hidden], .sb-sec-b[hidden], .sb-none[hidden] { display: none; }
.sb-sec { margin-top: .25rem; }
.sb-sec-h { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; text-align: start; }
.sb-sec-h:hover { background: var(--surface-2); }
.sb-sec-h .ic { color: var(--primary); }
.sb-sec-h .nav-l { flex: 1; }
.sb-chev { width: 8px; height: 8px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; margin-inline-end: .2rem; }
.sb-sec-h[aria-expanded="false"] .sb-chev { transform: rotate(135deg); }
[dir="ltr"] .sb-sec-h[aria-expanded="false"] .sb-chev { transform: rotate(-45deg); }
.sb-sec-h[aria-expanded="true"] { color: var(--primary); }
.sb-sec-b { margin: .1rem 0 .3rem; padding-inline-start: .9rem; border-inline-start: 2px dashed var(--trail); margin-inline-start: 1.35rem; }
.sb-sec-b a { font-size: .9rem; padding: .45rem .6rem; }
.sb-pins .grp { color: var(--accent); }
.sb-foot { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.sb-kbd { margin-inline-start: auto; font-size: .66rem; font-family: inherit; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 .35rem; }
@media (hover: none) { .sb-kbd { display: none; } }
.sb-none { padding: .4rem .8rem; margin: 0; }
.sb-chev { border-inline-end: 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.sb-sec-h[aria-expanded="false"] .sb-chev { transform: rotate(135deg); }
[dir="ltr"] .sb-sec-h[aria-expanded="false"] .sb-chev { transform: rotate(-45deg); }
.sb-sec-h[aria-expanded="true"] .sb-chev { border-color: var(--primary); }

/* القائمة الجانبية الموحدة في التقويم الذاتي ولوحة الأدمن */
.side .nav .sb-miss { display: none !important; }
.grp-wrap.sb-force.closed .grp-items { display: block !important; }
.sb-app .grp-tg, .sb-adm .grp-t { width: 100%; display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; margin-top: .25rem; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: 0; cursor: pointer; text-align: start; }
.sb-app .grp-tg:hover, .sb-adm .grp-t:hover { background: var(--surface-2); }
.sb-app .grp-tg[aria-expanded="true"], .sb-adm .grp-t[aria-expanded="true"] { color: var(--primary); }
.sb-adm .grp-t .ic { color: var(--primary); width: 1.4em; display: inline-grid; place-items: center; }
.sb-adm .grp-t .nav-l { flex: 1; }
.sb-app .grp-tg > span:first-child { flex: 1; display: flex; align-items: center; gap: .4rem; }
.sb-app a[data-gm] { margin-inline-start: 1.35rem; padding-inline-start: .9rem; border-inline-start: 2px dashed var(--trail); border-radius: 0 10px 10px 0; font-size: .9rem; }
[dir="ltr"] .sb-app a[data-gm] { border-radius: 10px 0 0 10px; }
.sb-adm .grp-items { margin-inline-start: 1.35rem; padding-inline-start: .55rem; border-inline-start: 2px dashed var(--trail); }
.sb-adm .grp-items a { font-size: .9rem; }

/* ───────── لوحة الأدمن: النظرة العامة بالأولوية ───────── */
.adm-hello { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1.1rem 1.3rem; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--p-eval) 10%, var(--surface)), color-mix(in srgb, var(--accent) 8%, var(--surface))); border: 1px solid var(--line); }
.adm-hello h2 { margin: 0; font-size: 1.35rem; }
.adm-hello p { margin: .15rem 0 0; }
.kpi-top { margin-bottom: 1rem; }
.kpi-top .card.stat { position: relative; overflow: hidden; border-top: 3px solid var(--p-eval); }
.kpi-top .card.stat:nth-child(2) { border-top-color: var(--ok); }
.kpi-top .card.stat:nth-child(3) { border-top-color: var(--accent); }
.kpi-top .card.stat:nth-child(4) { border-top-color: var(--p-mgmt); }
.adm-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.adm-split > .card { margin: 0 !important; }
.adm-split .pl-wrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 980px) { .adm-split { grid-template-columns: minmax(0, 1fr); } }
.adm-more { margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.adm-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 1rem 1.2rem; font-weight: 700; }
.adm-more > summary::-webkit-details-marker { display: none; }
.adm-more > summary::after { content: "＋"; margin-inline-start: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; transition: transform .2s; }
.adm-more[open] > summary::after { transform: rotate(45deg); }
.adm-more[open] > summary { border-bottom: 1px solid var(--line); }
.adm-more > div, .adm-more > .grid2, .adm-more > .grid3 { padding: 0 1rem 1rem; }
.attn-more { margin: .2rem 0 .4rem; }
.attn-more > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--primary); padding: .35rem .6rem; border-radius: 8px; width: fit-content; list-style: none; }
.attn-more > summary::-webkit-details-marker { display: none; }
.attn-more > summary:hover { background: var(--primary-soft); }
.attn-more[open] > summary { margin-bottom: .3rem; }
.feed { max-height: 420px; overflow-y: auto; }

/* صفحة المدرسة في الأدمن: تبويبات */
.sp-tabs { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .35rem; margin-bottom: 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.sp-tab { font: inherit; font-weight: 600; font-size: .9rem; white-space: nowrap; border: 0; background: none; color: var(--muted); padding: .5rem 1rem; border-radius: 10px; cursor: pointer; }
.sp-tab:hover { color: var(--primary); }
.sp-tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); }
.sp-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.sp-body > .stack { display: contents; }
.sp-body > .stack > * + * { margin-top: 0; }
.sp-body .card + .card { margin-top: 0; }
.sp-body [data-tab][hidden] { display: none !important; }
.sp-body [data-tab="team"], .sp-body [data-tab="act"] { grid-column: 1 / -1; }
.sp-u[hidden] { display: none !important; }
@media (max-width: 900px) { .sp-body { grid-template-columns: minmax(0, 1fr); } }
/* صفحة المدرسة: أعمدة تتراص فيها البطاقات بدون فراغات */
.sp-body { display: block; columns: 2 420px; column-gap: 1rem; }
.sp-body > .stack { display: contents; }
.sp-body .card, .sp-body > .card { break-inside: avoid; margin: 0 0 1rem !important; display: block; width: 100%; }
.sp-body [data-tab="team"], .sp-body [data-tab="act"] { column-span: all; }
@media (max-width: 900px) { .sp-body { columns: 1; } }
.acct-req { border-color: color-mix(in srgb, var(--danger) 25%, var(--line)); }

/* أي مجموعة بطاقات جنب بعض (كلها بطاقات، وما هي بطاقات أرقام): أعمدة تتراص فيها البطاقات بدون فراغات */
.grid2:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(.keep-grid),
.grid3:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(.feats-grid):not(.keep-grid) { display: block; column-gap: 1rem; }
.grid2:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(.keep-grid) { columns: 2 340px; }
.grid3:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(.feats-grid):not(.keep-grid) { columns: 3 260px; }
:is(.grid2, .grid3):has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(.feats-grid):not(.keep-grid) > .card { break-inside: avoid; display: block; width: 100%; margin: 0 0 1rem !important; }
.adm-split { align-items: start; }
/* بطاقتين بس جنب بعض: نفس الطول بدل الأعمدة */
.grid2:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(:has(> .card:nth-child(3))):not(.keep-grid),
.grid3:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(:has(> .card:nth-child(4))):not(.feats-grid):not(.keep-grid) { display: grid; columns: auto; align-items: stretch !important; }
.grid2:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(:has(> .card:nth-child(3))):not(.keep-grid) > .card,
.grid3:has(> .card):not(:has(> :not(.card))):not(:has(> .stat)):not(:has(> .card:nth-child(4))):not(.feats-grid):not(.keep-grid) > .card { margin: 0 !important; height: 100%; }
.adm-split { align-items: stretch; }
.adm-split > .card { height: 100%; }

/* صفحة التسجيل: «خطتك جاهزة» */
.reg-plan { display: grid; gap: .7rem; margin: 0 0 1.1rem; padding: 1rem 1.1rem; border-radius: 16px; border: 1.5px solid var(--primary); background: linear-gradient(180deg, var(--primary-soft), var(--surface) 120px); }
.reg-plan[hidden], .reg-plan.reg-plan-off, .reg-plan.reg-plan-mg { display: none; }
.reg-plan-h { display: flex; gap: .6rem; align-items: flex-start; }
.reg-plan-h .hm-dot { margin-top: .4rem; }
.reg-plan-h b { display: block; font-size: 1.05rem; color: var(--primary); }
.reg-plan-h small { color: var(--muted); }
.reg-plan .hm-count { background: var(--surface); }
.reg-plan-act { gap: .5rem; flex-wrap: wrap; align-items: center; }
.reg-plan-act .i { width: auto; max-width: 190px; padding: .35rem .6rem; }

/* ───────── لوحة المدير: نبض المدرسة ومهام اليوم ───────── */
.pl-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 1.3rem 1.4rem 1.2rem; margin-bottom: 1rem; background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); border: 1px solid var(--line); }
.pl-hero::after { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 2px dashed var(--trail); opacity: .7; pointer-events: none; }
.pl-date { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.pl-beat { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); animation: plBeat 2.4s ease-out infinite; }
.t-warn .pl-beat { background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.t-calm .pl-beat, .t-set .pl-beat { background: var(--primary); animation: none; }
@keyframes plBeat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .pl-beat { animation: none; } }
.pl-lead { margin: .55rem 0 .2rem; font-size: .9rem; color: var(--muted); }
.pl-lead b { color: var(--primary); }
.t-warn .pl-lead b { color: var(--warn); }
.pl-line { position: relative; z-index: 1; margin: 0; font-family: var(--font-display, inherit); font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.75; font-weight: 700; color: var(--text); max-width: 60ch; text-wrap: pretty; }
.pl-top { position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; padding: .7rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); }
.pl-top-k { font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: .15rem .55rem; border-radius: 99px; }
.pl-top b { flex: 1; min-width: 180px; }
.pl-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; margin-bottom: 1rem; align-items: start; }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr; } }
.pl-grid > .card { margin: 0; }
.pl-tasks h3, .pl-week h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; }
.pl-tasks h3 .aic, .pl-week h3 .aic { width: 20px; height: 20px; color: var(--primary); }
.pl-week h3 small { margin-inline-start: auto; font-weight: 400; font-size: .78rem; color: var(--muted); }
.pl-n { margin-inline-start: auto; min-width: 1.8rem; text-align: center; padding: .1rem .5rem; border-radius: 99px; background: var(--primary); color: var(--on-primary); font-size: .85rem; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pl-task { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .7rem; align-items: center; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: opacity .2s, transform .2s; }
.pl-task.gone { opacity: 0; transform: translateX(-12px); }
.pl-grp { margin-top: .35rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.pl-grp:first-child { margin-top: 0; }
.pl-dot { width: 10px; height: 10px; border-radius: 50%; align-self: start; margin-top: .5rem; background: var(--trail); border: 2px solid var(--primary); }
.pl-task.p1 .pl-dot { background: var(--accent); border-color: var(--accent); }
.pl-tx b { display: block; line-height: 1.5; }
.pl-tx small { color: var(--muted); }
.pl-act { display: flex; flex-wrap: nowrap; gap: .25rem; }
.pl-act .btn.ghost { padding-inline: .45rem; }
.pl-cnt { display: inline-block; min-width: 1.5rem; text-align: center; margin-inline-start: .3rem; padding: 0 .4rem; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-size: .8rem; }
.pl-task.p1 .pl-cnt { background: var(--accent-soft); color: var(--warn); }
@media (max-width: 1180px) { .pl-task { grid-template-columns: auto 1fr; } .pl-act { grid-column: 2; flex-wrap: wrap; margin-top: .3rem; } }
.pl-act .btn { display: inline-flex; align-items: center; gap: .3rem; }
.pl-act .aic { width: 15px; height: 15px; }
.pl-empty { margin: .4rem 0 0; }
.pl-reset { margin-top: .7rem; }
.pl-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pl-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; padding: .6rem .7rem; border-radius: 12px; background: var(--surface-2); }
.pl-stat .aic { grid-row: span 2; width: 20px; height: 20px; color: var(--primary); }
.pl-stat span { font-size: .8rem; color: var(--muted); }
.pl-stat b { font-size: 1.15rem; }
.pl-delta { grid-column: 2; font-size: .75rem; font-weight: 700; }
.pl-delta.up { color: var(--ok); } .pl-delta.down { color: var(--danger); }
.pl-ev { display: grid; gap: .35rem; margin-top: .8rem; padding: .8rem; border-radius: 12px; border: 1px dashed var(--trail); }
.pl-meter { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pl-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.pl-att { margin-top: .8rem; }
.pl-att ul { margin: .3rem 0 0; padding-inline-start: 1.1rem; font-size: .9rem; }
.pl-att li::marker { color: var(--accent); }
.pl-att p { margin: .3rem 0 0; }
.pl-sec { margin: .4rem 0 .7rem; font-size: 1rem; color: var(--muted); }
.td-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .4rem .3rem .7rem; border-radius: 99px; background: var(--accent-soft); color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.td-chip b { min-width: 1.5rem; text-align: center; border-radius: 99px; padding: .05rem .4rem; background: var(--accent); color: var(--on-accent); }
.td-chip[hidden] { display: none; }
@media (max-width: 600px) { .td-chip-l { display: none; } .pl-hero { padding: 1rem; } .pl-stat { padding: .5rem .6rem; } .pl-stat b { font-size: 1rem; } }

/* ───────── ملف المدرسة للزيارة ───────── */
.vz { display: grid; gap: 1rem; }
.vz-head { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.4rem; align-items: center; padding: 1.3rem 1.4rem; border-radius: 18px; background: linear-gradient(135deg, var(--primary-soft), var(--surface) 75%); border: 1px solid var(--line); }
@media (max-width: 900px) { .vz-head { grid-template-columns: 1fr; } }
.vz-kicker { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: .15rem .6rem; border-radius: 99px; }
.vz-id h2 { margin: .45rem 0 .2rem; font-family: var(--font-display, inherit); font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.vz-id p { margin: 0; }
.vz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 600px) { .vz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vz-kpi { display: grid; align-content: center; gap: .1rem; min-width: 7.5rem; padding: .7rem .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.vz-kpi b { font-size: 1.45rem; line-height: 1.2; color: var(--primary); }
.vz-kpi span { font-size: .8rem; color: var(--muted); }
.vz-kpi small { font-size: .72rem; color: var(--muted); }
.vz-count { background: var(--primary); border-color: var(--primary); }
.vz-count b, .vz-count span, .vz-count small { color: var(--on-primary); }
.vz-count small { opacity: .85; }
.vz-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.vz-tools .btn { display: inline-flex; align-items: center; gap: .4rem; }
.vz-tools .aic, .vz-ai-bar .aic { width: 17px; height: 17px; }
.vz-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.vz-tabs button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .7rem .8rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.vz-tabs button b { font-size: .9rem; }
.vz-tabs button small { color: var(--muted); }
.vz-tabs button.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 -3px 0 var(--primary); }
.vz-tabs button.on small { color: var(--primary); font-weight: 700; }
.vz-dom { display: grid; gap: .9rem; }
.vz-dom-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vz-dom-h h3 { margin: 0; font-size: 1.2rem; }
.vz-dom-h p { margin: .2rem 0 0; }
.vz-dom-p { font-size: 1.6rem; color: var(--primary); }
.vz-review { display: grid; gap: .6rem; padding: .8rem; border-radius: 14px; border: 1px dashed var(--trail); background: var(--surface); }
.vz-filters button b { margin-inline-start: .2rem; font-weight: 700; }
.vz-ai-bar { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .88rem; }
.vz-ai-bar > span { flex: 1; min-width: 200px; color: var(--muted); }
.vz-ai-bar .aic { color: var(--accent); }
.vz-std { display: grid; gap: .6rem; }
.vz-std-h { display: flex; align-items: center; gap: .5rem; padding-bottom: .35rem; border-bottom: 2px solid var(--trail); }
.vz-std-h h4 { margin: 0; flex: 1; font-size: 1rem; }
.vz-code { font-size: .75rem; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: .1rem .45rem; border-radius: 6px; direction: ltr; white-space: nowrap; }
.vz-ind { display: grid; gap: .55rem; padding: .85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vz-ind header { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: start; }
.vz-ind h4 { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.6; }
.vz-score { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem .15rem .2rem; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.vz-score b { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--c); color: #fff; }
.vz-note { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.7; }
.vz-evs { display: flex; flex-wrap: wrap; gap: .4rem; }
.vz-ev { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .3rem .6rem; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: .83rem; text-decoration: none; }
.vz-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
a.vz-ev:hover { background: var(--primary-soft); color: var(--primary); }
.vz-ev .aic { width: 15px; height: 15px; flex: none; color: var(--primary); }
.vz-rev { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding-top: .5rem; border-top: 1px dashed var(--line); }
.vz-flag { font-size: .76rem; font-weight: 700; color: var(--warn); background: var(--accent-soft); padding: .12rem .55rem; border-radius: 99px; }
.vz-ai { flex-basis: 100%; display: grid; grid-template-columns: auto auto 1fr; gap: .2rem .45rem; align-items: center; font-size: .85rem; padding: .5rem .65rem; border-radius: 10px; background: var(--surface-2); }
.vz-ai .aic { width: 16px; height: 16px; color: var(--accent); }
.vz-ai small { grid-column: 1 / -1; color: var(--muted); }
.vz-ai.v-ok b { color: var(--ok); } .vz-ai.v-warn b { color: var(--warn); } .vz-ai.v-bad b { color: var(--danger); }
.vz-foot { text-align: center; margin: .4rem 0 0; }
.vz-ind[hidden], .vz-std[hidden] { display: none; }
/* وضع العرض: الملف لحاله على الشاشة */
body.vz-present .side, body.vz-present .topbar, body.vz-present .bottom-nav, body.vz-present .banner, body.vz-present .wa-float { display: none !important; }
body.vz-present .shell { display: block !important; }
body.vz-present .main { margin: 0 !important; width: 100% !important; max-width: none !important; }
body.vz-present .content { max-width: 1200px; margin-inline: auto; padding: 1.2rem; }
body.vz-present .vz-tools > :not(.vz-exit) { display: none; }
body.vz-present .vz { font-size: 1.05rem; }
/* الصفحة العامة للجنة */
.vz-pubwrap { min-height: 100vh; background: var(--bg); }
.vz-pubbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.vz-pubbar .brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text); text-decoration: none; }
.vz-pubbar .brand img { width: 32px; height: 32px; }
#vzPub { max-width: 1100px; margin: 0 auto; padding: 1.2rem 16px 2rem; }
.vz-gate { max-width: 460px; margin: 2rem auto; text-align: center; display: grid; gap: .6rem; }
.vz-gate .f { text-align: start; }
.vz-gate-ic .aic { width: 44px; height: 44px; color: var(--primary); }
.vz-gate h2 { margin: .2rem 0; }
/* روابط الاطلاع */
.vl-new { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; margin: .8rem 0 1rem; }
@media (max-width: 600px) { .vl-new { grid-template-columns: 1fr 1fr; } .vl-new #vlL { grid-column: 1 / -1; } }
.vl-list { display: grid; gap: .5rem; }
.vl-row { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; align-items: center; padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--line); }
.vl-row.off { opacity: .65; }
.vl-t b { display: block; }
.vl-t small { color: var(--muted); }
.vl-a { display: flex; gap: .3rem; flex-wrap: wrap; }
.vl-log { grid-column: 1 / -1; overflow-x: auto; }

/* ───────── الدفاتر المدرسية ───────── */
.rg-hero h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; }
.rg-hero h2 .aic { width: 24px; height: 24px; color: var(--primary); }
.rg-hero p { margin: 0 0 .9rem; max-width: 75ch; }
.rg-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.rg-range { display: flex; gap: .5rem; flex-wrap: wrap; }
.rg-range label { display: flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--muted); }
.rg-range .i { width: auto; padding: .35rem .5rem; }
.rg-report h3 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rg-report h3 .aic, .rg-report .btn .aic, .rg-head + * .aic { width: 18px; height: 18px; }
.rg-report h3 small { font-weight: 400; font-size: .8rem; }
.rg-paras { margin-top: .7rem; padding: .8rem 1rem; border-radius: 12px; background: var(--surface-2); border-inline-start: 4px solid var(--accent); }
.rg-paras p { margin: 0 0 .35rem; line-height: 1.9; }
.rg-gh { margin: 1.3rem 0 .6rem; font-size: 1.05rem; }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.rg-card { position: relative; display: grid; gap: .35rem; align-content: start; padding: .9rem 1rem 2.4rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.rg-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.rg-card-t { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.rg-card small { color: var(--muted); line-height: 1.6; }
.rg-n { position: absolute; inset-inline-start: 1rem; bottom: .7rem; font-size: 1.25rem; font-weight: 700; color: var(--primary); }
.rg-n i { font-style: normal; font-size: .75rem; font-weight: 400; color: var(--muted); margin-inline-start: .25rem; }
.rg-badge { flex: none; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; background: var(--accent-soft); color: var(--warn); white-space: nowrap; }
.rg-badge.auto { background: var(--primary-soft); color: var(--primary); }
.rg-add summary { cursor: pointer; list-style: none; }
.rg-add summary::-webkit-details-marker { display: none; }
.rg-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .2rem .7rem; margin: .8rem 0; }
.rg-tbl tr.man td { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.rg-src .aic { width: 14px; height: 14px; color: var(--muted); }
.rg-head + .rg-period { margin-top: .2rem; }

/* ───────── مسار التجهيز والإعداد بالمحادثة ───────── */
.su-card { padding-bottom: 1rem; }
.su-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.su-kicker, .su-tag { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: .12rem .55rem; border-radius: 99px; }
.su-head h3 { margin: .35rem 0 0; }
.su-count { font-size: 1.4rem; color: var(--primary); }
.hm-path.su-path { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: none; }
.hm-path.su-path::before { inset-inline: calc(50% / var(--n)); }
.hm-path.su-path::after { inset-inline-start: calc(50% / var(--n)); width: calc((100% - 100% / var(--n)) * var(--p, 0)); }
.su-path .hm-st { text-decoration: none; }
.su-path .hm-st b { font-size: .85rem; }
.su-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; padding: .9rem 1rem; border-radius: 14px; background: var(--surface-2); border-inline-start: 4px solid var(--accent); }
.su-next h4 { margin: .35rem 0 .15rem; }
.su-next p { margin: 0; max-width: 60ch; }
.su-act { display: flex; gap: .5rem; flex-wrap: wrap; }
.su-act .btn { display: inline-flex; align-items: center; gap: .35rem; }
.su-act .aic { width: 17px; height: 17px; }
.su-foot { margin: .7rem 0 0; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
  .hm-path.su-path { grid-template-columns: 1fr; padding-top: 0; gap: .1rem; border-inline-start: 3px dashed var(--trail); margin-inline-start: 14px; }
  .hm-path.su-path::before, .hm-path.su-path::after { display: none; }
  .su-path .hm-st { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; text-align: start; padding: .2rem 0; margin-inline-start: -21px; }
  .su-path .hm-st .m { width: 40px; height: 32px; }
  .su-path .hm-st.on .m::before { display: none; }
  .su-path .hm-st small { justify-self: end; }
}
.su-chat { display: grid; gap: .8rem; }
.su-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.su-tabs button { font: inherit; padding: .35rem .8rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.su-tabs button.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.su-log { display: grid; gap: .6rem; max-height: 58vh; overflow-y: auto; padding: .2rem; }
.su-b { display: flex; gap: .5rem; align-items: flex-start; }
.su-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); }
.su-av .aic { width: 17px; height: 17px; color: var(--accent); }
.su-bb { flex: 1; min-width: 0; padding: .7rem .9rem; border-radius: 4px 14px 14px 14px; background: var(--surface-2); }
[dir="rtl"] .su-bb { border-radius: 14px 4px 14px 14px; }
.su-bb p { margin: .2rem 0; line-height: 1.8; }
.su-in { display: grid; gap: .5rem; }
.su-in .btn, .su-ok .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.su-in .aic { width: 17px; height: 17px; }
.su-ok { gap: .5rem; flex-wrap: wrap; }
.su-tbl .i { padding: .3rem .45rem; min-width: 7rem; }
.su-tbl .i.su-miss { border-color: var(--accent); background: var(--accent-soft); }
.su-warn { color: var(--warn); margin: .4rem 0 0; }
.su-cls { display: grid; gap: .6rem; margin-top: .4rem; }
.su-cl { display: grid; gap: .35rem; padding: .6rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.su-cn { max-width: 10rem; font-weight: 700; }
.su-tbl .i[data-k="email"] { min-width: 14rem; }

/* جداول الأدمن الذكية */
.content table th.st-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.content table th.st-sort::after { content: "↕"; margin-inline-start: .3rem; font-size: .75em; opacity: .35; }
.content table th.st-sort[aria-sort="ascending"]::after { content: "▲"; opacity: .9; color: var(--primary); }
.content table th.st-sort[aria-sort="descending"]::after { content: "▼"; opacity: .9; color: var(--primary); }
.content table th.st-sort:hover, .content table th.st-sort:focus-visible { color: var(--primary); outline: none; }
.st-foot { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .7rem 0 .2rem; }
.st-foot:empty { display: none; }

/* رؤوس صفحات الأدمن: فاتحة بنفس هوية النظرة العامة */
.adm-shell .hero-card { background: linear-gradient(135deg, var(--primary-soft), var(--surface) 75%); color: var(--text); border: 1px solid var(--line); }
.adm-shell .hero-card h2, .adm-shell .hero-card h3 { color: var(--primary) !important; }
.adm-shell .hero-card .muted, .adm-shell .hero-card p { color: var(--muted) !important; }

/* ───────── عينة القالب الجديد للأدمن ───────── */
.lx { display: grid; gap: 1rem; }
.lx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lx-kick { font-size: .75rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: .12rem .55rem; border-radius: 99px; }
.lx-head h2 { margin: .35rem 0 .15rem; font-family: var(--font-display, inherit); font-size: 1.6rem; }
.lx-head p { margin: 0; color: var(--muted); }
.lx-head-a { display: flex; gap: .5rem; }
.lx-head-a .btn, .lx-d-a .btn { display: inline-flex; align-items: center; gap: .35rem; }
.lx-head-a .aic { width: 17px; height: 17px; }
.lx-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 900px) { .lx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .1rem .6rem; align-items: center; text-align: start; padding: .85rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.lx-kpi .aic { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.lx-kpi span { font-size: .8rem; color: var(--muted); }
.lx-kpi b { font-size: 1.5rem; line-height: 1.1; }
.lx-kpi:hover { transform: translateY(-1px); border-color: var(--primary); }
.lx-kpi.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.lx-kpi.sk, .lx-row.sk { min-height: 70px; background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: lxSk 1.2s linear infinite; border: 1px solid var(--line); border-radius: 16px; }
@keyframes lxSk { to { background-position: -200% 0; } }
.lx-now { padding: .9rem 1rem; border-radius: 16px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.lx-now-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.lx-now-h .aic { width: 20px; height: 20px; color: var(--warn); }
.lx-now-h small { color: var(--muted); }
.lx-now-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; }
.lx-now-c { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border-radius: 12px; background: var(--surface); }
.lx-now-c small { display: block; color: var(--muted); font-size: .78rem; }
.lx-now-a { display: flex; gap: .3rem; flex: none; }
.lx-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem; border-radius: 14px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); }
.lx-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: .4rem; padding: 0 .7rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.lx-search .aic { width: 17px; height: 17px; color: var(--muted); }
.lx-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; color: var(--text); padding: .55rem 0; }
.lx-sel { width: auto; }
.lx-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.lx-chip { font: inherit; font-size: .82rem; padding: .25rem .65rem; border-radius: 99px; border: 1px solid var(--primary); background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.lx-list { display: grid; gap: .45rem; }
.lx-row { display: grid; grid-template-columns: auto minmax(0, 2.2fr) minmax(0, 1.6fr) auto auto; gap: .9rem; align-items: center; padding: .7rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, box-shadow .15s; animation: lxIn .25s ease both; }
@keyframes lxIn { from { opacity: 0; transform: translateY(4px); } }
.lx-row:hover, .lx-row:focus-visible { border-color: var(--primary); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 10%, transparent); outline: none; }
.lx-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-family: var(--font-display, inherit); }
.lx-av.lg { width: 52px; height: 52px; font-size: 1.3rem; }
.lx-main { min-width: 0; }
.lx-main b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-main small, .lx-plan small { color: var(--muted); font-size: .8rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; padding: .1rem .55rem; border-radius: 99px; background: var(--surface-2); }
.lx-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lx-pill.s-paid { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.lx-pill.s-trial { color: var(--warn); background: var(--accent-soft); }
.lx-pill.s-exp, .lx-pill.s-off { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.lx-life { display: block; height: 4px; border-radius: 99px; background: var(--surface-2); margin-top: .3rem; overflow: hidden; max-width: 180px; }
.lx-life i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.lx-prog { position: relative; width: 44px; height: 44px; }
.lx-prog svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.lx-prog circle { fill: none; stroke-width: 3.4; }
.lx-prog .t { stroke: var(--surface-2); }
.lx-prog .v { stroke: var(--primary); stroke-linecap: round; }
.lx-prog b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; }
.lx-act { display: flex; gap: .25rem; opacity: .8; transition: opacity .15s; }
.lx-row:hover .lx-act, .lx-row:focus-within .lx-act { opacity: 1; }
@media (hover: none) { .lx-act { opacity: 1; } }
@media (max-width: 760px) { .lx-row { grid-template-columns: auto 1fr auto; } .lx-plan { grid-column: 2 / -1; } .lx-act { grid-column: 1 / -1; opacity: 1; } }
.lx-empty { text-align: center; color: var(--muted); padding: 2rem 0; }
.lx-more { display: flex; justify-content: center; align-items: center; gap: .6rem; }
.lx-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(440px, 100vw); background: var(--surface); box-shadow: 10px 0 30px rgba(0,0,0,.12); transform: translateX(-105%); transition: transform .25s ease; z-index: 60; overflow-y: auto; }
.lx-drawer.open { transform: none; }
.lx-scrim { position: fixed; inset: 0; background: rgba(10, 30, 28, .28); z-index: 59; }
.lx-d-in { padding: 1.2rem; display: grid; gap: 1rem; }
.lx-d-h { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; }
.lx-d-h h3 { margin: 0; }
.lx-d-h small { color: var(--muted); }
.lx-d-k { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lx-d-k > div { padding: .6rem .7rem; border-radius: 12px; background: var(--surface-2); display: grid; gap: .2rem; }
.lx-d-k span { font-size: .78rem; color: var(--muted); }
.lx-d-sec p { margin: .3rem 0 0; }
.lx-health { display: flex; gap: .8rem; align-items: center; margin-top: .4rem; }
.lx-health > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 800; }
.lx-health small { display: block; color: var(--muted); }
.lx-d-a { display: flex; gap: .5rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1rem; }
.lx-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; border-radius: 12px; background: #10302c; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: lxIn .2s ease both; }
.lx-toast button { font: inherit; font-weight: 700; color: #e0b45a; background: none; border: 0; cursor: pointer; }
.lx-bar .i.lx-sel { width: auto; min-width: 150px; flex: none; margin: 0; }
@media (max-width: 760px) { .lx-bar .lx-search { flex: 1 1 100%; } .lx-bar .i.lx-sel, .lx-bar select { flex: 1 1 calc(50% - .5rem); min-width: 0; width: auto; } }
.hm-one-plan-p .disc-tag { color: #fff; } .hm-one-plan-p .old-price { font-size: 1.1rem; }

.rg-ap { position: absolute; inset-inline-end: 1rem; bottom: .8rem; font-size: .72rem; font-weight: 700; color: var(--ok); }
.rg-arch { display: grid; gap: .4rem; }
.rg-arch-r { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; background: var(--surface-2); }
.rg-arch-r small { display: block; color: var(--muted); }

/* القالب الموحد: إضافات */
.lx-kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.lx-bulk[hidden] { display: none !important; }
@media (max-width: 900px) { .lx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-kpis > .lx-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.lx-row.has-sel { grid-template-columns: auto auto minmax(0, 2.2fr) minmax(0, 1.6fr) auto auto; }
.lx-cb { display: grid; place-items: center; padding: .2rem; cursor: pointer; }
.lx-cb input { width: 17px; height: 17px; accent-color: var(--primary); }
.lx-bulk { position: sticky; top: 64px; z-index: 3; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .55rem .7rem; border-radius: 12px; background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 25%, transparent); }
.lx-bulk .btn { background: rgba(255,255,255,.14); color: inherit; border-color: transparent; }
.lx-bulk .btn.danger { background: rgba(194,55,43,.35); }
.lx-all { display: flex; align-items: center; gap: .4rem; margin-inline-end: .5rem; cursor: pointer; }
.lx-all input { accent-color: #fff; }
.lx-d-top { display: flex; justify-content: flex-end; margin-bottom: -.6rem; }
.lx-now-more { margin-inline-start: auto; border: 0; background: none; color: var(--primary); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: .15rem .3rem; border-radius: 6px; }
.lx-now-more:hover { background: var(--primary-soft); }
.lx-now-c { cursor: pointer; }
.lx-row .pill.tiny { font-size: .66rem; padding: 0 .4rem; vertical-align: 2px; }
.lx-d-k .lx-pill { justify-self: start; }
@media (max-width: 760px) { .lx-row.has-sel { grid-template-columns: auto auto 1fr auto; } .lx-row.has-sel .lx-plan { grid-column: 3 / -1; } .lx-row.has-sel .lx-act { grid-column: 1 / -1; } .lx-bulk { top: 56px; } }
.lx-money { text-align: end; min-width: 6rem; } .lx-money b { display: block; color: var(--primary); } .lx-money small { color: var(--muted); font-size: .76rem; }
.lx-av.lx-id { font-size: .78rem; font-family: inherit; background: var(--surface-2); color: var(--muted); } .lx-plan .pill { font-size: .74rem; }
/* ترخيص ملفات المتجر */
.st-lic { border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem; background: color-mix(in srgb, var(--primary) 4%, var(--card)); font-size: .86rem; }
.st-lic summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: .4rem; color: var(--primary); }
.st-lic summary svg { width: 18px; height: 18px; }
.st-lic ol { margin: .55rem 0 .2rem; padding-inline-start: 1.2rem; display: grid; gap: .35rem; line-height: 1.7; color: var(--ink-2, var(--muted)); }
.st-agree { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; line-height: 1.7; padding: .55rem .7rem; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.st-agree input { margin-top: .35rem; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.st-agree.need { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, transparent); }
/* اتفاقية استخدام إدارة المدرسة */
.mt-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 16px; background: radial-gradient(1200px 500px at 50% -10%, color-mix(in srgb, var(--primary) 14%, transparent), transparent), var(--bg); }
.mt-card { width: 100%; max-width: 720px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 50px color-mix(in srgb, var(--primary) 12%, transparent); }
.mt-head { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 1.6rem 1.2rem; border-bottom: 1px solid var(--line); }
.mt-ic { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.mt-ic svg { width: 28px; height: 28px; }
.mt-head small { color: var(--accent, var(--primary)); font-weight: 700; }
.mt-head h1 { margin: .15rem 0 .3rem; font-size: 1.5rem; text-wrap: balance; }
.mt-head p { margin: 0; color: var(--muted); line-height: 1.7; }
.mt-list { list-style: none; counter-reset: mt; margin: 0; padding: 1.1rem 1.6rem; display: grid; gap: .85rem; max-height: 52vh; overflow: auto; }
.mt-list li { counter-increment: mt; display: grid; grid-template-columns: 30px 1fr; column-gap: .7rem; line-height: 1.8; }
.mt-list li::before { content: counter(mt); grid-row: span 2; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--primary); }
.mt-list b { font-size: .98rem; }
.mt-list span { color: var(--muted); font-size: .92rem; }
.mt-links { padding: 0 1.6rem; margin: 0 0 1rem; }
.mt-foot { padding: 1rem 1.6rem 1.4rem; background: color-mix(in srgb, var(--primary) 4%, var(--card)); border-top: 1px solid var(--line); display: grid; gap: .9rem; }
.mt-agree { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.7; cursor: pointer; font-weight: 600; }
.mt-agree input { margin-top: .3rem; width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.mt-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.mt-btns .btn.primary { flex: 1 1 220px; }
.mt-btns .btn.primary:disabled { opacity: .5; }
@media (max-width: 600px) { .mt-head { padding: 1.2rem 1rem 1rem; } .mt-list, .mt-links { padding-inline: 1rem; } .mt-foot { padding: 1rem; } .mt-list { max-height: none; } .mt-btns .btn { flex: 1 1 100%; } }
/* رأس موحد لصفحات الأدمن غير القوائم */
.lx-plain > .lx-head-top { margin-bottom: 1rem; }
.adm-shell .hero-card.lx-hero { background: none; border: 0; box-shadow: none; padding: 0 0 .4rem; margin-bottom: 1rem; }
.adm-shell .hero-card.lx-hero > .row > span[style*="font-size"]:first-child { display: none; }
.adm-shell .hero-card.lx-hero h2 { color: var(--text) !important; margin: .35rem 0 .15rem; font-family: var(--font-display, inherit); font-size: 1.6rem; }
.adm-shell .hero-card.lx-hero .lx-kick { display: inline-block; }
.lx-plain > .card, .lx-plain > div > .card { border-radius: 16px; }
.adm-shell .hero-card.lx-hero .btn { background: var(--primary); color: var(--on-primary, #fff); border-color: transparent; box-shadow: none; }
.adm-shell .hero-card.lx-hero .btn.ghost, .adm-shell .hero-card.lx-hero .btn:not(:first-of-type) { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.lx-d-list { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .3rem; }
.lx-d-list li { display: flex; justify-content: space-between; gap: .6rem; font-size: .9rem; padding: .35rem .5rem; border-radius: 8px; background: var(--surface-2); }
.lx-head-bare { justify-content: flex-end; margin-top: .4rem; }
/* تذييل الموقع: فاتح هادئ بهوية أثر (يتبع الوضع الليلي عبر المتغيرات) */
.site-foot { --fbg: color-mix(in srgb, var(--primary) 7%, var(--bg)); --ftx: var(--text); --fmu: var(--muted); --fln: color-mix(in srgb, var(--primary) 16%, transparent); background: var(--fbg); color: var(--ftx); border-top: 1px solid var(--fln); }
.sf-wave { background: var(--fbg); top: -47px; }
.sf-col h3, .sf-col h4, .sf-brand b, .sf-logo, .sf-trust b, .sf-help, .sf-ver { color: var(--primary); }
.sf-col a { color: var(--ftx); opacity: .85; }
.sf-col a:hover { color: var(--primary); opacity: 1; }
.sf-brand img { background: var(--card); box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 14%, transparent); }
.sf-cr { background: var(--card); border-color: var(--fln); }
.sf-cr b { color: var(--primary); }
.sf-cr-ic, .sf-shield { color: var(--primary); }
.sf-ci, .sf-social a { border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); background: var(--card); }
.sf-social a:hover, .sf-c:hover .sf-ci { background: var(--primary); color: var(--on-primary, #fff); }
.sf-c { color: var(--ftx); }
.sf-bottom { background: color-mix(in srgb, var(--primary) 11%, var(--bg)); color: var(--text); }
.sf-pay span { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.site-foot .ver-pill { background: var(--card); border-color: var(--fln); color: var(--ftx); }
/* واتساب المدرسة ورسائل أولياء الأمور */
.wa-card .wa-h { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.wa-card .wa-h h3 { margin: 0 0 .2rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.wa-card .wa-h p { margin: 0; }
.wa-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--primary-soft); }
.wa-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.wa-way { display: grid; gap: .25rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 12px; }
.wa-way.on { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: color-mix(in srgb, var(--primary) 5%, var(--card)); }
.wa-sub { margin: .2rem 0 .6rem; font-size: .95rem; }
.wa-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.wa-step { display: grid; grid-template-columns: 32px 1fr; gap: .7rem; align-items: start; }
.wa-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--primary-soft); color: var(--primary); }
.wa-step.done .wa-n { background: var(--primary); color: var(--on-primary, #fff); }
.wa-step code { font-size: .82rem; }
.wa-code { font-family: inherit; letter-spacing: 0; display: inline-block; margin: .3rem 0; padding: .25rem .5rem; border-radius: 8px; background: var(--surface-2); }
.wa-help { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.gm-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding-bottom: .7rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.gm-all { display: flex; align-items: center; gap: .45rem; font-weight: 700; cursor: pointer; }
.gm-all input, .gm-pick { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.gm-acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.ci-row .gm-pick, .ci-row .gm-pick-x { margin-inline-end: .6rem; }
.gm-pick-x { width: 18px; flex: none; }
.gm-seq { position: sticky; top: 64px; z-index: 4; display: grid; gap: .6rem; padding: .9rem 1rem; margin-bottom: .8rem; border-radius: 14px; background: var(--card); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 14%, transparent); }
.gm-seq-c { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.gm-seq-c b { font-size: 1.1rem; }
.gm-seq-k { font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.gm-seq-p { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.gm-seq-p i { display: block; height: 100%; background: var(--primary); transition: width .25s; }
.gm-seq-a { display: flex; gap: .4rem; flex-wrap: wrap; }
.gm-seq-a .btn.primary { flex: 1 1 200px; }
.gm-seq-done { font-weight: 800; color: var(--primary); }
@media (max-width: 760px) { .gm-seq { top: 56px; } .gm-acts, .gm-acts .btn { width: 100%; } }
.aw-compose { margin: .2rem 0; }
.aw-vars { font-size: .85rem; color: var(--muted); padding-top: .55rem; line-height: 1.9; }
.aw-vars code { background: var(--surface-2); padding: .05rem .35rem; border-radius: 6px; }
.aw-prev { white-space: normal; line-height: 1.8; background: color-mix(in srgb, #25d366 8%, var(--card)); border: 1px solid color-mix(in srgb, #25d366 25%, transparent); border-radius: 12px; padding: .7rem .85rem; }
.gm-seq[hidden], .aw-compose [hidden] { display: none !important; }
.pill.prelim { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); vertical-align: middle; font-weight: 600; }
.adm-shell .pill.prelim, .lx .pill.prelim { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
/* المتجر: طي الأقسام وفتحها */
.st-fold { display: flex; gap: .4rem; flex-wrap: wrap; }
button.st-cat-h { width: 100%; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; padding: .35rem .2rem; border-radius: 12px; }
button.st-cat-h:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
/* «النماذج والملفات»: خمسة أبواب في الصفحة الأولى، وصفحة لكل باب */
.st-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.st-hub-q { max-width: 1040px; width: 100%; margin: 0 auto; }
.st-doors { max-width: 1040px; width: 100%; margin: 0 auto; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.st-door { display: flex; align-items: center; gap: .8rem; min-height: 72px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; transition: border-color .15s ease-out, background-color .15s ease-out; }
.st-door:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.st-door:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-door-t { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.st-door-t b { font-size: 1.02rem; }
.st-door-t .small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.section.st-hub { padding-top: 1.25rem; }
.ui3 .wrap > section.section.st-hub:not(.pc-head):not(.art-head) { padding-block-start: 1.25rem; }
.st-door .pill { flex: none; }
.st-door-chev, .st-back-ar { width: 8px; height: 8px; border: solid var(--primary); border-width: 0 0 2px 2px; flex: none; }
.st-door-chev { transform: rotate(45deg); }
.st-back-ar { transform: rotate(-135deg); }
[dir="ltr"] .st-door-chev { transform: rotate(-135deg); }
[dir="ltr"] .st-back-ar { transform: rotate(45deg); }
.st-results { max-width: 1040px; width: 100%; margin: 0 auto; }
.st-sec > .st-back { display: flex; align-items: center; gap: .5rem; width: 100%; max-width: 1040px; min-height: 44px; margin: 0 auto .4rem; color: var(--primary); text-decoration: none; font-weight: 600; }
.st-other { max-width: 1040px; margin: 0 auto 2rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding-inline: 1rem; }
.st-other a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-size: .92rem; }
.st-other a:hover { border-color: var(--primary); color: var(--primary); }
.st-other .aic { width: 1.05rem; height: 1.05rem; color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .st-door { transition: none; } }
/* عنوان قسم المتجر: بحجمه حتى داخل أقسام الصفحات العامة، والعنوان يلتف داخله والعدد والسهم يبقون في نفس السطر */
.ui3 .wrap .section .st-cat-h h2 { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }
button.st-cat-h { flex-wrap: nowrap; }
button.st-cat-h h2 { flex: 1; min-width: 0; }
button.st-cat-h .small { white-space: nowrap; }
button.st-cat-h:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.st-cat-chev { margin-inline-start: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); flex: none; }
.st-cat-chev::before { content: ""; width: 7px; height: 7px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s; }
.st-cat.closed .st-cat-chev::before { transform: rotate(135deg) translate(-1px, -1px); }
.st-cat.closed .st-cat-b { display: none; }
.st-cat.closed { padding-bottom: .2rem; }
.st-cat.closed { margin-bottom: .6rem; }
details.sa-cat > summary { cursor: pointer; list-style: none; }
details.sa-cat > summary::-webkit-details-marker { display: none; }
details.sa-cat > summary::after { content: ""; width: 7px; height: 7px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(135deg); margin-inline-start: .6rem; transition: transform .2s; }
details.sa-cat[open] > summary::after { transform: rotate(45deg); }
details.sa-cat:not([open]) { padding-block: .7rem; }
details.sa-cat:not([open]) > summary { margin-bottom: 0; }
/* توقيع المفوّض */
.sig-box { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--line); display: grid; gap: .5rem; }
.sig-box p { margin: 0; }
.sig-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: stretch; }
#sgC { width: 100%; max-width: 520px; aspect-ratio: 520 / 160; height: auto; border: 1.5px dashed color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.sig-cur { display: grid; align-content: center; gap: .3rem; min-width: 160px; }
.sig-cur img { max-width: 200px; max-height: 70px; background: #fff; border-radius: 8px; border: 1px solid var(--line); padding: 4px; }

/* سجل نشاطي */
.ac-scope { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .8rem; }
.ac-opt { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-align: start; cursor: pointer; font: inherit; }
.ac-opt.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.ac-ic { font-size: 1.4rem; }
.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: .6rem; margin: .8rem 0; }
.ac-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem .5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; }
.ac-stat b { font-size: 1.5rem; }
.ac-stat.on, .ac-stat:hover { border-color: var(--primary); }
.ac-th { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; }
.ac-th-ic { display: grid; place-items: center; font-size: 1.5rem; background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.ac-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: .6rem; margin: 1rem 0 .4rem; }
.ac-info div { padding: .55rem .7rem; border-radius: 10px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.ac-info dt { font-size: .78rem; color: var(--muted); } .ac-info dd { margin: .1rem 0 0; font-weight: 600; }
.ac-h { margin: 1rem 0 .25rem; } .ac-p { margin: 0; line-height: 1.8; }
.ac-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: .6rem; margin-top: 1rem; }
.ac-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block; }
.ac-keep { display: flex; gap: .5rem; flex-wrap: wrap; } .ac-keep label { position: relative; } .ac-keep input { position: absolute; top: 4px; inset-inline-start: 4px; }
.ac-keep img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; }
.tabs a { text-decoration: none; }

/* مركز التقارير */
.rp-sum { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: .6rem; }
.rp-card { position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; }
.rp-card:hover { border-color: var(--primary); }
.rp-card.is-locked { opacity: .6; }
.rp-ic { font-size: 1.35rem; line-height: 1.2; }
.rp-t { display: flex; flex-direction: column; gap: .15rem; }
.rp-frame { width: 100%; height: min(70vh, 720px); border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* بوابة ولي الأمر: مستوى الطالب وخيارات المشاركة */
.pp-perf { display: flex; flex-direction: column; gap: .5rem; }
.pp-meter .ci-prog { margin: .25rem 0 0; }
.pp-share { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; padding: .7rem .8rem; border: 1px dashed var(--line); border-radius: 12px; }

/* زر المساعدة العائم */
.hf { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
.hf-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem .45rem .55rem; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line)); border-radius: 999px; background: var(--surface); color: var(--primary); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; box-shadow: 0 6px 18px rgba(15, 60, 55, .14); }
.hf-btn:hover { border-color: var(--primary); }
.hf-q { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .9rem; }
.hf-panel { display: none; width: min(320px, calc(100vw - 32px)); padding: .8rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 14px 40px rgba(15, 60, 55, .18); }
.hf.open .hf-panel { display: block; }
.hf-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.hf-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; }
.hf-page { margin: .15rem 0 .5rem; }
.hf-list { display: flex; flex-direction: column; gap: .35rem; }
.hf-item { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem; border-radius: 12px; color: inherit; text-decoration: none; border: 1px solid transparent; }
.hf-item:hover { border-color: var(--line); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.hf-item > span:last-child { display: flex; flex-direction: column; gap: .1rem; }
.hf-ic { font-size: 1.2rem; line-height: 1.3; }
.hf-hide { margin-top: .5rem; border: 0; background: none; color: var(--muted); cursor: pointer; text-decoration: underline; padding: 0; text-align: start; }
@media (max-width: 899px) { .hf-l { display: none; } .hf-btn { padding: .4rem; } body.bn-on .hf { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media print { .hf { display: none !important; } }

/* المراسلات: قائمة المحادثات والمحادثة */
.cv-wrap { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: .8rem; align-items: start; }
.cv-list { display: flex; flex-direction: column; gap: .4rem; max-height: 72vh; overflow-y: auto; }
.cv-item { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.cv-item:hover, .cv-item.on { border-color: var(--primary); }
.cv-item.unread { border-inline-start: 4px solid var(--warn, #d97706); }
.cv-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-thread { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); min-height: 420px; }
.cv-empty { align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.cv-th-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.cv-msgs { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: .9rem; max-height: 56vh; overflow-y: auto; }
.cv-msg { max-width: 82%; display: flex; flex-direction: column; gap: .2rem; }
.cv-msg.admin { align-self: flex-start; } .cv-msg.school { align-self: flex-end; }
.cv-b { padding: .6rem .8rem; border-radius: 14px; line-height: 1.8; white-space: normal; word-break: break-word; }
.cv-msg.admin .cv-b { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.cv-msg.school .cv-b { background: color-mix(in srgb, var(--muted) 12%, var(--surface)); }
.cv-reply { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.cv-pick { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: .4rem; margin-top: .4rem; display: flex; flex-direction: column; gap: .2rem; }
.cv-pk { display: flex; gap: .4rem; align-items: center; padding: .25rem .3rem; border-radius: 8px; }
.cv-steps { padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 899px) { .cv-wrap { grid-template-columns: 1fr; } .cv-wrap.has-thread .cv-list { display: none; } }
/* زر «مساعدة» يحل محل زر الواتساب العائم داخل الحسابات (ويرجع الواتساب لو أخفى المستخدم زر المساعدة) */
body:has(#helpFab) .shell ~ .wa-float { display: none; }
body:has(.side.open) .hf, body:has(.tour) .hf, body:has(.modal-bg) .hf { display: none; }

/* واتساب أثر */
.ws-card { border: 1.5px solid color-mix(in srgb, #25d366 45%, var(--line)); }
.ws-bal { display: flex; flex-direction: column; align-items: center; padding: .5rem .9rem; border-radius: 14px; background: color-mix(in srgb, #25d366 12%, var(--surface)); }
.ws-bal b { font-size: 1.6rem; line-height: 1.1; }
.ws-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .7rem; }
.ws-buy { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
/* بوابة ولي الأمر: المحادثات */
.pp-conv { display: block; width: 100%; text-align: start; background: none; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .7rem; margin-bottom: .4rem; cursor: pointer; font: inherit; color: inherit; }
.pp-conv.unread { border-inline-start: 4px solid var(--warn, #d97706); }
.pp-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-thread { max-height: 50vh; margin: .6rem 0; border: 1px solid var(--line); border-radius: 12px; }

.tt-imp { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; border: 1.5px dashed color-mix(in srgb, var(--primary) 40%, var(--line)); }
.sf-pay .pay-ic { display: inline-flex; align-items: center; justify-content: center; height: 38px; min-width: 76px; box-sizing: border-box; }
.sf-pay { align-items: center; }
.sf-pay .pay-note { font-size: .8rem; font-weight: 600; color: var(--text); margin-inline-start: .4rem; }
@media (min-width: 601px) { .sf-bottom { padding-right: 96px; } }
/* نص الصفحة لمحركات البحث يبقى في الـHTML، والزائر يرى شاشة تحميل بالشعار لين ترسم الصفحة */
.seo-static { min-height: 100vh; min-height: 100dvh; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 1rem; }
.seo-static > :not(header):not(.seo-hero) { display: none !important; }
.seo-static header a { flex-direction: column; gap: .7rem; font-size: 1.35rem; font-weight: 700; }
.seo-static header img { width: 64px; height: 64px; }
.seo-static header::after { content: ""; display: block; width: 120px; height: 4px; margin: 1.1rem auto 0; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--primary), transparent) 0 0 / 50% 100% no-repeat, var(--line); animation: seo-load 1.1s ease-in-out infinite; }
@keyframes seo-load { from { background-position: -60px 0, 0 0; } to { background-position: 180px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .seo-static header::after { animation: none; } }

/* التوقيع والختم */
.ink-sec { display: grid; gap: .6rem; padding: .9rem 0; border-top: 1px solid var(--line); }
.ink-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ink-prev { min-height: 84px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background-color: #fff; background-image: linear-gradient(45deg, #f1f4f3 25%, transparent 25%, transparent 75%, #f1f4f3 75%), linear-gradient(45deg, #f1f4f3 25%, transparent 25%, transparent 75%, #f1f4f3 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; padding: .5rem; }
.ink-prev img { max-width: 100%; max-height: 120px; }
.ink-tabs { margin: 0; } .ink-pick { justify-self: start; }
.sheet .sig-stamp { max-height: 58px; max-width: 70px; vertical-align: middle; margin-inline-start: .4rem; opacity: .92; }

.sheet .ta-stats th { width: 22%; } .sheet .ta-stats td { width: 28%; }

/* رابط الزيارة: البحث وطرق العرض */
.vz-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; } .vz-bar .vz-q { flex: 1; min-width: 200px; }
.vz-modes { margin: 0; } .vz-grp { margin: 1rem 0; } .vz-grp h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.vz-evrow small.vz-code { margin-inline-start: .4rem; font-size: .72rem; }
.vz-priv { background: var(--primary-soft, #e3f1ee); color: var(--primary); border-radius: 10px; padding: .55rem .8rem; margin: .6rem 0 0; }
.btn.on[data-evpriv] { color: var(--primary); background: var(--primary-soft, #e3f1ee); }

/* صفحة حالة المنصة */
.st-now { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; border-inline-start: 5px solid var(--ok, #11845b); } .st-now.bad { border-inline-start-color: var(--warn, #c27a10); } .st-now b { font-size: 1.1rem; }
.st-note { font-weight: 600; } .st-note.st-maint { background: var(--accent-soft, #fbf3e2); } .st-note.st-issue { background: color-mix(in srgb, var(--danger, #c2372b) 10%, var(--card, #fff)); }
.st-list { display: grid; gap: .1rem; } .st-row { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); } .st-row:last-child { border-bottom: 0; }
.st-row b.ok { color: var(--ok, #11845b); } .st-row b.bad { color: var(--warn, #c27a10); } .st-up { color: var(--ok, #11845b); font-size: 1.2rem; }
.st-days { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; margin: .8rem 0 .3rem; } .st-day { height: 34px; border-radius: 4px; background: var(--line); }
.st-day.ok { background: var(--ok, #11845b); } .st-day.warn { background: var(--warn, #c27a10); } .st-day.bad { background: var(--danger, #c2372b); } .st-day.na { background: var(--surface-2, #eef2f0); }

.ai-rev-card { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; border: 1px solid color-mix(in srgb, var(--accent, #c8962b) 45%, transparent); background: var(--accent-soft, #fbf3e2); } .ai-rev-card:hover { border-color: var(--accent, #c8962b); } .ai-rev-ic { font-size: 1.6rem; }
@media (max-width: 560px) { .ai-rev-card { flex-wrap: wrap; } .ai-rev-card .btn { width: 100%; justify-content: center; } }

/* زر المساعدة لا يغطي المحتوى: دائرة صغيرة، تتسع عند المرور، وتختفي أثناء النزول */
body.hf-on .content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 899px) { body.hf-on.bn-on .content { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } }
.hf { transition: transform .25s ease, opacity .25s ease; }
.hf.away:not(.open) { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.hf-btn { padding: .3rem; }
.hf-l { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .2s ease; }
.hf-btn:hover .hf-l, .hf-btn:focus-visible .hf-l, .hf.open .hf-l { max-width: 6rem; }
.hf-btn:hover, .hf.open .hf-btn { padding-inline-end: .75rem; }
.empty-st { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1.6rem 1rem; border: 1px dashed var(--line); border-radius: 14px; margin-top: .6rem; }
.empty-st b { font-size: .98rem; }
.empty-st .btn { margin-top: .4rem; }
.rc-pick { display: none; margin-bottom: .7rem; }
@media (max-width: 860px) { .rc-side { display: none; } .rc-pick { display: block; } }
/* التبويبات على الجوال: شريط واحد يتمرر أفقيا، والتبويب النشط يُمرَّر لداخل الشاشة */
@media (max-width: 600px) { .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tabs > * { flex: 0 0 auto; } .tabs button, .tabs a > button { padding: .5rem .6rem; font-size: .88rem; } .tabs a:has(> button) { padding: 0; } }

/* أزرار الفلاتر والفترات: الرابط الحاوي للزر بلا إطار (كان يطلع إطاران متداخلان) */
.chips a:has(> button) { border: 0; padding: 0; background: none; border-radius: 99px; }
.chips a > button { font: inherit; font-size: .9rem; padding: .4rem .85rem; }
/* على الجوال: صف فلاتر واحد يتمرر أفقيا بدل ما يلتف لعدة أسطر */
@media (max-width: 600px) {
  .chips:has(> a > button) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; mask-image: linear-gradient(to left, #000 88%, transparent); }
  .chips:has(> a > button)::-webkit-scrollbar { display: none; }
  .chips:has(> a > button) > a { flex: none; }
}

/* الجداول على الجوال: كل صف يصير بطاقة، وكل خانة بعنوان عمودها (تُضاف العناوين تلقائيا من رأس الجدول) */
@media (max-width: 600px) {
  .tbl-wrap:has(> table.cards) { border: 0; overflow: visible; border-radius: 0; }
  table.tbl.cards, table.tbl.cards tbody, table.tbl.cards tr, table.tbl.cards td { display: block; width: 100%; }
  table.tbl.cards thead { display: none; }
  table.tbl.cards tr { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .75rem; margin-bottom: .55rem; background: var(--surface); }
  table.tbl.cards td { position: relative; border: 0 !important; padding: .28rem 0 .28rem 0 !important; padding-inline-start: 38% !important; min-height: 1.6em; text-align: start !important; white-space: normal !important; max-width: none !important; }
  table.tbl.cards td::before { content: attr(data-label); position: absolute; inset-inline-start: 0; top: .3rem; width: 35%; color: var(--muted); font-size: .8rem; line-height: 1.4; }
  table.tbl.cards td.nolabel { padding-inline-start: 0 !important; }
  table.tbl.cards td.nolabel::before { display: none; }
  table.tbl.cards td:empty { display: none; }
  table.tbl.cards td.c-act { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; padding-top: .45rem !important; margin-top: .2rem; border-top: 1px dashed var(--line) !important; }
}
/* عناصر الإدخال الأصلية بلون الهوية بدل أزرق المتصفح */
:root { accent-color: var(--primary); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(27%) sepia(30%) saturate(900%) hue-rotate(130deg); }
/* شريط الحفظ الثابت فوق شريط التنقل السفلي في الجوال (كان يختفي تحته) */
@media (max-width: 899px) { body.bn-on .sticky-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } }
/* أيقونات خطية بدل الإيموجي داخل النصوص والأزرار */
.aic.ie { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.empty .big .aic.ie { width: 2.6rem; height: 2.6rem; color: var(--primary); opacity: .75; }
.rg-form .rg-long { grid-column: 1 / -1; }
.rg-form textarea.i { min-height: 3.2rem; resize: vertical; }
.kc { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--primary); color: #fff; font-size: .8em; font-weight: 700; vertical-align: .05em; margin-inline-end: .2em; }
.rg-man { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 .4rem; margin-inline-end: .25rem; white-space: nowrap; }
td:has(> .rg-man) { white-space: nowrap; }
.rg-q { margin: .2rem 0 .6rem; }
.rg-moreb { margin-top: .6rem; }
tr[hidden] { display: none !important; }
/* بطاقات القوائم على الجوال: النص بعرض كامل، والحالة والأزرار تنزل لسطر تحته */
@media (max-width: 480px) { .ci-row .ci-main { flex: 1 1 calc(100% - 3.2rem); } .ci-row > .pill:first-of-type { margin-inline-start: auto; } }
.rg-src { display: inline-flex; align-items: center; gap: .2rem; color: var(--muted); white-space: nowrap; }
.rg-src .aic { width: 1em; height: 1em; }
/* أزرار الفترة في الدفاتر تلتف لسطرين على الجوال بدل ما ينقص زر «الكل» عند الحافة */
@media (max-width: 600px) { .rg-period .chips:has(> a > button) { flex-wrap: wrap; overflow: visible; mask-image: none; } }
.rg-exp { color: #9a3412; font-weight: 700; background: color-mix(in srgb, #c9a227 18%, transparent); border-radius: 6px; padding: 0 .3rem; white-space: nowrap; }
.tt-swipe { display: none; } @media (max-width: 700px) { .tt-swipe { display: block; margin: 0 0 .3rem; } }

/* محرر صلاحيات فريق الأدمن */
.pm-box { display: flex; flex-direction: column; gap: .6rem; }
.pm-pre { display: flex; flex-wrap: wrap; gap: .4rem; }
.pm-tbl { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: .3rem .7rem; }
.pm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { .pm-row { grid-template-columns: 1fr; gap: .35rem; } }
.pm-row:last-of-type { border-bottom: 0; }
.pm-row > b { font-size: .86rem; }
.pm-lvs { display: flex; gap: .25rem; flex-wrap: nowrap; }
.pm-lv { position: relative; cursor: pointer; }
.pm-lv input { position: absolute; opacity: 0; pointer-events: none; }
.pm-lv span { display: inline-block; font-size: .74rem; padding: .22rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.pm-lv input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.pm-lv input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* محرر نصوص الواجهة */
.tx-fab { position: fixed; inset-block-start: calc(68px + env(safe-area-inset-top, 0px)); left: 16px; z-index: 9998; border: 0; border-radius: 999px; padding: .55rem 1rem; font: inherit; font-size: .85rem; font-weight: 700; background: #b8902a; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); cursor: pointer; }
.tx-fab.on { background: var(--primary); }
body.tx-on *:not(.tx-skip):not(.tx-skip *):not(.modal-bg):not(.modal-bg *):hover { outline: 1.5px dashed #b8902a; outline-offset: 2px; cursor: text; }
.tx-orig { background: var(--primary-soft); border-radius: 10px; padding: .55rem .75rem; margin: .25rem 0 .6rem; font-size: .9rem; }
.tx-modes { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; }
.tx-modes label { gap: .45rem; align-items: flex-start; flex-wrap: nowrap; cursor: pointer; }
.tx-skip [hidden], .pm-box [hidden] { display: none !important; }

/* الصفحات والأقسام */
.ly-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ly-row:last-child { border-bottom: 0; }
.ly-row.off .ly-l { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.ly-l { flex: 1 1 200px; font-size: .9rem; }
.ly-mv { display: inline-flex; gap: .2rem; }
.ly-mv .icon-btn { width: 28px; height: 28px; font-size: .7rem; }
.ly-g { margin-top: .6rem; }
.ly-gh { font-weight: 700; font-size: .85rem; color: var(--primary); padding: .3rem 0; border-bottom: 2px solid var(--primary-soft); }
.ly-sw { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .8rem; }
.ly-sw.is-lock { cursor: default; opacity: .6; }
.ly-sw input { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); }
.ly-save { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .6rem .8rem; box-shadow: 0 6px 18px rgba(0,0,0,.08); margin-bottom: 1rem; }
.cp-page { max-width: 820px; margin-inline: auto; }

/* السعر الخاص لمدرسة */
.spp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.spp-row:last-child { border-bottom: 0; }
.spp-row.on .spp-n b { color: var(--primary); }
.spp-n { flex: 1 1 220px; display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; color: var(--text); }
.spp-f { display: flex; gap: .35rem; align-items: center; flex-wrap: nowrap; }
.spp-f .i { width: 110px; padding-block: .35rem; }
.spp-f input[type="date"] { width: 150px; }
.mo-eq { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-top: .15rem; }
.feat-more summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--primary); margin: .2rem 0 .4rem; }

/* رابط دفع بمبلغ مخصص */
.cl-line { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: .35rem; align-items: center; margin-bottom: .35rem; }
.cl-total { display: flex; align-items: baseline; gap: .4rem; justify-content: flex-end; border-top: 1px dashed var(--line); padding-top: .5rem; margin: .4rem 0 .8rem; }
.cl-total b { font-size: 1.5rem; color: var(--primary); }
.rg-total td { border-top: 2px solid var(--line); background: var(--primary-soft); }
/* عنوان الشاهد: سطران بدل سطر مقصوص، حتى تتميز الشواهد المتشابهة على الجوال */
.ev-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
/* مسافة بين بطاقة الترويسة وشبكة البطاقات تحتها */
.card + .grid2:has(> .card), .card + .grid3:has(> .card), .card + .grid4:has(> .card) { margin-top: 1rem; }
/* البريد الطويل في بطاقات الجوال ينكسر بدل ما يتجاوز الحافة */
@media (max-width: 600px) { table.cards td, .kv td { overflow-wrap: anywhere; } }
.lx-d-sec p { overflow-wrap: anywhere; }
/* التاريخ والوقت في جداول الدفاتر لا ينكسران */
.rg-tbl td.nw, .rg-tbl th.nw { white-space: nowrap; }
/* مسافة ثابتة بين البطاقات والشبكات المتتالية في كل الصفحات */
.grid2 + .card, .grid3 + .card, .grid4 + .card, .stats + .card, .card + .stats, .card + .grid4, .grid4 + .grid2, .stats + .grid2, .card + .cards-grid, .tabs + .grid3, .tabs + .grid4, .tabs + .stats { margin-top: 1rem; }
/* العناصر المخفية تبقى مخفية حتى لو كان لها display من صنفها (مثل label.f) */
[hidden] { display: none !important; }
/* الجوال: صفوف القوائم بأزرار متعددة تنزل أزرارها لسطر تحت العنوان بدل ما يتكسّر العنوان */
@media (max-width: 600px) {
  .ev { flex-wrap: wrap; }
  .ev > div[style*="flex:1"] { flex: 1 1 calc(100% - 3rem) !important; } /* يغلب flex:1 المكتوب في العنصر */
  .ev > .btn, .ev > a.btn { margin-inline-start: auto; }
  .ev > .btn ~ .btn, .ev > .btn ~ a.btn, .ev > a.btn ~ .btn { margin-inline-start: 0; }
  /* صفحة الزيارة: شارة الرمز والحالة فوق نص المؤشر، والنص بكامل العرض */
  .vz-ind header { grid-template-columns: 1fr auto; }
  .vz-ind header h4 { grid-column: 1 / -1; grid-row: 2; }
}
/* بطاقات الجوال: التسمية الطويلة فوق القيمة بدل ما تنكسر وتتداخل مع ما تحتها */
@media (max-width: 600px) {
  table.tbl.cards td.lbl-top { padding-inline-start: 0 !important; }
  table.tbl.cards td.lbl-top::before { position: static; display: block; width: auto; margin-bottom: .1rem; }
}
/* ملف الإنجاز: بطاقات العناصر بحشو البطاقة العادي (كان ينطبق عليها تنسيق أقسام الملف التعريفي بنفس الاسم) */
.card.pf-sec { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); justify-content: flex-start; }
.card.pf-sec.has { border-inline-start: 4px solid var(--primary); }
/* أرقام الشارات (9+ و99+) تُعرض من اليسار لليمين دائما */
.dot, .nav-n, .ib-n, .bn-n { direction: ltr; unicode-bidi: isolate; }
/* بطاقات الأرقام (الموجز والميزانية والرسوم) وشبكات البطاقات: فراغ موحد قبلها وبعدها، وبعرض كامل */
.card + .br-tiles, .tabs + .br-tiles, .br-tiles + .card, .br-tiles + .grid2, .card + .rp-grid, .rp-grid + .card, .grid4 + .card, .grid3 + .grid2, .card + .grid3, input + .card, .rp-search + .card, .card + .rp-search { margin-top: 1rem; }
.br-tiles { width: 100%; }
#docAsks:not(:empty) { margin-top: 1rem; }
#docAsks + .card { margin-top: 1rem; }
/* تصنيفات النماذج على الجوال: شريط أفقي يتمرر بدل ما يأخذ نص الشاشة */
@media (max-width: 600px) { .chips:has(> [data-cat]) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; } .chips:has(> [data-cat])::-webkit-scrollbar { display: none; } .chips:has(> [data-cat]) > * { flex: 0 0 auto; white-space: nowrap; } }
/* النصوص اللاتينية داخل الجداول (أرقام الفواتير والبريد) بخط الواجهة بدل النسخ */
table [dir="ltr"], table .ind-code { font-family: var(--font); }

/* المالية والتقارير: مخطط أعمدة شهري بسيط من ألوان الهوية */
.fin-chart { display: flex; align-items: flex-end; gap: .5rem; height: 190px; padding-top: .5rem; overflow-x: auto; }
.fin-col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: .2rem; height: 100%; }
.fin-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fin-bars span { width: 42%; max-width: 18px; border-radius: 4px 4px 0 0; min-height: 2px; }
.fb-r { background: var(--primary); } .fb-e { background: #b8902a; } .fb-p { background: #2a8a7e; }
.fin-col b { font-size: .72rem; } .fin-col b.neg { color: var(--danger); }
.fin-dot { display: inline-block; width: .7em; height: .7em; border-radius: 3px; margin-inline-end: .3em; vertical-align: -.05em; }
.fin-dot.r { background: var(--primary); } .fin-dot.e { background: #b8902a; } .fin-dot.p { background: #2a8a7e; }
.fin-period .f > span { font-size: .78rem; }
.rep-frame { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

/* لوحة التحكم: خمس بطاقات مؤشرات تتوزع على العرض وتنزل لعمودين على الجوال */
.kpi5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
@media (max-width: 600px) { .kpi5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi5 > :last-child { grid-column: 1 / -1; } }
.kpi-top .card.stat:nth-child(5) { border-top-color: var(--danger); }
/* الأرقام في خلايا الجداول بخط الواجهة (خط النسخ يعرض الفاصلة العشرية بشكل عربي) */
table td.num, table td .num, table th.num { font-family: var(--font); }
.hero-card + .pf-grid, .card + .pf-grid { margin-top: 1rem; }

/* لوحة الأدمن: لا تمرير أفقي للصفحة كلها — الجداول العريضة تتمرر داخل بطاقتها */
.adm-shell .main, .adm-shell .content { min-width: 0; }
.adm-shell .content .card { min-width: 0; max-width: 100%; }
.adm-shell .content .card:has(> table), .adm-shell .content .card:has(> div > table:not(.tbl)) { overflow-x: auto; }
/* شريط الحفظ الثابت لا يغطي آخر الحقول */
.adm-shell .content:has(.sticky-bar, .st-save, .mk-save) { padding-bottom: 6rem; }
.rep-frame { height: 72vh; min-height: 480px; }

/* شريط التبويبات المتمرر على الجوال: تدرج عند الحافة يدل أن فيه تبويبات إضافية */
@media (max-width: 600px) { .tabs { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px); mask-image: linear-gradient(to left, transparent 0, #000 26px); } }

/* معاينة النماذج في الأدمن: الجدول العريض يتمرر داخل المعاينة ولا يوسّع الصفحة */
.fm-preview { overflow-x: auto; max-width: 100%; min-width: 0; }
.adm-shell .content .grid2 > *, .adm-shell .content .grid3 > *, .adm-shell .content [class*="-grid"] > * { min-width: 0; }
.sh-fold > summary { cursor: pointer; list-style: none; } .sh-fold > summary::-webkit-details-marker { display: none; } .sh-fold[open] > summary { margin-bottom: .6rem; }
/* رأس صفحة المدرسة في الأدمن: الحالة والباقة والانتهاء والإجراءات الأساسية */
.sp-sum { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; padding: .75rem 1rem; }
.sp-sum-i { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sp-sum .neg { color: var(--danger); font-weight: 700; }
@media (max-width: 760px) { .cv-wrap:not(.has-thread) > :not(.cv-list) { display: none; } }
/* الإشعارات: سهم يدل أنها تنفتح، ونقطة لغير المقروء */
.notif { align-items: center; }
.notif::after { content: "←"; color: var(--muted); font-size: .9rem; }
[dir="ltr"] .notif::after { content: "→"; }
.notif.unread b::before { content: "● "; color: var(--primary); }
/* الصفحات والأقسام على الجوال: المفتاح في نفس سطر الاسم */
@media (max-width: 600px) { .ly-row { flex-wrap: nowrap; } .ly-l { flex: 1 1 auto; min-width: 0; } }
@media (max-width: 760px) { .lx-main small, .lx-plan small { white-space: normal; } }
/* سعر ملف المتجر قابل للتعديل من الجدول */
.sa-pr { display: inline-flex; align-items: center; gap: .3rem; }
.sa-pr .i { width: 84px; padding: .3rem .45rem; text-align: center; }
.sa-pr .i.saved { border-color: var(--ok, #16a34a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #16a34a) 20%, transparent); }
.exp-att input[type=file] { padding: .35rem; font-size: .85rem; }
/* نبض المنصة على الجوال: الفترات الثلاث جنب بعض بدل ثلاث بطاقات طويلة فوق بعض */
@media (max-width: 700px) { .adm-split .pl-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; } .pl-g span { font-size: .66rem; line-height: 1.3; } }
/* زر تعديل النصوص على الجوال: أيقونة فقط حتى لا يغطي المحتوى، ويظهر النص كاملا أثناء التعديل */
@media (max-width: 700px) { .tx-fab:not(.on) { padding: 0; width: 40px; height: 40px; display: grid; place-items: center; left: 10px; opacity: .92; } .tx-fab:not(.on) .tx-fab-l { display: none; } }
/* طي أقسام صفحة الترتيب */
.ly-fold > .card-h { cursor: pointer; user-select: none; }
.ly-fold > .card-h h3::after { content: "⌄"; display: inline-block; margin-inline-start: .45rem; color: var(--muted); transition: transform .15s; }
.ly-folded > .card-h h3::after { transform: rotate(90deg); }
[dir="rtl"] .ly-folded > .card-h h3::after { transform: rotate(-90deg); }
.ly-folded > :not(.card-h) { display: none !important; }
.ly-folded > .card-h { margin-bottom: 0; }
/* زر «فيه تحديث جديد» من التحديث اللحظي */
.live-pill { position: fixed; z-index: 9997; inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 999px; padding: .55rem 1.1rem; font: inherit; font-size: .85rem; font-weight: 700; background: var(--primary); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); cursor: pointer; animation: livePop .25s ease-out; }
body.bn-on .live-pill { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
@keyframes livePop { from { transform: translateY(12px); opacity: 0; } }
/* تبسيط التسجيل: بطاقات نوع الحساب مختصرة، واختيار الخدمة صف واحد على الجوال، والبيانات الإضافية مطوية */
#mode { margin: .5rem 0 .9rem !important; gap: .4rem !important; }
#mode .card { padding: .55rem .5rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center !important; gap: .15rem; }
#mode .card > div:first-child { font-size: 1.15rem !important; line-height: 1; }
#mode .card b { font-size: .82rem; line-height: 1.3; }
#mode .card .tiny { display: none; }
@media (max-width: 520px) {
  .prod-pick { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .35rem; }
  .prod-pick button { flex-direction: column !important; text-align: center !important; gap: .15rem !important; padding: .55rem .35rem !important; }
  .prod-pick button small, .prod-pick button .tiny { display: none !important; }
}
.reg-hint { margin: -.2rem 0 .6rem; }
.reg-extra { margin: 0 0 .7rem; border: 1px dashed var(--line); border-radius: 12px; padding: .55rem .8rem; }
.reg-extra > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--primary); }
.reg-extra[open] > summary { margin-bottom: .6rem; }
.reg-morelink { display: block; border: 0; background: none; padding: .2rem 0; margin: 0 0 1rem; font: inherit; font-size: .83rem; color: var(--primary); cursor: pointer; text-align: start; }
.reg-agree { text-align: center; margin: .55rem 0 0; }
.pw-wrap { position: relative; display: block; }
.pw-wrap .i { padding-inline-end: 2.4rem; }
.pw-eye { position: absolute; inset-block: 0; inset-inline-end: .3rem; border: 0; background: none; cursor: pointer; font-size: 1rem; opacity: .6; padding: 0 .4rem; }
#schoolFields > .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .45rem; }
#schoolFields > .grid2 .i { padding-inline: .5rem; }
/* بطاقة «ابدأ من هنا» للمدير الجديد */
.start-card { border: 1.5px solid var(--primary); background: linear-gradient(135deg, var(--primary-soft), var(--surface) 70%); margin-bottom: 1rem; }
.start-bar { height: 6px; border-radius: 99px; background: var(--surface-2); margin: .6rem 0 .8rem; overflow: hidden; }
.start-bar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width .3s; }
.start-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 760px) { .start-steps { grid-template-columns: 1fr; } }
.start-step { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; font: inherit; text-align: start; cursor: pointer; width: 100%; }
.start-step:hover { border-color: var(--primary); }
.start-step b { display: block; font-size: .9rem; } .start-step small { display: block; font-size: .75rem; color: var(--muted); line-height: 1.4; }
.start-step > span:nth-child(2) { flex: 1; min-width: 0; }
.start-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); font-size: 1rem; }
.start-step.done { cursor: default; opacity: .65; } .start-step.done .start-ic { background: var(--primary); color: #fff; font-weight: 800; }
.start-step.done b { text-decoration: line-through; }
.start-go { color: var(--primary); font-weight: 800; }
[dir="ltr"] .start-go { transform: scaleX(-1); }

/* ═════════ المرحلة 1: الصفحات التعريفية ═════════ */
/* الأحجام بـclamp: أصغر بنحو 30% على الكمبيوتر، ونفسها تقريبا على الجوال */
.wrap { --pub-gap: clamp(2rem, 1.2rem + 2.2vw, 3.25rem); }
.hm-hero2 { gap: clamp(1.25rem, .5rem + 2.4vw, 2.25rem); padding-top: clamp(.5rem, .2rem + 1vw, 1rem); grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); }
.hm-hero2 h1 { font-size: clamp(1.9rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.3; }
.hm-hero2 .lead { font-size: clamp(1rem, .92rem + .25vw, 1.08rem); line-height: 1.75; max-width: 54ch; }
.hm-hero2 .hm-why span { font-size: max(13px, .82rem); }
.wrap .section h2, .hm-gw-title h2 { font-size: clamp(1.35rem, 1rem + 1vw, 1.6rem); }
.wrap .section > .sub, .hm-gw-title p { font-size: max(13px, .95rem); }
.wrap .section { padding-block: var(--pub-gap) 0; }
/* أقل حجم خط 13 بكسل في الصفحات العامة */
.wrap .tiny, .wrap small, .wrap .small, .site-foot .tiny, .site-foot small { font-size: max(13px, .82rem); }
.hm-mini span, .hm-gw-card .hm-st-list li, .hm-gw-card p { font-size: max(13px, .86rem); }
/* بطاقات البوابات: أيقونات ومسافات أصغر لتظهر الست في شاشة ونص تقريبا */
.hm-gw-card { padding: clamp(1rem, .7rem + .7vw, 1.2rem); gap: clamp(.55rem, .4rem + .4vw, .8rem); border-radius: 16px; }
.hm-gw-ic { width: clamp(38px, 30px + 1vw, 44px); height: clamp(38px, 30px + 1vw, 44px); border-radius: 12px; }
.hm-gw-ic svg { width: 22px; height: 22px; }
.hm-gw-card h2 { font-size: clamp(1.05rem, .95rem + .35vw, 1.18rem); margin: 0; }
.hm-gw-top { gap: .7rem; }
.hm-gw-card .hm-st-list { gap: .3rem; margin: 0; }
.hm-gw-grid { gap: clamp(.6rem, .4rem + .5vw, .9rem); }
.hm-gw-row2 { margin-top: clamp(.6rem, .4rem + .5vw, .9rem); }
.hm-gw-title { margin-top: var(--pub-gap); }
/* بطاقة التطوير المهني «قريبا»: أصغر وأهدأ */
.hm-gw-card.hm-gw-pd { padding: .8rem 1rem; opacity: .85; }
.hm-gw-card.hm-gw-pd .hm-gw-top p { display: none; }
/* صورة المنصة: زر يكبّرها */
.hm-zoom { display: block; position: relative; border: 0; padding: 0; background: none; cursor: zoom-in; width: 100%; font: inherit; color: inherit; text-align: inherit; }
.hm-zoom-hint { position: absolute; inset-block-end: .6rem; inset-inline-start: .6rem; display: inline-flex; align-items: center; gap: .3rem; font-size: 13px; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #0e5a52; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.hm-zoom-hint svg { width: 14px; height: 14px; }
.hm-zoom-modal img { width: 100%; height: auto; border-radius: 10px; display: block; }
/* حاسبة الموعد في الرئيسية */
.hm-plan-sec { max-width: 820px; margin: 0 auto; }
.hm-plan-sec .hm-plan-sub { text-align: center; margin: 0 0 .7rem; }
/* المشكلة والحل + أربع مزايا */
.hm-feat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, .4rem + .5vw, 1rem); margin-top: 1.2rem; }
.hm-f4 { display: flex; gap: .7rem; align-items: flex-start; padding: clamp(.85rem, .6rem + .5vw, 1.1rem); border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.hm-f4 > svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.hm-f4 h3 { margin: 0 0 .2rem; font-size: 1rem; }
.hm-f4 p { margin: 0; font-size: max(13px, .88rem); color: var(--muted); line-height: 1.6; }
@media (max-width: 960px) { .hm-feat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-feat4 { grid-template-columns: 1fr; } }
/* بطاقات الأسعار الموحدة */
.pc-head { text-align: center; }
.pc-head h1 { margin: 0 0 .3rem; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2rem); }
.pc-grid { display: grid; gap: clamp(.6rem, .4rem + .6vw, 1rem); margin-top: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.pc-card { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: clamp(1rem, .75rem + .6vw, 1.3rem); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pc-card.hi { border: 2px solid var(--primary); }
.pc-badge { position: absolute; inset-block-start: -.7rem; inset-inline-start: 1rem; font-size: 13px; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: var(--primary); color: #fff; }
.pc-h { display: flex; gap: .6rem; align-items: flex-start; }
.pc-h h3 { margin: 0; font-size: 1.05rem; }
.pc-h p { margin: .1rem 0 0; font-size: max(13px, .85rem); color: var(--muted); }
.pc-ic { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.pc-ic svg { width: 20px; height: 20px; }
.pc-price { font-size: 1.5rem; font-weight: 800; line-height: 1.3; }
.pc-price .small { font-size: max(13px, .85rem); font-weight: 500; }
.pc-sub { margin: -.2rem 0 0; font-size: max(13px, .85rem); color: var(--muted); }
.pc-feat { list-style: none; padding: 0; margin: .2rem 0; display: grid; gap: .3rem; }
.pc-feat li { display: flex; gap: .4rem; align-items: flex-start; font-size: max(13px, .88rem); }
.pc-feat svg { flex: none; width: 16px; height: 16px; color: var(--primary); margin-top: .2rem; }
.pc-desc { margin: .2rem 0; font-size: max(13px, .88rem); color: var(--muted); line-height: 1.6; }
.pc-card .btn.block { margin-top: auto; }
.pc-more { text-align: center; font-size: 13px; color: var(--primary); }
.pc-notes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .4rem; }
.pc-notes li { display: flex; gap: .5rem; align-items: flex-start; font-size: max(13px, .9rem); color: var(--muted); }
.pc-notes svg { flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--primary); }
.pc-all { text-align: center; margin: 1rem 0 0; }
/* الصفحات القانونية بالترويسة الموحدة */
.legal-others { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: .6rem 0 0; }
/* الجوال: أهداف الضغط لا تقل عن 44 بكسل */
@media (max-width: 640px) {
  .wrap .btn, .land-nav .btn, .faq-item summary, .pc-more { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .wrap .btn.block { display: flex; }
  .hm-hero2 { grid-template-columns: minmax(0, 1fr); }
}
/* ترويسة الجوال في سطر واحد: الشعار وتغيير اللغة والدخول وزر البدء */
@media (max-width: 640px) { .land-nav { flex-wrap: nowrap !important; gap: .3rem !important; } .land-nav .spacer { flex: 1; } .land-nav .btn { padding: .35rem .6rem !important; font-size: .82rem !important; white-space: nowrap; } .land-nav .land-links { display: none; } }
@media (max-width: 400px) { .land-nav .brand div { display: none; } }
.hm-zoom-hint { inset-block-end: auto; inset-block-start: 2.1rem; inset-inline-start: auto; inset-inline-end: .7rem; }
.wrap .section.pc-sec { padding-block-start: .5rem; }
.wrap .section.pc-head { padding-block-start: clamp(1.25rem, .8rem + 1.2vw, 2rem); }

/* ملاحظات المراجعة 2: مزايا البداية داخل لوحة واحدة مرتبة بدل حبوب متفرقة */
.hm-hero2 .hm-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem .9rem; padding: .7rem .9rem; margin: .2rem 0 .3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 560px; }
.hm-hero2 .hm-why span { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; border-radius: 0; background: none; border: 0; font-size: max(13px, .88rem); font-weight: 600; color: var(--text); }
.hm-hero2 .hm-why span svg { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: color-mix(in srgb, var(--pc, var(--primary)) 12%, transparent); color: var(--pc, var(--primary)); }
@media (max-width: 560px) { .hm-hero2 .hm-why { grid-template-columns: 1fr; } }
/* بطاقة المراحل الإضافية في التسجيل: زر حذف لكل صف */
.st-row .st-rm { align-self: end; }
/* سعر الخدمة داخل بطاقة البوابة */
.hm-gw-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--line); }
.hm-gw-price { font-size: max(13px, .9rem); color: var(--text); }
.hm-gw-price b { font-size: 1.1rem; color: var(--pc, var(--primary)); }
.hm-gw-price s { color: var(--muted); font-size: .85rem; }
.hm-gw-portals .pc-all { margin-top: 1.1rem; }
.hm-gw-card:not(.soon) { display: flex; flex-direction: column; }
.hm-gw-disc { display: inline-block; font-size: 12px; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: #c0392b; color: #fff; vertical-align: middle; }

/* جوال أعلى الصفحة: صورة إطار آيفون حقيقية (شفافة) فوق لقطة المنصة */
.hm-phone2 { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; aspect-ratio: 386 / 785; width: 26%; max-width: 172px; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .22)); }
.hm-phone2 picture { position: absolute; inset: 1.9% 4.7%; border-radius: 13% / 6.2%; overflow: hidden; background: #fff; container-type: inline-size; padding-top: 15%; }
.hm-phone2 picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; aspect-ratio: auto; }
.hm-phone2 picture::before { content: "9:41"; position: absolute; inset-block-start: 5.2cqw; left: 11cqw; font: 700 6.4cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif; color: #111; direction: ltr; }
.hm-phone2 picture::after { content: ""; position: absolute; inset-block-start: 5.6cqw; right: 10cqw; width: 10cqw; height: 4.6cqw; border: 1.2px solid #111; border-radius: 1.4cqw; background: linear-gradient(90deg, #111 72%, transparent 72%) padding-box; box-sizing: border-box; }
.hm-phone2 .iph-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* صفحة النماذج: سطر واحد (بحث، قائمة القسم، فتح وطي الكل) بدل حائط الأزرار */
.hm-forms-tools { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; grid-template-areas: "q sec fold"; align-items: center; }
.hm-forms-tools label.f[for="stQ"] { grid-area: q; max-width: none; }
.hm-forms-tools .st-cat { grid-area: sec; max-width: none; }
.hm-forms-tools .i { min-height: 46px; }
.hm-forms-tools .st-fold { grid-area: fold; display: flex; gap: .3rem; }
@media (max-width: 640px) { .hm-forms-tools { grid-template-columns: 1fr; grid-template-areas: "q" "sec" "fold"; } .hm-forms-tools .st-fold { justify-content: flex-start; } }

/* جوال قسم الأدوار (صفحة إدارة المدرسة) داخل إطار الآيفون نفسه */
.hm-phone.iph-html { position: relative; display: block; width: min(230px, 100%); aspect-ratio: 386 / 785; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .2)); }
.hm-phone.iph-html .iph-scr { position: absolute; inset: 1.9% 4.7%; border-radius: 13% / 6.2%; overflow: hidden; background: var(--bg); padding: 22% .65rem .8rem; display: grid; align-content: start; gap: .5rem; }
.hm-phone.iph-html .iph-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* صفحة إدارة المدرسة: اشتراك واحد في منتصف الصفحة */
.mg-grid.one { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* البداية الثابتة: العنوان وزر التسجيل يظهرون قبل ما تحمّل الواجهة */
.seo-hero { display: flex; flex-direction: column; align-items: center; gap: .7rem; max-width: 30rem; text-align: center; }
.seo-hero-t { margin: 0; font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 800; line-height: 1.35; color: var(--primary); text-wrap: balance; }
.seo-hero-d { margin: 0; color: var(--muted); line-height: 1.8; }
.seo-hero .btn { margin-top: .4rem; text-decoration: none; }
/* صفحة التسجيل: سطر التطمين تحت العنوان */
.reg-assure { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .2rem 0 .3rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
.reg-assure span { display: inline-flex; align-items: center; gap: .3rem; }
.reg-assure svg { width: 16px; height: 16px; }
/* «أرسل أثر لمديرك»: رابط واتساب للمعلم والوكيل */
.share-principal { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem; padding: .45rem .8rem; min-height: 44px; border-radius: 999px; border: 1px dashed color-mix(in srgb, #25d366 55%, var(--line)); background: color-mix(in srgb, #25d366 7%, var(--surface)); color: var(--text); font-size: .88rem; text-decoration: none; }
.share-principal svg { width: 18px; height: 18px; color: #1da851; flex: none; }
.share-principal b { color: #128c4a; }
#memberShare { margin: -.4rem 0 1rem; }
#memberShare .share-principal { margin-top: 0; }

/* صفحة «الرئيس التنفيذي» في الأدمن */
.ceo-funnel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.ceo-step { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: .9rem; text-decoration: none; color: inherit; box-shadow: none; border: 1px solid var(--line); }
.ceo-step:hover { border-color: var(--primary); }
.ceo-step .k { font-size: .85rem; color: var(--muted); font-weight: 600; }
.ceo-step .v { font-size: 1.7rem; font-weight: 800; color: var(--primary); line-height: 1.1; }
@media (max-width: 700px) { .ceo-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ceo-alert { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem .8rem; border-radius: 10px; border-inline-start: 4px solid var(--line); background: var(--surface-2); margin-bottom: .45rem; font-size: .92rem; }
.ceo-alert.danger { border-color: var(--danger); }
.ceo-alert.warn { border-color: var(--warn, #d08a00); }
.ceo-alert.info { border-color: var(--primary); }
.ceo-alert .btn { flex: none; }
.ceo-rev summary { cursor: pointer; list-style: none; }
.ceo-rev summary::-webkit-details-marker { display: none; }
.ceo-verdict { font-weight: 700; margin: .8rem 0 .4rem; }
.ceo-sum { white-space: pre-line; color: var(--text); margin-bottom: .6rem; line-height: 1.8; }
.ceo-st { min-width: 120px; padding-block: .3rem; }

/* رأي العميل الطويل: 6 أسطر وبعدها «اقرأ المزيد» */
.testi-card.long:not(.open) blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.testi-more { align-self: flex-start; margin-top: -.6rem; padding: .3rem 0; min-height: 44px; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }

/* ───── التصميم الجديد وفق دليل الهوية (مفتاح «التصميم الجديد» في الأدمن يضيف .ui3 على html) ─────
   خط واحد IBM Plex Sans Arabic، أخضر كثير وذهبي نادر، زر رئيسي واحد، البطاقات 14 والأزرار والحقول 10، والشارات دائرية.
   الطباعة لها خطوطها في print.js وما تتأثر هنا */
:root.ui3 { --font-display: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --font: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --font-table: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; }
.ui3 body { font-size: 15.5px; line-height: 1.75; font-variant-numeric: tabular-nums; }
.ui3 h1, .ui3 h2, .ui3 h3, .ui3 h4 { font-weight: 700; line-height: 1.45; }
.ui3 h1 { font-size: clamp(1.45rem, 1.05rem + 1.1vw, 1.85rem); }
.ui3 h2 { font-size: clamp(1.18rem, 1.02rem + .45vw, 1.4rem); }
.ui3 h3 { font-size: 1.06rem; }
/* الأزرار: ضغطة واضحة، وهدف لمس 44 على الجوال */
.ui3 .btn { min-height: 40px; transition: background-color .15s, border-color .15s, color .15s, transform .12s; }
.ui3 .btn.sm { min-height: 34px; border-radius: 10px; }
.ui3 .btn.lg { min-height: 50px; }
.ui3 .btn:active:not(:disabled) { transform: scale(.97); }
.ui3 .btn.accent { box-shadow: none; }
@media (max-width: 760px) { .ui3 .btn { min-height: 44px; } .ui3 .btn.sm { min-height: 38px; } }
@media (prefers-reduced-motion: reduce) { .ui3 .btn:active:not(:disabled) { transform: none; } }
/* الحقول والتركيز */
.ui3 input.i, .ui3 select.i, .ui3 textarea.i { min-height: 44px; }
.ui3 textarea.i { min-height: 96px; }
.ui3 :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ui3 input.i:focus-visible, .ui3 select.i:focus-visible, .ui3 textarea.i:focus-visible { outline: none; }
/* البطاقات: حد رفيع وظل خفيف جدا (الدليل)، وبطاقة البطل بأخضر الأثر نفسه */
.ui3 .card { box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent); }
.ui3 .hero-card { background: linear-gradient(175deg, #0e5a52, #0b4d46); }
.ui3 .card-h h2, .ui3 .card-h h3 { display: flex; align-items: center; gap: .45rem; }
.ui3 .pill { font-weight: 600; }
/* الأرقام الكبيرة */
.ui3 .stat .v, .ui3 .countdown b { font-weight: 700; letter-spacing: 0; }
/* الصفحات العامة: الرأس وعنوان الصفحة شريط بأخضر الأثر بعرض الشاشة (مثل الرئيسية الجديدة)، والرمز الأبيض الرسمي في الرأس */
:root.ui3 { --band: #0e5a52; --band-2: #0b4d46; --on-band: #ffffff; --on-band-2: #cfe3df; }
.ui3 .hm-nav, .ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head), .ui3 .info-hero { border-image: linear-gradient(var(--band), var(--band)) fill 0 / / 0 100vmax; color: var(--on-band); }
.ui3 .hm-nav { padding-block: .85rem; }
.ui3 .hm-nav .brand, .ui3 .hm-nav .brand div { color: var(--on-band); }
.ui3 .hm-nav .land-links a { color: var(--on-band-2); }
.ui3 .hm-nav .land-links a:hover, .ui3 .hm-nav .land-links a.on { color: var(--on-band); }
.ui3 .hm-nav .land-links a.on { text-decoration: underline 2px; text-underline-offset: .55em; }
.ui3 .hm-nav .btn.ghost { color: var(--on-band); border-color: rgba(255, 255, 255, .28); }
.ui3 .hm-nav .btn.ghost[data-lang] { border-color: transparent; color: var(--on-band-2); }
.ui3 .hm-nav .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.ui3 .hm-nav .btn.primary, .ui3 :is(.hm-svc-head, .pc-head, .art-head, .info-hero) .btn { background: #fff; color: var(--band); border-color: #fff; }
.ui3 .hm-nav .btn.primary:hover, .ui3 :is(.hm-svc-head, .pc-head, .art-head, .info-hero) .btn:hover { background: #e3f1ee; }
.ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head), .ui3 .info-hero { padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) clamp(2rem, 1.4rem + 2vw, 3rem); margin-block: 0; border-image-source: linear-gradient(var(--band), var(--band-2)); }
.ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head) h1, .ui3 .info-hero h1 { color: var(--on-band); }
.ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head) :is(.lead, .sub, p), .ui3 .info-hero p { color: var(--on-band-2); }
.ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head) a:not(.btn), .ui3 .info-hero a:not(.btn) { color: var(--on-band); text-decoration: underline; }
.ui3 .wrap > .hm-nav + .hm-svc-head .hm-eyebrow { background: rgba(255, 255, 255, .1); color: var(--on-band); }
.ui3 .wrap > .hm-nav + .hm-svc-head .hm-trail .t-base { stroke: rgba(255, 255, 255, .3); }
.ui3 .wrap > .hm-nav + .hm-svc-head .hm-trail .t-draw { stroke: var(--on-band); }
.ui3 .info-hero .info-ic { background: rgba(255, 255, 255, .12); color: var(--on-band); }
/* صفحات الدخول والتسجيل وصفحات الروابط العامة: خلفية بأخضر الأثر، والبطاقة بيضاء */
.ui3 .auth-wrap { background: linear-gradient(175deg, var(--band), var(--band-2)); color: var(--on-band); }
.ui3 .auth-wrap .card { color: var(--text); }
.ui3 .auth > .brand, .ui3 .auth > .brand div { color: var(--on-band); }
.ui3 .auth > p, .ui3 .auth > p a, .ui3 .auth > p .btn { color: var(--on-band-2); }
.ui3 .auth > p a:hover, .ui3 .auth > p .btn:hover { color: var(--on-band); background: none; }
/* بطاقة بيضاء هي نفسها «auth» (صفحة التحقق من المستند، ورابط تجربة الطباعة): نصها بلون القراءة مو بلون الشريط الأخضر */
.ui3 .auth.card > p, .ui3 .auth.card > p a { color: var(--muted); }
.ui3 .info-main:has(> .info-hero:first-child) { padding-top: 0; }
.ui3 :is(.hm-svc-head, .pc-head, .art-head, .info-hero) .chips :is(button, a) { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: var(--on-band); }
.ui3 :is(.hm-svc-head, .pc-head, .art-head, .info-hero) .chips :is(button, a).on { background: #fff; border-color: #fff; color: var(--band); }
.ui3 :is(.hm-svc-head, .pc-head, .art-head, .info-hero) .chips .muted { color: inherit; opacity: .75; }
/* ───── التصميم السينمائي في الصفحات العامة (الإصدار الثاني من الهوية) ───── */
/* الشعار يرسم نفسه أعلى الصفحة: القاعدة ← نقطة المتعلم ← القوس، بنفس مقاسات الملف الرسمي */
.ui3 .cine-mark { display: block; width: 68px; height: 68px; margin: .3rem auto .5rem; overflow: visible; }
.ui3 .cine-mark .m1 { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; }
.ui3 .cine-mark .m2 { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.ui3 .cine-mark .m3 { fill: none; stroke: var(--on-band); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ui3 .cine-mark .m1 { animation: cineDraw .5s cubic-bezier(.23, 1, .32, 1) .15s both; }
  .ui3 .cine-mark .m2 { animation: cinePop .4s cubic-bezier(.23, 1, .32, 1) .55s both; }
  .ui3 .cine-mark .m3 { animation: cineDraw .8s cubic-bezier(.23, 1, .32, 1) .85s both; }
}
@keyframes cineDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cinePop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
/* عنوان الصفحة أكبر، ولقطة المنصة تجلس على حافة الشريط الأخضر */
.ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head) h1, .ui3 .info-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.3; margin-block: .5rem .4rem; }
.ui3 .wrap > .hm-nav + :is(.hm-svc-head, .pc-head, .art-head) :is(.lead, .sub), .ui3 .info-hero p { font-size: clamp(1rem, .92rem + .35vw, 1.15rem); line-height: 1.85; max-width: 40rem; margin-inline: auto; }
.ui3 .wrap > .hm-nav + .hm-svc-head:has(+ .hm-devices) { padding-bottom: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.ui3 .wrap > .hm-nav + .hm-svc-head + .hm-devices { margin-top: clamp(-6rem, -1.5rem - 5vw, -3rem); z-index: 1; }
/* الأقسام بعرض الشاشة: فاتح وأبيض بالتناوب، ومسافات واسعة، وعناوين كبيرة بأخضر الأثر */
.ui3 .wrap > section.section:not(.pc-head):not(.art-head) { padding-block: clamp(2.8rem, 1.8rem + 3.4vw, 5rem); }
.ui3 .wrap > section.section:nth-of-type(even):not(.pc-head):not(.art-head) { border-image: linear-gradient(var(--surface), var(--surface)) fill 0 / / 0 100vmax; }
.ui3 .wrap .section h2 { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.35rem); line-height: 1.4; color: var(--primary); text-wrap: balance; }
.ui3 .wrap .section > .sub { font-size: clamp(.98rem, .9rem + .3vw, 1.1rem); line-height: 1.85; }
.ui3 .wrap .card { box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent); }
.ui3 .wrap .btn.lg { min-height: 54px; font-weight: 700; }
/* الختام: شريط أخضر بعرض الشاشة مثل ختام الرئيسية */
.ui3 .wrap > .hm-cta { margin: 0; border-radius: 0; background: none; overflow: visible; padding: clamp(3rem, 2rem + 3vw, 4.6rem) 0; border-image: linear-gradient(175deg, var(--band), var(--band-2)) fill 0 / / 0 100vmax; color: var(--on-band); }
.ui3 .wrap > .hm-cta::after { display: none; }
.ui3 .wrap > .hm-cta h2 { color: var(--on-band); font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.35rem); text-wrap: balance; }
.ui3 .wrap > .hm-cta p { color: var(--on-band-2); opacity: 1; }
.ui3 .wrap > .hm-cta .btn { background: #fff; color: var(--band); border-color: #fff; min-height: 54px; font-weight: 700; }
.ui3 .wrap > .hm-cta .btn:hover { background: #e3f1ee; }
/* شريط أقسام الصفحة */
.ui3 .hm-subnav > div { border: 1px solid var(--line); }
.ui3 .hm-subnav a { min-height: 40px; display: inline-flex; align-items: center; }
/* ظهور الأقسام مرة وحدة عند الوصول لها */
.ui3 .wrap > section, .ui3 .wrap > .hm-devices { transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1); }
.ui3 .wrap > .cine-pre { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) { .ui3 .wrap > .cine-pre { opacity: 1; transform: none; } }
/* صفحات المحتوى داخل غلاف العينة السينمائية (site3.js reskin): المحتوى الحالي بين رأس العينة وتذييلها */
.ui3 .s3-main { background: var(--bg); padding-block: clamp(1.6rem, 1.2rem + 2vw, 3.2rem); }
.ui3 .s3-main .legal-wrap { min-height: 0; background: none; }
.ui3 .s3-main .info-main { padding-top: 0; }
.ui3 .s3-main > .chips { justify-content: center; max-width: 1100px; margin: 0 auto 1.4rem; padding-inline: 16px; }
.ui3 .s3-main .wrap > .section:first-child { padding-top: 0; }
.ui3 .st-cat-h h2 { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); color: var(--text); }

/* ───── التصميم السينمائي داخل المنصة لكل الأدوار (العينة ac3) ───── */
/* القائمة الجانبية بأخضر العينة والرمز الأبيض: نعيد تعريف ألوان الهوية داخلها فكل عناصرها تتلوّن من مكان واحد */
.ui3 .side { background: linear-gradient(185deg, var(--band), var(--band-2)); border-inline-end: 0; color: #fff;
  --text: #ffffff; --muted: #cfe3df; --primary: #bfe6dc; --primary-soft: rgba(255, 255, 255, .14); --surface: rgba(255, 255, 255, .07); --surface-2: rgba(255, 255, 255, .09);
  --line: rgba(255, 255, 255, .16); --trail: rgba(255, 255, 255, .24); --on-primary: #0e5a52; color-scheme: dark; }
.ui3 .side .brand img { content: url("/site/athar-mark-white.svg"); }
.ui3 .side .nav a.on, .ui3 .side .sb-nav a.on { background: #fff; color: var(--band); font-weight: 700; }
.ui3 .side .nav a.on .ic, .ui3 .side .nav a.on .aic { color: var(--band); }
.ui3 .side .nav a:hover:not(.on) { background: rgba(255, 255, 255, .08); }
.ui3 .side .nav .grp { color: rgba(255, 255, 255, .6); }
.ui3 .side input.i { color: #fff; border-color: rgba(255, 255, 255, .18); }
.ui3 .side input.i::placeholder { color: rgba(255, 255, 255, .62); }
.ui3 .side input.i:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.ui3 .side .pill { background: rgba(255, 255, 255, .14); color: #fff; }
.ui3 .side :focus-visible { outline-color: #fff; }
/* الشريط العلوي: عنوان الصفحة بأخضر الأثر مثل عناوين العينة */
.ui3 .topbar .ttl { color: var(--primary); font-size: 1.15rem; font-weight: 700; }
/* المكوّنات: عناوين البطاقات خضراء، والأرقام الكبيرة خضراء وأكبر، والاختيارات دائرية بحد 1.5، والجداول برأس أخضر فاتح */
.ui3 .card-h h2, .ui3 .card-h h3, .ui3 .card > h3:first-child { color: var(--primary); }
.ui3 .stat .v { color: var(--primary); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.ui3 .chips button, .ui3 .chips a, .ui3 .chip { border-width: 1.5px; min-height: 40px; padding: .4rem .95rem; font-weight: 500; }
@media (max-width: 760px) { .ui3 .chips button, .ui3 .chips a, .ui3 .chip { min-height: 44px; } }
.ui3 table.tbl th { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.ui3 .content h1 { color: var(--primary); }
/* بطل اللوحة («نبض المدرسة» وبطاقات البطل): شريط بأخضر العينة ونص أبيض، والبطاقة اللي داخله تبقى بيضاء */
.ui3 .pl-hero { background: linear-gradient(175deg, var(--band), var(--band-2)); border: 0; color: #fff; }
.ui3 .pl-hero::after { border-color: rgba(255, 255, 255, .2); }
.ui3 .pl-hero :is(.pl-date, .pl-lead) { color: var(--on-band-2); }
.ui3 .pl-hero .pl-lead b, .ui3 .pl-hero .pl-line { color: #fff; }
.ui3 .pl-hero .pl-top { color: var(--text); }
/* الشريط السفلي في الجوال: المختار بأخضر العينة مع خط ذهبي صغير */
.ui3 .bottom-nav a.on { color: var(--primary); font-weight: 700; box-shadow: inset 0 3px 0 var(--accent); }
/* ترحيب الأدمن: شريط بأخضر العينة مثل بطل اللوحات */
.ui3 .adm-hello { background: linear-gradient(175deg, var(--band), var(--band-2)); border: 0; color: #fff; }
.ui3 .adm-hello h2 { color: #fff; }
.ui3 .adm-hello :is(p, .muted, small) { color: var(--on-band-2); }
.ui3 .adm-hello .btn:not(.primary) { background: #fff; color: var(--band); border-color: #fff; }
/* مربعات الأرقام على الجوال: ثلاثة جنب بعض مثل أرقام العينة، بدل كل رقم بعرض الشاشة */
@media (max-width: 640px) {
  .ui3 .content .grid3:not(:has(> :not(.stat))) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .ui3 .content .grid3:not(:has(> :not(.stat))) > .stat { margin: 0; padding: .75rem .45rem; text-align: center; align-items: center; min-width: 0; }
  .ui3 .content .grid3:not(:has(> :not(.stat))) > .stat .k { font-size: .76rem; line-height: 1.4; }
  .ui3 .content .grid3:not(:has(> :not(.stat))) > .stat .v { font-size: 1.45rem; }
  .ui3 .content .grid3:not(:has(> :not(.stat))) > .stat :is(.small, .bar, .btn) { display: none; }
}
@media (max-width: 640px) { .ui3 .topbar .ttl { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } }
/* النوافذ المنبثقة بأشكال العينة: زوايا 14، وعنوانها أخضر، وخلفية معتمة خضراء خفيفة */
.ui3 .modal { border-radius: 14px; border: 1px solid var(--line); }
.ui3 .modal > h3:first-child, .ui3 .modal .modal-h h3, .ui3 .modal > .row:first-child h3 { color: var(--primary); }
.ui3 .modal-bg { background: color-mix(in srgb, #0b3d38 55%, transparent); }
/* الصفحة الثابتة قبل التحميل بنفس بداية التصميم السينمائي (الخادم يضيف cine لما يكون المفتاح شغال): غامقة في الرئيسية مثل بداية المشهد، وخضراء في الصفحات */
.seo-static.cine { color: #fff; font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; color-scheme: dark; }
.seo-static.cine-dark { background: linear-gradient(175deg, #2a2f2e, #1b1f1e 60%, #141716); }
.seo-static.cine-green { background: linear-gradient(175deg, #0e5a52, #0b4d46); }
.seo-static.cine header a, .seo-static.cine header b { color: #fff; }
.seo-static.cine header::after { background: linear-gradient(90deg, transparent, #fff, transparent) 0 0 / 50% 100% no-repeat, rgba(255, 255, 255, .18); }
.seo-static.cine .seo-hero-t { color: #fff; font-weight: 700; }
.seo-static.cine .seo-hero-t .warn { color: #ffb2a6; }
.seo-static.cine .seo-hero-d, .seo-static.cine .muted { color: #cfe3df; }
.seo-static.cine .seo-hero .btn { background: #fff; color: #0e5a52; border-color: #fff; }

/* ═════ بوابة التحليل (analytics.js) ═════ */
/* ألوان الرسوم بترتيب ثابت: مفحوصة لضعاف تمييز الألوان على الخلفية البيضاء والليلية (نفس الدرجات تنجح في الوضعين) */
:root { --ch1: #1a8a74; --ch2: #b07f1c; --ch3: #2f7fb8; --ch4: #c0533b; --ch5: #7a62c4; --ch6: #d4567e; --ch7: #3b9bc0; --ch8: #8c9a2a; --ch-ink: #ffffff; --ch-edge: rgba(0, 0, 0, .28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ch1: #1a8a74; --ch2: #b07f1c; --ch3: #2f7fb8; --ch4: #c0533b; --ch5: #7a62c4; --ch6: #d4567e; --ch7: #3b9bc0; --ch8: #8c9a2a; --ch-ink: #ffffff; --ch-edge: rgba(0, 0, 0, .28); } }
:root[data-theme="dark"] { --ch1: #1a8a74; --ch2: #b07f1c; --ch3: #2f7fb8; --ch4: #c0533b; --ch5: #7a62c4; --ch6: #d4567e; --ch7: #3b9bc0; --ch8: #8c9a2a; --ch-ink: #ffffff; --ch-edge: rgba(0, 0, 0, .28); }
.ana { display: grid; gap: 1rem; min-width: 0; }
.ana .card + .card, .ana-charts > .card + .card { margin-top: 0; }
.ana .aic { width: 1.05em; height: 1.05em; vertical-align: -.15em; }
.ana .i.sm { padding: .3rem .5rem; font-size: .85rem; min-height: 34px; width: auto; }
.ana-start { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 760px) { .ana-start { grid-template-columns: minmax(0, 1fr); } }
.ana-drop { display: grid; justify-items: center; align-content: center; gap: .55rem; text-align: center; border: 2px dashed var(--line); cursor: pointer; min-height: 240px; transition: border-color .15s ease-out, background-color .15s ease-out; }
.ana-drop:hover, .ana-drop.over, .ana-drop:focus-visible { border-color: var(--primary); background: var(--primary-soft); outline: none; }
.ana-drop.busy { opacity: .7; pointer-events: none; }
.ana-drop h3, .ana-drop p { margin: 0; }
.ana-drop p { max-width: 46ch; line-height: 1.7; }
.ana-drop-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.ana-drop-ic .aic { width: 28px; height: 28px; }
.ana-plat h3, .ana > .card > h3 { display: flex; align-items: center; gap: .4rem; }
.ana-srcs { display: grid; gap: .5rem; }
.ana-src { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; text-align: start; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 12px; padding: .7rem .85rem; cursor: pointer; font: inherit; min-height: 44px; transition: border-color .15s ease-out; }
.ana-src:hover, .ana-src:focus-visible { border-color: var(--primary); }
.ana-src:disabled { opacity: .6; cursor: progress; }
.ana-src small { grid-column: 1 / -1; line-height: 1.6; }
.ana-src .num { color: var(--muted); font-size: .85rem; }
.ana-saved { display: grid; }
.ana-set { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.ana-set:last-child { border-bottom: 0; }
.ana-set > div:first-child { min-width: 0; }
.ana-set > .row { flex-wrap: nowrap; flex-shrink: 0; }
.ana-set b { overflow-wrap: anywhere; }
.ana-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }
.ana-ttl { display: grid; gap: .25rem; min-width: 0; flex: 1 1 260px; }
.ana-name { font-weight: 700; font-size: 1.05rem; }
.ana-acts { gap: .35rem; flex-wrap: wrap; }
.ana-note { display: flex; gap: .35rem; align-items: center; margin: 0; }
.ana .tabs { margin-bottom: 0; }
.ana .tabs .pill { font-size: .72rem; padding: 0 .4rem; }
.ana-filters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ana-filters .chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; }
.ana-fchip { padding: 0; overflow: hidden; }
.ana-fchip button { background: none; border: 0; color: inherit; font: inherit; padding: .35rem .65rem; cursor: pointer; min-height: 36px; }
.ana-fchip button + button { padding-inline: .4rem .55rem; border-inline-start: 1px solid color-mix(in srgb, var(--on-primary) 35%, transparent); }
.ana-count { margin-inline-start: auto; }
.ana-fvals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .2rem .6rem; max-height: 300px; overflow: auto; padding: .2rem; }
.ana-fv { display: flex; align-items: center; gap: .45rem; min-height: 38px; cursor: pointer; }
.ana-fv span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ana .ana-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 640px) { .ana .ana-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ana-kpis .stat { margin: 0; }
.ana-kpis .stat .v, .ana-kpis .stat .k { overflow-wrap: anywhere; }
.ana-ins ul { margin: .3rem 0 .5rem; padding-inline-start: 1.2rem; display: grid; gap: .4rem; line-height: 1.75; }
.ana-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .ana-charts { grid-template-columns: minmax(0, 1fr); } }
.ana-ch { margin: 0; display: grid; gap: .55rem; align-content: start; min-width: 0; }
.ana-ch-h { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ana-ch-h h3 { margin: 0; font-size: 1rem; line-height: 1.55; text-wrap: balance; min-width: 0; }
.ana-ch-a { display: flex; gap: .15rem; flex-shrink: 0; align-items: center; }
.ana-ch-a .btn.sm { padding: .3rem .4rem; }
.ana-ch-b { min-width: 0; }
.ana-addch { display: grid; place-items: center; align-content: center; gap: .35rem; min-height: 200px; border: 2px dashed var(--line); background: none; color: var(--text); cursor: pointer; font: inherit; margin: 0; box-shadow: none; transition: border-color .15s ease-out, color .15s ease-out; }
.ana-addch:hover, .ana-addch:focus-visible { border-color: var(--primary); color: var(--primary); }
.ana-addch .aic { width: 26px; height: 26px; }
.ana-nums summary { cursor: pointer; font-size: .85rem; color: var(--muted); min-height: 32px; }
.ana-tbar { gap: .5rem; align-items: center; flex-wrap: wrap; }
.ana-tbar .i { flex: 1 1 220px; max-width: 360px; }
.ana-tbl { max-height: 70vh; overflow: auto; }
.ana-tbl th { position: sticky; top: 0; background: var(--surface); z-index: 1; vertical-align: bottom; }
.ana-tbl th small { display: block; font-weight: 400; font-size: .72rem; }
.ana-tbl td { white-space: nowrap; }
.ana-sort { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: start; }
.ana-warn { list-style: none; padding: 0; margin: .4rem 0; display: grid; gap: .5rem; }
.ana-warn li { line-height: 1.75; }
.ana-smp { display: inline-block; background: var(--surface-2); border-radius: 6px; padding: 0 .35rem; margin: .1rem; font-size: .8rem; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
/* الرسوم (SVG): النصوص بألوان النص مو بلون السلسلة، والشبكة خافتة */
.ana-svg { display: block; overflow: visible; max-width: 100%; height: auto; }
.ana-svg text { font-family: var(--font); }
.ana-t { fill: var(--text); font-size: 12px; }
.ana-ax { fill: var(--muted); font-size: 11px; }
.ana-val { fill: var(--text); font-size: 11.5px; font-weight: 600; }
.ana-big { fill: var(--text); font-size: 22px; font-weight: 700; }
.ana-in, .ana-in2 { fill: var(--ch-ink); paint-order: stroke; stroke: var(--ch-edge); stroke-width: 2px; }
.ana-in { font-size: 12px; font-weight: 600; }
.ana-in2 { font-size: 11px; }
.ana-grid { stroke: var(--line); stroke-width: 1; }
.ana-base { stroke: var(--muted); stroke-width: 1; }
.ana-mk { transition: opacity .12s ease-out; }
.ana-ch-b:hover .ana-mk { opacity: .8; }
.ana-ch-b .ana-mk:hover { opacity: 1; }
.ana-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; color: var(--text); }
.ana-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ana-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ana-empty { text-align: center; padding: 2rem 0; }
#ana-tip { position: fixed; z-index: 9999; pointer-events: none; background: var(--text); color: var(--surface); font-size: .8rem; padding: .3rem .55rem; border-radius: 6px; max-width: 280px; line-height: 1.5; box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .ana-mk, .ana-drop, .ana-src, .ana-addch { transition: none; } }
.ana-pdf-ch { break-inside: avoid; margin: .5cm 0; }
.ana-pdf-ch svg { max-height: 9cm; }
/* الجوال: عنوان الرسم بعرض البطاقة، وأدواته تحته */
@media (max-width: 640px) { .ana-ch-h { flex-direction: column; align-items: stretch; gap: .35rem; } .ana-ch-a { justify-content: flex-start; } }

/* ═════ صفحة الباقات في الأدمن: أقسام حسب الجمهور وبطاقات متساوية ═════ */
.apl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.apl-bar > p { flex: 1 1 260px; margin: 0; }
.apl-bar .spacer { flex: 1; }
.apl-sec { margin-bottom: 1.5rem; }
.apl-sec-h h3 { margin: 0; font-size: 1.05rem; }
.apl-sec-h p { margin: .15rem 0 .8rem; }
.apl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 1.1rem 1rem; align-items: stretch; padding-top: .6rem; }
.apl-grid > .card + .card { margin-top: 0; }
.apl-card { gap: .5rem; margin: 0; }
.apl-card.hot { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.apl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.apl-top h4 { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.apl-top .pill { flex-shrink: 0; }
.apl-use { padding-top: .5rem; border-top: 1px solid var(--line); }
.apl-act { display: flex; align-items: center; gap: .3rem; }
.apl-act .spacer { flex: 1; }
.apl-off > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.mg-tbl .mg-n { max-width: 130px; min-width: 90px; }
.mg-tbl td, .mg-tbl th { vertical-align: middle; }
.mg-tbl input[type=radio], .mg-tbl input[type=checkbox] { width: 20px; height: 20px; }
.mg-txt { border-top: 1px solid var(--line); padding: .6rem 0; }
.mg-txt > summary { cursor: pointer; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; min-height: 32px; }
.mg-txt[open] > summary { margin-bottom: .6rem; }
.apl-links { display: grid; gap: .5rem; }
.apl-link { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
@media (max-width: 640px) { .apl-link { grid-template-columns: minmax(0, 1fr) auto; } .apl-link > b { grid-column: 1 / -1; } }
.sv-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .45rem .8rem; }
.sv-pack { display: flex; gap: .4rem; }
.sv-pack .i { min-width: 0; }

/* الإعدادات ← الربط: حالة كل خدمة مربوطة في سطر */
.cx-list { display: grid; }
.cx-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.cx-row:last-child { border-bottom: 0; }
/* الإعدادات: مربع الاختيار جنب نصه حتى لو النص طويل */
.st-pane label.row { flex-wrap: nowrap; align-items: flex-start; }
.st-pane label.row > input[type=checkbox] { flex-shrink: 0; margin-top: .25rem; }

/* متجر النماذج في الأدمن: الأقسام تحت أبوابها */
.sa-door { margin-bottom: 1.4rem; }
.sa-door-h { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .6rem; }
.sa-door-h h3 { margin: 0; font-size: 1.05rem; }

/* أقسام المتجر في الأدمن: العدد في عمود واحد عند السهم بدل ما يتنقل حسب طول العنوان */
details.sa-cat > summary { justify-content: flex-start; }
details.sa-cat > summary .pill { margin-inline-start: auto; min-width: 2.6rem; text-align: center; }

/* صلاحية «عرض» في صفحات القوائم: أزرار الإجراءات تختفي (الخادم يرفضها أصلا) */
.lx-ro [data-q], .lx-ro [data-lxb], .lx-ro .lx-bulk, .lx-ro [data-lxa="add"], .lx-ro [data-lxa="imp"] { display: none !important; }
/* عرض فقط: أزرار التعديل المعروفة في كل صفحة تختفي لمن صلاحيته في قسمها «عرض» (admin.js يحط adm-ro و data-adm على main.content) */
.adm-ro[data-adm="marketing"] :is(#saveAll, #pvSave),
.adm-ro[data-adm="broadcast"] :is(#send, #an_save, #an_clear),
.adm-ro:is([data-adm="settings"], [data-adm="gateways"]) :is(#save, #jobsRun, #alT, #etest, #sgClr, #sgUp, #sgSave, #sgDel, #dcUp, #dcDel),
.adm-ro[data-adm="content"] :is([data-copy], [data-def], [data-delv]),
.adm-ro[data-adm="articles"] :is([data-adel], a[href="#/admin/articles/new"], #aSave),
.adm-ro[data-adm="schools"] :is([data-ext], [data-hdr="tog"], #noteAdd),
.adm-ro[data-adm="store"] :is(#saNew, #sbNew, #ssSave, [data-bdel], [data-del], [data-idel], [data-bed], [data-ed], label.btn:has(input[type="file"])),
.adm-ro[data-adm="conv"] #cvNew { display: none !important; }

/* ═════ مركز التقارير «القوالب الجاهزة» و«المستحقات» (reptpl.js) ═════ */
.rt-lead { margin: .2rem 0 .8rem; }
.rt-grp { margin-bottom: 1.2rem; }
.rt-gh { font-size: 1rem; margin: 0 0 .6rem; color: var(--muted); }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.rt-card { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.rt-h { display: flex; gap: .7rem; align-items: flex-start; }
.rt-h b { display: block; margin-bottom: .2rem; }
.rt-h p { margin: 0; }
.rt-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.rt-ic .aic { width: 20px; height: 20px; }
.rt-p { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; margin-top: auto; }
.rt-p .f { margin: 0; flex: 1 1 120px; min-width: 0; }
.rt-p p { margin: 0; }
.rt-a { gap: .4rem; flex-wrap: wrap; }
.rt-out { margin-top: 1rem; scroll-margin-top: 80px; }
.rt-out .card-h { flex-wrap: wrap; gap: .5rem; }
.rt-sub { margin: 0 0 .6rem; }
.rt-sec { margin-top: 1rem; }
.rt-sec h3 { font-size: 1rem; margin: 0 0 .5rem; }
.rt-sec .grid4 { margin-bottom: .2rem; }
.rt-tot td { border-top: 2px solid var(--line); }
.rt-bar { gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
@media (max-width: 600px) { .rt-a .btn { flex: 1 1 auto; justify-content: center; } }

/* التكليفات: أزرار الأدوار تحت اسم المستخدم في قائمة إدارة المدرسة */
.sb-roles { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.3rem .4rem .7rem; }
.sb-roles button { flex: 1 1 auto; min-height: 40px; padding: .35rem .65rem; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.sb-roles button.on { background: var(--primary-soft); border-color: var(--primary); font-weight: 700; }
.sb-roles button:disabled { opacity: .6; cursor: wait; }