:root {
  /* Ink-navy / parchment ground — the registry as a bound notarial deed
     register rather than a dark SaaS console. Dark is the ink-room at
     night, light is the paper itself; a brass-gold seal is the one accent. */
  --bg-dark: #12141f;
  --fg-dark: #f0ece0;
  --bg-light: #f8f3e6;
  --fg-light: #1e1a12;
  --header-dark: #171a28;
  --header-light: #f0e8d6;
  --panel-dark: #1b1f30;
  --panel-light: #fbf7ec;
  --border-dark: #2f3550;
  --border-light: #ddd0ab;
  --muted-dark: #9498b3;
  --muted-light: #6e6650;
  /* Fill accent: brass/gold seal, only for solid backgrounds — always
     paired with --on-accent for text, since it's too light to read
     text/borders against a page background in either theme (see
     --accent-text below). Kept out of the red/green/orange/blue/purple
     hues already spoken for by status and kanban colors. */
  --accent: #c9a13c;
  --accent-hover: #b38c2e;
  --on-accent: #1c1710;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;
}

/* Accent used AS text/border color (links, active states, icons): the raw
   fill gold is too light to read on a white page, so light theme reads a
   deepened bronze while dark theme reads a brightened gold against the
   near-black ink ground. */
body.dark { --accent-text: #d9b654; }
body.light { --accent-text: #6e4f10; }

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  font-family: var(--font-body);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 4rem;
  overflow-x: hidden;
  transition: background-color 0.2s, color 0.2s;
}

body.dark {
  background: var(--bg-dark);
  color: var(--fg-dark);
}

body.light {
  background: var(--bg-light);
  color: var(--fg-light);
}

a {
  color: inherit;
  text-decoration: none;
}

/* Keyboard focus ring: on-brand (accent-text) instead of the browser
   default, applied once here so every interactive control gets it —
   more specific rules (e.g. .panel-row-clickable:focus-visible) still
   layer their own extra treatment on top without conflict. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* Background slideshow (registry page) */
.bg-slideshow {
  position: fixed;
  inset: -30px;
  z-index: -2;
  filter: blur(5px);
}

.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: bg-slide-fade 60s infinite;
}

@keyframes bg-slide-fade {
  0%, 100% { opacity: 0; }
  10%, 22% { opacity: 1; }
  32% { opacity: 0; }
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
}

body.dark .bg-overlay {
  background: rgba(18, 20, 31, 0.72);
}

body.light .bg-overlay {
  background: rgba(248, 243, 230, 0.65);
}

/* Header: a fixed, backdrop-blurred nav bar — sits over the page rather
   than pushing it down, so the page itself always starts at the very top
   under it (see the `body` padding-top compensating for the fixed height). */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4rem;
  padding: 0 1.5rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body.dark header {
  background: rgba(23, 26, 40, 0.82);
  border-bottom: 1px solid var(--border-dark);
}

body.light header {
  background: rgba(240, 232, 214, 0.82);
  border-bottom: 1px solid var(--border-light);
}

.site-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

/* The seal: a small embossed medallion standing in for the registry's own
   stamp, replacing the old flat accent dot. */
.site-title::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-hover), var(--accent) 65%, var(--on-accent) 130%);
  flex-shrink: 0;
}

body.dark .site-title::before { box-shadow: 0 0 0 2px var(--header-dark), 0 0 0 3px var(--border-dark); }
body.light .site-title::before { box-shadow: 0 0 0 2px var(--header-light), 0 0 0 3px var(--border-light); }

/* Register tabs, not app pills: nav reads as a row of filed-document tabs
   (bottom rule + underline on active/hover) rather than SaaS nav chips. */
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem 1.5rem;
}

nav a {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0 0.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s, color 0.15s;
}

body.dark nav a { color: var(--muted-dark); }
body.light nav a { color: var(--muted-light); }

body.dark nav a:hover { color: var(--fg-dark); border-bottom-color: var(--border-dark); }
body.light nav a:hover { color: var(--fg-light); border-bottom-color: var(--border-light); }

body.dark nav a.active,
body.light nav a.active {
  color: var(--accent-text);
  font-weight: 700;
  border-bottom-color: var(--accent-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.discord-login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  background: #5865f2;
  transition: background-color 0.15s;
}

.discord-login:hover {
  background: #4752c4;
}

.discord-login-active {
  background: var(--accent);
  color: var(--on-accent);
}

.discord-login-active:hover {
  background: var(--accent-hover);
}

.discord-login-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}

