/* Login Screen */
.login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  background: var(--bg-primary);
}

.login-box {
  background: var(--bg-secondary);
  padding: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: 400px;
  text-align: center;
}

.login-logo {
  width: 48px;
  height: 48px;
  background: var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: white;
  margin: 0 auto 16px;
}

.login-box h1 {
  margin-bottom: 4px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.login-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

.login-box input {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-sans);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s;
}

.login-box input::placeholder {
  color: var(--text-muted);
}

.login-box input:focus {
  border-color: var(--accent);
}

.login-box button {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  margin-top: 4px;
  transition: background 0.15s;
}

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

/* Navbar — replaced by sidebar layout in dashboard.css */

/* Stat Cards */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 18px 20px;
  border-radius: 12px;
}

.stat-card h3 {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-card .number {
  font-size: 28px;
  font-weight: bold;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: -1px;
}

/* Status Badges */
.status-badge {
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
  margin-right: 5px;
}

/* Info Text */
.info-text {
  background: var(--blue-dim);
  border: 1px solid rgba(77, 171, 247, 0.3);
  border-radius: 4px;
  padding: 10px 15px;
  margin: 10px 0;
  color: var(--blue);
  font-size: 14px;
}

.info-text strong {
  color: var(--blue);
}

.status-online {
  background: #27ae60;
  color: white;
}

.status-offline {
  background: #95a5a6;
  color: white;
}

.status-banned {
  background: #e74c3c;
  color: white;
}

.status-ingame {
  background: #8e44ad;
  color: white;
}

.status-enabled {
  background: #27ae60;
  color: white;
}

.status-disabled {
  background: #95a5a6;
  color: white;
}

/* Buttons */
.actions button {
  padding: 6px 12px;
  margin-right: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.edit-btn {
  background: #3498db;
  color: white;
}

.ban-btn {
  background: #e74c3c;
  color: white;
}

.unban-btn {
  background: #27ae60;
  color: white;
}

.delete-btn {
  background: #95a5a6;
  color: white;
}

.enable-btn {
  background: #27ae60;
  color: white;
}

.disable-btn {
  background: #e67e22;
  color: white;
}

.download-btn {
  background: #9b59b6;
  color: white;
}

.preview-btn {
  background: #16a085;
  color: white;
}

.info-btn {
  background: #3498db;
  color: white;
}

.info-btn:hover {
  background: #2980b9;
}

/* Tileset Status Table */
.tileset-status-table {
  width: 100%;
  margin-top: 10px;
}

.tileset-status-table th,
.tileset-status-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.tileset-status-table th:first-child,
.tileset-status-table td:first-child {
  width: 30px;
  text-align: center;
}

.tileset-found td {
  color: #27ae60;
}

.tileset-missing td {
  color: #e74c3c;
  font-weight: bold;
}

/* Tileset status in map table */
.tileset-status-cell {
  text-align: center;
  font-size: 18px;
}

.tileset-status-cell .tileset-ok {
  color: #27ae60;
}

.tileset-status-cell .tileset-missing {
  color: #e74c3c;
}

.upload-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 20px;
}

.upload-btn:hover {
  background: #2980b9;
}

.btn-primary {
  background: #3498db;
  color: white;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #95a5a6;
  color: white;
}

.btn-secondary:hover {
  background: #7f8c8d;
}

.btn-danger {
  background: #e74c3c;
  color: white;
}

.btn-danger:hover {
  background: #c0392b;
}

/* File Input Styling */
.file-input-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.file-input-wrapper input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.file-input-label {
  display: block;
  padding: 10px;
  border: 2px dashed var(--border);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-tertiary);
}

.file-input-label:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.file-name {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Refresh Indicator */
.refresh-info {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 15px;
}

.refresh-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27ae60;
  margin-right: 5px;
  animation: pulse 2s infinite;
}

/* Search */
.search {
  margin-bottom: 20px;
}

.search input {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 300px;
}

/* Search Bar */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.search-bar input {
  flex: 1;
  max-width: 400px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.search-bar button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Item Icon */
.item-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg-tertiary);
}

.no-icon {
  font-size: 24px;
}

.icon-cell {
  width: 50px;
  text-align: center;
}

/* Type Badges */
.type-badge {
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  text-transform: capitalize;
}

.type-weapon {
  background: #e74c3c;
  color: white;
}
.type-armor {
  background: #3498db;
  color: white;
}
.type-potion {
  background: #9b59b6;
  color: white;
}
.type-consumable {
  background: #e67e22;
  color: white;
}
.type-key_item {
  background: #f39c12;
  color: white;
}
.type-accessory {
  background: #1abc9c;
  color: white;
}
.type-material {
  background: #7f8c8d;
  color: white;
}
.type-ingredient {
  background: #27ae60;
  color: white;
}
.type-gem {
  background: #8e44ad;
  color: white;
}

/* Items toolbar: create button + view toggle */
.items-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
}

.items-view-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.view-toggle-btn {
  padding: 6px 14px;
  font-size: 13px;
  border: none;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.view-toggle-btn:hover {
  background: var(--bg-hover);
}

.view-toggle-btn.active {
  background: var(--accent);
  color: white;
}

/* Item type summary bar */
.item-type-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  min-height: 20px;
}

.item-type-summary:empty {
  display: none;
}

.item-summary-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 4px;
}

.item-summary-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}

.item-summary-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Grouped view */
.item-group {
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.item-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-tertiary);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.item-group-header:hover {
  background: var(--bg-hover);
}

