:root {
  /* ===== HourBound Main Colours ===== */

  --hourbound-black: #05070d;
  --hourbound-midnight: #0b1220;
  --hourbound-panel: #111827;
  --hourbound-panel-soft: #172033;

  --hourbound-blue: #008cff;
  --hourbound-blue-bright: #00c8ff;

  --hourbound-gold: #d8a84a;
  --hourbound-silver: #c7ced8;
  --hourbound-white: #f5f7fa;

  --hourbound-border: rgba(0, 140, 255, 0.45);
  --hourbound-glow: 0 0 24px rgba(0, 140, 255, 0.45);

  /* ===== Compatibility ===== */

  --bg-main: var(--hourbound-black);
  --bg-panel: var(--hourbound-midnight);
  --bg-card: var(--hourbound-panel);

  --text-main: var(--hourbound-white);
  --text-muted: var(--hourbound-silver);

  --border: var(--hourbound-border);

  --primary: var(--hourbound-blue);
  --link: var(--hourbound-blue-bright);

  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
}

.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 24px 18px;
}

.sidebar h2 {
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 28px;
}

.sidebar button {
  width: 100%;
  display: block;
  background: transparent;
  color: var(--text-muted);
  border: none;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}

.sidebar button:hover {
  background: var(--bg-card);
  color: var(--text-main);
}

.main-content {
  flex: 1;
  padding: 32px;
}

h1,
h2,
h3 {
  color: var(--text-main);
}

.page-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

input,
textarea,
select {
  width: 100%;
  background: #181818;
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 14px 0;
  font-size: 14px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

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

button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  margin: 4px 6px 8px 0;
}

button:hover {
  opacity: 0.9;
}

p {
  color: var(--text-muted);
}

pre {
  background: #181818;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  color: var(--text-main);
  white-space: pre-wrap;
}

a {
  color: var(--link);
}

#characterList {
  margin-top: 14px;
}

img {
  border: 1px solid var(--border);
}

.category-checkbox-list {
  border: 1px solid #6c5ce7;
  border-radius: 8px;
  padding: 12px;
  max-height: 260px;
  overflow-y: auto;
  background: #111;
  display: grid;
  gap: 8px;
}

.category-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.category-checkbox-list input {
  width: auto;
}

body {
  background:
    radial-gradient(
      circle at top right,
      rgba(0, 140, 255, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(216, 168, 74, 0.12),
      transparent 35%
    ),
    linear-gradient(135deg, var(--hourbound-black), var(--hourbound-midnight));
  color: var(--hourbound-white);
}

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.login-card {
  width: 420px;
  max-width: 90vw;
  padding: 36px;
  border: 1px solid var(--hourbound-border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    var(--hourbound-panel),
    var(--hourbound-black)
  );
  box-shadow:
    var(--hourbound-glow),
    inset 0 0 24px rgba(0, 140, 255, 0.45);
  text-align: center;
}

.login-card h1 {
  color: var(--hourbound-gold);
  letter-spacing: 2px;
  font-size: 42px;
  margin-bottom: 8px;
}

.login-card p {
  color: var(--hourbound-silver);
}

input,
textarea,
select {
  background: #0b0f19;
  color: var(--hourbound-white);
  border: 1px solid rgba(199, 206, 216, 0.25);
  border-radius: 8px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--hourbound-blue);
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.45);
}

button {
  background: linear-gradient(90deg, var(--hourbound-blue), #004dff);
  color: var(--hourbound-white);
  border: 1px solid var(--hourbound-gold);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.35);
}

button:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.55);
}

.sidebar {
  background: linear-gradient(180deg, #05070d, #0b1220);
  border-right: 1px solid rgba(216, 168, 74, 0.35);
}

.sidebar h2 {
  color: var(--hourbound-gold);
  letter-spacing: 1.5px;
}

.main-content {
  background:
    radial-gradient(
      circle at top right,
      rgba(0, 140, 255, 0.08),
      transparent 30%
    ),
    rgba(5, 7, 13, 0.6);
}

.page-section {
  border: 1px solid rgba(0, 140, 255, 0.25);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.72);
  box-shadow: inset 0 0 20px rgba(0, 140, 255, 0.05);
}

.category-checkbox-list {
  border: 1px solid var(--hourbound-border);
  border-radius: 10px;
  padding: 12px;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(5, 7, 13, 0.85);
  display: grid;
  gap: 8px;
}

.category-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hourbound-silver);
  cursor: pointer;
}

.category-checkbox-list input {
  width: auto;
  accent-color: var(--hourbound-blue);
}

.character-search-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--hourbound-border);
  border-radius: 10px;
  background: rgba(5, 7, 13, 0.7);
  cursor: pointer;
}

.character-search-row:hover {
  box-shadow: 0 0 16px rgba(0, 140, 255, 0.5);
  border-color: var(--hourbound-blue-bright);
}

.character-search-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

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

.password-row input {
  flex: 1;
}

.password-row button {
  width: 52px;
  padding: 10px;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--hourbound-silver);
  font-size: 14px;
  margin: 8px 0 18px;
}

.login-options label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-options input {
  width: auto;
  margin: 0;
}

.login-options span {
  color: var(--hourbound-blue-bright);
  cursor: pointer;
}

.profile-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--hourbound-border);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.profile-actions,
.profile-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.character-profile-card img {
  box-shadow: 0 0 18px rgba(0, 140, 255, 0.35);
}

.large-document-preview {
  width: 100%;
  min-height: 320px;
  resize: vertical;
}

.document-confirm-check {
  display: block;
  margin-top: 12px;
  margin-bottom: 12px;
  font-weight: 600;
}

.field-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.field-group {
  border: 1px solid #0b5fa5;
  border-radius: 10px;
  padding: 16px;
  background: rgba(2, 18, 34, 0.65);
}

.field-group h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

.field-group label {
  display: block;
  margin-bottom: 10px;
}

.field-group-toggle {
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #0b5fa5;
  background: rgba(0, 140, 255, 0.15);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.field-group-body {
  margin-top: 12px;
}

.hidden {
  display: none;
}

.toggle-arrow {
  display: inline-block;
  width: 20px;
  font-weight: bold;
}

.field-count {
  float: right;
  opacity: 0.7;
}

.field-group-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 30px;
  margin-top: 15px;
}

.field-group-body label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

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

.field-group-body label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 6px;
}

.field-group-body label:hover {
  background: rgba(0, 140, 255, 0.12);
}

.field-group-body input[type="checkbox"] {
  order: 2;
  margin-left: auto;
}

.field-group-body.hidden {
  display: none;
}

.field-group {
  align-items: start;
}

.field-group {
  height: auto;
}

.field-group-body.hidden {
  display: none !important;
}

.ai-review-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 16px;
}

.ai-review-table th,
.ai-review-table td {
  border: 1px solid var(--hourbound-border);
  padding: 10px;
  vertical-align: top;
}

.ai-review-table th:nth-child(1),
.ai-review-table td:nth-child(1) {
  width: 18%;
}

.ai-review-table th:nth-child(2),
.ai-review-table td:nth-child(2) {
  width: 10%;
  text-align: center;
}

.ai-review-table th:nth-child(3),
.ai-review-table td:nth-child(3) {
  width: 52%;
}

.ai-review-table th:nth-child(4),
.ai-review-table td:nth-child(4) {
  width: 20%;
}

.ai-review-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ai-review-actions label {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}

.ai-review-table input[type="radio"],
.ai-review-table input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.duplicate-warning {
  border: 1px solid #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.ai-review-table {
  width: 100%;
  table-layout: fixed;
}

.ai-review-table th,
.ai-review-table td {
  overflow-wrap: break-word;
  word-break: break-word;
}

.ai-review-table th:nth-child(1),
.ai-review-table td:nth-child(1) {
  width: 12%;
}

