:root {
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --r-paper:3px;
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --rule:32px; --margin:64px;
  --font-ui:'Inter', system-ui, sans-serif; --font-display:'Instrument Serif', Georgia, serif;
}
:root, :root[data-theme="dark"] :is(.sticky, .mini-sticky, .paper--stickypad) {
  color: var(--text);
  --bg:#FFFCF0; --bg-alt:#F8F2DE; --surface:#FFFEF8; --surface-hover:#FBF6E6;
  --border:#E9E0C6; --border-strong:#D6C9A6;
  --text:#3A3529; --text-secondary:#6B6350; --text-muted:#7A7159;
  --primary:#4C5B8A; --primary-hover:#3D4A73; --primary-soft:#E3E7F5; --on-primary:#FFFCF0;
  --highlight:#FFFCC0; --highlight-text:var(--text);
  --danger:#96474C; --danger-bg:#F7D5D6;
  --e1:0 1px 2px rgba(90,74,40,.08), 0 2px 8px rgba(90,74,40,.06);
  --e2:0 4px 16px rgba(90,74,40,.10);
  --e3:0 1px 1px rgba(90,74,40,.10), 0 12px 32px -8px rgba(90,74,40,.18);
  --e4:0 2px 3px rgba(90,74,40,.12), 0 18px 28px -10px rgba(90,74,40,.25);
  --glow:0 8px 24px rgba(76,91,138,.35);
  --pp-white:#FFFEF8; --pp-line:#CFE0EA; --pp-margin:#E8A6A8; --pp-grid:#E2E9EE; --pp-dot:#D6C9A6;
  --pp-legal:#FFF6C4; --pp-legal-line:#C9DCE6; --pp-legal-top:#F2E6A8;
  --pp-kraft:#D8BF95; --pp-kraft-ink:#3A2A17; --pp-sticky:#FFF8B8;
  --tape:rgba(255,255,255,.55);
  --c-manteiga:#FFF8B8; --i-manteiga:#6E5C15; --c-pessego:#FFE0C4; --i-pessego:#7D4E24;
  --c-rosa:#FAD5DA; --i-rosa:#7E3B45; --c-lilas:#E2D8F5; --i-lilas:#574277;
  --c-ceu:#CFE6F0; --i-ceu:#2F5A6E; --c-salvia:#D8EBD5; --i-salvia:#3C6244;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#221F1B; --bg-alt:#1C1A16; --surface:#2B2723; --surface-hover:#343029;
  --border:#423C33; --border-strong:#564E42;
  --text:#EFE7D7; --text-secondary:#C3B9A4; --text-muted:#9A917E;
  --primary:#A9B6E8; --primary-hover:#BFC9F0; --primary-soft:#333A52; --on-primary:#1C1A16;
  --highlight:#4A4222; --highlight-text:#F5E9B0;
  --danger:#E8A6A8; --danger-bg:#3B272B;
  --e1:none; --e2:none; --e3:0 12px 32px -8px rgba(0,0,0,.35); --e4:0 18px 28px -10px rgba(0,0,0,.45);
  --glow:0 8px 24px rgba(169,182,232,.25);
  --pp-white:#2B2723; --pp-line:rgba(165,208,224,.16); --pp-margin:rgba(232,166,168,.45); --pp-grid:rgba(239,231,215,.07); --pp-dot:rgba(239,231,215,.14);
  --pp-legal:#3A3422; --pp-legal-line:rgba(240,222,155,.14); --pp-legal-top:#2F2A1B;
  --pp-kraft:#3B3024; --pp-kraft-ink:#EFE7D7; --pp-sticky:#3D3720;
  --tape:rgba(239,231,215,.18);
  --c-manteiga:#3D3720; --i-manteiga:#F0DE9B; --c-pessego:#3E2E20; --i-pessego:#F0BE93;
  --c-rosa:#3B272B; --i-rosa:#EFAEB6; --c-lilas:#2F2940; --i-lilas:#C9B8EC;
  --c-ceu:#21323A; --i-ceu:#A5D0E0; --c-salvia:#26332A; --i-salvia:#A9D3AC;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/24px var(--font-ui); transition: background-color var(--dur-base), color var(--dur-base); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 20px; height: 20px; }
.theme-btn { position: relative; }
.theme-btn .icon { position: absolute; inset: 8px; transition: transform var(--dur-slow) var(--spring), opacity var(--dur-base); }
[data-theme="dark"] .theme-btn .i-sun, :root:not([data-theme="dark"]) .theme-btn .i-moon { opacity: 0; transform: rotate(-90deg) scale(.4); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid transparent; background: var(--primary); color: var(--on-primary); font-weight: 500; font-size: 14px; text-decoration: none; transition: background-color var(--dur-fast); }
.btn:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface-hover); }
.btn--danger { background: var(--danger-bg); color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); filter: brightness(.97); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-secondary); text-decoration: none; transition: background-color var(--dur-fast); }
.icon-btn:hover, .icon-btn[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); }
.input, .select { height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); }
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.field-error { color: var(--danger); font-size: 12px; line-height: 16px; min-height: 16px; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.choices legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; }
.choice input:checked + span { background: var(--primary-soft); border-color: var(--primary); }
.choice input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.layout { min-height: 100dvh; display: flex; }
.main { flex: 1; min-width: 0; padding: 32px; overflow-x: clip; }
.page { max-width: 1280px; margin: 0 auto; }
.display { font: 400 40px/44px var(--font-display); margin: 8px 0 24px; }
.section-title { font-size: 20px; line-height: 28px; font-weight: 600; margin: 32px 0 16px; display: flex; align-items: center; gap: 8px; }
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }

.sidebar { position: sticky; top: 12px; margin: 12px 0 12px 12px; height: calc(100dvh - 24px); display: flex; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-xl); z-index: 40; }
.rail { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; }
.logo { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 8px; }
.logo img { width: 40px; height: 40px; }
.new-btn { width: 52px; height: 52px; border-radius: var(--r-lg); border: 0; background: var(--primary); color: var(--on-primary); box-shadow: var(--glow); display: grid; place-items: center; margin-bottom: 8px; transition: transform var(--dur-fast) var(--ease-out); }
.new-btn:hover { transform: translateY(-1px); background: var(--primary-hover); }
.rail .nav-link { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-secondary); }
.rail-bottom { margin-top: auto; display: grid; gap: 8px; justify-items: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--text); display: grid; place-items: center; font-weight: 600; font-size: 14px; text-decoration: none; }
.panel { width: 240px; padding: 20px 16px 16px 4px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.panel-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 16px 12px 4px; text-transform: uppercase; letter-spacing: .04em; }
.panel .nav-link { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r-md); color: var(--text-secondary); font-size: 14px; font-weight: 500; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.panel .nav-link span { overflow: hidden; text-overflow: ellipsis; }
.nav-link { transition: background-color var(--dur-base) var(--ease-in-out), box-shadow var(--dur-base); }
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { background: var(--surface); box-shadow: var(--e2); color: var(--text); }
.panel-new { display: flex; gap: 8px; margin: 0 4px 8px; }
.panel-new .btn { flex: 1; }
.panel-hidden .panel { display: none; }
.pin-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--i-rosa); flex: none; }

