/* Farb-Variablen */
/*:root {
  --color-bg: #ffffff;
  --color-text: #121212;
  --color-accent: #66bb6a;
  --color-muted: #666;
}*/

[data-theme="dark"] {
  --color-bg: #121212;
  --color-text: #ffffff;
  --color-accent: #66bb6a;
  --color-muted: #aaa;
}

/* Basis-Schrift */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* Überschriften */
 h2, h3 {
  font-weight: 600;
  line-height: 1.2;
  margin: 0.5em 0;
  color: var(--color-accent);
}

h1{font-weight:300 !important;letter-spacing:-1px !important;}

/* Buttons */
button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background-color: var(--color-accent);
  color: #fff;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #57a65a;
}

/* Eingabefelder */
input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--color-muted);
  border-radius: 4px;
  background-color: var(--color-bg);
  color: var(--color-text);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
/*-----------------------------------------------------------------------------------------------------------------------------*/




    .submit-row { display:flex; align-items:center; gap:1em; margin-top:.5em; }
    .submit-row button { flex-grow:1; }
    .count-display-container {
      display:flex; align-items:center; gap:.5em; background-color:#2c2c2c; color:#ddd;
      padding:.8em; border-radius:4px; font-size:0.9em; font-weight:400; border:1px solid #66bb6a;
      box-shadow:0 0 5px rgba(102,187,106,.3); flex-shrink:0;
    }
    body.light-mode .count-display-container {
      background-color:#e8f5e9; color:#333; border-color:#81c784; box-shadow:0 0 5px rgba(129,199,132,.4);
    }
    #observation-count-label { color:#aaa; }
    body.light-mode #observation-count-label { color:#666; }
    #observation-count-display { font-weight:bold; min-width:1ch; text-align:center; }
    #liste { width:100%; table-layout:fixed; }
    #liste .col-artname { width:60%; }
    #liste .col-anzahl { width:18%; text-align:center; }
    #liste .col-delete { width:12%; text-align:center; }
    #liste td { vertical-align:middle; }
    #liste .cell-anzahl, #liste .cell-delete { text-align:center; }



/* Universal box-sizing for consistent layout */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  transition: background-color 0.3s, color 0.3s;
  margin: 0;
}



.main-container {
  max-width: 600px;
  margin: auto;
  padding: 0.2em;
}

.search-container {
    margin-top: 1.5em;
}

#search-input {
    width: 100%;
    padding: 0.8em;
    font-size: 0.9em;
    background-color: #1e1e1e;
    color: #ffffff;
    border: 1px solid #66bb6a;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
body.light-mode #search-input {
    background-color: #f0f0f0;
    color: #333333;
    border-color: #ccc;
}
#search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}


.input-row {
  display: flex;
  gap: 0.8em;
  margin-bottom: 0.5em;
  width: 100%;
  align-items: stretch;
}

.artname-wrapper {
  flex-grow: 1;
  position: relative;
  display: flex;
}

#artname {
  width: 100%;
  padding: 0.8em;
  font-size: 0.95em;
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #66bb6a;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  height: auto;
}

#anzahl {
  flex-shrink: 0;
  width: 80px;
  padding: 0.8em;
  font-size: 1em;
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #555;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  height: auto;
}

.additional-input-field {
  flex: 1;
  padding: 0.8em;
  font-size: 0.95em;
  background-color: #1e1e1e;
  color: #ffffff;
  border: 1px solid #555;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  height: calc(1em + 1.6em + 2px);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea.additional-input-field {
    font-family: inherit;
}

#bemerkung.additional-input-field,
#bemerkung-obs.additional-input-field {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    resize: none;
   /* line-height: 1.5;*/
}


.select-custom {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23eee%22%20d%3D%22M192%20256L64%20128v256l128-128z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.8em top 50%;
    background-size: 0.6em auto;
    padding-right: 2.5em;
	font-size:1em;
}

#bestimmung.additional-input-field {
   /* margin-bottom: 1em;*/
}

#autocomplete-list {
  font-size: 0.8em; border-radius: 6px; margin-top: 0.5em; background-color: #222;
  color: #eee; border: 1px solid #555; box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
  list-style: none; padding: 0; max-height: 150px; overflow-y: auto;
}
#autocomplete-list li {
  padding: 0.6em; border-bottom: 1px solid #444; background-color: #222;
  color: #eee; cursor: pointer;
}
#autocomplete-list li:hover { background-color: #333; }

