/* =========================================================
   Meu Planner — estilos
   Temas: gatinhos | naruto   ×   modo: light | dark
   ========================================================= */

:root {
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --font-kanji: 'Yuji Syuku', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS Mincho', serif;
  --font-book: Georgia, 'Times New Roman', serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 340ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --z-deco: 0; --z-card: 1; --z-nav: 20; --z-top: 30; --z-toast: 200; --z-burst: 300;

  --tabbar-h: 64px;
  --topbar-h: 56px;
  --row-h: 40px;
}
@media (pointer: coarse) { :root { --row-h: 44px; } }

/* ---------- Gatinhos · dia ---------- */
html[data-theme="gatinhos"] {
  color-scheme: light;
  --font-display: 'DM Serif Display', Georgia, serif;
  --display-weight: 400;
  --sec-size: 1.28rem;
  --radius: 18px; --radius-sm: 12px; --chk-radius: 6px;

  --bg: #F6ECE7;
  --paper: #FDF8F3;
  --card: #FFFCF8;
  --line: #E0B0AC;
  --line-soft: #EFD8D4;
  --rule: #E3CFCA;
  --dot: #D5BEB9;
  --ink: #3A3034;
  --ink-soft: #6B5C61;
  --title-a: #B0534F;
  --title-b: #3F566B;
  --accent: #B8564F;
  --accent-strong: #99423C;
  --on-accent: #FFFFFF;
  --accent-soft: #F7DEDB;
  --pill-1: #F6DCD9; --pill-2: #DDE5EC; --pill-3: #F4E6D2; --pill-4: #E2ECDF;
  --pill-ink: #3A3034;
  --success: #4F7D53; --danger: #B03A34;
  --shadow: 0 1px 2px rgba(120, 70, 60, .06), 0 8px 24px rgba(120, 70, 60, .08);
  --sheet-glow-1: rgba(242, 190, 190, .45);
  --sheet-glow-2: rgba(200, 214, 228, .45);
}

/* ---------- Cores das ilustrações (valem nos dois temas) ---------- */
:root {
  --a-fur: #F2A65E; --a-stripe: #D9772F; --a-white: #FFF7EE; --a-ear: #F4B3AE; --a-nose: #E7858F;
  --a-line: #5B3B30; --a-blush: #F59C9C; --a-cushion: #F3CACB; --a-ging: #E39AA0;
  --a-leaf: #6C896E; --a-leaf2: #93AD91; --a-book1: #EDC3C2; --a-book2: #BFCFDC; --a-book3: #F1DEC4;
  --a-booktxt: #6C4D4A; --a-pages: #FFF9F0; --a-mug: #F8DCD8; --a-mug-d: #E9BDB8;
  --a-flower: #FFF4F1; --a-flower-c: #E6AFA5;

  --n-red: #C8412F; --n-red2: #E0643F; --n-navy: #25355A; --n-navy2: #3C5080;
  --n-wood: #5A3A25; --n-wood2: #7E5537; --n-paper: #F4E5C8; --n-paper-e: #CDB18A;
  --n-steel: #373C47; --n-steel-hi: #7A8394; --n-sun: #E0592F; --n-sun-hi: #F39A63;
  --n-cloud: #EBD9B8; --n-cloud-l: #CFB182; --n-bowl: #FCF7EF; --n-broth: #E2A962;
  --n-noodle: #F7DF9C; --n-egg: #FFFFFF; --n-yolk: #F3A23C; --n-nori: #2E3A30; --n-onion: #6CA35A;
  --n-pink: #E4789A; --n-mtn: #C9B393; --n-mtn2: #A38D70; --n-roof: #A23B30; --n-house: #EADBC3;
  --n-kanji: #231C18; --n-rope: #8A6A48;

  --w-face: #ECE9D8; --w-hi: #FFFFFF; --w-sh: #808080; --w-title1: #3A6FD8; --w-title2: #14479E;
  --w-paper: #FFFFFF; --w-ink: #1A1A1A; --w-sky: #4E9AE8; --w-sky2: #8FC6F2; --w-hill: #6FAE3E; --w-hill2: #4E8C2C;
  --w-cloud: #FFFFFF; --w-close: #C4463A; --w-folder: #F6C860; --w-folder2: #E0A93F; --w-floppy: #3B3B3B;
  --w-yellow: #F5D14E; --w-red2: #E0574A; --w-blue2: #3A6FD8; --w-green2: #49A84E; --w-cursor: #FFFFFF;

  --g-line: #1B4FA0; --g-white: #FFFFFF; --g-dome: #2C6FC4; --g-sea: #4A8FD6; --g-sun: #F2B33D;
  --g-stem: #6E8F3E; --g-leaf: #7FA24E; --g-olive: #5F7A3A; --g-olive2: #93AE60; --g-lemon: #F5C93C;
  --g-paper2: #FFFDF4; --g-tree: #7FA24E;
}
html[data-mode="dark"] {
  --a-fur: #E99B57; --a-stripe: #C8692A; --a-white: #F4E6D8; --a-ear: #E0A09B; --a-nose: #DB7A85;
  --a-line: #3A241C; --a-blush: #E68A8A; --a-cushion: #6E4549; --a-ging: #8E5A5F;
  --a-leaf: #6E8E70; --a-leaf2: #56705A; --a-book1: #7E4E50; --a-book2: #435A70; --a-book3: #7A6448;
  --a-booktxt: #F6E7DA; --a-pages: #E9DCCB; --a-mug: #6C4A4C; --a-mug-d: #58393B;
  --a-flower: #EADAD6; --a-flower-c: #C98E86;

  --n-red: #C4452F; --n-red2: #D9603E; --n-navy: #3A4F7C; --n-navy2: #50679A;
  --n-wood: #4A3020; --n-wood2: #6A472D; --n-paper: #E6D5B4; --n-paper-e: #A88F68;
  --n-steel: #1E222B; --n-steel-hi: #5A6477; --n-sun: #E9DBAE; --n-sun-hi: #FFF6D8;
  --n-cloud: #26324A; --n-cloud-l: #3A4868; --n-bowl: #E9E0D2; --n-broth: #B57F43;
  --n-noodle: #E0C77E; --n-egg: #F4EEE4; --n-yolk: #E0913A; --n-nori: #1A221C; --n-onion: #5E8E4E;
  --n-pink: #D06D8C; --n-mtn: #2A3650; --n-mtn2: #3A4868; --n-roof: #7E2E27; --n-house: #3A4560;
  --n-kanji: #231C18; --n-rope: #7A6048;

  --w-face: #3C3C3C; --w-hi: #5E5E5E; --w-sh: #1A1A1A; --w-title1: #2B4C8C; --w-title2: #15305E;
  --w-paper: #1F1F1F; --w-ink: #E8E8E8; --w-sky: #1B3A5C; --w-sky2: #2E5A82; --w-hill: #2F5A24; --w-hill2: #203E18;
  --w-cloud: #43607E; --w-close: #A03A30; --w-folder: #C89B3C; --w-folder2: #A87E2C; --w-floppy: #2A2A2A;
  --w-yellow: #D9B845; --w-red2: #C4463A; --w-blue2: #4C7FD0; --w-green2: #3E8C42; --w-cursor: #EDEDED;

  --g-line: #7FB5F0; --g-white: #D9E4F0; --g-dome: #3C74C8; --g-sea: #2E5C90; --g-sun: #EFC76A;
  --g-stem: #7E9B50; --g-leaf: #6E8B45; --g-olive: #8FA860; --g-olive2: #A8BE7C; --g-lemon: #E8BF45;
  --g-paper2: #16304C; --g-tree: #46683A;
}

/* ---------- Gatinhos · noite ---------- */
html[data-theme="gatinhos"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #1B1417;
  --paper: #231B1E;
  --card: #2B2226;
  --line: #74504F;
  --line-soft: #3F3034;
  --rule: #45373B;
  --dot: #5A474C;
  --ink: #F6EAE6;
  --ink-soft: #CFBAB7;
  --title-a: #F2A7A3;
  --title-b: #B6CADD;
  --accent: #EE9C98;
  --accent-strong: #F6B8B4;
  --on-accent: #2A1416;
  --accent-soft: #46292C;
  --pill-1: #4A2E32; --pill-2: #2E3946; --pill-3: #45392B; --pill-4: #2F3E31;
  --pill-ink: #F6EAE6;
  --success: #8FC493; --danger: #FF8A80;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  --sheet-glow-1: rgba(120, 60, 70, .28);
  --sheet-glow-2: rgba(60, 80, 110, .25);
}

