:root {
  --bg-dark: #0b1220;
  --bg-panel: #111c2e;
  --bg-card: #17263b;
  --bg-card-hover: #20344d;
  --bg-input: #0e192a;
  --border: #293b52;
  --border-focus: #2dd4bf;
  --border-accent: rgba(129, 140, 248, 0.45);
  --text: #e8eef7;
  --text-muted: #a8b5c8;
  --text-dim: #7b8ba3;
  --primary: #2dd4bf;
  --primary-hover: #14b8a6;
  --primary-dim: rgba(45, 212, 191, 0.13);
  --accent: #a5b4fc;
  --accent-dim: rgba(165, 180, 252, 0.14);
  --danger: #f87171;
  --success: #34d399;
  --purple: #c4b5fd;
  --font-title: 'Manrope', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow: 0 12px 32px -10px rgba(2, 8, 23, 0.5);
}

[data-theme="day"] {
  color-scheme: light;
  --bg-dark: #f4f7fb;
  --bg-panel: #ffffff;
  --bg-card: #f8fafc;
  --bg-card-hover: #edf3f8;
  --bg-input: #ffffff;
  --border: #d8e1eb;
  --border-focus: #0f9f91;
  --border-accent: rgba(79, 70, 229, 0.35);
  --text: #182536;
  --text-muted: #526579;
  --text-dim: #718198;
  --primary: #0f9f91;
  --primary-hover: #0b8278;
  --primary-dim: rgba(15, 159, 145, 0.1);
  --accent: #4f46e5;
  --accent-dim: rgba(79, 70, 229, 0.1);
  --danger: #dc4c5c;
  --success: #168765;
  --purple: #7656c8;
  --shadow: 0 12px 32px -12px rgba(31, 53, 78, 0.2);
}

