@font-face { font-family: "Caveat Local"; src: url("./fonts/caveat-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat Local"; src: url("./fonts/caveat-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
:root {
  color-scheme: light;
  --page: #f7f4ee;
  --paper: #fffefa;
  --ink: #27324a;
  --quiet: #768096;
  --rule: #e3e9ed;
  --accent: #745a9a;
  --accent-pale: #f0eaf7;
  --line-height: 48px;
  --sans: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --hand: "Caveat Local", "Segoe Print", cursive;
}
* { box-sizing: border-box; }
.ink-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
html, body { margin: 0; min-width: 280px; width: 100%; height: 100%; }
body { background: var(--page); color: var(--ink); font-family: var(--sans); overflow: hidden; overscroll-behavior: none; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #aa83cb; outline-offset: 2px; }
[hidden] { display: none !important; }
.app-shell { width: min(100%, 490px); height: 100vh; height: 100dvh; min-height: 400px; margin: auto; display: flex; flex-direction: column; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom)); }
.topbar { flex: 0 0 47px; display: flex; justify-content: space-between; align-items: center; padding: 0 3px 0 5px; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { font-size: 31px; color: #91a390; line-height: 1; transform: rotate(-12deg); }
.brand strong { font-size: 23px; line-height: 0.9; letter-spacing: -1.7px; font-weight: 800; display: block; }
.brand small { display: block; color: var(--quiet); font-size: 10px; line-height: 1.1; letter-spacing: 2.2px; text-transform: uppercase; margin-top: 4px; }
.brand-dot { color: #d59aac; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.theme-toggle { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; padding: 0 0 2px; border: 1px solid #e6dfea; border-radius: 50%; background: #fff; color: #745a9a; box-shadow: 0 2px 6px #4832450a; }
.theme-toggle span { font-family: var(--hand); font-size: 28px; line-height: 1; }
.today-button { border: 1px solid #e6dfea; border-radius: 20px; background: white; color: #66587d; font-size: 13px; font-weight: 700; padding: 8px 13px; box-shadow: 0 2px 6px #4832450a; }
.today-button span { margin-left: 5px; font-size: 15px; }
.sheet { position: relative; display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; border-radius: 15px 18px 18px 14px; background: var(--paper); box-shadow: 0 3px 3px #25232d08, 0 14px 35px #3e354123; padding: 16px 15px 8px 45px; overflow: hidden; isolation: isolate; }
.sheet::before { content: ""; position: absolute; inset: 0 auto 0 35px; width: 1px; background: #eabfc6; z-index: -1; }
.sheet::after { content: ""; position: absolute; inset: 0 0 0 38px; z-index: -2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, var(--rule) 47px, var(--rule) 48px); background-position: 0 5px; opacity: .94; pointer-events: none; }
.paper-holes { position: absolute; top: 14%; bottom: 13%; left: 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; pointer-events: none; }
.paper-holes i { display: block; width: 15px; height: 15px; background: var(--page); border-radius: 50%; box-shadow: inset 1px 1px 2px #8c8a8959; }
.sheet-header { flex: 0 0 auto; }
.eyebrow { color: #9b87a9; font-size: 10px; font-weight: 800; letter-spacing: 2.2px; }
.day-header { display: flex; height: 74px; align-items: center; justify-content: space-between; gap: 5px; position: relative; }
.round-arrow { width: 38px; height: 42px; flex: 0 0 38px; border: 0; background: transparent; color: #7c6990; font-size: 38px; font-weight: 300; line-height: 34px; padding: 0; }
.round-arrow:active, .view-arrow:active { transform: scale(.92); }
.date-button { border: 0; background: none; color: var(--ink); flex: 1; min-width: 0; text-align: center; padding: 3px 0; }
.date-button > span { display: block; font-size: clamp(21px, 7vw, 29px); font-weight: 760; letter-spacing: -1px; white-space: nowrap; }
.date-button small { display: block; margin-top: 2px; color: var(--quiet); font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; }
.visually-hidden-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; right: 50%; top: 40px; }
.other-header { height: 74px; display: flex; flex-direction: column; justify-content: center; }
.other-header h1 { font-size: 26px; letter-spacing: -1px; margin: 0; line-height: 1.13; }
.other-header p { font-size: 12px; color: var(--quiet); margin: 4px 0 0; }
.late-banner { width: 100%; min-height: 31px; border: 0; border-radius: 7px; background: #fff0e8; color: #a45e45; text-align: left; font-weight: 700; font-size: 11px; padding: 7px 9px; margin-bottom: 8px; }
.list-heading { flex: 0 0 32px; display: flex; justify-content: space-between; align-items: center; padding: 0 3px; font-size: 12px; font-weight: 800; letter-spacing: .3px; }
.count-label { color: var(--quiet); font-size: 11px; font-weight: 650; white-space: nowrap; }
.tag-filter { flex: 0 0 27px; align-self: flex-start; display: flex; align-items: center; gap: 3px; margin-bottom: 3px; color: #745d89; }
.tag-filter button { border: 0; background: #f1eaf4; color: #795f91; border-radius: 7px; width: 28px; height: 25px; font-size: 22px; line-height: 19px; padding: 0; }
.tag-filter > span { min-width: 104px; text-align: center; color: #6f6080; font-size: 10px; font-weight: 760; letter-spacing: .2px; }
.tag-filter[data-filter="financeiro"] > span { color: #607755; }
.tag-filter[data-filter="campanha"] > span { color: #ae677e; }
.tag-filter[data-filter="relatorio"] > span { color: #637e9d; }
.tag-filter[data-filter="anotacoes"] > span { color: #836a9b; }
.task-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.task-row { min-height: var(--line-height); display: flex; align-items: stretch; gap: 8px; position: relative; }
.task-check { width: 32px; min-height: var(--line-height); flex: 0 0 32px; display: grid; place-items: center; border: 0; background: none; padding: 0; }
.task-check span { width: 18px; height: 18px; display: block; border: 1.7px solid #a49dac; border-radius: 4px; background: #ffffffbd; line-height: 15px; color: #6b8a6a; font-size: 17px; font-family: var(--hand); font-weight: 700; transform: rotate(-6deg); }
.task-row.done .task-check span { background: #ddedce; border-color: #91b39a; }
.task-main { flex: 1 1 auto; min-width: 0; min-height: var(--line-height); text-align: left; background: none; border: 0; padding: 5px 3px 5px 0; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.task-copy { display: block; flex: 1 1 auto; min-width: 0; }
.task-title { display: block; flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.13; transform: rotate(-.4deg); --cursive-size: 24px; --block-size: 17px; }
.task-title.text-medium { --cursive-size: 21px; --block-size: 16px; }
.task-title.text-long { --cursive-size: 18px; --block-size: 15px; }
.task-title.text-very-long { --cursive-size: 16px; --block-size: 14px; }
.font-cursive .task-title { font-family: var(--hand); font-size: var(--cursive-size); font-weight: 600; letter-spacing: .2px; }
.font-block .task-title { font-family: var(--sans); font-size: var(--block-size); font-weight: 660; letter-spacing: .2px; }
.task-ink { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.task-ink.highlight-mint { background: linear-gradient(transparent 47%, #dbeeca 47%, #dbeeca 88%, transparent 88%); }
.task-ink.highlight-rose { background: linear-gradient(transparent 47%, #f6d8dd 47%, #f6d8dd 88%, transparent 88%); }
.task-ink.highlight-blue { background: linear-gradient(transparent 47%, #d9e8f5 47%, #d9e8f5 88%, transparent 88%); }
.task-ink.highlight-yellow { background: linear-gradient(transparent 45%, #eeff42 45%, #eeff42 89%, transparent 89%); }
.task-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.task-tag { display: inline-block; border-radius: 4px; padding: 1px 4px; font-family: var(--sans); font-size: 9px; font-weight: 750; line-height: 1.28; white-space: nowrap; }
.tag-financeiro { color: #537451; background: #e4f0dd; }
.tag-campanha { color: #a05a74; background: #f9e6ed; }
.tag-relatorio { color: #587497; background: #e3edf8; }
.tag-anotacoes { color: #75609a; background: #efe8fa; }
.task-row.done .task-title { text-decoration: line-through; text-decoration-thickness: 1px; color: #99a0a5; }
.task-time { flex: 0 0 auto; color: #968da5; font-size: 11px; font-family: var(--sans); font-weight: 760; }
.task-date { flex: 0 0 auto; color: #887391; font-size: 10px; font-family: var(--sans); font-weight: 700; }
.task-row.is-overdue .task-date { color: #ae6857; }
.measurement-list { position: fixed !important; height: auto !important; min-height: 0 !important; flex: none !important; overflow: visible !important; visibility: hidden; pointer-events: none; z-index: -1; }
.empty-state { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px 20px; color: #687388; }
.empty-doodle { font-family: var(--hand); font-size: 52px; color: #d9aeb7; line-height: 1; transform: rotate(-15deg); }
.empty-state p { margin: 11px 0 6px; color: var(--ink); font-size: 17px; font-weight: 730; }
.empty-state small { font-size: 12px; line-height: 1.5; }
.day-stamp { --stamp-ink: #9c5974; position: relative; isolation: isolate; align-self: center; flex: 0 0 104px; width: min(100% - 10px, 248px); height: 104px; margin: 4px 0 8px; border: 3px double var(--stamp-ink); border-radius: 60px 45px 55px 43px / 39px 58px 48px 61px; transform: rotate(-9deg); display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 10px 7px 7px; color: var(--stamp-ink); background: #fffefa80; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stamp-ink) 32%, transparent), 1px -1px 0 1px color-mix(in srgb, var(--stamp-ink) 24%, transparent); }
.day-stamp[data-stamp="surprised"] { --stamp-ink: #4d779f; }
.day-stamp[data-stamp="boss"] { --stamp-ink: #518566; }
.day-stamp::after { content: ""; position: absolute; inset: 5px; border: 1px dashed var(--stamp-ink); opacity: .65; border-radius: inherit; pointer-events: none; }
.stamp-speckles { position: absolute; inset: -7px; border-radius: inherit; opacity: .36; pointer-events: none; background-image: radial-gradient(circle, var(--stamp-ink) 1px, transparent 1.7px), radial-gradient(circle, var(--stamp-ink) 1.5px, transparent 2px), radial-gradient(circle, var(--stamp-ink) 1px, transparent 2px); background-size: 13px 17px, 29px 31px, 43px 19px; background-position: 2px 4px, 8px 3px, 17px 10px; mask-image: radial-gradient(ellipse at center, transparent 37%, #000 73%); }
.stamp-portrait { position: relative; z-index: 1; width: 82px; height: 82px; flex: 0 0 82px; overflow: hidden; border: 2px solid var(--stamp-ink); border-radius: 50%; background: #fffefa; }
.stamp-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: url(#stampInk); opacity: .95; }
.day-stamp[data-stamp="surprised"] .stamp-portrait img { filter: grayscale(1) contrast(1.55) brightness(1.18) sepia(1) saturate(1.8) hue-rotate(155deg); object-position: 50% 50%; }
.day-stamp[data-stamp="boss"] .stamp-portrait img { filter: grayscale(1) contrast(1.55) brightness(1.18) sepia(1) saturate(1.65) hue-rotate(67deg); object-position: 50% 36%; }
.stamp-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 0; }
.stamp-copy strong { font-size: 19px; line-height: 1; letter-spacing: -1.1px; font-weight: 1000; text-shadow: 1px 0 color-mix(in srgb, var(--stamp-ink) 30%, transparent); }
.stamp-copy small { display: block; margin-top: 7px; font-size: 7px; line-height: 1.2; letter-spacing: .5px; font-weight: 900; }
.time-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.time-summary { flex: 0 0 138px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; gap: 1px 8px; padding: 13px 14px 11px; border: 1px solid #d9e4de; border-radius: 8px; background: linear-gradient(112deg, #f5faf3 3%, #fffefa 86%); box-shadow: 2px 3px 0 #eff1ea; }
.time-summary-label { grid-column: 1 / -1; color: #779281; font-size: 9px; font-weight: 900; letter-spacing: 1.7px; }
.time-summary strong { grid-column: 1 / -1; font-family: var(--hand); color: #3e6155; font-size: 41px; font-weight: 600; line-height: 1; transform: rotate(-2deg); }
.time-status { grid-column: 1 / -1; min-height: 16px; color: #6c8279; font-size: 10px; }
.time-goal { align-self: end; justify-self: start; padding: 4px 0; background: transparent; border: 0; color: #58765d; font-size: 10px; font-weight: 800; text-align: left; text-decoration: underline; text-decoration-style: dotted; }
.time-balance { align-self: end; color: #507d62; font-size: 10px; font-weight: 900; text-align: right; white-space: nowrap; }
.time-balance.negative { color: #a67166; }
.time-ledger-heading { flex: 0 0 35px; display: flex; align-items: end; justify-content: space-between; color: #48546b; font-size: 11px; font-weight: 850; }
.time-ledger-heading small { font-size: 10px; color: #86918d; font-weight: 650; }
.time-entry-list { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.time-entry { width: 100%; min-height: 49px; display: flex; gap: 9px; align-items: center; padding: 0 7px 0 3px; border: 0; border-bottom: 1px solid #e2e9ec; background: #fffefa70; color: var(--ink); text-align: left; }
.time-entry-icon { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #bdd2be; border-radius: 50%; color: #5c8a67; font-size: 18px; transform: rotate(-7deg); }
.entry-out .time-entry-icon { border-color: #d6bad0; color: #97718b; }
.time-entry-label { flex: 1; font-size: 12px; font-weight: 700; }
.time-entry-hour { font-family: var(--hand); font-size: 26px; font-weight: 600; letter-spacing: .4px; }
.time-entry-edit { color: #9e98a0; font-family: var(--hand); font-size: 17px; }
.time-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: #758177; font-family: var(--hand); font-size: 23px; padding: 0 15px; }
.time-footnote { flex: 0 0 31px; margin: 0; display: flex; align-items: center; font-size: 10px; line-height: 1.25; color: #888d94; }
.day-stamp.just-stamped { animation: stamp-thump .5s cubic-bezier(.18,.78,.25,1) both; }
@keyframes stamp-thump { 0% { opacity: 0; transform: rotate(-18deg) scale(1.6); filter: blur(2px); } 58% { opacity: 1; transform: rotate(-8deg) scale(.93); filter: blur(0); } 100% { transform: rotate(-9deg) scale(1); } }
.sheet-footer { flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; padding-left: 4px; color: var(--quiet); font-size: 11px; font-weight: 700; }
.page-arrows { display: flex; gap: 3px; }
.page-arrows button { border: 0; background: transparent; color: #715e85; font-size: 21px; width: 41px; height: 38px; }
.page-arrows button:disabled { opacity: .26; cursor: default; }
.settings { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-evenly; gap: 8px; padding-bottom: 5px; }
.settings-block { padding: 5px 1px; }
.settings h2 { font-size: 16px; margin: 0 0 3px; letter-spacing: -.4px; }
.settings p { font-size: 11px; margin: 0 0 8px; color: var(--quiet); line-height: 1.4; }
.font-options, .settings-actions { display: flex; gap: 8px; }
.font-option, .settings-actions button, .calendar-block button { border: 1px solid #e8e3e7; background: #fff; color: #4c5466; border-radius: 10px; min-height: 39px; padding: 7px 9px; font-size: 12px; font-weight: 700; }
.font-option { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.font-option span { opacity: 0; }
.font-option.selected { border-color: #ac98bc; background: #f3eef7; color: #5a4275; }
.font-option.selected span { opacity: 1; }
.cursive-sample { font-family: var(--hand); font-size: 19px; font-weight: 500; }
.block-sample { letter-spacing: 1px; }
.settings-actions button { flex: 1; }
.calendar-block button { width: 100%; text-align: left; background: #f0f4ee; border-color: #e3ebe0; }
.calendar-block p { margin: 5px 0 0; }
.account-link { width: 100%; min-height: 43px; border: 1px dashed #b9a7c9; border-radius: 10px; background: #f6f1fa; color: #604b79; font-size: 12px; font-weight: 800; text-align: left; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.account-link span { font-size: 10px; font-weight: 650; color: #856f9b; white-space: nowrap; }
.sync-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; overflow: hidden; padding: 0 2px 8px; }
.sync-note { text-align: center; }
.sync-icon { display: block; font-family: var(--hand); font-size: 48px; line-height: 1; color: #8d73a1; transform: rotate(-13deg); }
.sync-note h2 { font-family: var(--hand); font-size: clamp(22px, 6vw, 29px); font-weight: 600; margin: 2px 0 6px; line-height: 1; }
.sync-note p { font-size: 12px; line-height: 1.4; color: #6b7183; margin: 0 auto 9px; max-width: 320px; }
.sync-note .sync-status { color: #65517c; font-size: 11px; font-weight: 760; background: #f5eff8; border-radius: 8px; padding: 8px; max-width: 340px; overflow-wrap: anywhere; }
.sync-form, .sync-connected { display: flex; flex-direction: column; gap: 7px; width: min(100%, 320px); margin: 0 auto; }
.sync-form label { font-size: 11px; font-weight: 800; color: #615b6c; }
.sync-form input { border: 1px solid #ddd7e6; background: #fff; border-radius: 9px; width: 100%; min-height: 41px; padding: 8px 10px; color: var(--ink); font-size: 14px; }
.sync-main-button, .sync-quiet-button, .sync-conflict-actions button { min-height: 41px; border-radius: 9px; padding: 8px 10px; font-size: 12px; font-weight: 800; }
.sync-main-button { border: 0; color: #fff; background: #65517c; }
.sync-quiet-button { border: 1px solid #d9cee3; color: #66517c; background: #fffefa; }
.sync-main-button:disabled, .sync-quiet-button:disabled { opacity: .58; }
.sync-account { text-align: center; color: #555b70; font-size: 12px; overflow-wrap: anywhere; font-weight: 700; }
.sync-conflict { width: min(100%, 340px); margin: 0 auto; padding: 10px; border: 1px dashed #b68391; border-radius: 10px; background: #fff8f7; }
.sync-conflict p { font-size: 11px; line-height: 1.4; margin: 0 0 7px; }
.sync-conflict small { display: block; margin-top: 7px; color: #7d6f80; line-height: 1.25; font-size: 10px; }
.sync-conflict-actions { display: flex; gap: 5px; margin: 5px 0; }
.sync-conflict-actions button { flex: 1; min-width: 0; min-height: 35px; font-size: 10px; color: #684c6e; border: 1px solid #e5cfd8; background: #fff; }
.primary-actions { flex: 0 0 49px; min-height: 0; display: flex; gap: 8px; }
.add-button { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 11px; background: #65517c; color: #fff; box-shadow: 0 5px 12px #59457139; font-size: 14px; font-weight: 760; letter-spacing: .2px; }
.add-button span { font-size: 23px; margin-right: 5px; font-weight: 300; vertical-align: -2px; }
.finish-button { flex: 0 0 125px; min-width: 0; border: 1px solid #d3a6b7; border-radius: 11px; background: #fff9f9; color: #87526d; font-size: 11px; font-weight: 810; box-shadow: 0 5px 12px #59457116; }
.finish-button.stamped { border-color: #b698a9; background: #f1e7ec; }
.add-button:disabled { background: #b8b5b7; box-shadow: none; }
.view-nav { flex: 0 0 45px; display: flex; align-items: center; justify-content: space-around; color: #5f5c68; }
.view-arrow { border: 0; background: transparent; font-size: 29px; color: #7c6990; width: 53px; height: 44px; }
.view-name { text-align: center; min-width: 150px; }
.view-name span { display: block; font-size: 13px; font-weight: 800; }
.view-name small { display: block; margin-top: 2px; color: #96909b; font-size: 10px; }
dialog { width: min(calc(100% - 24px), 450px); max-height: calc(100dvh - 30px); border: 0; border-radius: 19px; box-shadow: 0 24px 80px #27223866; padding: 20px; color: var(--ink); overflow-y: auto; background: #fffefa; }
dialog::backdrop { background: #2522358a; backdrop-filter: blur(3px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; }
.dialog-top button { border: 0; background: none; font-size: 29px; color: var(--quiet); width: 37px; height: 35px; padding: 0; }
dialog h2 { margin: 0 0 16px; font-size: 23px; }
dialog label, dialog legend { display: block; font-size: 12px; font-weight: 750; margin-bottom: 5px; }
dialog input:not([type="radio"]):not([type="checkbox"]), dialog textarea { border: 1px solid #e1dfe5; border-radius: 9px; background: #fff; color: var(--ink); padding: 10px 11px; width: 100%; min-height: 43px; margin: 0 0 13px; font-size: 14px; }
dialog textarea { resize: vertical; min-height: 59px; }
.note-length { display: block; margin: -9px 2px 12px; text-align: right; font-size: 11px; color: var(--quiet); }
dialog .optional { color: #9691a0; font-weight: 500; }
.form-row { display: flex; gap: 10px; }
.form-row > div { flex: 1; min-width: 0; }
.highlight-picker, .tag-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border: 0; margin: 0 0 12px; padding: 0; }
.highlight-picker legend { margin-bottom: 9px; }
.tag-picker legend { margin-bottom: 8px; }
.highlight-picker label, .tag-picker label { position: relative; cursor: pointer; margin: 0; }
.highlight-picker input, .tag-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch { display: grid; place-items: center; width: 33px; height: 32px; border-radius: 8px; font-weight: 700; }
.swatch.none { border: 1px solid #ddd7de; }
.swatch.mint { background: #dcefcf; }.swatch.rose { background: #f6dae2; }.swatch.blue { background: #d8e9f5; }.swatch.yellow { background: #eeff42; }
.highlight-picker input:checked + .swatch { outline: 2px solid #766181; outline-offset: 2px; }
.highlight-picker input:focus-visible + .swatch, .tag-picker input:focus-visible + span { outline: 3px solid #aa83cb; outline-offset: 3px; }
.tag-picker label span { display: block; border: 1px solid #e7e0e9; background: white; color: #655c6b; padding: 8px 10px; border-radius: 8px; font-size: 11px; }
.tag-picker input:checked + span { background: #f1eaf7; border-color: #a98cbb; color: #634a7a; }
.tag-picker input:disabled + span { opacity: .46; cursor: not-allowed; }
.time-kind-picker { border: 0; display: flex; gap: 8px; padding: 0; margin: 0 0 12px; }
.time-kind-picker legend { margin-bottom: 7px; }
.time-kind-picker label { flex: 1; margin: 0; }
.time-kind-picker input { position: absolute; opacity: 0; }
.time-kind-picker span { display: block; padding: 11px 7px; border: 1px solid #dfe5e0; border-radius: 9px; background: white; color: #586b62; text-align: center; }
.time-kind-picker input:checked + span { background: #eaf4e8; border-color: #9ab69c; color: #416a4d; }
.time-kind-picker input:focus-visible + span { outline: 3px solid #aa83cb; outline-offset: 2px; }
.time-dialog-hint { font-size: 11px; line-height: 1.45; color: #8b8f93; margin: 2px 0 16px; }
.stamp-choices { display: flex; flex-direction: column; gap: 8px; }
.stamp-choice { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border: 2px dashed #d0a8b8; border-radius: 13px; background: #fff8fa; color: #875369; text-align: left; }
.stamp-choice[data-stamp-style="surprised"] { border-color: #aec5d8; background: #f4f9fd; color: #4d779f; }
.stamp-choice[data-stamp-style="boss"] { border-color: #b4ceb8; background: #f6fbf4; color: #518566; }
.stamp-choice img { width: 52px; height: 52px; border: 1px solid currentColor; border-radius: 50%; object-fit: cover; filter: grayscale(1) sepia(.6); }
.stamp-choice span { display: flex; flex-direction: column; gap: 3px; }
.stamp-choice strong { font-weight: 850; font-size: 14px; }
.stamp-choice small { font-size: 10px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dialog-actions button { min-height: 43px; border-radius: 9px; padding: 0 16px; font-size: 13px; font-weight: 760; }
.save-button { border: 0; background: #65517c; color: white; flex: 1; }
.delete-button { border: 1px solid #efd8d9; background: #fff7f7; color: #a36364; }
.toast { position: fixed; bottom: max(10px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 10; width: min(calc(100% - 24px), 460px); border-radius: 9px; background: #312e38; box-shadow: 0 9px 30px #29212e58; color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.toast button { border: 0; background: transparent; color: #dbcbf2; font-weight: 800; }
@media (max-height: 660px) { .app-shell { gap: 7px; padding-top: max(6px, env(safe-area-inset-top)); } .topbar { flex-basis: 39px; } .sheet { padding-top: 10px; } .day-header, .other-header { height: 59px; } .list-heading { flex-basis: 28px; } .sheet-footer { flex-basis: 34px; } .primary-actions { flex-basis: 43px; } .view-nav { flex-basis: 37px; } .day-stamp { flex-basis: 72px; height: 72px; width: min(100% - 10px, 205px); margin: 2px 0 5px; } .stamp-portrait { width: 51px; height: 51px; flex-basis: 51px; } .stamp-copy strong { font-size: 16px; } .stamp-copy small { font-size: 6px; margin-top: 4px; } .settings { gap: 3px; } .settings h2 { font-size: 14px; } .settings p { margin-bottom: 4px; } .font-option, .settings-actions button, .calendar-block button { min-height: 35px; } }
@media (max-height: 660px) { .account-link { min-height: 34px; padding: 5px 8px; } .sync-panel { gap: 5px; } .sync-icon { font-size: 35px; } .sync-note h2 { font-size: 22px; } .sync-note p { font-size: 10px; margin-bottom: 5px; } .sync-note .sync-status { padding: 5px; } .sync-form, .sync-connected { gap: 4px; } .sync-form input, .sync-main-button, .sync-quiet-button { min-height: 35px; } }
@media (max-height: 460px) { .other-header h1 { font-size: 20px; } .other-header p, .settings p, .sync-icon, .sync-note > p:not(.sync-status) { display: none; } .settings-block { padding: 2px 1px; } .settings h2 { font-size: 12px; } .account-link { min-height: 30px; } .sync-note h2 { font-size: 18px; } .sync-form label { font-size: 10px; } .sync-form input, .sync-main-button, .sync-quiet-button { min-height: 28px; padding: 3px 7px; } }
@media (max-height: 460px) { .sheet { padding-top: 7px; } .day-header, .other-header { height: 45px; } .list-heading { flex-basis: 22px; } .tag-filter { flex-basis: 23px; margin-bottom: 0; } .tag-filter button { height: 22px; } .sheet-footer { flex-basis: 25px; } .date-button > span { font-size: 20px; } .round-arrow { height: 35px; } .day-stamp { display: none; } .finish-button.stamped { display: flex; align-items: center; justify-content: center; gap: 3px; border: 3px double #9c5974; background: radial-gradient(circle at 8px 8px, #9c597477 1px, transparent 1.8px) 0 0 / 17px 19px, #fff6f8; transform: rotate(-2deg); font-size: 0; } .finish-button.stamped::before { content: ""; width: 25px; height: 25px; flex: 0 0 25px; border: 1px solid #9c5974; border-radius: 50%; background: url("./assets/kitty-reference.png") center / cover; filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(275deg) contrast(1.4); } .finish-button.stamped::after { content: "DIA FINALIZADO ↺"; font-size: 9px; font-weight: 950; color: #87526d; line-height: 1.1; } }
@media (max-width: 340px) { .app-shell { padding-left: 8px; padding-right: 8px; } .sheet { padding-left: 40px; padding-right: 9px; } .sheet::before { left: 32px; } .sheet::after { left: 35px; } .paper-holes { left: 6px; } .day-header { gap: 1px; } .round-arrow { width: 26px; flex-basis: 26px; font-size: 32px; } .date-button > span { font-size: 18px; } .date-button small { font-size: 9px; letter-spacing: .3px; white-space: nowrap; } .font-cursive .task-title { font-size: min(var(--cursive-size), 19px); } .settings-actions button { font-size: 10px; } .finish-button { flex-basis: 109px; font-size: 10px; } .add-button { font-size: 12px; } }
@media (min-width: 700px) { body { background: #eae5de; } .app-shell { padding: 18px 16px; } }
@media (prefers-reduced-motion: no-preference) { .round-arrow, .view-arrow { transition: transform .12s; } .sheet { transition: box-shadow .2s; } }
@media (prefers-reduced-motion: reduce) { .day-stamp.just-stamped { animation: none; } }
@media (max-height: 660px) { .time-summary { flex-basis: 116px; padding: 7px 10px; } .time-summary strong { font-size: 34px; } .time-ledger-heading { flex-basis: 27px; } .time-footnote { flex-basis: 23px; } }
@media (max-height: 460px) { .time-summary { flex-basis: 66px; padding: 4px 8px; } .time-summary strong { font-size: 22px; } .time-summary-label { font-size: 8px; } .time-status { display: none; } .time-goal, .time-balance { font-size: 9px; } .time-ledger-heading { flex-basis: 15px; font-size: 10px; } .time-entry { min-height: 40px; } .time-entry-hour { font-size: 22px; } .time-footnote { display: none; } .finish-button.stamped[data-stamp="surprised"] { border-color: #4d779f; background-color: #f3f8fd; } .finish-button.stamped[data-stamp="surprised"]::before { border-color: #4d779f; background-image: url("./assets/dog-surprised.png"); filter: grayscale(1) sepia(.8) saturate(2) hue-rotate(163deg); } .finish-button.stamped[data-stamp="surprised"]::after { content: "SOBREVIVI AO DIA ↺"; color: #4d779f; } .finish-button.stamped[data-stamp="boss"] { border-color: #518566; background-color: #f4faf4; } .finish-button.stamped[data-stamp="boss"]::before { border-color: #518566; background-image: url("./assets/dog-boss.png"); filter: grayscale(1) sepia(.8) saturate(2) hue-rotate(67deg); } .finish-button.stamped[data-stamp="boss"]::after { content: "DIA APROVADO ↺"; color: #518566; } }
@media (max-width: 340px) { .time-summary { padding-left: 8px; padding-right: 8px; gap: 1px 2px; } .time-balance { font-size: 9px; } .time-goal { font-size: 9px; } .time-entry-hour { font-size: 22px; } }
@media (max-width: 340px) { #recordNowButton { font-size: 11px; } #recordNowButton span { font-size: 17px; margin-right: 1px; } }

/* Folha de meia-noite: papel azul-petróleo, linhas de tinta clara e luz de abajur. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #1c272b;
  --paper: #2c3c3e;
  --ink: #f3ead9;
  --quiet: #b7c2bd;
  --rule: #52656a;
  --accent: #e2c18e;
  --accent-pale: #3d4b50;
}
[data-theme="dark"] body {
  background: radial-gradient(circle at 18% 7%, #3c4945 0, transparent 42%),
    linear-gradient(160deg, #26353a 2%, #182329 100%);
}
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] textarea:focus-visible { outline-color: #e7ba79; }
[data-theme="dark"] ::selection { color: #17292e; background: #e6c580; }
[data-theme="dark"] .brand-mark { color: #c6d3a1; }
[data-theme="dark"] .brand-dot { color: #e4acba; }
[data-theme="dark"] .brand small { color: #c6d2c5; }
[data-theme="dark"] .theme-toggle {
  border-color: #948769;
  background: #48514c;
  color: #ffdf9e;
  box-shadow: 0 0 0 3px #d5ac6e1b, inset 0 1px #ffffff1c;
}
[data-theme="dark"] .today-button { border-color: #536362; background: #35474b; color: #f3e4c6; box-shadow: 0 3px 10px #101b204d; }
[data-theme="dark"] .sheet {
  border: 1px solid #a3baa32d;
  background: radial-gradient(circle at 14% 0%, #42534c9c, transparent 46%),
    linear-gradient(150deg, #304342, #26353b 88%);
  box-shadow: inset 0 1px #f0efce18, 0 18px 38px #0b1519ad, 0 0 0 4px #e1c3910a;
}
[data-theme="dark"] .sheet::before { background: #c9878bb8; }
[data-theme="dark"] .sheet::after { opacity: .78; }
[data-theme="dark"] .paper-holes i { box-shadow: inset 1px 1px 3px #0d171dcc, 0 0 0 1px #788c7a38; }
[data-theme="dark"] .eyebrow { color: #e3c491; }
[data-theme="dark"] .round-arrow,
[data-theme="dark"] .view-arrow,
[data-theme="dark"] .page-arrows button { color: #e3c18c; }
[data-theme="dark"] .late-banner { background: #594941; color: #ffd3b2; }
[data-theme="dark"] .tag-filter button { background: #405253; color: #f1d4a7; }
[data-theme="dark"] .tag-filter > span { color: #d8cfba; }
[data-theme="dark"] .tag-filter[data-filter="financeiro"] > span { color: #b3d0ad; }
[data-theme="dark"] .tag-filter[data-filter="campanha"] > span { color: #edb5c3; }
[data-theme="dark"] .tag-filter[data-filter="relatorio"] > span { color: #b6d5e8; }
[data-theme="dark"] .tag-filter[data-filter="anotacoes"] > span { color: #d6c2f3; }
[data-theme="dark"] .task-check span { border-color: #bdc4ba; background: #314345bd; color: #c7e2ae; }
[data-theme="dark"] .task-row.done .task-check span { background: #43604b; border-color: #aed1ad; }
[data-theme="dark"] .task-row.done .task-title { color: #afbbb2; }
[data-theme="dark"] .task-time,
[data-theme="dark"] .task-date { color: #c8bfae; }
[data-theme="dark"] .task-row.is-overdue .task-date { color: #f2b6a3; }
[data-theme="dark"] .empty-state { color: #c2cdc0; }
[data-theme="dark"] .empty-doodle { color: #e3adae; }
[data-theme="dark"] .task-ink[class*="highlight-"] { text-shadow: 0 1px #22363ac7; }
[data-theme="dark"] .task-ink.highlight-mint { background: linear-gradient(transparent 48%, #80a978ab 48%, #80a978ab 89%, transparent 89%); }
[data-theme="dark"] .task-ink.highlight-rose { background: linear-gradient(transparent 48%, #b58096bc 48%, #b58096bc 89%, transparent 89%); }
[data-theme="dark"] .task-ink.highlight-blue { background: linear-gradient(transparent 48%, #729bbcbb 48%, #729bbcbb 89%, transparent 89%); }
[data-theme="dark"] .task-ink.highlight-yellow {
  color: #21322d;
  text-shadow: none;
  background: linear-gradient(transparent 8%, #e7f46b 8%, #e7f46b 94%, transparent 94%);
}
[data-theme="dark"] .tag-financeiro { background: #395742; color: #ddf5d0; }
[data-theme="dark"] .tag-campanha { background: #684352; color: #ffe0e9; }
[data-theme="dark"] .tag-relatorio { background: #385668; color: #d7edff; }
[data-theme="dark"] .tag-anotacoes { background: #514366; color: #eaddff; }
[data-theme="dark"] .day-stamp { background: #263638bf; }
[data-theme="dark"] .day-stamp:not([data-stamp]) { --stamp-ink: #e6a9bc; }
[data-theme="dark"] .day-stamp[data-stamp="kitty"] { --stamp-ink: #e6a9bc; }
[data-theme="dark"] .day-stamp[data-stamp="surprised"] { --stamp-ink: #a6c9e8; }
[data-theme="dark"] .day-stamp[data-stamp="boss"] { --stamp-ink: #afd5af; }
[data-theme="dark"] .stamp-portrait { background: #e8dfca; }
[data-theme="dark"] .time-summary { border-color: #638377; background: linear-gradient(120deg, #36544e, #304242 88%); box-shadow: 2px 3px 0 #162a2e; }
[data-theme="dark"] .time-summary-label,
[data-theme="dark"] .time-status { color: #bed2c2; }
[data-theme="dark"] .time-summary strong { color: #dbefd3; }
[data-theme="dark"] .time-goal,
[data-theme="dark"] .time-balance { color: #d7e8c7; }
[data-theme="dark"] .time-balance.negative { color: #ffd2ad; }
[data-theme="dark"] .time-ledger-heading { color: var(--ink); }
[data-theme="dark"] .time-ledger-heading small,
[data-theme="dark"] .time-footnote,
[data-theme="dark"] .time-entry-edit { color: #bbc5bb; }
[data-theme="dark"] .time-entry { background: #30444852; border-bottom-color: #596b6b; }
[data-theme="dark"] .time-entry-icon { border-color: #86b294; color: #b4d7aa; }
[data-theme="dark"] .entry-out .time-entry-icon { border-color: #c198aa; color: #efc0d1; }
[data-theme="dark"] .time-empty { color: #e0ceae; }
[data-theme="dark"] .font-option,
[data-theme="dark"] .settings-actions button,
[data-theme="dark"] .sync-quiet-button,
[data-theme="dark"] .sync-conflict-actions button { border-color: #687678; background: #344749; color: var(--ink); }
[data-theme="dark"] .font-option.selected { border-color: #d6b98a; background: #504a43; color: #ffe2ad; }
[data-theme="dark"] .calendar-block button { border-color: #667d70; background: #3b504c; color: #eceddb; }
[data-theme="dark"] .account-link { border-color: #c2a47e; background: #454846; color: #ffe0aa; }
[data-theme="dark"] .account-link span { color: #e1c99f; }
[data-theme="dark"] .sync-icon { color: #e3bb91; }
[data-theme="dark"] .sync-note p,
[data-theme="dark"] .sync-form label,
[data-theme="dark"] .sync-account { color: #ddd9c8; }
[data-theme="dark"] .sync-note .sync-status { background: #3d4b4d; color: #f0dfb7; }
[data-theme="dark"] .sync-form input,
[data-theme="dark"] dialog input:not([type="radio"]):not([type="checkbox"]),
[data-theme="dark"] dialog textarea { border-color: #71807e; background: #354749; color: var(--ink); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #b5c0b9; opacity: 1; }
[data-theme="dark"] .sync-conflict { border-color: #cc9d9d; background: #513f44; }
[data-theme="dark"] .sync-conflict small { color: #e2c9c9; }
[data-theme="dark"] .add-button,
[data-theme="dark"] .sync-main-button,
[data-theme="dark"] .save-button { background: #d2ae7d; color: #203134; box-shadow: 0 5px 14px #101b1c66; }
[data-theme="dark"] .finish-button { border-color: #c59cad; background: #493f49; color: #f2cbd7; }
[data-theme="dark"] .finish-button.stamped { background-color: #4e4051; }
[data-theme="dark"] .view-nav { color: #e8ddcb; }
[data-theme="dark"] .view-name small { color: #bac6b9; }
[data-theme="dark"] dialog { border: 1px solid #a4b49d61; background: #2f4142; box-shadow: 0 24px 75px #071015d9; }
[data-theme="dark"] dialog::backdrop { background: #101b22b9; }
[data-theme="dark"] dialog .optional,
[data-theme="dark"] .time-dialog-hint { color: #bfc9c0; }
[data-theme="dark"] .swatch.none { border-color: #a4afad; }
[data-theme="dark"] .highlight-picker input:checked + .swatch { outline-color: #eac38d; }
[data-theme="dark"] .tag-picker label span,
[data-theme="dark"] .time-kind-picker span { border-color: #778584; background: #3c5151; color: #f2e8d3; }
[data-theme="dark"] .tag-picker input:checked + span,
[data-theme="dark"] .time-kind-picker input:checked + span { border-color: #dcbd87; background: #595244; color: #ffebb9; }
[data-theme="dark"] .stamp-choice { border-color: #c39bab; background: #4c3d49; color: #f9d3e0; }
[data-theme="dark"] .stamp-choice[data-stamp-style="surprised"] { border-color: #93bad5; background: #35495a; color: #d6ebfa; }
[data-theme="dark"] .stamp-choice[data-stamp-style="boss"] { border-color: #a5c6a5; background: #3b5147; color: #e2f3d8; }
[data-theme="dark"] .delete-button { border-color: #a77f84; background: #574348; color: #ffd3d1; }
[data-theme="dark"] .toast { background: #415357; color: #fff3db; }
[data-theme="dark"] .toast button { color: #ffe2a9; }
[data-theme="dark"] .finish-button.stamped::after { color: #f0cada; }
[data-theme="dark"] .finish-button.stamped[data-stamp="surprised"]::after { color: #d6ebfa; }
[data-theme="dark"] .finish-button.stamped[data-stamp="boss"]::after { color: #e2f3d8; }
@media (max-width: 340px) { .top-actions { gap: 4px; } .today-button { padding: 8px 9px; } }