/* Ambient Focus Room — the room is one immersive block; scenes are gradients that drift slowly (reduced-motion respected via main.css animation rules). */
.afr-room { position: relative; overflow: hidden; min-height: 560px; border-radius: var(--radius-md); color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 1rem 1.25rem; isolation: isolate; }
.afr-room:fullscreen { border-radius: 0; min-height: 100vh; padding: 2rem 3rem; }
.afr-sky { position: absolute; inset: -20%; z-index: -1; background: var(--afr-bg); filter: saturate(1.05); animation: afr-drift 60s ease-in-out infinite alternate; }
@keyframes afr-drift { from { transform: translate3d(-2%, -1%, 0) scale(1.02); } to { transform: translate3d(2%, 1%, 0) scale(1.08); } }
.afr-room::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0, 0, 0, 0.35) 100%); }
.scene-dawn { --afr-bg: linear-gradient(160deg, #f7b267 0%, #f4845f 35%, #7a4a8c 75%, #2f2a52 100%); }
.scene-forest { --afr-bg: linear-gradient(160deg, #0f3d2e 0%, #1f5f3f 40%, #3f7d4a 70%, #0b2a1f 100%); }
.scene-ocean { --afr-bg: linear-gradient(160deg, #0b3a5c 0%, #136f9a 45%, #2aa7b8 75%, #062a44 100%); }
.scene-night { --afr-bg: linear-gradient(160deg, #0b1020 0%, #1b2540 45%, #2b3a67 80%, #050812 100%); }
.scene-ember { --afr-bg: linear-gradient(160deg, #2b0a0a 0%, #6b1d12 40%, #c2410c 75%, #1a0606 100%); }
.scene-mono { --afr-bg: linear-gradient(160deg, #1c1c1e 0%, #2c2c2e 45%, #48484a 80%, #111 100%); }
.afr-room.is-break .afr-sky { filter: saturate(0.6) brightness(1.1); }
.afr-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.afr-clock { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 1rem; opacity: 0.85; }
.afr-top-btns { display: flex; gap: 0.4rem; }
.afr-icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.afr-icon:hover { background: rgba(255, 255, 255, 0.22); }
.afr-center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; padding: 1rem 0; }
.afr-phase { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.afr-timer { font-size: clamp(3.5rem, 14vw, 7.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.afr-room:fullscreen .afr-timer { font-size: clamp(5rem, 18vw, 16rem); }
.afr-presets { display: flex; gap: 0.4rem; align-items: center; }
.afr-pill { min-width: 52px; min-height: 40px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #fff; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.afr-pill.is-on { background: #fff; color: #1b1b1f; }
.afr-custom input { width: 4.2rem; background: transparent; border: 0; color: inherit; font: inherit; text-align: center; outline: none; }
.afr-custom input::placeholder { color: rgba(255, 255, 255, 0.7); }
.afr-controls { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.afr-big { min-height: 48px; padding: 0 1.3rem; font-size: 0.95rem; }
.afr-controls .btn-toolbar-sm:not(.btn-brand-sm) { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.afr-quote { margin: 0.6rem 0 0; font-style: italic; opacity: 0.75; font-size: 0.92rem; }
.afr-bottom { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.afr-mixer { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem 0.9rem; padding: 0.8rem 1rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); }
.afr-ch { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; align-items: center; gap: 0 0.5rem; font-size: 0.78rem; }
.afr-ch span { opacity: 0.9; }
.afr-ch input { grid-column: 1 / -1; width: 100%; min-height: 28px; accent-color: #fff; cursor: pointer; }
.afr-tasks { padding: 0.8rem 1rem; border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(8px); min-width: 0; }
.afr-task-form { display: flex; gap: 0.4rem; }
.afr-task-form[hidden] { display: none; }
.afr-task-form .input-clean { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.afr-task-form .input-clean::placeholder { color: rgba(255, 255, 255, 0.65); }
.afr-task-form .btn-toolbar-sm { background: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.35); min-width: 44px; }
.afr-task-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.afr-task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; font-size: 0.9rem; min-height: 32px; }
.afr-task input { width: 20px; height: 20px; accent-color: #fff; }
.afr-task.is-done label { text-decoration: line-through; opacity: 0.6; }
.afr-task-x { width: 32px; height: 32px; border: 0; background: transparent; color: #fff; opacity: 0.6; font-size: 1.1rem; cursor: pointer; }
.afr-room.is-zen .afr-bottom, .afr-room.is-zen .afr-presets, .afr-room.is-zen .afr-quote, .afr-room.is-zen .afr-controls, .afr-room.is-zen .afr-clock { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.afr-room.is-zen:hover .afr-controls { opacity: 1; pointer-events: auto; }
.afr-scenes { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; }
.afr-scene { width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: var(--afr-bg); }
.afr-scene[data-scene="dawn"] { --afr-bg: linear-gradient(160deg, #f7b267, #7a4a8c); } .afr-scene[data-scene="forest"] { --afr-bg: linear-gradient(160deg, #1f5f3f, #0b2a1f); } .afr-scene[data-scene="ocean"] { --afr-bg: linear-gradient(160deg, #136f9a, #062a44); } .afr-scene[data-scene="night"] { --afr-bg: linear-gradient(160deg, #1b2540, #050812); } .afr-scene[data-scene="ember"] { --afr-bg: linear-gradient(160deg, #c2410c, #2b0a0a); } .afr-scene[data-scene="mono"] { --afr-bg: linear-gradient(160deg, #48484a, #111); }
.afr-scene.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--background); }