/* =========================================================
   iOS Mobile UI – Portrait
   Kernanzeige ist für Smartphone-Hochkant ohne Scrollen ausgelegt.
   Landscape-/Desktop-Regeln oberhalb bleiben erhalten.
   ========================================================= */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    :root {
        --ios-bg: #000;
        --ios-card: rgba(28, 28, 30, 0.88);
        --ios-card-secondary: rgba(44, 44, 46, 0.86);
        --ios-text: #f5f5f7;
        --ios-secondary: #a1a1a6;
        --ios-separator: rgba(255,255,255,0.10);
        --ios-accent: #0a84ff;
        --ios-active: rgba(10,132,255,0.24);
    }

    html, body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: var(--ios-bg);
    }

    body {
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        padding:
            max(10px, env(safe-area-inset-top))
            12px
            max(10px, env(safe-area-inset-bottom));
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
        color: var(--ios-text);
        background-image:
            radial-gradient(circle at 50% -10%, rgba(10,132,255,0.18), transparent 42%);
        background-size: auto;
        text-align: left;
    }

    #main-content {
        height: 100%;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: clamp(7px, 1.1vh, 11px);
        box-sizing: border-box;
        padding-bottom: clamp(58px, 8.5vh, 72px);
    }

    #header {
        margin: 0;
        padding: clamp(9px, 1.3vh, 13px) 14px;
        border: 1px solid var(--ios-separator);
        border-radius: 18px;
        background: rgba(28,28,30,0.72);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        backdrop-filter: blur(22px) saturate(140%);
        box-shadow: 0 8px 30px rgba(0,0,0,.22);
        color: var(--ios-text);
    }

    #header2 {
        font-size: clamp(18px, 2.6vh, 24px);
        line-height: 1.08;
        font-weight: 700;
        letter-spacing: -0.025em;
        text-align: left;
        padding-right: 38px;
    }

    #timeAndDate {
        margin-top: 5px;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }

    #clock {
        font-size: clamp(25px, 3.8vh, 34px);
        line-height: 1;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.035em;
    }

    #dateContainer {
        margin: 0;
        padding: 0;
        font-size: clamp(12px, 1.65vh, 15px);
        line-height: 1;
        font-weight: 500;
        color: var(--ios-secondary);
        white-space: nowrap;
    }

    #logo {
        display: none;
    }

    #prayerTimeEzan {
        margin: 0;
        padding: clamp(8px, 1.1vh, 11px) 14px;
        border: 1px solid rgba(10,132,255,.28);
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(10,132,255,.23), rgba(28,28,30,.86));
        color: var(--ios-text);
        text-align: left;
        box-shadow: 0 8px 26px rgba(0,0,0,.18);
    }

    #countdownString {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label label"
            "name time";
        align-items: end;
        column-gap: 12px;
        row-gap: 1px;
    }

    #nextPrayerLabel {
        grid-area: label;
        color: #64a9ff;
        font-size: clamp(10px, 1.35vh, 12px);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    #nextPrayerName {
        grid-area: name;
        font-size: clamp(19px, 2.8vh, 25px);
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    #ezan {
        grid-area: time;
        font-size: clamp(20px, 2.9vh, 26px);
        line-height: 1;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.025em;
    }

    #content {
        min-height: 0;
        margin: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(7px, 1vh, 10px);
    }

    #prayerTimesTable {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: table;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border: 1px solid var(--ios-separator);
        border-radius: 20px;
        background: var(--ios-card);
        box-shadow: 0 8px 30px rgba(0,0,0,.20);
    }

    #prayerTimesTable tbody,
    #prayerTimesTable tr {
        height: 100%;
    }

    #prayerTimesTable tr:first-child {
        display: grid;
        grid-template-columns: 1fr;
        height: calc(100% - clamp(45px, 6.5vh, 58px));
    }

    #prayerTimesTable tr:first-child td {
        display: contents;
    }

    #prayerTimesTable tr:last-child {
        display: block;
        height: clamp(45px, 6.5vh, 58px);
    }

    #prayerTimesTable tr:last-child td {
        display: block;
        width: 100%;
        height: 100%;
    }

    .prayerTime {
        position: relative;
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 0 14px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 0;
        border-bottom: 1px solid var(--ios-separator);
        background: transparent;
        box-shadow: none;
        color: var(--ios-text);
        font-size: clamp(17px, 2.35vh, 21px);
        line-height: 1;
        font-weight: 560;
        font-variant-numeric: tabular-nums;
        transition: background-color 180ms ease, box-shadow 180ms ease;
    }

    /* DOM-Reihenfolge der zwei bisherigen Tabellenspalten visuell zu einer Liste machen */
    #imsak { order: 1; }
    #gunes { order: 2; }
    #ogle { order: 3; }
    #ikindi { order: 4; }
    #aksam { order: 5; }
    #yatsi { order: 6; }

    #prayerTimesTable tr:first-child {
        grid-template-rows: repeat(6, 1fr);
    }

    #prayerTimesTable tr:first-child td {
        width: 100%;
    }

    /* CSS Grid kann Elemente aus display:contents-TDs anhand ihrer order sortieren. */
    #prayerTimesTable tr:first-child .prayerTime {
        grid-column: 1;
    }

    .prayerTime .gebetszeit {
        display: none;
    }

    .prayerTime.is-active-prayer {
        background: var(--ios-active);
        box-shadow: inset 3px 0 0 var(--ios-accent);
        color: #fff;
    }

    .prayerTime.is-active-prayer::after {
        content: "AKTUELL";
        position: absolute;
        right: 76px;
        color: #64a9ff;
        font-size: clamp(8px, 1.05vh, 10px);
        font-weight: 750;
        letter-spacing: .06em;
    }

    #sabah {
        height: 100%;
        border-bottom: 0;
        background: rgba(44,44,46,.50);
        font-size: clamp(15px, 2.05vh, 18px);
        font-weight: 600;
    }

    #sabahNamaziSpan {
        margin-left: auto;
        font-variant-numeric: tabular-nums;
    }

    #qibla {
        margin: 0;
        padding: clamp(9px, 1.25vh, 12px) 14px;
        border-radius: 16px;
        border: 1px solid rgba(48,209,88,.25);
        background: rgba(48,209,88,.14);
        color: #5ee17a;
        text-align: center;
        font-size: clamp(15px, 2.05vh, 18px);
        font-weight: 650;
        box-shadow: none;
    }

    #qiblaFinder {
        line-height: 1;
    }

    #dailyUpdate,
    #copyright,
    #currentDate {
        display: none !important;
    }

    #burgerMenu {
        top: max(17px, env(safe-area-inset-top));
        left: auto;
        right: 22px;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 9px;
        background: rgba(118,118,128,.20);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    #burgerMenu span {
        width: 16px;
        height: 2px;
        margin: 2px 0;
        border-radius: 2px;
        background: #fff;
    }

    #navbar {
        width: min(82vw, 330px);
        height: 100%;
        padding:
            max(72px, calc(env(safe-area-inset-top) + 58px))
            14px
            max(20px, env(safe-area-inset-bottom));
        box-sizing: border-box;
        gap: 8px;
        background: rgba(20,20,22,.92);
        -webkit-backdrop-filter: blur(28px) saturate(150%);
        backdrop-filter: blur(28px) saturate(150%);
        border-right: 1px solid var(--ios-separator);
    }

    #navbar a {
        padding: 13px 14px;
        border-radius: 12px;
        background: rgba(118,118,128,.12);
        color: var(--ios-text);
        font-size: 17px;
        font-weight: 550;
    }

    .body-shift {
        transform: none;
    }

    #iosActionBar {
        left: 50% !important;
        right: auto !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%);
        width: min(260px, calc(100vw - 44px));
        height: 48px;
        padding: 0 8px;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around;
        gap: 0 !important;
        border: 1px solid var(--ios-separator);
        border-radius: 18px;
        background: rgba(28,28,30,.78);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
        box-shadow: 0 8px 30px rgba(0,0,0,.30);
        z-index: 90;
    }

    #iosActionBar > * {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #iosActionBar svg {
        width: 23px;
        height: 23px;
    }

    #tonStatus {
        display: none;
    }
}

/* Kleinere iPhones: vertikale Abstände weiter verdichten. */
@media only screen and (orientation: portrait) and (max-width: 700px) and (max-height: 700px) {
    body {
        padding-top: max(6px, env(safe-area-inset-top));
        padding-left: 9px;
        padding-right: 9px;
    }

    #main-content {
        gap: 5px;
        padding-bottom: 52px;
    }

    #header,
    #prayerTimeEzan {
        border-radius: 14px;
    }

    #header {
        padding: 7px 11px;
    }

    #timeAndDate {
        margin-top: 3px;
    }

    #prayerTimeEzan {
        padding: 6px 11px;
    }

    #qibla {
        padding: 7px 11px;
    }

    #iosActionBar {
        height: 44px;
        border-radius: 16px;
    }
}

