/* NanoStudent identity. One visual language across public pages and the app.
   Local script fonts are supplied by languages.css; scientific notation is untouched. */
:root {
  --brand-navy: #102b4e;
  --brand-navy-soft: #193b64;
  --brand-blue: #2456a5;
  --brand-copper: #b56542;
  --brand-peach: #efbc9b;
  --brand-line: #d9e3ef;
  --brand-radius: 16px;
  --type-page-title: clamp(1.65rem, 2.4vw, 2.3rem);
  --type-hero: clamp(2rem, 4vw, 3.65rem);
  --type-section: clamp(1.4rem, 2.1vw, 1.85rem);
  --radius-card: var(--brand-radius);
  --radius-control: 10px;
  --space-section: clamp(2rem, 4.5vw, 4rem);
}
.brand-wordmark, .nano-wordmark { font-weight:700; letter-spacing:-.04em; direction:ltr; unicode-bidi:isolate; }
.brand-wordmark span, .nano-wordmark span { font-weight:400; }
.brand-public .wrap { width:min(1240px,calc(100% - 64px)); }
.brand-public .top { border-top:4px solid var(--brand-navy); }
.brand-public .header-layout { min-height:88px; gap:24px; }
.brand-public .brand { font-size:24px; }
.brand-public .brand img { width:44px; height:44px; }
.brand-public .nav { gap:6px 20px; }
.brand-public .nav a { font-size:15px; font-weight:700; }
.brand-public .nav a[aria-current='page'] { color:var(--blue); text-decoration:underline; text-decoration-color:var(--brand-copper); text-decoration-thickness:3px; text-underline-offset:10px; }
.brand-public .button, .brand-public .primary-action, .brand-public .secondary-action { border-radius:10px; padding-inline:22px; }
.brand-public .header-actions .button { background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); }
.brand-public .header-actions .button:hover { background:var(--brand-blue); }
.brand-public .language-menu summary { border:0; background:transparent; padding-inline:8px; }
.brand-public .header-actions .info-language-menu { margin:0; border:0; background:transparent; }
.brand-public .header-actions .info-language-menu>summary { min-height:44px; padding:9px 8px; font-size:14px; }
.brand-public .language-popover .locale-choice { justify-content:flex-start; border:0; border-radius:8px; }
.brand-public .home-hero, .brand-public .feature-hero {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr); align-items:center;
  gap:28px; margin-block:32px 12px; padding:clamp(24px,4vw,52px);
  background:var(--brand-navy); border-radius:24px; max-width:none; color:#fff;
}
.brand-public :is(.home-hero,.feature-hero)>div { min-width:0; overflow-wrap:anywhere; text-align:start; }
.brand-public .home-hero .actions { justify-content:flex-start; }
.brand-public .home-hero :is(h1,.intro) { margin-inline:0; }
.brand-public .home-hero h1 { font-size:var(--type-hero); line-height:1.22; max-width:20ch; }
.brand-public:lang(ar) .home-hero h1 { line-height:1.5; max-width:23ch; }
.brand-public .feature-hero h1 { font-size:var(--type-page-title); }
.brand-public :is(.home-hero,.feature-hero) .intro { color:#dce7f7; font-size:18px; max-width:54ch; }
.brand-public :is(.home-hero,.feature-hero) .eyebrow { color:var(--brand-peach); }
.brand-public :is(.home-hero,.feature-hero) .eyebrow:before { background:var(--brand-peach); }
.brand-public :is(.home-hero,.feature-hero) .button { background:#fff; color:var(--brand-navy); border-color:#fff; }
.brand-public :is(.home-hero,.feature-hero) .button:hover { background:#e8f0ff; border-color:#e8f0ff; }
.brand-public :is(.home-hero,.feature-hero) .text-link { color:#fff; }
.brand-public .home-hero .fine { color:#cad8ec; font-size:14px; }
.brand-art { width:100%; height:auto; display:block; pointer-events:none; }
.brand-public .feature-hero .brand-art { max-height:260px; }
.brand-public .section>h2 { position:relative; padding-inline-start:20px; }
.brand-public .section>h2:before { content:''; position:absolute; inset-inline-start:0; top:.28em; width:5px; height:1em; border-radius:2px; background:var(--brand-copper); }
.brand-public .cards { gap:18px; }
.brand-public .card { border-radius:16px; padding:28px; border-color:var(--line); }
.brand-public .step { color:var(--blue); background:var(--soft); width:40px; height:40px; font-size:15px; border-radius:12px 12px 3px 12px; }
.brand-public .card h3 { font-size:20px; }
.brand-public .article { max-width:880px; }
.brand-public .article-hero:not(.feature-hero) { padding-block:40px 16px; }
.brand-public .article h2 { margin-bottom:18px; }
.brand-public .faq details { border-radius:12px; padding:12px 22px; }
.brand-public .faq details[open] { border-color:var(--blue); }
.brand-public .resource-link { border-radius:12px; border-inline-start:3px solid var(--brand-blue); padding:22px; gap:4px; }
.brand-public .resource-title { font-size:17px; }
.brand-public .resource-description { display:none; }
.brand-public #question-plans { border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,36px); margin-block:28px; background:var(--paper); }
.brand-public #question-plans>p { color:var(--muted); max-width:75ch; }
.brand-public footer { background:var(--brand-navy); border:0; margin-top:48px; padding-block:38px calc(38px + env(safe-area-inset-bottom)); color:#fff; }
.brand-public .footer-grid { align-items:start; }
.brand-public .footer-grid :is(p,small) { color:#c2d2e8; }
.brand-public .footer-grid a { color:#eaf1fc; font-size:15px; }
.brand-public .footer-grid strong { font-size:24px; }
.brand-public .footer-grid strong:before { content:''; width:10px; height:10px; display:inline-block; margin-inline-end:10px; background:var(--brand-peach); border-radius:3px; }
/* Information pages share the public header/footer and have a readable document rail. */
.brand-info .info-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:36px; align-items:start; padding-block:40px 32px; }
.info-rail { position:sticky; top:24px; padding-block:10px; }
.info-rail nav { display:grid; gap:6px; }
.brand-info .info-rail .nav-link { padding:12px 16px; border:0; border-radius:10px; font-size:16px; }
.brand-info .info-rail .nav-link[aria-current='page'] { background:var(--brand-navy); color:#fff; }
.info-body { min-width:0; }
.brand-info .info-body>.eyebrow { display:none; }
.brand-info .info-body>.hero { padding:32px; margin:0 0 28px; border-radius:18px; background:var(--brand-navy); color:#fff; }
.brand-info .hero .intro, .brand-info .hero .revision { color:#d4e1f3; }
.brand-info .hero .intro { font-size:17px; max-width:60ch; }
.brand-info .hero h1 { font-size:var(--type-page-title); }
.brand-info .content-stack { display:grid; gap:0; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
.brand-info .content-stack>.paper { border:0; border-radius:0; background:transparent; padding:28px; }
.brand-info .content-stack>.paper+.paper { border-top:1px solid var(--line); }
.brand-info .paper h2 { font-size:20px; padding-inline-start:38px; }
.brand-info .paper:not(:has(.section-count)) h2 { padding-inline-start:0; }
.brand-info .paper p { font-size:16px; line-height:1.9; }
.brand-info .section-count { background:var(--soft); color:var(--blue); inset-block-start:30px; }
.brand-info .content-stack>.contact-card { border:0; border-bottom:1px solid var(--line); border-radius:16px 16px 0 0; }
.brand-info .hub-card { box-shadow:none; border-radius:14px; }
.brand-info .cross-links { padding:20px 0 0; }
/* Workspace: navy navigation, white work surfaces, restrained copper accents. */
body .app-sidebar { background:var(--brand-navy); color:#e9f1fc; border-color:var(--brand-navy); }
body .app-sidebar .sidebar-brand { border-bottom:1px solid #315073; margin-bottom:16px; }
body .app-sidebar .sidebar-brand-wordmark { color:#fff; }
body .app-sidebar .sidebar-brand button { color:#d4e1f3; }
body .app-sidebar .sidebar-brand button:hover { background:var(--brand-navy-soft); }
body .app-sidebar .sidebar-group-title { color:#afc3df; font-size:13px; padding-block:8px; }
body .app-sidebar .sidebar-nav-link { color:#e9f1fc; border-radius:10px; font-size:16px; padding-block:12px; min-height:48px; }
body .app-sidebar .sidebar-nav-link:hover { background:var(--brand-navy-soft); }
html body .app-sidebar .sidebar-nav-link[aria-current='page'] { color:#fff; background:#2456a5; box-shadow:none; position:relative; }
body .app-sidebar .sidebar-nav-link[aria-current='page']:before { content:''; position:absolute; width:4px; height:18px; inset-inline-start:0; top:calc(50% - 9px); border-radius:4px; background:var(--brand-peach); }
html body .app-sidebar .sidebar-nav-link[aria-current='page'] svg { color:#fff; }
body .app-sidebar .sidebar-footer { border-top:1px solid #315073; padding-top:12px; }
body .app-navbar { border-bottom:1px solid var(--app-border); }
body .app-page>header { padding-bottom:22px; border-bottom:1px solid var(--app-border); margin-bottom:28px; }
body .page-title { letter-spacing:var(--tracking-heading); font-weight:700; }
body .surface-card { border-radius:16px; box-shadow:0 2px 4px #102b4e04; }
body .interactive-card:hover { border-color:var(--app-primary); box-shadow:none; }
body .app-button { border-radius:10px; }
body .app-button:active:not(:disabled) { transform:translateY(1px); }
body .control-field { border-radius:10px; min-height:48px; }
body .control-field:focus { border-color:var(--app-primary); box-shadow:0 0 0 3px #2456a51a; }
body .student-primary-panel, body .learning-hero { background:var(--brand-navy); border-color:var(--brand-navy); border-inline-start:5px solid var(--brand-copper); }
body .student-primary-panel h2 { font-size:clamp(1.4rem,2.2vw,1.95rem); line-height:1.5; }
body .student-primary-panel .student-primary-icon { color:var(--brand-peach); background:var(--brand-navy-soft); }
body .student-primary-panel .student-primary-button { border-radius:10px; }
body .metric-tile { border-top:3px solid var(--app-primary); border-radius:14px; }
body .teacher-metrics .metric-tile { border-radius:0; }
body .admin-report-button { border-color:var(--app-border-strong); border-radius:10px; background:var(--app-surface); color:var(--app-ink); }
body .admin-report-button:hover:not(:disabled) { background:var(--app-surface-subtle); border-color:var(--app-primary); }
body .admin-report-button[aria-pressed='true'] { color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); }
body .admin-responsive-table th { background:var(--app-surface-subtle); color:var(--app-ink); font-size:14px; font-weight:700; }
body .admin-responsive-table tbody>tr:hover { background:var(--app-surface-subtle); }
body .workspace-tab[aria-selected='true'] { border-color:var(--app-primary); }
.report-metric { border-top:3px solid var(--app-primary); }
.report-metric>h2 { color:var(--app-muted); }
.report-metric-detail { display:flex; gap:.4rem 1rem; flex-wrap:wrap; }
.report-metric-detail bdi { display:inline-block; }
/* Account screen: a single form, a brand illustration only on wide displays. */
body .auth-screen { background:var(--app-canvas); }
body .auth-form-layout { background:transparent; max-width:1152px; }
body .auth-form-card { border-radius:18px; border-color:var(--app-border); box-shadow:0 10px 40px #102b4e08; }
body .auth-header { padding-bottom:20px; border-bottom:1px solid var(--app-border); }
.auth-brand-panel { display:none; }
body .auth-form-card h2 { font-size:clamp(1.6rem,2vw,2rem); }
body .auth-form-card button[type='submit'] { min-height:48px; height:auto; padding-block:10px; border-radius:10px; font-size:16px; }
@media(min-width:1024px) {
  body .auth-form-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 64px; align-content:center; padding-block:40px; }
  body .auth-header { grid-column:1/-1; max-width:none; margin-bottom:32px; }
  .auth-brand-panel { display:flex; grid-column:1; grid-row:2; align-self:stretch; align-items:center; justify-content:center; border-radius:20px; background:var(--brand-navy); padding:22px; min-height:440px; }
  body .auth-form-panel { grid-column:2; grid-row:2; margin-top:0; }
  body .auth-footer { grid-column:2; }
}
@media(max-width:1050px) {
  .brand-public .header-layout { gap:12px 20px; grid-template-columns:1fr auto; }
  .brand-public .header-actions { grid-column:2; }
  .brand-public .nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; border-top:1px solid var(--line); padding-top:6px; }
  .brand-public .home-hero { grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr); gap:12px; }
  .brand-info .info-layout { grid-template-columns:190px minmax(0,1fr); gap:24px; }
}
@media(max-width:767px) {
  .brand-public .wrap { width:calc(100% - 32px); }
  .brand-public .header-layout { min-height:76px; gap:8px 12px; padding-block:12px 8px; }
  .brand-public .brand { font-size:20px; gap:7px; }
  .brand-public .brand img { width:34px; height:34px; }
  .brand-public .header-actions { gap:4px; grid-row:1; }
  .brand-public .header-actions .button { min-height:44px; font-size:14px; padding:8px 12px; }
  .brand-public .header-actions .language-menu { font-size:14px; }
  .brand-public .nav { overflow-x:auto; flex-wrap:nowrap; gap:20px; scrollbar-width:thin; }
  .brand-public .nav a { flex-shrink:0; font-size:14px; min-height:44px; }
  .brand-public .home-hero, .brand-public .feature-hero { grid-template-columns:minmax(0,1fr); margin-top:20px; padding:26px 22px; border-radius:18px; }
  .brand-public .home-hero h1 { font-size:2rem; max-width:none; }
  .brand-public .home-hero .brand-art { max-height:200px; width:min(100%,310px); margin-inline:auto; }
  .brand-public .feature-hero .brand-art { display:none; }
  .brand-public :is(.home-hero,.feature-hero) .intro { font-size:16px; }
  .brand-public .actions { gap:12px 20px; margin-top:22px; }
  .brand-public .home-hero .fine { font-size:14px; }
  .brand-public .cards, .brand-public .cards.two { grid-template-columns:1fr; }
  .brand-public .card { padding:22px; }
  .brand-public .related-links { grid-template-columns:1fr; }
  .brand-public .footer-grid { flex-direction:column; align-items:stretch; gap:24px; }
  .brand-public .footer-grid nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-info .info-layout { display:block; padding-top:16px; }
  .info-rail { position:static; padding:0 0 20px; }
  .info-rail nav { display:flex; overflow-x:auto; gap:6px; }
  .brand-info .info-rail .nav-link { flex:0 0 auto; padding:10px 14px; font-size:14px; }
  .brand-info .info-body>.hero { padding:24px; }
  .brand-info .hero .intro { font-size:16px; }
  .brand-info .content-stack>.paper { padding:22px; }
  .brand-info .section-count { inset-block-start:24px; inset-inline-start:21px; }
  body .app-page>header { padding-bottom:16px; margin-bottom:22px; }
  body .app-page { padding-inline:16px; }
  body .admin-responsive-table tbody>tr:hover { background:var(--app-surface); }
}
@media(max-width:390px) {
  .brand-public .header-layout { grid-template-columns:1fr; }
  .brand-public .header-layout>.brand { grid-column:1; grid-row:1; }
  .brand-public .header-actions { grid-row:2; grid-column:1; justify-content:space-between; }
  .brand-public .nav { grid-row:3; }
  .brand-public .language-popover { inset-inline-start:0; inset-inline-end:auto; }
}
@media(prefers-reduced-motion:reduce) { body .app-button:active:not(:disabled) { transform:none; } }
@media print {
  .brand-public .top,.brand-public footer,.info-rail,.brand-art,.auth-brand-panel { display:none; }
  .brand-info .info-layout { display:block; }
  .brand-public :is(.home-hero,.feature-hero),.brand-info .info-body>.hero { background:#fff; color:#102b4e; }
  .brand-info .hero .intro { color:#102b4e; }
}

/* RC48: reference-style pricing cards, shared by public, account and native store. */
.pricing-page, .brand-public #question-plans { container-type:inline-size; container-name:pricing; }
.pricing-page .form-page-card { padding:0; border:0; background:transparent; box-shadow:none; }
.pricing-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:22px; min-width:0; }
body .pricing-grid>.pricing-card { --plan-accent:#2456a5; position:relative; display:flex; flex-direction:column; min-width:0; padding:28px 24px 24px; border:1px solid var(--app-border,var(--line,#d9e3ef)); border-radius:20px; background:var(--app-surface,var(--paper,#fff)); color:var(--app-ink,var(--ink,#102b4e)); box-shadow:0 8px 28px #102b4e08; }
body .pricing-grid>.pricing-card-accent { --plan-accent:#a7502f; }
body .pricing-grid>.pricing-card.is-selected { border-color:var(--plan-accent); box-shadow:0 0 0 1px var(--plan-accent),0 8px 28px #102b4e08; }
.pricing-card-header { padding:0; border:0; margin:0; }
.pricing-card .pricing-card-title { margin:0 0 12px; padding-inline-end:28px; color:var(--plan-accent); font-size:21px; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }
.pricing-card-title label { cursor:pointer; }
.pricing-card .pricing-card-price { margin:0; color:var(--app-ink,var(--ink,#102b4e)); font-size:clamp(2.4rem,3vw,3.1rem); font-weight:750; line-height:1.25; letter-spacing:-.035em; overflow-wrap:anywhere; }
.pricing-card-price bdi { display:inline-block; }
.pricing-card .pricing-card-billing { margin:10px 0 0; color:var(--app-muted,var(--muted,#4b6282)); font-size:15px; line-height:1.7; }
.pricing-card-radio { position:absolute; inset-block-start:34px; inset-inline-end:24px; width:18px; height:18px; accent-color:var(--plan-accent); cursor:pointer; }
.pricing-card .pricing-card-features { display:grid; align-content:start; gap:20px; padding:0; margin:30px 0; list-style:none; flex:1; }
.pricing-card-features li { display:flex; align-items:flex-start; gap:12px; padding:0; margin:0; font-size:16px; line-height:1.75; min-width:0; }
.pricing-card-features li>span:last-child { min-width:0; overflow-wrap:anywhere; }
.pricing-card-check { display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; flex:0 0 23px; margin-block-start:3px; border:2px solid var(--plan-accent); color:var(--plan-accent); border-radius:50%; font-size:16px; line-height:1; font-family:Arial,sans-serif; }
.pricing-card-check svg { width:14px; height:14px; stroke-width:2.4; }
.pricing-card-action { margin-top:auto; }
body .pricing-card .pricing-card-button { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; min-height:52px; padding:12px 16px; border:2px solid var(--plan-accent); border-radius:12px; background:transparent; color:var(--plan-accent); font-family:inherit; font-size:16px; font-weight:700; line-height:1.6; text-align:center; text-decoration:none; cursor:pointer; overflow-wrap:anywhere; white-space:normal; }
body .pricing-card-accent .pricing-card-button, body .pricing-card.is-selected .pricing-card-button { background:var(--plan-accent); color:#fff; }
body .pricing-card-button:hover:not(:disabled) { filter:brightness(.94); }
body .pricing-card-button:disabled, fieldset:disabled .pricing-card-button { cursor:wait; opacity:.55; }
.pricing-card :is(button,a,input):focus-visible { outline:3px solid var(--plan-accent); outline-offset:4px; }
.dark .pricing-card, .dark .pricing-grid>.pricing-card { --plan-accent:#9fc2ff; }
.dark .pricing-grid>.pricing-card-accent { --plan-accent:#efbc9b; }
.dark .pricing-card-accent .pricing-card-button, .dark .pricing-card.is-selected .pricing-card-button { color:#102b4e; }
.brand-public #question-plans { padding:0; border:0; border-radius:0; background:transparent; }
.brand-public [data-credit-packages] { margin-block:28px; }
.brand-public [data-credit-packages]:empty { display:none; }
@media(min-width:680px) { .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container pricing (min-width:1050px) { .credit-pricing-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:679px) {
 body .pricing-grid>.pricing-card { padding:24px 22px 22px; }
 .pricing-card .pricing-card-features { gap:16px; margin-block:26px; }
 .pricing-card-radio { inset-block-start:30px; inset-inline-end:22px; }
}