/* AZ Class – tab bar (Courses · Messages · Stats · Settings) + Stats / Settings screens. Loaded last.
   Mobile: translucent dark-glass bottom bar above the iPhone home indicator. Desktop (≥900px): left rail (right in RTL). */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:16;padding:0 8px env(safe-area-inset-bottom);background:linear-gradient(180deg,rgba(18,18,22,.66),rgba(9,9,11,.82));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 -24px 48px -28px rgba(0,0,0,.9)}
#tabbar[hidden]{display:none}
#tabbar::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,178,106,.38),transparent);pointer-events:none}
.tabbar-in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:64px}
.tab-it{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;text-decoration:none;color:var(--tx-3);font:500 11px/1.25 var(--sans);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:color .3s var(--ease);-webkit-user-select:none;user-select:none}
.tab-ic{position:relative;display:grid;place-items:center;width:54px;height:30px;border-radius:999px;transition:background-color .35s var(--ease),box-shadow .35s var(--ease),transform .3s var(--ease)}
.tab-ic .ic{width:22px;height:22px;transition:transform .35s var(--ease)}
.tab-l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.tab-it[aria-current=page]{color:var(--gold)}
.tab-it[aria-current=page] .tab-l{color:var(--gold-hi)}
.tab-it[aria-current=page] .tab-ic{background:linear-gradient(180deg,rgba(217,178,106,.16),rgba(217,178,106,.06));box-shadow:inset 0 0 0 1px var(--gold-line),0 8px 22px -10px rgba(217,178,106,.55)}
.tab-it[aria-current=page] .ic{stroke-width:1.9}
.tab-it:active .tab-ic{transform:scale(.92)}
.tab-it:focus-visible{outline:none}
.tab-it:focus-visible .tab-ic{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover){.tab-it:not([aria-current=page]):hover{color:var(--tx)} .tab-it:not([aria-current=page]):hover .tab-ic{background:rgba(255,255,255,.05)}}
.tab-badge{position:absolute;top:-4px;inset-inline-end:7px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--gold-grad);color:#17120A;font:700 10.5px/18px var(--sans);text-align:center;box-shadow:0 0 0 2px var(--bk)}
.tab-badge[hidden]{display:none}

/* Room for the bar; the page action bar (Next / Take quiz) sits just above it. */
body.has-tabs{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body.has-tabs:not(.no-action){padding-bottom:calc(170px + env(safe-area-inset-bottom))}
body.has-tabs #actionbar{bottom:calc(65px + env(safe-area-inset-bottom));padding-bottom:12px;background:rgba(9,9,11,.72)}
body.has-tabs .chat{height:calc(100dvh - 64px - 65px - env(safe-area-inset-bottom) - 44px)}
body.has-tabs.chat-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:899px){
  body.robot-on #tabbar,body.focus #tabbar{display:none}
  body.has-tabs.robot-on{padding-bottom:300px}
}
@media (min-width:900px){
  #tabbar{top:0;bottom:0;left:auto;right:auto;inset-inline-start:0;width:92px;padding:86px 10px 24px;border-top:0;border-inline-end:1px solid var(--line);background:linear-gradient(180deg,rgba(16,16,20,.7),rgba(9,9,11,.85));box-shadow:none}
  #tabbar::before{left:auto;right:auto;inset-inline-end:-1px;top:14%;bottom:14%;width:1px;height:auto;background:linear-gradient(180deg,transparent,rgba(217,178,106,.3),transparent)}
  .tabbar-in{display:flex;flex-direction:column;gap:6px;height:auto;max-width:none}
  .tab-it{padding:10px 0 11px;gap:6px;border-radius:18px;font-size:11.5px}
  .tab-ic{width:50px;height:36px}
  body.has-tabs{padding-inline-start:92px;padding-bottom:32px}
  body.has-tabs:not(.no-action){padding-bottom:100px}
  body.has-tabs #actionbar{bottom:0;left:auto;right:auto;inset-inline-start:92px;inset-inline-end:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  body.has-tabs .chat{height:calc(100dvh - 64px - 48px)}
  body.has-tabs.chat-page{padding-bottom:0}
  body.focus #tabbar{display:none}
}

