/*
Theme Name: HalElKetab
Theme URI: https://halelketab.com
Author: HalElKetab.com
Author URI: https://halelketab.com
Description: Premium Arabic RTL educational solutions theme for books, lessons, and questions.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: halelketab
License: GPL-2.0-or-later
*/

/* The visual system is continued below. */

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --font-sans: "Cairo", sans-serif;
}

:root {
  --primary: #163d5c;
  --primary-foreground: #f6fbfa;
  --background: #fbfcfa;
  --foreground: #142b3d;
  --card: #ffffff;
  --card-foreground: #142b3d;
  --popover: #ffffff;
  --popover-foreground: #142b3d;
  --secondary: #f1f5f3;
  --secondary-foreground: #315063;
  --muted: #f4f6f4;
  --muted-foreground: #6f7f88;
  --accent: #e9f7f4;
  --accent-foreground: #126f71;
  --destructive: #c25a50;
  --destructive-foreground: #fff;
  --border: #e4ece9;
  --input: #dce7e3;
  --ring: #20a6a2;
  --radius: 0.8rem;
}

* { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--foreground); font-family: "Cairo", sans-serif; font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 28px; }
.page-content { min-height: 460px; }
.section-pad { padding-block: 82px; }
.section-pad-small { padding-block: 64px; }

