:root, [data-theme="sky"] {
  --bg: #EDF5FF; --card: #FFFFFF; --accent: #1565C0; --accent-contrast: #FFFFFF;
  --text: #1A237E; --muted: #90A4AE; --divider: #E0EAF4; --hover: #E3F2FD;
}
[data-theme="forest"] {
  --bg: #EDF7EE; --card: #FFFFFF; --accent: #2E7D32; --accent-contrast: #FFFFFF;
  --text: #1B5E20; --muted: #94AC96; --divider: #DCEADD; --hover: #E2F0E3;
}
[data-theme="sunset"] {
  --bg: #FFF3E9; --card: #FFFFFF; --accent: #E65100; --accent-contrast: #FFFFFF;
  --text: #7A2E0C; --muted: #C4A491; --divider: #F2E1D4; --hover: #FBE8D9;
}
[data-theme="plum"] {
  --bg: #F5EFFA; --card: #FFFFFF; --accent: #6A1B9A; --accent-contrast: #FFFFFF;
  --text: #4A148C; --muted: #AB9BBB; --divider: #E8DEF0; --hover: #EEE4F5;
}
[data-theme="rose"] {
  --bg: #FDF0F4; --card: #FFFFFF; --accent: #C2185B; --accent-contrast: #FFFFFF;
  --text: #880E4F; --muted: #BC93A5; --divider: #F0DEE5; --hover: #F8E4EC;
}
[data-theme="midnight"] {
  --bg: #0F172A; --card: #1E293B; --accent: #64B5F6; --accent-contrast: #0F172A;
  --text: #E2E8F0; --muted: #64748B; --divider: #334155; --hover: #263349;
}

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

body {
  font-family: 'Montserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

.hidden { display: none !important; }

/* Sign-in */
.signin { height: 100vh; display: flex; align-items: center; justify-content: center; }
.signin-card {
  background: var(--card); border-radius: 16px; padding: 48px 56px; text-align: center;
  border: 1px solid var(--divider);
}
.signin-card h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.signin-card p { color: var(--muted); margin-bottom: 24px; }
.signin-error { color: #C62828; margin-top: 16px; font-size: 13px; }

.btn-primary {
  background: var(--accent); color: var(--accent-contrast); border: none;
  border-radius: 8px; padding: 10px 24px; font-family: inherit; font-size: 15px;
  font-weight: 500; cursor: pointer;
}
.btn-primary:hover { opacity: 0.9; }

/* Layout */
.app { display: flex; height: 100vh; }
.sidebar {
  width: 260px; min-width: 260px; background: var(--card); border-right: 1px solid var(--divider);
  display: flex; flex-direction: column;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px;
}
.sidebar-header h1 { font-size: 20px; font-weight: 600; }
.main { flex: 1; overflow-y: auto; padding: 24px 32px; }

.icon-btn {
  background: none; border: none; font-size: 16px; cursor: pointer;
  color: var(--muted); padding: 4px 6px; border-radius: 6px;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn.danger:hover { color: #C62828; }

/* Topics */
.topic-list { list-style: none; overflow-y: auto; flex: 1; }
.topic-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 500;
}
.topic-item:hover { background: var(--hover); }
.topic-item.active { background: var(--hover); border-right: 3px solid var(--accent); }
.topic-item .count { color: var(--muted); font-size: 12px; font-weight: 400; }

.add-form { padding: 8px 12px; }
.add-form input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--divider); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px;
}
.add-form input::placeholder { color: var(--muted); }
.add-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.sync-status { padding: 6px 16px 10px; font-size: 11px; color: var(--muted); min-height: 26px; }

/* Entries */
.topic-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.topic-header h2 { font-size: 22px; font-weight: 600; }
.topic-view .add-form { padding: 0 0 12px; }
.topic-view .add-form input { background: var(--card); }

.entry-list { list-style: none; max-width: 640px; }
.entry-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--divider); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 8px; font-size: 15px;
}
.entry-item.dragging { opacity: 0.4; }
.entry-item .content { flex: 1; word-break: break-word; }
.entry-item.done .content { text-decoration: line-through; color: var(--muted); }
.entry-item .actions { display: none; gap: 4px; }
.entry-item:hover .actions { display: flex; }

.check {
  width: 20px; height: 20px; min-width: 20px; border: 2px solid var(--muted);
  border-radius: 50%; background: none; cursor: pointer; position: relative;
}
.entry-item.done .check { background: var(--accent); border-color: var(--accent); }
.entry-item.done .check::after {
  content: "\2713"; color: var(--accent-contrast); position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -52%); font-size: 12px;
}

.drag-handle { cursor: grab; color: var(--muted); font-size: 14px; user-select: none; }
.done-divider {
  font-size: 12px; color: var(--muted); margin: 16px 0 8px;
  text-transform: uppercase; letter-spacing: 0.08em; list-style: none;
}

.empty-state { display: flex; height: 60vh; align-items: center; justify-content: center; color: var(--muted); }

/* Settings modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
.modal { background: var(--card); border-radius: 16px; padding: 28px 32px; width: 380px; }
.modal h2 { font-size: 20px; margin-bottom: 16px; }
.modal-label { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--bg); border: 2px solid var(--divider); border-radius: 10px;
  padding: 10px 6px; cursor: pointer; font-family: inherit; font-size: 12px; color: var(--text);
}
.theme-swatch.active { border-color: var(--accent); }
.theme-swatch span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.08); }
.theme-swatch[data-theme-pick="sky"] span      { background: linear-gradient(135deg, #EDF5FF 50%, #1565C0 50%); }
.theme-swatch[data-theme-pick="forest"] span   { background: linear-gradient(135deg, #EDF7EE 50%, #2E7D32 50%); }
.theme-swatch[data-theme-pick="sunset"] span   { background: linear-gradient(135deg, #FFF3E9 50%, #E65100 50%); }
.theme-swatch[data-theme-pick="plum"] span     { background: linear-gradient(135deg, #F5EFFA 50%, #6A1B9A 50%); }
.theme-swatch[data-theme-pick="rose"] span     { background: linear-gradient(135deg, #FDF0F4 50%, #C2185B 50%); }
.theme-swatch[data-theme-pick="midnight"] span { background: linear-gradient(135deg, #0F172A 50%, #64B5F6 50%); }