* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  --tag-accent: #bc8cff;
}

:root[data-tone="light"] {
  color-scheme: light;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 22px;
  color: var(--text, #e6edf3);
  background:
    linear-gradient(90deg, var(--grid-a, rgba(255,255,255,.035)) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(var(--grid-b, rgba(255,255,255,.03)) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(circle at 12% 14%, var(--glow-a, rgba(88,166,255,.13)), transparent 30%),
    var(--bg, #0d1117);
  font-family: "Trebuchet MS", "Segoe UI", "Microsoft YaHei", sans-serif;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.app-shell {
  width: min(820px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent, #58a6ff);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

h1 {
  margin: 0;
  font-size: clamp(34px, 7vw, 56px);
  line-height: .95;
}

.subtitle {
  margin: 8px 0 0;
  color: var(--muted, #8b949e);
}

.theme-control {
  display: grid;
  gap: 6px;
  color: var(--muted, #8b949e);
  font-size: 12px;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line, #30363d);
  border-radius: 8px;
  color: var(--text, #e6edf3);
  background: var(--key-bg, #0d1117);
  min-height: 42px;
  padding: 9px 12px;
  outline: none;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--accent, #58a6ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #58a6ff), transparent 78%);
}

textarea {
  height: 42px;
  min-height: 42px;
  resize: vertical;
}

.composer {
  display: block;
  padding: 12px;
  border: 1px solid var(--line, #30363d);
  border-radius: 10px;
  background: var(--panel, #161b22);
  box-shadow: 0 16px 36px var(--shadow, rgba(1, 4, 9, .22));
}

.fields {
  display: grid;
  gap: 7px;
}

.tag-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(42px, 1fr);
  gap: 8px;
  align-items: start;
}

.tag-input-wrap {
  position: relative;
  min-width: 0;
}

.add-button {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  font-size: 22px;
  line-height: 1;
}

.tag-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line, #30363d);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel, #161b22), var(--bg, #0d1117) 18%);
  box-shadow: 0 14px 30px var(--shadow, rgba(1, 4, 9, .28));
}

.tag-suggestions[hidden] {
  display: none;
}

button.tag-suggestion {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--accent, #58a6ff);
  background: color-mix(in srgb, var(--accent, #58a6ff), transparent 86%);
  font-size: 12px;
}

button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  color: #07120f;
  background: var(--accent, #58a6ff);
  font-weight: 900;
}

button.secondary,
button.filter,
button.tag-filter {
  color: var(--text, #e6edf3);
  background: var(--touch-bg, #21262d);
}

button.tag-filter {
  border: 1px solid color-mix(in srgb, var(--tag-accent), transparent 70%);
  color: var(--tag-accent);
  background: color-mix(in srgb, var(--tag-accent), transparent 90%);
}

button.compact,
button.filter,
button.tag-filter,
button.sync-button {
  min-height: 34px;
  padding: 0 11px;
  font-size: 13px;
}

button.sync-button {
  border: 1px solid color-mix(in srgb, var(--accent, #58a6ff), transparent 45%);
  color: var(--accent, #58a6ff);
  background: color-mix(in srgb, var(--accent, #58a6ff), transparent 86%);
}

button.sync-button:hover {
  background: color-mix(in srgb, var(--accent, #58a6ff), transparent 78%);
}

.controls,
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.sync-cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin-left: auto;
  min-width: fit-content;
}

.filter-tabs,
.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button.filter.active,
button.filter.active {
  color: #07120f;
  background: var(--accent, #58a6ff);
}

button.tag-filter.active {
  color: #12071f;
  background: var(--tag-accent);
  border-color: var(--tag-accent);
}

.tag-filters:empty {
  display: none;
}

.sync-status,
.toolbar {
  color: var(--muted, #8b949e);
  font-size: 13px;
}

.sync-status {
  max-width: 120px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
}

.sync-status.error {
  color: var(--danger, #f85149);
}

.hidden-action {
  display: none;
}

.list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line, #30363d);
  border-radius: 10px;
  background: var(--panel, #161b22);
  box-shadow: 0 12px 30px var(--shadow, rgba(1, 4, 9, .2));
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease;
}

.item.done {
  opacity: .5;
  box-shadow: none;
}

.item.done .title {
  text-decoration: line-through;
}

.item.dragging {
  opacity: .7;
  transform: scale(.99);
  border-color: var(--accent, #58a6ff);
  box-shadow: none;
}

.drag-handle,
.tag-button,
.delete-button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  color: var(--muted, #8b949e);
  background: transparent;
  touch-action: none;
  user-select: none;
}

.drag-handle {
  font-size: 22px;
  line-height: 1;
  cursor: grab;
  transform: translateY(1px);
}

.drag-handle:active {
  cursor: grabbing;
}

.delete-button {
  font-size: 22px;
}

.tag-button {
  font-size: 16px;
  font-weight: 900;
}

.tag-button:hover {
  color: var(--accent, #58a6ff);
  background: color-mix(in srgb, var(--accent, #58a6ff), transparent 88%);
}

.delete-button:hover {
  color: var(--danger, #f85149);
  background: color-mix(in srgb, var(--danger, #f85149), transparent 88%);
}

.check {
  width: 21px;
  height: 21px;
  min-height: 21px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent, #58a6ff);
  cursor: pointer;
}

.content {
  min-width: 0;
}

.title {
  display: block;
  color: var(--text, #e6edf3);
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.title a,
.note a {
  color: var(--accent, #58a6ff);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #58a6ff), transparent 55%);
}

.title a:hover,
.note a:hover {
  border-bottom-color: currentColor;
}

.note {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--text, #e6edf3), var(--bg, #0d1117) 42%);
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.note[hidden],
.tags:empty {
  display: none;
}

.note.is-collapsible {
  cursor: pointer;
}

.note.expanded {
  white-space: pre-wrap;
  overflow: visible;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.tag-editor {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  margin-top: 9px;
}

.tag-editor:not([hidden]) {
  display: grid;
}

.tag-editor input {
  min-width: 0;
  padding-block: 7px;
}

.tag {
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--tag-accent);
  background: color-mix(in srgb, var(--tag-accent), transparent 88%);
  font-size: 12px;
  font-weight: 800;
}

.empty {
  display: none;
  padding: 22px;
  border: 1px dashed var(--line, #30363d);
  border-radius: 10px;
  color: var(--muted, #8b949e);
  text-align: center;
  background: color-mix(in srgb, var(--panel, #161b22), transparent 42%);
}

.empty.show {
  display: block;
}

@media (max-width: 620px) {
  body {
    padding: 12px 10px;
  }

  .app-header {
    align-items: start;
    gap: 12px;
  }

  .eyebrow,
  .subtitle {
    display: none;
  }

  h1 {
    font-size: 34px;
  }

  .theme-control {
    width: 132px;
  }

  .theme-control span {
    display: none;
  }

  select,
  input,
  textarea {
    border-radius: 7px;
    min-height: 38px;
    padding: 7px 10px;
  }

  textarea {
    height: 38px;
    min-height: 38px;
  }

  .composer {
    padding: 10px;
  }

  .tag-submit-row {
    grid-template-columns: minmax(0, 3fr) minmax(44px, 1fr);
    gap: 7px;
  }

  .add-button {
    min-height: 38px;
    padding: 0 10px;
    font-size: 20px;
  }

  .tag-suggestions {
    gap: 5px;
    padding: 7px;
  }

  button.tag-suggestion {
    min-height: 27px;
    padding: 0 8px;
  }

  .controls {
    align-items: center;
    flex-direction: row;
    gap: 8px;
  }

  .toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .sync-cluster {
    gap: 6px;
    margin-left: auto;
  }

  .sync-status {
    max-width: 76px;
    font-size: 10px;
  }

  .filter-tabs,
  .tag-filters {
    gap: 6px;
  }

  button.compact,
  button.filter,
  button.tag-filter,
  button.sync-button {
    min-height: 31px;
    padding: 0 9px;
    font-size: 12px;
  }

  .item {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    gap: 7px;
    padding: 10px 8px;
    border-radius: 9px;
  }

  .drag-handle,
  .tag-button,
  .delete-button {
    width: 26px;
    min-height: 26px;
  }

  .check {
    width: 19px;
    height: 19px;
    min-height: 19px;
    margin-top: 1px;
  }

  .title {
    font-size: 15px;
  }

  .note {
    font-size: 13px;
    margin-top: 3px;
  }

  .tags {
    gap: 5px;
    margin-top: 6px;
  }

  .tag {
    padding: 2px 7px;
    font-size: 11px;
  }

  .tag-editor {
    grid-template-columns: 1fr auto;
  }

  .tag-editor .cancel-tags {
    grid-column: 2;
  }
}