/* ---------- Naruto · dia ---------- */
html[data-theme="naruto"] {
  color-scheme: light;
  --font-display: 'Playfair Display', Georgia, serif;
  --display-weight: 900;
  --sec-size: 1.12rem;
  --radius: 10px; --radius-sm: 8px; --chk-radius: 3px;

  --bg: #E9D9BE;
  --paper: #F5EAD6;
  --card: #FBF4E6;
  --line: #C4483D;
  --line-soft: #DFC3A6;
  --rule: #D8C2A3;
  --dot: #C7AF8C;
  --ink: #2A2320;
  --ink-soft: #5D4F47;
  --title-a: #A62A26;
  --title-b: #1B2A44;
  --accent: #AE2F28;
  --accent-strong: #8C211C;
  --on-accent: #FFFFFF;
  --accent-soft: #F2D6C8;
  --pill-1: #A8322C; --pill-2: #22314F; --pill-3: #E8C3A4; --pill-4: #22314F;
  --pill-ink: #FFFFFF;
  --pill-ink-3: #2A2320;
  --success: #3F6E45; --danger: #A62A26;
  --shadow: 0 1px 2px rgba(80, 50, 20, .08), 0 8px 24px rgba(80, 50, 20, .1);
  --sheet-glow-1: rgba(214, 90, 60, .12);
  --sheet-glow-2: rgba(40, 60, 100, .08);
}

/* ---------- Naruto · noite ---------- */
html[data-theme="naruto"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #0C1320;
  --paper: #121B2B;
  --card: #172235;
  --line: #9A4640;
  --line-soft: #2A3650;
  --rule: #2C3953;
  --dot: #3A4865;
  --ink: #F2E6D0;
  --ink-soft: #C5B89F;
  --title-a: #F26B5C;
  --title-b: #EDDDBF;
  --accent: #E35D4F;
  --accent-strong: #F48476;
  --on-accent: #190E0C;
  --accent-soft: #3A2127;
  --pill-1: #A8342D; --pill-2: #33476E; --pill-3: #6A4A3A; --pill-4: #33476E;
  --pill-ink: #FFFFFF;
  --pill-ink-3: #F2E6D0;
  --success: #8CC792; --danger: #FF8A80;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .4);
  --sheet-glow-1: rgba(230, 90, 70, .10);
  --sheet-glow-2: rgba(90, 120, 190, .12);
}

/* ---------- Windows · dia ---------- */
html[data-theme="windows"] {
  color-scheme: light;
  --font-body: 'Inter', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  --font-script: 'Pixelify Sans', 'Segoe UI', monospace;
  --display-weight: 800;
  --sec-size: 1rem;
  --radius: 0; --radius-sm: 0; --chk-radius: 0;

  --bg: #3A6EA5;
  --paper: #ECE9D8;
  --card: #FFFFFF;
  --line: #9A9A8C;
  --line-soft: #D4D0C8;
  --rule: #D8D4CC;
  --dot: #C3BFB6;
  --ink: #141414;
  --ink-soft: #4C4C4C;
  --title-a: #0A3C8C;
  --title-b: #1B1B1B;
  --accent: #0A55B8;
  --accent-strong: #08428F;
  --on-accent: #FFFFFF;
  --accent-soft: #CFE2FA;
  --pill-1: #3A6FD8; --pill-2: #14479E; --pill-3: #7E97C9; --pill-4: #2F5FBE;
  --pill-ink: #FFFFFF;
  --success: #157A33; --danger: #C42B1C;
  --shadow: 2px 2px 0 rgba(0, 0, 0, .25);
  --sheet-glow-1: transparent; --sheet-glow-2: transparent;
}

/* ---------- Windows · noite ---------- */
html[data-theme="windows"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #16202C;
  --paper: #2E2E2E;
  --card: #1E1E1E;
  --line: #5A5A5A;
  --line-soft: #3E3E3E;
  --rule: #3A3A3A;
  --dot: #4A4A4A;
  --ink: #F2F2F2;
  --ink-soft: #BDBDBD;
  --title-a: #7CB7FF;
  --title-b: #E8E8E8;
  --accent: #4C9BFF;
  --accent-strong: #86BEFF;
  --on-accent: #08192B;
  --accent-soft: #23374D;
  --pill-1: #2B4C8C; --pill-2: #15305E; --pill-3: #45597A; --pill-4: #2B4C8C;
  --pill-ink: #FFFFFF;
  --success: #6FD48A; --danger: #FF8A80;
  --shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}

/* ---------- Grécia · dia ---------- */
html[data-theme="grecia"] {
  color-scheme: light;
  --font-display: 'Dancing Script', 'Brush Script MT', cursive;
  --font-script: 'Dancing Script', cursive;
  --display-weight: 700;
  --sec-size: 1.5rem;
  --radius: 14px; --radius-sm: 10px; --chk-radius: 50%;

  --bg: #E7EEF7;
  --paper: #FBF7EC;
  --card: #FFFDF6;
  --line: #A9C2DE;
  --line-soft: #CBDBEC;
  --rule: #CFDCEA;
  --dot: #B6CADF;
  --ink: #1B2A3A;
  --ink-soft: #55697C;
  --title-a: #14468F;
  --title-b: #2C6FC4;
  --accent: #14468F;
  --accent-strong: #0E3670;
  --on-accent: #FFFFFF;
  --accent-soft: #DCE8F8;
  --pill-1: #DCE8F8; --pill-2: #FBEFC6; --pill-3: #E4EFD8; --pill-4: #FADBD3;
  --pill-ink: #173B6B;
  --success: #3F7A46; --danger: #C43B2C;
  --shadow: 0 1px 2px rgba(30, 70, 130, .08), 0 10px 26px rgba(30, 70, 130, .1);
  --sheet-glow-1: rgba(180, 210, 240, .5); --sheet-glow-2: rgba(245, 220, 150, .3);
  --g-checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23FBF7EC'/%3E%3Cg fill='%2314468F'%3E%3Crect x='0' y='0' width='12' height='12'/%3E%3Crect x='24' y='0' width='12' height='12'/%3E%3Crect x='12' y='12' width='12' height='12'/%3E%3Crect x='36' y='12' width='12' height='12'/%3E%3Crect x='0' y='24' width='12' height='12'/%3E%3Crect x='24' y='24' width='12' height='12'/%3E%3Crect x='12' y='36' width='12' height='12'/%3E%3Crect x='36' y='36' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Grécia · noite ---------- */
html[data-theme="grecia"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #071726;
  --paper: #0E2440;
  --card: #143352;
  --line: #3E6D9E;
  --line-soft: #274764;
  --rule: #2A4B6E;
  --dot: #385C80;
  --ink: #F2EADA;
  --ink-soft: #B9C9DA;
  --title-a: #8FC0F0;
  --title-b: #F2D98A;
  --accent: #5A9BE0;
  --accent-strong: #8FC0F0;
  --on-accent: #06192E;
  --accent-soft: #1C3A5C;
  --pill-1: #1C3A5C; --pill-2: #3E3720; --pill-3: #24402C; --pill-4: #4A2A26;
  --pill-ink: #F2EADA;
  --success: #7FC98C; --danger: #FF8A80;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .45);
  --sheet-glow-1: rgba(40, 90, 150, .25); --sheet-glow-2: rgba(160, 130, 40, .16);
  --g-checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%230E2440'/%3E%3Cg fill='%235A9BE0'%3E%3Crect x='0' y='0' width='12' height='12'/%3E%3Crect x='24' y='0' width='12' height='12'/%3E%3Crect x='12' y='12' width='12' height='12'/%3E%3Crect x='36' y='12' width='12' height='12'/%3E%3Crect x='0' y='24' width='12' height='12'/%3E%3Crect x='24' y='24' width='12' height='12'/%3E%3Crect x='12' y='36' width='12' height='12'/%3E%3Crect x='36' y='36' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: var(--accent-strong); }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 .75em; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 800;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   Shell: sidebar, topbar, tabbar
   ========================================================= */
.app { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.main { min-width: 0; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
#view:focus { outline: none; }

.sidebar { display: none; }

.topbar {
  position: sticky; top: 0; z-index: var(--z-top);
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .brand-mini { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.topbar .brand-mini .logo { width: 34px; height: 34px; flex: none; }
.topbar .brand-mini b {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem;
  color: var(--title-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .next-alarm {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 800; font-size: .85rem; text-decoration: none; font-variant-numeric: tabular-nums;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ink-soft); text-decoration: none; font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  min-width: 0;
}
.tab .ind {
  display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.tab[aria-current="page"] { color: var(--accent-strong); }
.tab[aria-current="page"] .ind { background: var(--accent-soft); }
.tab:active .ind { transform: scale(.92); }

@media (min-width: 1024px) {
  .app { grid-template-columns: 252px minmax(0, 1fr); }
  .main { padding-bottom: 0; }
  .tabbar, .topbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    padding: 20px 14px 16px;
    background: var(--paper);
    border-right: 1px solid var(--line-soft);
  }
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 16px; text-decoration: none; color: inherit; }
.brand .logo { width: 44px; height: 44px; flex: none; }
.brand b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.45rem; line-height: 1.05; color: var(--title-b); }
.brand small { display: block; font-family: var(--font-script); font-size: 1.15rem; color: var(--title-a); line-height: 1; }
.nav-label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  padding: 14px 12px 4px; font-weight: 800;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 700;
  transition: background-color var(--dur-1) var(--ease-out);
}
.nav-item svg { color: var(--ink-soft); flex: none; }
@media (hover: hover) { .nav-item:hover { background: var(--accent-soft); } }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); }
.nav-item[aria-current="page"] svg { color: var(--accent-strong); }
.sidebar .side-foot { margin-top: auto; padding: 16px 4px 4px; display: grid; gap: 10px; }

/* =========================================================
   Botões e controles
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1), border-color var(--dur-1);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn:hover { border-color: var(--accent); } }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } }
.btn.ghost { background: transparent; border-color: transparent; }
@media (hover: hover) { .btn.ghost:hover { background: var(--accent-soft); } }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .9rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px; border: 0;
  background: transparent; color: var(--ink);
  transition: background-color var(--dur-1), transform var(--dur-1) var(--ease-out), color var(--dur-1);
}
.icon-btn:active { transform: scale(.92); }
@media (hover: hover) { .icon-btn:hover { background: var(--accent-soft); } }
.icon-btn.sm { width: 36px; height: 36px; border-radius: 10px; }
.icon-btn[aria-pressed="true"], .icon-btn.on { background: var(--accent-soft); color: var(--accent-strong); }
.icon-btn[disabled] { opacity: .35; cursor: not-allowed; }

.seg {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line-soft);
}
.seg button, .seg a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-weight: 800; font-size: .92rem;
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2);
}
.seg button[aria-checked="true"], .seg a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.seg.block { display: flex; width: 100%; }
.seg.block button { flex: 1; justify-content: center; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; }
.switch input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 50px; height: 30px; border-radius: 999px; background: var(--line-soft); position: relative;
  transition: background-color var(--dur-2) var(--ease-out); cursor: pointer;
}
.switch input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(20px); }
.switch .sw-text b { display: block; font-weight: 800; }
.switch .sw-text small { display: block; color: var(--ink-soft); font-size: .88rem; line-height: 1.35; }

.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > label, .field > .lbl { font-weight: 800; font-size: .92rem; }
.field .hint { color: var(--ink-soft); font-size: .85rem; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line-soft); background: var(--card); color: var(--ink); font-size: 1rem;
  transition: border-color var(--dur-1);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field .error { color: var(--danger); font-weight: 700; font-size: .88rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid var(--line-soft); background: var(--card); font-weight: 800; color: var(--ink-soft);
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}
.badge.soft { background: var(--accent-soft); color: var(--accent-strong); }

/* =========================================================
   Folha (página do planner)
   ========================================================= */
.sheet {
  position: relative; isolation: isolate;
  max-width: 1180px; margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-left)) 40px max(16px, env(safe-area-inset-right));
  background: var(--paper);
  min-height: 100%;
}
.sheet::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(420px 260px at 0% 0%, var(--sheet-glow-1), transparent 70%),
    radial-gradient(380px 240px at 100% 0%, var(--sheet-glow-2), transparent 70%),
    radial-gradient(360px 260px at 100% 100%, var(--sheet-glow-1), transparent 70%);
}
html[data-theme="naruto"] .sheet::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="naruto"][data-mode="dark"] .sheet::after { opacity: .35; mix-blend-mode: screen; }

