*{box-sizing:border-box}html{min-width:320px;background:var(--page-bg);scroll-behavior:smooth}body{min-width:320px;min-height:100vh;min-height:100dvh;margin:0;display:flex;flex-direction:column;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 8% 12%,rgba(212,168,67,0.06),transparent 28%),linear-gradient(180deg,#fbfdfc 0%,var(--page-bg) 58%,#f2f6f4 100%);font-family:"Cairo",Tahoma,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,label,input[type="file"]{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}svg{display:block;width:1em;height:1em;fill:currentColor}.hidden{display:none !important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:500;top:10px;right:12px;padding:9px 14px;border-radius:var(--radius-sm);color:#fff;background:var(--primary-dark);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}.site-header{position:sticky;z-index:100;top:0;min-height:var(--header-height);color:#fff;background:linear-gradient(135deg,#064023 0%,#0a5c36 55%,#0d7a47 100%);border-bottom:3px solid var(--gold);box-shadow:0 5px 18px rgba(6,64,35,0.18);padding-top:env(safe-area-inset-top,0px)}.header-inner{width:min(100% - 36px,var(--content-width));min-height:calc(var(--header-height) - 3px);margin-inline:auto;display:grid;direction:ltr;grid-template-columns:minmax(280px,1fr) auto minmax(390px,1.25fr);grid-template-areas:"end start title";align-items:center;gap:18px}.brand-lockup,.header-actions,.header-student,.header-student-name{display:flex;align-items:center}.brand-lockup{grid-area:title;min-width:0;direction:rtl;justify-self:end;justify-content:center;gap:12px;text-align:center}.brand-icon{flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,0.28);border-radius:50%;color:var(--gold-bright);background:rgba(255,255,255,0.08)}.brand-icon svg{width:26px;height:26px}.brand-copy{min-width:0;display:grid;line-height:1.35;justify-items:center}.brand-copy strong{overflow:hidden;color:#fff;font-size:clamp(0.88rem,1.8vw,1.14rem);font-weight:800;text-overflow:ellipsis;white-space:nowrap}.brand-copy small{color:rgba(255,255,255,0.76);font-size:0.76rem;line-height:1.55;text-align:center}.header-side-start{grid-area:start;direction:rtl;justify-self:center}.header-actions{grid-area:end;min-width:0;direction:rtl;justify-self:start;gap:9px}.header-student{gap:10px}.header-student-name{gap:6px;max-width:260px;font-size:var(--ds-font-xs);font-weight:var(--ds-weight-bold)}.header-student-name svg{width:19px;height:19px}.header-student-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-button,.sound-toggle{min-height:38px;border:0;color:#fff}.logout-button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;background:var(--danger);box-shadow:0 5px 14px rgba(111,18,29,0.24);font-size:var(--ds-font-xs);font-weight:var(--ds-weight-bold)}.logout-button svg{width:18px;height:18px}.sound-toggle{flex:0 0 38px;width:38px;padding:0;border:1px solid rgba(255,255,255,0.26);border-radius:50%;background:rgba(255,255,255,0.11);font-weight:800}.site-main{flex:1 0 auto;width:100%}.connection-panel{width:min(100% - 32px,var(--content-width));margin:18px auto 0;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid #feb2b2;border-right:5px solid var(--danger);border-radius:var(--radius-md);color:#8c2934;background:#fff5f5;box-shadow:var(--shadow-sm)}.alert-icon{color:var(--danger)}.alert-icon svg{width:24px;height:24px}.connection-panel h2,.connection-panel p{margin:0}.connection-panel h2{font-size:0.96rem}.connection-panel p{color:#9b3e47;font-size:0.78rem}