@media only screen and (orientation: portrait) and (max-width: 700px) {
    #prayerTimesTable > tbody {
        display: grid;
        grid-template-rows: repeat(6, minmax(0, 1fr)) clamp(45px, 6.5vh, 58px);
        height: 100%;
    }

    #prayerTimesTable > tbody > tr:first-child,
    #prayerTimesTable > tbody > tr:first-child > td {
        display: contents;
    }

    #prayerTimesTable > tbody > tr:last-child {
        display: contents;
    }

    #prayerTimesTable > tbody > tr:last-child > td {
        display: contents;
    }

    #imsak { grid-row: 1; }
    #gunes { grid-row: 2; }
    #ogle { grid-row: 3; }
    #ikindi { grid-row: 4; }
    #aksam { grid-row: 5; }
    #yatsi { grid-row: 6; }
    #sabah { grid-row: 7; }
}


/* =========================================================
   iOS Liquid Glass – Portrait refinement
   ========================================================= */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    :root {
        --glass-fill: rgba(255,255,255,0.075);
        --glass-fill-strong: rgba(255,255,255,0.105);
        --glass-border: rgba(255,255,255,0.18);
        --glass-highlight: rgba(255,255,255,0.24);
        --glass-shadow: rgba(0,0,0,0.34);
        --glass-blue: rgba(10,132,255,0.16);
    }

    body {
        background:
            radial-gradient(circle at 18% 4%, rgba(66,138,255,.30), transparent 30%),
            radial-gradient(circle at 92% 34%, rgba(94,92,230,.20), transparent 32%),
            radial-gradient(circle at 22% 88%, rgba(48,209,88,.10), transparent 30%),
            #05070b;
    }

    #header,
    #prayerTimeEzan,
    #prayerTimesTable,
    #iosActionBar,
    #navbar {
        background: var(--glass-fill);
        border: 1px solid var(--glass-border);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        backdrop-filter: blur(30px) saturate(180%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            0 10px 34px var(--glass-shadow);
    }

    #header {
        background:
            linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
    }

    #prayerTimeEzan {
        background:
            linear-gradient(135deg, rgba(10,132,255,.20), rgba(255,255,255,.055));
        border-color: rgba(100,169,255,.30);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 10px 30px rgba(0,0,0,.25);
    }

    #prayerTimesTable {
        background:
            linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
        overflow: hidden;
    }

    .prayerTime {
        background: rgba(255,255,255,.018);
        border-bottom-color: rgba(255,255,255,.10);
    }

    .prayerTime.is-active-prayer {
        background:
            linear-gradient(90deg, rgba(10,132,255,.31), rgba(10,132,255,.10));
        box-shadow:
            inset 3px 0 0 #0a84ff,
            inset 0 1px 0 rgba(255,255,255,.08);
    }

    #sabah {
        background: rgba(255,255,255,.055);
    }

    #qibla {
        background:
            linear-gradient(135deg, rgba(48,209,88,.18), rgba(255,255,255,.045));
        border: 1px solid rgba(94,225,122,.27);
        -webkit-backdrop-filter: blur(26px) saturate(170%);
        backdrop-filter: blur(26px) saturate(170%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 8px 24px rgba(0,0,0,.18);
    }

    #iosActionBar {
        background:
            linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
        border-color: rgba(255,255,255,.22);
        -webkit-backdrop-filter: blur(34px) saturate(190%);
        backdrop-filter: blur(34px) saturate(190%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.20),
            0 12px 34px rgba(0,0,0,.36);
    }

    #iosActionBar > * {
        border-radius: 13px;
        transition: background-color .16s ease, transform .16s ease;
    }

    #iosActionBar > *:active {
        background: rgba(255,255,255,.13);
        transform: scale(.94);
    }

    #burgerMenu {
        background: rgba(255,255,255,.09);
        border: 1px solid rgba(255,255,255,.15);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
        backdrop-filter: blur(28px) saturate(180%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    #navbar {
        background: rgba(15,17,22,.64);
        border-right-color: rgba(255,255,255,.16);
    }

    #navbar a {
        background: rgba(255,255,255,.065);
        border: 1px solid rgba(255,255,255,.075);
    }
}


/* =========================================================
   iOS Liquid Glass 8.3 – compact refinement from iPhone test
   ========================================================= */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    body {
        padding:
            max(8px, env(safe-area-inset-top))
            12px
            max(7px, env(safe-area-inset-bottom));
        background:
            radial-gradient(ellipse at 15% 4%, rgba(30,110,235,.24), transparent 34%),
            radial-gradient(ellipse at 91% 43%, rgba(93,83,220,.13), transparent 31%),
            radial-gradient(ellipse at 14% 89%, rgba(35,190,92,.09), transparent 28%),
            #030609;
    }

    #main-content {
        gap: clamp(6px, .85vh, 8px);
        padding-bottom: clamp(52px, 7.2vh, 60px);
    }

    #header {
        padding: clamp(8px, 1.05vh, 10px) 14px;
        border-radius: 17px;
        background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
        border-color: rgba(255,255,255,.145);
        -webkit-backdrop-filter: blur(36px) saturate(185%);
        backdrop-filter: blur(36px) saturate(185%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            0 7px 24px rgba(0,0,0,.22);
    }

    #header2 {
        font-size: clamp(17px, 2.25vh, 21px);
        line-height: 1.04;
        letter-spacing: -.028em;
    }

    #timeAndDate {
        margin-top: 4px;
    }

    #clock {
        font-size: clamp(24px, 3.25vh, 30px);
        font-weight: 620;
    }

    #dateContainer {
        font-size: clamp(11px, 1.45vh, 13px);
        color: rgba(235,235,245,.60);
    }

    #prayerTimeEzan {
        padding: clamp(7px, .9vh, 9px) 14px;
        border-radius: 17px;
        background: linear-gradient(135deg, rgba(10,132,255,.145), rgba(255,255,255,.035));
        border-color: rgba(100,169,255,.22);
        -webkit-backdrop-filter: blur(36px) saturate(190%);
        backdrop-filter: blur(36px) saturate(190%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            0 7px 23px rgba(0,0,0,.20);
    }

    #nextPrayerLabel {
        font-size: clamp(9px, 1.18vh, 10px);
        color: rgba(100,169,255,.92);
    }

    #nextPrayerName {
        font-size: clamp(18px, 2.35vh, 21px);
    }

    #ezan {
        font-size: clamp(19px, 2.45vh, 22px);
    }

    #content {
        gap: clamp(6px, .8vh, 8px);
    }

    #prayerTimesTable {
        border-radius: 18px;
        border-color: rgba(255,255,255,.14);
        background: linear-gradient(150deg, rgba(255,255,255,.068), rgba(255,255,255,.022));
        -webkit-backdrop-filter: blur(38px) saturate(180%);
        backdrop-filter: blur(38px) saturate(180%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 8px 26px rgba(0,0,0,.21);
    }

    #prayerTimesTable > tbody {
        grid-template-rows: repeat(6, minmax(0, 1fr)) clamp(39px, 5.3vh, 46px);
    }

    .prayerTime {
        padding: 0 14px;
        font-size: clamp(16px, 2.05vh, 18px);
        font-weight: 530;
        border-bottom-color: rgba(255,255,255,.075);
        background: rgba(255,255,255,.008);
    }

    .prayerTime.is-active-prayer {
        background: linear-gradient(90deg, rgba(10,132,255,.25), rgba(10,132,255,.065));
        box-shadow:
            inset 2px 0 0 rgba(64,156,255,.95),
            inset 0 1px 0 rgba(255,255,255,.06);
    }

    .prayerTime.is-active-prayer::after {
        right: 74px;
        padding: 3px 6px;
        border-radius: 999px;
        background: rgba(10,132,255,.16);
        border: 1px solid rgba(100,169,255,.20);
        color: #73b4ff;
        font-size: clamp(7px, .92vh, 8px);
        letter-spacing: .055em;
    }

    #sabah {
        font-size: clamp(14px, 1.82vh, 16px);
        background: rgba(255,255,255,.028);
    }

    #qibla {
        padding: clamp(7px, .9vh, 9px) 14px;
        border-radius: 15px;
        font-size: clamp(14px, 1.82vh, 16px);
        background: linear-gradient(135deg, rgba(48,209,88,.105), rgba(255,255,255,.025));
        border-color: rgba(94,225,122,.20);
        -webkit-backdrop-filter: blur(32px) saturate(175%);
        backdrop-filter: blur(32px) saturate(175%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.09),
            0 6px 20px rgba(0,0,0,.16);
    }

    #iosActionBar {
        width: min(238px, calc(100vw - 58px));
        height: 45px;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        border-radius: 17px;
        background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
        border-color: rgba(255,255,255,.17);
        -webkit-backdrop-filter: blur(38px) saturate(190%);
        backdrop-filter: blur(38px) saturate(190%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            0 9px 28px rgba(0,0,0,.29);
    }

    #iosActionBar > * {
        width: 42px;
        height: 42px;
    }

    #iosActionBar svg {
        width: 21px;
        height: 21px;
        opacity: .94;
    }

    #burgerMenu {
        top: max(14px, env(safe-area-inset-top));
        right: 21px;
        width: 28px;
        height: 28px;
        border-radius: 9px;
        background: rgba(255,255,255,.065);
        border-color: rgba(255,255,255,.13);
    }

    #burgerMenu span {
        width: 15px;
    }
}