.pill { display: none; }
@media (max-width: 1023px) { .panel { display: none; } }
@media (max-width: 767px) {
  .sidebar { display: none; }
  .main { padding: 16px 16px 112px; }
  .display { font-size: 32px; line-height: 36px; }
  .pill { display: flex; position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 64px; padding: 0 8px; border-radius: var(--r-pill); background: #3A3529; justify-content: space-between; align-items: center; box-shadow: 0 12px 32px -8px rgba(0,0,0,.35); }
  [data-theme="dark"] .pill { background: #1C1A16; border: 1px solid #423C33; }
  .pill-item { position: relative; z-index: 1; width: min(48px, calc((100vw - 64px) / 7)); height: 48px; text-decoration: none; font-weight: 600; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: #C3B9A4; transition: color var(--dur-fast) 120ms; }
  [data-theme="dark"] .pill-item { color: #9A917E; }
  .pill-item[aria-current="page"] { color: #1C1A16 !important; }
  .pill-drop { position: absolute; top: 8px; left: 0; width: 48px; translate: calc((var(--w, 48px) - 48px) / 2) 0; height: 48px; border-radius: 50%; background: #A9B6E8; transition: transform 360ms var(--spring), opacity var(--dur-fast); }
}

.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
@media (max-width: 767px) { .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }
.card { position: relative; border-radius: var(--r-lg); padding: 8px; background: var(--surface); box-shadow: var(--e1); border: 1px solid var(--border); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.card:hover, .card:focus-within { transform: translateY(-2px); box-shadow: var(--e2); }
.card--pinned { background: var(--highlight); transform: rotate(var(--tilt)); }
.card--pinned:hover, .card--pinned:focus-within { transform: rotate(var(--tilt)) translateY(-2px); }
.card.dragging { opacity: .5; }
.card.drop-target { outline: 2px dashed var(--primary); outline-offset: 4px; }
.card .paper { --rule: 20px; --margin: 28px; position: relative; height: 200px; overflow: hidden; border-radius: var(--r-paper); border: 1px solid var(--border); padding: 20px 12px 0 12px; font-size: 13px; line-height: var(--rule); box-shadow: none; }
.card .paper.has-margin { padding-left: 36px; }
.card-title { margin: 0; font-size: 16px; line-height: var(--rule); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.card-excerpt { margin: 0; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: var(--paper-ink-2, inherit); opacity: .85; }
.card .font--hand1, .card .font--hand2 { font-size: 16px; }
.mini-sticky { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 2px; background: var(--sc); box-shadow: 0 2px 4px rgba(0,0,0,.15); transform: rotate(var(--rot)); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; padding: 8px 4px 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-muted); min-height: 32px; }
.card-foot .progress { flex: 1; min-width: 40px; margin: 0 4px; }
.card-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.card-chips:empty { display: none; }
.progress { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.progress > div { height: 100%; background: var(--primary); border-radius: 2px; transition: width var(--dur-base); }
.menu.card-menu { position: absolute; top: 12px; right: 12px; z-index: 2; opacity: 0; transition: opacity var(--dur-fast); }
.card:hover .card-menu, .card:focus-within .card-menu, .card-menu[open] { opacity: 1; }
@media (hover: none) { .card-menu { opacity: 1; } }
.card-pin { position: absolute; top: -6px; left: 50%; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8 0 2px, var(--i-rosa) 3px); box-shadow: 0 2px 2px rgba(0,0,0,.25); animation: pin-in 240ms var(--spring); }
@keyframes pin-in { from { transform: scale(1.3); } }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary.icon-btn { background: var(--surface); box-shadow: var(--e1); }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 200px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--e3); display: grid; animation: fade-in var(--dur-base) var(--ease-out); }
.menu-list button { display: flex; align-items: center; gap: 10px; text-align: left; height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; font-size: 14px; }
.menu-list button:hover { background: var(--surface-hover); }
.menu-list .danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; }
.menu-row button { width: 32px; height: 32px; padding: 0; justify-content: center; }
.swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--sc); border: 1px solid var(--border-strong); }
[aria-pressed="true"] > .swatch { outline: 2px solid var(--primary); outline-offset: 2px; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } }

.empty { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 48px 16px; color: var(--text-secondary); }
.empty .paper { width: 140px; height: 180px; transform: rotate(-3deg); box-shadow: var(--e3); }

.editor { max-width: 760px; margin: 0 auto; }
.editor-bar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 0 12px; background: var(--bg); }
.editor-bar { gap: 4px; }
.editor-bar .select { height: 36px; font-size: 14px; }
.editor-bar .icon-btn { width: 36px; height: 36px; }
.editor-bar .menu > summary.icon-btn { background: transparent; box-shadow: none; }
.editor-bar .menu > summary.icon-btn:hover, .editor-bar .menu[open] > summary.icon-btn { background: var(--surface-hover); }
.editor-bar .spacer { flex: 1; }
.saved { position: absolute; right: 0; bottom: -6px; font-size: 12px; line-height: 16px; color: var(--text-muted); opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
.saved.show { opacity: 1; }
.paper-picker .menu-list { --sq: min(44px, calc((100vw - 16px - 42px - 18px) / 8)); left: 0; right: auto; min-width: 0; grid-template-columns: repeat(8, var(--sq)); gap: 6px; padding: 8px; }
.menu-list .paper-thumb { display: block; width: var(--sq); height: var(--sq); padding: 0; border-radius: var(--r-paper); }
.paper-thumb .paper { display: block; width: 100%; height: 100%; --rule: 8px; --margin: 10px; border: 1px solid var(--border-strong); border-radius: var(--r-paper); }
.paper-thumb[aria-pressed="true"] .paper { outline: 2px solid var(--primary); outline-offset: 1px; }
.stack { position: relative; }
.stack::before, .stack::after { content: ''; position: absolute; inset: 0; background: var(--surface-hover); border-radius: var(--r-paper); box-shadow: var(--e1); }
.stack::before { transform: translate(3px, 3px) rotate(.6deg); }
.stack::after { transform: translate(-2px, 4px) rotate(-.6deg); }
.editor .paper { position: relative; z-index: 1; min-height: 70vh; border-radius: var(--r-paper); box-shadow: var(--e3); padding: var(--rule) 32px calc(var(--rule) * 3); line-height: var(--rule); transition: background-color var(--dur-slow); }
.editor .paper.has-margin { padding-left: calc(var(--margin) + 16px); }
@media (max-width: 767px) { .editor .paper { --margin: 40px; padding-left: 20px; padding-right: 20px; } .editor .paper.has-margin { padding-left: calc(var(--margin) + 12px); } }
.note-title { display: block; width: 100%; border: 0; background: none; padding: 0; margin: 0; height: var(--rule); line-height: var(--rule); font-size: 26px; font-family: var(--font-display); color: inherit; }
.note-title:focus, .note-body:focus, .goal-text:focus { outline: none; }
.note-title::placeholder, .note-body::placeholder, .goal-text::placeholder { color: inherit; opacity: .5; }
.note-body { display: block; width: 100%; min-height: calc(var(--rule) * 12); resize: none; overflow: hidden; border: 0; padding: 0; margin: 0; background: none; line-height: var(--rule); font: inherit; }
.goals { list-style: none; margin: 0; padding: 0; }
.goal { display: flex; align-items: center; gap: 10px; height: var(--rule); }
.goal input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); flex: none; margin: 0; }
.goal-text { flex: 1; min-width: 0; border: 0; background: none; padding: 0; height: var(--rule); font: inherit; }
.goal.done .goal-text { text-decoration: line-through; opacity: .6; }
.goal-due { border: 0; background: none; font-size: 12px; opacity: .7; width: 120px; }
@media (max-width: 480px) { .goal:not(.has-due):not(:focus-within) .goal-due { display: none; } .goal-due { width: 104px; } }
.goal .icon-btn { width: 28px; height: 28px; opacity: 0; }
.goal:hover .icon-btn, .goal:focus-within .icon-btn { opacity: 1; }
.goal-add { border: 0; background: none; padding: 0; height: var(--rule); color: inherit; opacity: .6; display: flex; align-items: center; gap: 8px; }
.goal-add:hover { opacity: 1; }
.goal-progress { display: flex; align-items: center; gap: 12px; height: var(--rule); margin-bottom: var(--rule); font-size: 12px; }
.goal-progress .progress { flex: 1; }