.discord-login-caret {
  font-size: 0.7rem;
  opacity: 0.8;
}

.account-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 180px;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

body.dark .account-menu { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .account-menu { background: var(--panel-light); border-color: var(--border-light); }

.account-menu a,
.account-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

body.dark .account-menu a:hover,
body.dark .account-menu button:hover { background: rgba(255, 255, 255, 0.08); }
body.light .account-menu a:hover,
body.light .account-menu button:hover { background: rgba(0, 0, 0, 0.05); }

.account-menu-logout {
  color: #f44336;
}

/* Mobile masthead: header is `position: fixed` with a hard-pinned 4rem
   height (the page's own padding-top compensates for exactly that much),
   so unlike every wrapping/stacking layout elsewhere on the site, its
   contents must never wrap onto a second line — that would either get
   clipped or silently overlap the page content below it. Below 600px the
   full nav (up to 5 links once panel routes are appended) plus the
   "Inloggen met Discord" label can't fit alongside the seal wordmark, so
   nav becomes its own horizontally scrollable strip and the login control
   collapses to icon-only (its aria-label already carries the full text). */
@media (max-width: 600px) {
  header {
    gap: 0.75rem;
    padding: 0 1rem;
  }

  nav {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  nav::-webkit-scrollbar {
    display: none;
  }

  nav a {
    flex-shrink: 0;
  }

  .header-actions {
    flex-shrink: 0;
    gap: 0.6rem;
  }

  .discord-login {
    padding: 0.5rem;
  }

  .discord-login span {
    display: none;
  }
}

/* Main layout */
main {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Page hero — modeled on the Oranjestad Roleplay APV page's own opener: a
   full-bleed banner with a ghosted radial glow and a thin top accent line,
   an icon-kicker (our seal medallion standing in for their scale icon), a
   giant display heading with its first letter picked out in the accent,
   and a plain subtitle. `.hero` (home) and `.intro` (every other page) both
   use this pattern so every page opens the same way. */
.hero,
.intro {
  position: relative;
  padding: 3.5rem 1.5rem;
  overflow: hidden;
  border-bottom: 1px solid;
}

body.dark .hero, body.dark .intro { border-color: var(--border-dark); }
body.light .hero, body.light .intro { border-color: var(--border-light); }

.hero::before,
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201, 161, 60, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after,
.intro::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 5rem;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--accent-text), transparent);
  opacity: 0.5;
  pointer-events: none;
}

.hero > *,
.intro > * {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-text);
}

.hero-kicker-seal {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-hover), var(--accent) 65%, var(--on-accent) 130%);
}

.hero h1,
.intro h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 1.1rem;
}

.hero h1 span,
.intro h1 span {
  color: var(--accent-text);
}

.hero p,
.intro p {
  max-width: 46ch;
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
}

body.dark .hero p, body.dark .intro p { color: var(--muted-dark); }
body.light .hero p, body.light .intro p { color: var(--muted-light); }

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  box-shadow: 0 1px 10px rgba(201, 161, 60, 0.45);
  transition: background-color 0.15s;
}

.button:hover {
  background: var(--accent-hover);
}

/* The two headline figures, now a compact row beneath the hero rather than
   a column beside it. */
.hero-ledger {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}

.hero-ledger-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.hero-ledger-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--accent-text);
}

.hero-ledger-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.dark .hero-ledger-label { color: var(--muted-dark); }
body.light .hero-ledger-label { color: var(--muted-light); }

/* Search + company cards */
.controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

.controls-row-end {
  justify-content: flex-end;
}

#search {
  flex: 1;
  min-width: 220px;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
}

body.light #search {
  border-color: var(--border-light);
  background: var(--panel-light);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.filter-bar select {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
}

body.light .filter-bar select {
  border-color: var(--border-light);
  background: var(--panel-light);
}

/* The public registry: a ledger, not a card grid — numbered rows separated
   by rule lines, striped like a register book, rather than boxed tiles.
   Scoped to .company-grid so the Bedrijfspaneel's own single company-card
   (a profile header, not a list) keeps the boxed/folded-corner treatment. */
.company-grid {
  display: flex;
  flex-direction: column;
  counter-reset: registry-row;
}

.company-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid;
}