/* Pro-Max-Höhen: bewusst nicht aufblasen – zusätzliche Höhe wird als Luft genutzt. */
@media only screen and (orientation: portrait) and (max-width: 700px) and (min-height: 800px) {
    #main-content {
        grid-template-rows: auto auto minmax(0, 1fr);
    }
}


/* =========================================================
   iOS Glass 8.4 – full-width prayer rows
   ========================================================= */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    .prayerTime {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        justify-content: initial;
    }

    .prayerLabel {
        min-width: 0;
        text-align: left;
        font-weight: 560;
        letter-spacing: -.015em;
    }

    .prayerValue,
    #sabahNamaziSpan {
        justify-self: end;
        text-align: right;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.015em;
    }

    .prayerTime.is-active-prayer {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-right: 14px;
    }

    .prayerTime.is-active-prayer::after {
        content: "AKTUELL";
        position: absolute;
        right: 86px;
        top: 50%;
        transform: translateY(-50%);
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(10,132,255,.16);
        border: 1px solid rgba(100,169,255,.20);
        color: #73b4ff;
        font-size: clamp(7px, .92vh, 8px);
        font-weight: 750;
        letter-spacing: .055em;
        line-height: 1;
    }

    #sabah {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Desktop/Landscape compatibility for the new label/value spans. */
@media only screen and (orientation: landscape) {
    .prayerLabel,
    .prayerValue {
        display: inline;
    }

    .prayerLabel::after {
        content: ": ";
    }
}


/* =========================================================
   iOS Glass 8.5 – compact intrinsic prayer card
   ========================================================= */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    #main-content {
        grid-template-rows: auto auto auto;
        align-content: start;
        min-height: 0;
    }

    #content {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(7px, .9vh, 9px);
    }

    #prayerTimesTable {
        height: auto;
        min-height: 0;
    }

    #prayerTimesTable > tbody {
        display: grid;
        grid-template-rows: repeat(6, clamp(48px, 6.15vh, 54px)) clamp(44px, 5.7vh, 50px);
        height: auto;
    }

    .prayerTime {
        min-height: 0;
        height: 100%;
    }

    #qibla {
        flex: 0 0 auto;
    }

    /* Bottom actions no longer need the content to stretch behind them. */
    #main-content {
        padding-bottom: clamp(54px, 7.3vh, 62px);
    }
}

/* On short phones keep the complete core UI visible without scrolling. */
@media only screen and (orientation: portrait) and (max-width: 700px) and (max-height: 760px) {
    #prayerTimesTable > tbody {
        grid-template-rows: repeat(6, 43px) 41px;
    }

    #header {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #prayerTimeEzan {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #qibla {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}


/* =========================================================
   iOS Glass 8.6 – Daily Hadith / Ayat glass card
   ========================================================= */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    #main-content {
        height: 100%;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        align-content: stretch;
    }

    #content {
        min-height: 0;
        display: grid;
        grid-template-rows: auto auto minmax(96px, 1fr);
        gap: clamp(7px, .9vh, 9px);
    }

    #dailyUpdate.daily-glass-card {
        position: relative;
        display: block !important;
        min-height: 96px;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        opacity: 1;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.14);
        background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
        -webkit-backdrop-filter: blur(38px) saturate(180%);
        backdrop-filter: blur(38px) saturate(180%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 8px 26px rgba(0,0,0,.20);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #dailyUpdate .daily-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: scale(1.015);
        transition: opacity .45s ease, transform .65s ease;
        pointer-events: none;
    }

    #dailyUpdate .daily-slide.is-active {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    #dailyUpdate .daily-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        filter: saturate(.78) brightness(.63) contrast(.94);
    }

    #dailyUpdate .daily-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28)),
            linear-gradient(90deg, rgba(5,10,18,.18), transparent 55%);
        pointer-events: none;
    }

    .daily-glass-overlay {
        position: absolute;
        top: 11px;
        left: 12px;
        z-index: 3;
    }

    .daily-kicker {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(20,20,22,.32);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
        color: rgba(255,255,255,.88);
        font-size: 9px;
        line-height: 1;
        font-weight: 750;
        letter-spacing: .08em;
    }

    .daily-pagination {
        position: absolute;
        right: 12px;
        bottom: 10px;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 7px;
        border-radius: 999px;
        background: rgba(20,20,22,.26);
        border: 1px solid rgba(255,255,255,.10);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
    }

    .daily-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,.32);
        transition: width .2s ease, background-color .2s ease;
    }

    .daily-dot.is-active {
        width: 13px;
        border-radius: 999px;
        background: rgba(255,255,255,.88);
    }

    /* Alte Bild-Container-Regeln dürfen diese Karte im Portrait nicht beeinflussen. */
    #dailyUpdate .image-container,
    #dailyUpdate #hadith,
    #dailyUpdate #ayat {
        display: contents;
    }
}

/* Kürzere Geräte: Tageskarte bleibt vorhanden, wird aber bewusst kompakt. */
@media only screen and (orientation: portrait) and (max-width: 700px) and (max-height: 760px) {
    #content {
        grid-template-rows: auto auto minmax(74px, 1fr);
    }

    #dailyUpdate.daily-glass-card {
        min-height: 74px;
        border-radius: 15px;
    }

    .daily-glass-overlay {
        top: 8px;
        left: 9px;
    }

    .daily-pagination {
        right: 9px;
        bottom: 8px;
    }
}


/* =========================================================
   iOS Glass 8.7 – Landscape dashboard
   20s outer rotation between prayer view and Hadith/Ayat view
   ========================================================= */