.font--sans { font-family: 'Inter', system-ui, sans-serif; }
.font--serif { font-family: 'Literata', Georgia, serif; }
.font--mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; }
.font--hand1 { font-family: 'Caveat', cursive; font-size: 22px; }
.font--hand2 { font-family: 'Patrick Hand', cursive; font-size: 19px; }

.paper { background-color: var(--surface); color: var(--text); }
.paper--ruled, .paper--binder { background-color: var(--pp-white); }
.paper--ruled, .paper--binder, .paper--legal {
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin) - 1px), var(--pp-margin) calc(var(--margin) - 1px) calc(var(--margin) + 1px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--pp-line) 0 var(--rule));
}
.paper--binder {
  background-image:
    radial-gradient(circle at 24px 15%, var(--bg) 0 8px, transparent 9px),
    radial-gradient(circle at 24px 50%, var(--bg) 0 8px, transparent 9px),
    radial-gradient(circle at 24px 85%, var(--bg) 0 8px, transparent 9px),
    linear-gradient(90deg, transparent calc(var(--margin) - 1px), var(--pp-margin) calc(var(--margin) - 1px) calc(var(--margin) + 1px), transparent 0 calc(var(--margin) + 4px), var(--pp-margin) 0 calc(var(--margin) + 6px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--pp-line) 0 var(--rule));
}
.card .paper--binder, .paper-thumb .paper--binder, .empty .paper--binder { background-image: linear-gradient(90deg, transparent calc(var(--margin) - 1px), var(--pp-margin) calc(var(--margin) - 1px) calc(var(--margin) + 1px), transparent 0), repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--pp-line) 0 var(--rule)); }
.paper--legal {
  --pp-line: var(--pp-legal-line); background-color: var(--pp-legal);
  background-image:
    linear-gradient(var(--pp-legal-top) 0 24px, transparent 0),
    linear-gradient(90deg, transparent calc(var(--margin) - 3px), var(--pp-margin) 0 calc(var(--margin) - 1px), transparent 0 calc(var(--margin) + 1px), var(--pp-margin) 0 calc(var(--margin) + 3px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--pp-line) 0 var(--rule));
}
.paper--grid { background-color: var(--pp-white); background-image: repeating-linear-gradient(transparent 0 19px, var(--pp-grid) 0 20px), repeating-linear-gradient(90deg, transparent 0 19px, var(--pp-grid) 0 20px); }
.paper--dotted { background-color: var(--pp-white); background-image: radial-gradient(circle at 10px 10px, var(--pp-dot) 1.5px, transparent 2px); background-size: 20px 20px; }
.paper--kraft { background-color: var(--pp-kraft); color: var(--pp-kraft-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.paper--stickypad { background-color: var(--pp-sticky); background-image: linear-gradient(rgba(0,0,0,.06), transparent 40px); }

.sticky-layer.hidden { display: none; }
.sticky { --s: 200; --size: calc(var(--s) * 1px); position: absolute; left: clamp(0px, var(--x), 100% - var(--size)); z-index: 10; width: var(--size); min-height: var(--size); display: flex; flex-direction: column; border-radius: 2px; background: linear-gradient(to top, rgba(0,0,0,.03), transparent 60%), var(--sc); color: var(--text); box-shadow: var(--e4); transform: rotate(var(--rot)); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); animation: stick 380ms var(--spring); }
@media (max-width: 767px) { .sticky { --size: calc(var(--s) * .7px); } }
.sticky:hover { transform: rotate(var(--rot)) translateY(-2px); }
.sticky:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; z-index: 11; }
.sticky:has(details[open]) { transform: none; transition: none; animation: none; }
.sticky.dragging { z-index: 20; transform: scale(1.04); box-shadow: 0 2px 3px rgba(0,0,0,.12), 0 28px 36px -12px rgba(0,0,0,.35); transition: none; }
.sticky.removing { animation: unstick 200ms ease-in forwards; }
@keyframes stick { from { transform: translateY(-12px) scale(1.08) rotate(var(--rot)); box-shadow: 0 30px 40px -10px rgba(0,0,0,.3); } }
@keyframes unstick { to { transform: translateY(16px) rotate(calc(var(--rot) + 8deg)); opacity: 0; } }
.sticky-grip { height: 28px; flex: none; border: 0; background: none; cursor: grab; touch-action: none; padding: 0; }
.sticky.dragging .sticky-grip { cursor: grabbing; }
.sticky-text { flex: 1; width: 100%; border: 0; background: none; resize: none; padding: 0 14px 14px; font-family: 'Caveat', cursive; font-size: 22px; line-height: 26px; color: inherit; }
.sticky-text:focus { outline: none; }
.sticky-menu { position: absolute; right: 2px; top: 0; }
.sticky-menu > summary { width: 28px; height: 28px; color: var(--sink); opacity: .6; }
.sticky-menu > summary:hover, .sticky-menu[open] > summary { opacity: 1; background: rgba(0,0,0,.06); }
.sticky-resize { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; padding: 4px; border: 0; background: none; color: var(--sink); opacity: .45; cursor: nwse-resize; touch-action: none; display: grid; place-items: end; }
.sticky-resize:hover, .sticky-resize:focus-visible, .sticky.resizing .sticky-resize { opacity: 1; }
.attach--fold .sticky-resize { right: 20px; }
.sticky.resizing { transition: none; }
.sticky-text { padding-bottom: 28px; }
.sticky-text::-webkit-scrollbar { width: 4px; }
.sticky-text::-webkit-scrollbar-track { background: transparent; margin: 6px 0 30px; }
.sticky-text::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sink) 35%, transparent); border-radius: 4px; }
.sticky-text::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--sink) 60%, transparent); }
.sticky-text::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) { .sticky-text { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sink) 35%, transparent) transparent; } }
.sticky::before, .sticky::after { content: none; position: absolute; pointer-events: none; animation: fade-in 200ms 80ms both; }
.attach--tape::before { content: ''; top: -12px; left: calc(50% - 36px); width: 72px; height: 24px; background: var(--tape); transform: rotate(var(--rot2, -2deg)); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.attach--pin::before { content: ''; top: 6px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.7) 0 2px, var(--i-rosa) 3px); box-shadow: 1px 2px 2px rgba(0,0,0,.3); }
.attach--fold:not(:has(details[open])) { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.attach--fold::after { content: ''; right: 0; bottom: 0; width: 20px; height: 20px; background: linear-gradient(135deg, rgba(0,0,0,.18) 50%, transparent 50%), var(--sc); }

.c--manteiga { --sc: var(--c-manteiga); --sink: var(--i-manteiga); }
.c--pessego { --sc: var(--c-pessego); --sink: var(--i-pessego); }
.c--rosa { --sc: var(--c-rosa); --sink: var(--i-rosa); }
.c--lilas { --sc: var(--c-lilas); --sink: var(--i-lilas); }
.c--ceu { --sc: var(--c-ceu); --sink: var(--i-ceu); }
.c--salvia { --sc: var(--c-salvia); --sink: var(--i-salvia); }

.welcome { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.welcome .paper { width: min(520px, 100%); padding: 48px 32px; border-radius: var(--r-paper); box-shadow: var(--e3); display: grid; gap: 20px; }
.welcome h1 { font: 400 40px/44px var(--font-display); margin: 0; }
.welcome p { margin: 0; color: var(--text-secondary); }
.settings { max-width: 640px; display: grid; gap: 24px; }
.settings section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 16px; box-shadow: var(--e1); }
.settings h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row .field { flex: 1; min-width: 200px; }
.muted { color: var(--text-muted); font-size: 14px; margin: 0; }
.search-input { width: 100%; height: 48px; font-size: 18px; border-radius: var(--r-md); margin-bottom: 24px; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 10px; border-radius: var(--r-pill); background: var(--sc); color: var(--sink); font: 500 12px/16px var(--font-ui); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-count { opacity: .7; }
.chip[aria-current="page"] { outline: 2px solid var(--sink); outline-offset: 1px; }
.chip--manage { background: var(--surface); color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.tag-filter .chip { height: 32px; padding: 0 14px; font-size: 14px; }
.tag-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sink); flex: none; }
.note-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: var(--rule); margin-bottom: 0; }
.note-tags { row-gap: 0; }
.note-tags .chip { font-family: var(--font-ui); margin: 4px 0; }
.tag-option { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-size: 14px; cursor: pointer; }
.tag-option:hover { background: var(--surface-hover); }
.tag-option input { margin: 0; accent-color: var(--primary); }
.menu-link { display: flex; align-items: center; height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-size: 14px; text-decoration: none; }
.menu-link:hover { background: var(--surface-hover); }
.tag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-row .input { flex: 1 1 140px; min-width: 0; }
.tag-row .select { flex: 0 1 130px; min-width: 0; }
.panel-label--link { display: block; text-decoration: none; }
.panel-label--link:hover { color: var(--text); }
.panel .nav-link .tag-dot { width: 8px; height: 8px; }
.avatar[aria-current="page"] { outline: 2px solid var(--primary); outline-offset: 2px; }
.pill-avatar { color: #C3B9A4; font-size: 15px; }
.pill-avatar::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px solid currentColor; }

