/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #1a1a2e;
  color: #333;
  overscroll-behavior: none;
}

.container {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: white;
}

/* ===== HEADER ===== */
.header {
  background:
    radial-gradient(ellipse at 22% 80%, rgba(102, 126, 234, 0.48) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 22%, rgba(118,  75, 162, 0.42) 0%, transparent 48%),
    #0b0f1e;
  color: white;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Star field – white + a few purple/blue accent stars */
.header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: white;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    18px  12px 0 0px rgba(255,255,255,.90),
    52px  48px 0 0px rgba(255,255,255,.65),
    98px  22px 0 1px rgba(255,255,255,.80),
   142px  58px 0 0px rgba(255,255,255,.60),
   175px  35px 0 0px rgba(255,255,255,.75),
   228px   8px 0 0px rgba(255,255,255,.90),
   262px  52px 0 0px rgba(255,255,255,.68),
   315px  28px 0 0px rgba(255,255,255,.62),
   358px  62px 0 0px rgba(255,255,255,.85),
   395px  18px 0 0px rgba(255,255,255,.58),
   422px  45px 0 0px rgba(255,255,255,.90),
   465px  15px 0 0px rgba(255,255,255,.70),
   510px  58px 0 1px rgba(255,255,255,.82),
   548px  32px 0 0px rgba(255,255,255,.75),
   595px  68px 0 0px rgba(255,255,255,.60),
   638px  22px 0 0px rgba(255,255,255,.88),
   680px  48px 0 0px rgba(255,255,255,.68),
   725px  10px 0 0px rgba(255,255,255,.85),
   765px  38px 0 0px rgba(255,255,255,.62),
   808px  62px 0 0px rgba(255,255,255,.90),
   845px  25px 0 0px rgba(255,255,255,.58),
   888px  50px 0 0px rgba(255,255,255,.78),
   932px  15px 0 1px rgba(255,255,255,.92),
   975px  42px 0 0px rgba(255,255,255,.68),
  1015px  65px 0 0px rgba(255,255,255,.72),
  1058px  28px 0 0px rgba(255,255,255,.60),
  1095px  52px 0 0px rgba(255,255,255,.88),
  1138px  18px 0 0px rgba(255,255,255,.70),
  1182px  45px 0 0px rgba(255,255,255,.82),
  1225px  68px 0 0px rgba(255,255,255,.65),
  1262px  32px 0 0px rgba(255,255,255,.90),
  1305px  12px 0 0px rgba(255,255,255,.60),
  1348px  55px 0 0px rgba(255,255,255,.78),
  1388px  28px 0 1px rgba(255,255,255,.85),
  1425px  48px 0 0px rgba(255,255,255,.68),
  1462px  15px 0 0px rgba(255,255,255,.90),
  1498px  62px 0 0px rgba(255,255,255,.60),
  1535px  35px 0 0px rgba(255,255,255,.80),
  1572px  20px 0 0px rgba(255,255,255,.70),
  /* Lila/Blaue Sterne */
    85px  42px 0 0px rgba(167,139,250,.85),
   435px  30px 0 0px rgba( 96,165,250,.80),
   712px  55px 0 0px rgba(167,139,250,.78),
   965px  20px 0 0px rgba( 96,165,250,.85),
  1195px  45px 0 0px rgba(167,139,250,.80),
  1455px  38px 0 0px rgba( 96,165,250,.75);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

.header-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-version {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 1px;
  opacity: 0.35;
  vertical-align: middle;
}

.traveller-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.85));
}

.header h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(167, 139, 250, 0.65);
}

.btn-edit {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-edit:hover,
.btn-edit:active {
  background: rgba(255, 255, 255, 0.35);
}

.btn-edit.active {
  background: #ffc107;
  color: #333;
  border-color: #ffc107;
}

.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.character-selector {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
}

.character-selector select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  min-height: 40px;
}

.character-selector select option {
  background: #5a5a8a;
  color: white;
}