@media only screen and (orientation: landscape) and (max-height: 700px) {
    :root {
        --ios-land-bg: #030609;
        --ios-land-glass: rgba(255,255,255,.065);
        --ios-land-border: rgba(255,255,255,.14);
        --ios-land-separator: rgba(255,255,255,.075);
        --ios-land-text: #f5f5f7;
        --ios-land-secondary: rgba(235,235,245,.62);
        --ios-land-blue: #0a84ff;
    }

    html, body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: var(--ios-land-bg);
    }

    body {
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        margin: 0;
        padding:
            max(6px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
        color: var(--ios-land-text);
        background:
            radial-gradient(ellipse at 12% 5%, rgba(30,110,235,.22), transparent 31%),
            radial-gradient(ellipse at 88% 48%, rgba(93,83,220,.12), transparent 31%),
            radial-gradient(ellipse at 18% 90%, rgba(35,190,92,.08), transparent 28%),
            #030609;
        text-align: left;
    }

    #main-content {
        height: 100%;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: clamp(5px, 1.1vh, 8px);
        box-sizing: border-box;
        padding-bottom: clamp(46px, 10vh, 56px);
    }

    #header {
        margin: 0;
        padding: clamp(5px, 1.1vh, 8px) 13px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-radius: 16px;
        border: 1px solid var(--ios-land-border);
        background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.022));
        -webkit-backdrop-filter: blur(34px) saturate(180%);
        backdrop-filter: blur(34px) saturate(180%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            0 7px 24px rgba(0,0,0,.22);
        color: var(--ios-land-text);
    }

    #header2 {
        display: block;
        font-size: clamp(17px, 3.6vh, 23px);
        line-height: 1;
        font-weight: 700;
        letter-spacing: -.025em;
        white-space: nowrap;
    }

    #timeAndDate {
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-end;
        gap: clamp(12px, 2.8vw, 28px);
        width: auto;
    }

    #clock {
        font-size: clamp(18px, 4.4vh, 28px);
        line-height: 1;
        font-weight: 620;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.025em;
    }

    #dateContainer {
        margin: 0;
        padding: 0;
        color: var(--ios-land-secondary);
        font-size: clamp(11px, 2.5vh, 15px);
        line-height: 1;
        font-weight: 500;
        white-space: nowrap;
    }

    #logo {
        display: none;
    }

    #prayerTimeEzan {
        margin: 0;
        padding: clamp(5px, 1vh, 7px) 13px;
        border-radius: 15px;
        border: 1px solid rgba(100,169,255,.22);
        background: linear-gradient(135deg, rgba(10,132,255,.145), rgba(255,255,255,.028));
        -webkit-backdrop-filter: blur(34px) saturate(185%);
        backdrop-filter: blur(34px) saturate(185%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 6px 20px rgba(0,0,0,.19);
        color: var(--ios-land-text);
    }

    #countdownString {
        display: grid;
        grid-template-columns: auto minmax(100px, 1fr) auto;
        grid-template-areas: "label name time";
        align-items: center;
        gap: 11px;
    }

    #nextPrayerLabel {
        grid-area: label;
        color: #64a9ff;
        font-size: clamp(8px, 1.8vh, 10px);
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    #nextPrayerName {
        grid-area: name;
        font-size: clamp(15px, 3.4vh, 21px);
        font-weight: 700;
        letter-spacing: -.015em;
    }

    #ezan {
        grid-area: time;
        justify-self: end;
        font-size: clamp(16px, 3.6vh, 22px);
        line-height: 1;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    #content {
        min-height: 0;
        margin: 0;
        display: block;
        position: relative;
    }

    /* ----- Gebetszeiten-Phase ----- */
    #prayerTimesTable {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid var(--ios-land-border);
        background: linear-gradient(150deg, rgba(255,255,255,.062), rgba(255,255,255,.018));
        -webkit-backdrop-filter: blur(36px) saturate(175%);
        backdrop-filter: blur(36px) saturate(175%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.11),
            0 8px 24px rgba(0,0,0,.20);
    }

    #prayerTimesTable tbody {
        height: 100%;
    }

    #prayerTimesTable tr:first-child {
        height: calc(100% - clamp(38px, 8.5vh, 48px));
    }

    #prayerTimesTable tr:last-child {
        height: clamp(38px, 8.5vh, 48px);
    }

    #prayerTimesTable td {
        width: 50%;
        padding: 0;
        vertical-align: top;
    }

    #prayerTimesTable tr:first-child td:first-child {
        border-right: 1px solid var(--ios-land-separator);
    }

    .prayerTime {
        position: relative;
        width: 100%;
        height: 33.3333%;
        min-height: 0;
        margin: 0;
        padding: 0 14px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        border-radius: 0;
        border-bottom: 1px solid var(--ios-land-separator);
        background: rgba(255,255,255,.006);
        box-shadow: none;
        color: var(--ios-land-text);
        font-size: clamp(14px, 3.2vh, 19px);
        line-height: 1;
        font-weight: 540;
        font-variant-numeric: tabular-nums;
    }

    #prayerTimesTable tr:first-child td .prayerTime:last-of-type {
        border-bottom: 0;
    }

    .prayerLabel {
        min-width: 0;
        text-align: left;
        font-weight: 560;
    }

    .prayerLabel::after {
        content: "";
    }

    .prayerValue,
    #sabahNamaziSpan {
        justify-self: end;
        font-weight: 620;
        font-variant-numeric: tabular-nums;
    }

    .gebetszeit {
        display: none;
    }

    .prayerTime.is-active-prayer {
        background: linear-gradient(90deg, rgba(10,132,255,.25), rgba(10,132,255,.055));
        box-shadow: inset 2px 0 0 rgba(64,156,255,.95);
    }

    .prayerTime.is-active-prayer::after {
        content: "AKTUELL";
        position: absolute;
        right: 76px;
        top: 50%;
        transform: translateY(-50%);
        padding: 3px 6px;
        border-radius: 999px;
        background: rgba(10,132,255,.15);
        border: 1px solid rgba(100,169,255,.19);
        color: #73b4ff;
        font-size: clamp(7px, 1.5vh, 8px);
        line-height: 1;
        font-weight: 750;
        letter-spacing: .055em;
    }

    #sabah {
        height: 100%;
        border-bottom: 0;
        background: rgba(255,255,255,.025);
        font-size: clamp(13px, 2.9vh, 17px);
    }

    /* ----- Hadith/Ayat-Phase ----- */
    #dailyUpdate.daily-glass-card {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: clamp(7px, 1vw, 12px);
        opacity: 1;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    #dailyUpdate .daily-slide {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 1 !important;
        transform: none !important;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid var(--ios-land-border);
        background: rgba(255,255,255,.035);
        -webkit-backdrop-filter: blur(34px) saturate(175%);
        backdrop-filter: blur(34px) saturate(175%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 8px 24px rgba(0,0,0,.20);
        pointer-events: auto;
    }

    #dailyUpdate .daily-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        filter: saturate(.82) brightness(.72) contrast(.96);
    }

    #dailyUpdate .daily-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22)),
            linear-gradient(90deg, rgba(4,8,14,.13), transparent 60%);
        pointer-events: none;
    }

    #dailyUpdate .daily-glass-overlay {
        top: 10px;
        left: 11px;
    }

    #dailyUpdate .daily-kicker {
        min-height: 19px;
        padding: 0 7px;
        font-size: 8px;
    }

    #dailyUpdate .daily-pagination {
        display: none;
    }

    /* Rotation logic keeps toggling inline display; grid wins when daily is shown */
    #dailyUpdate[style*="display: block"] {
        display: grid !important;
    }

    /* ----- Landscape actions ----- */
    #qibla {
        display: none;
    }

    #iosActionBar {
        left: 50% !important;
        right: auto !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%);
        width: min(220px, 36vw);
        height: clamp(38px, 8.5vh, 46px);
        padding: 0 7px;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around;
        gap: 0 !important;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,.16);
        background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
        -webkit-backdrop-filter: blur(36px) saturate(185%);
        backdrop-filter: blur(36px) saturate(185%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            0 8px 26px rgba(0,0,0,.27);
        z-index: 90;
    }

    #iosActionBar > * {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #iosActionBar svg {
        width: 20px;
        height: 20px;
    }

    #tonStatus,
    #copyright,
    #currentDate {
        display: none !important;
    }

    #burgerMenu,
    #navbar {
        display: none !important;
    }
}

/* Sehr flache Landscape-Geräte zusätzlich verdichten. */
@media only screen and (orientation: landscape) and (max-height: 430px) {
    #main-content {
        gap: 4px;
        padding-bottom: 42px;
    }

    #header {
        padding-top: 4px;
        padding-bottom: 4px;
        border-radius: 13px;
    }

    #prayerTimeEzan {
        padding-top: 4px;
        padding-bottom: 4px;
        border-radius: 13px;
    }

    #prayerTimesTable,
    #dailyUpdate .daily-slide {
        border-radius: 14px;
    }

    .prayerTime {
        padding-left: 11px;
        padding-right: 11px;
    }
}


/* =========================================================
   iOS Glass 8.8 – Unified Landscape
   Smartphone, tablet and notebook/desktop use the same design language.
   ========================================================= */
