:root {
  color-scheme: light;
  --ink: #000;
  --paper: #fffcf8;
  --muted: rgba(0, 0, 0, 0.48);
  --line: rgba(70, 38, 132, 0.11);
  --purple: #6334e6;
  --purple-dark: #3f1a9d;
  --pink: #ff6cab;
  --orange: #f3a154;
  --mint: linear-gradient(135deg, #bff6da 0%, #edfff6 100%);
  --sky: linear-gradient(135deg, #dbeaff 0%, #f4f8ff 100%);
  --peach: linear-gradient(135deg, #ffd9cb 0%, #fff3ec 100%);
  --lilac: linear-gradient(135deg, #ddd1ff 0%, #f6f1ff 100%);
  --lemon: linear-gradient(135deg, #ffe57f 0%, #fff9d9 100%);
  --shadow: 0 16px 45px rgba(63, 26, 157, 0.09);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

* { box-sizing: border-box; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; min-height:44px; border-radius:999px; padding:.75rem 1rem; background:#000; color:#fff; font-size:.82rem; font-weight:750; text-decoration:none; }
.skip-link:focus { top:1rem; }
html { min-height: 100%; max-width: 100%; overflow-x: clip; background: var(--paper); }
html, body, .no-scrollbar { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar { display: none; }
body {
  min-width: 320px;
  max-width: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 8% 2%, rgba(255, 108, 171, 0.09), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(99, 52, 230, 0.08), transparent 26rem),
    var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { border: 0; background: transparent; }
form { margin: 0; }
h1, h2, h3, p { margin-block: 0; }

.app-shell {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: clip;
  background: rgba(255, 255, 255, 0.9);
}
.app-page { width: min(100%, 44rem); max-width:100%; min-height: 100dvh; margin: 0 auto; overflow-x:clip; }
.app-shell > div.app-page { display:flex; flex-direction:column; }
.app-shell > div.app-page > main { flex:1; }
.page-pad { padding-inline: clamp(1.25rem, 5.5vw, 2rem); }
.safe-bottom { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.page-topbar { display:flex; min-height:4.5rem; align-items:center; justify-content:space-between; padding-top:max(.5rem, env(safe-area-inset-top)); }
.brand-link { display:inline-flex; align-items:center; gap:.55rem; color:#000; font-size:1rem; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.brand-link svg { width:1.35rem; color:var(--purple); }
.brand-mark { width:1.65rem; height:1.65rem; border-radius:.55rem; object-fit:cover; box-shadow:0 4px 12px rgba(99,52,230,.18); }
.avatar-button { display:grid; width:2.5rem; min-width:2.5rem; height:2.5rem; min-height:2.5rem; place-items:center; border-radius:999px; background:var(--purple); color:#fff; font-size:.75rem; font-weight:800; box-shadow:0 6px 16px rgba(99,52,230,.22); }
.avatar-button--creator { outline:2px solid var(--pink); outline-offset:2px; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-top:.7rem; }
.page-header h1 { margin-top:.25rem; font-size:clamp(1.8rem,8vw,2.35rem); line-height:1; letter-spacing:-.045em; }
.eyebrow { color:var(--muted); font-size:.72rem; font-weight:650; letter-spacing:.02em; }
.section-label { color:var(--muted); font-size:.7rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.muted { color:var(--muted); }
.stack { display:grid; gap:.85rem; }
.list { display:grid; gap:.7rem; padding:0; list-style:none; }
.empty-state { margin-top:2rem; border:1px dashed var(--line); border-radius:1.5rem; padding:1.4rem; text-align:center; }
.empty-state svg { width:2rem; margin:0 auto .8rem; }

.tap {
  min-width: 44px;
  min-height: 44px;
  transition: transform 160ms ease, opacity 160ms ease;
}
.tap:active { transform: scale(0.96); }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
}
.icon-button svg { width:1.35rem; height:1.35rem; }
.primary-button, .secondary-button, .danger-button {
  display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:.5rem; border-radius:999px; padding:.75rem 1.1rem; font-size:.86rem; font-weight:750; text-decoration:none;
}
.primary-button { background:var(--purple); color:#fff; box-shadow:0 8px 22px rgba(99,52,230,.2); }
.primary-button:hover { background:var(--purple-dark); }
.secondary-button { border:1px solid var(--line); background:rgba(255,255,255,.92); color:#000; }
.danger-button { border:1px solid rgba(0,0,0,.18); color:#000; }
.full-width { width:100%; }
.button-row { display:flex; gap:.65rem; }
.button-row > * { flex:1; }
.field { display:grid; gap:.4rem; }
.field > span { color:var(--muted); font-size:.72rem; font-weight:650; }
.field input, .field select, .field textarea { width:100%; min-height:48px; border:1px solid var(--line); border-radius:1rem; padding:.8rem .9rem; background:#fff; outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(99,52,230,.10); }
.local-upload-preview { color:var(--muted); font-size:.72rem; line-height:1.4; }
.flash { margin:.75rem 0; border-radius:1rem; padding:.8rem .9rem; background:var(--lemon); font-size:.78rem; line-height:1.45; }
.flash--success { background:var(--mint); }
.flash--error { background:var(--peach); }
.soft-card {
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}
.card-link { display:block; color:#000; text-decoration:none; }
.sheet-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.sheet-header h2 { margin-top:.2rem; font-size:1.4rem; letter-spacing:-.03em; }
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-bottom:1rem; }
.menu-grid a { display:flex; min-height:6rem; flex-direction:column; justify-content:space-between; border:1px solid var(--line); border-radius:1.25rem; padding:1rem; text-decoration:none; font-size:.82rem; font-weight:700; transition:transform 160ms ease, box-shadow 160ms ease; }
.menu-grid a:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(99,52,230,.1); }
.menu-grid svg { width:1.25rem; color:var(--purple); }
.mint { background: var(--mint); }
.sky { background: var(--sky); }
.peach { background: var(--peach); }
.lilac { background: var(--lilac); }
.lemon { background: var(--lemon); }

.today-document {
  display: flex;
  min-height: calc(100dvh - 7.5rem);
  flex-direction: column;
}
.today-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: max(1.4rem, env(safe-area-inset-top));
  background: linear-gradient(#fff 78%, rgba(255, 255, 255, 0));
}
.today-title { font-size: clamp(2rem, 9vw, 2.45rem); letter-spacing: -0.045em; line-height: 1; }
.quiet-control { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.quiet-control svg { width: 1rem; height: 1rem; }

.note-stack { position: relative; padding-top: 1.5rem; font-size: 1.125rem; line-height: 2; }
.draft-recovery { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-bottom:.65rem; border:1px solid var(--line); border-radius:1rem; padding:.6rem .7rem; background:var(--lemon); font-size:.72rem; line-height:1.35; }
.draft-recovery[hidden] { display:none; }
.draft-recovery span { flex:1 1 100%; }
.draft-recovery button { min-height:44px; border-radius:999px; padding:.35rem .7rem; background:#fff; font-size:.7rem; font-weight:750; }
.note-block { position: relative; scroll-margin-top: 7rem; padding-block: 0.45rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-block--locked { color: rgba(0, 0, 0, 0.34); }
.note-block__meta { font-size: 0.72rem; line-height: 1.4; color: var(--muted); }
.note-block__actions { display:flex; min-width:0; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.55rem; margin-top:.2rem; }
.note-block__actions form { display:inline-flex; }
.note-editor-wrap { position: relative; min-height: 13rem; }
.note-editor,
.note-highlight-layer {
  width: 100%;
  min-height: 13rem;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-editor {
  position: relative;
  z-index: 2;
  resize: none;
  outline: none;
  color: transparent;
  caret-color: #000;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
}
.note-editor::placeholder { color: rgba(0, 0, 0, 0.32); -webkit-text-fill-color: rgba(0, 0, 0, 0.32); }
.note-highlight-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: #000;
}
.note-editor-wrap:not([data-highlighted="true"]) .note-editor { color: #000; -webkit-text-fill-color: #000; }
.token-date { background: linear-gradient(transparent 58%, #ffe57f 58%); }
.token-person { background: linear-gradient(transparent 58%, #ddd1ff 58%); }
.token-relation { background: linear-gradient(transparent 58%, #dbeaff 58%); }
.token-amount { background: linear-gradient(transparent 58%, #bff6da 58%); }
.token-item { background: linear-gradient(transparent 58%, #ffd9cb 58%); }

.review-chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  background: var(--mint);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}
.clarify-card { margin:1rem 0; border-radius:1.5rem; padding:1rem; background:var(--lemon); }
.clarify-card h3 { font-size:.9rem; }
.clarify-card p { margin-top:.35rem; color:var(--muted); font-size:.75rem; line-height:1.5; }
.review-table { display:grid; gap:.7rem; }
.review-item { border:1px solid var(--line); border-radius:1.25rem; padding:1rem; }
.review-item dl { display:grid; grid-template-columns:minmax(5rem,.75fr) minmax(0,1.25fr); gap:.45rem .7rem; margin:.8rem 0 0; font-size:.78rem; }
.review-item dt { color:var(--muted); }
.review-item dd { margin:0; font-weight:650; overflow-wrap:anywhere; }
.journey-cue {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  align-items: end;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(5px);
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: min(100%, 44rem);
  max-height: min(88dvh, 52rem);
  margin: 0 auto;
  overflow: auto;
  border-radius: 2rem 2rem 0 0;
  background: #fff;
  padding: 1.25rem clamp(1.25rem, 5vw, 2rem) max(1.5rem, env(safe-area-inset-bottom));
  box-shadow: 0 -24px 70px rgba(30, 42, 64, 0.18);
}

.bottom-nav {
  position: sticky;
  bottom: 0;
  z-index: 20;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.5rem 0.75rem max(0.65rem, env(safe-area-inset-bottom));
  backdrop-filter: blur(16px);
}
.bottom-nav a { display: flex; min-width: 64px; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--muted); font-size: 0.7rem; text-decoration: none; }
.bottom-nav a[aria-current="page"] { color: #000; font-weight: 700; }
.bottom-nav a[aria-current="page"] svg { color:var(--purple); stroke-width:2.5; }
.bottom-nav svg { width: 1.25rem; height: 1.25rem; }
.nav-dot { position:absolute; right:-.3rem; top:-.25rem; width:.45rem; height:.45rem; border-radius:999px; background:var(--pink); box-shadow:0 0 0 2px #fff; }

.mention-popover {
  position: fixed;
  inset-inline: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 45;
  max-height: min(46dvh, 24rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 60px rgba(30, 42, 64, 0.16);
}
.mention-popover:empty, .mention-popover[hidden] { display: none; }

.timeline-layout { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 0.75rem; }
.timeline-rail { appearance:auto; width:3px; height:56dvh; writing-mode:vertical-lr; direction:rtl; accent-color:var(--purple); }
.sheet, .mention-popover { scrollbar-width:none; }
.sheet::-webkit-scrollbar, .mention-popover::-webkit-scrollbar { display:none; }
.header-count { display:grid; position:absolute; right:-.15rem; top:-.1rem; min-width:1rem; height:1rem; place-items:center; border-radius:999px; padding:0 .2rem; background:#000; color:#fff; font-size:.7rem; font-weight:800; }
.swipe-card { touch-action: pan-y; transition: transform 180ms ease, opacity 180ms ease; }
.identity-row { display:flex; min-height:64px; align-items:center; gap:.8rem; width:100%; text-align:left; }
.identity-avatar { display:grid; width:2.65rem; height:2.65rem; flex:0 0 auto; place-items:center; border-radius:999px; background:var(--lilac); font-size:.72rem; font-weight:800; }
.identity-copy { min-width:0; flex:1; }
.identity-copy strong, .identity-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.identity-copy strong { font-size:.86rem; }
.identity-copy small { margin-top:.2rem; color:var(--muted); font-size:.7rem; }
.amount { font-size:clamp(1.65rem,8vw,2.35rem); font-weight:750; letter-spacing:-.045em; }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
.summary-grid > * { border-radius:1.25rem; padding:1rem; }
.qr-frame { display:grid; aspect-ratio:1/1; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:1.5rem; background:#fff; }
.qr-frame img { width:100%; height:100%; object-fit:contain; }
.attachment-thumb { display:block; overflow:hidden; border-radius:1.25rem; background:rgba(0,0,0,.04); }
.attachment-thumb img { display:block; width:100%; max-height:19rem; object-fit:contain; }
.timeline-entry { border-left:2px solid var(--line); padding:0 0 1.2rem 1rem; }
.timeline-entry::before { content:""; float:left; width:.6rem; height:.6rem; margin-left:-1.36rem; margin-top:.2rem; border-radius:999px; background:var(--purple); }

/* CapyBayad moments: deliberately small, handmade-feeling motion away from the editor. */
.capy-scene { position:relative; width:min(100%, 20rem); margin-inline:auto; isolation:isolate; }
.capy-scene--hero { width:min(72vw, 19rem); }
.capy-scene--compact { width:6.25rem; }
.capy-scene__image { display:block; width:100%; height:auto; border-radius:28%; filter:drop-shadow(0 15px 24px rgba(63,26,157,.12)); animation:capy-breathe 4.8s ease-in-out infinite; transform-origin:50% 85%; }
.capy-scene--welcome .capy-scene__image { border-radius:1.7rem; }
.capy-scene__spark { position:absolute; z-index:2; width:.65rem; height:.65rem; border-radius:.18rem; background:var(--pink); transform:rotate(45deg); animation:capy-spark 2.8s ease-in-out infinite; }
.capy-scene__spark--one { right:4%; top:24%; }
.capy-scene__spark--two { left:4%; top:48%; width:.45rem; height:.45rem; background:#ffe057; animation-delay:.8s; }
.capy-scene__coin { position:absolute; z-index:3; right:9%; bottom:5%; width:1.25rem; height:1.25rem; border:3px solid #000; border-radius:999px; background:#ffd84d; box-shadow:inset 0 0 0 2px #fff; animation:capy-coin 3.1s cubic-bezier(.45,.05,.2,1) infinite; }
.capy-scene--captioned .capy-scene__coin { bottom:2.8rem; }
.capy-scene__coin::after { content:"₱"; display:grid; height:100%; place-items:center; color:#000; font-size:.55rem; font-weight:900; }
.capy-caption { margin-top:.55rem; color:var(--muted); font-size:.72rem; line-height:1.4; text-align:center; }
.auth-layout { display:grid; min-height:calc(100dvh - 5rem); align-content:center; gap:1.5rem; padding-block:1rem 2rem; }
.auth-copy h1 { font-size:clamp(2.35rem,12vw,3.65rem); line-height:.94; letter-spacing:-.065em; }
.welcome-card { overflow:hidden; border:1px solid var(--line); border-radius:2rem; background:linear-gradient(145deg,#fff 0%,#f6f0ff 100%); padding:1rem; box-shadow:var(--shadow); }
.welcome-card .capy-scene { width:min(64vw,16rem); }
.capy-kicker { display:inline-flex; align-items:center; gap:.45rem; border-radius:999px; padding:.45rem .7rem; background:var(--lilac); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.empty-state--capy { position:relative; overflow:hidden; padding-top:1.1rem; }
.empty-state--capy::before { content:""; display:block; width:4.8rem; aspect-ratio:1; margin:0 auto .65rem; border-radius:1.35rem; background:url('/static/brand/capybayad-mark.png') center/cover no-repeat; box-shadow:0 8px 24px rgba(99,52,230,.13); animation:capy-breathe 4.8s ease-in-out infinite; }
.empty-state--capy .capy-scene { width:4.8rem; margin-bottom:.65rem; }
.empty-state--capy .capy-scene__coin { width:.9rem; height:.9rem; border-width:2px; }
.empty-state--capy > svg { display:none; }
.creator-link { background:linear-gradient(135deg,#1e103f 0%,#6334e6 100%)!important; color:#fff; }
.creator-link svg { color:#fff; }

@keyframes capy-breathe {
  0%,100% { transform:translateY(0) rotate(-.25deg); }
  50% { transform:translateY(-4px) rotate(.4deg); }
}
@keyframes capy-spark {
  0%,100% { opacity:.2; transform:rotate(45deg) scale(.55); }
  50% { opacity:1; transform:rotate(45deg) scale(1); }
}
@keyframes capy-coin {
  0%,72%,100% { transform:translateY(0) rotate(0); }
  82% { transform:translateY(-11px) rotate(16deg); }
  90% { transform:translateY(0) rotate(-7deg); }
}

@media (max-width: 30rem) {
  .auth-layout { align-content:start; gap:.85rem; padding-top:.2rem; }
  .welcome-card { border-radius:1.5rem; padding:.55rem; }
  .welcome-card .capy-scene { width:min(46vw, 11rem); }
  .auth-copy h1 { font-size:2.15rem; line-height:.96; }
  .auth-copy > .muted { margin-top:.7rem!important; line-height:1.45!important; }
  .auth-copy .stack { margin-top:1rem!important; }
}

@media (min-width: 48rem) {
  .auth-layout { grid-template-columns:minmax(0,1fr) minmax(17rem,.8fr); align-items:center; gap:3rem; }
  .auth-layout .welcome-card { order:2; }
}
.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.2rem; border-radius:999px; padding:.2rem; background:rgba(0,0,0,.05); }
.segmented a, .segmented button { min-height:44px; border-radius:999px; padding:.5rem; text-align:center; color:var(--muted); font-size:.72rem; font-weight:700; text-decoration:none; }
.segmented [aria-current="page"], .segmented .selected { background:#fff; color:#000; box-shadow:0 2px 8px rgba(0,0,0,.05); }

@media (min-width: 48rem) {
  .app-shell { background: rgba(255, 255, 255, 0.9); }
  .sheet-backdrop { align-items: center; padding: 2rem; }
  .sheet { border-radius: 2rem; }
  .mention-popover { inset-inline: auto; right: calc(50% - 21rem); width: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}