.ai-review-table th:nth-child(2),
.ai-review-table td:nth-child(2) {
  width: 7%;
  text-align: center;
}

.ai-review-table th:nth-child(3),
.ai-review-table td:nth-child(3) {
  width: 38%;
}

.ai-review-table th:nth-child(4),
.ai-review-table td:nth-child(4) {
  width: 25%;
}

.ai-review-table th:nth-child(5),
.ai-review-table td:nth-child(5) {
  width: 18%;
}

.knowledge-decision {
  width: 100%;
  min-width: 0;
}

/* ==========================================
   HourBound Processing Overlay
========================================== */

.hourglass-overlay {
  position: fixed;
  inset: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(3, 7, 18, 0.82);

  backdrop-filter: blur(5px);

  z-index: 99999;
}

.hourglass-box {
  width: 480px;
  max-width: 90%;

  padding: 40px;

  text-align: center;

  border-radius: 18px;

  border: 1px solid rgba(0, 140, 255, 0.45);

  background: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0.98),
    rgba(5, 7, 13, 0.98)
  );

  box-shadow:
    0 0 35px rgba(0, 140, 255, 0.35),
    inset 0 0 20px rgba(0, 140, 255, 0.15);
}

.hourglass-box {
  background: linear-gradient(180deg, #081321, #050b14);

  border: 2px solid #1d72ff;
  border-radius: 22px;

  box-shadow:
    0 0 25px rgba(0, 120, 255, 0.35),
    inset 0 0 35px rgba(0, 70, 150, 0.18);
}

.hourglass-icon {
  width: 230px;
  height: auto;
  display: block;
  margin: 0 auto 24px auto;
  border: none;
  animation: hourglassGlow 2.2s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(0, 200, 255, 0.65))
    drop-shadow(0 0 32px rgba(0, 140, 255, 0.45));
}

@keyframes hourglassGlow {
  0% {
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.45))
      drop-shadow(0 0 22px rgba(0, 140, 255, 0.35));
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(0, 200, 255, 0.95))
      drop-shadow(0 0 42px rgba(0, 140, 255, 0.75));
  }

  100% {
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.45))
      drop-shadow(0 0 22px rgba(0, 140, 255, 0.35));
  }
}

.hourglass-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hourglass-overlay.hidden {
  display: none !important;
}

.hourglass-progress-bar {
  width: 0%;
  height: 4px;
  margin: 18px auto 10px auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #00c8ff, #d8a84a);
  box-shadow: 0 0 14px rgba(0, 200, 255, 0.8);
  transition: width 0.5s ease;
}

.hourglass-step.complete {
  color: #22c55e;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
}

.hourglass-step.active {
  color: #00c8ff;
  text-shadow: 0 0 14px rgba(0, 200, 255, 0.9);
}

.hourglass-steps {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}

.hourglass-step {
  flex: 1;
  text-align: center;
  color: #7f8ca3;
  font-size: 13px;
}

.hourglass-step span {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
}

.hourglass-step small {
  display: block;
  line-height: 1.35;
}

.hourglass-step.active {
  color: #00c8ff;
  text-shadow: 0 0 14px rgba(0, 200, 255, 0.9);
}

.hourglass-step.complete {
  color: #22c55e;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
}

.hourglass-progress-line {
  height: 1px;
  width: 100%;
  margin: 20px auto 0 auto;
  background: rgba(199, 206, 216, 0.25);
}

.hourglass-icon {
  border: none;
}

/* ==========================================================
   CHARACTER PROFILE
========================================================== */

.character-profile-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}

/* ==========================================================
   HEADER
========================================================== */

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

.character-profile-heading h2 {
  margin: 0;
  font-size: 30px;
}

.character-profile-heading p {
  margin-top: 6px;
  opacity: 0.75;
}

/* ==========================================================
   TOOLBAR
========================================================== */

.profile-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  flex-wrap: wrap;

  gap: 20px;

  padding: 20px;

  border-radius: 12px;

  background: #23262d;
}

.profile-character-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-character-selector select {
  width: 320px;

  padding: 10px;

  border-radius: 8px;

  background: #1b1d23;

  color: white;

  border: 1px solid #444;
}

.profile-toolbar-actions {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;
}

/* ==========================================================
   BUTTONS
========================================================== */

.profile-button {
  padding: 10px 18px;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  background: #39414d;

  color: white;

  transition: 0.25s;
}

.profile-button:hover {
  background: #4c5668;
}

.profile-button-primary {
  background: #3d7cff;
}

.profile-button-primary:hover {
  background: #4b8bff;
}

.profile-button-danger {
  background: #bb3a3a;
}

.profile-button-danger:hover {
  background: #d24848;
}

.profile-button-small {
  padding: 8px 14px;
}

/* ==========================================================
   EMPTY STATE
========================================================== */

.character-profile-empty-state {
  padding: 60px;

  text-align: center;

  border-radius: 12px;

  background: #23262d;
}

/* ==========================================================
   PROFILE SECTIONS
========================================================== */

.profile-section {
  background: #23262d;

  border-radius: 12px;

  padding: 22px;
}

.profile-section-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 18px;
}

.profile-section-header h3 {
  margin: 0;
}

/* ==========================================================
   SUMMARY
========================================================== */

.profile-summary-layout {
  display: grid;

  grid-template-columns: 280px 1fr;

  gap: 35px;
}

/* ==========================================================
   PORTRAIT
========================================================== */

.profile-portrait-panel {
  display: flex;

  flex-direction: column;

  gap: 16px;
}

.profile-portrait-frame {
  width: 220px;
  height: 320px;

  background: #0f1725;

  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  border: 2px solid #404654;

  flex-shrink: 0;
}

.profile-portrait-frame img {
  width: 100%;

  height: 100%;

  object-fit: contain;
  object-position: center;
  background: #0f1725;
}

.profile-portrait-placeholder {
  color: #888;

  font-size: 18px;
}

/* ==========================================================
   BASIC INFO
========================================================== */

.profile-character-title {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 20px;
}

.profile-character-title h1 {
  margin: 0;

  font-size: 36px;
}

.profile-status-badge {
  padding: 8px 14px;

  border-radius: 20px;

  background: #3d7cff;
}

/* ==========================================================
   GRID
========================================================== */

.profile-information-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 18px;
}