@media only screen and (orientation: landscape) {
    :root {
        --u-land-text: #f5f5f7;
        --u-land-secondary: rgba(235,235,245,.62);
        --u-land-border: rgba(255,255,255,.14);
        --u-land-separator: rgba(255,255,255,.075);
    }

    html, body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: #030609;
    }

    body {
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        margin: 0;
        padding:
            max(8px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
        color: var(--u-land-text);
        background:
            radial-gradient(ellipse at 12% 4%, rgba(30,110,235,.22), transparent 32%),
            radial-gradient(ellipse at 88% 48%, rgba(93,83,220,.12), transparent 31%),
            radial-gradient(ellipse at 17% 91%, rgba(35,190,92,.08), transparent 28%),
            #030609;
        text-align: left;
    }

    #main-content {
        height: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: clamp(6px, .9vh, 10px);
        padding-bottom: clamp(50px, 7.5vh, 68px);
    }

    #header {
        margin: 0;
        padding: clamp(7px, 1vh, 12px) clamp(14px, 1.4vw, 22px);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        border-radius: clamp(15px, 1.2vw, 20px);
        border: 1px solid var(--u-land-border);
        background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.022));
        -webkit-backdrop-filter: blur(36px) saturate(180%);
        backdrop-filter: blur(36px) saturate(180%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 28px rgba(0,0,0,.22);
        color: var(--u-land-text);
    }

    #header2 {
        display: block;
        text-align: left;
        font-size: clamp(19px, 2.25vw, 32px);
        line-height: 1;
        font-weight: 700;
        letter-spacing: -.025em;
        white-space: nowrap;
    }

    #timeAndDate {
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-end;
        gap: clamp(18px, 2.5vw, 42px);
    }

    #clock {
        font-size: clamp(20px, 2.3vw, 34px);
        line-height: 1;
        font-weight: 620;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.025em;
    }

    #dateContainer {
        margin: 0;
        padding: 0;
        color: var(--u-land-secondary);
        font-size: clamp(12px, 1.25vw, 18px);
        line-height: 1;
        font-weight: 500;
        white-space: nowrap;
    }

    #logo {
        display: none;
    }

    #prayerTimeEzan {
        margin: 0;
        padding: clamp(6px, .85vh, 10px) clamp(14px, 1.4vw, 22px);
        border-radius: clamp(14px, 1vw, 18px);
        border: 1px solid rgba(100,169,255,.22);
        background: linear-gradient(135deg, rgba(10,132,255,.145), rgba(255,255,255,.028));
        -webkit-backdrop-filter: blur(36px) saturate(185%);
        backdrop-filter: blur(36px) saturate(185%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 7px 24px rgba(0,0,0,.19);
        color: var(--u-land-text);
    }

    #countdownString {
        display: grid;
        grid-template-columns: auto minmax(120px, 1fr) auto;
        grid-template-areas: "label name time";
        align-items: center;
        gap: clamp(12px, 1.4vw, 22px);
    }

    #nextPrayerLabel {
        grid-area: label;
        color: #64a9ff;
        font-size: clamp(9px, .85vw, 13px);
        font-weight: 750;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    #nextPrayerName {
        grid-area: name;
        font-size: clamp(17px, 1.55vw, 24px);
        font-weight: 700;
    }

    #ezan {
        grid-area: time;
        justify-self: end;
        font-size: clamp(18px, 1.65vw, 26px);
        line-height: 1;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
    }

    #content {
        min-height: 0;
        margin: 0;
        display: block;
        position: relative;
    }

    #prayerTimesTable {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: table;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;
        border-radius: clamp(16px, 1.2vw, 22px);
        border: 1px solid var(--u-land-border);
        background: linear-gradient(150deg, rgba(255,255,255,.062), rgba(255,255,255,.018));
        -webkit-backdrop-filter: blur(38px) saturate(175%);
        backdrop-filter: blur(38px) saturate(175%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 9px 30px rgba(0,0,0,.20);
    }

    #prayerTimesTable tbody {
        height: 100%;
    }

    #prayerTimesTable tr:first-child {
        height: calc(100% - clamp(42px, 7.5vh, 62px));
    }

    #prayerTimesTable tr:last-child {
        height: clamp(42px, 7.5vh, 62px);
    }

    #prayerTimesTable td {
        width: 50%;
        padding: 0;
        vertical-align: top;
    }

    #prayerTimesTable tr:first-child td:first-child {
        border-right: 1px solid var(--u-land-separator);
    }

    .prayerTime {
        position: relative;
        width: 100%;
        height: 33.3333%;
        min-height: 0;
        margin: 0;
        padding: 0 clamp(14px, 1.5vw, 24px);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        border-radius: 0;
        border-bottom: 1px solid var(--u-land-separator);
        background: rgba(255,255,255,.006);
        box-shadow: none;
        color: var(--u-land-text);
        font-size: clamp(16px, 1.55vw, 24px);
        line-height: 1;
        font-weight: 540;
        font-variant-numeric: tabular-nums;
    }

    #prayerTimesTable tr:first-child td .prayerTime:last-of-type {
        border-bottom: 0;
    }

    .prayerLabel {
        min-width: 0;
        text-align: left;
        font-weight: 560;
    }

    .prayerLabel::after {
        content: "";
    }

    .prayerValue,
    #sabahNamaziSpan {
        justify-self: end;
        font-weight: 620;
        font-variant-numeric: tabular-nums;
    }

    .gebetszeit {
        display: none;
    }

    .prayerTime.is-active-prayer {
        background: linear-gradient(90deg, rgba(10,132,255,.25), rgba(10,132,255,.055));
        box-shadow: inset 3px 0 0 rgba(64,156,255,.95);
    }

    .prayerTime.is-active-prayer::after {
        content: "AKTUELL";
        position: absolute;
        right: clamp(78px, 8vw, 130px);
        top: 50%;
        transform: translateY(-50%);
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(10,132,255,.15);
        border: 1px solid rgba(100,169,255,.19);
        color: #73b4ff;
        font-size: clamp(7px, .65vw, 10px);
        line-height: 1;
        font-weight: 750;
        letter-spacing: .055em;
    }

    #sabah {
        height: 100%;
        border-bottom: 0;
        background: rgba(255,255,255,.025);
        font-size: clamp(15px, 1.35vw, 21px);
    }

    #dailyUpdate.daily-glass-card {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: none;
        grid-template-columns: 1fr 1fr;
        gap: clamp(8px, 1vw, 16px);
        opacity: 1;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    #dailyUpdate .daily-slide {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 1 !important;
        transform: none !important;
        overflow: hidden;
        border-radius: clamp(16px, 1.2vw, 22px);
        border: 1px solid var(--u-land-border);
        background: rgba(255,255,255,.035);
        -webkit-backdrop-filter: blur(36px) saturate(175%);
        backdrop-filter: blur(36px) saturate(175%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 9px 30px rgba(0,0,0,.20);
        pointer-events: auto;
    }

    #dailyUpdate .daily-slide img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        filter: saturate(.84) brightness(.74) contrast(.96);
    }

    #dailyUpdate .daily-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.20));
        pointer-events: none;
    }

    #dailyUpdate .daily-glass-overlay {
        top: clamp(10px, 1.2vh, 16px);
        left: clamp(11px, 1.2vw, 18px);
    }

    #dailyUpdate .daily-kicker {
        min-height: clamp(19px, 2.7vh, 26px);
        padding: 0 8px;
        font-size: clamp(8px, .65vw, 10px);
    }

    #dailyUpdate .daily-pagination {
        display: none;
    }

    #dailyUpdate[style*="display: grid"],
    #dailyUpdate[style*="display: block"] {
        display: grid !important;
    }

    #qibla,
    #burgerMenu,
    #navbar,
    #tonStatus,
    #copyright,
    #currentDate {
        display: none !important;
    }

    #iosActionBar {
        left: 50% !important;
        right: auto !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%);
        width: clamp(210px, 18vw, 280px);
        height: clamp(42px, 6vh, 52px);
        padding: 0 8px;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around;
        gap: 0 !important;
        border-radius: 17px;
        border: 1px solid rgba(255,255,255,.16);
        background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
        -webkit-backdrop-filter: blur(38px) saturate(185%);
        backdrop-filter: blur(38px) saturate(185%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 9px 28px rgba(0,0,0,.27);
        z-index: 90;
    }

    #iosActionBar > * {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    #iosActionBar svg {
        width: clamp(20px, 1.55vw, 24px);
        height: clamp(20px, 1.55vw, 24px);
    }
}

/* Smartphone landscape remains denser than notebook/tablet. */
@media only screen and (orientation: landscape) and (max-height: 500px) {
    body {
        padding-top: max(5px, env(safe-area-inset-top));
        padding-bottom: max(5px, env(safe-area-inset-bottom));
    }

    #main-content {
        gap: 4px;
        padding-bottom: 43px;
    }

    #header,
    #prayerTimeEzan {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #header2 {
        font-size: clamp(16px, 3.7vh, 21px);
    }

    #clock {
        font-size: clamp(18px, 4.6vh, 25px);
    }

    #dateContainer {
        font-size: clamp(10px, 2.5vh, 13px);
    }

    .prayerTime {
        font-size: clamp(13px, 3.2vh, 17px);
    }

    #sabah {
        font-size: clamp(12px, 2.9vh, 15px);
    }

    #iosActionBar {
        height: 40px;
        width: min(215px, 35vw);
    }
}

/* Notebook/desktop: use the additional space without returning to oversized legacy UI. */
@media only screen and (orientation: landscape) and (min-width: 1400px) and (min-height: 701px) {
    body {
        padding: 12px 18px;
    }

    #main-content {
        gap: 10px;
        padding-bottom: 70px;
    }

    #header {
        padding: 12px 22px;
    }

    #prayerTimeEzan {
        padding: 9px 22px;
    }

    #prayerTimesTable tr:first-child {
        height: calc(100% - 64px);
    }

    #prayerTimesTable tr:last-child {
        height: 64px;
    }
}


/* =========================================================
   iOS Glass 8.9 – Strong active prayer state
   Same visual language in portrait and landscape.
   ========================================================= */
@media only screen and (max-width: 700px) and (orientation: portrait),
       only screen and (orientation: landscape) {
    .prayerTime.is-active-prayer {
        z-index: 2;
        color: #ffffff;
        background:
            linear-gradient(90deg,
                rgba(10,132,255,.46) 0%,
                rgba(10,132,255,.30) 48%,
                rgba(10,132,255,.17) 100%);
        box-shadow:
            inset 3px 0 0 #64b5ff,
            inset 0 1px 0 rgba(255,255,255,.20),
            inset 0 -1px 0 rgba(100,181,255,.20),
            0 0 0 1px rgba(64,156,255,.42),
            0 0 22px rgba(10,132,255,.20);
    }

    .prayerTime.is-active-prayer .prayerLabel,
    .prayerTime.is-active-prayer .prayerValue {
        color: #ffffff;
        font-weight: 720;
        text-shadow: 0 1px 10px rgba(0,0,0,.22);
    }

    .prayerTime.is-active-prayer .prayerLabel {
        padding-left: 17px;
        position: relative;
    }

    .prayerTime.is-active-prayer .prayerLabel::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 8px;
        height: 8px;
        transform: translateY(-50%);
        border-radius: 50%;
        background: #7cc4ff;
        box-shadow:
            0 0 0 3px rgba(100,181,255,.15),
            0 0 12px rgba(100,181,255,.72);
    }

    .prayerTime.is-active-prayer::after {
        content: "AKTUELL";
        background: rgba(10,132,255,.32);
        border: 1px solid rgba(140,205,255,.50);
        color: #d9efff;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            0 2px 10px rgba(0,0,0,.16);
        font-weight: 800;
    }
}

/* Portrait positioning of active status pill. */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    .prayerTime.is-active-prayer::after {
        right: 88px;
        padding: 4px 7px;
        font-size: clamp(7px, .95vh, 9px);
    }
}

/* Landscape gets a slightly wider active indicator. */
@media only screen and (orientation: landscape) {
    .prayerTime.is-active-prayer::after {
        right: clamp(82px, 8.2vw, 138px);
        padding: 4px 8px;
        font-size: clamp(7px, .7vw, 10px);
    }
}


/* =========================================================
   Stage 9 – Shared iOS Glass Application UI
   ========================================================= */

/* ---------- Shared sheets / popovers ---------- */
.ios-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4998;
    display: none;
    background: rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ios-sheet-backdrop.is-open { display: block; }

