/* Shared application components. Colours remain independent from account data. */
:root{--ui-bg:#f2f5fa;--ui-soft:#f5f7fb;--ui-line:#e1e7f0;--ui-radius:20px;--brand:#285bd0;--brand-light:#edf2ff;--brand-border:#c9d7fb;--ui-shadow:0 6px 24px rgb(30 54 93 / .035)}
html.dark{--ui-bg:#101720;--ui-surface:#1a2431;--ui-soft:#202e3e;--ui-line:#324154;--ui-text:#eef3fa;--ui-muted:#b2c0d2;--brand:#aac6ff;--brand-light:#253b5b;--brand-border:#46648e;--ui-shadow:none}
#appScreen>header{padding-block:18px;align-items:center}
#addressHeaderTrigger{gap:12px!important}#addressHeaderTrigger .w-12{background:var(--brand-light)!important;color:var(--brand)!important}
#addressHeaderTrigger .w-12 i{font-size:18px}
#quickActionsBtn{background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;color:var(--ui-muted)!important;box-shadow:none!important;border-radius:14px!important}
.dark #quickActionsBtn{color:var(--ui-text)!important}
.page-heading{margin:10px 0 24px}.page-heading h2{font-size:1.625rem;letter-spacing:-.025em!important}.page-heading p{font-size:.875rem}
.sync-dot.pending{background:var(--warning)}.sync-dot.error,.sync-dot.conflict{background:var(--danger)}
.welcome-steps{display:grid;gap:10px;text-align:left;margin:0 0 22px;padding:0;list-style:none}.welcome-steps li{display:flex;align-items:center;gap:12px;color:var(--ui-text);font-size:.875rem;font-weight:600}.welcome-steps span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:var(--brand-light);color:var(--brand);font-size:.8125rem}
.premium-card,.monthly-tasks{box-shadow:var(--ui-shadow)!important}
#bottomNav{padding-top:10px!important}#bottomNav .nav-btn{transition:background .16s ease,color .16s ease;border-radius:14px;gap:5px}#bottomNav .nav-btn.text-brand{background:var(--brand-light)}
#bottomNav .nav-btn i{font-size:19px}#bottomNav .nav-btn span:not(#debtBadge){font-weight:600}
.overview-workspace{display:grid;gap:20px;align-items:start}.overview-workspace>*{min-width:0}.dashboard-summary,.monthly-tasks,.task-copy{min-width:0}
#tabDashboard .dashboard-summary{position:relative;overflow:hidden;background:linear-gradient(120deg,#204d90,#18376a)!important;border:1px solid #355d98;border-radius:24px;padding:24px;box-shadow:0 12px 28px rgb(25 57 105 / .12)}
html.dark #tabDashboard .dashboard-summary{background:linear-gradient(120deg,#253f65,#1c3153)!important;border-color:#3c577d;box-shadow:none}
.dashboard-summary .summary-topline{padding-right:38px;min-height:36px}
.dashboard-summary .summary-label,.dashboard-summary .month-status{color:#d6e3f7!important}
.summary-symbol{position:absolute;right:24px;top:24px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#ffffff15;color:#d6e3f7}
.dashboard-summary #dashBalance{font-size:clamp(2.25rem,8vw,3.25rem);letter-spacing:-.04em!important;color:#fff;margin:8px 0 24px;line-height:1.2}
.dashboard-summary .summary-split{border-color:#ffffff26;padding-top:18px;margin-bottom:24px}
.dashboard-summary .summary-split p:last-child{color:#fff!important;font-size:1.125rem}
.dashboard-summary #dashAddBtn,html.dark .dashboard-summary #dashAddBtn{background:#fff!important;color:#1e4787!important;border:1px solid #fff!important;min-height:48px;font-size:.9375rem;border-radius:13px!important}
.dashboard-action-hint{color:#d6e3f7;font-size:.8125rem;margin-top:12px;text-align:center}
.monthly-tasks{padding:22px;border-radius:24px}.section-heading{margin-bottom:4px}.section-heading h3{letter-spacing:-.015em!important}.section-heading p{margin-top:3px}
.task-count{color:var(--brand);font-weight:600;font-size:.8125rem;padding:5px 9px;border-radius:8px}
.month-task{padding:18px 0;gap:12px}.task-copy h4{font-size:.9375rem}.task-copy p{font-size:.8125rem;line-height:1.6}
.task-action{border:0;background:var(--brand-light);border-radius:9px;font-size:.8125rem;min-height:44px;padding:9px 12px}
.transfer-email-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:8px 8px 8px 0;background:var(--brand)!important;border-color:var(--brand)!important;color:#fff!important}
.task-icon{background:var(--ui-soft);border-radius:12px}.task-done .task-icon{background:color-mix(in srgb,var(--ui-success) 12%,var(--ui-surface));color:var(--ui-success)}
.monthly-transfers summary .month-task{grid-template-columns:38px minmax(0,1fr) 14px}.monthly-transfers summary .fa-chevron-down{grid-column:3;grid-row:1;font-size:.6875rem;color:var(--ui-muted)}
.overview-link{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border:1px solid var(--ui-line);border-radius:16px;color:var(--ui-text);background:var(--ui-surface);font-size:.9375rem;font-weight:600}
.overview-link span{display:flex;align-items:center;gap:12px}.overview-link i{color:var(--brand)}.overview-link>i{font-size:.875rem}
#dashDebtCard{margin-top:16px!important}#dashDebtCard .flex{gap:12px;flex-wrap:wrap}
#tabCalc>.entry-header{background:var(--ui-surface)!important;padding:22px!important}.entry-header #heroTotal{letter-spacing:-.025em!important;color:var(--ui-text)!important}
.entry-header #winterCheckboxWrapper{background:var(--ui-soft)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
.entry-more summary{min-height:44px;display:flex;align-items:center;gap:8px}.entry-more summary::before{content:'+';font-size:1.25rem}.entry-more[open] summary::before{content:'−'}
.meter-card{border-radius:20px!important}.meter-card>.flex:first-child .w-11{width:40px;height:40px;border-radius:12px!important}
.service-water{--service-color:#347bb6}.service-hotwater{--service-color:#b04e6d}.service-electro{--service-color:#956408}.service-gas{--service-color:#bd622d}
html.dark .service-water{--service-color:#8bc6fb}html.dark .service-hotwater{--service-color:#eda8bf}html.dark .service-electro{--service-color:#efd38b}html.dark .service-gas{--service-color:#f3b184}
.meter-card>.flex:first-child .w-11{color:var(--service-color,var(--brand))!important;background:color-mix(in srgb,var(--service-color,var(--brand)) 10%,var(--ui-surface))!important}
#utilityForm .meter-readings{background:var(--ui-soft)!important;padding:14px!important;gap:14px!important}.meter-readings input{background:var(--ui-surface)!important;font-weight:600!important;font-size:1.25rem!important;min-height:52px}
.meter-readings label{font-weight:500!important}.meter-rate{font-size:.8125rem}.entry-review{border-color:var(--brand-border);border-radius:20px}.entry-review .section-heading{margin-bottom:12px}
#tabSettings{max-width:800px}.settings-menu{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:22px;overflow:hidden;box-shadow:var(--ui-shadow)}
.settings-link{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:14px;text-align:left;padding:20px;color:var(--ui-text);transition:background .15s}
.settings-link+.settings-link{border-top:1px solid var(--ui-line)}.settings-link:hover{background:var(--ui-soft)}.settings-link strong{display:block;font-weight:600;font-size:1rem}.settings-link small{display:block;font-size:.8125rem;color:var(--ui-muted);margin-top:4px}.settings-link>i{font-size:.75rem;color:var(--ui-muted)}
.settings-icon{width:44px;height:44px;display:grid;place-items:center;background:var(--brand-light);color:var(--brand);border-radius:13px;font-size:18px}
.settings-back{display:flex;align-items:center;gap:10px;color:var(--brand);font-size:.875rem;margin-bottom:12px;padding:0 4px}
.settings-panel-heading{margin:4px 0 22px}.settings-panel-heading h3{font-size:1.5rem;letter-spacing:-.025em!important}.settings-panel-heading h3:focus{outline:none}.settings-panel-heading p{font-size:.875rem;color:var(--ui-muted);margin-top:4px}
.settings-panel-content{display:grid;gap:16px}.settings-panel-content>div{min-width:0}.settings-panel-content>.premium-card{margin:0!important}
.settings-panel-content>.p-4{padding:20px!important;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:20px}
.data-health-card{padding:22px!important}.data-health-heading{display:flex;align-items:center;gap:14px}.data-health-heading h4{font-size:1rem;font-weight:700}.data-health-heading p{font-size:.8125rem;color:var(--ui-muted);margin-top:3px;line-height:1.5}.data-health-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ui-line);border:1px solid var(--ui-line);border-radius:14px;overflow:hidden;margin:20px 0}.data-health-grid>div{background:var(--ui-surface);padding:14px}.data-health-grid dt{font-size:.75rem;color:var(--ui-muted);margin-bottom:5px}.data-health-grid dd{font-size:.8125rem;font-weight:600;color:var(--ui-text);overflow-wrap:anywhere}.data-sync-button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
.settings-panel-content #moreAnalyticsBtn,.settings-panel-content #shareAddressBtn,.settings-panel-content #yearReportBtn{min-height:64px;color:var(--ui-text);font-size:1rem;font-weight:600}
#saveSettingsBtn{margin-top:20px!important}.theme-controls{padding:0!important;background:transparent!important;border:0!important}.theme-controls>div{gap:4px;padding:4px!important;flex-wrap:wrap}
.theme-controls button{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px!important;font-size:.8125rem!important;min-width:80px}.theme-controls button span{font-size:.8125rem}
.settings-panel .grid-cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.settings-panel details>summary{min-height:56px}.settings-panel #displayNameInput{min-width:0}.settings-panel #familyRoleHint{line-height:1.6}
#tabSettings #aiFabBtn{background:var(--ui-surface)!important;border-color:var(--ui-line)!important}
.swipe-card{overflow:hidden;touch-action:pan-y;box-shadow:var(--ui-shadow)!important}.swipe-card .swipe-bg-left,.swipe-card .swipe-bg-right{display:none!important}
.swipe-card.swipe-actions-visible{outline:2px solid var(--brand-border);outline-offset:2px}.swipe-card.swipe-actions-visible .rec-del{color:var(--ui-danger)!important}
.action-dialog{width:min(440px,calc(100% - 32px));padding:28px;border:1px solid var(--ui-line);border-radius:24px;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 24px 80px #0003;margin:auto}
.preauth-feedback-open{width:100%;margin-top:14px;min-height:54px;padding:10px 14px;display:grid;grid-template-columns:34px minmax(0,1fr) 12px;align-items:center;gap:10px;border:1px solid var(--ui-line);border-radius:16px;background:color-mix(in srgb,var(--ui-surface) 78%,transparent);color:var(--ui-text);text-align:left}.preauth-feedback-open>i:first-child{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--brand-light);color:var(--brand)}.preauth-feedback-open>i:last-child{font-size:.65rem;color:var(--ui-muted)}.preauth-feedback-open strong,.preauth-feedback-open small{display:block}.preauth-feedback-open strong{font-size:.8125rem}.preauth-feedback-open small{margin-top:2px;color:var(--ui-muted);font-size:.6875rem}.preauth-feedback-dialog{max-height:calc(100dvh - 24px);overflow:auto}.preauth-feedback-dialog .dialog-mark{background:var(--brand-light);color:var(--brand)}.preauth-feedback-dialog label{display:block;margin:14px 0 6px;font-size:.8125rem;font-weight:700}.preauth-feedback-dialog label span{font-weight:400;color:var(--ui-muted)}.preauth-feedback-dialog select,.preauth-feedback-dialog input,.preauth-feedback-dialog textarea{width:100%;padding:12px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-soft);color:var(--ui-text);font-size:1rem}.preauth-feedback-dialog textarea{resize:vertical}.preauth-feedback-dialog #preAuthFeedbackStatus{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:.8125rem}.preauth-feedback-dialog #preAuthFeedbackStatus.success{background:var(--ui-success-soft);color:var(--ui-success)}.preauth-feedback-dialog #preAuthFeedbackStatus.error{background:#fff0f1;color:var(--ui-danger)}.preauth-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.action-dialog::backdrop{background:#101b2c80;backdrop-filter:blur(4px)}.action-dialog h2{font-size:1.375rem;margin:16px 0 10px;letter-spacing:-.02em!important}.action-dialog p{font-size:.9375rem;color:var(--ui-muted);line-height:1.65}
.dialog-mark{width:44px;height:44px;display:grid;place-items:center;background:color-mix(in srgb,var(--ui-danger) 10%,var(--ui-surface));color:var(--ui-danger);border-radius:13px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.button-secondary,.button-danger{padding:12px 16px;border-radius:12px;font-size:.9375rem;font-weight:600;min-height:48px}.button-secondary{background:var(--ui-soft);color:var(--ui-text);border:1px solid var(--ui-line)}.button-danger{background:#b42332;color:white}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 70%,white);outline-offset:3px}
#addressModalContent,#aiPanelInner{border-radius:24px 24px 0 0!important}#quickActionsModal>div,#changePassModal>div,#linkAccountModal>div{border-radius:24px!important;box-shadow:var(--ui-shadow)!important;background:var(--ui-surface)!important}
@media(max-width:520px){.monthly-tasks{padding:20px}.month-task{grid-template-columns:34px minmax(0,1fr);gap:10px}.month-task>.task-action{grid-column:2}.settings-link{padding:18px 16px;gap:12px}.page-heading{flex-wrap:wrap}.dashboard-summary .summary-topline{min-height:36px}.action-dialog{padding:24px}.settings-panel-content #displayNameInput+button{padding-inline:12px}.settings-panel-content #displayNameInput{width:100%}.data-health-grid{grid-template-columns:1fr}}
@media(min-width:1000px){.overview-workspace{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px}#tabDashboard .dashboard-summary{padding:28px;position:sticky;top:8px}.summary-symbol{top:28px;right:28px}#bottomNav{padding-top:32px!important}.sidebar-brand{letter-spacing:-.03em;font-size:1.375rem}#tabSettings{max-width:800px;margin-inline:auto}#utilityForm{gap:20px}.entry-review{grid-column:1/-1}.settings-menu{display:grid;grid-template-columns:1fr 1fr}.settings-link{border-top:0!important;border-bottom:1px solid var(--ui-line)}.settings-link:nth-child(odd){border-right:1px solid var(--ui-line)}.settings-link:nth-last-child(-n+2){border-bottom:0}}
@media(prefers-reduced-motion:reduce){#bottomNav .nav-btn,.settings-link{transition:none}}
.settings-menu.hidden,.settings-panel.hidden{display:none!important}
#appScreen>header #quickActionsBtn{background:var(--ui-surface)!important;color:var(--ui-muted)!important;border-color:var(--ui-line)!important}
#budgetRemaining{color:var(--ui-success)!important}
#tabSettings .page-heading.hidden{display:none!important}
#settings-account .w-14,#tabSettings .settings-panel .w-10{background:var(--brand-light)!important;color:var(--brand)!important;box-shadow:none!important;border-radius:14px!important}
/* Reading shortcuts and private provider cards. */
.entry-tools{padding:16px 18px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-surface)}.entry-tools p{font-size:.875rem;font-weight:600;margin-bottom:8px}.entry-tools>div{display:flex;gap:6px 12px;flex-wrap:wrap}.entry-tools button{font-size:.8125rem;color:var(--brand);padding:6px 0;min-height:36px}
.meter-heading{display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;gap:10px;list-style:none;cursor:pointer}.meter-heading::-webkit-details-marker{display:none}.meter-heading>div{min-width:0}.meter-heading .w-11{width:40px;height:40px;flex-shrink:0;border-radius:12px!important;background:color-mix(in srgb,var(--service-color,var(--brand)) 10%,var(--ui-surface))!important;color:var(--service-color,var(--brand))!important;box-shadow:none!important}.meter-heading .text-xl{font-size:1.125rem!important}.meter-heading>div>span{font-size:1rem!important}.meter-entry-status{grid-column:1/3;font-size:.8125rem;color:var(--ui-muted);margin-top:-2px}.meter-entry-status.complete{color:var(--ui-success)}.meter-chevron{grid-column:3;grid-row:1;font-size:.6875rem;color:var(--ui-muted)}.meter-details[open] .meter-chevron{transform:rotate(180deg)}.meter-body{padding-top:16px}.meter-next{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--brand);font-weight:600;font-size:.8125rem;width:100%;padding-top:10px;margin-top:8px;border-top:1px solid var(--ui-line)}
.provider-month{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.provider-month label{font-size:.875rem;color:var(--ui-muted)}.provider-month input{min-width:0;max-width:60%;padding:10px}.provider-note{font-size:.8125rem;color:var(--ui-muted);line-height:1.6;margin:8px 0 16px}.providers-list{display:grid;gap:16px}.provider-card{padding:20px;border:1px solid var(--ui-line);border-radius:20px;background:var(--ui-surface)}.provider-heading{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}.provider-heading h4{font-size:1rem}.provider-heading p{font-size:.875rem;color:var(--ui-muted);overflow-wrap:anywhere;margin-top:2px}.provider-edit{color:var(--brand);font-size:.8125rem;padding:8px 10px;border-radius:9px;background:var(--brand-light)}.provider-account{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 8px;font-size:.875rem}.provider-account span{color:var(--ui-muted)}.provider-account strong{overflow-wrap:anywhere;font-weight:600}.provider-contact,.provider-period{font-size:.8125rem;line-height:1.6;color:var(--ui-muted);overflow-wrap:anywhere;margin:8px 0}.provider-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.provider-actions button,.provider-actions a{min-height:44px;padding:10px 12px;font-size:.8125rem;border:1px solid var(--ui-line);border-radius:10px;color:var(--brand);display:flex;align-items:center;justify-content:center;gap:8px}.provider-actions .provider-primary{background:var(--brand);border-color:var(--brand);color:white}html.dark .provider-actions .provider-primary{color:#14243d}
.provider-dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}.provider-dialog h2{margin-top:0}.provider-dialog label{display:block;font-size:.875rem;font-weight:500;margin:16px 0 6px}.provider-dialog input{width:100%;padding:12px}.provider-dialog #providerError{color:var(--ui-danger);font-size:.8125rem;margin-top:12px}.provider-clear{font-size:.8125rem;color:var(--ui-muted);margin-top:8px}.button-primary{background:var(--brand);color:white;border-radius:12px;padding:12px 16px;min-height:48px;font-weight:600;font-size:.9375rem}html.dark .button-primary{color:#14243d}#providerCopyText{width:100%;padding:12px;margin:12px 0}#providerReminderSettings{margin-top:16px}
.provider-email-address{display:flex;align-items:center;gap:8px;color:var(--brand);font-size:.8125rem;overflow-wrap:anywhere;margin:8px 0}.provider-email-setup{background:var(--brand-light)!important;border-color:var(--brand-border)!important}.provider-actions [disabled]{opacity:.45;cursor:not-allowed}.provider-email-settings{margin-top:16px;padding:12px 14px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-soft)}.provider-email-settings summary{cursor:pointer;color:var(--brand);font-size:.875rem;font-weight:600;min-height:28px}.provider-email-settings p{font-size:.75rem;line-height:1.55;color:var(--ui-muted);margin:8px 0}.provider-email-settings textarea{width:100%;min-height:110px;padding:12px;resize:vertical}.provider-email-settings input,.provider-email-settings textarea,.provider-email-field input,.provider-email-field textarea{border:1px solid var(--ui-line);border-radius:11px;background:var(--ui-surface);color:var(--ui-text);font-size:1rem}.provider-email-dialog{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}.provider-email-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}.provider-email-header h2{margin:0 0 2px}.provider-email-header p{font-size:.8125rem}.provider-email-field{margin-top:16px}.provider-email-field label{display:block;font-size:.8125rem;font-weight:700;margin-bottom:7px}.provider-email-field>div{display:flex;gap:8px}.provider-email-field input{min-width:0;flex:1;padding:11px}.provider-email-field textarea{width:100%;min-height:126px;padding:12px;resize:vertical}.provider-email-field button{color:var(--brand);font-size:.8125rem;font-weight:700;padding:9px 10px;border:1px solid var(--brand-border);background:var(--brand-light);border-radius:10px;min-height:44px}.provider-email-field>button{margin-top:7px}.provider-email-dialog .dialog-actions{display:flex;gap:8px;margin-top:18px}.provider-email-dialog .dialog-actions>*{flex:1;display:grid;place-items:center;text-align:center}.provider-email-footnote{font-size:.75rem!important;margin-top:16px}.provider-email-notice{padding:10px 12px;border-radius:10px;background:#fff3d6;color:#715214!important;font-size:.8125rem!important}.provider-email-dialog [aria-disabled="true"]{opacity:.5;pointer-events:none}@media(max-width:420px){.provider-email-field>div{flex-wrap:wrap}.provider-email-field>div>button{flex:1}.provider-email-dialog .dialog-actions{flex-direction:column-reverse}}
@media(max-width:420px){.provider-heading{grid-template-columns:36px minmax(0,1fr) auto;gap:8px}.provider-heading .settings-icon{width:36px;height:36px}.provider-card{padding:16px}.provider-account{flex-wrap:wrap}.provider-month{flex-wrap:wrap}.provider-month input{max-width:100%;width:100%}.provider-actions button,.provider-actions a{flex:1 1 auto}}
@media(min-width:1000px){.settings-link:last-child{border-bottom:0!important}.settings-link:nth-last-child(2){border-bottom:1px solid var(--ui-line)}}
.entry-period{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.entry-period>div{min-width:0;flex:1 1 11rem}.entry-period #monthInput{width:100%}.entry-period #winterCheckboxWrapper{width:auto!important;min-height:46px;flex-shrink:0}
.entry-charge-preview{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}.entry-charge-preview>p{font-size:.875rem;color:var(--ui-muted)}.entry-header .entry-charge-preview #heroTotal{font-size:1.375rem!important}.entry-header .entry-tools{border:0;border-top:1px solid var(--ui-line);border-radius:0;box-shadow:none;padding:12px 0 0;margin-top:16px}.entry-header .entry-tools p{font-size:.8125rem;margin-bottom:3px}.entry-header .entry-tools>div{gap:4px 12px}.entry-header .entry-tools button{min-height:36px}
.entry-extra{padding:4px 18px 16px;margin-bottom:24px}.entry-extra>summary{padding:12px 0 0;font-size:.875rem;min-height:44px}.entry-extra #smartForecast{color:var(--ui-text)!important}
.provider-email-field>div{display:grid;grid-template-columns:minmax(0,1fr)}
.provider-email-field>div>input,.provider-email-field>div>textarea{width:100%;min-width:0}
.provider-email-field>div>button{justify-self:end}
.provider-email-field #providerEmailSubjectText{min-height:66px;resize:vertical;line-height:1.45}
.provider-email-dialog .provider-email-header{margin-bottom:12px}
.provider-email-dialog .provider-email-field{margin-top:12px}
.provider-email-dialog #providerEmailBodyText{min-height:100px}
.provider-email-dialog .provider-email-footnote{margin-top:12px}
.provider-form-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}.provider-form-heading h2{margin:0 0 2px}.provider-form-heading p{font-size:.8125rem;margin:0}.provider-form-section{padding:16px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-soft);margin-top:12px}.provider-form-section h3{font-size:.9375rem;font-weight:750;margin:0 0 3px}.provider-form-section>p{font-size:.75rem!important;line-height:1.5;margin:0 0 10px}.provider-form-section label{font-weight:650;margin-top:12px}.provider-form-section input{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:11px;color:var(--ui-text)}.provider-email-settings summary{display:flex;align-items:center;justify-content:space-between;gap:8px}.provider-email-settings summary span{font-size:.6875rem;color:var(--ui-muted);font-weight:500}.provider-mail-destination{padding:14px;border:1px solid var(--brand-border);border-radius:14px;background:var(--brand-light);margin:14px 0}.provider-mail-destination label{display:block;font-size:.8125rem;font-weight:750;margin-bottom:8px}.provider-mail-destination select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:10px;background:var(--ui-surface);color:var(--ui-text);font-size:.875rem;font-weight:650}.provider-mail-destination p{font-size:.75rem!important;line-height:1.5;margin:8px 0 0}.provider-email-field{padding:12px 14px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-soft)}.provider-email-field>div>button[data-copied="true"]{color:var(--ui-success);border-color:var(--ui-success);background:color-mix(in srgb,var(--ui-success) 10%,var(--ui-surface))}.provider-copy-status{padding:10px 12px;margin-top:12px!important;border-radius:10px;background:color-mix(in srgb,var(--ui-success) 12%,var(--ui-surface));color:var(--ui-success)!important;font-size:.8125rem!important;font-weight:700}.provider-email-dialog #providerCopyFullMail.hidden,.provider-email-dialog #providerOpenMail.hidden{display:none!important}

/* The next useful action stays legible without adding another dashboard card. */
.dashboard-next-meta{display:inline-flex;max-width:100%;align-items:center;padding:7px 10px;margin:0 0 12px;border-radius:999px;background:#ffffff20;color:#f0f5ff;font-size:.875rem;font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.transfer-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.transfer-item>div{min-width:0}
.transfer-stage{margin-top:5px!important;color:var(--brand)!important;font-size:.875rem!important;font-weight:650}
.transfer-stage.is-done{color:var(--ui-success)!important}
.reminder-next{padding:16px;border:1px solid var(--brand-border);border-radius:16px;background:var(--brand-light)}
.reminder-next span,.reminder-next small{display:block;color:var(--ui-muted);font-size:.875rem;line-height:1.45}
.reminder-next strong{display:block;margin-top:5px;color:var(--ui-text);font-size:1.125rem;line-height:1.3}
.reminder-next p{margin:5px 0 9px;color:var(--ui-text);font-size:.875rem}
.reminder-test-status{padding:10px 12px;border-radius:11px;background:var(--ui-soft);color:var(--ui-text);font-size:.875rem;line-height:1.45}
#testPushBtn,#testTelegramBtn{min-height:44px}
#pushStatus,.telegram-setup-note,.provider-email-footnote,.provider-form-section>p,.provider-mail-destination p{font-size:.875rem!important;line-height:1.5!important}
@media(max-width:420px){.transfer-item{grid-template-columns:1fr}.transfer-item .task-action{justify-self:start}}
.google-auth-help{padding:12px 14px;border-radius:14px;background:var(--ui-soft);border:1px solid var(--ui-line);font-size:.8125rem;line-height:1.5;color:var(--ui-muted)}
.google-auth-help p{margin:0 0 8px}
.google-auth-help button{min-height:44px;color:var(--brand);font-size:.8125rem;font-weight:700;text-decoration:underline;text-underline-offset:3px}
#googleAuthBtn:disabled{opacity:.7;cursor:wait}
.telegram-setup{padding:16px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-soft)}.telegram-setup-heading{display:flex;align-items:center;gap:10px}.telegram-setup-heading strong{font-size:.9375rem}.telegram-setup-heading p,.telegram-setup-note{font-size:.75rem;line-height:1.5;color:var(--ui-muted)}.telegram-setup-heading p{margin:2px 0 0}.telegram-setup #telegramStatus{font-size:.8125rem;line-height:1.5;margin:12px 0}.telegram-setup button,.telegram-setup a{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:8px}.telegram-setup .hidden{display:none!important}.telegram-setup-note{margin:12px 0 0}

/* Reminder center: schedule first, delivery channels second, service rules last. */
#settings-reminders .premium-card{border-radius:24px!important}
.reminder-workspace{display:grid;gap:0;background:var(--ui-surface)}
.reminder-schedule-card{padding:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 9%,var(--ui-surface)),var(--ui-surface) 68%)}
.reminder-section{padding:20px;border-top:1px solid var(--ui-line)}
.reminder-section-heading,.reminder-channel-heading{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px}
.reminder-section-heading h4,.reminder-group-title h4{margin:0;color:var(--ui-text);font-size:1rem;font-weight:750;letter-spacing:-.015em}
.reminder-section-heading p,.reminder-channel-heading p{margin:3px 0 0;color:var(--ui-muted);font-size:.8125rem;line-height:1.4}
.reminder-time-field{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 8px;padding:14px 16px;border:1px solid var(--brand-border);border-radius:16px;background:var(--ui-surface);box-shadow:0 10px 28px -24px rgba(0,73,180,.8)}
.reminder-time-field span,.reminder-time-field strong,.reminder-time-field small{display:block}.reminder-time-field strong{font-size:.9375rem;color:var(--ui-text)}.reminder-time-field small{margin-top:3px;color:var(--ui-muted);font-size:.75rem}
.reminder-time-field input[type=time]{width:116px;min-height:48px;padding:8px 10px!important;border:1px solid var(--brand-border)!important;border-radius:12px!important;background:var(--brand-light)!important;color:var(--brand);font-size:1.125rem;font-weight:750;text-align:center;font-variant-numeric:tabular-nums}
.reminder-time-hint{display:flex;align-items:center;gap:7px;margin:0 2px 16px;color:var(--ui-muted);font-size:.75rem}.reminder-time-hint i{color:var(--brand)}
.reminder-next{position:relative;overflow:hidden;padding:18px;border:1px solid var(--brand-border);border-radius:18px;background:linear-gradient(145deg,var(--brand),#5568dc);box-shadow:0 20px 42px -30px rgba(0,73,180,.85)}
.reminder-next::after{content:"";position:absolute;width:110px;height:110px;right:-36px;top:-50px;border-radius:50%;background:rgba(255,255,255,.12)}
.reminder-next span,.reminder-next small{position:relative;z-index:1;display:block;color:rgba(255,255,255,.76);font-size:.8125rem;line-height:1.45}.reminder-next strong{position:relative;z-index:1;display:block;margin-top:6px;color:white;font-size:1.25rem;line-height:1.3}.reminder-next p{position:relative;z-index:1;margin:5px 0 10px;color:white;font-size:.9375rem;font-weight:650}
.reminder-group-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.reminder-group-title span{display:block;margin-bottom:4px;color:var(--brand);font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.reminder-group-title>small{color:var(--ui-muted);font-size:.75rem;text-align:right}
.reminder-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reminder-channel-card,.telegram-setup.reminder-channel-card{min-width:0;padding:16px;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-soft)}
.reminder-channel-heading strong{display:block;color:var(--ui-text);font-size:.9375rem}.reminder-channel-heading .settings-icon{width:40px;height:40px;font-size:16px}.reminder-channel-heading{grid-template-columns:40px minmax(0,1fr) 10px;gap:10px}.channel-dot{width:9px;height:9px;border-radius:50%;background:var(--ui-line);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-line) 45%,transparent)}.channel-dot.is-connected{background:var(--ui-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-success) 16%,transparent)}.channel-dot.is-error{background:var(--ui-danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-danger) 14%,transparent)}
.reminder-channel-status,.telegram-setup #telegramStatus{min-height:42px;margin:13px 0 0;color:var(--ui-muted);font-size:.8125rem;line-height:1.5;text-align:left}
.reminder-channel-actions{display:grid;gap:8px;margin-top:12px}.reminder-channel-actions button,.reminder-channel-actions a,.telegram-setup .reminder-channel-actions button,.telegram-setup .reminder-channel-actions a{width:100%;min-height:44px;margin:0;display:flex;align-items:center;justify-content:center}
.reminder-text-action{min-height:40px!important;color:var(--ui-muted);font-size:.8125rem;font-weight:650}.reminder-test-status{margin-top:10px;padding:10px 12px;border:1px solid var(--ui-line);border-radius:11px;background:var(--ui-surface);color:var(--ui-text);font-size:.8125rem;line-height:1.45}.telegram-setup-note{margin:11px 0 0;font-size:.75rem!important;line-height:1.5;color:var(--ui-muted)}
.reminder-rules-note{display:flex;align-items:flex-start;gap:9px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--ui-success) 9%,var(--ui-surface));color:var(--ui-muted);font-size:.8125rem;line-height:1.5}.reminder-rules-note i{margin-top:3px;color:var(--ui-success)}
.reminder-list-wrap{display:grid;gap:10px}.reminder-card{padding:14px;border-radius:16px;background:var(--ui-soft)}.reminder-card:focus-within{border-color:var(--brand-border);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 9%,transparent)}
.reminder-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border:1px dashed var(--brand-border);border-radius:14px;background:var(--brand-light);color:var(--brand);font-size:.875rem;font-weight:750}
@media(max-width:640px){.reminder-channel-grid{grid-template-columns:1fr}.reminder-schedule-card,.reminder-section{padding:16px}.reminder-time-field{padding:13px 14px}.reminder-time-field input[type=time]{width:110px}.reminder-group-title{align-items:flex-start}.reminder-channel-status,.telegram-setup #telegramStatus{min-height:0}}
@media(max-width:360px){.reminder-time-field{align-items:flex-start;flex-direction:column}.reminder-time-field input[type=time]{width:100%}}

/* Address switcher and archive */
.address-modal-heading{display:flex;align-items:center;gap:12px;margin-bottom:20px}.address-modal-heading .settings-icon{width:44px;height:44px;flex:0 0 44px}.address-modal-heading h3{margin:0;color:var(--ui-text);font-size:1.35rem;line-height:1.2}.address-modal-heading p{margin:3px 0 0;color:var(--ui-muted);font-size:.8125rem;line-height:1.4}
.address-section+.address-section{margin-top:18px}.address-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 8px}.address-section-title span{color:var(--ui-text);font-size:.75rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase}.address-section-title small{color:var(--ui-muted);font-size:.6875rem}.address-card-list{display:grid;gap:9px}
.address-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:66px;padding:11px 12px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-soft);color:var(--ui-text);transition:border-color .18s,background .18s,transform .18s}.address-card[role=button]{cursor:pointer}.address-card[role=button]:active{transform:scale(.985)}.address-card:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 22%,transparent);outline-offset:2px}.address-card.is-current{border-color:var(--brand-border);background:var(--brand-light)}
.address-card-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--ui-surface);color:var(--ui-muted)}.address-card.is-current .address-card-icon{background:var(--brand);color:white}.address-card-copy{min-width:0}.address-card-copy strong,.address-card-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.address-card-copy strong{font-size:.9375rem}.address-card-copy small{margin-top:3px;color:var(--ui-muted);font-size:.6875rem}.address-card-actions{display:flex;gap:5px}.address-card-actions button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--ui-line);border-radius:11px;background:var(--ui-surface);color:var(--ui-muted)}.address-card-actions button:hover{border-color:var(--brand-border);color:var(--brand)}.address-card-actions button:disabled{opacity:.34;cursor:not-allowed}.address-card-actions .addr-del{color:var(--ui-danger)}
.address-archive-section{padding-top:2px}.address-card.is-archived{background:color-mix(in srgb,var(--ui-soft) 70%,transparent);opacity:.88}.address-card.is-archived .address-card-icon{background:color-mix(in srgb,var(--ui-muted) 10%,var(--ui-surface));color:var(--ui-muted)}.address-card.is-archived .addr-restore{color:var(--brand)}
.address-add-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-bottom:8px;border:1px dashed var(--brand-border);border-radius:16px;background:var(--brand-light);color:var(--brand);font-size:.9rem;font-weight:750}.address-add-button:hover{background:var(--brand-border)}
@media(max-width:360px){.address-card{grid-template-columns:34px minmax(0,1fr) auto;padding-inline:9px;gap:8px}.address-card-icon{width:34px;height:34px}.address-card-actions button{width:35px;height:35px}}