@media (min-width: 768px) {
  .sheet {
    margin: 20px auto 28px; width: calc(100% - 32px);
    padding: 26px 28px 36px;
    border: 1.5px solid var(--line-soft); border-radius: 28px;
    box-shadow: var(--shadow);
  }
  html[data-theme="naruto"] .sheet { border-radius: 14px; border-color: color-mix(in srgb, var(--line) 55%, transparent); }
}

.sheet-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.sheet-head .art { pointer-events: none; }
.sheet-head .art-left { display: none; }
.sheet-head .art-right { width: 108px; align-self: start; }
.head-center { min-width: 0; }
@media (min-width: 768px) {
  .sheet-head { grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) minmax(130px, 210px); gap: 16px; }
  .sheet-head .art-left { display: block; }
  .sheet-head .art-right { width: auto; }
  .head-center { text-align: center; }
}
.art svg { display: block; width: 100%; height: auto; overflow: visible; }

.page-title {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: clamp(2.05rem, 4.2vw + 1rem, 4.1rem); line-height: .98; letter-spacing: -.01em;
  text-wrap: balance;
}
.page-title .t-a { color: var(--title-a); }
.page-title .t-b { color: var(--title-b); }
.title-orn { display: flex; align-items: center; gap: 10px; color: var(--accent); margin: 8px 0 12px; }
.title-orn::before, .title-orn::after { content: ''; height: 1.5px; flex: 0 1 70px; background: currentColor; opacity: .55; }
.title-orn::before { display: none; }
@media (min-width: 768px) { .title-orn { justify-content: center; } .title-orn::before { display: block; } }

.datebar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (min-width: 768px) { .datebar { justify-content: center; } }
.date-pill {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: var(--pill-2); border: 1.5px solid transparent;
}
html[data-theme="naruto"] .date-pill { background: var(--card); border-color: var(--line); }
.date-pill .icon-btn { width: 40px; height: 40px; border-radius: 999px; }
.date-pick { position: relative; display: inline-flex; }
.date-pick .date-label {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 10px; border: 0; background: transparent; border-radius: 12px;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.12rem; line-height: 1.1;
  color: var(--title-b); font-variant-numeric: tabular-nums; min-width: 9ch;
}
html[data-theme="naruto"] .date-pick .date-label { font-weight: 800; }
.date-pick .date-label small { font-family: var(--font-body); font-size: .72rem; font-weight: 800; color: var(--ink-soft); letter-spacing: .02em; }
.date-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.date-pick input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.wd-row { display: flex; gap: 5px; }
.wd {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 800; font-size: .88rem; text-decoration: none;
  transition: background-color var(--dur-1), transform var(--dur-1) var(--ease-spring);
}
.wd[aria-current="date"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wd.today:not([aria-current]) { box-shadow: 0 0 0 2px var(--accent-soft); }
.wd:active { transform: scale(.9); }

.progress-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 6px;
  border-radius: 999px; background: var(--card); border: 1.5px solid var(--line-soft);
  font-weight: 800; font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.ring { --p: 0; width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line-soft) 0);
  -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px);
  transition: --p var(--dur-3);
}

.plan-seg { display: flex; justify-content: center; margin: 0 0 14px; }
@media (min-width: 1024px) { .plan-seg { display: none; } }

.sheet-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center;
  margin-top: 28px; font-family: var(--font-script); font-size: 1.4rem; line-height: 1.2; color: var(--ink-soft);
}
.sheet-foot .orn { color: var(--accent); display: inline-grid; }
.sheet-foot::before, .sheet-foot::after { content: ''; height: 1.5px; flex: 0 1 80px; background: var(--line); opacity: .5; }

.deco { position: absolute; z-index: var(--z-deco); pointer-events: none; display: none; }
@media (min-width: 768px) { .deco { display: block; } }
.deco-bl { left: -14px; bottom: -10px; width: 130px; }
.deco-br { right: -12px; bottom: -8px; width: 120px; }
.deco-tr { right: -16px; top: 140px; width: 70px; }
.deco-ml { left: -18px; top: 42%; width: 64px; }

/* =========================================================
   Grades de layout
   ========================================================= */
.sheet-body { position: relative; z-index: var(--z-card); }
.grid { display: grid; gap: 16px; }
.col { display: contents; }
@media (min-width: 768px) {
  .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .cols-2 { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
  .cols-2e { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .span-2 { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .span-3 { grid-column: 1 / -1; }
}
.o-1 { order: 1; } .o-2 { order: 2; } .o-3 { order: 3; } .o-4 { order: 4; } .o-5 { order: 5; } .o-6 { order: 6; } .o-7 { order: 7; } .o-8 { order: 8; }
@media (min-width: 768px) { .grid > [class*="o-"], .col > [class*="o-"] { order: 0; } }

/* =========================================================
   Cartões e cabeçalhos de seção
   ========================================================= */
.card {
  position: relative; min-width: 0;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px 14px;
  transition: border-color var(--dur-2), background-color var(--dur-3);
}
html[data-theme="gatinhos"] .card { border-color: color-mix(in srgb, var(--line) 80%, transparent); }
html[data-theme="naruto"] .card { background: color-mix(in srgb, var(--card) 88%, transparent); }
.card.is-today { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; min-height: 40px; }
.card-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.sec-h {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 5px 16px; margin-left: -4px;
  border-radius: 999px; background: var(--pill-1); color: var(--pill-ink);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--sec-size); line-height: 1.25;
}
.sec-h .sec-ico { display: inline-grid; color: var(--accent); order: 2; }
.tone-2 .sec-h { background: var(--pill-2); }
.tone-3 .sec-h { background: var(--pill-3); }
.tone-4 .sec-h { background: var(--pill-4); }

html[data-theme="naruto"] .sec-h {
  background: none; color: var(--pill-ink); border-radius: 0;
  padding: 7px 34px 7px 12px; margin-left: -8px; letter-spacing: .01em; font-weight: 800;
}
html[data-theme="naruto"] .sec-h::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pill-1);
  -webkit-mask: url(../img/brush.svg) center / 100% 100% no-repeat; mask: url(../img/brush.svg) center / 100% 100% no-repeat;
}
html[data-theme="naruto"] .tone-2 .sec-h::before, html[data-theme="naruto"] .tone-4 .sec-h::before { background: var(--pill-2); }
html[data-theme="naruto"] .tone-3 .sec-h::before { background: var(--pill-3); }
html[data-theme="naruto"] .tone-3 .sec-h { color: var(--pill-ink-3); }
html[data-theme="naruto"] .sec-h .sec-ico { order: 0; color: currentColor; }