.character-selector button {
  padding: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

.character-selector button:hover,
.character-selector button:active {
  background-color: rgba(255, 255, 255, 0.35);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-undo,
.btn-history {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  min-height: 40px;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.btn-undo:hover,
.btn-history:hover {
  background: rgba(255, 255, 255, 0.28);
}

.btn-undo:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ===== VERSIONS-MODAL ===== */
.vh-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.vh-modal.visible {
  display: flex;
}

.vh-panel {
  background: #fff;
  border-radius: 16px;
  width: min(480px, 95vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

.vh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #eee;
}

.vh-title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.vh-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1;
}

.vh-close:hover { background: #f0f0f0; color: #333; }

.vh-hint {
  font-size: 12px;
  color: #999;
  margin: 0;
  padding: 8px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.vh-list {
  overflow-y: auto;
  padding: 8px 12px;
  flex: 1;
}

.vh-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: #f8f9fa;
  border: 1.5px solid #e9ecef;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.vh-item:hover {
  background: #eef2ff;
  border-color: #667eea;
}

.vh-time {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.vh-name {
  font-size: 13px;
  color: #888;
}

.vh-page {
  font-size: 11px;
  font-weight: 600;
  color: #4a5ad4;
  background: #eef1ff;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

.vh-empty,
.vh-loading {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  padding: 32px 16px;
  line-height: 1.6;
}


.status {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.status.success {
  color: #90ee90;
}

.status.error {
  color: #ff9090;
}

/* ===== TAB NAVIGATION ===== */
.tab-navigation {
  display: flex;
  border-bottom: 2px solid #ddd;
  background-color: #fafafa;
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tab-navigation::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: 1;
  min-width: 64px;
  padding: 10px 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: #888;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
}

.tab-icon {
  font-size: 20px;
  line-height: 1;
}

.tab-label {
  font-size: 11px;
  font-weight: 600;
}

.tab-btn:hover {
  background-color: #f0f0f0;
  color: #444;
}

.tab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
  background-color: #f5f5ff;
}

/* ===== CONTENT ===== */
.content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 16px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.page-content {
  display: none;
  animation: fadeIn 0.2s ease;
}

.page-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== SECTION HEADINGS ===== */
.page-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #667eea;
}

.page-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: #555;
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== FORM ELEMENTS ===== */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #444;
  font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group textarea,
.form-group select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  min-height: 44px;
  background: white;
  color: #333;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12);
}

.form-group-ts {
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-top: 4px;
}

.form-group-ts label {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
  margin-bottom: 4px;
}

.form-group-ts input[type="datetime-local"],
.form-group-ts .ts-display {
  font-size: 13px;
  color: #6b7280;
}

.ts-display {
  display: block;
  font-size: 13px;
  color: #6b7280;
}

/* ===== GRID LAYOUT ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.form-grid-full {
  grid-column: 1 / -1;
}

/* ===== TABLES ===== */
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  background-color: #f5f5f5;
  padding: 12px 10px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #555;
  border-bottom: 2px solid #ddd;
  white-space: nowrap;
}

td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background-color: #fafafa;
}

/* ===== BUTTONS (allgemein) ===== */
button {
  cursor: pointer;
  font-family: inherit;
}

.btn-primary {
  padding: 12px 20px;
  background-color: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  transition: background 0.2s;
}

.btn-primary:hover,
.btn-primary:active {
  background-color: #5568d3;
}

.btn-secondary {
  padding: 12px 20px;
  background-color: #e8e8e8;
  color: #444;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  transition: background 0.2s;
}

.btn-secondary:hover,
.btn-secondary:active {
  background-color: #d8d8d8;
}

.btn-danger {
  padding: 8px 14px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover,
.btn-danger:active {
  background-color: #c82333;
}

.btn-success {
  padding: 8px 14px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-success:hover,
.btn-success:active {
  background-color: #218838;
}

.btn-info {
  padding: 8px 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-info:hover,
.btn-info:active {
  background-color: #0056b3;
}

/* ===== ATTRIBUTE BOX ===== */
.attribute-box {
  display: inline-block;
  text-align: center;
  margin-right: 12px;
  margin-bottom: 12px;
}

.attribute-label {
  font-size: 26px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.attribute-value {
  font-size: 26px;
  font-weight: bold;
  color: #667eea;
  min-width: 50px;
}

/* ===== NOTES PAGE ===== */

/* Subtab-Zähler */
.subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  color: #555;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 5px;
}

.notes-subtab-btn.active .subtab-count {
  background: #667eea;
  color: white;
}

/* Sub-Tab Navigation */
.notes-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 0;
}

.notes-subtab-btn {
  padding: 10px 16px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  white-space: nowrap;
  margin-bottom: -2px;
}

.notes-subtab-btn.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.notes-subtab-btn:hover {
  color: #444;
  background: #f5f5f5;
  border-radius: 6px 6px 0 0;
}

/* Content */
.notes-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notes-search {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 12px;
  min-height: 44px;
}

.notes-add-btn {
  margin-bottom: 16px;
  align-self: flex-start;
}

.notes-add-form {
  flex-direction: column;
  gap: 8px;
  background: #f5f7ff;
  border: 1.5px solid #c5ceff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.notes-add-form input,
.notes-add-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

.notes-add-form textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.notes-form-actions {
  display: flex;
  gap: 8px;
}

.notes-empty {
  color: #999;
  font-style: italic;
  padding: 12px 0;
}

.notes-hint {
  color: #888;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ── Chronik ── */
.chronicle-entry {
  background: white;
  border: 1px solid #e4e4e4;
  border-left: 4px solid #667eea;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.chronicle-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.chronicle-timestamp-label {
  font-size: 15px;
  color: #444;
  font-weight: 700;
  flex: 1;
}

.chronicle-timestamp-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
}

.chronicle-text-view {
  color: #555;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.chronicle-text-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 72px;
}

/* ── Personen ── */
.persons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.person-card {
  background: white;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  padding: 14px 16px;
  transition: box-shadow 0.15s;
}

.person-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.person-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.person-header strong {
  font-size: 15px;
  flex: 1;
  color: #333;
}

.person-name-input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  min-height: 40px;
}

.person-notes-view {
  color: #555;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

.person-notes-input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 72px;
}

/* ── Orte ── */
.location-card {
  background: white;
  border: 1px solid #e4e4e4;
  border-left: 4px solid #28a745;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.location-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.location-header strong {
  font-size: 15px;
  color: #333;
}

.location-coords {
  font-size: 12px;
  color: #999;
  font-family: monospace;
}

.location-desc {
  color: #555;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* Icon-Buttons (klein, quadratisch) */
.btn-icon {
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===== NOTES LIST & DETAIL ===== */
.notes-list-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.loc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sort-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

.sort-chip {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1.5px solid #d1d5db;
  background: #f9fafb;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sort-chip:hover {
  background: #f0f0f8;
  border-color: #a78bfa;
  color: #7c5cbf;
}
.sort-chip.active {
  background: #7c5cbf;
  border-color: #7c5cbf;
  color: #fff;
}

.sort-dir-btns {
  display: flex;
  gap: 2px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1.5px solid #e5e7eb;
}

.sort-dir-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  background: #f9fafb;
  color: #6b7280;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sort-dir-btn:hover {
  background: #f0f0f8;
  border-color: #a78bfa;
  color: #7c5cbf;
}

.sort-dir-btn.active {
  background: #7c5cbf;
  border-color: #7c5cbf;
  color: #fff;
}

/* Travellermap search row in location list */
.loc-trav-search-row {
  width: 100%;
}

.loc-trav-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.loc-trav-icon {
  position: absolute;
  left: 11px;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
  color: #9ca3af;
}

.loc-trav-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fafafa;
  color: #1a1a2e;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.loc-trav-input:focus { border-color: #667eea; background: white; }
.loc-trav-input::placeholder { color: #9ca3af; }
.loc-trav-input::-webkit-search-decoration,
.loc-trav-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.loc-trav-sugg {
  top: calc(100% + 4px);
  width: 100%;
}

/* Result rows inside travellermap suggestions */
.loc-trav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px !important;
  cursor: default !important;
}
.loc-trav-item:hover { background: #f9f9ff !important; }

.loc-trav-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.loc-trav-item-info strong { font-size: 14px; color: #1a1a2e; }
.loc-trav-item-info span   { font-size: 12px; color: #6b7280; }

.loc-trav-action {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.12s;
  white-space: nowrap;
}
.loc-trav-action.add  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.loc-trav-action.add:hover  { background: #dcfce7; }
.loc-trav-action.saved { background: #f0f4ff; color: #4338ca; border-color: #c7d2fe; }
.loc-trav-action.saved:hover { background: #e0e7ff; }

.loc-trav-saved-badge {
  flex-shrink: 0;
  font-size: 11px;
  color: #15803d;
  font-weight: 600;
}

.notes-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.notes-filters select {
  padding: 8px 10px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  min-height: 40px;
  background: white;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notes-list-item {
  background: white;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.notes-list-item:hover,
.notes-list-item:active {
  border-color: #667eea;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.12);
}

/* Location list: split strip with map button on right */
.location-list-item {
  padding: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.loc-li-content {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
}

.loc-list-map-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #f5f3ff;
  color: #7c5cbf;
  border: none;
  border-left: 1.5px solid #e0e0e0;
  border-radius: 0;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.15s, color 0.15s;
}

.loc-list-map-btn:hover {
  background: #ede9fe;
  color: #5b21b6;
}

.location-list-item:hover .loc-list-map-btn,
.location-list-item:active .loc-list-map-btn {
  border-left-color: #667eea;
}

.nli-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nli-title {
  font-weight: 700;
  font-size: 15px;
  flex: 1;
  color: #222;
}

.nli-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.nli-date  { font-weight: 600; color: #667eea; }
.nli-ingame { color: #888; }

.nli-sub {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}

.nli-loc {
  color: #856404;
  font-size: 12px;
}

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

.nli-tagcount {
  font-size: 12px;
  color: #999;
  font-style: italic;
}

.nli-hidden {
  display: none;
}

/* ── Aktive Session ── */
.session-active-badge {
  display: inline-block;
  background: #7c5cbf;
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}

.btn-session-active {
  padding: 6px 14px;
  background: none;
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-session-active:hover {
  border-color: #7c5cbf;
  color: #7c5cbf;
}

.btn-session-active.is-active {
  background: #7c5cbf;
  border-color: #7c5cbf;
  color: white;
}

/* ── Journal-Verlinkung (neue Person / neuer Ort) ── */
.link-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  font-size: 14px;
  color: #444;
  cursor: pointer;
}

.link-session-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #7c5cbf;
}

.link-session-name {
  color: #7c5cbf;
  font-style: normal;
  font-weight: 500;
}

.link-session-none {
  color: #aaa;
  font-style: normal;
}

/* ── Detail View ── */
.notes-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notes-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #eee;
}

.btn-back {
  padding: 8px 14px;
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  min-height: 40px;
  transition: background 0.15s;
}

.btn-back:hover { background: #e0e0e0; }

/* ── Forms ── */
.detail-form,
.session-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.session-form-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.detail-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.detail-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1.5px solid #eee;
}


/* ── Tag Section ── */
.tag-section {
  background: #f9f9ff;
  border: 1.5px solid #e0e0ff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
}

.tag-section h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #667eea;
  margin-bottom: 12px;
}

.tag-picker {
  margin-bottom: 12px;
}

.tag-picker label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  margin-bottom: 5px;
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Tag-Chip allgemein */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: #e8ecff;
  color: #4a5ad4;
  white-space: nowrap;
}

.event-chip {
  background: #fff3e0;
  color: #e65100;
}

.chip-rm,
.chip-rm-event {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}

.chip-rm:hover,
.chip-rm-event:hover { opacity: 1; }

.chip-add-btn {
  padding: 4px 10px;
  background: #f0f0f0;
  border: 1.5px dashed #ccc;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  min-height: 30px;
  transition: background 0.15s;
}

.chip-add-btn:hover { background: #e8ecff; border-color: #667eea; color: #667eea; }

.tag-picker-dropdown {
  margin-top: 6px;
  background: white;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tp-search {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 6px;
  min-height: 36px;
}

.tp-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
}

.tp-option:hover { background: #f5f5f5; }
.tp-option input { margin: 0; cursor: pointer; }

.tp-create-btn {
  display: block;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 6px;
  background: #f0f7ff;
  border: 1.5px dashed #667eea;
  border-radius: 6px;
  color: #667eea;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.tp-create-btn:hover { background: #e0ecff; }

.tp-create-form {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}

.tp-create-input {
  flex: 1;
  padding: 6px 10px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  min-width: 0;
}
.tp-create-input:focus { border-color: #667eea; outline: none; }

.tp-empty {
  color: #999;
  font-size: 13px;
  padding: 6px 4px;
  margin: 0;
  font-style: italic;
}

.event-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 30px;
}

.event-input-row {
  display: flex;
  gap: 8px;
}

.event-input-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  min-height: 40px;
}

/* ── Status & Relation Badges ── */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-alive   { background: #d4edda; color: #155724; }
.status-dead    { background: #f8d7da; color: #721c24; }
.status-unknown { background: #e2e3e5; color: #495057; }

.relation-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.rel-friendly { background: #cce5ff; color: #004085; }
.rel-neutral  { background: #f0f0f0; color: #555; }
.rel-hostile  { background: #f8d7da; color: #721c24; }

/* ── Location Status Badges ── */
.loc-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.loc-visited { background: #d1fae5; color: #065f46; }
.loc-known   { background: #fff3cd; color: #856404; }
.loc-rumor   { background: #e2e3e5; color: #495057; }

/* ── Quest Status Badges ── */
.quest-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.qst-active    { background: #d4edda; color: #155724; }
.qst-backlog   { background: #e2e3e5; color: #495057; }
.qst-completed { background: #cce5ff; color: #004085; }
.qst-failed    { background: #f8d7da; color: #721c24; }

/* ── Quest Filter Tabs ── */
.quest-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.qf-btn {
  padding: 7px 14px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.15s;
}

.qf-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

/* ── Link Chips (Verlinkungen) ── */
.link-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.session-link  { background: #e8ecff; color: #4a5ad4; }
.person-link   { background: #d4edda; color: #155724; }
.location-link { background: #fff3cd; color: #856404; }
.quest-link    { background: #f8d7da; color: #721c24; }

.link-chip:hover { filter: brightness(0.9); transform: translateY(-1px); }

/* "@"-Erwähnungen im Fließtext: .link-chip ist für freistehende Chip-Listen
   gedacht (großzügiges Padding, Pillenform) - im Fließtext eingebettet wirkt
   das wie zu viel Weißraum vor/nach dem Wort, daher hier deutlich enger. */
.mention-chip {
  display: inline;
  padding: 0 3px;
  border-radius: 4px;
}
.mention-chip:hover { transform: none; }

.linked-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 12px;
}

/* ── Personen-Avatar (Liste) ─────────────────────────────────────────────── */
.person-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-avatar-ph {
  font-size: 20px;
  line-height: 1;
}

/* ── Personen-Bild (Detailansicht, Lesemodus) ────────────────────────────── */
.person-img-view {
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #ddd;
  flex-shrink: 0;
}

.person-view-meta {
  flex: 1;
  min-width: 0;
}

.person-view-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ── Personen-Bild (Edit-Modus) ──────────────────────────────────────────── */
.person-edit-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.person-edit-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.person-img-wrap {
  width: 100px;
  height: 134px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px dashed #ccc;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person-img-edit {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-img-placeholder {
  font-size: 36px;
  color: #bbb;
}

.person-img-upload-btn {
  display: inline-block;
  padding: 6px 12px;
  background: #667eea;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.person-img-remove-btn {
  font-size: 12px;
  color: #e53e3e;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── Anhänge (PDF, Journal-Einträge) ── */
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: #eef1ff;
  color: #4a5ad4;
  white-space: nowrap;
}

a.attachment-link {
  text-decoration: none;
  cursor: pointer;
  color: #4a5ad4;
}
a.attachment-link:hover {
  background: #dde3ff;
}

.attachment-rm-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}
.attachment-rm-btn:hover { opacity: 1; }

.attachments-empty-hint {
  font-size: 13px;
  color: #999;
  font-style: italic;
}

label.attachment-upload-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  background: #667eea;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.person-edit-fields {
  flex: 1;
  min-width: 0;
}

/* ── view-header (Session, Person, Ort, Quest) ──────────────────────────── */
.session-view-header,
.person-view-header,
.location-view-header,
.quest-view-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid #eee;
}

.session-view-header h3,
.person-view-header h3,
.location-view-header h3,
.quest-view-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0;
  flex: 1;
  border: none;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
}

.session-view-dates {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: #666;
}

.session-events {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.session-links {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1.5px solid #eee;
}

.session-link-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
}

.detail-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #444;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
}

.detail-notes {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  background: #fff9f0;
  border-left: 3px solid #ffc107;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  margin: 8px 0;
}

.detail-section {
  font-size: 14px;
  line-height: 1.65;
  color: #333;
  margin: 8px 0;
}

.person-role { font-size: 14px; color: #666; font-style: italic; margin: 0 0 4px; }
.person-race { font-size: 13px; color: #888; margin: 0 0 8px; }
.quest-giver { font-size: 14px; color: #444; margin: 4px 0 8px; }
.quest-locations { font-size: 14px; color: #444; margin: 4px 0 8px; }

.loc-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.loc-meta code {
  font-family: monospace;
  font-size: 13px;
  background: #f0f0f0;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── Imperialkalender-Picker ── */
.trav-date-simple {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trav-date-fields {
  display: flex;
  gap: 12px;
}

.trav-date-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.trav-date-sub-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.trav-date-num-inp {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 15px;
  color: #1a1a2e;
  -moz-appearance: textfield;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.trav-date-num-inp:focus {
  outline: none;
  border-color: #7c5cbf;
}

.trav-date-num-inp::-webkit-outer-spin-button,
.trav-date-num-inp::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.trav-date-preview {
  font-size: 13px;
  color: #7c5cbf;
  font-weight: 500;
  padding: 2px 0;
}

/* ── UWP breakdown block (location view mode) ── */
.loc-uwp-block {
  background: #f8f7ff;
  border: 1.5px solid #e0d9f7;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.loc-uwp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.loc-uwp-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7c5cbf;
  flex: 1;
}

.loc-uwp-code {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  border-radius: 6px;
  padding: 2px 9px;
  letter-spacing: 0.08em;
}

.loc-uwp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.loc-uwp-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
}

.loc-uwp-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.loc-uwp-key {
  color: #888;
  font-size: 11px;
  flex-shrink: 0;
}

.loc-uwp-val {
  color: #1a1a2e;
  font-weight: 500;
  font-size: 13px;
}

/* ===== SKILL ITEMS ===== */
.skill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.skill-item label {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  color: #444;
}

.skill-level-input {
  flex: 1;
  min-width: 10px;
  padding: 5px 4px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  min-height: 36px;
}

/* Spinner-Pfeile bei Skill-Eingabe entfernen */
.skill-level-input::-webkit-inner-spin-button,
.skill-level-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.skill-level-input { -moz-appearance: textfield; }

/* DM-Feld: kein Spinner, visuell als read-only erkennbar */
.attr-dm::-webkit-inner-spin-button,
.attr-dm::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.attr-dm {
  -moz-appearance: textfield;
  cursor: default;
  background: transparent;
  color: #888;
  border-color: transparent;
  pointer-events: none;
  font-size: 0.95em;
}

.attr-max-skill-hint {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
}

/* ===== VISITED SYSTEM CARD ===== */
.system-card {
  background: #f5f5f5;
  padding: 12px 14px;
  margin: 8px 0;
  border-left: 4px solid #667eea;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.system-card strong {
  font-size: 14px;
}

.system-card p {
  margin: 4px 0 0;
  color: #666;
  font-size: 13px;
}

/* ===== DM INFO BOX ===== */

/* ===== MODALS ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  padding: 40px 16px;
  overflow-y: auto;
}

.modal-overlay.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.modal-box {
  background: white;
  width: 100%;
  max-width: 480px;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin: auto;
}

.modal-box h3 {
  margin-top: 0;
  font-size: 18px;
  color: #333;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ===== RESPONSIVE – Tablets ===== */
@media (min-width: 600px) {
  .header h1 {
    font-size: 24px;
  }

  .content {
    padding: 24px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .tab-label {
    font-size: 12px;
  }
}

@media (min-width: 900px) {
  .tab-btn {
    flex-direction: row;
    gap: 6px;
    font-size: 14px;
    padding: 12px 16px;
  }

  .tab-icon {
    font-size: 18px;
  }

  .tab-label {
    font-size: 14px;
  }
}

/* ===== LANDSCAPE TABLET ===== */
@media (orientation: landscape) and (max-height: 600px) {
  .header {
    padding: 8px 16px;
  }

  .tab-btn {
    min-height: 44px;
    padding: 6px 8px;
  }

  .notes-textarea {
    min-height: calc(100vh - 160px);
  }
}

/* ===== ATTRIBUTE-SEITE: VIEW-MODE (schlanke Inputs) ===== */
.view-mode input[type="number"],
.view-mode input[type="text"]:not(#skillFilter) {
  padding: 2px 4px;
  border-color: transparent;
  background: transparent;
  min-height: unset;
  height: auto;
  font-size: inherit;
  pointer-events: none;
}

.view-mode input[type="number"]::-webkit-inner-spin-button,
.view-mode input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.view-mode input[type="number"] { -moz-appearance: textfield; }

.view-mode .skill-level-input {
  border-color: #e0e0e0;
  background: #f8f8f8;
  min-height: unset;
  height: 28px;
  padding: 2px 4px;
}

.view-mode .skill-item {
  padding: 3px 0;
}

.skill-item--learned {
  padding: 4px 0;
}

.skill-item--learned .skill-label {
  font-weight: 700;
  font-size: 17px;
  color: #222;
  flex: 1;
}

.skill-badge {
  font-weight: 700;
  font-size: 15px;
  color: #667eea;
  min-width: 22px;
  text-align: right;
}

.skill-item--unlearned {
  padding: 2px 0;
}

.skill-item--unlearned .skill-label {
  font-size: 14px;
  color: #bbb;
}

/* ===== AUSRÜSTUNGS-SEITE ===== */

.equip-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e8e8e8;
}

.equip-subtab {
  padding: 10px 18px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  min-height: 44px;
  transition: color 0.15s;
}

.equip-subtab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.equip-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.equip-add-row {
  display: flex;
  justify-content: flex-end;
}

.equip-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.equip-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  white-space: nowrap;
}

.equip-table th {
  padding: 10px 8px;
  background: #f5f5f5;
  border-bottom: 2px solid #ddd;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.equip-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}

.equip-table tr:last-child td { border-bottom: none; }
.equip-table tr:hover td { background: #fafafa; }

.equip-table input[type="text"],
.equip-table input[type="number"] {
  width: 100%;
  min-width: 40px;
  padding: 5px 6px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.equip-table select {
  width: 100%;
  min-width: 80px;
  padding: 5px 6px;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
}

/* Attribut + Skill Dropdowns in einer Zelle */
.weapon-mod-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
}

.weapon-mod-edit select {
  width: 100%;
}

/* Kombinierter Mod-Wert im Lesemodus */
.weapon-mod-val {
  text-align: left;
}

.eq-nm { font-weight: 600; }
.eq-traits-cell { font-size: 13px; color: #667eea; font-style: italic; }
.eq-chk { text-align: center; }
.eq-empty {
  text-align: center;
  color: #aaa;
  font-style: italic;
  padding: 24px !important;
}

/* Ammo control */
.ammo-cell { white-space: nowrap; }

.ammo-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ammo-btn {
  min-width: 48px;
  min-height: 48px;
  font-size: 22px;
  font-weight: 700;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s;
  line-height: 1;
}

.ammo-btn:active { background: #f0f0f0; }

.ammo-inp {
  width: 56px !important;
  text-align: center;
  font-size: 16px !important;
  font-weight: 700;
}

.ammo-disp {
  min-width: 48px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

/* Rüstung */
.item-equipped td { background: #eef4ff; }
.armor-active td  { background: #eef4ff; }

.equip-toggle {
  width: 36px;
  height: 36px;
  border: 1.5px solid #ddd;
  border-radius: 50%;
  background: white;
  color: #ccc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.equip-toggle.on {
  border-color: #667eea;
  color: #667eea;
}

.armor-total td {
  background: #f0f4ff;
  padding: 10px 8px !important;
  font-size: 14px;
  border-top: 2px solid #667eea !important;
}

.armor-total-names {
  color: #667eea;
  margin-left: 10px;
  font-size: 13px;
}

/* Traits Modal */
.traits-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.traits-modal {
  background: white;
  width: 100%;
  max-width: 500px;
  padding: 24px;
  border-radius: 12px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.traits-modal h3 { margin: 0; }

.traits-label {
  font-weight: 600;
  font-size: 14px;
  display: block;
}

.traits-img-preview img {
  max-width: 100%;
  border-radius: 8px;
}

.traits-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  resize: vertical;
}

.traits-desc-view {
  margin: 0;
  line-height: 1.6;
  color: #444;
}

.traits-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* ===== HEADER BRAND + CHAR NAME ===== */
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.char-name-display {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

/* ===== CHAR-SELECTOR PANEL (Charakter-Seite) ===== */
.char-selector-panel {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.char-selector-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.char-selector-select {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: white;
  cursor: pointer;
  min-height: 44px;
}

.char-btn {
  padding: 0 14px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== META-GRID ===== */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 10px 0 20px;
}

/* ===== META-AGE-ROW ===== */
.meta-age-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.meta-age-field {
  flex: 1;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-age-field label {
  font-size: 0.9em;
  color: #555;
  font-weight: 500;
}
.meta-age-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95em;
  background: #fff;
  color: #1a1a2e;
}
.meta-birthdate {
  font-size: 0.88em;
  color: #666;
  margin-left: 4px;
}

/* ===== PORTRAIT-WIDGET ===== */
.portrait-widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

.portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  border: 2px solid #ddd;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

.portrait-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.portrait-nav:hover:not(:disabled)  { background: rgba(0, 0, 0, 0.7); }
.portrait-nav:disabled              { opacity: 0.25; cursor: default; }
.portrait-prev                      { left: 8px; }
.portrait-next                      { right: 8px; }

.portrait-counter {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
}

.portrait-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.portrait-add-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.portrait-del-btn {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.portrait-hint {
  font-size: 12px;
  color: #888;
}

/* ===== EXPORT SECTION ===== */
/* ===== KAMPAGNE-BADGES & EXTERNE EINTRÄGE ===== */
.camp-share-badge {
  font-size: 0.75em;
  padding: 0 3px;
  vertical-align: middle;
  opacity: 0.85;
}
.camp-share-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9em;
  color: #555;
}
.camp-share-label input[type="checkbox"] { width: 16px; height: 16px; }
.camp-ext-section {
  border-top: 1px dashed #ddd;
  margin-top: 12px;
  padding-top: 8px;
}
.camp-ext-label {
  display: block;
  font-size: 0.75em;
  color: #888;
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.camp-ext-entry {
  padding: 6px 10px;
  background: #f8f5ff;
  border-radius: 6px;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  opacity: 0.85;
  font-size: 0.9em;
}
.pcard-ext {
  padding: 8px 10px;
  background: #f8f5ff;
  border-radius: 8px;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ===== KAMPAGNE ===== */
.campaign-section {
  border-top: 1px solid #e9ecef;
  padding-top: 20px;
  margin-top: 24px;
}
.campaign-section h3 { margin: 0 0 12px; font-size: 0.95em; color: #555; }
.campaign-hint       { margin: 0 0 10px; font-size: 0.88em; color: #888; }
.campaign-btn        { margin-right: 8px; margin-bottom: 8px; }
.campaign-none       { display: flex; flex-direction: column; gap: 8px; }
.campaign-name-row   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.campaign-name       { font-size: 1.05em; }
.campaign-id-badge   { font-size: 0.78em; background: #eef; color: #447; padding: 2px 7px; border-radius: 10px; }
.campaign-owner-badge{ font-size: 0.78em; background: #ffe; color: #885; padding: 2px 7px; border-radius: 10px; }
.campaign-members-title { margin: 0 0 4px; font-size: 0.85em; color: #666; }
.campaign-member-list   { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.campaign-member-item   { display: flex; align-items: center; gap: 6px; font-size: 0.85em; }
.campaign-member-id     { color: #555; font-family: monospace; font-size: 0.92em; }
.btn-danger-sm          { background: none; border: 1px solid #ef4444; color: #ef4444; border-radius: 4px; padding: 1px 6px; font-size: 0.78em; cursor: pointer; }
.btn-danger-sm:hover    { background: #fef2f2; }
.campaign-actions       { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Kampagnen-Modal */
.campaign-modal-section  { margin-bottom: 16px; }
.campaign-modal-subtitle { font-size: 0.9em; color: #555; margin: 0 0 10px; }
.campaign-modal-divider  { text-align: center; color: #bbb; font-size: 0.85em; margin: 4px 0 16px; }
.campaign-id-hint        { font-size: 0.78em; color: #999; font-weight: 400; }
.campaign-join-list      { max-height: 160px; overflow-y: auto; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.campaign-item           { display: flex; flex-direction: column; text-align: left; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; transition: background 0.15s; }
.campaign-item:hover     { background: #f5f5ff; }
.campaign-item-name      { font-weight: 600; font-size: 0.95em; }
.campaign-item-meta      { font-size: 0.78em; color: #888; }

/* Kampagne-Tab in Notes */
.campaign-tab-header     { margin-bottom: 12px; }
.campaign-tab-title      { margin: 0 0 2px; font-size: 1em; }
.campaign-tab-id         { margin: 0; font-size: 0.8em; color: #888; }
.campaign-subtabs        { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.campaign-subtab-btn     { padding: 5px 10px; border: 1px solid #ddd; border-radius: 16px; background: #f8f9fa; font-size: 0.82em; cursor: pointer; }
.campaign-subtab-btn.active { background: #667eea; color: white; border-color: #667eea; }

.export-section {
  border-top: 1px solid #e9ecef;
  padding-top: 20px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.export-btn {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: #f0f2ff;
  color: #667eea;
  border: 1.5px solid #667eea;
  cursor: pointer;
  transition: background 0.15s;
}

.export-btn:hover,
.export-btn:active {
  background: #e0e4ff;
}

.export-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.export-label {
  display: inline-flex;
  align-items: center;
}

.export-hint {
  font-size: 13px;
  color: #888;
  margin: 0;
}

/* ═══════════════════════════════════════════
   KAMPF-SEITE
   ═══════════════════════════════════════════ */

.combat-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px;
  align-items: start;
}

.combat-block {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
}

.combat-block-title {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Block 1: Attribut-Karten ── */

.combat-attrs {
  display: flex;
  gap: 12px;
}

.combat-attr-card {
  flex: 1;
  border-radius: 12px;
  border: 2px solid transparent;
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.combat-attr-green  { background: #d4edda; border-color: #28a745; }
.combat-attr-yellow { background: #fff3cd; border-color: #ffc107; }
.combat-attr-red    { background: #f8d7da; border-color: #dc3545; }

.combat-attr-label {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.combat-attr-dm {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.combat-attr-values {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.combat-attr-current {
  font-size: 36px;
  font-weight: 800;
  color: #222;
  line-height: 1;
}

.combat-attr-sep {
  font-size: 20px;
  color: #999;
}

.combat-attr-max {
  font-size: 18px;
  color: #777;
  font-weight: 600;
}

.combat-attr-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.combat-attr-btn {
  flex: 1;
  min-height: 48px;
  font-size: 22px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.10);
  color: #333;
  cursor: pointer;
  transition: background 0.15s;
}

.combat-attr-btn:active {
  background: rgba(0,0,0,0.22);
}

/* Status-Banner */

.combat-status {
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.combat-status-fit         { background: #d4edda; color: #155724; }
.combat-status-wounded     { background: #fff3cd; color: #856404; }
.combat-status-unconscious { background: #f8d7da; color: #721c24; }
.combat-status-dead        { background: #343a40; color: #f8f9fa; }

/* ── Block 2: Initiative ── */

.combat-initiative {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.combat-init-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.combat-init-val {
  font-size: 64px;
  font-weight: 900;
  color: #333;
  line-height: 1;
  width: 140px;
  text-align: center;
  border: none;
  border-bottom: 3px solid #ddd;
  border-radius: 0;
  background: transparent;
  outline: none;
  padding: 0 8px;
}

.combat-init-val:focus {
  border-bottom-color: #667eea;
}

/* Spinner ausblenden */
.combat-init-val::-webkit-inner-spin-button,
.combat-init-val::-webkit-outer-spin-button { -webkit-appearance: none; }
.combat-init-val { -moz-appearance: textfield; }

.combat-init-dex-info {
  font-size: 13px;
  color: #888;
}

.combat-init-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.combat-init-btn {
  min-height: 48px;
  min-width: 56px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #f8f9fa;
  color: #333;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.combat-init-btn:active {
  background: #e2e6ea;
}

.combat-init-react {
  border-color: #ffc107;
  background: #fff3cd;
  color: #856404;
}

.combat-init-roll {
  border-color: #667eea;
  background: #eef0ff;
  color: #3a3fa0;
  flex: 1;
}

/* Würfel-Shake-Animation */
@keyframes combat-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px) rotate(-4deg); }
  40%  { transform: translateX(6px)  rotate(4deg); }
  60%  { transform: translateX(-4px) rotate(-2deg); }
  80%  { transform: translateX(4px)  rotate(2deg); }
  100% { transform: translateX(0); }
}

.combat-init-shake {
  animation: combat-shake 0.4s ease;
}

/* ── Block 3: Aktive Ausrüstung ── */

.combat-equip-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.combat-equip-item {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafafa;
}

.combat-equip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.combat-equip-icon { font-size: 20px; }

.combat-equip-name {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  flex: 1;
}

.combat-equip-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e9ecef;
  color: #555;
  padding: 2px 7px;
  border-radius: 10px;
}

.combat-equip-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
}

.combat-equip-traits {
  font-size: 13px;
  color: #667eea;
  font-style: italic;
  margin-bottom: 8px;
}

.combat-recoil-warn {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* Ammo */

.combat-ammo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.combat-ammo-count {
  font-size: 22px;
  font-weight: 800;
  color: #222;
  min-width: 70px;
}

.combat-ammo-sep { color: #999; }
.combat-ammo-mag { color: #888; font-size: 16px; }

.combat-ammo-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.combat-ammo-btn {
  min-height: 48px;
  min-width: 64px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 700;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  background: #f8f9fa;
  color: #333;
  cursor: pointer;
  transition: background 0.15s;
}

.combat-ammo-btn:active { background: #e2e6ea; }

.combat-ammo-reload {
  border-color: #28a745;
  background: #d4edda;
  color: #155724;
}

/* Schutz-Block (in Physische Attribute) */

.combat-prot {
  margin: 10px 0 6px;
  background: #f0f4ff;
  border: 1.5px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 14px;
}

.combat-prot-total {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.combat-prot-icon { font-size: 18px; }

.combat-prot-value {
  font-size: 22px;
  font-weight: 700;
  color: #3730a3;
}

.combat-prot-label {
  font-size: 13px;
  color: #6366f1;
  font-weight: 500;
}

.combat-prot-empty {
  font-size: 13px;
  color: #aaa;
  font-style: italic;
}

/* Rüstungs-Liste */

.combat-armor-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.combat-armor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.combat-armor-row-name { flex: 1; color: #444; }
.combat-armor-row-prot { font-weight: 700; color: #222; }

.combat-armor-rad {
  font-size: 12px;
  background: #e2e3e5;
  color: #495057;
  padding: 1px 6px;
  border-radius: 8px;
}

.combat-equip-empty {
  color: #aaa;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
}

/* ── Block 5: Erste Hilfe ── */

.combat-fa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.combat-fa-btn {
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  border: 2px solid #28a745;
  border-radius: 8px;
  background: #d4edda;
  color: #155724;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}

.combat-fa-btn:active { background: #b8ddc8; }

.combat-fa-warn {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #856404;
}

.combat-fa-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.combat-fa-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
}

.combat-fa-time {
  color: #888;
  white-space: nowrap;
  font-size: 13px;
}

.combat-fa-label {
  flex: 1;
  color: #333;
}

.combat-fa-del {
  background: none;
  border: none;
  color: #aaa;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
}

.combat-fa-del:hover { color: #dc3545; }

/* ── Block 4: Strahlungsdosis ── */

.combat-rad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.combat-rad-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  border: 2px solid transparent;
}

.combat-rad-value {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.combat-rad-unit {
  font-size: 20px;
  font-weight: 600;
}

.combat-rad-label {
  font-size: 14px;
  font-weight: 600;
}

/* Farbstufen */
.rad-green  { background: #d4edda; border-color: #28a745; color: #155724; }
.rad-yellow { background: #fff3cd; border-color: #ffc107; color: #856404; }
.rad-orange { background: #fde8d0; border-color: #fd7e14; color: #7d3c0a; }
.rad-red    { background: #f8d7da; border-color: #dc3545; color: #721c24; }

.rad-green-text  { color: #155724; }
.rad-yellow-text { color: #856404; }
.rad-orange-text { color: #7d3c0a; }
.rad-red-text    { color: #721c24; }

.combat-rad-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.combat-rad-input {
  width: 130px;
  min-height: 48px;
  padding: 0 12px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

.combat-rad-btn {
  min-height: 48px;
  min-width: 120px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.combat-rad-add {
  background: #d4edda;
  border-color: #28a745;
  color: #155724;
}

.combat-rad-add:active { background: #b8ddc8; }

.combat-rad-reset {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #555;
}

.combat-rad-reset:active { background: #e2e6ea; }

/* Strahlungsdosis: volle Breite */
.combat-col-span {
  grid-column: 1 / -1;
}
.combat-col-span > .combat-block {
  width: 100%;
}

/* ── Mobil: einspaltig ── */
@media (max-width: 600px) {
  .combat-page {
    grid-template-columns: 1fr;
  }
  .combat-col-span {
    grid-column: 1;
  }
}

/* ═══════════════════════════════════════════
   FINANZEN-SEITE
   ═══════════════════════════════════════════ */

.fin-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fin-block {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
}

.fin-block-title {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fin-pos { color: #155724; }
.fin-neg { color: #721c24; }

/* ── Block 1: Kontostand ── */

.fin-block-balance { text-align: center; }

.fin-balance {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 16px;
}

.fin-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 15px;
}

.fin-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}

.fin-summary-netto {
  font-weight: 700;
  font-size: 16px;
  border-bottom: none;
  margin-top: 4px;
}

.fin-pension-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-size: 14px;
  padding: 0 4px;
  vertical-align: middle;
}
.fin-pension-edit:hover { color: #667eea; }

.fin-main-btns {
  display: flex;
  gap: 12px;
}

.fin-btn-income,
.fin-btn-expense {
  flex: 1;
  min-height: 56px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.15s;
}

.fin-btn-income  { background: #28a745; color: #fff; }
.fin-btn-expense { background: #dc3545; color: #fff; }
.fin-btn-income:active,
.fin-btn-expense:active { filter: brightness(0.88); }

/* ── Block 2: Transaktionen ── */

.fin-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.fin-filter-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: #f8f9fa;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.fin-filter-btn.active {
  background: #667eea;
  border-color: #667eea;
  color: #fff;
}

.fin-tx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fin-tx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 14px;
}

.fin-tx-date {
  white-space: nowrap;
  color: #888;
  font-size: 12px;
  min-width: 68px;
}

.fin-tx-desc { flex: 1; color: #333; }

.fin-tx-amt {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  min-width: 90px;
}

.fin-tx-del {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s;
}
.fin-tx-del:hover { color: #dc3545; }

/* Kategorie-Badges */

.fin-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.cat-sold      { background: #cce5ff; color: #004085; }
.cat-equipment { background: #e2d9f3; color: #3d1a78; }
.cat-ship      { background: #d1ecf1; color: #0c5460; }
.cat-trade     { background: #d4edda; color: #155724; }
.cat-other     { background: #e2e3e5; color: #383d41; }

/* ── Block 3: Wiederkehrende Posten ── */

.fin-rec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.fin-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 14px;
}

.fin-rec-desc     { flex: 1; color: #333; font-weight: 600; }
.fin-rec-interval { color: #888; font-size: 12px; white-space: nowrap; }
.fin-rec-amt      { font-weight: 700; white-space: nowrap; min-width: 80px; text-align: right; }

.fin-rec-del {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
}
.fin-rec-del:hover { color: #dc3545; }

.fin-rec-footer {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Toggle-Switch */

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

.fin-switch input { display: none; }

.fin-switch-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.2s;
}

.fin-switch-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.fin-switch input:checked + .fin-switch-slider           { background: #28a745; }
.fin-switch input:checked + .fin-switch-slider::before   { transform: translateX(18px); }

/* Buttons */

.fin-btn-secondary {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #667eea;
  border-radius: 8px;
  background: #eef0ff;
  color: #3a3fa0;
  cursor: pointer;
  transition: background 0.15s;
}
.fin-btn-secondary:active { background: #d8dbff; }

.fin-btn-settle {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  border: 2px solid #ffc107;
  border-radius: 8px;
  background: #fff3cd;
  color: #856404;
  cursor: pointer;
  transition: background 0.15s;
}
.fin-btn-settle:active { background: #ffe89a; }

/* ── Block 4: Schulden ── */

.fin-debt-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.fin-debt-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 14px;
  background: #fafafa;
}

.fin-debt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.fin-debt-name {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  display: block;
}

.fin-debt-creditor {
  font-size: 12px;
  color: #888;
  display: block;
  margin-top: 2px;
}

.fin-debt-del {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.fin-debt-del:hover { color: #dc3545; }

.fin-progress-track {
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.fin-progress-fill {
  height: 100%;
  background: #28a745;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.fin-debt-notes {
  font-size: 13px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eee;
}

.fin-debt-info {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 4px;
}

.fin-debt-numbers { text-align: right; }

.fin-debt-pay {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid #dc3545;
  border-radius: 8px;
  background: #f8d7da;
  color: #721c24;
  cursor: pointer;
  transition: background 0.15s;
}
.fin-debt-pay:active { background: #f1b0b7; }

.fin-debt-done {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #155724;
  padding: 8px 0;
}

/* ── Leerer Zustand ── */

.fin-empty {
  color: #aaa;
  font-style: italic;
  text-align: center;
  padding: 16px 0;
  font-size: 14px;
  margin: 0;
}

/* ── Modals ── */

.fin-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.fin-modal-overlay.open { display: flex; }

/* ── Abrechnungs-Modal ──────────────────────────────────────────────────── */
.fin-settle-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.fin-settle {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
}

.fin-settle h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.fin-settle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
}

.fin-settle-item {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  background: #fafafa;
}

.fin-settle-item:has(.fin-settle-cb:checked) {
  border-color: #667eea;
  background: #f0f2ff;
}

.fin-settle-inactive {
  opacity: 0.5;
}

.fin-settle-desc {
  font-size: 15px;
  color: #333;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fin-settle-interval {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
}

.fin-settle-amt {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.fin-settle-total {
  font-size: 14px;
  color: #444;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.fin-modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.fin-modal h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.fin-modal-field {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fafafa;
  color: #333;
}

.fin-modal-field:focus { border-color: #667eea; outline: none; background: #fff; }

.fin-modal-textarea {
  min-height: 80px;
  padding: 10px 14px;
  resize: vertical;
}

.fin-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.fin-btn-save {
  flex: 1;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: #667eea;
  color: #fff;
  cursor: pointer;
}
.fin-btn-save:active { filter: brightness(0.9); }

.fin-btn-cancel {
  min-height: 48px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #f8f9fa;
  color: #555;
  cursor: pointer;
}
.fin-btn-cancel:active { background: #e2e6ea; }


/* ═══════════════════════════════════════════
   WERDEGANG-SEITE
   ═══════════════════════════════════════════ */

.cr-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.cr-block {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
}

.cr-block-full { /* full-width even in grid */ }

.cr-block-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cr-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.cr-empty {
  color: #aaa;
  font-style: italic;
  font-size: 14px;
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

.cr-empty-inline { color: #aaa; font-style: italic; font-size: 14px; }

/* ── Block 1: Timeline ── */

.cr-timeline-scroll {
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 4px;
}

.cr-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 12px 0 4px;
  min-width: max-content;
  position: relative;
}

.cr-timeline::before {
  content: '';
  position: absolute;
  top: 26px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: #e0e0e0;
  z-index: 0;
}

.cr-term-dot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  position: relative;
  z-index: 1;
}

.cr-term-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
}

.cr-term-dot:active { transform: scale(0.93); }
.cr-term-dot.last   { width: 44px; height: 44px; font-size: 16px; margin-top: -4px; }
.cr-term-dot.sel    { outline: 3px solid #667eea; outline-offset: 3px; }

.cr-term-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cr-term-svc  { font-size: 11px; font-weight: 700; }
.cr-term-rank { font-size: 10px; color: #888; text-align: center; max-width: 70px; }

.cr-add-term-btn {
  min-height: 36px;
  min-width: 80px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border: 2px dashed #667eea;
  border-radius: 20px;
  background: #eef0ff;
  color: #3a3fa0;
  cursor: pointer;
  align-self: center;
  margin-left: 12px;
  white-space: nowrap;
  z-index: 1;
  position: relative;
}

/* Term Detail-Karte */

.cr-term-detail {
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
  background: #fafafa;
}

.cr-term-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cr-detail-svc {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 3px 10px;
  border-radius: 10px;
}

.cr-detail-rank {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.cr-detail-muster {
  font-size: 12px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  padding: 2px 8px;
  border-radius: 6px;
}

.cr-detail-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.cr-detail-edit,
.cr-detail-del {
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
  color: #555;
}
.cr-detail-del { color: #dc3545; border-color: #f5c6cb; }

.cr-detail-section { margin-bottom: 10px; font-size: 14px; }
.cr-detail-section strong { display: block; font-size: 12px; text-transform: uppercase; color: #888; margin-bottom: 4px; }
.cr-detail-section p { margin: 0; color: #333; }

.cr-skill-tags  { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-skill-tag   { background: #e9ecef; color: #333; font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 600; }

/* ── Block 2: Ereignisse ── */

.cr-event-list { display: flex; flex-direction: column; gap: 8px; }

.cr-event-row {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.cr-event-header {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: #fafafa;
  cursor: pointer;
  gap: 10px;
  user-select: none;
}

.cr-event-row.expanded .cr-event-header { background: #f0f2ff; }

.cr-event-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

.cr-event-title { font-size: 15px; font-weight: 600; color: #222; }
.cr-event-term  { font-size: 12px; color: #888; background: #e9ecef; padding: 1px 8px; border-radius: 8px; }

.cr-event-actions { display: flex; align-items: center; gap: 6px; }

.cr-event-edit,
.cr-event-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-size: 14px;
  padding: 4px;
  border-radius: 4px;
}
.cr-event-edit:hover { color: #667eea; }
.cr-event-del:hover  { color: #dc3545; }

.cr-expand-arrow { color: #aaa; font-size: 12px; }

.cr-event-body {
  padding: 10px 14px 12px;
  font-size: 14px;
  color: #333;
  border-top: 1px solid #eee;
}

.cr-event-body p { margin: 0 0 8px; }

.cr-event-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.cr-link-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
.cr-link-person { background: #dce8ff; color: #1a4fa8; }
.cr-link-loc    { background: #dcf5e7; color: #155724; }

/* Stars */

.cr-stars { display: flex; gap: 2px; }

.cr-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px;
  line-height: 1;
}
.cr-star-static { font-size: 14px; }

.cr-sort-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #f8f9fa;
  color: #555;
  cursor: pointer;
}
.cr-sort-btn.active { border-color: #667eea; background: #eef0ff; color: #3a3fa0; }

.cr-btn-add {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid #667eea;
  border-radius: 8px;
  background: #eef0ff;
  color: #3a3fa0;
  cursor: pointer;
}

.cr-btn-secondary {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #f8f9fa;
  color: #555;
  cursor: pointer;
}

/* ── Block 3: Hintergrund ── */

.cr-bg-group { margin-bottom: 16px; }

.cr-bg-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.cr-save-feedback {
  font-size: 12px;
  color: #28a745;
  opacity: 0;
  transition: opacity 0.3s;
  font-weight: 700;
}

.cr-bg-field {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
  background: #fafafa;
  color: #333;
  font-family: inherit;
}
.cr-bg-field:focus { border-color: #667eea; outline: none; background: #fff; }

.cr-bg-preview {
  font-size: 13px;
  margin-top: 6px;
  padding: 0 2px;
}
.cr-bg-preview:empty { display: none; }

/* Secrets */

.cr-secrets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cr-secrets-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}

.cr-secrets-wrap { position: relative; }

.cr-secrets-wrap.blurred textarea {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.cr-secrets-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #667eea;
  cursor: pointer;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
}

/* Zitate */

.cr-quote-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }

.cr-quote-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 14px;
  font-style: italic;
  color: #444;
}

.cr-quote-text { flex: 1; }

.cr-quote-del {
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
.cr-quote-del:hover { color: #dc3545; }

.cr-quote-add {
  display: flex;
  gap: 8px;
}

.cr-quote-input {
  flex: 1;
  min-height: 42px;
  padding: 0 12px;
  font-size: 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}
.cr-quote-input:focus { border-color: #667eea; outline: none; }

/* ── Block 4: Favoriten-Kontakte ── */

.cr-fav-list { display: flex; flex-direction: column; gap: 8px; }

.cr-fav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.cr-fav-row:hover { background: #f0f2ff; }

.cr-fav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cr-fav-name { font-weight: 700; font-size: 15px; color: #222; white-space: nowrap; }
.cr-fav-role { font-size: 12px; color: #888; white-space: nowrap; }
.cr-fav-desc { flex: 1; font-size: 13px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Personen-Favoriten-Button (Notes) ── */

.person-fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 2px 6px;
  color: #ccc;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s;
  margin-left: auto;
  flex-shrink: 0;
}
.person-fav-btn.active { color: #f5a623; }
.person-fav-btn:hover  { color: #f5a623; }

/* ── Career Modals ── */

.cr-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  overflow-y: auto;
}
.cr-modal-overlay.open { display: flex; }

.cr-modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  margin: auto;
}

.cr-modal h3 { margin: 0; font-size: 18px; font-weight: 700; color: #222; }

.cr-modal-row { display: flex; flex-direction: column; gap: 4px; }
.cr-modal-row label { font-size: 13px; font-weight: 600; color: #555; }

.cr-modal-field {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  font-size: 15px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  background: #fafafa;
  color: #333;
  font-family: inherit;
}
.cr-modal-field:focus { border-color: #667eea; outline: none; }

.cr-modal-field[rows] { padding: 10px 12px; resize: vertical; min-height: 80px; }

.cr-modal-check { flex-direction: row; align-items: center; }
.cr-modal-check label { font-size: 15px; display: flex; align-items: center; gap: 8px; }

.cr-modal-stars { display: flex; gap: 8px; }

.cr-modal-star {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.cr-check-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fafafa;
}

.cr-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.cr-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.cr-btn-save {
  flex: 1;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: #667eea;
  color: #fff;
  cursor: pointer;
}
.cr-btn-save:active { filter: brightness(0.9); }

.cr-btn-cancel {
  min-height: 48px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #f8f9fa;
  color: #555;
  cursor: pointer;
}

/* ── Responsive ab 1024px ── */
@media (min-width: 1024px) {
  .cr-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .cr-block-full { grid-column: 1 / -1; }
}

/* ===== WEITERBILDUNG / TRAINING ===== */
.training-section  { margin-top: 10px; }
.training-add-btn  { margin-bottom: 14px; }

.training-empty {
  color: #aaa;
  font-style: italic;
  font-size: 0.9em;
  margin: 4px 0 16px;
}

/* Karte */
.training-card {
  background: #f8f9ff;
  border: 1px solid #e0e4f8;
  border-left: 4px solid #667eea;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-left-color 0.25s, background 0.25s;
}

.training-card--ready {
  border-left-color: #10b981;
  background: #f0fdf8;
}

/* Kopfzeile: Skill + Level + Methode + Löschen */
.training-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.training-skill-name {
  font-weight: 700;
  font-size: 15px;
  color: #222;
}

.training-levels {
  font-size: 13px;
  background: #eee;
  color: #555;
  padding: 2px 9px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.train-method-badge {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.train-method-self    { background: #e0f0ff; color: #2563eb; }
.train-method-teacher { background: #d1fae5; color: #059669; }
.train-method-course  { background: #fef3c7; color: #d97706; }

/* Counter-Zeile: − counter + | Abschließen */
.training-card-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.training-pm-btn {
  width: 34px;
  height: 34px;
  border: 1.5px solid #c7d0f0;
  background: white;
  color: #667eea;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.training-pm-btn:active { background: #eef0ff; border-color: #667eea; }

.training-counter {
  font-size: 15px;
  font-weight: 600;
  color: #444;
  min-width: 110px;
  text-align: center;
}

/* Abschließen-Button */
.training-complete-btn {
  margin-left: auto;
  padding: 6px 13px;
  background: #e5e7eb;
  color: #6b7280;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.training-complete-btn.training-complete-ready {
  background: #10b981;
  color: white;
}

/* Löschen-Button */
.training-del-btn {
  margin-left: auto;
  padding: 5px 9px;
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.training-del-btn.btn-xs { padding: 2px 7px; font-size: 12px; }

/* Fortschrittsbalken */
.training-progress-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.training-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.training-progress-fill--done {
  background: linear-gradient(90deg, #10b981, #059669);
}

.training-card-notes {
  font-size: 13px;
  color: #888;
  font-style: italic;
  margin-top: 8px;
}

/* ===== TRAINING SESSIONS LOG ===== */
.training-sessions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.training-session-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #555;
}
.training-session-item::before {
  content: '↳';
  color: #aaa;
  flex-shrink: 0;
}
.training-session-weeks {
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}
.training-session-range {
  color: #777;
}
.training-session-del {
  margin-left: auto;
  font-size: 13px;
  line-height: 1;
  padding: 0 4px;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}
.training-session-del:hover {
  color: #e53e3e;
  background: #fff0f0;
}
.training-modal--small {
  max-width: 340px;
}

/* Abgeschlossen-Bereich */
.training-done-details {
  margin-top: 14px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.training-done-summary {
  cursor: pointer;
  color: #10b981;
  font-weight: 600;
  font-size: 14px;
  user-select: none;
  list-style: none;
}
.training-done-summary::-webkit-details-marker { display: none; }
.training-done-list { margin-top: 8px; }
.training-done-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid #f4f4f4;
  font-size: 13px;
  flex-wrap: wrap;
}
.train-method-small  { color: #aaa; font-size: 12px; }
.training-done-date  { color: #bbb; font-size: 12px; margin-left: auto; }

/* Training-Modal */
.training-modal {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.training-modal h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}
.training-modal-info {
  background: #f5f5ff;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #444;
}
.training-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.training-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.training-custom-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  margin-top: 6px;
}
.training-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  margin-top: 8px;
}

/* ===== MARKDOWN ===== */
.md-content { line-height: 1.6; color: #333; }

.md-content .md-h1 { font-size: 20px; font-weight: 700; margin: 12px 0 6px; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
.md-content .md-h2 { font-size: 17px; font-weight: 700; margin: 10px 0 5px; }
.md-content .md-h3 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; }

.md-content .md-p  { margin: 0 0 8px; }
.md-content .md-p:last-child { margin-bottom: 0; }

.md-content .md-ul,
.md-content .md-ol { margin: 4px 0 8px 20px; padding: 0; }
.md-content .md-ul li,
.md-content .md-ol li { margin-bottom: 3px; }

.md-content .md-table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 13px;
}
.md-content .md-table th,
.md-content .md-table td {
  border: 1px solid #d1d5db;
  padding: 6px 10px;
  text-align: left;
}
.md-content .md-table th {
  background: #f3f4f6;
  font-weight: 600;
}
.md-content .md-table tr:nth-child(even) td { background: #f9fafb; }

.md-content .md-pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  font-size: 12px;
  margin: 6px 0;
}
.md-content .md-code {
  background: #f3f4f6;
  color: #7c3aed;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: monospace;
}
.md-content .md-hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 10px 0;
}
.md-content strong { font-weight: 700; }
.md-content em     { font-style: italic; }
.md-content del    { text-decoration: line-through; opacity: 0.7; }

.md-hint {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
  font-family: monospace;
  letter-spacing: 0.01em;
}

/* ===== PERSON CARD GRID ===== */
.person-list-header {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.person-search-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 8px;
}

.person-search-row .notes-search {
  flex: 1;
  margin-bottom: 0;
  min-height: 44px;
}

.person-search-row .btn-success {
  min-height: 44px;
  white-space: nowrap;
}

.pf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pf-chip-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.pf-chip {
  padding: 5px 11px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  color: #555;
  white-space: nowrap;
  min-height: 32px;
}

.pf-chip:hover:not(.active) {
  border-color: #667eea;
  color: #667eea;
}

.pf-chip.active                   { background: #667eea; border-color: #667eea; color: white; }
.pf-chip.pf-alive.active          { background: #16a34a; border-color: #16a34a; }
.pf-chip.pf-dead.active           { background: #dc2626; border-color: #dc2626; }
.pf-chip.pf-unknown.active        { background: #6b7280; border-color: #6b7280; }
.pf-chip.pf-friendly.active       { background: #16a34a; border-color: #16a34a; }
.pf-chip.pf-neutral.active        { background: #6b7280; border-color: #6b7280; }
.pf-chip.pf-hostile.active        { background: #dc2626; border-color: #dc2626; }

.session-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.session-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  white-space: nowrap;
}

.session-filter-fields {
  display: flex;
  gap: 8px;
  flex: 1;
}

.session-filter-fields select {
  flex: 1;
  padding: 6px 10px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  min-height: 36px;
  background: white;
  color: #444;
  cursor: pointer;
}

.pf-loc-select {
  padding: 5px 10px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  font-size: 12px;
  min-height: 32px;
  background: white;
  color: #555;
  cursor: pointer;
}

.person-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.person-card {
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  position: relative;
  background: #e5e7eb;
}

.person-card:hover,
.person-card:active {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
  transform: translateY(-1px);
}

/* Vollbild-Foto */
.pcard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pcard-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.pcard-avatar-ph {
  font-size: 64px;
  opacity: 0.18;
}

/* Favoriten-Button */
.pcard-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 2;
  transition: transform 0.15s, background 0.15s;
  color: rgba(255,255,255,0.85);
}

.pcard-fav:active           { transform: scale(1.2); }
.pcard-fav.active           { color: #f5c542; background: rgba(0,0,0,0.45); }
.pcard-fav:hover:not(.active) { background: rgba(0,0,0,0.5); }

/* Text-Overlay am unteren Rand */
.pcard-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 10px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1;
}

.pcard-name {
  font-weight: 700;
  font-size: 13px;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.pcard-role {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}

.pcard-badges .status-badge,
.pcard-badges .relation-badge {
  font-size: 10px;
  padding: 1px 6px;
  opacity: 0.92;
}

.pcard-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== TRAVELLER MAP ===== */
.map-view {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
}

/* ── Map search bar ── */
.map-search-bar {
  flex-shrink: 0;
  background: #1a1a2e;
  padding: 8px 12px;
  border-radius: 12px 12px 0 0;
}

.map-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.map-search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.map-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.map-search-input::placeholder { color: rgba(255,255,255,0.45); }
.map-search-input:focus { border-color: #667eea; background: rgba(255,255,255,0.18); }
.map-search-input::-webkit-search-decoration,
.map-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.map-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}

/* ── Map world info panel ── */
.map-world-info {
  flex-shrink: 0;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-top: 1px solid rgba(255,255,255,0.1);
  border-radius: 0 0 12px 12px;
  padding: 10px 14px;
  color: white;
}

.map-wi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.map-wi-name {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.map-wi-name strong {
  font-size: 16px;
  font-weight: 700;
}

.map-wi-loc {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

.map-wi-uwp {
  font-size: 13px;
  background: rgba(102,126,234,0.35);
  border: 1px solid rgba(102,126,234,0.5);
  border-radius: 6px;
  padding: 2px 8px;
  color: #c7d2fe;
  font-family: monospace;
  letter-spacing: 0.05em;
}

.map-wi-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s;
}

.map-wi-close:hover { color: white; }

.map-wi-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}

.map-wi-stats span {
  white-space: nowrap;
}

.traveller-map-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 0 0 12px 12px;
  display: block;
  min-height: 0;
}


/* Map search results */
.btn-map-search,
.btn-map-show {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  border: 1.5px solid;
  transition: all 0.15s;
}

.btn-map-search {
  background: #f0f4ff;
  color: #667eea;
  border-color: #c7d2fe;
}

.btn-map-search:hover { background: #e0e9ff; }

.btn-map-show {
  background: #f0fdf4;
  color: #16a34a;
  border-color: #bbf7d0;
}

.btn-map-show:hover { background: #dcfce7; }

.uwp-map-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}

.uwp-map-link code {
  text-decoration: underline dotted;
  color: #667eea;
}

.map-search-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}

.map-result-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: white;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.map-result-pick:last-child { border-bottom: none; }
.map-result-pick:hover      { background: #f0f4ff; }

.map-result-pick strong { font-size: 14px; color: #1a1a2e; }
.map-result-pick span   { font-size: 12px; color: #6b7280; }

.map-search-empty {
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
  margin-top: 8px;
}

/* ===== LOCATION AUTOCOMPLETE ===== */
.loc-name-wrap {
  position: relative;
}

.loc-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1.5px solid #c7d2fe;
  border-top: none;
  border-radius: 0 0 10px 10px;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
}

/* Erwähnungs-Dropdown wird per JS unter das "@" positioniert (siehe
   NotesPage._caretCoords) statt flush unter das ganze Textarea - braucht
   deshalb einen vollen Rahmen/volle Rundung statt der "hängt am Input"-Optik. */
.mention-suggestions {
  right: auto;
  min-width: 200px;
  max-width: min(320px, calc(100% - 16px));
  border-top: 1.5px solid #c7d2fe;
  border-radius: 10px;
}

.loc-suggest-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.1s;
}

.loc-suggest-item:last-child { border-bottom: none; }
.loc-suggest-item:hover      { background: #f0f4ff; }
.loc-suggest-item strong     { font-size: 14px; color: #1a1a2e; }
.loc-suggest-item span       { font-size: 12px; color: #6b7280; }

.loc-map-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  font-size: 12px;
  color: #16a34a;
}

.loc-map-unlink {
  margin-left: auto;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.loc-map-unlink:hover { color: #dc2626; }

/* Search-Input normalisieren (Safari styled type=search anders) */
#locName[type="search"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  min-height: 44px;
  background: white;
  color: #333;
  transition: border-color 0.2s;
  outline: none;
  box-sizing: border-box;
}

#locName[type="search"]:focus {
  border-color: #667eea;
}

#locName[type="search"]::-webkit-search-cancel-button,
#locName[type="search"]::-webkit-search-decoration,
#locName[type="search"]::-webkit-search-results-button,
#locName[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

.loc-suggest-loading,
.loc-suggest-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
}

.loc-suggest-empty { color: #f59e0b; }


/* ===================================================================
   RESPONSIVE – MOBILE (< 480px)
   =================================================================== */

@media (max-width: 479px) {

  /* Header kompakt */
  .header {
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .header h1 {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .char-name-display {
    display: none;
  }

  /* Verlauf: Text ausblenden, nur Symbol */
  .btn-label-text {
    display: none;
  }

  /* Buttons enger */
  .header-actions {
    gap: 5px;
  }
  .btn-dark-mode,
  .btn-cloud-config,
  .btn-undo,
  .btn-history {
    min-height: 36px;
    padding: 6px 8px;
  }
  .btn-edit {
    padding: 6px 10px;
    font-size: 13px;
    min-height: 36px;
  }

  /* Tabs: nur Icon, kein Label */
  .tab-label {
    display: none;
  }
  .tab-btn {
    min-height: 46px;
    padding: 8px 4px;
    min-width: 40px;
  }
  .tab-icon {
    font-size: 22px;
  }

  /* Content weniger Padding */
  .content {
    padding: 12px 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Seitenüberschriften */
  .page-content h2 {
    font-size: 17px;
    margin-bottom: 12px;
  }

  /* Filter-Gruppen untereinander */
  .session-filter-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .session-filter-fields {
    width: 100%;
    flex-direction: column;
  }
  .session-filter-fields select {
    width: 100%;
  }

  /* Sort-Chips kompakter */
  .sort-chip {
    padding: 3px 8px;
    font-size: 11px;
  }
  .sort-row {
    gap: 4px;
  }

  /* Notes Subtabs kompakter */
  .notes-subtab-btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Buttons in Formularen kleiner */
  .btn-primary {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  /* Personen-Karten: einspaltiger Grid */
  .person-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Tag-Picker Dropdown scrollbar */
  .tag-picker-dropdown {
    max-height: 160px;
  }

  /* Finanz- und Karriere-Blöcke */
  .fin-page,
  .cr-page {
    padding: 8px;
    gap: 12px;
  }
  .fin-block,
  .cr-block {
    padding: 12px;
  }
}

/* ===================================================================
   RESPONSIVE – DESKTOP (≥ 1280px)
   Sidebar-Navigation links, Content rechts
   =================================================================== */

@media (min-width: 1280px) {

  /* Container wird zum 2-Spalten-Grid */
  .container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    height: 100dvh;
    max-width: 1800px;
    margin: 0 auto;
  }

  /* Header: volle Breite über beide Spalten */
  .header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Tab-Navigation: linke Sidebar */
  .tab-navigation {
    grid-column: 1;
    grid-row: 2;
    flex-direction: column;
    align-items: stretch;
    border-bottom: none;
    border-right: 2px solid #e0e0e0;
    background-color: #f8f9fa;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0;
    gap: 2px;
  }

  .tab-btn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: 52px;
    padding: 12px 20px;
    gap: 12px;
    border-bottom: none;
    border-right: 3px solid transparent;
    border-radius: 0;
    font-size: 14px;
    text-align: left;
    width: 100%;
  }

  .tab-btn:hover {
    background-color: #eef0ff;
    border-right-color: #c7d2fe;
  }

  .tab-btn.active {
    background-color: #eef2ff;
    border-right-color: #667eea;
    border-bottom-color: transparent;
  }

  .tab-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }

  .tab-label {
    font-size: 14px;
    font-weight: 600;
  }

  /* Content-Bereich */
  .content {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 32px 40px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  /* Maximale Inhaltsbreite für Lesbarkeit */
  .page-content {
    max-width: 960px;
  }

  /* Char-Name im Header etwas breiter */
  .char-name-display {
    max-width: 280px;
  }

  /* Form-Grid: mehr Spalten */
  .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  /* Notes Subtabs: etwas größer */
  .notes-subtab-btn {
    padding: 10px 20px;
  }

  /* Werdegang-Grid */
  .cr-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .cr-block-full { grid-column: 1 / -1; }

  /* Personen-Karten: mehr Spalten */
  .person-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* ===== KARTE-VOLLBILD ===== */
body.page-karte .container {
  height: 100vh;
  height: 100dvh;
}

body.page-karte .content {
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}

body.page-karte #karte-page.active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body.page-karte #karte-page h2 {
  display: none;
}

body.page-karte .map-search-bar {
  border-radius: 0;
}

body.page-karte .map-world-info,
body.page-karte .traveller-map-iframe,
body.page-karte #map-iframe-host {
  border-radius: 0;
}

/* ===================================================================
   DARK MODE – Desktop Sidebar
   =================================================================== */

@media (min-width: 1280px) {
  body.dark-mode .tab-navigation {
    background-color: #161929;
    border-right-color: #2c3050;
  }
  body.dark-mode .tab-btn:hover {
    background-color: #1d2035;
    border-right-color: #3a4480;
  }
  body.dark-mode .tab-btn.active {
    background-color: #1a1e35;
    border-right-color: #667eea;
  }
}

/* ===== UPDATE-BANNER ===== */
.update-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #667eea;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}

.update-reload-btn {
  background: white;
  color: #667eea;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}

/* ===================================================================
   DARK MODE
   Aktiviert durch: body.dark-mode
   Toggle-Button: #darkModeBtn (☀️ / 🌙)
   =================================================================== */

/* ── Dark Mode Button ── */
.btn-dark-mode,
.btn-cloud-config {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  min-height: 40px;
  min-width: 40px;
  transition: background 0.2s;
  line-height: 1;
}
.btn-dark-mode:hover,
.btn-cloud-config:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Basis ── */
body.dark-mode {
  background-color: #0d0f1a;
  color: #dde0f5;
}
body.dark-mode .container {
  background-color: #0d0f1a;
  color: #dde0f5;
}

/* ── Tab Navigation ── */
body.dark-mode .tab-navigation {
  background-color: #161929;
  border-bottom-color: #2c3050;
}
body.dark-mode .tab-btn {
  color: #8890b0;
}
body.dark-mode .tab-btn:hover {
  background-color: #1d2035;
  color: #c0c4e0;
}
body.dark-mode .tab-btn.active {
  color: #667eea;
  background-color: #1a1e35;
  border-bottom-color: #667eea;
}

/* ── Seitenüberschriften ── */
body.dark-mode .page-content h2 {
  color: #dde0f5;
  border-bottom-color: #667eea;
}
body.dark-mode .page-content h3 {
  color: #9095b8;
}

/* ── Formular-Elemente ── */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.18);
  background: #1d2035;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #4a5070;
}
body.dark-mode select option {
  background: #1d2035;
  color: #dde0f5;
}
body.dark-mode .form-group label {
  color: #9095b8;
}
body.dark-mode .form-group-ts {
  border-top-color: #2c3050;
}
body.dark-mode .form-group-ts label,
body.dark-mode .ts-display {
  color: #5a6080;
}

/* ── Tabellen ── */
body.dark-mode .table-container {
  border-color: #2c3050;
}
body.dark-mode th {
  background-color: #161929;
  color: #9095b8;
  border-bottom-color: #2c3050;
}
body.dark-mode td {
  border-bottom-color: #1d2035;
  color: #c8cce8;
}
body.dark-mode tr:hover td {
  background-color: #1a1e35;
}

/* ── Buttons ── */
body.dark-mode .btn-secondary {
  background-color: #252840;
  color: #c0c4e0;
}
body.dark-mode .btn-secondary:hover {
  background-color: #2e3250;
}

/* ── Notizen Sub-Tabs ── */
body.dark-mode .notes-subtabs {
  border-bottom-color: #2c3050;
}
body.dark-mode .notes-subtab-btn {
  color: #8890b0;
}
body.dark-mode .notes-subtab-btn:hover {
  color: #c0c4e0;
  background: #1d2035;
}
body.dark-mode .notes-subtab-btn.active {
  color: #667eea;
}
body.dark-mode .subtab-count {
  background: #252840;
  color: #9095b8;
}

/* ── Notizen Suche & Filter ── */
body.dark-mode .notes-search {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .notes-filters select,
body.dark-mode .session-filter-fields select,
body.dark-mode .pf-loc-select {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .session-filter-label {
  color: #6068a0;
}

/* ── Notizen Listen-Items ── */
body.dark-mode .notes-list-item {
  background: #161929;
  border-color: #2c3050;
  color: #dde0f5;
}
body.dark-mode .notes-list-item:hover {
  border-color: #667eea;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.15);
}

/* ── Sort Chips ── */
body.dark-mode .sort-chip {
  background: #1d2035;
  border-color: #2c3050;
  color: #8890b0;
}
body.dark-mode .sort-chip:hover {
  background: #252840;
  border-color: #a78bfa;
  color: #c0c0e8;
}
body.dark-mode .sort-chip.active {
  background: #7c5cbf;
  border-color: #7c5cbf;
  color: #fff;
}
body.dark-mode .sort-dir-btns {
  border-left-color: #2c3050;
}
body.dark-mode .sort-dir-btn {
  background: #1d2035;
  border-color: #2c3050;
  color: #8890b0;
}
body.dark-mode .sort-dir-btn:hover {
  background: #252840;
  border-color: #a78bfa;
  color: #c0c0e8;
}
body.dark-mode .sort-dir-btn.active {
  background: #7c5cbf;
  border-color: #7c5cbf;
  color: #fff;
}

/* ── Notiz-Detail / Session View ── */
body.dark-mode .session-view-header,
body.dark-mode .person-view-header,
body.dark-mode .location-view-header,
body.dark-mode .quest-view-header {
  border-bottom-color: #2c3050;
}
body.dark-mode .nli-title,
body.dark-mode .nli-row {
  color: #dde0f5;
}
body.dark-mode .nli-sub {
  color: #8890b0;
}
body.dark-mode .session-content-view {
  background: #161929;
  border-color: #2c3050;
  color: #c8cce8;
}
body.dark-mode .session-content-view p,
body.dark-mode .session-content-view li {
  color: #c8cce8;
}
body.dark-mode #sessionContent {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}

/* ── Session-Formular Datum & Tags ── */
body.dark-mode .tag-section {
  background: #0f1122;
  border-color: #2c3050;
}
body.dark-mode .tag-section h4    { color: #818cf8; }
body.dark-mode .tag-picker label  { color: #6068a0; }
body.dark-mode .event-chip        { background: #1e1108; color: #fb923c; }
body.dark-mode .tp-create-form    { border-bottom-color: #2c3050; }
body.dark-mode .detail-form-actions { border-top-color: #2c3050; }
body.dark-mode .trav-date-sub-label { color: #6068a0; }
body.dark-mode .trav-date-num-inp {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .trav-date-num-inp:focus { border-color: #667eea; }
body.dark-mode .trav-date-preview { color: #a78bfa; }

/* ── Tag Picker ── */
body.dark-mode .tag-picker-dropdown {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .tp-search,
body.dark-mode .tp-create-input {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .tp-option {
  color: #c8cce8;
}
body.dark-mode .tp-option:hover {
  background: #252840;
}
body.dark-mode .tp-create-btn {
  background: #1a2035;
  border-color: #3a4480;
  color: #8899ee;
}
body.dark-mode .tp-create-btn:hover {
  background: #202840;
}
body.dark-mode .tp-empty {
  color: #4a5070;
}
body.dark-mode .chip-add-btn {
  background: #1d2035;
  border-color: #2c3050;
  color: #8890b0;
}
body.dark-mode .chip-add-btn:hover {
  background: #252840;
  border-color: #667eea;
  color: #667eea;
}

/* ── Versionsverlauf Modal ── */
body.dark-mode .vh-panel {
  background: #161929;
  color: #dde0f5;
}
body.dark-mode .vh-header {
  border-bottom-color: #2c3050;
}
body.dark-mode .vh-title {
  color: #dde0f5;
}
body.dark-mode .vh-close {
  color: #8890b0;
}
body.dark-mode .vh-close:hover {
  background: #252840;
  color: #dde0f5;
}
body.dark-mode .vh-hint {
  color: #4a5070;
  border-bottom-color: #2c3050;
}
body.dark-mode .vh-item {
  background: #1d2035;
  border-color: #2c3050;
}
body.dark-mode .vh-item:hover {
  background: #252840;
  border-color: #667eea;
}
body.dark-mode .vh-time {
  color: #dde0f5;
}
body.dark-mode .vh-name {
  color: #8890b0;
}
body.dark-mode .vh-page {
  color: #8899ee;
  background: #202840;
}
body.dark-mode .vh-empty,
body.dark-mode .vh-loading {
  color: #4a5070;
}

/* ── Modal ── */
body.dark-mode .modal-box {
  background: #161929;
  color: #dde0f5;
}
body.dark-mode .modal-box h3 {
  color: #dde0f5;
}

/* ── Link-Chips (Session-Verknüpfungen) ── */
body.dark-mode .link-chip,
body.dark-mode .session-link,
body.dark-mode .tag-chip,
body.dark-mode .attachment-chip {
  background: #202840;
  color: #8899ee;
}
body.dark-mode a.attachment-link { color: #8899ee; }
body.dark-mode a.attachment-link:hover { background: #283258; }
body.dark-mode .attachments-empty-hint { color: #6070a0; }
body.dark-mode .link-session-row {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .link-session-name {
  color: #8890b0;
}

/* ── Attribute Boxes & DM-Felder ── */
body.dark-mode .attribute-box input {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .attribute-label {
  color: #8890b0;
}
body.dark-mode .attr-max-skill-hint { color: #8890b0; }
body.dark-mode .attr-dm {
  background: transparent;
  color: #7a82aa;
  border-color: transparent;
}
body.dark-mode .system-card {
  background: #161929;
  border-left-color: #667eea;
}
body.dark-mode .system-card p {
  color: #8890b0;
}

/* ── Skills ── */
body.dark-mode .skill-item label {
  color: #c8cce8;
}
body.dark-mode .skill-item--learned .skill-label {
  color: #dde0f5;
}
body.dark-mode .skill-item--unlearned .skill-label {
  color: #4a5070;
}
body.dark-mode .skill-level-input {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .view-mode .skill-level-input {
  background: #252840;
  border-color: #2c3050;
  color: #9095b8;
}

/* ── Ausrüstungs-Seite ── */
body.dark-mode .equip-subtabs {
  border-bottom-color: #2c3050;
}
body.dark-mode .equip-subtab {
  color: #8890b0;
}
body.dark-mode .equip-subtab.active {
  color: #667eea;
}
body.dark-mode .equip-table th {
  background: #161929;
  color: #8890b0;
  border-bottom-color: #2c3050;
}
body.dark-mode .equip-table td {
  border-bottom-color: #1d2035;
}
body.dark-mode .equip-table tr:hover td {
  background: #1a1e35;
}
body.dark-mode .equip-table input,
body.dark-mode .equip-table select {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}
body.dark-mode .eq-empty {
  color: #4a5070;
}

/* ── Personen-Karten ── */
body.dark-mode .pcard,
body.dark-mode .person-card {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .pcard-name,
body.dark-mode .person-name {
  color: #dde0f5;
}
body.dark-mode .pf-chip {
  background: #1d2035;
  border-color: #2c3050;
  color: #9095b8;
}
body.dark-mode .pf-chip:hover:not(.active) {
  border-color: #667eea;
  color: #667eea;
}

/* ── Notizen leere Hinweise ── */
body.dark-mode .notes-empty,
body.dark-mode .notes-hint {
  color: #4a5070;
}

/* ── Session Aktiv Badge ── */
body.dark-mode .session-active-badge {
  background: #1a2e1a;
  color: #4ade80;
  border-color: #14532d;
}

/* ── Personen-Bearbeitungsformular ── */
body.dark-mode .person-img-wrap {
  background: #1d2035;
  border-color: #2c3050;
}
body.dark-mode .detail-desc {
  background: #161929;
  color: #c8cce8;
}
body.dark-mode .detail-notes {
  background: #1a1608;
  border-left-color: #ffc107;
  color: #c8cce8;
}
body.dark-mode .detail-section {
  color: #c8cce8;
}
body.dark-mode .detail-section strong { color: #9095b8; }
body.dark-mode .person-role { color: #8890b0; }
body.dark-mode .person-race { color: #6068a0; }

/* ── Ort-Bearbeitungsformular ── */
body.dark-mode .loc-suggestions {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .loc-suggest-item strong { color: #dde0f5; }
body.dark-mode .loc-suggest-item span   { color: #6068a0; }
body.dark-mode .loc-map-badge {
  background: #0d2218;
  border-color: #166534;
  color: #4ade80;
}

/* ── Ort-Detailansicht (Leseansicht) ── */
body.dark-mode .loc-meta            { color: #8890b0; }
body.dark-mode .loc-meta code       { background: #252840; color: #c8cce8; }
body.dark-mode .loc-visited         { background: #0d2218; color: #4ade80; }
body.dark-mode .loc-uwp-block       { background: #0f1122; border-color: #2c2a50; }
body.dark-mode .loc-uwp-label       { color: #a78bfa; }
body.dark-mode .loc-uwp-code        { background: #1a1535; color: #c4b5fd; border-color: #3d2e6e; }
body.dark-mode .loc-uwp-key         { color: #6068a0; }
body.dark-mode .loc-uwp-val         { color: #dde0f5; }

/* ── Karten-Suche (Travellermap) ── */
body.dark-mode .map-search-list     { border-color: #2c3050; }
body.dark-mode .map-result-pick     { background: #161929; border-bottom-color: #2c3050; }
body.dark-mode .map-result-pick:hover { background: #1a1e35; }
body.dark-mode .map-result-pick strong { color: #dde0f5; }
body.dark-mode .map-result-pick span   { color: #6068a0; }
body.dark-mode .btn-map-show        { background: #0d2218; color: #4ade80; border-color: #166534; }
body.dark-mode .btn-map-search      { background: #1a1e35; color: #818cf8; border-color: #3a4480; }

/* ── Travellermap Suchliste (Orte-Subtab) ── */
body.dark-mode .loc-trav-input      { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .loc-trav-item       { background: #161929; }
body.dark-mode .loc-trav-item:hover { background: #1a1e35 !important; }
body.dark-mode .loc-trav-item-info strong { color: #dde0f5; }
body.dark-mode .loc-trav-item-info span   { color: #6068a0; }
body.dark-mode .loc-trav-action.add { background: #0d2218; color: #4ade80; border-color: #166534; }
body.dark-mode .loc-trav-action.add:hover { background: #0a1e14; }
body.dark-mode #locName[type="search"] {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}

/* ── Markdown-Rendering ── */
body.dark-mode .md-p,
body.dark-mode .md-ul,
body.dark-mode .md-ol {
  color: #c8cce8;
}
body.dark-mode .md-h1,
body.dark-mode .md-h2,
body.dark-mode .md-h3 {
  color: #dde0f5;
}
body.dark-mode .md-hr {
  border-color: #2c3050;
}
body.dark-mode .md-pre {
  background: #0d0f1a;
  border-color: #2c3050;
  color: #c8cce8;
}
body.dark-mode .md-code {
  background: #1d2035;
  color: #a78bfa;
}
body.dark-mode .md-table th {
  background: #161929;
  color: #9095b8;
  border-color: #2c3050;
}
body.dark-mode .md-table td {
  border-color: #2c3050;
  color: #c8cce8;
}

/* ── Kampf-Seite ── */
body.dark-mode .combat-block {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .combat-block-title {
  color: #9095b8;
}

/* Attribut-Karten */
body.dark-mode .combat-attr-green  { background: #0d2218; border-color: #28a745; }
body.dark-mode .combat-attr-yellow { background: #1e1a08; border-color: #ffc107; }
body.dark-mode .combat-attr-red    { background: #220d10; border-color: #dc3545; }
body.dark-mode .combat-attr-label  { color: #9095b8; }
body.dark-mode .combat-attr-dm     { color: #dde0f5; }
body.dark-mode .combat-attr-current { color: #eef0ff; }
body.dark-mode .combat-attr-sep    { color: #4a5070; }
body.dark-mode .combat-attr-max    { color: #8890b0; }
body.dark-mode .combat-attr-btn    { background: rgba(255,255,255,0.08); color: #dde0f5; }
body.dark-mode .combat-attr-btn:active { background: rgba(255,255,255,0.16); }

/* Initiative */
body.dark-mode .combat-initiative  { background: #161929; border-color: #2c3050; }
body.dark-mode .combat-init-val    { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .combat-init-btn    { background: #252840; color: #dde0f5; border-color: #2c3050; }

/* Aktive Ausrüstung / Fernkampf */
body.dark-mode .combat-equip-item  { background: #1d2035; border-color: #2c3050; }
body.dark-mode .combat-equip-name  { color: #dde0f5; }
body.dark-mode .combat-equip-tag   { background: #252840; color: #9095b8; }
body.dark-mode .combat-equip-stats { color: #c8cce8; }
body.dark-mode .combat-equip-empty { color: #4a5070; }
body.dark-mode .combat-recoil-warn { background: #1e1a08; color: #ffc107; border-color: #856404; }

/* Munition */
body.dark-mode .combat-ammo-count  { color: #dde0f5; }
body.dark-mode .combat-ammo-sep    { color: #4a5070; }
body.dark-mode .combat-ammo-mag    { color: #6068a0; }
body.dark-mode .combat-ammo-btn    { background: #1d2035; border-color: #2c3050; color: #dde0f5; }
body.dark-mode .combat-ammo-btn:active { background: #252840; }
body.dark-mode .combat-ammo-reload { background: #0d2218; border-color: #28a745; color: #4ade80; }

/* Schutz / Rüstungsblock */
body.dark-mode .combat-prot        { background: #12162e; border-color: #2c3050; }
body.dark-mode .combat-prot-value  { color: #818cf8; }
body.dark-mode .combat-prot-label  { color: #6366f1; }
body.dark-mode .combat-prot-empty  { color: #4a5070; }
body.dark-mode .combat-armor-row-name { color: #9095b8; }
body.dark-mode .combat-armor-row-prot { color: #dde0f5; }
body.dark-mode .combat-armor-rad   { background: #252840; color: #9095b8; }

/* Status-Banner */
body.dark-mode .combat-status-fit         { background: #0d2218; color: #4ade80; }
body.dark-mode .combat-status-wounded     { background: #1e1a08; color: #fbbf24; }
body.dark-mode .combat-status-unconscious { background: #220d10; color: #f87171; }

/* Initiative-Buttons (farbige Varianten) */
body.dark-mode .combat-init-react  { background: #1e1a08; border-color: #ffc107; color: #fbbf24; }
body.dark-mode .combat-init-roll   { background: #161d40; border-color: #667eea; color: #818cf8; }
body.dark-mode .combat-init-dex-info { color: #6068a0; }

/* Munition */
body.dark-mode .combat-ammo-btn    { background: #1d2035; border-color: #2c3050; color: #dde0f5; }
body.dark-mode .combat-ammo-reload { background: #0d2218; border-color: #28a745; color: #4ade80; }
body.dark-mode .combat-ammo-count  { color: #dde0f5; }
body.dark-mode .combat-ammo-sep    { color: #4a5070; }
body.dark-mode .combat-ammo-mag    { color: #6068a0; }

/* Rückstoß-Warnung */
body.dark-mode .combat-recoil-warn { background: #1e1a08; border-color: #ffc107; color: #fbbf24; }

/* Erste Hilfe */
body.dark-mode .combat-fa-btn      { background: #0d2218; border-color: #28a745; color: #4ade80; }
body.dark-mode .combat-fa-warn     { background: #1e1a08; border-color: #ffc107; color: #fbbf24; }
body.dark-mode .combat-fa-entry    { background: #1a1d2e; border-color: #2c3050; }
body.dark-mode .combat-fa-label    { color: #c8cce8; }
body.dark-mode .combat-fa-del      { color: #4a5070; }

/* Rüstung in Ausrüstungs-Tab */
body.dark-mode .item-equipped td,
body.dark-mode .armor-active td    { background: #141c35; }
body.dark-mode .armor-total td     { background: #12162e; border-top-color: #667eea !important; }
body.dark-mode .armor-total-names  { color: #818cf8; }
body.dark-mode .equip-toggle       { background: #1d2035; border-color: #2c3050; color: #4a5070; }
body.dark-mode .equip-toggle.on    { border-color: #667eea; color: #667eea; }

/* Traits Modal */
body.dark-mode .traits-modal       { background: #161929; color: #dde0f5; }
body.dark-mode .traits-modal h3    { color: #dde0f5; }
body.dark-mode .traits-label       { color: #9095b8; }

/* ── Finanzen-Seite ── */
body.dark-mode .finance-card,
body.dark-mode .finance-section {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .finance-label {
  color: #8890b0;
}
body.dark-mode .finance-value {
  color: #dde0f5;
}

/* ── Werdegang-Seite ── */
body.dark-mode .career-term {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .career-term-header {
  border-bottom-color: #2c3050;
  color: #dde0f5;
}
body.dark-mode .career-event {
  background: #1d2035;
  border-color: #2c3050;
  color: #c8cce8;
}

/* ── Charakter-Selektor Panel ── */
body.dark-mode .portrait-frame      { border-color: #2c3050; background: #1a1d2e; }
body.dark-mode .portrait-placeholder { color: #4a5070; border-color: #2c3050; }
body.dark-mode .portrait-hint        { color: #6068a0; }

body.dark-mode .char-selector-panel {
  background: #161929;
  border-color: #2c3050;
}
body.dark-mode .char-selector-select {
  background: #1d2035;
  color: #dde0f5;
  border-color: #2c3050;
}

/* ── Generische Cards / Panels ── */
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .info-box { color: #8890b0; }

/* ── Status-Badges ── */
body.dark-mode .rel-friendly   { background: #0d1e35; color: #60a5fa; }
body.dark-mode .rel-neutral    { background: #252840; color: #9095b8; }
body.dark-mode .rel-hostile    { background: #2d0d10; color: #f87171; }
body.dark-mode .status-dead    { background: #2d0d10; color: #f87171; }
body.dark-mode .status-unknown { background: #252840; color: #9095b8; }
body.dark-mode .loc-known      { background: #1e1a08; color: #fbbf24; }
body.dark-mode .loc-rumor      { background: #252840; color: #9095b8; }
body.dark-mode .qst-backlog    { background: #252840; color: #9095b8; }
body.dark-mode .qst-failed     { background: #2d0d10; color: #f87171; }
body.dark-mode .qst-completed  { background: #0d1e35; color: #60a5fa; }
body.dark-mode .person-link    { background: #0d2218; color: #4ade80; }
body.dark-mode .location-link  { background: #1e1a08; color: #fbbf24; }
body.dark-mode .quest-link     { background: #2d0d10; color: #f87171; }

/* ── Zurück-Button ── */
body.dark-mode .btn-back {
  background: #1d2035;
  color: #9095b8;
  border-color: #2c3050;
}
body.dark-mode .btn-back:hover { background: #252840; }

/* ── Ausrüstung – Kategorien & Details ── */
body.dark-mode .cat-equipment { background: #1e1535; color: #c4b5fd; }
body.dark-mode .cat-other     { background: #252840; color: #9095b8; }
body.dark-mode .traits-modal  { background: #161929; color: #dde0f5; }
body.dark-mode .traits-modal h3 { color: #dde0f5; }

/* ── Strahlungsdosis ── */
body.dark-mode .combat-rad         { background: #161929; border-color: #2c3050; }
body.dark-mode .combat-rad-input   { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .combat-rad-btn     { background: #252840; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .combat-rad-add     { background: #0d2218; border-color: #28a745; color: #4ade80; }
body.dark-mode .combat-rad-reset   { background: #1d2035; color: #9095b8; border-color: #2c3050; }
body.dark-mode .combat-rad-display { color: #dde0f5; }
body.dark-mode .rad-green          { background: #0d2218; border-color: #28a745; color: #4ade80; }
body.dark-mode .rad-yellow         { background: #1e1a08; border-color: #ffc107; color: #fbbf24; }
body.dark-mode .rad-orange         { background: #1e1108; border-color: #fd7e14; color: #fb923c; }
body.dark-mode .rad-red            { background: #2d0d10; border-color: #dc3545; color: #f87171; }

/* ── Weiterbildung / Training ── */
body.dark-mode .training-card {
  background: #161929;
  border-color: #2c3050;
  border-left-color: #667eea;
}
body.dark-mode .training-card--ready {
  border-left-color: #10b981;
  background: #0d1e18;
}
body.dark-mode .training-card-top   { color: #dde0f5; }
body.dark-mode .training-card-notes { background: #1d2035; border-color: #2c3050; color: #c8cce8; }
body.dark-mode .training-session-item { color: #888; }
body.dark-mode .training-session-item::before { color: #555; }
body.dark-mode .training-session-weeks { color: #aaa; }
body.dark-mode .training-session-range { color: #666; }
body.dark-mode .training-session-del { color: #555; }
body.dark-mode .training-session-del:hover { color: #fc8181; background: #2d1515; }
body.dark-mode .training-empty      { color: #4a5070; }
body.dark-mode .train-method-self   { background: #0d1e35; color: #60a5fa; }
body.dark-mode .train-method-teacher { background: #0d2218; color: #34d399; }
body.dark-mode .train-method-course  { background: #1e1a08; color: #fbbf24; }
body.dark-mode .train-method-small   { color: #4a5070; }
body.dark-mode .training-pm-btn {
  background: #1d2035;
  border-color: #2c3050;
  color: #dde0f5;
}
body.dark-mode .training-pm-btn:active { background: #252840; border-color: #667eea; }

/* ── Werdegang ── */
body.dark-mode .cr-block            { background: #161929; border-color: #2c3050; }
body.dark-mode .cr-block-title      { color: #9095b8; }
body.dark-mode .cr-term-rank        { color: #c8cce8; }
body.dark-mode .cr-empty,
body.dark-mode .cr-empty-inline     { color: #4a5070; }

/* Term-Detail */
body.dark-mode .cr-term-detail      { background: #1a1d2e; border-color: #2c3050; }
body.dark-mode .cr-detail-rank      { color: #dde0f5; }
body.dark-mode .cr-detail-muster    { background: #1e1a08; color: #fbbf24; border-color: #856404; }
body.dark-mode .cr-detail-edit      { background: none; border-color: #2c3050; color: #9095b8; }
body.dark-mode .cr-detail-del       { border-color: #5c1a22; color: #f87171; }
body.dark-mode .cr-detail-section strong { color: #6068a0; }
body.dark-mode .cr-detail-section p { color: #c8cce8; }

/* Ereignisse */
body.dark-mode .cr-event-row        { background: #161929; border-color: #2c3050; }
body.dark-mode .cr-event-header     { background: #1a1d2e; }
body.dark-mode .cr-event-row.expanded .cr-event-header { background: #1a1e35; }
body.dark-mode .cr-event-body       { color: #c8cce8; }
body.dark-mode .cr-event-title      { color: #dde0f5; }
body.dark-mode .cr-event-term       { background: #252840; color: #9095b8; }
body.dark-mode .cr-event-edit,
body.dark-mode .cr-event-del        { color: #4a5070; }
body.dark-mode .cr-expand-arrow     { color: #4a5070; }
body.dark-mode .cr-link-person      { background: #0d1e35; color: #60a5fa; }
body.dark-mode .cr-link-loc         { background: #0d2218; color: #4ade80; }
body.dark-mode .cr-skill-tag        { background: #252840; color: #c8cce8; }
body.dark-mode .cr-sort-btn         { background: #1d2035; border-color: #2c3050; color: #9095b8; }
body.dark-mode .cr-sort-btn.active  { background: #1a1e35; border-color: #667eea; color: #818cf8; }

/* Hintergrund & Persönlichkeit */
body.dark-mode .cr-bg-label         { color: #9095b8; }
body.dark-mode .cr-bg-field         { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .cr-bg-field:focus   { background: #1d2035; }
body.dark-mode .cr-secrets-reveal   { background: rgba(13,15,30,0.6); color: #818cf8; }
body.dark-mode .cr-quote-row        { background: #1a1d2e; border-color: #2c3050; color: #c8cce8; }
body.dark-mode .cr-quote-input      { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .cr-btn-add          { background: #1a1e35; border-color: #3a4480; color: #818cf8; }
body.dark-mode .cr-btn-secondary    { background: #1d2035; border-color: #2c3050; color: #9095b8; }

/* Favoriten */
body.dark-mode .cr-fav-row          { background: #161929; border-color: #2c3050; }
body.dark-mode .cr-fav-row:hover    { background: #1a1e35; }
body.dark-mode .cr-fav-name         { color: #dde0f5; }
body.dark-mode .cr-fav-role         { color: #6068a0; }
body.dark-mode .cr-fav-desc         { color: #8890b0; }

/* Modal */
body.dark-mode .cr-modal            { background: #161929; }
body.dark-mode .cr-modal h3         { color: #dde0f5; }
body.dark-mode .cr-modal-row label  { color: #9095b8; }
body.dark-mode .cr-modal-field      { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .cr-check-list       { background: #1d2035; border-color: #2c3050; color: #c8cce8; }
body.dark-mode .cr-btn-cancel       { background: #1d2035; border-color: #2c3050; color: #9095b8; }

/* ── Finanzen Modal & Schulden ── */
body.dark-mode .fin-modal           { background: #161929; color: #dde0f5; }
body.dark-mode .fin-modal h3        { color: #dde0f5; }
body.dark-mode .fin-modal-field     { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .fin-modal-field:focus { background: #1d2035; }
body.dark-mode .fin-modal-textarea  { background: #1d2035; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .fin-btn-cancel      { background: #1d2035; color: #9095b8; border-color: #2c3050; }
body.dark-mode .fin-btn-cancel:active { background: #252840; }
body.dark-mode .fin-btn-settle      { background: #1e1a08; color: #fbbf24; border-color: #856404; }
body.dark-mode .fin-debt-card       { background: #161929; border-color: #2c3050; }
body.dark-mode .fin-debt-name       { color: #dde0f5; }
body.dark-mode .fin-debt-creditor   { color: #8890b0; }
body.dark-mode .fin-debt-info       { color: #8890b0; }
body.dark-mode .fin-debt-notes      { border-top-color: #2c3050; }
body.dark-mode .fin-debt-pay        { background: #2d0d10; color: #f87171; border-color: #dc3545; }
body.dark-mode .fin-block           { background: #161929; border-color: #2c3050; }
body.dark-mode .fin-block-title     { color: #9095b8; }
body.dark-mode .fin-pos             { color: #4ade80; }
body.dark-mode .fin-neg             { color: #f87171; }
body.dark-mode .fin-summary-row     { border-bottom-color: #2c3050; color: #c8cce8; }
body.dark-mode .fin-pension-edit    { color: #4a5070; }

/* ── Transaktionen ── */
body.dark-mode .fin-filter-btn      { background: #1d2035; border-color: #2c3050; color: #9095b8; }
body.dark-mode .fin-filter-btn.active { background: #667eea; border-color: #667eea; color: #fff; }
body.dark-mode .fin-tx-row          { background: #1a1d2e; border-color: #2c3050; color: #c8cce8; }
body.dark-mode .fin-tx-date         { color: #6068a0; }
body.dark-mode .fin-tx-desc         { color: #c8cce8; }
body.dark-mode .fin-tx-del          { color: #4a5070; }
body.dark-mode .fin-badge           { border-color: #2c3050; }
body.dark-mode .cat-sold            { background: #0d1e35; color: #60a5fa; }
body.dark-mode .cat-ship            { background: #0a1e22; color: #67e8f9; }
body.dark-mode .cat-trade           { background: #0d2218; color: #4ade80; }

/* ── Wiederkehrende Posten ── */
body.dark-mode .fin-rec-row         { background: #1a1d2e; border-color: #2c3050; }
body.dark-mode .fin-rec-desc        { color: #dde0f5; }
body.dark-mode .fin-rec-interval    { color: #6068a0; }
body.dark-mode .fin-rec-del         { color: #4a5070; }
body.dark-mode .fin-switch-slider   { background: #2c3050; }
body.dark-mode .fin-btn-secondary   { background: #1a1e35; border-color: #3a4480; color: #818cf8; }

/* ── Schulden ── */
body.dark-mode .fin-progress-track  { background: #252840; }
body.dark-mode .fin-debt-done       { color: #4ade80; }

/* ── Abrechnungs-Modal ── */
body.dark-mode .fin-settle          { background: #161929; color: #dde0f5; }
body.dark-mode .fin-settle h3       { color: #dde0f5; }
body.dark-mode .fin-settle-item     { background: #1a1d2e; border-color: #2c3050; }
body.dark-mode .fin-settle-item:has(.fin-settle-cb:checked) { background: #1a1e35; border-color: #667eea; }
body.dark-mode .fin-settle-desc     { color: #c8cce8; }
body.dark-mode .fin-settle-interval { color: #6068a0; }
body.dark-mode .fin-settle-total    { background: #1d2035; border-color: #2c3050; color: #c8cce8; }

/* ── Markdown-Inhalte (Session-Content) ── */
body.dark-mode .md-content               { color: #c8cce8; }
body.dark-mode .md-content .md-h1,
body.dark-mode .md-content .md-h2,
body.dark-mode .md-content .md-h3       { color: #dde0f5; }
body.dark-mode .md-content .md-h1       { border-bottom-color: #2c3050; }
body.dark-mode .md-content .md-p        { color: #c8cce8; }
body.dark-mode .md-content .md-table th { background: #161929; color: #9095b8; }
body.dark-mode .md-content .md-table td { border-color: #2c3050; }
body.dark-mode .md-content .md-table tr:nth-child(even) td { background: #1a1d2e; }
body.dark-mode .md-content .md-pre      { background: #0d0f1a; border-color: #2c3050; color: #c8cce8; }
body.dark-mode .md-content .md-hr       { border-color: #2c3050; }

/* ── Orte – Autocomplete & Suggestions ── */
body.dark-mode .loc-suggest-item    { background: #161929; color: #dde0f5; border-color: #2c3050; }
body.dark-mode .loc-suggest-item:hover { background: #1d2035; }
body.dark-mode .loc-trav-action.saved { background: #1a1e35; color: #818cf8; border-color: #3a4480; }

/* ── Scrollbar (Webkit) ── */
body.dark-mode ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.dark-mode ::-webkit-scrollbar-track {
  background: #0d0f1a;
}
body.dark-mode ::-webkit-scrollbar-thumb {
  background: #2c3050;
  border-radius: 3px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #3a4070;
}

/* ===== PULL TO REFRESH ===== */

.ptr-indicator {
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #667eea;
  font-size: 0.82em;
  font-weight: 500;
  transition: height 0.15s ease;
  flex-shrink: 0;
}

.ptr-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #dde0f5;
  border-top-color: #667eea;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.ptr-indicator.ptr-ready    .ptr-spinner { transform: rotate(180deg); }
.ptr-indicator.ptr-loading  .ptr-spinner { animation: ptr-spin 0.7s linear infinite; }

@keyframes ptr-spin { to { transform: rotate(360deg); } }

body.dark-mode .ptr-indicator           { color: #818cf8; }
body.dark-mode .ptr-spinner             { border-color: #2c3050; border-top-color: #818cf8; }

/* ===== CLOUD SYNC ===== */

.sync-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sync-badge-row .sync-badge { margin-bottom: 0; }

.sync-config-btn {
  background: none;
  border: none;
  font-size: 1em;
  cursor: pointer;
  opacity: 0.5;
  padding: 4px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.sync-config-btn:hover { opacity: 1; }

.sync-activate-btn {
  font-size: 0.85em;
}
.sync-deactivate-btn {
  color: #ef4444;
  opacity: 0.4;
}
.sync-deactivate-btn:hover { opacity: 0.9; }

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82em;
  font-weight: 500;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.sync-badge--idle    { background: #eef0ff; color: #3a3fa0; border-color: #c5c8f0; }
.sync-badge--syncing { background: #fff8e1; color: #7a6000; border-color: #ffe082; }
.sync-badge--ok      { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.sync-badge--error   { background: #fdecea; color: #b71c1c; border-color: #ef9a9a; }

/* Neuer-Charakter-Modal */
.nc-panel { max-width: 420px; }

.nc-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
.nc-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.nc-choice-btn:hover        { border-color: #667eea; background: #f0f2ff; }
.nc-choice-btn--cloud:hover { border-color: #28a745; background: #f0fff4; }
.nc-choice-icon  { font-size: 2em; }
.nc-choice-label { font-weight: 600; font-size: 1em; }
.nc-choice-desc  { font-size: 0.78em; color: #666; text-align: center; }

.nc-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.nc-btn-row { justify-content: space-between; margin-top: 18px; }
.nc-test-result { font-size: 0.85em; }
.nc-test-ok    { color: #1b5e20; }
.nc-test-error { color: #b71c1c; }

.role-badge { font-size: 0.78em; background: #eef; color: #447; padding: 2px 7px; border-radius: 10px; margin-left: 4px; }

.cloud-char-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.cloud-char-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.cloud-char-item:hover    { background: #f0f2ff; border-color: #667eea; }
.cloud-char-item:disabled { opacity: 0.6; cursor: default; }
.cloud-char-name          { font-weight: 600; }
.cloud-char-status        { font-size: 0.82em; color: #666; }

/* Dark Mode – Cloud Sync */
body.dark-mode .cloud-char-item         { background: #1a1d2e; border-color: #2c3050; color: #dde0f5; }
body.dark-mode .cloud-char-item:hover   { background: #1e2448; border-color: #667eea; }
body.dark-mode .cloud-char-status       { color: #6068a0; }

body.dark-mode .sync-deactivate-btn  { color: #f87171; }
body.dark-mode .campaign-section      { border-top-color: #2c3050; }
body.dark-mode .campaign-section h3   { color: #9095b8; }
body.dark-mode .campaign-hint         { color: #6070a0; }
body.dark-mode .campaign-id-badge     { background: #1e2040; color: #818cf8; }
body.dark-mode .campaign-owner-badge  { background: #2a2818; color: #c8b560; }
body.dark-mode .role-badge            { background: #1e2040; color: #818cf8; }
body.dark-mode .campaign-member-id    { color: #9095b8; }
body.dark-mode .campaign-members-title{ color: #6070a0; }
body.dark-mode .btn-danger-sm         { border-color: #f87171; color: #f87171; }
body.dark-mode .btn-danger-sm:hover   { background: #2a1515; }
body.dark-mode .campaign-item         { background: #1d2035; border-color: #2c3050; }
body.dark-mode .campaign-item:hover   { background: #252840; }
body.dark-mode .campaign-item-meta    { color: #6070a0; }
body.dark-mode .campaign-modal-subtitle { color: #9095b8; }
body.dark-mode .campaign-modal-divider  { color: #3a405a; }
body.dark-mode .campaign-subtab-btn   { background: #1d2035; border-color: #2c3050; color: #9095b8; }
body.dark-mode .campaign-subtab-btn.active { background: #667eea; color: white; border-color: #667eea; }
body.dark-mode .campaign-tab-id       { color: #6070a0; }
body.dark-mode .camp-share-label      { color: #9095b8; }
body.dark-mode .camp-ext-section      { border-top-color: #2c3050; }
body.dark-mode .camp-ext-label        { color: #6070a0; }
body.dark-mode .camp-ext-entry        { background: #1a1d35; }
body.dark-mode .pcard-ext             { background: #1a1d35; }
body.dark-mode .sync-badge--idle    { background: #161d40; color: #818cf8; border-color: #2c3050; }
body.dark-mode .sync-badge--syncing { background: #1e1a08; color: #fbbf24; border-color: #4a3800; }
body.dark-mode .sync-badge--ok      { background: #0d2218; color: #4ade80; border-color: #1a4a30; }
body.dark-mode .sync-badge--error   { background: #220d10; color: #f87171; border-color: #4a1520; }

body.dark-mode .nc-choice-btn       { background: #1a1d2e; border-color: #2c3050; color: #dde0f5; }
body.dark-mode .nc-choice-btn:hover { border-color: #667eea; background: #1e2448; }
body.dark-mode .nc-choice-btn--cloud:hover { border-color: #28a745; background: #0d2218; }
body.dark-mode .nc-choice-desc      { color: #6068a0; }

/* ===== DARK MODE: UPDATE-BANNER ===== */
body.dark-mode .update-banner       { background: #3d4a7a; }
body.dark-mode .update-reload-btn   { background: #dde0f5; color: #1a1d2e; }

/* ===== SCHIFF-SEITE ===== */

.ship-page-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #667eea;
}
.ship-page-title h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.ship-name-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: #667eea;
  opacity: 0.85;
}

.ship-selector-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ship-selector-select {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  min-height: 44px;
}
.ship-selector-btns { display: flex; gap: 6px; }
.ship-sel-btn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  font-size: 18px;
  padding: 0 12px;
}
.ship-campaign-toggle {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.ship-campaign-toggle.on {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}

/* Sub-Tabs */
.ship-subtabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 2px solid #e8e8e8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ship-subtab {
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  min-height: 44px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}
.ship-subtab.active {
  color: #667eea;
  border-bottom-color: #667eea;
}

.ship-section { display: flex; flex-direction: column; gap: 14px; }
.ship-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
  margin: 8px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}
.ship-empty {
  color: #999;
  font-style: italic;
  margin: 8px 0;
}

/* Info Tab */
.ship-info-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ship-portrait-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ship-portrait {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.ship-portrait-placeholder {
  width: 120px;
  height: 90px;
  background: #f0f0f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  border: 1px dashed #ccc;
}
.ship-portrait-frame { position: relative; width: 120px; height: 90px; }
.ship-portrait-frame .ship-portrait,
.ship-portrait-frame .ship-portrait-placeholder { width: 100%; height: 100%; }
.ship-img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ship-img-nav:hover:not(:disabled) { background: rgba(0, 0, 0, 0.7); }
.ship-img-nav:disabled             { opacity: 0.25; cursor: default; }
.ship-img-prev { left: 4px; }
.ship-img-next { right: 4px; }
.ship-img-counter {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  pointer-events: none;
}
.ship-img-edit-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.ship-img-label { cursor: pointer; }
.ship-img-btn {
  display: inline-block;
  padding: 6px 10px;
  background: #667eea;
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.ship-img-del {
  font-size: 11px;
  padding: 4px 8px;
  background: none;
  border: 1px solid #e53e3e;
  color: #e53e3e;
  border-radius: 6px;
  cursor: pointer;
}
.ship-info-fields { flex: 1; min-width: 0; }
.ship-field-group {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}
.ship-field-lbl {
  font-size: 13px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}
.ship-input {
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  background: #fff;
}
.ship-drives-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 10px;
  align-items: center;
}
.ship-info-row {
  display: flex;
  gap: 8px;
  font-size: 14px;
}
.ship-info-lbl { font-weight: 600; color: #555; white-space: nowrap; }
.ship-info-val { color: #333; }
.ship-info-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
@media (max-width: 500px) { .ship-info-2col { grid-template-columns: 1fr; } }

.ship-notes {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}
.ship-notes-view {
  font-size: 14px;
  color: #444;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Status Tab */
.ship-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 500px) { .ship-status-grid { grid-template-columns: 1fr; } }
.ship-status-card {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px;
}
.ship-status-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.ship-status-edit-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 6px;
  align-items: center;
}
.ship-status-sub { font-size: 12px; color: #666; white-space: nowrap; }
.ship-status-inp { max-width: 70px; }

/* Track */
.ship-track-wrap { display: flex; flex-direction: column; gap: 6px; }
.ship-track-bar {
  height: 14px;
  background: #e0e0e0;
  border-radius: 7px;
  overflow: hidden;
}
.ship-track-fill {
  height: 100%;
  border-radius: 7px;
  transition: width 0.2s;
}
.ship-track-green  { background: #4caf50; }
.ship-track-yellow { background: #ff9800; }
.ship-track-red    { background: #f44336; }
.ship-track-blue   { background: #2196f3; }
.ship-track-nums {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 700;
}
.ship-track-sep  { color: #aaa; }
.ship-track-max  { color: #888; }
.ship-track-btns { display: flex; gap: 8px; }
.ship-track-btn {
  flex: 1;
  min-height: 40px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  font-weight: 700;
}
.ship-armor-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 0;
}
.ship-armor-val  { font-size: 28px; font-weight: 700; }
.ship-armor-base { font-size: 13px; color: #888; }

/* Kritische Treffer */
.ship-crits-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ship-crits-table {
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.ship-crits-table th {
  padding: 6px 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #555;
}
.ship-crit-sys-hdr { text-align: left !important; min-width: 90px; }
.ship-crits-table td { border: 1px solid #eee; }
.ship-crit-label {
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
}
.ship-crit-cell { padding: 4px 6px; text-align: center; }
.ship-crit-box {
  width: 36px;
  height: 36px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: transparent;
  transition: background 0.1s, border-color 0.1s;
}
.ship-crit-box.hit {
  background: #f44336;
  border-color: #d32f2f;
  color: white;
}
.ship-crits-hint {
  font-size: 12px;
  color: #999;
  font-style: italic;
  margin: 4px 0 0;
}
.ship-crit-note-cell { padding: 4px 6px; text-align: center; }
.ship-crit-note-btn.has-note {
  font-weight: 700;
}
.ship-crits-mini .ship-crit-label { padding: 4px 8px; font-size: 12px; }
.ship-crit-mini-cells { padding: 3px 6px; }
.ship-crits-mini .ship-crit-box { width: 28px; height: 28px; font-size: 11px; }

/* Bewaffnung */
.ship-add-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.ship-weapon-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ship-weapon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.ship-weapon-table th {
  padding: 8px;
  background: #f5f5f5;
  border-bottom: 2px solid #ddd;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}
.ship-weapon-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.ship-weapon-table input, .ship-weapon-table select {
  font-size: 13px;
  padding: 4px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  min-width: 60px;
  box-sizing: border-box;
}
.ship-empty-cell { color: #999; font-style: italic; padding: 12px !important; }
.sw-nm { font-weight: 600; }
.sw-traits-cell { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.ship-weapon-note-cell { text-align: center; }
.sw-details.has-note { font-weight: 700; }
.ship-ammo-ctrl { display: flex; align-items: center; gap: 4px; }
.ship-ammo-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.ship-ammo-disp { font-weight: 700; min-width: 24px; text-align: center; }
.ship-ammo-max  { font-size: 12px; color: #888; }

/* Crew & Rollen */
.ship-roles-hint { font-size: 12px; color: #888; margin: 0 0 8px; }
.ship-roles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.ship-role-btn {
  padding: 8px 14px;
  border: 2px solid #ddd;
  background: #f5f5f5;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  transition: all 0.15s;
}
.ship-role-btn.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
}
.ship-pos-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ship-pos-view-row {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.ship-pos-role { font-weight: 600; min-width: 100px; }
.ship-pos-name { color: #555; }
.ship-cost-display { font-size: 14px; color: #444; margin: 0 0 8px; }

/* ===== SCHIFFSKAMPF (Kampf-Tab) ===== */

.ship-combat-section {
  background: #f0f4ff;
  border: 2px solid #667eea;
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
}
.ship-combat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ship-combat-icon { font-size: 20px; }
.ship-combat-name { font-size: 16px; font-weight: 700; color: #2d3a8c; flex: 1; }
.ship-combat-status {
  display: flex;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}
.scstat-red    { color: #c62828; }
.scstat-yellow { color: #e65100; }
.ship-combat-roles { display: flex; flex-direction: column; gap: 10px; }
.ship-combat-role {
  background: white;
  border: 1px solid #c7d0f5;
  border-radius: 8px;
  padding: 10px 12px;
}
.ship-combat-role-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #667eea;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.ship-combat-lbl { font-size: 13px; font-weight: 600; color: #555; }
.ship-range-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; flex-wrap: wrap; }
.ship-range-select {
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  min-height: 36px;
}
.ship-combat-weapon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
  flex-wrap: wrap;
}
.scwr-name { font-weight: 600; font-size: 14px; flex: 1; }
.scwr-dmg  { font-size: 13px; color: #555; }
.scwr-no-ammo { color: #bbb; }
.ship-sensor-lock-btn {
  padding: 6px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: #f5f5f5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
}
.ship-sensor-lock-btn.active {
  background: #e8f5e9;
  border-color: #4caf50;
  color: #2e7d32;
}
.ship-dm-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.ship-dm-val {
  font-size: 18px;
  font-weight: 700;
  min-width: 32px;
  text-align: center;
}

/* ===== DARK MODE: SCHIFF ===== */
body.dark-mode .ship-page-title       { border-bottom-color: #4a4f8b; }
body.dark-mode .ship-name-subtitle    { color: #a0a8f0; }
body.dark-mode .ship-selector-select  { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-campaign-toggle  { background: #1e2140; border-color: #3a3f6b; color: #9095b8; }
body.dark-mode .ship-campaign-toggle.on { background: #1a3a1a; border-color: #4caf50; color: #81c784; }
body.dark-mode .ship-subtabs          { border-bottom-color: #2c3050; }
body.dark-mode .ship-subtab           { color: #8890b0; }
body.dark-mode .ship-subtab.active    { color: #a0a8f0; border-bottom-color: #a0a8f0; }
body.dark-mode .ship-section-title    { color: #8890b0; border-bottom-color: #2c3050; }
body.dark-mode .ship-status-card      { background: #1e2140; border-color: #2c3050; }
body.dark-mode .ship-status-label     { color: #6068a0; }
body.dark-mode .ship-status-sub       { color: #6068a0; }
body.dark-mode .ship-track-bar        { background: #2c3050; }
body.dark-mode .ship-track-btn        { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-armor-base       { color: #6068a0; }
body.dark-mode .ship-crits-table th  { background: #1e2140; border-color: #2c3050; color: #8890b0; }
body.dark-mode .ship-crits-table td  { border-color: #2c3050; }
body.dark-mode .ship-crit-label       { color: #9095b8; }
body.dark-mode .ship-crit-box         { background: #1e2140; border-color: #3a3f6b; }
body.dark-mode .ship-crit-box.hit     { background: #c62828; border-color: #b71c1c; }
body.dark-mode .ship-weapon-table th  { background: #1e2140; border-color: #2c3050; }
body.dark-mode .ship-weapon-table td  { border-color: #2c3050; }
body.dark-mode .ship-weapon-table input,
body.dark-mode .ship-weapon-table select { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-ammo-btn         { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-empty-cell       { color: #6068a0; }
body.dark-mode .ship-portrait-placeholder { background: #1e2140; border-color: #3a3f6b; }
body.dark-mode .ship-input            { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-notes            { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-info-lbl         { color: #8890b0; }
body.dark-mode .ship-info-val         { color: #dde; }
body.dark-mode .ship-info-row         { color: #dde; }
body.dark-mode .ship-role-btn         { background: #1e2140; border-color: #3a3f6b; color: #9095b8; }
body.dark-mode .ship-role-btn.active  { background: #4a52aa; border-color: #667eea; color: #fff; }
body.dark-mode .ship-pos-view-row     { border-bottom-color: #2c3050; }
body.dark-mode .ship-pos-role         { color: #dde; }
body.dark-mode .ship-pos-name         { color: #8890b0; }
body.dark-mode .ship-cost-display     { color: #9095b8; }
body.dark-mode .ship-combat-section   { background: #1a1f40; border-color: #4a52aa; }
body.dark-mode .ship-combat-name      { color: #a0a8f0; }
body.dark-mode .ship-combat-role      { background: #1e2140; border-color: #2c3050; }
body.dark-mode .ship-combat-role-title{ color: #a0a8f0; }
body.dark-mode .ship-dm-btn           { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-range-select     { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .ship-sensor-lock-btn  { background: #1e2140; border-color: #3a3f6b; color: #9095b8; }
body.dark-mode .ship-sensor-lock-btn.active { background: #1a3a1a; border-color: #4caf50; color: #81c784; }

/* ===== NOTES TABLE ===== */
.notes-table-wrap { overflow-x: auto; margin-top: 4px; }
.notes-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.nt-col-head {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid #ddd;
  font-weight: 600;
  white-space: nowrap;
  color: #666;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nt-sortable { cursor: pointer; user-select: none; }
.nt-sortable:hover { color: #2979ff; }
.nt-sort-active { color: #2979ff; }
.notes-table tbody tr.notes-list-item,
.notes-table tbody tr.location-list-item {
  display: table-row;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}
.notes-table tbody tr.notes-list-item:hover,
.notes-table tbody tr.location-list-item:hover { background: #f5f7ff; }
.notes-table tbody tr { border-bottom: 1px solid #eee; }
.notes-table td { padding: 8px 10px; vertical-align: middle; }
.nt-date-col { white-space: nowrap; color: #555; font-size: 0.85rem; }
.nt-created { color: #999; }
.nt-camp-col { width: 36px; text-align: center; }
.nt-status-col { white-space: nowrap; }
.nt-detail-col { color: #777; font-size: 0.85rem; max-width: 200px; }
.nt-detail-head { color: #666; }
.nt-empty { padding: 16px; color: #999; font-style: italic; }
.nli-title-inline { font-weight: 500; }
.camp-ext-row td { color: #888; font-style: italic; }
.camp-ext-row .nli-title-inline { font-weight: normal; }

body.dark-mode .nt-col-head { border-color: #444; color: #aaa; }
body.dark-mode .nt-sortable:hover { color: #82b1ff; }
body.dark-mode .nt-sort-active { color: #82b1ff; }
body.dark-mode .notes-table tbody tr.notes-list-item:hover,
body.dark-mode .notes-table tbody tr.location-list-item:hover { background: #1e2a3a; }
body.dark-mode .notes-table tbody tr { border-color: #333; }
body.dark-mode .nt-date-col { color: #bbb; }
body.dark-mode .nt-created { color: #666; }
body.dark-mode .nt-detail-col { color: #999; }
body.dark-mode .camp-ext-row td { color: #666; }

/* ===== DARK MODE: META-AGE-ROW ===== */
body.dark-mode .meta-age-field label { color: #aaa; }
body.dark-mode .meta-age-field input { background: #1e2140; border-color: #3a3f6b; color: #dde; }
body.dark-mode .meta-birthdate { color: #888; }

/* ===== SICHERHEIT: BEITRITTS-CODE & PASSWORT-ÄNDERN ===== */
.campaign-joincode {
  margin: 8px 0;
  font-size: 0.9rem;
  color: #444;
}
.campaign-joincode code {
  background: #eef0f5;
  border: 1px solid #ccd;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: all;
}
.cfg-pw-change {
  margin: 14px 0;
  padding: 10px 0;
  border-top: 1px solid #e0e0e8;
}
.cfg-pw-change summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ===== DARK MODE: SICHERHEIT ===== */
body.dark-mode .campaign-joincode { color: #bbc; }
body.dark-mode .campaign-joincode code {
  background: #1e2140;
  border-color: #3a3f6b;
  color: #dde;
}
body.dark-mode .cfg-pw-change { border-top-color: #3a3f6b; }