.profile-field {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.profile-field-label {
  font-size: 12px;

  opacity: 0.65;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.profile-field-value {
  font-size: 16px;

  font-weight: 500;
}

/* ==========================================================
   LONG TEXT
========================================================== */

.profile-long-text {
  line-height: 1.8;

  white-space: pre-wrap;
}

/* ==========================================================
   GALLERY
========================================================== */

.character-image-gallery {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 16px;
}

/* ==========================================================
   DOCUMENTS
========================================================== */

.character-linked-documents {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

/* ==========================================================
   FOOTER
========================================================== */

.profile-footer-actions {
  display: flex;

  justify-content: flex-end;

  gap: 12px;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {
  .profile-summary-layout {
    grid-template-columns: 1fr;
  }

  .profile-toolbar {
    flex-direction: column;

    align-items: stretch;
  }

  .profile-character-selector select {
    width: 100%;
  }

  .profile-toolbar-actions {
    width: 100%;

    justify-content: space-between;
  }
}

.character-gallery-item {
  overflow: hidden;
  border: 1px solid var(--hourbound-border);
  border-radius: 10px;
  background: rgba(5, 7, 13, 0.7);

  width: 220px;
}

.character-gallery-image {
  width: 100%;
  height: 220px;

  object-fit: contain;
  object-position: center;

  display: block;

  background: #0f1725;
  border-radius: 8px;
}
.character-gallery-name {
  padding: 10px;
  color: var(--hourbound-white);
  font-size: 14px;
  text-align: center;
}

/* ========================================= */
/* HourBound Character Portrait Frame        */
/* ========================================= */

.profile-summary-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 35px;
  align-items: start;
}

.profile-portrait-panel {
  width: 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hourbound-portrait-card {
  position: relative;
  width: 360px;
  height: 360px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 18px;
  background: #050a13;
}

.hourbound-final-portrait {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  display: block;
  object-fit: contain !important;
  object-position: center center !important;
  border: none;
}

.hourbound-portrait-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
  background: #050a13;
}

.profile-image-upload-preview-image {
  width: 220px;
  height: 280px;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #0b1320;
}

.character-image-purpose {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 12px 0;
}

.character-image-purpose label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.character-image-purpose input {
  width: auto;
  margin: 0;
}

.profile-image-upload-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.profile-gallery-highlight {
  outline: 2px solid var(--hourbound-blue-bright);
  outline-offset: 8px;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(0, 200, 255, 0.55);
  transition:
    outline-color 0.25s ease,
    box-shadow 0.25s ease;
}

.profile-gallery-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#applyMainPortraitButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================
   CHARACTER EDITOR AND PROFILE TABS
========================================================== */

.character-form-intro {
  margin: 4px 0 18px;
  color: #9aa7b8;
}

.character-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 22px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(61, 124, 255, 0.28);
  scrollbar-width: thin;
}

.character-tab-button {
  flex: 0 0 auto;
  padding: 11px 15px;
  border: 1px solid transparent;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: #b9c3d2;
  box-shadow: none;
  white-space: nowrap;
}

.character-tab-button:hover {
  color: #ffffff;
  background: rgba(61, 124, 255, 0.12);
}

.character-tab-button.active {
  color: #ffffff;
  border-color: rgba(61, 124, 255, 0.5);
  border-bottom-color: #3d7cff;
  background: rgba(61, 124, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0, 92, 255, 0.16);
}

.character-tab-panel,
.character-profile-tab-panel {
  animation: character-tab-fade 0.18s ease-out;
}

.character-tab-panel[hidden],
.character-profile-tab-panel[hidden] {
  display: none !important;
}

.character-tab-panel.active {
  display: block;
  padding: 22px;
  border: 1px solid rgba(66, 139, 255, 0.22);
  border-radius: 12px;
  background: rgba(10, 18, 32, 0.58);
}

.character-tab-panel h3 {
  margin-top: 0;
}

.character-profile-tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-view-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  padding-top: 10px;
  background: #0b1422;
}

.character-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(61, 124, 255, 0.2);
}

.character-form-image-preview {
  display: none;
  width: 220px;
  height: 300px;
  object-fit: contain;
  margin-top: 10px;
  border-radius: 8px;
}

@keyframes character-tab-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .character-tabs {
    padding-bottom: 6px;
  }

  .character-tab-button {
    padding: 9px 12px;
    font-size: 13px;
  }

  .character-form-actions {
    flex-direction: column;
  }
}

/* ==========================================================
   HALL OF HEROES — CHARACTER PROFILE WORLD LAYOUT
========================================================== */

#characterProfile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% + 48px);
  max-width: none;
  min-height: calc(100vh - 64px);
  margin: -24px !important;
  border: 0;
  border-radius: 0;
  background-image:
    linear-gradient(rgba(2, 6, 18, 0.3), rgba(2, 6, 18, 0.48)),
    url("/portal_ui/assets/character-profile/background-hourbound-3.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Override the world shell's later 1560px content cap for immersive pages. */
.world-main-content > #characterProfile,
.world-main-content > #addCharacterSection,
.world-main-content > #writingWorkspace,
.world-main-content > #dragonSanctum,
.world-main-content > #worldAtlas {
  width: calc(100% + 48px) !important;
  max-width: none !important;
  margin: -24px !important;
}

/* ==========================================================
   AUTHOR'S STUDY — WRITING PLATFORM
========================================================== */

#writingWorkspace {
  position: relative;
  isolation: isolate;
  width: calc(100% + 48px);
  max-width: none;
  min-height: calc(100vh - 64px);
  margin: -24px !important;
  padding: clamp(18px, 2vw, 34px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(2, 6, 18, 0.22), rgba(2, 6, 18, 0.42)),
    url("/portal_ui/assets/character-profile/background-hourbound-3.png") center / cover fixed no-repeat;
}

.writing-platform {
  width: min(1540px, 100%);
  min-height: calc(100vh - 108px);
  margin: 0 auto;
  color: #edf2fb;
}

.writing-platform button,
.writing-platform input,
.writing-platform textarea,
.writing-platform select {
  border-radius: 4px;
}

.writing-platform-header,
.writing-manuscripts,
.writing-editor-panel,
.writing-ai-panel,
.writing-lower-grid > section {
  border: 1px solid rgba(190, 132, 48, 0.44);
  background: rgba(4, 10, 19, 0.82);
  box-shadow: inset 0 0 32px rgba(0, 47, 91, 0.14), 0 14px 38px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(7px) saturate(1.08);
  backdrop-filter: blur(7px) saturate(1.08);
}

.writing-platform-header {
  display: grid;
  grid-template-columns: auto minmax(250px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  margin-bottom: 12px;
}

.writing-brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #ad7426;
  border-radius: 50%;
  color: #24a5ff;
  font-size: 26px;
  box-shadow: 0 0 18px rgba(0, 125, 255, 0.3);
}

.writing-eyebrow {
  color: #d9a548;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.writing-platform-header h2 {
  margin: 2px 0 0;
  font-family: Georgia, serif;
  font-size: clamp(23px, 2vw, 32px);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.writing-platform-header p,
.writing-document-heading p {
  margin: 3px 0 0;
}

.writing-view-nav {
  display: flex;
  align-items: stretch;
}

.writing-view-nav button {
  min-height: 48px;
  margin: 0;
  padding: 8px 18px;
  border: 0;
  border-left: 1px solid rgba(216, 168, 74, 0.18);
  background: transparent;
  color: #c9d1df;
  box-shadow: none;
}

.writing-view-nav button.active {
  color: #43b9ff;
  border-bottom: 2px solid #009dff;
}

.writing-main-grid {
  display: grid;
  grid-template-columns: minmax(205px, 0.72fr) minmax(440px, 2.5fr) minmax(300px, 1.25fr);
  gap: 10px;
  min-height: 590px;
}

.writing-manuscripts,
.writing-ai-panel {
  padding: 12px;
}

.writing-panel-title {
  margin: 2px 0 12px;
  color: #e7d6bd;
  font-family: Georgia, serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.writing-new-button {
  width: 100%;
  margin: 0 0 8px;
}

.writing-manuscripts input {
  margin: 0 0 14px;
  background: rgba(10, 15, 24, 0.9);
}

.writing-tree {
  display: grid;
  gap: 5px;
  min-height: 370px;
  padding: 8px 2px;
}

.writing-tree strong,
.writing-tree-chapter {
  padding: 7px 5px;
  color: #d9dde6;
}

.writing-tree-chapter {
  padding-left: 15px;
}

.writing-tree button {
  margin: 0 0 0 18px;
  padding: 8px 10px;
  text-align: left;
  color: #6fc4ff;
  border: 0;
  background: rgba(25, 91, 171, 0.34);
  box-shadow: none;
}

.writing-storage-card {
  padding-top: 12px;
  border-top: 1px solid rgba(216, 168, 74, 0.28);
}

.writing-storage-card > div,
.writing-context-meter {
  height: 6px;
  margin: 8px 0;
  overflow: hidden;
  border-radius: 99px;
  background: #1c2531;
}

.writing-storage-card i,
.writing-context-meter i {
  display: block;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, #007eff, #20b8ff);
}

.writing-editor-panel {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
}

.writing-document-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(216, 168, 74, 0.2);
}

.writing-document-heading input {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f0e4d4;
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 700;
}

.writing-autosave {
  align-self: center;
  color: #55d98a;
  font-size: 12px;
  white-space: nowrap;
}

.writing-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(190, 200, 220, 0.14);
}