.item-group-toggle {
  font-size: 11px;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
}

.item-group-icon {
  font-size: 18px;
}

.item-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.item-group-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 1px 8px;
  border-radius: 10px;
  margin-left: auto;
}

.item-group-body {
  border-top: 1px solid var(--border);
}

.item-group-body table {
  margin: 0;
  border: none;
  border-radius: 0;
}

.item-group-body thead th {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  font-size: 12px;
  padding: 6px 8px;
}

/* Quest Type Badges */
.quest-type-main {
  background: #e74c3c;
  color: white;
}
.quest-type-side {
  background: #3498db;
  color: white;
}
.quest-type-daily {
  background: #27ae60;
  color: white;
}
.quest-type-repeatable {
  background: #9b59b6;
  color: white;
}

/* Rarity Badges */
.rarity-badge {
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  text-transform: capitalize;
}

.rarity-common {
  background: #95a5a6;
  color: white;
}
.rarity-uncommon {
  background: #27ae60;
  color: white;
}
.rarity-rare {
  background: #3498db;
  color: white;
}
.rarity-epic {
  background: #9b59b6;
  color: white;
}
.rarity-legendary {
  background: #f39c12;
  color: white;
}

/* Stats Cell */
.stats-cell .stat {
  display: inline-block;
  background: #ecf0f1;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin: 1px;
}

.no-stats,
.no-data {
  color: #95a5a6;
}

/* Rewards Cell */
.rewards-cell .reward {
  display: inline-block;
  margin-right: 5px;
  font-size: 12px;
}

.reward.xp {
  color: #9b59b6;
}
.reward.gold {
  color: #f39c12;
}
.reward.items {
  color: #3498db;
}

/* NPCs Cell */
.npcs-cell .npc {
  display: block;
  font-size: 12px;
}

.npc.giver {
  color: #3498db;
}
.npc.turnin {
  color: #27ae60;
}

/* Link Button */
.link-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.link-btn:hover {
  color: #2980b9;
}

/* Badge */
.badge {
  font-size: 10px;
  margin-left: 3px;
}

.badge.repeatable {
  color: #27ae60;
}
.badge.prereq {
  color: #e67e22;
}

/* Form Sections */
.form-section {
  margin: 20px 0;
  padding: 15px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.form-section h3 {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: var(--text-primary);
}

/* Form Row */
.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.form-row .form-group {
  flex: 1;
}

/* Checkbox Group */
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Objectives List */
.objectives-list {
  margin-bottom: 10px;
}

.objective-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.objective-row select {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 100px;
}

.objective-row input[type="text"] {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.objective-row input[type="number"] {
  width: 80px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.btn-remove {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
}

.btn-remove:hover {
  background: #c0392b;
}

/* Objectives View */
.objectives-view {
  margin: 20px 0;
}

.objective-item {
  padding: 10px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin-bottom: 8px;
}

.objective-item .obj-type {
  color: #3498db;
  font-weight: bold;
  text-transform: capitalize;
}

/* Icon Preview */
.icon-preview-container {
  width: 100px;
  height: 100px;
  border: 2px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.icon-preview-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Small Icon Preview for Create Modals */
.icon-preview-small {
  width: 64px;
  height: 64px;
  border: 2px dashed var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-tertiary);
  margin-top: 8px;
}

.icon-preview-small img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Tileset Preview */
.tileset-preview {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-tertiary);
}

/* Hero Class Badges */
.class-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.class-warrior {
  background: #e74c3c;
  color: white;
}
.class-mage {
  background: #9b59b6;
  color: white;
}
.class-ranger {
  background: #27ae60;
  color: white;
}
.class-rogue {
  background: #34495e;
  color: white;
}
.class-cleric {
  background: #3498db;
  color: white;
}

/* NPC Type Badges */
.npc-type-enemy {
  background: #e74c3c;
  color: white;
}
.npc-type-boss {
  background: #8e44ad;
  color: white;
}
.npc-type-merchant {
  background: #f39c12;
  color: white;
}
.npc-type-quest_giver {
  background: #3498db;
  color: white;
}
.npc-type-friendly {
  background: #27ae60;
  color: white;
}

/* Hero/NPC Sprites */
.hero-sprite,
.npc-sprite {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-tertiary);
}

/* Stats Cell */
.stats-cell {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: monospace;
}

/* Form Sections */
.form-section {
  margin-top: 15px;
  padding: 15px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}

.form-section h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.form-hint {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 5px 0;
}

/* Assets Browser */
.assets-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.stat-badge {
  background: var(--bg-hover);
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 14px;
}

.assets-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.assets-container {
  display: flex;
  gap: 20px;
  min-height: 400px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.assets-tree {
  flex: 1;
  background: var(--bg-tertiary);
  padding: 15px;
  overflow-y: auto;
  max-height: 500px;
  border-right: 1px solid var(--border);
}

.assets-preview {
  flex: 1;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-placeholder {
  text-align: center;
  color: var(--text-muted);
}

.preview-placeholder span {
  font-size: 48px;
}

.preview-content {
  width: 100%;
}

.preview-image {
  text-align: center;
  margin-bottom: 15px;
  background: var(--bg-tertiary);
  padding: 20px;
  border-radius: 8px;
}

.preview-image img {
  max-width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.preview-info h3 {
  margin: 0 0 10px 0;
  word-break: break-all;
}

.preview-info p {
  margin: 5px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.preview-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

/* Tree Styles */
.tree-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tree-list .tree-list {
  padding-left: 20px;
}

.tree-item {
  margin: 2px 0;
}

.tree-folder .tree-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.tree-folder .tree-item-header:hover {
  background: var(--bg-hover);
}

.folder-clickable {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.folder-name {
  font-weight: 500;
}

.folder-count {
  font-size: 11px;
  color: var(--text-muted);
}

.folder-empty {
  font-size: 11px;
  color: #aaa;
  font-style: italic;
}

.folder-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.2s;
  border-radius: 4px;
}

.folder-delete-btn:hover {
  opacity: 1;
  background: #fee;
}

.tree-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.tree-file:hover {
  background: #e0f0ff;
}

.file-name {
  flex: 1;
  word-break: break-all;
}

.file-size {
  font-size: 11px;
  color: var(--text-muted);
}

.empty-message,
.error-message {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

.error-message {
  color: #e74c3c;
}

/* Asset Picker Modal */
.asset-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.asset-picker-header h2 {
  margin: 0;
}

.asset-picker-header .close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 10px;
  color: var(--text-secondary);
}

.asset-picker-header .close-btn:hover {
  color: var(--text-primary);
}

.asset-picker-container {
  display: flex;
  gap: 15px;
  min-height: 350px;
  max-height: 450px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.asset-picker-tree {
  flex: 1;
  background: var(--bg-tertiary);
  padding: 15px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
}

.asset-picker-preview {
  flex: 1;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
}

.asset-picker-tree .tree-file.selected {
  background: #3498db;
  color: white;
}

.asset-picker-tree .tree-file.selected .file-icon {
  filter: brightness(10);
}

.asset-picker-tree .suggested-folder > .tree-item-header {
  background: #fff3cd;
  border-radius: 4px;
}

/* Asset Select Button in Forms */
.asset-select-group {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.asset-select-btn {
  background: #9b59b6;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.asset-select-btn:hover {
  background: #8e44ad;
}

.selected-asset-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex: 1;
}

.selected-asset-preview img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg-card);
}

.selected-asset-preview .asset-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
}

.selected-asset-preview .clear-asset {
  background: none;
  border: none;
  color: #e74c3c;
  cursor: pointer;
  font-size: 16px;
  padding: 0 5px;
}

.selected-asset-preview .clear-asset:hover {
  color: #c0392b;
}

.no-asset-selected {
  color: var(--text-muted);
  font-style: italic;
  padding: 10px;
}

/* Sprite Pack Selector */
.sprite-pack-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  min-width: 200px;
  background: var(--bg-card);
}

.sprite-pack-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #1a1a2e;
  border: 1px solid #333;
  border-radius: 4px;
  flex: 1;
}

.sprite-preview-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  image-rendering: pixelated;
}