.ios-sheet {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 4999;
    width: min(390px, calc(100vw - 28px));
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(36,38,44,.80), rgba(20,22,28,.68));
    -webkit-backdrop-filter: blur(40px) saturate(190%);
    backdrop-filter: blur(40px) saturate(190%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 20px 60px rgba(0,0,0,.45);
    color: #f5f5f7;
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
}
.ios-sheet.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.ios-sheet-title {
    margin: 3px 4px 10px;
    font: 700 17px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.ios-sheet-subtitle {
    margin: -4px 4px 10px;
    color: rgba(235,235,245,.62);
    font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.ios-sheet-action {
    width: 100%;
    min-height: 46px;
    margin: 5px 0 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.065);
    color: #fff;
    font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    text-align: left;
    cursor: pointer;
}
.ios-sheet-action:active { background: rgba(255,255,255,.13); }
.ios-sheet-action .ios-action-value {
    color: #64a9ff;
    font-weight: 650;
}
.ios-sheet-action.is-danger { color: #ff6961; }

/* ---------- Next prayer enhancements ---------- */
#nextPrayerMeta {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: rgba(235,235,245,.58);
    font-size: .72em;
    font-weight: 550;
    white-space: nowrap;
}
#nextPrayerClock {
    color: rgba(255,255,255,.76);
    font-variant-numeric: tabular-nums;
}
#prayerTimeEzan.is-urgent {
    border-color: rgba(255,159,10,.45) !important;
    background: linear-gradient(135deg, rgba(255,159,10,.20), rgba(255,255,255,.03)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 24px rgba(255,159,10,.13) !important;
}
#prayerTimeEzan.is-urgent #nextPrayerLabel,
#prayerTimeEzan.is-urgent #nextPrayerName {
    color: #ffb340;
}

/* ---------- Generic modern app pages ---------- */
body.ios-page {
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
    color: #f5f5f7;
    background:
        radial-gradient(ellipse at 12% 4%, rgba(30,110,235,.24), transparent 34%),
        radial-gradient(ellipse at 90% 40%, rgba(93,83,220,.14), transparent 33%),
        #030609;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.ios-page-shell {
    width: min(880px, calc(100% - 28px));
    margin: 0 auto;
    padding: max(22px, env(safe-area-inset-top)) 0 max(30px, env(safe-area-inset-bottom));
}
.ios-page-header {
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    backdrop-filter: blur(36px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 32px rgba(0,0,0,.24);
}
.ios-page-header h1 {
    margin: 0;
    font-size: clamp(25px, 5vw, 38px);
    letter-spacing: -.035em;
}
.ios-page-header p {
    margin: 7px 0 0;
    color: rgba(235,235,245,.62);
    font-size: 14px;
}
.ios-glass-card {
    margin: 10px 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
    -webkit-backdrop-filter: blur(34px) saturate(175%);
    backdrop-filter: blur(34px) saturate(175%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 26px rgba(0,0,0,.20);
}
.ios-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: #64a9ff;
    text-decoration: none;
    font-weight: 650;
}

/* ---------- Home / location ---------- */
body.ios-home {
    min-height: 100dvh;
    margin: 0;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    display: grid;
    place-items: center;
    color: #f5f5f7;
    background:
        radial-gradient(circle at 20% 5%, rgba(10,132,255,.27), transparent 34%),
        radial-gradient(circle at 88% 68%, rgba(94,92,230,.16), transparent 32%),
        #030609;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
}
.ios-home .card {
    width: min(460px, 100%);
    margin: 0;
    padding: 22px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
    -webkit-backdrop-filter: blur(40px) saturate(185%);
    backdrop-filter: blur(40px) saturate(185%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 55px rgba(0,0,0,.32);
    text-align: left;
}
.ios-home .card h1 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -.035em;
}
.ios-home .card p { color: rgba(235,235,245,.64); }
.ios-home button,
.ios-home select {
    width: 100%;
    min-height: 48px;
    margin: 7px 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 15px;
    background: rgba(255,255,255,.065);
    color: #fff;
    font: 600 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.ios-home button { cursor: pointer; text-align: left; }
.ios-home button:first-of-type {
    background: linear-gradient(135deg, rgba(10,132,255,.34), rgba(10,132,255,.16));
    border-color: rgba(100,169,255,.28);
}
.ios-home select option { color: #111; }
.ios-home #status {
    min-height: 18px;
    margin-top: 8px;
    color: rgba(235,235,245,.68);
    font-size: 13px;
}
.ios-home footer {
    position: fixed;
    bottom: max(8px, env(safe-area-inset-bottom));
    color: rgba(235,235,245,.36);
    font-size: 11px;
}

/* ---------- Qibla ---------- */
body.ios-qibla {
    min-height: 100dvh;
    margin: 0;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    box-sizing: border-box;
    color: #f5f5f7;
    background:
        radial-gradient(circle at 50% 0%, rgba(48,209,88,.18), transparent 35%),
        radial-gradient(circle at 12% 70%, rgba(10,132,255,.14), transparent 32%),
        #030609;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
}
.ios-qibla-shell {
    width: min(620px, 100%);
    margin: 0 auto;
    text-align: center;
}
.ios-qibla-card {
    padding: 20px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 16px 50px rgba(0,0,0,.30);
}
.ios-qibla h1 { margin: 4px 0 3px; letter-spacing: -.03em; }
.ios-qibla .qibla-subtitle { margin: 0 0 16px; color: rgba(235,235,245,.58); font-size: 13px; }
.ios-qibla #qiblaArrow {
    width: min(58vw, 260px);
    height: min(58vw, 260px);
    margin: 10px auto;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.30));
}
.ios-qibla #enableCompassBtn {
    position: static !important;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border: 1px solid rgba(94,225,122,.26) !important;
    border-radius: 15px !important;
    background: rgba(48,209,88,.14) !important;
    color: #6be384 !important;
    font: 700 15px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
}
.ios-qibla #debugOutput {
    position: static !important;
    margin-top: 12px;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(235,235,245,.66) !important;
    text-align: left;
    font-size: 12px !important;
    white-space: pre-line;
}
#qiblaMetrics {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.qibla-metric {
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}
.qibla-metric strong { display: block; font-size: 18px; }
.qibla-metric span { color: rgba(235,235,245,.52); font-size: 11px; }

/* ---------- Legacy content pages modernized through overrides ---------- */
body.ios-page #navbar,
body.ios-page #burgerMenu { display: none !important; }
body.ios-page .farz,
body.ios-page .ozel,
body.ios-page .event,
body.ios-page .info-box,
body.ios-page .container {
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.18) !important;
    color: #f5f5f7 !important;
}
body.ios-page .farz { font-size: clamp(17px, 3vw, 24px) !important; padding: 14px !important; }
body.ios-page .sart { background: rgba(255,255,255,.035) !important; border-radius: 12px !important; padding: 8px 12px; }
body.ios-page #installButton {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(100,169,255,.28);
    border-radius: 15px;
    background: rgba(10,132,255,.20);
    color: #fff;
    font-weight: 700;
}


/* ---------- Secondary pages final overrides ---------- */
body.ios-page {
    padding: max(14px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    position: static;
    width: auto;
    height: auto;
}
body.ios-page .ios-page-topnav {
    width: min(880px, 100%);
    margin: 0 auto 6px;
}
body.ios-page #content,
body.ios-page main#content {
    width: min(880px, 100%);
    margin: 0 auto;
    display: block !important;
}
body.ios-page #header {
    margin: 0 0 10px;
    padding: 16px 18px;
    display: block;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
    -webkit-backdrop-filter: blur(34px) saturate(175%);
    backdrop-filter: blur(34px) saturate(175%);
}
body.ios-page #header2 {
    font-size: clamp(25px, 5vw, 38px) !important;
    font-weight: 750;
    text-align: left;
    white-space: normal;
}
body.ios-page #prayerTimesTable {
    width: min(880px, 100%);
    height: auto !important;
    margin: 0 auto;
    display: table !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.ios-page #prayerTimesTable tbody,
body.ios-page #prayerTimesTable tr,
body.ios-page #prayerTimesTable td {
    display: table-row-group;
    width: auto;
    height: auto !important;
}
body.ios-page #prayerTimesTable tr { display: table-row; }
body.ios-page #prayerTimesTable td { display: table-cell; padding: 0; }
body.ios-page .event {
    margin: 9px 0 !important;
    padding: 14px !important;
}
body.ios-page .ozel {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: clamp(17px, 3vw, 22px) !important;
    font-weight: 680;
}
body.ios-page .gun {
    margin: 7px 0 0 !important;
    padding: 0 !important;
    color: rgba(235,235,245,.58) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
}
body.ios-page details summary {
    cursor: pointer;
    font-weight: 680;
}
body.ios-page .container {
    width: min(620px, 100%);
    margin: 30px auto 0;
    padding: 18px !important;
    box-sizing: border-box;
}
body.ios-page .info-box {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.ios-page #copyright {
    display: block !important;
    width: min(880px, 100%);
    margin: 20px auto 0;
    color: rgba(235,235,245,.35) !important;
    text-align: center;
    font-size: 11px;
}


@media only screen and (orientation: portrait) and (max-width: 700px) {
    #countdownString {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "label label"
            "name time"
            "meta time";
    }
    #nextPrayerMeta {
        grid-area: meta;
        margin-top: 2px;
    }
}
@media only screen and (orientation: landscape) {
    #countdownString {
        grid-template-columns: auto minmax(100px, 1fr) auto auto;
        grid-template-areas: "label name meta time";
    }
    #nextPrayerMeta {
        grid-area: meta;
        justify-self: end;
    }
}


/* =========================================================
   Stage 9.4 – App-style navigation popover
   ========================================================= */