.writing-toolbar button,
.writing-toolbar span {
  min-width: 32px;
  margin: 0;
  padding: 6px 9px;
  border: 1px solid rgba(160, 177, 199, 0.2);
  background: rgba(12, 18, 28, 0.72);
  box-shadow: none;
  color: #d6dae2;
}

#writingWorkspace #storyText {
  width: 100%;
  min-height: 450px;
  margin: 0;
  padding: clamp(24px, 3vw, 42px);
  border: 0;
  border-radius: 0;
  background: rgba(18, 20, 25, 0.8);
  color: #e6e5e2;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.9;
  resize: none;
}

.writing-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid rgba(216, 168, 74, 0.2);
}

.writing-editor-footer label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aeb8c8;
}

.writing-editor-footer input {
  width: auto;
  margin: 0;
}

.writing-ai-tabs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: -2px -2px 14px;
  padding: 9px;
  border-bottom: 1px solid rgba(216, 168, 74, 0.3);
  color: #bfc7d4;
  font-size: 12px;
  text-transform: uppercase;
}

.writing-ai-panel > label {
  color: #f0dfc4;
  font-family: Georgia, serif;
}

#writingAiPrompt {
  min-height: 105px;
  background: rgba(12, 19, 30, 0.9);
}

.writing-ai-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.writing-ai-actions select,
.writing-ai-actions button {
  margin: 0;
}

.writing-ai-response-card,
.writing-tools-card {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(216, 168, 74, 0.28);
  background: rgba(6, 12, 22, 0.7);
}

.writing-ai-response-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.writing-ai-response-card button {
  margin: 0;
  padding: 5px 9px;
  background: transparent;
  box-shadow: none;
}

#writingAiResponse {
  min-height: 115px;
  max-height: 175px;
  margin: 8px 0 0;
  overflow: auto;
  border-color: rgba(125, 148, 177, 0.2);
  background: rgba(10, 16, 26, 0.8);
  color: #cbd3df;
  font: inherit;
}

.writing-tools-card h3,
.writing-lower-grid h3 {
  margin: 0 0 10px;
  color: #e8d8c0;
  font-family: Georgia, serif;
  font-size: 15px;
  text-transform: uppercase;
}

.writing-tools-card > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.writing-tools-card button {
  margin: 0;
  padding: 8px;
  border-color: rgba(80, 112, 148, 0.35);
  background: rgba(15, 27, 43, 0.86);
  box-shadow: none;
  font-size: 11px;
}

.writing-lower-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr 2fr;
  gap: 10px;
  margin-top: 10px;
}

.writing-lower-grid > section {
  min-height: 150px;
  padding: 16px;
}

.writing-lower-grid p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
}

.writing-memory-banks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.writing-memory-banks span {
  padding: 12px 7px;
  border: 1px solid rgba(190, 132, 48, 0.36);
  color: #cbd5e3;
  text-align: center;
  font-size: 12px;
}

.writing-context-meter i {
  width: 0;
  background: #34c979;
}

@media (max-width: 1120px) {
  .writing-platform-header {
    grid-template-columns: auto 1fr;
  }

  .writing-view-nav {
    grid-column: 1 / -1;
  }

  .writing-main-grid {
    grid-template-columns: 210px minmax(420px, 1fr);
  }

  .writing-ai-panel {
    grid-column: 1 / -1;
  }

  .writing-lower-grid {
    grid-template-columns: 1fr 1fr;
  }

  .writing-memory-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #writingWorkspace {
    width: calc(100% + 32px);
    margin: -16px !important;
    padding: 10px;
  }

  .writing-main-grid,
  .writing-lower-grid {
    grid-template-columns: 1fr;
  }

  .writing-ai-panel,
  .writing-memory-card {
    grid-column: auto;
  }

  .writing-manuscripts {
    display: none;
  }

  .writing-memory-banks {
    grid-template-columns: repeat(2, 1fr);
  }
}

#characterProfile .profile-button-add {
  border: 1px solid rgba(216, 168, 74, 0.76);
  color: #fff4dc;
  background: linear-gradient(180deg, #b77925, #704313);
  box-shadow: 0 0 16px rgba(216, 168, 74, 0.2);
}

#characterProfile .profile-button-add:hover {
  background: linear-gradient(180deg, #cf9133, #86531b);
}

#characterProfile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 38%, rgba(255, 139, 32, 0.13), transparent 35%),
    radial-gradient(circle at 82% 38%, rgba(32, 83, 255, 0.15), transparent 40%);
}

#characterProfile .character-profile-page {
  position: relative;
  gap: 20px;
  min-height: calc(100vh - 125px);
  padding: clamp(24px, 3vw, 48px);
}

#characterProfile .character-profile-header,
#characterProfile .profile-toolbar,
#characterProfile .profile-view-tabs,
#characterProfile .profile-section,
#characterProfile .character-profile-empty-state {
  border: 1px solid rgba(195, 143, 61, 0.35);
  background: linear-gradient(135deg, rgba(18, 20, 33, 0.74), rgba(4, 12, 31, 0.68));
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  backdrop-filter: blur(9px) saturate(1.08);
  box-shadow: inset 0 0 28px rgba(0, 34, 83, 0.16), 0 12px 30px rgba(0, 0, 0, 0.18);
}

#characterProfile .character-profile-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 12px;
}

#characterProfile .character-profile-heading h2 {
  color: #f5f7ff;
  font-size: clamp(27px, 2.2vw, 38px);
  text-shadow: 0 0 18px rgba(26, 132, 255, 0.22);
}

#characterProfile .profile-toolbar {
  padding: 18px 22px;
  border-radius: 11px;
}

#characterProfile .profile-character-selector {
  flex: 1 1 360px;
}

#characterProfile .profile-character-selector select {
  width: min(100%, 430px);
  border-color: rgba(177, 142, 86, 0.48);
  background: rgba(3, 9, 20, 0.83);
}

#characterProfile .profile-view-tabs {
  top: 64px;
  z-index: 8;
  gap: 2px;
  margin: 0;
  padding: 8px 10px 0;
  border-radius: 10px 10px 0 0;
  border-bottom-color: rgba(24, 138, 255, 0.62);
}

#characterProfile .character-tab-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 15px;
  border-radius: 7px 7px 0 0;
  color: #d7dce6;
  font-weight: 700;
}

#characterProfile .character-tab-button.active {
  border-color: rgba(27, 147, 255, 0.62);
  border-bottom-color: #28a8ff;
  background: linear-gradient(180deg, rgba(15, 101, 214, 0.38), rgba(2, 46, 104, 0.22));
  box-shadow: inset 0 -2px #32b8ff, 0 0 18px rgba(0, 132, 255, 0.22);
}

#characterProfile .character-profile-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#characterProfile .character-profile-content[hidden] {
  display: none;
}

#characterProfile .profile-persistent-summary {
  position: relative;
  z-index: 4;
  margin: 0;
  border-color: rgba(211, 154, 65, 0.5);
  background: linear-gradient(120deg, rgba(14, 18, 31, 0.84), rgba(3, 13, 34, 0.74));
}

#characterProfile .profile-persistent-summary .profile-summary-layout {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 28px;
}

#characterProfile .profile-persistent-summary .profile-portrait-panel,
#characterProfile .profile-persistent-summary .hourbound-portrait-card {
  width: 270px;
}

#characterProfile .profile-persistent-summary .hourbound-portrait-card {
  height: 270px;
  border: 1px solid rgba(224, 172, 69, 0.58);
  box-shadow: 0 0 22px rgba(0, 109, 255, 0.25);
}

#characterProfile .profile-persistent-summary .profile-character-title {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(55, 136, 236, 0.28);
}

