/* Readable UI surfaces over the animated scene. */
:root {
  --text-primary: #f3f6fb;
  --text-secondary: #c3cddb;
  --text-muted: #acbacd;
  --surface-panel: #101722;
  --surface-field: #202c3c;
  --line: #465469;
  color: var(--text-primary);
}
.control-section, .header-actions {
  background: var(--surface-panel);
  border-color: #465469;
  box-shadow: 0 4px 18px #0005;
}
.control-section > summary { font-size: 13px; color: var(--text-primary); }
.control-section > summary::after, .section-number, .summary-meta {
  color: var(--text-secondary);
}
.summary-meta, .section-number { font-size: 10px; }
.section-number { border-color: #526077; }
.section-body label { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.section-body select, .section-body input[type=number], .section-body input[type=text] {
  color: var(--text-primary);
  background: var(--surface-field);
  border-color: #596b82;
  font-size: 13px;
}
button { color: var(--text-primary); font-size: 12px; font-weight: 600; border-color: #526077; background: #202b3a; }
button:hover, button.active { background: #36404d; border-color: #efb37e; color: #ffdab6; }
button:disabled { opacity: 1; color: #aeb9c9; background: #192230; border-color: #39475a; }
.header-actions button { font-size: 12px; color: var(--text-primary); }
.header-actions kbd { color: #d9e2ed; background: #29364a; border-color: #57677d; font-size: 10px; }
.skin-picker-trigger { background: #202c3c; border-color: #596b82; }
.skin-picker-trigger strong { font-size: 13px; line-height: 1.5; }
.skin-picker-trigger small { font-size: 10px !important; color: #ffd1a6 !important; }
.property-card { background: #182231; border-color: #3d4d62; }
.range-label output { color: #fff; font-size: 12px; }
.range-label > span, .wear-scale, .fine-control > summary { color: var(--text-secondary); font-size: 11px; }
.fine-control { border-color: #43536a; }
.fine-control > summary span { color: #ffd1a6; }
.subheading { color: #e6edf7; font-size: 11px; }
.subheading span { color: var(--text-muted); font-size: 10px; }
.hint, .inspect-status, .scene-option small, .sticker-list .empty,
.sticker-list:empty::after, .sticker-scratch { color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.sticker-item { background: #1d2939; border-color: #46566d; font-size: 12px; }
.sticker-scratch { font-size: 11px; }
.inspector-eyebrow { color: #e3ebf7; font-size: 10px; text-shadow: 0 1px 4px #000; }
.brand small { color: #c8d4e5; font-size: 10px; }
.scene-caption {
  padding: 14px 18px;
  background: #0c1421ed;
  border: 1px solid #536176;
  border-radius: 9px;
  max-width: calc(100vw - 410px);
}
.scene-caption h1 { color: #fff; }
.scene-caption p { color: #dbe4f0; line-height: 1.5; overflow-wrap: anywhere; }
.scene-kicker { color: #cbd8e9; font-size: 11px; }
.scene-tags span { color: #d6e0ed; background: #202c3e; border-color: #586981; font-size: 11px; }
.scene-tags span:first-child { color: #ffdab6; background: #34281f; border-color: #a17c5e; }
.viewer-footer { color: #e0e8f3; background: #0d1521f5; padding: 0 12px; border-color: #4a596e; font-size: 11px; }
.viewer-footer small, .reticle, .reticle b { color: #c3d0e2; font-size: 11px; }
#skinPicker, #weaponPicker, #stickerPicker { background: #101823; border-color: #5b6c84; }
.skin-picker-heading small, .skin-picker-count, .skin-picker-footer { color: var(--text-secondary); font-size: 12px; }
.skin-picker-toolbar input, .skin-picker-toolbar select { background: #202c3c; color: #f3f6fb; border-color: #63748c; font-size: 13px; }
input::placeholder { color: #bac7d9; opacity: 1; }
.skin-card { background: #1d2939; border-left-color: #4b5b73; border-right-color: #4b5b73; border-bottom-color: #4b5b73; }
.skin-card-caption { background: linear-gradient(transparent, #0b1321 35%); padding-top: 24px; }
.skin-card-caption strong, .sticker-card .skin-card-caption strong { color: #fff; font-size: 12px; }
.skin-card-caption small { color: #cfdbea; font-size: 11px; }
.skin-card-image-placeholder, .skin-picker-empty { color: #c8d5e6; font-size: 12px; }
.skin-card .skin-card-badge, .skin-card-status { color: #e1e9f5; background: #111c2d; font-size: 11px; }
.tex-debug { color: #e0e8f3; background: #101722; border-color: #5c6b82; font-size: 12px; }
.tex-debug span { color: #bfcde0; }
@media (max-width: 1050px) {
  .header-actions button { font-size: 11px; }
  .scene-caption { max-width: calc(100vw - 350px); }
}
@media (max-width: 700px) {
  .brand small { font-size: 8px; letter-spacing: 1.8px; }
  .header-actions button { font-size: 11px; }
  .scene-caption { padding: 10px 12px; max-width: calc(100vw - 40px); }
  .scene-caption h1 { font-size: 20px; }
  .scene-kicker, .scene-tags span { font-size: 10px; }
  .scene-caption p { font-size: 12px; }
  .viewer-footer { padding: 0 6px; font-size: 10px; }
  .reticle, .reticle b { font-size: 10px; }
  .skin-card-caption strong { font-size: 12px; }
}