html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }

.nav { border-bottom: 1px solid var(--color-divider); flex-shrink: 0; }
.nav-brand { text-transform: uppercase; letter-spacing: 0.08em; font-size: 20px; text-decoration: none; }
.nav-tabs { display: flex; gap: var(--space-2); margin-left: auto; }
.nav-tabs a { padding: 8px 16px; border-radius: var(--radius-sm); }
.nav-tabs a[aria-current='page'] { background: var(--color-accent-100); color: var(--color-accent-900); font-weight: 600; }
.nav-auth { margin-left: var(--space-4); }

.logged-out .only-logged-in { display: none !important; }
.logged-in .only-logged-out { display: none !important; }

.split { display: flex; flex: 1; min-height: 0; }
.sidebar { width: 320px; flex-shrink: 0; border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; }
.sidebar-header { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.sidebar-list { overflow-y: auto; flex: 1; }
.row { display: block; padding: var(--space-4); border-bottom: 1px solid var(--color-neutral-200); text-decoration: none; color: inherit; border-left: 3px solid transparent; }
.row:hover { background: var(--color-accent-100); }
.row.active { background: var(--color-accent-100); border-left-color: var(--color-accent-600); }
.row-top { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.row-title { font-family: var(--font-heading); font-size: 17px; }
.row-date { font-size: 11px; color: var(--color-neutral-600); flex-shrink: 0; }
.row-preview { font-size: 13px; color: var(--color-neutral-700); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.detail { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.detail-inner { padding: var(--space-6) var(--space-8); max-width: 720px; }
.detail-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-neutral-500); font-size: 15px; }
.detail-meta { font-size: 12px; color: var(--color-neutral-600); margin-bottom: var(--space-6); }
.detail-inner h1 { font-size: 32px; margin-bottom: var(--space-2); }

.project-list { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-8); }
.project-row { display: block; text-decoration: none; color: inherit; padding: var(--space-4); }
.project-row-top { display: flex; align-items: center; gap: var(--space-4); }
.project-thumb { width: 70px; height: 70px; flex-shrink: 0; background: var(--color-surface); border: 1px solid var(--color-divider); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-thumb-placeholder { font-size: 10px; color: var(--color-neutral-500); text-align: center; letter-spacing: 0.02em; text-transform: uppercase; }
.project-row-body { flex: 1; min-width: 0; }
.project-row-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; }
.project-row-meta { font-size: 12px; color: var(--color-neutral-600); margin-top: 2px; }
.status-tag { flex-shrink: 0; font-size: 11px; padding: 4px 10px; border: 1px solid var(--color-divider); font-family: var(--font-heading); white-space: nowrap; }
.status-tag.status-in-progress { border-color: var(--color-accent); color: var(--color-accent-700); }
.status-tag.status-done { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.project-progress-track { height: 4px; background: var(--color-neutral-200); margin-top: var(--space-3); }
.project-progress-fill { height: 100%; background: var(--color-accent-600); }
.projects-intro { padding: var(--space-6) var(--space-8) 0; max-width: 720px; }

.home { padding: var(--space-8); max-width: 720px; margin: 0 auto; width: 100%; }
.home-logo { margin-bottom: var(--space-6); }
.home-logo .home-logo-img { display: block; max-width: 420px; width: 100%; height: auto; margin: 0 auto; border: none; }
.home .card { padding: var(--space-6); }
.home-links { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.home-links .btn { flex: 1; }

.back-link { display: inline-flex; margin-bottom: var(--space-4); }
.project-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.project-detail-head h1 { margin: 0; }

.projects-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-8) 0; max-width: 720px; }
.projects-intro { flex: 1; }

.detail-inner input[type=checkbox], .home input[type=checkbox] { margin-right: 6px; accent-color: var(--color-accent); }
.detail-inner ul:has(input[type=checkbox]), .home ul:has(input[type=checkbox]) { list-style: none; padding-left: 0; }
.detail-inner img, .home img { border: 1px solid var(--color-divider); margin: var(--space-3) 0; }

.note-toolbar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-divider); flex-shrink: 0; }
.toolbar-btn { border: 1px solid var(--color-divider); background: transparent; padding: 6px 10px; cursor: pointer; font-family: var(--font-heading); font-size: 13px; color: var(--color-text); }
.toolbar-btn:hover { background: var(--color-accent-100); }
.save-status { margin-left: auto; font-size: 12px; color: var(--color-neutral-600); white-space: nowrap; }
.save-status.saving { color: var(--color-accent); }
.save-status.error { color: #a3241f; }
.delete-link { font-size: 12px; color: var(--color-neutral-600); text-decoration: none; }
.delete-link:hover { color: #a3241f; text-decoration: underline; }

.note-title-input { display: block; width: 100%; border: none; background: transparent; padding: 0; margin-bottom: var(--space-2); font-family: var(--font-heading); font-weight: 600; font-size: 32px; color: var(--color-text); }
.note-title-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

.blocks-container { display: flex; flex-direction: column; gap: var(--space-1); }
.block { display: flex; align-items: flex-start; gap: var(--space-2); }
.block-input { flex: 1; display: block; width: 100%; border: none; background: transparent; padding: 2px 0; margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--color-text); resize: none; overflow: hidden; }
.block-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.block-heading-input { font-family: var(--font-heading); font-weight: 600; font-size: 22px; }
.block-check { width: 18px; height: 18px; margin-top: 6px; flex-shrink: 0; accent-color: var(--color-accent); cursor: pointer; }
.block-input.checked-text { text-decoration: line-through; color: var(--color-neutral-600); }
.block-remove { border: none; background: transparent; color: var(--color-neutral-500); cursor: pointer; padding: 2px 6px; font-size: 16px; line-height: 1; opacity: 0; flex-shrink: 0; }
.block:hover .block-remove { opacity: 1; }
.block-remove:hover { color: var(--color-text); }
.block-drag-handle { border: none; background: transparent; color: var(--color-neutral-500); cursor: grab; padding: 2px 4px; font-size: 14px; line-height: 1; opacity: 0; flex-shrink: 0; margin-top: 3px; touch-action: none; user-select: none; }
.block:hover .block-drag-handle { opacity: 1; }
.block-drag-handle:hover { color: var(--color-text); }
.block.dragging { background: var(--color-neutral-100); box-shadow: 0 2px 10px rgba(0,0,0,0.12); position: relative; z-index: 10; cursor: grabbing; }
.block.dragging .block-drag-handle { cursor: grabbing; opacity: 1; }

.back-to-notes-mobile { display: none; text-decoration: none; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .nav { flex-wrap: wrap; padding: var(--space-3); gap: var(--space-2); }
  .nav-brand { font-size: 16px; }
  .nav-logo { height: 17px; }
  .nav-tabs { gap: 0; }
  .nav-tabs a { padding: 6px 10px; font-size: 13px; }
  .nav-auth { margin-left: 0; }
  .nav-auth .btn { padding: 6px 10px; font-size: 13px; }

  .split { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; }
  .notes-detail-view .sidebar { display: none; }
  .notes-list-view .detail { display: none; }

  .back-to-notes-mobile { display: inline-flex; }
  .note-toolbar { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .save-status { margin-left: auto; }

  .detail-inner { padding: var(--space-4); }
  .note-title-input { font-size: 24px; }

  .block-remove { opacity: 1; }
  .block-drag-handle { opacity: 1; }

  .home { padding: var(--space-4); }
  .home-links { flex-direction: column; }

  .project-list { padding: var(--space-4); }
  .project-thumb { width: 52px; height: 52px; }
  .projects-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0; }
  .projects-intro { padding: 0; }
  .projects-header .btn { width: 100%; }
}