@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
:root { --page-bg:#efe6d6; --page-bg-deep:#e4d6bf; --card:rgba(255,251,245,.94); --card-soft:rgba(250,243,233,.9); --ink:#24170f; --muted:#755d49; --accent:#8e6740; --border:rgba(91,63,38,.16); --shadow:0 22px 50px rgba(73,49,30,.12); --font-scale:1; }
        * { box-sizing:border-box; }
        body { margin:0; color:var(--ink); font-family:"Amiri","Noto Naskh Arabic",Georgia,serif; line-height:1.9; background:radial-gradient(circle at top right, rgba(255,255,255,.45), transparent 30%), linear-gradient(180deg,#f7f0e3 0%,var(--page-bg) 58%,var(--page-bg-deep) 100%); }
        body.theme-sand { --page-bg:#efe6d6; --page-bg-deep:#e4d6bf; --card:rgba(255,251,245,.94); --card-soft:rgba(250,243,233,.9); --ink:#24170f; --muted:#755d49; --accent:#8e6740; --border:rgba(91,63,38,.16); --shadow:0 22px 50px rgba(73,49,30,.12); }
        body.theme-emerald { --page-bg:#dfe9e2; --page-bg-deep:#cbd8d0; --card:rgba(249,252,250,.95); --card-soft:rgba(238,246,241,.94); --ink:#18211d; --muted:#4b6659; --accent:#2f6b57; --border:rgba(43,82,67,.16); --shadow:0 22px 50px rgba(33,58,47,.12); }
        body.theme-night { --page-bg:#1e232a; --page-bg-deep:#15191f; --card:rgba(34,40,48,.96); --card-soft:rgba(40,47,57,.98); --ink:#edf1f5; --muted:#b6c1cb; --accent:#d7b37a; --border:rgba(220,227,235,.1); --shadow:0 22px 60px rgba(0,0,0,.35); background:radial-gradient(circle at top right, rgba(255,255,255,.04), transparent 26%), linear-gradient(180deg,#222832 0%,var(--page-bg) 55%,var(--page-bg-deep) 100%); }
        .frame { width:min(1160px, calc(100% - 32px)); margin:28px auto 54px; }
        .top-actions { position:absolute; top:24px; inset-inline-end:auto; left:30px; right:30px; z-index:30; display:flex; align-items:center; gap:10px; direction:rtl; flex-direction:row; justify-content:space-between; }
        body.non-arabic-verses .top-actions { inset-inline-end:auto; left:30px; right:30px; direction:ltr; flex-direction:row; justify-content:space-between; }
        .back-link { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border:1px solid var(--border); border-radius:18px; background:rgba(255,252,246,.92); color:var(--ink); text-decoration:none; box-shadow:var(--shadow); font-size:1.45rem; font-weight:700; line-height:1; }
        .back-link:hover { background:rgba(255,255,255,.92); }
        body.theme-night .back-link { background:rgba(28,34,41,.96); color:#f1f5f8; border-color:rgba(255,255,255,.1); }
        .hero { position:relative; overflow:hidden; padding:34px 30px 28px; border-radius:28px; border:1px solid var(--border); background:linear-gradient(145deg,rgba(255,250,243,.97),rgba(244,232,215,.92)); box-shadow:var(--shadow); }
        body.theme-night .hero { background:linear-gradient(145deg,rgba(27,32,39,.98),rgba(37,43,52,.96)); }
        .hero.settings-open { padding-bottom:250px; }
        .title-row { padding:68px 0 0; }
        body.non-arabic-verses .title-row { direction:ltr; text-align:left; padding-inline-end:0; padding-top:68px; }
        .title-text { min-width:0; }
        .controls { position:relative; z-index:30; }
        .controls-summary { display:flex; align-items:center; justify-content:center; width:52px; height:52px; padding:0; cursor:pointer; list-style:none; border:1px solid var(--border); border-radius:18px; background:rgba(255,252,246,.92); box-shadow:var(--shadow); }
        .controls-summary::-webkit-details-marker { display:none; }
        body.theme-night .controls-summary { background:rgba(28,34,41,.96); }
        .gear-icon { display:inline-flex; align-items:center; justify-content:center; width:1.65em; height:1.65em; color:var(--accent); line-height:1; }
        .gear-icon svg { width:100%; height:100%; display:block; fill:currentColor; }
        .controls-panel-wrap { position:absolute; top:58px; inset-inline-start:0; width:min(460px, calc(100vw - 32px)); }
        .controls-panel-surface { border:1px solid var(--border); border-radius:22px; background:rgba(255,252,246,.97); box-shadow:var(--shadow); overflow:hidden; }
        body.theme-night .controls-panel-surface { background:rgba(28,34,41,.98); }
        .controls-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 10px; }
        .controls-title { margin:0; color:var(--ink); font-size:calc(1rem * var(--font-scale)); }
        .controls-language-note { margin:.3rem 0 0; color:var(--muted); font-size:calc(.84rem * var(--font-scale)); line-height:1.45; }
        .close-button,.controls button,.controls select,.report-close,.report-primary,.report-secondary,.report-icon,.support-button,.support-submit,.support-confirmation-ok { font:inherit; }
        .close-button,.controls button,.controls select,.report-close,.report-secondary,.support-button,.support-submit,.support-confirmation-ok { color:var(--ink); background:rgba(255,255,255,.68); border:1px solid var(--border); border-radius:999px; cursor:pointer; }
        .close-button { width:46px; height:46px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; }
        .close-button svg { width:28px; height:28px; display:block; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; fill:none; }
.controls-panel { display:flex; align-items:stretch; justify-content:space-between; gap:14px; padding:0 16px 14px; flex-wrap:wrap; border-top:1px solid var(--border); direction:inherit; }
.controls-group { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; width:100%; direction:inherit; text-align:start; }
        .controls-group > label,
        .controls-group > .switch-option { flex:1 1 auto; }
        .controls-group > select,
        .controls-group > button,
        .controls-group > .switch { flex:0 0 auto; }
        .controls label { color:var(--muted); font-size:calc(.94rem * var(--font-scale)); }
        .controls-group label[for="language-select"] { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
        .controls-group label[for="language-select"]::after { content:"\f0ac"; font-family:"Font Awesome 6 Free","Font Awesome 6 Pro","Font Awesome 5 Free"; font-weight:900; font-size:.95em; line-height:1; color:var(--accent); speak:none; }
.switch-option { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; cursor:pointer; color:var(--muted); font-size:calc(.94rem * var(--font-scale)); direction:inherit; }
        .switch { position:relative; display:inline-flex; width:50px; height:30px; }
        .switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
        .switch-slider { position:relative; display:block; width:100%; height:100%; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.68); transition:background-color .2s ease, border-color .2s ease; }
        .switch-slider::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .2s ease, background-color .2s ease; }
        .switch input:checked + .switch-slider { background:rgba(142,103,64,.18); border-color:rgba(142,103,64,.3); }
        .switch input:checked + .switch-slider::after { transform:translateX(20px); }
        .switch input:focus-visible + .switch-slider { outline:2px solid var(--accent); outline-offset:2px; }
        .controls button,.controls select { padding:8px 14px; }
        .controls select { inline-size:15.5rem; max-inline-size:100%; }
        .font-size-value { min-width:64px; text-align:center; color:var(--accent); font-size:calc(.98rem * var(--font-scale)); }
        .controls-group.font-size-group { grid-template-columns:1fr auto auto auto; }
        .font-size-button { inline-size:36px; block-size:36px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
        body.theme-night .close-button,body.theme-night .controls button,body.theme-night .controls select,body.theme-night .report-close,body.theme-night .report-secondary,body.theme-night .support-button { background:rgba(53,61,72,.96); color:#f1f5f8; border-color:rgba(255,255,255,.1); }
        body.theme-night .switch-option { color:var(--muted); }
        body.theme-night .switch-slider { background:rgba(53,61,72,.96); border-color:rgba(255,255,255,.1); }
        body.theme-night .switch-slider::after { background:#f1f5f8; }
        body.theme-night .switch input:checked + .switch-slider { background:rgba(215,179,122,.22); border-color:rgba(215,179,122,.35); }
        body.theme-night .switch input:checked + .switch-slider::after { background:#f6ead8; }
        .eyebrow { display:none; min-height:52px; margin:0 0 10px; padding-inline-end:130px; color:var(--muted); font-size:calc(.95rem * var(--font-scale)); letter-spacing:.04em; }
        body.non-arabic-verses .eyebrow { min-height:0; padding-inline-end:0; font-size:calc(.78rem * var(--font-scale)); }
        h1 { margin:0; font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.15; }
        body.non-arabic-verses h1 { direction:ltr; text-align:left; font-size:clamp(1.45rem, 2.8vw, 2.35rem); white-space:nowrap; overflow-wrap:normal; }
        .sections { margin-top:24px; display:grid; gap:18px; }
        .section { overflow:hidden; border-radius:24px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow); }
        .section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,247,236,.14)); }
        body.non-arabic-verses .section-head { direction:ltr; text-align:left; }
        body.theme-night .section-head { background:linear-gradient(180deg,rgba(42,49,58,.98),rgba(32,38,46,.92)); }
        .section-head h2 { margin:0; font-size:calc(1.08rem * var(--font-scale)); }
        body.non-arabic-verses .section-head h2 { direction:ltr; text-align:left; }
        .badge { padding:4px 10px; border-radius:999px; background:rgba(219,192,162,.32); border:1px solid rgba(142,103,64,.15); color:var(--muted); font-size:calc(.9rem * var(--font-scale)); white-space:nowrap; }
        .section-body { padding:14px; }
        .row { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; border-radius:18px; border:1px solid rgba(91,63,38,.1); background:rgba(255,255,255,.42); }
        .row + .row { margin-top:10px; }
        .cell { padding:16px 18px; min-height:100%; }
        .cell.original { background:rgba(255,252,247,.86); }
        .cell.simple { position:relative; padding:16px 18px; background:var(--card-soft); border-inline-start:1px solid rgba(91,63,38,.1); display:flex; flex-direction:column; gap:12px; }
        body.non-arabic-verses .cell.simple { direction:ltr; text-align:left; }
        body.hide-original .row { grid-template-columns:1fr; }
        body.show-original-only .cell.simple { display:none; }
        body.hide-original .cell.original,
        body.show-simplified-only .cell.original { display:none; }
        body.show-original-only .cell.original,
        body.hide-original .cell.simple,
        body.show-simplified-only .cell.simple { grid-column:1 / -1; min-height:0; height:auto; }
        body.hide-original .cell.simple,
        body.show-simplified-only .cell.simple { border-inline-start:0; }
        body.hide-original .row,
        body.show-original-only .row,
        body.show-simplified-only .row { grid-template-columns:1fr; }
        body.hide-original .row,
        body.show-simplified-only .row { display:block; }
        body.hide-original .cell.simple,
        body.show-simplified-only .cell.simple { display:block; }
        body.hide-original .text.simple,
        body.show-simplified-only .text.simple { display:inline; }
        body.hide-original .report-icon,
        body.show-simplified-only .report-icon { position:static; float:inline-end; display:inline-flex; align-items:center; justify-content:center; margin-inline-start:10px; margin-top:0; }
        body.hide-original .cell.simple { border-inline-start:0; }
        body.hide-feedback .report-icon { display:none; }
        body.theme-night .cell.original { background:rgba(25,30,37,.98); }
        body.theme-night .cell.simple { background:rgba(34,40,48,.98); border-inline-start-color:rgba(255,255,255,.08); }
        .label { margin:0 0 8px; color:var(--accent); font-size:calc(.92rem * var(--font-scale)); }
        .text { margin:0; font-size:calc(1.28rem * var(--font-scale)); }
        .text.simple { margin:0; font-size:calc(1.36rem * var(--font-scale)); }
        .report-icon { align-self:flex-end; justify-self:flex-end; order:10; margin-top:auto; width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.75); color:var(--accent); font-weight:700; cursor:pointer; line-height:1; flex:none; }
        body.theme-night .report-icon { background:rgba(53,61,72,.96); color:#f1f5f8; border-color:rgba(255,255,255,.1); }
        .report-dialog-backdrop { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,16,12,.42); backdrop-filter:blur(4px); }
        .report-dialog-backdrop[hidden] { display:none; }
        .report-dialog { width:min(620px, 100%); border:1px solid var(--border); border-radius:24px; background:rgba(255,251,245,.98); box-shadow:0 28px 70px rgba(0,0,0,.24); overflow:hidden; }
        body.theme-night .report-dialog { background:rgba(28,34,41,.98); }
        .report-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 12px; border-bottom:1px solid var(--border); }
        .report-dialog-head h2 { margin:0; font-size:calc(1.08rem * var(--font-scale)); }
        .report-dialog-help { margin:4px 0 0; color:var(--muted); font-size:calc(.9rem * var(--font-scale)); }
        .report-close { width:46px; height:46px; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; flex:none; font-size:0; line-height:1; }
        .report-close::before { content:"X"; color:currentColor; font-size:26px; font-family:Arial,sans-serif; line-height:1; }
        .report-close svg { display:none; }
        .report-primary { color:#fffdf9; background:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:8px 14px; cursor:pointer; }
        .report-dialog-body { padding:16px 20px 20px; }
        .report-preview { display:grid; gap:10px; margin-bottom:12px; }
        .report-preview-card { border:1px solid var(--border); border-radius:16px; padding:12px 14px; background:rgba(255,255,255,.68); }
        .report-preview-label { margin:0 0 6px; color:var(--accent); font-size:calc(.84rem * var(--font-scale)); }
        .report-preview-text { margin:0; font-size:calc(1rem * var(--font-scale)); }
        .report-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
        .report-option { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.68); font-size:calc(.88rem * var(--font-scale)); }
        .report-option input { margin:0; }
        .report-dialog textarea { width:100%; min-height:120px; resize:vertical; font:inherit; color:var(--ink); background:rgba(255,255,255,.72); border:1px solid var(--border); border-radius:16px; padding:12px 14px; }
        .report-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
        .report-status { color:var(--muted); font-size:calc(.86rem * var(--font-scale)); }
        .report-buttons { display:flex; gap:8px; flex-wrap:wrap; }
        body.theme-night .report-option,body.theme-night .report-dialog textarea,body.theme-night .report-preview-card { background:rgba(47,55,65,.96); border-color:rgba(255,255,255,.09); color:#edf1f5; }
        .support-us { margin-top:24px; direction:rtl; text-align:center; font-family:"Tajawal",Arial,sans-serif; border:1px solid var(--border); border-radius:20px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
        body.non-arabic-verses .support-us { direction:ltr; }
        .support-summary { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 18px; cursor:pointer; list-style:none; color:var(--accent); font-weight:700; }
        .support-summary::-webkit-details-marker { display:none; }
        .support-icon { inline-size:1.15em; block-size:1.15em; flex:none; background-color:#d11b1b; -webkit-mask:url("give-love.svg") center/contain no-repeat; mask:url("give-love.svg") center/contain no-repeat; }
        .support-summary::after { content:"▾"; font-size:.9em; transition:transform .18s ease; }
        .support-us[open] .support-summary::after { transform:rotate(180deg); }
        .support-message { padding:0 20px 20px; text-align:center; }
        .support-message p { margin:0 0 12px; font-size:calc(1rem * var(--font-scale)); }
        .support-message textarea { width:100%; min-height:96px; margin:10px 0 14px; padding:12px 14px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.72); color:var(--ink); font:inherit; resize:vertical; }
        .support-submit { padding:8px 18px; font:inherit; color:var(--ink); background:rgba(255,255,255,.68); border:1px solid var(--border); border-radius:999px; cursor:pointer; }
        .support-count { margin:12px 0 0; font-size:calc(.95rem * var(--font-scale)); color:var(--muted); }
        .support-done { color:var(--accent); font-weight:700; }
        .support-confirmation-popup { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(20,16,12,.42); backdrop-filter:blur(4px); font-family:"Tajawal",Arial,sans-serif; }
        .support-confirmation-dialog { width:min(560px,100%); padding:30px 24px 24px; border:1px solid var(--border); border-radius:24px; background:rgba(255,251,245,.98); color:var(--ink); box-shadow:0 28px 70px rgba(0,0,0,.24); text-align:center; }
        .support-confirmation-dialog p { margin:0 0 22px; color:var(--accent); font-size:calc(1.45rem * var(--font-scale)); font-weight:700; line-height:1.55; unicode-bidi:plaintext; }
        .support-confirmation-ok { min-width:120px; padding:10px 22px; font-weight:700; }
        body.theme-night .support-submit,body.theme-night .support-message textarea { background:rgba(53,61,72,.96); color:#f1f5f8; border-color:rgba(255,255,255,.1); }
        body.theme-night .support-confirmation-dialog { background:rgba(28,34,41,.98); color:#f1f5f8; border-color:rgba(255,255,255,.1); }
        @media (max-width:860px) { .frame { width:min(100% - 18px, 100%); margin-top:18px; } .hero { padding:22px 18px 20px; border-radius:22px; } .title-row { padding:66px 0 0; } body.non-arabic-verses .title-row { padding-inline-end:0; padding-top:66px; } .top-actions { top:22px; inset-inline-end:auto; left:18px; right:18px; gap:8px; } body.non-arabic-verses .top-actions { inset-inline-end:auto; left:18px; right:18px; } .eyebrow { min-height:0; padding-inline-end:0; } .back-link { width:52px; height:52px; font-size:1.45rem; } .controls-panel-wrap { position:fixed; inset-inline:9px; top:88px; width:auto; max-block-size:calc(100dvh - 104px); overflow:auto; overscroll-behavior:contain; z-index:220; } .controls-panel-surface { border-radius:18px; } .controls-panel-head { padding:10px 12px 8px; } .controls-panel { display:grid; grid-template-columns:1fr; gap:10px; padding:0 12px 12px; } .controls-group { display:grid; grid-template-columns:1fr; gap:6px; } .controls-group.font-size-group { grid-template-columns:1fr auto auto auto; align-items:center; } .controls select { inline-size:100%; } .hero.settings-open { padding-bottom:20px; } .row { grid-template-columns:1fr; } .cell.simple { border-inline-start:0; border-top:1px solid rgba(91,63,38,.1); align-items:flex-start; } .text { font-size:calc(1.18rem * var(--font-scale)); } .text.simple { font-size:calc(1.58rem * var(--font-scale)); } }