[data-theme="day"] .app-header { background: rgba(255, 255, 255, 0.94); }
[data-theme="day"] .brand-text h1,
[data-theme="day"] .view-title-group h2,
[data-theme="day"] .search-result-name { color: #172033; }
[data-theme="day"] .btn-primary,
[data-theme="day"] .btn-accent { color: #fff; }
body { transition: background-color 0.2s ease, color 0.2s ease; }
body[data-theme="day"] .stat-card,
body[data-theme="day"] .wiki-portal-header { background: linear-gradient(145deg, #fff, #f1f6fa); }
body[data-theme="day"] .entity-card-banner,
body[data-theme="day"] .profile-banner { background: linear-gradient(135deg, #dce8f2, #c8d8e8); }
body[data-theme="day"] .character-profile-visual .wiki-infobox-img { background: transparent !important; }
body[data-theme="day"] .entity-avatar,
body[data-theme="day"] .profile-avatar-wrap,
body[data-theme="day"] .wiki-infobox-img,
body[data-theme="day"] #modalImagePreview { background: #e8eff5 !important; }
body[data-theme="day"] .entity-card-actions,
body[data-theme="day"] .modal-footer { background: #f1f5f9; }
body[data-theme="day"] .cal-cell.empty { background: #e8eef4; }
body[data-theme="day"] .cal-event-chip,
body[data-theme="day"] .cal-event-chip.disaster,
body[data-theme="day"] .cal-event-chip.milestone,
body[data-theme="day"] .cal-event-chip.crisis,
body[data-theme="day"] .cal-event-chip.battle { color: #26364a; }
body[data-theme="day"] .wiki-infobox-table td,
body[data-theme="day"] .profile-info-val,
body[data-theme="day"] .entity-chip-sm,
body[data-theme="day"] .filter-input,
body[data-theme="day"] .form-control { color: var(--text); }
body[data-theme="day"] .modal-backdrop { background: rgba(15, 23, 42, 0.42); }
body[data-theme="day"] .entity-card-title,
body[data-theme="day"] .stat-val,
body[data-theme="day"] .cal-current-title,
body[data-theme="day"] .wiki-portal-header h2,
body[data-theme="day"] .wiki-title-group h1,
body[data-theme="day"] .modal-header h3,
body[data-theme="day"] .profile-name-group h3,
body[data-theme="day"] .view-title-group h2 { color: var(--text); }
body[data-theme="day"] [style*="color:#fff"],
body[data-theme="day"] [style*="color: #fff"] { color: var(--text) !important; }
body[data-theme="day"] .card[style*="linear-gradient"] { background: linear-gradient(145deg, #fff, #f1f6fa) !important; }
body[data-theme="day"] [style*="rgba(13, 21, 36"],
body[data-theme="day"] [style*="#09101c"] { background-color: var(--bg-card) !important; }

/* Enhanced Day Mode navigation and interface contrast */
[data-theme="day"] .app-nav {
  background: #eef3f8;
  border: 1px solid #d0dce8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
[data-theme="day"] .nav-btn {
  color: #475569;
}
[data-theme="day"] .nav-btn:hover {
  color: #0f9f91;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
[data-theme="day"] .nav-btn.active {
  color: #0f9f91;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(15, 159, 145, 0.16);
  font-weight: 700;
  border: 1px solid rgba(15, 159, 145, 0.25);
}

[data-theme="day"] .sub-tabs {
  background: #eef3f8;
  border-color: #d0dce8;
}
[data-theme="day"] .sub-tab-btn {
  color: #475569;
}
[data-theme="day"] .sub-tab-btn:hover {
  color: #0f9f91;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
[data-theme="day"] .sub-tab-btn.active {
  color: #0f9f91;
  background: #ffffff;
  border-color: rgba(15, 159, 145, 0.4);
  box-shadow: 0 1px 4px rgba(15, 159, 145, 0.15);
  font-weight: 700;
}

[data-theme="day"] .quick-create-menu {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
}
[data-theme="day"] .quick-create-menu button {
  color: #1e293b;
}
[data-theme="day"] .quick-create-menu button:hover {
  background: rgba(15, 159, 145, 0.1);
  color: #0f9f91;
}

[data-theme="day"] .search-results-dropdown {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
}
[data-theme="day"] .search-result-item {
  border-bottom-color: #e2e8f0;
}
[data-theme="day"] .search-result-item:hover {
  background: #f1f5f9;
}
[data-theme="day"] .search-result-name {
  color: #0f172a !important;
}

[data-theme="day"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.98);
  border-top-color: #d0dce8;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}
[data-theme="day"] .mob-nav-btn {
  color: #64748b;
}
[data-theme="day"] .mob-nav-btn:hover {
  color: #0f9f91;
  background: #f1f5f9;
}
[data-theme="day"] .mob-nav-btn.active {
  color: #0f9f91;
  font-weight: 700;
}

[data-theme="day"] .wiki-toc-link {
  color: #475569;
}
[data-theme="day"] .wiki-toc-link:hover {
  color: #0f9f91;
}

[data-theme="day"] .entity-link {
  color: #0f9f91;
  text-decoration-color: rgba(15, 159, 145, 0.35);
}
[data-theme="day"] .entity-link:hover {
  color: #0b8278;
  text-decoration-color: #0b8278;
}

[data-theme="day"] .modal-close-btn:hover {
  color: #0f172a;
  background: #e2e8f0;
}

[data-theme="day"] .btn-outline:hover {
  color: #0f9f91;
  background-color: #ffffff;
  border-color: #0f9f91;
}

[data-theme="day"] .character-lineup-caption {
  color: #334155;
}

[data-theme="day"] .character-lineup-item.active .character-lineup-caption {
  color: #0f9f91;
  font-weight: 700;
}

[data-theme="day"] .character-lineup-menu-toggle,
[data-theme="day"] .character-lineup-nav button {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f9f91;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="day"] .character-lineup-menu-popup {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
}

[data-theme="day"] .character-lineup-menu-popup label {
  color: #1e293b;
}

[data-theme="day"] .character-lineup-menu-popup select,
[data-theme="day"] .character-lineup-menu-popup input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="day"] .wiki-category-card:hover,
[data-theme="day"] .wiki-category-card.active {
  border-color: #0f9f91;
  background: #e6f7f5;
  color: #0f172a;
}

/* ========================================================
   DEDICATED PROFILE PAGE STYLES
   ======================================================== */
.profile-page-view {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.profile-page-header-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
}

.profile-page-banner {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  overflow: hidden;
}

[data-theme="day"] .profile-page-banner {
  background: linear-gradient(135deg, #dce8f2, #c8d8e8);
}

.profile-page-hero-content {
  padding: 1.5rem 2rem;
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  position: relative;
  margin-top: -60px;
  flex-wrap: wrap;
}

.profile-page-avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-md);
  border: 4px solid var(--bg-panel);
  background: var(--bg-input);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  flex-shrink: 0;
  z-index: 2;
}

.profile-page-title-group {
  flex: 1;
  min-width: 250px;
  z-index: 2;
}

.profile-page-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  z-index: 2;
}

.profile-page-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  background: var(--bg-panel);
  overflow-x: auto;
}

.profile-page-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.profile-page-tab-btn:hover {
  color: var(--text);
}

[data-theme="day"] .profile-page-tab-btn:hover {
  color: var(--primary);
}

.profile-page-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.profile-page-body {
  padding: 1.5rem;
}

/* ========================================================
   DASHBOARD DATABASE INVENTORY & TRACKING
   ======================================================== */
.db-inventory-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}

.db-inventory-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.65rem;
  cursor: pointer;
}

.db-inventory-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.db-inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.db-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--bg-input);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.db-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.3s ease;
}

.faction-bar-container {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.75rem 0;
  border: 1px solid var(--border);
}

.faction-bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.wiki-edit-mode-banner {
  background: var(--primary-dim);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
body {
  background-color: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 75px;
}

header.app-header {
  background: rgba(13, 21, 36, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--border);
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  text-decoration: none;
}

.brand-title-row { display:flex; align-items:center; gap:.42rem; white-space:nowrap; }
.brand-title-row h1 { font-size:.9rem; letter-spacing:.015em; }
.brand-title-row h2 { margin:0; font-family:var(--font-title); font-size:.9rem; color:#fff; line-height:1.1; }
.brand-beta { display:inline-flex; align-items:center; padding:.08rem .32rem; border:1px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius:999px; background:var(--accent-dim); color:var(--accent); font:600 .55rem/1.35 var(--font-mono); letter-spacing:.06em; }
.brand-text h1 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.1;
}

.brand-text p {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-input);
  padding: 0.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.nav-btn:hover {
  color: var(--text);
  background: var(--bg-card-hover);
}

.nav-btn.active {
  color: var(--primary);
  background: var(--primary-dim);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary { background-color: var(--primary); color: #070b12; }
.btn-primary:hover { background-color: var(--primary-hover); box-shadow: 0 0 15px rgba(45, 212, 191, 0.4); }
.btn-outline { background-color: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background-color: var(--bg-card); border-color: var(--primary); }
.btn-accent { background-color: var(--accent); color: #070b12; }
.btn-accent:hover { background-color: #4338ca; box-shadow: 0 0 15px rgba(165, 180, 252, 0.4); }
.btn-danger { background-color: var(--danger); color: #fff; }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.75rem; }

.quick-search { position: relative; width: 40px; height: 36px; flex: 0 0 auto; transition: width .2s ease; }
.quick-search-toggle { width: 40px; height: 36px; padding: .35rem; display:flex; align-items:center; justify-content:center; border-radius:9999px; }
.quick-search-toggle svg { width:16px; height:16px; color:var(--text-dim); }
.quick-search input { display:none; width:100%; height:36px; background:var(--bg-input); border:1px solid var(--border); padding:.45rem .75rem .45rem 2.35rem; border-radius:9999px; color:var(--text); font-size:.82rem; outline:none; }
.quick-search.is-open { width:min(240px, 45vw); }
.quick-search.is-open input { display:block; }
.quick-search.is-open .quick-search-toggle { position:absolute; left:0; top:0; z-index:1; border:0; background:transparent; }
.quick-search input:focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-dim); }    
.search-results-dropdown {
  position: absolute;
  top: 115%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  max-height: 380px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.quick-create-wrap { position:relative; flex:0 0 auto; }
.quick-create-toggle { width:38px; height:36px; padding:.35rem; display:flex; align-items:center; justify-content:center; }
.quick-create-menu { position:absolute; top:calc(100% + .5rem); right:0; z-index:150; width:220px; max-height:min(70vh,480px); overflow:auto; padding:.35rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow); }
.quick-create-menu[hidden] { display:none; }
.quick-create-menu button { display:block; width:100%; padding:.55rem .65rem; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text); text-align:left; font:inherit; font-size:.8rem; cursor:pointer; }
.quick-create-menu button:hover, .quick-create-menu button:focus-visible { background:var(--primary-dim); color:var(--primary); outline:none; }
.search-result-item {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.search-result-item:hover { background: var(--bg-card-hover); }
.search-result-name { font-weight: 600; font-size: 0.85rem; color: #fff; }
.search-result-type { font-size: 0.7rem; font-family: var(--font-mono); background: var(--bg-input); padding: 0.15rem 0.45rem; border-radius: 4px; color: var(--primary); }

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--success);
  cursor: pointer;
}
.sync-badge.offline { background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.3); color: var(--text-muted); }
.sync-badge.syncing { background: rgba(45, 212, 191, 0.15); border-color: var(--primary); color: var(--primary); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.app-main {
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.app-view { display: none; flex-direction: column; gap: 1.5rem; }
.app-view.active { display: flex; }

.view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  min-height: 150px;
  padding: 1.4rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow);
}
.view-header::before, .wiki-portal-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--hero-art); background-position: center right; background-repeat: no-repeat; background-size: cover; opacity: 0.3; }
.view-header > *, .wiki-portal-header > * { position: relative; }
body[data-theme="day"] .view-header::before, body[data-theme="day"] .wiki-portal-header::before { opacity: 0.18; }
.view-title-group h2 {
  font-family: var(--font-title);
  font-size: 1.6rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.view-title-group p { color: var(--text-muted); font-size: 0.85rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.character-lineup { position:relative; z-index:3; margin:0; padding:15px 0; overflow:visible; border:0; border-radius:0; background:transparent; }
.character-lineup-menu { position:relative; z-index:5; }
.character-lineup-menu-toggle { display:grid; width:38px; height:36px; place-items:center; border:1px solid hsl(var(--feature-hue) 78% 66% / .7); border-radius:63px; margin-left:15px; background:rgba(4,20,43,.82); color:var(--feature-accent); font-size:1.15rem; cursor:pointer; pointer-events:auto; }
.character-lineup-menu-toggle:hover,.character-lineup-menu-toggle[aria-expanded="true"] { background:hsl(var(--feature-hue) 70% 30% / .65); }
.character-lineup-menu-popup { position:absolute; top:0; left:calc(100% + .5rem); display:grid; width:min(340px,calc(100vw - 4rem)); max-height:min(75vh,560px); gap:.75rem; overflow-y:auto; padding:.9rem; border:1px solid hsl(var(--feature-hue) 75% 64% / .65); border-radius:8px; background:rgba(4,20,43,.97); box-shadow:0 12px 32px rgba(0,0,0,.4); }
.character-lineup-menu-popup[hidden] { display:none; }
.character-lineup-menu-popup label { display:grid; gap:.35rem; color:#d8e9f8; font-size:.7rem; font-weight:700; }
.character-lineup-menu-popup select,.character-lineup-menu-popup input { width:100%; min-width:0; padding:.5rem .6rem; border:1px solid hsl(var(--feature-hue) 75% 64% / .55); border-radius:5px; background:#071a30; color:#edf7ff; font:600 .72rem var(--font-body); }
.character-lineup-menu-popup input::placeholder { color:#9db3c9; }
.character-lineup-viewport { position:relative; width:100%; overflow:visible; background:transparent; }
.character-lineup-track-clip { min-height:100px; margin:0 70px; overflow:hidden; background:transparent; }
.character-lineup-nav { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:space-between; padding:0 .5rem; pointer-events:none; }
.character-lineup-nav-left { position:absolute; top:50%; left:.5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; transform:translateY(-50%); }
.character-lineup-nav > button:last-child { position:absolute; top:50%; right:.5rem; margin-right:15px; border-radius:52px; transform:translateY(-50%); }
.character-lineup-nav > button:last-child:hover { transform:translateY(-50%) scale(1.06); }
.character-lineup-nav button { display:grid; width:38px; height:36px; place-items:center; border:1px solid hsl(var(--feature-hue) 78% 66% / .7); border-radius:5px; background:rgba(4,20,43,.82); color:var(--feature-accent); font-size:1.25rem; line-height:1; cursor:pointer; pointer-events:auto; transition:background .18s ease,transform .18s ease; }
.character-lineup-nav button:hover { transform:scale(1.06); background:hsl(var(--feature-hue) 70% 30% / .75); }
.character-lineup-nav-left > button { margin-left:15px; border-radius:60px; }
.character-lineup-stage { display:flex; align-items:center; width:max-content; min-width:0; min-height:100px; gap:12px; margin:0; padding:0; transition:transform .36s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.character-lineup-item { position:relative; flex:0 0 82px; min-width:0; height:auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.3rem; margin:0; padding:.2rem; border:0; outline:0; background:transparent; color:var(--text); cursor:pointer; }
.character-lineup-figure { position:relative; display:grid; flex:0 0 68px; width:68px; height:68px; place-items:center; overflow:hidden; border:2px solid var(--element-color,#f97316); border-radius:50%; background:color-mix(in srgb,var(--element-color,#f97316) 24%,transparent); transition:transform .18s ease,box-shadow .18s ease; }
.character-lineup-figure img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.character-lineup-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:var(--element-color,#f97316); font-size:1.2rem; font-weight:800; }
.character-lineup-caption { display:block; width:100%; overflow:hidden; color:rgba(235,245,255,.78); font-size:.62rem; line-height:1.2; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.character-lineup-item:hover .character-lineup-figure,.character-lineup-item:focus-visible .character-lineup-figure,.character-lineup-item.active .character-lineup-figure { transform:scale(1.08); box-shadow:0 0 0 2px var(--element-color),0 0 14px color-mix(in srgb,var(--element-color) 68%,transparent); }
.character-lineup-item.active .character-lineup-caption { color:#fff; font-weight:700; }
@media (max-width:768px) { .character-lineup-track-clip { min-height:88px; margin:0 62px; } .character-lineup-stage { min-height:88px; gap:8px; } .character-lineup-item { flex-basis:76px; } .character-lineup-figure { flex-basis:60px; width:60px; height:60px; } }
.character-feature-preview { --feature-hue:205; --feature-accent:hsl(var(--feature-hue) 86% 66%); position:relative; left:50%; width:100vw; max-width:100vw; min-height:720px; margin:0 -50vw 0; padding:25px 0; overflow:hidden; isolation:isolate; border:0; border-radius:0; color:#fff; background:radial-gradient(ellipse at 76% 40%, hsl(var(--feature-hue) 78% 36% / .7), transparent 42%), linear-gradient(180deg,hsl(var(--feature-hue) 65% 14%) 0%,#0b2034 64%,#020a13 100%); }
#characterFeatureContent { width:min(900px,calc(100% - 175px)); margin:25px 0 25px 150px; }
.character-feature-preview::before { content:""; position:absolute; inset:auto 0 0; height:38%; z-index:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.64)), repeating-linear-gradient(90deg,transparent 0 36px,rgba(46,131,170,.08) 37px 39px); border-top:1px solid hsl(var(--feature-hue) 85% 60% / .3); }
@keyframes featureCopyEnter { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:translateX(0); } }
@keyframes featureArtEnter { from { opacity:0; transform:translateX(22px) scale(.97); } to { opacity:1; transform:translateX(0) scale(1); } }
.character-feature-copy { position:relative; z-index:2; width:min(550px,calc(100% - 3rem)); min-height:330px; margin:1.5rem; padding:50px; animation:featureCopyEnter .42s ease both; border:1px solid hsl(var(--feature-hue) 85% 63% / .78); border-radius:15px; background:rgba(4,20,43,.9); box-shadow:0 0 22px rgba(0,126,196,.15); }
.character-feature-eyebrow { color:var(--feature-accent); font:700 .68rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.character-feature-copy h2 { margin:.35rem 0 .2rem; color:#f7fbff; font-family:var(--font-title); font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.15; }
.character-feature-meta { color:#b5d8ec; font-size:.87rem; }
.character-feature-description { margin-top:1rem; color:#e3edf8; font-size:.9rem; line-height:1.65; white-space:pre-line; }
.character-feature-link { display:inline-flex; margin-top:1.1rem; padding:.45rem .75rem; border:1px solid hsl(var(--feature-hue) 85% 66% / .7); border-radius:4px; color:var(--feature-accent); font-size:.76rem; font-weight:700; text-decoration:none; }
.character-feature-art { position:absolute; z-index:1; top:155px; right:2%; bottom:25px; display:flex; width:48%; align-items:center; justify-content:center; pointer-events:auto; }
.character-feature-art img { position:relative; inset:auto; display:block; width:min(550px,100%); height:calc(100% - 30px); max-height:330px; margin:15px 0; object-fit:contain; object-position:center; pointer-events:auto; cursor:pointer; filter:drop-shadow(0 4px 15px rgba(0,0,0,.52)); animation:featureArtEnter .56s ease both; }
.character-feature-art.image-mode-reference img { max-height:520px; }
.character-feature-placeholder { position:absolute; bottom:0; display:block; width:min(60%,260px); height:90%; color:var(--feature-accent); opacity:.55; animation:featureArtEnter .56s ease both; }
.character-feature-empty { position:relative; z-index:2; padding:2rem; color:#c4d8e8; }
.character-feature-empty h2 { margin-bottom:.35rem; color:#fff; font-family:var(--font-title); }
@media (max-width:768px) { .character-feature-preview { min-height:720px; } #characterFeatureContent { width:auto; margin:25px 1rem; } .character-feature-copy { width:auto; min-height:0; margin:1rem; padding:1rem; } .character-feature-art { top:155px; bottom:25px; right:0; width:60%; opacity:.55; } .character-feature-art img { max-height:300px; } .character-feature-art.image-mode-reference img { max-height:460px; } .character-feature-description { max-width:65%; } }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s ease;
}
.card:hover {
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.stat-card {
  background: linear-gradient(135deg, rgba(13, 21, 36, 0.9), rgba(19, 31, 51, 0.8));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.element-chart-layout { display: grid; grid-template-columns: 190px minmax(220px, 1fr); gap: 1.5rem; align-items: center; }
.element-chart-donut { width: 180px; aspect-ratio: 1; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(#f97316 0 25%, #38bdf8 25% 50%, #a78bfa 50% 75%, #34d399 75% 100%); }
.element-chart-donut::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--bg-card); }
.element-chart-center { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; }
.element-chart-center strong { color: var(--text); font-size: 1.8rem; font-family: var(--font-title); }
.element-chart-center span { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.element-chart-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.element-chart-legend-item { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-size: 0.85rem; }
.element-chart-swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; }
.element-chart-legend-item strong { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .element-chart-layout { grid-template-columns: 1fr; justify-items: center; } .element-chart-legend { width: 100%; } }
.stat-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-family: var(--font-mono); }
.stat-val { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: #fff; margin: 0.25rem 0; }
.stat-sub { font-size: 0.75rem; color: var(--primary); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-panel);
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.filter-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  color: #fff;
  font-size: 0.85rem;
  outline: none;
}
.filter-input:focus { border-color: var(--primary); }
select.filter-input { cursor: pointer; }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
}
.badge-active { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }
.badge-deceased { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-immortal { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }
.badge-unknown { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.4); }
.badge-primary { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(45, 212, 191, 0.3); }
.badge-accent { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(165, 180, 252, 0.3); }
.badge-concept { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.4); }
[data-theme="day"] .badge-concept { background: #e0e7ff; color: #4338ca; border: 1px solid #c7d2fe; }
.badge-future { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); }
[data-theme="day"] .badge-future { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; }

.future-event-card {
  border-left: 3px dashed #c084fc !important;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.35), var(--bg-card)) !important;
}
[data-theme="day"] .future-event-card {
  border-left: 3px dashed #9333ea !important;
  background: linear-gradient(135deg, #faf5ff, var(--bg-card)) !important;
}

.future-destiny-drawer {
  background: rgba(88, 28, 135, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-top: 1rem;
}
[data-theme="day"] .future-destiny-drawer {
  background: #faf5ff;
  border-color: #d8b4fe;
}

.codex-concept-card {
  border-left: 3px solid #818cf8 !important;
}
[data-theme="day"] .codex-concept-card {
  border-left: 3px solid #6366f1 !important;
}

.entity-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  cursor: pointer;
}
.entity-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}
.entity-artwork { position: relative; width: 100%; aspect-ratio: 16 / 6; overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(135deg, #10283a, #173b52); isolation: isolate; }
.entity-artwork-card { margin: -1.25rem -1.25rem 0.65rem; width: calc(100% + 2.5rem); border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); }
.entity-artwork-fallback, .entity-artwork-fallback svg, .entity-artwork > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.entity-artwork-fallback svg { display: block; }
.entity-artwork > img { z-index: 1; object-fit: cover; }
.entity-artwork-caption { position: absolute; z-index: 2; left: 0.75rem; right: 0.75rem; bottom: 0.65rem; color: #f8fafc; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.entity-artwork-caption small { display: block; color: #b9dce7; font: 0.65rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.entity-artwork-caption strong { display: block; overflow: hidden; font: 700 1rem var(--font-title); text-overflow: ellipsis; white-space: nowrap; }

.sub-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.sub-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.sub-tab-btn:hover { color: var(--text); background: var(--bg-card-hover); }
.sub-tab-btn.active { color: var(--primary); background: var(--primary-dim); border-color: rgba(45, 212, 191, 0.4); }

.cal-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-panel);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cal-header-navigation { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cal-year-picker { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cal-year-picker .form-control { min-height: 34px; padding: 0.35rem 0.5rem; }
.cal-current-title { font-family: var(--font-title); font-size: 1.35rem; color: #fff; letter-spacing: 0.05em; }
.cal-era-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.era-pill {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.15s;
}
.era-pill:hover, .era-pill.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: visible;
}
.cal-day-name { background: var(--bg-panel); padding: 0.65rem; text-align: center; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); font-weight: 700; }
.cal-cell {
  position: relative;
  background: var(--bg-card);
  min-height: 95px;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-cell:hover { background: var(--bg-card-hover); }
.cal-cell.empty { background: rgba(7, 11, 18, 0.7); cursor: default; }
.cal-cell-header { display: flex; justify-content: space-between; align-items: center; }
.cal-day-num { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--text-muted); }
.cal-event-chip {
  background: rgba(45, 212, 191, 0.15);
  border-left: 2px solid var(--primary);
  padding: 0.2rem 0.35rem;
  border-radius: 2px;
  font-size: 0.68rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event-chip.disaster { border-left-color: var(--danger); background: rgba(239, 68, 68, 0.15); }
.cal-event-chip.milestone { border-left-color: var(--accent); background: rgba(165, 180, 252, 0.15); }
.cal-event-chip.crisis { border-left-color: #ec4899; background: rgba(236, 72, 153, 0.15); }
.cal-event-chip.battle { border-left-color: #f97316; background: rgba(249, 115, 22, 0.15); }

.timeline-spine {
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:1.25rem;
  overflow-x:auto;
  overflow-y:hidden;
  padding:100px 0;
  min-height:390px;
  scroll-snap-type:x proximity;
}
.timeline-axis { position:absolute; z-index:0; left:0; top:calc(50% - 1.5px); height:3px; background:linear-gradient(90deg,var(--accent),var(--primary),var(--purple)); pointer-events:none; }
.timeline-item {flex:0 0 min(290px,78vw);width:min(290px,78vw);min-height:350px;position:relative;scroll-snap-align:center;}
.timeline-node {left:50%;top:calc(50% - 13px);transform:translateX(-50%);z-index:2;position:absolute;width:26px;height:26px;border-radius:50%;background:var(--bg-dark);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.timeline-node.has-image { width:38px; height:38px; top:calc(50% - 19px); overflow:hidden; padding:0; background:var(--bg-panel); }
.timeline-node.has-image img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.timeline-node.is-simple-dot { width:12px; height:12px; top:calc(50% - 6px); border:0; background:var(--event-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--event-accent) 22%,transparent); font-size:0; }
.timeline-event-preview { position:fixed; z-index:1000; width:min(390px,calc(100vw - 24px)); max-height:min(72vh,560px); overflow:auto; padding:1rem; border:1px solid var(--border); border-top:4px solid var(--event-accent,var(--primary)); border-radius:var(--radius-md); background:var(--bg-panel); color:var(--text); box-shadow:0 20px 60px rgba(4,10,20,.42); animation:timelinePreviewIn .16s ease-out; }
.timeline-event-preview img { display:block; width:100%; max-height:190px; object-fit:cover; border-radius:var(--radius-sm); margin-bottom:.75rem; }
.timeline-event-preview h3 { margin:.4rem 0; font-family:var(--event-font,var(--font-title)); }
.timeline-event-preview .preview-meta { color:var(--text-muted); font-size:.8rem; margin-bottom:.65rem; }
.timeline-event-preview .preview-description { line-height:1.55; font-size:.88rem; margin:.65rem 0; }
.timeline-event-preview .preview-actions { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; margin-top:.9rem; }
@keyframes timelinePreviewIn { from { opacity:0; transform:translateY(5px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.timeline-label {position:absolute;left:0;right:0;display:flex;flex-direction:column;gap:.3rem;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;pointer-events:none;}
.timeline-item:nth-child(even) .timeline-label {bottom:calc(50% + 22px);}
.timeline-item:nth-child(odd) .timeline-label {top:calc(50% + 22px);}
.timeline-item::before {content:'';position:absolute;left:50%;width:1px;height:22px;background:var(--primary);}
.timeline-item:nth-child(even)::before {top:calc(50% - 22px);}
.timeline-item:nth-child(odd)::before {top:50%;}
.timeline-label h3 { margin:0; color:var(--event-accent); font-family:var(--event-font,var(--font-title)); font-size:1.1rem; line-height:1.25; -webkit-text-stroke:.35px rgba(20,32,46,.72); text-shadow:none; }
.timeline-label-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem; }
.timeline-label-meta > span { font:700 .78rem/1.2 var(--event-font,var(--font-title)); letter-spacing:normal; }
.timeline-label-location { color:var(--text-muted); }
.timeline-label .timeline-year { color:var(--text); }
.timeline-level-filters {display:flex;align-items:center;gap:.35rem .8rem;flex-wrap:wrap;padding:.65rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--bg-panel) 86%,transparent);}
.timeline-level-filters label {display:inline-flex;align-items:center;gap:.28rem;font-size:.72rem;color:var(--text-muted);white-space:nowrap;}
.timeline-level-badge {display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--level-color,var(--primary)) 45%,transparent);border-radius:999px;padding:.12rem .42rem;color:var(--level-color,var(--primary));background:color-mix(in srgb,var(--level-color,var(--primary)) 10%,transparent);font:700 .64rem/1.2 var(--font-body);white-space:nowrap;}
.chronology-level-supreme_key_event {--level-color:#f0b84b;}
.chronology-level-key_event {--level-color:#b58cff;}
.chronology-level-major_event {--level-color:#ff8b63;}
.chronology-level-event {--level-color:#36b7c6;}
.chronology-level-occurrence {--level-color:#7893aa;}
.chronology-level-note {--level-color:#9a9da5;}
.timeline-item[class*="chronology-level-"] .timeline-node {border-color:var(--level-color,var(--event-accent));color:var(--level-color,var(--event-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--level-color,var(--event-accent)) 20%,transparent),0 0 15px color-mix(in srgb,var(--level-color,var(--event-accent)) 35%,transparent);}
.timeline-item.chronology-level-supreme_key_event .timeline-node {width:52px;height:52px;top:calc(50% - 26px);border-width:4px;}
.timeline-item.chronology-level-key_event .timeline-node {width:46px;height:46px;top:calc(50% - 23px);border-width:3px;}
.timeline-item.chronology-level-major_event .timeline-node {width:42px;height:42px;top:calc(50% - 21px);border-width:3px;}
.timeline-item.chronology-level-event .timeline-node {width:38px;height:38px;top:calc(50% - 19px);}
.timeline-item.chronology-level-occurrence .timeline-node {width:30px;height:30px;top:calc(50% - 15px);}
.timeline-item.chronology-level-note .timeline-node {width:22px;height:22px;top:calc(50% - 11px);opacity:.72;}

.timeline-item { --event-accent: var(--primary); --event-tint: rgba(30, 159, 177, .14); --event-font: var(--font-title); }
#subViewGraphical { position:relative; left:50%; isolation:isolate; overflow:hidden; box-sizing:border-box; width:100vw; max-width:100vw; margin-left:-50vw; margin-right:-50vw; padding:50px clamp(20.8px,3.24vw,50px); border:0; border-radius:0; background-color:var(--bg-app); transition:background-color .3s ease; }
body.timeline-graphical-open { padding-bottom:0; }
body.timeline-graphical-open .app-main { padding-bottom:0; }
body.timeline-graphical-open #subViewGraphical { min-height:calc(100vh - 3.5rem); }
#subViewGraphical > :not(.timeline-section-backdrop) { position:relative; z-index:1; }
#subViewGraphical .timeline-section-backdrop { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; pointer-events:none; transition:opacity .9s ease-in-out; }
#subViewGraphical .timeline-section-backdrop.is-active { opacity:.42; }

.timeline-item.theme-exodus, .timeline-item.theme-ancient { --event-accent:#c28d3d; --event-tint:rgba(194,141,61,.18); --event-font:Georgia, 'Palatino Linotype', serif; }
.timeline-item.theme-greek { --event-accent:#d0a63f; --event-tint:rgba(208,166,63,.16); --event-font:'Palatino Linotype', 'Book Antiqua', Georgia, serif; }
.timeline-item.theme-norse { --event-accent:#7695a8; --event-tint:rgba(76,110,134,.22); --event-font:'Segoe UI Historic', 'Palatino Linotype', Georgia, serif; }
.timeline-item.theme-modern { --event-accent:#8291a3; --event-tint:rgba(130,145,163,.13); --event-font:var(--font-body); }
.timeline-item.theme-roman { --event-accent:#a95e52; --event-tint:rgba(169,94,82,.15); --event-font:'Palatino Linotype', Georgia, serif; }
.timeline-item.theme-medieval { --event-accent:#997b55; --event-tint:rgba(153,123,85,.15); --event-font:Georgia, 'Palatino Linotype', serif; }

.wiki-portal-header {
  background: linear-gradient(135deg, rgba(13, 21, 36, 0.95), rgba(30, 41, 59, 0.8));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  border-radius: var(--radius-lg);
}
.wiki-portal-header h2 { font-family: var(--font-title); font-size: 2.2rem; letter-spacing: 0.08em; color: #fff; }
.wiki-az-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; }
.wiki-az-btn {
  width: 28px;
  height: 28px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.wiki-az-btn:hover, .wiki-az-btn.active { color: #fff; background: var(--primary); border-color: var(--primary); }

.wiki-dashboard { display:flex; flex-direction:column; gap:1.4rem; }
.wiki-dashboard-overview { padding:1.25rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-panel); }
.wiki-dashboard-section-heading,.wiki-directory-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; }
.wiki-section-kicker { color:var(--primary); font: .68rem var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.wiki-dashboard-section-heading h3,.wiki-directory-heading h3 { margin:.25rem 0 0; color:var(--text); font:700 1.35rem var(--font-title); }
.wiki-dashboard-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin-bottom:1rem; }
.wiki-stat-card { display:flex; flex-direction:column; gap:.15rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); }
.wiki-stat-card strong { color:var(--text); font:700 1.25rem var(--font-title); }
.wiki-stat-card span { color:var(--text-muted); font-size:.72rem; }
.wiki-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.wiki-category-card { min-width:0; display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); text-align:left; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; }
.wiki-category-card:hover,.wiki-category-card.active { border-color:var(--border-focus); background:var(--primary-dim); transform:translateY(-1px); }
.wiki-category-icon { flex:0 0 2rem; width:2rem; height:2rem; display:grid; place-items:center; border-radius:7px; background:var(--bg-input); color:var(--primary); font:.65rem var(--font-mono); }
.wiki-category-copy { min-width:0; flex:1; display:flex; flex-direction:column; gap:.15rem; }
.wiki-category-copy strong { overflow:hidden; color:var(--text); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.wiki-category-copy small { overflow:hidden; color:var(--text-muted); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }
.wiki-category-count { color:var(--primary); font:.72rem var(--font-mono); }
.wiki-directory { display:flex; flex-direction:column; gap:1rem; }
.wiki-directory-heading { margin:0; align-items:center; }
.wiki-search-box { display:flex; align-items:center; gap:.65rem; padding:.65rem .8rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--primary); }
.wiki-search-box input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:.82rem; }
.wiki-search-box kbd { padding:.2rem .4rem; border:1px solid var(--border); border-radius:4px; color:var(--text-dim); font:.62rem var(--font-mono); }
.wiki-alpha-navigation { display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }
.wiki-entry-meta { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:.4rem; color:var(--text-dim); font:.68rem var(--font-mono); }
.wiki-entry-card h4 { color:var(--text); font:700 1.05rem var(--font-title); }
.wiki-entry-card p { margin-top:.25rem; color:var(--text-muted); font-size:.78rem; }
.wiki-entry-card[hidden] { display:none; }
.wiki-empty-state { grid-column:1/-1; padding:1.5rem; color:var(--text-muted); text-align:center; }

.wiki-article-view {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}
.wiki-toc {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}
.wiki-toc h4 { font-family: var(--font-title); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 0.75rem; }
.wiki-toc-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.wiki-toc-link { color: var(--text-muted); font-size: 0.82rem; text-decoration: none; transition: color 0.15s; cursor: pointer; }
.wiki-toc-link:hover { color: var(--primary); }
.wiki-body { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.wiki-breadcrumbs { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); }
.wiki-breadcrumbs a { color:inherit; text-decoration:underline dotted; text-underline-offset:2px; cursor:pointer; }
.wiki-breadcrumbs a:hover { color:var(--primary); }
.wiki-breadcrumbs [aria-current="page"] { color:var(--text-muted); }
.wiki-title-group h1 { font-family: var(--font-title); font-size: 2.2rem; color: #fff; line-height: 1.15; }
.wiki-section { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.wiki-section-title { font-family: var(--font-title); font-size: 1.3rem; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; }
.wiki-subsection-title { font-family: var(--font-title); font-size: 1rem; color: var(--text); margin-top: 0.25rem; }
.wiki-attribute-list { padding-left: 1.25rem; margin: 0; color: var(--text); line-height: 1.7; }
.wiki-overview-narrative { display: flex; flex-direction: column; gap: 0.7rem; color: var(--text); font-size: 0.95rem; line-height: 1.7; }
.wiki-infobox { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; position: sticky; top: 5rem; }
.wiki-infobox-header { background: linear-gradient(135deg, #0284c7, #6366f1); padding: 0.85rem; text-align: center; font-family: var(--font-title); font-weight: 700; color: #fff; font-size: 1.05rem; }
.wiki-infobox-img { width: 100%; aspect-ratio: 1 / 1; min-height: 0; background: #09101c; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wiki-infobox-img img { display: none; width: 100%; height: 100%; object-fit: cover; }
.wiki-infobox-img img.active { display: block; }
.wiki-image-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.5rem; border-top: 1px solid var(--border); background: var(--bg-panel); }
.wiki-image-tab { flex: 0 0 auto; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--bg-input); color: var(--text-muted); font: inherit; font-size: 0.7rem; cursor: pointer; }
.wiki-image-tab.active { color: var(--primary); background: var(--primary-dim); border-color: var(--primary); }
.wiki-infobox-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.wiki-infobox-table th { text-align: left; padding: 0.5rem 0.75rem; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.05); width: 40%; }
.wiki-infobox-table td { padding: 0.5rem 0.75rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.entity-link { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(45, 212, 191, 0.4); cursor: pointer; font-weight: 500; transition: all 0.15s; }
.entity-link:hover { color: var(--primary-hover); text-decoration-color: var(--primary-hover); }
.entity-chip-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.entity-chip-sm:hover { border-color: var(--primary); background: var(--primary-dim); color: var(--primary); }

.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-backdrop.active { display: flex; }
.modal-window {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  position: relative;
}
#entityEditModalBackdrop .modal-window { max-width: 1000px; }
.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 10;
}
.modal-header h3 { font-family: var(--font-title); font-size: 1.25rem; color: #fff; }
.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.modal-close-btn:hover { color: var(--text); background: var(--bg-card-hover); }
.modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  position: sticky;
  bottom: 0;
}

.profile-banner {
  height: 110px;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.profile-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--hero-art); background-position: center; background-size: cover; opacity: .35; }
body[data-theme="day"] .profile-banner::before { opacity: .18; }
.profile-avatar-wrap {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-md);
  border: 3px solid var(--border-focus);
  background: #09101c;
  position: absolute;
  bottom: -28px;
  left: 1.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
}
.profile-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.profile-header-info {
  padding: 2.25rem 1.5rem 0.5rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.profile-name-group h3 { font-family: var(--font-title); font-size: 1.4rem; color: #fff; }
.profile-name-group p { color: var(--text-muted); font-size: 0.85rem; }
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; padding: 0 1.5rem; }
.profile-info-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-info-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.profile-info-val { font-size: 0.85rem; color: #fff; font-weight: 500; }
.profile-gallery-section { padding: 0 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; }
.profile-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.profile-gallery-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.profile-gallery-card img { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--bg-input); }
.profile-gallery-card figcaption { padding: 0.55rem 0.65rem; color: var(--text); font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; }

.image-gallery-editor { display: flex; flex-direction: column; gap: 0.65rem; }
.image-gallery-editor-row { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.65rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); }
.gallery-profile-choice { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; color: var(--text); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.gallery-image-source-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.image-crop-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.image-crop-frame { position: relative; flex: 0 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); touch-action: none; user-select: none; cursor: grab; }
.profile-image-crop-frame { width: 150px; aspect-ratio: 1 / 1; }
.gallery-image-crop-frame { width: 110px; aspect-ratio: 5 / 7; }
.image-crop-frame img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.image-crop-controls { flex: 1 1 280px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.image-crop-control { display: flex; flex-direction: column; gap: 0.25rem; color: var(--text-muted); font-size: 0.7rem; }
.relation-multiselect { position: relative; }
.relation-multiselect > summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: space-between; gap: 0.75rem; align-items: center; cursor: pointer; min-height: 2.55rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); font-size: 0.85rem; }
.relation-multiselect[open] > summary { border-color: var(--border-focus); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.relation-multiselect-panel { position: absolute; z-index: 30; left: 0; right: 0; padding: 0.65rem; border: 1px solid var(--border-focus); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--bg-panel); box-shadow: var(--shadow); }
.relation-multiselect-options { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.5rem; }
.relation-multiselect-option { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem; border-radius: var(--radius-sm); color: var(--text); font-size: 0.82rem; cursor: pointer; }
.relation-multiselect-option:hover { background: var(--bg-card-hover); }
.relation-multiselect-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.55rem; }
.relation-multiselect-tag { padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--primary-dim); color: var(--primary); font-size: 0.7rem; }
.date-parts { display: grid; grid-template-columns: minmax(120px, 1.3fr) 1fr 0.75fr; gap: 0.5rem; }
.spouse-relationship-row { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: 0.5rem; align-items: center; }
.relationship-row-list { display: flex; flex-direction: column; gap: 0.5rem; }
.alias-editor-list { display: flex; flex-direction: column; gap: 0.5rem; }
.alias-editor-row { display: grid; grid-template-columns: minmax(105px, 0.85fr) minmax(120px, 1.2fr) minmax(120px, 1.2fr) 4.5rem; gap: 0.5rem; align-items: center; }
.mention-editor { min-height: 5.5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.entity-mention-link { color: var(--primary); text-decoration: underline; text-decoration-style: dotted; cursor: pointer; }
.entity-mention-link:hover { color: var(--accent); text-decoration-style: solid; }
.tag-editor { display: flex; flex-wrap: wrap; gap: 0.45rem; min-height: 2.2rem; padding: 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); }
.editable-tag { display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%; padding: 0.25rem 0.5rem 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--primary-dim); color: var(--text); font-size: 0.78rem; }
.editable-tag button { border: 0; border-radius: 50%; width: 1.2rem; height: 1.2rem; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.tag-input-row { display: flex; gap: 0.5rem; }

.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.form-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.form-control {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
  color: #fff;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }
textarea.form-control { resize: vertical; min-height: 80px; }

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(13, 21, 36, 0.98);
  border-top: 1px solid var(--border);
  display: none;
  justify-content: space-around;
  padding: 0.4rem 0.2rem;
  z-index: 80;
}
.mob-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.mob-nav-btn svg { width: 18px; height: 18px; }
.mob-nav-btn.active { color: var(--primary); }

.mobile-drawer {
  position: fixed;
  top: 0; left: -280px; bottom: 0; width: 280px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
  transition: left 0.25s ease;
  box-shadow: var(--shadow);
}
.mobile-drawer.active { left: 0; }

.tag-autocomplete-dropdown {
  position: absolute;
  background: var(--bg-card);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  max-height: 180px;
  overflow-y: auto;
  z-index: 2000;
  box-shadow: var(--shadow);
  display: none;
  width: 100%;
}
.tag-autocomplete-item {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tag-autocomplete-item:hover { background: var(--bg-card-hover); color: var(--primary); }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .wiki-article-view { grid-template-columns: 240px 1fr; }
  .wiki-infobox { position: static; margin-top: 1.5rem; }
  .wiki-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .app-nav { display: none; }
  .quick-search { display: block; }
  .mobile-bottom-nav { display: flex; }
  #btnMobMenu { display: inline-flex !important; }
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
  .wiki-article-view { grid-template-columns: 1fr; }
  .wiki-toc { display: none; }
  .profile-grid { grid-template-columns: 1fr; }
  .cal-day-name { font-size: 0.65rem; padding: 0.35rem; }
  .cal-cell { min-height: 70px; padding: 0.2rem; }
  .timeline-spine { padding-left: 0; min-height: 390px; }
  .timeline-node { left: 50%; top: calc(50% - 13px); }
}

/* ========================================================
   GOOGLE SIGN-IN BUTTON & IDENTITY STYLING
   ======================================================== */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #43474e;
  border-radius: 6px;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  height: 34px;
  letter-spacing: 0.2px;
  line-height: normal;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.gsi-material-button:hover {
  background-color: #202124;
  border-color: #5f6368;
}
.gsi-material-button-content-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 100%;
  position: relative;
  width: 100%;
}
.gsi-material-button-icon {
  height: 18px;
  min-width: 18px;
  width: 18px;
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.gsi-material-button-contents {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}
.google-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.2rem 0.6rem 0.2rem 0.3rem;
  font-size: 0.76rem;
  color: var(--text-main);
  max-width: 220px;
}
.google-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--primary);
  flex-shrink: 0;
}
.google-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

/* ========================================================
   DRIVE IMAGE PICKER & ATTACHMENT WIDGETS
   ======================================================== */
.drive-picker-item {
  position: relative;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.drive-picker-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.drive-picker-item.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim);
}
.drive-picker-thumb-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: #060b13;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.drive-picker-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drive-picker-label {
  padding: 0.4rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(13, 21, 36, 0.95);
  border-top: 1px solid var(--border);
}
.entity-image-attach-widget {
  background: rgba(15, 23, 42, 0.4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.entity-image-attach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.entity-image-preview-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem;
}
.entity-image-preview-thumb {
  width: 58px;
  height: 58px;
  border-radius: 4px;
  object-fit: cover;
  background: #000;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.entity-image-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.loader-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(45, 212, 191, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================================
   LIGHTBOX, CROP TOOL & MEDIA STUDIO STYLES
   ======================================================== */
.lightbox-stage {
  position: relative;
  user-select: none;
}
.lightbox-nav-btn {
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox-nav-btn:hover {
  background: var(--primary) !important;
  color: #000 !important;
  transform: translateY(-50%) scale(1.1) !important;
}
.crop-interactive-viewport {
  position: relative;
  background: #020610;
  border: 2px dashed var(--primary);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.crop-interactive-viewport.dragging {
  cursor: grabbing;
}
.crop-interactive-viewport.frame-profile {
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
}
.crop-interactive-viewport.frame-cover {
  width: 440px;
  max-width: 100%;
  height: 140px;
  border-radius: var(--radius-sm);
}
.crop-interactive-viewport.frame-variation {
  width: 210px;
  height: 280px;
  border-radius: var(--radius-sm);
}
.crop-interactive-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.crop-guide-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,0.15);
}
.crop-guide-line {
  border-right: 1px dashed rgba(255,255,255,0.18);
  border-bottom: 1px dashed rgba(255,255,255,0.18);
}
.gallery-drag-dropzone {
  border: 2px dashed var(--border);
  background: rgba(15, 23, 42, 0.4);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gallery-drag-dropzone:hover,
.gallery-drag-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(45, 212, 191, 0.08);
}
.gallery-card-item {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gallery-card-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.gallery-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: #020610;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-card-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-role-badge-tag {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: rgba(13, 21, 36, 0.9);
  color: #fff;
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 2;
}
.gallery-role-badge-tag.is-profile {
  background: rgba(45, 212, 191, 0.95);
  color: #041017;
  border-color: var(--primary);
}
.gallery-role-badge-tag.is-cover {
  background: rgba(245, 158, 11, 0.95);
  color: #1a0f00;
  border-color: #f59e0b;
}
.gallery-role-badge-tag.is-variation {
  background: rgba(168, 85, 247, 0.95);
  color: #fff;
  border-color: #a855f7;
}
.gallery-role-badge-tag.is-event {
  background: rgba(59, 130, 246, 0.95);
  color: #fff;
  border-color: #3b82f6;
}
.media-slot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.media-slot-preview-frame {
  position: relative;
  background: #030712;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-slot-preview-frame.profile-ratio {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
}
.media-slot-preview-frame.cover-ratio {
  width: 100%;
  height: 80px;
  border-radius: var(--radius-sm);
}
.media-slot-preview-frame.variation-ratio {
  width: 70px;
  height: 90px;
  border-radius: var(--radius-sm);
}
.media-slot-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Profile modal banner & variation chips */
.profile-banner-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}
.prof-variation-chip {
  transition: all 0.15s ease;
}
.prof-variation-chip.active {
  background: var(--primary) !important;
  color: #030a14 !important;
  border-color: var(--primary) !important;
  font-weight: 700;
}

/* Quick Role Assigner Shelf */
.media-quick-shelf-section {
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.7);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}
.quick-shelf-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease;
}
.quick-shelf-card:hover {
  border-color: var(--primary);
}
.quick-shelf-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: #020610;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.quick-shelf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quick-shelf-btn-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.35rem;
  background: rgba(13, 21, 36, 0.95);
}
.quick-shelf-btn-row {
  display: flex;
  gap: 0.2rem;
}
.quick-shelf-btn-row .btn {
  flex: 1;
  font-size: 0.65rem;
  padding: 0.15rem 0.25rem;
  text-align: center;
  justify-content: center;
}

/* Uploaded Images Selector Modal */
.uploaded-selector-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.uploaded-selector-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.uploaded-selector-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: #020610;
  position: relative;
  overflow: hidden;
}
.uploaded-selector-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================== */
/* AUTHENTICATION GATE & LOCK SCREEN (STRICT GOOGLE AUTH)   */
/* ======================================================== */
body.auth-locked {
  overflow: hidden !important;
}

body.auth-locked .app-header,
body.auth-locked .app-main,
body.auth-locked .mobile-drawer,
body.auth-locked .modal-backdrop {
  filter: blur(10px) brightness(0.4);
  pointer-events: none !important;
  user-select: none !important;
}

.auth-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: radial-gradient(circle at 50% 18%, #0f1c33 0%, #030712 75%, #000000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

.auth-gate-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.95), 0 0 50px rgba(56, 189, 248, 0.16);
  padding: 2.25rem 2rem;
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(24px);
  animation: authGateScaleIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authGateScaleIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.auth-gate-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 240px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(14, 165, 233, 0) 70%);
  pointer-events: none;
}

.auth-gate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
  position: relative;
  z-index: 1;
}

.auth-gate-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
}

.auth-gate-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.auth-gate-heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  font-family: var(--font-title, sans-serif);
}

.auth-gate-desc {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
}

.auth-gate-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.35), transparent);
  margin: 1.25rem 0 1.5rem;
}

.auth-gate-lock-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
}

.auth-gate-subheading {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
}

.auth-gate-text {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.auth-gate-google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.auth-gate-google-btn:hover {
  background: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(56, 189, 248, 0.38);
}

.auth-gate-google-btn:active {
  transform: translateY(0);
}

.auth-gate-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 1.1rem;
}

.auth-gate-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 2s infinite;
}

.auth-gate-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.5rem 0;
  color: #94a3b8;
  font-size: 0.85rem;
}

.auth-gate-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(56, 189, 248, 0.2);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: authSpin 0.8s linear infinite;
}

@keyframes authSpin {
  to { transform: rotate(360deg); }
}

.auth-gate-footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  color: #64748b;
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-transform: uppercase;
}

/* Header User Profile Badge */
.header-user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem 0.25rem 0.3rem;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ========================================================
   RESTRUCTURED ENTRY FORMS, TABS, TAGS & RELATIONSHIPS
   ======================================================== */
.form-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-tabs-bar {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}

.form-tab-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.form-tab-btn:hover {
  background: rgba(56, 189, 248, 0.1);
  color: var(--text-bright);
  border-color: rgba(56, 189, 248, 0.3);
}

.form-tab-btn.active {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.form-tab-pane {
  display: none;
  animation: fadeIn 0.2s ease;
}

.form-tab-pane.active {
  display: block;
}

/* Reusable Tag Selector */
.tag-selector-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.tag-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.35rem 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: center;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #e0f2fe;
}

.tag-chip-remove {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  line-height: 1;
  color: #94a3b8;
  transition: all 0.15s ease;
}

.tag-chip-remove:hover {
  background: #ef4444;
  color: #fff;
}

.tag-input-row {
  display: flex;
  gap: 0.5rem;
  position: relative;
}

.tag-input-field {
  flex: 1;
}

.tag-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: none;
}

.tag-autocomplete-dropdown.open {
  display: block;
}

.tag-option-item {
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.tag-option-item:hover, .tag-option-item.highlighted {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.tag-create-prompt {
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  color: #34d399;
  background: rgba(16, 185, 129, 0.1);
  cursor: pointer;
  font-weight: 600;
}

.tag-create-prompt:hover {
  background: rgba(16, 185, 129, 0.2);
}

/* Repeatable Relationship Builder - Unified standard matching regular form controls */
.relationship-builder-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-bottom: 1rem;
}

.relationship-builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.relationship-builder-header h4 {
  margin: 0;
  font-size: 0.88rem;
  font-family: var(--font-title);
  color: var(--text-bright);
}

.relationship-rows-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.relationship-row-card {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  position: relative;
  display: grid;
  gap: 0.5rem;
}

.relationship-row-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.relationship-row-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: all 0.15s ease;
  align-self: flex-start;
}

.relationship-row-remove:hover {
  background: rgba(239, 68, 68, 0.15);
}

/* Multi-select Dropdown Container */
.multi-dropdown-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.multi-dropdown-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 32px;
  padding: 0.3rem 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  align-items: center;
}

.multi-dropdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 4px;
  font-size: 0.74rem;
  color: #e0e7ff;
  font-weight: 500;
}

.multi-dropdown-chip-remove {
  cursor: pointer;
  color: #94a3b8;
  font-size: 0.8rem;
  line-height: 1;
}

.multi-dropdown-chip-remove:hover {
  color: #ef4444;
}

/* Periodic Table Chemistry Selector */
.periodic-search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.periodic-elements-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  gap: 0.35rem;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.periodic-element-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.2rem;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.periodic-element-btn:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
}

.periodic-element-btn.selected {
  background: rgba(56, 189, 248, 0.3);
  border-color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.periodic-element-number {
  font-size: 0.6rem;
  color: #94a3b8;
  line-height: 1;
  align-self: flex-start;
  margin-left: 2px;
}

.periodic-element-symbol {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  font-family: var(--font-mono);
}

.periodic-element-name {
  font-size: 0.58rem;
  color: #cbd5e1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Synchronized Height Group */
.height-sync-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.height-sync-icon {
  font-size: 1.1rem;
  color: var(--primary);
  opacity: 0.8;
}

/* Unified Input Standard across all form controls */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.alias-type,
.alias-val,
.alias-context {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  color: #fff !important;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body[data-theme="day"] .form-control,
body[data-theme="day"] input.form-control,
body[data-theme="day"] select.form-control,
body[data-theme="day"] textarea.form-control,
body[data-theme="day"] .alias-type,
body[data-theme="day"] .alias-val,
body[data-theme="day"] .alias-context {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-dim) !important;
}

#entityEditModalBackdrop .modal-window {
  max-width: 1080px;
  width: 95vw;
}

/* Common Administrative Header Bar outside of tabs */
.entry-admin-header-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.entry-admin-header-bar .form-group {
  margin: 0;
}

/* Logical Form Section Groups */
/* Editable technical-sheet sections must always occupy one full-width row. */
.form-section-group {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.catalog-ai-suggestion-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.85rem 1rem;
  margin: 0 0 0.85rem;
  border: 1px solid rgba(45, 212, 191, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(45, 212, 191, 0.06);
}
.catalog-ai-suggestion-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 220px; }
.catalog-ai-suggestion-copy strong { color: var(--text-bright); font-size: 0.85rem; }
.catalog-ai-suggestion-copy span { color: var(--text-muted); font-size: 0.75rem; }
.catalog-ai-suggestion-bar button:disabled { opacity: 0.65; cursor: wait; }

.form-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-bright);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.35rem;
}

/* Mention Autocomplete for @char and @org */
.mention-input-wrapper {
  position: relative;
  width: 100%;
}

.mention-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85);
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.mention-suggestions-dropdown.open {
  display: block;
}

.mention-suggestion-item {
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text);
  transition: background 0.12s ease;
}

.mention-suggestion-item:hover,
.mention-suggestion-item.highlighted {
  background: var(--primary-dim);
  color: var(--primary);
}

.mention-suggestion-type {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Visual Theme, Emoji & Color Customizer */
.visual-theme-customizer-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.customizer-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 0.85rem;
}

.customizer-preview-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.customizer-preview-emoji-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  user-select: none;
  overflow: hidden;
}

