/* v60 — final visual polish, accessibility and responsive hardening */
:root{
  --v60-surface:#ffffff;
  --v60-surface-soft:#f7fbf9;
  --v60-surface-warm:#fffaf0;
  --v60-border:rgba(7,88,63,.12);
  --v60-border-gold:rgba(201,154,46,.24);
  --v60-shadow-sm:0 5px 16px rgba(4,60,44,.055);
  --v60-shadow-md:0 12px 30px rgba(4,60,44,.085);
  --v60-shadow-lg:0 22px 58px rgba(4,60,44,.13);
  --v60-radius:20px;
  --v60-radius-lg:26px;
}

html{
  background:#eef3f0;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
body{
  min-width:280px;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  background:
    radial-gradient(circle at 50% -10%,rgba(201,154,46,.10),transparent 32rem),
    linear-gradient(180deg,#edf4f0 0%,#f4f0e7 100%);
}
button,a,[role="button"]{touch-action:manipulation}
button{letter-spacing:inherit}
img{max-width:100%;height:auto}

/* App shell */
.app-host{
  min-height:100svh;
  min-height:100dvh;
  align-items:stretch;
}
.phone{
  isolation:isolate;
  width:min(100vw,410px);
  min-height:100svh;
  min-height:100dvh;
  margin-inline:auto;
  background:linear-gradient(180deg,#fff 0%,#fbfcf9 100%);
  box-shadow:none;
}
.screen{
  min-width:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 100% 0,rgba(201,154,46,.055),transparent 190px),
    linear-gradient(180deg,#fff 0%,#fbfcf9 100%);
  scrollbar-width:thin;
  scrollbar-color:rgba(7,88,63,.22) transparent;
}
.screen::-webkit-scrollbar{width:5px}
.screen::-webkit-scrollbar-thumb{background:rgba(7,88,63,.20);border-radius:99px}

@media (min-width:520px){
  .app-host{padding:24px;align-items:center}
  .phone{
    width:410px;
    min-height:min(860px,calc(100dvh - 48px));
    height:min(860px,calc(100dvh - 48px));
    border:1px solid rgba(7,88,63,.09);
    border-radius:34px;
    box-shadow:var(--v60-shadow-lg);
  }
  .screen{min-height:calc(100% - 36px);height:calc(100% - 36px)}
}

/* Status and loading states */
.status-bar{
  position:relative;
  z-index:12;
  background:linear-gradient(105deg,#043c2c 0%,#07583f 58%,#0b6e4f 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.loading-card{
  min-height:100svh;
  min-height:100dvh;
  color:var(--green-dark);
}
.loading-card .brand-mark{
  box-shadow:0 14px 36px rgba(4,60,44,.14);
}
.loading-card>span:last-child{color:var(--muted);font-size:13px}

/* Typography */
.title-brand,.page-title,.lesson-title,.quiz-heading,.completion-title{
  text-wrap:balance;
  letter-spacing:-.025em;
}
.page-copy,.hero-copy,.lesson-sub,.tip-text span{
  text-wrap:pretty;
}
.arabic-display,.arabic-letter,[lang="ar"]{
  font-feature-settings:"liga" 1,"calt" 1;
  text-rendering:optimizeLegibility;
}

/* Buttons and interaction */
.btn{
  min-height:56px;
  border-radius:18px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(7,88,63,.18);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.link-button,.nav-item,.quick-choice,.pill{min-height:44px}
.link-button{display:grid;place-items:center;text-align:center;border-radius:14px}
.continue-row{min-height:44px;border-radius:12px;padding-inline:4px}
.answer{min-height:60px}

@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{filter:brightness(1.035);transform:translateY(-1px);box-shadow:0 13px 28px rgba(7,88,63,.21)}
  .learner-card:hover,.letter-card:hover,.lesson-card:hover{border-color:rgba(7,88,63,.19)}
  .nav-item:hover,.link-button:hover{background:rgba(11,110,79,.055)}
}
.btn:not(:disabled):active,.learner-card:active,.letter-card:active,.answer:active{transform:translateY(1px) scale(.995)}
:where(button,a,[role="button"]):focus-visible{
  outline:3px solid rgba(201,154,46,.62)!important;
  outline-offset:3px!important;
}

/* Welcome — cleaner, premium, no human imagery */
.screen.centered{
  min-height:calc(100svh - 36px);
  min-height:calc(100dvh - 36px);
  padding-inline:clamp(18px,5vw,24px);
}
.screen.centered::before{opacity:.30}
.screen.centered::after{
  width:min(326px,calc(100% - 28px));
  border-color:rgba(201,154,46,.23);
}
.screen.centered .brand-mark{
  border-radius:24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.78),0 16px 38px rgba(4,60,44,.12);
}
.screen.centered .title-brand{font-size:clamp(29px,8vw,34px)}
.screen.centered .hero-title{font-size:clamp(22px,6.1vw,26px)}
.screen.centered .hero-arabic{
  min-height:126px;
  border-color:rgba(7,88,63,.10);
  box-shadow:var(--v60-shadow-md);
}
.screen.centered .btn{margin-top:2px}

/* Dashboard */
.dashboard-brand-hero{
  border:1px solid rgba(230,200,110,.20);
  border-radius:26px;
  background:
    radial-gradient(circle at 105% -15%,rgba(230,200,110,.19),transparent 44%),
    linear-gradient(135deg,#043c2c 0%,#07583f 65%,#0b6e4f 100%);
  box-shadow:0 15px 32px rgba(4,60,44,.16);
}
.dashboard-brand-hero:before{
  content:"";
  position:absolute;
  inset:auto -42px -66px auto;
  width:150px;
  height:150px;
  border:1px solid rgba(230,200,110,.15);
  border-radius:50%;
}
.dashboard-brand-hero img{
  border-radius:18px;
  border-color:rgba(230,200,110,.60);
  box-shadow:0 7px 20px rgba(0,0,0,.15);
}
.goal-card{
  height:auto;
  min-height:116px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 88% 15%,rgba(230,200,110,.22),transparent 38%),
    linear-gradient(135deg,#0b6e4f,#07583f);
  box-shadow:0 12px 28px rgba(7,88,63,.16);
}
.section-title{margin-top:2px;color:#043c2c}
.section-title:before{height:20px}
.lesson-card,.practice-card,.score-card,.learner-card{
  border:1px solid var(--v60-border);
  box-shadow:var(--v60-shadow-sm);
}
.lesson-card{
  background:linear-gradient(180deg,#fff 0%,#fdfefa 100%);
  box-shadow:var(--v60-shadow-md);
}
.lesson-card .percent{
  border:1px solid rgba(201,154,46,.18);
}
.iqra-level{
  min-height:66px;
  border-color:var(--v60-border)!important;
  box-shadow:0 3px 12px rgba(4,60,44,.035);
}
.iqra-level.active{
  border-color:rgba(11,110,79,.25)!important;
  background:linear-gradient(135deg,#f5fbf8,#fffaf0)!important;
  box-shadow:0 8px 20px rgba(4,60,44,.06);
}
.iqra-level.upcoming{opacity:.72}

/* Learning cards */
.letter-grid{gap:12px}
.letter-card{
  height:154px;
  border:1px solid rgba(7,88,63,.085);
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);
  box-shadow:0 8px 22px rgba(4,60,44,.055);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.letter-card.selected{
  border-color:rgba(230,200,110,.58);
  background:linear-gradient(145deg,#0b6e4f,#043c2c);
  box-shadow:0 14px 28px rgba(7,88,63,.20);
}
.tip{
  border:1px solid rgba(7,88,63,.09);
  background:linear-gradient(135deg,#f3faf6,#fffdf7);
}
.practice-card{background:#fff}
.quick-choice{border:1px solid rgba(7,88,63,.09)}
.quick-choice.selected{border-color:rgba(230,200,110,.54)}

/* Quiz */
.quiz-letter{
  min-height:210px;
  border:1px solid rgba(7,88,63,.08);
  background:
    radial-gradient(circle at 82% 18%,rgba(201,154,46,.14),transparent 32%),
    linear-gradient(145deg,#f4fbf7,#fffdf7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}
.answer{
  border-color:rgba(7,88,63,.12);
  box-shadow:0 4px 14px rgba(4,60,44,.035);
}
.answer.correct{box-shadow:0 8px 18px rgba(7,88,63,.12)}
.feedback{border:1px solid rgba(7,88,63,.08)}

/* Bottom navigation */
.bottom-nav{
  position:sticky;
  bottom:0;
  z-index:10;
  margin-inline:-2px;
  border:1px solid rgba(7,88,63,.09);
  border-radius:20px 20px 16px 16px;
  background:rgba(255,255,255,.94);
  box-shadow:0 -4px 18px rgba(4,60,44,.055),0 8px 22px rgba(4,60,44,.055);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.nav-item{border-radius:12px;padding:5px 8px}
.nav-item.active{background:rgba(11,110,79,.07)}

/* Error state */
.error-state{
  min-height:100svh;
  min-height:100dvh;
  background:
    radial-gradient(circle at 50% 20%,rgba(11,110,79,.09),transparent 260px),
    linear-gradient(180deg,#fff,#fbf8f0);
}
.error-card{
  padding:24px;
  border:1px solid var(--v60-border);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--v60-shadow-md);
}

/* Small screens */
@media (max-width:359px){
  .screen{padding-inline:16px}
  .dashboard-brand-hero{grid-template-columns:58px 1fr;padding:12px;gap:10px;border-radius:20px}
  .dashboard-brand-hero img{width:58px}
  .goal-card,.lesson-card,.practice-card{padding:15px}
  .letter-grid{gap:8px}
  .letter-card{height:138px;border-radius:18px}
  .letter-card .arabic-letter{font-size:52px}
  .bottom-nav{padding-inline:7px}
  .nav-item{min-width:52px}
}

@media (max-height:720px){
  .screen.centered{gap:8px;padding-top:14px}
  .screen.centered .brand-mark{width:76px;height:76px}
  .screen.centered .hero-arabic{min-height:104px;height:104px}
  .screen.centered .hero-copy{line-height:1.36}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media (prefers-contrast:more){
  .lesson-card,.practice-card,.score-card,.learner-card,.letter-card,.iqra-level{border-color:rgba(4,60,44,.34)!important}
  .page-copy,.lesson-sub,.hero-copy{color:#40564d}
}