#burgerMenu {
    transition: background-color .18s ease, transform .18s ease, border-color .18s ease;
}
#burgerMenu.is-open {
    background: rgba(10,132,255,.18) !important;
    border-color: rgba(100,169,255,.35) !important;
    transform: scale(.96);
}

/* Reset the former slide-in navigation and render it as a compact popover. */
#navbar,
#navbar.hidden,
#navbar.show {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    width: min(330px, calc(100vw - 28px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 100px);
    padding: 10px !important;
    box-sizing: border-box;
    flex-direction: column !important;
    gap: 4px;
    overflow: auto;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(36,38,44,.86), rgba(18,20,25,.76)) !important;
    -webkit-backdrop-filter: blur(42px) saturate(190%) !important;
    backdrop-filter: blur(42px) saturate(190%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 22px 60px rgba(0,0,0,.42) !important;
    z-index: 4900 !important;
    transform-origin: top right !important;
    transition: opacity .18s ease, transform .2s ease, visibility .18s ease !important;
}

#navbar.hidden {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) scale(.96) !important;
}

#navbar.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

#navbar a {
    min-height: 48px;
    padding: 0 10px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #f5f5f7 !important;
    font: 620 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
    text-align: left;
    text-decoration: none;
}

#navbar a + a {
    border-top: 1px solid rgba(255,255,255,.075) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

#navbar a:hover,
#navbar a:focus-visible {
    background: rgba(255,255,255,.075) !important;
    outline: none;
}

#navbar a:active {
    background: rgba(255,255,255,.12) !important;
    transform: scale(.985);
}

#navbar a.is-current {
    background: rgba(10,132,255,.13) !important;
}

.nav-item-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(100,169,255,.13);
    background: rgba(10,132,255,.13);
    color: #64a9ff;
    font-size: 16px;
    font-weight: 760;
}

#navbar a.is-current .nav-item-icon {
    background: rgba(10,132,255,.24);
    border-color: rgba(100,169,255,.25);
}

.nav-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item-chevron {
    color: rgba(235,235,245,.44);
    font-size: 24px;
    font-weight: 450;
    line-height: 1;
}

/* Main page portrait: menu sits directly below the burger button. */
@media only screen and (orientation: portrait) and (max-width: 700px) {
    #navbar,
    #navbar.hidden,
    #navbar.show {
        top: max(56px, calc(env(safe-area-inset-top) + 42px)) !important;
    }
}

/* Secondary pages use the same small app menu instead of hiding navigation. */
body.ios-page #burgerMenu {
    display: flex !important;
    position: fixed !important;
    top: max(18px, env(safe-area-inset-top)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.07) !important;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    z-index: 4901 !important;
}

body.ios-page #burgerMenu span {
    width: 17px !important;
    height: 2px !important;
    margin: 2px 0 !important;
}

body.ios-page #navbar {
    display: flex !important;
    top: max(60px, calc(env(safe-area-inset-top) + 46px)) !important;
}

/* Keep the compact dashboard clean on phone landscape. */
@media only screen and (orientation: landscape) and (max-height: 500px) {
    #burgerMenu,
    #navbar {
        display: none !important;
    }
}

/* On larger landscape/notebook, expose the popover menu again. */
@media only screen and (orientation: landscape) and (min-height: 501px) {
    #burgerMenu {
        display: flex !important;
        position: fixed !important;
        top: max(18px, env(safe-area-inset-top)) !important;
        right: max(22px, env(safe-area-inset-right)) !important;
        left: auto !important;
        z-index: 4901 !important;
    }

    #navbar,
    #navbar.hidden,
    #navbar.show {
        top: max(60px, calc(env(safe-area-inset-top) + 48px)) !important;
    }
}


/* =========================================================
   Stage 9.5 – Qibla compass compatibility
   The qibla core is controlled by CSS/qibla.css.
   ========================================================= */
body.ios-qibla .ios-qibla-shell {
    width: min(620px, 100%);
    margin: 0 auto;
}
body.ios-qibla .ios-qibla-card {
    overflow: visible;
}
body.ios-qibla #qiblaArrow {
    width: 12px !important;
    height: 40% !important;
    margin: 0 !important;
}
body.ios-qibla #debugOutput {
    display: none !important;
}


/* Stage 9.6 regression fix: restore compact next-prayer proportions */
#nextPrayerMeta { display:none !important; }
@media only screen and (orientation: portrait) and (max-width:700px) {
  #countdownString {
    grid-template-columns:1fr auto !important;
    grid-template-areas:"label label" "name time" !important;
    row-gap:1px !important;
  }
}
@media only screen and (orientation: landscape) {
  #countdownString {
    grid-template-columns:auto minmax(100px,1fr) auto !important;
    grid-template-areas:"label name time" !important;
  }
}

/* =========================================================
   Stage 10 – Automatic Light / Dark Mode
   Follows the operating-system setting via prefers-color-scheme.
   ========================================================= */
:root {
    color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --ios-light-bg: #f2f2f7;
        --ios-light-surface: rgba(255,255,255,.62);
        --ios-light-surface-strong: rgba(255,255,255,.78);
        --ios-light-border: rgba(60,60,67,.15);
        --ios-light-separator: rgba(60,60,67,.12);
        --ios-light-text: #1c1c1e;
        --ios-light-secondary: rgba(60,60,67,.64);
        --ios-light-blue: #007aff;
        --ios-light-green: #248a3d;
    }

    html, body,
    body.ios-page,
    body.ios-home,
    body.ios-qibla {
        color: var(--ios-light-text) !important;
        background:
            radial-gradient(ellipse at 12% 2%, rgba(0,122,255,.13), transparent 32%),
            radial-gradient(ellipse at 92% 45%, rgba(88,86,214,.08), transparent 34%),
            radial-gradient(ellipse at 12% 92%, rgba(52,199,89,.06), transparent 30%),
            var(--ios-light-bg) !important;
    }

    /* Main application glass surfaces */
    #header,
    #prayerTimeEzan,
    #prayerTimesTable,
    #iosActionBar,
    #navbar,
    .ios-sheet,
    .ios-home .card,
    .ios-qibla-card,
    .ios-page-header,
    .ios-glass-card,
    body.ios-page #header,
    body.ios-page .farz,
    body.ios-page .event,
    body.ios-page .container,
    #dailyUpdate.daily-glass-card {
        color: var(--ios-light-text) !important;
        border-color: var(--ios-light-border) !important;
        background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)) !important;
        -webkit-backdrop-filter: blur(34px) saturate(175%) !important;
        backdrop-filter: blur(34px) saturate(175%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.86),
            0 10px 30px rgba(60,60,67,.12) !important;
    }

    #header2,
    #clock,
    #nextPrayerName,
    #ezan,
    .prayerTime,
    .prayerLabel,
    .prayerValue,
    #sabahNamaziSpan,
    .ios-sheet-title,
    .ios-home h1,
    .ios-qibla h1,
    body.ios-page #header2,
    body.ios-page details summary,
    body.ios-page .ozel {
        color: var(--ios-light-text) !important;
        text-shadow: none !important;
    }

    #dateContainer,
    .qibla-subtitle,
    .ios-sheet-subtitle,
    .ios-page-header p,
    .ios-home .card p,
    body.ios-page .gun,
    #qiblaMetrics .qibla-metric span,
    #status {
        color: var(--ios-light-secondary) !important;
    }

    #prayerTimeEzan {
        background: linear-gradient(135deg, rgba(0,122,255,.15), rgba(255,255,255,.66)) !important;
        border-color: rgba(0,122,255,.22) !important;
    }

    #nextPrayerLabel {
        color: #0066cc !important;
    }

    #prayerTimeEzan.is-urgent {
        border-color: rgba(255,149,0,.34) !important;
        background: linear-gradient(135deg, rgba(255,149,0,.15), rgba(255,255,255,.68)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 22px rgba(255,149,0,.09) !important;
    }

    #prayerTimeEzan.is-urgent #nextPrayerLabel,
    #prayerTimeEzan.is-urgent #nextPrayerName {
        color: #c93400 !important;
    }

    .prayerTime {
        background: rgba(255,255,255,.16) !important;
        border-bottom-color: var(--ios-light-separator) !important;
    }

    .prayerTime.is-active-prayer {
        color: #fff !important;
        background: linear-gradient(90deg, rgba(0,122,255,.82), rgba(0,122,255,.58)) !important;
        box-shadow:
            inset 3px 0 0 rgba(255,255,255,.92),
            inset 0 1px 0 rgba(255,255,255,.24),
            0 0 0 1px rgba(0,122,255,.35),
            0 7px 20px rgba(0,122,255,.16) !important;
    }

    .prayerTime.is-active-prayer .prayerLabel,
    .prayerTime.is-active-prayer .prayerValue {
        color: #fff !important;
    }

    .prayerTime.is-active-prayer .prayerLabel::before {
        background: #fff !important;
        box-shadow: 0 0 0 3px rgba(255,255,255,.20), 0 0 10px rgba(255,255,255,.35) !important;
    }

    .prayerTime.is-active-prayer::after {
        color: #fff !important;
        background: rgba(255,255,255,.19) !important;
        border-color: rgba(255,255,255,.44) !important;
    }

    #sabah {
        background: rgba(255,255,255,.34) !important;
    }

    #qibla {
        color: var(--ios-light-green) !important;
        border-color: rgba(36,138,61,.20) !important;
        background: linear-gradient(135deg, rgba(52,199,89,.13), rgba(255,255,255,.65)) !important;
    }

    /* Bottom controls / menu */
    #iosActionBar,
    #burgerMenu {
        color: var(--ios-light-text) !important;
        background: rgba(255,255,255,.68) !important;
        border-color: rgba(60,60,67,.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 26px rgba(60,60,67,.12) !important;
    }

    #iosActionBar svg,
    #burgerMenu span {
        fill: var(--ios-light-text) !important;
        background-color: var(--ios-light-text) !important;
    }

    #navbar,
    #navbar.hidden,
    #navbar.show {
        background: rgba(248,248,250,.88) !important;
        border-color: rgba(60,60,67,.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 20px 55px rgba(60,60,67,.20) !important;
    }

    #navbar a {
        color: var(--ios-light-text) !important;
        border-top-color: var(--ios-light-separator) !important;
    }

    #navbar a:hover,
    #navbar a:focus-visible {
        background: rgba(60,60,67,.07) !important;
    }

    #navbar a.is-current {
        background: rgba(0,122,255,.10) !important;
    }

    .nav-item-icon {
        color: #007aff !important;
        background: rgba(0,122,255,.10) !important;
        border-color: rgba(0,122,255,.12) !important;
    }

    .nav-item-chevron {
        color: rgba(60,60,67,.42) !important;
    }

    /* Sheets */
    .ios-sheet-backdrop.is-open {
        background: rgba(120,120,128,.18) !important;
    }

    .ios-sheet-action {
        color: var(--ios-light-text) !important;
        background: rgba(118,118,128,.08) !important;
        border-color: rgba(60,60,67,.08) !important;
    }

    .ios-sheet-action:active {
        background: rgba(118,118,128,.16) !important;
    }

    /* Location page */
    .ios-home button,
    .ios-home select {
        color: var(--ios-light-text) !important;
        border-color: rgba(60,60,67,.12) !important;
        background: rgba(255,255,255,.60) !important;
    }

    .ios-home button:first-of-type {
        color: #fff !important;
        background: linear-gradient(135deg, rgba(0,122,255,.88), rgba(0,122,255,.68)) !important;
        border-color: rgba(0,122,255,.25) !important;
    }

    /* Qibla */
    #qiblaMetrics .qibla-metric {
        color: var(--ios-light-text) !important;
        background: rgba(255,255,255,.52) !important;
        border-color: rgba(60,60,67,.10) !important;
    }

    body.ios-qibla #enableCompassBtn {
        color: #248a3d !important;
        background: rgba(52,199,89,.11) !important;
        border-color: rgba(36,138,61,.18) !important;
    }

    /* Hadith / Ayat image remains readable on a bright UI. */
    #dailyUpdate .daily-slide img {
        filter: saturate(.88) brightness(.74) contrast(.96) !important;
    }

    #dailyUpdate .daily-slide::after {
        background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.26)) !important;
    }

    .daily-kicker,
    .daily-pagination {
        color: #fff !important;
        background: rgba(20,20,22,.38) !important;
        border-color: rgba(255,255,255,.20) !important;
    }

    /* Secondary content */
    body.ios-page .sart,
    body.ios-page .info-box {
        color: var(--ios-light-text) !important;
        background: rgba(255,255,255,.34) !important;
    }

    body.ios-page a,
    .ios-back-link {
        color: #007aff !important;
    }

    body.ios-page #copyright,
    .ios-home footer {
        color: rgba(60,60,67,.38) !important;
    }
}


