:root {
    --quran-arabic-font: 'Noto Sans Arabic', sans-serif;
    /* Common container pattern */
    --container-max-width: 600px;
    --container-margin: 0 auto;
    --keyboard-inset-bottom: 0px;
    --quran-search-dock-height: 60px;
    --quran-layout-inline-pad: 20px;
    --quran-layout-max-width: 600px;
    --quran-search-fab-gap: 25px;
    --quran-search-fab-tab-bar-offset: 56px;
    --quran-progress-accent: #5da9ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #f2f2f7;
    color: #000;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    min-height: 100vh;
}

/* Top overlay: hidden by default so content can scroll through notch/Dynamic Island.
   Shown when body has safe-area-opaque (Quran, Zakat, Analytics pages) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: inherit;
    z-index: 100;
    pointer-events: none;
}

/* Block content from scrolling into notch/Dynamic Island - Quran, Zakat, Analytics pages */
body.surah-view-active::before,
body.safe-area-opaque::before {
    height: env(safe-area-inset-top, 0px);
}

body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: inherit;
    z-index: 100;
    pointer-events: none;
}
  
/* Tab Content */
.tab-content {
    display: none;
    padding: 20px;
    animation: fadeIn 0.3s ease-in;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common Container Pattern - reusable for centered containers */
.container-centered,
.prayer-times-container,
.qibla-container,
.settings-container {
    max-width: var(--container-max-width);
    margin: var(--container-margin);
}

/* Settings list: non-selectable rows and controls (inputs/selects stay editable) */
#settings-container,
#settings-container *:not(input):not(select):not(textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#settings-container {
    -webkit-tap-highlight-color: transparent;
}

#settings-container button,
#settings-container .settings-toggle-item,
#settings-container .settings-welcome-card,
#settings-container .ramadan-card-header {
    touch-action: manipulation;
}

/* Back controls (overlays, surah reader, onboarding, account) */
.back-button,
.zakat-back-button,
.analytics-back-button,
.about-back-button,
.onboarding-btn-back {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Swipe viewport for animated day navigation */
.prayer-times-swipe-viewport {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
    position: relative;
}
.prayer-times-swipe-underneath {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background: #f2f2f7;
    transform: none;
    transition: opacity 0.06s ease-out;
}
html.dark-theme .prayer-times-swipe-underneath {
    background: #000;
}
.prayer-times-swipe-underneath .underneath-card {
    width: 100%;
}
.prayer-times-swipe-underneath .date-nav-placeholder {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid #e5e5ea;
    background: #fff;
}
#underneath-ring {
    width: 100%;
    /* No margin-bottom: matches main card for consistent spacing during swipe */
}
.prayer-times-swipe-track {
    position: relative;
    z-index: 1;
    width: 100%;
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
}
.prayer-times-swipe-track.swipe-dragging {
    transition: none;
}
.prayer-times-swipe-card {
    width: 100%;
    background: #f2f2f7;
}
html.dark-theme .prayer-times-swipe-card {
    background: #000;
}

.date-location-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 20px;
    width: 100%;
}

.date-location-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.date-location-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.date-nav-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e5e5ea;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.date-location-card .location-header {
    background: transparent;
    padding: 0;
    box-shadow: none;
    min-height: 0;
    height: auto;
    max-width: 100%;
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
}

.date-location-card .location-coordinates {
    display: none;
}

.date-location-card .date-stamp {
    padding: 0;
    line-height: normal;
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0;
}

.date-location-card .date-gregorian-line {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    line-height: 1.25;
}

.date-location-card .date-hijri-line {
    font-size: 14px;
    font-weight: 400;
    color: #8e8e93;
    line-height: 1.3;
}

html.dark-theme .date-location-card .date-gregorian-line {
    color: #fff;
}

html.dark-theme .date-location-card .date-hijri-line {
    color: rgba(255, 255, 255, 0.55);
}

.date-location-card .location-value,
.date-location-card .location-coordinates {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: left;
}

.date-location-card .location-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #007aff;
    margin-bottom: 0;
}

html.dark-theme .date-location-card .location-value {
    color: #0a84ff;
}

.date-location-card .location-value .location-icon {
    width: 16px;
    height: 16px;
}

.location-type-inline {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 1px;
}

.ramadan-card {
    margin-top: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.ramadan-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}


.ramadan-card-title {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.ramadan-card-title-ar {
    font-size: 17px;
    font-weight: 600;
    margin-left: 6px;
    color: #000;
    font-family: var(--quran-arabic-font);
}

.ramadan-card-chevron {
    font-size: 18px;
    color: #8e8e93;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.ramadan-card.collapsed .ramadan-card-chevron {
    transform: rotate(90deg);
}

.ramadan-card-content {
    overflow: hidden;
    height: 0;
    transition: height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.ramadan-card-content.ramadan-card-content--animating {
    will-change: height;
}

.ramadan-card-content-inner {
    overflow: hidden;
    border-top: 1px solid #e5e5ea;
    transition: opacity 0.22s ease;
}

.ramadan-card.collapsed .ramadan-card-content-inner {
    opacity: 0;
}

html.dark-theme .ramadan-card-content-inner {
    border-top-color: #2c2c2e;
}

@media (prefers-reduced-motion: reduce) {
    .ramadan-card-content {
        transition: none;
    }

    .ramadan-card-content-inner {
        transition: none;
    }

    .ramadan-card-chevron {
        transition: none;
    }
}

.ramadan-table-scroll {
    max-height: 280px;
    overflow-y: auto;
}

.ramadan-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.ramadan-table thead th,
.quran-surah-table-head .quran-surah-table-cell {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    line-height: 1.2;
    white-space: nowrap;
}

.ramadan-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fafafa;
    padding: 13px 18px;
    box-shadow: 0 1px 0 0 #e5e5ea;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.ramadan-table thead th .ramadan-cell-ar,
.quran-surah-table-head .ramadan-cell-ar {
    font-size: 11px;
    margin-left: 3px;
}

html.dark-theme .ramadan-table thead th,
html.dark-theme .quran-surah-table-head {
    background: #2c2c2e;
    border-bottom-color: #38383a;
    color: #8e8e93;
}

html.dark-theme .ramadan-table thead th {
    box-shadow: 0 1px 0 0 #38383a;
}

html.dark-theme .ramadan-table td {
    border-bottom-color: #2c2c2e;
}

.ramadan-table th,
.ramadan-table td {
    padding: 13px 18px;
    text-align: left;
    border-bottom: 1px solid #e5e5ea;
}

.ramadan-table tbody tr:last-child td {
    border-bottom: none;
}

.ramadan-table .ramadan-cell:nth-child(1) {
    width: 40%;
}

.ramadan-table .ramadan-cell:nth-child(2),
.ramadan-table .ramadan-cell:nth-child(3) {
    width: 30%;
}

.ramadan-cell {
    font-size: 15px;
    color: #000;
}

.ramadan-table tbody .ramadan-cell {
    white-space: nowrap;
}

.ramadan-cell-ar {
    font-size: 13px;
    font-weight: 500;
    color: #8e8e93;
    margin-left: 4px;
    font-family: var(--quran-arabic-font);
}

.ramadan-day {
    font-weight: 500;
}

.ramadan-time {
    font-weight: 600;
    color: #007aff;
}

.ramadan-empty {
    grid-column: 1 / -1;
    color: #8e8e93;
}

.ramadan-load-more {
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: transparent;
    color: #007aff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-top: 1px solid #e5e5ea;
}

html.dark-theme .ramadan-load-more {
    color: #0a84ff;
    border-color: #2c2c2e;
}

html.dark-theme .ramadan-card {
    background: #1c1c1e;
}

html.dark-theme .ramadan-card-title,
html.dark-theme .ramadan-card-title-ar {
    color: #fff;
}

html.dark-theme .ramadan-row {
    border-color: #2c2c2e;
}

.zakat-page {
    display: none;
    margin-top: 0px;
}

#prayer-times.zakat-overlay-active {
    position: relative;
}

#prayer-times.zakat-overlay-active .zakat-page {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: auto;
    background: #f2f2f7;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.dark-theme #prayer-times.zakat-overlay-active .zakat-page {
    background: #000;
}

#prayer-times.zakat-overlay-active .prayer-times-container {
    display: none !important;
}

/* Analytics overlay (same pattern as Zakat) */
#prayer-times.analytics-overlay-active {
    position: relative;
}

#prayer-times.analytics-overlay-active .analytics-page,
body.app-analytics-overlay-active #analytics {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    overflow: auto;
    background: #f2f2f7;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.dark-theme #prayer-times.analytics-overlay-active .analytics-page,
html.dark-theme body.app-analytics-overlay-active #analytics {
    background: #000;
}

#prayer-times.analytics-overlay-active .prayer-times-container {
    display: none !important;
}

/* Analytics Explanation overlay */
#prayer-times.analytics-explanation-overlay-active {
    position: relative;
}

#prayer-times.analytics-explanation-overlay-active #analytics-explanation-page {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: auto;
    background: #f2f2f7;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.dark-theme #prayer-times.analytics-explanation-overlay-active #analytics-explanation-page {
    background: #000;
}

#prayer-times.analytics-explanation-overlay-active .prayer-times-container,
#prayer-times.analytics-explanation-overlay-active .analytics-page {
    display: none !important;
}

/* Streaks Explanation overlay (same pattern as Analytics Explanation) */
#prayer-times.streaks-explanation-overlay-active {
    position: relative;
}

#prayer-times.streaks-explanation-overlay-active #streaks-explanation-page {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: auto;
    background: #f2f2f7;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.dark-theme #prayer-times.streaks-explanation-overlay-active #streaks-explanation-page {
    background: #000;
}

#prayer-times.streaks-explanation-overlay-active .prayer-times-container,
#prayer-times.streaks-explanation-overlay-active .analytics-page {
    display: none !important;
}

/* About overlay (Settings tab) */
.about-page,
#analytics-explanation-page,
#streaks-explanation-page,
.account-settings-page {
    display: none;
    min-height: 100vh;
    background: #f2f2f7;
}

#settings.about-overlay-active {
    position: relative;
}

#settings.about-overlay-active #about-page {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: auto;
    background: #f2f2f7;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.dark-theme #settings.about-overlay-active #about-page {
    background: #000;
}

#settings.about-overlay-active .settings-container {
    display: none !important;
}

/* Account Settings overlay (same pattern as About) */
#settings.account-settings-overlay-active {
    position: relative;
}

#settings.account-settings-overlay-active .account-settings-page {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: auto;
    background: #f2f2f7;
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.dark-theme #settings.account-settings-overlay-active .account-settings-page {
    background: #000;
}

#settings.account-settings-overlay-active .settings-container {
    display: none !important;
}

html.dark-theme .about-page,
html.dark-theme #analytics-explanation-page,
html.dark-theme #streaks-explanation-page,
html.dark-theme .account-settings-page {
    background: #000;
}

.about-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 0 24px;
}

.about-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
}

.about-back-button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.about-back-button .theme-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.about-back-button .theme-icon.dark {
    display: none;
}

html.dark-theme .about-back-button .theme-icon.light {
    display: none;
}

html.dark-theme .about-back-button .theme-icon.dark {
    display: block;
}

.about-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

html.dark-theme .about-title {
    color: #fff;
}

.about-content-card {
    margin-top: 8px;
}

.about-content-card .zakat-card-content {
    border-top: none;
    padding: 20px;
}

.about-content-card .zakat-card-content p {
    margin: 0 0 12px;
}

.about-content-card .zakat-card-content p:has(> strong:only-child) strong {
    font-size: calc(1em + 3px);
}

.about-content-divider {
    height: 1px;
    background: #e5e5ea;
    margin: 16px 0;
}

html.dark-theme .about-content-divider {
    background: #2c2c2e;
}

.about-content-muted {
    color: #8e8e93;
}

html.dark-theme .about-content-muted {
    color: rgba(255, 255, 255, 0.6);
}

.about-content-card .zakat-card-content p:last-child {
    margin-bottom: 0;
}

.about-content-card .about-feature-list ul.zakat-list {
    margin-top: 6px;
    margin-bottom: 4px;
}

.about-card {
    margin-top: 16px;
    margin-bottom: 20px;
}

.settings-account-group {
    margin-top: 12px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

html.dark-theme .settings-account-group {
    background: #1c1c1e;
}

.settings-account-group .settings-welcome-card {
    padding: 16px 20px;
}

#settings-container .settings-account-group .settings-welcome-card {
    cursor: pointer;
}

.settings-account-group-divider {
    height: 1px;
    background: #e5e5ea;
    margin: 0 20px;
}

html.dark-theme .settings-account-group-divider {
    background: #2c2c2e;
}

#settings-container .settings-account-group .about-card,
#settings-container .settings-account-group .settings-premium-card {
    margin: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

html.dark-theme .settings-account-group .about-card,
html.dark-theme .settings-account-group .settings-premium-card {
    background: transparent;
}

.settings-premium-card-label {
    flex: 1;
    min-width: 0;
}

.settings-premium-status {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #34c759;
}

html.dark-theme .settings-premium-status {
    color: #30d158;
}

.settings-premium-card:not(.settings-premium-card--subscribed) .ramadan-card-chevron {
    transform: none;
}

.settings-premium-card--subscribed.collapsed .ramadan-card-chevron {
    transform: rotate(90deg);
}

.settings-premium-card-content {
    overflow: hidden;
    height: 0;
    transition: height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.settings-premium-card-content.settings-premium-card-content--animating {
    will-change: height;
}

.settings-premium-card-content-inner {
    overflow: hidden;
    border-top: 1px solid #e5e5ea;
    transition: opacity 0.22s ease;
}

.settings-premium-card.collapsed .settings-premium-card-content-inner {
    opacity: 0;
}

html.dark-theme .settings-premium-card-content-inner {
    border-top-color: #2c2c2e;
}

.settings-premium-action {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-bottom: 1px solid #e5e5ea;
    background: transparent;
    color: #007aff;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.settings-premium-action:last-child {
    border-bottom: none;
}

.settings-premium-action:active {
    opacity: 0.65;
}

html.dark-theme .settings-premium-action {
    color: #0a84ff;
    border-bottom-color: #2c2c2e;
}

@media (prefers-reduced-motion: reduce) {
    .settings-premium-card-content,
    .settings-premium-card-content-inner,
    .settings-premium-card .ramadan-card-chevron {
        transition: none;
    }
}

.settings-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Surah reader sticky headers (main tabs use .tab-fixed-header) */
.page-sticky-sentinel {
    height: 1px;
}

.page-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f2f2f7;
    padding: 6px 0;
    margin-bottom: 4px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
    transition: padding 0.1s ease, margin-bottom 0.1s ease;
}

.page-sticky.is-sticky {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 0;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(242, 242, 247, 1) 0%, rgba(242, 242, 247, 0.7) 70%, rgba(242, 242, 247, 0) 100%);
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 30px;
}

.page-sticky.is-sticky .page-sticky-title {
    font-size: 20px;
    padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    margin-bottom: 0;
    text-align: center;
}

html.dark-theme .page-sticky {
    background: #000;
}

html.dark-theme .page-sticky.is-sticky {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
}

.settings-welcome-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 16px 10px;
    background: transparent;
}

.settings-welcome-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    min-width: 56px;
    flex-shrink: 0;
}

.settings-welcome-avatar-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5ea;
}

.settings-welcome-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-welcome-avatar-premium-badge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #34c759;
    border: 2px solid #34c759;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

.settings-welcome-avatar-premium-badge[hidden] {
    display: none !important;
}

.settings-welcome-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-welcome-text {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
}

.settings-welcome-greeting {
    font-size: 14px;
    font-weight: 500;
    color: #8e8e93;
    margin: 0;
    font-family: var(--quran-arabic-font), 'Amiri', serif;
}

html.dark-theme .settings-welcome-avatar-photo {
    background: #38383a;
}

html.dark-theme .settings-welcome-text {
    color: #fff;
}

html.dark-theme .settings-welcome-greeting {
    color: rgba(255, 255, 255, 0.5);
}

.settings-account-btn {
    margin-left: auto;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.settings-account-btn .ramadan-card-chevron {
    font-size: 18px;
    color: #8e8e93;
}

html.dark-theme .settings-account-btn .ramadan-card-chevron {
    color: #8e8e93;
}

/* Account Settings Page */
.account-settings-container .account-settings-form-card {
    margin-top: 16px;
}

.account-settings-form-divider {
    height: 1px;
    background: #e5e5ea;
    margin: 16px 0 20px;
}

html.dark-theme .account-settings-form-divider {
    background: #2c2c2e;
}

.account-settings-form-card .account-settings-welcome {
    padding: 0;
}

.account-settings-avatar-wrap {
    position: relative;
}

.account-settings-avatar {
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5ea;
}

html.dark-theme .account-settings-avatar {
    background: #38383a;
}

.account-settings-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.2s;
}

.account-settings-avatar:hover::after,
.account-settings-avatar:active::after {
    opacity: 1;
}

.account-settings-form-card .zakat-card-content {
    padding: 20px;
}

.account-settings-field {
    margin-bottom: 16px;
}

.account-settings-field:last-of-type {
    margin-bottom: 20px;
}

.account-settings-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #8e8e93;
    margin-bottom: 6px;
}

html.dark-theme .account-settings-field label {
    color: rgba(255, 255, 255, 0.6);
}

.account-settings-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    background: #fff;
    color: #000;
    box-sizing: border-box;
}

html.dark-theme .account-settings-input {
    border-color: #38383a;
    background: #1c1c1e;
    color: #fff;
}

/* iOS / WebKit: type="date" uses inner datetime segments; default padding/line-height clips or stacks them poorly */
.account-settings-input[type="date"] {
    min-height: 48px;
    line-height: 1.25;
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
}

.account-settings-input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
}

.account-settings-input[type="date"]::-webkit-datetime-edit {
    text-align: left;
}

.account-settings-input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 2px 0;
}

.account-settings-input[type="date"]::-webkit-datetime-edit-text {
    padding: 0 0.25em;
}

.account-settings-input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    margin-inline-start: 4px;
}

html.dark-theme .account-settings-input[type="date"] {
    color-scheme: dark;
    -webkit-text-fill-color: #fff;
}

html.dark-theme .account-settings-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.75;
}

/* Same surface as Zakat/Quran pill Add (see .zakat-payment-add-btn) */
.account-settings-pill-btn {
    width: 100%;
}

.account-settings-save-btn {
    margin-top: 4px;
}

.account-manage-section {
    margin-top: 24px;
    padding-bottom: 32px;
}

.account-manage-card {
    background: #f2f2f7;
    border-radius: 12px;
    padding: 16px 20px;
}

html.dark-theme .account-manage-card {
    background: #1c1c1e;
}

.account-manage-header {
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    margin-bottom: 8px;
}

.account-manage-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zakat-payment-add-btn.account-settings-delete-account-btn {
    color: #ff3b30;
}

.zakat-payment-add-btn.account-settings-delete-account-btn:hover {
    border-color: rgba(255, 59, 48, 0.35);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(255, 59, 48, 0.12);
}

html.dark-theme .zakat-payment-add-btn.account-settings-delete-account-btn {
    color: #ff453a;
}

html.dark-theme .zakat-payment-add-btn.account-settings-delete-account-btn:hover {
    border-color: rgba(255, 69, 58, 0.4);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(255, 69, 58, 0.14);
}

/* Delete account confirmation modal */
.delete-account-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
}

.delete-account-modal {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.delete-account-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
    line-height: 1.3;
}

.delete-account-modal-message {
    font-size: 15px;
    color: #8e8e93;
    line-height: 1.5;
    margin-bottom: 24px;
}

.delete-account-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.delete-account-modal-btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.delete-account-modal-btn-cancel {
    background: #f2f2f7;
    color: #000;
}

.delete-account-modal-btn-confirm {
    background: #c62828;
    color: #fff;
}

html.dark-theme .delete-account-modal {
    background: #1c1c1e;
}

html.dark-theme .delete-account-modal-title {
    color: #fff;
}

html.dark-theme .delete-account-modal-btn-cancel {
    background: #2c2c2e;
    color: #fff;
}

html.dark-theme .delete-account-modal-btn-confirm {
    background: #c62828;
    color: #fff;
}

#settings-container .about-card {
    margin-top: 12px;
}

#settings-container .about-card .ramadan-card-title {
    font-weight: 400;
}

#settings-container .about-card .about-card-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#settings-container .about-card .about-card-icon,
#settings-container .settings-premium-card .settings-premium-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

#settings-container .settings-premium-card .ramadan-card-title {
    font-weight: 400;
}

.zakat-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 0 24px;
}

.zakat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 0;
}

.zakat-info-toggle {
    margin-left: auto;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zakat-info-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.zakat-dollar-toggle {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zakat-dollar-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.zakat-back-button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.zakat-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.zakat-title-ar {
    font-family: var(--quran-arabic-font);
    margin-left: 6px;
    color: #000;
    font-weight: 600;
}

html.dark-theme .zakat-title,
html.dark-theme .zakat-title-ar {
    color: #fff;
}

.zakat-card {
    margin-top: 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.zakat-container > .zakat-card:first-of-type {
    margin-top: 0px;
}

/* Prayer page: Zakat card uses same gap as Ramadan card for consistency */
.prayer-times-container .ramadan-card.zakat-card {
    margin-top: 20px;
}

.zakat-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.zakat-card-chevron {
    font-size: 18px;
    color: #8e8e93;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#zakat-understand-card.collapsed .zakat-card-chevron {
    transform: rotate(90deg);
}

.zakat-understand-card-content {
    overflow: hidden;
    height: 0;
    transition: height 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.zakat-understand-card-content.zakat-understand-card-content--animating {
    will-change: height;
}

.zakat-understand-card-content-inner {
    overflow: hidden;
    padding: 0 20px 18px;
    border-top: 1px solid #e5e5ea;
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.6;
    transition: opacity 0.22s ease;
}

#zakat-understand-card.collapsed .zakat-understand-card-content-inner {
    opacity: 0;
}

html.dark-theme .zakat-understand-card-content-inner {
    border-top-color: #2c2c2e;
    color: #d1d1d6;
}

@media (prefers-reduced-motion: reduce) {
    .zakat-understand-card-content {
        transition: none;
    }

    .zakat-understand-card-content-inner {
        transition: none;
    }

    #zakat-understand-card .zakat-card-chevron {
        transition: none;
    }
}

.zakat-card-content {
    padding: 0 20px 18px;
    border-top: 1px solid #e5e5ea;
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.6;
}

.zakat-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 16px 0 6px;
}

.zakat-list {
    margin: 8px 0 12px 18px;
    padding: 0;
}

.zakat-list li {
    margin: 6px 0;
}

html.dark-theme .zakat-card {
    background: #1c1c1e;
}

html.dark-theme .zakat-card-header {
    color: #fff;
}

html.dark-theme .zakat-card-content {
    border-color: #2c2c2e;
    color: #d1d1d6;
}

html.dark-theme .zakat-section-title {
    color: #fff;
}


.zakat-prices-header {
    align-items: baseline;
}

.zakat-currency-header {
    align-items: center;
}

.zakat-prices-controls,
.zakat-currency-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.zakat-prices-subtitle {
    font-size: 12px;
    color: #8e8e93;
    font-weight: 500;
}

.zakat-prices-currency {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #e5e5ea;
    background: #fff;
    color: #3a3a3c;
}

.zakat-prices-content {
    padding-top: 12px;
}

.zakat-prices-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.zakat-price-item {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 12px;
}

.zakat-price-label {
    font-size: 20px;
    color: #8e8e93;
    font-weight: 600;
}

.zakat-price-ar {
    font-family: var(--quran-arabic-font);
    margin-left: 4px;
    color: #8e8e93;
    font-weight: 500;
}

.zakat-price-value {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-top: 6px;
}

.zakat-price-unit {
    font-size: 10px;
    font-weight: 600;
    color: #8e8e93;
    margin-left: 4px;
}

.zakat-price-subvalue {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 2px;
}

.zakat-price-value {
    margin-top: 2px;
}

.zakat-price-timestamp {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 10px;
}

.zakat-prices-loading,
.zakat-prices-error {
    font-size: 13px;
    color: #8e8e93;
}

html.dark-theme .zakat-price-item {
    background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .zakat-price-value {
    color: #fff;
}

html.dark-theme .zakat-price-unit,
html.dark-theme .zakat-price-subvalue {
    color: #8e8e93;
}

html.dark-theme .zakat-prices-currency {
    background: #1c1c1e;
    border-color: #2c2c2e;
    color: #f2f2f7;
}

/* Zakat Calculator */
.zakat-calculator-card {
    padding: 20px;
}

.zakat-calculator-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

html.dark-theme .zakat-calculator-title {
    color: #fff;
}

.zakat-calculator-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.zakat-year-nav-btn,
.zakat-calculator-year-wrap,
.zakat-calculator-year,
.zakat-recalculate-link,
.zakat-payment-add-btn,
.zakat-payment-remove-btn {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.zakat-year-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 2px solid #c7c7cc;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007aff;
    transition: all 0.2s;
}

.zakat-year-nav-btn:hover {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.08);
}

.zakat-calculator-year-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zakat-calculator-year {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.zakat-calculator-check {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #34c759;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
}

.zakat-calculator-check.visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html.dark-theme .zakat-calculator-year {
    color: #fff;
}

html.dark-theme .zakat-year-nav-btn {
    background: #1c1c1e;
    border-color: #38383a;
}

html.dark-theme .zakat-year-nav-btn:hover {
    border-color: #007aff;
}

.zakat-calculator-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.zakat-calculator-header {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

html.dark-theme .zakat-calculator-header {
    color: #fff;
}

.zakat-calculator-date {
    font-size: 12px;
    color: #8e8e93;
}

.zakat-calculator-result {
    margin-bottom: 20px;
}

.zakat-due-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: rgba(0, 122, 255, 0.08);
    border-radius: 12px;
}

.zakat-calculator-result-label {
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zakat-calculator-result-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

.zakat-calculator-result-value {
    font-size: 28px;
    font-weight: 700;
    color: #007aff;
}

.zakat-accept-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #34c759;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.15s;
}

.zakat-accept-btn.visible {
    display: flex;
}

.zakat-accept-btn:hover {
    background: #2db84e;
}

.zakat-accept-btn:active {
    transform: scale(0.95);
}

.zakat-accept-icon {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.zakat-calculator-original-inline {
    font-size: 20px;
    font-weight: 500;
    color: #8e8e93;
}

.zakat-progress-wrap {
    display: none;
    width: 100%;
    margin-top: 10px;
}

.zakat-progress-wrap.visible {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.zakat-progress-bar {
    width: 100%;
    height: 4px;
    background: #3a3a3c;
    border-radius: 2px;
    overflow: hidden;
}

html.dark-theme .zakat-progress-bar {
    background: #48484a;
}

.zakat-progress-fill {
    height: 100%;
    width: 0%;
    background: #34c759;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.zakat-progress-fill.complete {
    background: #30d158;
}

.zakat-progress-label {
    font-size: 11px;
    color: #8e8e93;
}

html.dark-theme .zakat-accept-btn {
    background: #30d158;
}

html.dark-theme .zakat-accept-btn:hover {
    background: #2db84e;
}

/* Payment section - hidden until accepted */
.zakat-payment-section {
    display: none;
    margin-top: 20px;
}

.zakat-payment-section.visible {
    display: block;
}

.zakat-payment-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.zakat-payment-header {
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

html.dark-theme .zakat-payment-header {
    color: #fff;
}

.zakat-recalculate-link {
    font-size: 13px;
    color: #007aff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.zakat-recalculate-link:hover {
    text-decoration: underline;
}

.zakat-payment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

/* Match Quran search pill surface + accent; keep rectangular shape */
.zakat-payment-add-btn {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.2;
    background: #fff;
    color: #007aff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.zakat-payment-add-btn:hover {
    border-color: rgba(0, 122, 255, 0.35);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(0, 122, 255, 0.12);
}

.zakat-payment-add-btn:active {
    opacity: 0.55;
}

html.dark-theme .zakat-payment-add-btn {
    background: #2c2c2e;
    color: #0a84ff;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

html.dark-theme .zakat-payment-add-btn:hover {
    border-color: rgba(10, 132, 255, 0.4);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(10, 132, 255, 0.14);
}

.zakat-payments-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid #e5e5ea;
}

html.dark-theme .zakat-payments-table-wrap {
    border-color: #2c2c2e;
}

.zakat-payments-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.zakat-payments-table th,
.zakat-payments-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #e5e5ea;
}

html.dark-theme .zakat-payments-table th,
html.dark-theme .zakat-payments-table td {
    border-color: #2c2c2e;
}

.zakat-payments-table th {
    font-weight: 600;
    color: #8e8e93;
    background: rgba(0, 0, 0, 0.02);
}

html.dark-theme .zakat-payments-table th {
    background: rgba(255, 255, 255, 0.04);
}

.zakat-payments-table td {
    color: #3a3a3c;
}

html.dark-theme .zakat-payments-table td {
    color: #d1d1d6;
}

.zakat-payments-table tbody tr:last-child td {
    border-bottom: none;
}

.zakat-payment-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    background: transparent;
    color: #ff3b30;
    border: 1px solid #ff3b30;
    border-radius: 50%;
    cursor: pointer;
}

.zakat-payment-remove-btn:hover {
    background: rgba(255, 59, 48, 0.1);
}

.zakat-payment-date {
    font-size: 10px;
    color: #8e8e93;
}

html.dark-theme .zakat-payment-date {
    color: #8e8e93;
}

/* Zakat History card */
.zakat-history-card {
    padding: 20px;
    overflow-x: auto;
}

.zakat-history-header {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 16px;
    cursor: default;
}

html.dark-theme .zakat-history-header {
    color: #fff;
}

.zakat-history-nav-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: min-content;
}

.zakat-history-nav-wrap .zakat-history-nav-btn {
    flex-shrink: 0;
}

.zakat-history-nav-wrap .zakat-history-nav-btn:disabled {
    cursor: default;
    opacity: 0.4;
}

.zakat-history-nav-wrap .zakat-history-nav-btn:disabled:hover {
    border-color: #c7c7cc;
    background: #fff;
}

html.dark-theme .zakat-history-nav-wrap .zakat-history-nav-btn:disabled:hover {
    border-color: #2c2c2e;
    background: #1c1c1e;
}

.zakat-history-grid {
    flex: 1 1 auto;
    min-width: 200px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-height: 80px;
}

.zakat-history-cell {
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    min-height: 72px;
    min-width: 0;
    overflow: visible;
}

.zakat-history-cell-year {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.zakat-history-cell-amount {
    font-size: 10px;
    line-height: 1.25;
    color: #8e8e93;
    text-align: center;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
}

.zakat-history-cell-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}

.zakat-history-cell-check-placeholder {
    background: transparent;
    border: 2px solid #c7c7cc;
}

.zakat-history-cell.paid .zakat-history-cell-check {
    background: #34c759;
    color: #fff;
    border: none;
}

html.dark-theme .zakat-history-cell-check-placeholder {
    border-color: #48484a;
}

html.dark-theme .zakat-history-cell {
    background: #1c1c1e;
    border-color: #2c2c2e;
}

html.dark-theme .zakat-history-cell-year {
    color: #fff;
}

html.dark-theme .zakat-history-cell-amount {
    color: #8e8e93;
}

html.dark-theme .zakat-history-nav-wrap .zakat-history-nav-btn {
    background: #1c1c1e;
    border-color: #2c2c2e;
}

.zakat-history-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px;
    color: #8e8e93;
    font-size: 14px;
}

@media (max-width: 500px) {
    .zakat-history-card {
        padding: 16px;
    }
}

@media (max-width: 360px) {
    .zakat-history-card {
        padding: 12px;
    }
    .zakat-history-nav-wrap {
        gap: 8px;
    }
    .zakat-history-cell {
        padding: 8px;
    }
}

.zakat-history-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
}

.zakat-history-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 2px solid #c7c7cc;
    background: #fff;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007aff;
    transition: all 0.2s;
}

.zakat-history-nav-btn:hover {
    border-color: #007aff;
    background: rgba(0, 122, 255, 0.08);
}

.zakat-history-year-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zakat-history-year {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.zakat-history-check {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #34c759;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    text-align: center;
}

.zakat-history-check.visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zakat-history-summary {
    font-size: 14px;
    color: #8e8e93;
    margin-bottom: 12px;
}

.zakat-history-payments-wrap {
    margin-bottom: 12px;
}

.zakat-history-payments-table th,
.zakat-history-payments-table td {
    padding: 8px 0;
}

.zakat-amount-positive {
    color: #34c759;
}

.zakat-amount-negative {
    color: #ff3b30;
}

.zakat-payment-muted td {
    opacity: 0.65;
}

.zakat-payment-muted .zakat-amount-positive {
    color: #5a9b6a;
}

.zakat-payment-muted .zakat-amount-negative {
    color: #c94a42;
}

html.dark-theme .zakat-payment-muted td {
    opacity: 0.6;
}

html.dark-theme .zakat-payment-muted .zakat-amount-positive {
    color: #4a7a54;
}

html.dark-theme .zakat-payment-muted .zakat-amount-negative {
    color: #9a4a44;
}

.zakat-excess-in-calc {
    margin-bottom: 12px;
}

.zakat-excess-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid #e5e5ea;
}

.zakat-excess-label {
    font-size: 14px;
    color: #3a3a3c;
}

/* Same surface as Add; slightly smaller type for inline excess row */
.zakat-excess-apply-btn {
    font-size: 14px;
    flex-shrink: 0;
    white-space: nowrap;
    width: auto;
}

html.dark-theme .zakat-history-year {
    color: #fff;
}

html.dark-theme .zakat-history-nav-btn {
    background: #1c1c1e;
    border-color: #38383a;
}

html.dark-theme .zakat-history-nav-btn:hover {
    border-color: #007aff;
}

html.dark-theme .zakat-excess-option {
    border-color: #2c2c2e;
}

html.dark-theme .zakat-excess-label {
    color: #d1d1d6;
}

/* Hide asset sections when accepted */
.zakat-calculator-card.accepted .zakat-calculator-sections {
    display: none;
}

.zakat-calculator-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zakat-calc-section {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 14px 16px;
    opacity: 0.5;
    transition: opacity 0.2s, background 0.2s;
}

.zakat-calc-section.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.04);
}

html.dark-theme .zakat-calc-section {
    background: rgba(255, 255, 255, 0.04);
}

html.dark-theme .zakat-calc-section.active {
    background: rgba(255, 255, 255, 0.08);
}

.zakat-calc-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.zakat-calc-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #007aff;
    cursor: pointer;
}

.zakat-calc-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #3a3a3c;
}

.zakat-calc-section:not(.active) .zakat-calc-section-title {
    color: #8e8e93;
}

html.dark-theme .zakat-calc-section-title {
    color: #d1d1d6;
}

html.dark-theme .zakat-calc-section:not(.active) .zakat-calc-section-title {
    color: #8e8e93;
}

.zakat-calc-hint {
    font-size: 12px;
    font-weight: 500;
    color: #8e8e93;
}