body.dark .company-card { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .company-card { background: var(--panel-light); border-color: var(--border-light); }

/* The dossier fold: the Bedrijfspaneel's standalone company-card reads as
   its own registered file. */
.company-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 18px 18px 0;
}

body.dark .company-card::after { border-color: transparent var(--bg-dark) transparent transparent; }
body.light .company-card::after { border-color: transparent var(--bg-light) transparent transparent; }

.company-grid .company-card {
  counter-increment: registry-row;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-dark);
  padding: 1.25rem 0.25rem;
}

body.light .company-grid .company-card { border-bottom-color: var(--border-light); }

.company-grid .company-card:nth-child(even) {
  background: rgba(148, 152, 179, 0.05);
}

.company-grid .company-card::after {
  display: none;
}

.company-grid .company-card::before {
  content: counter(registry-row, decimal-leading-zero) ".";
  align-self: flex-start;
  margin-top: 0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  flex-shrink: 0;
}

body.dark .company-grid .company-card::before { color: var(--muted-dark); }
body.light .company-grid .company-card::before { color: var(--muted-light); }

.company-logo {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.8rem;
  object-fit: cover;
}

.company-grid .company-logo {
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
}

.company-info {
  min-width: 0;
  flex: 1;
}

.company-card h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.company-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
}

.company-card dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

body.dark .company-card dt { color: var(--muted-dark); }
body.light .company-card dt { color: var(--muted-light); }

.company-card dd {
  margin: 0;
}

.discord-link {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  color: #5865f2;
  opacity: 0.9;
  transition: opacity 0.15s;
}

.discord-link:hover {
  opacity: 1;
}

/* Stamp, not pill: status reads as an ink stamp on the file rather than a
   soft SaaS chip — small, square-cornered, ruled in its own color. */
.status {
  padding: 0.1rem 0.55rem;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-active {
  background: rgba(76, 175, 80, 0.12);
  color: #4caf50;
}

.status-dissolved {
  background: rgba(244, 67, 54, 0.12);
  color: #f44336;
}

.status-open {
  background: rgba(201, 161, 60, 0.15);
  color: var(--accent-text);
}

.status-progress {
  background: rgba(255, 152, 0, 0.12);
  color: #ff9800;
}

.status-closed {
  background: rgba(158, 158, 158, 0.12);
  color: #9e9e9e;
}

.hiring-blip {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 193, 7, 0.35);
  border: 1.5px solid #ffc107;
  color: #000;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  cursor: default;
  transition: transform 0.15s ease;
}

.hiring-blip:hover {
  transform: scale(1.35);
}

.hiring-blip-tooltip {
  position: absolute;
  top: 130%;
  right: 0;
  white-space: nowrap;
  background: #0c0e17;
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.hiring-blip:hover .hiring-blip-tooltip {
  opacity: 1;
}

/* Info-icoon met tooltip (bedrijfsaanvraag-formulier) */
.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--accent-text);
  color: var(--accent-text);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}

.info-icon-tooltip {
  position: absolute;
  bottom: 130%;
  left: 0;
  width: 260px;
  white-space: normal;
  background: #0c0e17;
  color: #fff;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.info-icon:hover .info-icon-tooltip,
.info-icon:focus .info-icon-tooltip {
  opacity: 1;
}

/* !important is deliberate: this must always win regardless of a later,
   equally-specific rule setting its own `display` (bit us three times via
   plain source-order conflicts — see .modal-overlay, .logo-dropzone-previews,
   .panel-form). */
.hidden {
  display: none !important;
}

/* BCO/Bedrijfspaneel: a binder with side tabs, not a top nav bar — reads
   closer to a case-file folder than an app dashboard. #panel-content holds
   .panel-tabs plus every .panel-panel section as direct-child siblings; only
   the active section lacks .hidden, so at any moment exactly two children
   are in flow (the sidebar + the one visible panel), laid out side by side. */
#panel-content {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.panel-tabs {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding-right: 1rem;
  border-bottom: none;
  border-right: 1px solid;
  position: sticky;
  top: 1.5rem;
}

body.dark .panel-tabs { border-color: var(--border-dark); }
body.light .panel-tabs { border-color: var(--border-light); }

