:root {
  --tag-marocanite-bg: #ecfdf5;
  --tag-marocanite-fg: #046c54;
  --tag-autonomie-bg: #dbeafe;
  --tag-autonomie-fg: #0b3f95;
  --tag-neutre-bg: #eceff3;
  --tag-neutre-fg: #1f2933;
  --tag-rasd-bg: #fee2e2;
  --tag-rasd-fg: #b91c1c;
}

[data-theme="dark"] {
  --tag-marocanite-bg: rgba(16, 185, 129, 0.24);
  --tag-marocanite-fg: #6ee7b7;
  --tag-autonomie-bg: rgba(59, 130, 246, 0.24);
  --tag-autonomie-fg: #93c5fd;
  --tag-neutre-bg: rgba(148, 163, 184, 0.22);
  --tag-neutre-fg: #e5e7eb;
  --tag-rasd-bg: rgba(239, 68, 68, 0.26);
  --tag-rasd-fg: #fca5a5;
}

.position-tag {
  border: 1px solid transparent;
  font-weight: 600;
}

.position-tag--MAROCANITE {
  background: var(--tag-marocanite-bg);
  color: var(--tag-marocanite-fg);
  border-color: color-mix(in srgb, var(--tag-marocanite-fg) 14%, transparent);
}

.position-tag--AUTONOMIE {
  background: var(--tag-autonomie-bg);
  color: var(--tag-autonomie-fg);
  border-color: color-mix(in srgb, var(--tag-autonomie-fg) 14%, transparent);
}

.position-tag--NEUTRE {
  background: var(--tag-neutre-bg);
  color: var(--tag-neutre-fg) !important;
  border-color: rgba(31,41,51,0.25);
}

.position-tag--RECONNAIT_RASD,
.position-tag--RASD {
  background: var(--tag-rasd-bg);
  color: var(--tag-rasd-fg);
  border-color: color-mix(in srgb, var(--tag-rasd-fg) 14%, transparent);
}

.chip .bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
}

.breakdown-chip .bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.support-sheet.is-open .support-panel {
  animation: sheetIn 180ms cubic-bezier(.2,.8,.2,1);
}