/* =========================================================
   Stage 10.1 – Hadith/Ayat Fullscreen Image Modal
   ========================================================= */
body.daily-modal-open {
    overflow: hidden !important;
}

.daily-image-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(14px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        max(14px, env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
    box-sizing: border-box;
    background: rgba(0,0,0,.62);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.daily-image-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.daily-image-modal-panel {
    width: min(94vw, 760px);
    max-height: calc(100dvh - 28px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    background: rgba(20,22,27,.82);
    -webkit-backdrop-filter: blur(36px) saturate(175%);
    backdrop-filter: blur(36px) saturate(175%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 24px 70px rgba(0,0,0,.48);
    transform: scale(.96) translateY(6px);
    transition: transform .22s ease;
}

.daily-image-modal.is-open .daily-image-modal-panel {
    transform: scale(1) translateY(0);
}

.daily-image-modal-header {
    min-height: 48px;
    padding: 7px 8px 7px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #f5f5f7;
    font: 700 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

#dailyImageModalClose {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #f5f5f7;
    font: 400 27px/1 -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
}

#dailyImageModalClose:active {
    background: rgba(255,255,255,.15);
    transform: scale(.94);
}

.daily-image-modal-content {
    min-height: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

#dailyImageModalImage {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 100px);
    object-fit: contain;
    border-radius: 16px;
}

/* The daily card now communicates that it can be opened. */
#dailyUpdate.daily-glass-card {
    cursor: zoom-in;
}

@media (prefers-color-scheme: light) {
    .daily-image-modal {
        background: rgba(235,238,244,.62);
    }

    .daily-image-modal-panel {
        border-color: rgba(0,0,0,.10);
        background: rgba(250,250,252,.86);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.80),
            0 24px 70px rgba(44,52,64,.22);
    }

    .daily-image-modal-header {
        border-bottom-color: rgba(0,0,0,.08);
        color: #111318;
    }

    #dailyImageModalClose {
        border-color: rgba(0,0,0,.08);
        background: rgba(0,0,0,.055);
        color: #111318;
    }
}


/* =========================================================
   Stage 10.2 – Modal navigation + Light Mode action icons
   ========================================================= */
.daily-image-modal-content {
    position: relative;
}

#dailyImageModalImage {
    transition: opacity .16s ease, transform .16s ease;
}

#dailyImageModalImage.is-switching {
    opacity: .22;
    transform: scale(.985);
}

.daily-modal-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    background: rgba(20,22,27,.46);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    color: #fff;
    font: 400 34px/1 -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 5px 18px rgba(0,0,0,.24);
    transform: translateY(-50%);
    cursor: pointer;
}

.daily-modal-nav:active {
    transform: translateY(-50%) scale(.92);
}

.daily-modal-nav-prev { left: 16px; }
.daily-modal-nav-next { right: 16px; }

.daily-modal-pagination {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(20,22,27,.36);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    transform: translateX(-50%);
}

.daily-modal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.36);
    transition: width .18s ease, background-color .18s ease;
}

.daily-modal-dot.is-active {
    width: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
}

/* Bottom action icons always inherit a deliberate foreground color. */
#iosActionBar {
    color: #f5f5f7;
}

#iosActionBar .action-icon,
#iosActionBar svg {
    color: inherit;
    fill: currentColor !important;
}

@media (max-width: 700px) {
    .daily-modal-nav {
        width: 38px;
        height: 38px;
        font-size: 30px;
    }

    .daily-modal-nav-prev { left: 10px; }
    .daily-modal-nav-next { right: 10px; }

    .daily-modal-pagination { bottom: 12px; }
}

@media (prefers-color-scheme: light) {
    #iosActionBar {
        color: #1c1c1e !important;
    }

    #iosActionBar .action-icon,
    #iosActionBar svg,
    #soundIcon {
        color: #1c1c1e !important;
        fill: currentColor !important;
    }

    .daily-modal-nav {
        border-color: rgba(0,0,0,.10);
        background: rgba(250,250,252,.76);
        color: #111318;
        box-shadow: 0 5px 18px rgba(44,52,64,.16);
    }

    .daily-modal-pagination {
        border-color: rgba(0,0,0,.08);
        background: rgba(250,250,252,.72);
    }

    .daily-modal-dot {
        background: rgba(0,0,0,.25);
    }

    .daily-modal-dot.is-active {
        background: rgba(0,0,0,.76);
    }
}


/* =========================================================
   Stage 10.3 – Light Mode icon fix + mobile modal cleanup
   ========================================================= */

/* A previous Light-Mode rule applied background-color to the entire SVG.
   That turns every icon viewport into a solid square. SVGs themselves
   must stay transparent; only their paths should receive the foreground. */
#iosActionBar svg,
#iosActionBar .action-icon,
#soundIcon {
    background: transparent !important;
    background-color: transparent !important;
}

#iosActionBar svg path,
#iosActionBar .action-icon path,
#soundIcon path {
    fill: currentColor !important;
}

/* Smartphone: switching in the fullscreen Hadith/Ayat viewer is done by swipe.
   Hide desktop-style arrow controls to keep the image unobstructed. */
@media only screen and (max-width: 700px) {
    .daily-modal-nav {
        display: none !important;
    }
}

@media (prefers-color-scheme: light) {
    #iosActionBar,
    #iosActionBar a,
    #iosActionBar > div {
        color: #1c1c1e !important;
    }

    #iosActionBar svg,
    #iosActionBar .action-icon,
    #soundIcon {
        color: #1c1c1e !important;
        fill: none !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    #iosActionBar svg path,
    #iosActionBar .action-icon path,
    #soundIcon path {
        fill: #1c1c1e !important;
        stroke: none;
    }
}