/* ---------- Stats ---------- */
body.pg-stats main#app,body.pg-settings main#app{max-width:760px}
.st-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;padding:22px;border-radius:var(--r-lg);background:radial-gradient(420px 220px at 0% 0%,rgba(217,178,106,.13),transparent 70%),var(--card-bg),var(--bk-1)}
.st-ring{position:relative;width:118px;height:118px;flex:none}
.st-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.st-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:9}
.st-arc{fill:none;stroke:url(#stGold);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ease);filter:drop-shadow(0 0 6px rgba(217,178,106,.35))}
.st-ring-v{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:36px;color:var(--tx)}
.st-ring-v b{font:400 40px/1 var(--serif)}
.st-ring-v span{font:500 14px/1 var(--sans);color:var(--tx-2);margin-inline-start:2px}
.st-hero-t{margin:0 0 2px;font:400 26px/1.15 var(--serif);color:var(--tx)}
.st-hero-body .small{margin:0}
.st-mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.st-mini span{display:inline-flex;align-items:baseline;gap:3px;padding:6px 11px;border-radius:99px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font:500 12.5px/1.3 var(--sans);color:var(--tx-2)}
.st-mini b{font-weight:600;color:var(--tx)}
.st-mini em{font-style:normal;margin-inline-start:4px}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 10px}
@media (min-width:700px){.st-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.st-tile{display:flex;flex-direction:column;gap:5px;min-width:0;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card-bg),var(--bk-1);box-shadow:var(--sh-card);color:var(--tx);text-decoration:none;transition:border-color .35s var(--ease),transform .35s var(--ease)}
a.st-tile:hover{border-color:var(--gold-line)}
a.st-tile:active{transform:scale(.985)}
.st-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.st-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--gold-line);background:var(--gold-tint);color:var(--gold)}
.st-ic .ic{width:19px;height:19px}
.st-top .chev{color:var(--tx-3);display:grid} .st-top .chev .ic{width:16px;height:16px}
.st-val{font:400 34px/1 var(--serif);color:var(--tx);display:flex;align-items:baseline;gap:4px;min-height:34px}
.st-val small{font:500 12.5px/1 var(--sans);color:var(--tx-2)}
.st-na{color:var(--tx-3)}
.st-lbl{font:500 12.5px/1.3 var(--sans);color:var(--tx-2)}
.st-sub{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:6px;font:500 11.5px/1.35 var(--sans);color:var(--tx-3)}
.st-sub .bar{height:5px;margin:0}
.st-today{display:flex;align-items:center;gap:8px;margin:0 2px 22px}
.st-today .ic{width:15px;height:15px;color:var(--gold)}
.st-hero ~ .sec-row{margin-top:26px}
.st-rows{display:grid;gap:8px;margin-bottom:8px}
.st-row{display:flex;align-items:center;gap:14px;min-width:0;padding:13px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-bg),var(--bk-1);color:var(--tx);text-decoration:none;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.st-row .mod-ic{width:40px;height:40px;border-radius:11px}
.st-row .mod-ic .ic{width:20px;height:20px}
.st-row .grow{display:flex;flex-direction:column;gap:3px;min-width:0}
.st-row-t{font:500 14.5px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-row .bar{height:4px;margin:5px 0 0}
.st-row.done .mod-ic{background:var(--gold-grad);color:#17120A;border-color:transparent}
@media (hover:hover){.st-row:hover{border-color:var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)),var(--bk-1)}}
.st-score{flex:none;min-width:52px;text-align:center;padding:5px 10px;border-radius:99px;border:1px solid var(--gold-line);background:var(--gold-tint);color:var(--gold-hi);font:600 13px/1.2 var(--sans)}
.st-score.perfect{background:var(--gold-grad);color:#17120A;border-color:transparent}
.st-score.none{color:var(--tx-3);background:transparent;border-color:var(--line)}
.st-pct{flex:none;display:inline-flex;align-items:center;gap:5px;font:500 13px/1 var(--sans);color:var(--tx-2)}
.st-pct .ic{width:15px;height:15px;color:var(--gold)}
.st-badges{display:flex;flex-wrap:wrap;gap:8px}
.st-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;border:1px solid var(--gold-line);background:var(--gold-tint);color:var(--gold-hi);font:500 13px/1.3 var(--sans)}
.st-badge .ic{width:16px;height:16px;color:var(--gold)}
.st-empty{font-size:14px;color:var(--tx-2)}
@media (max-width:380px){.st-hero{grid-template-columns:1fr;justify-items:center;text-align:center} .st-mini{justify-content:center}}