.card-note { font-family: var(--font-script); font-size: 1.2rem; color: var(--ink-soft); line-height: 1.1; }
.card-deco { position: absolute; pointer-events: none; z-index: 0; }
.card > *:not(.card-deco) { position: relative; z-index: 1; }
.card-deco.br { right: 8px; bottom: 6px; width: 104px; }
.card-deco.tr { right: 10px; top: 10px; width: 70px; }
.card.has-deco .list .row:nth-last-child(-n+3) { padding-right: 96px; }
@media (max-width: 520px) {
  .card-deco { display: none; }
  .card.has-deco .list .row { padding-right: 0; }
}

.muted { color: var(--ink-soft); }
.empty {
  display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px 8px; color: var(--ink-soft);
}
.empty .art { width: 150px; }
.empty b { color: var(--ink); font-size: 1.05rem; }

/* =========================================================
   Linhas de lista (estilo papel)
   ========================================================= */
.list { display: grid; }
.row {
  display: flex; align-items: center; gap: 6px; min-height: var(--row-h);
  border-bottom: 1.5px dotted var(--rule);
  transition: border-color var(--dur-1), background-color var(--dur-2);
}
.row:focus-within { border-bottom-style: solid; border-bottom-color: var(--accent); }
.row .line {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 8px 2px; font-size: 1rem; color: var(--ink);
  transition: color var(--dur-2);
}
.row .line::placeholder { color: var(--ink-soft); opacity: .55; }
.row.done .line { text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; color: var(--ink-soft); }

.chk { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: -6px; flex: none; cursor: pointer; }
@media (pointer: coarse) { .chk { width: 42px; height: 42px; margin-left: -9px; } }
.chk input {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--accent); border-radius: var(--chk-radius); background: var(--card);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.chk input::after {
  content: ''; width: 11px; height: 6px; margin-top: -3px;
  border-left: 2.6px solid var(--on-accent); border-bottom: 2.6px solid var(--on-accent);
  transform: rotate(-45deg) scale(0); transition: transform var(--dur-2) var(--ease-spring);
}
.chk input:checked { background: var(--accent); }
.chk input:checked::after { transform: rotate(-45deg) scale(1); }
.chk input:active { transform: scale(.86); }
.chk input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.bullet { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin: 0 10px 0 6px; flex: none; opacity: .85; }
html[data-theme="naruto"] .bullet { border-radius: 2px; transform: rotate(45deg); width: 9px; height: 9px; }

.row-btn {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; border: 0;
  background: transparent; color: var(--ink-soft); font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-1), background-color var(--dur-1);
}
.row.has-text .row-btn, .row .row-btn.on { opacity: .6; pointer-events: auto; }
.row:focus-within .row-btn, .row .row-btn.on { opacity: 1; }
.row .row-btn.on { color: var(--accent-strong); background: var(--accent-soft); }
@media (hover: hover) { .row:hover .row-btn { opacity: 1; } .row-btn:hover { background: var(--accent-soft); } }

.sub-label {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 2px;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ink-soft);
}

/* Meu Dia (horários) */
.hours .row { gap: 10px; }
.hours .hour {
  width: 52px; flex: none; text-align: right; padding-right: 10px; margin-right: 2px;
  border-right: 1.5px dotted var(--line); align-self: stretch; display: grid; align-items: center;
  font-weight: 800; font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.hours .row.now { background: linear-gradient(90deg, var(--accent-soft), transparent 85%); border-radius: 8px 8px 0 0; }
.hours .row.now .hour { color: var(--accent-strong); }

.add-row {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 40px; padding: 0 12px 0 8px;
  border: 1.5px dashed var(--line); border-radius: 999px; background: transparent; color: var(--accent-strong); font-weight: 800; font-size: .9rem;
}
@media (hover: hover) { .add-row:hover { background: var(--accent-soft); } }

/* =========================================================
   Anotações (texto / escrita)
   ========================================================= */
.notes-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.notes-area {
  display: block; width: 100%; min-height: 168px; resize: vertical;
  border: 0; border-radius: 10px; padding: 0 4px; outline: none;
  background-color: transparent;
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.6px);
  background-size: 24px 24px; background-position: 0 12px;
  font-size: 1rem; line-height: 24px; color: var(--ink);
}
.notes-area:focus { box-shadow: 0 0 0 2px var(--accent-soft); }
.notes-area.lined {
  background-image: linear-gradient(to bottom, transparent 23px, var(--rule) 23px, var(--rule) 24px);
  background-size: 100% 24px; background-position: 0 0;
}

/* =========================================================
   Motor de escrita (ink)
   ========================================================= */
.ink { display: grid; gap: 8px; }
.ink-bar {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px; border-radius: 16px; background: var(--card); border: 1.5px solid var(--line-soft);
}
.ink-bar .sep { width: 1px; height: 26px; background: var(--line-soft); margin: 0 4px; }
.ink-bar .grow { flex: 1; }
.swatch {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; flex: none;
}
.swatch span { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); transition: transform var(--dur-2) var(--ease-spring); }
.swatch[aria-pressed="true"] span { transform: scale(1.15); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.size-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; display: grid; place-items: center; }
.size-btn span { border-radius: 50%; background: var(--ink); }
.size-btn[aria-pressed="true"] { background: var(--accent-soft); }

.ink-surface {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 12px; background-color: var(--card);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  --cell: 24px;
}
.ink-surface canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ink-surface .ink-live { cursor: crosshair; }
.ink-surface.bg-dots { background-image: radial-gradient(circle, var(--dot) calc(var(--cell) * .06), transparent calc(var(--cell) * .075)); background-size: var(--cell) var(--cell); background-position: calc(var(--cell) / 2) calc(var(--cell) / 2); }
.ink-surface.bg-lines { background-image: linear-gradient(to bottom, transparent calc(var(--cell) - 1px), var(--rule) calc(var(--cell) - 1px), var(--rule) var(--cell)); background-size: 100% var(--cell); }
.ink-surface.bg-grid { background-image: linear-gradient(to bottom, transparent calc(var(--cell) - 1px), var(--rule) calc(var(--cell) - 1px)), linear-gradient(to right, transparent calc(var(--cell) - 1px), var(--rule) calc(var(--cell) - 1px)); background-size: var(--cell) var(--cell); }
.ink-surface.bg-blank { background-image: none; }
.card .ink-surface { border: 1.5px dashed var(--line-soft); }
.ink-hint { font-size: .82rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }

/* Editor do caderno */
.nb-editor {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top) - var(--tabbar-h) - env(safe-area-inset-bottom));
  padding: 8px max(8px, env(safe-area-inset-left)) 8px max(8px, env(safe-area-inset-right));
  gap: 8px;
}
@media (min-width: 1024px) { .nb-editor { height: 100dvh; padding: 12px 16px; } }
body.focus-mode .topbar, body.focus-mode .tabbar { display: none; }
body.focus-mode .main { padding-bottom: 0; }
body.focus-mode .nb-editor { height: 100dvh; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.nb-top { display: flex; align-items: center; gap: 6px; }
.nb-top .nb-title {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 6px 8px; border-radius: 10px;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3rem; color: var(--title-b);
}
.nb-top .nb-title:focus { background: var(--card); box-shadow: 0 0 0 2px var(--accent-soft); }
.nb-top .pager { font-weight: 800; color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.nb-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.nb-stage .ink-surface { box-shadow: var(--shadow); border: 1.5px solid var(--line-soft); }
.nb-editor .ink-bar { justify-content: center; }
@media (max-width: 767px) { .nb-editor .ink-bar { order: 3; } }

.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.nb-card {
  display: grid; gap: 8px; text-align: left; padding: 10px; border-radius: var(--radius);
  border: 1.5px solid var(--line-soft); background: var(--card); color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1);
}
.nb-card:active { transform: scale(.98); }
@media (hover: hover) { .nb-card:hover { border-color: var(--accent); } }
.nb-card .thumb { position: relative; border-radius: 8px; overflow: hidden; background-color: var(--paper); border: 1px solid var(--line-soft); aspect-ratio: 1 / 1.414; }
.nb-card .thumb.land { aspect-ratio: 1.414 / 1; }
.nb-card .thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb-card b { font-weight: 800; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-card small { color: var(--ink-soft); }
.nb-card.new { place-items: center; align-content: center; min-height: 200px; border-style: dashed; color: var(--accent-strong); font-weight: 800; }
.nb-card.new .plus { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; }

/* =========================================================
   Semana, Mês, Hábitos, Refeições, Finanças
   ========================================================= */
.day-card .card-head { margin-bottom: 4px; }
.day-date {
  display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--pill-1); color: var(--pill-ink); border: 0; font-weight: 800; font-size: .88rem; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
html[data-theme="naruto"] .day-date { background: var(--accent-soft); color: var(--accent-strong); }
.days-grid { display: grid; gap: 16px; }
@media (min-width: 1180px) { .days-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hab-week { display: grid; grid-template-columns: minmax(0, 1fr) repeat(7, 34px); align-items: center; column-gap: 2px; }
.hab-week .hw-h { text-align: center; font-weight: 800; font-size: .8rem; color: var(--ink-soft); padding: 4px 0; }
.hab-week .hw-h.today { color: var(--accent-strong); }
.hab-week .hw-name { border: 0; border-bottom: 1.5px dotted var(--rule); background: transparent; outline: none; min-height: var(--row-h); padding: 6px 2px; min-width: 0; }
.hab-week .hw-name:focus { border-bottom: 1.5px solid var(--accent); }
.hcell {
  display: grid; place-items: center; width: 34px; height: 36px; border: 0; background: transparent; padding: 0;
}
.hcell span {
  width: 22px; height: 22px; border: 2px solid var(--accent); border-radius: var(--chk-radius);
  display: grid; place-items: center; color: var(--on-accent);
  transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-spring);
}
.hcell[aria-pressed="true"] span { background: var(--accent); transform: scale(1.06); }
.hcell:active span { transform: scale(.85); }

/* Calendário mensal */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-radius: var(--radius-sm); overflow: hidden; }
.cal-h {
  text-align: center; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.05rem;
  padding: 8px 2px; background: var(--pill-1); color: var(--pill-ink); margin: 0 2px 6px; border-radius: 10px;
}
html[data-theme="naruto"] .cal-h { font-weight: 800; border-radius: 4px; }
html[data-theme="naruto"] .cal-h.we { background: var(--pill-2); }
.cal-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
html[data-theme="gatinhos"] .cal-cells { border-color: var(--title-b); border-color: color-mix(in srgb, var(--title-b) 55%, transparent); }
.cal-cell {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  min-height: 64px; padding: 5px; border: 0; background: transparent; color: inherit; min-width: 0;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  transition: background-color var(--dur-1);
}
html[data-theme="gatinhos"] .cal-cell { border-color: color-mix(in srgb, var(--title-b) 30%, transparent); }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.out { background: color-mix(in srgb, var(--line-soft) 25%, transparent); cursor: default; }
@media (hover: hover) { .cal-cell:not(.out):hover { background: var(--accent-soft); } }
.cal-cell .num {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 7px;
  background: var(--pill-1); color: var(--pill-ink); font-weight: 800; font-size: .8rem; font-variant-numeric: tabular-nums;
}
html[data-theme="gatinhos"] .cal-cell .num { background: var(--accent-soft); color: var(--accent-strong); }
html[data-theme="naruto"] .cal-cell .num { background: transparent; color: var(--accent-strong); padding: 0 2px; }
.cal-cell.today .num { background: var(--accent); color: var(--on-accent); }
.cal-cell .snip { font-size: .78rem; line-height: 1.25; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cal-cell .dots { display: flex; gap: 3px; margin-top: auto; flex-wrap: wrap; }
.cal-cell .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }
.cal-cell .dots i.task { background: var(--title-b); }
.cal-cell .dots i.done { background: var(--success); }
@media (min-width: 768px) { .cal-cell { min-height: 92px; padding: 7px; } .cal-cell .snip { font-size: .85rem; -webkit-line-clamp: 3; } }
@media (max-width: 420px) { .cal-h { font-size: .85rem; margin: 0 1px 6px; } .cal-cell .snip { display: none; } }

/* Rastreador de hábitos */
.tracker { container-type: inline-size; }
.hb-legend { display: none; }
.hb { display: grid; gap: 14px; }
.hb-row { display: grid; gap: 8px; padding: 10px 0 14px; border-bottom: 1.5px dotted var(--rule); }
.hb-row:last-child { border-bottom: 0; }
.hb-top { display: flex; align-items: center; gap: 8px; }
.hb-top .ic { color: var(--accent); display: inline-grid; }
.hb-name { flex: 1; min-width: 0; border: 0; border-bottom: 1.5px dotted var(--rule); background: transparent; outline: none; font-weight: 700; padding: 6px 2px; min-height: 40px; }
.hb-name:focus { border-bottom: 1.5px solid var(--accent); }
.hb-stats { display: flex; gap: 6px; flex: none; }
.hb-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hb-days .wdh { text-align: center; font-size: .72rem; font-weight: 800; color: var(--ink-soft); }
.hd {
  aspect-ratio: 1; min-height: 36px; border-radius: 50%; border: 1.8px solid var(--line); background: var(--card); padding: 0;
  display: grid; place-items: center; font-weight: 800; font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-1), transform var(--dur-2) var(--ease-spring), color var(--dur-1);
}
html[data-theme="naruto"] .hd { border-radius: 6px; }
.hd[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hd.today { box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent-strong); }
.hd[aria-pressed="true"].today { color: var(--on-accent); }
.hd.future { opacity: .55; }
.hd:active { transform: scale(.88); }
.hd.blank { visibility: hidden; }
@container (min-width: 820px) {
  .hb-legend { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px; align-items: end; margin-bottom: 4px; }
  .hb-leg-days { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; }
  .hb-legend span { text-align: center; font-size: .7rem; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .hb-legend span.we { color: var(--accent-strong); }
  .hb-legend span.now { background: var(--accent); color: var(--on-accent); border-radius: 6px; }
  .hb { gap: 0; }
  .hb-row { grid-template-columns: 170px minmax(0, 1fr) 64px; align-items: center; padding: 4px 0; gap: 0; }
  .hb-top { display: contents; }
  .hb-top .ic { display: none; }
  .hb-stats { order: 3; justify-content: flex-end; }
  .hb-stats .badge:not(.pct) { display: none; }
  .hb-days { grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; order: 2; }
  .hb-days .wdh, .hd.blank { display: none; }
  .hd { min-height: 0; font-size: 0; border-width: 1.6px; }
  .hd.today { box-shadow: 0 0 0 2px var(--accent-soft); }
}

/* Refeições */
.meal-row { display: flex; align-items: center; gap: 10px; min-height: var(--row-h); border-bottom: 1.5px dotted var(--rule); }
.meal-row:focus-within { border-bottom: 1.5px solid var(--accent); }
.meal-row .mi { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pill-3); color: var(--title-b); flex: none; }
html[data-theme="naruto"] .meal-row .mi { background: transparent; color: var(--accent); width: auto; }
.meal-row label { width: 104px; flex: none; font-size: .92rem; color: var(--ink-soft); font-weight: 700; }
.meal-row input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 8px 2px; font-size: 1rem; }

/* Finanças */
.ftable { container-type: inline-size; }
.frow { display: grid; grid-template-columns: 62px minmax(0, 1fr) 92px 40px; align-items: center; gap: 6px; border-bottom: 1.5px dotted var(--rule); min-height: var(--row-h); }
.frow:focus-within { border-bottom-color: var(--accent); border-bottom-style: solid; }
.frow.head { border-bottom: 0; min-height: 34px; background: var(--pill-1); border-radius: 8px; padding: 0 2px; }
html[data-theme="naruto"] .frow.head { background: var(--accent-soft); }
.frow.head span { font-size: .8rem; font-weight: 800; color: var(--pill-ink); text-align: center; }
html[data-theme="naruto"] .frow.head span { color: var(--ink); }
.tone-2 .frow.head { background: var(--pill-2); }
.tone-3 .frow.head { background: var(--pill-3); }
.frow input[type="text"] { width: 100%; min-width: 0; border: 0; background: transparent; outline: none; padding: 8px 2px; font-size: 1rem; }
.frow .f-date { text-align: center; font-variant-numeric: tabular-nums; }
.frow .f-val { text-align: right; font-variant-numeric: tabular-nums; }
.frow .chk { margin: 0 auto; }
.frow.paid .f-desc { color: var(--ink-soft); }
@container (min-width: 520px) { .frow { grid-template-columns: 76px minmax(0, 1fr) 120px 48px; } }
.ftotal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
  padding: 10px 14px; border-radius: 12px; background: var(--pill-1); color: var(--pill-ink); font-weight: 800;
}
html[data-theme="naruto"] .ftotal { background: var(--accent-soft); color: var(--ink); }
.tone-2 .ftotal { background: var(--pill-2); }
.tone-3 .ftotal { background: var(--pill-3); }
.ftotal output { font-variant-numeric: tabular-nums; font-size: 1.08rem; }

