/* Material Web 2.5.0; existing layout and palette are intentionally retained. */
:root {
  --md-sys-color-primary: var(--primary);
  --md-sys-color-on-primary: var(--on-primary);
  --md-sys-color-primary-container: var(--primary-container);
  --md-sys-color-on-primary-container: var(--on-primary-container);
  --md-sys-color-secondary-container: var(--primary-container);
  --md-sys-color-on-secondary-container: var(--on-primary-container);
  --md-sys-color-surface: var(--surface);
  --md-sys-color-surface-container: var(--surface);
  --md-sys-color-surface-container-high: var(--surface);
  --md-sys-color-surface-container-low: var(--surface-2);
  --md-sys-color-on-surface: var(--ink);
  --md-sys-color-on-surface-variant: var(--ink-2);
  --md-sys-color-outline: var(--outline-strong);
  --md-sys-color-outline-variant: var(--outline-soft);
  --md-sys-color-error: var(--danger);
  --md-ref-typeface-plain: var(--font);
  --md-ref-typeface-brand: var(--font);
}
md-filled-button.btn, md-filled-tonal-button.btn, md-outlined-button.btn, md-text-button.btn {
  padding: 0 24px; background: transparent; border: 0; box-shadow: none;
  color: inherit; transform: none; letter-spacing: normal;
  flex-shrink: 0;
  --md-filled-button-container-height: 40px;
  --md-filled-tonal-button-container-height: 40px;
  --md-outlined-button-container-height: 40px;
  --md-text-button-container-height: 40px;
}
md-text-button.btn { padding: 0 12px; }
.sheet-actions { flex-wrap: wrap; }
md-text-button.btn-danger { --md-text-button-label-text-color: var(--danger); }
md-icon-button.icon-btn, md-icon-button.step-btn {
  padding: 0; background: transparent; color: inherit;
  --md-icon-button-state-layer-height: 48px; --md-icon-button-state-layer-width: 48px;
  --md-icon-button-icon-color: var(--ink-2);
}
md-icon-button .ic { width: 24px; height: 24px; }
md-icon-button.step-btn { --md-icon-button-state-layer-height: 56px; --md-icon-button-state-layer-width: 56px; background: var(--surface-2); }
md-fab.fab { padding: 0; margin: 0; box-shadow: none; background: transparent; --md-fab-container-color: var(--primary-container); --md-fab-icon-color: var(--on-primary-container); --md-fab-label-text-color: var(--on-primary-container); }
md-fab.reader-fab { width:56px; height:56px; --md-fab-container-color:var(--accent-container); --md-fab-icon-color:var(--on-accent-container); --md-fab-container-shape:16px; }
md-outlined-text-field.input {
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  min-width: 0; --md-outlined-text-field-container-shape: 12px;
}
md-outlined-text-field.input:focus { border: 0; box-shadow: none; }
.stepper md-outlined-text-field.input { --md-outlined-text-field-input-text-size: 2rem; --md-outlined-text-field-input-text-line-height: 2.5rem; }
md-chip-set.chips { flex-wrap: nowrap; }
md-filter-chip.chip { padding: 0; border: 0; background: transparent; color: inherit; height: auto; }
.sheet-quick { display: flex; justify-content: center; }
.child-choice { display: inline-flex; align-items: center; flex: none; gap: 4px; min-height: 44px; padding: 0 10px 0 4px; border-radius: 8px; font-size: .875rem; }
.child-choice.selected { background: var(--primary-container); }
.segmented .seg { cursor: pointer; gap: 4px; padding: 0 6px; }
.segmented .seg.selected { background: var(--primary-container); }
md-radio { flex: none; }
md-dialog.dlg { width: min(calc(100vw - 48px), 360px); margin: auto; background: transparent; box-shadow: none; border-radius: 20px; --md-dialog-container-shape: 20px; }
md-dialog.dlg p { margin: 0; }
md-dialog.dlg .input { width: 100%; }
md-dialog.dlg .field-error { margin-top: 8px; }
md-dialog.dlg md-text-button.btn-danger { padding: 0; }
md-dialog.dlg {
  --md-dialog-container-shape:20px;
  --md-dialog-headline-size:1.125rem; --md-dialog-headline-line-height:1.5rem; --md-dialog-headline-weight:600;
  --md-dialog-headline-color:var(--primary);
  --md-dialog-supporting-text-size:.875rem; --md-dialog-supporting-text-line-height:1.25rem;
}
md-dialog.dlg > [slot="headline"] { padding:20px 20px 0; }
md-dialog.dlg > [slot="content"] { padding:16px 20px 8px; }
md-dialog.dlg > [slot="actions"] { padding:12px 16px 16px; flex-wrap:wrap; }
md-dialog.dlg [slot="actions"] md-text-button { min-height:48px; --md-text-button-container-height:48px; }
md-dialog.share-report-dialog > [slot="headline"]{padding:24px 24px 0}
md-dialog.share-report-dialog > [slot="content"]{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:20px 24px 4px;min-width:0}
md-dialog.share-report-dialog .input{min-width:0;max-width:100%}
md-dialog.share-report-dialog > [slot="actions"]{padding:16px 24px 24px;gap:8px}
.share-report-dialog .share-description{overflow-wrap:anywhere}
.share-report-dialog .share-expiry{color:var(--ink-3)}
md-dialog.dlg.member-dialog{width:min(calc(100vw - 32px),420px);max-height:calc(100dvh - 32px)}
md-dialog.dlg.member-dialog>[slot="headline"]{padding:24px 24px 0}
md-dialog.dlg.member-dialog>.member-form{display:grid;gap:24px;align-content:start;padding:24px}
.member-name-field{padding-bottom:20px}
.target-juz-field{border:0;margin:0;padding:0;min-width:0}
.target-juz-field legend{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;margin-bottom:8px;font-size:.875rem;font-weight:500;color:var(--primary)}
.target-juz-field legend>span{min-width:0;overflow-wrap:anywhere}
.target-juz-all{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 1 auto;max-width:50%;min-height:44px;padding:0 2px;color:var(--primary);font-size:.75rem;font-weight:500;cursor:pointer}
.target-juz-all input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--primary);cursor:pointer}
.target-juz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3rem,1fr));gap:12px;max-height:min(40dvh,24rem);overflow-y:auto;padding:6px;scroll-padding:6px}
.target-juz{position:relative;display:grid;place-items:center;width:3rem;height:3rem;padding:0;border-radius:50%;background:transparent;color:var(--primary)}
.target-juz .ayah-num{color:inherit;pointer-events:none}
.target-juz .ayah-number{position:relative}
.target-juz:hover .ayah-marker circle{fill:var(--primary-container);opacity:1}
.target-juz[aria-pressed="true"] .ayah-marker circle{fill:var(--primary);opacity:1}
.target-juz[aria-pressed="true"] .ayah-number{color:var(--on-primary)}
md-menu.profile-menu {
  min-width:208px; max-width:calc(100vw - 32px);
  --md-menu-container-color:var(--surface); --md-menu-container-shape:12px;
}
.profile-menu md-menu-item {
  --md-menu-item-one-line-container-height:48px;
  --md-menu-item-label-text-size:.875rem; --md-menu-item-label-text-line-height:1.25rem;
  --md-menu-item-label-text-color:var(--primary); --md-menu-item-leading-icon-color:var(--primary);
}
.profile-menu md-menu-item .ic { width:20px; height:20px; }
.profile-menu md-menu-item.menu-danger { --md-menu-item-label-text-color:var(--danger); --md-menu-item-leading-icon-color:var(--danger); }

