:root{--ink:#193d4b;--muted:#6c8189;--line:#e2ebed;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:#f2f7f8}
body{background:#f2f7f8}header{background:#f2f7f8;color:var(--ink);min-height:76px;padding:16px 22px;border-bottom:1px solid #e4edef}.brand{color:var(--ink);font-weight:700;letter-spacing:-.8px;font-size:25px}.header-actions{gap:4px}.header-actions .icon-button{background:#fff;border:1px solid #e1ebed;border-radius:14px;box-shadow:0 2px 5px #163b4b04}.header-actions .ui-icon{filter:invert(24%) sepia(20%) saturate(1173%) hue-rotate(153deg);width:23px;height:23px}.icon-button:hover{background:#e7f2f5}.ui-icon{width:28px;height:28px}main{padding:0 18px 20px;background:#f2f7f8}.list-summary{position:relative;top:auto;margin:22px 0 16px;padding:28px 22px;border:1px solid #cae5e8;border-radius:24px;background:linear-gradient(135deg,#e2f3f3,#f1f8fb);box-shadow:0 8px 24px #194c6006}.forecast{gap:12px;grid-template-columns:40px minmax(0,1fr) auto}.forecast>.ui-icon{width:36px;height:36px}.summary strong{font-size:25px;color:#183e4e;letter-spacing:-.6px}.summary p{font-size:13px;font-style:normal;color:#65818b;line-height:1.5}.summary #countdown{background:#fff8f1;border:1px solid #f4dfcb;border-radius:16px;padding:13px 10px;color:#aa6740;font-size:23px;letter-spacing:-.5px}.summary #countdown.overdue{border:1px solid #dc9b87;background:#fff1ec;color:#ab4c35}.year-heading{padding:16px 6px 12px;font-size:16px;letter-spacing:.5px;color:#738b94;font-weight:650}.list-history{background:transparent}.period-row{background:white;border:1px solid #e1ebee;border-radius:18px;margin:0 0 10px;padding:19px 16px;min-height:80px;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;box-shadow:0 3px 12px #20475403}.period-row:hover{background:#fbfefe;border-color:#b7d8df}.period-content strong{font-size:20px;color:#234553;letter-spacing:-.4px}.period-row>.ui-icon{width:28px;height:28px;filter:invert(47%) sepia(17%) saturate(884%) hue-rotate(313deg)}.cycle-interval{font-size:20px;font-weight:600;color:#64818c;background:#f3f7f8;border-radius:11px;padding:8px 9px}.period-note{font-size:12px;line-height:1.5;margin-top:5px;color:#7a8e96}.empty-history{padding:24px 8px}.empty-history h2{font-size:22px;color:#264958}.empty-history p{font-size:14px;color:#728790}.empty-history button{border-radius:14px;background:#17647a;color:white;border:0;padding:14px 18px}.workspace{padding:0;margin:20px 0}.calendar{border:1px solid #dce8ec;border-radius:22px;padding:22px 16px}.day{border-radius:12px;background:#f3f7f8;color:#284854}.day.recorded{background:#f8d9d3;color:#8a4943}.day.predicted{background:#e9f3f6;border-color:#81b3c1}.day.selected{box-shadow:inset 0 0 0 2px #246b81}.legend .recorded{background:#f8d9d3}.legend .predicted{background:#e9f3f6;border-color:#81b3c1}.primary{background:#17647a;border-color:#17647a;border-radius:14px}.secondary{border-radius:12px;color:#24586a}.check input{accent-color:#17647a}dialog{color:#284854;background:#fff;border:1px solid #d7e5e9;border-radius:24px;box-shadow:0 24px 80px #12384633}dialog::backdrop{background:#16344270;backdrop-filter:blur(3px)}label{color:#46626e}input:not([type=checkbox]):not([type=radio]),textarea{background:#f7fafb;border-color:#dbe6ea;border-radius:12px;color:#264957}h2{letter-spacing:-.5px}.mode-fields{border-color:#dce8ec;border-radius:16px}.fine{color:#788b94}footer{padding:14px 10px;font-size:11px;line-height:1.6;color:#82969e}#status{background:#235e71;box-shadow:0 6px 25px #143c5322;border-radius:16px}#entryDialog{border-radius:24px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline-color:#2787a0}
@media(max-width:480px){header{padding:12px 16px;min-height:70px}.brand{font-size:23px}.header-actions{gap:5px}.header-actions .icon-button{padding:10px;min-width:42px;min-height:42px}.header-actions .ui-icon{width:21px;height:21px}main{padding:0 14px 18px}.list-summary{top:auto;padding:24px 16px;margin-top:18px;border-radius:22px}.forecast{grid-template-columns:32px minmax(0,1fr) auto;gap:10px}.forecast>.ui-icon{width:30px;height:30px}.summary strong{font-size:22px}.summary p{font-size:12px}.summary #countdown{font-size:21px;padding:12px 8px}.year-heading{padding-left:6px}.period-row{padding:18px 13px;gap:10px;grid-template-columns:28px minmax(0,1fr) auto}.period-content strong{font-size:19px}.cycle-interval{font-size:19px}.period-note{font-size:12px}}
@media(min-width:560px){body.browser-preview{background:#e6eff2}.browser-preview .phone-preview{background:#f2f7f8;box-shadow:0 0 0 2px #71787d,0 0 0 5px #292d30,0 22px 64px #20425230}.phone-status{background:#f2f7f8;color:#315361}.phone-battery{border-color:#315361;background:#315361;box-shadow:inset 0 0 0 2px #f2f7f8}.phone-home{background:#f2f7f8}.phone-preview header{background:#f2f7f8;min-height:70px;padding:12px 14px}.phone-preview .brand{font-size:23px}.phone-preview .header-actions{gap:5px}.phone-preview .header-actions .ui-icon{width:21px;height:21px}.phone-preview main{padding:0 14px 18px}.phone-preview .list-summary{top:auto;padding:24px 16px;margin:18px 0 14px}.phone-preview .summary strong{font-size:22px}.phone-preview .summary p{font-size:12px}.phone-preview .summary #countdown{font-size:21px;padding:12px 8px}.phone-preview .period-row{padding:18px 13px;grid-template-columns:28px minmax(0,1fr) auto;gap:10px}.phone-preview .period-content strong{font-size:19px}.phone-preview .cycle-interval{font-size:19px}.phone-preview .year-heading{font-size:16px;padding-left:6px}.phone-preview .workspace{padding:0}.phone-preview .card{padding:20px 12px}}
@media(display-mode:standalone){header{padding-top:calc(12px + env(safe-area-inset-top))}.list-summary{top:auto}main{padding-bottom:calc(18px + env(safe-area-inset-bottom))}}
.brand{gap:9px;min-width:0}.brand-logo{display:block;width:38px;height:38px;object-fit:contain;flex-shrink:0}.brand>span{white-space:nowrap}@media(max-width:480px){.brand{font-size:20px;gap:7px}.brand-logo{width:34px;height:34px}.header-actions{gap:3px}}@media(min-width:560px){.phone-preview .brand{font-size:20px;gap:7px}.phone-preview .brand-logo{width:34px;height:34px}.phone-preview .header-actions{gap:3px}}@media(max-width:359px){.brand{font-size:18px}.header-actions .icon-button{min-width:38px;padding:8px}.brand-logo{width:30px;height:30px}}
.timing-info{display:flex;align-items:flex-start;gap:5px;font-size:11px;line-height:1.5;font-weight:500;margin-top:7px;white-space:normal;color:#567e8d}.timing-info .ui-icon{width:15px;height:15px;min-width:15px;margin-top:1px;filter:invert(42%) sepia(24%) saturate(755%) hue-rotate(149deg)}.overdue-info{color:#a05f41}.overdue-info .ui-icon{filter:invert(41%) sepia(26%) saturate(840%) hue-rotate(335deg)}.forecast-status .ui-icon{filter:invert(42%) sepia(45%) saturate(820%) hue-rotate(333deg)}.upcoming-info{color:#2f666e}.upcoming-info .ui-icon{filter:invert(33%) sepia(22%) saturate(900%) hue-rotate(168deg)}
.timing-info{width:fit-content;max-width:100%;box-sizing:border-box;padding:5px 8px;border-radius:9px;border:1px solid #c8e3ed;background:#edf7fb;color:#346d83;font-size:12px}.early-info .ui-icon{filter:invert(35%) sepia(33%) saturate(788%) hue-rotate(151deg)}.overdue-info{background:#fff3e7;border-color:#f1d5b7;color:#96562e}.overdue-info .ui-icon{filter:invert(35%) sepia(42%) saturate(882%) hue-rotate(340deg)}.upcoming-info{background:#e2f6fa;border-color:#acd9e5;color:#1f6674}.upcoming-info .ui-icon{filter:invert(34%) sepia(44%) saturate(820%) hue-rotate(165deg)}.today-sparkle{animation:todayPulse 1.8s ease-in-out infinite}
.upcoming-info{background:#eaf7f2;border-color:#c6e5dd;color:#2f6f72}
.backup-section{padding-bottom:10px}.backup-section button{margin:5px 0 12px}.danger{color:#a34738;border-color:#e4bfb6;background:#fff6f3}.about-logo{width:72px;height:72px;object-fit:contain;display:block;margin:0 auto 16px}#aboutDialog{max-width:420px;padding:26px}#aboutDialog p{font-size:14px;line-height:1.6}#aboutDialog .primary{width:100%}
.late-info{background:#f3effb;border-color:#ded2f1;color:#735294}.late-info .ui-icon{filter:invert(36%) sepia(21%) saturate(1320%) hue-rotate(229deg)}
#dataProtection{padding:22px;margin:20px 0;background:#fff4e8;border:1px solid #efd1af;border-radius:18px}#dataProtection h2{font-size:20px}#dataProtection p{font-size:15px;line-height:1.6}.data-protected main>:not(#dataProtection){display:none!important}.data-protected #addEntry,.data-protected #calendarView{display:none}#safetyCopies button{display:block;margin:10px 0;white-space:normal;text-align:left}
.language-section{margin:4px 0 24px;padding:14px 0 20px;border-bottom:1px solid var(--line)}.language-section h3{font-size:16px;margin:0 0 12px}.language-options{display:flex;flex-wrap:wrap;gap:8px}.language-option{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid #d4e3e8;background:#f7fafb;color:#284854;font:inherit;font-size:14px}.language-option img{border-radius:2px;box-shadow:0 0 0 1px #163b4b15;flex-shrink:0}.language-option[aria-pressed=true]{background:#e5f3f5;border:2px solid #27758a;padding:9px 11px;font-weight:650}.language-option:hover{background:#eaf4f7}.period-content strong{overflow-wrap:anywhere}.cycle-interval{white-space:nowrap}.summary #countdown{white-space:nowrap}html[lang=uk] .period-content strong{font-size:18px}html[lang=uk] .cycle-interval{font-size:17px}
.localized-file{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid #dbe6ea;border-radius:12px;background:#f7fafb;margin:6px 0 20px;min-width:0}.localized-file button{margin:0;min-height:44px;flex-shrink:0}.file-name{font-size:14px;overflow-wrap:anywhere;min-width:0;flex:1 1 150px}.localized-date{display:grid;grid-template-columns:72px minmax(0,1fr) 90px;gap:10px;border:0;padding:0;margin:12px 0;min-width:0}.localized-date legend{font-weight:600;color:#46626e}.localized-date label{font-size:14px;min-width:0;margin:0}.localized-date input,.localized-date select{box-sizing:border-box;width:100%;min-width:0;margin:6px 0;padding:10px 8px;font:inherit;font-size:16px;background:#f7fafb;color:#264957;border:1px solid #dbe6ea;border-radius:12px;min-height:44px}.localized-dialog{width:calc(100% - 32px);max-width:420px;box-sizing:border-box;padding:24px}.localized-dialog p{font-size:16px;line-height:1.6;white-space:pre-line}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.dialog-actions button{min-height:44px;white-space:normal}select:focus-visible{outline:2px solid #2787a0;outline-offset:2px}@media(max-width:359px){.localized-date{grid-template-columns:60px minmax(0,1fr) 76px;gap:6px}.localized-dialog{padding:18px}}
.validation-error{grid-column:1/-1;color:#9b3c2c;background:#fff4ef;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.5;margin:8px 0;}


.language-control{position:relative;display:flex;flex-shrink:0}.language-globe{display:block;width:23px;height:23px;color:var(--ink)}.language-popover{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:8px;background:#fff;border:1px solid #d4e3e8;border-radius:16px;box-shadow:0 8px 24px #163b4b26}.language-popover[hidden]{display:none}.language-popover h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.language-popover .language-options{flex-wrap:nowrap;gap:6px}.language-popover .language-option{width:44px;min-width:44px;height:44px;padding:9px}.language-popover .language-option[aria-pressed=true]{padding:8px}.language-popover .language-option img{width:24px;height:16px}.header-actions{flex-shrink:0}.brand>span{min-width:0;overflow:hidden;text-overflow:ellipsis}header{gap:8px}.header-actions .icon-button{box-sizing:border-box;width:44px;min-width:44px;min-height:44px;padding:10px}#languageToggle[aria-expanded=true]{background:#e5f3f5;border-color:#27758a}

@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
header{position:sticky;top:0;z-index:12;background:color-mix(in srgb,var(--line) 35%,rgba(255,255,255,.94));backdrop-filter:blur(8px);border-bottom:1px solid #cfdee4}
.brand{letter-spacing:-0.9px}.brand-logo{filter:none}
.header-actions .icon-button{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;background:linear-gradient(180deg,#fff,#f7fcfd)}
.header-actions .icon-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #194f6414;border-color:#b8d3db}
.list-summary{animation:fadeInUp .35s ease both;background:linear-gradient(140deg,#ffffff 0,#f8fcfd 60%,#eff8fb 100%);border:1px solid #c4dce2;box-shadow:0 14px 34px #173f540a}
.forecast{align-items:center}
.summary #countdown{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 14px;font-size:22px;font-weight:650}
.summary #countdown.overdue{background:#fff5ee;border-color:#efcfb2;color:#8f4a2f}
.list-summary.is-overdue{border-color:#efc2a7;box-shadow:0 14px 28px #a04f2e24;background:linear-gradient(140deg,#fff9f5 0,#fff2ea 52%,#ffe8dc 100%);position:relative}
.list-summary.is-overdue::before{content:"";position:absolute;inset:0;border-radius:24px;border:1px solid #ffd0b0;pointer-events:none;filter:blur(1px);opacity:.5}
.list-summary.is-overdue .summary #countdown{background:#fff4ef;border-color:#f1c8af;color:#8c381f}
.list-summary.is-today{background:linear-gradient(140deg,#fff9ef 0,#fff4e7 60%,#fffbef 100%);border-color:#f2d6a5}
.list-summary.is-today .summary #countdown{background:#ffefe0;border-color:#f0c28b;color:#9a4d0c}
.list-summary.is-soon .summary #countdown{box-shadow:0 0 0 6px #1e6d8118;animation:glowPulse .95s ease-in-out infinite}
@keyframes glowPulse{0%{box-shadow:0 0 0 0 #1f7b9816}60%{box-shadow:0 0 0 8px #1f7b9810}100%{box-shadow:0 0 0 0 #1f7b9800}}
@keyframes todayPulse{0%,100%{box-shadow:0 0 0 0 #1e6d8110,0 0 0 0 #1e6d8110}50%{box-shadow:0 0 0 6px #1e6d8110,0 0 0 14px #1e6d8100}}
.summary .timing-info{margin-top:10px}
.period-row{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;position:relative}
.period-row:hover{transform:translateY(-1px);box-shadow:0 8px 18px #193e4f14}
.period-row::after{content:"";position:absolute;inset:auto 16px 0 16px;height:1px;background:linear-gradient(90deg,transparent,#e2ecf0,transparent)}
.period-row:last-of-type::after{display:none}
.workspace{margin-top:14px}
.calendar{border-radius:22px}
.weekdays{font-weight:650}
.day{transition:transform .12s ease,box-shadow .12s ease}
.day:active{transform:scale(.98)}
.day.recorded,.day.predicted{box-shadow:inset 0 0 0 1px #cce1e5}
.history .period-row .period-content strong{line-height:1.2}
@media(max-width:660px){.list-summary{margin-top:14px}.summary #countdown{font-size:20px;padding:11px}}
@media(prefers-reduced-motion:no-preference){.period-row,.summary,.day,.icon-button{transition:.2s ease}.intro{animation:fadeInUp .35s ease}} 

.sync-code{display:block;overflow-wrap:anywhere;margin:10px 0;padding:12px;border-radius:12px;background:#edf7fa;border:1px solid #c5e0e7;font-size:13px;letter-spacing:.03em;color:#234553}
#syncSection input{width:100%;box-sizing:border-box}
.summary #estimateHint,.phone-preview .summary #estimateHint{font-size:14px;line-height:1.5}
.period-content .timing-info{font-size:14px;line-height:1.45}
.period-content .timing-info .ui-icon{width:17px;height:17px;min-width:17px}
.expected-date{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:#567481;white-space:normal}
@media(max-width:360px){.period-row{grid-template-columns:24px minmax(0,1fr);gap:9px}.period-row .cycle-interval{grid-column:2;justify-self:start;font-size:17px;margin-top:4px}}

/* Keep the date and interval together; give details the full remaining width. */
.period-row,.phone-preview .period-row{grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;row-gap:7px;align-items:center}
.period-row>.ui-icon{grid-column:1;grid-row:1}
.period-row .period-content{display:contents}
.period-row .period-content>strong{grid-column:2;grid-row:1;min-width:0}
.period-row .cycle-interval{grid-column:3;grid-row:1;justify-self:end;margin:0}
.period-row .period-content>.timing-info,.period-row .expected-date,.period-row .period-note{grid-column:2/-1;margin-top:0}
.period-row .timing-info{align-items:center}
.period-row .timing-info .ui-icon{flex-shrink:0;margin-top:0}
#pwaUpdateNotice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;margin:16px 0;background:#edf7fb;border:1px solid #acd1df;border-radius:18px;color:#234553}
#pwaUpdateNotice[hidden]{display:none}
#pwaUpdateNotice p{flex:1 1 180px;margin:0;font-size:16px;line-height:1.5;font-weight:600}
#pwaUpdateNotice button{min-height:44px}
.forecast>.ui-icon{align-self:start;margin-top:3px}
.period-row{container-type:inline-size}
.period-row .period-content>.timing-inline{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);align-items:stretch;white-space:nowrap;gap:6px;margin-top:3px;width:100%;max-width:100%;font-size:14px;line-height:1.5}
.timing-inline>span{white-space:nowrap;box-sizing:border-box;min-width:0}
.timing-inline .expected-block{display:inline-flex;align-items:center;padding:5px 7px;border:1px solid #bcdacc;border-radius:9px;background:#e5f4ed;color:#356653}
.timing-inline .expected-block{grid-column:1}
.timing-inline>.timing-info{grid-column:2;width:100%;font-size:inherit;line-height:inherit;margin:0;padding:5px 7px;white-space:nowrap;gap:4px}
.timing-inline>.timing-info>span{white-space:nowrap}
.timing-inline .expected-compact{display:none}
@container(max-width:310px){.period-row .period-content>.timing-inline{font-size:12.5px;gap:5px}.timing-inline .expected-long{display:none}.timing-inline .expected-compact{display:inline-flex}.timing-inline .expected-block,.timing-inline>.timing-info{padding:5px 4px}.timing-inline>.timing-info{gap:3px}.period-content .timing-inline .timing-info .ui-icon{width:15px;height:15px;min-width:15px}}
@media(max-width:359px){.period-row,.phone-preview .period-row{grid-template-columns:24px minmax(0,1fr) auto;column-gap:8px;padding:16px 10px}.period-row .cycle-interval{font-size:17px;padding:7px}.period-row .period-content>strong{font-size:18px}}

.list-summary{container-type:inline-size}
.forecast,.phone-preview .forecast{grid-template-columns:28px minmax(0,1fr) auto;column-gap:10px;row-gap:10px}
.forecast-content{display:contents}
.forecast>.ui-icon{grid-column:1;grid-row:1;width:28px;height:28px}
.forecast #nextPeriod{grid-column:2;grid-row:1;align-self:center;margin:0}
.forecast #countdown{grid-column:3;grid-row:1;align-self:center}
.forecast #estimateHint,.phone-preview .forecast #estimateHint{grid-column:1/-1;grid-row:2;justify-self:start;margin:0;padding:5px 7px;border:1px solid #bcdacc;border-radius:9px;background:#e5f4ed;color:#356653;font-size:14px;line-height:1.5;max-width:100%;box-sizing:border-box}
.forecast #estimateHint.has-estimate{white-space:nowrap}
.forecast-content>.timing-info{grid-column:1/-1;margin-top:0}
@container(max-width:310px){.forecast #estimateHint,.phone-preview .forecast #estimateHint{font-size:13px}}
.push-option{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:16px;line-height:1.4}
.push-option input{width:22px;height:22px;flex:0 0 22px;accent-color:#29869a;margin:0}
.organized-settings{padding:0!important;border-radius:24px;scroll-padding-top:85px}
.settings-heading{position:sticky;top:0;z-index:2;background:#fff;padding:20px 22px;margin:0!important;border-bottom:1px solid #dce9eb}
.settings-heading h2{font-size:22px!important;margin:0!important}
.settings-groups{display:grid;gap:12px;padding:18px}
.settings-group{border:1px solid #d8e8e9;border-radius:17px;background:#fff;overflow:hidden}
.settings-group:first-child{background:#f1faf8;border-color:#acd4ca}
.settings-group>summary{list-style:none;display:flex;align-items:center;gap:12px;padding:18px;font-size:17px;font-weight:650;color:#204d59;cursor:pointer}
.settings-group>summary::-webkit-details-marker{display:none}
.settings-group>summary::after{content:'+';margin-left:auto;font-size:24px;font-weight:400}
.settings-group[open]>summary::after{content:'−'}
.settings-symbol{display:grid;place-items:center;width:32px;height:32px;background:#e3f2ef;color:#247d80;border-radius:10px;font-size:22px;flex-shrink:0}
.settings-group-body{padding:0 18px 18px}.settings-group-body>section,.settings-group-body>form{margin:0!important;padding:0!important}
.settings-group-body h2{font-size:18px!important;margin:18px 0 10px!important}.settings-group-body .fine{font-size:15px;line-height:1.65}
.settings-group-body button{max-width:100%;margin-top:10px}.settings-group-body .push-option{border-top:1px solid #d8e9e5;padding:16px 0;font-size:17px;font-weight:600;gap:14px}
.settings-group-body .push-option input{width:24px;height:24px;flex-basis:24px}
.settings-group-body section>p.fine:not([role=status]){margin:12px 0}
.settings-group-body .sync-code{overflow-wrap:anywhere}.settings-about{padding:0 18px 18px}
.settings-danger .danger{color:#a84e3a;background:#fff4ef;border-color:#e5c6bb}
@media(max-width:390px){.settings-heading{padding:16px}.settings-groups{padding:12px;gap:10px}.settings-group>summary{padding:14px;font-size:16px}.settings-group-body{padding:0 14px 16px}}

/* Forecast uses the same card rhythm and type sizes as recorded periods. */
.list-summary,.phone-preview .list-summary{padding:19px 16px;border-radius:18px;background:linear-gradient(135deg,#d9efed,#e8f5f2);border-color:#a9cfca;box-shadow:0 6px 18px #245f5910}
.forecast,.phone-preview .forecast{row-gap:10px}
.forecast>.ui-icon{align-self:center;margin-top:0}
.forecast #nextPeriod,.phone-preview .forecast #nextPeriod{font-size:20px;line-height:1.2;letter-spacing:-.4px}
.forecast #countdown,.phone-preview .forecast #countdown{font-size:20px;font-weight:600;padding:8px 9px;border-radius:11px;letter-spacing:0}
.forecast #estimateHint,.phone-preview .forecast #estimateHint{justify-self:stretch;width:100%;padding:5px 7px;font-size:14px;line-height:1.5;background:#c5e5d9;border-color:#a4cebd;color:#2d6350}
@media(max-width:480px){.list-summary,.phone-preview .list-summary{padding:18px 13px}.forecast #nextPeriod,.phone-preview .forecast #nextPeriod,.forecast #countdown,.phone-preview .forecast #countdown{font-size:19px}}
@media(max-width:359px){.list-summary,.phone-preview .list-summary{padding:16px 10px}.forecast,.phone-preview .forecast{grid-template-columns:24px minmax(0,1fr) auto;column-gap:8px}.forecast>.ui-icon{width:24px;height:24px}.forecast #nextPeriod,.phone-preview .forecast #nextPeriod{font-size:18px}.forecast #countdown,.phone-preview .forecast #countdown{font-size:17px;padding:7px}}
@container(max-width:310px){.forecast #estimateHint,.phone-preview .forecast #estimateHint{font-size:12.5px}}
html[lang=uk] .forecast #nextPeriod{font-size:18px}html[lang=uk] .forecast #countdown{font-size:17px}

.organized-settings .settings-notes{margin-top:14px;border-top:1px solid #dce9e9}.organized-settings .settings-notes>summary{font-size:14px;font-weight:500;padding:14px 0;color:#627e86}.organized-settings .settings-notes>summary::after{font-size:18px}.organized-settings .settings-notes p{margin:0 0 12px}
/* Paused sync: neutral comparison, no preselected winner. */
.sync-conflict-notice{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:18px;border:1px solid #ccbddd;border-radius:18px;background:#f3edf8;color:#59426f;margin:12px 0 22px}
.sync-conflict-notice[hidden],.sync-conflicts[hidden]{display:none}
.sync-conflict-notice p{margin:0;font-size:1rem;line-height:1.5}.sync-conflict-notice button{flex-shrink:0;margin:0}
.sync-conflicts{border-top:1px solid #d7cbe1;margin-top:24px;padding-top:22px;scroll-margin-top:100px}
.sync-conflicts h3{font-size:1.2rem;line-height:1.4;margin:0 0 12px}.sync-conflicts>p{font-size:.9375rem;line-height:1.65;color:#587079}
.sync-conflicts fieldset{min-width:0;border:1px solid #cbdce0;border-radius:16px;padding:16px;margin:22px 0}.sync-conflicts legend{font-weight:650;font-size:1rem;padding:0 8px}
.sync-conflict-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sync-conflict-choice{min-width:0;border:1px solid #cbdce0;border-radius:12px;padding:14px;background:#f8fbfb}.sync-conflict-choice:has(input:checked){background:#e2f2ed;border-color:#3c8878}
.sync-conflict-choice>label{display:flex;align-items:center;gap:9px;margin:0 0 12px;cursor:pointer}#syncSection .sync-conflict-choice input[type=radio]{width:21px;height:21px;flex:0 0 21px;margin:0}.sync-conflict-choice strong{font-size:1rem}
.sync-conflict-choice p,.sync-conflict-choice summary{font-size:.9375rem;line-height:1.6;margin:8px 0}.sync-conflict-choice summary{cursor:pointer;font-weight:600}.sync-conflict-note{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;background:white;padding:10px;border-radius:8px}
.sync-conflicts>button{margin:8px 8px 0 0}.sync-conflicts button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:600px){.sync-conflict-pair{grid-template-columns:1fr}.sync-conflict-notice{align-items:flex-start;flex-direction:column}.sync-conflicts fieldset{padding:12px}.sync-conflicts>button{width:100%;margin-right:0}}

.import-result{margin:18px 0;padding:16px;border:1px solid #b9d8cf;border-radius:14px;background:#edf7f2;scroll-margin-block:90px 20px}#importResult #importSummary{margin:0;font-size:1rem;line-height:1.55;overflow-wrap:anywhere}#importResult #confirmImport{margin-top:14px}.import-paste{margin-top:20px;border-top:1px solid #d6e1e2;padding-top:16px}.import-paste>summary{font-size:1rem;cursor:pointer;line-height:1.5}

/* Recorded duration matches the metadata cards, with a distinct soft rose tone. */
.period-row .period-content>.period-duration{grid-column:1/-1;display:flex;align-items:center;gap:7px;min-width:0;box-sizing:border-box;padding:5px 7px;border:1px solid #e8cdd0;border-radius:9px;background:#fbf0f1;color:#874b54;font-size:14px;line-height:1.5;text-align:left}
.period-duration>.ui-icon{width:17px;height:17px;min-width:17px;flex-shrink:0;filter:invert(34%) sepia(18%) saturate(1166%) hue-rotate(300deg)}
.period-duration>span{min-width:0;overflow-wrap:anywhere}
@container(max-width:310px){.period-row .period-content>.period-duration{font-size:12.5px;padding:5px 4px;gap:5px}.period-duration>.ui-icon{width:15px;height:15px;min-width:15px}}
/* Reminder controls share the calm mint settings surface and native accessible inputs. */
.reminder-schedule{min-width:0;margin:0 0 16px;padding:14px;border:1px solid #c7e0da;border-radius:16px;background:#eaf5f1}
.reminder-schedule legend{padding:0 6px;font-size:16px;font-weight:650;color:#24535a}
.reminder-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.8fr);gap:12px}
.reminder-fields label{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-width:0;margin:0;font-size:14px;line-height:1.4}
.reminder-fields input,.reminder-fields select{width:100%;min-width:0;min-height:48px;margin:0;padding:10px;font:inherit;font-size:16px;border:1px solid #c7dcd8;border-radius:12px;background:#fff;color:#214e59;box-sizing:border-box}
.reminder-schedule small{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:#527278}
.reminder-schedule:disabled{opacity:.65}
@media(max-width:380px){.reminder-fields{grid-template-columns:minmax(0,1fr)}}
#onlineBackupVersion{width:100%;max-width:100%;min-height:48px;margin:8px 0;padding:10px;font:inherit;font-size:16px;border:1px solid #c7dcd8;border-radius:12px;background:#fff;color:#214e59;box-sizing:border-box}
#settings #remoteBackupSection{padding-bottom:18px!important;margin-bottom:18px!important;border-bottom:1px solid #d8e9e5}
/* Notification choices: compact cards with accessible native checkbox switches. */
#pushSection .push-option{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0;padding:13px 14px;min-height:58px;border:1px solid #cfe2df;border-radius:14px;background:#fff;font-size:16px;font-weight:600;line-height:1.4;color:#244d57;cursor:pointer}
#pushSection .push-option input{appearance:none;-webkit-appearance:none;order:1;position:relative;flex:0 0 44px;width:44px;height:26px;margin:0;border:1px solid #8ca6ab;border-radius:20px;background:#d7e2e3;cursor:pointer}
#pushSection .push-option input::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #163c4933}
#pushSection .push-option input:checked{background:#247f8d;border-color:#247f8d}
#pushSection .push-option input:checked::before{transform:translateX(18px)}
#pushSection .push-option input:focus-visible{outline:3px solid #247f8d;outline-offset:4px}
#pushSection .push-option:has(input:disabled){opacity:.6;cursor:default}
#pushSection .reminder-schedule{margin:14px 0;padding:12px;background:#e5f2ee;border-color:#c1ddd4;border-radius:14px}
#pushSection .reminder-schedule legend{font-size:15px}
#pushSection .reminder-fields{gap:10px}
#pushSection .reminder-fields label{font-size:14px;line-height:1.4}
#pushSection .reminder-schedule small{font-size:13px;line-height:1.5;margin-top:8px}
#pushSection #testPush,#pushSection #enablePush{width:100%;min-height:46px;margin-top:8px;padding:11px 12px;font-size:15px;border-radius:12px;line-height:1.4}
#pushSection #pushStatus:not(:empty){margin:12px 0 0;padding:10px 12px;background:#e6f2ef;border-radius:12px;color:#365f5b;font-size:14px;line-height:1.5}
#pushSection .settings-notes{margin-top:14px;border-top:1px solid #d2e2df}
#pushSection .settings-notes>summary{padding:13px 0;font-size:14px;line-height:1.5;color:#476a71}
#pushSection .settings-notes p.fine{margin:0 0 12px;font-size:14px;line-height:1.6}
@media(max-width:430px){#pushSection .reminder-fields{grid-template-columns:minmax(0,1fr)}#pushSection .reminder-fields label{gap:5px}}
@media(forced-colors:active){#pushSection .push-option input{appearance:auto;width:26px;flex-basis:26px}#pushSection .push-option input::before{display:none}}