/* Shared primitives */
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #71909a; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow-accent { color: #158d8b; }
.eyebrow-light { color: #a9cbc7; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2bb8a9; box-shadow: 0 0 0 4px rgba(43,184,169,.12); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.section-heading h2 { margin: 7px 0 4px; color: #15364d; font-size: clamp(23px, 3vw, 31px); font-weight: 800; letter-spacing: -.05em; line-height: 1.25; }
.section-heading p { max-width: 490px; margin: 0; color: #7d8c94; font-size: 13px; }
.text-link, .inline-link { display: inline-flex; align-items: center; gap: 8px; color: #168d8a; font-size: 12px; font-weight: 800; white-space: nowrap; transition: gap .18s ease, color .18s ease; }
.text-link:hover, .inline-link:hover { gap: 12px; color: #0f706f; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; padding: 12px 17px; font-size: 12px; font-weight: 800; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.button:active { transform: scale(.97); }
.button-dark { background: #173d5b; color: #fff; box-shadow: 0 8px 18px rgba(19,55,79,.13); }
.button-dark:hover { background: #0f304a; box-shadow: 0 10px 24px rgba(19,55,79,.21); }
.button-light { background: #e8f7f2; color: #136d70; }
.button-light:hover { background: #fff; }
.tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 4px 9px; font-size: 10px; font-weight: 800; line-height: 1.4; }
.tag-soft { background: #f2f6f4; color: #7c8e92; }
.tag-accent { background: #dff4ee; color: #168f87; }

/* Header */
.site-header { position: relative; z-index: 20; height: 78px; background: rgba(251,252,250,.93); border-bottom: 1px solid rgba(221,231,227,.7); backdrop-filter: blur(16px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px 11px 11px 5px; background: #1b938d; color: #fff; box-shadow: 0 5px 14px rgba(27,147,141,.17); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { color: #15384f; font-size: 19px; font-weight: 900; letter-spacing: -.06em; }
.brand-copy small { margin-top: 4px; color: #8a9ba0; font-size: 8px; font-weight: 700; letter-spacing: .03em; }
.desktop-nav { display: flex; align-items: center; gap: 27px; margin-inline-start: auto; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; position: relative; padding-block: 8px; color: #71818a; font-size: 12px; font-weight: 700; transition: color .18s ease; }
.nav-link::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 2px; border-radius: 3px; background: #1ca19b; transition: width .18s ease; }
.nav-link:hover, .nav-link.active { color: #173e5b; }
.nav-link.active::after { width: 19px; }
.nav-search-link { color: #198f8a; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-search-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid #dfeae7; border-radius: 10px; background: #fff; color: #198c89; font-size: 11px; font-weight: 800; box-shadow: 0 4px 12px rgba(20,60,76,.03); transition: border .18s ease, box-shadow .18s ease; }
.header-search-button:hover { border-color: #addad5; box-shadow: 0 7px 18px rgba(20,60,76,.07); }
.icon-button, .menu-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #e0eae6; border-radius: 10px; background: #fff; color: #577582; transition: background .18s ease, color .18s ease, transform .16s ease; }
.icon-button:hover, .menu-button:hover { background: #eaf7f3; color: #188b89; }
.icon-button:active, .menu-button:active { transform: scale(.95); }
.notification-button { display: none; }
.notification-dot { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #ed806e; border: 1px solid #fff; }
.menu-button { display: none; }
.mobile-menu { position: absolute; top: 77px; right: 0; left: 0; background: rgba(251,252,250,.98); border-bottom: 1px solid #e0e9e5; box-shadow: 0 14px 22px rgba(23,61,91,.08); }
.mobile-menu-inner { display: grid; gap: 3px; padding-block: 14px 18px; }
.mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid #edf2f0; color: #24495e; font-size: 13px; font-weight: 800; }

/* Home hero */
.hero-section { position: relative; overflow: hidden; min-height: 568px; background: #f3f9f6; border-bottom: 1px solid #e5efeb; }
.hero-section::before { content: ""; position: absolute; top: -200px; right: 42%; width: 550px; height: 550px; border: 1px solid rgba(44,169,156,.1); border-radius: 50%; box-shadow: 0 0 0 56px rgba(44,169,156,.025), 0 0 0 112px rgba(44,169,156,.021); }
.hero-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 68% 23%, rgba(235,184,112,.12), transparent 25%), radial-gradient(circle at 16% 80%, rgba(47,164,156,.08), transparent 21%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 32px; min-height: 568px; }
.hero-copy { padding-block: 70px 55px; }
.hero-copy h1 { max-width: 570px; margin: 19px 0 15px; color: #183c57; font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -.08em; line-height: 1.16; }
.hero-copy h1 span { display: inline-block; color: #189692; }
.hero-copy p { max-width: 450px; margin: 0 0 27px; color: #728891; font-size: 15px; line-height: 2; }
.hero-search { display: flex; align-items: center; gap: 12px; max-width: 530px; min-height: 62px; padding: 8px 9px 8px 8px; border: 1px solid #dcebe6; border-radius: 14px; background: #fff; color: #96a9ad; box-shadow: 0 14px 28px rgba(30,83,91,.08); }
.hero-search > svg { flex: 0 0 auto; margin-inline-start: 10px; color: #5f858a; }
.hero-search input, .inner-search input, .large-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #1b3c4f; font-size: 12px; }
.hero-search input::placeholder, .inner-search input::placeholder, .large-search input::placeholder { color: #a6b6b8; }
.hero-search button, .inner-search button, .large-search button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 95px; min-height: 45px; border-radius: 9px; background: #183e5b; color: white; font-size: 12px; font-weight: 800; transition: background .18s ease, transform .16s ease; }
.hero-search button:hover, .inner-search button:hover, .large-search button:hover { background: #0d2f49; }
.hero-search button:active, .inner-search button:active, .large-search button:active { transform: scale(.97); }
.hero-example { margin-top: 12px; color: #94a6a8; font-size: 10px; }
.hero-example span { margin-inline-end: 6px; color: #5c7d82; font-weight: 800; }
.hero-trust-row { display: flex; align-items: center; gap: 10px; margin-top: 29px; color: #8b9ca0; font-size: 10px; }
.avatar-stack { display: flex; direction: ltr; }
.avatar-stack span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -6px; border: 2px solid #f3f9f6; border-radius: 50%; background: #d5e6df; color: #5b777d; font-size: 9px; font-weight: 900; }
.avatar-stack span:nth-child(2) { background: #f6d8cd; color: #9f625c; }
.avatar-stack span:nth-child(3) { background: #dae1f2; color: #586e9a; }
.avatar-stack span:last-child { background: #183e5b; color: white; }
.trust-divider { width: 1px; height: 15px; background: #d4e3df; }
.trust-rating { display: inline-flex; align-items: center; gap: 3px; color: #c38743; font-weight: 800; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 500px; }
.hero-orbit { position: absolute; border: 1px solid rgba(40,158,150,.1); border-radius: 50%; transform: rotate(-17deg); }
.orbit-one { width: 440px; height: 300px; }
.orbit-two { width: 540px; height: 370px; opacity: .66; transform: rotate(25deg); }
.book-visual { position: relative; z-index: 2; width: 245px; height: 336px; transform: rotate(7deg); filter: drop-shadow(17px 22px 14px rgba(20,63,80,.15)); }
.book-shadow { position: absolute; right: 13px; bottom: -15px; width: 215px; height: 22px; border-radius: 50%; background: rgba(39,80,82,.15); filter: blur(10px); transform: rotate(-7deg); }
.book-page { position: absolute; inset: 0; border-radius: 5px 16px 16px 5px; }
.page-back { right: -14px; top: 13px; background: #9ec9bd; transform: rotate(3deg); }
.page-mid { right: -7px; top: 7px; background: #e9b281; transform: rotate(1.7deg); }
.page-front { right: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 31px 26px 21px; background: #1e5a6a; color: #eaf7f3; overflow: hidden; }
.page-front::before { content: ""; position: absolute; top: -45px; left: -60px; width: 220px; height: 220px; border: 1px solid rgba(204,237,226,.23); border-radius: 50%; box-shadow: 0 0 0 20px rgba(204,237,226,.045), 0 0 0 40px rgba(204,237,226,.035); }
.book-page-label { position: relative; color: #a7dcd1; font-size: 11px; font-weight: 700; }
.book-page-title { position: relative; margin-top: 46px; color: #fff; font-size: 29px; font-weight: 900; letter-spacing: -.08em; line-height: 1.25; }
.book-page-title span { color: #98d5c8; }
.book-page-equation { position: relative; margin-top: auto; padding: 9px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: #f9dbb1; font-size: 20px; font-weight: 700; direction: ltr; }
.book-page-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 19px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.17); color: #b7d4cf; font-size: 8px; }
.book-page-footer span { color: #f4c082; font-size: 13px; font-weight: 900; }
.floating-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(218,234,228,.9); border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 11px 25px rgba(26,77,86,.1); }
.note-top { top: 89px; right: 24px; }
.note-bottom { right: 1px; bottom: 80px; }
.note-icon { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; }
.teal-icon { background: #ddf4ed; color: #199385; }.coral-icon { background: #ffede7; color: #c27663; }
.floating-note strong, .floating-note small { display: block; line-height: 1.45; }.floating-note strong { color: #315467; font-size: 10px; }.floating-note small { color: #9aa9a9; font-size: 8px; }
.visual-caption { position: absolute; bottom: 39px; left: 16px; display: flex; align-items: center; gap: 7px; color: #91a4a4; font-size: 9px; }.caption-line { display: inline-block; width: 27px; height: 1px; background: #a9c7c1; }

/* Home cards */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.quick-card { display: flex; align-items: center; gap: 12px; min-height: 94px; padding: 16px 17px; border: 1px solid #e5eeeb; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(25,63,76,.025); transition: transform .2s ease, box-shadow .2s ease, border .2s ease; }
.quick-card:hover { transform: translateY(-3px); border-color: #cce4df; box-shadow: 0 12px 24px rgba(25,63,76,.08); }.quick-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; }.quick-icon.teal, .subject-icon.teal { background: #ddf5ef; color: #168d88; }.quick-icon.coral, .subject-icon.coral { background: #ffebe6; color: #c46b5a; }.quick-icon.indigo, .subject-icon.indigo { background: #e8edfb; color: #6675b6; }.quick-icon.gold, .subject-icon.gold { background: #fcf1d9; color: #bd8d3f; }
.quick-card strong, .quick-card small { display: block; line-height: 1.5; }.quick-card strong { color: #21465d; font-size: 12px; }.quick-card small { margin-top: 2px; color: #98a8ab; font-size: 9px; }.quick-arrow { margin-inline-start: auto; color: #afc2c1; transition: transform .18s ease; }.quick-card:hover .quick-arrow { transform: translateX(-3px); color: #1d948d; }

/* Grades */
.grade-section { background: #f3f8f5; border-block: 1px solid #e5eeea; }.grade-tabs { display: flex; gap: 10px; margin-bottom: 20px; }.grade-tabs button { flex: 1; padding: 15px 18px; border: 1px solid #dfeae5; border-radius: 10px; background: transparent; color: #86989a; text-align: right; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }.grade-tabs button span, .grade-tabs button small { display: block; }.grade-tabs button span { font-size: 12px; font-weight: 800; }.grade-tabs button small { margin-top: 2px; font-size: 9px; }.grade-tabs button.active { background: #fff; color: #183e5b; box-shadow: 0 8px 18px rgba(27,76,83,.06); }.grade-tabs button.active small { color: #1a9a91; }
.grade-content { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }.grade-feature-card, .grade-visual-card { min-height: 280px; border: 1px solid #deebe6; border-radius: 15px; background: #fff; }.grade-feature-card { display: flex; flex-direction: column; justify-content: space-between; padding: 27px 29px 24px; }.grade-feature-head { display: flex; align-items: start; justify-content: space-between; }.grade-feature-head h3 { margin: 10px 0 5px; color: #1b4159; font-size: 22px; font-weight: 900; letter-spacing: -.06em; }.grade-feature-head p { max-width: 330px; margin: 0; color: #829398; font-size: 11px; }.grade-big-number { color: #e5efeb; font-size: 65px; font-weight: 900; line-height: .9; letter-spacing: -.12em; }.grade-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.grade-chip-list a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e5eeeb; border-radius: 8px; color: #648087; font-size: 10px; font-weight: 700; transition: color .18s ease, background .18s ease; }.grade-chip-list a:hover { background: #eff9f5; color: #188f8a; }.grade-feature-card .button { align-self: flex-start; margin-top: 22px; }.grade-visual-card { position: relative; overflow: hidden; padding: 24px; background: #173f5d; color: #fff; }.grade-visual-card::before { content: ""; position: absolute; inset: -80px -90px auto auto; width: 230px; height: 230px; border: 1px solid rgba(151,211,197,.2); border-radius: 50%; box-shadow: 0 0 0 28px rgba(151,211,197,.04), 0 0 0 57px rgba(151,211,197,.03); }.grade-visual-label { position: relative; display: flex; align-items: center; gap: 7px; color: #a6d3c9; font-size: 10px; font-weight: 800; }.stacked-grade-cards { position: relative; display: grid; gap: 8px; margin: 28px 0 16px; }.stacked-grade-cards > div { display: grid; grid-template-columns: 1fr 30px 33px; align-items: center; gap: 5px; padding: 10px 12px; border: 1px solid rgba(213,242,233,.17); border-radius: 8px; background: rgba(255,255,255,.07); }.stacked-grade-cards > div:first-child { background: rgba(255,255,255,.13); transform: translateX(-17px); }.stacked-grade-cards span { color: #c2ddda; font-size: 10px; }.stacked-grade-cards b { color: #f8d196; font-size: 17px; }.stacked-grade-cards small { color: #8eb9b6; font-size: 8px; }.grade-mini-copy { display: inline-flex; align-items: center; gap: 7px; color: #95c8bf; font-size: 9px; }

/* Subjects and books */
.subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.subject-card { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #e5eeeb; border-radius: 11px; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }.subject-card:hover { transform: translateY(-2px); box-shadow: 0 10px 19px rgba(25,63,76,.06); }.subject-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; font-weight: 800; }.subject-card strong, .subject-card small { display: block; line-height: 1.5; }.subject-card strong { color: #274a5e; font-size: 11px; }.subject-card small { color: #9ba9aa; font-size: 9px; }.subject-arrow { margin-inline-start: auto; color: #bbc9c7; }
.solutions-section { background: #f3f8f5; border-block: 1px solid #e5eeea; }.books-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.book-card { position: relative; display: block; overflow: hidden; border: 1px solid #e3eeea; border-radius: 14px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.book-card:hover { transform: translateY(-4px); box-shadow: 0 15px 28px rgba(27,75,78,.1); }.book-cover { position: relative; display: flex; align-items: center; justify-content: center; height: 135px; color: rgba(255,255,255,.82); overflow: hidden; }.book-cover::before { content: ""; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,.04), 0 0 0 36px rgba(255,255,255,.03); }.book-cover-lines { position: absolute; top: 13px; right: 13px; left: 13px; height: 1px; background: rgba(255,255,255,.18); }.book-cover span { position: absolute; bottom: 14px; right: 16px; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 800; }.cover-teal { background: #2b8587; }.cover-coral { background: #bb7568; }.cover-indigo { background: #6877ad; }.cover-gold { background: #bd9150; }.book-card-content { position: relative; padding: 14px 15px 16px; }.book-card-topline { display: flex; justify-content: space-between; align-items: center; }.book-save { color: #b2c4c1; }.book-card h3 { margin: 12px 0 2px; color: #24475b; font-size: 13px; font-weight: 900; letter-spacing: -.03em; }.book-card p { margin: 0; color: #8a9b9d; font-size: 10px; }.book-meta { display: flex; align-items: center; gap: 11px; margin-top: 17px; color: #98aaa9; font-size: 9px; }.book-meta span { display: inline-flex; align-items: center; gap: 4px; }.card-arrow { position: absolute; left: 15px; bottom: 14px; color: #1a928d; }.featured-book-card { background: #fff; }

/* Popular and app */
.popular-layout { display: grid; grid-template-columns: 1.18fr .82fr; gap: 50px; align-items: center; }.popular-list { border-top: 1px solid #e5eeeb; }.popular-item { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid #e5eeeb; transition: padding .18s ease, color .18s ease; }.popular-item:hover { padding-inline: 7px; color: #1b8f89; }.popular-number { color: #b3c4c2; font-size: 10px; font-weight: 800; }.popular-item strong, .popular-item small { display: block; line-height: 1.45; }.popular-item strong { color: #2a4c5e; font-size: 11px; }.popular-item small { color: #9aa9ab; font-size: 9px; }.popular-item > svg { color: #adc2bf; }.telegram-card { position: relative; overflow: hidden; min-height: 312px; padding: 30px; border-radius: 16px; background: #173e5b; color: #fff; }.telegram-card::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 280px; height: 280px; border: 1px solid rgba(159,213,201,.2); border-radius: 50%; box-shadow: 0 0 0 25px rgba(159,213,201,.035), 0 0 0 52px rgba(159,213,201,.025); }.telegram-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 38px; border: 1px solid rgba(167,220,208,.3); border-radius: 11px; color: #9ddace; }.telegram-card h3 { position: relative; z-index: 1; max-width: 220px; margin: 7px 0 8px; font-size: 23px; line-height: 1.3; letter-spacing: -.06em; }.telegram-card p { position: relative; z-index: 1; max-width: 290px; margin: 0 0 22px; color: #a8c5c3; font-size: 11px; }.telegram-card .button { position: relative; z-index: 1; }.telegram-members { position: absolute; z-index: 1; right: 30px; bottom: 25px; display: flex; align-items: center; gap: 9px; color: #8db8b5; font-size: 9px; }.telegram-members .avatar-stack span { border-color: #173e5b; }
.app-banner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 270px; margin-bottom: 80px; padding: 45px 72px; overflow: hidden; border-radius: 18px; background: #17465b; color: #fff; }.app-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 12%, rgba(99,192,172,.21), transparent 32%), linear-gradient(115deg, transparent 55%, rgba(10,34,51,.22)); }.app-banner-decoration { position: absolute; top: -100px; left: 29%; width: 300px; height: 300px; border: 1px solid rgba(168,225,211,.17); border-radius: 50%; box-shadow: 0 0 0 34px rgba(168,225,211,.035), 0 0 0 68px rgba(168,225,211,.028); }.app-banner-content { position: relative; z-index: 1; }.app-banner h2 { margin: 8px 0 3px; font-size: 28px; letter-spacing: -.07em; }.app-banner p { margin: 0 0 21px; color: #acd0ca; font-size: 11px; }.app-buttons { display: flex; gap: 8px; }.app-button { display: flex; flex-direction: column; min-width: 116px; padding: 8px 13px; border: 1px solid rgba(219,240,232,.2); border-radius: 7px; background: rgba(255,255,255,.08); color: #fff; text-align: right; line-height: 1.3; }.app-button span { color: #b0d3cc; font-size: 8px; }.app-button strong { margin-top: 2px; font-size: 11px; }.phone-mockup { position: relative; z-index: 1; width: 143px; height: 233px; margin-left: 55px; margin-bottom: -75px; padding: 9px; border: 5px solid #d1e8df; border-bottom: 0; border-radius: 23px 23px 0 0; background: #12384b; box-shadow: 9px 12px 0 rgba(8,38,55,.28); transform: rotate(9deg); }.phone-speaker { position: absolute; top: 5px; left: 50%; width: 31px; height: 4px; border-radius: 5px; background: #86b7b0; transform: translateX(-50%); }.phone-screen { height: 100%; padding: 21px 10px 10px; border-radius: 13px 13px 0 0; background: #f4faf7; color: #173e5b; }.phone-screen-top { display: flex; align-items: center; justify-content: space-between; color: #1b8e8b; font-size: 9px; font-weight: 900; }.phone-bell-dot { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 5px; background: #def0e9; }.phone-bell-dot span { position: absolute; top: 2px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: #e6856e; }.phone-welcome { margin-top: 19px; font-size: 8px; }.phone-welcome b { display: block; font-size: 11px; }.phone-search { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding: 7px; border-radius: 6px; background: #e5f2ed; color: #94aaad; font-size: 7px; }.phone-card { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding: 7px; border: 1px solid #e2ece8; border-radius: 7px; background: #fff; }.phone-card b, .phone-card small { display: block; line-height: 1.4; }.phone-card b { font-size: 8px; }.phone-card small { color: #93a9a9; font-size: 6px; }.mini-cover { width: 24px; height: 30px; border-radius: 3px; background: #2b8587; }.phone-progress { display: flex; gap: 3px; margin-top: 14px; }.phone-progress span { width: 29%; height: 3px; border-radius: 3px; background: #dbeae5; }.phone-progress span:first-child { background: #37a995; }

/* Search and inner page headers */
.inner-hero, .page-header-section { background: #f3f8f5; border-bottom: 1px solid #e4eee9; }.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 25px; color: #93a4a5; font-size: 10px; }.breadcrumbs a:hover { color: #188c88; }.breadcrumb-item { display: inline-flex; align-items: center; gap: 5px; }.breadcrumb-item svg { color: #b9c8c6; }.inner-hero-copy { padding-block: 48px 50px; }.inner-hero-copy h1, .page-intro h1 { margin: 11px 0 8px; color: #173d59; font-size: clamp(35px, 5vw, 53px); font-weight: 900; letter-spacing: -.085em; line-height: 1.2; }.inner-hero-copy h1 span { color: #18948e; }.inner-hero-copy p, .page-intro > p { margin: 0 0 22px; color: #7e9194; font-size: 13px; }.inner-search { display: flex; align-items: center; gap: 10px; max-width: 650px; min-height: 58px; padding: 7px 8px 7px 17px; border: 1px solid #dbe8e3; border-radius: 12px; background: #fff; box-shadow: 0 10px 22px rgba(30,83,91,.05); }.inner-search > svg { color: #55908e; }.inner-search button { min-height: 42px; }.search-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 13px; color: #95a5a7; font-size: 9px; }.search-chip-row button { padding: 5px 9px; border: 1px solid #dde9e4; border-radius: 99px; background: transparent; color: #6c898e; font-size: 9px; }.search-chip-row button:hover { background: #fff; color: #148c89; }
.search-layout { display: grid; grid-template-columns: 1fr 265px; gap: 54px; }.results-toolbar { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.results-toolbar h2 { margin: 8px 0 0; color: #1d4259; font-size: 21px; letter-spacing: -.05em; }.results-toolbar h2 b { color: #168f8b; }.filter-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; border-radius: 9px; background: #f1f6f3; width: max-content; }.filter-tabs button { padding: 7px 13px; border-radius: 7px; background: transparent; color: #8a9c9d; font-size: 10px; font-weight: 800; }.filter-tabs button span { display: inline-block; margin-inline-start: 6px; color: #b1c1bf; font-size: 8px; }.filter-tabs button.active { background: #fff; color: #1b435b; box-shadow: 0 3px 8px rgba(25,63,76,.05); }.result-list { border-top: 1px solid #e5eeeb; }.result-card { display: flex; gap: 15px; padding: 19px 0; border-bottom: 1px solid #e5eeeb; transition: padding .18s ease; }.result-card:hover { padding-inline: 7px; }.result-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 43px; height: 43px; border-radius: 11px; }.result-icon.teal { background: #e1f6f0; color: #198e88; }.result-icon.coral { background: #ffede9; color: #bd7465; }.result-icon.indigo { background: #e9edfb; color: #6575b5; }.result-icon.gold { background: #fbf0dd; color: #b78a4a; }.result-body { min-width: 0; }.result-type { display: block; color: #1b968e; font-size: 9px; font-weight: 800; }.result-card h3 { margin: 3px 0 2px; color: #22465b; font-size: 14px; font-weight: 900; }.result-card p { margin: 0; color: #8b9c9f; font-size: 10px; }.result-card .result-meta { color: #a2b0b1; font-size: 9px; }.result-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; color: #168e8a; font-size: 10px; font-weight: 800; }.search-sidebar { padding-top: 34px; }.filter-panel { padding: 18px; border: 1px solid #e3ede9; border-radius: 13px; background: #fff; }.filter-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }.filter-panel h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: #24495d; font-size: 12px; }.filter-panel-head button { background: none; color: #1a958e; font-size: 9px; }.filter-panel label { display: block; margin-top: 15px; color: #829496; font-size: 9px; font-weight: 700; }.filter-panel select { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid #e4edeb; border-radius: 7px; outline: 0; background: #fafcfb; color: #526f78; font-size: 10px; }.filter-button { width: 100%; margin-top: 19px; }.sidebar-tip { margin-top: 13px; padding: 18px; border-radius: 12px; background: #e9f7f2; }.tip-icon { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; background: #cae9df; color: #158c86; }.sidebar-tip h3 { margin: 12px 0 3px; color: #225b5e; font-size: 12px; }.sidebar-tip p { margin: 0; color: #709295; font-size: 10px; line-height: 1.7; }.filter-mobile { display: none; }.search-bottom { padding-top: 20px; }.mini-book-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.mini-book-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #e5eeeb; border-radius: 10px; background: #fff; }.mini-book-card:hover { border-color: #c7e3dc; }.mini-book-cover { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 40px; border-radius: 5px; color: rgba(255,255,255,.9); }.mini-book-card strong, .mini-book-card small { display: block; line-height: 1.4; }.mini-book-card strong { color: #2a4d5f; font-size: 10px; }.mini-book-card small { color: #9cabad; font-size: 8px; }.mini-book-card > svg { margin-inline-start: auto; color: #afc3bf; }

/* Taxonomy pages */
.page-intro { padding-block: 49px 46px; }.page-intro > p { max-width: 640px; margin-bottom: 20px; }.intro-stats { display: flex; flex-wrap: wrap; gap: 9px; }.intro-stats span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #dfeae6; border-radius: 99px; background: rgba(255,255,255,.62); color: #719093; font-size: 9px; font-weight: 700; }.intro-stats svg { color: #1a968e; }.term-tabs { display: flex; gap: 10px; margin-bottom: 32px; }.term-tabs button { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid #e2ece8; border-radius: 8px; background: #fff; color: #93a5a6; font-size: 11px; font-weight: 800; }.term-tabs button.active { border-color: #bce2d8; background: #e7f7f1; color: #168c88; }.term-tabs small { color: #5ba99a; font-size: 8px; }.grade-content-layout { display: grid; grid-template-columns: 205px 1fr; gap: 45px; }.grade-side-panel { height: max-content; padding: 18px; border: 1px solid #e2ece8; border-radius: 13px; background: #fff; }.grade-side-panel h3 { margin: 4px 0 11px; color: #22465a; font-size: 14px; }.grade-side-panel > a { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid #edf2f0; color: #8a9d9f; font-size: 10px; }.grade-side-panel > a.active { color: #168e8a; font-weight: 800; }.grade-side-panel > a:hover { color: #168e8a; }.side-panel-note { display: flex; gap: 7px; margin-top: 17px; padding-top: 13px; border-top: 1px solid #edf2f0; color: #1a918d; }.side-panel-note p { margin: 0; color: #8da2a1; font-size: 9px; line-height: 1.6; }.grade-main-content .section-heading { margin-bottom: 20px; }.grade-subject-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.grade-subject-card { padding: 13px; border: 1px solid #e4edea; border-radius: 10px; background: #fff; }.grade-subject-card .subject-icon { width: 34px; height: 34px; margin-bottom: 7px; font-size: 15px; }.grade-subject-card strong, .grade-subject-card small { display: block; line-height: 1.4; }.grade-subject-card strong { color: #345365; font-size: 10px; }.grade-subject-card small { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; color: #a0b0af; font-size: 8px; }.grade-subject-card:hover { border-color: #c8e5dd; box-shadow: 0 7px 15px rgba(25,63,76,.05); }.grade-books-heading { margin-top: 55px; }.grade-books-heading .section-heading { margin-bottom: 18px; }.compact-books .book-cover { height: 105px; }.compact-books .book-card h3 { font-size: 11px; }.compact-books .book-card p { font-size: 9px; }
.subject-filter-bar { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; }.subject-filter-bar h2 { margin: 8px 0 0; color: #24495d; font-size: 23px; letter-spacing: -.06em; }.select-wrap { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid #e3ede9; border-radius: 8px; background: #fff; color: #748d91; }.select-wrap select { border: 0; outline: 0; background: transparent; color: #5c7a81; font-size: 10px; }.subject-books-grid { display: grid; gap: 10px; }.subject-book-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e3edea; border-radius: 12px; background: #fff; transition: transform .18s ease, box-shadow .18s ease; }.subject-book-row:hover { transform: translateX(-4px); box-shadow: 0 10px 20px rgba(25,63,76,.06); }.book-row-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 55px; border-radius: 6px; color: rgba(255,255,255,.87); }.book-row-icon.teal { background: #2b8587; }.book-row-icon.coral { background: #bb7568; }.book-row-icon.indigo { background: #6877ad; }.book-row-icon.sky { background: #5793a9; }.book-row-content { flex: 1; }.book-row-content h3 { margin: 6px 0 2px; color: #24495d; font-size: 12px; }.book-row-content p { margin: 0 0 7px; color: #96a6a7; font-size: 9px; }.book-row-arrow { color: #aec2bf; }.subject-lessons { margin-top: 69px; }.lesson-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.lesson-preview-card { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid #e3ede9; border-radius: 10px; background: #fff; }.lesson-preview-card:hover { border-color: #c8e4dc; }.lesson-number { color: #a8c3bf; font-size: 12px; font-weight: 900; }.lesson-preview-card strong, .lesson-preview-card small { display: block; line-height: 1.5; }.lesson-preview-card strong { color: #355465; font-size: 10px; }.lesson-preview-card small { color: #9aabab; font-size: 8px; }.lesson-preview-card > svg { margin-inline-start: auto; color: #aec3c0; }.subject-callout { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 125px; margin-top: 58px; padding: 25px 30px; overflow: hidden; border-radius: 13px; background: #eaf7f2; }.callout-orb { position: absolute; left: 40%; width: 180px; height: 180px; border: 1px solid rgba(28,148,139,.12); border-radius: 50%; }.subject-callout h3 { position: relative; margin: 4px 0 1px; color: #22575d; font-size: 17px; letter-spacing: -.04em; }.subject-callout p { position: relative; margin: 0; color: #759598; font-size: 10px; }

/* Book, lesson, question */
.book-hero-section { background: #f3f8f5; border-bottom: 1px solid #e3eee9; }.book-detail-head { display: flex; align-items: center; gap: 53px; padding-block: 47px 57px; }.book-detail-cover { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; flex: 0 0 175px; height: 240px; padding: 23px 19px 15px; border-radius: 5px 13px 13px 5px; color: rgba(255,255,255,.9); overflow: hidden; box-shadow: 12px 18px 20px rgba(25,67,74,.14); transform: rotate(-3deg); }.book-detail-cover::before { content: ""; position: absolute; left: -55px; bottom: -70px; width: 220px; height: 220px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,255,255,.05), 0 0 0 40px rgba(255,255,255,.03); }.book-detail-cover span, .book-detail-cover strong, .book-detail-cover small, .cover-equation { position: relative; }.book-detail-cover span { font-size: 10px; font-weight: 800; }.book-detail-cover strong { margin-top: 24px; font-size: 24px; letter-spacing: -.09em; }.book-detail-cover small { font-size: 8px; color: rgba(255,255,255,.72); }.cover-equation { align-self: flex-end; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.24); color: #f8d5a4; font-size: 14px; font-weight: 800; direction: ltr; }.book-detail-copy { max-width: 680px; }.book-detail-copy h1 { max-width: 700px; margin: 13px 0 7px; color: #173d59; font-size: clamp(31px, 4.3vw, 47px); font-weight: 900; letter-spacing: -.08em; line-height: 1.25; }.book-detail-copy p { max-width: 600px; margin: 0; color: #809295; font-size: 12px; }.book-facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 25px; }.book-facts span { min-width: 103px; padding-inline: 16px; border-inline-start: 1px solid #d9e6e1; color: #53747c; font-size: 10px; }.book-facts span:first-child { padding-inline-start: 0; border-inline-start: 0; }.book-facts b { display: block; margin-bottom: 3px; color: #a0b0b0; font-size: 8px; font-weight: 700; }.book-actions { display: flex; align-items: center; gap: 10px; margin-top: 27px; }.share-button { display: inline-flex; align-items: center; gap: 7px; padding: 11px 15px; border: 1px solid #dfeae6; border-radius: 9px; background: #fff; color: #6e898d; font-size: 10px; font-weight: 800; }.share-button:hover { color: #168f8b; border-color: #bddfd6; }.book-tabs { display: flex; gap: 8px; margin-bottom: 29px; padding-bottom: 10px; border-bottom: 1px solid #e3ede9; }.book-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 7px; background: transparent; color: #93a5a5; font-size: 10px; font-weight: 800; }.book-tabs button.active { background: #e8f7f2; color: #168e89; }.book-content-grid { display: grid; grid-template-columns: 1fr 220px; gap: 52px; }.unit-list-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }.unit-list-head h2 { margin: 6px 0 0; color: #24495e; font-size: 18px; letter-spacing: -.05em; }.reading-time { display: inline-flex; align-items: center; gap: 6px; color: #98aaaa; font-size: 9px; }.unit-card { margin-bottom: 10px; padding: 18px; border: 1px solid #e3ede9; border-radius: 12px; background: #fff; }.unit-card-top { display: flex; align-items: center; gap: 11px; }.unit-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #e6f6f1; color: #168e89; font-size: 10px; font-weight: 900; }.unit-card-top > div { flex: 1; }.unit-card-top h3 { margin: 4px 0 0; color: #2a4b5d; font-size: 12px; }.unit-card-top > svg { color: #adbfbe; }.unit-lessons { margin-top: 14px; padding-top: 3px; border-top: 1px solid #eff3f1; }.unit-lessons a { display: flex; justify-content: space-between; padding: 9px 0; color: #71888e; font-size: 10px; }.unit-lessons a + a { border-top: 1px dashed #edf2f0; }.unit-lessons a > span { display: inline-flex; align-items: center; gap: 7px; }.lesson-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: #f1f7f4; color: #1e9c8e; }.unit-lessons small { display: inline-flex; align-items: center; gap: 5px; color: #a7b5b4; font-size: 8px; }.unit-lessons a:hover { color: #168f8b; }.book-sidebar-card { padding: 19px; border: 1px solid #dcebe5; border-radius: 12px; background: #eaf7f2; text-align: center; }.book-sidebar-card .eyebrow { justify-content: center; }.progress-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 103px; height: 103px; margin: 17px auto 12px; border: 8px solid #cfe9de; border-right-color: #19968d; border-radius: 50%; transform: rotate(-30deg); }.progress-ring strong, .progress-ring small { transform: rotate(30deg); }.progress-ring strong { color: #21616a; font-size: 21px; line-height: 1; }.progress-ring small { color: #82a19e; font-size: 8px; }.book-sidebar-card p { margin: 0 0 15px; color: #75979a; font-size: 9px; line-height: 1.7; }.book-sidebar-card .button { width: 100%; }.ad-placeholder { display: flex; align-items: center; justify-content: center; min-height: 95px; margin-top: 15px; border: 1px dashed #dce8e4; border-radius: 10px; color: #afbfbd; font-size: 8px; }.next-steps { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-block: 0 70px; padding: 30px 36px; border-radius: 14px; background: #173e5b; color: #fff; }.next-steps-copy h2 { margin: 5px 0 1px; font-size: 21px; letter-spacing: -.06em; }.next-steps-copy p { margin: 0; color: #a4c5c2; font-size: 10px; }.next-step-links { display: flex; flex-wrap: wrap; gap: 8px; }.next-step-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(220,241,231,.2); border-radius: 8px; color: #d5e9e2; font-size: 9px; }.next-step-links a:hover { background: rgba(255,255,255,.1); }
.lesson-header, .question-header { background: #f3f8f5; border-bottom: 1px solid #e4eee9; }.lesson-heading, .question-head-content { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-block: 40px 18px; }.lesson-heading h1, .question-head-content h1 { margin: 8px 0 3px; color: #173d59; font-size: clamp(28px, 4vw, 43px); font-weight: 900; letter-spacing: -.08em; line-height: 1.25; }.lesson-heading p, .question-head-content p { margin: 0; color: #819497; font-size: 11px; }.lesson-actions { display: flex; gap: 7px; }.lesson-actions button { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid #dce9e4; border-radius: 9px; background: #fff; color: #718c8f; }.lesson-actions button:hover { color: #168f8a; border-color: #bbded5; }.lesson-progress { display: flex; align-items: center; gap: 18px; padding-bottom: 27px; color: #7e9797; font-size: 9px; }.lesson-progress span { display: inline-flex; align-items: center; gap: 6px; }.lesson-progress svg { color: #1a938b; }.lesson-layout, .question-layout { display: grid; grid-template-columns: 1fr 220px; gap: 54px; }.lesson-article, .question-article { max-width: 720px; }.lesson-intro { padding: 24px; border: 1px solid #e1ece8; border-radius: 13px; background: #fff; }.lesson-intro h2, .answer-heading h2 { margin: 0 0 5px; color: #24495d; font-size: 20px; letter-spacing: -.05em; }.lesson-intro p, .answer-heading p { margin: 0; color: #7e9396; font-size: 11px; line-height: 2; }.formula-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 14px 16px; border-radius: 9px; background: #eaf7f2; }.formula-box span { color: #59928f; font-size: 9px; font-weight: 800; }.formula-box strong { color: #1b706f; font-size: 18px; direction: ltr; }.formula-box small { color: #80a3a0; font-size: 8px; }.lesson-layout > .lesson-sidebar, .question-layout > .question-sidebar { padding-top: 24px; }.lesson-toc, .question-side-card { padding: 18px; border: 1px solid #e2ece8; border-radius: 12px; background: #fff; }.lesson-toc h3, .question-side-card h3 { margin: 5px 0 11px; color: #284b5d; font-size: 13px; }.lesson-toc a { display: block; padding: 8px 0; border-top: 1px solid #edf2f0; color: #8da0a1; font-size: 9px; }.lesson-toc a.active, .lesson-toc a:hover { color: #168e89; font-weight: 800; }.toc-progress { margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf2f0; color: #91a2a1; font-size: 8px; }.toc-progress b { color: #168e89; }.toc-progress > div { height: 5px; margin-top: 7px; border-radius: 99px; background: #e6f1ed; }.toc-progress > div span { display: block; width: 30%; height: 100%; border-radius: 99px; background: #2ba493; }.content-divider { display: flex; align-items: center; justify-content: space-between; margin: 29px 0 13px; color: #92a4a4; font-size: 9px; font-weight: 800; }.content-divider span:last-child { color: #b1bfbd; font-weight: 600; }.question-solution { padding: 21px 0 25px; border-top: 1px solid #e3ede9; }.question-label { display: flex; align-items: center; justify-content: space-between; }.question-label > span { color: #198e88; font-size: 10px; font-weight: 900; }.question-label a { display: inline-flex; align-items: center; gap: 5px; color: #98acab; font-size: 9px; }.question-label a:hover { color: #168e89; }.question-solution h3 { margin: 9px 0 17px; color: #294b5e; font-size: 15px; font-weight: 800; line-height: 1.8; }.solution-block { padding: 17px; border-radius: 11px; background: #f5f9f7; }.solution-title { display: flex; align-items: center; gap: 8px; color: #244f5e; font-size: 11px; }.solution-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 7px; background: #ffefd6; color: #bd8a3e; }.solution-block p { margin: 9px 0 13px; color: #71898e; font-size: 10px; line-height: 1.9; }.final-answer { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #cfe9df; border-radius: 8px; background: #e9f8f2; }.final-answer > svg { color: #189a8e; }.final-answer span { display: flex; flex-direction: column; line-height: 1.45; }.final-answer small { color: #6f9c97; font-size: 8px; }.final-answer strong { color: #197873; font-size: 15px; direction: ltr; }.lesson-footer-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 21px; border-top: 1px solid #e3ede9; }.lesson-footer-nav > a:not(.button) { display: inline-flex; align-items: center; gap: 5px; color: #809697; font-size: 9px; }.lesson-footer-nav > a:hover { color: #168f89; }
.question-head-content { padding-bottom: 39px; }.question-layout { align-items: start; }.question-box { padding: 25px; border: 1px solid #dcebe5; border-radius: 14px; background: #fff; box-shadow: 0 10px 20px rgba(25,63,76,.04); }.question-box-label { display: flex; align-items: center; gap: 8px; }.question-box-label strong { color: #244a5c; font-size: 11px; }.question-icon { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 9px; background: #e7f7f1; color: #158f88; }.question-box-label .tag { margin-inline-start: auto; }.question-box h2 { margin: 19px 0 11px; color: #24475b; font-size: 20px; font-weight: 900; line-height: 1.7; }.question-context { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid #edf2f0; color: #9aabab; font-size: 9px; }.question-context a { display: inline-flex; align-items: center; gap: 5px; color: #168f8a; font-weight: 800; }.answer-section { padding-top: 32px; }.answer-heading p { max-width: 520px; }.steps-card { margin-top: 20px; padding: 18px 21px; border: 1px solid #e4ede9; border-radius: 12px; background: #fff; }.solution-step { display: flex; align-items: center; gap: 12px; }.solution-step > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #e5f6f0; color: #178e88; font-size: 10px; font-weight: 900; }.solution-step strong { display: block; color: #5a747c; font-size: 10px; }.equation-line { margin-top: 2px; color: #224c5c; font-size: 16px; font-weight: 800; direction: ltr; text-align: right; }.step-connector { width: 1px; height: 18px; margin: 3px 0 3px 14px; background: #d4e8df; }.large-final { justify-content: flex-start; margin-top: 13px; padding: 15px 17px; }.final-answer-icon { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 10px; background: #ccecdf; color: #158d83; }.large-final > div:nth-child(2) span { color: #70a09a; font-size: 9px; }.large-final > div:nth-child(2) strong { font-size: 20px; }.answer-check { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; color: #248e7f; font-size: 9px; font-weight: 800; }.question-note { display: flex; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: #fff7e8; color: #b17f39; }.question-note strong { color: #856a3e; font-size: 10px; }.question-note p { margin: 2px 0 0; color: #9d8967; font-size: 9px; }.related-questions { margin-top: 36px; }.related-questions h2 { margin: 6px 0 13px; color: #2a4b5e; font-size: 18px; }.related-questions > a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid #e4ede9; }.related-questions > a > span { display: grid; grid-template-columns: 22px 1fr; align-items: center; column-gap: 8px; }.related-questions > a svg { color: #afc2c0; }.related-questions > a > span > svg { grid-row: span 2; color: #1a938c; }.related-questions b, .related-questions small { display: block; line-height: 1.4; }.related-questions b { color: #5d747c; font-size: 10px; }.related-questions small { color: #a0aeae; font-size: 8px; }.question-side-card h3 { margin-bottom: 15px; }.question-side-card > a { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #edf2f0; }.question-side-card > a > span:nth-child(2) { flex: 1; }.side-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; background: #ffece6; color: #c36e5e; }.side-card-icon.teal { background: #e4f6f0; color: #168e89; }.question-side-card b, .question-side-card small { display: block; line-height: 1.4; }.question-side-card b { color: #52707a; font-size: 9px; }.question-side-card small { color: #a3b1b0; font-size: 8px; }.question-side-card > a > svg { color: #afc1bf; }

/* Search overlay / footer / mobile */
.search-overlay { position: fixed; z-index: 50; inset: 0; display: flex; align-items: start; justify-content: center; padding-top: 90px; }.overlay-backdrop { position: absolute; inset: 0; background: rgba(12,35,51,.36); backdrop-filter: blur(4px); }.search-panel { position: relative; z-index: 1; width: min(650px, calc(100% - 32px)); padding: 27px; border: 1px solid rgba(220,238,230,.9); border-radius: 16px; background: #fbfdfb; box-shadow: 0 25px 70px rgba(12,46,56,.23); animation: panel-in .22s cubic-bezier(.23,1,.32,1); }.search-panel-top { display: flex; align-items: center; justify-content: space-between; }.search-panel h2 { margin: 16px 0 3px; color: #173e5a; font-size: 25px; letter-spacing: -.06em; }.search-panel > p { margin: 0; color: #819597; font-size: 11px; }.large-search { display: flex; align-items: center; gap: 10px; margin-top: 23px; padding: 8px 8px 8px 17px; border: 1px solid #d9e9e2; border-radius: 11px; background: #fff; }.large-search > svg { color: #188f8b; }.large-search button { min-height: 42px; }.search-shortcuts { margin-top: 23px; }.search-shortcuts > span { display: block; margin-bottom: 8px; color: #9babab; font-size: 9px; font-weight: 800; }.search-suggestion { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #edf2f0; }.suggestion-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #e7f7f1; color: #168f89; }.search-suggestion > span:nth-child(2) { flex: 1; }.search-suggestion strong, .search-suggestion small { display: block; line-height: 1.5; }.search-suggestion strong { color: #2d5061; font-size: 10px; }.search-suggestion small { color: #9aaaaa; font-size: 8px; }.search-suggestion > svg { color: #aabebb; }
.site-footer { padding-top: 58px; background: #142f45; color: #d7ebe5; }.footer-main { display: grid; grid-template-columns: 1.35fr .65fr .75fr 1.15fr; gap: 44px; padding-bottom: 42px; }.brand-light .brand-copy strong { color: #f1faf6; }.brand-light .brand-copy small { color: #8fb3ae; }.footer-brand-block p { max-width: 245px; margin: 17px 0 14px; color: #9bb8b7; font-size: 10px; line-height: 1.9; }.footer-status { display: inline-flex; align-items: center; gap: 7px; color: #86aaa9; font-size: 9px; }.status-pulse { width: 6px; height: 6px; border-radius: 50%; background: #62c3a7; box-shadow: 0 0 0 4px rgba(98,195,167,.13); }.footer-links-column h3, .footer-newsletter h3 { margin: 1px 0 13px; color: #eef9f4; font-size: 12px; }.footer-links-column a { display: block; margin-top: 9px; color: #97b2b1; font-size: 10px; }.footer-links-column a:hover { color: #d3ebe3; }.footer-newsletter h3 { margin-top: 8px; max-width: 180px; font-size: 15px; line-height: 1.55; }.footer-newsletter p { margin: 0 0 13px; color: #8eacab; font-size: 9px; }.newsletter-form { display: flex; align-items: center; padding: 4px; border: 1px solid rgba(208,235,226,.18); border-radius: 8px; background: rgba(255,255,255,.05); }.newsletter-form input { min-width: 0; flex: 1; padding: 5px 8px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 9px; }.newsletter-form input::placeholder { color: #719291; }.newsletter-form button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 27px; border-radius: 6px; background: #e2f4ed; color: #174962; }.footer-bottom { display: flex; justify-content: space-between; padding-block: 17px; border-top: 1px solid rgba(215,239,230,.13); color: #729394; font-size: 8px; }.mobile-bottom-nav { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 980px) {
  .container { padding-inline: 22px; }
  .desktop-nav { gap: 17px; }.header-inner { gap: 16px; }.hero-grid { grid-template-columns: 1.1fr .9fr; }.hero-copy h1 { font-size: 49px; }.hero-visual { transform: scale(.88); transform-origin: center; margin-inline: -25px; }.books-grid { grid-template-columns: repeat(2, 1fr); }.popular-layout { gap: 30px; }.footer-main { grid-template-columns: 1.1fr .7fr .8fr; }.footer-newsletter { grid-column: 1 / -1; max-width: 310px; }.phone-mockup { margin-left: 15px; }
}
@media (max-width: 760px) {
  body { font-size: 14px; padding-bottom: 66px; }.container { padding-inline: 18px; }.section-pad { padding-block: 61px; }.section-pad-small { padding-block: 48px; }.site-header, .header-inner { height: 66px; }.header-inner { gap: 8px; }.desktop-nav, .header-search-button, .notification-button { display: none; }.menu-button { display: inline-flex; }.brand-mark { width: 34px; height: 34px; border-radius: 10px 10px 10px 5px; }.brand-copy strong { font-size: 17px; }.brand-copy small { font-size: 7px; }.hero-section { min-height: auto; }.hero-grid { display: flex; flex-direction: column; align-items: stretch; min-height: auto; gap: 0; }.hero-copy { padding-block: 55px 25px; }.hero-copy h1 { max-width: 350px; margin-top: 15px; font-size: clamp(38px, 11vw, 52px); }.hero-copy p { max-width: 350px; font-size: 13px; }.hero-search { min-height: 57px; }.hero-search button { min-width: 76px; min-height: 42px; }.hero-trust-row { margin-top: 22px; }.hero-visual { min-height: 354px; margin: 0; transform: scale(.79); transform-origin: top center; }.book-visual { margin-top: -10px; }.note-top { top: 44px; right: 8%; }.note-bottom { right: 2%; bottom: 68px; }.visual-caption { bottom: 7px; left: 6%; }.quick-grid { grid-template-columns: repeat(2, 1fr); }.quick-card { min-height: 84px; padding: 13px; }.quick-card small { font-size: 8px; }.section-heading { align-items: start; flex-direction: column; gap: 11px; margin-bottom: 21px; }.section-heading h2 { font-size: 24px; }.grade-tabs { overflow-x: auto; padding-bottom: 2px; }.grade-tabs button { min-width: 170px; }.grade-content { grid-template-columns: 1fr; }.grade-visual-card { min-height: 242px; }.subject-grid { grid-template-columns: repeat(2, 1fr); }.books-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }.book-cover { height: 112px; }.book-card-content { padding: 12px; }.book-card h3 { font-size: 11px; }.book-meta { gap: 6px; font-size: 8px; }.popular-layout { grid-template-columns: 1fr; }.telegram-card { min-height: 280px; }.app-banner { align-items: start; min-height: 320px; margin-bottom: 46px; padding: 30px 25px; }.phone-mockup { position: absolute; left: 25px; bottom: -26px; width: 118px; height: 195px; margin: 0; transform: rotate(9deg) scale(.86); transform-origin: bottom left; }.app-banner-content { max-width: 250px; }.app-banner h2 { font-size: 23px; }.app-buttons { flex-direction: column; align-items: start; }.app-button { min-width: 109px; }.footer-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; }.footer-newsletter { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; gap: 5px; }.mobile-bottom-nav { position: fixed; z-index: 30; right: 10px; bottom: 10px; left: 10px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 7px 5px; border: 1px solid rgba(219,233,227,.95); border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 10px 26px rgba(20,62,72,.15); backdrop-filter: blur(16px); }.mobile-bottom-nav a, .mobile-bottom-nav button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 1px; background: transparent; color: #9aabad; font-size: 8px; }.mobile-bottom-nav a.active { color: #178f89; }.mobile-bottom-nav svg { width: 18px; }.mobile-bottom-nav button { font-weight: inherit; }
  .inner-hero-copy { padding-block: 38px 40px; }.inner-hero-copy h1, .page-intro h1 { font-size: 37px; }.search-layout, .grade-content-layout, .book-content-grid, .lesson-layout, .question-layout { grid-template-columns: 1fr; gap: 32px; }.search-sidebar, .book-sidebar, .lesson-sidebar, .question-sidebar { padding-top: 0; }.search-sidebar { order: -1; }.filter-panel { display: none; }.filter-mobile { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #dfeae6; border-radius: 8px; background: #fff; color: #6c888d; font-size: 9px; }.results-toolbar { align-items: center; }.mini-book-row { grid-template-columns: 1fr; }.page-intro { padding-block: 38px 39px; }.grade-content-layout { gap: 20px; }.grade-side-panel { display: none; }.grade-subject-grid { grid-template-columns: repeat(2, 1fr); }.compact-books { grid-template-columns: repeat(2, 1fr); }.subject-filter-bar { align-items: start; flex-direction: column; gap: 15px; }.subject-books-grid .book-row-arrow { display: none; }.subject-book-row { padding: 13px; }.subject-book-row .book-row-content h3 { font-size: 10px; }.lesson-preview-grid { grid-template-columns: 1fr; }.subject-callout { align-items: start; flex-direction: column; padding: 22px; }.subject-callout .button { margin-top: 8px; }.book-detail-head { align-items: start; flex-direction: column; gap: 30px; padding-block: 35px 45px; }.book-detail-cover { align-self: center; }.book-detail-copy h1 { font-size: 31px; }.book-facts span { min-width: 25%; padding-inline: 8px; }.book-facts span:first-child { padding-inline-start: 0; }.book-detail-copy p { font-size: 11px; }.unit-list-head { align-items: start; flex-direction: column; gap: 8px; }.next-steps { align-items: start; flex-direction: column; gap: 20px; margin-inline: 18px; padding: 24px; }.next-step-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }.next-step-links a:last-child { grid-column: 1 / -1; }.lesson-heading, .question-head-content { align-items: start; flex-direction: column; padding-block: 30px 25px; }.lesson-heading h1, .question-head-content h1 { font-size: 30px; }.lesson-progress { flex-wrap: wrap; gap: 8px 13px; padding-bottom: 23px; }.lesson-intro { padding: 18px; }.formula-box { flex-wrap: wrap; gap: 5px; }.formula-box strong { width: 100%; }.lesson-footer-nav { gap: 8px; }.lesson-footer-nav .button { padding-inline: 10px; }.question-box { padding: 18px; }.question-box h2 { font-size: 17px; }.answer-heading h2 { font-size: 19px; }.search-panel { padding: 21px; }
}
@media (max-width: 380px) { .hero-copy h1 { font-size: 36px; }.quick-card { gap: 7px; padding: 11px; }.quick-icon { width: 35px; height: 35px; }.quick-card strong { font-size: 10px; }.grade-feature-card { padding: 22px 19px; }.book-cover { height: 100px; }.book-card h3 { font-size: 10px; }.app-banner { padding-inline: 20px; }.phone-mockup { left: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* WordPress integration layer */
.wp-primary-menu, .fallback-menu, .mobile-primary-menu { display: flex; align-items: center; gap: 27px; margin: 0; padding: 0; list-style: none; }
.wp-primary-menu li, .fallback-menu li, .mobile-primary-menu li { list-style: none; }
.wp-primary-menu a, .fallback-menu a { display: inline-flex; align-items: center; position: relative; padding-block: 8px; color: #71818a; font-size: 12px; font-weight: 700; }
.wp-primary-menu a:hover, .fallback-menu a:hover { color: #173e5b; }
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }
.mobile-primary-menu { display: grid; gap: 3px; width: 100%; }
.mobile-primary-menu li { padding: 11px 4px; border-bottom: 1px solid #edf2f0; }
.mobile-primary-menu a { display: flex; justify-content: space-between; color: #24495e; font-size: 13px; font-weight: 800; }
.mobile-nav-link { border: 0; font-weight: 800; }
.search-overlay[hidden] { display: none !important; }
.search-overlay { display: flex; }
.search-overlay .icon-button { cursor: pointer; }
.prose-content { color: #6f858b; font-size: 13px; line-height: 2; }
.prose-content h2, .prose-content h3 { color: #24495d; }
.prose-content a { color: #168e89; font-weight: 700; }
.empty-state { padding: 28px; border: 1px dashed #dce8e4; border-radius: 12px; color: #8da1a2; text-align: center; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.pagination .page-numbers { padding: 8px 12px; border: 1px solid #e1ebe7; border-radius: 7px; color: #718b8e; font-size: 10px; }
.pagination .current, .pagination .page-numbers:hover { background: #e7f7f1; color: #168e89; }
@media (max-width: 760px) { .wp-primary-menu, .fallback-menu { display: grid; gap: 3px; width: 100%; } .desktop-nav .wp-primary-menu, .desktop-nav .fallback-menu { display: none; } }