#characterProfile .profile-persistent-summary .profile-character-title h1 {
  color: #fff;
  font-size: clamp(28px, 3vw, 46px);
}

#characterProfile .character-profile-tab-panel.active {
  gap: 20px;
}

#characterProfile .character-profile-tab-panel .profile-section {
  border-color: rgba(125, 111, 126, 0.38);
  background: linear-gradient(135deg, rgba(24, 22, 33, 0.8), rgba(4, 13, 30, 0.72));
}

#characterProfile .character-profile-empty-state {
  min-height: 230px;
  display: grid;
  place-content: center;
  border-radius: 10px;
}

#characterProfile .character-profile-empty-state[hidden],
#characterProfile .hourbound-portrait-placeholder[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  #characterProfile {
    background-attachment: scroll;
  }

  #characterProfile .character-profile-page {
    padding: 18px;
  }

  #characterProfile .profile-view-tabs {
    top: 58px;
  }

  #characterProfile .profile-character-selector {
    flex: 0 0 auto;
  }

  #characterProfile .profile-persistent-summary .profile-summary-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  #characterProfile .profile-persistent-summary .profile-portrait-panel,
  #characterProfile .profile-persistent-summary .hourbound-portrait-card {
    width: 190px;
  }

  #characterProfile .profile-persistent-summary .hourbound-portrait-card {
    height: 190px;
  }
}

@media (max-width: 640px) {
  #characterProfile .profile-persistent-summary .profile-summary-layout {
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 14px;
  }

  #characterProfile .profile-persistent-summary .profile-portrait-panel,
  #characterProfile .profile-persistent-summary .hourbound-portrait-card {
    width: 105px;
  }

  #characterProfile .profile-persistent-summary .hourbound-portrait-card {
    height: 105px;
    border-radius: 10px;
  }

  #characterProfile .profile-persistent-summary .profile-button {
    padding: 7px 5px;
    font-size: 10px;
  }

  #characterProfile .profile-persistent-summary .profile-information-grid {
    display: none;
  }

  #characterProfile .profile-persistent-summary .profile-character-title h1 {
    font-size: 24px;
  }

  #characterProfile .profile-status-badge {
    padding: 5px 8px;
    font-size: 10px;
  }
}

/* ==========================================================
   HOURBOUND ORIGINAL ICONS + CHARACTER FORGE WORLD LAYOUT
========================================================== */

.hourbound-section-icon,
.hourbound-tab-icon {
  flex: 0 0 auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(0, 135, 255, 0.38));
}

.hourbound-section-icon {
  width: 68px;
  height: 62px;
}

.hourbound-tab-icon {
  width: 30px;
  height: 30px;
}

#addCharacterSection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% + 48px);
  max-width: none;
  min-height: calc(100vh - 64px);
  margin: -24px !important;
  padding: clamp(24px, 3vw, 48px);
  border: 1px solid rgba(211, 150, 50, 0.42);
  border-radius: 12px;
  background-image:
    linear-gradient(rgba(2, 6, 18, 0.3), rgba(2, 6, 18, 0.5)),
    url("/portal_ui/assets/character-profile/background-hourbound-3.png");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#addCharacterSection::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 35%, rgba(255, 139, 32, 0.13), transparent 35%),
    radial-gradient(circle at 85% 36%, rgba(32, 83, 255, 0.16), transparent 42%);
}

#addCharacterSection .character-editor-header,
#addCharacterSection .character-editor-identity,
#addCharacterSection .character-tabs,
#addCharacterSection .character-tab-panel.active,
#addCharacterSection .character-form-actions,
#addCharacterSection #characterResult {
  position: relative;
  z-index: 1;
}

#addCharacterSection .character-editor-header,
#addCharacterSection .character-editor-identity,
#addCharacterSection .character-tab-panel.active {
  border: 1px solid rgba(195, 143, 61, 0.38);
  background: linear-gradient(135deg, rgba(18, 20, 33, 0.79), rgba(4, 12, 31, 0.72));
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
  backdrop-filter: blur(9px) saturate(1.08);
  box-shadow: inset 0 0 28px rgba(0, 34, 83, 0.18), 0 12px 30px rgba(0, 0, 0, 0.2);
}

#addCharacterSection .character-editor-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 22px 26px;
  border-radius: 12px;
}

#addCharacterSection .character-editor-header h2,
#addCharacterSection .character-editor-header p {
  margin: 0;
}

#addCharacterSection .character-editor-header h2 {
  color: #f5f7ff;
  font-size: clamp(27px, 2.2vw, 38px);
}

#addCharacterSection .character-form-intro {
  margin-top: 6px;
}

#addCharacterSection .character-editor-identity {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border-radius: 12px;
}

#addCharacterSection .character-editor-identity[hidden] {
  display: none !important;
}

.character-editor-portrait-frame {
  display: grid;
  flex: 0 0 126px;
  width: 126px;
  height: 126px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(34, 157, 255, 0.64);
  border-radius: 12px;
  color: #aab6c8;
  background: rgba(2, 8, 20, 0.9);
  box-shadow: 0 0 22px rgba(0, 120, 255, 0.18);
}

.character-editor-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-editor-portrait-frame img[hidden],
.character-editor-portrait-frame div[hidden] {
  display: none !important;
}

.character-editor-eyebrow {
  color: #36b8ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.character-editor-identity-copy h3 {
  margin: 6px 0;
  color: #f7d28a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2.2vw, 36px);
}

.character-editor-identity-copy p {
  margin: 0;
  color: #b8c3d3;
}

#addCharacterSection > .character-tabs {
  gap: 3px;
  margin: 0 0 20px;
  padding: 8px 10px 0;
  border: 1px solid rgba(195, 143, 61, 0.32);
  border-bottom-color: rgba(24, 138, 255, 0.62);
  border-radius: 10px 10px 0 0;
  background: linear-gradient(135deg, rgba(18, 20, 33, 0.78), rgba(4, 12, 31, 0.72));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

#addCharacterSection .character-tab-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 8px;
  color: #d7dce6;
  font-weight: 700;
}

#addCharacterSection .character-tab-button.active {
  border-color: rgba(27, 147, 255, 0.62);
  border-bottom-color: #28a8ff;
  background: linear-gradient(180deg, rgba(15, 101, 214, 0.38), rgba(2, 46, 104, 0.22));
  box-shadow: inset 0 -2px #32b8ff, 0 0 18px rgba(0, 132, 255, 0.22);
}

#addCharacterSection .character-tab-panel.active {
  padding: clamp(20px, 2.2vw, 32px);
}

@media (max-width: 720px) {
  .hourbound-section-icon {
    width: 52px;
    height: 48px;
  }

  .hourbound-tab-icon {
    width: 25px;
    height: 25px;
  }

  #addCharacterSection {
    padding: 16px;
    background-attachment: scroll;
  }

  #addCharacterSection .character-editor-identity {
    gap: 14px;
    padding: 12px;
  }

  .character-editor-portrait-frame {
    flex-basis: 88px;
    width: 88px;
    height: 88px;
  }

  .character-editor-identity-copy p {
    display: none;
  }
}
.field-hint {
  color: #77bfff;
  font-size: 0.78rem;
  font-weight: 400;
  margin-left: 0.4rem;
}

.character-tab-panel select[multiple] {
  min-height: 10rem;
  padding: 0.45rem;
  background: rgba(3, 9, 22, 0.92);
}

.character-tab-panel select[multiple] option {
  padding: 0.38rem 0.55rem;
  border-radius: 4px;
}