.summary { display: grid; gap: 8px; }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--pill-1); color: var(--pill-ink); font-weight: 700; }
.sum-row output { font-weight: 800; font-variant-numeric: tabular-nums; }
.sum-row.r2 { background: var(--pill-2); } .sum-row.r3 { background: var(--pill-3); } .sum-row.r4 { background: var(--pill-4); }
html[data-theme="naruto"] .sum-row { background: var(--card); color: var(--ink); border: 1.5px solid var(--line-soft); }
.sum-row.total { font-size: 1.12rem; }
html[data-theme="naruto"] .sum-row.total { background: var(--pill-2); color: #fff; border-color: transparent; }
.sum-row.total.neg output { color: var(--danger); }
html[data-theme="naruto"] .sum-row.total.neg output { color: #FFB4A8; }
.bar { height: 12px; border-radius: 999px; background: var(--line-soft); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; transition: width var(--dur-3) var(--ease-out); }
.bar .b-fix { background: var(--title-b); }
.bar .b-var { background: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--ink-soft); font-weight: 700; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* =========================================================
   Início (dashboard)
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: center; gap: 12px;
  padding: 18px 18px; border-radius: var(--radius); border: 1.5px solid var(--line);
  background: var(--card);
}
.hero h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.8rem, 3vw + 1rem, 2.8rem); line-height: 1.02; color: var(--title-b); }
.hero h1 span { color: var(--title-a); }
.hero .when { font-weight: 800; color: var(--ink-soft); margin: 6px 0 4px; }
.hero .quote { font-family: var(--font-script); font-size: 1.45rem; line-height: 1.15; color: var(--accent-strong); margin: 6px 0 0; }
@media (min-width: 768px) { .hero { grid-template-columns: minmax(0, 1fr) 220px; padding: 24px 28px; } }
.quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dash { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 768px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1180px) { .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { display: flex; align-items: baseline; gap: 8px; }
.stat b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.9rem; font-variant-numeric: tabular-nums; color: var(--title-b); }
.pbar { height: 10px; border-radius: 999px; background: var(--line-soft); overflow: hidden; margin: 8px 0 4px; }
.pbar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur-3) var(--ease-out); }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mini-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1.5px dotted var(--rule); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list .time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-strong); min-width: 52px; }
.mini-list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hab-today { display: flex; flex-wrap: wrap; gap: 8px; }
.hab-today .chip { min-height: 44px; }

/* Mais */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
  display: grid; gap: 8px; align-content: start; padding: 16px; min-height: 120px; border-radius: var(--radius);
  background: var(--card); border: 1.5px solid var(--line); color: inherit; text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-1);
}
.tile:active { transform: scale(.97); }
@media (hover: hover) { .tile:hover { border-color: var(--accent); } }
.tile .ti { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }
.tile b { font-weight: 800; font-size: 1.05rem; }
.tile small { color: var(--ink-soft); line-height: 1.3; }

/* Alarmes */
.alarm-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1.5px dotted var(--rule); }
.alarm-item:last-child { border-bottom: 0; }
.alarm-item .t { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--title-b); }
.alarm-item.off .t, .alarm-item.off .a-title { opacity: .5; }
.alarm-item .a-title { font-weight: 800; overflow-wrap: anywhere; }
.alarm-item .a-meta { color: var(--ink-soft); font-size: .88rem; }
.alarm-item .a-right { display: flex; align-items: center; gap: 4px; }
.alarm-item .switch { min-height: 44px; }
.notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); margin-bottom: 16px;
}
.notice .ni { color: var(--accent-strong); margin-top: 2px; }
.notice b { display: block; }
.notice p { margin: 2px 0 8px; color: var(--ink-soft); font-size: .92rem; }