.sprite-pack-preview .asset-name {
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
}

/* ============================================
   WORLD EDITOR STYLES
   ============================================ */

.world-actions {
  margin-bottom: 20px;
}

.world-editor-container {
  display: flex;
  gap: 20px;
  min-height: 500px;
}

.world-editor-sidebar {
  width: 250px;
  background: var(--bg-tertiary);
  border-radius: 8px;
  padding: 15px;
  overflow-y: auto;
  max-height: 600px;
}

.world-editor-sidebar h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text-primary);
}

.info-text-small {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

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

.map-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s;
}

.map-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.map-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.map-item .map-icon {
  font-size: 20px;
}

.map-item .map-name {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
}

.map-item .map-size {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 2px 6px;
  border-radius: 3px;
}

.world-editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.world-grid-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.grid-info {
  font-size: 14px;
  color: var(--text-secondary);
}

.world-grid-container {
  flex: 1;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 20px;
  overflow: auto;
}

.world-grid {
  display: grid;
  gap: 8px;
  min-width: fit-content;
}

.grid-cell {
  width: 150px;
  height: 100px;
  background: var(--bg-card);
  border: 2px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  position: relative;
}

.grid-cell.empty {
  background: var(--bg-tertiary);
}

.grid-cell.empty:hover {
  border-color: var(--accent);
  background: #e8f4fc;
}

.grid-cell.has-map {
  background: #d4edda;
  border: 2px solid #28a745;
}

.grid-cell.drag-over {
  border-color: var(--accent);
  background: #cce5ff;
  transform: scale(1.02);
}

.cell-coords {
  font-size: 12px;
  color: #aaa;
}