.character-tab-panel select[multiple] option:checked {
  color: #fff;
  background: linear-gradient(90deg, #0756b8, #168eff);
}

.lookup-search {
  margin-bottom: 0.45rem;
  padding-left: 2.25rem;
  background-image: linear-gradient(45deg, transparent 48%, #6fc6ff 48%, #6fc6ff 55%, transparent 55%);
  background-position: 1rem 50%;
  background-repeat: no-repeat;
  background-size: 0.55rem 0.55rem;
}

.lookup-search::placeholder {
  color: #7990aa;
}

.legacy-character-notes {
  margin-top: 1.4rem;
  padding: 0.8rem 1rem 1rem;
  border: 1px solid rgba(86, 166, 232, 0.24);
  border-radius: 8px;
  background: rgba(3, 9, 22, 0.46);
}

.legacy-character-notes summary {
  color: #8fcfff;
  cursor: pointer;
  font-weight: 600;
}

.legacy-character-notes[open] summary {
  margin-bottom: 0.85rem;
}

.character-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.2rem;
}

.character-form-grid > div {
  min-width: 0;
}

@media (max-width: 800px) {
  .character-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Dragon Sanctum */
#dragonSanctum {
  position: relative;
  display: grid;
  grid-template-columns: clamp(190px, 15vw, 238px) minmax(0, 1fr);
  min-height: calc(100vh - 136px);
  margin: -32px;
  padding: 18px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: #02070c;
  background-image: url("/portal_ui/assets/dragons/dragon-sanctum-background.png");
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.72);
  isolation: isolate;
}

#dragonSanctum.hidden {
  display: none;
}

.dragon-sanctum-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 4, 8, 0.48) 0 16%, transparent 35%),
    linear-gradient(180deg, rgba(0, 3, 8, 0.28), transparent 35%, rgba(0, 3, 8, 0.24));
}

.dragon-sanctum-sidebar,
.dragon-sanctum-workspace,
.dragon-sanctum-plaque {
  position: relative;
  z-index: 1;
}

.dragon-sanctum-sidebar {
  display: flex;
  min-height: calc(100vh - 172px);
  flex-direction: column;
  padding: 12px 10px 10px;
  border: 1px solid rgba(194, 132, 49, 0.68);
  background: linear-gradient(180deg, rgba(1, 6, 11, 0.78), rgba(2, 8, 14, 0.68));
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.52), inset 0 0 24px rgba(36, 111, 165, 0.07);
}

.dragon-sanctum-brand {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  padding: 6px 4px 14px;
  color: #d99a40;
  font-family: Georgia, serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dragon-sanctum-brand img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0, 127, 255, 0.75));
}

.dragon-sanctum-brand span {
  font-size: 1.12rem;
}

.dragon-sanctum-brand small {
  font-size: 0.58rem;
  color: #bf8138;
}

.dragon-sanctum-nav {
  display: grid;
  gap: 5px;
}