/* Ajustes */
.theme-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-card {
  position: relative; display: grid; gap: 6px; padding: 12px; border-radius: 16px; border: 2px solid var(--line-soft);
  background: var(--card); text-align: left; color: inherit;
}
.theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-card .prev { height: 86px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.theme-card .prev.g { background: linear-gradient(135deg, #FDF8F3, #F6DCD9 60%, #DDE5EC); }
.theme-card .prev.n { background: linear-gradient(135deg, #F5EAD6, #F2D6C8 55%, #E8C3A4); }
.theme-card .prev svg { height: 80px; width: auto; }
.theme-card b { font-weight: 800; }
.theme-card small { color: var(--ink-soft); }
.set-sec { margin-bottom: 18px; }
.set-sec h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; color: var(--title-b); margin-bottom: 8px; }
.kbd { font-family: ui-monospace, monospace; background: var(--card); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 6px; font-size: .85em; }

/* =========================================================
   Diálogos, alarme tocando, toasts
   ========================================================= */
dialog.dlg {
  border: 0; padding: 0; color: var(--ink); background: var(--paper);
  width: min(560px, calc(100% - 32px)); max-height: min(88dvh, 820px);
  border-radius: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  overflow: hidden;
}
dialog.dlg[open] { display: flex; flex-direction: column; animation: dlg-in var(--dur-3) var(--ease-out); }
dialog.dlg.closing { animation: dlg-out 160ms var(--ease-in) forwards; }
dialog.dlg::backdrop { background: rgba(20, 12, 14, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px 20px; }
.dlg-head h2 { flex: 1; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.45rem; color: var(--title-b); }
.dlg-body { padding: 6px 20px 12px; overflow-y: auto; overscroll-behavior: contain; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
@media (max-width: 767px) {
  dialog.dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; max-height: 92dvh; }
  dialog.dlg[open] { animation: sheet-in var(--dur-3) var(--ease-out); }
  dialog.dlg.closing { animation: sheet-out 160ms var(--ease-in) forwards; }
  .dlg-foot .btn { flex: 1; }
}
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }

dialog.ring {
  border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: var(--paper); color: var(--ink);
}
dialog.ring[open] { display: grid; place-items: center; animation: dlg-in var(--dur-3) var(--ease-out); }
dialog.ring::backdrop { background: var(--paper); }
.ring-in { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px; max-width: 520px; }
.ring-in .art { width: min(260px, 70vw); animation: wiggle 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
.ring-in .kicker { font-family: var(--font-script); font-size: 1.7rem; color: var(--accent-strong); }
.ring-in .big { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(4rem, 18vw, 7rem); line-height: 1; color: var(--title-b); font-variant-numeric: tabular-nums; }
.ring-in h2 { font-size: 1.5rem; font-weight: 800; overflow-wrap: anywhere; }
.ring-in .btn-row { justify-content: center; margin-top: 12px; }
.ring-in .btn { min-height: 56px; padding: 0 26px; font-size: 1.05rem; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(2deg); } }

.toasts {
  position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display: grid; gap: 8px; width: min(460px, calc(100% - 24px)); pointer-events: none;
}
@media (min-width: 1024px) { .toasts { bottom: 24px; } }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px;
  background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  font-weight: 700; pointer-events: auto; animation: toast-in var(--dur-3) var(--ease-out);
}
.toast .grow { flex: 1; }
.toast .btn { min-height: 36px; background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.toast.out { animation: toast-out 180ms var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Comemoração ao concluir */
.burst { position: fixed; z-index: var(--z-burst); pointer-events: none; width: 18px; height: 18px; margin: -9px 0 0 -9px; color: var(--accent);
  animation: burst 720ms var(--ease-out) forwards; }
.burst svg { width: 100%; height: 100%; display: block; }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}

/* Transição de páginas */
.view-enter { animation: view-in var(--dur-3) var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 360ms; }

/* =========================================================
   Ilustrações (classes usadas dentro dos SVGs)
   ========================================================= */
.art .fur { fill: var(--a-fur); }
.art .str { fill: none; stroke: var(--a-stripe); stroke-linecap: round; }
.art .wht { fill: var(--a-white); }
.art .ear { fill: var(--a-ear); }
.art .nose { fill: var(--a-nose); }
.art .ln { fill: none; stroke: var(--a-line); stroke-linecap: round; stroke-linejoin: round; }
.art .blush { fill: var(--a-blush); opacity: .45; }
.art .cush { fill: var(--a-cushion); }
.art .ging { fill: url(#p-ging); }
.art .lf1 { fill: var(--a-leaf); }
.art .lf2 { fill: var(--a-leaf2); }
.art .stem { fill: none; stroke: var(--a-leaf); stroke-linecap: round; }
.art .b1 { fill: var(--a-book1); } .art .b2 { fill: var(--a-book2); } .art .b3 { fill: var(--a-book3); }
.art .btx { fill: var(--a-booktxt); font-family: var(--font-book); font-weight: 700; font-size: 10.5px; letter-spacing: 2.6px; }
.art .pg { fill: var(--a-pages); }
.art .mug { fill: var(--a-mug); } .art .mugd { fill: var(--a-mug-d); }
.art .mugs { fill: none; stroke: var(--a-mug-d); stroke-linecap: round; }
.art .mugtx { fill: var(--a-booktxt); font-family: var(--font-script); font-weight: 700; }
.art .fl { fill: var(--a-flower); stroke: var(--a-flower-c); stroke-width: .8; }
.art .flc { fill: var(--a-flower-c); }
.art .hrt { fill: var(--accent); }
.art .hrt-l { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.art .note { fill: var(--ink-soft); font-family: var(--font-script); font-weight: 700; }
.art .shade { fill: #000; opacity: .07; }
.art .zz { fill: var(--title-b); font-family: var(--font-script); font-weight: 700; opacity: .7; }

.art .nred { fill: var(--n-red); } .art .nred2 { fill: var(--n-red2); }
.art .nnavy { fill: var(--n-navy); } .art .nnavy2 { fill: var(--n-navy2); }
.art .wood { fill: var(--n-wood); } .art .wood2 { fill: var(--n-wood2); }
.art .ppr { fill: var(--n-paper); } .art .ppr-e { fill: none; stroke: var(--n-paper-e); }
.art .steel { fill: var(--n-steel); } .art .steel-hi { fill: var(--n-steel-hi); }
.art .steel-s { fill: none; stroke: var(--n-steel); }
.art .sun { fill: url(#g-sun); }
.art .cloud { fill: var(--n-cloud); } .art .cloud-l { fill: none; stroke: var(--n-cloud-l); stroke-linecap: round; }
.art .bowl { fill: var(--n-bowl); } .art .broth { fill: var(--n-broth); }
.art .noodle { fill: none; stroke: var(--n-noodle); stroke-linecap: round; }
.art .egg { fill: var(--n-egg); } .art .yolk { fill: var(--n-yolk); }
.art .nori { fill: var(--n-nori); } .art .onion { fill: var(--n-onion); }
.art .npink { fill: none; stroke: var(--n-pink); stroke-linecap: round; }
.art .nred-s { fill: none; stroke: var(--n-red); stroke-linecap: round; stroke-linejoin: round; }
.art .mtn { fill: var(--n-mtn); } .art .mtn2 { fill: var(--n-mtn2); }
.art .roof { fill: var(--n-roof); } .art .house { fill: var(--n-house); }
.art .kanji { fill: var(--n-kanji); font-family: var(--font-kanji); }
.art .rope { fill: none; stroke: var(--n-rope); stroke-linecap: round; }
.art .signtx { fill: var(--n-kanji); font-family: var(--font-script); font-weight: 700; letter-spacing: .5px; }
.art .steam { fill: none; stroke: var(--ink-soft); stroke-linecap: round; opacity: .35; }

/* =========================================================
   Ingestão hídrica
   ========================================================= */
.water { display: grid; gap: 10px; }
.glasses { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.glass {
  width: 40px; height: 44px; padding: 0; border-radius: 10px; flex: none;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
  display: grid; place-items: center;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-2) var(--ease-spring), border-color var(--dur-2);
}
.glass.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.glass:active { transform: scale(.88); }
@media (hover: hover) { .glass:hover { border-color: var(--accent); } }
.glasses.compact .glass { width: 26px; height: 30px; border-radius: 7px; border-width: 1.2px; }
.water-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.water-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.water-btns { display: flex; gap: 6px; align-items: center; }
.water .pbar.full i { background: var(--success); }

.wtable { display: grid; gap: 2px; }
.wrow { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1.5px dotted var(--rule); }
.wrow:last-of-type { border-bottom: 0; }
.wrow.today { background: linear-gradient(90deg, var(--accent-soft), transparent 80%); border-radius: 8px; }
.wday { display: grid; text-decoration: none; color: inherit; line-height: 1.1; }
.wday b { font-size: .92rem; } .wday small { color: var(--ink-soft); font-size: .75rem; }
.wml { font-weight: 800; font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.wml.met { color: var(--success); }

.wbars { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 170px; align-items: end; }
.wbar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: end; justify-items: center; height: 100%; gap: 4px; }
.wbar i { display: block; width: 78%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: var(--accent); opacity: .5; align-self: end; transition: height var(--dur-3) var(--ease-out); }
.wbar.met i { opacity: 1; }
.wbar .v { font-size: .68rem; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wbar .l { font-size: .75rem; font-weight: 800; color: var(--ink-soft); }
.wbars .goal-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--line); pointer-events: none; }

.wheat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wh-h { text-align: center; font-size: .7rem; font-weight: 800; color: var(--ink-soft); }
.wh {
  aspect-ratio: 1; min-height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--line-soft); color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) calc(var(--f, 0) * 100%), transparent);
}
.wh.strong { color: var(--on-accent); border-color: transparent; }
.wh.blank { visibility: hidden; }
.wweeks { display: grid; gap: 6px; }
.wweek { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; font-size: .88rem; }
.wweek .pbar { margin: 0; }
.wweek b { font-variant-numeric: tabular-nums; }

/* =========================================================
   Relatórios
   ========================================================= */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1.5px solid var(--line); }
.kpi .ki { color: var(--accent); }
.kpi b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.7rem; line-height: 1.1; color: var(--title-b); font-variant-numeric: tabular-nums; }
.kpi .kl { font-weight: 800; font-size: .82rem; color: var(--ink); }
.kpi small { color: var(--ink-soft); font-size: .78rem; }
.hb-report { display: grid; gap: 8px; margin-top: 12px; }
.hbr { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto; align-items: center; gap: 8px; font-size: .88rem; }
.hbr .pbar { margin: 0; }
.hbr-n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbr-v { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.hw-name.static { display: flex; align-items: center; min-height: var(--row-h); font-weight: 700; padding: 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .hbr { grid-template-columns: minmax(0, 1fr) 60px auto; } .hbr .badge { display: none; } }

/* ---- arte: Windows ---- */
.art .w-face { fill: var(--w-face); }
.art .w-paper { fill: var(--w-paper); }
.art .w-bevel-hi { fill: none; stroke: var(--w-hi); stroke-width: 2; }
.art .w-bevel-sh { fill: none; stroke: var(--w-sh); stroke-width: 2; }
.art .w-title { fill: #fff; font-family: var(--font-body); font-weight: 700; }
.art .w-menu { fill: var(--w-ink); font-family: var(--font-body); font-weight: 500; }
.art .w-dlg { fill: var(--w-ink); font-family: var(--font-body); font-weight: 700; }
.art .w-dlg2 { fill: var(--w-ink); font-family: var(--font-body); font-weight: 500; }
.art .w-inkline { fill: none; stroke: var(--w-ink); stroke-linecap: round; opacity: .7; }
.art .w-caret { fill: var(--w-ink); }
.art .w-close { fill: var(--w-close); }
.art .w-btn-glyph { fill: none; stroke: var(--w-ink); stroke-width: 1.4; }
.art .w-sky { fill: var(--w-sky); } .art .w-sky2 { fill: var(--w-sky2); }
.art .w-hill { fill: var(--w-hill); } .art .w-hill2 { fill: var(--w-hill2); }
.art .w-cloud { fill: var(--w-cloud); opacity: .9; }
.art .w-cursor { fill: var(--w-cursor); stroke: #1a1a1a; stroke-width: 1.5; stroke-linejoin: round; }
.art .w-folder { fill: var(--w-folder); } .art .w-folder2 { fill: var(--w-folder2); }
.art .w-floppy { fill: var(--w-floppy); }
.art .w-yellow { fill: var(--w-yellow); } .art .w-red2 { fill: var(--w-red2); }
.art .w-blue2 { fill: var(--w-blue2); } .art .w-green2 { fill: var(--w-green2); }

/* ---- arte: Grécia ---- */
.art .g-line { stroke: var(--g-line); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .g-line-f { fill: var(--g-line); }
.art .g-white { fill: var(--g-white); }
.art .g-dome { fill: var(--g-dome); }
.art .g-sea { fill: var(--g-sea); }
.art .g-sun { fill: var(--g-sun); }
.art .g-stem { stroke: var(--g-stem); fill: none; stroke-linecap: round; }
.art .g-leaf { fill: var(--g-leaf); }
.art .g-olive { fill: var(--g-olive); } .art .g-olive2 { fill: var(--g-olive2); }
.art .g-lemon { fill: var(--g-lemon); }
.art .g-tree { fill: var(--g-tree); }
.art .g-paper2 { fill: var(--g-paper2); }
.art .g-script { fill: var(--g-line); font-family: 'Dancing Script', cursive; font-weight: 700; }

/* =========================================================
   Tema Windows: cartões viram janelas
   ========================================================= */
html[data-theme="windows"] body, html[data-theme="windows"] .main {
  background-color: var(--bg);
  background-image: radial-gradient(120% 80% at 50% 0%, var(--w-sky2), var(--w-sky) 55%, var(--w-sky) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0 300V150c150-60 330-40 520 10s380 60 680-30v170z' fill='%236FAE3E'/%3E%3Cpath d='M0 300V210c200-50 380-20 560 20s420 30 640-20v90z' fill='%234E8C2C'/%3E%3C/svg%3E");
  background-size: auto, 100% 42vh;
  background-position: center, bottom;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}
html[data-theme="windows"][data-mode="dark"] .main { background-image: radial-gradient(120% 80% at 50% 0%, var(--w-sky2), var(--w-sky) 60%), none; }
html[data-theme="windows"] .sheet { border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi); border-radius: 0; box-shadow: var(--shadow); }
html[data-theme="windows"] .card {
  border-radius: 0; border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi);
  background: var(--paper); padding: 0 10px 10px;
}
html[data-theme="windows"] .card-head {
  margin: 0 -10px 10px; padding: 4px 5px 4px 8px; min-height: 28px;
  background: linear-gradient(180deg, var(--w-title1), var(--w-title2));
}
html[data-theme="windows"] .sec-h { background: none; color: #fff; padding: 0; margin: 0; border-radius: 0; font-size: var(--sec-size); font-weight: 700; }
html[data-theme="windows"] .sec-h .sec-ico { order: 0; color: #fff; }
html[data-theme="windows"] .card-head::after {
  content: ''; flex: none; width: 50px; height: 15px; margin-left: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15'%3E%3Cg fill='%23ECE9D8' stroke='%23555' stroke-width='1'%3E%3Crect x='.5' y='.5' width='14' height='13'/%3E%3Crect x='17.5' y='.5' width='14' height='13'/%3E%3Crect x='34.5' y='.5' width='14' height='13' fill='%23C4463A'/%3E%3C/g%3E%3Cg stroke='%23222' stroke-width='1.4'%3E%3Cpath d='M4 10h7'/%3E%3Crect x='21' y='4' width='7' height='6' fill='none'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M38 4l7 6M45 4l-7 6'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
html[data-theme="windows"] .card-head .btn, html[data-theme="windows"] .card-head .day-date {
  background: var(--w-face); color: var(--ink); border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi);
  border-radius: 0; min-height: 22px; font-size: .78rem; padding: 0 8px;
}
html[data-theme="windows"] .card > .list, html[data-theme="windows"] .card > .notes, html[data-theme="windows"] .card > .ftable,
html[data-theme="windows"] .card > .tracker, html[data-theme="windows"] .card > .cal-wrap, html[data-theme="windows"] .card > .summary,
html[data-theme="windows"] .card > .hab-week, html[data-theme="windows"] .card > .notes-area, html[data-theme="windows"] .card > .nb-grid {
  background: var(--card); border: 2px solid; border-color: var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh); padding: 4px 8px;
}
html[data-theme="windows"] .btn {
  border-radius: 0; border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi);
  background: var(--w-face); color: var(--ink);
}
html[data-theme="windows"] .btn:active { border-color: var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh); transform: none; }
html[data-theme="windows"] .btn.primary { background: var(--accent); color: #fff; border-color: #79AEF7 #063A80 #063A80 #79AEF7; }
html[data-theme="windows"] .icon-btn, html[data-theme="windows"] .chip, html[data-theme="windows"] .seg, html[data-theme="windows"] .input,
html[data-theme="windows"] .select, html[data-theme="windows"] .textarea, html[data-theme="windows"] .seg button, html[data-theme="windows"] .seg a { border-radius: 0; }
html[data-theme="windows"] .input, html[data-theme="windows"] .select, html[data-theme="windows"] .textarea {
  border: 2px solid; border-color: var(--w-sh) var(--w-hi) var(--w-hi) var(--w-sh); background: var(--card);
}
html[data-theme="windows"] .topbar { background: linear-gradient(180deg, var(--w-title1), var(--w-title2)); border-bottom: 2px solid #06306E; }
html[data-theme="windows"] .topbar .brand-mini b { color: #fff; }
html[data-theme="windows"] .topbar .icon-btn { color: #fff; }
html[data-theme="windows"] .tabbar { background: linear-gradient(180deg, var(--w-title1), var(--w-title2)); border-top: 2px solid #79AEF7; }
html[data-theme="windows"] .tab { color: #D7E5FF; }
html[data-theme="windows"] .tab[aria-current="page"] { color: #fff; }
html[data-theme="windows"] .tab[aria-current="page"] .ind { background: rgba(255, 255, 255, .22); border-radius: 0; }
html[data-theme="windows"] .sidebar { border-right: 2px solid var(--w-sh); }
html[data-theme="windows"] .nav-item, html[data-theme="windows"] .tile, html[data-theme="windows"] .nb-card, html[data-theme="windows"] .theme-card { border-radius: 0; }
html[data-theme="windows"] .date-pill { background: var(--w-face); border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi); border-radius: 0; }
html[data-theme="windows"] .date-pick .date-label { font-family: var(--font-body); font-weight: 800; color: var(--title-b); }
html[data-theme="windows"] .wd, html[data-theme="windows"] .hd { border-radius: 0; }
html[data-theme="windows"] .title-orn::before, html[data-theme="windows"] .title-orn::after { display: none; }
html[data-theme="windows"] .sheet-foot { font-size: 1rem; letter-spacing: .02em; }
html[data-theme="windows"] dialog.dlg { border-radius: 0; border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi); }
html[data-theme="windows"] .dlg-head { background: linear-gradient(180deg, var(--w-title1), var(--w-title2)); padding: 5px 6px 5px 14px; }
html[data-theme="windows"] .dlg-head h2 { color: #fff; font-size: 1.05rem; font-weight: 700; }
html[data-theme="windows"] .dlg-head .icon-btn { color: #fff; }
html[data-theme="windows"] .toast { border-radius: 0; border: 2px solid; border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi); background: var(--w-face); color: var(--ink); }
html[data-theme="windows"] .toast .btn { color: var(--ink); border-color: var(--w-hi) var(--w-sh) var(--w-sh) var(--w-hi); }

/* =========================================================
   Tema Grécia: papel de verão com borda quadriculada
   ========================================================= */
@media (min-width: 768px) {
  html[data-theme="grecia"] .sheet { border: 12px solid transparent; border-image: var(--g-checker) 12 repeat; border-radius: 0; }
}
html[data-theme="grecia"] .sec-h {
  background: none; color: var(--title-a); border-radius: 0; padding: 0 2px 2px; margin-left: 0;
  border-bottom: 2px solid var(--accent-soft); line-height: 1.1;
}
html[data-theme="grecia"] .sec-h .sec-ico { order: 0; color: var(--accent); }
html[data-theme="grecia"] .tone-2 .sec-h { color: var(--title-b); }
html[data-theme="grecia"] .card { border-color: var(--line-soft); }
html[data-theme="grecia"] .card-head { align-items: flex-end; }
html[data-theme="grecia"] .date-pick .date-label, html[data-theme="grecia"] .alarm-item .t,
html[data-theme="grecia"] .stat b, html[data-theme="grecia"] .ring-in .big, html[data-theme="grecia"] .cal-h {
  font-family: var(--font-body); font-weight: 800;
}
html[data-theme="grecia"] .cal-h { font-size: .95rem; }
html[data-theme="grecia"] .page-title { line-height: 1.1; }
html[data-theme="grecia"] .bullet { border-radius: 50%; }
html[data-theme="grecia"] .hd, html[data-theme="grecia"] .hcell span { border-radius: 50%; }

/* Prévias do seletor de tema */
.theme-card .prev.w { background: linear-gradient(160deg, #8FC6F2, #4E9AE8 55%, #6FAE3E); }
.theme-card .prev.gr { background: linear-gradient(160deg, #FBF7EC, #DCE8F8 55%, #A9C8EC); }
.theme-card .prev > .art { display: grid; place-items: center; height: 100%; width: 100%; }
.theme-card .prev > .art svg { max-height: 80px; width: auto; }

/* =========================================================
   Movimento reduzido e impressão
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .burst { display: none; }
}

@media print {
  .sidebar, .topbar, .tabbar, .toasts, .plan-seg, .date-pill .icon-btn, .add-row, .notes-tools, .card-actions, .row-btn { display: none !important; }
  .main { padding: 0; }
  .app { display: block; }
  body { background: #fff; }
  .sheet { margin: 0; width: auto; box-shadow: none; border: 0; }
  .card { break-inside: avoid; }
}