.cell-content {
  text-align: center;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cell-map-name {
  font-weight: 500;
  font-size: 13px;
  color: #155724;
  display: block;
}

.cell-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.cell-remove-btn {
  padding: 4px 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.8;
  transition:
    opacity 0.2s,
    background 0.2s;
}

.grid-cell:hover .cell-remove-btn,
.grid-cell:hover .cell-edit-btn {
  opacity: 1;
}

.cell-remove-btn:hover {
  background: #c82333;
}

/* Type badges for worlds */
.type-badge {
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.type-overworld {
  background: #d4edda;
  color: #155724;
}

.type-instance {
  background: #fff3cd;
  color: #856404;
}

.type-door {
  background: #cce5ff;
  color: #004085;
}

.type-cave {
  background: #d6d8db;
  color: #383d41;
}

.type-stairs {
  background: #f8d7da;
  color: #721c24;
}

.type-teleporter {
  background: #e2d5f1;
  color: #5a2d82;
}

.type-portal {
  background: #d1ecf1;
  color: #0c5460;
}

.type-gold {
  background: #fff3cd;
  color: #856404;
}

.type-item {
  background: #cce5ff;
  color: #004085;
}

.source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.source-npc {
  background: #f8d7da;
  color: #721c24;
}

.source-player {
  background: #d4edda;
  color: #155724;
}

/* Form sections for portal modal */
.form-section {
  background: var(--bg-tertiary);
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.form-section h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #495057;
}

.form-row {
  display: flex;
  gap: 15px;
}

.form-row .form-group {
  flex: 1;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.warning {
  color: #856404;
  background: #fff3cd;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.btn-danger {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

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

.modal-content-large {
  background: var(--bg-card);
  padding: 30px;
  border-radius: 8px;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

/* ============================================
   GAME SETTINGS PAGE STYLES
   ============================================ */

.maintenance-banner {
  background: rgba(255, 193, 7, 0.12);
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  color: #ffc107;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
}

.maintenance-banner.active {
  background: rgba(220, 53, 69, 0.12);
  border-color: #dc3545;
  color: #ff6b6b;
}

.maintenance-icon {
  font-size: 24px;
}

.maintenance-time {
  margin-left: auto;
  font-weight: normal;
  font-size: 14px;
  color: var(--text-secondary);
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.settings-header h2 {
  margin: 0;
}

.maintenance-controls {
  display: flex;
  gap: 10px;
}

.btn-lg {
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
}

.btn-success {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

.settings-info {
  background: rgba(56, 139, 255, 0.1);
  border: 1px solid rgba(56, 139, 255, 0.25);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 25px;
}

.settings-info p {
  margin: 0 0 10px 0;
}

.settings-info ul {
  margin: 0;
  padding-left: 20px;
}

.settings-info li {
  margin-bottom: 5px;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.settings-card h3 {
  margin: 0 0 5px 0;
  color: var(--text-primary);
}

.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.settings-card-header h3 {
  margin: 0;
}

.settings-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 15px 0;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.setting-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 15px;
}

.setting-item.has-pending {
  border-color: #ffc107;
  background: rgba(255, 193, 7, 0.08);
}

.setting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.setting-label {
  font-weight: bold;
  color: var(--text-primary);
}

.pending-badge {
  background: #ffc107;
  color: #856404;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}

.setting-controls {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.setting-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.setting-input:focus {
  outline: none;
  border-color: #4caf50;
}

.setting-select {
  min-width: 150px;
}

.setting-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
}

.meta-item {
  display: flex;
  gap: 5px;
}

.meta-item.pending {
  color: #ffc107;
}

.meta-item.default {
  color: #6c757d;
}

.setting-status {
  font-size: 12px;
  margin-top: 5px;
  min-height: 16px;
}

.setting-status.pending {
  color: #ffc107;
}

.setting-status.success {
  color: #28a745;
}

.setting-status.error {
  color: #dc3545;
}

.setting-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.setting-row textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  background: var(--bg-card);
  color: var(--text-primary);
}

.settings-actions {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-warning:hover {
  background: #e0a800;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

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

.btn-sm {
  padding: 5px 10px;
  font-size: 13px;
}

/* Notifications */
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  border-radius: 6px;
  background: #333;
  color: white;
  z-index: 10000;
  animation: slideIn 0.3s ease;
}

.notification-success {
  background: #28a745;
}

.notification-error {
  background: #dc3545;
}

.notification-info {
  background: #17a2b8;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Collapsible Settings Sections */
.collapsible-header {
  cursor: pointer;
  user-select: none;
}

.collapsible-header:hover {
  background: var(--bg-tertiary);
  border-radius: 4px;
  margin: -5px;
  padding: 5px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.collapse-icon {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
  width: 16px;
}

.collapsible-header.collapsed .collapse-icon {
  transform: rotate(0deg);
}

.settings-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: normal;
}

.collapsible-content {
  transition: all 0.3s ease;
  overflow: hidden;
  max-height: 2000px;
  opacity: 1;
}

.collapsible-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
}

.settings-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.collapsible-header.collapsed {
  margin-bottom: 0;
}

/* ============================================
   Asset Processor
   ============================================ */

.section-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin: -5px 0 20px 0;
}

.processor-layout {
  display: flex;
  gap: 24px;
  min-height: 400px;
}

.processor-controls {
  flex: 1;
  min-width: 0;
}

.processor-preview-panel {
  flex: 1;
  min-width: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.processor-preview-panel h3 {
  margin: 0 0 15px 0;
  color: var(--text-primary);
  font-size: 16px;
}

/* Dropzone */
.processor-dropzone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-tertiary);
}

.processor-dropzone:hover {
  border-color: #4caf50;
  background: #f0faf0;
}

.processor-dropzone.dragover {
  border-color: #4caf50;
  background: #e8f5e9;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.dropzone-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}

.dropzone-content p {
  margin: 4px 0;
  color: var(--text-secondary);
}

.dropzone-hint {
  font-size: 12px;
  color: var(--text-muted) !important;
}

.hidden-file-input {
  display: none;
}

/* File info row */
.processor-file-info {
  margin-top: 10px;
}

.file-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f0f9f0;
  border: 1px solid #c8e6c9;
  border-radius: 6px;
}

.file-info-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

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

.file-info-details strong {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-info-details span {
  font-size: 12px;
  color: var(--text-secondary);
}

.btn-icon {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-muted);
}

.btn-icon:hover {
  background: #ffebee;
  color: #e53935;
}

/* Folder picker */
.processor-folder-picker {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-card);
}

.folder-picker-header {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.folder-picker-selected {
  color: var(--text-muted);
}

.folder-picker-selected-active {
  color: var(--text-primary);
}

.folder-picker-tree {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
}

.folder-tree-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.folder-tree-list .folder-tree-list {
  padding-left: 20px;
}

.folder-tree-item {
  cursor: pointer;
}

.folder-tree-item.selected > .folder-tree-row,
.folder-tree-item.selected > .folder-tree-clickable {
  background: var(--blue-dim);
}

.folder-tree-row {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
}

.folder-tree-row:hover {
  background: var(--bg-hover);
}

.folder-tree-toggle {
  font-size: 10px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text-muted);
  user-select: none;
}

.folder-tree-toggle-spacer {
  width: 16px;
  flex-shrink: 0;
}

.folder-tree-clickable {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 3px 6px;
  border-radius: 4px;
}

.folder-tree-icon {
  font-size: 14px;
}

.folder-tree-name {
  font-size: 13px;
  color: var(--text-primary);
}

.loading-small {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Destination path */
.processor-dest-path {
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 40px;
}

.processor-dest-path.path-ready {
  background: #f3e5f5;
  border-color: #ce93d8;
  color: #6a1b9a;
}

.processor-dest-path code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.processor-dest-path small {
  color: var(--text-muted);
}

/* Processor buttons */
.processor-buttons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.processor-buttons button {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: bold;
}

/* Preview grid */
.processor-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  min-height: 200px;
}

.processor-preview-grid .preview-placeholder {
  width: 100%;
  padding: 40px 0;
}

.preview-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.preview-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-conic-gradient(
      var(--bg-hover) 0% 25%,
      var(--bg-tertiary) 0% 50%
    )
    50% / 16px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  overflow: hidden;
}

.preview-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.preview-card-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: center;
}

/* Processor status messages */
.processor-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
}

.processor-status.processing {
  background: #fff3e0;
  border: 1px solid #ffcc80;
  color: #e65100;
}

.processor-status.success {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #2e7d32;
}

.processor-status.error {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #c62828;
}

.processor-result-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  font-size: 13px;
}

.processor-result-list li {
  margin: 4px 0;
}

.processor-result-list code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* Responsive */
@media (max-width: 900px) {
  .processor-layout {
    flex-direction: column;
  }
}

/* File list (multi-file processor) */
.processor-file-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
  background: var(--bg-card);
}