button {
  padding: 0.8em; font-size: 0.9em; background-color: #2a2a2a; color: white;
  border: 1px solid #555; border-radius: 4px; font-weight: bold;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s; cursor: pointer;
  width:100%;
}
button:hover { background-color: #3e3e3e; border-color: #666; }

form button[type="submit"] {
  width: 100%;
  margin-bottom: 0.2em;
}

/* Alter Stil für ID wird entfernt, neuer Stil für Klasse wird genutzt */
#save-status {
    flex-shrink: 0;
}

/* NEU: Allgemeiner, wiederverwendbarer Stil für Speicher-Feedback */
.save-feedback {
    color: #66bb6a;
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease-in-out, max-width 0.25s ease-in-out, margin-left 0.25s ease-in-out;
    margin-left: 0;
}
.save-feedback.visible {
    opacity: 1;
    max-width: 150px;
    margin-left: 1em;
}
body.light-mode .save-feedback {
    color: #388e3c;
}


.action-button-group {
  display: flex;
  gap: 0.8em;
  margin-top: 0.5em; 
  margin-bottom: 1em;
}
.action-button-group button {
  flex: 1; 
  margin-bottom: 0;
}

#header-container {
  display: flex; flex-direction: column; gap: 0.5em; margin-bottom: 1em;
}
.header-top-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}
#header-container h3 { font-size: 1.3em; margin: 0; white-space: nowrap; }
#short-date-display { font-size: 1em; color: #ddd; white-space: nowrap; margin: 0 0.5em; }

.icon-button {
  flex-shrink: 0;
  width: 2.8em;
  height: auto;
  padding: 0;
  border-radius: 4px;
  background-color: #2a2a2a;
  color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border: 1px solid #555;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.icon-button:hover {
  background-color: #3e3e3e;
}
#toggle-obs-details-icon-button {
  margin-bottom: 0;
}

#location-display { font-size: 0.85em; color: #aaa; text-align: left; line-height: 1.2; }
#location-display a { color: #66bb6a; text-decoration: none; font-weight: bold; }
#location-display a:hover { text-decoration: underline; }

table {
  width: 100%; border-collapse: collapse; margin-top: 0.8em; table-layout: fixed;
}
th, td {
  border: 1px solid #444; padding: 0.5em; text-align: left; word-wrap: break-word; font-size:0.9em;
}