.zakat-calc-input-wrap {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.zakat-gold-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zakat-gold-input-row .zakat-calc-input {
    flex: 1;
    min-width: 0;
}

.zakat-gold-mode-toggle {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e5ea;
    flex-shrink: 0;
}

.zakat-gold-mode-btn {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: #f2f2f7;
    color: #8e8e93;
    cursor: pointer;
    transition: all 0.2s;
}

.zakat-gold-mode-btn.active {
    background: #007aff;
    color: #fff;
}

.zakat-gold-mode-btn:not(.active):hover {
    background: #e5e5ea;
}

html.dark-theme .zakat-gold-mode-toggle {
    border-color: #2c2c2e;
}

html.dark-theme .zakat-gold-mode-btn {
    background: #2c2c2e;
    color: #8e8e93;
}

html.dark-theme .zakat-gold-mode-btn.active {
    background: #0a84ff;
    color: #fff;
}

html.dark-theme .zakat-gold-mode-btn:not(.active):hover {
    background: #3a3a3c;
}

.zakat-calc-section.active .zakat-calc-input-wrap {
    display: block;
}

html.dark-theme .zakat-calc-input-wrap {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.zakat-calc-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    background: #fff;
    color: #000;
    box-sizing: border-box;
}

.zakat-calc-input:focus {
    outline: none;
    border-color: #007aff;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

html.dark-theme .zakat-calc-input {
    background: #1c1c1e;
    border-color: #2c2c2e;
    color: #fff;
}

html.dark-theme .zakat-calc-input:focus {
    border-color: #007aff;
}

html.dark-theme .zakat-due-panel {
    background: rgba(0, 122, 255, 0.15);
}

.zakat-calculator-result {
    background: transparent;
}

html.dark-theme .zakat-calculator-result {
    background: transparent;
}

.zakat-progress-card--due .zakat-progress-card-bar-wrap,
.zakat-progress-card--due .zakat-progress-card-total-row {
    display: none !important;
}

.zakat-progress-card--accepted .zakat-progress-card-actions {
    display: none !important;
}

.zakat-progress-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.zakat-progress-card-actions .zakat-accept-btn.visible {
    display: flex;
}

html.dark-theme .zakat-calculator-result-value {
    color: #0a84ff;
}


html.dark-theme .ramadan-cell {
    color: #f2f2f7;
}

html.dark-theme .ramadan-time {
    color: #0a84ff;
}

html.dark-theme .date-location-card {
    background: #1c1c1e;
}

html.dark-theme .date-nav-button {
    background: #1c1c1e;
    border-color: #2c2c2e;
    color: #f2f2f7;
}

html.dark-theme .prayer-times-swipe-underneath .date-nav-placeholder {
    background: #1c1c1e;
    border-color: #2c2c2e;
}

html.dark-theme .date-nav-button:disabled {
    color: #636366;
}


.location-header {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 120px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.location-header:hover {
    opacity: 0.8;
}

.location-header:active {
    opacity: 0.6;
    transform: scale(0.98);
}

.quran-progress-header {
    cursor: default;
    pointer-events: none;
    flex: 2 1 0;
}

.quran-progress-header:hover {
    opacity: 1;
}

.quran-progress-header:active {
    opacity: 1;
    transform: none;
}

.quran-progress-header .location-value {
    margin-bottom: 0;
    width: 100%;
    cursor: default;
}

.quran-progress-header .location-value:hover {
    opacity: 1;
}

.quran-progress-header .location-value .prayer-completion-ring {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: 100%;
    --progress-card-pad-x: 0px;
    --progress-card-pad-y: 0px;
}

.quran-progress-header .location-value .completion-rings-group {
    justify-content: center;
}

.date-stamp {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.date-stamp-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 0;
    justify-content: center;
    flex-wrap: nowrap;
    min-width: 220px;
}

#prayer-completion-ring-container {
    width: 100%;
    /* No margin-bottom: ramadan-card's margin-top creates the gap for consistency with ramadan→zakat spacing */
}

/* Streak strip: full width of progress card (bleeds past horizontal padding; parent overflow clips corners) */
.prayer-completion-ring > .progress-card-streak-wrap:not(:empty) {
    margin-top: 0;
    margin-left: calc(-1 * var(--progress-card-pad-x));
    margin-right: calc(-1 * var(--progress-card-pad-x));
    margin-bottom: calc(-1 * var(--progress-card-pad-y));
    padding-top: 0;
    width: calc(100% + 2 * var(--progress-card-pad-x));
    max-width: none;
    box-sizing: border-box;
}

.prayer-completion-ring > .progress-card-streak-wrap .prayer-streak-row {
    border-radius: 0;
    border-bottom: none;
    box-shadow: none;
    padding-left: calc(var(--progress-card-pad-x) + var(--progress-card-text-inset-left));
    padding-right: var(--progress-card-pad-x);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Responsive: Stack containers vertically on small screens */
@media (max-width: 500px) {
    .date-location-wrapper {
        flex-direction: row;
        gap: 10px;
    }
    
    .date-stamp {
        flex: 1 1 0;
        min-width: 0;
    }
    
    .location-header {
        flex: 1 1 0;
        min-width: 0;
    }
}


.location-title {
    font-size: 14px;
    color: #8e8e93;
    margin-bottom: 4px;
}

.location-value {
    font-size: 11px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.location-value .prayer-completion-ring {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    --progress-card-pad-x: 0px;
    --progress-card-pad-y: 0px;
}

.location-value:hover {
    opacity: 0.7;
}

.location-value:active {
    opacity: 0.5;
}

.location-coordinates {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.location-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.date-stamp {
    text-align: left;
    padding: 20px;
    font-size: 11px;
    font-weight: 400;
    color: #8e8e93;
    margin-bottom: 0;
    line-height: 1.4;
}

.date-stamp .date-main {
    font-size: 17px;
    font-weight: 500;
    color: #000;
    margin-top: 4px;
}

html.dark-theme .date-stamp {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .date-stamp .date-main {
    color: #fff;
}

.date-stamp .hijri-date {
    font-size: 17px;
    margin-top: 4px;
    opacity: 0.8;
}

.date-stamp .date-separator {
    color: #8e8e93;
    margin: 0 6px;
}

.prayer-times-list {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

/* Anonymous sign-in: progress card hidden — one 20px gap (ramadan margin-top), not list + ramadan */
body.guest-mode .prayer-times-container .prayer-times-list {
    margin-bottom: 0;
}

.prayer-completion-ring {
    position: relative;
    background: #fff;
    border-radius: 16px;
    --progress-card-pad-x: 20px;
    --progress-card-pad-y: 8px;
    /* Left edge of Progress title + labels in .progress-card-right */
    --progress-card-text-inset-left: 16px;
    padding: var(--progress-card-pad-y) var(--progress-card-pad-x);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.progress-card-info-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-card-info-btn .theme-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.progress-card-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 140px;
}

.progress-card-right {
    flex: 0 0 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding-left: var(--progress-card-text-inset-left, 16px);
}

.progress-card-center {
    flex: 0 0 30%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: 8px;
    margin-right: -6px;
}

.progress-card-left {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Prayer page: 3 columns (labels + month graph + rings) need to fit in 100%; 2 columns use default 60/40 */
.prayer-times-container .progress-card-columns:has(.progress-card-center) .progress-card-right {
    flex: 0 0 40%;
}
.prayer-times-container .progress-card-columns:has(.progress-card-center) .progress-card-center {
    flex: 0 0 30%;
}
.prayer-times-container .progress-card-columns:has(.progress-card-center) .progress-card-left {
    flex: 0 0 30%;
}

.month-graph-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 81%;
    max-width: 81%;
}

.month-graph-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    width: 100%;
    font-size: clamp(6px, 1.5vw, 10px);
    font-weight: 600;
    color: #8e8e93;
    text-align: center;
}

.month-graph-labels span {
    display: block;
}

html.dark-theme .month-graph-labels {
    color: rgba(255, 255, 255, 0.5);
}

.month-graph {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    width: 100%;
    aspect-ratio: 7 / 5;
}

.month-graph-square {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    background: rgba(0, 0, 0, 0.12);
}

.month-graph-square-fast {
    background: #34c759 !important;
}

.month-graph-square.month-graph-square-fast.month-graph-square-fast-prev-month {
    background: #1a6b2e !important;
}

html.dark-theme .month-graph-square.month-graph-square-fast.month-graph-square-fast-prev-month {
    background: #1a6b2e !important;
}

html.dark-theme .month-graph-square {
    background: rgba(255, 255, 255, 0.12);
}

html.dark-theme .month-graph-square-fast {
    background: #34c759 !important;
}

@media (max-width: 480px) {
    .prayer-completion-ring {
        --progress-card-pad-x: 12px;
        --progress-card-pad-y: 6px;
        --progress-card-text-inset-left: 8px;
    }

    .progress-card-info-btn {
        top: 8px;
        right: 8px;
    }

    .progress-card-info-btn .theme-icon {
        width: 12px;
        height: 12px;
    }

    .progress-card-columns {
        gap: 8px;
        min-height: 100px;
    }

    .progress-card-right {
        gap: 4px;
    }
}

.analytics-page {
    display: none;
}

.analytics-container {
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.analytics-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.analytics-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.analytics-back-button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    line-height: 1;
}

.theme-icon.dark {
    display: none;
}

html.dark-theme .theme-icon.light {
    display: none;
}

html.dark-theme .theme-icon.dark {
    display: inline-flex;
}

.analytics-progress-section {
    padding: 0;
    margin-bottom: 20px;
}

.streak-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

html.dark-theme .streak-card {
    background: #1c1c1e;
}

.streak-card-header {
    margin-bottom: 4px;
    padding-right: 40px;
}

.streak-card-title {
    font-size: 17px;
    font-weight: 700;
    color: #1c1c1e;
}

html.dark-theme .streak-card-title {
    color: #f2f2f7;
}

.streak-card-body {
    font-size: 14px;
    color: #6b6b6d;
    line-height: 1.35;
}

html.dark-theme .streak-card-body {
    color: #aeaeb2;
}

.streak-card-lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.streak-card-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.streak-card-section + .streak-card-section {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

html.dark-theme .streak-card-section + .streak-card-section {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.streak-card-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #8e8e93;
    margin-bottom: 2px;
}

html.dark-theme .streak-card-section-label {
    color: #8e8e93;
}

.streak-single-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.streak-single-grid-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px 4px;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}

.streak-single-cell--name {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #8e8e93;
    min-width: 0;
    line-height: 1.2;
}

html.dark-theme .streak-single-cell--name {
    color: #8e8e93;
}

.streak-single-cell--current {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    min-width: 0;
    line-height: 1.25;
    white-space: nowrap;
}

html.dark-theme .streak-single-cell--current {
    color: #f2f2f7;
}

.streak-single-cell--former {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #8e8e93;
    min-width: 0;
    line-height: 1.25;
    white-space: nowrap;
}

html.dark-theme .streak-single-cell--former {
    color: #8e8e93;
}

.streak-single-cell--empty {
    opacity: 0.45;
}

.streak-metric-row {
    display: flex;
    align-items: baseline;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.35;
}

html.dark-theme .streak-metric-row {
    color: #f2f2f7;
}

.streak-metric-row--muted {
    font-size: 13px;
    font-weight: 500;
    color: #8e8e93;
}

html.dark-theme .streak-metric-row--muted {
    color: #8e8e93;
}

.streak-metric-row--current {
    font-weight: 700;
    color: #1c1c1e;
}

html.dark-theme .streak-metric-row--current {
    color: #f2f2f7;
}

.prayer-streak-strip .streak-metric-row--current {
    font-weight: 700;
}

.streak-metric-row--strip {
    font-size: 13px;
}

.streak-metric-days {
    flex: 0 0 auto;
    white-space: nowrap;
}

.streak-metric-tab {
    flex: 1 1 auto;
    min-width: 1rem;
    margin: 0 0.5rem;
    align-self: stretch;
    position: relative;
    height: 1.1em;
}

.streak-metric-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.26em;
    border-bottom: 1px dotted rgba(60, 60, 67, 0.38);
}

html.dark-theme .streak-metric-tab::after {
    border-bottom-color: rgba(235, 235, 245, 0.38);
}

.streak-metric-row--muted .streak-metric-tab::after {
    border-bottom-color: rgba(60, 60, 67, 0.22);
}

html.dark-theme .streak-metric-row--muted .streak-metric-tab::after {
    border-bottom-color: rgba(235, 235, 245, 0.22);
}

.streak-metric-label {
    flex: 0 1 auto;
    text-align: right;
    min-width: 0;
    font-weight: inherit;
}

.streak-card-line .streak-metric-row + .streak-metric-row {
    margin-top: 6px;
}

.streak-card-line-empty-hint {
    font-size: 13px;
    line-height: 1.35;
    color: #8e8e93;
}

html.dark-theme .streak-card-line-empty-hint {
    color: #8e8e93;
}

.prayer-streak-strip .streak-metric-row {
    width: 100%;
    text-align: left;
}

.streak-card-line-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.3;
}

html.dark-theme .streak-card-line-title {
    color: #f2f2f7;
}

.streak-card-line-sub {
    font-size: 13px;
    color: #6b6b6d;
    margin-top: 2px;
    line-height: 1.35;
}

html.dark-theme .streak-card-line-sub {
    color: #aeaeb2;
}

.streak-card-line-best {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 4px;
}

html.dark-theme .streak-card-line-best {
    color: #8e8e93;
}

.streak-card-line--muted .streak-card-line-sub,
.streak-card-line-best-only {
    color: #8e8e93;
}

html.dark-theme .streak-card-line--muted .streak-card-line-sub,
html.dark-theme .streak-card-line-best-only {
    color: #8e8e93;
}

.streak-card-line-best-only {
    font-size: 12px;
    line-height: 1.35;
}

.prayer-streak-strip--muted {
    color: #8e8e93;
    font-weight: 500;
}

html.dark-theme .prayer-streak-strip--muted {
    color: #8e8e93;
}

.prayer-streak-row {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.12), transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.prayer-streak-row:active {
    opacity: 0.88;
}

html.dark-theme .prayer-streak-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), transparent);
}

.prayer-streak-strip {
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    text-align: left;
    line-height: 1.35;
    width: 100%;
    box-sizing: border-box;
}

html.dark-theme .prayer-streak-strip {
    color: #f2f2f7;
}

#analytics-progress-container {
    width: 100%;
}

/* Ensure analytics progress card matches prayer times: same card styles and ring visibility */
#analytics-progress-container .prayer-completion-ring {
    margin-bottom: 0;
}

/* Match prayer times progress card layout in analytics */
.analytics-container .progress-card-columns:has(.progress-card-center) .progress-card-right {
    flex: 0 0 40%;
}
.analytics-container .progress-card-columns:has(.progress-card-center) .progress-card-center {
    flex: 0 0 30%;
}
.analytics-container .progress-card-columns:has(.progress-card-center) .progress-card-left {
    flex: 0 0 30%;
}

/* Ensure progress rings have space and are visible (2-column layout when no month graph) */
.analytics-container .progress-card-columns:not(:has(.progress-card-center)) .progress-card-left {
    flex: 0 0 40%;
    min-width: 120px;
}
.analytics-container .combined-progress-rings {
    min-height: 80px;
}

.analytics-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.analytics-nav-button {
    width: 32px;
    height: 32px;
    border: 1px solid #e5e5ea;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.analytics-month-label {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    min-width: 120px;
}

.analytics-month-picker {
    padding: 6px 8px;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
}

.analytics-view-toggle {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #e5e5ea;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.analytics-calendar {
    padding: 0;
}

.analytics-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.analytics-weekday {
    font-size: 11px;
    color: #8e8e93;
    text-align: center;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.analytics-day {
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 6px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: #fff;
}

.analytics-day.outside {
    opacity: 0.5;
}

.analytics-day.today {
    border-color: #0a84ff;
}

.analytics-day-number {
    font-size: 11px;
    font-weight: 600;
    color: #000;
}


html.dark-theme .analytics-title,
html.dark-theme .analytics-month-label,
html.dark-theme .analytics-day-number {
    color: #fff;
}

html.dark-theme .analytics-nav-button,
html.dark-theme .analytics-view-toggle,
html.dark-theme .analytics-month-picker,
html.dark-theme .analytics-day {
    background: #1c1c1e;
    border-color: #2c2c2e;
}

html.dark-theme .analytics-nav-button,
html.dark-theme .analytics-view-toggle,
html.dark-theme .analytics-month-picker {
    color: #f2f2f7;
}

html.dark-theme .analytics-nav-button:active,
html.dark-theme .analytics-view-toggle:active {
    background: #2c2c2e;
}

html.dark-theme .analytics-weekday {
    color: rgba(255, 255, 255, 0.7);
}

.completion-rings-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 12px);
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.completion-ring-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin: 0;
    padding: 0;
    flex: 1 1 0;
    min-width: 0;
}

.completion-ring-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.quran-ring-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.quran-ring-wrapper .completion-ring-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.quran-ring-wrapper .completion-ring-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.quran-progress-header .completion-ring-label {
    text-align: left;
    font-size: 13px;
    color: #8e8e93;
    margin: 0;
    line-height: 1.4;
    padding: 0;
    align-self: center;
    flex-shrink: 1;
    min-width: 0;
    word-wrap: break-word;
}

.completion-ring-title {
    font-size: clamp(11px, 2.5vw, 14px);
    font-weight: 600;
    color: #000;
    text-align: center;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    line-height: 1;
}

.completion-ring-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 152 / 97;
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.completion-ring-container svg {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.completion-ring-percentage {
    position: absolute;
    font-size: clamp(9px, 2vw, 14px);
    font-weight: 600;
    color: #000;
    z-index: 10;
    pointer-events: none;
}

html.dark-theme .completion-ring-percentage {
    color: #fff;
}

.completion-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    margin: 0;
    padding: 0;
    display: block;
}

.completion-ring-bg {
    fill: none;
    stroke: rgba(142, 142, 147, 0.15);
    stroke-width: 17.28;
}

.completion-ring-green {
    fill: none;
    stroke: #34c759;
    stroke-width: 17.28;
    stroke-dasharray: 628.32;
    stroke-dashoffset: 628.32;
    transition: stroke-dashoffset 0.5s ease;
    stroke-linecap: round;
    /* Ensure green is rendered on top */
    z-index: 2;
}

.completion-ring-grey {
    fill: none;
    stroke: #8e8e93;
    stroke-width: 17.28;
    stroke-dasharray: 628.32;
    stroke-dashoffset: 628.32;
    transition: stroke-dashoffset 0.5s ease;
    stroke-linecap: round;
    /* Gray should be below green */
    z-index: 1;
}

.completion-ring-yellow {
    fill: none;
    stroke: #ffcc00;
    stroke-width: 17.28;
    stroke-dasharray: 628.32;
    stroke-dashoffset: 628.32;
    transition: stroke-dashoffset 0.5s ease;
    stroke-linecap: round;
}

.completion-ring-gold {
    fill: none;
    stroke: #D4AF37;
    stroke-width: 17.28;
    stroke-dasharray: 628.32;
    stroke-dashoffset: 628.32;
    transition: stroke-dashoffset 0.5s ease;
    stroke-linecap: round;
}

.completion-ring-label {
    text-align: center;
    font-size: 13px;
    color: #8e8e93;
    margin-top: 0;
    margin-bottom: 4px;
    line-height: 1.4;
    padding: 0 4px;
}

.progress-card-title {
    /* Match .ramadan-card-title / section card titles on Prayer Times */
    font-size: 17px;
    font-weight: 600;
    color: #000;
    text-align: left;
    margin: 0;
    line-height: 1.2;
}

html.dark-theme .progress-card-title {
    color: #fff;
}

.progress-card-labels {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-card-label-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(8px, 3vw, 24px);
    font-size: clamp(10px, 2vw, 14px);
    white-space: nowrap;
}

.progress-card-label {
    color: #000;
    width: clamp(50px, 15vw, 90px);
    flex-shrink: 0;
}

.progress-card-value {
    color: #8e8e93;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.dark-theme .progress-card-label {
    color: #fff;
}

html.dark-theme .progress-card-value {
    color: rgba(255, 255, 255, 0.7);
}

.combined-progress-ring {
    margin-top: 0;
}


.combined-progress-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.combined-progress-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    padding-left: 10px;
}

.combined-progress-title {
    font-size: 13px;
    font-weight: 700;
    color: #8e8e93;
}

.combined-progress-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    font-size: 15px;
}

.combined-progress-label,
.combined-progress-value {
    text-align: left;
}

.combined-progress-label {
    color: #000;
    min-width: 90px;
}

.combined-progress-label-small {
    font-size: 13px;
}

.combined-progress-value {
    color: #8e8e93;
    font-weight: 600;
}

.combined-progress-value-small {
    font-size: 13px;
}

.combined-progress-rings {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 170 / 110;
    flex: 1 1 auto;
    min-width: 0;
}

.combined-progress-svg {
    width: 100%;
    height: 100%;
}

.combined-ring-bg {
    fill: none;
    stroke: rgba(142, 142, 147, 0.15);
    stroke-width: 12;
}

.combined-ring-yellow {
    fill: none;
    stroke: #ffcc00;
    stroke-width: 12;
    stroke-linecap: round;
}

.combined-ring-green {
    fill: none;
    stroke: #34c759;
    stroke-width: 10;
    stroke-linecap: round;
}

.combined-ring-grey {
    fill: none;
    stroke: #8e8e93;
    stroke-width: 10;
    stroke-linecap: round;
}

.combined-ring-gold {
    fill: none;
    stroke: #D4AF37;
    stroke-width: 8;
    stroke-linecap: round;
}

.analytics-mini-ring {
    width: 40px;
    height: 40px;
    transform: rotate(-90deg);
}

@media (max-width: 600px) {
    .analytics-day {
        padding: 4px;
        min-height: 52px;
        gap: 3px;
    }

    .analytics-day-number {
        font-size: 10px;
    }

    .analytics-mini-ring {
        width: 32px;
        height: 32px;
    }
}

.mini-ring-bg {
    stroke-width: 2.8;
}

.mini-ring-yellow {
    stroke-width: 2.8;
    stroke-linecap: butt;
}

.mini-ring-green {
    stroke-width: 2.8;
    stroke-linecap: butt;
}

.mini-ring-grey {
    stroke-width: 2.8;
    stroke-linecap: butt;
}

.mini-ring-gold {
    stroke-width: 2.8;
    stroke-linecap: butt;
}

html.dark-theme .prayer-completion-ring {
    background: #1c1c1e;
}

html.dark-theme .completion-ring-title {
    color: #fff;
}

html.dark-theme .completion-ring-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