.processor-file-list-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.file-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.file-list-row:last-child {
  border-bottom: none;
}

.file-list-row:hover {
  background: var(--bg-tertiary);
}

.file-list-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.file-list-thumb-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.file-list-name-input {
  flex: 1;
  min-width: 120px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  font-family: monospace;
}

.file-list-name-input:focus {
  border-color: #4caf50;
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.15);
}

.file-list-original {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.file-list-size {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
  min-width: 55px;
  text-align: right;
}

/* Progress panel (right side during upload) */
.processor-progress-panel {
  min-height: 200px;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.progress-row:last-child {
  border-bottom: none;
}

.progress-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.progress-name {
  font-weight: 600;
  color: var(--text-primary);
  min-width: 80px;
  font-family: monospace;
  font-size: 12px;
}

.progress-status {
  color: var(--text-muted);
  font-size: 12px;
}

.progress-status.progress-done {
  color: #2e7d32;
}

.progress-status.progress-error {
  color: #c62828;
}

/* Background check badges */
.bg-badge-wrapper {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.bg-badge {
  font-size: 14px;
  cursor: help;
}

.bg-badge-checking {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Mode tags in folder tree */
.folder-mode-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

.tag-items {
  background: #e8f5e9;
  color: #2e7d32;
}

.tag-portrait {
  background: var(--blue-dim);
  color: var(--blue);
}

/* Non-selectable folder rows (navigation only) */
.folder-not-selectable .folder-tree-clickable {
  color: var(--text-muted);
}

.folder-not-selectable .folder-tree-name {
  color: var(--text-muted);
}

/* Mode label in folder picker header */
.processor-mode-label {
  display: inline-block;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 10px;
  font-weight: 600;
}

.mode-items {
  background: #e8f5e9;
  color: #2e7d32;
}

.mode-portrait {
  background: var(--blue-dim);
  color: var(--blue);
}

/* ============================================
   Browser layout (unified tree style)
   ============================================ */

.browser-layout {
  display: flex;
  gap: 16px;
  min-height: 450px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
}

.browser-tree-panel {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  max-height: 500px;
  padding: 8px 0;
  border-right: 1px solid var(--border);
}

.browser-context-panel {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  max-height: 500px;
  padding: 16px;
  background: var(--bg-tertiary);
}

/* File items in browser tree */
.file-item .folder-tree-clickable {
  cursor: pointer;
}

.file-item .folder-tree-name {
  font-size: 12px;
}

.folder-tree-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.folder-tree-count.empty {
  color: #ccc;
}

.folder-tree-count.file-size {
  color: #aaa;
  margin-left: auto;
  padding-right: 8px;
}

/* Inline rename input */
.inline-rename-input {
  font-size: 13px;
  padding: 1px 4px;
  border: 1px solid #4caf50;
  border-radius: 3px;
  outline: none;
  background: var(--bg-card);
  color: var(--text-primary);
  min-width: 80px;
  max-width: 200px;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.file-item .inline-rename-input {
  font-size: 12px;
}

.inline-rename-input:focus {
  border-color: #388e3c;
  box-shadow: 0 0 0 2px rgba(56, 142, 60, 0.3);
}

.inline-rename-saving {
  opacity: 0.6;
  cursor: wait;
}

/* Browser actions bar */
.browser-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.browser-actions .btn-danger {
  margin-left: auto;
}

/* Context panel: folder upload */
.context-folder h3 {
  margin: 0 0 16px 0;
  font-size: 15px;
  color: var(--text-primary);
  word-break: break-all;
}

.context-upload-zone {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--bg-card);
}

.context-upload-zone:hover {
  border-color: #4caf50;
  background: #f0faf0;
}

.context-upload-zone.dragover {
  border-color: #4caf50;
  background: #e8f5e9;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.browser-upload-list {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-card);
}

.browser-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}

.browser-upload-row:last-child {
  border-bottom: none;
}

.browser-upload-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-upload-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* Context panel: file preview */
.context-file h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: var(--text-primary);
  word-break: break-all;
}

.context-file-preview {
  background: repeating-conic-gradient(
      var(--bg-hover) 0% 25%,
      var(--bg-tertiary) 0% 50%
    )
    50% / 16px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.context-file-preview img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  image-rendering: pixelated;
}

.context-file-preview.json-preview {
  background: var(--bg-tertiary);
  flex-direction: column;
}

.context-file-info {
  margin-top: 12px;
  font-size: 13px;
}

.context-file-info p {
  margin: 4px 0;
}

.context-file-info code {
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.context-file-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* Responsive */
@media (max-width: 900px) {
  .browser-layout {
    flex-direction: column;
  }
  .browser-tree-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 300px;
  }
}

/* ============================================
   Screen Background Settings
   ============================================ */

.background-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 16px 16px;
}

@media (max-width: 900px) {
  .background-settings-grid {
    grid-template-columns: 1fr;
  }
}

.background-setting-item {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.background-setting-item h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.background-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.background-select {
  width: 100%;
}

.background-preview {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #1a1310;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.background-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-preview-empty {
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.background-status {
  min-height: 18px;
  font-size: 12px;
  margin-top: 6px;
}

.background-status.pending {
  color: #f0ad4e;
}

.background-status.success {
  color: #5cb85c;
}

.background-status.error {
  color: #d9534f;
}

/* =============================================
   Sprite Processor — Direction Status
   ============================================= */

.sprite-direction-status {
  margin-bottom: 10px;
  padding: 10px;
  background: var(--bg-tertiary);
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

.direction-summary {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 4px 0;
}

.dir-summary-ok {
  color: #28a745;
}

.dir-summary-warn {
  color: #e67e22;
}

.direction-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.direction-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.direction-badge.dir-ok {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.direction-badge.dir-warn {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.direction-badge.dir-missing {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Sprite Processor — Transparency Warning Banner */

.sprite-transparency-warning {
  margin-bottom: 10px;
}

.transparency-warning-banner {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 6px;
  padding: 12px 16px;
  color: #664d03;
}

.transparency-warning-banner strong {
  font-size: 14px;
  display: block;
  margin-bottom: 6px;
}

.transparency-warning-banner p {
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.4;
}

.transparency-warning-banner p:last-child {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ffe08a;
}

/* ============================================
   REGION EDITOR — Visual Map Editor
   ============================================ */

.cell-edit-btn {
  padding: 4px 10px;
  background: #e67e22;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.8;
  transition:
    opacity 0.2s,
    background 0.2s;
}

.cell-edit-btn:hover {
  background: #d35400;
  opacity: 1;
}

/* Region editor — embedded in content area (no fixed overlay) */
.region-editor-overlay {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: 100%;
  background: #12121a;
  overflow: hidden;
}

/* Toolbar */
.region-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px;
  background: #1e1e2e;
  border-bottom: 1px solid #2a2a3e;
  flex-shrink: 0;
}

.re-toolbar-left,
.re-toolbar-center,
.re-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.re-toolbar-left {
  min-width: 200px;
}

.re-toolbar-right {
  min-width: 200px;
  justify-content: flex-end;
}

.re-toolbar-btn {
  padding: 5px 12px;
  background: #2a2a3e;
  color: #c8c8d8;
  border: 1px solid #3a3a4e;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}

.re-toolbar-btn:hover {
  background: #3a3a50;
  color: #fff;
}

.re-toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.re-toolbar-separator {
  width: 1px;
  height: 20px;
  background: #3a3a4e;
}

.re-toolbar-coords {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #8888aa;
  min-width: 120px;
}

.re-toolbar-map-info {
  font-size: 12px;
  color: #6a6a8a;
}

/* Body — 3-column layout */
.region-editor-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left palette */
.re-palette {
  width: 220px;
  min-width: 220px;
  background: #181824;
  border-right: 1px solid #2a2a3e;
  overflow-y: auto;
  flex-shrink: 0;
}

/* Canvas container */
.re-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #12121a;
}

.re-canvas-wrap canvas {
  display: block;
}

.re-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a6a8a;
  font-size: 14px;
  z-index: 5;
  background: #12121a;
}

/* Entity list panel (between canvas and inspector) */
.re-entity-list {
  width: 210px;
  min-width: 210px;
  background: #181824;
  border-left: 1px solid #2a2a3e;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.re-entity-list-search {
  padding: 8px;
  border-bottom: 1px solid #2a2a3e;
  flex-shrink: 0;
}

.re-entity-list-search input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #2a2a3e;
  border-radius: 4px;
  background: #12121a;
  color: #e0e0f0;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.re-entity-list-search input:focus {
  border-color: #4a6cf7;
}

.re-entity-list-sections {
  overflow-y: auto;
  flex: 1;
}

.re-entity-list-section {
  border-bottom: 1px solid #2a2a3e;
}

.re-entity-list-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #1e1e2e;
  cursor: pointer;
  font-size: 12px;
  color: #a0a0c0;
  user-select: none;
  border: none;
  width: 100%;
  text-align: left;
}

.re-entity-list-section-header:hover {
  background: #252538;
}

.re-entity-list-section-chevron {
  font-size: 10px;
  transition: transform 0.15s;
}

.re-entity-list-section.collapsed .re-entity-list-items {
  display: none;
}

.re-entity-list-section.collapsed .re-entity-list-section-chevron {
  transform: rotate(-90deg);
}

.re-entity-list-items {
  padding: 2px 0;
}

.re-entity-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #c0c0d8;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.re-entity-list-item:hover {
  background: #252538;
}

.re-entity-list-item.selected {
  background: #2a3a5e;
  color: #e0e0ff;
}

.re-entity-list-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.re-entity-list-item-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.re-entity-list-item-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.3;
}

.re-entity-list-item-coords {
  display: block;
  font-size: 10px;
  color: #6a6a8a;
  line-height: 1.2;
}

.re-entity-list-empty {
  padding: 20px 10px;
  text-align: center;
  color: #4a4a6a;
  font-size: 12px;
}

/* Right inspector */
.re-inspector {
  width: 280px;
  min-width: 280px;
  background: #181824;
  border-left: 1px solid #2a2a3e;
  overflow-y: auto;
  flex-shrink: 0;
}

/* Inspector empty state */
.re-inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #4a4a6a;
  gap: 6px;
  font-size: 13px;
}

