:root { color-scheme: light dark; font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #f5f6fa; color: #202938; font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
[hidden] { display: none !important; }
#app { max-width: 680px; margin: auto; padding: max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 30px; letter-spacing: -0.8px; }
h2 { font-size: 18px; }
h3 { font-size: 17px; overflow-wrap: anywhere; }
.eyebrow { color: #526585; font-size: 12px; letter-spacing: 2px; }
.subtitle { color: #657185; font-size: 12px; margin-top: 5px; }
nav { display: flex; gap: 4px; background: #e6eaf2; padding: 4px; border-radius: 14px; margin: 22px 0; }
button { font: inherit; cursor: pointer; min-height: 44px; border: 1px solid #c7cfdb; border-radius: 10px; padding: 9px 14px; background: #fff; color: #2354a3; }
button:focus-visible { outline: 3px solid #007aff; outline-offset: 3px; }
button:disabled { opacity: .55; cursor: default; }
nav button { flex: 1; border: 0; padding: 8px 4px; background: transparent; color: #58667d; font-weight: 600; }
nav button[aria-current=page] { background: #fff; color: #194f9e; box-shadow: 0 2px 6px #1b365a16; }
.mac-group + .mac-group { margin-top: 28px; }
.mac-heading { font-size: 13px; font-weight: 600; color: #526078; margin: 0 0 10px; overflow-wrap: anywhere; }
.project, .message { border-radius: 14px; background: #fff; padding: 15px; margin: 10px 0; box-shadow: 0 2px 10px #23395b08; }
.project { border-left: 4px solid var(--project-color); }
.color-blue { --project-color: #007aff; } .color-orange { --project-color: #ff9500; }
.color-green { --project-color: #34c759; } .color-purple { --project-color: #af52de; }
.color-pink { --project-color: #ff2d55; } .color-teal { --project-color: #30b0c7; }
.color-indigo { --project-color: #5856d6; } .color-brown { --project-color: #a2845e; }
.project-title { display: flex; align-items: center; gap: 9px; }
.project-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #f1f3f8; color: var(--project-color); font-size: 19px; }
.project-line { margin-top: 10px; font-size: 14px; overflow-wrap: anywhere; }
.project-next { margin-top: 5px; font-size: 14px; color: #556581; overflow-wrap: anywhere; }
.project-counts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.count { font-size: 12px; color: #4b5e79; background: #edf1f7; padding: 3px 8px; border-radius: 6px; }
.muted, .empty { color: #687587; font-size: 13px; }
.empty { padding: 26px 8px; text-align: center; }
.stale { margin: -5px 0 10px; } .more { padding: 4px 4px 0; }
.message h3, .message p { font-weight: 400; overflow-wrap: anywhere; }
.message.unread h3, .message.unread p:not(.message-time) { font-weight: 700; }
.message p { margin: 7px 0; font-size: 14px; }
.message.unread { border-left: 4px solid #007aff; }
.read-label { font-size: 13px; color: #687587; }
.mark-read { margin-top: 5px; }
#settings { background: #fff; border-radius: 14px; padding: 20px; }
#settings p { margin: 14px 0; overflow-wrap: anywhere; }
#settings button { margin: 4px 0; }
.primary { background: #245eb5; color: white; border-color: #245eb5; }
#code { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; user-select: text; -webkit-user-select: text; background: #f1f3f8; padding: 12px; border-radius: 8px; }
.error { color: #983417; background: #fff1df; padding: 12px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
@media (prefers-color-scheme: dark) {
  :root { background: #11161e; color: #edf0f6; }
  .project, .message, #settings, nav button[aria-current=page] { background: #1e2632; }
  nav, .count, #code, .project-icon { background: #2a3443; }
  .eyebrow, .subtitle, .mac-heading, .muted, .empty, .project-next, .count, .read-label, nav button { color: #b1bdd0; }
  button { background: #283447; border-color: #52617a; color: #b5d3ff; }
  nav button[aria-current=page] { color: #b5d3ff; }
  .primary { background: #245eb5; color: white; }
  .error { background: #452f25; color: #ffd2ae; }
}