:root {
  --color-background-primary:   #111113;
  --color-background-secondary: #1a1a1e;
  --color-text-primary:         #e8e8ea;
  --color-text-secondary:       #9898a0;
  --color-text-tertiary:        #5e5e66;
  --color-border-secondary:     #2e2e33;
  --color-border-tertiary:      #232328;
  --border-radius-md:           7px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--color-background-primary); color: var(--color-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.wrap { max-width: 820px; margin: 0 auto; padding: 2.5rem 2rem 3rem; }

/* header row: title + subtitle on the left, back link on the right */
.header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 1.75rem; }
.header-titles { display: flex; flex-direction: column; gap: 4px; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.subtitle { font-size: 16px; color: var(--color-text-secondary); font-style: italic; }
.back { font-size: 18px; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.back:hover { color: var(--color-text-primary); }

/* clears every stored bookmark after a confirmation prompt */
.clear-all { font-size: 15px; color: var(--color-text-secondary); background: var(--color-background-secondary); border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 7px 12px; margin-bottom: 1.5rem; cursor: pointer; }
.clear-all:hover { color: var(--color-text-primary); border-color: #3a3a44; }

/* one bookmarked step */
.bookmark { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); margin-bottom: 10px; }
.bookmark-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bookmark-link { font-size: 18px; font-weight: 500; color: var(--color-text-primary); text-decoration: none; }
.bookmark-link:hover { text-decoration: underline; }
.bookmark-course { font-size: 14px; color: var(--color-text-tertiary); }
.bookmark-note { width: 220px; font-size: 15px; padding: 7px 10px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-secondary); background: var(--color-background-secondary); color: var(--color-text-primary); outline: none; }
.bookmark-note:focus { border-color: #3a3a44; }
.bookmark-remove { flex: none; font-size: 16px; color: var(--color-text-tertiary); background: none; border: none; cursor: pointer; padding: 6px; }
.bookmark-remove:hover { color: #F7C1C1; }

.empty { font-size: 18px; color: var(--color-text-secondary); padding: 2rem 0; text-align: center; }

/* mobile — stack the note field under the link instead of squeezing it */
@media (max-width: 560px) {
  .bookmark { flex-wrap: wrap; }
  .bookmark-note { width: 100%; }
}