:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { --bg:#0d1411; --surface:#15211b; --surface-2:#1b2922; --border:rgba(167,207,176,.13); --text:#eff8f1; --muted:#91a89b; --accent:#68e2ad; --accent-2:#32aa7a; --on-accent:#0b2119; --soft:#263b30; --shadow:rgba(0,0,0,.27); margin:0; min-height:100vh; background:var(--bg); color:var(--text); }
body[data-theme="light"] { color-scheme:light; --bg:#eef4ef; --surface:#fbfdfb; --surface-2:#e4eee7; --border:rgba(28,89,58,.2); --text:#153426; --muted:#536d5e; --accent:#166c4d; --accent-2:#197857; --on-accent:white; --soft:#d5eadc; --shadow:rgba(19,77,44,.12); }
button,a { -webkit-tap-highlight-color: transparent; } button { font:inherit; color:inherit; cursor:pointer; } a { color:inherit; } button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.5; }
[hidden] { display:none!important; }
.svg-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.app-shell { width:min(100%,640px); margin:0 auto; min-height:100dvh; position:relative; }
.topbar { height:74px; display:flex; align-items:center; justify-content:space-between; padding:8px 18px; gap:10px; position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 96%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); box-shadow:0 4px 18px var(--shadow); }
.brand { display:flex; align-items:center; gap:11px; min-width:0; }
.brand-icon { width:38px; height:38px; border-radius:14px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; background:#1c4935; box-shadow:inset 0 1px 1px rgba(255,255,255,.09); }
.brand-icon span { display:block; height:4px; border-radius:8px; background:#65e0a9; width:22px; }
.brand-icon span:nth-child(2) { width:16px; margin-left:6px; } .brand-icon span:nth-child(3) { width:22px; }
.brand strong { font-size:19px; font-weight:750; letter-spacing:-.7px; display:block; line-height:1.1; }
.brand small { font-size:8px; color:var(--muted); letter-spacing:1.5px; font-weight:700; }
.header-actions { display:flex; align-items:center; gap:7px; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.new-button { background:var(--accent); border:0; border-radius:12px; min-height:40px; padding:0 11px; display:flex; align-items:center; gap:5px; color:var(--on-accent); font-weight:800; font-size:13px; }
.new-button .icon { width:16px; height:16px; stroke-width:2.7; }
.header-actions > .icon-button .icon { width:19px; height:19px; }
.main-area { padding:10px 21px 120px; }
.hero { background:radial-gradient(ellipse at 80% 10%, rgba(60,169,119,.22),transparent 50%),linear-gradient(150deg,#1a3527,#15251d 66%,#1b3022); border:1px solid rgba(121,221,153,.17); border-radius:28px; padding:27px 24px 21px; min-height:243px; position:relative; overflow:hidden; color:#f4fff7; }
.hero:after { content:""; width:180px; height:180px; border:1px solid rgba(146,225,175,.09); position:absolute; right:-85px; bottom:-120px; border-radius:50%; box-shadow:0 0 0 31px rgba(150,225,175,.025),0 0 0 65px rgba(150,225,175,.02); pointer-events:none; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:1.5px; font-weight:780; color:#bce8d0; flex-wrap:wrap; }
.online-dot { width:7px; height:7px; background:#5ee0a4; border-radius:50%; }
.date-label { margin-left:auto; letter-spacing:.25px; color:#a8cbb8; text-transform:capitalize; }
.hero h1 { margin:22px 0 10px; font-size:clamp(32px,8vw,46px); line-height:1.04; font-weight:790; letter-spacing:-1.9px; }
.hero h1 em { font-style:normal; color:#84e7b5; } .hero p { margin:0; color:#bfd3c5; font-size:14px; line-height:1.5; }
.hero-bottom { margin-top:25px; }
.phase-label { display:inline-flex; align-items:center; gap:6px; font-size:10px; color:#bdd9c7; background:rgba(0,0,0,.14); border:1px solid rgba(186,232,199,.13); padding:8px 10px; border-radius:999px; }
.phase-label .icon { width:13px; height:13px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; margin:28px 0 15px; }
.section-heading.compact { margin-top:30px; }
.section-overline,.view-overline { color:var(--accent-2); font-size:10px; letter-spacing:1.45px; font-weight:850; margin-bottom:5px; }
.section-heading h2 { font-size:23px; letter-spacing:-.7px; line-height:1.15; margin:0; font-weight:760; }
.muted-tag { color:var(--muted); font-size:10px; max-width:118px; text-align:right; line-height:1.4; }
.overview-grid { display:grid; gap:13px; }
.overview-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; overflow:hidden; }
.card-trigger { width:100%; display:flex; flex-direction:column; align-items:stretch; text-align:left; border:0; background:transparent; padding:19px 19px 17px; }
.card-row { display:flex; align-items:center; gap:10px; margin-bottom:13px; width:100%; }
.card-icon { display:grid; place-items:center; border-radius:12px; width:40px; height:40px; }
.product-icon { background:rgba(113,219,163,.12); color:#68dca2; }
.finance-icon { background:rgba(238,191,103,.12); color:#efc777; }
.health-icon { background:rgba(153,158,254,.14); color:#b1b7fa; }
.card-icon .icon { width:21px; height:21px; }
.card-subtitle { font-size:10px; font-weight:800; letter-spacing:1.25px; color:var(--muted); }
.card-arrow { width:17px; height:17px; margin-left:auto; color:var(--muted); transition:transform .2s ease; }
[aria-expanded="true"] .card-arrow { transform:rotate(180deg); }
.card-title { font-size:20px; font-weight:750; letter-spacing:-.5px; line-height:1.2; }
.card-metric { margin-top:7px; font-size:13px; color:var(--muted); }
.card-footer { margin-top:17px; padding-top:14px; border-top:1px solid var(--border); width:100%; font-size:12px; color:var(--accent); font-weight:650; display:flex; align-items:center; justify-content:space-between; }
.card-footer .icon { width:16px; height:16px; }
.card-expand { padding:0 19px 18px; border-top:1px solid var(--border); }
.card-expand p { margin:15px 0; color:var(--muted); font-size:13px; line-height:1.55; }
.text-action { display:inline-flex; align-items:center; gap:5px; padding:0; color:var(--accent); background:none; border:0; font-weight:750; font-size:13px; }
.text-action .icon { width:15px; height:15px; }
.security-strip { display:flex; gap:13px; background:var(--surface-2); padding:17px; border:1px solid var(--border); border-radius:18px; margin-top:22px; }
.strip-mark { color:var(--accent); flex:none; }
.security-strip strong { font-size:13px; }
.security-strip p { margin:5px 0 0; font-size:12px; color:var(--muted); line-height:1.55; }
.page-footnote { margin:31px 0 0; border-top:1px solid var(--border); padding-top:18px; color:var(--muted); display:flex; justify-content:space-between; gap:8px; font-size:11px; align-items:center; }
.page-footnote a { display:flex; color:var(--accent); text-decoration:none; align-items:center; gap:4px; font-weight:700; }
.page-footnote .icon { width:13px; height:13px; }
.view-overline { margin-top:12px; } .page-title { font-size:clamp(30px,7vw,42px); letter-spacing:-1.5px; margin:7px 0 6px; }
.title-dot { color:var(--accent); } .page-lead { margin:0 0 24px; font-size:14px; color:var(--muted); line-height:1.5; }
.metric-strip { display:flex; align-items:center; gap:30px; background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:23px; }
.metric-strip>div { min-width:68px; } .metric-strip strong { display:block; font-size:35px; font-weight:760; margin-top:10px; line-height:1; }
.metric-label { font-size:10px; color:var(--muted); font-weight:800; letter-spacing:1px; }
.metric-strip .metric-symbol { margin-left:auto; color:var(--accent); opacity:.35; } .metric-symbol .icon { width:45px; height:45px; }
.chips { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:2px 0 10px; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; border-radius:999px; border:1px solid var(--border); background:var(--surface); padding:10px 14px; font-size:12px; font-weight:700; }
.chip.selected { border-color:var(--accent); background:var(--soft); color:var(--accent); }
.empty-panel { border:1px dashed var(--border); background:var(--surface); border-radius:23px; padding:39px 24px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:10px; }
.empty-illustration { width:68px; height:68px; background:var(--surface-2); color:var(--accent); display:grid; place-items:center; border-radius:22px; margin-bottom:18px; }
.empty-illustration .icon { width:31px; height:31px; }
.empty-panel strong { font-size:17px; } .empty-panel p { max-width:270px; color:var(--muted); font-size:13px; line-height:1.55; }
.outline-button { display:inline-flex; gap:7px; align-items:center; border:1px solid var(--accent-2); color:var(--accent); padding:12px 18px; border-radius:13px; background:var(--soft); font-size:13px; font-weight:800; margin-top:5px; }
.outline-button .icon { width:17px; height:17px; }
.balance-card { background:linear-gradient(125deg,#204330,#183023); color:#f0fff7; border:1px solid rgba(122,235,169,.21); border-radius:24px; padding:24px; }
.balance-top { display:flex; align-items:center; justify-content:space-between; font-size:11px; letter-spacing:1.2px; font-weight:780; color:#bbdbc7; }
.mini-icon-button { display:grid; place-items:center; background:rgba(255,255,255,.08); border:0; width:36px; height:36px; border-radius:12px; }
.mini-icon-button .icon { width:18px; height:18px; }
.balance-number { display:block; font-size:40px; letter-spacing:-1.4px; margin:14px 0 4px; }
.balance-card p { color:#bdd5c5; font-size:12px; margin:0; }
.money-hidden { display:none; } body.hide-money .money-visible { display:none; } body.hide-money .money-hidden { display:inline; }
.chart-empty { border:1px solid var(--border); background:var(--surface); border-radius:20px; overflow:hidden; }
.chart-grid { position:relative; display:flex; height:170px; margin:18px 20px 0; flex-direction:column; justify-content:space-around; }
.chart-grid i { border-top:1px dashed var(--border); width:100%; height:1px; }
.chart-grid:after { content:""; position:absolute; width:100%; height:58px; bottom:3px; background:linear-gradient(transparent,rgba(105,226,173,.06)); border-bottom:2px dotted rgba(105,226,173,.25); }
.chart-caption { display:flex; gap:10px; color:var(--muted); align-items:center; justify-content:center; padding:16px; background:var(--surface-2); font-size:12px; line-height:1.5; text-align:center; }
.chart-caption .icon { color:var(--accent); }
.empty-line { display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; }
.empty-line>.icon { width:27px; height:27px; color:var(--accent); flex:none; }
.empty-line>div { min-width:0; flex:1; } .empty-line strong { font-size:13px; }
.empty-line p { margin:5px 0 0; font-size:11px; color:var(--muted); line-height:1.5; }
.round-next { background:var(--soft); color:var(--accent); border:0; width:37px; height:37px; border-radius:12px; display:grid; place-items:center; }
.health-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:15px; }
.health-tile { padding:17px; border-radius:21px; background:var(--surface); border:1px solid var(--border); min-width:0; }
.health-tile.wide { grid-column:span 2; } .health-heading { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:10px; font-weight:850; letter-spacing:.85px; }
.health-glyph { width:31px; height:31px; flex:none; border-radius:10px; display:grid; place-items:center; }
.health-glyph .icon { width:18px; height:18px; } .water { color:#7fcaff; background:rgba(77,172,228,.13); } .sleep { color:#b4a8ff; background:rgba(165,146,255,.13); } .move { color:#ffbb8a; background:rgba(244,164,100,.11); }
.health-tile strong { display:block; font-size:32px; margin-top:20px; letter-spacing:-1px; } .health-tile strong small { font-size:16px; color:var(--muted); }
.health-tile p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,640px); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(4,1fr); background:color-mix(in srgb,var(--bg) 92%,transparent); border-top:1px solid var(--border); backdrop-filter:blur(18px); }
.bottom-nav button { border:0; background:transparent; min-height:55px; border-radius:14px; display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center; color:var(--muted); font-size:10px; font-weight:690; min-width:0; }
.bottom-nav button[aria-current="page"] { color:var(--accent); background:var(--soft); }
.bottom-nav .icon { width:21px; height:21px; }
.bottom-sheet { position:fixed; inset:auto 0 0; margin:0 auto; width:min(100%,640px); max-width:none; border:1px solid var(--border); border-radius:26px 26px 0 0; padding:10px 20px calc(26px + env(safe-area-inset-bottom)); max-height:min(82dvh,780px); overflow-y:auto; color:var(--text); background:var(--surface); box-shadow:0 -16px 60px var(--shadow); }
.bottom-sheet::backdrop { background:rgba(0,0,0,.7); }
.sheet-handle { width:44px; height:4px; background:var(--muted); opacity:.4; border-radius:8px; margin:0 auto 10px; }
.sheet-header { display:flex; justify-content:space-between; align-items:center; }
.sheet-header h2 { font-size:22px; letter-spacing:-.65px; margin:4px 0 14px; }
.sheet-content>p { margin:0 0 16px; color:var(--muted); line-height:1.55; font-size:13px; }
.sheet-list { display:grid; gap:9px; }
.sheet-option { display:flex; width:100%; align-items:center; gap:13px; text-align:left; border:1px solid var(--border); background:var(--surface-2); border-radius:17px; padding:16px 14px; }
.sheet-option .option-icon { color:var(--accent); width:39px; height:39px; border-radius:12px; background:var(--soft); display:grid; place-items:center; }
.sheet-option .option-label { display:grid; gap:3px; flex:1; }
.option-label strong { font-size:14px; } .option-label small { font-size:11px; color:var(--muted); }
.sheet-option>.icon { width:17px; height:17px; color:var(--muted); }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 0; border-bottom:1px solid var(--border); }
.setting-row strong { display:block; font-size:13px; } .setting-row p { color:var(--muted); font-size:11px; margin:5px 0 0; line-height:1.4; }
.toggle { width:50px; height:30px; flex:none; border-radius:30px; background:var(--soft); border:1px solid var(--border); padding:3px; position:relative; }
.toggle:after { content:""; display:block; background:var(--muted); width:22px; height:22px; border-radius:50%; transition:transform .2s; }
.toggle[aria-pressed="true"] { background:var(--accent-2); }
.toggle[aria-pressed="true"]:after { background:white; transform:translateX(20px); }
.setting-link { display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:var(--accent); padding:16px 0; font-size:13px; font-weight:750; }
.setting-hint { color:var(--muted); font-size:11px; line-height:1.55; margin-top:16px; }
.toast { position:fixed; z-index:30; bottom:calc(88px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:min(calc(100% - 30px),430px); width:max-content; border-radius:14px; background:#274f38; border:1px solid #4ea675; color:#e5fff0; box-shadow:0 9px 30px rgba(0,0,0,.3); padding:13px 17px; font-size:12px; line-height:1.4; }
body[data-theme="light"] .product-icon { color:#168352; } body[data-theme="light"] .finance-icon { color:#98620e; } body[data-theme="light"] .health-icon { color:#645dcb; }
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
@media(min-width:620px) { .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .health-card { grid-column:span 2; } .hero { min-height:254px; } .main-area { padding-inline:25px; } }
@media(max-width:370px) { .main-area { padding-inline:14px; } .topbar { padding-inline:14px; } .brand small { letter-spacing:.5px; } .hero { padding:24px 17px; } .health-tile { padding:13px; } .health-heading { font-size:9px; } .bottom-nav { padding-inline:4px; } .bottom-nav button { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }


/* Produtividade: terceira métrica, legível mesmo em Android compacto. */
.metric-strip.three-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px 16px; align-items:start; }
.three-metrics .metric-box { min-width:0; }
.three-metrics .metric-label { display:block; font-size:10px; letter-spacing:.65px; white-space:nowrap; }
.three-metrics strong { font-size:clamp(26px,7vw,34px); margin-top:13px; }
.three-metrics .overdue-value { color:#eeb075; }
body[data-theme="light"] .three-metrics .overdue-value { color:#aa4b26; }
/* Categorias: donuts desenhados no navegador, sem bibliotecas nem API. */
.finance-categories { margin-top:3px; }
.distribution-intro { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 13px; }
.distribution-intro p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; flex:1; }
.chart-demo-toggle { flex:none; border:1px solid var(--accent-2); color:var(--accent); background:var(--soft); border-radius:12px; padding:10px 12px; font-size:11px; font-weight:800; min-height:39px; }
.chart-demo-toggle[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
.demo-warning { display:flex; align-items:center; gap:8px; margin:0 0 13px; padding:10px 12px; background:var(--soft); color:var(--text); border:1px solid var(--border); border-radius:12px; font-size:11px; line-height:1.5; }
.demo-warning .icon { width:15px; height:15px; color:var(--accent); }
.distribution-grid { display:grid; gap:12px; }
.distribution-card { border:1px solid var(--border); background:var(--surface); border-radius:22px; padding:19px 18px 17px; min-width:0; }
.distribution-heading { display:flex; align-items:center; gap:10px; }
.distribution-heading h3 { font-size:15px; font-weight:760; letter-spacing:-.35px; margin:0; }
.distribution-mark { width:10px; height:10px; border-radius:4px; }
.income-mark { background:#3ab88b; } .expense-mark { background:#df9474; }
.donut-visual { width:160px; height:160px; border-radius:50%; background:conic-gradient(var(--border) 0% 100%); margin:19px auto 22px; display:grid; place-items:center; position:relative; transition:background .15s ease; }
.donut-visual:before { content:""; position:absolute; inset:28px; border-radius:50%; background:var(--surface); }
.donut-center { position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; }
.donut-center strong { color:var(--text); font-size:26px; font-weight:800; letter-spacing:-1px; }
.donut-center small { font-size:10px; color:var(--muted); }
.chart-legend { display:grid; gap:11px; border-top:1px solid var(--border); padding-top:14px; }
.legend-row { display:flex; align-items:center; gap:9px; font-size:12px; }
.legend-color { display:block; width:10px; height:10px; border-radius:4px; flex:none; }
.legend-name { color:var(--text); flex:1; min-width:0; overflow-wrap:anywhere; }
.legend-pct { color:var(--muted); font-weight:750; font-variant-numeric:tabular-nums; }
.legend-placeholder { margin:0; text-align:center; color:var(--muted); font-size:12px; }
.chart-footnote { color:var(--muted); font-size:11px; line-height:1.6; margin:12px 2px 0; }
/* Claro: superfícies, hero e indicadores adaptados para contraste e consistência. */
body[data-theme="light"] .hero { background:radial-gradient(ellipse at 87% 10%,rgba(109,200,137,.23),transparent 53%),linear-gradient(135deg,#d8eddf,#eef7ed 76%); border:1px solid #bcddc8; color:#183d2d; box-shadow:0 10px 24px rgba(52,121,72,.045); }
body[data-theme="light"] .hero h1 em { color:#13734d; }
body[data-theme="light"] .hero p { color:#4e6959; }
body[data-theme="light"] .hero .eyebrow { color:#337151; }
body[data-theme="light"] .hero .date-label { color:#64866f; }
body[data-theme="light"] .hero .online-dot { background:#23996d; }
body[data-theme="light"] .hero .phase-label { color:#315d43; background:rgba(255,255,255,.5); border:1px solid rgba(39,107,63,.15); }
body[data-theme="light"] .hero:after { border-color:rgba(44,127,76,.1); box-shadow:0 0 0 31px rgba(73,157,101,.03),0 0 0 65px rgba(50,157,90,.025); }
body[data-theme="light"] .overview-card { box-shadow:0 3px 14px rgba(26,84,48,.04); }
body[data-theme="light"] .productivity-card { background:linear-gradient(115deg,#f7fdf8,#fff); }
body[data-theme="light"] .finance-card { background:linear-gradient(115deg,#fbfcf6,#fff); }
body[data-theme="light"] .health-card { background:linear-gradient(115deg,#fafaff,#fff); }
body[data-theme="light"] .balance-card { background:linear-gradient(130deg,#daf0e0,#eef8ee); color:#163b2a; border:1px solid #b6d6bc; }
body[data-theme="light"] .balance-card .balance-top,body[data-theme="light"] .balance-card p { color:#4b7057; }
body[data-theme="light"] .balance-card .mini-icon-button { background:rgba(35,111,61,.1); }
body[data-theme="light"] .new-button { background:#188258; color:white; }
body[data-theme="light"] .card-footer,body[data-theme="light"] .text-action { color:#176b4d; }
body[data-theme="light"] .bottom-nav { background:color-mix(in srgb,var(--bg) 96%,transparent); border-top:1px solid #c6dccc; box-shadow:0 -3px 19px rgba(40,92,47,.05); }
body[data-theme="light"] .bottom-nav button[aria-current="page"] { background:#d1e9d9; color:#15674a; }
body[data-theme="light"] .chip.selected { border-color:#438d67; }
body[data-theme="light"] .empty-panel { background:#fbfdfb; }
body[data-theme="light"] .donut-visual:before { background:var(--surface); }
@media(min-width:520px) { .distribution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .donut-visual { width:145px; height:145px; } .donut-visual:before { inset:26px; } }
@media(max-width:370px) { .metric-strip.three-metrics { gap:6px; padding:18px 12px; } .three-metrics .metric-label { font-size:9px; letter-spacing:.2px; } .distribution-intro { align-items:flex-start; } }


/* Módulo Produtividade: tarefas persistidas no IndexedDB. */
.tasks-list{display:grid;gap:11px;margin-top:11px}
.task-record{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:17px;padding:12px}
.task-mark{width:42px;height:42px;flex:none;border:2px solid var(--accent-2);border-radius:13px;background:transparent;color:var(--accent);font-size:25px;font-weight:900}
.task-mark.checked{background:var(--accent-2);color:white}
.task-record-body{display:block;flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:5px 0}
.task-record-title{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.is-complete .task-record-title{text-decoration:line-through;color:var(--muted)}
.task-record-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.task-record-meta span{font-size:10px;color:var(--muted);background:var(--surface-2);border-radius:7px;padding:3px 6px}
.task-record-meta .priority-high,.task-record-meta .task-overdue-label{color:#d98669;background:rgba(214,113,85,.1)}
.task-record-meta .priority-low{color:var(--accent)}
.task-edit-mini{border:1px solid var(--border);background:var(--soft);color:var(--accent);padding:9px 10px;border-radius:10px;font-size:11px;min-height:40px}
.task-backup-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px;margin-top:17px;font-size:11px;color:var(--muted)}
.task-backup-link a{color:var(--accent);font-weight:750;text-decoration:none}
.task-form label{display:block;margin:13px 0 7px;font-size:13px;font-weight:720}
.task-form input,.task-form select,.task-form textarea{width:100%;padding:12px;min-height:44px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:12px;font:inherit}
.task-form textarea{resize:vertical;line-height:1.5}
.task-extra{margin-top:16px;border:1px solid var(--border);border-radius:12px;padding:13px}
.task-extra summary{font-size:12px;color:var(--accent);font-weight:700;cursor:pointer}
.task-form-error{color:#ef9b80;font-size:12px}
.task-save{width:100%;min-height:46px;margin-top:18px;background:var(--accent);color:var(--on-accent);border:0;border-radius:12px;font-weight:850}
.task-note{font-size:11px!important;color:var(--muted);margin-top:12px!important;line-height:1.5}
.task-detail>strong{display:block;font-size:20px;overflow-wrap:anywhere}
.task-detail>p{line-height:1.6;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.task-detail-actions{display:flex;gap:10px}
.task-detail-actions .task-save{flex:1}
.task-delete{background:rgba(220,100,77,.13);color:#df977d;border:1px solid rgba(220,100,77,.3);padding:12px;border-radius:12px;margin-top:18px;font-weight:750}
.task-undo{border:0;background:transparent;color:#f0eaa7;font-weight:850;text-decoration:underline;margin-left:4px}