/* TLQ UX refinement v17 — responsive, Quran, dictation, discovery */
html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{touch-action:pan-y}
#main{min-width:0}
.living-modal-backdrop{padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));max-width:100vw;box-sizing:border-box}
.living-modal{width:min(100%,420px);box-sizing:border-box;overflow-x:hidden}
.living-modal h2{overflow-wrap:break-word}
.living-tafsir-head{display:flex;justify-content:space-between;align-items:center;gap:10px!important}
.living-tafsir-head>div{min-width:0;display:flex;flex-direction:column;gap:4px}
.living-tafsir-head strong{font-size:17px;color:#154a34}
.living-tafsir-head small{font-size:11px;color:#77897a}
.living-tafsir-head>button{border:1px solid #dce8df;background:#f5faf5;width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;font-size:22px;color:#34654b;line-height:1}
.living-tafsir-tabs{margin-top:19px;display:grid;grid-template-columns:1fr 1fr;background:#eaf5e9;padding:4px;gap:4px;border-radius:12px}
.living-tafsir-tabs button{font-size:11px;font-weight:800;min-height:44px;border-radius:10px;padding:8px 5px;color:#63816b}
.living-tafsir-tabs button.active{background:#fff;color:#0d6546;box-shadow:0 3px 10px #1c5b371c}
.living-tafsir-tabs button:focus-visible{outline:2px solid #17845f;outline-offset:2px}
#living-tafsir-id,#living-tafsir-ar{margin-top:17px}
#living-tafsir-id h4,#living-tafsir-ar h4{font-size:16px;color:#194e38;margin:0 0 11px}
#living-tafsir-id .living-tafsir-text{max-height:440px;overflow-y:auto;white-space:pre-wrap;font-size:14px;line-height:1.95;color:#284e39;padding:3px 1px;overflow-wrap:anywhere}
.living-tafsir-arabic{max-height:490px;overflow-y:auto;white-space:pre-wrap;direction:rtl;text-align:right;font-family:Amiri,'Noto Naskh Arabic',serif;color:#194d39;font-size:23px;line-height:2.15;border:1px solid #e1ebe1;border-radius:13px;padding:14px;overflow-wrap:anywhere}
.living-premium-media{display:grid;gap:14px;border:1px solid #d9e5c7;background:linear-gradient(133deg,#f0f7e9,#fbf9e8);border-radius:18px;padding:19px;margin-top:17px}
.living-premium-media[hidden]{display:none!important}
.living-premium-media h3{font-size:17px;color:#1e533a;margin:8px 0 5px}
.living-premium-media p{font-size:12px;color:#728471;line-height:1.7}
.living-premium-media-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.living-premium-button{border:1px solid #dce7d0;border-radius:13px;background:white;padding:14px 9px;min-height:90px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#135d3f;font-weight:900;font-size:12px;text-align:center;box-shadow:0 5px 14px #1a50370d}
.living-premium-button span{font-size:10px;color:#ab8753;font-weight:700}
.living-premium-button:active{transform:scale(.97)}
.living-premium-preview{border:1px solid #d7e8d2;border-radius:23px;background:linear-gradient(140deg,#eef8ed,#f9fbec);display:grid;gap:16px;padding:28px;margin-top:24px;color:#164e38}
.living-premium-preview>svg{color:#0d8057}
.living-premium-preview h1{font-size:29px}
.living-premium-preview>p{color:#647a66;font-size:14px;line-height:1.8}
.living-premium-details{border:1px solid #dee6d7;padding:15px;border-radius:13px;background:#fff;display:grid;gap:8px;font-size:13px}
.living-premium-details>span{font-size:12px;color:#7a8c7b}
.living-label-voice{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin:20px 0 9px}
.living-label-voice label{flex:1 1 175px;color:#1b533d;font-size:15px;font-weight:800;line-height:1.6}
.living-voice-button{display:inline-flex;gap:6px;align-items:center;justify-content:center;padding:9px 11px;min-height:37px;border:1px solid #b5dcc1;background:#edf7ef;color:#086844;border-radius:11px;font-size:11px;font-weight:900;white-space:nowrap}
.living-voice-button.recording{background:#166c4c;color:white;animation:livingVoicePulse 1.3s infinite}
@keyframes livingVoicePulse{50%{box-shadow:0 0 0 6px #87d5a74a}}
.living-jar-intro{border-radius:23px;background:linear-gradient(125deg,#074431,#117e52);color:#fff;padding:26px;margin:18px 0 22px;overflow:hidden;position:relative}
.living-jar-intro:before{content:'✦';position:absolute;right:-11px;top:10px;font-size:120px;color:#d7f7a615;line-height:1}
.living-jar-intro>.eyebrow{color:#d1ecaf;font-size:10px}
.living-jar-intro h2{color:#fff;font-size:24px;letter-spacing:-.035em;margin:10px 0}
.living-jar-intro>p{font-size:13px;line-height:1.9;color:#e3f1e5;margin:9px 0}
.living-jar-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.living-jar-steps>div{border:1px solid #ffffff36;background:#ffffff13;min-width:0;border-radius:13px;padding:14px 9px;display:flex;flex-direction:column;gap:7px}
.living-jar-steps span{font-size:11px;font-weight:900;color:#d0f2a5}
.living-jar-steps strong{font-size:11px;color:#fff}
.living-jar-steps small{font-size:10px;color:#dbe9de;line-height:1.6}
.living-intro-link{display:inline-flex;align-items:center;font-size:12px;background:#e5f5d1;color:#115537;border-radius:11px;padding:12px 15px;font-weight:900;margin-top:20px}
@media(max-width:760px){
 input,textarea,select{font-size:16px!important}
 .living-journal-page .living-section textarea{font-size:16px!important}
 .living-label-voice label{font-size:14px}
 .living-voice-button{font-size:10px}
 .living-modal{max-height:82dvh}
 .living-jar-intro{padding:21px 17px}
 .living-jar-intro h2{font-size:21px}
 .living-jar-steps{gap:6px}
 .living-jar-steps>div{padding:12px 7px}
 .living-jar-steps strong{font-size:10px}
 .living-jar-steps small{font-size:9px}
 .living-tafsir-arabic{font-size:21px}
 .living-premium-media{padding:16px}
 .living-premium-button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.living-voice-button.recording{animation:none}}