.re-inspector-empty .re-inspector-icon {
  font-size: 28px;
  opacity: 0.5;
}

/* Layer toggle buttons */
.re-layer-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #2a2a3e;
  border: 1px solid #3a3a4e;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.15s;
  opacity: 0.5;
}

.re-layer-toggle.active {
  opacity: 1;
  color: #c8c8d8;
  border-color: #5a5a7e;
}

.re-layer-toggle:hover {
  background: #3a3a50;
}

.re-layer-icon {
  font-size: 14px;
}

.re-layer-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  min-width: 12px;
  text-align: center;
}

/* Inspector content area */
.re-inspector-content {
  padding: 12px;
}

/* Inspector header */
.re-insp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.re-insp-type-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.re-insp-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0f0;
  word-break: break-word;
}

.re-insp-disabled-badge {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  background: #555;
  color: #aaa;
  font-weight: 600;
}

/* Inspector fields */
.re-insp-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.re-insp-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.re-insp-field label {
  font-size: 11px;
  color: #8888aa;
  font-weight: 500;
}

.re-insp-field input,
.re-insp-field textarea,
.re-insp-field select {
  padding: 5px 8px;
  background: #1e1e2e;
  border: 1px solid #3a3a4e;
  border-radius: 4px;
  color: #d0d0e0;
  font-size: 12px;
  font-family: "DM Sans", sans-serif;
}