.dragon-sanctum-nav button {
  display: grid;
  grid-template-columns: 35px 1fr;
  min-height: 42px;
  align-items: center;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(170, 113, 39, 0.48);
  border-radius: 0;
  color: #ede6dc;
  background: rgba(2, 7, 12, 0.82);
  font-family: Georgia, serif;
  font-size: clamp(0.66rem, 0.75vw, 0.8rem);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.dragon-sanctum-nav button span {
  color: #d3933e;
  font-size: 1.22rem;
  text-align: center;
}

.dragon-sanctum-nav .dragon-nav-icon {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-image: url("/portal_ui/assets/dragons/dragon-platform-icons.png");
  background-repeat: no-repeat;
  background-size: 460px 307px;
  filter: drop-shadow(0 0 4px rgba(27, 135, 215, 0.55));
}

.dragon-nav-icon.icon-breed { background-position: -13px -19px; }
.dragon-nav-icon.icon-age { background-position: -61px -19px; }
.dragon-nav-icon.icon-personality { background-position: -108px -19px; }
.dragon-nav-icon.icon-temperament { background-position: -153px -19px; }
.dragon-nav-icon.icon-social { background-position: -198px -19px; }
.dragon-nav-icon.icon-loyalty { background-position: -243px -19px; }
.dragon-nav-icon.icon-trust { background-position: -288px -19px; }
.dragon-nav-icon.icon-aggression { background-position: -332px -19px; }
.dragon-nav-icon.icon-protectiveness { background-position: -377px -19px; }
.dragon-nav-icon.icon-communication { background-position: -418px -19px; }
.dragon-nav-icon.icon-bond { background-position: -124px -92px; }

.dragon-sanctum-nav button:hover,
.dragon-sanctum-nav button.active {
  border-color: #d89a45;
  color: #fff;
  background: linear-gradient(90deg, rgba(136, 83, 24, 0.43), rgba(2, 18, 30, 0.9));
  box-shadow: inset 3px 0 #d99a40, 0 0 14px rgba(15, 125, 220, 0.14);
}

.dragon-sanctum-utilities {
  display: flex;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(180, 120, 42, 0.3);
}

.dragon-sanctum-utilities button {
  min-width: 44px;
  margin: 0;
  padding: 8px;
  color: #d99a40;
  background: rgba(1, 8, 15, 0.92);
  border: 1px solid rgba(180, 120, 42, 0.38);
}

.dragon-sanctum-workspace {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(16px, 2.3vw, 38px);
}

.dragon-sanctum-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 22px;
  border: 1px solid rgba(188, 127, 44, 0.48);
  background: linear-gradient(90deg, rgba(1, 7, 13, 0.68), rgba(3, 14, 25, 0.48));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.dragon-sanctum-kicker,
.dragon-character-picker > span {
  display: block;
  margin-bottom: 5px;
  color: #d6953d;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.dragon-sanctum-header h2 {
  margin: 0 0 5px;
  color: #f4dfbc;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 2.3vw, 2.6rem);
}

.dragon-sanctum-header p {
  max-width: 620px;
  margin: 0;
  color: #aebdca;
}

.dragon-character-picker {
  width: min(340px, 38%);
  flex: 0 0 auto;
}

.dragon-profile-selector {
  width: min(390px, 42%);
  flex: 0 0 auto;
}

.dragon-profile-selector .dragon-character-picker { width: 100%; }
.dragon-profile-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dragon-profile-actions button { margin: 0; padding: 7px 12px; border-color: rgba(211, 148, 59, 0.58); background: rgba(92, 53, 16, 0.86); }
.dragon-profile-actions button.danger { border-color: rgba(227, 76, 76, 0.65); background: rgba(112, 26, 29, 0.88); }
.dragon-profile-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

.profile-dragon-relationship {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 14px 16px;
  border: 1px solid rgba(211, 154, 65, 0.42);
  color: #e9edf2;
  background: linear-gradient(120deg, rgba(88, 50, 14, 0.35), rgba(3, 20, 40, 0.72));
  text-align: left;
}
.profile-dragon-relationship > span { color: #d99a40; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; }
.profile-dragon-relationship strong { display: block; margin: 4px 0; color: #f1d7a8; font-family: Georgia, serif; font-size: 1.15rem; }
.profile-dragon-relationship small { color: #6fc2f0; }
.profile-dragon-relationship p { margin: 9px 0 0; color: #aebdca; }
.profile-dragon-relationship:hover { border-color: #d99a40; box-shadow: 0 0 18px rgba(36, 136, 205, 0.2); }

.dragon-character-picker select,
.dragon-sanctum-panel input,
.dragon-sanctum-panel textarea,
.dragon-sanctum-panel select {
  border-color: rgba(196, 133, 46, 0.56);
  border-radius: 2px;
  color: #f3eee7;
  background: rgba(1, 7, 13, 0.94);
}

.dragon-sanctum-card {
  width: min(720px, 78%);
  margin: clamp(22px, 6vh, 72px) 0 90px auto;
  padding: clamp(20px, 2.8vw, 36px);
  border: 1px solid rgba(195, 132, 43, 0.62);
  background: linear-gradient(145deg, rgba(1, 7, 13, 0.7), rgba(3, 16, 27, 0.58));
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.62), inset 0 0 35px rgba(13, 81, 129, 0.08);
  backdrop-filter: blur(2px);
}

.dragon-sanctum-panel {
  min-height: 255px;
}

.dragon-sanctum-panel h3 {
  margin: 3px 0 8px;
  color: #eed5aa;
  font-family: Georgia, serif;
  font-size: 1.55rem;
}

.dragon-sanctum-panel > p {
  margin: 0 0 20px;
  color: #91a5b7;
}

.dragon-panel-number {
  float: right;
  color: rgba(49, 151, 224, 0.42);
  font-family: Georgia, serif;
  font-size: 2.7rem;
}

.dragon-sanctum-panel select[multiple] {
  min-height: 225px;
}

.dragon-sanctum-panel select option:checked {
  color: #fff;
  background: linear-gradient(90deg, #774516, #1168a6);
}

.dragon-sanctum-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid rgba(188, 127, 44, 0.3);
}

.dragon-sanctum-actions p {
  margin: 0;
  color: #9eb3c5;
}

.dragon-sanctum-actions button {
  flex: 0 0 auto;
  border-color: #d5943e;
  color: #fff5e7;
  background: linear-gradient(180deg, #9d6228, #523014);
  box-shadow: 0 0 18px rgba(211, 143, 53, 0.2);
}

.dragon-sanctum-plaque {
  position: absolute;
  right: 23%;
  bottom: 18px;
  min-width: 260px;
  padding: 9px 28px;
  border: 1px solid rgba(198, 136, 48, 0.55);
  color: #df9c42;
  background: rgba(1, 7, 12, 0.92);
  font-family: Georgia, serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

@media (max-width: 980px) {
  #dragonSanctum {
    grid-template-columns: 156px minmax(0, 1fr);
  }

  .dragon-sanctum-brand img {
    width: 58px;
    height: 58px;
  }

  .dragon-sanctum-nav button {
    grid-template-columns: 27px 1fr;
    font-size: 0.61rem;
  }

  .dragon-sanctum-card {
    width: 92%;
  }
}

@media (max-width: 700px) {
  #dragonSanctum {
    display: block;
    min-height: 100vh;
    margin: -16px;
    padding: 10px;
    background-position: 58% center;
  }

  #dragonSanctum.hidden {
    display: none;
  }

  .dragon-sanctum-sidebar {
    min-height: 0;
  }

  .dragon-sanctum-brand,
  .dragon-sanctum-utilities {
    display: none;
  }

  .dragon-sanctum-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 5px;
  }

  .dragon-sanctum-nav button {
    display: flex;
    min-width: max-content;
    min-height: 40px;
    gap: 6px;
  }

  .dragon-sanctum-workspace {
    padding: 12px 0 60px;
  }

  .dragon-sanctum-header {
    flex-direction: column;
  }

  .dragon-character-picker,
  .dragon-profile-selector,
  .dragon-sanctum-card {
    width: 100%;
  }

  .dragon-sanctum-card {
    margin: 14px 0;
  }

  .dragon-sanctum-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dragon-sanctum-plaque {
    display: none;
  }
}

/* World Atlas */
#worldAtlas {
  position: relative;
  display: grid;
  grid-template-columns: minmax(285px, 350px) minmax(180px, 1fr) minmax(300px, 390px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  width: calc(100% + 48px);
  max-width: none;
  min-height: calc(100vh - 64px);
  margin: -24px !important;
  padding: 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #07101a url("/portal_ui/assets/world-atlas/vraeccathae-map-3d.png") center/cover no-repeat;
  isolation: isolate;
}

#worldAtlas.hidden { display: none; }

.world-atlas-overlay {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 6, 14, 0.16), transparent 30%, rgba(0, 6, 14, 0.2));
}

.world-atlas-heading,
.world-atlas-browser,
.world-atlas-details,
.world-atlas-legend {
  border: 1px solid rgba(190, 128, 42, 0.64);
  color: #ecdfca;
  background: linear-gradient(145deg, rgba(1, 8, 15, 0.76), rgba(3, 15, 27, 0.63));
  box-shadow: 0 15px 38px rgba(0, 0, 0, 0.42), inset 0 0 25px rgba(18, 107, 166, 0.08);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.world-atlas-heading {
  grid-column: 1 / -1;
  display: flex;
  width: min(720px, 70%);
  align-items: center;
  justify-self: center;
  gap: 18px;
  padding: 10px 22px;
  text-align: center;
}

.world-atlas-heading > div { flex: 1; }
.world-atlas-heading span,
.world-atlas-detail-kicker {
  color: #d99a40;
  font-family: Georgia, serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.world-atlas-heading h2 {
  margin: 2px 0;
  color: #f2d7a6;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.world-atlas-heading p { margin: 0; color: #a9bdcb; font-size: 0.78rem; }
.world-atlas-back {
  flex: 0 0 auto;
  min-width: 42px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(204, 142, 52, 0.52);
  color: #e2a348;
  background: rgba(1, 9, 17, 0.74);
}

.world-atlas-browser {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding: 17px;
}

.world-atlas-browser h3,
.world-atlas-details h3 {
  margin: 0 0 15px;
  color: #f0d39d;
  font-family: Georgia, serif;
  font-size: 1.35rem;
}

.world-atlas-browser label {
  color: #d5ba8c;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.world-atlas-browser input,
.world-atlas-browser select {
  margin: 5px 0 11px;
  border-color: rgba(190, 128, 42, 0.55);
  border-radius: 2px;
  background: rgba(1, 8, 16, 0.9);
}

.world-atlas-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.world-atlas-results {
  max-height: calc(100vh - 375px);
  margin-top: 5px;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-color: #a76a25 rgba(2, 11, 20, 0.72);
}

.world-atlas-result {
  display: block;
  width: 100%;
  margin: 0 0 6px;
  padding: 9px 11px;
  border: 1px solid rgba(173, 116, 38, 0.34);
  border-radius: 0;
  color: #e9e1d7;
  background: rgba(1, 8, 15, 0.72);
  text-align: left;
}

.world-atlas-result:hover,
.world-atlas-result.active {
  border-color: #d99a40;
  background: linear-gradient(90deg, rgba(126, 77, 22, 0.64), rgba(1, 13, 24, 0.78));
  box-shadow: inset 3px 0 #d99a40;
}

.world-atlas-result span { display: block; color: #4eb7f3; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.09em; }
.world-atlas-result strong { display: block; margin: 2px 0; font-family: Georgia, serif; font-size: 0.95rem; }
.world-atlas-result small { color: #92a3b1; font-size: 0.7rem; }
.world-atlas-no-results { color: #aebdca; text-align: center; }

.world-atlas-details {
  grid-column: 3;
  grid-row: 2;
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
}

.world-atlas-empty { display: grid; height: 100%; place-content: center; text-align: center; }
.world-atlas-empty > span { color: #36adf2; font-size: 2.2rem; text-shadow: 0 0 18px #1689cf; }
.world-atlas-empty p { color: #9fb0be; }
.world-atlas-breadcrumb { color: #6fbbe8; font-size: 0.73rem; line-height: 1.55; }
.world-atlas-breadcrumb span { color: #d99a40; }
.world-atlas-description { margin: 18px 0; color: #c5ced5; line-height: 1.6; }
.world-atlas-metadata { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0; }
.world-atlas-metadata div { padding: 8px; border: 1px solid rgba(68, 139, 187, 0.22); background: rgba(1, 9, 17, 0.48); }
.world-atlas-metadata dt { color: #c88b39; font-size: 0.62rem; text-transform: uppercase; }
.world-atlas-metadata dd { margin: 3px 0 0; color: #e2e8ec; font-size: 0.8rem; }
.world-atlas-aliases { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.world-atlas-aliases span { width: 100%; color: #c88b39; font-size: 0.65rem; text-transform: uppercase; }
.world-atlas-aliases em { padding: 3px 7px; border: 1px solid rgba(70, 162, 215, 0.28); color: #b8d6e7; font-size: 0.7rem; font-style: normal; }
.world-atlas-children { margin-top: 18px; }
.world-atlas-children h4 { margin: 0 0 8px; color: #d8b878; font-family: Georgia, serif; }
.world-atlas-children button { display: flex; width: 100%; justify-content: space-between; margin: 4px 0; padding: 7px 9px; border-color: rgba(188, 127, 44, 0.3); border-radius: 2px; color: #e7e1d8; background: rgba(1, 9, 17, 0.58); text-align: left; }
.world-atlas-children button span { color: #59afe0; font-size: 0.66rem; }
.world-atlas-children p { color: #8799a7; }
.world-atlas-details > footer { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(190, 128, 42, 0.28); }
.world-atlas-details > footer span { display: block; color: #c88b39; font-size: 0.62rem; text-transform: uppercase; }
.world-atlas-details > footer strong { color: #aebdc8; font-size: 0.7rem; font-weight: 400; }

.hourbound-editor-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #a86c24;
  border-radius: 4px;
  color: #e8edf1;
  background: rgba(2, 10, 19, 0.98);
  box-shadow: 0 0 35px rgba(0, 120, 210, 0.28);
  overflow: auto;
}
.hourbound-editor-dialog::backdrop { background: rgba(0, 4, 10, 0.82); backdrop-filter: blur(4px); }
.hourbound-editor-dialog form { padding: 22px; }
.hourbound-editor-dialog header,
.hourbound-editor-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hourbound-editor-dialog header { margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid rgba(185, 123, 39, 0.42); }
.hourbound-editor-dialog header span { color: #42b8f4; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hourbound-editor-dialog header h3 { margin: 3px 0 0; color: #efd39b; font-family: Georgia, serif; }
.hourbound-editor-dialog footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(185, 123, 39, 0.35); justify-content: flex-end; }
.hourbound-editor-dialog label { display: grid; gap: 6px; color: #d7bd8f; font-size: 0.75rem; }
.hourbound-editor-dialog input,
.hourbound-editor-dialog select,
.hourbound-editor-dialog textarea { width: 100%; border: 1px solid rgba(83, 139, 180, 0.44); color: #edf4f7; background: #040c16; }
.hourbound-editor-dialog textarea { min-height: 82px; resize: vertical; }
.hourbound-editor-dialog button { border: 1px solid rgba(194, 130, 42, 0.65); color: #f0dcc0; background: rgba(24, 42, 58, 0.9); }
.hourbound-editor-dialog footer button:last-child { background: linear-gradient(#b36f22, #71420e); }
.dialog-close-button { min-width: 36px; padding: 7px 10px; font-size: 1.1rem; }
.relationship-form-grid,
.location-profile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.relationship-mutual-control { display: flex !important; align-items: center; align-self: end; min-height: 40px; grid-auto-flow: column; justify-content: start; }
.relationship-mutual-control input { width: auto; }
.location-profile-source { grid-column: 1 / -1; }

.profile-relationship-group { display: grid; gap: 10px; margin-bottom: 18px; }
.profile-relationship-group > h4 { margin: 0 0 2px; color: #e5bd71; font-family: Georgia, serif; }
.profile-entity-relationship { padding: 13px; border: 1px solid rgba(61, 143, 194, 0.28); background: rgba(1, 10, 19, 0.64); }
.relationship-record-link { display: grid; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.relationship-record-link span { color: #48b9f0; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.relationship-record-link strong { margin: 3px 0; color: #f0d6a4; font-family: Georgia, serif; font-size: 1rem; }
.relationship-record-link small { color: #a9bac6; }
.relationship-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.relationship-badges em { padding: 3px 7px; border: 1px solid rgba(178, 119, 41, 0.45); color: #d7b477; font-size: 0.67rem; font-style: normal; }
.profile-entity-relationship > p { color: #bdc8cf; line-height: 1.5; }
.profile-entity-relationship footer { display: flex; gap: 7px; justify-content: flex-end; }
.profile-entity-relationship footer button { padding: 6px 12px; }
.relationship-delete-button { border-color: rgba(205, 71, 71, 0.62) !important; color: #ffc1c1 !important; }

.world-atlas-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.world-atlas-section-heading button { padding: 6px 10px; border-color: #a76a25; color: #edca8b; background: rgba(71, 43, 12, 0.7); }
.world-atlas-lore,
.world-atlas-events,
.world-atlas-relationships { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(190, 128, 42, 0.28); }
.world-atlas-lore h4,
.world-atlas-events h4,
.world-atlas-relationships h4 { margin: 0 0 9px; color: #d8b878; font-family: Georgia, serif; }
.world-atlas-lore dl { display: grid; gap: 7px; margin: 10px 0; }
.world-atlas-lore dl div { padding: 9px; border-left: 2px solid rgba(66, 173, 232, 0.55); background: rgba(1, 9, 17, 0.52); }
.world-atlas-lore dt { color: #d09649; font-size: 0.65rem; text-transform: uppercase; }
.world-atlas-lore dd { margin: 4px 0 0; color: #c8d2d8; font-size: 0.76rem; line-height: 1.5; }
.world-atlas-lore > p,
.world-atlas-events > p,
.world-atlas-relationships p { color: #8fa3b1; font-size: 0.75rem; }
.world-atlas-lore small { color: #7f96a6; }
.world-atlas-events article { position: relative; margin: 6px 0; padding: 9px; border: 1px solid rgba(65, 133, 177, 0.22); background: rgba(1, 9, 17, 0.52); }
.world-atlas-events article span { display: block; color: #43b3ec; font-size: 0.6rem; text-transform: uppercase; }
.world-atlas-events article strong { color: #e8d5b2; font-size: 0.82rem; }
.world-atlas-events article p { margin: 6px 0; color: #adbdc7; font-size: 0.72rem; line-height: 1.45; }
.world-atlas-events article em { color: #cc9348; font-size: 0.65rem; font-style: normal; }
#worldAtlasRelationshipList { display: grid; gap: 5px; }
#worldAtlasRelationshipList button { display: grid; padding: 8px; border-color: rgba(180, 121, 43, 0.35); color: #dce5ea; background: rgba(1, 9, 17, 0.55); text-align: left; }
#worldAtlasRelationshipList button span { color: #42b5ef; font-size: 0.6rem; text-transform: uppercase; }
#worldAtlasRelationshipList button small { color: #a2b4bf; }

.world-atlas-legend {
  grid-column: 1 / -1;
  display: flex;
  width: min(520px, 60%);
  justify-self: center;
  justify-content: space-around;
  padding: 8px 18px;
}

.world-atlas-legend div { display: flex; align-items: baseline; gap: 7px; }
.world-atlas-legend strong { color: #e3a047; font-family: Georgia, serif; font-size: 1.15rem; }
.world-atlas-legend span { color: #9eb1bf; font-size: 0.68rem; text-transform: uppercase; }

@media (max-width: 1000px) {
  #worldAtlas { grid-template-columns: minmax(260px, 330px) 1fr minmax(280px, 340px); }
  .world-atlas-heading { width: 80%; }
}

@media (max-width: 760px) {
  #worldAtlas {
    display: flex;
    width: calc(100% + 48px);
    min-height: calc(100vh - 64px);
    flex-direction: column;
    overflow-y: auto;
    background-position: center top;
  }
  #worldAtlas.hidden { display: none; }
  .world-atlas-heading,
  .world-atlas-legend { width: 100%; }
  .world-atlas-browser,
  .world-atlas-details { flex: 0 0 auto; }
  .world-atlas-results { max-height: 340px; }
  .world-atlas-details { min-height: 390px; }
  .relationship-form-grid,
  .location-profile-form-grid { grid-template-columns: 1fr; }
  .location-profile-source { grid-column: auto; }
}