md-radio:focus-visible { outline: none; }
/* Official multicolor Google G remains unmodified; OAuth is not enabled yet. */
.onb-form md-filled-button.google-signin{border:1px solid #747775;background:#FFF;border-radius:28px;min-height:48px;font-family:'Google Sans',Roboto,'Segoe UI',sans-serif;
 --md-filled-button-container-color:#FFF;--md-filled-button-disabled-container-color:#FFF;--md-filled-button-disabled-container-opacity:1;
 --md-filled-button-label-text-color:#1F1F1F;--md-filled-button-disabled-label-text-color:#5F6368;--md-filled-button-disabled-label-text-opacity:1;
 --md-filled-button-disabled-icon-opacity:1;--md-filled-button-icon-size:20px;--md-filled-button-label-text-size:14px;--md-filled-button-label-text-weight:500}
.google-signin img{width:20px;height:20px;object-fit:contain;flex:none}

.pwa-install-actions md-text-button{--md-text-button-label-text-color:var(--accent-container);--md-text-button-container-height:48px;--md-text-button-label-text-size:.875rem;--md-text-button-leading-space:8px;--md-text-button-trailing-space:8px;min-height:48px}
.pwa-install-actions{--md-focus-ring-color:var(--accent-container)}
.pwa-install-actions md-icon-button{--md-icon-button-icon-color:var(--on-primary);--md-icon-button-state-layer-color:var(--on-primary);--md-icon-button-state-layer-height:48px;--md-icon-button-state-layer-width:48px;min-width:48px;min-height:48px}