:root {
  --bg: #0b0e14; --card: #151922; --card-2: #1b202b; --line: #262c39; --text: #e8eaf0; --muted: #9097a6;
  --accent: #5bc0eb; --accent-ink: #06222e; --danger: #ef6b6b; --ok: #5fd08a; --warn: #f0b84b;
  --radius: 14px; --nav-h: 3.6rem;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f5f6f8; --card: #ffffff; --card-2: #eef0f4; --line: #dfe2e8; --text: #1a1d24; --muted: #646b7a;
    --accent: #0b7fb0; --accent-ink: #ffffff; --danger: #c93a3a; --ok: #1f8f50; --warn: #b07a0a; color-scheme: light; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100dvh; background: var(--bg); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.6rem; }
.top h1 { margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: 0.01em; }
.sync-badge { border: 1px solid var(--line); background: var(--card); color: var(--muted); padding: 0.25rem 0.7rem; border-radius: 99px; font-size: 0.78rem; white-space: nowrap; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; }
.sync-badge[data-kind="ok"] { color: var(--ok); }
.sync-badge[data-kind="syncing"] { color: var(--accent); }
.sync-badge[data-kind="error"], .sync-badge[data-kind="signin"] { color: var(--danger); border-color: var(--danger); }

/* Main */
main { overflow-y: auto; overflow-x: hidden; padding: 0.25rem 1rem 1.2rem; -webkit-overflow-scrolling: touch; }
main > * + * { margin-top: 0.75rem; }
main.fill { display: flex; flex-direction: column; padding-bottom: 0; }
main.fill > * + * { margin-top: 0; }

/* Bottom tabs */
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs button { border: 0; background: none; padding: 0.85rem 0.2rem 0.8rem; color: var(--muted); font-size: 0.82rem; position: relative; }
.tabs button[aria-current="page"] { color: var(--accent); font-weight: 650; }
.tabs button[aria-current="page"]::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; }

/* Controls */
.addbar { display: flex; gap: 0.5rem; }
.input, .addbar input, .field { width: 100%; min-width: 0; padding: 0.7rem 0.85rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; outline: none; }
.input:focus, .addbar input:focus, .field:focus { border-color: var(--accent); }
.btn { border: 1px solid var(--line); background: var(--card-2); padding: 0.6rem 1rem; border-radius: 12px; white-space: nowrap; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.btn:disabled { opacity: 0.5; }
.link-btn { border: 0; background: none; color: var(--accent); padding: 0.2rem 0; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.empty { text-align: center; color: var(--muted); padding: 2.2rem 1rem; }

/* Cards and rows */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; }
.card h2 { margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list > li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.9rem; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.grow { flex: 1; min-width: 0; }
.title { overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: 0.15rem; font-size: 0.8rem; color: var(--muted); }
.meta .over { color: var(--danger); }
.meta .today { color: var(--warn); }
.pri-3 { color: var(--danger); } .pri-2 { color: var(--warn); }

.chk { flex: none; width: 1.55rem; height: 1.55rem; margin-top: 0.05rem; border: 2px solid var(--muted); border-radius: 50%; background: none; padding: 0; display: grid; place-items: center; color: var(--accent-ink); }
.chk[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.chk[aria-checked="true"]::after { content: ''; width: 0.4rem; height: 0.7rem; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.chk:disabled { opacity: 0.45; }
.done .title { text-decoration: line-through; color: var(--muted); }
details.fold > summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; padding: 0.4rem 0.2rem; list-style: none; }
details.fold > summary::before { content: '▸ '; }
details.fold[open] > summary::before { content: '▾ '; }
details.fold > .list { margin-top: 0.4rem; }
.editrow { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.editrow .btns { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Notes */
.chips { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 0.3rem 0.85rem; font-size: 0.85rem; color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.note-row { width: 100%; text-align: left; border: 0; background: none; padding: 0; }
.note-row .title { font-weight: 600; }
.note-row .preview { color: var(--muted); font-size: 0.88rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.fab { position: fixed; right: 1.1rem; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem); width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 1.8rem; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.5rem; }
.editor { flex: 1; width: 100%; resize: none; border: 0; outline: none; background: transparent; line-height: 1.6; padding: 0.2rem 0 1rem; min-height: 40vh; }
main.fill .editor { min-height: 0; }

/* Habits */
.habit { display: flex; flex-direction: column; gap: 0.6rem; }
.habit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.habit-name { background: none; border: 0; padding: 0; text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.streak { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.dot { border: 1px solid var(--line); background: var(--card-2); border-radius: 10px; padding: 0.4rem 0 0.35rem; display: grid; gap: 0.1rem; justify-items: center; font-size: 0.7rem; color: var(--muted); }
.dot b { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.dot[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dot[aria-pressed="true"] b { color: var(--accent-ink); }
.dot.off { opacity: 0.4; }

/* More */
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.row-line:first-of-type { border-top: 0; }
.big { font-variant-numeric: tabular-nums; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.x { border: 0; background: none; color: var(--muted); font-size: 1.2rem; padding: 0.2rem 0.5rem; }
a { color: var(--accent); }
.links a.tile { display: block; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--card-2); text-decoration: none; color: var(--text); overflow-wrap: anywhere; }
.links a.tile small { display: block; color: var(--muted); }

/* Ask */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.3rem 0 0.8rem; }
.bubble { max-width: 92%; padding: 0.6rem 0.85rem; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.bubble.user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 5px; }
.bubble.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.err { border-color: var(--danger); color: var(--danger); }
.bubble pre { margin: 0.4rem 0; padding: 0.6rem; background: var(--bg); border-radius: 8px; overflow-x: auto; white-space: pre; font-size: 0.85rem; }
.bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; }
.composer { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.6rem 0 0.75rem; border-top: 1px solid var(--line); background: var(--bg); }
.composer textarea { flex: 1; resize: none; max-height: 8rem; min-height: 2.7rem; padding: 0.65rem 0.85rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; outline: none; }
.composer textarea:focus { border-color: var(--accent); }
.ask-tools { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.switch { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem); transform: translateX(-50%); max-width: 88vw; background: var(--text); color: var(--bg); padding: 0.6rem 1rem; border-radius: 12px; font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); z-index: 5; }

@media (min-width: 700px) {
  main, .top { max-width: 40rem; width: 100%; margin-inline: auto; }
  body { grid-template-columns: minmax(0, 1fr); }
}