.panel-tab {
  padding: 0.6rem 0.9rem;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 0 6px 6px 0;
  border-left: 2px solid transparent;
  margin-bottom: 0;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

body.dark .panel-tab { color: var(--muted-dark); }
body.light .panel-tab { color: var(--muted-light); }

body.dark .panel-tab:hover { background: rgba(255, 255, 255, 0.05); }
body.light .panel-tab:hover { background: rgba(0, 0, 0, 0.04); }

.panel-tab:hover {
  color: var(--accent-text);
}

.panel-tab.active {
  color: var(--accent-text);
  border-left-color: var(--accent-text);
  background: rgba(201, 161, 60, 0.08);
  font-weight: 700;
}

.panel-panel {
  flex: 1;
  min-width: 0;
  margin-bottom: 2rem;
}

/* Takenbord alone reverts to the original top-tab strip: its kanban board
   breaks out to near-full viewport width via a 100vw/left:50%/margin-left:
   -50vw trick that assumes it sits directly in main's centered flow. Nesting
   that under a persistent left sidebar would throw the math off, so :has()
   detects "Takenbord is the visible tab" and restores the pre-sidebar,
   full-width layout only for that one case. */
#panel-content:has(#tab-todo:not(.hidden)) {
  display: block;
}

#panel-content:has(#tab-todo:not(.hidden)) .panel-tabs {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding-right: 0;
  border-right: none;
  border-bottom: 1px solid;
  position: static;
}

body.dark #panel-content:has(#tab-todo:not(.hidden)) .panel-tabs { border-color: var(--border-dark); }
body.light #panel-content:has(#tab-todo:not(.hidden)) .panel-tabs { border-color: var(--border-light); }

#panel-content:has(#tab-todo:not(.hidden)) .panel-tab {
  border-radius: 0;
  border-left: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-align: center;
}

#panel-content:has(#tab-todo:not(.hidden)) .panel-tab.active {
  border-bottom-color: var(--accent-text);
  border-left-color: transparent;
  background: transparent;
}

/* Narrow screens: the side-tab binder doesn't have room, so every panel
   (not just Takenbord) falls back to the original top-tab strip. */
@media (max-width: 700px) {
  #panel-content {
    display: block;
  }

  .panel-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid;
    position: static;
  }

  body.dark .panel-tabs { border-color: var(--border-dark); }
  body.light .panel-tabs { border-color: var(--border-light); }

  .panel-tab {
    border-radius: 0;
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-align: center;
  }

  .panel-tab.active {
    border-bottom-color: var(--accent-text);
    border-left-color: transparent;
    background: transparent;
  }
}

.panel-empty {
  font-size: 0.9rem;
}

body.dark .panel-empty { color: var(--muted-dark); }
body.light .panel-empty { color: var(--muted-light); }

.panel-subheading {
  margin: 2rem 0 1rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.employee-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.panel-search {
  flex: 1;
  min-width: 220px;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
}

body.light .panel-search {
  border-color: var(--border-light);
  background: var(--panel-light);
}

/* Standalone detailpagina's (/ticket-####, /aanvraag-####) */
.detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 600px;
}

.detail-panel h2 {
  margin: 0;
  font-family: var(--font-display);
}

.detail-panel-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.75rem;
}

body.dark .detail-panel-label { color: var(--muted-dark); }
body.light .detail-panel-label { color: var(--muted-light); }

.detail-panel select,
.detail-panel textarea {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
  resize: vertical;
}

body.light .detail-panel select,
body.light .detail-panel textarea {
  border-color: var(--border-light);
  background: var(--panel-light);
}

/* Buttons */
.btn {
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 10px rgba(201, 161, 60, 0.45);
  transition: background-color 0.15s;
}

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

.btn-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

.btn-large {
  padding: 1.1rem 1.5rem;
  font-size: 1.1rem;
}

.support-actions {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.support-actions .btn-large {
  flex: 1;
}

@media (max-width: 600px) {
  .support-actions {
    flex-direction: column;
  }
}

.btn-danger {
  background: transparent;
  border-color: #f44336;
  color: #f44336;
}

.btn-danger:hover {
  background: rgba(244, 67, 54, 0.12);
}

.icon-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
}

.icon-btn:hover {
  opacity: 1;
}

.icon-btn-danger:hover {
  background: rgba(244, 67, 54, 0.12);
  border-color: #f44336;
}

/* Forms */
.panel-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  align-items: center;
}

.panel-form input[type="text"],
.panel-form select,
.panel-form textarea {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
  resize: vertical;
}

body.light .panel-form input[type="text"],
body.light .panel-form select,
body.light .panel-form textarea {
  border-color: var(--border-light);
  background: var(--panel-light);
}