.re-insp-field input:focus,
.re-insp-field textarea:focus,
.re-insp-field select:focus {
  outline: none;
  border-color: #5a5a8e;
}

.re-insp-field input.readonly,
.re-insp-field textarea.readonly {
  opacity: 0.5;
  cursor: not-allowed;
}

.re-insp-field textarea {
  resize: vertical;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

/* Checkbox field */
.re-insp-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.re-insp-checkbox span {
  font-size: 12px;
  color: #c0c0d0;
}

/* Side-by-side fields */
.re-insp-row {
  display: flex;
  gap: 6px;
}

.re-insp-row .re-insp-field {
  flex: 1;
  min-width: 0;
}

/* Section label */
.re-insp-section-label {
  font-size: 11px;
  font-weight: 600;
  color: #6a6a8a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2a3e;
}

/* Inspector action buttons */
.re-insp-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #2a2a3e;
}

.re-insp-btn {
  padding: 7px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.15s;
}

.re-insp-save {
  background: #3498db;
  color: #fff;
}

.re-insp-save:hover {
  background: #2980b9;
}

.re-insp-toggle {
  background: #2a2a3e;
  color: #c8c8d8;
  border: 1px solid #3a3a4e;
}

.re-insp-toggle:hover {
  background: #3a3a50;
}

.re-insp-delete {
  background: #c0392b;
  color: #fff;
}

.re-insp-delete:hover {
  background: #a93226;
}

/* ============================================
   Entity Palette
   ============================================ */

.re-palette-search {
  padding: 8px;
  border-bottom: 1px solid #2a2a3e;
}

.re-palette-search input {
  width: 100%;
  padding: 6px 10px;
  background: #1e1e2e;
  border: 1px solid #3a3a4e;
  border-radius: 4px;
  color: #d0d0e0;
  font-size: 12px;
  box-sizing: border-box;
}

.re-palette-search input:focus {
  outline: none;
  border-color: #5a5a8e;
}

.re-palette-sections {
  overflow-y: auto;
  flex: 1;
}

.re-palette-section {
  border-bottom: 1px solid #2a2a3e;
}

.re-palette-section.collapsed .re-palette-list {
  display: none;
}

