/* داخلي پاڼې: نرم او روښانه شالید */
body.inner-page{
    position:relative;
    isolation:isolate;
    min-height:100vh;
    overflow-x:hidden;
    background-color:var(--page-bg);
    background-image:
        radial-gradient(ellipse at 10% 15%, rgba(14,165,233,.13), transparent 42%),
        radial-gradient(ellipse at 90% 35%, rgba(20,184,166,.12), transparent 40%),
        radial-gradient(ellipse at 50% 90%, rgba(234,179,8,.08), transparent 45%);
    background-attachment:fixed;
    color:var(--text);
}

/* نرمې خوځنده رنګینې څپې؛ د منځپانګې تر شا */
body.inner-page::before,
body.inner-page::after{
    content:"";
    position:fixed;
    display:block;
    left:-15%;
    width:130%;
    height:300px;
    border-radius:45%;
    pointer-events:none;
    z-index:0;
    filter:blur(48px);
    opacity:.20;
}

body.inner-page::before{
    top:20%;
    background:linear-gradient(100deg, var(--primary), #38bdf8, #5eead4, var(--secondary));
    animation:baryaWaveOne 24s ease-in-out infinite alternate;
}

body.inner-page::after{
    bottom:5%;
    background:linear-gradient(100deg, #67e8f9, var(--accent), #a5f3fc, var(--primary));
    opacity:.10;
    animation:baryaWaveTwo 30s ease-in-out infinite alternate;
}

/* د پاڼې منځپانګه د شالید له څپو پورته ساتل */
body.inner-page > header,
body.inner-page > main,
body.inner-page > footer,
body.inner-page > .container,
body.inner-page > section{
    position:relative;
    z-index:1;
}

@keyframes baryaWaveOne{
    0%{transform:translate3d(-3%,0,0) rotate(-4deg) scale(1);border-radius:45% 55% 60% 40%;}
    50%{transform:translate3d(3%,18px,0) rotate(3deg) scale(1.04);border-radius:55% 45% 40% 60%;}
    100%{transform:translate3d(-1%,-12px,0) rotate(-2deg) scale(1.02);border-radius:40% 60% 50% 50%;}
}

@keyframes baryaWaveTwo{
    0%{transform:translate3d(2%,0,0) rotate(3deg);border-radius:60% 40% 50% 50%;}
    100%{transform:translate3d(-3%,-18px,0) rotate(-3deg);border-radius:40% 60% 45% 55%;}
}

/* د داخلي پاڼو د منځپانګې مناسب واټن */
body.inner-page main{position:relative;z-index:0;}
body.inner-page section{scroll-margin-top:100px;}

/* د کورسونو، ښوونکو، خبرونو او فعالیتونو کارتونه */
body.inner-page .course-card,
body.inner-page .teacher-card,
body.inner-page .news-card,
body.inner-page .event-card,
body.inner-page .card{
    border:1px solid rgba(148,163,184,.20);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 28px rgba(15,23,42,.07);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

body.inner-page .course-card:hover,
body.inner-page .teacher-card:hover,
body.inner-page .news-card:hover,
body.inner-page .event-card:hover,
body.inner-page .card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 38px rgba(15,23,42,.12);
    border-color:rgba(14,165,233,.35);
}

/* د کارتونو انځورونه */
body.inner-page .course-card img,
body.inner-page .teacher-card img,
body.inner-page .news-card img,
body.inner-page .event-card img{
    max-width:100%;
    object-fit:cover;
}

/* فورمونه او د معلوماتو ساحې */
body.inner-page input,
body.inner-page select,
body.inner-page textarea{
    max-width:100%;
    border-radius:10px;
    border:1px solid rgba(148,163,184,.45);
    transition:border-color .2s ease, box-shadow .2s ease;
}

body.inner-page input:focus,
body.inner-page select:focus,
body.inner-page textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(14,165,233,.13);
}

/* تڼۍ */
body.inner-page button,
body.inner-page .btn,
body.inner-page .btn-modern{
    transition:transform .2s ease, box-shadow .2s ease;
}

body.inner-page button:hover,
body.inner-page .btn:hover,
body.inner-page .btn-modern:hover{
    box-shadow:0 6px 18px rgba(15,23,42,.12);
}

/* د موبایل لپاره */
@media(max-width:768px){
    body.inner-page{background-attachment:scroll;}
    body.inner-page::before,
    body.inner-page::after{height:200px;filter:blur(35px);opacity:.12;}
    body.inner-page .course-card,
    body.inner-page .teacher-card,
    body.inner-page .news-card,
    body.inner-page .event-card,
    body.inner-page .card{border-radius:14px;}
}

/* د حرکت کمولو غوښتنې ته درناوی */
@media(prefers-reduced-motion:reduce){
    body.inner-page::before,
    body.inner-page::after{animation:none !important;}
    body.inner-page *,
    body.inner-page *::before,
    body.inner-page *::after{
        scroll-behavior:auto !important;
        transition:none !important;
    }
}


/* =====================================================================
   BARYA LAAR — DESIGN REFINEMENT LAYER (v1.2)
   ---------------------------------------------------------------------
   This block is loaded after style.css, so it refines the existing
   design without renaming or removing anything. Every colour below is
   derived from the administrator-controlled variables
   (--primary, --secondary, --accent, --page-bg, --text, --nav-bg,
   --nav-text) which are injected by config.php on every page, so the
   admin colour settings keep working for the public site and admin panel.
   ===================================================================== */

/* ---------- 1. Design tokens (derived from admin colours) ---------- */
:root{
  /* Fallbacks for browsers without color-mix() */
  --primary-dark:var(--secondary);
  --primary-tint:#eef6fb;
  --primary-tint-2:#dcecf6;
  --btn-1:var(--primary);
  --btn-2:var(--secondary);
  --nav-bg-2:var(--nav-bg);
  --nav-dark:var(--nav-bg);
  --nav-hover:rgba(255,255,255,.14);
  --line:#d9e6ee;
  --line-strong:#c3d4df;
  --muted:#52606d;
  --ring:rgba(30,120,200,.28);
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-sm:0 6px 22px rgba(16,42,67,.07);
  --shadow:0 16px 42px rgba(16,42,67,.12);
  --shadow-lg:0 24px 60px rgba(16,42,67,.18);
  --radius:20px;
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  :root{
    --primary-dark:color-mix(in srgb,var(--primary) 76%,#000);
    --primary-tint:color-mix(in srgb,var(--primary) 8%,#fff);
    --primary-tint-2:color-mix(in srgb,var(--primary) 16%,#fff);
    --btn-1:color-mix(in srgb,var(--primary) 80%,#000);
    --btn-2:color-mix(in srgb,var(--primary) 62%,#000);
    --nav-bg-2:color-mix(in srgb,var(--nav-bg) 84%,#fff);
    --nav-dark:color-mix(in srgb,var(--nav-bg) 78%,#000);
    --nav-hover:color-mix(in srgb,var(--nav-text) 15%,transparent);
    --line:color-mix(in srgb,var(--primary) 16%,#fff);
    --line-strong:color-mix(in srgb,var(--primary) 28%,#fff);
    --muted:color-mix(in srgb,var(--text) 72%,#fff);
    --ring:color-mix(in srgb,var(--primary) 26%,transparent);
  }
}

/* ---------- 2. Base typography, spacing and safety nets ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:16px}
html[lang="en"] body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;line-height:1.75}
img,video,svg{max-width:100%}
h1,h2,h3,h4,p,a,li,label,td,th{overflow-wrap:anywhere}
h1,h2,h3{color:var(--secondary)}
.hero h1,.hero h2,.hero h3,.register-section h2,.site-footer h3,.site-footer h4{color:inherit}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px}
.section{padding:clamp(56px,8vw,96px) 0}
.lead{color:var(--muted);font-size:clamp(15.5px,1.6vw,17px)}
.section-heading p,.contact-details,.card-body p,.teacher-card p,.meta,.empty{color:var(--muted)}
.eyebrow.dark,.card-kicker{color:var(--primary-dark)}
.text-link,.card-kicker,.teacher-card .teacher-subject,.translation-fieldset legend,summary{color:var(--primary-dark)}
.section-heading h2,.split h2,.contact-grid h2,.detail-page h1{color:var(--secondary)}
.section-heading h2::after,.split h2::after,.contact-grid h2::after{content:"";display:block;width:54px;height:4px;margin-top:10px;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.empty{background:#fff;border:1px dashed var(--line-strong);border-radius:16px;padding:26px;text-align:center}

/* Sections: soft, bright backgrounds derived from the admin background colour */
.section:not(.register-section){background-color:var(--page-bg)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .section:not(.register-section){background-color:color-mix(in srgb,var(--page-bg) 55%,#fff)}
  .section.section-muted{background-image:linear-gradient(135deg,var(--primary-tint),color-mix(in srgb,var(--primary) 3%,#fff))}
}

/* ---------- 3. Header and navigation ---------- */
body.inner-page > header.site-header{position:sticky;top:0;z-index:100}  /* sticky header was being overridden by inner-page.css */
.site-header{
  background:var(--nav-bg);
  background:linear-gradient(110deg,var(--nav-bg),var(--nav-bg-2));
  color:var(--nav-text);
  border-bottom:1px solid var(--nav-hover);
  box-shadow:0 8px 28px rgba(12,35,48,.14);
}
.header-inner{min-height:78px;gap:20px}
.brand{color:var(--nav-text);font-size:clamp(15px,1.6vw,19px);line-height:1.5;min-width:0}
.brand span{min-width:0}
.brand-logo{width:50px;height:50px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.12);padding:3px;flex:none}
.main-nav{gap:4px;font-size:14.5px;font-weight:700}
.main-nav a:not(.nav-cta){position:relative;color:var(--nav-text);opacity:.94;padding:8px 13px;border-radius:11px;transition:background .25s var(--ease),opacity .25s}
.main-nav a:not(.nav-cta)::after{content:"";position:absolute;inset-inline:13px;bottom:3px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transition:transform .3s var(--ease)}
.main-nav a:not(.nav-cta):hover{color:var(--nav-text);background:var(--nav-hover);opacity:1}
.main-nav a:not(.nav-cta):hover::after{transform:scaleX(.5)}
.main-nav a[aria-current]{background:var(--nav-hover);opacity:1}
.main-nav a[aria-current]::after{transform:scaleX(1)}
.nav-cta{margin-inline-start:6px;padding:10px 20px;border-radius:999px;background:#fff;color:var(--primary-dark);border:1px solid #fff;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.12);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.nav-cta:hover{color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.main-nav .language-select select{border-radius:999px;padding:.5rem .9rem;cursor:pointer}
.menu-toggle{width:46px;height:46px;border-radius:12px;border:1px solid var(--nav-hover);background:var(--nav-hover);color:var(--nav-text);font-size:22px;line-height:1;cursor:pointer;place-items:center;transition:background .2s}
.menu-toggle:hover{background:var(--nav-hover);box-shadow:none}

@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){
  .menu-toggle{display:inline-grid}
  .main-nav{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;gap:4px;padding:14px 20px 22px;background:var(--nav-bg);color:var(--nav-text);border-radius:0 0 22px 22px;box-shadow:0 24px 40px rgba(12,35,48,.22);max-height:calc(100vh - 80px);overflow-y:auto}
  .main-nav.open{display:flex;animation:navIn .28s var(--ease)}
  .main-nav a:not(.nav-cta){padding:12px 14px;font-size:15.5px}
  .main-nav a:not(.nav-cta)::after{inset-inline:14px;bottom:6px}
  .nav-cta{margin:8px 0 0;text-align:center;padding:12px 20px}
  .main-nav .language-select{width:100%;margin:8px 0 0}
  .main-nav .language-select select{width:100%;max-width:none;border-radius:12px;padding:.7rem .9rem}
}

/* ---------- 4. Buttons (consistent normal / hover / active / disabled) ---------- */
.btn{
  background:var(--btn-1);
  background:linear-gradient(135deg,var(--btn-1),var(--btn-2));
  color:#fff;border:1px solid transparent;border-radius:12px;
  min-height:46px;padding:11px 24px;font-weight:700;font-size:15px;line-height:1.4;text-align:center;
  box-shadow:0 6px 16px rgba(16,42,67,.15);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s,background .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,42,67,.22);filter:brightness(1.07)}
.btn:active{transform:translateY(0);box-shadow:0 3px 8px rgba(16,42,67,.18);filter:brightness(.97)}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.35)}
.btn-small{min-height:36px;padding:7px 16px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.btn-light{background:var(--primary-tint-2);color:var(--primary-dark);box-shadow:none;border-color:var(--line)}
.btn-light:hover{background:var(--primary-tint);box-shadow:var(--shadow-sm);filter:none}
.btn-reset{background:#fff;color:var(--primary-dark);border:1px solid var(--line-strong);box-shadow:none}
.btn-reset:hover{background:var(--primary-tint);filter:none}
.hero .btn{background:#fff;color:var(--primary-dark);border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.hero .btn:hover{background:var(--primary-tint);filter:none}
.hero .btn-outline,.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.85);box-shadow:none}
.hero .btn-outline:hover{background:rgba(255,255,255,.16)}
.danger-link{background:#fff5f4;color:#b42318;border:1px solid #f6d0cc;border-radius:9px;padding:6px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.danger-link:hover{background:#fee4e2;transform:translateY(-1px)}
.logout-form button{border-radius:12px;font-weight:700;transition:background .2s,transform .2s}
.logout-form button:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}

/* ---------- 5. Cards: courses, news, events, teachers ---------- */
.card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:clamp(18px,2.4vw,28px)}
body.inner-page .card,
body.inner-page .course-card,
body.inner-page .news-card,
body.inner-page .event-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
body.inner-page .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.card-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2.2vw,26px)}
.card-body h3{color:var(--secondary);font-size:18px}
.card-body p{font-size:14.5px;line-height:1.95}
.card-body p:not(.meta){display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.card-body>a.text-link:first-of-type{margin-top:auto;padding-top:6px}
.card-body>a.text-link+a.text-link{margin-top:2px}
.card-kicker{display:inline-block;margin-bottom:4px;font-size:12.5px}
.meta{font-size:13px!important}
.card-placeholder{height:170px;background:linear-gradient(135deg,var(--primary-tint-2),var(--primary-tint))}

/* Teachers */
.teacher-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,225px),1fr));gap:clamp(16px,2vw,26px)}
body.inner-page .teacher-card{display:flex;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 18px 24px}
body.inner-page .teacher-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.teacher-card h3{color:var(--secondary);margin-bottom:2px}
.teacher-card p{font-size:13.5px;line-height:1.9}
.teacher-avatar{width:110px;height:110px;font-size:46px;background:var(--primary-tint-2)}

/* ---------- 6. IMAGES: show every image complete (no cropping) ----------
   Landscape images stay landscape, portrait images stay portrait.
   Width follows the container; height follows the image's own ratio. */
body.inner-page .card>img,
body.inner-page .course-card>img,
body.inner-page .news-card>img,
body.inner-page .event-card>img{
  width:100%;height:auto;max-height:420px;object-fit:contain;object-position:center;
  background:linear-gradient(135deg,var(--primary-tint),var(--primary-tint-2));
  border-bottom:1px solid var(--line);
}
body.inner-page .teacher-card img:not(.teacher-avatar){
  width:100%;height:auto;max-height:320px;object-fit:contain;object-position:center;
  border-radius:14px;margin:0 auto 16px;background:var(--primary-tint);
}
.about-visual{display:flex;align-items:center;justify-content:center;min-height:0;background:var(--primary-tint-2);border-radius:24px}
.about-visual img{width:100%;height:auto;max-height:560px;object-fit:contain}
.detail-featured-image{width:auto;max-width:100%;height:auto;max-height:80vh;object-fit:contain;margin:1.5rem auto;border-radius:18px;background:var(--primary-tint);box-shadow:var(--shadow-sm)}
/* Galleries: masonry columns so portrait and landscape photos sit together at their true ratio */
.gallery-grid{display:block;column-width:250px;column-gap:1rem;margin:2rem 0}
.gallery-grid figure{break-inside:avoid;margin:0 0 1rem;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.gallery-grid img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:var(--primary-tint)}
.gallery-grid figcaption{padding:.9rem 1rem}
.gallery-grid figcaption p{margin:.25rem 0 0;font-size:14px;color:var(--muted)}
.gallery-grid figcaption strong:empty,.gallery-grid figcaption p:empty{display:none}
/* Admin previews */
.current-image{width:auto;height:auto;max-width:180px;max-height:130px;object-fit:contain;background:var(--primary-tint);border:1px solid var(--line);padding:4px}
.media-item>img{height:auto;max-height:240px;object-fit:contain;background:var(--primary-tint)}
.gallery-admin-grid img{height:auto;aspect-ratio:auto;max-height:220px;object-fit:contain;background:var(--primary-tint)}
.gallery-admin-grid{align-items:start}
/* Hero background photo: keep it covering the banner (the shorthand in the old theme block reset this) */
.hero{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ---------- 7. Forms (registration, contact, admin) ---------- */
.form-panel{border-radius:24px;padding:clamp(22px,3vw,36px);gap:16px;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.form-panel label,.admin-panel label{font-size:13.5px;font-weight:700;color:var(--text);gap:7px}
.form-panel input,.form-panel textarea,.form-panel select,
.admin-panel input:not([type=checkbox]):not([type=color]):not([type=file]),.admin-panel textarea,.admin-panel select{
  padding:12px 14px;min-height:46px;font-size:15px;font-weight:400;border:1.5px solid var(--line-strong);border-radius:12px;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.form-panel textarea,.admin-panel textarea{min-height:120px;resize:vertical;line-height:1.8}
.form-panel ::placeholder,.admin-panel ::placeholder{color:#8a97a3}
.form-panel input:focus,.form-panel textarea:focus,.form-panel select:focus,
.admin-panel input:focus,.admin-panel textarea:focus,.admin-panel select:focus,
body.inner-page input:focus,body.inner-page select:focus,body.inner-page textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
.form-panel small{font-size:12.5px;line-height:1.7;color:var(--muted)}
input[type=email],input[type=url],input[type=password]{direction:ltr}
html[dir="rtl"] input[type=email],html[dir="rtl"] input[type=url],html[dir="rtl"] input[type=password]{text-align:right}
.search-form input{min-height:44px;padding:10px 14px;border-radius:999px;border:1.5px solid var(--line-strong);background:#fff}
.search-form.compact .btn-small{border-radius:999px}

/* Registration + contact */
.register-section{background:linear-gradient(125deg,var(--secondary),var(--primary))}
.register-section h2,.register-section p{color:#fff}
.register-wrap>div p{color:rgba(255,255,255,.92);font-size:16px}
.contact-details{display:grid;gap:10px;margin-top:26px}
.contact-details p{margin:0;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);color:var(--text);font-weight:600;word-break:break-word}

/* ---------- 8. Footer ---------- */
.site-footer{background:var(--nav-bg);background:linear-gradient(120deg,var(--nav-dark),var(--nav-bg));color:var(--nav-text);padding-top:clamp(44px,6vw,64px)}
.footer-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(28px,4vw,52px)}
.site-footer h3,.site-footer h4{color:var(--nav-text)}
.site-footer h4{position:relative;padding-bottom:10px;margin-bottom:14px}
.site-footer h4::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:34px;height:3px;border-radius:3px;background:var(--accent)}
.site-footer p{color:var(--nav-text);opacity:.86;font-size:14px;line-height:1.9}
.social-links{gap:10px}
.social-links a{padding:6px 16px;border:1px solid var(--nav-hover);border-radius:999px;font-size:13px;transition:background .25s,transform .25s}
.social-links a:hover{color:var(--nav-text);background:var(--nav-hover);transform:translateY(-2px)}
.footer-login a{background:var(--nav-hover);color:var(--nav-text);opacity:.95;font-size:13px;font-weight:700}
.footer-login a:hover{background:var(--nav-hover);opacity:1}
.copyright{color:var(--nav-text);opacity:.8;border-top:1px solid var(--nav-hover);font-size:13px}

/* Alerts / flash messages */
.alert{border-radius:14px;border:1px solid transparent;border-inline-start-width:5px;font-size:14.5px;box-shadow:var(--shadow-sm)}
.alert.success{background:#e8f8ef;color:#145c34;border-color:#bfe8d0}
.alert.error{background:#fff1f0;color:#9b241d;border-color:#f6cdc9}

/* ---------- 9. Detail, search and login pages (inner pages) ---------- */
.detail-page{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:clamp(20px,4vw,46px)}
.detail-page h1{margin-top:.6rem}
.detail-content{color:var(--text);font-size:clamp(16px,1.7vw,17.5px);line-height:2.05}
.login-page .login-panel{border-radius:26px}

/* Flowing water-wave background on informational (non-home, non-admin) pages.
   Sections become transparent so the slow colour waves show through.
   The homepage and the admin dashboard keep their existing backgrounds. */
body.inner-page:not(:has(.hero)):not(:has(.admin-shell)) .section:not(.register-section){background:transparent}
body.inner-page:not(:has(.hero)):not(:has(.admin-shell))::before{opacity:.30;background-size:220% 100%;animation:baryaWaveOne 24s ease-in-out infinite alternate,baryaFlow 46s ease-in-out infinite alternate}
body.inner-page:not(:has(.hero)):not(:has(.admin-shell))::after{opacity:.18;background-size:220% 100%;animation:baryaWaveTwo 30s ease-in-out infinite alternate,baryaFlow 58s ease-in-out infinite alternate-reverse}
@keyframes baryaFlow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- 10. Admin panel ---------- */
.admin-shell{position:relative;background:transparent;min-height:calc(100vh - 78px)}
.admin-sidebar{background:var(--nav-bg);background:linear-gradient(180deg,var(--nav-dark),var(--nav-bg));color:var(--nav-text);padding:26px 16px;gap:22px;box-shadow:inset -1px 0 0 var(--nav-hover)}
.admin-brand{border-bottom:1px solid var(--nav-hover)}
.admin-brand strong{color:var(--nav-text);font-size:16px}
.admin-brand small{color:var(--nav-text);opacity:.78;font-size:12px}
.admin-brand>span{background:#fff;color:var(--primary-dark);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.admin-sidebar nav{gap:4px}
.admin-sidebar nav a{position:relative;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600;color:var(--nav-text);opacity:.9;transition:background .2s,opacity .2s,transform .2s}
.admin-sidebar nav a:hover{background:var(--nav-hover);opacity:1}
.admin-sidebar nav a.active{background:var(--nav-hover);opacity:1;font-weight:800}
.admin-sidebar nav a.active::before{content:"";position:absolute;inset-inline-start:0;top:20%;bottom:20%;width:4px;border-radius:4px;background:var(--accent)}
.admin-main{padding:clamp(18px,3vw,36px)}
.admin-top{padding-bottom:18px;border-bottom:1px solid var(--line)}
.admin-top h1{font-size:clamp(22px,3vw,30px);color:var(--secondary)}
.admin-user{font-size:13.5px;flex-wrap:wrap}
.admin-user a{color:var(--primary-dark)}
.admin-language select{border-radius:10px;border:1.5px solid var(--line-strong);min-height:38px}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.stat-card{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);padding:20px 22px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stat-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary),var(--accent))}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.stat-card span,.stat-card small{font-size:12.5px;color:var(--muted)}
.stat-card strong{color:var(--primary-dark);font-size:32px;line-height:1.3}
.admin-panel{border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);padding:clamp(18px,2.4vw,28px)}
.admin-panel h2{font-size:19px;color:var(--secondary);padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.admin-panel small{font-size:12.5px}
.admin-form-grid{gap:18px}
.admin-form-grid>.translation-fieldset{grid-column:1/-1;display:grid;gap:14px;background:var(--primary-tint);border:1px solid var(--line);border-radius:16px;padding:18px}
.translation-fieldset legend{font-size:14px;font-weight:800;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:999px}
.admin-panel input[type=file]{width:100%;font-size:13px;padding:10px;border:1.5px dashed var(--line-strong);border-radius:12px;background:var(--primary-tint);cursor:pointer}
.color-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.color-grid input[type=color]{height:48px;border-radius:12px;border:1.5px solid var(--line-strong);cursor:pointer}
.check-label{background:var(--primary-tint);border:1px solid var(--line);border-radius:12px;font-size:14px;cursor:pointer}
.quick-links a{background:var(--primary-tint-2);color:var(--primary-dark);padding:12px 18px;border-radius:12px;font-size:14px;transition:transform .2s,box-shadow .2s}
.quick-links a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.form-actions{gap:12px;margin-top:22px}
/* Tables */
.table-wrap{border:1px solid var(--line);border-radius:14px;background:#fff}
table{font-size:13.5px}
th,td{text-align:start;padding:14px 14px}
th{background:var(--primary-tint);color:var(--secondary);font-size:12.5px;font-weight:800;white-space:nowrap}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--primary-tint)}
.actions a{background:var(--primary-tint-2);padding:6px 14px;border-radius:9px;font-size:12.5px}
.actions a:hover{background:var(--primary-tint)}
.status-pill{background:var(--primary-tint-2);color:var(--primary-dark);font-size:12px;font-weight:700;padding:4px 12px}
.inline-form select{min-height:36px!important;border-radius:9px!important}
.media-item{border-radius:16px;box-shadow:var(--shadow-sm)}
.media-item strong{font-size:13.5px}
.media-item small{font-size:12px}
.gallery-admin-grid article{border-radius:14px;background:#fff}
.narrow-panel{max-width:560px}

/* ---------- 11. Responsive refinements ---------- */
@media(max-width:1000px){
  .admin-shell{grid-template-columns:220px minmax(0,1fr)}
  .contact-grid,.register-wrap,.split{gap:36px}
}
@media(max-width:900px){
  /* admin sidebar becomes a compact top bar with a scrolling menu */
  .admin-shell{display:block}
  .admin-sidebar{padding:14px 14px 12px;gap:10px;box-shadow:none}
  .admin-sidebar nav{flex-direction:row;overflow-x:auto;scrollbar-width:thin;padding-bottom:6px}
  .admin-sidebar nav a{white-space:nowrap;padding:10px 14px}
  .admin-sidebar nav a.active::before{inset-inline:14px;top:auto;bottom:3px;width:auto;height:3px}
  .logout-form{position:static;width:100%;margin-top:0}
  .logout-form button{width:100%;font-size:13px;padding:10px}
}
@media(max-width:760px){
  body{font-size:15.5px}
  .header-inner{min-height:68px}
  .brand-logo{width:42px;height:42px}
  .section-heading{gap:12px}
  .card-grid{grid-template-columns:1fr}
  body.inner-page .card>img{max-height:380px}
  .teacher-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-grid{column-width:100%}
  .detail-page{border-radius:20px}
  .form-panel{border-radius:20px}
  .contact-details p{font-size:14.5px}
  .admin-main{padding:16px}
  .table-wrap{border-radius:12px}
}
@media(max-width:480px){
  .teacher-grid{grid-template-columns:1fr}
  .btn{padding:11px 18px}
  .hero-actions .btn{flex:1 1 100%}
  .search-form{max-width:100%}
}

/* ---------- 12. Respect reduced-motion settings ---------- */
@media(prefers-reduced-motion:reduce){
  body.inner-page::before,body.inner-page::after,
  .section:not(.register-section)::before,.hero::before{animation:none!important}
  .btn,.card,.teacher-card,.stat-card,.nav-cta,.main-nav a,.main-nav.open{transition:none!important;animation:none!important}
  .btn:hover,.card:hover,.teacher-card:hover,.stat-card:hover,.nav-cta:hover{transform:none!important}
}

/* Menu items and buttons never break in the middle of a word */
.main-nav a,.nav-cta,.btn,.menu-toggle,.footer-login a{overflow-wrap:normal;word-break:normal}
.main-nav a:not(.nav-cta),.nav-cta{white-space:nowrap}
@media(max-width:1100px){.main-nav a:not(.nav-cta),.nav-cta{white-space:normal}}