html.dark-theme .completion-ring-label {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .quran-read-row .quran-read-label {
    color: #fff;
}

html.dark-theme .quran-read-row .quran-read-value {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .combined-progress-title {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .combined-progress-label {
    color: #fff;
}

html.dark-theme .combined-progress-value {
    color: rgba(255, 255, 255, 0.7);
}

html.dark-theme .combined-ring-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.prayer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 20px;
    border-bottom: 1px solid #e5e5ea;
    transition: background 0.2s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Whole row toggles check (same tap / long-press as the checkmark). */
.prayer-item.prayer-item--check-tappable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.prayer-item.prayer-item--check-tappable .prayer-check-button {
    pointer-events: none;
}

.prayer-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prayer-item:last-child {
    border-bottom: none;
}

.prayer-item.active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 2px 0;
}

.prayer-item.future-date,
.prayer-item.past-date {
    background: transparent;
}

.prayer-item.future-date .prayer-name-english,
.prayer-item.future-date .prayer-name-arabic,
.prayer-item.future-date .prayer-time,
.prayer-item.past-date .prayer-name-english,
.prayer-item.past-date .prayer-name-arabic,
.prayer-item.past-date .prayer-time {
    color: #8e8e93;
}

.prayer-item.active .prayer-name-english {
    color: #000;
    font-size: 20px;
    font-weight: 700;
}

.prayer-item.active .prayer-name-arabic {
    color: #000;
    font-size: 17px;
    font-weight: 600;
}

.prayer-item.active .prayer-time {
    color: #007aff;
    font-size: 20px;
    font-weight: 700;
}

.prayer-item.active .prayer-time-wrapper {
    align-items: flex-end;
}

.prayer-item.active .sunrise-time {
    color: #8e8e93;
}

.prayer-item.passed,
.prayer-item.future-date,
.prayer-item.past-date {
    opacity: 1;
}

.prayer-item.passed .prayer-name-english,
.prayer-item.future-date .prayer-name-english,
.prayer-item.past-date .prayer-name-english {
    font-size: 15px;
    color: #8e8e93;
}

.prayer-item.passed .prayer-name-arabic,
.prayer-item.future-date .prayer-name-arabic,
.prayer-item.past-date .prayer-name-arabic {
    font-size: 13px;
    color: #a8a8ad;
}

.prayer-item.passed .prayer-time,
.prayer-item.future-date .prayer-time,
.prayer-item.past-date .prayer-time {
    font-size: 15px;
    color: #8e8e93;
    font-weight: 500;
}

.prayer-item.passed .prayer-icon,
.prayer-item.future-date .prayer-icon,
.prayer-item.past-date .prayer-icon {
    opacity: 0.6;
}

.prayer-item.passed .prayer-check-button,
.prayer-item.future-date .prayer-check-button,
.prayer-item.past-date .prayer-check-button {
    opacity: 1;
}

/* Ensure checked background persists when prayer window has ended */
.prayer-item.passed .prayer-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}

.prayer-item.passed .prayer-check-button.checked.out-of-time {
    background: #8e8e93;
    border-color: #8e8e93;
}

.prayer-item.passed .prayer-item-left,
.prayer-item.future-date .prayer-item-left,
.prayer-item.past-date .prayer-item-left,
.prayer-item.passed .prayer-time-wrapper,
.prayer-item.future-date .prayer-time-wrapper,
.prayer-item.past-date .prayer-time-wrapper {
    opacity: 0.6;
}

.prayer-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.prayer-icon {
    font-size: 32px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.prayer-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.prayer-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.prayer-name-english {
    font-size: 17px;
    font-weight: 500;
    color: #000;
}

.prayer-name-arabic {
    font-size: 15px;
    font-weight: 500;
    color: #8e8e93;
    direction: rtl;
    font-family: var(--quran-arabic-font);
}

.prayer-time-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prayer-time {
    font-size: 17px;
    font-weight: 600;
    color: #007aff;
}

.prayer-time.placeholder {
    color: #8e8e93;
}

.prayer-time-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.sunrise-time,
.advisory-time {
    font-size: 12px;
    font-weight: 400;
    color: #8e8e93;
}

.prayer-check-button {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 2px solid #c7c7cc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    position: relative;
}

.prayer-check-button.checked {
    background: transparent;
    border-color: #34c759;
}

.prayer-check-button.checked.out-of-time {
    background: transparent;
    border-color: #8e8e93;
}

.prayer-check-button.progress-indicator {
    border: none;
    background: transparent;
}

.prayer-check-button.progress-indicator svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.prayer-check-button.progress-indicator .progress-ring {
    fill: none;
    stroke-width: 2;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

.prayer-check-button.progress-indicator .progress-ring-bg {
    stroke: #e5e5ea;
}

.prayer-check-button.progress-indicator .progress-ring-fill {
    stroke: #007aff;
    stroke-dasharray: 94.24;
    stroke-dashoffset: 94.24;
}

.prayer-check-button.progress-indicator.warning .progress-ring-fill {
    stroke: #ff3b30;
}

.prayer-check-button.progress-indicator .checkmark-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #000;
    z-index: 1;
}

.prayer-check-button.progress-indicator.checked {
    background: transparent;
}

.prayer-check-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.prayer-check-button.future {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Completed checks must never stay "future" (dimmed hollow); long-press late/on-time toggles keep full opacity. */
.prayer-check-button.checked.future {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

/* Fast row - muted background to distinguish from prayers */
.prayer-item-fast {
    background: rgba(0, 0, 0, 0.03);
}

html.dark-theme .prayer-item-fast {
    background: rgba(255, 255, 255, 0.04);
}

/* Fast row checkbox - styled like prayer check, does not affect rings */
.fast-check-button {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 2px solid #c7c7cc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.fast-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}

.fast-check-button.checked::after {
    content: '✓';
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    z-index: 2;
    position: relative;
}

.fast-check-button.future {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.prayer-time-wrapper-empty {
    min-width: 0;
}

html.dark-theme .fast-check-button {
    background: #1c1c1e;
    border-color: #38383a;
}

html.dark-theme .fast-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}

/* Live window only — completed checks use green border/fill like other rows */
.prayer-item.active .prayer-check-button:not(.disabled):not(.progress-indicator):not(.checked) {
    border-color: #007aff;
}

.prayer-item.active .prayer-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}

.loading {
    text-align: center;
    padding: 40px 20px;
    color: #8e8e93;
}

.error {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: #ff3b30;
}

.error-helper {
    font-size: 12px;
    color: #8e8e93;
}

.error-retry {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.error-retry-button {
    background: #0a84ff;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.error-retry-button:hover {
    opacity: 0.85;
}

html.dark-theme .error-retry-button {
    background: #409cff;
}

.error-manual-button {
    background: #e5e5ea;
    color: #1c1c1e;
}

html.dark-theme .error-manual-button {
    background: #2c2c2e;
    color: #f2f2f7;
}

/* Qibla Finder Tab */
.qibla-stamp {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.qibla-location-header {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    height: 100%;
    min-height: 120px;
}

.qibla-location-value {
    font-size: 30px;
    font-weight: 600;
    color: #000;
    margin-bottom: 4px;
    padding-left: 5px;
}

.qibla-location-degrees {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 400;
    padding-left: 5px;
}

html.dark-theme .qibla-stamp {
    color: #fff;
}

html.dark-theme .qibla-location-header {
    background: #1c1c1e;
}

html.dark-theme .qibla-location-value {
    color: #fff;
}

html.dark-theme .qibla-location-degrees {
    color: rgba(255, 255, 255, 0.7);
}

.qibla-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Qibla tab: non-selectable UI (title, degree cards, compass, Find Qibla) */
#qibla-finder,
#qibla-finder * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#qibla-finder {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Qibla tab: no scroll — flex column fills viewport; compass shrinks on short screens */
#qibla-finder.tab-content.active {
    --qibla-page-bottom-inset: calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--qibla-page-bottom-inset));
}

html[data-banner-layout="active"].platform-ios #qibla-finder.tab-content.active,
html[data-banner-layout="active"].admob-ios #qibla-finder.tab-content.active {
    --qibla-page-bottom-inset: var(--native-admob-content-inset-bottom, 114px);
}

#qibla-finder .qibla-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#qibla-finder .date-location-wrapper {
    flex-shrink: 0;
    margin-bottom: 8px;
}

#qibla-finder #qibla-content {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    overflow: hidden;
    container-type: size;
}

/* Title + cards stay fixed above; compass fills and centers in remaining space */
#qibla-finder .qibla-compass-stage {
    width: 100%;
    max-width: 420px;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qibla-finder .qibla-compass-container {
    flex: 0 0 auto;
    width: min(100%, 420px, 100cqh);
    max-width: 420px;
    aspect-ratio: 1;
    height: auto;
    max-height: 100cqh;
    margin: 0 auto;
    padding: 24px 30px;
    box-sizing: border-box;
}

@supports not (width: 1cqh) {
    #qibla-finder #qibla-content {
        container-type: normal;
    }

    #qibla-finder .qibla-compass-container {
        width: min(100%, 420px);
        max-height: 100%;
    }
}

#qibla-finder .qibla-location-header {
    min-height: 96px;
    padding: 16px 12px;
}

@media (max-height: 740px), (max-width: 400px) {
    #qibla-finder .qibla-location-header {
        min-height: 80px;
        padding: 12px 10px;
    }

    #qibla-finder .qibla-location-value {
        font-size: clamp(22px, 6vw, 28px);
    }

    #qibla-finder .qibla-start-compass-pill {
        min-height: 50px;
        padding: 10px 22px;
        font-size: clamp(16px, 4vw, 22px);
    }
}

@media (max-height: 640px) {
    #qibla-finder .date-location-wrapper {
        margin-bottom: 8px;
        gap: 10px;
    }

    #qibla-finder .qibla-location-header {
        min-height: 64px;
        padding: 8px;
    }

    #qibla-finder .qibla-location-degrees {
        font-size: 10px;
    }
}

.qibla-kaaba-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
}

.qibla-kaaba-image {
    width: 40px;
    height: auto;
    object-fit: contain;
    display: block;
}

.qibla-compass-heading-label {
    position: absolute;
    top: calc(50% + 5px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
}

.qibla-compass-heading-value {
    font-size: 14px;
    font-weight: 600;
    color: #7a7a7a;
}

.qibla-compass-status {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: #8e8e93;
    text-align: left;
    align-self: flex-start;
    width: 100%;
}

.qibla-compass-status[hidden] {
    display: none !important;
}

#qibla-compass-heading-header.qibla-compass-header--warn .qibla-compass-status {
    color: #b8860b;
}

#qibla-compass-heading-header.qibla-compass-header--error .qibla-compass-status {
    color: #ff3b30;
}

.qibla-compass.qibla-compass--unavailable {
    opacity: 0.45;
}

html.dark-theme .qibla-compass-status {
    color: #98989d;
}

html.dark-theme #qibla-compass-heading-header.qibla-compass-header--warn .qibla-compass-status {
    color: #ffd60a;
}

html.dark-theme #qibla-compass-heading-header.qibla-compass-header--error .qibla-compass-status {
    color: #ff453a;
}

.qibla-degrees-label {
    position: absolute;
    top: calc(50% + 15px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    z-index: 3;
}

.qibla-direction-text {
    color: #7a7a7a;
    display: block;
}

.qibla-degrees-value {
    color: #2c2c2c;
    display: block;
}

html.dark-theme .qibla-compass-heading-value {
    color: #7a7a7a;
}

html.dark-theme .qibla-direction-text {
    color: #7a7a7a;
}

html.dark-theme .qibla-degrees-value {
    color: #ffffff;
}

.tab-title {
    text-align: center;
    padding: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}

.quran-progress-summary {
    margin: 0 0 12px;
}

.quran-bookmarks-host {
    margin: 0 0 12px;
}

.quran-bookmarks-host[hidden] {
    display: none !important;
}

/* Quran list: non-selectable taps (bookmarks, search controls, surah checkmarks) */
.quran-bookmarks-host,
.quran-bookmark-panel,
.quran-bookmark-panel .bookmark-panel-title,
.quran-bookmark-panel .bookmark-list,
.quran-bookmark-panel .bookmark-item-row,
.quran-bookmark-item,
.quran-bookmark-remove,
.quran-search-fab,
.quran-search-clear,
.quran-search-cancel,
.surah-check-button,
.surah-check-placeholder {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.quran-card.quran-table-card {
    margin-bottom: 16px;
    overflow: hidden;
}

.quran-surah-table-head {
    background: #fafafa;
    border-bottom: 1px solid #e5e5ea;
}

.quran-surah-table-head-row {
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.quran-surah-table-cell-num {
    min-width: 40px;
    width: 40px;
    margin-right: 13px;
    flex-shrink: 0;
    text-align: left;
}

.quran-surah-table-head-row .quran-surah-table-cell:nth-child(2) {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.quran-surah-table-head-row .quran-surah-table-cell:nth-child(3) {
    min-width: 100px;
    text-align: right;
    margin-right: 19px;
    flex-shrink: 0;
}

.quran-surah-table-cell-ar {
    font-family: var(--quran-arabic-font);
}

.quran-surah-table-head-check {
    width: 32px;
    flex-shrink: 0;
}

.analytics-container #analytics-quran-progress-summary.quran-progress-summary {
    margin: 20px 0 12px;
}

#analytics-zakat-history-card {
    margin-top: 20px;
}

.quran-progress-card,
.zakat-progress-card {
    display: block;
    width: 100%;
    margin: 0;
    padding: 20px;
    border: none;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

html.dark-theme .quran-progress-card,
html.dark-theme .zakat-progress-card {
    background: #1c1c1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.quran-progress-card--tappable {
    cursor: pointer;
}

.quran-progress-card--tappable:active {
    opacity: 0.88;
}

.quran-progress-card-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0 16px;
    margin-bottom: 16px;
}

.quran-progress-card-col--title {
    min-width: 0;
    padding-right: 12px;
}

.quran-progress-card-col--stat,
.zakat-progress-card-col--stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.zakat-progress-card-heading {
    display: block;
    margin-bottom: 14px;
}

.zakat-progress-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 10px;
    margin-bottom: 16px;
}

.zakat-progress-card-stats .zakat-progress-card-col--stat:not(:first-child) {
    padding-left: 12px;
    border-left: 1px solid rgba(60, 60, 67, 0.18);
}

/* Paid column: fixed side inset so long amounts shrink instead of touching dividers */
.zakat-progress-card-stats > .zakat-progress-card-col--stat:nth-child(2) {
    padding-right: 10px;
    box-sizing: border-box;
}

.zakat-progress-card-stats > .zakat-progress-card-col--stat:nth-child(2) .zakat-progress-card-value,
.zakat-progress-card-stats > .zakat-progress-card-col--stat:nth-child(2) .zakat-progress-card-total-row {
    max-width: 100%;
}

html.dark-theme .zakat-progress-card-stats .zakat-progress-card-col--stat:not(:first-child) {
    border-left-color: rgba(255, 255, 255, 0.12);
}

.quran-progress-card-col--stat {
    padding-left: 16px;
    border-left: 1px solid rgba(60, 60, 67, 0.18);
}

html.dark-theme .quran-progress-card-col--stat {
    border-left-color: rgba(255, 255, 255, 0.12);
}

/* Title typography matches .progress-card-title on the Prayer progress card */
.quran-progress-card-heading {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.quran-progress-card-heading-line {
    display: block;
}

.quran-progress-card-label,
.zakat-progress-card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8e8e93;
    line-height: 1.2;
}

.quran-progress-card-value-row,
.zakat-progress-card-value-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}

.quran-progress-card-value,
.zakat-progress-card-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

html:not(.dark-theme) .quran-progress-card-value,
html:not(.dark-theme) .zakat-progress-card-value {
    color: #000;
}

.quran-progress-card-value--accent {
    color: var(--quran-progress-accent, #5da9ff);
}

html:not(.dark-theme) .quran-progress-card-value--accent {
    color: var(--quran-progress-accent, #5da9ff);
}

.zakat-progress-card-value--accent {
    color: #34c759;
}

html.dark-theme .zakat-progress-card-value--accent {
    color: #30d158;
}

.quran-progress-card-value-suffix,
.zakat-progress-card-value-suffix {
    font-size: 15px;
    font-weight: 600;
    color: #8e8e93;
}

.zakat-progress-card-stats .zakat-progress-card-value:not(#zakat-stat-value-2):not(#zakat-stat-value-3) {
    font-size: clamp(17px, 4.5vw, 22px);
}

.zakat-progress-card-value--date {
    white-space: nowrap;
}

.zakat-progress-card-value-row {
    flex-wrap: nowrap;
}

/* Accepted: Paid / Complete capped in JS to ≤ Calculated date (22px max here) */
.zakat-progress-card--accepted #zakat-stat-value-1,
.zakat-progress-card--due #zakat-stat-value-1 {
    font-size: clamp(17px, 4.5vw, 22px);
}

.zakat-progress-card--due #zakat-stat-value-2,
.zakat-progress-card--due #zakat-stat-value-3,
.zakat-progress-card--accepted #zakat-stat-value-2,
.zakat-progress-card--accepted #zakat-stat-value-3,
.zakat-progress-card--due #zakat-stat-value-3 + .zakat-progress-card-value-suffix,
.zakat-progress-card--accepted #zakat-stat-value-3 + .zakat-progress-card-value-suffix {
    font-size: var(--zakat-hero-font-size, clamp(17px, 4.5vw, 22px));
    font-weight: 700;
    line-height: 1.1;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    max-width: none;
}

.zakat-progress-card-total-row {
    align-items: baseline;
    gap: 2px;
}

.zakat-progress-card--accepted #zakat-stat-value-row-2 {
    overflow: visible;
    max-width: none;
}

.zakat-progress-card--accepted #zakat-stat-value-row-2 .zakat-progress-card-slash {
    font-weight: 700;
    line-height: 1.1;
    flex-shrink: 0;
    color: #8e8e93;
}

.zakat-progress-card--accepted #zakat-stat-suffix-2 {
    line-height: 1.1;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    max-width: none;
}

.quran-progress-card-bar,
.zakat-progress-card-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #3a3a3c;
    overflow: hidden;
}

html:not(.dark-theme) .quran-progress-card-bar,
html:not(.dark-theme) .zakat-progress-card-bar {
    background: #e5e5ea;
}

.quran-progress-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--quran-progress-accent, #5da9ff);
    transition: width 0.3s ease;
}

.zakat-progress-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: #34c759;
    transition: width 0.3s ease;
}

html.dark-theme .zakat-progress-card-bar-fill {
    background: #30d158;
}

.zakat-progress-card-bar-fill.complete {
    background: #30d158;
}