.customizer-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.customizer-preview-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-bright);
}

.customizer-preview-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.emoji-quick-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.emoji-quick-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.emoji-quick-btn:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
  transform: scale(1.1);
}

/* ========================================================
   UNIVERSAL EMOJI & SOVEREIGN FLAGS GALLERY MODAL
   ======================================================== */
#emojiGalleryModalBackdrop {
  z-index: 1200;
}

.emoji-gallery-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 0.45rem;
  max-height: 55vh;
  overflow-y: auto;
  padding: 0.75rem 0.25rem;
}

.emoji-gallery-item-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 52px;
  text-align: center;
}

.emoji-gallery-item-btn:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
  transform: translateY(-2px);
}

.emoji-gallery-item-char {
  font-size: 1.45rem;
  line-height: 1;
  display: inline-block;
}

.emoji-gallery-item-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48px;
  text-align: center;
}

/* Flag representations: Always visual flags, never just text codes */
.emoji-flag-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.emoji-flag-img {
  width: 1.4em;
  height: 1em;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: inline-block;
  vertical-align: middle;
}

.emoji-gallery-flag-item {
  grid-column: span 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0.45rem 0.65rem;
  text-align: left;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.emoji-gallery-flag-item:hover {
  border-color: var(--primary);
  background: var(--primary-dim);
  transform: translateY(-1px);
}

.emoji-gallery-flag-img {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.emoji-gallery-flag-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Theme test: make the primary navigation black in both day and night themes. */
.app-nav {
  background: #000000 !important;
  border-color: #242424 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.app-nav .nav-btn {
  color: #f5f5f5;
}
.app-nav .nav-btn:hover {
  color: #ffffff;
  background: #242424;
}
.app-nav .nav-btn.active {
  color: var(--primary, #14b8a6);
  background: #171717;
  box-shadow: inset 0 0 0 1px #383838;
}
.mobile-bottom-nav {
  background: #000000 !important;
  border-top-color: #242424 !important;
}
.mobile-bottom-nav .mob-nav-btn {
  color: #f5f5f5;
}
.mobile-bottom-nav .mob-nav-btn:hover {
  color: #ffffff;
  background: #242424;
}
.mobile-bottom-nav .mob-nav-btn.active {
  color: var(--primary, #14b8a6);
}


/* SYGNNER navigation and page-shell refinement */
.app-header { gap: 1rem; }
.app-nav { gap: .25rem; padding: .3rem; border-radius: 14px; }
.app-nav .nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 38px;
  padding: .55rem .78rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.app-nav .nav-btn svg { flex: 0 0 auto; opacity: .85; }
.app-nav .nav-btn:hover { color: var(--text); background: var(--bg-card-hover); }
.app-nav .nav-btn.active {
  color: var(--primary);
  background: var(--bg-panel);
  border-color: var(--border);
  box-shadow: 0 2px 7px rgba(2, 8, 23, .08);
}
.app-nav .nav-btn.active svg { opacity: 1; }
.app-nav .nav-btn:focus-visible,
.mob-nav-btn:focus-visible,
#btnMobMenu:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}
.mob-nav-btn { transition: color .16s ease, background .16s ease; }
.mob-nav-btn[aria-current="page"] { color: var(--primary); }
.app-view { min-width: 0; }
.app-view > .view-header { scroll-margin-top: 90px; }
.view-title-group h2 { line-height: 1.2; }
.view-title-group p { line-height: 1.55; max-width: 70ch; }
@media (max-width: 1100px) {
  .app-header { gap: .6rem; }
  .app-nav { gap: .1rem; }
  .app-nav .nav-btn { padding: .5rem .55rem; font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-nav .nav-btn, .mob-nav-btn, .mobile-drawer { transition: none !important; }
}


/* Character showcase is intentionally a full-bleed standalone view. */
.app-main:has(#view-characters.active) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
#view-characters.app-view.active {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}
#view-characters .character-feature-preview {
  margin-top: 0;
  margin-bottom: 0;
  min-height: max(720px, calc(100vh - 76px));
}


/* Responsive workspace layout for catalogs, atlas and chronology. */
.app-view:not(#view-characters) {
  padding: clamp(.75rem, 2vw, 1.5rem);
  gap: clamp(.85rem, 1.5vw, 1.25rem);
}
.app-view:not(#view-characters) > .view-header {
  width: 100%;
  min-width: 0;
}
.app-view:not(#view-characters) .sub-tabs {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  gap: .35rem;
}
.app-view:not(#view-characters) .sub-tabs > .sub-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.app-view:not(#view-characters) .filter-bar {
  min-width: 0;
}
.app-view:not(#view-characters) .filter-bar input,
.app-view:not(#view-characters) .filter-bar select {
  min-width: 0;
}
#view-catalogs #catalogCardsGrid,
#view-atlas #atlasCardsGrid {
  align-items: stretch;
}
@media (max-width: 900px) {
  .app-view:not(#view-characters) {
    padding: .75rem;
  }
  .app-view:not(#view-characters) > .view-header {
    min-height: 0;
    padding: 1rem;
    align-items: flex-start;
  }
  .app-view:not(#view-characters) .view-title-group h2 {
    font-size: clamp(1.25rem, 4vw, 1.7rem);
  }
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .app-view:not(#view-characters) {
    padding: .55rem;
    gap: .8rem;
  }
  .app-view:not(#view-characters) > .view-header {
    padding: .9rem;
    gap: .75rem;
  }
  .app-view:not(#view-characters) > .view-header > div:last-child {
    width: 100%;
  }
  .app-view:not(#view-characters) > .view-header .btn {
    min-height: 40px;
  }
  .grid-3, .grid-4 {
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
  }
  .app-view:not(#view-characters) .filter-bar {
    padding: .7rem;
    gap: .55rem;
  }
  .app-view:not(#view-characters) .filter-bar input,
  .app-view:not(#view-characters) .filter-bar select {
    width: 100%;
    max-width: 100% !important;
    flex: 1 1 100%;
  }
}


/* Shared page hero system: Wiki layout is the canonical structure. */
.shared-page-hero,
.app-view [data-theme-category="hero"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--hero-border-radius, var(--radius-lg));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg-panel);
  box-shadow: var(--shadow);
}
.shared-page-hero > h2,
.shared-page-hero .view-title-group h2 {
  margin: 0;
  max-width: 100%;
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: var(--text-primary, #172033);
  justify-content: center;
}
.shared-page-hero > p,
.shared-page-hero .view-title-group p {
  margin: 0;
  max-width: 720px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.page-hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; }
@media(max-width:700px){.shared-page-hero{min-height:220px;padding:2rem 1rem}.page-hero-actions{justify-content:stretch}}