/* HAMOU MATH — Load the unified phone experience on every route using the shared reference layer. */
@import url('/css/hamou-mobile-v63.css?v=63.1.0') screen and (max-width: 760px);
@import url('/css/hamou-mobile-v64.css?v=64.0.0') screen and (max-width: 760px);

/* HAMOU MATH — Reference UI v45.5
   Visual shell inspired by the approved HAMOU MATH reference board.
   IMPORTANT: visual layer only; existing IDs, routes, JS contracts and document logic remain intact. */
:root{
  --hmr-navy:#06142e;
  --hmr-navy-2:#0a2147;
  --hmr-blue:#078cff;
  --hmr-cyan:#12d7ff;
  --hmr-violet:#743cff;
  --hmr-green:#16c784;
  --hmr-gold:#c79b36;
  --hmr-bg:#06101f;
  --hmr-surface:#091b36;
  --hmr-surface-2:#0d2649;
  --hmr-text:#f6fbff;
  --hmr-muted:#a7bad2;
  --hmr-line:rgba(73,170,255,.20);
  --hmr-shadow:0 20px 60px rgba(0,0,0,.28);
  --hmr-radius:16px;
}
html.dark{color-scheme:dark}
html,html.dark{background:var(--hmr-bg)!important}
body,html.dark body{
  background:
    radial-gradient(800px 420px at 10% -8%,rgba(0,142,255,.18),transparent 65%),
    radial-gradient(760px 420px at 100% 0,rgba(100,45,255,.14),transparent 66%),
    linear-gradient(180deg,#061329,#07172d 55%,#06101f)!important;
  color:var(--hmr-text)!important;
  font-family:Inter,Tajawal,"Noto Sans Arabic",Cairo,Tahoma,Arial,sans-serif!important;
}
body:before{opacity:.12!important;background-size:34px 34px!important;background-image:linear-gradient(rgba(45,161,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(45,161,255,.35) 1px,transparent 1px)!important}

a{color:inherit}
/* Global navigation — deep navy + electric blue */
header,.topbar,.site-header,.navbar,.hm-top,#hamou-navbar .hm-top{
  background:rgba(4,18,43,.94)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(31,150,255,.32)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.30),0 1px 0 rgba(0,190,255,.08) inset!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
}
#hamou-navbar{background:transparent!important}
#hamou-navbar .hm-wrap{max-width:1500px!important;min-height:72px!important;padding:8px 18px!important}
#hamou-navbar .hm-logo,.brand-badge,.math-badge{
  background:linear-gradient(135deg,#0a77ff,#16d9ff)!important;
  box-shadow:0 0 28px rgba(0,170,255,.30)!important;
  border:1px solid rgba(119,224,255,.45)!important;
}
.brand,.hm-brand,#hamou-navbar .hm-brand{color:#fff!important}
.nav-link,.nav-btn,.hm-link,.hm-btn,#hamou-navbar .hm-link,#hamou-navbar .hm-btn{color:#eaf6ff!important;border-radius:10px!important;font-weight:800!important}
.nav-link:hover,.nav-btn:hover,.hm-link:hover,.hm-btn:hover,#hamou-navbar .hm-link:hover,#hamou-navbar .hm-btn:hover{background:rgba(0,145,255,.14)!important;color:#38d9ff!important}
.nav-menu,.hm-menu,.mobile-menu,.hm-mobile-menu,#hamou-navbar .hm-mobile-menu{
  background:#081b37!important;color:#fff!important;border:1px solid rgba(38,161,255,.28)!important;box-shadow:var(--hmr-shadow)!important;border-radius:14px!important
}
.nav-menu button,.hm-menu button,.mobile-menu a,.mobile-menu button,.hm-mobile-menu a,.hm-mobile-menu button{color:#eaf6ff!important}

/* Main content surfaces */
main,.main,.page,.container,.wrap{position:relative}
.container{width:min(1380px,calc(100% - 32px))!important}
.card,.panel,.section,.hero-card,.resource-card,.feature-card,.tool-card,.dashboard-card,.function-card,.banner,.auth-box,.growth-card,.growth-hero,.hm-card,.hm-stat,.workspace-card,.ai-card,.ai-panel,.solution-card{
  background:linear-gradient(145deg,rgba(9,29,57,.96),rgba(7,22,45,.94))!important;
  color:var(--hmr-text)!important;
  border:1px solid var(--hmr-line)!important;
  border-radius:var(--hmr-radius)!important;
  box-shadow:var(--hmr-shadow)!important;
  backdrop-filter:blur(14px)!important;
}
.card:hover,.resource-card:hover,.feature-card:hover,.tool-card:hover,.function-card:hover{
  border-color:rgba(16,190,255,.50)!important;
  box-shadow:0 24px 70px rgba(0,122,255,.16)!important;
  transform:translateY(-2px)
}
h1,h2,h3,h4,h5,h6{color:#fff!important;font-weight:900!important;letter-spacing:-.025em}
p,.muted,.small,.meta,.help-text{color:var(--hmr-muted)!important}
.eyebrow,.hm-eyebrow{background:rgba(0,150,255,.10)!important;color:#44d8ff!important;border:1px solid rgba(0,190,255,.28)!important}

/* Hero / landing */
.hero,.hm-hero{background:transparent!important;padding:58px 0 42px!important}
.hero-grid,.hm-hero-grid{gap:22px!important}
.hero h1,.hm-hero h1{color:#fff!important;font-size:clamp(36px,5vw,62px)!important;text-shadow:0 8px 35px rgba(0,153,255,.12)}
.hero p,.hm-hero p{color:#b7c8df!important}
.hero-card,.hm-hero{background:linear-gradient(135deg,#061b3d,#08152d 70%,#0b2750)!important;border-color:rgba(0,166,255,.36)!important;overflow:hidden}
.hero-card:after,.hm-hero:after{color:#13bfff!important;opacity:.08!important}

/* Buttons — luminous blue */
button,.btn,.primary-btn,.secondary-btn,.success-btn,.danger-btn,a.btn,.hm-btn{border-radius:11px!important;font-weight:850!important}
.primary-btn,.btn-primary,.hm-btn-primary,.hm-install,.success-btn{background:linear-gradient(135deg,#087cff,#05c8ff)!important;color:#fff!important;border:1px solid rgba(116,229,255,.35)!important;box-shadow:0 10px 28px rgba(0,144,255,.25)!important}
.secondary-btn{background:linear-gradient(135deg,#6637e8,#a13cff)!important;color:#fff!important;border:0!important;box-shadow:0 10px 28px rgba(116,60,255,.20)!important}
.danger-btn{background:linear-gradient(135deg,#d62d58,#9e163f)!important;color:#fff!important}

/* Inputs / selectors */
input,textarea,select,.input,.select{background:#071a34!important;color:#f6fbff!important;border:1px solid rgba(54,161,255,.28)!important;border-radius:10px!important}
input::placeholder,textarea::placeholder{color:#7f96b5!important}
input:focus,textarea:focus,select:focus,.input:focus,.select:focus{border-color:#10c9ff!important;box-shadow:0 0 0 3px rgba(0,181,255,.12),0 0 24px rgba(0,160,255,.08)!important;outline:none!important}

/* Reference dashboard cards */
.function-grid,.grid,.hm-grid{gap:14px!important}
.function-card{min-height:145px!important;padding:20px!important;background:linear-gradient(145deg,#071c38,#0b2548)!important;border-color:rgba(40,160,255,.28)!important}
.function-card span:first-child{font-size:31px!important;filter:drop-shadow(0 0 10px rgba(0,190,255,.22))}
.stats-card,.hm-stat{background:linear-gradient(145deg,#092345,#071b36)!important}
.stat-number,.hm-stat b{color:#48d9ff!important}

/* Teacher Studio — match the reference workspace */
.builder,.teacher-studio-layout,.workspace,.studio-layout{gap:16px!important}
.builder>*:first-child,.studio-sidebar,.workspace-sidebar{background:linear-gradient(180deg,#061a36,#07152b)!important;border:1px solid rgba(39,158,255,.25)!important;border-radius:16px!important}
.preview,.document-preview,.preview-shell{background:#06162c!important;border:1px solid rgba(40,163,255,.28)!important;border-radius:16px!important}
.preview-page,.document-page,.a4-page,.paper,.memo-page{background:#fff!important;color:#111827!important;border-radius:5px!important;border:1px solid #d9dee8!important;box-shadow:0 20px 60px rgba(0,0,0,.28)!important}
.preview-page h1,.document-page h1,.a4-page h1,.paper h1,.memo-page h1{color:#0b1220!important}

/* Tables */
table{background:#081c37!important;color:#edf7ff!important;border:1px solid rgba(48,160,255,.24)!important;border-radius:12px!important;overflow:hidden!important}
th{background:#0b2b54!important;color:#fff!important}
td{color:#dcecff!important;border-color:rgba(79,157,221,.14)!important}

/* Modals / alerts */
.modal,.dialog,.modal-content,.dropdown,.toast,.alert,.notice{background:#071b35!important;color:#f4fbff!important;border-color:rgba(41,158,255,.28)!important;box-shadow:var(--hmr-shadow)!important;border-radius:15px!important}

/* Gold owner / official curriculum accents */
#hm-owner-monitor,.owner-panel,.admin-owner{--owner:#d2a63d}
.hm-owner-btn{background:linear-gradient(135deg,#0a3156,#145d83)!important;border-color:#d2a63d!important}
.curriculum-badge,.official-badge,.verified-badge{color:#f6d77a!important;background:rgba(199,155,54,.10)!important;border-color:rgba(199,155,54,.34)!important}

/* A4 documents must remain printable and independent from the dark shell */
@media print{
  body{background:#fff!important;color:#111!important}
  header,#hamou-navbar,.topbar,.footer,.sidebar,.mobile-menu{display:none!important}
  .preview-page,.document-page,.a4-page,.paper,.memo-page{box-shadow:none!important;border:0!important;color:#111!important;background:#fff!important}
}

/* Responsive: compact, touch-friendly and no horizontal overflow */
html,body{overflow-x:hidden!important}
@media(max-width:1050px){
  .desktop-nav{display:none!important}
  .mobile-toggle{display:grid!important}
  .function-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .container{width:calc(100% - 20px)!important}
  .hero{padding:34px 0 28px!important}
  .hero-grid,.builder,.growth-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}
  .hero h1,.hm-hero h1{font-size:clamp(30px,10vw,46px)!important}
  .hero-actions,.hero-buttons{display:grid!important;grid-template-columns:1fr!important}
  .function-grid{grid-template-columns:1fr!important}
  .card,.panel,.section,.hero-card,.function-card{padding:16px!important}
  button,.btn,.primary-btn,.secondary-btn,.success-btn,.danger-btn,a.btn,.hm-btn{min-height:44px!important}
  input,textarea,select,.input,.select{min-height:44px!important}
  .preview-page,.document-page,.a4-page,.paper,.memo-page{width:100%!important;max-width:100%!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* ============================================================
   HAMOU MATH — REFERENCE BOARD OVERRIDE
   Visual-only layer. JS IDs/routes/contracts are intentionally
   preserved. Reference: 2026-09-29 supplied design board.
   ============================================================ */

:root{
  --ref-bg:#061329;
  --ref-bg2:#071a34;
  --ref-panel:#071c35;
  --ref-panel2:#0b2749;
  --ref-blue:#0b8cff;
  --ref-cyan:#14d9ff;
  --ref-violet:#7442ff;
  --ref-green:#10c77d;
  --ref-gold:#c89b38;
  --ref-text:#f7fbff;
  --ref-muted:#9fb4cd;
  --ref-line:rgba(50,171,255,.28);
  --ref-shadow:0 18px 55px rgba(0,0,0,.34);
}

html,html.dark{background:var(--ref-bg)!important;color-scheme:dark}
body,html.dark body{
  background:
    radial-gradient(900px 500px at 8% -12%,rgba(0,145,255,.18),transparent 64%),
    radial-gradient(760px 480px at 98% 4%,rgba(91,55,255,.13),transparent 66%),
    linear-gradient(180deg,#061329 0%,#07172d 52%,#06101f 100%)!important;
  color:var(--ref-text)!important;
  font-family:Inter,Tajawal,"Noto Sans Arabic",Cairo,Tahoma,Arial,sans-serif!important;
}
body:before{
  opacity:.14!important;
  background-size:34px 34px!important;
  background-image:
    linear-gradient(rgba(37,154,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,154,255,.35) 1px,transparent 1px)!important;
  mask-image:linear-gradient(to bottom,black,transparent 76%)!important;
}
main{position:relative}
.container{width:min(1500px,calc(100% - 36px))!important;max-width:1500px!important}

/* Top navigation */
.topbar{
  position:sticky!important;top:0!important;z-index:10000!important;
  background:rgba(3,16,38,.93)!important;
  border-bottom:1px solid rgba(44,164,255,.38)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.32),0 1px 0 rgba(0,200,255,.10) inset!important;
  backdrop-filter:blur(18px) saturate(150%)!important;
}
.topbar .container{width:100%!important;max-width:none!important;padding:0 18px!important}
.navbar{min-height:68px!important;gap:18px!important;direction:ltr!important}
.brand{order:1!important;color:#fff!important;font-size:19px!important;letter-spacing:.02em!important;gap:9px!important}
.brand-badge{
  width:42px!important;height:42px!important;border-radius:11px!important;
  background:linear-gradient(135deg,#0b70df,#0ce0ff)!important;
  border:1px solid rgba(129,235,255,.45)!important;
  box-shadow:0 0 24px rgba(0,170,255,.28)!important;
  font-size:0!important;position:relative!important;
}
.brand-badge:after{
  content:"M";font-family:Arial,sans-serif;font-weight:950;font-size:24px;color:#fff;
  text-shadow:0 0 9px rgba(0,220,255,.75);
}
.desktop-nav{order:2!important;justify-content:center!important;gap:2px!important}
.nav-link,.nav-btn{
  color:#eaf6ff!important;border:1px solid transparent!important;
  font-size:12px!important;font-weight:800!important;padding:9px 11px!important;border-radius:8px!important;
}
.nav-link:hover,.nav-btn:hover{background:rgba(0,144,255,.13)!important;color:#39d9ff!important}
.nav-actions{order:3!important;margin-left:auto!important}
.nav-actions:before{
  content:"⌕";width:40px;height:40px;display:grid;place-items:center;
  color:#eaf7ff;font-size:26px;border-right:1px solid rgba(104,177,235,.28);
  padding-right:10px;margin-right:3px;
}
#install-button{
  min-height:40px!important;padding:7px 13px!important;border-radius:11px!important;
  background:linear-gradient(135deg,#09294d,#123b63)!important;
  border:1px solid rgba(67,174,255,.28)!important;
  box-shadow:none!important;font-size:12px!important;
}
#install-button:after{content:"  ●";color:#7bdfff;font-size:9px}
.mobile-toggle{color:#fff!important;background:#09213d!important}
.mobile-menu{background:#061a34!important;border-color:rgba(49,165,255,.3)!important}

/* Shared cards */
.card,.panel,.section,.hero-card,.resource-card,.feature-card,.tool-card,.dashboard-card,
.function-card,.banner,.auth-box,.growth-card,.growth-hero,.hm-card,.hm-stat,.workspace-card,
.ai-card,.ai-panel,.solution-card{
  background:linear-gradient(145deg,rgba(8,30,58,.97),rgba(5,20,40,.97))!important;
  color:var(--ref-text)!important;
  border:1px solid var(--ref-line)!important;
  border-radius:14px!important;
  box-shadow:var(--ref-shadow)!important;
  backdrop-filter:blur(10px)!important;
}
.card:hover,.resource-card:hover,.feature-card:hover,.tool-card:hover,.function-card:hover{
  border-color:rgba(15,204,255,.62)!important;
  box-shadow:0 20px 65px rgba(0,117,255,.15)!important;
}
h1,h2,h3,h4,h5,h6{color:#fff!important;font-weight:900!important}
p,.muted,.small,.meta,.help-text{color:var(--ref-muted)!important}
.primary-btn,.secondary-btn,.success-btn,.danger-btn,.btn,.hm-btn{
  border-radius:10px!important;font-weight:900!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.primary-btn,.btn-primary,.hm-btn-primary{
  background:linear-gradient(135deg,#087cff,#08cfff)!important;
  color:#fff!important;border:1px solid rgba(122,231,255,.38)!important;
  box-shadow:0 10px 28px rgba(0,157,255,.24)!important;
}
.secondary-btn{background:linear-gradient(135deg,#7540ff,#8b32df)!important;color:#fff!important}
.success-btn{background:linear-gradient(135deg,#06a96d,#15dc8e)!important;color:#fff!important}
button:hover,.btn:hover,.primary-btn:hover,.secondary-btn:hover,.success-btn:hover,.danger-btn:hover{
  transform:translateY(-2px)!important;filter:saturate(1.08)!important
}
input,textarea,select{
  background:#06182d!important;color:#eef8ff!important;border:1px solid rgba(55,166,239,.25)!important;
  border-radius:10px!important;
}
input:focus,textarea:focus,select:focus{
  border-color:#11cfff!important;box-shadow:0 0 0 3px rgba(0,195,255,.10)!important
}

/* Homepage reference */
.hero{padding:18px 0 12px!important;background:transparent!important}
.hero-grid{
  grid-template-columns:minmax(0,1.7fr) minmax(245px,.72fr)!important;
  gap:14px!important;align-items:stretch!important;
}
.hero-grid>div:first-child{
  order:1!important;position:relative;overflow:hidden;min-height:310px;padding:32px 34px!important;
  border:1px solid rgba(0,185,255,.62)!important;border-radius:14px!important;
  background-image:url("/assets/hero-ai-reference.svg"),radial-gradient(420px 250px at 68% 48%,rgba(0,166,255,.13),transparent 68%),linear-gradient(135deg,#041a39,#071b35 60%,#07152c)!important;background-repeat:no-repeat;background-position:right 12% center,center,center;background-size:min(58%,520px),auto,auto;
  box-shadow:0 0 0 1px rgba(0,198,255,.08) inset,0 20px 60px rgba(0,0,0,.30),0 0 45px rgba(0,139,255,.10)!important;
}
.hero-grid>div:first-child:after{
  content:"f(x)   ∑   √   ∫\A   x²   π   Δ   ∂";
  white-space:pre;position:absolute;right:5%;top:16%;font-family:Georgia,serif;
  font-size:28px;line-height:2.2;color:#20d8ff;opacity:.17;transform:rotate(-8deg);pointer-events:none;
}
.hero-grid>div:last-child{
  order:2!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;
  padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.eyebrow{
  background:transparent!important;border:0!important;color:#11d6ff!important;
  font-size:25px!important;padding:0!important;border-radius:0!important;
}
.hero h1{font-size:clamp(32px,4vw,53px)!important;max-width:680px!important;margin:5px 0 8px!important;line-height:1.2!important}
.hero p{font-size:16px!important;max-width:650px!important;line-height:1.9!important}
.hero-actions{gap:9px!important;margin-top:15px!important}
.hero-actions .primary-btn{min-width:130px!important}
.hero-card{
  min-height:0!important;padding:16px!important;
  background:linear-gradient(145deg,rgba(3,28,54,.98),rgba(3,17,35,.98))!important;
}
.hero-card .math-badge{
  width:58px!important;height:58px!important;border-radius:15px!important;
  background:linear-gradient(135deg,#0b8cff,#10d9ff)!important;
  box-shadow:0 0 28px rgba(0,185,255,.25)!important;
}
.hero-card h3{font-size:17px!important;margin:8px 0!important}
.hero-card p{font-size:12px!important}
.hero-card .grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
.hero-card .grid .card{
  padding:12px 14px!important;min-height:0!important;text-align:right!important;
  border-radius:10px!important;background:linear-gradient(135deg,#061f3b,#09284b)!important;
}
.hero-card .grid .card:nth-child(1){border-color:rgba(0,176,255,.45)!important}
.hero-card .grid .card:nth-child(2){border-color:rgba(0,176,255,.45)!important}
.hero-card .grid .card:nth-child(3){border-color:rgba(127,65,255,.45)!important}
.hero-card .grid .card:nth-child(4){border-color:rgba(16,199,125,.45)!important}

.hero + section .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.hero + section .stats-card{
  min-height:90px!important;padding:13px!important;background:linear-gradient(145deg,#07284c,#061b34)!important
}
.hero + section .stat-number{font-size:23px!important;color:#11d7ff!important}

/* Reference feature cards */
.education-card{min-height:170px!important;padding:16px!important}
.education-card .action{margin-top:auto!important}
section{padding:25px 0!important}
.section-head{margin-bottom:13px!important}
.section-head h2{font-size:24px!important}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}

/* Internal sidebar generated by navbar.js */
body.hm-has-sidebar{padding-left:0!important}
.hm-sidebar{
  position:fixed;left:0;top:68px;bottom:0;width:238px;z-index:9000;
  padding:13px 10px;overflow-y:auto;direction:rtl;
  background:linear-gradient(180deg,#06162c,#071b35 75%,#061326)!important;
  border-right:1px solid rgba(43,165,255,.25)!important;
  box-shadow:12px 0 38px rgba(0,0,0,.25)!important;
}
.hm-sidebar .hm-side-brand{display:none}
.hm-sidebar a{
  display:flex;align-items:center;gap:9px;width:100%;min-height:38px;
  padding:8px 11px;margin:3px 0;border-radius:8px;color:#dceeff!important;
  font-size:12px;font-weight:800;text-decoration:none!important;
}
.hm-sidebar a:hover{background:rgba(0,147,255,.12)!important;color:#21d7ff!important}
.hm-sidebar a.active{
  background:linear-gradient(135deg,#0b72b8,#123d68)!important;
  box-shadow:0 5px 18px rgba(0,122,255,.18)!important;color:#fff!important;
}
.hm-sidebar .side-ai{
  margin-top:13px;padding:12px;border:1px solid rgba(41,178,255,.25);
  border-radius:12px;background:linear-gradient(145deg,#071f3d,#06182f);
}
.hm-sidebar .side-ai b{color:#22d9ff}
body.hm-has-sidebar #hamou-navbar + *{margin-left:238px}
body.hm-has-sidebar .wrap{width:min(1420px,calc(100% - 36px))!important}
body.hm-has-sidebar main{min-height:calc(100vh - 68px)}
/* Pages whose own content begins with main/header should still clear sidebar */
body.hm-has-sidebar>main,body.hm-has-sidebar>div:not(#hamou-navbar){}

/* Teacher Studio / builder: match reference board */
body.hm-has-sidebar .wrap{margin-top:16px!important}
body.hm-has-sidebar .hero{padding:18px!important;border-radius:14px!important;margin-bottom:12px!important}
body.hm-has-sidebar .hero h1{font-size:28px!important}
body.hm-has-sidebar .grid{gap:12px!important}
body.hm-has-sidebar .card{border-radius:12px!important}

/* Auth/public pages retain full-width but share the same visual language */
.auth-box,.login-card,.register-card{background:linear-gradient(145deg,#071d38,#06162c)!important}

/* Mobile reference */
@media(max-width:1100px){
  .desktop-nav{display:none!important}
  .mobile-toggle{display:grid!important}
  .hero-grid{grid-template-columns:1fr!important}
  .hero-grid>div:first-child{min-height:260px!important}
  .hero-grid>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero-card{height:100%!important}
  .hero + section .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .hm-sidebar{width:210px;transform:translateX(-100%);transition:transform .2s ease}
  body.hm-has-sidebar #hamou-navbar + *{margin-left:0}
  body.hm-has-sidebar .hm-sidebar.open{transform:translateX(0)}
}
@media(max-width:700px){
  .container{width:calc(100% - 20px)!important}
  .topbar .container{padding:0 10px!important}
  .navbar{min-height:60px!important}
  .brand{font-size:15px!important}
  .brand-badge{width:36px!important;height:36px!important}
  .nav-actions:before{display:none}
  #install-button{display:none!important}
  .hero{padding:10px 0 6px!important}
  .hero-grid>div:first-child{padding:23px 18px!important;min-height:245px!important}
  .eyebrow{font-size:19px!important}
  .hero h1{font-size:29px!important}
  .hero p{font-size:13px!important}
  .hero-grid>div:last-child{grid-template-columns:1fr!important}
  .hero-card .grid{grid-template-columns:1fr!important}
  .hero + section .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr!important}
  .section-head h2{font-size:21px!important}
  section{padding:20px 0!important}
  body.hm-has-sidebar .wrap{width:calc(100% - 20px)!important}
}
@media(max-width:420px){
  .hero + section .grid-4{grid-template-columns:1fr!important}
  .hero h1{font-size:26px!important}
}

/* Homepage header reference controls */
.ref-search{font-size:23px!important;border:0!important;background:transparent!important;color:#eefaff!important;text-decoration:none!important}
.ref-divider{width:1px;height:27px;background:rgba(119,190,235,.30);display:inline-block}
.ref-user{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;color:#eefaff!important;background:rgba(9,35,65,.9);border:1px solid rgba(57,165,235,.22);font-weight:800;font-size:12px}
.ref-user-avatar{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#d9f6ff,#2b84bc);color:#16405f;font-size:11px}
.brand{position:relative;padding-bottom:3px}
.brand:after{content:"معًا نحو التميز في الرياضيات";position:absolute;left:51px;bottom:-3px;font-size:8px;font-weight:700;color:#9bc0df;white-space:nowrap}
@media(max-width:700px){
 .ref-search,.ref-divider,.ref-user{display:none!important}
 .brand:after{display:none}
}

/* Legacy standalone internal headers are replaced by the unified reference header. */
body.hm-has-sidebar>.top{display:none!important}
body.hm-has-sidebar>.wrap,
body.hm-has-sidebar>.layout{margin-left:238px!important;width:min(1420px,calc(100% - 274px))!important}
@media(max-width:900px){
  body.hm-has-sidebar>.wrap,
  body.hm-has-sidebar>.layout{margin-left:0!important;width:calc(100% - 20px)!important}
}