.quran-read-row .quran-read-label {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

.quran-read-row .quran-read-value {
    font-size: 20px;
    font-weight: 700;
    color: #8e8e93;
}

.prayer-times-title {
    text-align: left;
    font-size: 17px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
    padding-left: 20px; /* Align with date-stamp padding */
}

.surah-title-with-back {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 0;
}

.surah-title-text {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}


.qibla-header {
    text-align: center;
    padding: 20px;
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
}

.qibla-compass-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.qibla-start-compass-wrap {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.qibla-start-compass-wrap.is-fading-out {
    opacity: 0;
    pointer-events: none;
}

.qibla-start-compass-wrap.is-hidden {
    display: none;
}

/* Quran search pill shape, centered over compass */
.qibla-start-compass-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 69px;
    padding: 16px 35px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-radius: 999px;
    background: transparent;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    font-size: 25px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.2;
    color: #1c1c1e;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.qibla-start-compass-pill:active,
.qibla-start-compass-pill:focus-visible {
    border-color: rgba(0, 122, 255, 0.35);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(0, 122, 255, 0.12);
    outline: none;
}

html.dark-theme .qibla-start-compass-pill {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
    color: #f2f2f7;
}

html.dark-theme .qibla-start-compass-pill:active,
html.dark-theme .qibla-start-compass-pill:focus-visible {
    border-color: rgba(10, 132, 255, 0.4);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(10, 132, 255, 0.14);
}

/* Social tab — guest sign-in gate (matches Qibla compass overlay pattern) */
#social.tab-content {
    position: relative;
}

.social-container.is-guest-blurred {
    filter: blur(3px);
    opacity: 0.75;
    pointer-events: none;
    user-select: none;
}

.social-guest-gate {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: none;
}

.social-guest-gate.social-guest-gate--active {
    display: flex;
    pointer-events: auto;
}

.social-guest-gate-message {
    margin: 0;
    max-width: 280px;
    text-align: center;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    color: #3a3a3c;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html.dark-theme .social-guest-gate-message {
    color: #fff;
}

body.guest-mode #settings-welcome-card {
    cursor: pointer;
}

body.guest-mode .surah-check-button,
body.guest-mode .surah-check-placeholder {
    display: none !important;
}

body.guest-mode .quran-surah-table-head-check {
    display: none !important;
}

.qibla-compass-visual {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.qibla-compass-container.is-inactive .qibla-compass-visual {
    filter: blur(3px);
    opacity: 0.75;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .qibla-compass-visual,
    .qibla-start-compass-wrap {
        transition-duration: 0.01ms;
    }
}

.qibla-compass-container {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
}

#qibla-finder .qibla-compass-container {
    background: transparent;
    box-shadow: none;
}

.qibla-static-north-line {
    position: absolute;
    bottom: calc(50% - 20px); /* Pushed down 20px to match compass movement */
    left: 50%;
    width: 2px;
    /* Line from center to circumference pointing towards 0 degrees (North/up) */
    /* Height extends from center to circumference: 50% - 30px (accounting for padding) */
    height: calc(50% - 30px);
    background: #7a7a7a;
    transform: translateX(-50%);
    transform-origin: bottom center;
    z-index: 0;
    pointer-events: none;
    /* Hide the top 40% of the line (closest to circumference) */
    mask: linear-gradient(to top, 
        black 0%, 
        black 60%, /* Visible first 60% from center */
        transparent 60%, 
        transparent 100%); /* Hidden last 40% closest to circumference */
    -webkit-mask: linear-gradient(to top, 
        black 0%, 
        black 60%, 
        transparent 60%, 
        transparent 100%);
}

.qibla-top-north-line {
    position: absolute;
    top: 10px; /* Inside the container, at the top */
    left: 50%;
    width: 5px;
    height: 30px; /* Length of the line */
    background: #7a7a7a;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
}

.qibla-compass {
    position: absolute;
    top: 50px; /* Pushed down to make room for the line (30px padding + 20px for line) */
    left: 30px;
    right: 30px;
    bottom: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    border-radius: 50%;
    background: transparent;
    border: 2px solid #7a7a7a;
    overflow: visible;
    transform-origin: center center;
    transition: transform 0s ease-out;
}

.qibla-center-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 5px;
    background: #7a7a7a;
    transform-origin: 50% 50%;
    mask: linear-gradient(to right, 
        black 0%, 
        black 5%, 
        transparent 5%, 
        transparent 95%, 
        black 95%, 
        black 100%);
    -webkit-mask: linear-gradient(to right, 
        black 0%, 
        black 5%, 
        transparent 5%, 
        transparent 95%, 
        black 95%, 
        black 100%);
    z-index: 1;
}

.qibla-center-line-thin {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #7a7a7a;
    transform-origin: 50% 50%;
    mask: linear-gradient(to right, 
        black 0%, 
        black 3%, 
        transparent 3%, 
        transparent 97%, 
        black 97%, 
        black 100%);
    -webkit-mask: linear-gradient(to right, 
        black 0%, 
        black 3%, 
        transparent 3%, 
        transparent 97%, 
        black 97%, 
        black 100%);
    z-index: 1;
}

.qibla-bearing-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 1px;
    background: #7a7a7a;
    transform-origin: 0% 50%;
    z-index: 2;
}

.qibla-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7a7a7a;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.qibla-degree-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    background: #9a9a9a;
}

.qibla-degree-marker.thick {
    width: 2px;
    height: 5%;
    margin-left: -1px;
    margin-top: -50%;
    background: #6b6b6b;
}

.qibla-degree-marker.thin {
    width: 1px;
    height: 3%;
    margin-left: -0.5px;
    margin-top: -50%;
    background: #b5b5b5;
}

.qibla-direction-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 45%;
    background: #5a7fa8;
    transform-origin: bottom center;
    z-index: 10;
}

.qibla-direction-arrow {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid #5a7fa8;
    z-index: 11;
}

.qibla-cardinal {
    position: absolute;
    font-size: calc(36px * 0.7);
    font-weight: 600;
    z-index: 5;
    line-height: 1;
}

.qibla-cardinal.north {
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    color: #d32f2f;
    font-weight: 700;
}

.qibla-cardinal.south {
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    color: #2c2c2c;
}

.qibla-cardinal.east {
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    color: #2c2c2c;
}

.qibla-cardinal.west {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    color: #2c2c2c;
}

.qibla-status {
    text-align: center;
    padding: 20px;
    color: #8e8e93;
    font-size: 15px;
}

.qibla-error {
    background: #fff;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    color: #ff3b30;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Settings Tab */
.settings-container {
    max-width: 600px;
    margin: 0 auto;
}

.settings-section {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.settings-header {
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-dropdown-container {
    padding: 0 20px 14px 20px;
}

#notification-settings-list.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.settings-dropdown-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding: 0 20px;
}

.settings-dropdown {
    width: 100%;
    padding: 14px 16px;
    font-size: 17px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #000;
    background: #f2f2f7;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23007aff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}

.manual-city-input {
    padding-right: 16px;
}

.manual-city-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.manual-city-results.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.manual-city-clear {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e5e5ea;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.manual-city-result {
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e5e5ea;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
}

.manual-city-current {
    margin-top: 8px;
    font-size: 12px;
    color: #8e8e93;
}

html.dark-theme .manual-city-result {
    background: #1c1c1e;
    border-color: #2c2c2e;
    color: #f2f2f7;
}

html.dark-theme .manual-city-clear {
    background: #1c1c1e;
    border-color: #2c2c2e;
    color: #f2f2f7;
}

.settings-dropdown:hover {
    background-color: #e8e8ed;
}

.settings-dropdown:focus {
    outline: none;
    border-color: #007aff;
    background-color: #fff;
}

.settings-dropdown option {
    padding: 10px;
    font-size: 17px;
}

.settings-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e5e5ea;
}

.settings-toggle-item:last-child {
    border-bottom: none;
}

.settings-toggle-label {
    font-size: 17px;
    color: #000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.settings-toggle-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    line-height: 1;
}

.settings-toggle-icon.dark {
    display: none;
}

html.dark-theme .settings-toggle-icon.light {
    display: none;
}

html.dark-theme .settings-toggle-icon.dark {
    display: inline-flex;
}

/* iOS-style switch: real track + thumb (animates reliably in iOS WebView) */
.settings-toggle-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.settings-toggle-switch {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    outline: none;
}

.settings-toggle-track {
    display: block;
    width: 51px;
    height: 31px;
    border-radius: 16px;
    background: #e9e9eb;
    position: relative;
    flex-shrink: 0;
}

.settings-toggle-switch:checked + .settings-toggle-track {
    background: #34c759;
}

.settings-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.1);
    transform: translateX(0);
}

.settings-toggle-switch:checked + .settings-toggle-track .settings-toggle-thumb {
    transform: translateX(20px);
}

.settings-toggle-control:has(.settings-toggle-switch:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

html.dark-theme .settings-toggle-track {
    background: rgba(120, 120, 128, 0.32);
}

html.dark-theme .settings-toggle-switch:checked + .settings-toggle-track {
    background: #34c759;
}

.settings-toggle-item.disabled .settings-toggle-label {
    opacity: 0.5;
    color: #8e8e93;
}

/* Bottom Tab Bar */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #e5e5ea;
    display: flex;
    justify-content: space-around;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 1000;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.tab-item:active {
    opacity: 0.6;
}

.tab-icon {
    font-size: 24px;
    margin-bottom: 4px;
    transition: color 0.2s;
}

.tab-label {
    font-size: 11px;
    font-weight: 500;
    transition: color 0.2s;
}

.tab-item.active .tab-icon,
.tab-item.active .tab-label {
    color: #007aff;
}

.tab-item:not(.active) .tab-icon,
.tab-item:not(.active) .tab-label {
    color: #8e8e93;
}

/* Refresh Button */
.refresh-button {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top, 0px));
    right: calc(20px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #fff;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    z-index: 100;
    transition: transform 0.2s;
}

.refresh-button:active {
    transform: scale(0.95);
}

.refresh-button.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hide refresh button on iOS - native geolocation provides fresh location without manual refresh */
html.platform-ios .refresh-button {
    display: none;
}

/* iOS default: tab bar only (banner tabs use data-banner-layout="active") */
html.platform-ios body,
html.admob-ios body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Banner tabs: 50px ad row + 10px themed fill — tab bar lifted above ad slot */
html.admob-ios {
    --native-admob-banner-ad-height: 50px;
    --native-admob-banner-chrome-fill: 10px;
    --native-admob-banner-slot-height: 60px;
    --native-admob-tab-row-height: 54px;
    --native-admob-tab-bar-layout-height: 54px;
    --native-admob-bottom-chrome-height: 114px;
    --native-admob-content-inset-bottom: var(--native-admob-bottom-chrome-height, 114px);
}

html[data-banner-layout="active"].platform-ios .tab-bar,
html[data-banner-layout="active"].admob-ios .tab-bar {
    bottom: var(--native-admob-banner-slot-height, 60px);
    height: var(--native-admob-tab-row-height, 54px);
    padding: 6px 0 8px;
    box-sizing: border-box;
    align-items: center;
    transition: none;
}

/* Unified bottom shell: tab row + ad row + home indicator (one frosted surface) */
#admob-bottom-shell {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 899;
    pointer-events: none;
    background: var(--app-bottom-chrome-bg, rgba(255, 255, 255, 0.42));
    backdrop-filter: var(--app-bottom-chrome-blur, saturate(180%) blur(40px));
    -webkit-backdrop-filter: var(--app-bottom-chrome-blur, saturate(180%) blur(40px));
    border-top: 1px solid var(--app-bottom-chrome-border, rgba(0, 0, 0, 0.08));
    box-sizing: border-box;
}

/* Legacy node — safe-area fill is covered by #admob-bottom-shell */
#admob-chrome-fill {
    display: none;
}

/* Ad row: transparent overlay for loading shimmer only (shell provides the glass) */
#admob-banner-backdrop {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 901;
    pointer-events: none;
    background: transparent;
    border: none;
    overflow: hidden;
}

/* Placeholder while native ad loads or swaps between banner tabs */
#admob-banner-backdrop.admob-banner-slot--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.04) 45%,
        rgba(0, 0, 0, 0.07) 50%,
        rgba(0, 0, 0, 0.04) 55%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: admob-banner-shimmer 1.15s ease-in-out infinite;
}

html.dark-theme #admob-banner-backdrop.admob-banner-slot--loading::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.03) 55%,
        transparent 100%
    );
}

@keyframes admob-banner-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Web placeholder stays visible under native ad; native layer fades in via iOS (500ms) */
html.admob-banner-ad-ready #admob-banner-backdrop.admob-banner-slot--loading {
    opacity: 1;
}

/* Scroll padding matches fixed bottom chrome (tab row + ad slot) */
html[data-banner-layout="active"].platform-ios body,
html[data-banner-layout="active"].admob-ios body {
    padding-bottom: var(--native-admob-content-inset-bottom, 114px);
}

/* FAB must clear tab row + ad slot, not just the lifted tab row */
html[data-banner-layout="active"].platform-ios,
html[data-banner-layout="active"].admob-ios {
    --quran-search-fab-tab-bar-offset: var(--native-admob-bottom-chrome-height, 114px);
}

/* Premium subscribers: no banner slot — tab bar only */
html.subscriber-no-ads.platform-ios body,
html.subscriber-no-ads.admob-ios body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

html.subscriber-no-ads.platform-ios .tab-bar,
html.subscriber-no-ads.admob-ios .tab-bar {
    bottom: 0;
}

html.subscriber-no-ads .quran-search-fab {
    bottom: calc(var(--quran-search-fab-tab-bar-offset, 56px) + var(--quran-search-fab-gap, 25px));
}

html.platform-ios body::after {
    height: 0;
}

/* iOS: Tab bar + banner slot share one frosted chrome treatment */
html.platform-ios,
html.admob-ios {
    --quran-search-fab-tab-bar-offset: 60px;
    --app-bottom-chrome-bg: rgba(255, 255, 255, 0.42);
    --app-bottom-chrome-border: rgba(0, 0, 0, 0.08);
    --app-bottom-chrome-blur: saturate(180%) blur(40px);
}

html.platform-ios html.dark-theme,
html.dark-theme.platform-ios,
html.dark-theme.admob-ios,
html.admob-ios.dark-theme {
    --app-bottom-chrome-bg: rgba(28, 28, 30, 0.42);
    --app-bottom-chrome-border: rgba(255, 255, 255, 0.08);
}

html.platform-ios .tab-bar {
    left: 0;
    right: 0;
    width: auto;
    padding: 6px 0 8px;
    border-radius: 0;
    border-top: 1px solid var(--app-bottom-chrome-border, rgba(0, 0, 0, 0.08));
    background: var(--app-bottom-chrome-bg, rgba(255, 255, 255, 0.42));
    backdrop-filter: var(--app-bottom-chrome-blur, saturate(180%) blur(40px));
    -webkit-backdrop-filter: var(--app-bottom-chrome-blur, saturate(180%) blur(40px));
}

html.platform-ios .tab-item {
    padding: 6px 8px;
}

html.platform-ios .tab-icon {
    font-size: 21px;
    margin-bottom: 3px;
}

html.platform-ios .tab-label {
    font-size: 10px;
}

html.platform-ios html.dark-theme .tab-bar {
    background: var(--app-bottom-chrome-bg, rgba(28, 28, 30, 0.42));
    border-top-color: var(--app-bottom-chrome-border, rgba(255, 255, 255, 0.08));
    backdrop-filter: var(--app-bottom-chrome-blur, saturate(180%) blur(40px));
    -webkit-backdrop-filter: var(--app-bottom-chrome-blur, saturate(180%) blur(40px));
}

/* Tab icons sit on the unified shell — no second frosted layer underneath */
html[data-banner-layout="active"].platform-ios .tab-bar,
html[data-banner-layout="active"].admob-ios .tab-bar,
html[data-banner-layout="active"].has-native-admob-banner .tab-bar {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

html.dark-theme[data-banner-layout="active"] .tab-bar,
html.dark-theme[data-banner-layout="active"].platform-ios .tab-bar,
html.dark-theme[data-banner-layout="active"].admob-ios .tab-bar {
    background: transparent !important;
    border-top: none !important;
}

/* Dark Theme (html.dark-theme set in head before first paint to prevent flash) */
html.dark-theme,
html.dark-theme body {
    background: #000;
    color: #fff;
}

html.dark-theme .location-header,
html.dark-theme .prayer-times-list,
html.dark-theme .settings-section,
html.dark-theme .qibla-compass-container {
    background: #1c1c1e;
}

html.dark-theme .settings-toggle-item {
    border-bottom-color: #2c2c2e;
}

html.dark-theme #qibla-finder .qibla-compass-container {
    background: transparent;
}

html.dark-theme .qibla-compass {
    background: transparent;
    border-color: #7a7a7a;
}

html.dark-theme .qibla-degree-marker.thick {
    background: #6b6b6b;
}

html.dark-theme .qibla-degree-marker.thin {
    background: #4a4a4a;
}

html.dark-theme .qibla-cardinal.south,
html.dark-theme .qibla-cardinal.east,
html.dark-theme .qibla-cardinal.west {
    color: #d0d0d0;
}

html.dark-theme .qibla-cardinal.north {
    color: #d32f2f;
}

html.dark-theme .tab-title {
    color: #fff;
}

html.dark-theme .prayer-times-title {
    color: #fff;
}

html.dark-theme .qibla-header {
    color: #fff;
}

html.dark-theme .qibla-error {
    background: #1c1c1e;
    color: #ff3b30;
}

html.dark-theme .location-title,
html.dark-theme .location-coordinates,
html.dark-theme .sunrise-time {
    color: #8e8e93;
}

html.dark-theme .location-value {
    color: #fff;
}

html.dark-theme .prayer-item {
    border-bottom-color: #38383a;
}

html.dark-theme .prayer-item.active {
    background: #1c1c1e;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

html.dark-theme .prayer-item.active .prayer-name-english,
html.dark-theme .prayer-item.active .prayer-name-arabic {
    color: #fff !important;
}

html.dark-theme .prayer-item.active .prayer-time {
    color: #fff !important;
}

html.dark-theme .prayer-item.active .sunrise-time {
    color: #8e8e93 !important;
}

html.dark-theme .prayer-name-english,
html.dark-theme .prayer-name-arabic {
    color: #fff;
}

html.dark-theme .prayer-item.passed .prayer-name-english,
html.dark-theme .prayer-item.passed .prayer-name-arabic,
html.dark-theme .prayer-item.passed .prayer-time,
html.dark-theme .prayer-item.future-date .prayer-name-english,
html.dark-theme .prayer-item.future-date .prayer-name-arabic,
html.dark-theme .prayer-item.future-date .prayer-time,
html.dark-theme .prayer-item.past-date .prayer-name-english,
html.dark-theme .prayer-item.past-date .prayer-name-arabic,
html.dark-theme .prayer-item.past-date .prayer-time {
    color: #636366;
}

html.dark-theme .prayer-check-button {
    background: #1c1c1e;
    border-color: #38383a;
}

html.dark-theme .prayer-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}

html.dark-theme .prayer-check-button.checked.out-of-time {
    background: #8e8e93;
    border-color: #8e8e93;
}

html.dark-theme .prayer-check-button.progress-indicator .progress-ring-bg {
    stroke: #38383a;
}

html.dark-theme .settings-dropdown {
    background: #1c1c1e;
    border-color: #38383a;
    color: #fff;
}

html.dark-theme .settings-dropdown:hover {
    background-color: #2c2c2e;
}

html.dark-theme .settings-dropdown:focus {
    background-color: #1c1c1e;
    border-color: #007aff;
}

html.dark-theme .settings-dropdown option {
    background: #1c1c1e;
    color: #fff;
}

html.dark-theme .settings-toggle-label {
    color: #fff;
}

html.dark-theme .settings-dropdown-label {
    color: #8e8e93;
}

html.dark-theme .tab-bar {
    background: rgba(28, 28, 30, 0.72);
    border-top-color: #38383a;
}

