/* Ghiras Graphic — independent visual system. Loaded only by the Graphic edition. */
:root{--g-ink:#184e49;--g-deep:#164e63;--g-mint:#dff5ed;--g-sky:#e8f6ff;--g-lilac:#7869dc;--g-coral:#ff8e83;--g-sun:#ffd56e;--g-paper:#fffdf9;--g-line:#dcebe7;--g-muted:#6d817d;--g-shadow:0 18px 46px rgba(37,89,112,.12)}
body{background:radial-gradient(circle at 8% 4%,#e9f8f2 0,transparent 24%),radial-gradient(circle at 96% 20%,#e8eeff 0,transparent 27%),var(--g-paper)!important;color:var(--g-ink)!important}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(#7fd2c8 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,#000,transparent 50%);z-index:-1}
header.site{background:rgba(255,253,249,.86)!important;border-color:var(--g-line)!important;box-shadow:0 8px 28px rgba(37,89,112,.08)}
.brand{color:var(--g-deep)!important}.brand .mark{background:linear-gradient(135deg,var(--g-lilac),#4ebfc0)!important;border-radius:15px!important;box-shadow:0 8px 16px rgba(120,105,220,.24)}.brand em{color:#e6a742!important}
.pill,.hud .btn-ghost{background:#fff!important;border-color:var(--g-line)!important;color:var(--g-deep)!important;box-shadow:0 5px 13px rgba(37,89,112,.05)}
.hero{background:linear-gradient(135deg,#effbff 0%,#f8f2ff 52%,#fff6e3 100%)!important;color:var(--g-deep)!important;padding-block:56px!important}.hero:after{height:74px!important;background:var(--g-paper)!important}.hero h1,.hero h1 .g{color:var(--g-deep)!important}.hero p.lead{color:#58736e!important}.hero-eyebrow{background:#fff8d9!important;border-color:#f6dc91!important;color:#966d1d!important}.chip-ok{background:#fff!important;border-color:var(--g-line)!important;color:var(--g-deep)!important}.hero-btn{background:linear-gradient(135deg,var(--g-lilac),#58bfc1)!important;color:#fff!important;box-shadow:0 13px 24px rgba(104,98,212,.25)!important}.hero-parent-btn{background:#fff!important;border-color:var(--g-line)!important;color:var(--g-deep)!important}.hero-play-note{color:#6d817d!important}
.hero-showcase{background:linear-gradient(145deg,#ffd17d,#ff9494 49%,#8a76df)!important;border-color:#fff!important;box-shadow:0 22px 45px rgba(96,77,170,.20)!important}.hero-showcase:before,.hero-showcase:after{color:#fff5bb!important}.hero-bubble{color:#6250ab!important}.hero-bubble.two{background:#e9fff4!important;color:#1b7460!important}.hero-subjects span{color:#5e51a3!important}.hero-mascot{font-size:0!important;background:url('ghiras-soft-hero-v1.png') center/contain no-repeat;width:min(430px,94%);height:285px;filter:drop-shadow(0 15px 12px rgba(67,36,78,.16))!important}
.ux-avatar{font-size:0!important;background:#ffe69a url('ghiras-soft-hero-v1.png') center/contain no-repeat!important;box-shadow:inset 0 -14px 0 rgba(255,255,255,.24),0 12px 24px rgba(102,86,170,.14)!important}.ux-welcome:after{content:'✦  ✦';position:absolute;left:22px;bottom:12px;color:#fff2a8;font-size:21px;letter-spacing:11px;opacity:.8}.ux-welcome{position:relative;overflow:hidden}.child-space-title{color:var(--g-deep)!important}.child-space-title span{background:#fff0b9!important;color:#85631b!important}.child-space-nav button{border-color:#c7e7e4!important;color:var(--g-deep)!important}.child-space-nav button:first-child{background:linear-gradient(135deg,#7869dc,#4dbebf)!important;border-color:transparent!important}
.ux-shell{background:linear-gradient(135deg,#fffdf7,#edfaff)!important;border-color:#bce9eb!important;border-radius:30px!important;box-shadow:var(--g-shadow)!important}.ux-welcome{background:linear-gradient(135deg,#7869dc,#50bdc0)!important;border-radius:24px!important}.ux-avatar{background:linear-gradient(145deg,#ffe08b,#ff9b91)!important;border-radius:24px!important}.ux-action,.acard,.new-metric,.new-skill,.progress-card,.quran-block,.price-card,.family-children{border-color:var(--g-line)!important;border-radius:18px!important;box-shadow:0 8px 22px rgba(37,89,112,.06)!important}.ux-action:hover,.acard:hover{border-color:#89d7cf!important;box-shadow:var(--g-shadow)!important}.ux-action .ux-action-label,.acard h3,.sec-head h2,.quran-block .name{color:var(--g-deep)!important}.new-next,.continue-card{background:linear-gradient(135deg,#7869dc,#4dbebf)!important}.new-quran-report{background:#fff1f3!important;border-color:#ffd0d2!important}.new-skill i,.progress-track i,.prog i{background:linear-gradient(90deg,#58c8c3,#8b70df)!important}.btn-start,.sound-btn,.tutor-input button,.game-spotlight button{background:var(--g-deep)!important}.hero-btn:hover,.ux-action:hover,.acard:hover{transform:translateY(-3px)}
.modal{background:rgba(34,64,72,.38)!important}.panel{background:#fffdf9!important;border:1px solid #fff!important;border-radius:30px!important}.panel-head h3{color:var(--g-deep)!important}.panel-close{border-color:var(--g-line)!important}.choice.correct{border-color:#4bbd9e!important;background:#e7fbf3!important;color:#1c7c68!important}.choice.wrong{border-color:#ff9f96!important;background:#fff1f0!important;color:#bc4f4c!important}
.tutor-btn{background:linear-gradient(135deg,#7869dc,#50bdc0)!important;box-shadow:0 12px 25px rgba(103,96,207,.26)!important}.tutor-head,.tutor-bubble.me{background:var(--g-deep)!important}.tutor-bubble.ai{background:#f6f4ff!important;border-color:#e1defa!important}
/* Parent dashboard */
.top{background:rgba(255,253,249,.9)!important;border-bottom:1px solid var(--g-line)!important;box-shadow:0 8px 24px rgba(37,89,112,.07)!important}.brand{color:var(--g-deep)!important}.nav a{border-color:var(--g-line)!important;color:var(--g-deep)!important;background:#fff!important}.intro{background:linear-gradient(135deg,#7869dc,#4dbebf)!important;border-radius:30px!important;box-shadow:var(--g-shadow)}.metric,.panel{border:1px solid var(--g-line)!important;border-radius:20px!important;box-shadow:0 8px 22px rgba(37,89,112,.06)!important}.metric b{color:var(--g-lilac)!important}.bar i{background:linear-gradient(90deg,#58c8c3,#8b70df)!important}.report{background:#fff3f5!important;border-color:#ffd2d4!important}.actions a,.actions button{background:linear-gradient(135deg,#7869dc,#4dbebf)!important;color:#fff!important}.actions .alt{background:#eef8ff!important;color:var(--g-deep)!important}
/* Sign-in page */
body.graphic-login{background:radial-gradient(circle at 12% 12%,#dff8f0 0,transparent 30%),radial-gradient(circle at 88% 8%,#e8e3ff 0,transparent 28%),#fffdf9!important;position:relative;isolation:isolate}.graphic-login:after{content:"";position:fixed;left:max(3vw,18px);bottom:0;width:min(38vw,390px);height:min(48vh,430px);background:url('ghiras-soft-hero-v1.png') bottom center/contain no-repeat;opacity:.94;z-index:-1;filter:drop-shadow(0 16px 16px rgba(49,63,130,.16));animation:ghRise .8s both}.graphic-login .box{border:1px solid #fff!important;border-radius:32px!important;box-shadow:0 24px 70px rgba(60,69,132,.16)!important;background:rgba(255,253,249,.94)!important}.graphic-login h1{color:var(--g-deep)!important}.graphic-login button{background:linear-gradient(135deg,#7869dc,#4dbebf)!important;border-radius:16px!important}.graphic-login input{border-color:var(--g-line)!important;background:#fff!important}.graphic-login .back{color:var(--g-lilac)!important}@media(max-width:720px){body.graphic-login:after{opacity:.18;width:90vw;height:35vh;left:5vw}.graphic-login .box{position:relative;z-index:1}}
/* Admin visual shell */
body.graphic-admin{background:radial-gradient(circle at 5% 4%,#e0f8ef 0,transparent 25%),radial-gradient(circle at 96% 16%,#eae5ff 0,transparent 28%),#fffdf9!important}.graphic-admin header{background:linear-gradient(180deg,#345a9a,#7463cb 54%,#4fbdbb)!important;border-left:1px solid rgba(255,255,255,.2)!important;box-shadow:10px 0 28px rgba(51,75,132,.13)!important}.graphic-admin main{background:transparent!important}.graphic-admin .topbar,.graphic-admin .card,.graphic-admin .admin-stat{background:rgba(255,255,255,.88)!important;border-color:#e1e8f2!important;border-radius:22px!important;box-shadow:0 12px 30px rgba(43,78,117,.08)!important}.graphic-admin .topbar h2,.graphic-admin h2{color:#315d86!important}.graphic-admin th{background:#edf7fa!important;color:#315d86!important}.graphic-admin td,.graphic-admin th{border-color:#e1e8f2!important}.graphic-admin input,.graphic-admin select,.graphic-admin textarea{border-color:#d8e5eb!important;background:#fff!important}.graphic-admin button{background:linear-gradient(135deg,#7869dc,#4dbebf)!important;border-radius:11px!important}.graphic-admin button.warn{background:linear-gradient(135deg,#ef8177,#f0aa76)!important}.graphic-admin .badge.ok{background:#e1f8ee!important;color:#247562!important}.graphic-admin .admin-stat b{color:#7463cb!important}
@media(max-width:700px){.hero{padding-block:34px!important}.hero-showcase{min-height:230px!important}.hero-mascot{height:220px}.hero h1{font-size:32px!important}.panel{border-radius:22px!important}.graphic-admin header{background:linear-gradient(135deg,#345a9a,#7463cb 56%,#4fbdbb)!important}.graphic-admin .topbar,.graphic-admin .card{border-radius:16px!important}}
/* Motion language: celebratory, brief and calm, never distracting. */
@keyframes ghRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ghGlow{0%,100%{filter:drop-shadow(0 12px 12px rgba(88,200,195,.18))}50%{filter:drop-shadow(0 18px 20px rgba(139,112,223,.30))}}
@keyframes ghWiggle{0%,100%{transform:rotate(0)}35%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}}
.hero-copy,.hero-showcase,.ux-shell,.sec-head,.acard,.price-card,.graphic-admin .card{animation:ghRise .55s both}.hero-showcase{animation:ghRise .55s both,ghGlow 4.4s ease-in-out infinite}.acard:nth-child(2),.price-card:nth-child(2){animation-delay:.08s}.acard:nth-child(3),.price-card:nth-child(3){animation-delay:.16s}.acard:nth-child(4),.price-card:nth-child(4){animation-delay:.24s}.brand .mark{animation:ghWiggle 3.2s ease-in-out infinite}.hero-mascot{animation:floatMascot 3.2s ease-in-out infinite,ghGlow 4s ease-in-out infinite!important}
.acard .ico,.ux-action span{transition:transform .2s ease}.acard:hover .ico,.ux-action:hover span{transform:scale(1.14) rotate(-5deg)}button,.btn-start,.hero-btn,.price-btn,.track-tab{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.hero-btn:active,.price-btn:active,.btn-start:active,button:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}