:root {
  --bg-primary: #f8f9fa;
  --bg-secondary: #fff;
  --bg-collected: #e6f4ea;
  --text-primary: #333;
  --text-secondary: #666;
  --text-heading: #333;
  --text-muted: #888;
  --border-light: #ccc;
  --border-medium: #ddd;
  --accent: #0366d6;
  --accent-hover: #0255b3;
  --btn-secondary-bg: #e1e4e8;
  --btn-secondary-hover: #d1d5da;
  --btn-secondary-text: #333;
  --shadow: rgba(0,0,0,0.1);
  --shadow-sm: rgba(0,0,0,0.08);
  --input-bg: #fff;
}

body[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-collected: #1e3a2a;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-heading: #f0f0f0;
  --text-muted: #888;
  --border-light: #404040;
  --border-medium: #4a4a4a;
  --accent: #4a9eff;
  --accent-hover: #6bb3ff;
  --btn-secondary-bg: #3a3a3a;
  --btn-secondary-hover: #4a4a4a;
  --btn-secondary-text: #e0e0e0;
  --shadow: rgba(0,0,0,0.3);
  --shadow-sm: rgba(0,0,0,0.2);
  --input-bg: #2d2d2d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-collected: #1e3a2a;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-heading: #f0f0f0;
    --text-muted: #888;
    --border-light: #404040;
    --border-medium: #4a4a4a;
    --accent: #4a9eff;
    --accent-hover: #6bb3ff;
    --btn-secondary-bg: #3a3a3a;
    --btn-secondary-hover: #4a4a4a;
    --btn-secondary-text: #e0e0e0;
    --shadow: rgba(0,0,0,0.3);
    --shadow-sm: rgba(0,0,0,0.2);
    --input-bg: #2d2d2d;
  }
}

/* Theme toggle icon visibility */
#theme-icon-light { display: none; }
#theme-icon-dark { display: inline; }

:root[data-theme="dark"] #theme-icon-light { display: inline; }
:root[data-theme="dark"] #theme-icon-dark { display: none; }
:root[data-theme="light"] #theme-icon-light { display: none; }
:root[data-theme="light"] #theme-icon-dark { display: inline; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) #theme-icon-light,
  :root[data-theme=""] #theme-icon-light { display: inline; }
  :root:not([data-theme]) #theme-icon-dark,
  :root[data-theme=""] #theme-icon-dark { display: none; }
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--bg-primary);
}

header {
  position: relative;
  text-align: center;
  margin-bottom: 2rem;
}

header h1 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
  color: var(--text-heading);
}

/* Header social links */
.header-social {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.5rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: 50%;
  transition: all 0.2s;
  text-decoration: none;
  box-shadow: 0 2px 4px var(--shadow);
  border: none;
  cursor: pointer;
}

.social-link:hover {
  color: var(--text-heading);
  background: var(--btn-secondary-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

/* Getting started steps */
#steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.step {
  text-align: center;
  padding: 1.25rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.step h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--text-heading);
}

.step p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.step a {
  color: var(--accent);
}

@media (max-width: 600px) {
  #steps {
    grid-template-columns: 1fr;
  }
}

/* Input section */
#input-section {
  margin-bottom: 2rem;
}

#input-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

#hdyc-input {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem;
  border: 2px solid var(--border-light);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 0.75rem;
  background: var(--input-bg);
  color: var(--text-primary);
}

#hdyc-input:focus {
  border-color: var(--accent);
  outline: none;
}

#input-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

#parse-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

#parse-btn:hover {
  background: var(--accent-hover);
}

#clear-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

#clear-btn:hover {
  background: var(--btn-secondary-hover);
}

/* Results */
.hidden {
  display: none;
}

#summary {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  box-shadow: 0 1px 3px var(--shadow);
}

#summary .count-collected {
  color: #28a745;
  font-weight: 700;
}

#summary .count-missing {
  color: #d73a49;
  font-weight: 700;
}

/* Collapsible sections */
details {
  margin-bottom: 1.5rem;
}

details summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  margin-bottom: 0;
  color: var(--text-heading);
}

details summary h2::before {
  content: "\25B6";
  font-size: 0.75rem;
  transition: transform 0.2s;
}

details[open] summary h2::before {
  transform: rotate(90deg);
}

details .country-grid {
  margin-top: 0.75rem;
}

details summary h2 span {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Country grid */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.country-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  box-shadow: 0 1px 2px var(--shadow-sm);
}

.country-card .flag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.flag-img {
  width: 28px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 1px var(--shadow);
}

.flag-img-fallback {
  width: 20px;
  padding: 2px 6px;
  box-shadow: none;
  fill: var(--text-secondary);
}

body[data-theme="dark"] .flag-img-fallback {
  filter: invert(1);
}

.country-card .name {
  flex: 1;
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-card .editors {
  display: flex;
  gap: 0.35rem;
}

.editor-link {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  color: #fff;
}

.editor-link.id {
  background: #7ebc6f;
}

.editor-link.rapid {
  background: #f0a030;
}

.editor-link.josm {
  background: #6b8fc3;
}

.editor-link:hover {
  opacity: 0.85;
}

.editor-link.josm-ok {
  background: #28a745;
}

.editor-link.josm-err {
  background: #d73a49;
}

/* Task/QA tool links */
.link-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
}

.tasks {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.task-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  text-decoration: none;
  border-radius: 4px;
  color: var(--text-secondary);
  background: var(--btn-secondary-bg);
  border: 1px solid var(--border-light);
}

.task-link:hover {
  color: var(--text-heading);
  background: var(--btn-secondary-hover);
}

.task-link-mr {
  background: #24464d;
  border-color: #1b353b;
}

.task-link-mr:hover {
  background: #1b353b;
}

.task-link-mr .task-icon-dark {
  filter: invert(1);
}

.task-link-osmose {
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
}

.task-link-osmose:hover {
  background: none;
  opacity: 0.8;
}

.task-link-osmose .task-icon {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.task-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
}

.task-link:has(.task-icon-wide) {
  width: 30px;
}

.task-icon-wide {
  width: 22px;
}

body[data-theme="dark"] .task-icon-dark {
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .task-icon-dark {
    filter: invert(1);
  }
}

/* Collected cards are simpler */
#collected-list .country-card {
  background: var(--bg-collected);
}

/* Footer */
footer {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-medium);
  color: var(--text-muted);
  font-size: 0.85rem;
}

footer a {
  color: var(--accent);
}

@media (max-width: 600px) {
  .country-grid {
    grid-template-columns: 1fr;
  }
}