html.dark-theme .refresh-button {
    background: #1c1c1e;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

html.dark-theme .error {
    background: #1c1c1e;
    color: #ff3b30;
}

html.dark-theme .loading {
    color: #8e8e93;
}

html.dark-theme .date-stamp {
    color: rgba(255, 255, 255, 0.7);
}

/* Notification Permission Modal */
.notification-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: calc(20px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px));
}

.notification-modal {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in;
}

.notification-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

.notification-modal-message {
    font-size: 15px;
    color: #8e8e93;
    line-height: 1.5;
    margin-bottom: 24px;
}

.notification-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.notification-modal-button {
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    border: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.notification-modal-button:active {
    transform: scale(0.95);
}

.notification-modal-button-cancel {
    background: #f2f2f7;
    color: #000;
}

.notification-modal-button-cancel:hover {
    opacity: 0.7;
}

.notification-modal-button-allow {
    background: #007aff;
    color: #fff;
}

.notification-modal-button-allow:hover {
    opacity: 0.8;
}

html.dark-theme .notification-modal {
    background: #1c1c1e;
}

html.dark-theme .notification-modal-title {
    color: #fff;
}

html.dark-theme .notification-modal-button-cancel {
    background: #2c2c2e;
    color: #fff;
}
/* Quran Tab Styles */
.quran-container {
    width: 100%;
    max-width: var(--quran-layout-max-width);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Prayer, Quran, Qibla, Social, Settings: shared fixed header + scroll-driven shrink */
#prayer-times.tab-content,
#quran.tab-content,
#qibla-finder.tab-content,
#social.tab-content,
#settings.tab-content {
    padding: 0 var(--quran-layout-inline-pad, 20px) 20px;
    --tab-header-collapse: 0;
    --tab-header-collapse-range: 20px;
    /* Inner inset after tab gutter (header bar already sits in tab column) */
    --tab-title-card-inset: 16px;
    --tab-header-pad-top: 3px;
    --tab-header-pad-bottom: 6px;
    --tab-title-pad-top: calc(6px * (1 - var(--tab-header-collapse)));
    --tab-title-pad-bottom: calc(4px * (1 - var(--tab-header-collapse)));
    --tab-title-margin-bottom: calc(4px * (1 - var(--tab-header-collapse)));
    --tab-title-en-size: calc(20px + 8px * (1 - var(--tab-header-collapse)));
    --tab-title-ar-size: calc(10px + 4px * (1 - var(--tab-header-collapse)));
    --tab-title-ar-margin-top: calc(2px * (1 - var(--tab-header-collapse)));
    --tab-header-block-height: calc(
        var(--tab-header-pad-top) + var(--tab-title-pad-top) + var(--tab-title-pad-bottom) +
        var(--tab-title-margin-bottom) + var(--tab-header-pad-bottom) +
        var(--tab-title-en-size) * 1.15 + var(--tab-title-ar-margin-top) + var(--tab-title-ar-size) * 1.3
    );
}

#qibla-finder.tab-content {
    padding-bottom: 8px;
}

#settings.tab-content {
    --tab-header-block-height: calc(
        var(--tab-header-pad-top) + var(--tab-title-pad-top) + var(--tab-title-pad-bottom) +
        var(--tab-title-margin-bottom) + var(--tab-header-pad-bottom) +
        max(var(--tab-title-en-size) * 1.15, 48px)
    );
}

.tab-fixed-header-spacer {
    height: var(--tab-header-block-height);
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.tab-fixed-header {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    /* Match tab content column (body safe-area + tab inline pad), not full viewport */
    left: calc(env(safe-area-inset-left, 0px) + var(--quran-layout-inline-pad, 20px));
    right: calc(env(safe-area-inset-right, 0px) + var(--quran-layout-inline-pad, 20px));
    z-index: 20;
    width: auto;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    padding-top: var(--tab-header-pad-top);
    padding-bottom: var(--tab-header-pad-bottom);
    margin-bottom: 0;
    background: transparent;
    isolation: isolate;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* One continuous mask: notch + header (100px fade zone below safe area) */
.tab-fixed-header::before {
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    height: calc(100px + env(safe-area-inset-top, 0px));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(242, 242, 247, 1) 0,
        rgba(242, 242, 247, 1) env(safe-area-inset-top, 0px),
        rgba(242, 242, 247, 1) calc(env(safe-area-inset-top, 0px) + 20px),
        rgba(242, 242, 247, 0.8) calc(env(safe-area-inset-top, 0px) + 40px),
        rgba(242, 242, 247, 0.4) calc(env(safe-area-inset-top, 0px) + 60px),
        rgba(242, 242, 247, 0) calc(env(safe-area-inset-top, 0px) + 100px)
    );
}

html.dark-theme .tab-fixed-header::before {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0,
        rgba(0, 0, 0, 1) env(safe-area-inset-top, 0px),
        rgba(0, 0, 0, 1) calc(env(safe-area-inset-top, 0px) + 20px),
        rgba(0, 0, 0, 0.8) calc(env(safe-area-inset-top, 0px) + 40px),
        rgba(0, 0, 0, 0.4) calc(env(safe-area-inset-top, 0px) + 60px),
        rgba(0, 0, 0, 0) calc(env(safe-area-inset-top, 0px) + 100px)
    );
}

.tab-fixed-page-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: var(--tab-title-pad-top) var(--quran-layout-inline-pad, 20px) var(--tab-title-pad-bottom);
    padding-left: var(--tab-title-card-inset);
    margin: 0 0 var(--tab-title-margin-bottom);
    font-size: inherit;
    font-weight: inherit;
    color: #000;
}

.tab-fixed-page-title-en {
    display: block;
    font-size: var(--tab-title-en-size);
    font-weight: 700;
    line-height: 1.15;
}

.tab-fixed-page-title-ar {
    display: block;
    font-family: var(--quran-arabic-font);
    font-size: var(--tab-title-ar-size);
    font-weight: 600;
    line-height: 1.3;
    margin-top: var(--tab-title-ar-margin-top);
    direction: rtl;
}

html.dark-theme .tab-fixed-page-title,
html.dark-theme .tab-fixed-page-title-en {
    color: #fff;
}

/* Settings: single-line title with app icon */
.tab-fixed-page-title--single {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.tab-fixed-page-title--single .settings-logo {
    width: 48px;
    height: 48px;
}

#qibla-finder .tab-fixed-header-spacer,
#qibla-finder .date-location-wrapper {
    flex-shrink: 0;
}

.quran-table-title {
    font-size: 20px;
    font-weight: 600;
    color: #8e8e93;
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
}

/* Quran cards */
.quran-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
}

html.dark-theme .quran-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    background: #1c1c1e;
}

/* Quran: FAB + top floating pill search (tab bar stays visible) */
.quran-search-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--quran-search-fab-tab-bar-offset, 56px) + var(--quran-search-fab-gap, 25px));
    z-index: 1001;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #e5e5ea;
    color: #636366;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.quran-search-fab:active {
    transform: scale(0.94);
    opacity: 0.9;
}

body.quran-tab-active .quran-search-fab:not([hidden]) {
    display: flex;
}

body.quran-search-active .quran-search-fab,
body.quran-surah-detail-active .quran-search-fab {
    display: none !important;
}

/* Surah reading: full-height viewport, no tab bar or ad chrome */
body.quran-tab-active.quran-surah-detail-active {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body.quran-tab-active.quran-surah-detail-active .tab-bar,
html.quran-surah-reading-fullscreen .tab-bar,
body.quran-tab-active.quran-surah-detail-active #admob-bottom-shell,
body.quran-tab-active.quran-surah-detail-active #admob-banner-backdrop,
html.quran-surah-reading-fullscreen #admob-bottom-shell,
html.quran-surah-reading-fullscreen #admob-banner-backdrop {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
}

body.quran-tab-active.quran-surah-detail-active #quran.tab-content.active {
    /* Top: body safe-area only (like .page-sticky at scroll 0). Sides match tab inset. */
    padding:
        0
        max(var(--quran-layout-inline-pad), env(safe-area-inset-right, 0px))
        env(safe-area-inset-bottom, 0px)
        max(var(--quran-layout-inline-pad), env(safe-area-inset-left, 0px));
    min-height: 100dvh;
    min-height: 100vh;
    box-sizing: border-box;
}

body.quran-tab-active.quran-surah-detail-active .surah-detail-container {
    max-width: var(--quran-layout-max-width);
    margin: 0 auto;
    padding-bottom: 8px;
}

body.quran-tab-active.quran-surah-detail-active .surah-verses-container {
    margin-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

body.quran-tab-active.quran-surah-detail-active .surah-navigation-buttons {
    margin-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

/* Transparent dock shell; pill styling on the input */
.quran-search-dock {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    display: none;
    align-items: center;
    padding:
        max(6px, env(safe-area-inset-top, 0px))
        max(var(--quran-layout-inline-pad), env(safe-area-inset-right, 0px))
        4px
        max(var(--quran-layout-inline-pad), env(safe-area-inset-left, 0px));
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-sizing: border-box;
    pointer-events: none;
}

body.quran-search-active .quran-search-dock {
    display: flex;
    pointer-events: auto;
}

body.quran-search-active {
    overflow: hidden;
}

body.quran-search-active #quran.tab-content.active {
    padding: 0 var(--quran-layout-inline-pad) 20px;
    animation: none;
}

body.quran-search-active #quran .tab-fixed-header,
body.quran-search-active #quran .tab-fixed-header-spacer,
body.quran-search-active #quran-progress-summary,
body.quran-search-active #quran-bookmarks-panel {
    display: none !important;
}

/* In-flow spacer under fixed dock (#quran already starts below safe-area). */
body.quran-search-active #quran .quran-container::before {
    content: '';
    display: block;
    height: max(
        6px,
        calc(var(--quran-search-dock-height, 56px) - env(safe-area-inset-top, 0px) + 6px)
    );
    flex-shrink: 0;
}

body.quran-search-active #quran .quran-container {
    padding-top: 0;
}

body.quran-search-active .quran-table-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 8px;
    padding-top: 0;
    transition: none;
    max-height: var(
        --quran-search-card-max-height,
        calc(
            100dvh - var(--quran-search-list-top-inset, calc(var(--quran-search-dock-height, 56px) + 6px))
            - var(--native-admob-tab-bar-layout-height, 56px) - 20px
        )
    );
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* No software keyboard: grow table to use space between dock and tab bar */
body.quran-search-active:not(.quran-search-keyboard-open) .quran-table-card {
    height: var(
        --quran-search-card-max-height,
        calc(
            100dvh - var(--quran-search-list-top-inset, calc(var(--quran-search-dock-height, 56px) + 6px))
            - var(--native-admob-tab-bar-layout-height, 56px) - 20px
        )
    );
    min-height: var(
        --quran-search-card-max-height,
        calc(
            100dvh - var(--quran-search-list-top-inset, calc(var(--quran-search-dock-height, 56px) + 6px))
            - var(--native-admob-tab-bar-layout-height, 56px) - 20px
        )
    );
}

body.quran-search-active:not(.quran-search-keyboard-open) .quran-list-viewport {
    flex: 1 1 auto;
    min-height: 0;
}

/* Software keyboard: shrink card to JS-computed max (viewport often does not resize) */
body.quran-search-active.quran-search-keyboard-open .quran-table-card {
    height: var(--quran-search-card-max-height);
    min-height: 0;
    max-height: var(--quran-search-card-max-height);
}

body.quran-search-active.quran-search-keyboard-open .quran-list-viewport {
    flex: 1 1 auto;
    min-height: 0;
}

