:root {
      --ink: #20233a;
      --muted: #68708a;
      --paper: #fffdf8;
      --purple: #5b5bd6;
      --purple-dark: #4444b8;
      --green: #19a974;
      --red: #e64b64;
      --yellow: #ffc94a;
      --line: #e8e8f2;
      --shadow: 0 18px 45px rgba(52, 50, 110, .14);
      --radius: 28px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 10%, rgba(255, 201, 74, .22), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(91, 91, 214, .17), transparent 27%),
        linear-gradient(180deg, #f8f7ff 0%, #fffdf8 56%, #f5fbff 100%);
      font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
    }

    button { font: inherit; }
    button:focus-visible { outline: 4px solid rgba(91, 91, 214, .28); outline-offset: 3px; }
    .hidden { display: none !important; }
    .app { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding-bottom: 56px; }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 22px 0 10px;
    }
    .brand { display: flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.02em; }
    .brand-button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; text-align: left; }
    .brand-mark {
      display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
      color: white; font-size: 27px; background: linear-gradient(145deg, #6868ec, #4646bb);
      box-shadow: 0 10px 24px rgba(91, 91, 214, .28); transform: rotate(-3deg);
    }
    .brand span:last-child { font-size: clamp(17px, 2vw, 22px); }
    .header-actions { display: flex; gap: 10px; }
    .icon-btn {
      width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 15px;
      color: var(--ink); background: rgba(255,255,255,.86); cursor: pointer; font-size: 20px;
      box-shadow: 0 7px 18px rgba(52, 50, 110, .08);
    }

    .hero {
      position: relative; overflow: hidden; display: grid; grid-template-columns: 1.35fr .65fr;
      gap: 26px; align-items: center; margin-top: 22px; padding: clamp(28px, 5vw, 60px);
      border: 1px solid rgba(91,91,214,.13); border-radius: 38px;
      background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,242,255,.96));
      box-shadow: var(--shadow);
    }
    .hero::after {
      content: ""; position: absolute; width: 280px; height: 280px; right: -80px; top: -100px;
      border-radius: 50%; background: rgba(255, 201, 74, .32);
    }
    .eyebrow {
      display: inline-flex; gap: 8px; align-items: center; margin: 0 0 14px; padding: 8px 13px;
      border-radius: 999px; color: var(--purple-dark); background: #ecebff; font-size: 14px; font-weight: 900;
    }
    .hero h1 { margin: 0; max-width: 760px; font-size: clamp(38px, 6.2vw, 76px); line-height: .98; letter-spacing: -.055em; }
    .hero h1 em { color: var(--purple); font-style: normal; }
    .hero p { max-width: 680px; margin: 20px 0 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: clamp(17px, 2vw, 21px); line-height: 1.58; }
    .hero-art { position: relative; z-index: 1; min-height: 225px; }
    .float-card {
      position: absolute; display: grid; place-items: center; width: 114px; height: 114px;
      border: 8px solid white; border-radius: 32px; font-size: 58px; box-shadow: var(--shadow);
    }
    .float-card:nth-child(1) { left: 4%; top: 8px; background: #fff1a8; transform: rotate(-10deg); }
    .float-card:nth-child(2) { right: 2%; top: 72px; background: #bff1dd; transform: rotate(9deg); font-size: 27px; }
    .float-card:nth-child(3) { left: 34%; bottom: 0; background: #d9d8ff; transform: rotate(3deg); font-size: 38px; }

    .stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 10px;
    }
    .stat {
      padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.8);
      box-shadow: 0 9px 26px rgba(52, 50, 110, .07);
    }
    .stat strong { display: block; font-size: clamp(25px, 4vw, 38px); color: var(--purple-dark); }
    .stat span { color: var(--muted); font-family: system-ui, sans-serif; font-weight: 700; }

    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 45px 2px 18px; }
    .section-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; }
    .section-heading p { margin: 0; color: var(--muted); font-family: system-ui, sans-serif; }
    .chapter-grid { display: block; }
    .volume-section { margin-bottom: 38px; }
    .volume-heading { display: flex; align-items: center; gap: 13px; margin: 0 2px 16px; }
    .volume-badge { flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; color: #fff; background: var(--purple); font-size: 14px; font-weight: 900; white-space: nowrap; }
    .volume-heading strong { display: block; font-size: 20px; }
    .volume-heading small { display: block; margin-top: 2px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 14px; }
    .volume-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .volume-section:first-child .volume-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chapter-card {
      position: relative; min-height: 284px; overflow: hidden; padding: 24px; text-align: left;
      border: 0; border-radius: var(--radius); color: var(--ink); background: white; cursor: pointer;
      box-shadow: 0 12px 33px rgba(52, 50, 110, .1); transition: transform .2s ease, box-shadow .2s ease;
    }
    .chapter-card:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgba(52, 50, 110, .16); }
    .chapter-card::after {
      content: ""; position: absolute; width: 160px; height: 160px; right: -55px; top: -55px;
      border-radius: 50%; background: var(--tint);
    }
    .chapter-top { display: flex; justify-content: space-between; align-items: start; position: relative; z-index: 1; }
    .chapter-number { padding: 7px 11px; border-radius: 999px; color: var(--accent); background: var(--tint); font-size: 14px; }
    .chapter-emoji { font-size: 54px; filter: drop-shadow(0 8px 8px rgba(0,0,0,.08)); }
    .chapter-card h3 { margin: 27px 0 8px; font-size: 27px; letter-spacing: -.025em; }
    .chapter-card p { min-height: 47px; margin: 0; color: var(--muted); font-family: system-ui, sans-serif; line-height: 1.45; }
    .card-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
    .question-count { font-size: 14px; color: var(--muted); }
    .play-chip { padding: 10px 14px; border-radius: 14px; color: white; background: var(--accent); }
    .mini-progress { height: 7px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: #eff0f5; }
    .mini-progress > span { display: block; height: 100%; width: var(--progress); background: var(--accent); border-radius: inherit; }

    .quiz-shell { width: min(900px, 100%); margin: 22px auto 0; }
    .quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
    .back-btn, .text-btn {
      border: 1px solid var(--line); border-radius: 15px; padding: 11px 15px; color: var(--ink);
      background: rgba(255,255,255,.9); cursor: pointer; font-weight: 900;
    }
    .math-subject-back { margin-bottom: 14px; }
    .chapter-pill { color: var(--muted); font-size: 14px; text-align: center; }
    .quiz-progress-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; margin-bottom: 15px; }
    .quiz-progress { height: 12px; overflow: hidden; border-radius: 999px; background: #eaeaf2; }
    .quiz-progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #5b5bd6, #8e72e9); transition: width .3s ease; }
    .progress-text { min-width: 62px; color: var(--muted); font-size: 14px; }
    .quiz-card {
      position: relative; padding: clamp(22px, 5vw, 44px); border: 1px solid rgba(91,91,214,.1);
      border-radius: 34px; background: rgba(255,255,255,.96); box-shadow: var(--shadow);
    }
    .score-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
    .score-chip { padding: 8px 12px; border-radius: 999px; background: #f4f3ff; color: var(--purple-dark); font-size: 14px; }
    .visual-host { display: grid; place-items: center; min-height: 132px; margin-bottom: 14px; }
    .question-title { margin: 8px auto 27px; max-width: 760px; text-align: center; font-size: clamp(28px, 5.2vw, 48px); line-height: 1.17; letter-spacing: -.035em; }
    .answers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
    .answer-btn {
      min-height: 82px; padding: 17px 19px; border: 3px solid #ececf5; border-radius: 22px;
      color: var(--ink); background: #fff; cursor: pointer; text-align: left; font-size: clamp(19px, 3vw, 25px);
      font-weight: 900; line-height: 1.25; transition: transform .14s ease, border-color .14s ease, background .14s ease;
    }
    .answer-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: #b9b8f2; background: #faf9ff; }
    .answer-btn:disabled { cursor: default; }
    .answer-btn.correct { border-color: #37bb89; background: #e9fbf4; color: #08714d; }
    .answer-btn.wrong { border-color: #ee788a; background: #fff0f3; color: #aa2841; }
    .choice-letter {
      display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 9px;
      border-radius: 12px; background: #f0efff; color: var(--purple-dark); vertical-align: middle; font-size: 17px;
    }
    .feedback {
      display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px;
      padding: 18px; border-radius: 20px; background: #f7f7fb; font-family: system-ui, sans-serif;
    }
    .feedback-copy strong { display: block; margin-bottom: 4px; font-family: "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 21px; }
    .feedback-copy span { color: var(--muted); line-height: 1.45; }
    .next-btn {
      flex: 0 0 auto; min-height: 52px; padding: 13px 20px; border: 0; border-radius: 16px;
      color: white; background: var(--purple); cursor: pointer; box-shadow: 0 10px 20px rgba(91,91,214,.24);
    }

    .result-card { text-align: center; }
    .result-emoji { font-size: 82px; animation: bounce .7s ease both; }
    .result-card h2 { margin: 9px 0 4px; font-size: clamp(35px, 6vw, 58px); }
    .result-card > p { margin: 0 auto 24px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 19px; }
    .score-ring {
      display: grid; place-items: center; width: 190px; height: 190px; margin: 22px auto;
      border-radius: 50%; background: conic-gradient(var(--green) var(--score-angle), #e9eaf1 0);
    }
    .score-ring-inner { display: grid; place-items: center; width: 148px; height: 148px; border-radius: 50%; background: white; }
    .score-ring strong { display: block; font-size: 42px; }
    .score-ring span { color: var(--muted); font-size: 14px; }
    .stars { margin: 5px 0 22px; font-size: 42px; letter-spacing: 6px; }
    .result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
    .primary-btn {
      min-height: 54px; padding: 14px 22px; border: 0; border-radius: 16px; color: white;
      background: var(--purple); cursor: pointer; box-shadow: 0 10px 20px rgba(91,91,214,.24);
    }

    .fraction-visual { display: flex; align-items: center; justify-content: center; gap: 18px; }
    .fraction-grid {
      display: grid; gap: 4px; width: 124px; height: 124px; padding: 5px; border: 4px solid #393b57;
      border-radius: 50%; overflow: hidden; background: white;
    }
    .fraction-grid.parts-2 { grid-template-columns: repeat(2, 1fr); }
    .fraction-grid.parts-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
    .fraction-grid span { background: #fff; }
    .fraction-grid span.filled { background: linear-gradient(145deg, #ffc94a, #ff9f43); }
    .fraction-label { padding: 10px 14px; border-radius: 14px; background: #fff6d8; font-size: 28px; color: #7c5700; }
    .emoji-visual { max-width: 760px; text-align: center; font-size: clamp(46px, 8vw, 76px); line-height: 1.18; letter-spacing: 7px; }
    .visual-caption { display: block; margin-top: 10px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 16px; letter-spacing: 0; }
    .coin-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .money-piece {
      display: grid; place-items: center; min-width: 78px; height: 78px; padding: 8px; border: 5px solid #e5aa24;
      border-radius: 50%; background: linear-gradient(145deg, #fff3a5, #ffc94a); color: #6c4b00; font-size: 19px;
      box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 8px 16px rgba(126,86,0,.12);
    }
    .money-piece.note { min-width: 116px; border-radius: 16px; border-color: #63c7a0; background: linear-gradient(145deg, #d9fff0, #93e2c2); color: #17684c; }
    .clock {
      position: relative; width: 142px; height: 142px; border: 8px solid #3a3c5a; border-radius: 50%;
      background: white; box-shadow: 0 10px 24px rgba(52,50,110,.13);
    }
    .clock::after { content: ""; position: absolute; width: 14px; height: 14px; left: 50%; top: 50%; border-radius: 50%; background: #e64b64; transform: translate(-50%,-50%); z-index: 5; }
    .clock-num { position: absolute; color: var(--muted); font-family: system-ui, sans-serif; font-size: 13px; transform: translate(-50%,-50%); }
    .hand { position: absolute; left: 50%; bottom: 50%; border-radius: 99px; transform-origin: 50% 100%; }
    .hour-hand { width: 7px; height: 39px; margin-left: -3.5px; background: #343650; z-index: 3; }
    .minute-hand { width: 5px; height: 51px; margin-left: -2.5px; background: var(--purple); z-index: 4; }
    .compare-row { display: flex; align-items: stretch; justify-content: center; gap: 16px; width: min(620px, 100%); }
    .compare-card { flex: 1; display: grid; place-items: center; min-height: 112px; padding: 13px; border: 3px solid #e9e9f3; border-radius: 22px; background: #fafaff; text-align: center; }
    .compare-card b { display: block; font-size: clamp(31px, 5vw, 48px); }
    .compare-card span { color: var(--muted); font-family: system-ui, sans-serif; font-size: 14px; }
    .shape-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 22px; }
    .shape-wrap { display: grid; place-items: center; gap: 7px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 13px; }
    .shape { display: block; width: 76px; height: 76px; background: #6f70e6; box-shadow: 0 9px 18px rgba(52,50,110,.16); }
    .shape.circle { border-radius: 50%; background: #ffc94a; }
    .shape.triangle { width: 0; height: 0; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 78px solid #e64b64; background: transparent; box-shadow: none; }
    .shape.rectangle { width: 112px; height: 65px; background: #25b888; }
    .shape.sphere { border-radius: 50%; background: radial-gradient(circle at 31% 27%, #fff, #6f70e6 26%, #4444b8 72%); }
    .shape.cube { border-radius: 9px; background: linear-gradient(145deg, #8a8bef, #5051c5); transform: skewY(-4deg); }
    .shape.cuboid { width: 112px; height: 66px; border-radius: 8px; background: linear-gradient(145deg, #43c99a, #178969); transform: skewY(-4deg); }
    .shape.cylinder { height: 86px; border-radius: 50% / 14%; background: linear-gradient(90deg, #64d6ad, #1e9f73, #64d6ad); }
    .shape.cone { width: 0; height: 0; border-left: 43px solid transparent; border-right: 43px solid transparent; border-bottom: 86px solid #ffc94a; background: transparent; box-shadow: none; }
    .shape.pyramid { width: 0; height: 0; border-left: 46px solid transparent; border-right: 46px solid transparent; border-bottom: 82px solid #e64b64; background: transparent; box-shadow: none; filter: drop-shadow(0 8px 8px rgba(52,50,110,.16)); }
    .data-table { width: min(570px, 100%); overflow: hidden; border: 3px solid #e6e6f2; border-radius: 18px; background: white; font-family: system-ui, sans-serif; }
    .data-row { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #ededf5; }
    .data-row:first-child { border-top: 0; }
    .data-label { font-weight: 900; }
    .data-icons { color: var(--purple-dark); font-size: 25px; letter-spacing: 4px; word-break: break-word; }
    .tally { letter-spacing: 2px; font-weight: 900; color: var(--purple-dark); }
    .key { padding: 8px 12px; border-radius: 999px; background: #fff5d3; color: #705000; font-size: 13px; }
    .number-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 760px; }
    .number-chip { display: grid; place-items: center; min-width: 62px; height: 62px; padding: 8px 13px; border: 3px solid #ddddf1; border-radius: 17px; color: var(--purple-dark); background: #f8f7ff; font-size: 28px; font-weight: 900; }
    .number-chip.blank { border-style: dashed; color: var(--red); background: #fff3f5; }
    .equation-visual { padding: 17px 25px; border: 4px solid #deddf4; border-radius: 22px; color: var(--purple-dark); background: #f8f7ff; font-size: clamp(38px, 8vw, 68px); font-weight: 900; letter-spacing: .02em; }
    .place-value { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); width: min(430px, 100%); overflow: hidden; border: 3px solid #dfdfef; border-radius: 20px; background: white; }
    .place-column { min-height: 130px; padding: 12px; text-align: center; }
    .place-column + .place-column { border-left: 2px solid #e9e9f3; }
    .place-column b { display: block; margin-bottom: 9px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 14px; text-transform: uppercase; }
    .tens-rods, .ones-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; min-height: 73px; }
    .tens-rods i { display: block; width: 10px; height: 66px; border-radius: 5px; background: linear-gradient(#ffcf55, #e59b10); }
    .ones-dots i, .math-dot { display: block; width: 23px; height: 23px; border-radius: 50%; background: linear-gradient(145deg, #7b7ce9, #4d4fca); box-shadow: inset 0 0 0 3px rgba(255,255,255,.28); }
    .dot-cluster { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: min(340px, 100%); padding: 18px; border-radius: 22px; background: #f4f3ff; }
    .group-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .math-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: 105px; min-height: 88px; padding: 13px; border: 3px solid #e1e1ef; border-radius: 19px; background: white; }
    .math-group .math-dot { width: 18px; height: 18px; }
    .site-footer { margin: 18px 0 0; padding: 22px; border: 1px solid var(--line); border-radius: 22px; color: var(--muted); background: rgba(255,255,255,.75); font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.55; text-align: center; }

    .portal-view { padding: 22px 0 18px; }
    .portal-hero {
      position: relative; isolation: isolate; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
      min-height: 430px; overflow: hidden; padding: clamp(30px, 5vw, 62px); border-radius: 42px;
      color: #fff; background: linear-gradient(135deg, #6559dd 0%, #7868ed 54%, #4d9ce9 100%);
      box-shadow: 0 24px 55px rgba(71, 63, 168, .28);
    }
    .portal-hero::before, .portal-hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.11); }
    .portal-hero::before { width: 340px; height: 340px; right: -85px; top: -130px; }
    .portal-hero::after { width: 210px; height: 210px; left: 42%; bottom: -135px; }
    .portal-copy { position: relative; z-index: 2; }
    .portal-kicker { display: inline-flex; padding: 9px 14px; border: 2px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.12); font-size: 14px; font-weight: 900; }
    .portal-hero h1 { margin: 17px 0 15px; max-width: 720px; font-size: clamp(42px, 6.7vw, 80px); line-height: .98; letter-spacing: -.055em; }
    .portal-hero h1 em { color: #ffdc69; font-style: normal; }
    .portal-hero p { max-width: 650px; margin: 0; color: rgba(255,255,255,.88); font-family: system-ui, sans-serif; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
    .book-mascot { position: relative; z-index: 2; width: min(100%, 380px); justify-self: center; filter: drop-shadow(0 22px 25px rgba(30,25,104,.23)); }
    .float-shape { position: absolute; z-index: 1; font-weight: 900; opacity: .7; animation: floaty 4s ease-in-out infinite; }
    .float-shape.one { left: 48%; top: 13%; color: #ffdc69; font-size: 34px; }
    .float-shape.two { right: 5%; bottom: 11%; color: #bff4e1; font-size: 45px; animation-delay: -1.5s; }
    .float-shape.three { left: 52%; bottom: 7%; color: #ffadc0; font-size: 29px; animation-delay: -2.5s; }
    @keyframes floaty { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-13px) rotate(6deg); } }

    .portal-heading { margin: 45px 3px 19px; text-align: center; }
    .portal-heading h2 { margin: 0; font-size: clamp(31px, 4vw, 48px); letter-spacing: -.04em; }
    .portal-heading p { margin: 7px 0 0; color: var(--muted); font-family: system-ui, sans-serif; font-size: 17px; }
    .school-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .school-card {
      position: relative; display: grid; grid-template-columns: 1fr 190px; align-items: center; min-height: 285px; overflow: hidden;
      padding: clamp(24px, 4vw, 38px); border: 0; border-radius: 32px; color: var(--ink); cursor: pointer; text-align: left;
      box-shadow: 0 16px 38px rgba(52,50,110,.13); transition: transform .2s ease, box-shadow .2s ease;
    }
    .school-card:hover { transform: translateY(-7px) rotate(-.4deg); box-shadow: 0 25px 50px rgba(52,50,110,.2); }
    .school-card.primary { background: linear-gradient(145deg, #fff5bd, #ffd55e); }
    .school-card.secondary { color: #fff; background: linear-gradient(145deg, #6e63e9, #4d89df); }
    .school-card::after { content:""; position:absolute; width:190px; height:190px; right:-55px; top:-65px; border-radius:50%; background:rgba(255,255,255,.22); }
    .school-card small { display: inline-block; margin-bottom: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.48); font-size: 13px; font-weight: 900; }
    .school-card.secondary small { background: rgba(255,255,255,.16); }
    .school-card h3 { margin: 0 0 8px; font-size: clamp(28px, 3.3vw, 42px); letter-spacing: -.035em; }
    .school-card p { margin: 0; max-width: 360px; color: rgba(32,35,58,.68); font-family: system-ui, sans-serif; line-height: 1.5; }
    .school-card.secondary p { color: rgba(255,255,255,.78); }
    .school-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 19px; padding: 10px 14px; border-radius: 13px; color: #fff; background: #20233a; font-size: 14px; }
    .school-card.secondary .school-link { color: #4041ae; background: #fff; }
    .school-art { position: relative; z-index: 2; width: 100%; }
    .fun-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
    .fun-item { display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.82); box-shadow: 0 9px 24px rgba(52,50,110,.07); }
    .fun-icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; color: var(--purple-dark); background: #ecebff; font-size: 22px; }
    .fun-item b { display: block; margin-bottom: 3px; }
    .fun-item span:last-child { color: var(--muted); font-family: system-ui, sans-serif; font-size: 13px; }

    .subject-view { padding: 22px 0 32px; }
    .subject-banner { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 52px); border-radius: 36px; color: #fff; background: linear-gradient(135deg, #ff8b4d, #f05474); box-shadow: var(--shadow); }
    .subject-banner.secondary-banner { background: linear-gradient(135deg, #5b58d7, #3b8edc); }
    .subject-banner::after { content:"ABC  123  ∆"; position:absolute; right:4%; top:50%; transform:translateY(-50%) rotate(-5deg); color:rgba(255,255,255,.17); font-size:clamp(45px,8vw,96px); font-weight:900; letter-spacing:10px; }
    .page-back { position: relative; z-index: 2; display: inline-flex; padding: 10px 14px; border: 2px solid rgba(255,255,255,.25); border-radius: 14px; color: #fff; background: rgba(255,255,255,.14); cursor: pointer; }
    .subject-banner h1 { position:relative; z-index:2; margin:22px 0 8px; font-size:clamp(38px,6vw,68px); letter-spacing:-.05em; }
    .subject-banner p { position:relative; z-index:2; max-width:650px; margin:0; color:rgba(255,255,255,.86); font-family:system-ui,sans-serif; font-size:18px; line-height:1.5; }
    .subject-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:36px 3px 17px; }
    .subject-heading h2 { margin:0; font-size:clamp(28px,4vw,42px); letter-spacing:-.035em; }
    .subject-heading p { margin:0; color:var(--muted); font-family:system-ui,sans-serif; }
    .subject-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
    .subject-card { position:relative; min-height:245px; overflow:hidden; padding:23px; border:0; border-radius:27px; color:var(--ink); background:#fff; cursor:pointer; text-align:left; box-shadow:0 12px 30px rgba(52,50,110,.1); transition:transform .2s ease,box-shadow .2s ease; }
    .subject-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(52,50,110,.16); }
    .subject-card::after { content:""; position:absolute; width:140px; height:140px; right:-43px; top:-48px; border-radius:50%; background:var(--subject-bg); }
    .subject-symbol { position:relative; z-index:2; display:grid; place-items:center; width:72px; height:72px; border-radius:22px; color:var(--subject-color); background:var(--subject-bg); font-size:25px; font-weight:900; }
    .subject-card h3 { margin:20px 0 7px; font-size:25px; }
    .subject-card p { min-height:43px; margin:0; color:var(--muted); font-family:system-ui,sans-serif; line-height:1.42; }
    .subject-status { display:inline-flex; margin-top:19px; padding:9px 12px; border-radius:12px; color:#fff; background:var(--subject-color); font-size:13px; }
    .direct-grade-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:15px; }
    .direct-grade-btn { min-height:43px; padding:7px 5px; border:2px solid #bcebd3; border-radius:13px; color:#08714d; background:#effbf5; cursor:pointer; font-family:system-ui,sans-serif; font-size:12px; font-weight:900; transition:transform .15s ease,background .15s ease; }
    .direct-grade-btn:hover { transform:translateY(-2px); background:#dcf7e9; }
    .math-ready .subject-status { margin-top:10px; border:0; cursor:pointer; }
    .subject-card.coming { filter:saturate(.7); }
    .subject-card.coming .subject-status { color:var(--muted); background:#eef0f5; }
    .math-ready { box-shadow:0 16px 38px rgba(49,153,100,.18); }
    .math-ready::before { content:"TAHUN 1–3"; position:absolute; right:16px; bottom:16px; padding:6px 9px; border-radius:999px; color:#08714d; background:#dff8ec; font-size:11px; font-weight:900; }

    .grade-view { padding: 22px 0 34px; }
    .grade-banner { position: relative; overflow: hidden; padding: clamp(30px, 5vw, 58px); border-radius: 38px; color: #fff; background: linear-gradient(135deg, #249a72, #45b98a 54%, #42a4d9); box-shadow: var(--shadow); }
    .grade-banner::after { content:"1  2  3"; position:absolute; right:5%; top:50%; transform:translateY(-50%) rotate(-6deg); color:rgba(255,255,255,.17); font-size:clamp(64px,11vw,132px); font-weight:900; letter-spacing:10px; }
    .grade-banner h1 { position:relative; z-index:2; margin:22px 0 8px; font-size:clamp(40px,6vw,70px); letter-spacing:-.05em; }
    .grade-banner p { position:relative; z-index:2; max-width:680px; margin:0; color:rgba(255,255,255,.88); font-family:system-ui,sans-serif; font-size:18px; line-height:1.5; }
    .grade-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:25px; }
    .grade-card { position:relative; min-height:310px; overflow:hidden; padding:27px; border:0; border-radius:30px; color:var(--ink); background:#fff; cursor:pointer; text-align:left; box-shadow:0 14px 36px rgba(52,50,110,.12); transition:transform .2s ease,box-shadow .2s ease; }
    .grade-card:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(52,50,110,.18); }
    .grade-card::after { content:""; position:absolute; width:190px; height:190px; right:-72px; top:-70px; border-radius:50%; background:var(--grade-tint); }
    .grade-number { position:relative; z-index:2; display:grid; place-items:center; width:94px; height:94px; border-radius:28px; color:#fff; background:var(--grade-color); font-size:52px; font-weight:900; box-shadow:0 12px 24px color-mix(in srgb, var(--grade-color) 28%, transparent); transform:rotate(-4deg); }
    .grade-card h2 { margin:25px 0 8px; font-size:31px; letter-spacing:-.03em; }
    .grade-card p { min-height:64px; margin:0; color:var(--muted); font-family:system-ui,sans-serif; line-height:1.48; }
    .grade-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; }
    .grade-meta span:first-child { color:var(--muted); font-family:system-ui,sans-serif; font-size:14px; font-weight:700; }
    .grade-go { padding:10px 14px; border-radius:14px; color:#fff; background:var(--grade-color); }

    .toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 14px; color: white; background: #282a43; transition: .2s ease; box-shadow: var(--shadow); }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .confetti { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
    .confetti i { position: absolute; top: -30px; width: 12px; height: 20px; border-radius: 3px; animation: fall 1.8s linear forwards; }
    @keyframes fall { to { transform: translate3d(var(--drift), 110vh, 0) rotate(720deg); } }
    @keyframes bounce { 0% { transform: scale(.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

    @media (max-width: 850px) {
      .hero { grid-template-columns: 1fr; }
      .hero-art { display: none; }
      .volume-grid, .volume-section:first-child .volume-grid { grid-template-columns: repeat(2, 1fr); }
      .portal-hero { grid-template-columns: 1fr; min-height: auto; }
      .book-mascot { width: 270px; margin-top: 22px; }
      .school-card { grid-template-columns: 1fr; }
      .school-art { width: 155px; position: absolute; right: 18px; bottom: 12px; opacity: .52; }
      .subject-grid { grid-template-columns: repeat(2, 1fr); }
      .grade-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 600px) {
      .app { width: min(100% - 18px, 1180px); }
      .site-header { padding-top: 13px; }
      .brand span:last-child { max-width: 190px; }
      .hero { padding: 28px 22px; border-radius: 27px; }
      .eyebrow { font-size: 12px; white-space: nowrap; }
      .stats { grid-template-columns: 1fr; }
      .stat { display: flex; align-items: center; gap: 14px; padding: 14px 17px; }
      .stat strong { min-width: 72px; }
      .volume-grid, .volume-section:first-child .volume-grid { grid-template-columns: 1fr; }
      .chapter-card { min-height: 250px; }
      .answers { grid-template-columns: 1fr; }
      .answer-btn { min-height: 69px; }
      .feedback { align-items: stretch; flex-direction: column; }
      .next-btn { width: 100%; }
      .compare-row { gap: 8px; }
      .quiz-card { border-radius: 25px; }
      .read-action { display: none; }
      .portal-view, .subject-view { padding-top: 9px; }
      .portal-hero { padding: 29px 22px; border-radius: 28px; }
      .portal-hero h1 { font-size: 43px; }
      .book-mascot { width: 220px; }
      .school-grid, .fun-strip, .subject-grid { grid-template-columns: 1fr; }
      .grade-grid { grid-template-columns: 1fr; }
      .school-card { min-height: 258px; padding: 25px 22px; }
      .school-art { width: 135px; }
      .fun-item { padding: 14px; }
      .subject-banner { padding: 27px 22px; border-radius: 27px; }
      .subject-banner::after { display:none; }
      .subject-heading { align-items:start; flex-direction:column; }
      .subject-card { min-height:220px; }
      .grade-banner { padding:29px 22px; border-radius:28px; }
      .grade-banner::after { display:none; }
      .grade-card { min-height:275px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }


/* Struktur berbilang halaman dan ruang iklan bersama */
.chapter-card { display: block; text-decoration: none; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 76px;
  padding: 12px 0;
  background: rgba(248, 247, 255, .92);
  border-bottom: 1px solid rgba(91, 91, 214, .1);
  backdrop-filter: blur(14px);
}
.primary-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.primary-nav a {
  padding: 10px 12px; border-radius: 12px; color: var(--muted); text-decoration: none;
  font-family: system-ui, sans-serif; font-size: 14px; font-weight: 800;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--purple-dark); background: #ecebff; }
.brand-button { text-decoration: none; }
.icon-btn { display: grid; place-items: center; text-decoration: none; }
.ad-reserve {
  display: grid; place-items: center; min-height: 104px; margin: 16px 0 28px; padding: 18px;
  border: 1px dashed #cfd1de; border-radius: 20px; color: #777b8e; background: rgba(255,255,255,.72);
  font-family: system-ui, sans-serif; text-align: center;
}
.ad-reserve strong { display: block; margin-bottom: 4px; color: #555a70; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ad-reserve span { font-size: 13px; }
.global-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 48px;
  padding: 24px 2px 4px; border-top: 1px solid var(--line); color: var(--muted);
  font-family: system-ui, sans-serif; font-size: 14px;
}
.global-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.global-footer a { color: var(--purple-dark); text-decoration: none; font-weight: 700; }
.legal-page {
  width: min(860px, 100%); margin: 10px auto 0; padding: clamp(25px, 5vw, 54px);
  border: 1px solid var(--line); border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: var(--shadow);
  font-family: system-ui, sans-serif; line-height: 1.75;
}
.legal-page h1 { margin-top: 0; font-family: "Arial Rounded MT Bold", system-ui, sans-serif; font-size: clamp(34px, 5vw, 52px); }
.legal-page h2 { margin-top: 30px; font-size: 22px; }
.legal-page a { color: var(--purple-dark); }
.legal-note { padding: 16px 18px; border-left: 5px solid var(--purple); border-radius: 12px; background: #f1f0ff; }
@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; }
  .primary-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .primary-nav a { white-space: nowrap; }
  .ad-reserve { min-height: 86px; }
}


/* Unit Google AdSense manual */
.adsense-slot {
  display: block;
  min-height: 100px;
  padding: 10px 14px;
  overflow: hidden;
}
.adsense-slot .ad-label {
  margin-bottom: 8px;
  color: #555a70;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}
.adsense-slot .adsbygoogle {
  width: 100%;
}

/* Phase 2.2 curriculum catalog */
.catalog-view { padding:22px 0 38px; }
.catalog-hero { position:relative; overflow:hidden; padding:clamp(32px,6vw,68px); border-radius:38px; color:#fff; background:linear-gradient(135deg,#4938c8,#2679cf 62%,#39b99b); box-shadow:var(--shadow); }
.catalog-hero::after { content:"1 2 3 • A B C"; position:absolute; right:-20px; bottom:-18px; color:rgba(255,255,255,.12); font-size:clamp(42px,8vw,100px); font-weight:900; transform:rotate(-5deg); }
.catalog-hero h1 { position:relative; z-index:1; margin:12px 0 10px; font-size:clamp(38px,6vw,70px); letter-spacing:-.05em; }
.catalog-hero p { position:relative; z-index:1; max-width:780px; margin:0; color:rgba(255,255,255,.9); font-family:system-ui,sans-serif; font-size:18px; line-height:1.55; }
.catalog-controls { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:14px; margin:24px 0 16px; padding:18px; border-radius:24px; background:#fff; box-shadow:0 12px 30px rgba(52,50,110,.09); }
.catalog-controls label { display:grid; gap:7px; color:var(--ink); font-family:system-ui,sans-serif; font-size:13px; font-weight:800; }
.catalog-controls select,.catalog-controls input { width:100%; min-height:48px; padding:0 14px; border:2px solid #e5e7f3; border-radius:14px; color:var(--ink); background:#fafaff; font:700 15px system-ui,sans-serif; outline:none; }
.catalog-controls select:focus,.catalog-controls input:focus { border-color:#7772e5; box-shadow:0 0 0 4px rgba(91,91,214,.12); }
.catalog-info-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:13px 2px 18px; font-family:system-ui,sans-serif; }
.catalog-info-row p { margin:0; color:var(--muted); font-weight:700; }
.catalog-info-row a { color:#3f47bb; font-weight:800; text-decoration:none; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.catalog-subject-card { display:block; min-height:215px; padding:22px; border:2px solid transparent; border-radius:25px; color:var(--ink); background:#fff; box-shadow:0 10px 28px rgba(52,50,110,.09); text-decoration:none; }
.catalog-subject-card.published { border-color:#bcebd3; background:linear-gradient(180deg,#fff,#f2fcf7); transition:transform .18s ease,box-shadow .18s ease; }
.catalog-subject-card.published:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(52,50,110,.14); }
.catalog-subject-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.catalog-symbol { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; color:#fff; background:#5b5bd6; font-family:system-ui,sans-serif; font-size:15px; font-weight:900; }
.catalog-subject-card.published .catalog-symbol { background:#159568; }
.catalog-status { padding:7px 10px; border-radius:999px; font:800 11px system-ui,sans-serif; }
.catalog-status.published { color:#08714d; background:#dff7eb; }
.catalog-status.mapped { color:#60647a; background:#eef0f7; }
.catalog-subject-card h3 { margin:18px 0 5px; font-size:23px; }
.catalog-subject-card p { margin:0 0 15px; color:var(--muted); font:700 13px system-ui,sans-serif; text-transform:capitalize; }
.catalog-open { color:#08714d; font:900 14px system-ui,sans-serif; }
.catalog-plan { display:block; color:#777b8c; font:600 13px/1.45 system-ui,sans-serif; }
.catalog-empty { grid-column:1/-1; padding:35px; border:2px dashed #d8daea; border-radius:22px; color:var(--muted); background:#fff; text-align:center; font:700 15px system-ui,sans-serif; }
.catalog-method { margin-top:34px; padding:30px; border-radius:30px; background:#eef3ff; }
.catalog-method h2 { margin:0 0 18px; font-size:30px; }
.method-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.method-grid article { padding:19px; border-radius:20px; background:#fff; }
.method-grid b { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#fff; background:#5b5bd6; }
.method-grid h3 { margin:14px 0 6px; font-size:18px; }
.method-grid p { margin:0; color:var(--muted); font:14px/1.5 system-ui,sans-serif; }
@media (max-width:900px) { .catalog-grid{grid-template-columns:repeat(2,1fr)} .method-grid{grid-template-columns:repeat(2,1fr)} .catalog-controls{grid-template-columns:1fr 1fr}.catalog-search{grid-column:1/-1} }
@media (max-width:620px) { .catalog-view{padding-top:9px}.catalog-hero{padding:29px 22px;border-radius:28px}.catalog-hero::after{display:none}.catalog-controls,.catalog-grid,.method-grid{grid-template-columns:1fr}.catalog-search{grid-column:auto}.catalog-info-row{align-items:flex-start;flex-direction:column}.catalog-method{padding:21px}.catalog-subject-card{min-height:190px} }

/* Fasa 4.1: pautan rujukan yang lebih jelas */
.hero-copy { position: relative; z-index: 2; }
.reference-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.reference-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:13px 19px; border:2px solid #5b5bd6; border-radius:16px;
  color:#fff; background:#5b5bd6; text-decoration:none; font-family:system-ui,sans-serif;
  font-weight:900; box-shadow:0 10px 20px rgba(91,91,214,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.reference-btn:hover { transform:translateY(-2px); box-shadow:0 13px 24px rgba(91,91,214,.27); }
.reference-btn.secondary { color:#4a479f; background:#f2f1ff; border-color:#d5d3ff; box-shadow:none; }
.reference-panel {
  margin-top:24px; padding:22px; border:1px solid rgba(91,91,214,.14); border-radius:24px;
  background:rgba(255,255,255,.92); box-shadow:0 12px 28px rgba(52,50,110,.08);
}
.reference-panel h2 { margin:0 0 6px; font-size:25px; }
.reference-panel p { margin:0; color:var(--muted); font-family:system-ui,sans-serif; line-height:1.5; }
.reference-panel .reference-actions { margin-top:15px; }
@media (max-width:620px) { .reference-actions { flex-direction:column; } .reference-btn { width:100%; } }



/* Fasa 4.2: visual koordinat Tahun 3 */
.coordinate-visual{max-width:640px;margin:0 auto;padding:18px;border:1px solid #d9dcef;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(46,53,87,.08)}
.coord-header,.coord-row{display:grid;grid-template-columns:44px repeat(4,minmax(64px,1fr));gap:8px;align-items:stretch}
.coord-header{margin-bottom:8px}.coord-row{margin-bottom:8px}
.coord-axis-label,.coord-corner{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;background:#ececff;color:#4141a8;font-weight:800}
.coord-cell{display:flex;align-items:center;justify-content:center;min-height:54px;padding:6px;border:2px solid #e4e6f3;border-radius:12px;background:#fafaff;font-weight:700;text-align:center}
.coordinate-visual small{display:block;margin-top:10px;color:#62677d;text-align:center}
@media(max-width:560px){.coordinate-visual{padding:10px}.coord-header,.coord-row{grid-template-columns:32px repeat(4,minmax(48px,1fr));gap:5px}.coord-cell{min-height:48px;padding:4px;font-size:.78rem}.coord-axis-label,.coord-corner{min-height:34px}}

/* Fasa 5: halaman subjek Tahun 1–3 */
.subject-year-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.subject-year-card{display:block;position:relative;overflow:hidden;min-height:245px;padding:26px;border-radius:28px;color:var(--ink);background:#fff;box-shadow:0 12px 33px rgba(52,50,110,.1);text-decoration:none;transition:.2s}.subject-year-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(52,50,110,.16)}.subject-year-card:after{content:"";position:absolute;width:150px;height:150px;right:-48px;top:-55px;border-radius:50%;background:var(--card-tint)}.subject-year-number{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:22px;color:#fff;background:var(--card-color);font-size:32px;font-weight:900}.subject-year-card h2{margin:25px 0 7px;font-size:29px}.subject-year-card p{min-height:52px;margin:0;color:var(--muted);font-family:system-ui,sans-serif;line-height:1.48}.subject-year-meta{display:flex;justify-content:space-between;gap:12px;margin-top:22px;color:var(--card-color);font-weight:900}.scope-note{margin:24px 0 0;padding:18px 20px;border:1px solid #deddf7;border-radius:20px;color:var(--muted);background:#faf9ff;font-family:system-ui,sans-serif;line-height:1.55}.subject-card-link{display:block;text-decoration:none}.subject-card-link .subject-status{display:inline-flex}.subject-choice-note{font-size:13px;color:var(--muted);font-family:system-ui,sans-serif}.chapter-card{width:100%}@media(max-width:820px){.subject-year-grid{grid-template-columns:1fr}}


/* Fasa 5.1: paparan soalan bersih dan sokongan tulisan kanan-ke-kiri */
.visual-host:empty{display:none;min-height:0;margin:0}
.answer-btn{display:flex;align-items:center;gap:9px}
.answer-copy{flex:1}
.rtl-question .question-title,.rtl-question .answer-btn,.rtl-question .feedback-copy span{direction:rtl;text-align:right;font-family:"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;letter-spacing:0}
.rtl-question .answer-btn{font-size:clamp(22px,3.2vw,29px)}
.rtl-question .choice-letter{margin-right:0;margin-left:9px;direction:ltr;font-family:system-ui,sans-serif}
[dir="rtl"] .chapter-card h3,[dir="rtl"] .chapter-card p{text-align:right}

.arabic-learning-area{font-family:"Noto Naskh Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif}
.arabic-learning-area .hero-copy,.arabic-learning-area .section-heading{text-align:right}
.arabic-learning-area .reference-actions{justify-content:flex-start}


/* Fasa 6B.1: reka bentuk Sekolah Menengah seragam */
.primary-nav a[aria-current="page"]{color:var(--purple-dark);background:#ecebff}
.secondary-hub .subject-banner::after{content:"KSSM  1  2  3"}
.secondary-hub .subject-card{min-height:260px;border:1px solid rgba(91,91,214,.08)}
.secondary-hub .subject-card h3{min-height:60px;display:flex;align-items:flex-end}
.secondary-hub .subject-card p{min-height:50px}
.secondary-hub .subject-status{font-family:system-ui,sans-serif;font-weight:900}
.secondary-subject-view .subject-banner::after{content:"1  2  3"}
.secondary-subject-view .subject-heading{margin-bottom:0}
.secondary-year-card{border:1px solid rgba(91,91,214,.08)}
.secondary-year-card .subject-year-number{box-shadow:0 12px 24px color-mix(in srgb,var(--card-color) 25%,transparent)}
.secondary-year-card .subject-year-meta{font-family:system-ui,sans-serif}
.secondary-hub .school-link,.secondary-subject-view .school-link{margin-top:0;text-decoration:none;font-weight:900}
@media(max-width:850px){.secondary-hub .subject-card h3{min-height:auto}}
@media(max-width:600px){.secondary-hub .subject-card{min-height:220px}.secondary-hub .subject-card p{min-height:auto}.secondary-hub .school-link,.secondary-subject-view .school-link{width:100%;justify-content:center}}


/* Fasa 7: kandungan utama yang lebih lengkap */
.primary-nav a[aria-current="page"] { color: var(--purple-dark); background: #ecebff; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.portal-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px;
  border: 2px solid transparent; border-radius: 15px; text-decoration: none; font-weight: 900;
  transition: transform .18s ease, box-shadow .18s ease;
}
.portal-action:hover { transform: translateY(-2px); }
.portal-action.primary { color: #3737a3; background: #ffdc69; box-shadow: 0 10px 22px rgba(35,30,112,.2); }
.portal-action.secondary { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12); }
.portal-action.dark { color: #fff; background: var(--ink); }
.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.home-stat { padding: 22px; border: 1px solid var(--line); border-radius: 23px; background: rgba(255,255,255,.88); box-shadow: 0 10px 28px rgba(52,50,110,.08); }
.home-stat strong { display: block; color: var(--purple-dark); font-size: clamp(30px,4vw,43px); line-height: 1; }
.home-stat span { display: block; margin-top: 7px; font-size: 17px; font-weight: 900; }
.home-stat small { display: block; margin-top: 5px; color: var(--muted); font-family: system-ui,sans-serif; font-size: 13px; line-height: 1.4; }
.home-section { margin-top: 72px; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.home-section-heading > div { max-width: 690px; }
.home-section-heading.centered { display: block; max-width: 790px; margin-left: auto; margin-right: auto; text-align: center; }
.home-section-heading h2, .home-guide h2, .home-quality h2, .home-cta h2 { margin: 9px 0 0; font-size: clamp(30px,4.4vw,50px); line-height: 1.04; letter-spacing: -.045em; }
.home-section-heading > p { max-width: 390px; margin: 0; color: var(--muted); font-family: system-ui,sans-serif; line-height: 1.65; }
.home-section-heading.centered > p { max-width: 650px; margin: 10px auto 0; }
.home-eyebrow { display: inline-flex; color: var(--purple-dark); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.home-eyebrow.light { color: #ffeb9f; }
.home-intro-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; }
.home-copy-card, .home-checklist { padding: clamp(24px,4vw,38px); border-radius: 29px; }
.home-copy-card { border: 1px solid var(--line); background: #fff; box-shadow: 0 13px 35px rgba(52,50,110,.08); }
.home-copy-card h3, .home-checklist h3 { margin: 0 0 13px; font-size: 25px; }
.home-copy-card p, .home-checklist, .home-guide-main p, .home-quality-copy p { font-family: system-ui,sans-serif; line-height: 1.75; }
.home-copy-card p { margin: 0 0 12px; color: var(--muted); }
.home-copy-card p:last-child { margin-bottom: 0; }
.home-checklist { color: #fff; background: linear-gradient(145deg,#5656ce,#3d8fdc); box-shadow: 0 18px 38px rgba(61,78,174,.2); }
.home-checklist ul { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.home-checklist li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.home-checklist li span { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; color: #3f45ad; background: #c9f6e4; font-weight: 900; }
.home-checklist .text-link { color: #fff; }
.text-link { display: inline-flex; color: var(--purple-dark); text-decoration: none; font-weight: 900; }
.text-link:hover { text-decoration: underline; }
.home-subject-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; }
.home-subject-card { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 16px; min-height: 145px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: #fff; text-decoration: none; box-shadow: 0 9px 27px rgba(52,50,110,.07); transition: transform .18s ease,box-shadow .18s ease; }
.home-subject-card:hover { transform: translateY(-4px); box-shadow: 0 17px 35px rgba(52,50,110,.13); }
.home-subject-card .home-subject-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--home-tint); color: var(--home-accent); font-size: 21px; font-weight: 900; }
.home-subject-card small { color: var(--home-accent); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.home-subject-card h3 { margin: 4px 0 5px; font-size: 22px; }
.home-subject-card p { margin: 0; color: var(--muted); font-family: system-ui,sans-serif; font-size: 14px; line-height: 1.45; }
.home-subject-card > b { color: var(--home-accent); font-size: 23px; }
.home-subject-card.yellow { --home-accent:#a16a00;--home-tint:#fff0b8; }.home-subject-card.pink { --home-accent:#b9436c;--home-tint:#ffe1ec; }
.home-subject-card.green { --home-accent:#087b58;--home-tint:#d9f6e9; }.home-subject-card.blue { --home-accent:#2867aa;--home-tint:#deefff; }
.home-subject-card.purple { --home-accent:#4c48bb;--home-tint:#e8e7ff; }.home-subject-card.cyan { --home-accent:#08758d;--home-tint:#d9f5fb; }
.home-subject-card.orange { --home-accent:#ad571f;--home-tint:#ffeadb; }.home-subject-card.violet { --home-accent:#7648a7;--home-tint:#f0e2ff; }
.home-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.home-step { position: relative; overflow: hidden; min-height: 218px; padding: 24px; border-radius: 25px; background: #fff; box-shadow: 0 11px 30px rgba(52,50,110,.08); }
.home-step::after { content:""; position:absolute; width:115px; height:115px; right:-43px; top:-45px; border-radius:50%; background:#f0efff; }
.home-step > span { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; color:#fff; background:var(--purple); font-size: 23px; font-weight:900; }
.home-step h3 { margin: 22px 0 8px; font-size: 21px; }
.home-step p { margin: 0; color: var(--muted); font-family: system-ui,sans-serif; line-height: 1.55; }
.home-guide { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; padding: clamp(27px,5vw,54px); border-radius: 35px; background: linear-gradient(145deg,#fff8d7,#fffdf7 55%,#eef8ff); box-shadow: 0 18px 45px rgba(52,50,110,.1); }
.home-guide-main h3 { margin: 27px 0 6px; font-size: 21px; }
.home-guide-main p { margin: 10px 0 0; color: #545c73; }
.home-guide-aside { position: sticky; top: 100px; padding: 26px; border-radius: 27px; color: #fff; background: var(--ink); box-shadow: 0 17px 35px rgba(32,35,58,.2); }
.home-guide-aside h3 { margin: 0 0 18px; font-size: 24px; }
.home-guide-aside ol { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.home-guide-aside li { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.home-guide-aside li b { color: #ffdc69; }
.home-guide-aside li span { color: rgba(255,255,255,.78); font-family: system-ui,sans-serif; font-size: 14px; }
.home-tip { margin-top: 18px; padding: 15px; border-radius: 16px; color: #323755; background: #dff7ed; font-family: system-ui,sans-serif; font-size: 14px; line-height: 1.55; }
.home-audience-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.home-audience-card { padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 10px 29px rgba(52,50,110,.07); }
.home-audience-card > span { display: grid; place-items: center; width: 57px; height: 57px; border-radius: 18px; color: var(--purple-dark); background: #ecebff; font-size: 25px; }
.home-audience-card h3 { margin: 20px 0 8px; font-size: 23px; }
.home-audience-card p { margin: 0; color: var(--muted); font-family: system-ui,sans-serif; line-height: 1.65; }
.home-quality { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; padding: clamp(28px,5vw,55px); border-radius: 35px; color: #fff; background: linear-gradient(135deg,#5956d0,#367fc8); box-shadow: 0 22px 50px rgba(58,65,159,.24); }
.home-quality .home-eyebrow { color: #ffeb9f; }.home-quality-copy p { color: rgba(255,255,255,.82); }
.home-quality-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px; margin-top: 23px; }
.home-quality-actions .portal-action.dark { color: #4244ad; background: #fff; }.home-quality-actions .text-link { color:#fff; }
.home-quality-points { display: grid; gap: 11px; }
.home-quality-points > div { display: grid; grid-template-columns: 55px 1fr; gap: 15px; align-items: start; padding: 17px; border: 1px solid rgba(255,255,255,.17); border-radius: 20px; background: rgba(255,255,255,.1); }
.home-quality-points span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #4547b8; background: #ffdc69; font-weight: 900; }
.home-quality-points p { margin: 0; color: rgba(255,255,255,.78); font-family: system-ui,sans-serif; line-height: 1.5; }
.home-quality-points b { display: block; margin-bottom: 3px; color:#fff; }
.home-faq-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.home-faq-grid details { border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 8px 23px rgba(52,50,110,.06); }
.home-faq-grid summary { position: relative; padding: 20px 52px 20px 20px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 900; }
.home-faq-grid summary::-webkit-details-marker { display:none; }
.home-faq-grid summary::after { content:"+"; position:absolute; right:20px; top:15px; display:grid; place-items:center; width:32px; height:32px; border-radius:11px; color:var(--purple-dark); background:#ecebff; font-size:22px; }
.home-faq-grid details[open] summary::after { content:"−"; }
.home-faq-grid p { margin: 0; padding: 0 20px 20px; color: var(--muted); font-family: system-ui,sans-serif; line-height: 1.65; }
.home-cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 72px; padding: clamp(28px,5vw,50px); border-radius: 35px; color:#fff; background: linear-gradient(135deg,#21243c,#4c4bb7); box-shadow: 0 21px 46px rgba(33,36,60,.23); }
.home-cta > div:first-child { max-width: 690px; }.home-cta p { margin: 12px 0 0; color:rgba(255,255,255,.78); font-family:system-ui,sans-serif; line-height:1.6; }
.home-cta-actions { display: flex; flex-wrap: wrap; gap: 11px; flex: 0 0 auto; }
.home-cta-actions a { display:inline-flex; justify-content:center; padding:13px 17px; border-radius:15px; color:#3737a3; background:#fff; text-decoration:none; font-weight:900; }
.home-cta-actions a:last-child { color:#2f3147; background:#ffdc69; }
@media(max-width:900px){
  .home-intro-grid,.home-guide,.home-quality{grid-template-columns:1fr}.home-steps{grid-template-columns:repeat(2,1fr)}.home-guide-aside{position:static}.home-quality{align-items:start}
}
@media(max-width:700px){
  .home-stats,.home-subject-grid,.home-audience-grid,.home-faq-grid{grid-template-columns:1fr}.home-section{margin-top:53px}.home-section-heading{display:block}.home-section-heading>p{max-width:none;margin-top:10px}.home-steps{grid-template-columns:1fr}.home-step{min-height:auto}.home-cta{align-items:flex-start;flex-direction:column}.home-cta-actions{width:100%}.home-cta-actions a{flex:1}.portal-actions{align-items:stretch;flex-direction:column}.portal-action{width:100%}
}

/* Phase 8 — Info Pendidikan Semasa */
.education-current-page{padding:34px clamp(16px,4vw,48px) 74px;background:linear-gradient(180deg,#f7f7ff 0,#fff 32%,#fff 100%)}
.education-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:24px;align-items:center;max-width:1180px;margin:0 auto;padding:clamp(30px,6vw,68px);border-radius:36px;color:#fff;background:linear-gradient(135deg,#5656cf,#337fc5);box-shadow:0 24px 56px rgba(58,65,159,.25);overflow:hidden;position:relative}
.education-hero::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-110px;top:-125px;background:rgba(255,255,255,.12)}
.education-hero h1{position:relative;z-index:1;margin:12px 0 14px;font-size:clamp(42px,6vw,72px);line-height:.98;letter-spacing:-.055em}
.education-hero h1 em{font-style:normal;color:#ffdf75}
.education-hero p{position:relative;z-index:1;max-width:720px;margin:0;color:rgba(255,255,255,.86);font-family:system-ui,sans-serif;font-size:clamp(16px,2vw,19px);line-height:1.65}
.education-hero-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.education-hero .portal-action.primary{color:#3c40a8;background:#fff}
.education-hero .portal-action.secondary{color:#fff;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12)}
.education-trust-card{position:relative;z-index:1;padding:27px;border:1px solid rgba(255,255,255,.2);border-radius:27px;background:rgba(24,29,75,.27);backdrop-filter:blur(10px)}
.education-trust-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;color:#4245aa;background:#c9f6e4;font-size:25px;font-weight:900}
.education-trust-card h2{margin:18px 0 8px;font-size:24px}.education-trust-card p{font-size:15px;line-height:1.6}.education-trust-card small{display:block;margin-top:17px;color:#ffeb9f;font-family:system-ui,sans-serif;font-weight:800}
.education-status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1080px;margin:-22px auto 0;position:relative;z-index:2}
.education-status-strip>div{padding:19px 17px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 28px rgba(52,50,110,.1);text-align:center}
.education-status-strip strong{display:block;color:var(--purple-dark);font-size:27px}.education-status-strip span{display:block;margin-top:3px;color:var(--muted);font-family:system-ui,sans-serif;font-size:13px;font-weight:700}
.education-section{max-width:1180px;margin:78px auto 0}
.education-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}
.education-search{display:flex;align-items:center;gap:10px;flex:1;max-width:470px;padding:0 16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(52,50,110,.05)}
.education-search span{color:var(--purple-dark);font-size:22px}.education-search input{width:100%;padding:14px 0;border:0;outline:0;color:var(--ink);background:transparent;font:inherit}
.education-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.education-filters button{white-space:nowrap;padding:10px 14px;border:1px solid var(--line);border-radius:13px;color:var(--muted);background:#fff;font-weight:850;cursor:pointer}.education-filters button.active,.education-filters button:hover{color:#fff;border-color:var(--purple);background:var(--purple)}
.education-update-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.education-update-card{display:flex;flex-direction:column;min-height:290px;padding:24px;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 10px 29px rgba(52,50,110,.08);transition:transform .18s ease,box-shadow .18s ease}.education-update-card:hover{transform:translateY(-4px);box-shadow:0 18px 37px rgba(52,50,110,.14)}
.education-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.education-category{display:inline-flex;padding:7px 10px;border-radius:999px;color:#4d4bb3;background:#ecebff;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.education-date{color:var(--muted);font-family:system-ui,sans-serif;font-size:12px;font-weight:750;text-align:right}
.education-update-card h3{margin:20px 0 10px;font-size:22px;line-height:1.22}.education-update-card p{margin:0;color:var(--muted);font-family:system-ui,sans-serif;line-height:1.62}.education-card-meta{margin-top:auto;padding-top:20px}.education-card-meta b{display:block;margin-bottom:9px;color:#4a5068;font-family:system-ui,sans-serif;font-size:13px}.education-card-meta a{display:inline-flex;color:var(--purple-dark);text-decoration:none;font-weight:900}.education-card-meta a:hover{text-decoration:underline}
.education-empty{padding:25px;border-radius:19px;color:var(--muted);background:#f6f6fc;text-align:center;font-family:system-ui,sans-serif}.education-empty.hidden{display:none}
.education-exam-section{padding:clamp(26px,5vw,50px);border-radius:36px;background:linear-gradient(145deg,#fff9df,#fff 52%,#edf8ff);box-shadow:0 17px 42px rgba(52,50,110,.09)}
.education-exam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.education-exam-card{padding:25px;border:1px solid rgba(86,86,207,.14);border-radius:27px;background:#fff;box-shadow:0 10px 26px rgba(52,50,110,.07)}
.education-exam-header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.education-exam-card h3{margin:0 0 5px;font-size:24px}.education-exam-scope{color:var(--muted);font-family:system-ui,sans-serif;font-size:13px}.education-status{display:inline-flex;flex:0 0 auto;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900;text-transform:uppercase}.education-status.confirmed{color:#087453;background:#d9f6e9}.education-status.pending{color:#9a6200;background:#fff0bd}
.education-exam-date{margin:20px 0 10px;color:var(--ink);font-size:18px;font-weight:900}.education-exam-note{margin:0;color:var(--muted);font-family:system-ui,sans-serif;line-height:1.6}.education-component-list{display:grid;gap:8px;margin:17px 0 0;padding:0;list-style:none}.education-component-list li{display:flex;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:14px;background:#f7f7fc;font-family:system-ui,sans-serif;font-size:13px}.education-component-list li b{color:#3e435a}.education-component-list li span{color:var(--muted);text-align:right}.education-exam-source{display:inline-flex;margin-top:18px;color:var(--purple-dark);text-decoration:none;font-weight:900}.education-exam-source:hover{text-decoration:underline}
.education-method{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start;padding:clamp(28px,5vw,52px);border-radius:35px;color:#fff;background:linear-gradient(135deg,#21243c,#4d4bb8);box-shadow:0 21px 48px rgba(33,36,60,.22)}.education-method h2{margin:10px 0 12px;font-size:clamp(30px,4.5vw,49px);line-height:1.04;letter-spacing:-.045em}.education-method-copy>p{color:rgba(255,255,255,.8);font-family:system-ui,sans-serif;line-height:1.7}.education-method ol{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px 0 0;padding:0;list-style:none}.education-method li{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;padding:13px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.07)}.education-method li b{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#3f43ab;background:#ffdc69}.education-method li span{color:rgba(255,255,255,.84);font-family:system-ui,sans-serif;font-size:14px;line-height:1.4}
.education-warning{padding:27px;border-radius:25px;color:#30334f;background:#fff4c9}.education-warning h3{margin:0 0 10px;font-size:24px}.education-warning p{margin:0;color:#5b5e70;font-family:system-ui,sans-serif;line-height:1.65}.education-warning a{display:inline-flex;margin-top:18px;color:#4948ad;text-decoration:none;font-weight:900}.education-warning a:hover{text-decoration:underline}
.education-source-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.education-source-card{padding:22px;border:1px solid var(--line);border-radius:23px;background:#fff;box-shadow:0 9px 25px rgba(52,50,110,.06)}.education-source-card span{display:inline-flex;padding:6px 9px;border-radius:10px;color:#087453;background:#dff7ed;font-family:system-ui,sans-serif;font-size:12px;font-weight:900}.education-source-card h3{margin:16px 0 8px;font-size:20px}.education-source-card p{margin:0;color:var(--muted);font-family:system-ui,sans-serif;line-height:1.55}.education-source-card small{display:block;margin-top:13px;color:var(--purple-dark);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}.education-cta{max-width:1180px;margin-left:auto;margin-right:auto}
.home-current-preview{padding:clamp(28px,5vw,48px);border-radius:35px;background:linear-gradient(145deg,#eef1ff,#fff 55%,#fff7d8);box-shadow:0 17px 42px rgba(52,50,110,.09)}.home-current-preview .education-update-grid{margin-top:22px}.home-current-preview .education-update-card{min-height:260px}.home-current-actions{display:flex;justify-content:center;margin-top:22px}.home-current-actions a{display:inline-flex;padding:13px 18px;border-radius:15px;color:#fff;background:var(--purple);text-decoration:none;font-weight:900}.home-current-actions a:hover{background:var(--purple-dark)}
@media(max-width:1000px){.education-update-grid{grid-template-columns:repeat(2,1fr)}.education-source-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.education-hero,.education-method{grid-template-columns:1fr}.education-status-strip{grid-template-columns:repeat(2,1fr)}.education-toolbar{align-items:stretch;flex-direction:column}.education-search{max-width:none}.education-exam-grid{grid-template-columns:1fr}}
@media(max-width:650px){.education-current-page{padding-left:12px;padding-right:12px}.education-hero{padding:30px 22px;border-radius:27px}.education-update-grid,.education-source-grid{grid-template-columns:1fr}.education-method ol{grid-template-columns:1fr}.education-status-strip{margin-top:14px}.education-component-list li{align-items:flex-start;flex-direction:column}.education-component-list li span{text-align:left}.education-hero-actions{align-items:stretch;flex-direction:column}.education-hero-actions .portal-action{width:100%}}
.home-current-exam{display:grid;grid-template-columns:auto 1fr auto auto;gap:13px;align-items:center;margin-top:18px;padding:17px 19px;border:1px solid rgba(86,86,207,.14);border-radius:20px;background:#fff}.home-current-exam>span{padding:7px 10px;border-radius:999px;color:#087453;background:#d9f6e9;font-size:11px;font-weight:900;text-transform:uppercase}.home-current-exam b{font-size:18px}.home-current-exam p{margin:0;color:var(--muted);font-family:system-ui,sans-serif}.home-current-exam a{color:var(--purple-dark);text-decoration:none;font-weight:900}.home-current-exam a:hover{text-decoration:underline}
@media(max-width:760px){.home-current-exam{grid-template-columns:1fr;align-items:start}.home-current-exam>span{justify-self:start}}


/* Phase 9 — production education news experience */
.education-v32{background:linear-gradient(180deg,#f7f8ff 0,#fff 25%,#fff 100%)}
.education-hero-news{grid-template-columns:minmax(0,1.25fr) minmax(300px,.55fr);min-height:470px;padding:clamp(34px,6vw,72px);background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.16),transparent 25%),linear-gradient(135deg,#2e3267 0%,#494bc4 54%,#6578e8 100%)}
.education-live-label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;background:rgba(255,255,255,.09);font-family:system-ui,sans-serif;font-size:12px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.education-live-label i{width:8px;height:8px;border-radius:50%;background:#7bf1bd;box-shadow:0 0 0 5px rgba(123,241,189,.13)}
.education-hero-news h1{max-width:760px;margin-top:20px;font-size:clamp(43px,6.2vw,76px)}
.education-hero-news h1 em{color:#ffe485}
.education-hero-copy{position:relative;z-index:1}.education-hero-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;color:rgba(255,255,255,.7);font-family:system-ui,sans-serif;font-size:13px}.education-hero-foot b{color:#fff}
.education-next-card{position:relative;z-index:1;padding:29px;border:1px solid rgba(255,255,255,.25);border-radius:30px;color:#24284f;background:linear-gradient(145deg,#fffdf4,#fff);box-shadow:0 22px 50px rgba(27,30,80,.24)}
.education-next-card>span{display:inline-flex;padding:7px 10px;border-radius:999px;color:#6b5410;background:#fff0b8;font-family:system-ui,sans-serif;font-size:11px;font-weight:900;text-transform:uppercase}.education-next-card small{display:block;margin-top:18px;color:#6c7190;font-family:system-ui,sans-serif;font-weight:750}.education-next-card h2{margin:6px 0 12px;font-size:31px}.education-next-card p{margin:0;color:#333858;font-size:20px;font-weight:900}.education-next-card a{display:inline-flex;margin-top:23px;color:#494bb9;text-decoration:none;font-weight:900}
.education-network-strip{max-width:1040px}.education-network-strip>div{padding:21px}.education-network-strip strong{font-size:25px}
.education-heading-tight{align-items:end}.education-toolbar-v32{display:grid;grid-template-columns:minmax(0,1fr) 260px;margin-bottom:12px}.education-region-select{display:flex;align-items:center;gap:12px;padding:0 15px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(52,50,110,.05);font-family:system-ui,sans-serif}.education-region-select span{color:#6d7188;font-size:12px;font-weight:850;text-transform:uppercase}.education-region-select select{flex:1;min-width:0;padding:14px 0;border:0;outline:0;color:#282c4d;background:transparent;font:inherit;font-weight:750}.education-v32 .education-filters{margin-bottom:22px;padding-bottom:5px}
.education-v32 .education-update-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.education-v32 .education-update-card{min-height:320px;padding:23px;border-radius:24px;box-shadow:0 10px 30px rgba(41,45,99,.07)}.education-v32 .education-update-card[hidden]{display:none}.education-v32 .education-card-top{align-items:center}.education-region-tag{align-self:flex-start;margin-top:16px;padding:5px 9px;border-radius:9px;color:#626780;background:#f2f3f8;font-family:system-ui,sans-serif;font-size:11px;font-weight:800}.education-v32 .education-update-card h3{margin-top:15px}.education-more-wrap{display:flex;justify-content:center;margin-top:24px}.education-more{padding:12px 19px;border:1px solid #d8d9e8;border-radius:14px;color:#494bb9;background:#fff;font-weight:900;cursor:pointer}.education-more:hover{border-color:#a8a9dc;background:#f7f7ff}.education-more[hidden]{display:none}
.education-exam-v32{background:linear-gradient(145deg,#f1f3ff,#fff 55%,#fff9df)}.education-exam-region{display:inline-flex;margin-bottom:7px;color:#575c78;font-family:system-ui,sans-serif;font-size:11px;font-weight:850;text-transform:uppercase}
.education-coverage{display:grid;grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr);gap:35px;padding:clamp(28px,5vw,52px);border:1px solid #e7e8f3;border-radius:36px;background:#f8f9ff}.education-coverage-intro h2{margin:10px 0 14px;font-size:clamp(31px,4.6vw,51px);line-height:1.04;letter-spacing:-.045em}.education-coverage-intro p{margin:0;color:#6b7088;font-family:system-ui,sans-serif;line-height:1.75}.education-coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.education-coverage-card{display:flex;flex-direction:column;min-height:112px;padding:16px;border:1px solid #e1e3ef;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(41,45,99,.045)}.education-coverage-card span{color:#242943;font-weight:900}.education-coverage-card b{margin-top:auto;color:#5053c8;font-family:system-ui,sans-serif;font-size:13px}.education-coverage-card small{margin-top:3px;color:#868aa0;font-family:system-ui,sans-serif;font-size:11px}
.education-editorial{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:30px;align-items:start;padding:clamp(30px,5vw,55px);border-radius:36px;color:#fff;background:linear-gradient(135deg,#20233f,#30356c)}.education-editorial-title h2{margin:10px 0 13px;font-size:clamp(32px,4.8vw,52px);line-height:1.03}.education-editorial-title p{color:rgba(255,255,255,.7);font-family:system-ui,sans-serif;line-height:1.7}.education-editorial-grid{display:grid;gap:11px}.education-editorial-grid article{display:grid;grid-template-columns:42px 1fr;column-gap:13px;padding:17px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.07)}.education-editorial-grid article>span{grid-row:1/3;display:grid;place-items:center;width:39px;height:39px;border-radius:13px;color:#34376f;background:#ffe27c;font-weight:900}.education-editorial-grid h3{margin:0;font-size:18px}.education-editorial-grid p{margin:5px 0 0;color:rgba(255,255,255,.67);font-family:system-ui,sans-serif;font-size:13px;line-height:1.55}
.education-source-section{margin-top:36px}.education-source-directory{border:1px solid #e1e3ef;border-radius:25px;background:#fff;overflow:hidden}.education-source-directory summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 25px;cursor:pointer;list-style:none}.education-source-directory summary::-webkit-details-marker{display:none}.education-source-directory summary span{display:flex;flex-direction:column}.education-source-directory summary b{font-size:19px}.education-source-directory summary small{margin-top:4px;color:#787d94;font-family:system-ui,sans-serif}.education-source-directory summary i{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#fff;background:#5558d4;font-style:normal;font-size:22px}.education-source-grid-v32{max-height:620px;overflow:auto;padding:0 22px 22px;grid-template-columns:repeat(3,1fr)}.education-source-grid-v32 .education-source-card{box-shadow:none}.education-source-card>div{display:flex;justify-content:space-between;gap:8px;align-items:center}.education-source-card>div small{margin:0;color:#777c92;font-family:system-ui,sans-serif;font-size:11px}.education-source-card>a{display:inline-flex;margin-top:13px;color:#4e51bd;text-decoration:none;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:800}
@media(max-width:1050px){.education-v32 .education-update-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.education-coverage{grid-template-columns:1fr}.education-coverage-grid{grid-template-columns:repeat(4,1fr)}.education-source-grid-v32{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.education-hero-news{grid-template-columns:1fr;min-height:0}.education-next-card{max-width:520px}.education-toolbar-v32{grid-template-columns:1fr}.education-editorial{grid-template-columns:1fr}.education-coverage-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:650px){.education-hero-news{padding:30px 22px;border-radius:27px}.education-hero-news h1{font-size:42px}.education-v32 .education-update-grid{grid-template-columns:1fr}.education-coverage-grid{grid-template-columns:repeat(2,1fr)}.education-source-grid-v32{grid-template-columns:1fr;padding:0 14px 14px}.education-source-directory summary{padding:19px}.education-network-strip strong{font-size:21px}}


/* Phase 10 — trust, legal and AdSense-readiness refinements */
.global-footer-v33{align-items:flex-start;padding:30px 2px 10px}.global-footer-v33 .footer-identity{display:flex;flex-direction:column;max-width:430px}.global-footer-v33 .footer-identity strong{color:var(--ink);font-size:18px}.global-footer-v33 .footer-identity span{margin-top:4px;color:#555a70;font-weight:700}.global-footer-v33 .footer-identity small{margin-top:6px;line-height:1.5}.global-footer-v33 nav{max-width:620px;justify-content:flex-end;row-gap:10px}.global-footer-v33 a:hover{text-decoration:underline}
.legal-page-v33{width:min(940px,100%);padding:clamp(25px,5vw,58px)}.legal-hero{margin:-8px -8px 30px;padding:clamp(26px,5vw,48px);border-radius:26px;color:#fff;background:linear-gradient(135deg,#2f3267,#5659d6 70%,#6f84ed)}.legal-hero h1{margin:8px 0 10px;color:#fff}.legal-hero p{max-width:760px;margin:0;color:rgba(255,255,255,.86);font-size:18px;line-height:1.65}.legal-kicker{font-size:12px;font-weight:900;letter-spacing:.13em}.legal-page-v33 h2{padding-top:8px;border-top:1px solid #ececf4}.legal-page-v33 p,.legal-page-v33 li{color:#444960}.legal-list{display:grid;gap:10px;padding-left:22px}.legal-page-v33 a{font-weight:750}.contact-card{display:grid;gap:8px;margin:26px 0;padding:25px;border:1px solid #dedff0;border-radius:22px;background:#f7f7ff}.contact-card span{color:#696e87;font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.contact-card a{font-size:clamp(23px,4vw,34px);overflow-wrap:anywhere}.contact-card p{margin:0}
.home-trust{padding:clamp(28px,5vw,50px);border:1px solid #e2e4f0;border-radius:34px;background:linear-gradient(145deg,#f5f6ff,#fff)}.home-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.home-trust-grid a{display:flex;flex-direction:column;min-height:245px;padding:22px;border:1px solid #e1e3ef;border-radius:22px;color:var(--ink);background:#fff;text-decoration:none;box-shadow:0 9px 24px rgba(52,50,110,.06);transition:transform .18s ease,box-shadow .18s ease}.home-trust-grid a:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(52,50,110,.11)}.home-trust-grid span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#fff;background:#5658d4;font-weight:900}.home-trust-grid h3{margin:18px 0 8px;font-size:21px}.home-trust-grid p{margin:0;color:var(--muted);font-family:system-ui,sans-serif;line-height:1.6}.home-trust-grid b{margin-top:auto;padding-top:17px;color:#494bb9;font-family:system-ui,sans-serif}
@media(max-width:1050px){.home-trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.global-footer-v33 nav{justify-content:flex-start}.home-trust-grid{grid-template-columns:1fr}.home-trust-grid a{min-height:210px}.legal-hero{padding:28px 22px}.legal-page-v33{padding:18px}.contact-card{padding:20px}}