:root {
    --ink: #102754;
    --ink-strong: #071d49;
    --muted: #61708d;
    --teal: #0aa6a6;
    --teal-dark: #087b78;
    --blue: #0e62d5;
    --blue-soft: #eef6ff;
    --surface: #ffffff;
    --canvas: #f8fafc;
    --line: #dce4ee;
    --line-soft: #edf1f5;
    --success-bg: #effbf7;
    --success: #087f6a;
    --danger: #b4233d;
    --radius: 12px;
    --sidebar-width: 336px;
    --header-height: 72px;
    --font-ui: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-reading: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background: var(--surface);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
}

button,
input,
select { font: inherit; }

button,
a,
select { -webkit-tap-highlight-color: transparent; }

svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--header-height) minmax(calc(100vh - var(--header-height)), auto);
    grid-template-areas:
        "topbar topbar"
        "sidebar main";
    min-height: 100vh;
}

.topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 36px;
    min-width: 0;
    padding: 0 26px;
    background: rgb(255 255 255 / 96%);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink-strong);
    text-decoration: none;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.04em;
    white-space: nowrap;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--teal);
    border-bottom: 3px solid var(--teal);
}

.brand-mark svg { width: 31px; height: 31px; }

.breadcrumbs {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .84rem;
    white-space: nowrap;
}

.breadcrumbs span {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumbs span + span::before {
    content: "‹";
    display: inline-block;
    margin: 0 12px;
    color: #98a5ba;
    font-size: 1.2em;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
}

.mobile-menu { display: none; margin-inline-start: auto; }

.sidebar {
    grid-area: sidebar;
    position: sticky;
    top: var(--header-height);
    align-self: start;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
}

.sidebar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 22px 15px;
}

.sidebar-heading > div { display: grid; gap: 2px; }
.sidebar-title { font-size: 1rem; font-weight: 760; color: var(--ink-strong); }
.lesson-count { color: var(--muted); font-size: .72rem; }
.sidebar-book { color: var(--ink); }

.catalog-filters { padding: 0 16px 14px; }

.search-field {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #cfd9e5;
    border-radius: 9px;
    transition: border-color .2s, box-shadow .2s;
}

.search-field:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgb(14 98 213 / 10%);
}

