:root { --paper:#F9F8F6; --ink:#1A1A1A; --muted:#77716D; --subtle:#E8E3DA; --red:#D71920; --line:rgba(26,26,26,.10); --card:rgba(239,235,229,.85); --nav:rgba(249,248,246,.94); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color-scheme:light; }
:root[data-theme="dark"] { --paper:#1A1A1A; --ink:#F9F8F6; --muted:#B5B0AB; --subtle:#33312F; --red:#E34243; --line:rgba(249,248,246,.14); --card:#302D2B; --nav:rgba(26,26,26,.96); color-scheme:dark; }
*{box-sizing:border-box} html{min-height:100%;background:var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-size:15px;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}button:disabled{opacity:.35;cursor:default} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.app-shell{max-width:560px;min-height:100dvh;margin:auto;position:relative;display:flex;flex-direction:column;background:var(--paper);overflow:hidden;isolation:isolate}
.app-shell::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:auto -15% 0;height:29%;opacity:.62;background:linear-gradient(180deg,transparent 4%,var(--paper) 100%),url('./assets/mountains.svg') center bottom / cover no-repeat}.topbar{height:112px;flex:0 0 auto;padding:calc(16px + env(safe-area-inset-top,0px)) 26px 10px;display:flex;align-items:center;justify-content:center}.brand-lockup{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center}.brand-logo{width:min(60vw,258px);height:auto;object-fit:contain;display:block;margin:0 auto}.brand-subtitle{font-size:11px;letter-spacing:.42em;font-weight:600;color:var(--muted);padding-left:.42em}main{flex:1;display:flex;flex-direction:column;min-height:0}.screen{position:relative;padding:0 26px 20px;flex:1;display:flex;flex-direction:column;min-height:calc(100dvh - 208px)}.screen[hidden]{display:none!important}
.home-screen{justify-content:space-between}.home-main{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:225px;flex:1}.home-time{font-weight:300;font-size:clamp(68px,18vw,92px);line-height:1.1;letter-spacing:-.07em;tabular-nums:lining-nums}.home-motto{color:var(--muted);font-size:19px;font-weight:300;margin:13px 0 0}.home-controls{padding-bottom:12px}.field-label{font-size:12px;font-weight:600;display:block;margin:0 0 12px}.duration-buttons{display:grid;grid-template-columns:repeat(5,1fr);border-radius:14px;background:var(--card);padding:4px;gap:2px}.duration-btn{background:transparent;border:none;border-radius:11px;min-height:43px;color:var(--ink);font-size:14px}.duration-btn.is-selected{color:#fff;background:var(--red);font-weight:600;box-shadow:0 2px 8px rgba(143,19,24,.15)}.field-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;font-size:13px;font-weight:500}.custom-row{margin-top:14px}.select-wrap{display:flex;align-items:center;position:relative;background:var(--card);border-radius:12px;min-width:145px}.select-wrap::after{content:'⌄';position:absolute;right:12px;top:46%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:18px}.select-wrap select{width:100%;appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:11px 30px 11px 13px;border-radius:12px;color:var(--ink);font-size:13px}.select-wrap.compact{min-width:128px}.btn{border-radius:22px;border:1px solid transparent;padding:14px 20px;min-height:47px;font-size:14px;font-weight:600;text-align:center}.btn-primary{color:white;background:var(--red)}.btn-primary:active{filter:brightness(.9)}.btn-secondary{color:var(--ink);background:var(--card)}.btn-outline{border-color:var(--red);color:var(--red);background:transparent}.start-btn{width:100%;margin-top:23px}.subtle-note{text-align:center;color:var(--muted);font-size:11px;line-height:1.5;margin:12px 6px 0}.bottom-nav{height:calc(74px + env(safe-area-inset-bottom,0px));flex:0 0 auto;display:flex;align-items:stretch;justify-content:space-around;background:var(--nav);border-top:1px solid var(--line);padding:6px 16px env(safe-area-inset-bottom,0px);backdrop-filter:blur(8px)}.bottom-nav[hidden]{display:none}.nav-item{border:0;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:76px;font-size:11px}.nav-item.current{color:var(--red);font-weight:600}.nav-symbol{font-size:26px;line-height:1.05;font-family:Arial,sans-serif;font-weight:300}
.active-screen,.done-screen{justify-content:space-between}.active-stage{display:flex;align-items:center;justify-content:center;flex-direction:column;flex:1;min-height:300px}.active-label{font-size:14px;font-weight:400;letter-spacing:.18em;color:var(--muted);margin:0 0 24px}.progress-wrap{width:min(76vw,300px);aspect-ratio:1;position:relative;display:grid;place-items:center}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.ring-track{fill:none;stroke:var(--subtle);stroke-width:4}.ring-progress{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-dasharray:640.885;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}.active-time{position:absolute;font-size:clamp(53px,12vw,75px);font-weight:300;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.active-instruction{color:var(--muted);font-size:16px;margin:26px 0 0}.active-actions{padding-bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.active-actions .subtle-note{grid-column:1/-1}.done-middle{display:flex;flex:1;justify-content:center;align-items:center;flex-direction:column;text-align:center;min-height:300px}.done-middle h1{font-weight:500;font-size:clamp(24px,6vw,30px);margin:0 0 18px}.done-duration{font-size:18px;color:var(--muted);margin:0}.done-note{margin-top:30px;font-size:13px;color:var(--muted)}.done-screen>.btn{margin-bottom:24px}
h1{font-weight:600;font-size:27px;letter-spacing:-.03em}.journal-screen,.settings-screen{overflow:visible;padding-top:8px;padding-bottom:26px}.screen-title-row{display:flex;justify-content:space-between;align-items:center;gap:6px}.screen-title-row h1{margin:6px 0 22px}.text-action{border:0;background:none;color:var(--red);font-size:12px;font-weight:600;padding:8px 0}.period-switch{display:flex;padding:4px;background:var(--card);border-radius:14px;gap:3px}.period-btn{background:none;border:0;padding:10px;flex:1;border-radius:11px;color:var(--muted);font-size:13px}.period-btn.selected{color:var(--ink);background:var(--paper);box-shadow:0 1px 5px rgba(0,0,0,.08)}.week-nav{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:13px;margin-top:13px;min-height:35px}.icon-btn{border:0;background:none;font-size:26px;width:38px;color:var(--muted)}.week-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:12px 0 21px;text-align:center}.day-col{display:flex;align-items:center;gap:10px;flex-direction:column}.day-label{font-size:10px;color:var(--muted)}.day-dot{width:13px;height:13px;border-radius:50%;background:var(--subtle)}.day-dot.filled{background:var(--red)}.stats-card{background:var(--card);border-radius:13px;padding:5px 16px}.stats-card>div{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:10px;font-size:13px}.stats-card>div+div{border-top:1px solid var(--line)}.stats-card strong{font-size:13px;font-weight:600}.list-heading{font-size:16px;letter-spacing:-.01em;margin:23px 0 12px;font-weight:600}.history-list{border-radius:13px;background:var(--card);margin-bottom:30px;overflow:hidden}.history-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 15px;font-size:13px}.history-row+.history-row{border-top:1px solid var(--line)}.history-row small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.history-row button{background:none;border:0;color:var(--muted);font-size:12px;padding:10px}.empty-history{text-align:center;padding:38px 12px;font-size:13px;color:var(--muted);line-height:1.6}
.settings-screen>h1{margin:6px 0 20px}.settings-list{background:var(--card);border-radius:14px;padding:3px 15px}.setting-item{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:54px;font-size:13px}.setting-item+.setting-item{border-top:1px solid var(--line)}.setting-item .select-wrap{min-width:124px;background:transparent}.setting-item strong{font-size:12px;color:var(--muted);font-weight:400}.setting-item input[type="checkbox"]{accent-color:var(--red);width:19px;height:19px}.settings-footnote{font-size:12px;color:var(--muted);line-height:1.7;margin:24px 3px}
.app-dialog{max-width:min(420px,calc(100% - 32px));width:100%;border:0;border-radius:22px;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 18px 55px rgba(0,0,0,.2)}.app-dialog::backdrop{background:rgba(0,0,0,.4)}.dialog-body{padding:24px;display:flex;flex-direction:column;gap:12px}.dialog-body h2{margin:0;font-size:21px}.dialog-body p{color:var(--muted);font-size:13px;line-height:1.5}.dialog-body label{font-size:13px}.dialog-body input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:12px}.dialog-body menu{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}.dialog-body menu .btn{flex:1;min-width:85px;padding:10px}.toast{position:fixed;z-index:99;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(15px);pointer-events:none;opacity:0;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:14px;max-width:min(90vw,440px);font-size:13px;box-shadow:0 6px 25px #0002;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:650px){.app-shell{min-height:min(820px,94dvh);margin:3dvh auto;border:1px solid var(--line);border-radius:28px;box-shadow:0 20px 55px rgba(0,0,0,.07)}.screen{min-height:560px}}@media(max-height:730px){.topbar{height:92px;padding-top:14px}.brand-lockup{gap:5px}.brand-logo{width:min(54vw,220px)}.brand-subtitle{font-size:10px;letter-spacing:.36em}.home-main{min-height:130px}.home-time{font-size:62px}.home-controls .field-row{margin-top:12px}.home-controls .start-btn{margin-top:15px}.subtle-note{font-size:10px}.bottom-nav{height:66px}.screen{min-height:calc(100dvh - 158px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* A makett szerint a logó csak a kezdőképernyőn szerepel. */
.app-shell:not([data-screen="home"]) .topbar{display:none}
.app-shell:not([data-screen="home"]) .screen{padding-top:calc(28px + env(safe-area-inset-top, 0px));min-height:calc(100dvh - 90px)}
.app-shell[data-screen="active"] .screen,.app-shell[data-screen="done"] .screen{padding-top:calc(20px + env(safe-area-inset-top, 0px))}
.app-shell:not([data-screen="home"]) .journal-screen,.app-shell:not([data-screen="home"]) .settings-screen{padding-top:calc(36px + env(safe-area-inset-top, 0px))}
@media (min-width:650px){.app-shell:not([data-screen="home"]) .screen{min-height:650px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

#bellAudio{display:none}