/* The garden: styles. Layers are ordered; later rules intentionally refine earlier ones. */
    :root { color-scheme: dark; --bg:#030408; --ink:#ece9f4; --muted:#918b9f; --pink:#eea5dc; --cyan:#87dbe2; }
    * { box-sizing:border-box; }
    [hidden] { display:none !important; }
    html { min-height:100%; background:var(--bg); }
    body { margin:0; background:radial-gradient(ellipse at 50% 43%,#1b0c252e,transparent 55%),var(--bg); color:var(--ink); font:14px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
    button,a { -webkit-tap-highlight-color:transparent; }
    button { font:inherit; }
    button:focus-visible,a:focus-visible { outline:2px solid var(--cyan); outline-offset:6px; }
    main { width:min(100%,620px); min-height:100svh; margin:auto; padding:calc(30px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; }
    header { text-align:center; width:100%; }
    .eyebrow { font-size:9px; letter-spacing:.35em; color:#8d819c; text-transform:uppercase; }
    .brand { font-size:26px; font-weight:400; letter-spacing:.25em; margin:13px 0 2px; padding-left:.25em; }
    .brand sup { font-size:.5em; vertical-align:super; }
    .subtitle { color:var(--muted); font-size:12px; margin:0; }
    .connection { display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8d879b; }
    .connection::before { content:""; width:4px; height:4px; border-radius:50%; background:#a79777; box-shadow:0 0 8px #a7977744; }
    .connection[data-live="true"]::before { background:#8ac6ad; box-shadow:0 0 8px #8ac6ad77; }
    .garden { position:relative; width:100%; flex:1; min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
    canvas { display:block; width:100%; height:clamp(280px,47svh,470px); }
    .garden-touch { display:block; width:100%; padding:0; border:0; border-radius:32px; background:transparent; cursor:pointer; touch-action:manipulation; }
    .garden-touch:disabled { cursor:default; }
    .garden-touch:focus-visible { outline:1px solid #a9d6df80; outline-offset:0; }
    .tap-hint { margin:0; text-align:center; font-size:9px; letter-spacing:.13em; color:#a795b7; pointer-events:none; }
    .garden-caption { margin:9px 0 0; text-align:center; font:italic 16px/1.5 Georgia,serif; color:#c2adc7; pointer-events:none; }
    .keepers { display:grid; grid-template-columns:1fr 1fr; width:min(100%,310px); gap:28px; margin:23px 0 20px; }
    .keeper { display:flex; flex-direction:column; align-items:center; text-align:center; }
    .keeper-time { display:block; color:var(--muted); font-size:10px; margin:12px 0 0; }
    .dew { --fresh:0; --dew-color:235,157,215; width:17px; height:22px; border-radius:75% 45% 65% 45%; transform:rotate(35deg); border:1px solid rgba(var(--dew-color),.32); background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),transparent 25%),linear-gradient(145deg,rgba(var(--dew-color),.65),rgba(var(--dew-color),.1)); opacity:calc(.22 + var(--fresh)*.78); box-shadow:0 0 13px rgba(var(--dew-color),calc(var(--fresh)*.45)),0 0 32px rgba(var(--dew-color),calc(var(--fresh)*.18)); transition:opacity 1s,box-shadow 1s; }
    .keeper:last-child .dew { --dew-color:135,219,226; }
    .actions { width:min(100%,340px); text-align:center; }
    .sides { display:flex; justify-content:center; gap:6px; margin-bottom:12px; }
    .sides button { padding:5px 14px; border:1px solid #d6b9ef20; border-radius:99px; background:transparent; color:var(--muted); font-size:10px; cursor:pointer; }
    .sides button[aria-pressed="true"] { background:#dcb5ff12; border-color:#d6b9ef60; color:var(--ink); }
    .sides button:disabled { opacity:.5; cursor:default; }
    .identity { margin:8px 0 0; min-height:16px; color:#766d83; font-size:9px; letter-spacing:.07em; }
    .feedback { min-height:40px; margin:10px 0 0; color:#c0b6ca; font-size:11px; }
    .feedback[data-error="true"] { color:#eab2bc; }
    .retry { border:0; background:none; color:var(--cyan); text-decoration:underline; padding:4px 10px; cursor:pointer; font-size:11px; }
    .feelings { width:min(100%,360px); margin:0 0 20px; padding:23px 20px 18px; border:1px solid #a9d5df1a; border-radius:22px; background:linear-gradient(145deg,#8ac4dd06,#dba5dc04); }
    .feelings h2 { margin:0; text-align:center; font:normal 19px/1.5 Georgia,serif; color:#dfd3e6; }
    .feeling-caption { margin:6px 0 18px; color:#8e839b; text-align:center; font-size:10px; }
    .mood-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .mood { min-height:64px; border:1px solid #ffffff0d; border-radius:13px; background:#ffffff03; color:#ac9fb9; font-size:10px; cursor:pointer; transition:background .2s,border-color .2s; }
    .mood span { display:block; margin-bottom:3px; font-size:18px; }
    .mood:hover:enabled { background:#d6b9ef0a; border-color:#d6b9ef40; }
    .mood[aria-pressed="true"] { background:#b9d9ec10; color:#e6e3f1; border-color:#b9d9ec70; }
    .mood:disabled { opacity:.45; cursor:default; }
    .mood-response { margin:15px 0 6px; color:#c4b6ce; text-align:center; min-height:35px; font:italic 13px/1.7 Georgia,serif; }
    .mood-feedback { margin:0; color:#83768e; text-align:center; font-size:9px; }
    .mood-feedback[data-error="true"] { color:#eab2bc; }
    .partner-feeling { margin-top:18px; padding-top:15px; border-top:1px solid #ffffff0b; text-align:center; }
    .partner-feeling small { display:block; font-size:8px; color:#8e839b; text-transform:uppercase; letter-spacing:.15em; }
    .partner-feeling p { margin:5px 0 0; color:#c7b9d3; font-size:12px; }
    .clear-feeling { display:block; margin:8px auto 0; border:0; background:none; color:#8d8097; text-decoration:underline; font-size:9px; cursor:pointer; }
    .daily-note { width:min(100%,360px); margin:10px 0 22px; padding:24px 22px 20px; border:1px solid #c5a3d51b; border-radius:22px; background:radial-gradient(ellipse at top,#9d548514,transparent 75%); text-align:center; }
    .daily-label { margin:0 0 15px; color:#bc9aac; font-size:9px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; }
    .feeling-note { margin:0 0 18px; color:#a99bb3; font-size:12px; line-height:1.8; }
    .daily-quote { margin:0; color:#dfccdf; font:italic 18px/1.75 Georgia,serif; }
    .daily-date { display:block; margin-top:18px; color:#8f809a; font-size:9px; letter-spacing:.04em; }
    footer { margin-top:12px; width:100%; text-align:center; }
    .ornament { display:flex; align-items:center; justify-content:center; gap:15px; color:#a28b6b; font-size:10px; }
    .ornament::before,.ornament::after { content:""; width:35px; height:1px; background:linear-gradient(90deg,transparent,#a28b6b44); }
    .ornament::after { transform:rotate(180deg); }
    .reminder { margin:13px auto 0; max-width:320px; min-height:78px; }
    .reminder p { margin:0; color:#b3a6bd; font:italic 14px/1.7 Georgia,serif; }
    .reminder a { display:inline-block; margin-top:8px; text-transform:uppercase; letter-spacing:.16em; color:#7e728c; font-size:8px; text-decoration:none; }
    .closing { margin:14px 0 0; font-size:8px; text-transform:uppercase; letter-spacing:.25em; color:#514858; }
    .overlay { position:fixed; inset:0; z-index:10; display:grid; place-items:center; padding:28px; background:#030408f2; backdrop-filter:blur(22px); }
    .access-card { width:min(100%,360px); border:1px solid #bca4d21c; border-radius:26px; padding:36px 28px; background:radial-gradient(ellipse at top,#3f234026,transparent 75%),#08090e; text-align:center; }
    .lock { color:var(--pink); font-size:25px; }
    .access-card h2 { font:normal 25px Georgia,serif; margin:17px 0 12px; }
    .access-card p { color:#a69aae; font-size:13px; }
    .access-card small { display:block; margin-top:25px; color:#71647e; font-size:10px; letter-spacing:.14em; }
    /* A single-screen garden; details open in native, accessible dialogs. */
    main { position:relative; width:min(100%,460px); height:100svh; height:100dvh; min-height:0; padding:calc(12px + env(safe-area-inset-top)) 18px calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-rows:auto minmax(100px,1fr) auto auto auto auto auto; justify-items:center; gap:8px; }
    header { position:relative; }
    .eyebrow,.identity,.closing,.ornament { display:none; }
    .brand { font-size:22px; margin:0 0 1px; }
    .subtitle { font-size:10px; }
    .status-row { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; margin-top:5px; }
    .garden-age { color:#ae9fb9; font-size:9px; }
    .connection { margin:0; font-size:7px; letter-spacing:.06em; }
    .sky-control { position:absolute; top:0; right:0; width:34px; height:34px; padding:0; border:1px solid #b9d9ec20; border-radius:50%; background:#b9d9ec06; color:#9b8eaa; font-size:16px; cursor:pointer; }
    #sky { position:fixed; inset:0; z-index:0; width:100%; height:100dvh; pointer-events:none; }
    main { z-index:1; }
    #sky-toggle { left:0; right:auto; }
    .sky-status { display:block; margin-top:2px; color:#8c859c; font-size:8px; line-height:1.3; }
    .location-action { width:100%; min-height:44px; margin:12px 0; border:1px solid #a9d5df44; border-radius:12px; color:#dfd3e6; background:#a9d5df0c; cursor:pointer; }
    .sky-details { display:grid; grid-template-columns:repeat(2,1fr); gap:7px 16px; color:#b6a8c1; font-size:12px; }
    .sky-details div { display:flex; justify-content:space-between; gap:8px; }
    .sky-credits { font-size:9px; color:#92839d; text-align:center; }
    .sky-credits a { color:#b7a4c6; }
    .sky-test { position:fixed; z-index:25; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(calc(100% - 32px),360px); padding:13px 16px 9px; border:1px solid #c5a3d53b; border-radius:18px; background:#0d1019f2; box-shadow:0 10px 50px #000a; }
    .sky-test .tulip-readout { margin:0 0 4px; min-height:1.4em; text-align:center; color:#c3b3ce; font-size:12px; }
    body[data-sky-tone="light"] .sky-test .tulip-readout { color:#6a5476; }
    .sky-test .preset-row { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
    .sky-test .preset-row button { display:inline-block; margin:0; min-height:36px; }
    .sky-test label { display:flex; justify-content:space-between; gap:8px; color:#c3b3ce; font-size:11px; }
    .sky-test input { width:100%; min-height:34px; accent-color:#b8a1dd; cursor:pointer; }
    .sky-test button { display:block; margin:auto; min-height:32px; padding:3px 12px; border:1px solid #ffffff15; border-radius:99px; background:none; color:#a89ab4; font-size:10px; cursor:pointer; }
    body[data-sky-tone="light"] { --ink:#33273d; --muted:#685771; --cyan:#315d6a; color-scheme:light; }
    body[data-sky-tone="light"] .brand { color:#34283d; }
    body[data-sky-tone="light"] .garden-age,
    body[data-sky-tone="light"] .connection,
    body[data-sky-tone="light"] .sky-status,
    body[data-sky-tone="light"] .keeper-time,
    body[data-sky-tone="light"] .tap-hint { color:#62516d; }
    body[data-sky-tone="light"] .garden-caption { color:#785074; }
    body[data-sky-tone="light"] .sky-control,
    body[data-sky-tone="light"] .sides button { color:#715678; border-color:#62456c29; background:#ffffff55; }
    body[data-sky-tone="light"] .sides button[aria-pressed="true"] { background:#ffffffbd; border-color:#9c75ac99; }
    body[data-sky-tone="light"] .daily-note,
    body[data-sky-tone="light"] .feeling-summary { background:#fffdfbef; border-color:#745e7c45; box-shadow:0 5px 22px #5940650c; }
    body[data-sky-tone="light"] .daily-label { color:#8b617e; }
    body[data-sky-tone="light"] .feeling-note { color:#65516f; }
    body[data-sky-tone="light"] .daily-quote { color:#402747; }
    body[data-sky-tone="light"] .daily-date { color:#75617f; }
    body[data-sky-tone="light"] .feeling-open { color:#68536f; }
    body[data-sky-tone="light"] .feeling-open strong,
    body[data-sky-tone="light"] .partner-feeling p { color:#6e4c74; }
    body[data-sky-tone="light"] .partner-feeling small { color:#75617f; }
    body[data-sky-tone="light"] .reminder p { color:#685273; }
    body[data-sky-tone="light"] .reminder a { color:#75617f; }
    body[data-sky-tone="light"] .dew { --dew-color:177,58,132; }
    body[data-sky-tone="light"] .keeper:last-child .dew { --dew-color:29,118,139; }
    body[data-sky-tone="light"] .sky-test,
    body[data-sky-tone="light"] dialog.feelings,
    body[data-sky-tone="light"] dialog.partner-sheet { background:#fffdfa; color:#3d2b46; border-color:#80638e50; box-shadow:0 12px 50px #4e385b22; }
    body[data-sky-tone="light"] .sky-test label,
    body[data-sky-tone="light"] .sky-test output,
    body[data-sky-tone="light"] .feelings h2,
    body[data-sky-tone="light"] .sheet-top h2 { color:#4a3354; }
    body[data-sky-tone="light"] .sky-test button,
    body[data-sky-tone="light"] .sheet-close { color:#6c4f77; border-color:#80638e45; }
    body[data-sky-tone="light"] .feeling-caption,
    body[data-sky-tone="light"] .mood-feedback,
    body[data-sky-tone="light"] .checkin-time,
    body[data-sky-tone="light"] .sky-credits { color:#735e7c; }
    body[data-sky-tone="light"] .sky-credits a { color:#654370; }
    body[data-sky-tone="light"] .sky-details,
    body[data-sky-tone="light"] .mood-response { color:#61446c; }
    body[data-sky-tone="light"] .checkin-quote { color:#4b2d54; }
    body[data-sky-tone="light"] .location-action,
    body[data-sky-tone="light"] .mood { background:#8662920b; border-color:#80638e35; color:#62446c; }
    body[data-sky-tone="light"] .mood[aria-pressed="true"] { background:#a373b824; border-color:#9865ad; color:#4b2b56; }
    body[data-sky-tone="light"] .mood-feedback[data-error="true"] { color:#ab2e49; }
    .garden { min-height:0; height:100%; }
    .garden-touch { flex:1; min-height:0; border-radius:20px; }
    canvas { height:100%; }
    .tap-hint { font-size:8px; letter-spacing:.07em; }
    .garden-caption { font-size:13px; margin-top:3px; }
    .keepers { width:min(100%,310px); margin:0; gap:18px; }
    .keeper { flex-direction:row; justify-content:center; gap:8px; }
    .keeper-time { margin:0; font-size:9px; }
    .dew { width:10px; height:14px; flex-shrink:0; }
    .actions { min-height:0; }
    .sides { margin:0; }
    .sides button { padding:3px 13px; min-height:27px; font-size:9px; }
    .feedback { position:fixed; z-index:30; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(calc(100% - 40px),340px); min-height:0; padding:11px 15px; margin:0; border:1px solid #c5a3d533; border-radius:14px; background:#121019f5; box-shadow:0 8px 30px #0008; font-size:11px; }
    .feedback:empty { display:none; }
    .feeling-summary { width:min(100%,360px); padding:8px 12px; border:1px solid #a9d5df1c; border-radius:17px; background:linear-gradient(120deg,#8ac4dd08,#dba5dc05); }
    .feeling-open { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; min-height:34px; padding:0; border:0; background:none; color:#c9bdd3; font-size:12px; cursor:pointer; }
    .feeling-open strong { color:#e7d5e8; font-size:11px; font-weight:400; }
    .partner-feeling { display:flex; justify-content:center; align-items:center; gap:7px; margin:2px 0 0; padding:0; border:0; width:100%; background:none; cursor:pointer; }
    .partner-feeling small { font-size:8px; }
    .partner-feeling p { margin:0; font-size:10px; }
    dialog.feelings,dialog.partner-sheet { width:min(calc(100% - 32px),360px); max-height:calc(100dvh - 32px); margin:auto; padding:24px 20px 18px; color:var(--ink); border:1px solid #c5a3d533; border-radius:24px; background:radial-gradient(ellipse at top,#34203a66,transparent 70%),#0b0b12; box-shadow:0 30px 100px #000a; }
    dialog::backdrop { background:#030408cb; backdrop-filter:blur(12px); }
    .sheet-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px; }
    .sheet-top h2 { font:normal 20px/1.4 Georgia,serif; margin:0; }
    .sheet-close { flex-shrink:0; width:36px; height:36px; border:1px solid #ffffff15; border-radius:50%; background:none; color:#ad9cba; cursor:pointer; font-size:20px; }
    .feelings .feeling-caption { margin:8px 0 16px; }
    .checkin-quote { margin:16px 0 8px; color:#e8d3e6; font:italic 18px/1.7 Georgia,serif; text-align:center; }
    .checkin-time { color:#96859f; font-size:10px; text-align:center; margin:10px 0 0; }
    .daily-note { width:min(100%,360px); margin:0; padding:12px 15px; border-radius:18px; }
    .daily-label { font-size:8px; margin-bottom:6px; }
    .feeling-note { font-size:11px; line-height:1.5; margin-bottom:8px; }
    .daily-quote { font-size:15px; line-height:1.5; }
    .daily-date { font-size:8px; margin-top:8px; }
    footer { margin:0; }
    .reminder { margin:0 auto; min-height:0; max-width:340px; }
    .reminder p { font-size:10px; line-height:1.45; }
    .reminder a { margin-top:2px; font-size:7px; letter-spacing:.1em; }
    @media (max-height:700px) {
      main { padding-top:calc(8px + env(safe-area-inset-top)); padding-bottom:calc(7px + env(safe-area-inset-bottom)); gap:5px; }
      .brand { font-size:20px; } .subtitle { font-size:9px; }
      .status-row { margin-top:2px; } .garden-caption { font-size:12px; }
      .daily-note { padding:9px 12px; } .daily-quote { font-size:13px; }
      .feeling-note { font-size:10px; line-height:1.4; margin-bottom:5px; }
      .daily-date { margin-top:5px; font-size:7px; }
      .feeling-summary { padding:5px 11px; } .feeling-open { min-height:32px; font-size:11px; }
      .reminder p { font-size:9px; }
    }
    @media (max-height:500px) and (min-width:600px) {
      main { width:min(100%,900px); grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr) auto auto auto; grid-template-areas:'head head' 'garden feeling' 'garden daily' 'meta foot' 'action foot'; column-gap:24px; }
      header { grid-area:head; } .garden { grid-area:garden; }
      .keepers { grid-area:meta; } .actions { grid-area:action; }
      .feeling-summary { grid-area:feeling; } .daily-note { grid-area:daily; }
      footer { grid-area:foot; }
    }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }
    main { grid-template-rows:auto minmax(120px,1fr) auto auto auto; gap:10px; }
    .tasks-control { position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; gap:3px; width:40px; height:36px; padding:0; border:1px solid #82bfa54d; border-radius:12px; background:#78b69c12; color:#97cfb7; cursor:pointer; }
    .tasks-control[data-pending="true"] { background:#b82f46; border-color:#d65065; color:#fff; box-shadow:0 3px 12px #9d263226; }
    .tasks-control span { font-size:19px; }.tasks-control b { font-size:11px; font-weight:500; }
    .task-list { display:grid; gap:5px; margin-top:14px; }
    .task-row { display:flex; align-items:center; gap:11px; min-height:44px; padding:7px 10px; background:#ffffff05; border:1px solid #ffffff0d; border-radius:11px; color:#cfc1db; font-size:12px; line-height:1.4; cursor:pointer; }
    .task-row input { flex-shrink:0; width:19px; height:19px; accent-color:#a88ac3; }
    .task-row:has(input:checked) { background:#84c5a90a; border-color:#84c5a933; }
    .task-ayah { margin:13px 0 4px; color:#c9b6d4; font:italic 14px/1.6 Georgia,serif; text-align:center; }
    .task-verse { display:block; text-align:center; font-size:8px; color:#9c85ac; text-decoration:none; }
    .task-dua { margin:12px 0 0; font-size:11px; line-height:1.6; color:#ad9aba; text-align:center; }
    .lesson-arabic { margin:20px 0 12px; text-align:center; color:#e8dcec; font:28px/2 var(--arabic-font); }
    .lesson-pronunciation { margin:0 0 12px; text-align:center; color:#bba6cb; font:italic 14px/1.6 Georgia,serif; }
    .lesson-meaning { margin:0 0 15px; text-align:center; color:#dfcfdf; font:16px/1.7 Georgia,serif; }
    body[data-sky-tone="light"] .lesson-arabic { color:#493153; }
    body[data-sky-tone="light"] .lesson-pronunciation { color:#755c80; }
    body[data-sky-tone="light"] .lesson-meaning { color:#56345f; }
    .settings-label { display:block; margin:18px 0 7px; color:#b8a5c6; font-size:12px; }
    #language-select { width:100%; min-height:44px; padding:8px 12px; border:1px solid #c5a3d533; border-radius:12px; background:#15111e; color:#e5d8ed; font:inherit; }
    .prayer-reminder { display:flex; align-items:center; justify-content:center; gap:8px; width:min(100%,360px); min-height:42px; padding:6px 12px; color:#a89ab4; border:1px solid #bba4ce20; border-radius:13px; background:#bba4ce06; font-size:10px; cursor:pointer; }
    body[data-sky-tone="light"] .task-row { background:#80638e07; border-color:#80638e22; color:#553e62; }
    body[data-sky-tone="light"] .task-row:has(input:checked) { background:#4589650b; border-color:#45896548; }
    body[data-sky-tone="light"] .task-ayah { color:#60446e; }
    body[data-sky-tone="light"] .task-verse,body[data-sky-tone="light"] .task-dua,
    body[data-sky-tone="light"] .settings-label { color:#75617f; }
    body[data-sky-tone="light"] #language-select { color:#493151; background:#fff; border-color:#80638e42; color-scheme:light; }
    body[data-sky-tone="light"] .prayer-reminder { background:#fffdfbeb; color:#63506f; border-color:#80638e35; }
    body[data-sky-tone="light"] .tasks-control[data-pending="false"] { color:#2d6a55; background:#e7f2ec; border-color:#3d865b55; }
    @media (max-height:700px) { main { gap:6px; } .lesson-arabic { font-size:22px; line-height:1.65; margin:12px 0 9px; } .lesson-pronunciation { font-size:12px; line-height:1.5; margin-bottom:9px; } .lesson-meaning { font-size:14px; line-height:1.5; margin-bottom:10px; } .task-dua { font-size:10px; margin-top:8px; } }
    @media (max-height:500px) and (min-width:600px) {
      main { grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:'head head' 'garden garden' 'meta meta' 'action action'; }
    }
    main { grid-template-rows:auto minmax(100px,1fr) auto auto auto auto; }
    .quran-player { width:min(100%,360px); padding:9px 11px 7px; border:0; background:transparent; }
    .quran-track { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:0; border:0; background:none; color:var(--ink); text-align:left; cursor:pointer; }
    .track-art { display:grid; place-items:center; width:38px; height:38px; flex-shrink:0; border-radius:10px; background:#ba98d117; color:#bc9ed0; font-size:22px; }
    .track-copy { min-width:0; flex:1; }
    .track-copy strong,.track-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .track-copy strong { font-size:12px; font-weight:500; }
    .track-copy small { font-size:10px; color:var(--muted); }
    .track-chevron { color:var(--muted); font-size:20px; }
    .partner-listening { margin:5px 0 0; color:var(--muted); font-size:9px; line-height:1.5; text-align:center; overflow-wrap:anywhere; }
    .partner-listening[data-playing="true"] { color:#9bcbb9; }
    dialog.quran-sheet { display:flex; flex-direction:column; width:min(calc(100% - 24px),420px); max-height:min(80dvh,680px); padding:18px; border:0; border-radius:24px; color:var(--ink); background:#101019; box-shadow:0 20px 90px #0008; }
    dialog.quran-sheet:not([open]) { display:none; }
    .quran-sheet .sheet-top { flex-shrink:0; }
    .quran-sheet .sheet-top h2 { margin:0; font-size:18px; font-weight:500; }
    .quran-sheet label { display:block; color:var(--muted); font-size:10px; margin:10px 0 4px; }
    .quran-sheet input,.quran-sheet select { width:100%; flex-shrink:0; min-height:42px; padding:9px 12px; border:0; border-radius:10px; background:#ffffff08; color:var(--ink); font:12px system-ui; }
    .quran-sheet select option { background:#17121f; color:#ece9f4; }
    .quran-sheet input { margin-top:12px; }
    .surah-list { overflow-y:auto; min-height:0; margin-top:10px; overscroll-behavior:contain; }
    .surah-list button { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:8px 10px; border:0; border-radius:10px; background:none; color:var(--ink); text-align:left; cursor:pointer; }
    .surah-list button:hover,.surah-list button[aria-current="true"] { background:#bc9ed012; }
    .surah-number { width:26px; color:var(--muted); font-size:10px; }
    .surah-name { flex:1; font-size:13px; }
    .surah-mark { color:#bc9ed0; font-size:14px; }
    .surah-empty { color:var(--muted); font-size:12px; text-align:center; }
    .quran-picker { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:7px; }
    .quran-picker select { min-width:0; width:100%; min-height:32px; padding:5px 7px; border:1px solid #bba4ce29; border-radius:9px; color:#d6c7e0; background:#15111e; font:10px/1.4 system-ui,sans-serif; cursor:pointer; }
    .quran-controls { display:flex; align-items:center; justify-content:center; gap:10px; margin:7px 0 2px; }
    .quran-controls button { width:40px; height:40px; padding:0; border:0; border-radius:50%; background:none; color:#cdbbd9; font-size:16px; cursor:pointer; touch-action:manipulation; }
    .quran-controls .quran-play { width:44px; height:44px; padding-left:2px; color:#f0e4f3; border-color:#d3b4e35c; background:#bc93d021; }
    .quran-controls .quran-skip { font-size:11px; font-variant-numeric:tabular-nums; }
    .quran-controls button:disabled { opacity:.3; cursor:default; }
    .quran-progress { display:flex; align-items:center; gap:9px; min-height:24px; }
    .quran-progress input { min-width:0; flex:1; height:20px; margin:0; accent-color:#bd9cd0; cursor:pointer; }
    .quran-progress output { flex-shrink:0; color:#a08eae; font-size:8px; font-variant-numeric:tabular-nums; }
    .quran-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:13px; }
    .quran-meta p { margin:0; color:#9f8eac; font-size:8px; line-height:1.4; }
    .quran-meta p[data-error="true"] { color:#e9a6b6; }
    .quran-meta a { flex-shrink:0; color:#9c88ae; font-size:8px; text-decoration:none; }
    body[data-sky-tone="light"] .quran-player { background:transparent; box-shadow:none; }
    body[data-sky-tone="light"] dialog.quran-sheet { background:#fffdfa; }
    body[data-sky-tone="light"] .quran-sheet input,body[data-sky-tone="light"] .quran-sheet select { background:#7257810a; }
    body[data-sky-tone="light"] .quran-sheet select option { background:#fffdfa; color:#33273d; }
    body[data-sky-tone="light"] .partner-listening[data-playing="true"] { color:#28644c; }
    body[data-sky-tone="light"] .quran-picker select { background:#fff; color:#50365b; border-color:#80638e40; }
    body[data-sky-tone="light"] .quran-controls button { color:#694773; background:none; }
    body[data-sky-tone="light"] .quran-controls .quran-play { color:#fff; background:#815593; border-color:#815593; }
    body[data-sky-tone="light"] .quran-progress output,
    body[data-sky-tone="light"] .quran-meta p,
    body[data-sky-tone="light"] .quran-meta a { color:#75617f; }
    body[data-sky-tone="light"] .quran-meta p[data-error="true"] { color:#a32e47; }
    @media (max-height:700px) { .quran-player { padding:7px 9px 5px; } .quran-controls { margin:4px 0 0; gap:8px; } .quran-picker select { min-height:29px; } main { gap:5px; } }
    @media (max-height:500px) and (min-width:600px) {
      main { grid-template-rows:auto minmax(0,1fr) auto auto auto; grid-template-areas:'head head' 'garden player' 'garden player' 'meta player' 'action player'; }
      .quran-player { grid-area:player; }
    }
    /* Rawdah app system: neutral surfaces, readable hierarchy, one accent. */
    /* Amiri Quran (SIL Open Font License, see assets/fonts/OFL.txt): a typeface made for reading the Quran. Self-hosted, cached for offline reading. */
    @font-face { font-family:'Amiri Quran'; src:url('/assets/fonts/AmiriQuran-Arabic.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
    :root { --arabic-font:'Amiri Quran','Scheherazade New','Noto Naskh Arabic','Traditional Arabic',serif; }
    :root { --ink:#f7edf3; --muted:#b2a0ab; --accent:#efa6cb; --surface:#08080b; --field:#efa6cb0c; --hairline:#efa6cb1c; --pink:#efa6cb; --cyan:#efa6cb; }
    body { font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
    body[data-sky-tone="light"] { --ink:#35222d; --muted:#775d6c; --accent:#ad3b74; --surface:#fffdfd; --field:#cf5c970b; --hairline:#ad3b741a; --cyan:#ad3b74; }
    main { width:min(100%,480px); padding:calc(18px + env(safe-area-inset-top)) 24px calc(16px + env(safe-area-inset-bottom)); grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(120px,1fr) auto auto; grid-template-areas:'head' 'garden' 'meta' 'player'; gap:14px; }
    header { grid-area:head; display:grid; grid-template-columns:1fr 44px; align-items:center; width:100%; text-align:left; min-height:44px; }
    .brand { grid-column:1; grid-row:1; display:flex; align-items:center; gap:9px; margin:0; padding:0; font-size:22px; font-weight:600; letter-spacing:-.045em; color:var(--ink); }
    .brand-heart { display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#030408; color:#fff; }
    .brand-heart svg { width:21px; height:21px; fill:currentColor; }
    .brand sup { margin-right:1px; }
    .status-row { grid-column:1; grid-row:2; justify-content:flex-start; margin:0; gap:8px; }
    .garden-age { color:var(--muted); font-size:11px; }
    .connection { font-size:0; gap:0; order:-1; min-width:5px; }
    .connection::before { width:5px; height:5px; box-shadow:none; }
    #sky-toggle { position:static; grid-column:2; grid-row:1 / 3; width:44px; height:44px; border:0; background:none; color:var(--muted); }
    .sky-status { display:none; }
    /* The next prayer sits in the sky above the tulip. Hold it to peek at every prayer time (see .prayer-peek). */
    .prayer-reminder { position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:3px; width:auto; max-width:94%; min-height:0; padding:8px 20px 10px; border:0; border-radius:20px; background:none; color:var(--ink); text-align:center; cursor:default; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; text-shadow:0 1px 14px rgba(3,4,8,.85); transition:transform .12s ease; }
    body[data-sky-tone="light"] .prayer-reminder { text-shadow:0 1px 14px rgba(255,252,250,.95); }
    .prayer-reminder:active:not([data-state="setup"]) { transform:translateX(-50%) scale(.97); }
    .prayer-reminder[data-state="setup"] { cursor:pointer; }
    .prayer-heading { color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.04em; }
    .prayer-main { display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:4px 12px; font-size:32px; font-weight:500; letter-spacing:-.04em; line-height:1.12; }
    #prayer-clock { color:var(--muted); font-size:24px; font-weight:400; font-variant-numeric:tabular-nums; }
    .prayer-countdown { display:flex; gap:6px; align-items:center; color:var(--accent); font-size:13px; font-variant-numeric:tabular-nums; }
    .prayer-reminder[data-state="setup"] .prayer-main,.prayer-reminder[data-state="unavailable"] .prayer-main { font-size:18px; letter-spacing:-.015em; }
    .prayer-reminder[data-state="setup"] .prayer-countdown { color:var(--muted); }
    .prayer-reminder:not([data-state="setup"]) .prayer-arrow { display:none; }
    .prayer-peek { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; background:rgba(3,4,8,.5); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease, visibility 0s linear .14s; }
    .prayer-peek[data-open="true"] { opacity:1; visibility:visible; transition:opacity .14s ease; }
    .peek-card { width:min(100%,340px); padding:22px 18px 16px; border-radius:26px; background:var(--surface); color:var(--ink); border:1px solid var(--hairline); box-shadow:0 22px 70px rgba(0,0,0,.45); transform:scale(.93); transition:transform .18s cubic-bezier(.2,.9,.3,1.15); }
    .prayer-peek[data-open="true"] .peek-card { transform:scale(1); }
    .peek-date { margin:0; text-align:center; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
    .peek-title { margin:4px 0 2px; text-align:center; font-size:20px; font-weight:600; letter-spacing:-.02em; }
    .peek-place { margin:0 0 14px; text-align:center; color:var(--muted); font-size:12px; }
    .peek-list { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
    .peek-list li { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 14px; border-radius:15px; font-variant-numeric:tabular-nums; }
    .peek-list li[data-when="past"] { opacity:.5; }
    .peek-list li[data-kind="sun"] { min-height:34px; color:var(--muted); font-size:13px; }
    .peek-list li[data-next="true"] { background:var(--field); color:var(--accent); }
    .peek-name { font-size:17px; font-weight:500; } .peek-list li[data-kind="sun"] .peek-name { font-size:13px; font-weight:400; }
    .peek-sub { display:block; margin-top:1px; font-size:11px; font-weight:400; color:var(--muted); }
    .peek-time { font-size:17px; } .peek-list li[data-kind="sun"] .peek-time { font-size:13px; }
    .peek-foot { margin:12px 0 0; text-align:center; color:var(--muted); font-size:10.5px; }
    @media (prefers-reduced-motion:reduce) { .prayer-peek,.peek-card,.prayer-reminder { transition:none; } }
    .today-date { grid-column:1; grid-row:2; margin:3px 0 0; color:var(--ink); font-size:12px; font-weight:500; line-height:1.3; font-variant-numeric:tabular-nums; }
    .status-row { grid-row:3; }
    #sky-toggle { grid-row:1 / 4; }
    .access-gate { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:32px; background:var(--surface); color:var(--ink); text-align:center; }
    .access-gate[hidden] { display:none; }
    .gate-card { max-width:320px; }
    .gate-card h2 { margin:0 0 10px; font-size:20px; font-weight:600; letter-spacing:-.02em; }
    .gate-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
    .gate-actions { display:grid; gap:10px; margin-top:20px; }
    .gate-form { display:flex; gap:8px; margin-top:22px; }
    .gate-form[hidden],.gate-actions[hidden] { display:none; }
    .gate-form input { flex:1; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--hairline); border-radius:12px; background:var(--field); color:var(--ink); font:inherit; font-size:14px; }
    .gate-card button { min-height:44px; padding:0 16px; border:0; border-radius:12px; background:var(--field); color:var(--accent); font:inherit; font-size:14px; cursor:pointer; }
    .gate-card button:disabled { opacity:.5; cursor:default; }
    .gate-card .gate-note { margin-top:14px; font-size:12px; }
    .gate-card .gate-note:empty { display:none; }
    .notify-status { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
    .notify-status:empty { display:none; }
    .notify-privacy { display:block; opacity:.85; }
    .garden { grid-area:garden; width:100%; min-height:0; }
    .tap-hint { margin:7px 0 0; color:var(--muted); font-size:12px; letter-spacing:0; }
    .keepers { grid-area:meta; width:100%; margin:0; gap:12px; }
    .keeper { justify-content:flex-start; padding:0; gap:9px; }
    .keeper:last-child { justify-content:flex-end; }
    .keeper-time { color:var(--muted); font-size:11px; }
    .dew { width:9px; height:12px; }
    .actions { display:contents; }
    .quran-player { grid-area:player; width:100%; padding:4px 0 0; display:flex; flex-direction:column; border:0; background:none; }
    .player-heading { display:none; }
    .player-heading h2 { margin:0; font-size:12px; line-height:1.4; font-weight:600; color:var(--muted); }
    .player-heading span { font-size:11px; color:var(--muted); }
    .browse-surahs { min-height:32px; padding:0; border:0; background:none; color:var(--muted); font-size:11px; cursor:pointer; }
    .quran-track { min-height:58px; gap:11px; }
    .track-art { display:none; width:42px; height:42px; border-radius:5px; overflow:hidden; background:#153e36; color:var(--accent); }
    .track-art svg { width:100%; height:100%; display:block; }
    .track-copy strong { font-size:21px; line-height:1.25; letter-spacing:-.035em; font-weight:650; }
    .track-copy small { font-size:12px; line-height:1.5; color:var(--muted); }
    .track-chevron { display:flex; color:var(--muted); }
    .quran-progress { display:grid; grid-template-columns:1fr 1fr; min-height:40px; gap:0; margin-top:3px; }
    .quran-progress input { grid-column:1 / -1; width:100%; appearance:none; -webkit-appearance:none; height:24px; border-radius:0; background:linear-gradient(to right,var(--ink) var(--progress,0%),var(--hairline) var(--progress,0%)) center / 100% 4px no-repeat; accent-color:var(--ink); }
    .quran-progress input::-webkit-slider-thumb { appearance:none; width:10px; height:10px; border-radius:50%; background:var(--ink); opacity:0; }
    .quran-progress input::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:var(--ink); opacity:0; }
    .quran-progress input:hover::-webkit-slider-thumb,.quran-progress input:focus-visible::-webkit-slider-thumb { opacity:1; }
    .quran-progress input:hover::-moz-range-thumb,.quran-progress input:focus-visible::-moz-range-thumb { opacity:1; }
    .quran-progress input:disabled::-webkit-slider-thumb { opacity:0; }
    .quran-progress output { grid-column:1 / -1; display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
    .quran-controls { margin:3px 0 5px; justify-content:space-between; gap:8px; }
    .quran-controls button { width:44px; height:44px; display:grid; place-items:center; color:var(--ink); border:0; background:none; }
    .quran-controls .quran-play { width:68px; height:68px; padding:0; background:var(--accent); color:#21121b; }
    .quran-controls .quran-play svg { width:34px; height:34px; }
    #quran-previous .icon,#quran-next .icon { width:26px; height:26px; }
    .quran-controls .quran-skip { font-size:11px; }
    .quran-meta { min-height:16px; gap:14px; }
    .quran-meta p,.quran-meta a { color:var(--muted); font-size:10px; }
    .partner-listening { order:-1; min-height:16px; margin:0 0 6px; text-align:left; font-size:11px; line-height:1.5; color:var(--muted); }
    .partner-listening[data-playing="true"] { color:var(--accent); }
    body[data-sky-tone="light"] .brand,body[data-sky-tone="light"] .quran-controls button { color:var(--ink); }
    body[data-sky-tone="light"] .garden-age,body[data-sky-tone="light"] .keeper-time,body[data-sky-tone="light"] .tap-hint,body[data-sky-tone="light"] .quran-meta p,body[data-sky-tone="light"] .quran-meta a,body[data-sky-tone="light"] .quran-progress output { color:var(--muted); }
    body[data-sky-tone="light"] .prayer-reminder { background:none; color:var(--ink); }
    body[data-sky-tone="light"] .quran-controls .quran-play { background:var(--accent); color:#fff; }
    body[data-sky-tone="light"] .partner-listening[data-playing="true"] { color:var(--accent); }
    .icon { width:22px; height:22px; display:inline-block; flex-shrink:0; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
    button,a,input,select { touch-action:manipulation; }
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
    dialog.partner-sheet,dialog.quran-sheet,body[data-sky-tone="light"] dialog.partner-sheet,body[data-sky-tone="light"] dialog.quran-sheet { background:var(--surface); color:var(--ink); border:0; padding:24px; border-radius:20px; }
    .sheet-top h2,.quran-sheet .sheet-top h2 { color:var(--ink); font:600 20px/1.35 system-ui,sans-serif; letter-spacing:-.025em; }
    .sheet-close { width:44px; height:44px; display:grid; place-items:center; border:0; background:none; color:var(--muted); }
    .settings-label,.sky-credits,.feeling-caption,.lesson-pronunciation { color:var(--muted); }
    .settings-label { font-size:12px; }
    #language-select,.quran-sheet select,.quran-sheet input,body[data-sky-tone="light"] #language-select,body[data-sky-tone="light"] .quran-sheet select,body[data-sky-tone="light"] .quran-sheet input { min-height:46px; border:0; border-radius:8px; background:var(--field); color:var(--ink); font-size:14px; }
    .quran-sheet select option { background:var(--surface); color:var(--ink); }
    .quran-sheet label { font-size:12px; color:var(--muted); }
    .surah-list { margin-top:16px; }
    .surah-list button { min-height:52px; padding:10px 8px; border-radius:8px; }
    .surah-list button:hover,.surah-list button[aria-current="true"] { background:var(--field); }
    .surah-name { font-size:16px; }
    .surah-number { font-size:12px; color:var(--muted); }
    .surah-mark { color:var(--accent); }
    .location-action,body[data-sky-tone="light"] .location-action { min-height:46px; border:0; background:var(--field); color:var(--ink); border-radius:8px; font-size:13px; }
    #complete-lesson { background:var(--accent); color:#21121b; font-weight:600; }
    body[data-sky-tone="light"] #complete-lesson { color:#fff; }
    .lesson-arabic { color:var(--ink); }
    .lesson-meaning { color:var(--ink); font-size:15px; }
    .task-verse,.task-dua,body[data-sky-tone="light"] .task-verse,body[data-sky-tone="light"] .task-dua { color:var(--muted); font-size:12px; }
    .sides { justify-content:flex-start; gap:8px; margin:9px 0 16px; }
    .sides button,body[data-sky-tone="light"] .sides button { min-height:44px; padding:6px 18px; border:0; border-radius:8px; background:var(--field); font-size:12px; color:var(--muted); }
    .sides button[aria-pressed="true"],body[data-sky-tone="light"] .sides button[aria-pressed="true"] { background:var(--accent); color:var(--surface); }
    :root { --his:#91c6a4; --hers:#e5a0c6; }
    body[data-sky-tone="light"] { --his:#286447; --hers:#9c386b; }
    #h-dew { --dew-color:101,190,139; }
    #y-dew { --dew-color:234,139,190; }
    body[data-sky-tone="light"] #h-dew { --dew-color:40,121,78; }
    body[data-sky-tone="light"] #y-dew { --dew-color:176,55,116; }
    #h-time,#side-one { color:var(--his); }
    #y-time,#side-two { color:var(--hers); }
    #side-one[aria-pressed="true"] { background:var(--his); color:var(--surface); }
    #side-two[aria-pressed="true"] { background:var(--hers); color:var(--surface); }
    #partner-listening[data-playing="true"][data-person="his"] { color:var(--his); }
    #partner-listening[data-playing="true"][data-person="hers"] { color:var(--hers); }
    .settings-preview-label { color:var(--muted); font-size:11px; margin:18px 0 0; }
    .location-picker { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; margin:14px 0 10px; }
    .location-picker label { font-size:12px; color:var(--muted); }
    .location-picker select { min-width:0; width:100%; min-height:44px; margin-bottom:5px; padding:10px 12px; border:0; border-radius:8px; background:var(--field); color:var(--ink); font:14px system-ui; }
    .location-picker option { background:var(--surface); color:var(--ink); }
    .location-picker button { min-height:44px; padding:8px 14px; border:0; border-radius:8px; background:var(--accent); color:var(--surface); font-size:13px; cursor:pointer; }
    .location-picker button:disabled,.location-picker select:disabled { opacity:.45; cursor:default; }
    .chosen-location { color:var(--accent); font-size:12px; margin:10px 0; }
    @media(max-height:700px) { main { gap:9px; padding:calc(10px + env(safe-area-inset-top)) 20px calc(10px + env(safe-area-inset-bottom)); } .prayer-main { font-size:26px; } #prayer-clock { font-size:20px; } .partner-listening { margin-bottom:4px; font-size:10px; } .quran-player { padding-top:2px; } .quran-controls { margin:1px 0 3px; } .quran-controls .quran-play { width:60px; height:60px; } .track-copy strong { font-size:20px; } .track-copy small { font-size:12px; } .track-art { width:40px; height:40px; } .quran-track { min-height:54px; } .quran-progress { margin-top:2px; } }
    @media(max-height:500px) and (min-width:600px) { main { width:min(100%,960px); grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto minmax(30px,1fr) auto; grid-template-areas:'head head' 'garden player' 'meta player'; column-gap:32px; gap:6px 32px; } header { min-height:36px; } .quran-player { align-self:center; } .prayer-reminder { padding:2px 10px 4px; gap:0; } .prayer-heading { display:none; } .prayer-main { font-size:20px; } #prayer-clock { font-size:16px; } .prayer-countdown { font-size:11px; } .garden { min-height:0; } .tap-hint { margin-top:0; font-size:10px; } }
    /* Shared sheets: fixed heading and actions, scroll only the contents. */
    dialog.partner-sheet,dialog.quran-sheet,body[data-sky-tone="light"] dialog.partner-sheet,body[data-sky-tone="light"] dialog.quran-sheet { display:flex; flex-direction:column; width:min(calc(100% - 32px),420px); max-height:calc(100dvh - 48px); padding:0; overflow:hidden; border-radius:24px; box-shadow:0 24px 100px #0005; }
    dialog:not([open]) { display:none !important; }
    dialog::backdrop { background:#03040880; backdrop-filter:blur(7px); }
    .sheet-top { flex-shrink:0; padding:16px 16px 14px 24px; margin:0; border-bottom:1px solid var(--hairline); background:var(--surface); }
    .sheet-top h2,.quran-sheet .sheet-top h2,body[data-sky-tone="light"] .sheet-top h2 { min-width:0; color:var(--ink); font:600 20px/1.3 system-ui,sans-serif; letter-spacing:-.035em; }
    .sheet-close,body[data-sky-tone="light"] .sheet-close { width:44px; height:44px; color:var(--muted); background:var(--field); border:0; border-radius:50%; }
    .sheet-close .icon { width:19px; height:19px; }
    .sheet-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--hairline) transparent; padding:22px 24px; }
    .sheet-footer { flex-shrink:0; padding:14px 24px 20px; border-top:1px solid var(--hairline); background:var(--surface); }
    .sheet-footer .location-action { margin:0; min-height:50px; border-radius:12px; font-size:14px; }
    .sheet-footer .mood-feedback:empty { display:none; }
    .sheet-footer .mood-feedback { margin:8px 0 0; font-size:12px; color:var(--muted); }
    .quran-body { display:flex; flex-direction:column; overflow:hidden; padding-top:18px; padding-bottom:12px; }
    .quran-body label { margin:0 0 8px; color:var(--muted); font-size:12px; }
    .quran-body select,.quran-body input,#language-select,.location-picker select,body[data-sky-tone="light"] #language-select { flex-shrink:0; min-height:48px; padding:12px 14px; border:0; border-radius:12px; font:16px/1.4 system-ui,sans-serif; color:var(--ink); background:var(--field); }
    .quran-body input { margin-top:12px; }
    .quran-body .surah-list { flex:1; min-height:0; margin:16px -8px 0; padding:0 4px 4px; }
    .surah-list button { gap:12px; min-height:54px; padding:12px; }
    .surah-list button[aria-current="true"] { color:var(--accent); background:var(--field); }
    .surah-name { font-size:16px; }
    .surah-mark { width:18px; text-align:center; }
    .lesson-body #lesson-category { display:inline-block; margin:0; padding:5px 10px; border-radius:6px; background:var(--field); color:var(--accent); font:500 11px/1.4 system-ui,sans-serif; }
    .lesson-arabic,body[data-sky-tone="light"] .lesson-arabic { margin:20px 0 16px; padding:18px 8px; border-radius:14px; color:var(--ink); background:var(--field); font-size:30px; line-height:1.9; }
    .lesson-pronunciation,body[data-sky-tone="light"] .lesson-pronunciation { color:var(--muted); font:14px/1.7 system-ui,sans-serif; margin:0 0 16px; }
    .lesson-meaning,body[data-sky-tone="light"] .lesson-meaning { color:var(--ink); font:16px/1.75 system-ui,sans-serif; margin:0 0 15px; }
    .lesson-body .task-verse { display:block; min-height:32px; color:var(--accent); font-size:12px; text-align:center; }
    .lesson-counter { position:relative; display:grid; place-items:center; align-content:center; width:132px; height:132px; margin:6px auto 14px; padding:0; border:0; border-radius:50%; color:var(--ink); background:conic-gradient(var(--accent) calc(var(--p,0)*360deg),var(--hairline) 0); cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
    .lesson-counter[hidden] { display:none; }
    .lesson-counter::before { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--surface); }
    .lesson-counter>* { position:relative; }
    .lesson-counter strong { font-size:36px; line-height:1.1; font-variant-numeric:tabular-nums; }
    .lesson-counter small { color:var(--muted); font-size:12px; }
    .lesson-counter:active:not(:disabled) { transform:scale(.95); }
    .lesson-counter[data-done="true"] strong { color:var(--accent); }
    .lesson-counter:disabled { cursor:default; }
    @media (prefers-reduced-motion:reduce) { .lesson-counter { transition:none; } }
    @media (max-height:600px) { .lesson-counter { width:100px; height:100px; margin:2px auto 10px; } .lesson-counter strong { font-size:28px; } }
    .lesson-body .task-dua { margin:12px 0 0; color:var(--muted); font:13px/1.65 system-ui,sans-serif; }
    .settings-body .settings-label { display:block; margin:0 0 8px; font-size:13px; color:var(--muted); }
    #language-select { width:100%; }
    #settings-sky,body[data-sky-tone="light"] #settings-sky { display:flex; align-items:center; justify-content:space-between; margin:20px 0 0; padding:14px 0; background:none; border-radius:0; border-bottom:1px solid var(--hairline); text-align:left; font-size:14px; }
    #settings-sky::after { content:'›'; color:var(--muted); font-size:23px; padding-left:8px; }
    .settings-preview-label { margin:12px 0 8px; }
    .settings-body .sides { margin-bottom:0; }
    .location-body>.feeling-caption { color:var(--muted); font-size:13px; line-height:1.65; margin:0 0 20px; text-align:left; }
    .location-picker { gap:8px; margin:0 0 14px; }
    .location-picker label { font-size:13px; }
    .location-picker select { margin-bottom:7px; }
    .location-picker button { min-height:48px; border-radius:12px; margin-top:5px; font-size:14px; font-weight:500; }
    #retry-locations { background:var(--field); color:var(--ink); }
    #chosen-location { color:var(--accent); margin:16px 0 8px; font-size:13px; }
    #location-message { font-size:12px; line-height:1.6; text-align:left; margin:4px 0 14px; }
    #location-message:empty { display:none; }
    #use-location { background:var(--field); color:var(--ink); border-radius:10px; font-size:13px; margin:12px 0 16px; }
    #open-sky-test { margin:16px 0 0; color:var(--muted); background:none; font-size:12px; }
    #open-tulip-test { margin:16px 0 0; color:var(--muted); background:none; font-size:12px; }
    @media(max-width:599px) { dialog.partner-sheet,dialog.quran-sheet,body[data-sky-tone="light"] dialog.partner-sheet,body[data-sky-tone="light"] dialog.quran-sheet { position:fixed; inset:auto 0 0; width:100%; max-height:88dvh; margin:0 auto; border-radius:24px 24px 0 0; } .sheet-body { padding-bottom:calc(22px + env(safe-area-inset-bottom)); } .sheet-footer { padding-bottom:calc(18px + env(safe-area-inset-bottom)); } .quran-body { padding-bottom:calc(12px + env(safe-area-inset-bottom)); } }
    @media(max-height:600px) { .sheet-top { padding-top:10px; padding-bottom:10px; } .sheet-body { padding-top:16px; } .lesson-arabic { font-size:26px; padding:14px 8px; margin-top:14px; } }
    /* The mini-player overlays the garden; the reader owns the expanded transport. */
    main { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
    #partner-listening { grid-area:player; width:100%; margin:0; padding:2px 0; align-self:end; }
    #quran-player { position:fixed; left:50%; bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:8; display:grid; grid-template-columns:minmax(0,1fr) 44px 48px 40px; align-items:center; gap:4px; width:min(calc(100% - 24px),440px); padding:8px 10px 11px 16px; border:0; border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 8px 36px #0003,0 0 0 1px var(--hairline); }
    #quran-player .quran-track { min-width:0; min-height:48px; }
    #quran-player .track-copy strong { font-size:17px; }
    #quran-player .track-copy small { font-size:11px; }
    #quran-player>button:not(.quran-track) { display:grid; place-items:center; min-width:40px; height:44px; padding:0; border:0; background:none; color:var(--ink); border-radius:50%; cursor:pointer; }
    #quran-player #mini-play { width:44px; background:var(--accent); color:var(--surface); }
    #quran-player #mini-browse { color:var(--accent); background:var(--field); border-radius:12px; }
    #mini-browse:active { transform:scale(.94); }
    #quran-dialog { height:min(86dvh,760px); }
    .picker-heading { min-width:0; }
    #quran-picker-subtitle { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }
    .surah-search { position:relative; flex-shrink:0; margin-top:14px; }
    .surah-search>.icon { position:absolute; left:14px; top:15px; width:19px; height:19px; color:var(--muted); }
    .quran-body .surah-search input { width:100%; margin:0; padding-left:42px; }
    #quran-dialog #quran-search { color:var(--ink); background:var(--field); }
    #quran-dialog .picker-heading { flex:1; }
    .surah-step,.qari-step { display:flex; flex-direction:column; min-height:0; flex:1; }
    .surah-step .surah-search { margin-top:0; }
    .qari-list { overflow-y:auto; min-height:0; display:grid; gap:10px; }
    .qari-choice { display:flex; align-items:center; gap:14px; min-height:76px; padding:14px; border:0; border-radius:14px; background:var(--field); color:var(--ink); text-align:left; cursor:pointer; }
    .qari-choice:active { background:var(--hairline); }
    .qari-avatar { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--field); color:var(--accent); }
    .qari-copy { min-width:0; flex:1; }
    .qari-copy strong { display:block; font-size:15px; font-weight:500; line-height:1.5; }
    .qari-copy small { display:block; margin-top:3px; font-size:11px; color:var(--muted); }
    .qari-choice[aria-current="true"] .qari-avatar { background:var(--accent); color:var(--surface); }
    #quran-surahs button { min-height:64px; gap:13px; padding:11px 10px; margin:2px 0; border-radius:12px; }
    #quran-surahs .surah-number { display:grid; place-items:center; flex-shrink:0; width:37px; height:37px; border-radius:11px; color:var(--muted); background:var(--field); font-size:12px; font-variant-numeric:tabular-nums; }
    .surah-copy { flex:1; min-width:0; }
    #quran-surahs .surah-name { display:block; font-size:16px; font-weight:500; line-height:1.4; }
    .surah-subtitle { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; line-height:1.4; }
    #quran-surahs button[aria-current="true"] { background:var(--field); }
    #quran-surahs button[aria-current="true"] .surah-number { background:var(--accent); color:var(--surface); }
    #quran-surahs .surah-mark { width:22px; font-size:16px; }
    #mini-next:disabled { opacity:.3; }
    .mini-progress { position:absolute; left:16px; right:16px; bottom:5px; height:2px; border-radius:2px; background:linear-gradient(to right,var(--accent) var(--progress,0%),var(--hairline) var(--progress,0%)); }
    #mini-audio-status { grid-column:1 / -1; margin:3px 0; color:var(--accent); font-size:11px; }
    #now-playing { display:flex; flex-direction:column; position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:var(--surface); color:var(--ink); transform-origin:50% 100%; }
    #now-playing[open] { animation:reveal-player .32s cubic-bezier(.2,.8,.2,1); }
    #lesson-dialog.closing { animation:sheet-out .19s cubic-bezier(.4,0,1,1) forwards; pointer-events:none; }
    #lesson-dialog.closing::backdrop { animation:backdrop-out .19s linear forwards; }
    @keyframes sheet-out { to { transform:translateY(36px); opacity:0; } }
    @keyframes backdrop-out { to { opacity:0; } }
    #quran-dialog[open] { animation:reveal-surahs .26s cubic-bezier(.2,.8,.2,1); }
    @keyframes reveal-surahs { from { transform:translateY(50px) scale(.99); opacity:.3; } to { transform:translateY(0) scale(1); opacity:1; } }
    .now-header-spacer { width:44px; flex-shrink:0; }
    @keyframes reveal-player { from { transform:translateY(65%) scale(.96); opacity:.3; } to { transform:translateY(0) scale(1); opacity:1; } }
    .now-top { display:flex; align-items:center; gap:12px; flex-shrink:0; padding:calc(12px + env(safe-area-inset-top)) 16px 12px; }
    .now-heading { min-width:0; flex:1; text-align:center; }
    .now-heading h2 { margin:3px 0; font-size:19px; line-height:1.4; letter-spacing:-.025em; }
    .now-heading p { margin:0; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #now-label { text-transform:uppercase; letter-spacing:.12em; font-size:9px; }
    .verse-notice { flex-shrink:0; padding:0 24px 10px; color:var(--muted); text-align:center; font-size:11px; }
    .verse-notice:has(#verse-status:empty):not(:has(#retry-verses:not([hidden]))) { display:none; }
    #retry-verses,#follow-verse { min-height:36px; padding:6px 14px; border:0; border-radius:99px; background:var(--field); color:var(--accent); font:12px system-ui; cursor:pointer; }
    #follow-verse { position:absolute; right:18px; top:110px; z-index:1; background:var(--surface); box-shadow:0 3px 20px #0002; }
    .verse-reader { flex:1; min-height:50px; overflow-y:auto; overscroll-behavior:contain; padding:30px 28px 100px; scroll-padding:35px; scrollbar-width:thin; scrollbar-color:var(--hairline) transparent; }
    .verse-line { display:block; width:100%; padding:8px 0; margin:0 0 8px; border:0; border-radius:8px; background:none; text-align:right; color:var(--muted); opacity:.65; font:30px/1.95 var(--arabic-font); cursor:pointer; }
    .verse-line:disabled { cursor:default; }
    /* The Bismillah is its own line above the first verse (it is not part of verse 1). */
    .bismillah-row { display:block; margin:0 0 14px; padding:0 0 14px; text-align:center; color:var(--muted); opacity:.7; font:30px/1.9 var(--arabic-font); border-bottom:1px solid var(--hairline); }
    .bismillah-row[aria-current="true"] { color:var(--accent); opacity:1; }
    .verse-line[aria-current="true"] { color:var(--accent); opacity:1; }
    .verse-number { font:11px/1 system-ui,sans-serif; margin-inline-start:10px; vertical-align:middle; color:var(--muted); }
    .now-footer { flex-shrink:0; padding:12px 24px calc(14px + env(safe-area-inset-bottom)); background:var(--surface); }
    .translation-panel { max-height:22dvh; overflow-y:auto; overscroll-behavior:contain; padding:0 0 8px; }
    #verse-label { color:var(--muted); margin:0 0 6px; font-size:11px; }
    #verse-translation { color:var(--accent); margin:0 0 5px; font-size:15px; line-height:1.65; }
    #verse-source { color:var(--muted); font-size:10px; text-decoration:none; }
    #now-playing .quran-progress { margin-top:0; }
    #now-playing .quran-controls { max-width:440px; margin:4px auto 0; }
    #now-playing .quran-controls .quran-play { flex-shrink:0; }
    #quran-status { font-size:11px; color:var(--accent); margin:6px 0 0; }
    @media(min-width:700px) { #now-playing { inset:16px; width:min(calc(100% - 32px),720px); height:calc(100dvh - 32px); max-height:900px; margin:auto; border-radius:24px; } }
    @media(max-height:500px) { .now-top { padding:6px 14px; } .now-footer { padding:6px 24px; } .translation-panel { max-height:18dvh; } .verse-reader { padding-top:8px; padding-bottom:30px; } .verse-line { font-size:26px; padding:8px 0; } #now-playing .quran-controls .quran-play { width:48px; height:48px; } #now-playing .quran-progress { min-height:32px; } }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; } }
    /* ───── Settings: grouped cards, one pattern for every row ───── */
    .settings-body { padding-bottom:28px; }
    .settings-group { margin:0 0 6px; }
    .settings-group[hidden] { display:none; }
    .group-title { margin:22px 6px 8px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
    .settings-group:first-child .group-title { margin-top:6px; }
    .settings-card { border:1px solid var(--hairline); border-radius:18px; background:var(--field); overflow:hidden; }
    .settings-row { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:56px; margin:0; padding:10px 16px; border:0; border-radius:0; background:none; color:var(--ink); font:inherit; font-size:15px; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .settings-row[hidden] { display:none; }
    .settings-card > .settings-row + .settings-row { border-top:1px solid var(--hairline); }
    button.settings-row:active { background:var(--hairline); }
    .row-text { display:block; flex:1; min-width:0; }
    .row-title { display:block; }
    .row-sub { display:block; margin-top:2px; color:var(--muted); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
    .row-chevron { flex:none; color:var(--muted); font-size:22px; line-height:1; }
    .action-row { color:var(--accent); font-weight:500; }
    .settings-row select { flex:none; max-width:55%; min-height:36px; padding:4px 8px; border:0; border-radius:10px; background:transparent; color:var(--accent); font:inherit; font-size:15px; text-align:right; cursor:pointer; }
    body[data-sky-tone="light"] .settings-row select { background:transparent; color:var(--accent); border:0; }
    .settings-row select option { color:#1f1a24; background:#fff; }
    .settings-row input[type="checkbox"] { appearance:none; -webkit-appearance:none; position:relative; flex:none; width:50px; height:30px; margin:0; border:0; border-radius:20px; background:#b2a0ab55; cursor:pointer; transition:background .16s ease; }
    .settings-row input[type="checkbox"]::after { content:''; position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0005; transition:transform .16s ease; }
    .settings-row input[type="checkbox"]:checked { background:var(--accent); }
    .settings-row input[type="checkbox"]:checked::after { transform:translateX(20px); }
    .settings-row input[type="checkbox"]:disabled { opacity:.5; cursor:default; }
    .settings-row input:focus-visible, .settings-row select:focus-visible, button.settings-row:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
    .settings-row .sides { display:flex; gap:6px; }
    .group-note { margin:8px 8px 0; color:var(--muted); font-size:12px; line-height:1.6; }
    .group-note:empty { display:none; }
    /* The older single-purpose styles for these controls must not leak into the new rows (day and night). */
    .settings-card #language-select, body[data-sky-tone="light"] .settings-card #language-select { width:auto; min-height:36px; margin:0; padding:4px 6px; border:0; border-radius:10px; background:transparent; color:var(--accent); font-size:15px; text-align:right; text-align-last:right; }
    .settings-card #open-sky-test, .settings-card #open-tulip-test,
    body[data-sky-tone="light"] .settings-card #open-sky-test, body[data-sky-tone="light"] .settings-card #open-tulip-test { display:flex; width:100%; min-height:56px; margin:0; padding:10px 16px; border:0; border-radius:0; background:none; color:var(--accent); font-size:15px; font-weight:500; text-align:left; }
    .settings-card #open-sky-test[hidden], .settings-card #open-tulip-test[hidden] { display:none; }
    .settings-card #open-tulip-test, .settings-card #local-preview-settings { border-top:1px solid var(--hairline); }
    .settings-card #location-country, .settings-card #location-city, body[data-sky-tone="light"] .settings-card #location-country, body[data-sky-tone="light"] .settings-card #location-city { width:auto; max-width:58%; min-height:36px; margin:0; padding:4px 6px; border:0; border-radius:10px; background:transparent; color:var(--accent); font-size:15px; text-align:right; text-align-last:right; }
    .settings-card #location-country:disabled, .settings-card #location-city:disabled { opacity:.5; }
    .settings-card #apply-location, .settings-card #retry-locations, body[data-sky-tone="light"] .settings-card #apply-location, body[data-sky-tone="light"] .settings-card #retry-locations { display:flex; width:100%; min-height:56px; margin:0; padding:10px 16px; border:0; border-radius:0; background:none; color:var(--accent); font-size:15px; font-weight:500; text-align:left; }
    .settings-card #apply-location:disabled { opacity:.45; cursor:default; }
    .settings-card #retry-locations[hidden] { display:none; }
    .settings-card #apply-location, .settings-card #retry-locations { border-top:1px solid var(--hairline); }
    .chosen-location { color:var(--accent); }
    .group-link { display:block; margin:10px 6px 0; padding:8px 2px; min-height:44px; border:0; background:none; color:var(--accent); font:inherit; font-size:13px; cursor:pointer; }
    .group-link[hidden] { display:none; }
    #use-location.group-link { background:none; border-radius:0; margin:10px 6px 0; font-size:13px; color:var(--accent); text-align:left; }
    .welcome-body p { margin:0 0 12px; color:var(--ink); font-size:15px; line-height:1.65; }
    .welcome-body .welcome-small { color:var(--muted); font-size:13px; }
    .welcome-body .welcome-status { color:var(--accent); font-size:13px; min-height:0; }
    .welcome-body .welcome-status:empty { display:none; }
    .welcome-body button { display:block; width:100%; min-height:52px; margin:8px 0 0; border:0; border-radius:14px; font:inherit; font-size:16px; cursor:pointer; }
    #welcome-yes { background:var(--accent); color:#fff; font-weight:600; }
    #welcome-no { background:none; color:var(--muted); }
    body:not([data-sky-tone="light"]) #welcome-yes { color:#2a0f1c; }
    @media (prefers-reduced-motion:reduce) { .settings-row input[type="checkbox"], .settings-row input[type="checkbox"]::after { transition:none; } }