/* Study & Focus Timer — glassmorphism */
.tool-study-timer { background: #0b0f19; }
.st-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.st-bg__layer { position: absolute; inset: -5%; opacity: 0; transition: opacity 1.6s ease; background-size: cover; background-position: center; }
.st-bg__layer.is-on { opacity: 1; }
.st-bg__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.75)); }
html.light-mode .st-bg__shade { background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,.45)); }
.tool-study-timer .ambient-mesh-glows { display: none; }

/* CSS-drawn scenes (no image files) */
[data-scene="aurora"] { background: radial-gradient(ellipse at 20% 20%, #22d3ee 0, transparent 45%), radial-gradient(ellipse at 80% 30%, #a855f7 0, transparent 40%), radial-gradient(ellipse at 50% 90%, #10b981 0, transparent 50%), #020617; animation: stDrift 30s ease-in-out infinite alternate; background-size: 140% 140%; }
[data-scene="sunset"] { background: linear-gradient(180deg, #1e1b4b 0%, #7c3aed 35%, #f97316 70%, #fbbf24 100%); }
[data-scene="ocean"] { background: radial-gradient(ellipse at 50% 120%, #0ea5e9 0, transparent 60%), linear-gradient(180deg, #082f49, #0c4a6e 60%, #075985); }
[data-scene="forest"] { background: radial-gradient(circle at 70% 20%, rgba(250,250,210,.35) 0, transparent 30%), linear-gradient(180deg, #052e16, #14532d 55%, #166534); }
[data-scene="night"] { background: repeating-linear-gradient(90deg, rgba(250,204,21,.18) 0 3px, transparent 3px 26px) 0 70% / 100% 30% no-repeat, linear-gradient(180deg, #020617, #1e1b4b 65%, #312e81); }
[data-scene="rain"] { background: repeating-linear-gradient(105deg, rgba(255,255,255,.07) 0 1px, transparent 1px 9px), linear-gradient(180deg, #1f2937, #334155 60%, #475569); animation: stRain 1.2s linear infinite; }
[data-scene="paper"] { background: radial-gradient(circle at 30% 30%, #fde68a 0, transparent 35%), linear-gradient(135deg, #78350f, #92400e 50%, #451a03); }
[data-scene="space"] { background: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 15%, #fff 50%, transparent 51%), radial-gradient(ellipse at 60% 40%, #4c1d95 0, transparent 50%), #000; background-size: 300px 300px, 260px 260px, 340px 340px, 200px 200px, 100% 100%, 100%; }
@keyframes stDrift { to { background-position: 100% 100%; } }
@keyframes stRain { to { background-position: -20px 60px, 0 0; } }

.st-glass { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.35); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); color: #f8fafc; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .st-glass { background: rgba(15,23,42,.92); } }
html.light-mode .st-glass { background: rgba(255,255,255,.55); color: #0f172a; border-color: rgba(255,255,255,.6); }
.st-hero { padding-bottom: 8px; }
.st-hero h1, .st-hero .eyebrow { text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.st-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 920px) { .st-layout { grid-template-columns: minmax(0, 1fr); } }
.st-layout > * { min-width: 0; }
.st-card { padding: clamp(18px, 4vw, 34px); text-align: center; position: sticky; top: 84px; }
@media (max-width: 920px) { .st-card { position: static; } }
.st-modes { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.2); }
.st-mode { border: 0; background: transparent; color: inherit; font: inherit; font-size: .9rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.st-mode.is-active { background: rgba(255,255,255,.9); color: #0f172a; font-weight: 700; }
.st-ring-wrap { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 22px auto 10px; }
.st-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
[dir="rtl"] .st-ring { transform: rotate(-90deg) scaleY(-1); }
.st-ring__bg { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 10; }
.st-ring__fg { fill: none; stroke: url(#none) #fff; stroke: #f8fafc; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 628.32; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear; }
html.light-mode .st-ring__fg { stroke: #4f46e5; } html.light-mode .st-ring__bg { stroke: rgba(15,23,42,.12); }
.st-time-box { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; }
.st-time { font-size: clamp(3rem, 12vw, 4.6rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1; direction: ltr; }
.st-phase { font-size: .95rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.st-session { font-size: .85rem; opacity: .75; }
.st-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 8px 0 18px; }
.st-btn { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit; font: inherit; border-radius: 999px; cursor: pointer; padding: 10px 18px; }
.st-btn:hover { background: rgba(255,255,255,.22); }
.st-btn--main { min-width: 150px; padding: 14px 28px; font-size: 1.1rem; font-weight: 800; background: #f8fafc; color: #0f172a; border-color: transparent; }
.st-btn--main:hover { background: #fff; }
html.light-mode .st-btn--main { background: #4f46e5; color: #fff; }
.st-btn--icon { width: 48px; height: 48px; padding: 0; font-size: 1.3rem; display: grid; place-items: center; }
.st-btn--sm { padding: 7px 14px; font-size: .9rem; white-space: nowrap; }
.st-btn:focus-visible, .st-mode:focus-visible, .st-chip:focus-visible, .st-scene:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }
.st-settings { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 12px; font-size: .9rem; }
.st-settings label { display: flex; align-items: center; gap: 8px; }
.st-input { background: rgba(0,0,0,.25); color: inherit; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 7px 10px; font: inherit; min-width: 0; }
html.light-mode .st-input { background: rgba(255,255,255,.7); border-color: rgba(15,23,42,.2); }
.st-input option { color: #0f172a; }
input[type=number].st-input { width: 76px; }
.st-input--sm { padding: 4px 8px; }
.st-toggles { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: .88rem; margin: 6px 0; }
.st-toggles label { display: flex; align-items: center; gap: 6px; }
.st-quick { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.st-chip { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-size: .88rem; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.st-chip.is-on { background: rgba(255,255,255,.88); color: #0f172a; font-weight: 700; }
html.light-mode .st-chip.is-on { background: #4f46e5; color: #fff; }
.st-side { display: grid; gap: 16px; }
.st-panel { padding: 18px 20px; }
.st-panel h2 { font-size: 1.05rem; margin: 0 0 12px; }
.st-panel h3 { font-size: .92rem; margin: 16px 0 8px; opacity: .9; }
.st-sound-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.st-vol { display: flex; align-items: center; gap: 10px; font-size: .85rem; margin-top: 10px; }
.st-vol input { flex: 1; }
.st-track-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.st-track-row .st-input { flex: 1; }
.st-inline { display: flex; gap: 6px; align-items: center; font-size: .85rem; }
.st-credit { font-size: .78rem; opacity: .75; margin: 8px 0 0; }
.st-yt { margin-top: 10px; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; }
.st-yt iframe { width: 100%; height: 100%; border: 0; }
.st-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-scene { border: 2px solid transparent; background: none; color: inherit; font: inherit; font-size: .75rem; padding: 0; cursor: pointer; border-radius: 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.st-scene.is-on { border-color: #f8fafc; }
.st-scene__sw { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 10px; animation: none !important; }
.st-upload { display: inline-flex; align-items: center; }
#stColor { width: 44px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; }
.st-tasks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.st-tasks li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.18); }
.st-tasks li.done span { text-decoration: line-through; opacity: .6; }
.st-tasks li span { flex: 1; overflow-wrap: anywhere; }
.st-tasks button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; opacity: .7; }
.st-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.st-stats strong { display: block; font-size: 1.6rem; }
.st-stats span { font-size: .78rem; opacity: .8; }
.st-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 120px; margin-top: 14px; }
.st-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: .7rem; }
.st-bar i { display: block; width: 100%; max-width: 28px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #a5b4fc, #6366f1); min-height: 3px; }
.st-bar b { font-weight: 600; opacity: .85; }
/* Focus mode: only the timer */
body.st-focus .site-header, body.st-focus .site-footer, body.st-focus .breadcrumbs, body.st-focus .st-hero, body.st-focus .st-side, body.st-focus .privacy-note, body.st-focus .related-tools, body.st-focus .howto, body.st-focus .st-settings, body.st-focus .st-toggles, body.st-focus .st-modes { display: none !important; }
body.st-focus .st-layout { grid-template-columns: 1fr; min-height: 90vh; place-items: center; }
body.st-focus .st-card { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { [data-scene] { animation: none !important; } .st-bg__layer { transition: none; } }
.st [hidden], .st-settings[hidden] { display: none !important; }
.st-side { grid-template-columns: minmax(0, 1fr); } .st-track-row .st-input { min-width: 0; width: 100%; } .st-bg { contain: paint; }