.panel-form-grid input[type="text"],
.panel-form-grid select {
  flex: 1;
  min-width: 150px;
}

.panel-form-stack {
  flex-direction: column;
  align-items: stretch;
}

.form-question {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-question-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.logo-dropzone-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.logo-dropzone-previews img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
}

.logo-dropzone-previews video {
  width: 160px;
  height: 100px;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
}

.panel-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

/* Instellingen */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid;
}

body.dark .settings-row { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .settings-row { background: var(--panel-light); border-color: var(--border-light); }

.settings-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.settings-row-stack textarea {
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
  resize: vertical;
}

body.light .settings-row-stack textarea {
  border-color: var(--border-light);
  background: var(--panel-light);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s;
}

body.dark .toggle-switch-slider { background: rgba(255, 255, 255, 0.15); }
body.light .toggle-switch-slider { background: rgba(0, 0, 0, 0.15); }

.toggle-switch-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-switch-slider {
  background: var(--accent);
}

.toggle-switch input:checked + .toggle-switch-slider::before {
  transform: translateX(20px);
  background: var(--on-accent);
}

/* Lists (tickets / requests) */
.panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid;
}

body.dark .panel-row { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .panel-row { background: var(--panel-light); border-color: var(--border-light); }

.panel-row-clickable {
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.panel-row-clickable:hover,
.panel-row-clickable:focus-visible {
  border-color: var(--accent-text);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.panel-row-clickable:active {
  transform: translateY(-1px) scale(0.995);
}

.panel-row-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 160px;
}

.panel-row-sub {
  font-size: 0.85rem;
}

body.dark .panel-row-sub { color: var(--muted-dark); }
body.light .panel-row-sub { color: var(--muted-light); }

.panel-row select {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
}

body.light .panel-row select {
  border-color: var(--border-light);
  background: var(--panel-light);
}

/* Modal (bedrijfsregistratie pop-up) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.55);
}

.modal {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.modal::-webkit-scrollbar {
  width: 8px;
}

.modal::-webkit-scrollbar-track {
  background: transparent;
}

.modal::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
}

.modal::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

body.dark .modal { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .modal { background: var(--panel-light); border-color: var(--border-light); }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.modal-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.modal-close:hover {
  opacity: 1;
}

.logo-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 140px;
  padding: 1rem;
  border-radius: 10px;
  border: 2px dashed var(--border-dark);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}

body.light .logo-dropzone {
  border-color: var(--border-light);
}

.logo-dropzone:hover,
.logo-dropzone-active {
  border-color: var(--accent-text);
  background: rgba(201, 161, 60, 0.1);
}

.logo-dropzone-placeholder {
  font-size: 0.9rem;
}

body.dark .logo-dropzone-placeholder { color: var(--muted-dark); }
body.light .logo-dropzone-placeholder { color: var(--muted-light); }

.logo-dropzone-preview {
  max-width: 100%;
  max-height: 160px;
  border-radius: 6px;
  object-fit: contain;
}

.panel-row-company {
  align-items: center;
  gap: 1rem;
}

.company-logo-small {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  flex-shrink: 0;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
}

/* Kanban board (takenbord) — breaks out of main's 1000px cap so it can be
   wider than the rest of the page (which stays at the normal width), but
   caps at kanban-viewport's max-width so it isn't full page width either.
   Always one row, no horizontal scrollbar: columns share the available
   width evenly and shrink together instead of overflowing. */
.kanban-viewport {
  display: flex;
  justify-content: center;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
  padding: 0 1.5rem;
}

.kanban {
  display: flex;
  gap: 1.25rem;
  width: 100%;
  max-width: 1200px;
}

.kanban-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid;
  min-height: 120px;
}

body.dark .kanban-column { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .kanban-column { background: var(--panel-light); border-color: var(--border-light); }

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

.kanban-count {
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

body.dark .kanban-count { background: rgba(255, 255, 255, 0.08); color: var(--muted-dark); }
body.light .kanban-count { background: rgba(0, 0, 0, 0.06); color: var(--muted-light); }

.kanban-column[data-column="requested"] .kanban-count { background: rgba(33, 150, 243, 0.15); color: #2196f3; }
.kanban-column[data-column="todo"] .kanban-count { background: rgba(244, 67, 54, 0.15); color: #f44336; }
.kanban-column[data-column="doing"] .kanban-count { background: rgba(255, 152, 0, 0.15); color: #ff9800; }
.kanban-column[data-column="development"] .kanban-count { background: rgba(156, 39, 176, 0.15); color: #9c27b0; }
.kanban-column[data-column="done"] .kanban-count { background: rgba(76, 175, 80, 0.15); color: #4caf50; }

.kanban-cards {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.5rem;
  min-height: 40px;
}

.kanban-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-radius: 6px;
  border: 1px solid;
  font-size: 0.88rem;
  cursor: grab;
}

.kanban-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.kanban-card-company {
  font-size: 0.75rem;
  opacity: 0.7;
}

body.dark .kanban-card { background: var(--bg-dark); border-color: var(--border-dark); }
body.light .kanban-card { background: var(--bg-light); border-color: var(--border-light); }

.kanban-column[data-column="requested"] .kanban-card { background: rgba(33, 150, 243, 0.08); }
.kanban-column[data-column="todo"] .kanban-card { background: rgba(244, 67, 54, 0.08); }
.kanban-column[data-column="doing"] .kanban-card { background: rgba(255, 152, 0, 0.08); }
.kanban-column[data-column="development"] .kanban-card { background: rgba(156, 39, 176, 0.08); }
.kanban-column[data-column="done"] .kanban-card { background: rgba(76, 175, 80, 0.08); }

.kanban-card.dragging {
  opacity: 0.4;
}

.kanban-card-placeholder {
  height: 2.6rem;
  border-radius: 6px;
  border: 2px dashed var(--accent-text);
  background: rgba(201, 161, 60, 0.1);
}

.kanban-card-remove {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.kanban-card-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.kanban-card-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  color: #1c1710;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

.kanban-card-remove:hover {
  opacity: 1;
  color: #f44336;
}

.kanban-add {
  display: flex;
  gap: 0.4rem;
}

.kanban-add input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--bg-dark);
  color: inherit;
}

body.light .kanban-add input {
  border-color: var(--border-light);
  background: var(--bg-light);
}

.kanban-trash {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 10px;
  border: 2px dashed var(--border-dark);
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

body.dark .kanban-trash { color: var(--muted-dark); }
body.light .kanban-trash { color: var(--muted-light); border-color: var(--border-light); }

.kanban-trash-active {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
}

#no-results {
  text-align: center;
  padding: 1.5rem;
}

body.dark #no-results { color: var(--muted-dark); }
body.light #no-results { color: var(--muted-light); }

/* FAQ / support: reads as numbered articles in the registry's own code,
   not generic accordion cards. Scoped to `.faq .faq-item` — .faq-item is
   reused bare for the panel-guard's "not logged in" message, which should
   stay a plain notice, not gain an article number. */
/* Search + sticky Inhoudsopgave beside the numbered articles — modeled
   directly on oranjestadrp.nl/apv's own reference layout. */
.faq-search {
  position: relative;
  margin: 0 0 2rem;
}

.faq-search::before {
  content: "⌕";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  pointer-events: none;
}

body.dark .faq-search::before { color: var(--muted-dark); }
body.light .faq-search::before { color: var(--muted-light); }

.faq-search input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: var(--panel-dark);
  color: inherit;
}

body.light .faq-search input {
  border-color: var(--border-light);
  background: var(--panel-light);
}

.faq-layout {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.faq-toc {
  flex: 0 0 200px;
  position: sticky;
  top: 5.5rem;
  align-self: flex-start;
}

.faq-toc-label {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

body.dark .faq-toc-label { color: var(--muted-dark); }
body.light .faq-toc-label { color: var(--muted-light); }

#faq-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

#faq-toc-nav a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}

body.dark #faq-toc-nav a { color: var(--muted-dark); }
body.light #faq-toc-nav a { color: var(--muted-light); }

body.dark #faq-toc-nav a:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg-dark); }
body.light #faq-toc-nav a:hover { background: rgba(0, 0, 0, 0.04); color: var(--fg-light); }

@media (max-width: 800px) {
  .faq-layout {
    flex-direction: column;
  }

  .faq-toc {
    position: static;
    flex: auto;
    width: 100%;
  }

  #faq-toc-nav {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
  }
}

.faq {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  counter-reset: faq-article;
}

.faq-item {
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  border: 1px solid;
}

body.dark .faq-item { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .faq-item { background: var(--panel-light); border-color: var(--border-light); }

.faq .faq-item {
  counter-increment: faq-article;
}

.faq .faq-item::before {
  content: "Artikel " counter(faq-article, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-text);
}

.faq-item h2 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.faq-item p {
  margin-bottom: 0;
}

body.dark .faq-item p { color: var(--muted-dark); }
body.light .faq-item p { color: var(--muted-light); }

/* Footer: a small closing seal + two-line block, not a single centered
   copyright string — a registry's back cover, not an app footer bar. */
footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.1rem 1.5rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.footer-seal {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--accent-hover), var(--accent) 65%, var(--on-accent) 130%);
}

body.dark .footer-seal { box-shadow: 0 0 0 2px var(--header-dark), 0 0 0 3px var(--border-dark); }
body.light .footer-seal { box-shadow: 0 0 0 2px var(--header-light), 0 0 0 3px var(--border-light); }

.footer-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
}

.footer-text p {
  margin: 0;
}

.footer-text p:first-child {
  font-family: var(--font-display);
  font-weight: 700;
}

.footer-sub {
  font-size: 0.8rem;
}

body.dark footer { background: var(--header-dark); color: var(--fg-dark); border-top: 1px solid var(--border-dark); }
body.light footer { background: var(--header-light); color: var(--fg-light); border-top: 1px solid var(--border-light); }

body.dark .footer-sub { color: var(--muted-dark); }
body.light .footer-sub { color: var(--muted-light); }

/* Toggle switch */
.theme-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.3s;
  /* night sky: stars scattered on the same ink-navy the dark theme uses */
  background:
    radial-gradient(1px 1px at 6px 6px, #fff, transparent),
    radial-gradient(1px 1px at 16px 4px, #fff, transparent),
    radial-gradient(1px 1px at 26px 10px, #fff, transparent),
    radial-gradient(1px 1px at 34px 5px, #fff, transparent),
    radial-gradient(1px 1px at 12px 16px, #fff, transparent),
    radial-gradient(1px 1px at 30px 18px, #fff, transparent),
    linear-gradient(135deg, #0d0f1a, #232a4a);
}

.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  border-radius: 50%;
  transition: 0.3s;
  /* moon */
  background: radial-gradient(circle at 65% 35%, #f4f4f4, #cfcfcf);
  box-shadow: inset -3px -1px 0 0 rgba(0, 0, 0, 0.15);
}

.theme-toggle input:checked + .slider {
  /* day sky: blue fading to a warm, gold-tinted horizon */
  background: linear-gradient(135deg, #6ec3f4 0%, #a8dcf7 55%, #e8c268 100%);
}

.theme-toggle input:checked + .slider::before {
  transform: translateX(20px);
  /* sun */
  background: radial-gradient(circle at 35% 35%, #fff6d0, var(--accent));
  box-shadow: none;
}

/* Discord-login feedback banner */
.auth-banner {
  position: fixed;
  top: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 90vw;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.auth-banner-error { background: #b53434; }
.auth-banner-warning { background: #a5680f; }
.auth-banner-success { background: #2f8a4c; }

.auth-banner button {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}

.auth-banner button:hover {
  opacity: 1;
}

/* Dev tool (temporary, simulates Discord login) */
.dev-tool {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 50;
}

.dev-tool-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark .dev-tool-toggle { background: var(--panel-dark); border-color: var(--border-dark); color: var(--fg-dark); }
body.light .dev-tool-toggle { background: var(--panel-light); border-color: var(--border-light); color: var(--fg-light); }

.dev-tool-panel {
  position: absolute;
  bottom: 3rem;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
  width: 210px;
  border-radius: 10px;
  border: 1px solid;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.dev-tool-panel.hidden {
  display: none;
}

body.dark .dev-tool-panel { background: var(--panel-dark); border-color: var(--border-dark); }
body.light .dev-tool-panel { background: var(--panel-light); border-color: var(--border-light); }

.dev-tool-panel p {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.dark .dev-tool-panel p { color: var(--muted-dark); }
body.light .dev-tool-panel p { color: var(--muted-light); }

.dev-tool-panel button {
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}

body.light .dev-tool-panel button { border-color: var(--border-light); }

.dev-tool-panel button:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.dev-tool-select-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
}

.dev-tool-select-label select {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-dark);
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
}

body.light .dev-tool-select-label select { border-color: var(--border-light); }