body.quran-search-active .quran-surah-table-head {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    background: #fafafa;
    box-shadow: 0 1px 0 0 #e5e5ea;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

html.dark-theme body.quran-search-active .quran-surah-table-head {
    background: #2c2c2e;
    box-shadow: 0 1px 0 0 #38383a;
}

body.quran-search-active .quran-list-viewport {
    min-height: 0;
    max-height: none;
    overflow: visible;
    flex: 1 0 auto;
}

.quran-search-dock-inner {
    width: 100%;
    max-width: var(--quran-layout-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    pointer-events: auto;
}

/* Single pill: field + optional clear + Cancel */
.quran-search-pill {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 4px 6px 4px 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quran-search-pill:focus-within {
    border-color: rgba(0, 122, 255, 0.35);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(0, 122, 255, 0.12);
}

.quran-search-dock .quran-search-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 4px 8px 14px;
    font-size: 16px;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1c1c1e;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.quran-search-dock .quran-search-input::placeholder {
    color: #9a9a9f;
}

.quran-search-dock .quran-search-clear {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #8e8e93;
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

.quran-search-dock .quran-search-clear:active {
    color: #636366;
}

.quran-search-cancel {
    flex-shrink: 0;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    color: #007aff;
    font-size: 16px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.2;
    padding: 8px 12px 8px 10px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.quran-search-cancel:active {
    opacity: 0.55;
}

html.dark-theme .quran-search-fab {
    background: #3a3a3c;
    color: #aeaeb2;
    box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.35);
}

html.dark-theme .quran-search-pill {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

html.dark-theme .quran-search-pill:focus-within {
    border-color: rgba(10, 132, 255, 0.4);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(10, 132, 255, 0.14);
}

html.dark-theme .quran-search-dock .quran-search-input {
    color: #f2f2f7;
}

html.dark-theme .quran-search-dock .quran-search-input::placeholder {
    color: #6b6b6d;
}

html.dark-theme .quran-search-cancel {
    border-left-color: rgba(255, 255, 255, 0.1);
    color: #0a84ff;
}

html.dark-theme .quran-search-dock .quran-search-clear {
    color: #8e8e93;
}

/* Scrollable surah table: always 7 visible rows (78px each); height reinforced in quran.js */
.quran-list-viewport {
    --quran-surah-row-height: 78px;
    --quran-list-visible-rows: 7;
    --quran-list-height: calc(var(--quran-surah-row-height) * var(--quran-list-visible-rows));
    height: var(--quran-list-height);
    min-height: var(--quran-list-height);
    max-height: var(--quran-list-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 0 0 12px 12px;
}

.quran-list-viewport .quran-list {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.quran-list-viewport .quran-list > .surah-item {
    min-height: var(--quran-surah-row-height);
    box-sizing: border-box;
}

.quran-list-viewport .quran-list > .surah-item:first-child {
    border-top: none;
}

.quran-table-card .quran-list-viewport {
    border-radius: 0 0 12px 12px;
}

.surah-search-item {
    padding: 12px 20px !important;
    border-bottom: 1px solid #e5e5ea;
    background: #f8f8f8;
}

.surah-search-item .surah-item-left {
    width: 100%;
    margin: 0;
    gap: 0;
}

.search-results-section {
    margin-bottom: 24px;
}

.search-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #8e8e93;
    margin-bottom: 12px;
    padding: 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.surah-search-verse-count {
    font-size: 11px;
    line-height: 1.3;
    color: #8e8e93;
    font-style: italic;
    font-weight: 400;
    margin-top: 2px;
}

.surah-item--verse-match {
    align-items: flex-start;
}

.surah-item--verse-match .surah-number {
    margin-top: 4px;
}

.surah-item--verse-match .surah-title-ar {
    margin-top: 4px;
}

.no-search-results {
    text-align: center;
    padding: 40px 20px;
    color: #8e8e93;
    font-size: 16px;
}

html.dark-theme .surah-search-item {
    background: #1c1c1e;
}

html.dark-theme .search-section-title {
    color: #636366;
}

html.dark-theme .surah-search-verse-count {
    color: #636366;
}

html.dark-theme .no-search-results {
    color: #636366;
}

.quran-list {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.load-more-button {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 20px auto 0;
    padding: 14px 20px;
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.load-more-button:hover {
    opacity: 0.8;
}

.load-more-button:active {
    opacity: 0.6;
}

.surah-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e5ea;
}

.surah-item:last-child {
    border-bottom: none;
}

@keyframes surah-return-highlight {
    0% {
        background-color: #f2f2f7;
    }
    65% {
        background-color: #f2f2f7;
    }
    100% {
        background-color: transparent;
    }
}

.surah-item.surah-item--return-highlight {
    animation: surah-return-highlight 1.2s ease-out forwards;
}

html.dark-theme .surah-item.surah-item--return-highlight {
    animation-name: surah-return-highlight-dark;
}

@keyframes surah-return-highlight-dark {
    0% {
        background-color: #38383a;
    }
    65% {
        background-color: #38383a;
    }
    100% {
        background-color: transparent;
    }
}

.surah-item-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.surah-item-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.surah-check-button {
    width: 32px;
    height: 32px;
    border: 2px solid #d1d1d6;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.surah-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}

.surah-check-button.checked::after {
    content: '✓';
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    z-index: 2;
    position: absolute;
}

.surah-number {
    font-size: 22px;
    font-weight: 600;
    color: #8e8e93;
    min-width: 40px;
    margin-right: 13px;
}

.surah-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.surah-title {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.surah-title-en {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 400;
    margin-top: 2px;
}

.surah-title-ar {
    font-size: 24px;
    font-weight: 500;
    color: #000;
    min-width: 100px;
    text-align: right;
    margin-right: 19px;
    font-family: var(--quran-arabic-font);
}

html.dark-theme .quran-list {
    background: #1c1c1e;
}

html.dark-theme .quran-table-title {
    color: #8e8e93;
}

html.dark-theme .load-more-button {
    background: #0a84ff;
}

html.dark-theme .surah-item {
    border-bottom-color: #38383a;
}

html.dark-theme .surah-title {
    color: #fff;
}

html.dark-theme .surah-title-en {
    color: #a1a1a6;
}

html.dark-theme .surah-title-ar {
    color: #ffffff;
}


/* Surah Detail Page Styles */
.surah-detail-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Surah reader: non-selectable media, bookmark, play, and top toolbar toggles */
.surah-detail-container .surah-quick-toggle,
.surah-detail-container .verse-audio-button,
.surah-detail-container .verse-bookmark-button,
.surah-detail-container .audio-control-button,
.surah-detail-container .bookmark-panel,
.surah-detail-container .bookmark-panel-title,
.surah-detail-container .bookmark-item,
.surah-detail-container .bookmark-remove {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Shared surah-style sticky header for Zakat and Analytics */
.surah-style-sticky-sentinel {
    height: 1px;
}

.surah-style-sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f2f2f7;
    padding: max(6px, env(safe-area-inset-top, 0px)) 0 6px;
    margin-bottom: 8px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
}

.surah-style-sticky.is-sticky {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    box-sizing: border-box;
    background: linear-gradient(to bottom, #f2f2f7 0%, rgba(242, 242, 247, 0.85) 65%, rgba(242, 242, 247, 0.5) 86%, rgba(242, 242, 247, 0) 100%);
}

.surah-style-sticky:not(.is-sticky) .zakat-header,
.surah-style-sticky:not(.is-sticky) .analytics-header {
    padding-left: max(8px, env(safe-area-inset-left));
}

.surah-style-sticky.is-sticky {
    top: 0;
    margin-bottom: 0;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 30px;
}

.surah-style-sticky.is-sticky .zakat-header,
.surah-style-sticky.is-sticky .analytics-header {
    display: flex;
    align-items: center;
    padding: 6px max(20px, env(safe-area-inset-right)) 6px max(20px, env(safe-area-inset-left));
    min-height: 36px;
}

html.dark-theme .surah-style-sticky {
    background: #000;
}

html.dark-theme .surah-style-sticky.is-sticky {
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0) 100%);
}

/*
 * Surah header: always uses Zakat .surah-style-sticky.is-sticky chrome (gradient + full bleed).
 * top: safe-area pins below notch without duplicating body padding-top.
 */
.surah-detail-sticky {
    --surah-sticky-gradient: linear-gradient(
        to bottom,
        #f2f2f7 0%,
        rgba(242, 242, 247, 0.85) 65%,
        rgba(242, 242, 247, 0.5) 86%,
        rgba(242, 242, 247, 0) 100%
    );
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 25;
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    padding-top: 0;
    padding-bottom: 30px;
    box-sizing: border-box;
    background: var(--surah-sticky-gradient);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.surah-detail-sticky-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--quran-layout-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 4px 20px 0;
    box-sizing: border-box;
}

.surah-detail-scroll {
    box-sizing: border-box;
}

.surah-detail-header {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

html.dark-theme .surah-detail-sticky {
    --surah-sticky-gradient: linear-gradient(
        to bottom,
        #000 0%,
        rgba(0, 0, 0, 0.85) 50%,
        rgba(0, 0, 0, 0.5) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    background: var(--surah-sticky-gradient);
}

.surah-detail-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.surah-detail-title-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.surah-detail-title-stack .surah-detail-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35em;
    line-height: 1.25;
}

.surah-detail-title-stack .surah-detail-title-ar {
    font-size: 17px;
    font-weight: 600;
    color: #000;
    direction: rtl;
    font-family: var(--quran-arabic-font);
}

.surah-detail-title-stack .surah-detail-title-en {
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.surah-detail-title-stack .surah-detail-title-translation {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #8e8e93;
}

.surah-quick-toggles {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 8px;
    margin-left: auto;
}

.surah-quick-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e5e5ea;
    border-radius: 50%;
    background: #fff;
    color: #3a3a3c;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s, transform 0.1s;
}

.surah-quick-toggle:hover {
    opacity: 0.8;
}

.surah-quick-toggle:active {
    transform: scale(0.98);
}

.surah-quick-toggle-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    line-height: 1;
    pointer-events: none;
}

.surah-quick-toggle.active {
    background: rgba(0, 122, 255, 0.12);
    border-color: rgba(0, 122, 255, 0.35);
}

.back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 0;
    flex-shrink: 0;
}

.back-button:hover {
    opacity: 0.7;
}

.back-button:active {
    opacity: 0.5;
}

.back-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.surah-detail-title-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.surah-detail-title-ar {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    direction: rtl;
    font-family: var(--quran-arabic-font);
}

.surah-detail-title-en {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.surah-detail-title-translation {
    font-size: 18px;
    font-weight: 500;
    color: #8e8e93;
}


.surah-verses-container {
    background: #fff;
    border-radius: 16px;
    padding: 20px;   
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.bookmark-panel {
    background: #fff;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 12px;
}

.bookmark-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #3a3a3c;
    margin-bottom: 8px;
}

.bookmark-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bookmark-item {
    background: transparent;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #3a3a3c;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.bookmark-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bookmark-remove {
    background: transparent;
    border: none;
    color: #8e8e93;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    transition: opacity 0.2s, background 0.2s;
    opacity: 0.7;
}

.bookmark-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.bookmark-item:hover {
    opacity: 0.7;
}

.bookmark-item:active {
    transform: scale(0.97);
}

.quran-bookmark-panel .bookmark-list {
    align-items: center;
}

.quran-bookmark-item {
    white-space: normal;
    text-align: left;
    max-width: 100%;
}

.surah-verse {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #e5e5ea;
}

/* Remove gaps for continuous reading when audio player is present */
.surah-verses-container .surah-verse {
    padding: 0;
    border-bottom: none;
    gap: 8px;
    margin: 0;
}

.surah-detail-container.verse-padding-needed .surah-verses-container .surah-verse {
    padding: 12px 0 0;
}

.verse-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.surah-verse:last-child {
    border-bottom: none;
}

.surah-verse.bookmark-highlight {
    background: rgba(255, 235, 59, 0.2);
    border-radius: 12px;
}

.verse-number-container {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-top: 5px;
}

.verse-bookmark-button {
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.1s;
    width: 22px;
    height: 22px;
}

.verse-bookmark-button:hover {
    opacity: 0.7;
}

.verse-bookmark-button:active {
    transform: scale(0.95);
}

.verse-bookmark-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    line-height: 1;
}

.verse-number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: #a1a1a6;
    color: #fff;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

.verse-text {
    font-size: var(--quran-verse-font-size, 20px);
    line-height: 2.4;
    color: #000;
    font-family: var(--quran-arabic-font);
    direction: rtl;
    text-align: right;
}


.surah-verse.combined {
    border-bottom: none;
}

.surah-verse.combined .verse-content {
    width: 100%;
}

.surah-verse.combined {
    border-bottom: none;
}

.surah-verse.combined .verse-content {
    width: 100%;
}

.verse-transliteration {
    font-size: var(--quran-verse-font-size-english, 18px);
    line-height: 1.6;
    color: #8e8e93;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    direction: ltr;
    text-align: left;
    margin-top: 4px;
    margin-bottom: 4px;
    font-style: italic;
}


.verse-translation {
    font-size: var(--quran-verse-font-size-english, 18px);
    line-height: 1.6;
    color: #636366;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    direction: ltr;
    text-align: left;
    font-style: normal;
    margin-top: 4px;
}


.verse-translation-spacer {
    height: 8px;
}

.verse-ending {
    color: #8e8e93;
    font-family: var(--quran-arabic-font);
    display: inline;
    margin-left: 8px;
    unicode-bidi: embed;
    font-feature-settings: "kern" 1;
    -webkit-font-feature-settings: "kern" 1;
}

.surah-detail-error {
    text-align: center;
    padding: 40px 20px;
    color: #ff3b30;
}

.surah-item {
    transition: background 0.2s;
}

.surah-item:hover {
    background: #f2f2f7;
}

/* Dark Theme for Surah Detail */
html.dark-theme .surah-detail-title-ar,
html.dark-theme .surah-detail-title-en {
    color: #fff;
}

html.dark-theme .surah-detail-title-stack .surah-detail-title-line {
    color: #fff;
}

html.dark-theme .surah-detail-title-stack .surah-detail-title-translation {
    color: #8e8e93;
}

html.dark-theme .surah-quick-toggle {
    background: #1c1c1e;
    border-color: #3a3a3c;
    color: #f2f2f7;
}

html.dark-theme .surah-quick-toggle.active {
    background: rgba(10, 132, 255, 0.2);
    border-color: rgba(10, 132, 255, 0.4);
    color: #64a8ff;
}

html.dark-theme .surah-verses-container {
    background: #1c1c1e;
}

html.dark-theme .bookmark-panel {
    background: #1c1c1e;
}

html.dark-theme .bookmark-panel-title {
    color: #d1d1d6;
}

html.dark-theme .bookmark-item {
    border-color: #2c2c2e;
    color: #f2f2f7;
}

html.dark-theme .bookmark-remove {
    color: #a1a1a6;
}

html.dark-theme .surah-verse {
    border-bottom-color: #38383a;
}

html.dark-theme .verse-number {
    background: #48484a;
}

html.dark-theme .verse-text {
    color: #fff;
}

html.dark-theme .verse-ending {
    color: #8e8e93;
}

html.dark-theme .verse-transliteration {
    color: #8e8e93;
}

html.dark-theme .verse-translation {
    color: #a1a1a6;
}

html.dark-theme .surah-item:hover {
    background: #1c1c1e;
}

html.dark-theme .surah-check-button {
    background: #1c1c1e;
    border-color: #38383a;
}

html.dark-theme .surah-check-button.checked {
    background: #34c759;
    border-color: #34c759;
}


/* Audio Player Styles */
.verse-audio-button {
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.1s;
    width: 22px;
    height: 22px;
}

.verse-audio-button:hover {
    opacity: 0.7;
}

.verse-audio-button:active {
    transform: scale(0.95);
}

.verse-audio-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    line-height: 1;
}

/* Search-pill colors; same card shape as .surah-verses-container */
.surah-audio-player {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.audio-player-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    flex-wrap: nowrap;
}

.audio-player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex: 0 0 auto;
    min-width: 0;
}

.audio-control-button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.1s;
    border-radius: 50%;
    line-height: 0;
}

.audio-control-button:hover {
    opacity: 0.7;
}

.audio-control-button:active {
    transform: scale(0.95);
}

.audio-control-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.audio-control-button:disabled:hover {
    opacity: 0.3;
}

.audio-play-button {
    width: 56px;
    height: 56px;
    background: transparent;
    border-radius: 50%;
}

.audio-play-button:hover {
    opacity: 0.7;
}

.audio-control-icon {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}

.audio-play-button .audio-control-icon {
    width: 32px;
    height: 32px;
}

#previous-button .audio-control-icon,
#next-button .audio-control-icon {
    width: 26px;
    height: 26px;
}

.audio-player-info {
    font-size: 10px;
    color: #8e8e93;
    font-weight: 500;
    text-align: center;
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

#current-verse-info {
    text-align: center;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    min-width: 0;
    max-width: 160px;
    padding: 0 8px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-repeat-button {
    flex-shrink: 0;
    margin-left: 4px;
}

.verse-label {
    font-weight: 700;
}

/* Dark Theme for Audio Player */
html.dark-theme .surah-audio-player {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

html.dark-theme .audio-player-info {
    color: #a1a1a6;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    .surah-audio-player {
        padding: 16px;
    }
    
    .audio-player-content {
        gap: 8px;
    }
    
    .audio-player-controls {
        flex: 0 0 auto;
        justify-content: center;
        gap: 16px;
    }
    
    .audio-player-info {
        flex: 1;
        min-width: 0;
        justify-content: center;
        gap: 6px;
        font-size: 14px;
    }
    
    .audio-control-button {
        width: 44px;
        height: 44px;
    }
    
    .audio-play-button {
        width: 56px;
        height: 56px;
    }
    
    .audio-control-icon {
        width: 28px;
        height: 28px;
    }
    
    .audio-play-button .audio-control-icon {
        width: 32px;
        height: 32px;
    }

    #previous-button .audio-control-icon,
    #next-button .audio-control-icon {
        width: 26px;
        height: 26px;
    }
    
    .audio-repeat-button {
        margin-left: 4px;
        flex-shrink: 0;
    }
    
    #current-verse-info {
        font-size: 14px;
        gap: 4px;
    }
}

@media (max-width: 360px) {
    .audio-player-content {
        gap: 6px;
    }
    
    .audio-player-controls {
        gap: 12px;
    }
    
    .audio-control-button {
        width: 40px;
        height: 40px;
    }
    
    .audio-play-button {
        width: 52px;
        height: 52px;
    }
    
    .audio-control-icon {
        width: 26px;
        height: 26px;
    }
    
    .audio-play-button .audio-control-icon {
        width: 30px;
        height: 30px;
    }

    #previous-button .audio-control-icon,
    #next-button .audio-control-icon {
        width: 24px;
        height: 24px;
    }
    
    .audio-player-info {
        font-size: 12px;
        gap: 4px;
    }
    
    #current-verse-info {
        font-size: 12px;
    }
}

.surah-navigation-buttons {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5ea;
}

.surah-nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: #007aff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.surah-nav-button:hover:not(:disabled) {
    color: #0051d5;
    opacity: 0.8;
}

.surah-nav-button:active:not(:disabled) {
    opacity: 0.6;
}

.surah-nav-button:disabled {
    color: #8e8e93;
    cursor: not-allowed;
    opacity: 0.5;
}

html.dark-theme .surah-navigation-buttons {
    border-top-color: #38383a;
}

html.dark-theme .surah-nav-button {
    color: #0a84ff;
}

html.dark-theme .surah-nav-button:hover:not(:disabled) {
    color: #0051d5;
}

html.dark-theme .surah-nav-button:disabled {
    color: #636366;
}

/* Onboarding / Login overlay */
.onboarding-overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #fff;
    /* Allow vertical scrolling when content is taller than viewport (e.g. on
       iPad-scaled-iPhone windows that are shorter than iPhone Pro Max). Without
       this, flex centering clips overflow off both ends and the email button
       is unreachable. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

html.dark-theme .onboarding-overlay {
    background: #1c1c1e;
}

.onboarding-content {
    max-width: 400px;
    width: 100%;
    position: relative;
    /* margin: auto centers vertically (and horizontally) inside the column flex
       container when there's room, but allows the page to scroll when the
       content exceeds the viewport — replaces the previous align-items/justify-
       content centering, which clipped overflow with no recovery. */
    margin: auto;
    flex-shrink: 0;
}

/* Branding sits in normal flow at the top of the content stack. The "centered
   on splash, top on login" animation is achieved without absolute positioning:
   during loading, .onboarding-welcome and .onboarding-sign-in are collapsed
   (max-height: 0), so the content stack is just the branding and the parent
   flex container's `margin: auto` centers it vertically. When loading ends,
   welcome and sign-in expand their max-height in sync over 1 s — content
   grows downward, and `margin: auto` recalculates, so branding visually
   slides up to the top. No padding-top reservation, no overlap math. */
.onboarding-branding {
    text-align: center;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

/* Loading state: branding centered on screen */
/* Loading state: welcome (inside branding) and sign-in (below branding) are
   collapsed and invisible. With both collapsed, the content stack is only
   the branding (title + logo), so flex margin: auto on .onboarding-content
   centers the branding vertically inside the overlay. */
.onboarding-loading .onboarding-welcome,
.onboarding-loading .onboarding-sign-in {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Login state: welcome and sign-in expand their max-height over 1s. As the
   content stack grows downward, margin: auto recalculates and the branding
   visually slides up toward the top. Opacity fades in after the height
   transition (1s delay) so text doesn't appear mid-flight. */
.onboarding-overlay:not(.onboarding-loading) .onboarding-welcome {
    opacity: 1;
    visibility: visible;
    max-height: 200px;
    pointer-events: auto;
    transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease 1s, visibility 0s 1s;
}

.onboarding-overlay:not(.onboarding-loading) .onboarding-sign-in {
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    pointer-events: auto;
    transition: max-height 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease 1s, visibility 0s 1s;
}

/* Compact onboarding for shorter viewports.
   The default 320px padding-top + 180px logo + 4 full-size buttons stack was
   tuned for iPhone Pro Max (~932 CSS px tall). Shorter viewports (iPad-Air-
   11"-scaled-iPhone window, iPhone 8/SE, iPhone 13 mini) overflow that stack.
   Tighten logo, padding, and inter-element spacing so all sign-in options
   are visible without scrolling. The branding-to-top animation is driven
   solely by the `top` property on .onboarding-branding, so it remains intact
   across all breakpoints. */
@media (max-height: 800px) {
    .onboarding-image {
        max-height: 100px;
    }
    .onboarding-title {
        font-size: 24px;
        margin: 0 0 10px;
    }
    .onboarding-image-wrap {
        margin-bottom: 8px;
    }
    .onboarding-welcome {
        margin-bottom: 10px;
    }
    .onboarding-message {
        font-size: 14px;
        margin: 0 0 4px;
    }
    .onboarding-message-sub {
        font-size: 12px;
    }
    .onboarding-sign-in-label {
        margin: 0 0 8px;
    }
    .onboarding-skip-btn {
        padding: 10px 16px;
        margin-bottom: 6px;
        font-size: 14px;
    }
    .onboarding-btn {
        padding: 10px 16px;
        margin-bottom: 6px;
        font-size: 14px;
    }
}

/* Very short viewports (older iPhone SE, accessibility large-text). */
@media (max-height: 700px) {
    .onboarding-image {
        max-height: 80px;
    }
    .onboarding-title {
        font-size: 22px;
        margin: 0 0 8px;
    }
    .onboarding-welcome {
        margin-bottom: 10px;
    }
    .onboarding-message {
        font-size: 14px;
    }
    .onboarding-message-sub {
        font-size: 12px;
    }
}

.onboarding-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #D4AF37;
    margin: 0 0 14px;
    text-align: center;
}

html.dark-theme .onboarding-title {
    color: #D4AF37;
}

.onboarding-image-wrap {
    text-align: center;
    margin-bottom: 12px;
}

.onboarding-image-wrap .theme-icon {
    width: auto;
    height: auto;
}

.onboarding-image {
    max-width: 100%;
    max-height: 130px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.onboarding-welcome {
    text-align: center;
    margin-bottom: 16px;
}

.onboarding-message {
    font-size: 16px;
    line-height: 1.45;
    color: #D4AF37;
    margin: 0 0 6px;
}

.onboarding-message-sub {
    font-size: 14px;
    color: #D4AF37;
    margin-bottom: 0;
}

html.dark-theme .onboarding-message {
    color: #D4AF37;
}

html.dark-theme .onboarding-message-sub {
    color: #D4AF37;
}

.onboarding-sign-in-label {
    font-size: 14px;
    color: #D4AF37;
    margin: 0 0 16px;
    text-align: center;
}

html.dark-theme .onboarding-sign-in-label {
    color: #D4AF37;
}

.onboarding-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid #e5e5ea;
    background: #fff;
    color: #000;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.onboarding-btn:hover {
    background: #f2f2f7;
    border-color: #d1d1d6;
}

/* Same footprint as provider buttons; text-only, no chrome */
.onboarding-skip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 12px;
    padding: 14px 20px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #8e8e93;
    font-size: 16px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.onboarding-skip-btn:hover {
    background: transparent;
    color: #636366;
}

.onboarding-skip-btn:active {
    opacity: 0.65;
}

html.dark-theme .onboarding-skip-btn {
    color: #8e8e93;
}

html.dark-theme .onboarding-skip-btn:hover {
    color: #aeaeb2;
}

.onboarding-btn-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.onboarding-btn-google:hover {
    background: #f8f9fa;
}

.onboarding-btn-facebook:hover {
    background: #f2f2f7;
}

html.dark-theme .onboarding-btn-facebook:hover {
    background: #3a3a3c;
}

/* Apple sign-in button intentionally inherits the default .onboarding-btn
   styling (white in light mode, dark grey in dark mode) so it looks
   consistent with Google / Facebook / Email and doesn't visually nudge users
   toward Apple over the other providers. The apple.svg icon uses
   `fill="currentColor"`, so it follows the button's text colour in both
   themes. */

.onboarding-btn-primary {
    background: #007aff;
    border-color: #007aff;
    color: #fff;
}

.onboarding-btn-primary:hover {
    background: #0051d5;
    border-color: #0051d5;
}

.onboarding-btn-back {
    margin-top: 8px;
    background: transparent;
}

html.dark-theme .onboarding-btn {
    background: #2c2c2e;
    border-color: #38383a;
    color: #fff;
}

html.dark-theme .onboarding-btn:hover {
    background: #3a3a3c;
    border-color: #48484a;
}


html.dark-theme .onboarding-btn-primary {
    color: #fff;
}

.onboarding-email-form {
    margin-top: 16px;
}

.onboarding-email-input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 12px;
    font-size: 16px;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-sizing: border-box;
}

html.dark-theme .onboarding-email-input {
    background: #2c2c2e;
    border-color: #38383a;
    color: #fff;
}

.onboarding-email-sent-msg {
    font-size: 14px;
    color: #34c759;
    margin-top: 12px;
}

.onboarding-error {
    font-size: 14px;
    color: #ff3b30;
    margin-top: 12px;
    text-align: center;
}

/* Paywall overlay (iOS only) */
.paywall-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(80px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    overflow: hidden;
}

.paywall-overlay.paywall-visible {
    display: flex;
    flex-direction: column;
}

/* Tighter chrome when paywall is open (native banner is removed; maximize space for card) */
body.paywall-active .paywall-overlay.paywall-visible {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

.paywall-content {
    max-width: 340px;
    width: 100%;
    text-align: center;
    position: relative;
    background: rgba(248, 248, 246, 0.96);
    border-radius: 20px;
    padding: 28px 16px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.paywall-content-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
    margin-right: -4px;
}

body.paywall-active .paywall-content {
    max-height: min(94dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px));
}

html.dark-theme .paywall-overlay {
    background: rgba(0, 0, 0, 0.55);
}

html.dark-theme .paywall-content {
    background: rgba(44, 44, 46, 0.96);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.paywall-dismiss-btn {
    display: none;
    position: absolute;
    top: -12px;
    right: -8px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: #5c5c5e;
    font-size: 24px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

html.dark-theme .paywall-dismiss-btn {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.paywall-dismissible .paywall-dismiss-btn {
    display: block;
}

.paywall-logo-wrap {
    margin: 0 auto 12px;
}

.paywall-logo {
    width: clamp(48px, 14vmin, 72px);
    height: auto;
    object-fit: contain;
    display: block;
}

.paywall-logo-wrap .paywall-logo {
    margin: 0 auto;
}

.paywall-logo-wrap .theme-icon.light {
    display: block;
}

.paywall-logo-wrap .theme-icon.dark {
    display: none;
}

html.dark-theme .paywall-logo-wrap .theme-icon.light {
    display: none;
}

html.dark-theme .paywall-logo-wrap .theme-icon.dark {
    display: block;
}

.paywall-title {
    font-size: clamp(17px, 4.5vmin, 22px);
    font-weight: 700;
    color: #2c2c2e;
    margin: 0 0 12px;
}

html.dark-theme .paywall-title {
    color: #f2f2f7;
}

.paywall-title-line2 {
    display: block;
    font-size: clamp(13px, 3.2vmin, 15px);
    font-weight: 600;
    color: #6e6e73;
    margin-top: 4px;
    line-height: 1.25;
}

html.dark-theme .paywall-title-line2 {
    color: #aeaeb2;
}

.paywall-features {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    text-align: left;
    font-size: clamp(12px, 3.2vmin, 14px);
    color: #4a4a4c;
    line-height: 1.45;
}

.paywall-features li {
    padding: 2px 0;
}

.paywall-feature-sub {
    font-size: clamp(10px, 2.8vmin, 12px);
    color: #8e8e93;
    display: inline-block;
    padding-left: 2em;
}

html.dark-theme .paywall-feature-sub {
    color: rgba(255, 255, 255, 0.6);
}

html.dark-theme .paywall-features {
    color: rgba(255, 255, 255, 0.85);
}

.paywall-tagline {
    font-size: clamp(10px, 2.6vmin, 12px);
    color: #8e8e93;
    margin: 0 0 14px;
    font-style: italic;
}

html.dark-theme .paywall-tagline {
    color: rgba(255, 255, 255, 0.6);
}

.paywall-offer {
    margin-bottom: 14px;
}

.paywall-price {
    font-size: clamp(24px, 7vmin, 32px);
    font-weight: 700;
    color: #b8860b;
    margin: 0 0 4px;
}

.paywall-price-period {
    font-size: 16px;
    font-weight: 500;
    color: #6b6b6d;
}

html.dark-theme .paywall-price-period {
    color: rgba(255, 255, 255, 0.6);
}

.paywall-subscribe-btn {
    width: 100%;
    padding: clamp(12px, 3vmin, 16px) 20px;
    font-size: clamp(15px, 3.8vmin, 17px);
    font-weight: 600;
    color: #1c1c1e;
    background: #d4af37;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 8px;
}

.paywall-subscribe-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.paywall-spinner {
    display: inline-block;
    color: #5c5c5e;
    font-size: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

html.dark-theme .paywall-spinner {
    color: rgba(255, 255, 255, 0.8);
}

.paywall-error {
    font-size: 14px;
    color: #c0392b;
    margin: 0 0 12px;
}

.paywall-restore-btn {
    background: transparent;
    border: none;
    color: #6b6b6d;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    text-decoration: underline;
}

html.dark-theme .paywall-restore-btn {
    color: rgba(255, 255, 255, 0.65);
}

.paywall-disclosure {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #8e8e93;
    text-align: center;
}

html.dark-theme .paywall-disclosure {
    color: rgba(255, 255, 255, 0.55);
}

.paywall-legal-links {
    margin: 0;
    font-size: 12px;
    text-align: center;
}

.paywall-legal-link {
    color: #6b6b6d;
    text-decoration: underline;
    padding: 4px 6px;
    display: inline-block;
}

html.dark-theme .paywall-legal-link {
    color: rgba(255, 255, 255, 0.7);
}

.paywall-legal-sep {
    color: #c7c7cc;
    padding: 0 2px;
}

html.dark-theme .paywall-legal-sep {
    color: rgba(255, 255, 255, 0.35);
}

/* Extra compaction on short viewports (e.g. SE, landscape, large keyboard) */
@media (max-height: 700px) {
    body.paywall-active .paywall-overlay.paywall-visible {
        padding: calc(8px + env(safe-area-inset-top, 0px)) 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    body.paywall-active .paywall-content {
        padding: 22px 12px 12px;
        max-height: min(96dvh, calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        border-radius: 16px;
    }

    .paywall-dismiss-btn {
        width: 36px;
        height: 36px;
        font-size: 20px;
        top: -8px;
        right: -6px;
    }

    .paywall-features li {
        padding: 1px 0;
    }
}

@media (max-height: 580px) {
    .paywall-logo-wrap {
        margin-bottom: 8px;
    }

    .paywall-tagline {
        margin-bottom: 10px;
    }

    .paywall-offer {
        margin-bottom: 10px;
    }
}

body.paywall-active {
    overflow: hidden;
}

/* =====================================================================
   Social Tab
   ===================================================================== */
/* Social tab matches the layout of the other tabs (Prayer Times, Qibla,
   Settings): no inner padding (the parent .tab-content already provides
   20px on all sides), and the same max-width container so cards line up
   with the prayer-times card. */
.social-container {
    max-width: var(--container-max-width);
    margin: var(--container-margin);
}

/* Social: non-selectable action controls */
.social-friends-refresh,
.social-prayer-heart:not(.social-prayer-heart--static),
.social-add-code-btn,
.social-invite-btn,
.social-invite-code-pill {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.social-live-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fff7e0 0%, #ffe9b3 100%);
    border-radius: 16px;
    padding: 18px;
    margin: 0 0 18px;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.12);
}
html.dark-theme .social-live-stat-card {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.social-live-stat-pulse {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #34c759;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
    animation: socialPulse 1.8s ease-out infinite;
    flex-shrink: 0;
}
@keyframes socialPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

.social-live-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}
.social-live-stat-count {
    font-size: 22px;
    font-weight: 700;
    color: #6b5524;
}
html.dark-theme .social-live-stat-count {
    color: #f0d27d;
}
.social-live-stat-label {
    font-size: 13px;
    color: #6b5524;
    opacity: 0.85;
}
html.dark-theme .social-live-stat-label {
    color: #f0d27d;
    opacity: 0.85;
}

.social-section {
    margin-top: 18px;
}
.social-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.social-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    letter-spacing: 0.01em;
}
html.dark-theme .social-section-title { color: #f2f2f7; }
.social-section-badge {
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.social-friends-refresh {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid #d1d1d6;
    background: transparent;
    color: #6b6b6d;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.social-friends-refresh:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1c1c1e;
}
.social-friends-refresh:disabled {
    opacity: 0.55;
    cursor: default;
}
.social-friends-refresh.is-busy .social-friends-refresh-icon {
    animation: social-friends-refresh-spin 0.75s linear infinite;
}
@keyframes social-friends-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
html.dark-theme .social-friends-refresh {
    border-color: #3a3a3c;
    color: #aeaeb2;
}
html.dark-theme .social-friends-refresh:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f2f2f7;
}

.social-friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Swipe row: Pin + Remove behind the friend card */
.social-friend-swipe {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}
.social-friend-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    width: 176px;
    z-index: 0;
}
.social-swipe-action {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1.15;
}
.social-swipe-pin {
    background: #aeaeb2;
    color: #3a3a3c;
}
.social-swipe-pin:hover { background: #c7c7cc; }
.social-swipe-delete {
    background: #ff3b30;
    color: #fff;
}
.social-swipe-delete:hover { background: #e6352b; }
html.dark-theme .social-swipe-pin {
    background: #8e8e93;
    color: #1c1c1e;
}
html.dark-theme .social-swipe-pin:hover { background: #aeaeb2; }

.social-friend-swipe-front.social-friend-row {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.22s ease-out;
    will-change: transform;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.social-friend-row,
.social-request-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html.dark-theme .social-friend-row,
html.dark-theme .social-request-row {
    background: #1c1c1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* "Me" row — subtle highlight, no swipe actions */
.social-friend-row--me {
    background: rgba(0, 0, 0, 0.055);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.dark-theme .social-friend-row--me {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Square right edge on the sliding panel so Pin/Remove aren’t separated by a curved “wedge” from the card radius. Outer .social-friend-swipe still clips to 14px corners. */
.social-friend-swipe > .social-friend-swipe-front.social-friend-row {
    border-radius: 14px 0 0 14px;
}

.social-friend-ring {
    flex-shrink: 0;
    width: 48px; height: 48px;
}
.social-ring-svg {
    width: 48px; height: 48px;
    overflow: visible;
}
.social-ring-bg {
    fill: none;
    stroke: #e5e5ea;
    stroke-width: 5;
}
html.dark-theme .social-ring-bg { stroke: #2c2c2e; }
.social-ring-fg {
    fill: none;
    stroke: #D4AF37;
    stroke-width: 5;
    stroke-linecap: round;
}
.social-ring-text {
    fill: #1c1c1e;
    font-size: 11px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
html.dark-theme .social-ring-text { fill: #f2f2f7; }

.social-friend-avatar {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5ea;
    display: flex;
    align-items: center;
    justify-content: center;
}
html.dark-theme .social-friend-avatar { background: #2c2c2e; }
.social-friend-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.social-friend-avatar-fallback {
    font-size: 18px;
    font-weight: 600;
    color: #6b6b6d;
}
html.dark-theme .social-friend-avatar-fallback { color: #aeaeb2; }

.social-friend-meta {
    flex: 1;
    min-width: 0;
}
.social-friend-meta--with-heart {
    display: flex;
    align-items: center;
    gap: 6px;
}
.social-friend-meta-text {
    flex: 1;
    min-width: 0;
}
.social-prayer-heart-stack {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
}
.social-prayer-heart-count {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #ff3b30;
    min-width: 1ch;
    text-align: right;
    line-height: 1;
}
html.dark-theme .social-prayer-heart-count {
    color: #ff453a;
}
.social-prayer-heart {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #8e8e93;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, color 0.15s;
}
.social-prayer-heart--static {
    cursor: default;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
}
.social-prayer-heart--static:active {
    background: transparent;
}
html.dark-theme .social-prayer-heart--static:active {
    background: transparent;
}
.social-prayer-heart--static .social-prayer-heart-filled {
    opacity: 0;
}
.social-prayer-heart:active {
    background: rgba(0, 0, 0, 0.06);
}
html.dark-theme .social-prayer-heart {
    color: #8e8e93;
}
html.dark-theme .social-prayer-heart:active {
    background: rgba(255, 255, 255, 0.08);
}
.social-prayer-heart-svg {
    display: block;
    pointer-events: none;
}
.social-prayer-heart .social-prayer-heart-filled {
    opacity: 0;
    transition: opacity 0.18s ease-out;
}
.social-prayer-heart .social-prayer-heart-outline {
    transition: opacity 0.18s ease-out;
}
.social-prayer-heart.is-liked {
    color: #ff3b30;
}
.social-prayer-heart.is-liked .social-prayer-heart-filled {
    opacity: 1;
}
.social-prayer-heart.is-liked .social-prayer-heart-outline {
    opacity: 0;
}
.social-friend-name {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark-theme .social-friend-name { color: #f2f2f7; }
.social-friend-stats {
    font-size: 12px;
    color: #6b6b6d;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.dark-theme .social-friend-stats { color: #8e8e93; }

.social-request-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.social-req-btn {
    padding: 7px 12px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.social-req-btn:active { transform: scale(0.96); }
.social-req-accept {
    background: #D4AF37;
    color: #fff;
}
.social-req-decline {
    background: #f2f2f7;
    color: #1c1c1e;
}
html.dark-theme .social-req-decline {
    background: #2c2c2e;
    color: #f2f2f7;
}

.social-friends-empty {
    text-align: center;
    padding: 28px 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
html.dark-theme .social-friends-empty {
    background: #1c1c1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.social-friends-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
    margin: 0 0 6px;
}
html.dark-theme .social-friends-empty-title { color: #f2f2f7; }
.social-friends-empty-message {
    font-size: 13px;
    color: #6b6b6d;
    line-height: 1.5;
    margin: 0;
}
html.dark-theme .social-friends-empty-message { color: #8e8e93; }
.social-friends-empty-message strong { color: #D4AF37; }

/* =====================================================================
   Invite a friend (Share invite link)
   ===================================================================== */
.social-invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 18px;
    border-radius: 14px;
    border: 1px solid #D4AF37;
    background: #fff;
    color: #D4AF37;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.social-invite-btn:active { transform: scale(0.98); }
.social-invite-btn:hover { background: rgba(212, 175, 55, 0.06); }
html.dark-theme .social-invite-btn {
    background: rgba(212, 175, 55, 0.10);
    color: #f0d27d;
    border-color: rgba(212, 175, 55, 0.5);
}
html.dark-theme .social-invite-btn:hover { background: rgba(212, 175, 55, 0.18); }
.social-invite-btn-icon { flex-shrink: 0; }

.social-invite-helper {
    font-size: 12px;
    color: #6b6b6d;
    margin: 8px 4px 0;
    text-align: center;
    line-height: 1.4;
}
html.dark-theme .social-invite-helper { color: #8e8e93; }

/* =====================================================================
   "Your code" pill (tap to copy)
   ===================================================================== */
.social-invite-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 4px 2px;
}
.social-invite-code-label {
    font-size: 12px;
    color: #6b6b6d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
html.dark-theme .social-invite-code-label { color: #8e8e93; }
.social-invite-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(212, 175, 55, 0.08);
    color: #1c1c1e;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.social-invite-code-pill:hover { background: rgba(212, 175, 55, 0.14); }
.social-invite-code-pill:active { transform: scale(0.97); }
.social-invite-code-pill:disabled {
    opacity: 0.5;
    cursor: default;
}
.social-invite-code-pill:disabled:hover { background: rgba(212, 175, 55, 0.08); }
html.dark-theme .social-invite-code-pill {
    color: #f2f2f7;
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.12);
}
html.dark-theme .social-invite-code-pill:hover { background: rgba(212, 175, 55, 0.2); }
.social-invite-code-icon {
    flex-shrink: 0;
    color: #D4AF37;
}
html.dark-theme .social-invite-code-icon { color: #f0d27d; }
.social-invite-code-status {
    font-size: 12px;
    color: #34c759;
    margin: 6px 4px 0;
    text-align: center;
    min-height: 16px;
    opacity: 0;
    transition: opacity 0.2s;
}
.social-invite-code-status.is-visible { opacity: 1; }
.social-invite-code-status.is-error { color: #ff3b30; }
html.dark-theme .social-invite-code-status { color: #4cd964; }
html.dark-theme .social-invite-code-status.is-error { color: #ff453a; }

/* =====================================================================
   "Add by code" form — same pill pattern as Quran search
   ===================================================================== */
.social-add-code {
    margin: 0;
}

.social-add-code-pill {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 4px 6px 4px 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.social-add-code-pill:focus-within {
    border-color: rgba(0, 122, 255, 0.35);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(0, 122, 255, 0.12);
}

.social-add-code-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 4px 8px 14px;
    font-size: 16px;
    line-height: 1.2;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1c1c1e;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.social-add-code-input::placeholder {
    color: #9a9a9f;
    letter-spacing: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.social-add-code-btn {
    flex-shrink: 0;
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    color: #007aff;
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.2;
    padding: 8px 14px 8px 10px;
    margin: 0;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.social-add-code-btn:active {
    opacity: 0.55;
}

.social-add-code-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

html.dark-theme .social-add-code-pill {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

html.dark-theme .social-add-code-pill:focus-within {
    border-color: rgba(10, 132, 255, 0.4);
    box-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        0 0 0 2px rgba(10, 132, 255, 0.14);
}

html.dark-theme .social-add-code-input {
    color: #f2f2f7;
}

html.dark-theme .social-add-code-input::placeholder {
    color: #6b6b6d;
}

html.dark-theme .social-add-code-btn {
    border-left-color: rgba(255, 255, 255, 0.1);
    color: #0a84ff;
}
.social-add-code-status {
    font-size: 12px;
    color: #34c759;
    margin: 8px 4px 0;
    line-height: 1.4;
    min-height: 16px;
    opacity: 0;
    transition: opacity 0.2s;
}
.social-add-code-status.is-visible { opacity: 1; }
.social-add-code-status.is-error { color: #ff3b30; }
html.dark-theme .social-add-code-status { color: #4cd964; }
html.dark-theme .social-add-code-status.is-error { color: #ff453a; }

/* =====================================================================
   Pending deep-link invite banner
   ===================================================================== */
.social-pending-invite {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.35);
}
html.dark-theme .social-pending-invite {
    background: rgba(212, 175, 55, 0.14);
    border-color: rgba(212, 175, 55, 0.45);
}
.social-pending-invite-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.25);
    color: #8a6d10;
    font-weight: 600;
}
.social-pending-invite-avatar .social-friend-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.social-pending-invite-text {
    flex: 1;
    min-width: 0;
}
.social-pending-invite-name {
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark-theme .social-pending-invite-name { color: #f2f2f7; }
.social-pending-invite-message {
    font-size: 12px;
    color: #6b6b6d;
    line-height: 1.3;
    margin-top: 2px;
}
html.dark-theme .social-pending-invite-message { color: #aeaeb2; }
.social-pending-invite-accept {
    flex-shrink: 0;
    background: #D4AF37;
    color: #fff;
    border: none;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
}
.social-pending-invite-accept:active { transform: scale(0.96); }
.social-pending-invite-accept:disabled { opacity: 0.6; cursor: default; }
.social-pending-invite-dismiss {
    flex-shrink: 0;
    background: transparent;
    color: #6b6b6d;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.social-pending-invite-dismiss:hover { background: rgba(0, 0, 0, 0.05); }
html.dark-theme .social-pending-invite-dismiss { color: #aeaeb2; }
html.dark-theme .social-pending-invite-dismiss:hover { background: rgba(255, 255, 255, 0.06); }

.social-section .social-privacy-note {
    margin: 14px 0 0;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1.45;
    color: #8e8e93;
    text-align: left;
}

html.dark-theme .social-section .social-privacy-note {
    color: #8e8e93;
}