*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{color:#23282a;-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#f7f5f0;font-family:Segoe UI,Tahoma,Noto Naskh Arabic,Arial,sans-serif;font-size:16px;line-height:1.7}h1,h2,h3,h4,p,figure{margin:0}ul,ol{margin:0;padding:0;list-style:none}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;background:0 0;border:none}button:disabled{cursor:not-allowed}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}a{color:inherit;text-decoration:none}:focus-visible{outline-offset:2px;outline:3px solid #0f5c4a}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.page-title{font-size:24px;font-weight:700;line-height:1.4}.step-question{margin-bottom:16px;font-size:20px;font-weight:700;line-height:1.5}.section-title{margin-bottom:12px;font-size:18px;font-weight:700}.text-muted{color:#6d7476}.text-sm{font-size:14px}.text-center{text-align:center}.greeting{font-size:24px;font-weight:700;line-height:1.4}.greeting-date{color:#6d7476;margin-top:4px;font-size:16px}.app{flex-direction:column;min-height:100dvh;display:flex}.page-header{z-index:30;min-height:58px;padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top));color:#fff;background:#0f5c4a;align-items:center;gap:8px;display:flex;position:sticky;top:0}.page-header__back{color:#fff;background:#ffffff29;border-radius:999px;flex-shrink:0;align-items:center;gap:4px;min-height:44px;margin-inline-start:-4px;padding:4px 12px;font-size:16px;font-weight:700;display:flex}.page-header__back:active{background:#ffffff47}.page-header__back-arrow{flex-shrink:0}.page-header__title{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:18px;font-weight:700;overflow:hidden}.page-header__action{flex-shrink:0;min-width:44px;min-height:44px;font-size:14px;font-weight:700}.page{width:100%;max-width:620px;padding:16px;padding-bottom:calc(68px + 24px + env(safe-area-inset-bottom));flex:1;margin:0 auto}.page--no-nav{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.stack{flex-direction:column;gap:12px;display:flex}.stack--lg{gap:16px}.stack--sm{gap:8px}.step-indicator{align-items:center;gap:8px;margin-bottom:16px;display:flex}.step-indicator__bar{background:#e3ded4;border-radius:999px;flex:1;height:6px;overflow:hidden}.step-indicator__fill{background:#0f5c4a;border-radius:999px;height:100%;transition:width .25s}.step-indicator__text{color:#6d7476;flex-shrink:0;font-size:14px;font-weight:700}.bottom-nav{inset-inline:0;z-index:40;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid #e3ded4;display:flex;position:fixed;bottom:0}.bottom-nav__item{color:#6d7476;flex:1;justify-content:center;align-items:center;min-height:68px;font-size:16px;font-weight:700;display:flex}.bottom-nav__item--active{color:#0f5c4a;box-shadow:inset 0 -3px #0f5c4a}.success{text-align:center;flex-direction:column;align-items:center;padding-top:24px;display:flex}.success__title{color:#1f7a4d;background:#e7f4ec;border-radius:14px;width:100%;padding:24px 16px;font-size:24px;font-weight:700;line-height:1.5}.state{text-align:center;color:#6d7476;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:32px 16px;display:flex}.state__title{color:#23282a;font-size:18px;font-weight:700}.state__action{width:auto;min-width:220px;margin-top:8px}.spinner{border:4px solid #e3ded4;border-top-color:#0f5c4a;border-radius:50%;width:38px;height:38px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.alert{border-radius:14px;align-items:flex-start;gap:8px;padding:12px 16px;font-weight:600;line-height:1.6;display:flex}.alert--error{color:#b3261e;background:#fbeae9}.alert--success{color:#1f7a4d;background:#e7f4ec}.alert--info{color:#9a6700;background:#fdf4e3}.login{max-width:460px;min-height:100dvh;padding:24px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;justify-content:center;margin:0 auto;display:flex}.login__brand{text-align:center;margin-bottom:32px}.login__mark{margin-bottom:12px;font-size:46px;line-height:1}.login__name{color:#0a4437;font-size:24px;font-weight:700;line-height:1.4}.success__title--absent{color:#23282a;background:#f7f5f0;border:2px solid #cfc7b8}.btn{border-radius:14px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:52px;padding:12px 16px;font-size:18px;font-weight:700;transition:background-color .15s,opacity .15s;display:flex}.btn:disabled{opacity:.55}.btn--primary{color:#fff;background:#0f5c4a}.btn--primary:not(:disabled):active{background:#0a4437}.btn--secondary{color:#0f5c4a;background:#fff;border:2px solid #cfc7b8}.btn--secondary:not(:disabled):active{background:#e6f1ee}.btn--ghost{color:#6d7476;background:0 0;min-height:44px;font-weight:600}.btn--danger{color:#b3261e;background:#fbeae9}.btn--whatsapp{color:#fff;background:#1faa53}.btn--whatsapp:not(:disabled):active{background:#178c43}.btn--lg{min-height:64px;font-size:20px}.big-action{text-align:right;border-radius:20px;align-items:center;width:100%;min-height:104px;padding:24px 16px;display:flex;box-shadow:0 1px 3px #23282a14}.big-action__label{font-size:20px;font-weight:700;display:block}.big-action__hint{opacity:.85;margin-top:2px;font-size:14px;font-weight:400;display:block}.big-action--primary{color:#fff;background:#0f5c4a}.big-action--primary:active{background:#0a4437}.big-action--secondary{color:#23282a;background:#fff;border:2px solid #e3ded4}.big-action--secondary:active{background:#e6f1ee}.sticky-actions{z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(#f7f5f000,#f7f5f0 28%);flex-direction:column;gap:8px;margin:16px -16px 0;display:flex;position:sticky;bottom:0}.field{margin-bottom:16px}.field__label{margin-bottom:8px;font-weight:700;display:block}.field__hint{color:#6d7476;margin-top:4px;font-size:14px}.field__hint--error{color:#b3261e;font-weight:700}.input,.search__input,.textarea{background:#fff;border:2px solid #cfc7b8;border-radius:14px;width:100%;min-height:52px;padding:12px;font-size:16px;display:block}.input::placeholder,.search__input::placeholder,.textarea::placeholder{color:#6d7476}.input:focus,.search__input:focus,.textarea:focus{border-color:#0f5c4a;outline:none}.input--number{text-align:center;letter-spacing:1px;min-height:60px;font-size:24px;font-weight:700}.input--number:disabled{color:#6d7476;background:#f7f5f0}.phone-field{background:#fff;border:2px solid #cfc7b8;border-radius:14px;align-items:stretch;display:flex;overflow:hidden}.phone-field:focus-within{border-color:#0f5c4a}.phone-field--error{border-color:#b3261e}.phone-field__prefix{color:#0a4437;background:#e6f1ee;border-inline-end:2px solid #cfc7b8;flex-shrink:0;align-items:center;padding:0 12px;font-size:18px;font-weight:700;display:flex}.phone-field__input{letter-spacing:1px;background:0 0;border:none;flex:1;min-width:0;min-height:56px;padding:12px;font-size:20px;font-weight:700}.phone-field__input:focus{outline:none}.phone-field__input::placeholder{color:#6d7476;letter-spacing:normal;font-weight:400}.input--error{border-color:#b3261e}.textarea{resize:vertical;min-height:110px;line-height:1.7}.search{margin-bottom:16px;position:relative}.search__input{padding-inline-end:52px;font-size:18px}.search__clear{inset-inline-end:8px;color:#6d7476;border-radius:50%;width:40px;height:40px;font-size:18px;position:absolute;top:50%;transform:translateY(-50%)}.choice-grid{gap:12px;display:grid}.choice-grid--2{grid-template-columns:repeat(2,1fr)}.choice-grid--1{grid-template-columns:1fr}.choice{text-align:center;background:#fff;border:2px solid #e3ded4;border-radius:14px;justify-content:center;align-items:center;min-height:88px;padding:16px 12px;font-size:18px;font-weight:700;display:flex}.choice--selected{color:#0a4437;background:#e6f1ee;border-color:#0f5c4a}.choice--compact{min-height:52px;padding:8px;font-size:16px}.number-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.filter-tabs{gap:8px;margin-bottom:16px;display:flex}.filter-tabs__tab{white-space:nowrap;background:#fff;border:2px solid #e3ded4;border-radius:999px;flex:1;min-height:46px;padding:8px;font-size:14px;font-weight:700}.filter-tabs__tab--active{color:#fff;background:#0f5c4a;border-color:#0f5c4a}.choice--present.choice--selected{color:#1f7a4d;background:#e7f4ec;border-color:#1f7a4d}.choice--absent.choice--selected{color:#b3261e;background:#fbeae9;border-color:#b3261e}.choice--warning.choice--selected{color:#9a6700;background:#fdf4e3;border-color:#9a6700}.card{background:#fff;border:1px solid #e3ded4;border-radius:14px;padding:16px;box-shadow:0 1px 3px #23282a14}.card+.card{margin-top:12px}.student-card{text-align:right;background:#fff;border:2px solid #e3ded4;border-radius:14px;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 16px;display:flex}.student-card+.student-card{margin-top:8px}.student-card__avatar{color:#0a4437;background:#e6f1ee;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:18px;font-weight:700;display:flex}.student-card__body{flex:1;min-width:0;display:block}.student-card__name{text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700;display:block;overflow:hidden}.student-card__meta{color:#6d7476;font-size:14px;display:block}.student-card__check{color:#fff;white-space:nowrap;background:#0f5c4a;border-radius:999px;flex-shrink:0;padding:4px 12px;font-size:14px;font-weight:700}.student-card--selected{background:#e6f1ee;border-color:#0f5c4a}.recitation-card{text-align:right;background:#fff;border:1px solid #e3ded4;border-radius:14px;width:100%;padding:16px;display:block;box-shadow:0 1px 3px #23282a14}.recitation-card+.recitation-card{margin-top:12px}.recitation-card--latest{border:2px solid #0f5c4a}.recitation-card__top{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.recitation-card__date{color:#6d7476;margin-inline-start:auto;font-size:14px}.recitation-card__ranges{flex-direction:column;gap:4px;font-size:18px;font-weight:600;display:flex}.recitation-card__footer{border-top:1px solid #e3ded4;align-items:center;gap:8px;margin-top:12px;padding-top:12px;display:flex}.range-card{background:#e6f1ee;border:1px solid #cce2dc;border-radius:14px;align-items:center;gap:12px;padding:12px 16px;display:flex}.range-card+.range-card{margin-top:8px}.range-card__index{color:#fff;background:#0f5c4a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;font-weight:700;display:flex}.range-card__body{flex:1;min-width:0;display:block}.range-card__surah{font-weight:700;display:block}.range-card__detail{color:#6d7476;font-size:14px;display:block}.range-card__remove{color:#b3261e;background:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;gap:4px;min-width:60px;min-height:44px;padding:0 8px;font-size:14px;font-weight:700;display:flex}.badge{white-space:nowrap;border-radius:999px;align-items:center;gap:4px;padding:4px 12px;font-size:14px;font-weight:700;display:inline-flex}.badge--latest{color:#fff;background:#0f5c4a}.badge--type{color:#0a4437;background:#e6f1ee}.badge--review{color:#2f7d9e;background:#eaf1f5}.badge--muted{color:#6d7476;background:#f7f5f0}.badge--rating-excellent{color:#1f7a4d;background:#1f7a4d1f}.badge--rating-very_good{color:#2f7d9e;background:#2f7d9e1f}.badge--rating-good{color:#9a6700;background:#9a67001f}.badge--rating-needs_review{color:#b3261e;background:#b3261e1f}.summary-row{border-bottom:1px solid #e3ded4;gap:12px;padding:12px 0;display:flex}.summary-row:last-child{border-bottom:none}.summary-row__label{color:#6d7476;flex-shrink:0;min-width:116px}.summary-row__value{flex:1;min-width:0;font-weight:700}.progress-card{color:#fff;background:linear-gradient(135deg,#0f5c4a,#0a4437);border-radius:14px;padding:16px}.progress-card__label{opacity:.85;font-size:14px}.progress-card__value{margin-top:4px;font-size:20px;font-weight:700}.badge--present{color:#1f7a4d;background:#e7f4ec}.badge--absent{color:#b3261e;background:#fbeae9}.badge--warning{color:#9a6700;background:#fdf4e3}.day-summary{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px;display:grid}.day-summary__item{text-align:center;background:#f7f5f0;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;display:flex}.day-summary__value{font-size:24px;font-weight:700;line-height:1}.day-summary__value--present{color:#1f7a4d}.day-summary__value--absent{color:#b3261e}.day-summary__value--achieved{color:#0f5c4a}.day-summary__value--warning{color:#9a6700}.day-summary__label{color:#6d7476;font-size:12px;line-height:1.3}.attendance-row{background:#fff;border:1px solid #e3ded4;border-radius:14px;align-items:center;gap:8px;padding:8px 12px;display:flex}.attendance-row+.attendance-row{margin-top:8px}.attendance-row__student{text-align:right;flex:1;align-items:center;gap:8px;min-width:0;min-height:56px;display:flex}.attendance-row__body{flex-direction:column;align-items:flex-start;gap:4px;min-width:0;display:flex}.attendance-row__name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-weight:700;overflow:hidden}.attendance-row__actions{flex-shrink:0;gap:4px;display:flex}.attendance-row__locked{color:#0a4437;background:#e6f1ee;border-radius:999px;flex-shrink:0;padding:4px 12px;font-size:14px;font-weight:700}.pill{color:#6d7476;background:#fff;border:2px solid #e3ded4;border-radius:14px;min-width:62px;min-height:48px;padding:0 8px;font-size:14px;font-weight:700}.pill--present.pill--on{color:#fff;background:#1f7a4d;border-color:#1f7a4d}.pill--absent.pill--on{color:#fff;background:#b3261e;border-color:#b3261e}.reason-option{text-align:right;background:#fff;border:2px solid #e3ded4;border-radius:14px;width:100%;min-height:52px;padding:12px;font-size:16px;font-weight:600;display:block}.reason-option--selected{color:#0a4437;background:#e6f1ee;border-color:#0f5c4a;font-weight:700}.timeline-note{color:#6d7476;margin-top:8px;font-size:14px;line-height:1.6}.recitation-card--static{cursor:default}.student-line{color:#0a4437;background:#e6f1ee;border-radius:14px;margin-bottom:16px;padding:8px 12px;font-size:16px}.sheet{z-index:100;flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}.sheet__backdrop{background:#14181a73;position:absolute;inset:0}.sheet__panel{background:#f7f5f0;border-radius:20px 20px 0 0;flex-direction:column;width:100%;max-width:620px;max-height:88dvh;margin:0 auto;animation:.22s ease-out sheet-up;display:flex;position:relative;box-shadow:0 -6px 24px #23282a24}.sheet__handle{background:#cfc7b8;border-radius:999px;flex-shrink:0;width:44px;height:5px;margin:8px auto 4px}.sheet__header{flex-shrink:0;align-items:center;gap:8px;padding:8px 16px;display:flex}.sheet__title{flex:1;font-size:18px;font-weight:700}.sheet__close{color:#6d7476;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;margin-inline-end:-8px;font-size:20px;display:flex}.sheet__search{flex-shrink:0;padding:0 16px 8px}.sheet__body{-webkit-overflow-scrolling:touch;padding:0 16px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));flex:1;overflow-y:auto}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-option{text-align:right;background:#fff;border:1px solid #e3ded4;border-radius:14px;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px;display:flex}.sheet-option+.sheet-option{margin-top:8px}.sheet-option__number{color:#6d7476;background:#f7f5f0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:flex}.sheet-option__name{flex:1;font-size:18px;font-weight:700}.sheet-option__meta{color:#6d7476;font-size:14px}.sheet-option--selected{background:#e6f1ee;border-color:#0f5c4a}.sheet-option--selected .sheet-option__number{color:#fff;background:#0f5c4a}.picker-button{text-align:right;background:#fff;border:2px solid #cfc7b8;border-radius:14px;align-items:center;gap:8px;width:100%;min-height:52px;padding:12px;font-size:18px;display:flex}.picker-button__value{flex:1;font-weight:700}.picker-button__placeholder{color:#6d7476;flex:1;font-weight:400}.picker-button__arrow{color:#6d7476;flex-shrink:0}.picker-button--filled{border-color:#0f5c4a}@media (width<=360px){.page{padding-inline:12px}.page-header__back{padding-inline:8px}.page-header__title{font-size:16px}.big-action{min-height:92px;padding:16px 12px}.big-action__label{font-size:18px}.student-card__check{padding:4px 8px}.number-grid{grid-template-columns:repeat(3,1fr)}.choice{min-height:76px;font-size:16px}}@media (width>=640px){.page{padding:24px}.bottom-nav{border-inline:1px solid #e3ded4;border-radius:20px 20px 0 0;max-width:620px;margin:0 auto}.page-header{justify-content:center}.page-header__title{max-width:620px;margin:0 auto}}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}