@keyframes sheetIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fade-up {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chip-group, .radio-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .chip, .radio { border-radius: var(--spi-radius-lg); padding: 0.35rem 0.85rem; border: 1px solid var(--spi-border-subtle); background: var(--spi-surface-alt); color: var(--spi-text-muted); transition: background 160ms ease, color 160ms ease, border 160ms ease, transform 160ms ease; display: inline-flex; align-items: center; gap: 0.4rem; }
    .radio-tabs .radio { font-size: 0.92rem; line-height: 1.2; }
    /* Continent chips use data-code (not data-position). Keep a clear active state. */
    .chip.is-active[data-code],
    .chip.is-active:not([data-position]) { background: var(--spi-accent-soft); border-color: var(--spi-accent-border); color: var(--spi-accent); }
    .chip.is-active[data-position="MAROCANITE"], .radio.is-active[data-position="MAROCANITE"] { background: var(--tag-marocanite-bg); color: var(--tag-marocanite-fg); border-color: color-mix(in srgb, var(--tag-marocanite-fg) 20%, transparent); }
    .chip.is-active[data-position="AUTONOMIE"], .radio.is-active[data-position="AUTONOMIE"] { background: var(--tag-autonomie-bg); color: var(--tag-autonomie-fg); border-color: color-mix(in srgb, var(--tag-autonomie-fg) 22%, transparent); }
    .chip.is-active[data-position="NEUTRE"], .radio.is-active[data-position="NEUTRE"] { background: var(--tag-neutre-bg); color: var(--tag-neutre-fg); border-color: color-mix(in srgb, var(--tag-neutre-fg) 25%, transparent); }
    .chip.is-active[data-position="RECONNAIT RASD"], .radio.is-active[data-position="RECONNAIT RASD"],
    .chip.is-active[data-position="RECONNAIT_RASD"], .radio.is-active[data-position="RECONNAIT_RASD"],
    .chip.is-active[data-position="RASD"], .radio.is-active[data-position="RASD"] { background: var(--tag-rasd-bg); color: var(--tag-rasd-fg); border-color: color-mix(in srgb, var(--tag-rasd-fg) 30%, transparent); }
    .chip.is-active[data-position="ALL"], .radio.is-active[data-position="ALL"] { background: var(--spi-accent-soft); border-color: var(--spi-accent-border); color: var(--spi-accent); }
    .chip:hover, .radio:hover { transform: translateY(-1px); }
    .reset-link { font-size: 0.9rem; color: var(--spi-accent); font-weight: 600; text-decoration: underline; cursor: pointer; width: fit-content; }
    #list-container { margin-bottom: 3rem; }
    .table-wrapper { background: var(--spi-surface); border: 1px solid var(--spi-border-subtle); border-radius: var(--spi-radius-lg); box-shadow: var(--spi-shadow-soft); overflow: hidden; margin-top: 1.5rem; }
    table { width: 100%; border-collapse: collapse; }
    thead { background: var(--spi-surface-alt); color: var(--spi-text-muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; }
    th, td { padding: 0.9rem 1rem; text-align: left; border-bottom: 1px solid var(--spi-border-subtle); }
    tbody tr { transition: background 160ms ease; }
    tbody tr:hover { background: var(--spi-accent-soft); }
    .flag { width: 44px; height: 33px; border-radius: var(--spi-radius-sm); border: 1px solid var(--spi-border-subtle); object-fit: cover; }
    .position-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; border-radius: var(--spi-radius-lg); font-size: 0.85rem; font-weight: 600; border: 1px solid transparent; }
    .position-tag img { display: none; }
    .source-link { display: grid; gap: 0.2rem; color: var(--spi-text-main); }
    .source-link span { font-size: 0.8rem; color: var(--spi-text-muted); }
    .cards { display: none; }
    .card { background: var(--spi-surface); border: 1px solid var(--spi-border-subtle); border-radius: var(--spi-radius-lg); padding: 1.1rem; box-shadow: var(--spi-shadow-soft); display: grid; gap: 0.8rem; }
    .card-meta { display: flex; justify-content: space-between; color: var(--spi-text-muted); font-size: 0.85rem; }
    .empty-state { padding: 2.5rem; text-align: center; background: var(--spi-surface); border: 1px solid var(--spi-border-subtle); border-radius: var(--spi-radius-lg); margin-top: 1.5rem; color: var(--spi-text-muted); }
    .toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(16px); background: var(--spi-text-main); color: var(--spi-surface); padding: 0.75rem 1.1rem; border-radius: 999px; box-shadow: var(--spi-shadow-soft); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; z-index: 50; }
    .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
    .offline-banner { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); background: var(--spi-danger); color: #fff; padding: 0.5rem 1rem; border-radius: var(--spi-radius-md); box-shadow: var(--spi-shadow-soft); z-index: 100; display: none; }
    .offline-banner.is-visible { display: block; }
    .support-sheet { position: fixed; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--spi-bg) 40%, #000); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 60; }
    .support-sheet.is-open { opacity: 1; pointer-events: auto; }
    .support-panel { width: min(620px, 95vw); background: var(--spi-surface); border-radius: var(--spi-radius-lg); box-shadow: var(--spi-shadow-soft); padding: 1.75rem; display: grid; gap: 1rem; border: 1px solid var(--spi-border-subtle); }
    .support-panel h3 { margin: 0; font-size: var(--size-h2); }
    .support-panel p { margin: 0; color: var(--spi-text-muted); }
    .support-panel .section { border: 1px solid var(--spi-border-subtle); border-radius: var(--spi-radius-md); padding: 1rem; display: grid; gap: 0.6rem; background: var(--spi-surface-alt); }
    .support-panel code { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.75rem; border-radius: var(--spi-radius-md); background: var(--spi-surface); border: 1px solid var(--spi-border-subtle); font-size: 0.85rem; font-family: "SFMono-Regular", Consolas, monospace; white-space: nowrap; overflow-x: auto; }
    .support-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; }
    .support-line > span:first-child { font-weight: 600; font-size: 0.85rem; color: var(--spi-text-main); }
    .support-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
    .report-panel { width: min(520px, 95vw); }
    .report-form { display: grid; gap: 1rem; margin-top: 1rem; }
    .report-form label { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--spi-text-main); }
    .report-form select,
    .report-form input,
    .report-form textarea { border-radius: var(--spi-radius-md); border: 1px solid var(--spi-border-subtle); padding: 0.6rem 0.75rem; background: var(--spi-surface); font: inherit; color: var(--spi-text-main); }
    .report-form textarea { min-height: 120px; resize: vertical; }
    .report-form select:focus,
    .report-form input:focus,
    .report-form textarea:focus { outline: 2px solid var(--spi-accent); border-color: var(--spi-accent); }
    .report-note { margin: 0; font-size: 0.85rem; color: var(--spi-text-muted); background: var(--spi-surface-alt); border: 1px solid var(--spi-border-subtle); border-radius: var(--spi-radius-md); padding: 0.85rem; }

    /* Honeypot field: hidden from humans, bots may fill it. */
    .hp-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }