/* Madaris — soft 3D ("neumorphic") design on pure white, for every page built on base.html.
   --p (school colour) is chosen by the school in «الشعار والألوان»; --o (orange) is the platform signature on every page. */
:root{
  --o:#e07a2e;--o2:#f29a4b;
  --nb:#ffffff;--face:linear-gradient(145deg,#ffffff,#f2f4f6);--pit:#f3f5f7;
  --sh-d:rgba(28,42,58,.13);--sh-l:#ffffff;
  --up:8px 8px 20px var(--sh-d),-6px -6px 16px var(--sh-l),inset 0 1px 0 #fff;
  --up-s:4px 4px 10px var(--sh-d),-3px -3px 8px var(--sh-l),inset 0 1px 0 #fff;
  --down:inset 4px 4px 9px rgba(28,42,58,.12),inset -4px -4px 9px #fff;
  --down-s:inset 2px 2px 5px rgba(28,42,58,.12),inset -2px -2px 5px #fff;
  --nr:18px;
  --bg:#fff;--card:#fff;--line:#e8ecef;
  color-scheme:light;
}
body,body.bg-tint,body.bg-dots{background:#fff}
body::before{content:"";position:fixed;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--o2),var(--o));z-index:50}

/* header and navigation */
.top,.h-split .top{background:#fff;color:var(--ink);border:0;box-shadow:0 8px 18px -10px var(--sh-d);position:relative;z-index:3;padding-top:16px}
.top .brand,.h-split .top .brand{color:var(--ink)}
.logo,.h-split .logo{background:var(--face);color:var(--p);box-shadow:var(--up-s);border-radius:14px}
.top .who a,.top .who button,.h-split .top .who a,.h-split .top .who button{background:var(--face);color:var(--pd);box-shadow:var(--up-s);padding:6px 14px;transition:box-shadow .15s}
.top .who a:active,.top .who button:active{box-shadow:var(--down-s)}
nav.tabs{background:#fff;border:0;padding:14px 16px;gap:12px}
nav.tabs a{border-radius:999px!important;background:var(--face);box-shadow:var(--up-s);border:0!important;transition:box-shadow .15s,color .15s;position:relative}
nav.tabs a.on,.t-pill nav.tabs a.on,.t-block nav.tabs a.on,.t-underline nav.tabs a.on{background:var(--pit);color:var(--p);box-shadow:var(--down);font-weight:700}
nav.tabs a.on::after{content:"";position:absolute;bottom:5px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--o)}
.n-bottom nav.tabs{border:0;box-shadow:0 -8px 18px -10px var(--sh-d)}

/* surfaces */
.box,.tile,.c-list .tile{background:var(--face);border:0;border-radius:var(--nr);box-shadow:var(--up)}
.tile{border-top:0;position:relative;transition:box-shadow .2s,transform .2s}
.tile::before{content:"";position:absolute;inset-inline-start:18px;top:0;width:44px;height:4px;border-radius:0 0 4px 4px;background:var(--o)}
.c-list .tile{border-inline-start:0}
.c-list .tile::before{inset-inline-start:0;top:18px;width:4px;height:36px;border-radius:0 4px 4px 0}
a.tile:hover{transform:translateY(-2px)}
a.tile:active{box-shadow:var(--down);transform:none}
.card{border:0;background:var(--pit);box-shadow:var(--down);border-radius:var(--nr)}
h1{position:relative}

/* buttons */
.btn{border-radius:14px;box-shadow:var(--up-s);background:linear-gradient(145deg,color-mix(in srgb,var(--p) 82%,#fff),var(--p));transition:box-shadow .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{box-shadow:inset 3px 3px 7px rgba(0,0,0,.22),inset -2px -2px 6px rgba(255,255,255,.25);transform:none}
.btn.ghost{background:var(--face);color:var(--pd)}
.btn.ghost:active{box-shadow:var(--down-s)}
.btn.red{background:linear-gradient(145deg,#df5a4e,var(--red))}
.btn.orange,.btn.o{background:linear-gradient(145deg,var(--o2),var(--o));color:#fff}

/* text fields: pressed into the surface */
input[type=text],input[type=password],input[type=url],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],input[type=file],select,textarea{
  background:var(--pit);border:0;border-radius:14px;box-shadow:var(--down);padding:11px 14px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;box-shadow:var(--down),0 0 0 2px color-mix(in srgb,var(--o) 70%,transparent)}
select{appearance:none;-webkit-appearance:none;padding-inline-end:36px;
  background:var(--pit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e07a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 14px center}
[dir=ltr] select{background-position:right 14px center}
input[type=checkbox],input[type=radio]{accent-color:var(--o);width:18px;height:18px}
#id_children,#id_sections{border:0;border-radius:14px;box-shadow:var(--down);background:var(--pit);padding:6px}
label{color:var(--muted);font-size:14px}

/* small parts */
.tag{background:var(--face);box-shadow:var(--up-s);padding:2px 11px}
.tag.off{color:var(--red)}
.msg{background:var(--face);box-shadow:var(--up-s);border-radius:14px;color:#1d5e33;border-inline-start:4px solid var(--o)}.msg.error{color:var(--red)}
table{border-collapse:separate;border-spacing:0}
td,th{border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{color:var(--o)!important;font-weight:600}
details>summary::marker{color:var(--o)}

/* pictures */
main img{border-radius:14px}
main .box img,main .tile img,main figure img{box-shadow:var(--up-s);background:#fff;padding:4px}
main audio{border-radius:999px;box-shadow:var(--up-s)}

@media print{body::before{display:none}.box,.tile,.btn,.card{box-shadow:none!important;border:1px solid #999}}

/* lesson filters, subject tabs and sliders on the pupil / teacher pages */
:root{--accent:var(--p)}
.subtabs button,.lfilter a.chip{border:0!important;background:var(--face)!important;box-shadow:var(--up-s);color:var(--ink)}
.subtabs button.on,.lfilter a.chip.on{background:linear-gradient(145deg,color-mix(in srgb,var(--p) 82%,#fff),var(--p))!important;color:#fff!important;box-shadow:var(--up-s),0 0 0 2px #fff,0 0 0 4px var(--o)}
.slider-bar button{border:0!important;background:var(--face)!important;box-shadow:var(--up-s);color:var(--o)!important}
.slider>.cur{box-shadow:var(--up)!important}

/* stronger relief, whiter text containers */
:root,:root[data-theme="dark"]{
  --face:#ffffff;--pit:#fafbfc;
  --up:10px 10px 24px rgba(28,42,58,.22),-8px -8px 20px #fff,0 1px 3px rgba(28,42,58,.10);
  --up-s:6px 6px 14px rgba(28,42,58,.22),-5px -5px 12px #fff,0 1px 2px rgba(28,42,58,.10);
  --down:inset 5px 5px 11px rgba(28,42,58,.17),inset -5px -5px 11px #fff;
  --down-s:inset 3px 3px 7px rgba(28,42,58,.17),inset -3px -3px 7px #fff}

/* bevel on all four sides: seen from above like a pyramid (light top, darker bottom, shadow all around) */
:root,:root[data-theme="dark"]{
  --up:0 0 0 1px rgba(28,42,58,.09),0 0 18px rgba(28,42,58,.13),0 12px 22px -8px rgba(28,42,58,.28),
       inset 0 4px 0 rgba(255,255,255,.75),inset 4px 0 0 rgba(28,42,58,.035),inset -4px 0 0 rgba(28,42,58,.09),inset 0 -5px 0 rgba(28,42,58,.14);
  --up-s:0 0 0 1px rgba(28,42,58,.09),0 0 12px rgba(28,42,58,.12),0 7px 14px -5px rgba(28,42,58,.26),
       inset 0 3px 0 rgba(255,255,255,.75),inset 3px 0 0 rgba(28,42,58,.035),inset -3px 0 0 rgba(28,42,58,.09),inset 0 -4px 0 rgba(28,42,58,.15);
  --down:0 0 0 1px rgba(28,42,58,.10),inset 0 4px 0 rgba(28,42,58,.13),inset 4px 0 0 rgba(28,42,58,.08),inset -4px 0 0 rgba(28,42,58,.03),inset 0 -3px 0 rgba(255,255,255,.8),inset 0 0 12px rgba(28,42,58,.08);
  --down-s:0 0 0 1px rgba(28,42,58,.10),inset 0 3px 0 rgba(28,42,58,.13),inset 3px 0 0 rgba(28,42,58,.08),inset -3px 0 0 rgba(28,42,58,.03),inset 0 -2px 0 rgba(255,255,255,.8),inset 0 0 8px rgba(28,42,58,.07)}
.btn:active,.btn:active:not(:disabled),.round:active{box-shadow:var(--down)!important}

/* carved in bright white stone: chamfered relief, light from the top-left, soft grey shade on the lower-right, engraved fields */
:root,:root[data-theme="dark"]{
  --face:linear-gradient(150deg,#ffffff 0%,#fbfcfc 55%,#f1f3f4 100%);--pit:linear-gradient(150deg,#eef1f2,#fbfcfc);
  --up:0 0 0 1px rgba(112,124,134,.10),5px 7px 14px rgba(112,124,134,.24),2px 3px 4px rgba(112,124,134,.18),-3px -3px 8px #fff,
       inset 2px 2px 1px #fff,inset 3px 4px 6px rgba(255,255,255,.95),inset -2px -3px 3px rgba(112,124,134,.14),inset -5px -7px 12px rgba(112,124,134,.07);
  --up-s:0 0 0 1px rgba(112,124,134,.11),3px 5px 9px rgba(112,124,134,.24),1px 2px 3px rgba(112,124,134,.18),-2px -2px 6px #fff,
       inset 2px 2px 1px #fff,inset -2px -2px 3px rgba(112,124,134,.16),inset -4px -5px 8px rgba(112,124,134,.06);
  --down:0 1px 0 #fff,0 -1px 0 rgba(112,124,134,.12),inset 3px 4px 7px rgba(112,124,134,.30),inset 1px 1px 2px rgba(112,124,134,.25),inset -3px -3px 6px #fff;
  --down-s:0 1px 0 #fff,0 -1px 0 rgba(112,124,134,.12),inset 2px 3px 5px rgba(112,124,134,.28),inset 1px 1px 1px rgba(112,124,134,.22),inset -2px -2px 4px #fff}
body{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .45 0 0 0 0 .48 0 0 0 0 .52 0 0 0 .05 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E")!important}
select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e07a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 14px center,var(--pit)}
[dir=ltr] select{background-position:right 14px center,0 0}

/* ===== deeply carved in bright white crystal: faceted chamfer on all four sides (light top-left, cool shade bottom-right),
   glassy inner glow, deep cast shadow; fields are cut deep into the crystal ===== */
:root,:root[data-theme="dark"]{
  --cf:linear-gradient(160deg,#ffffff 0%,#f6f9fb 36%,#ffffff 52%,#edf2f6 100%);
  --cb:linear-gradient(140deg,#ffffff 0%,#e2e9ef 42%,#a9b8c6 100%);
  --pf:linear-gradient(160deg,#e3eaf0 0%,#f4f7f9 45%,#ffffff 100%);
  --pb:linear-gradient(140deg,#9fb0bf 0%,#dbe3ea 55%,#ffffff 100%);
  --up:0 0 0 1px rgba(140,160,180,.30),0 18px 30px -14px rgba(60,80,100,.42),0 5px 10px rgba(60,80,100,.12),inset 0 1px 0 #fff,inset 0 0 22px rgba(205,222,238,.45);
  --up-s:0 0 0 1px rgba(140,160,180,.32),0 10px 18px -8px rgba(60,80,100,.40),0 3px 6px rgba(60,80,100,.12),inset 0 1px 0 #fff,inset 0 0 12px rgba(205,222,238,.45);
  --down:0 1px 0 #fff,inset 5px 7px 12px rgba(60,80,100,.30),inset 2px 2px 3px rgba(60,80,100,.22),inset -3px -3px 8px #fff;
  --down-s:0 1px 0 #fff,inset 3px 4px 8px rgba(60,80,100,.28),inset 1px 1px 2px rgba(60,80,100,.2),inset -2px -2px 5px #fff;
  --gloss:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 52%)}
body{background:#fff linear-gradient(125deg,#ffffff 0%,#f9fbfd 30%,#ffffff 46%,#f7fafc 70%,#ffffff 100%) fixed!important}
.box,.tile,.c-list .tile{background:var(--cf) padding-box,var(--cb) border-box;border:4px solid transparent;box-shadow:var(--up)}
.logo,.top .who a,.top .who button,nav.tabs a,.btn.ghost,.tag,.msg{background:var(--cf) padding-box,var(--cb) border-box;border:3px solid transparent;box-shadow:var(--up-s)}
.subtabs button,.lfilter a.chip,.slider-bar button{background:var(--cf) padding-box,var(--cb) border-box!important;border:3px solid transparent!important;box-shadow:var(--up-s)}
nav.tabs a.on,.t-pill nav.tabs a.on,.t-block nav.tabs a.on,.t-underline nav.tabs a.on,.card,#id_children,#id_sections{background:var(--pf) padding-box,var(--pb) border-box;border:3px solid transparent;box-shadow:var(--down)}
input[type=text],input[type=password],input[type=url],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],input[type=file],textarea{background:var(--pf) padding-box,var(--pb) border-box;border:3px solid transparent;box-shadow:var(--down)}
select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e07a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 14px center padding-box,var(--pf) padding-box,var(--pb) border-box;border:3px solid transparent;box-shadow:var(--down)}
[dir=ltr] select{background-position:right 14px center,0 0,0 0}
.btn:not(.ghost){background:var(--gloss),linear-gradient(145deg,color-mix(in srgb,var(--p) 80%,#fff),var(--p) 60%,color-mix(in srgb,var(--p) 80%,#000));border:2px solid color-mix(in srgb,var(--p) 70%,#000);box-shadow:var(--up-s)}
.btn.red{background:var(--gloss),linear-gradient(145deg,#e3685d,var(--red) 60%,#8f2219);border-color:#8f2219}
.btn:active{box-shadow:var(--down)!important}
.msg{border-inline-start:4px solid var(--o)}

/* ===== sharp-edged pyramid relief: four flat facets meeting at crisp mitred corners, a sharp outer rim and a sharp
   inner rim around the flat top; carved fields are the same frustum inverted ===== */
:root,:root[data-theme="dark"]{
  --fu:#ffffff #b9c6d2 #98a8b7 #e9eef2;   /* raised frustum facets: top right bottom left (light from the top-left) */
  --fd:#98a8b7 #e9eef2 #ffffff #b9c6d2;   /* carved hollow: the same facets inverted */
  --rim:0 0 0 1px #7f92a4;
  --up:0 0 0 1px #7f92a4,inset 0 0 0 1px rgba(127,146,164,.65),0 14px 22px -10px rgba(50,70,90,.45);
  --up-s:0 0 0 1px #7f92a4,inset 0 0 0 1px rgba(127,146,164,.65),0 8px 14px -7px rgba(50,70,90,.42);
  --down:0 0 0 1px #7f92a4,inset 0 0 0 1px rgba(127,146,164,.6),inset 0 6px 10px -6px rgba(50,70,90,.35);
  --down-s:0 0 0 1px #7f92a4,inset 0 0 0 1px rgba(127,146,164,.6),inset 0 4px 7px -4px rgba(50,70,90,.32);
  --fb:rgba(255,255,255,.65) rgba(0,0,0,.28) rgba(0,0,0,.45) rgba(255,255,255,.32)}
.box,.tile,.c-list .tile{background:var(--cf) padding-box;border:7px solid;border-color:var(--fu);box-shadow:var(--up)}
.logo,.top .who a,.top .who button,nav.tabs a,.btn.ghost,.tag,.msg{background:var(--cf) padding-box;border:5px solid;border-color:var(--fu);box-shadow:var(--up-s)}
.subtabs button,.lfilter a.chip,.slider-bar button{background:var(--cf) padding-box!important;border:5px solid!important;border-color:var(--fu)!important;box-shadow:var(--up-s)}
nav.tabs a.on,.t-pill nav.tabs a.on,.t-block nav.tabs a.on,.t-underline nav.tabs a.on,.card,#id_children,#id_sections{background:var(--pf) padding-box;border:5px solid;border-color:var(--fd);box-shadow:var(--down)}
input[type=text],input[type=password],input[type=url],input[type=email],input[type=number],input[type=date],input[type=time],input[type=search],input[type=file],textarea{background:var(--pf) padding-box;border:5px solid;border-color:var(--fd);box-shadow:var(--down)}
select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e07a2e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left 14px center padding-box,var(--pf) padding-box;border:5px solid;border-color:var(--fd);box-shadow:var(--down)}
[dir=ltr] select{background-position:right 14px center,0 0}
.btn:not(.ghost){border:5px solid;border-color:var(--fb);background-clip:padding-box;box-shadow:var(--up-s)}
.subtabs button.on,.lfilter a.chip.on{border-color:var(--fb)!important}
.msg{border-inline-start-color:var(--o)}
.tag,.gear,.top .home{border-width:3px}

/* edges as very light reflections, no lines */
:root,:root[data-theme="dark"]{
  --fu:#ffffff #dde4ea #cad4dd #f3f6f8;
  --fd:#cad4dd #f3f6f8 #ffffff #dde4ea;
  --up:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 3px rgba(255,255,255,.9),0 0 8px rgba(50,70,90,.07),0 12px 20px -10px rgba(50,70,90,.32);
  --up-s:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 2px rgba(255,255,255,.9),0 0 6px rgba(50,70,90,.07),0 7px 12px -6px rgba(50,70,90,.30);
  --down:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 5px 9px -5px rgba(50,70,90,.22),0 1px 1px rgba(255,255,255,.9);
  --down-s:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 3px 6px -3px rgba(50,70,90,.2),0 1px 1px rgba(255,255,255,.9);
  --fb:rgba(255,255,255,.45) rgba(0,0,0,.14) rgba(0,0,0,.24) rgba(255,255,255,.22)}
.opt.sel{box-shadow:var(--down),0 0 0 2px var(--acc,var(--p))}
.badge{background:#c0392b;color:#fff;border-radius:999px;padding:0 7px;font-size:12px;font-weight:700}