.re-palette-section.collapsed .re-palette-chevron {
  transform: rotate(-90deg);
}

.re-palette-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  color: #a0a0c0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.re-palette-section-header:hover {
  background: #22222e;
}

.re-palette-chevron {
  font-size: 10px;
  transition: transform 0.15s;
}

.re-palette-list {
  display: flex;
  flex-direction: column;
}

.re-palette-item {
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  background: none;
  border: none;
  color: #c0c0d0;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}

.re-palette-item:hover {
  background: #22222e;
  border-left-color: #5a5a8e;
}

.re-palette-item-name {
  font-weight: 500;
}

.re-palette-item-sub {
  font-size: 10px;
  color: #6a6a8a;
  margin-top: 1px;
}

.re-palette-create-btn {
  color: #3498db;
  font-weight: 600;
  border-left-color: transparent;
}

.re-palette-create-btn:hover {
  border-left-color: #3498db;
}

.re-palette-empty {
  padding: 8px 12px;
  font-size: 11px;
  color: #4a4a6a;
}

/* ============================================
   Stack Picker Popup (appended to body)
   ============================================ */

.re-stack-picker {
  display: none;
  position: fixed;
  z-index: 999999;
  min-width: 200px;
  max-width: 280px;
  background: #1e1e38;
  border: 1px solid #3a3a5c;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.re-stack-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #8a8aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2a2a4c;
  background: #16162e;
}

.re-stack-picker-close {
  background: none;
  border: none;
  color: #8a8aaa;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}

.re-stack-picker-close:hover {
  color: #fff;
}

.re-stack-picker-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}

.re-stack-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  color: #ccc;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}

.re-stack-picker-item:hover {
  background: #2a2a4c;
  color: #fff;
  border-left-color: #3498db;
}

.re-stack-picker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.re-stack-picker-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.re-stack-picker-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   Diagnostics — DB Latency Probe
   ============================================ */
.diag-probe-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.diag-status {
  font-size: 13px;
  color: var(--text-muted, #888);
}

.diag-results {
  margin-top: 8px;
}

.diag-table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}

.diag-table th,
.diag-table td {
  padding: 8px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border, #2a2a2a);
}

.diag-table th {
  font-weight: 600;
  color: var(--text-muted, #888);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.diag-good {
  color: #4ade80;
}
.diag-warn {
  color: #facc15;
}
.diag-bad {
  color: #f87171;
}
.diag-time {
  color: var(--text-muted, #888);
  font-size: 12px;
}

.section-desc {
  margin: 4px 0 20px;
  font-size: 13px;
  color: var(--text-muted, #888);
}

/* Sound Config */
.sound-event-id {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text-muted, #888);
}
.sound-event-label {
  font-size: 13px;
  font-weight: 500;
}
.sound-url-input {
  width: 100%;
  min-width: 280px;
}
.sound-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sound-volume-row input[type="range"] {
  flex: 1;
  min-width: 80px;
}
.sound-volume-label {
  font-size: 12px;
  min-width: 36px;
  text-align: right;
}
.sound-config-status {
  min-height: 24px;
  font-size: 13px;
  margin-bottom: 12px;
  transition: opacity 0.3s;
}
.sound-config-ok {
  color: var(--success, #4caf50);
}
.sound-config-error {
  color: var(--danger, #e53935);
}

.sound-select {
  width: 100%;
  min-width: 220px;
}

.sound-used-by {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 11px;
  color: var(--text-secondary, #999);
  list-style: disc;
  min-width: 180px;
  max-width: 260px;
}

.sound-used-by li {
  margin-bottom: 2px;
  line-height: 1.4;
}

.sound-used-by-empty {
  color: var(--text-secondary, #999);
  font-size: 11px;
}

/* ── Template Tab Bar ── */
.tpl-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border, #2a2e3f);
  padding-bottom: 0;
}
.tpl-tab-btn {
  padding: 8px 18px;
  border: 1px solid var(--border, #2a2e3f);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--bg-secondary, #161922);
  color: var(--text-secondary, #999);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: -2px;
}
.tpl-tab-btn:hover {
  background: var(--accent-glow, rgba(108, 92, 231, 0.15));
  color: var(--text-primary, #e8eaf0);
}
.tpl-tab-btn.active {
  background: var(--accent, #6c5ce7);
  color: #fff;
  border-color: var(--accent, #6c5ce7);
}

/* ── Effect Builder ── */
.eb-single {
  margin-top: 4px;
}
.eb-fields {
  margin-top: 8px;
}
.eb-fields .form-row {
  gap: 8px;
}
.eb-list {
  margin-top: 4px;
}
.eb-feature-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #2a2e3f);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
}
.eb-feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.eb-feature-header strong {
  color: var(--accent, #6c5ce7);
}
.eb-remove-btn {
  padding: 2px 8px;
  font-size: 11px;
}
.eb-add-btn {
  margin-top: 4px;
  font-size: 12px;
}

/* ── List Editor (personality suggestions) ── */
.list-editor .tag-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.list-editor .tag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border, #2a2e3f);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
}
.list-editor .tag-item button {
  background: none;
  border: none;
  color: var(--text-secondary, #999);
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 10px;
  flex-shrink: 0;
}
.list-editor .tag-item button:hover {
  color: #e74c3c;
}
.list-editor .list-editor-add {
  display: flex;
  gap: 6px;
}
.list-editor .list-editor-add input {
  flex: 1;
}