th { background: #333; color: #eee; }

th.sortable {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 1.5em;
}
th.sortable:hover {
    background-color: #444;
}
th.sortable::before {
    content: '↕';
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 0.9em;
    opacity: 0.6;
}
th.sortable:hover::before {
    opacity: 1;
}
th.sortable::after {
    content: '';
    position: absolute;
    right: 0.5em;
    top: 50%;
    border: 4px solid transparent;
    opacity: 0; 
}
th.sortable.sort-asc::before,
th.sortable.sort-desc::before {
    content: none;
}
th.sortable.sort-asc::after {
    border-bottom-color: #fff;
    margin-top: -6px;
    opacity: 1;
}
th.sortable.sort-desc::after {
    border-top-color: #fff;
    margin-top: 2px;
    opacity: 1;
}
body.light-mode th.sortable:hover { background-color: #e0e0e0; }
body.light-mode th.sortable::before { color: #888; }
body.light-mode th.sortable.sort-asc::after { border-bottom-color: #333; }
body.light-mode th.sortable.sort-desc::after { border-top-color: #333; }


.table-anzahl-select {
  width: 100%; background: transparent; color: inherit; border: none; outline: none;
  text-align: center; font-size: 1em; padding: 0.2em 0; margin: 0;
  height: 1.7em; box-sizing: border-box; -webkit-appearance: none;
  -moz-appearance: none; appearance: none;
  background-image: none; padding-right: 0;
  transition: width 0.2s ease-in-out;
}
.table-anzahl-select:focus { background: #222; border: 1px solid #666; border-radius: 3px; }
@-moz-document url-prefix() { .table-anzahl-select { text-align-last: center; } }
.table-anzahl-select option { text-align: center; }

/* Light Mode Styles */
body.light-mode { background-color: #ffffff; color: #333333; }
body.light-mode input, body.light-mode button, body.light-mode select,
body.light-mode .table-anzahl-select, body.light-mode textarea {
  background-color: #f0f0f0; color: #333333; border-color: #ccc;
}
body.light-mode th, body.light-mode td { border-color: #ccc; }
body.light-mode th { background: #f0f0f0; color: #333333; }
body.light-mode #autocomplete-list { background-color: #ffffff; color: #333333; border-color: #ccc; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
body.light-mode #autocomplete-list li { background-color: #ffffff; color: #333333; border-bottom: 1px solid #eee; }
body.light-mode #autocomplete-list li:hover { background-color: #f0f0f0; }
body.light-mode .table-anzahl-select { background: transparent; color: inherit; border: none; }
body.light-mode .table-anzahl-select:focus { background: #f0f0f0; border: 1px solid #bbb; }
body.light-mode #location-display a { color: #388e3c; }
body.light-mode .select-custom {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M192%20256L64%20128v256l128-128z%22%2F%3E%3C%2Fsvg%3E');
}
body.light-mode #short-date-display {
  color: #555;
}


/* Dialog Styles */
dialog {
  border: 1px solid #555; border-radius: 8px; padding: 1.5em;
  background-color: #2a2a2a; color: #e0e0e0; box-shadow: 0 8px 16px rgba(0,0,0,0.5);
  max-width: 90%; width: 350px; text-align: center;
}
dialog::backdrop { background-color: rgba(0, 0, 0, 0.7); }
dialog p { margin-top: 0; margin-bottom: 1.5em; font-size: 1.1em; }
dialog .dialog-buttons { display: flex; justify-content: center; gap: 1em; }
dialog button { padding: 0.7em 1.5em; }
body.light-mode dialog { background-color: #f0f0f0; color: #333333; border: 1px solid #ccc; }
body.light-mode dialog button { background-color: #e0e0e0; color: #333333; border: 1px solid #bbb; }
body.light-mode dialog button:hover { background-color: #d0d0d0; border-color: #aaa; }

/* Expandable Section Styles */
.additional-info-toggle {
    background-color: #2a2a2a; color: white; border: 1px solid #555; border-radius: 4px;
    padding: 0.6em 0.8em; font-size: 0.9em; margin-bottom: 0.8em; cursor: pointer;
    width: 100%; text-align: left; display: flex; justify-content: space-between;
    align-items: center; transition: background-color 0.3s, border-color 0.3s;
}
.additional-info-toggle:hover { background-color: #3e3e3e; border-color: #666; }
.additional-info-toggle .arrow { transition: transform 0.3s ease; }
.additional-info-toggle.expanded .arrow { transform: rotate(90deg); }
.additional-info-content {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease-out, margin-bottom 0.3s ease-out, opacity 0.3s ease-out;
    margin-bottom: 0; opacity: 0;
}
.additional-info-content.expanded {
    max-height: 500px;
    margin-bottom: 1em; opacity: 1;
}

.additional-input-row { 
  display: flex; 
  gap: 1em; 
  margin-bottom: 0.8em;
  width: 100%;
}
.additional-input-row .additional-input-field { margin-bottom: 0; }

body.light-mode .additional-info-toggle { background-color: #e0e0e0; color: #333333; border-color: #ccc; }
body.light-mode .additional-info-toggle:hover { background-color: #d0d0d0; border-color: #aaa; }


#obs-details-container .additional-input-row {
  display: flex; gap: 8px;
}
#obs-details-container .additional-input-row > .additional-input-field {
  flex: 1; min-width: 0;
}

/* Highlight Styles */
#artname, #anzahl, #toggle-obs-details-icon-button {
  background-color: #2c2c2c; border-color: #66bb6a;
  box-shadow: 0 0 5px rgba(102, 187, 106, 0.3);
}
#artname:hover, #anzahl:hover, #toggle-obs-details-icon-button:hover {
  background-color: #333; border-color: #81c784;
}
form button[type="submit"] {
  background-color: #2c2c2c; border-color: #66bb6a;
  box-shadow: 0 0 5px rgba(102, 187, 106, 0.3);
}
form button[type="submit"]:hover { background-color: #333; border-color: #81c784; }

form button[type="submit"].is-success,
form button[type="submit"].is-success:hover,
form button[type="submit"].is-success:disabled {
    background-color: #388e3c;
    border-color: #388e3c;
    color: #fff;
    cursor: default;
    opacity: 1;
}

body.light-mode #artname, body.light-mode #anzahl, body.light-mode #toggle-obs-details-icon-button {
  background-color: #e8f5e9; border-color: #81c784;
  box-shadow: 0 0 5px rgba(129, 199, 132, 0.4);
  color: #000;
}
body.light-mode #artname:hover, body.light-mode #anzahl:hover, body.light-mode #toggle-obs-details-icon-button:hover {
  background-color: #dcedc8; border-color: #66bb6a;
}
body.light-mode form button[type="submit"] {
  background-color: #e8f5e9; border-color: #81c784;
  box-shadow: 0 0 5px rgba(129, 199, 132, 0.4);
}
body.light-mode form button[type="submit"]:hover { background-color: #dcedc8; border-color: #66bb6a; }

body.light-mode form button[type="submit"].is-success,
body.light-mode form button[type="submit"].is-success:hover,
body.light-mode form button[type="submit"].is-success:disabled {
    background-color: #4caf50;
    border-color: #4caf50;
    opacity: 1;
}

#floating-manual-link {
    /* Fixiert das Element relativ zum Browserfenster */
    position: fixed; 
    
    /* Positioniert das Element am unteren Rand (0 Pixel Abstand zum Boden) */
    bottom: 10px; 
    
    /* Zwingt das Element, die gesamte Breite einzunehmen */
    left: 0;
    right: 0;
    
    /* Optional: Fügt etwas Polsterung und Hintergrund hinzu, damit es gut aussieht */
    padding: 5px;
    text-align: center; /* Zentriert die Links im Menü */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Fügt einen leichten Schatten hinzu */
    z-index: 1000; /* Stellt sicher, dass das Menü über anderem Inhalt liegt */
}

#floating-manual-link a { color: #66bb6a; text-decoration: none; font-weight: bold; }
#floating-manual-link a:hover { text-decoration: underline; }
body.light-mode #floating-manual-link a { color: #388e3c; }

#liste .cell-delete button {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-weight: normal;
  line-height: 1;
  font-size: 0.7em;
  color: #ff6b6b;
  opacity: 1;
  transition: opacity 0.2s ease;
}
#liste .cell-delete button:hover {
  opacity: 0.7;
}
body.light-mode #liste .cell-delete button {
  color: #d32f2f;
}

.beobachter-gps-row {
  display: flex; align-items: center;
  gap: 0.8em; margin-bottom: 0.8em;
}

.beobachter-gps-row #beobachter {
  flex-grow: 1;
  margin-bottom: 0; 
}
.beobachter-gps-row #location-display {
  margin: 0; 
  flex-shrink: 0; 
  text-align: right; 
  flex-grow: 2;
}

#fundortbeschreibung-input {
    flex-grow: 2;
}
.mtb-field-group {
  display: flex; align-items: center;
  gap: 0.5em; flex-shrink: 0;
  flex-grow: 1;
  justify-content: flex-end;
}

.mtb-field-group label { font-size: 0.9em; color: #aaa; }
body.light-mode .mtb-field-group label { color: #555; }
#mtb-nr-input {
  flex-grow: 0; flex-shrink: 0;
  flex-basis: 75px; width: 75px; min-width: 75px;
}

body.light-mode .beobachter-gps-row #mtb-nr-input { background-color: #e9e9e9; }
#bemerkung.additional-input-field { width: 100%; }


/* ▼▼▼ NEU: CSV-Auswahl Styles ▼▼▼ */
.csv-import-row { display:flex; gap:8px; align-items:center; margin:8px 0; }
.csv-tools { display:flex; gap:8px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.csv-tools input[type="search"] { flex:1; padding:.6em; }
.csv-actions { display:flex; gap:8px; }
.csv-list {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 6px;
}
.csv-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 4px; border-bottom:1px dashed rgba(255,255,255,.08);
}
.csv-meta { font-size:.85em; opacity:.8; }
.csv-badge { font-size:.75em; padding:.05em .4em; border:1px solid currentColor; border-radius:.6em; margin-left:.4em; opacity:.8; }
body.light-mode .csv-list { border-color:#ccc; }
body.light-mode .csv-item { border-bottom-color:rgba(0,0,0,.08); }

.btn-neutral {padding: .6em 1em;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #555;
  background: transparent;
  color: inherit;
  }
/* ▲▲▲ NEU: CSV-Auswahl Styles ▲▲▲ */


/*----------------------config----------------------------*/

    .config-container { max-width: 600px; margin: auto; padding: 1em; border: 1px solid #444; border-radius: 8px; margin-top: 1em; }
    body.light-mode .config-container { border-color: #ccc; }
    h2 { text-align: center; color: #66bb6a; margin-bottom: 1.2em; }
    h3 { font-size: 1.1em; margin-top: 1.5em; margin-bottom: 0.8em; border-bottom: 1px solid #444; padding-bottom: 0.4em; text-align: left;}
    body.light-mode h3 { border-bottom-color: #ccc; }
    .config-section { margin-bottom: 1.5em; }
    .config-section p.description { color: #aaa; font-size: 0.9em; margin-top: 0.4em; }
    body.light-mode .config-section p.description { color: #555; }
    .back-link { display: block; text-align: center; margin-top: 1.5em; font-weight: bold; color: #66bb6a; }
    body.light-mode .back-link { color: #388e3c; }

    /* Standortverwaltung */
    #location-list-container { list-style: none; padding: 0; }
    #location-list-container li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .location-name-span { flex-grow: 1; padding: 0.6em; background-color: #1e1e1e; border: 1px solid #555; border-radius: 4px; color: #e0e0e0; font-size: 1em; display: flex; align-items: center; min-height: calc(1em + 1.2em + 2px); cursor: pointer; }
    body.light-mode .location-name-span { background-color: #f0f0f0; color: #333333; border-color: #ccc; }
    .location-name-input { flex-grow: 1; padding: 0.6em !important; height: auto !important; }
    .location-action-btn { border: none; font-size: 1.2em; cursor: pointer; padding: 0; border-radius: 50%; width: 2em; height: 2em; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 0.2s; background: transparent; }
    .delete-btn { color: #ff6b6b; }
    .delete-btn:hover { background-color: rgba(255, 255, 255, 0.1); }
    body.light-mode .delete-btn:hover { background-color: rgba(0, 0, 0, 0.05); }
    .save-btn { font-size: 1.4em; }
    .save-btn:hover { background-color: rgba(102, 187, 106, 0.15); transform: scale(1.1); }
    .save-btn:disabled { background-color: #555 !important; cursor: not-allowed; transform: none !important; }
    li .location-name-input, li .save-btn { display: none; }
    li.is-editing .location-name-span { display: none; }
    li.is-editing .location-name-input, li.is-editing .save-btn { display: inline-flex; }

    .location-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px;margin-bottom:8px; }
    .location-actions button { width: 100%; }

    .checkbox-group > div, .default-grid > div { margin-bottom: 0.5em; display: flex; align-items: center; gap: 8px; }
    .checkbox-group input[type="checkbox"] { margin: 0; flex-shrink: 0; }
    .default-grid > div:last-child { margin-bottom: 0; }
    .default-grid label, .checkbox-group label { user-select: none; }

    #default-nachweismethode, #default-stadium, #default-bestimmung, #default-bundesland, #default-beobachter { padding: 0.8em; padding-right: 2.5em; height: auto !important; width: 100%; }
    #default-beobachter { padding-right: 0.6em; }

    .row-actions { display:flex; gap:.5em; margin-top:.5em; flex-wrap: wrap; }

    /* CSV-UI */
    .btn { padding: .6em 1em; border-radius: 6px; cursor: pointer; border: 1px solid #555; background: transparent; color: inherit; }
    .btn:hover { background: rgba(255,255,255,.06); }
    .btn:disabled { opacity:.6; cursor:not-allowed; }
    .btn-primary { border-color: #66bb6a; }
    .btn-primary:hover { background: rgba(102,187,106,.15); }
    body.light-mode .btn       { border-color:#ccc; }
    body.light-mode .btn:hover { background: rgba(0,0,0,.05); }
    body.light-mode .btn-primary { border-color:#388e3c; }

    #csv-file { display:none; }
    .csv-controls { display:flex; gap:.5em; margin-bottom:.5em; flex-wrap:wrap; }
    .csv-searchbar { display:flex; gap:.5em; align-items:center; margin:.5em 0; }
    .csv-search-input { flex:1; padding:.6em; border:1px solid #444; border-radius:6px; background:#1e1e1e; color:#e0e0e0; }
    body.light-mode .csv-search-input { background:#fff; color:#222; border-color:#ccc; }
    .csv-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #444;
      padding: .5em;
      margin: .5em 0;
      background: #1e1e1e;
      border-radius: 6px;
    }
    body.light-mode .csv-list { background:#fafafa; border-color:#ccc; }
    .csv-item { display:flex; align-items:flex-start; gap:.5em; padding:.3em 0; border-bottom:1px solid #333; }
    .csv-item:last-child { border-bottom:none; }
    .csv-item input[type="checkbox"] { margin-top:.3em; }
    .csv-buttons { display:flex; gap:.5em; margin-top:.5em; flex-wrap:wrap; }