.search-field svg { width: 19px; color: #7585a1; }
.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .84rem; }
.search-field input::placeholder { color: #8f9bb0; }

.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.filter-row label { min-width: 0; }
.filter-row select {
    width: 100%;
    height: 38px;
    padding: 0 9px;
    color: #53627d;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
    font-size: .76rem;
}

.curriculum-tree {
    height: calc(100% - 177px);
    overflow-y: auto;
    padding: 4px 10px 40px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.curriculum-group { margin-bottom: 4px; }
.curriculum-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 10px;
    color: #425474;
    border-radius: 8px;
    cursor: pointer;
    list-style: none;
    font-size: .83rem;
    font-weight: 650;
}
.curriculum-group summary::-webkit-details-marker { display: none; }
.curriculum-group summary::before { content: "‹"; color: #7c8aa1; transition: transform .2s; }
.curriculum-group[open] summary::before { transform: rotate(-90deg); }
.curriculum-group summary span { margin-inline-start: auto; color: #99a5b6; font-size: .66rem; font-weight: 500; }
.curriculum-group summary:hover { background: #f5f8fc; }

.lesson-links { display: grid; gap: 2px; padding: 1px 7px 8px; }
.lesson-link {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 7px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    color: #3c4d6b;
    text-decoration: none;
    border-radius: 7px;
    font-size: .78rem;
    line-height: 1.45;
}
.lesson-link:hover { color: var(--blue); background: #f6f9fd; }
.lesson-link.active { color: #0a5ecb; background: var(--blue-soft); font-weight: 700; }
.lesson-file-icon { width: 13px; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; opacity: .7; }
.ready-dot { width: 6px; height: 6px; background: var(--teal); border-radius: 50%; }

.main-content {
    grid-area: main;
    min-width: 0;
    padding: 34px clamp(24px, 4vw, 68px) 80px;
    background: var(--surface);
}

.lesson-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: min(960px, 100%);
    margin: 0 auto 27px;
}

.lesson-context { display: block; margin-bottom: 5px; color: var(--teal-dark); font-size: .78rem; font-weight: 700; }
.lesson-header h1 { margin: 0; color: var(--ink-strong); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.35; letter-spacing: -.035em; }

.processing-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 37px;
    margin-top: 6px;
    padding: 7px 11px;
    color: #53627d;
    background: #f7f9fc;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 650;
}
.processing-status.is-ready { color: var(--success); background: var(--success-bg); border-color: #8ed6c7; }
.status-icon { display: grid; place-items: center; }
.status-icon svg { width: 18px; height: 18px; }

.spinner,
.large-spinner {
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid #c9d2df;
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.large-spinner { width: 34px; height: 34px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.reader { width: min(960px, 100%); margin: 0 auto; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 9px 9px 0 0; overflow: hidden; }
.tab {
    position: relative;
    min-height: 56px;
    padding: 12px 18px;
    color: #51617d;
    background: #fff;
    border: 0;
    cursor: pointer;
    font-size: .96rem;
    font-weight: 650;
}
.tab + .tab { border-inline-start: 1px solid var(--line); }
.tab:hover { background: #f8fbff; }
.tab.active { color: var(--blue); background: #f5f9ff; }
.tab.active::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--blue); }
.tab:focus-visible { z-index: 1; outline: 3px solid rgb(14 98 213 / 22%); outline-offset: -3px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.original-content,
.rewritten-content,
.styles-content { min-height: 520px; padding: clamp(28px, 4vw, 48px) 0; }

.original-content { color: #22385e; font-family: var(--font-reading); font-size: 1.22rem; line-height: 2; }
.original-content > * { width: min(790px, 100%); margin-inline: auto; }
.original-content h2,
.original-content h3,
.original-content h4 { margin-top: 1.8em; margin-bottom: .65em; color: var(--ink-strong); font-family: var(--font-ui); line-height: 1.45; }
.original-content h2 { font-size: 1.55rem; }
.original-content h3 { font-size: 1.3rem; }
.original-content h4 { font-size: 1.12rem; }
.original-content p { margin-top: 0; margin-bottom: 1.2em; }
.original-content ul { padding-inline-start: 28px; }
.original-content hr { margin-block: 30px; border: 0; border-top: 1px solid var(--line); }
.original-content a { color: var(--blue); }

.lesson-overview { width: min(820px, 100%); margin: 0 auto 16px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.lesson-overview h2 { margin: 0 0 11px; color: var(--ink-strong); font-size: 1.65rem; line-height: 1.45; }
.lesson-overview > p { margin: 0; color: #3a4d6e; font-family: var(--font-reading); font-size: 1.17rem; line-height: 1.9; }
.overview-meta { display: grid; gap: 14px; margin-top: 22px; padding: 17px 18px; background: #f8fafc; border-inline-start: 3px solid var(--teal); }
.overview-meta > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.meta-label { color: #3f5273; font-size: .72rem; font-weight: 750; }

.paragraph-list { width: min(820px, 100%); margin: 0 auto; }
.science-paragraph { padding: 29px 0 30px; border-bottom: 1px solid var(--line); }
.science-paragraph:last-child { border-bottom: 0; }
.paragraph-heading { display: flex; align-items: baseline; gap: 11px; margin-bottom: 12px; }
.paragraph-number { display: grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; color: #fff; background: var(--ink); border-radius: 50%; font-size: .75rem; font-weight: 800; }
.paragraph-heading h3 { margin: 0; color: var(--ink-strong); font-size: 1.24rem; line-height: 1.55; }
.paragraph-text { margin: 0 0 20px; color: #263b60; font-family: var(--font-reading); font-size: 1.18rem; line-height: 1.95; white-space: pre-wrap; }

.learning-map { display: grid; gap: 10px; padding-inline-start: 38px; }
.map-row { display: grid; grid-template-columns: 20px 108px minmax(0, 1fr); align-items: start; gap: 9px; color: #35486a; font-size: .78rem; }
.map-row strong { padding-top: 3px; color: #304568; font-size: .71rem; }
.map-icon { color: var(--ink); }
.map-icon svg { width: 18px; height: 18px; }
.map-content { min-width: 0; }
.outcome-line { display: block; color: #3b4e6e; line-height: 1.7; }
.outcome-line + .outcome-line { margin-top: 3px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 10px; color: #425575; background: #f0f4f8; border: 1px solid #e7ecf2; border-radius: 999px; font-size: .7rem; line-height: 1.3; }
.outcome-tag { border-radius: 5px; color: #36516f; background: #eef7f6; border-color: #d9efeb; }

.term-list { display: flex; flex-wrap: wrap; gap: 7px; }
.term { position: relative; display: inline-flex; gap: 5px; align-items: baseline; padding: 5px 9px; color: #314b73; background: #f1f6fc; border-radius: 5px; font-size: .69rem; }
.term b { color: var(--ink-strong); }
.term > span { color: #6c7890; }

.generation-loading,
.key-setup,
.generation-error { display: grid; justify-items: center; width: min(660px, 100%); margin: 40px auto; padding: 46px 28px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); }
.generation-loading h2,
.key-setup h2,
.generation-error h2 { margin: 18px 0 6px; color: var(--ink-strong); font-size: 1.25rem; }
.generation-loading p,
.key-setup > p,
.generation-error p { max-width: 510px; margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.8; }
.setup-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--teal-dark); background: #edfafa; border-radius: 50%; }
.setup-icon svg { width: 24px; height: 24px; }

.key-setup form { width: min(540px, 100%); margin-top: 24px; text-align: right; }
.key-setup label { display: block; margin-bottom: 7px; color: #3d4e6c; font-size: .76rem; font-weight: 700; }
.key-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.key-input-row input { min-width: 0; height: 45px; padding: 0 12px; direction: ltr; text-align: left; color: var(--ink); border: 1px solid #cbd6e2; border-radius: 8px; outline: 0; }
.key-input-row input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(14 98 213 / 10%); }
.primary-button,
.retry-button { height: 45px; padding: 0 17px; color: #fff; background: var(--blue); border: 0; border-radius: 8px; cursor: pointer; font-size: .78rem; font-weight: 750; }
.primary-button:hover,
.retry-button:hover { background: #0955bc; }
.primary-button:disabled { opacity: .6; cursor: wait; }
.form-message { min-height: 22px; margin: 8px 0 0 !important; color: var(--danger) !important; font-size: .73rem !important; }
.retry-button { margin-top: 18px; }

.learning-styles-shell { width: min(880px, 100%); margin: 0 auto; }
.styles-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.styles-heading h2 { margin: 0 0 6px; color: var(--ink-strong); font-size: 1.45rem; }
.styles-heading p { max-width: 640px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.75; }
.saudi-curriculum-mark { flex: 0 0 auto; padding: 7px 10px; color: var(--teal-dark); background: #eefaf8; border: 1px solid #cfece6; border-radius: 6px; font-size: .68rem; font-weight: 750; }

.style-switcher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 28px; }
.style-option { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: 1px 8px; min-width: 0; min-height: 74px; padding: 12px; color: #4d5e7a; text-align: right; background: #fff; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.style-option > span { grid-row: 1 / 3; display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); }
.style-option svg { width: 21px; height: 21px; }
.style-option b { color: var(--ink); font-size: .82rem; }
.style-option small { min-width: 0; overflow: hidden; color: #7a879c; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.style-option:hover { border-color: #aebed2; background: #fbfdff; }
.style-option.active { color: var(--blue); background: var(--blue-soft); border-color: #8ab7ee; box-shadow: inset 0 -2px 0 var(--blue); }
.style-option.active > span,
.style-option.active b { color: var(--blue); }

.style-result { min-height: 330px; }
.style-placeholder,
.style-loading { display: grid; justify-items: center; min-height: 290px; padding: 52px 24px; text-align: center; border: 1px dashed #cdd8e5; border-radius: 10px; }
.style-placeholder > span { display: grid; place-items: center; width: 48px; height: 48px; color: var(--blue); background: var(--blue-soft); border-radius: 50%; }
.style-placeholder > span svg { width: 24px; height: 24px; }
.style-placeholder h3,
.style-loading h3 { margin: 15px 0 5px; color: var(--ink-strong); font-size: 1.05rem; }
.style-placeholder p,
.style-loading p { max-width: 480px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }

.style-output-header { padding: 0 0 24px; border-bottom: 1px solid var(--line); }
.style-output-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.style-output-label { padding: 5px 9px; color: var(--blue); background: var(--blue-soft); border-radius: 5px; font-size: .68rem; font-weight: 800; }
.style-output-header h3 { margin: 0; color: var(--ink-strong); font-size: 1.42rem; }
.style-output-header > p { margin: 0; color: #405373; font-family: var(--font-reading); font-size: 1.05rem; line-height: 1.8; }
.style-outcomes { margin-top: 16px; }

.style-block { padding: 28px 0; border-bottom: 1px solid var(--line); }
.style-block-title { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.style-block-title span { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--blue); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.style-block-title h4 { margin: 0; color: var(--ink-strong); font-size: 1.1rem; }
.style-explanation { margin: 0 0 18px; color: #263c61; font-family: var(--font-reading); font-size: 1.08rem; line-height: 1.9; }
.style-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.style-detail { padding: 13px 14px; background: #f8fafc; border-inline-start: 2px solid #c9d7e7; }
.style-detail.full { grid-column: 1 / -1; }
.style-detail strong { display: block; margin-bottom: 5px; color: #314765; font-size: .69rem; }
.style-detail p { margin: 0; color: #52627c; font-size: .74rem; line-height: 1.7; }
.style-resources { display: flex; flex-wrap: wrap; gap: 6px; }
.style-resources span { padding: 4px 8px; color: #425575; background: #edf2f7; border-radius: 4px; font-size: .67rem; }
.style-closing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 25px; }
.style-closing section { padding: 17px; border: 1px solid var(--line); border-radius: 8px; }
.style-closing h4 { margin: 0 0 7px; color: var(--ink-strong); font-size: .82rem; }
.style-closing p,
.style-closing li { color: #50607a; font-size: .73rem; line-height: 1.7; }
.style-closing p,
.style-closing ul { margin: 0; }
.style-closing ul { padding-inline-start: 18px; }

.empty-state { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.empty-state > span { color: var(--teal); }
.empty-state > span svg { width: 52px; height: 52px; }
.empty-state h1 { margin: 20px 0 4px; }
.empty-state p,
.empty-catalog { color: var(--muted); font-size: .84rem; }
.empty-catalog { padding: 20px; text-align: center; }

.sidebar-backdrop { display: none; }
.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; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
    .sidebar { position: fixed; z-index: 50; top: 0; right: 0; width: min(var(--sidebar-width), 88vw); height: 100vh; transform: translateX(102%); transition: transform .25s ease; box-shadow: -20px 0 50px rgb(16 39 84 / 15%); }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; z-index: 45; inset: 0; width: 100%; height: 100%; padding: 0; background: rgb(5 20 48 / 38%); border: 0; }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .mobile-menu { display: inline-grid; }
    .breadcrumbs { margin-inline-start: auto; }
    .main-content { padding-inline: clamp(20px, 5vw, 48px); }
}

@media (max-width: 680px) {
    :root { --header-height: 62px; }
    .topbar { gap: 14px; padding: 0 15px; }
    .brand { font-size: 1.45rem; }
    .brand-mark { width: 32px; height: 32px; }
    .brand-mark svg { width: 26px; height: 26px; }
    .breadcrumbs { display: none; }
    .main-content { padding: 23px 16px 55px; }
    .lesson-header { display: grid; gap: 14px; margin-bottom: 21px; }
    .processing-status { margin-top: 0; }
    .tabs { border-radius: 8px 8px 0 0; }
    .tab { min-height: 50px; padding: 10px 8px; font-size: .82rem; }
    .original-content,
    .rewritten-content { padding: 27px 2px; }
    .original-content { font-size: 1.08rem; line-height: 1.9; }
    .lesson-overview h2 { font-size: 1.4rem; }
    .overview-meta > div { grid-template-columns: 1fr; gap: 6px; }
    .paragraph-heading { align-items: flex-start; }
    .paragraph-heading h3 { font-size: 1.08rem; }
    .paragraph-text { font-size: 1.08rem; }
    .learning-map { padding-inline-start: 0; }
    .map-row { grid-template-columns: 19px 1fr; }
    .map-row strong { padding-top: 2px; }
    .map-content { grid-column: 2; }
    .term { display: grid; gap: 2px; }
    .key-input-row { grid-template-columns: 1fr; }
    .primary-button { width: 100%; }
    .style-switcher { grid-template-columns: 1fr 1fr; }
    .styles-heading { display: grid; gap: 12px; }
    .saudi-curriculum-mark { justify-self: start; }
    .style-details,
    .style-closing { grid-template-columns: 1fr; }
    .style-detail.full { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}