*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --fg: #111;
  --bg: #fff;
  --muted: #666;
  --link: #0055cc;
  --border: #e0e0e0;
  --hover: #f5f5f5;
}

body {
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

/* Nav */
nav { margin-bottom: 2.5rem; font-size: .875rem; }
nav a { color: var(--fg); text-decoration: none; }
nav a:hover { text-decoration: underline; }

/* Typography */
h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
p { margin-bottom: .875rem; }
a { color: var(--link); }
a:hover { text-decoration: none; }
ul { padding-left: 1.5rem; margin-bottom: 1rem; }
li { margin-bottom: .3rem; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }
code { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: .875em; background: #f5f5f5; padding: .1em .3em; border-radius: 3px; }
.muted { color: var(--muted); font-size: .875rem; }

/* Footer */
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .825rem; color: var(--muted); }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── Todo ── */
.tabs { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tab { background: none; border: 1px solid var(--border); padding: .2rem .65rem; font-size: .85rem; cursor: pointer; border-radius: 3px; color: var(--fg); font-family: inherit; }
.tab.active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tab:hover:not(.active) { background: var(--hover); }

.todo-form { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.todo-form input[type=text] { flex: 1; min-width: 140px; padding: .35rem .6rem; border: 1px solid var(--border); font: inherit; font-size: .9rem; border-radius: 3px; }
.todo-form select, .todo-form button { padding: .35rem .6rem; border: 1px solid var(--border); font: inherit; font-size: .9rem; border-radius: 3px; cursor: pointer; }
.todo-form button { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.todo-item { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.todo-item.done > .todo-text { text-decoration: line-through; color: var(--muted); }
.todo-item input[type=checkbox] { cursor: pointer; flex-shrink: 0; }
.todo-text { flex: 1; word-break: break-word; }
.badge { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.del { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--muted); font-size: .85rem; padding: 0 .2rem; flex-shrink: 0; line-height: 1; }
.del:hover { color: #c00; }
.clear-done { background: none; border: none; cursor: pointer; font-size: .825rem; color: var(--muted); text-decoration: underline; margin-top: .75rem; padding: 0; font-family: inherit; }
.empty-msg { color: var(--muted); font-size: .9rem; padding: .5rem 0; }

/* ── Calendar ── */
.cal-header { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
#cal-title { font-weight: 600; min-width: 150px; }
.cal-nav { background: none; border: 1px solid var(--border); padding: .2rem .55rem; cursor: pointer; font: inherit; font-size: .85rem; border-radius: 3px; }
.cal-nav:hover { background: var(--hover); }
.cal-add-btn { margin-left: auto; background: var(--fg); color: var(--bg); border: none; padding: .25rem .7rem; cursor: pointer; font: inherit; font-size: .85rem; border-radius: 3px; }
.cal-add-btn:hover { opacity: .85; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 1.5rem; font-size: .8rem; }
.day-label { background: var(--bg); text-align: center; padding: .3rem .1rem; color: var(--muted); font-size: .75rem; }
.day { background: var(--bg); min-height: 54px; padding: .25rem .3rem; cursor: pointer; }
.day:hover { background: var(--hover); }
.day.other { color: #bbb; background: #fafafa; }
.day.today { background: #fffbf0; }
.day.today .num { font-weight: 700; }
.num { font-size: .8rem; margin-bottom: .15rem; }

.event-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 2px; vertical-align: middle; }
.event-dot.work { background: #3b82f6; }
.event-dot.personal { background: #10b981; }
.event-dot.deadline { background: #ef4444; }
.event-dot.other { background: #8b5cf6; }

.cal-event { display: block; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 2px; border-radius: 2px; margin-bottom: 1px; cursor: pointer; }
.cal-event:hover { background: rgba(0,0,0,.07); }

.upcoming { margin-bottom: 1.5rem; }
.upcoming h2 { margin-top: 0; margin-bottom: .5rem; }
.upcoming-item { display: flex; justify-content: space-between; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .875rem; gap: .5rem; }
.ev-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-date { color: var(--muted); font-size: .8rem; flex-shrink: 0; }

.cal-form { border: 1px solid var(--border); padding: 1.25rem; border-radius: 4px; }
.cal-form h2 { margin-top: 0; margin-bottom: 1rem; font-size: 1rem; }
.field { margin-bottom: .75rem; }
.field label { display: block; font-size: .825rem; color: var(--muted); margin-bottom: .2rem; }
.field input, .field select, .field textarea { width: 100%; padding: .35rem .6rem; border: 1px solid var(--border); font: inherit; font-size: .9rem; border-radius: 3px; }
.field textarea { resize: vertical; }
.actions { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.btn { padding: .35rem .8rem; border: none; cursor: pointer; font: inherit; font-size: .875rem; border-radius: 3px; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { opacity: .85; }
.btn-ghost { background: none; border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--hover); }
.btn-danger { background: #dc2626; color: #fff; margin-left: auto; }
.btn-danger:hover { background: #b91c1c; }

/* ── Notes ── */
.notes-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.notes-count { margin-left: auto; font-size: .85rem; color: var(--muted, #888); }
.notes-status { font-size: .8rem; padding: .2rem .5rem; border-radius: 4px; }
.notes-status.unsaved { color: #f59e0b; }
.notes-status.err { color: #ef4444; }
#notes-input {
  width: 100%; min-height: 60vh; padding: 1rem;
  font-family: 'Courier New', monospace; font-size: .95rem;
  border: 1px solid var(--border, #333);
  background: var(--bg2, #111); color: var(--fg, #eee);
  border-radius: 6px; resize: vertical; line-height: 1.6;
  box-sizing: border-box;
}
#notes-input:focus { outline: none; border-color: var(--accent, #7c3aed); }
#notes-preview { min-height: 60vh; padding: 1rem; border: 1px solid var(--border, #333); border-radius: 6px; line-height: 1.7; }
#notes-preview h1, #notes-preview h2, #notes-preview h3 { margin: 1.2rem 0 .5rem; }
#notes-preview code { background: var(--bg2, #1a1a1a); padding: .1em .3em; border-radius: 3px; font-size: .9em; }
#notes-preview pre { background: var(--bg2, #1a1a1a); padding: 1rem; border-radius: 6px; overflow-x: auto; }
#notes-preview pre code { background: none; padding: 0; }
#notes-preview blockquote { border-left: 3px solid var(--accent, #7c3aed); margin: 0; padding-left: 1rem; color: var(--muted, #888); }
#notes-preview ul, #notes-preview ol { padding-left: 1.5rem; }
#notes-preview hr { border: none; border-top: 1px solid var(--border, #333); margin: 1.5rem 0; }
#notes-preview a { color: var(--accent, #7c3aed); }

/* Notes width fix */
#notes-editor { width: 100%; }
#notes-input { width: 100%; min-height: 60vh; box-sizing: border-box; }
#notes-preview { width: 100%; box-sizing: border-box; }
.notes-bar { width: 100%; }