/* Visual layer only. Existing layout, breakpoints, data and interactions stay in
   their original styles/views. Palette follows the supplied Persian UI kit. */
:root {
    --color-primary: #0f5036;
    --color-primary-hover: #0b4140;
    --color-teal: #0e6b60;
    --color-secondary: #2e9d8f;
    --color-secondary-soft: #8fd1c7;
    --color-accent: #d4af37;
    --color-accent-text: #936a25;
    --color-accent-soft: #eed9a8;
    --color-bg: #faf8f1;
    --color-bg-alt: #f4efe6;
    --color-surface: #fffdf9;
    --color-text: #183b40;
    --color-text-muted: #687280;
    --color-border: #e7dfd0;
    --color-success: #16834b;
    --color-danger: #c63843;
    --radius-sm: 8px;
    --radius-card: 12px;
    --radius-lg: 16px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --shadow-sm: 0 3px 12px rgb(61 49 24 / 5%);
    --shadow-card: 0 5px 20px rgb(61 49 24 / 6%);
    --shadow-hover: 0 9px 26px rgb(15 80 54 / 11%);
    --transition-ui: 180ms ease;
    --pattern-geometric: url("../images/reskin-geometric.svg");
    --ornament-star: url("../images/reskin-ornament.svg");
    --pattern-paper: url("../images/reskin-lattice.svg");
    --frame-arch: url("../images/reskin-arch.svg");
    --ornament-corner: url("../images/reskin-corner.svg");
    --pattern-tile: url("../images/reskin-tile-border.svg");
    /* Bridge the existing component palettes to one shared visual system. */
    --ink: var(--color-text);
    --muted: var(--color-text-muted);
    --green-950: #093e43;
    --green-900: #0f504c;
    --green-800: var(--color-teal);
    --green-600: #227c73;
    --green-100: #e0f0eb;
    --green-50: #f3f8f5;
    --gold: var(--color-accent);
    --gold-soft: var(--color-accent-soft);
    --paper: var(--color-bg);
    --white: var(--color-surface);
    --line: var(--color-border);
    --shadow: var(--shadow-card);
    --school-ink: var(--color-text);
    --school-muted: var(--color-text-muted);
    --school-indigo: var(--color-teal);
    --school-indigo-dark: var(--green-950);
    --school-violet: #227c73;
    --school-coral: var(--color-accent-text);
    --school-peach: var(--color-accent-soft);
    --school-sand: var(--color-bg);
    --school-paper: var(--color-surface);
    --school-line: var(--color-border);
    --school-shadow: var(--shadow-card);
    --qa-primary: var(--color-teal);
    --qa-dark: var(--green-950);
    --qa-gold: var(--color-accent-soft);
    --qa-bg: var(--color-bg);
    --qa-surface: var(--color-surface);
    --qa-text: var(--color-text);
    --qa-muted: var(--color-text-muted);
    --qa-border: var(--color-border);
    --qe-primary: var(--color-teal);
    --qe-primary-dark: var(--green-950);
    --qe-accent: var(--color-accent-soft);
    --qe-sidebar: var(--green-950);
}

/* Keep the management panel's existing dark theme available. */
html:not([data-bs-theme="dark"]) {
    --qe-bg: var(--color-bg);
    --qe-surface: var(--color-surface);
    --qe-text: var(--color-text);
    --qe-muted: var(--color-text-muted);
    --qe-border: var(--color-border);
}

body.public-site, body.school-site, .qe-auth-body {
    color: var(--color-text);
    background: var(--pattern-paper) 0 0 / 160px 160px repeat, var(--color-bg);
}
.public-site :is(h1, h2, h3) { letter-spacing: -.025em; }
.public-site :is(button, input, select, textarea) { font-family: inherit; }
:is(.public-site, .qe-auth-body, .qe-admin-body) :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
}
:is(.public-site, .qe-auth-body, .qe-admin-body) :is(button, input, select, textarea):disabled {
    cursor: not-allowed;
}