.trash { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .trash { display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--e2); color: var(--text-muted); transition: transform var(--dur-base) var(--spring), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
  .trash .icon { grid-area: 1 / 1; pointer-events: none; }
  .trash-lid { transform-box: fill-box; transform-origin: 100% 100%; transition: transform var(--dur-base) var(--spring); }
  .dragging-note .trash { transform: scale(1.12); color: var(--danger); border: 1px dashed var(--danger); }
  .trash.over { transform: scale(1.3); background: var(--danger-bg); color: var(--danger); }
  .dragging-note .trash-lid { transform: rotate(8deg); }
  .trash.over .trash-lid { transform: translate(1px, -2px) rotate(24deg); }
}
.crumple-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .12)); }

.chip-icon { width: 14px; height: 14px; flex: none; }
.chip--link { background: var(--primary-soft); color: var(--text); text-decoration: none; }
.chip--link:hover { outline: 1px solid var(--primary); }
.chip--reminder { background: var(--surface-hover); color: var(--text-secondary); border: 1px solid var(--border-strong); }
.chip--reminder.is-late { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.nav-link, .pill-item { position: relative; }
.nav-badge { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--i-rosa); box-shadow: 0 0 0 2px var(--bg-alt); }
.panel .nav-badge { top: 50%; right: 12px; transform: translateY(-50%); }
.pill .nav-badge { top: 9px; right: 9px; box-shadow: 0 0 0 2px #3A3529; }
.nav-link--add { color: var(--primary); }
.btn--icon { flex: 0 0 40px !important; padding: 0; }
.note-picker .menu-list { width: 280px; }
.group-page .note-picker .menu-list { left: 0; right: auto; } /* "+" fica à esquerda da barra: abrir para a direita, longe da sidebar */
.picker-search { width: 100%; height: 36px; margin-bottom: 6px; }
.picker-list { display: grid; max-height: 260px; overflow-y: auto; }
.picker-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-empty { padding: 6px 10px; }
.reminder-menu .menu-list { width: 280px; }
.menu-field { padding: 4px 6px 8px; }
.menu-hint { font-size: 12px; line-height: 16px; padding: 0 8px 6px; }
.menu-list button:disabled { opacity: .45; cursor: default; }
.menu-list button:disabled:hover { background: none; }
.menu-link[hidden] { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.card--group .paper { box-shadow: 4px 4px 0 -1px var(--surface-hover), 4px 4px 0 0 var(--border), 8px 8px 0 -1px var(--surface-hover), 8px 8px 0 0 var(--border); margin: 0 8px 8px 0; }
.card--group .card-title::before { content: '▣ '; color: var(--primary); }
.group-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 24px; }
.group-icon { width: 36px; height: 36px; color: var(--primary); }
.group-title { font-size: 36px; height: 48px; line-height: 48px; }
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); }
@media (max-width: 767px) { .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); } }
.toast { display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 16px; border-radius: var(--r-md); background: var(--text); color: var(--bg); font-size: 14px; box-shadow: var(--e3); animation: toast-in var(--dur-base) var(--ease-out); }
.toast button { border: 0; background: none; color: #A9B6E8; font-weight: 600; padding: 6px 8px; border-radius: var(--r-sm); }
[data-theme="dark"] .toast button { color: #4C5B8A; }
.toast--error { background: var(--danger-bg); color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.sheet { border: 0; padding: 24px; border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: var(--e3); width: min(400px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(28,26,22,.4); }
.sheet form { display: grid; gap: 8px; }
.sheet-title { margin: 0 0 8px; font: 400 28px/34px var(--font-display); }
.sheet-option { display: grid; text-align: left; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg); font-weight: 600; }
.sheet-option small { font-weight: 400; color: var(--text-muted); }
.sheet-option:hover { background: var(--surface-hover); }
@media (max-width: 767px) { .sheet { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 28px 28px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 120ms !important; animation-name: fade-only !important; transition-duration: 0ms !important; }
  .card:hover, .card:focus-within, .sticky:hover { transform: rotate(var(--rot, var(--tilt, 0deg))); }
  .sticky.dragging { transform: rotate(var(--rot)); }
}
@keyframes fade-only { from { opacity: 0; } }