/* Tab roots carry their own big heading: show the brand in the top bar instead of repeating the title (mobile). */
@media (max-width:899px){body.pg-stats #topbar h1,body.pg-settings #topbar h1{visibility:hidden} body.pg-stats .brand-text,body.pg-settings .brand-text{display:inline}}

/* ---------- Settings ---------- */
.set-head{padding:18px}
.set-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;border:1px solid var(--gold-line);background:var(--gold-tint);color:var(--gold-hi);font:500 12px/1.2 var(--sans);flex:none}
.set-chip .ic{width:14px;height:14px}
.set-card{margin-top:12px}
.set-lbl{display:flex;align-items:center;gap:10px}
.set-lbl .ic{width:18px;height:18px;color:var(--gold)}
.set-card .sub-line:last-child{margin-bottom:0}
.set-card .sub-line{margin:10px 0 12px;color:var(--tx-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.set-card .sub-line .ic{width:17px;height:17px}
.set-ext{display:inline-flex;align-items:center;gap:6px;font:500 14px/1.3 var(--sans);color:var(--gold);text-decoration:none}
.set-ext .ic{width:15px;height:15px}
.set-group{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card-bg),var(--bk-1);box-shadow:var(--sh-card);overflow:hidden}
.set-row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;color:var(--tx);text-decoration:none;transition:background-color .25s var(--ease)}
.set-row+.set-row{border-top:1px solid var(--line)}
.set-row .grow{display:flex;flex-direction:column;gap:1px;min-width:0}
.set-row b{font:500 15px/1.3 var(--sans)}
.set-row .mi{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--gold-line);background:var(--gold-tint);color:var(--gold);flex:none}
.set-row .mi .ic{width:18px;height:18px}
.set-row .chev{color:var(--tx-3);display:grid} .set-row .chev .ic{width:17px;height:17px}
@media (hover:hover){.set-row:hover{background:rgba(255,255,255,.035)} .set-row:hover .chev{color:var(--gold)}}
.set-logout{margin-top:18px;width:100%;color:var(--badc)!important}
.set-logout .ic{width:18px;height:18px}
.set-foot{text-align:center;margin:18px 0 0;color:var(--tx-3)}

/* ---------- RTL + Urdu / Punjabi ---------- */
html[dir=rtl] .set-row .chev .ic,html[dir=rtl] .st-top .chev .ic{transform:scaleX(-1)}
html[dir=rtl] .st-ring svg{transform:rotate(-90deg) scaleY(-1)}
html.lang-ur .tabbar-in{height:68px}
html.lang-ur .tab-it{font-size:12px;line-height:1.7;gap:0}
html.lang-ur body.has-tabs #actionbar{bottom:calc(69px + env(safe-area-inset-bottom))}
@media (min-width:900px){html.lang-ur body.has-tabs #actionbar{bottom:0}}
html.lang-ur :is(.st-hero-t,.st-lbl,.st-sub,.st-row-t,.st-mini span,.st-badge,.set-row b,.set-row .small,.set-lbl b,.set-card .sub-line,.st-today,.st-empty,.set-chip,.set-ext){line-height:1.9}
html.lang-ur .st-hero-t{font-size:24px}
html.lang-pa .tab-it{font-size:11.5px}