/* Calm comfort layer: soft color cues, clear hierarchy and restrained depth. */
#appScreen>header{background:color-mix(in srgb,var(--ui-bg) 90%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ui-line) 72%,transparent)}
.brand-logo--header{box-shadow:0 7px 18px rgb(61 82 128 / .13)!important}
#quickActionsBtn{background:var(--ui-surface)!important;color:var(--brand)!important;border-color:var(--ui-line)!important}
.dashboard-summary{background:linear-gradient(145deg,#607fc0 0%,#526fab 100%)!important;color:#fff!important;border:0!important;box-shadow:0 18px 42px rgb(67 88 136 / .19)!important}
.dashboard-summary .summary-label,.dashboard-summary .month-status,.dashboard-summary .dashboard-action-hint{color:rgb(255 255 255 / .78)!important}
.dashboard-summary #dashBalance,.dashboard-summary .summary-split p:last-child{color:#fff!important}
.dashboard-summary .summary-split{border-color:rgb(255 255 255 / .22)}
.dashboard-summary .dashboard-next-meta{background:rgb(255 255 255 / .13);color:#fff}
.dashboard-summary #dashAddBtn{background:#fff!important;color:#4e6ba8!important;box-shadow:0 8px 20px rgb(40 57 96 / .16)!important}
.summary-symbol{background:rgb(255 255 255 / .12)!important;color:rgb(255 255 255 / .88)!important}
.monthly-tasks{box-shadow:0 10px 30px rgb(53 65 91 / .045)}
.month-progress{height:7px;margin:2px 0 7px;overflow:hidden;border-radius:999px;background:var(--ui-soft)}
.month-progress>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7fa8d4,#7db29c);transition:width .45s var(--motion-standard,cubic-bezier(.32,.72,0,1))}
.month-progress-text{margin:0 0 3px;color:var(--ui-muted);font-size:.8125rem;line-height:1.45}
.task-icon{background:var(--brand-light);color:var(--brand)}.task-done .task-icon{background:var(--ui-success-soft);color:var(--ui-success)}
.task-action{background:var(--brand-light);border-color:transparent;color:var(--brand)}
.task-action:hover{background:var(--brand-border)}
.service-water{--service-color:var(--service-water)}.service-hotwater{--service-color:var(--service-hot-water)}.service-electro{--service-color:var(--service-electricity)}.service-gas{--service-color:var(--service-gas)}
.meter-card{border-left:3px solid color-mix(in srgb,var(--service-color,var(--brand)) 62%,var(--ui-line))!important}
.meter-heading .w-11{background:color-mix(in srgb,var(--service-color,var(--brand)) 13%,var(--ui-surface))!important;color:var(--service-color,var(--brand))!important}
.settings-icon{background:var(--brand-light)!important;color:var(--brand)!important}
.settings-link:hover{background:color-mix(in srgb,var(--brand-light) 48%,var(--ui-surface))}
.provider-card{box-shadow:0 7px 22px rgb(53 65 91 / .035)}
.provider-delivery-confirm{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:13px 14px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-success-soft)}
.provider-delivery-confirm>span{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ui-success)}
.provider-delivery-confirm>span>span{display:grid;min-width:0}.provider-delivery-confirm strong{color:var(--ui-text);font-size:.8125rem}.provider-delivery-confirm small{color:var(--ui-muted);font-size:.75rem;overflow-wrap:anywhere}
.provider-delivery-confirm button{flex-shrink:0;min-height:40px;padding:8px 10px;border-radius:10px;background:var(--ui-surface);border:1px solid color-mix(in srgb,var(--ui-success) 28%,var(--ui-line));color:var(--ui-success);font-size:.75rem;font-weight:700}
.provider-delivery-confirm.is-sent button{background:var(--ui-success);color:var(--ui-surface);border-color:var(--ui-success)}
.provider-sent-state{display:inline-flex;align-items:center;gap:6px;color:var(--ui-success);font-weight:650}
#bottomNav{box-shadow:0 -8px 28px rgb(53 65 91 / .055)!important}
#bottomNav .nav-btn.text-brand{background:var(--brand-light)!important}
.overview-link{background:color-mix(in srgb,var(--brand-light) 68%,var(--ui-surface));border-color:var(--brand-border)}
#analyticsCard{display:grid;gap:16px}#analyticsCard>.bg-gradient-to-br{background:linear-gradient(145deg,#7588bd 0%,#5f72aa 100%)!important;border:0!important;border-radius:20px!important;box-shadow:0 16px 36px rgb(70 81 125 / .16)!important}#analyticsCard>.premium-card{margin:0!important}
.reminder-banner-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.reminder-banner-actions button{min-height:44px;padding:10px 12px;border-radius:11px;font-size:.8125rem;font-weight:700}.reminder-banner-actions button:first-child{background:var(--brand-light);color:var(--brand)}.reminder-banner-actions button:last-child{background:var(--brand);color:#fff}
html.dark .dashboard-summary{background:linear-gradient(145deg,#3a4c70 0%,#303e5d 100%)!important;box-shadow:none!important}
html.dark .dashboard-summary #dashAddBtn{background:#e9effb!important;color:#344b78!important}
@media(max-width:520px){.provider-delivery-confirm{align-items:stretch;flex-direction:column}.provider-delivery-confirm button{width:100%}.reminder-banner-actions{grid-template-columns:1fr}}

/* Payment proof stays optional and appears only after a payment status is selected. */
.payment-details{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;margin-top:14px;padding:14px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-soft)}
.payment-details.hidden{display:none}.payment-details label{display:grid;gap:7px;min-width:0;color:var(--ui-text);font-size:.8125rem;font-weight:700}.payment-details label span{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.payment-details small{color:var(--ui-muted);font-size:.6875rem;font-weight:500}.payment-details input{min-width:0;min-height:46px;padding:11px 12px;border:1px solid var(--ui-line);border-radius:11px;background:var(--ui-surface);color:var(--ui-text);font-size:.875rem}.payment-details>p{grid-column:1/-1;display:flex;align-items:flex-start;gap:7px;margin:0;color:var(--ui-muted);font-size:.75rem;line-height:1.45}.payment-details>p i{margin-top:2px;color:var(--ui-success)}
.payment-history-meta{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--ui-success) 22%,var(--ui-line));border-radius:12px;background:var(--ui-success-soft);color:var(--ui-success)}.payment-history-meta>div{display:grid;gap:2px;min-width:0}.payment-history-meta strong{color:var(--ui-text);font-size:.75rem}.payment-history-meta span{color:var(--ui-muted);font-size:.75rem;overflow-wrap:anywhere}

/* Evidence-based usage notes: shown only with enough previous months. */
.entry-insights{display:grid;gap:8px;margin:12px 0 2px}.entry-insights.hidden{display:none}.entry-insight{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:13px;background:var(--ui-soft);border:1px solid var(--ui-line)}.entry-insight>i{margin-top:3px;color:var(--brand)}.entry-insight>div{min-width:0}.entry-insight strong{display:block;color:var(--ui-text);font-size:.8125rem}.entry-insight p{margin:2px 0 0;color:var(--ui-muted);font-size:.75rem;line-height:1.45}.entry-insight.is-high{background:color-mix(in srgb,var(--ui-warning-soft) 70%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-warning) 24%,var(--ui-line))}.entry-insight.is-high>i{color:var(--ui-warning)}.entry-insight.is-low{background:color-mix(in srgb,var(--ui-success-soft) 78%,var(--ui-surface));border-color:color-mix(in srgb,var(--ui-success) 22%,var(--ui-line))}.entry-insight.is-low>i{color:var(--ui-success)}
@media(max-width:520px){.payment-details{grid-template-columns:1fr}}

/* Electricity billing modes show an explicit state instead of relying on tint alone. */
.electricity-mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:2px 0 0}
.electricity-mode-toggle{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;gap:6px;min-height:58px;padding:9px 10px;border:1px solid var(--ui-line);border-radius:15px;background:var(--ui-soft);color:var(--ui-muted);cursor:pointer;transition:border-color .18s,background .18s,color .18s,box-shadow .18s,transform .18s}
.electricity-mode-toggle:active{transform:scale(.985)}.electricity-mode-toggle:focus-within{outline:3px solid color-mix(in srgb,var(--brand) 18%,transparent);outline-offset:2px}
.electricity-mode-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ui-surface);color:var(--ui-muted);transition:background .18s,color .18s}
.electricity-mode-copy{display:grid;gap:1px;min-width:0}.electricity-mode-copy strong{color:var(--ui-text);font-size:.6875rem;line-height:1.2;white-space:nowrap}.electricity-mode-copy small{color:var(--ui-muted);font-size:.625rem;font-weight:650;line-height:1.2;white-space:nowrap}
.electricity-mode-indicator{display:grid;place-items:center;width:18px;height:18px;border:2px solid color-mix(in srgb,var(--ui-muted) 42%,transparent);border-radius:50%;color:transparent;font-size:8px;transition:all .18s}
.electricity-mode-toggle:has(input:checked){border-color:var(--brand);background:var(--brand-light);color:var(--brand);box-shadow:0 10px 24px -20px color-mix(in srgb,var(--brand) 78%,transparent)}
.electricity-mode-toggle:has(input:checked) .electricity-mode-icon{background:var(--brand);color:#fff}.electricity-mode-toggle:has(input:checked) .electricity-mode-copy strong,.electricity-mode-toggle:has(input:checked) .electricity-mode-copy small{color:var(--brand)}.electricity-mode-toggle:has(input:checked) .electricity-mode-indicator{border-color:var(--brand);background:var(--brand);color:#fff}
html.dark .electricity-mode-toggle:has(input:checked){background:color-mix(in srgb,var(--brand) 18%,var(--ui-surface))}
@media(max-width:360px){.electricity-mode-grid{grid-template-columns:1fr}.electricity-mode-toggle{min-height:54px}}