/* Main navigation: warm surfaces, teal ink and restrained gold edges. */
.public-header, .school-header {
    color: var(--color-text);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.public-header, .public-header--scrolled, .school-header {
    color: var(--color-surface);
    background: var(--pattern-geometric) center / 84px 84px repeat, var(--green-950);
    border-bottom: 1px solid var(--color-accent-soft);
    box-shadow: none;
}
.public-header .public-brand small { color: #c9ded8; }
.public-header .public-brand__mark {
    color: var(--color-accent-soft);
    background: transparent;
    border-color: var(--color-accent-soft);
    box-shadow: none;
    border-radius: 16px 4px 16px 4px;
}
.public-header .header-button--light {
    color: var(--green-950) !important;
    background: var(--color-bg);
    border-color: var(--color-accent-soft);
}
.public-header .header-button--light:hover { background: var(--color-accent-soft); }
.public-brand__mark, .school-brand__logo {
    color: var(--color-primary);
    background: var(--color-bg);
    border: 1px solid var(--color-accent-soft);
    border-radius: 14px 14px 8px 8px;
    box-shadow: inset 0 0 0 4px var(--color-surface);
}
.public-brand small, .school-brand__title small { color: var(--color-text-muted); }
.school-brand { color: var(--color-text) !important; }
.school-header .school-brand { color: var(--color-surface) !important; }
.school-header .school-brand__title small { color: #c9ded8; }
.header-button, .school-header-button {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}
.header-button--light, .school-header-button--solid {
    color: var(--color-surface) !important;
    background: linear-gradient(135deg, var(--color-teal), var(--green-950));
    border-color: var(--color-teal);
}
.header-button--admin, .school-header-button--admin {
    color: var(--color-text) !important;
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
}
.header-button:hover, .school-header-button:hover { background: var(--color-primary-hover); color: var(--color-surface) !important; }
.public-toolbar, .school-toolbar {
    color: var(--color-text);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.public-toolbar {
    background: var(--color-surface);
    box-shadow: 0 3px 12px rgb(61 49 24 / 4%);
}
.school-toolbar {
    background: var(--color-surface);
    box-shadow: 0 3px 12px rgb(61 49 24 / 4%);
}
.school-header .school-header-button--solid {
    color: var(--green-950) !important;
    background: var(--color-bg);
    border-color: var(--color-accent-soft);
}
.school-header .school-header-button--solid:hover { background: var(--color-accent-soft); }
.school-header .school-brand:focus-visible { outline-color: var(--color-accent-soft); }
.school-toolbar__link { color: var(--color-text) !important; }
.school-toolbar__link i { color: var(--color-teal); }
.school-toolbar__link:hover, .school-toolbar__link.is-active {
    color: var(--color-teal) !important;
    background: var(--green-100);
}
.school-toolbar__link--assembly { border-inline-start-color: var(--color-border); }
.public-toolbar__toggle, .school-toolbar__toggle {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
}
.school-toolbar__toggle i { color: var(--color-teal); }
.public-toolbar__link, .public-profile-button, .school-site .public-profile-button { border-radius: var(--radius-sm); }
.school-site .public-profile-button { background: var(--color-surface); border-color: var(--color-border); }
.school-site .public-profile-button strong, .school-site .public-profile-chevron { color: var(--color-text); }
.school-site .public-profile-button small { color: var(--color-text-muted); }
.public-profile-icon, .school-site .public-profile-icon { color: var(--color-surface); background: var(--color-teal); }
:is(.public-toolbar__menu, .public-toolbar__submenu, .public-profile-menu, .school-toolbar__committees-menu) {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-hover);
}

/* Existing sections keep their dimensions and order. */
.assembly-main, .public-search-page, .news-page, .news-details-page { background: transparent; }
.directory-section, .useful-section, .news-section, .thematic-home-section,
.instructors-home-section, .instructor-articles-section { background: transparent; }
.useful-section, .instructors-home-section { border-block: 0; }
/* Let the page's paper pattern and tile rails continue around every school
   content panel, including history, archives and detail pages. */
.school-site :is(.school-section, .school-list-section, .school-article-section,
    .school-course-details-section, .school-study-path-details-section) {
    background: transparent;
}
.school-site .school-study-paths-section { border-block: 0; }
.school-main .school-news-section > .site-container {
    padding: 24px;
    background: var(--pattern-geometric) center / 84px 84px repeat, var(--green-950);
    border: 1px solid var(--color-accent-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.school-main .school-news-section::before { display: none; }
.school-news-section .school-section-heading { border-color: rgb(238 217 168 / 25%); }
.assembly-main .assembly-section:not(.about-section) > .site-container,
.school-main .school-section:not(.school-news-section) > .site-container {
    position: relative;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--ornament-corner) top right / 96px 96px no-repeat,
        linear-gradient(135deg, #fffdfa, #fffdfa 70%, #fbf7ed);
    box-shadow: var(--shadow-card);
}
.assembly-main .assembly-section, .school-main .school-section { padding-block: 18px; }
.assembly-main .directory-section { padding-top: 24px; }
.directory-section::before, .directory-section::after, .useful-section::before, .news-section::after { display: none; }
.section-heading, .school-section-heading, .school-history-heading {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-4);
    background: linear-gradient(90deg, transparent, var(--color-accent-soft), transparent) bottom / 100% 1px no-repeat;
}
.assembly-main .section-heading h2, .school-main .school-section-heading h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    line-height: 1.65;
}
.section-heading > div { padding-inline-end: 12px; }
.section-kicker {
    color: var(--color-accent-text);
    background: transparent;
    border-color: transparent;
    padding-inline: 0;
}
.section-kicker::before { background: var(--color-accent-soft); }
.section-heading h2::after {
    width: 22px;
    height: 22px;
    margin-inline-start: 10px;
    margin-inline-end: 0;
    border-radius: 0;
    background: var(--ornament-star) center / contain no-repeat;
    box-shadow: none;
}
.section-heading > p { border-color: var(--color-accent-soft); }
.directory-separator::before, .directory-separator::after { background: var(--color-border); }
.directory-separator > span { border-color: var(--color-accent-text); }

/* Consistent SchoolCard, WorkingGroupCard, QuickLinkTile and content modules. */
.public-site :is(.directory-logo-card, .useful-card, .thematic-square-card,
    .instructor-home-card, .news-card, .news-list-card, .in-person-class-card,
    .thematic-course-card, .instructor-content-card, .public-search-card,
    .school-course-card, .school-study-path-card, .school-archive-card) {
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui);
}
.public-site :is(.directory-logo-card, .useful-card, .thematic-square-card,
    .instructor-home-card, .news-card, .news-list-card, .in-person-class-card,
    .thematic-course-card, .instructor-content-card, .public-search-card,
    .school-course-card, .school-study-path-card, .school-archive-card):hover {
    border-color: var(--color-secondary-soft);
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}
.useful-card--disabled:hover { transform: none; box-shadow: var(--shadow-card); }
.directory-logo-card::before { display: none; }
.directory-logo-card::after, .news-card::after { display: none; }
.directory-logo {
    border-radius: 0;
    background: var(--frame-arch) center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    padding: 36px 22px 20px;
}
.directory-logo img { padding: 3px; background: transparent; }
.public-site .home-card-row .directory-logo { width: 128px; height: 144px; margin-bottom: 12px; }
.public-site .home-card-row .directory-logo-card {
    min-height: 220px;
    padding: 12px 12px 18px;
    border-radius: var(--radius-card);
    background: linear-gradient(180deg, #fffdfa 65%, #f7f3e9);
}
.public-site .home-card-row .directory-logo-card h3 { font-size: .84rem; }
.public-site .directory-logo-card:hover .directory-logo { border-color: transparent; box-shadow: none; transform: translateY(-2px); }
.useful-logo, .home-card-row .useful-logo { border-radius: var(--radius-card); background: var(--green-100); box-shadow: none; border-color: var(--color-border); }
.public-site .home-card-row .instructor-home-card > div {
    width: 112px;
    height: 130px;
    padding: 29px 17px 14px;
    border-radius: 0;
    background: var(--frame-arch) center / 100% 100% no-repeat;
    border: 0;
}
.directory-logo img,
.instructor-home-card img { border-radius: 40% 40% 5px 5px; }
.thematic-square-card__media {
    width: 104px;
    height: 114px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    padding: 26px 16px 12px;
    overflow: hidden;
    color: var(--color-teal);
    background: var(--frame-arch) center / contain no-repeat;
    font-size: 1.6rem;
}
.thematic-square-card__media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border-radius: 40% 40% 5px 5px;
}
.public-site .home-card-row { scrollbar-color: var(--color-secondary-soft) transparent; }
.news-badge, .school-news-card__media > span { background: var(--color-accent-soft); color: var(--color-text); border-radius: var(--radius-sm); }
.public-search-card__owner, .committee-school-name { background: var(--green-100); color: var(--color-teal); }
.instructor-home-card span, .thematic-course-card__body small, .instructor-content-card small { color: var(--color-accent-text); }
.public-site :is(.news-filter, .school-filter, .news-details-article, .news-sidebar-card,
    .school-course-description, .school-episodes, .school-study-path-sequence,
    .school-history-card, .public-search-state, .school-episode-panel) {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.assembly-empty.wide { background: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-card); }

/* Low-contrast ornament is confined to existing banners and framing. */
.home-global-search__panel, .public-search-hero, .thematic-hero,
.instructor-profile-hero, .school-study-path-hero, .qe-account-hero,
.qe-auth-intro {
    background-color: var(--green-950);
    background-image: var(--pattern-geometric), linear-gradient(125deg, var(--green-950), var(--color-teal));
    background-size: 84px 84px, auto;
}
.home-global-search__panel { border-color: var(--color-accent-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.home-global-search__panel {
    position: relative;
    background-image: var(--ornament-corner), var(--pattern-geometric), linear-gradient(125deg, var(--green-950), var(--color-teal));
    background-position: top right, center, center;
    background-size: 120px 120px, 84px 84px, auto;
    background-repeat: no-repeat, repeat, no-repeat;
}
.news-page-hero, .news-details-hero {
    color: var(--color-text);
    background: linear-gradient(110deg, var(--color-bg-alt), var(--color-bg));
    border-bottom: 1px solid var(--color-accent-soft);
}
.news-page-hero::before, .news-details-hero::before {
    background: var(--ornament-star) center / contain no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: .12;
    pointer-events: none;
}
.news-page-hero h1, .news-details-hero h1 { color: var(--color-text); font-size: clamp(1.6rem, 3.3vw, 2.6rem); }
.news-page-hero p, .news-page-hero .page-breadcrumb, .news-details-hero .page-breadcrumb { color: var(--color-text-muted); }
.news-page-hero .section-kicker, .news-details-hero .section-kicker { color: var(--color-accent-text); }
.news-page-hero__emblem { background: var(--color-surface); border-color: var(--color-border); border-radius: 48% 48% 12px 12px; box-shadow: var(--shadow-card); }
.news-page-hero__emblem i { color: var(--color-accent-text); }
.news-page-hero__emblem span { color: var(--color-text-muted); }
.about-section { background: var(--green-950); }
.about-section .section-heading { border-color: rgb(238 217 168 / 25%); }
.about-section .section-kicker { color: var(--color-accent-soft); }
.about-emblem { border-color: rgb(238 217 168 / 40%); box-shadow: var(--shadow-card); }
.public-footer, .school-footer {
    background: var(--pattern-geometric) center / 84px 84px repeat, var(--green-950);
    border-top: 2px solid var(--color-accent-soft);
}
.school-hero__veil { background: linear-gradient(90deg, rgb(9 62 67 / 5%), rgb(9 62 67 / 20%) 45%, rgb(9 62 67 / 85%)); }

/* Buttons and existing native controls; validation and event handlers stay intact. */
.public-site :is(.news-filter__submit, .school-filter button, .home-global-search__form button,
    .public-search-form button, .thematic-filter button, .thematic-access-box button,
    .thematic-access-box a, .school-course-access a, .school-course-access button) {
    color: var(--color-surface);
    background: linear-gradient(135deg, var(--color-teal), var(--green-950));
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.public-site :is(.news-filter__submit, .school-filter button, .home-global-search__form button,
    .public-search-form button, .thematic-filter button):hover { background: var(--color-primary-hover); }
.public-site :is(.news-filter, .school-filter, .thematic-filter) :is(input, select),
.qe-field input {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
}
.public-site :is(.news-filter, .school-filter, .thematic-filter) :is(input, select):focus,
.qe-field input:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px rgb(46 157 143 / 12%); }
.public-site :is(input, select, textarea):disabled, .qe-field input:disabled {
    color: var(--color-text-muted);
    background: var(--color-bg-alt);
    opacity: .7;
}
.public-site :is(.public-footer, .about-section, .home-global-search__panel) :is(a, button, input):focus-visible,
.qe-auth-intro a:focus-visible, .qe-sidebar :is(a, button):focus-visible { outline-color: var(--color-accent-soft); }
.public-site :is(.news-pagination, .school-pagination, .thematic-pagination) :is(a, span) { border-radius: var(--radius-sm); }
.public-site :is(.news-pagination, .school-pagination, .thematic-pagination) a.is-active { color: var(--color-surface); background: var(--color-teal); }
.banner-arrow { background: rgb(9 62 67 / 82%); }
.banner-arrow:hover { background: var(--color-teal); }
.home-row-controls button { width: 38px; height: 38px; color: var(--color-teal); background: var(--color-surface); border-color: var(--color-border); }
.home-row-controls button:hover:not(:disabled) { color: var(--color-surface); background: var(--color-teal); }
.back-to-top, .school-back-to-top { background: var(--green-950); border-radius: var(--radius-sm); }

/* Auth, personal account and management use the same palette. */
.qe-auth-form-side { background: var(--color-bg); }
.qe-auth-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.qe-auth-icon, .qe-auth-submit, .qe-profile-icon { background: linear-gradient(135deg, var(--color-teal), var(--green-950)); }
.qe-auth-brand span, .qe-account-brand span { background: var(--color-accent-soft); color: var(--color-text); box-shadow: var(--shadow-sm); }
.qe-account-nav { border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.qe-account-main > .card { border-radius: var(--radius-card) !important; background: var(--color-surface) !important; box-shadow: var(--shadow-card); }
.qe-account-main :is(.form-control, .form-select, .input-group-text) { border-radius: var(--radius-sm); }
.qe-sidebar { background: var(--green-950); border-inline-end: 1px solid rgb(238 217 168 / 30%); }
.qe-nav a.active { background: rgb(143 209 199 / 16%); box-shadow: inset -3px 0 0 var(--color-accent-soft); }
.qe-nav a.active::after { background: var(--color-accent-soft); box-shadow: none; }
.qe-admin-body :is(.card, .qe-profile-menu) { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.qe-admin-body .btn-primary { background: var(--color-teal); border-color: var(--color-teal); }
.qe-admin-body .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.qe-admin-body :is(.form-control, .form-select) { border-radius: var(--radius-sm); }

/* Wrap the same menu items on tablets without changing the mobile hierarchy. */
@media (min-width: 1280px) {
    body.public-site, body.school-site {
        background-image: var(--pattern-tile), var(--pattern-tile), var(--pattern-paper);
        background-position: left top, right top, center top;
        background-size: 18px 72px, 18px 72px, 160px 160px;
        background-repeat: repeat-y, repeat-y, repeat;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .public-toolbar__collapse, .school-toolbar__collapse { flex-wrap: wrap; }
    .public-toolbar__link, .school-toolbar__link { padding-inline: 12px; }
}
@media (max-width: 767.98px) {
    body.public-site, body.school-site { background-size: 120px 120px; }
    .assembly-main .assembly-section:not(.about-section) > .site-container,
    .school-main .school-section:not(.school-news-section) > .site-container {
        padding: 16px 12px;
        background-size: 60px 60px, auto;
    }
    .assembly-main .assembly-section, .school-main .school-section { padding-block: 12px; }
    .school-main .school-news-section > .site-container { padding: 16px 12px; }
    .public-site .home-card-row .directory-logo-card { min-height: 210px; }
    .public-site .home-card-row .directory-logo { width: 116px; height: 132px; }
    .section-heading > div { padding-inline-end: 0; }
    .public-toolbar__collapse { background: var(--color-surface); border-color: var(--color-border); }
    .public-toolbar__menu, .public-toolbar__submenu { box-shadow: none; }
    .section-heading h2::after { width: 18px; height: 18px; margin-inline-start: 6px; }
    .news-page-hero::before, .news-details-hero::before { width: 180px; height: 180px; }
    .school-hero__veil { background: linear-gradient(0deg, rgb(9 62 67 / 90%), rgb(9 62 67 / 4%) 70%); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .public-site *, .public-site *::before, .public-site *::after,
    .qe-auth-body *, .qe-admin-body * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}