/* Themed plastic walkie face-plate — colors come from CSS variables (see themes.ts). */
:root {
  --bg0: #F0C41A;
  --bg1: #E8B810;
  --panel: #FFF3A8;
  --line: #C49212;
  --line-hot: #8A6A0C;
  --lcd: #1CFF4A;
  --lcd-dim: #0A7A28;
  --accent: #1A1A16;
  --accent-dim: #3A3420;
  --steel: #5A5340;
  --text: #1A1A16;
  --muted: #5A5340;
  --danger: #B71C1C;
  --ok: #1B7A2A;
  --ptt: #C62828;
  --ptt-hot: #E53935;
  --face-glow: #FFE566;
  --face-shade: #D4A017;
  --face-top: #F8D84E;
  --face-mid: #F0C41A;
  --face-bot: #EBB50E;
  --panel-input: #FFF8D0;
  --btn-face: #FFE566;
  --btn-border: #8A6A0C;
  --brand-shadow: #FFE97A;
  color-scheme: light;
}

html,
body,
#root {
  background: var(--bg0) !important;
  background-image:
    radial-gradient(circle at 20% 10%, var(--face-glow) 0%, transparent 42%),
    radial-gradient(circle at 80% 90%, var(--face-shade) 0%, transparent 45%),
    linear-gradient(165deg, var(--face-top) 0%, var(--face-mid) 45%, var(--face-bot) 100%) !important;
  color: var(--text) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.app {
  background: linear-gradient(180deg, var(--face-top), var(--face-bot)) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 1px 0 var(--brand-shadow),
    inset 0 -1px 0 var(--line) !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.app::before,
.app::after {
  display: none !important;
  content: none !important;
}

.brand {
  border-bottom: 2px solid var(--line) !important;
}
.brand h1 {
  color: var(--text) !important;
  text-shadow: 0 1px 0 var(--brand-shadow) !important;
}
.brand p,
.sign-out-link {
  color: var(--muted) !important;
}

.lcd {
  background: #0A120A !important;
  border: 3px solid #2A2A24 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 12px #000, 0 2px 0 var(--brand-shadow) !important;
}

.panel,
.field input,
.field textarea,
textarea,
input {
  background: var(--panel-input) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.btn {
  background: var(--btn-face) !important;
  border: 2px solid var(--btn-border) !important;
  color: var(--text) !important;
}
.btn.active,
.btn.primary {
  background: var(--accent) !important;
  color: var(--bg0) !important;
  border-color: var(--accent) !important;
}

.tabs {
  border-color: var(--line) !important;
}

.ptt-btn,
button.ptt,
.ptt,
.ptt-main {
  background: linear-gradient(180deg, var(--ptt-hot), var(--ptt)) !important;
  border: 3px solid color-mix(in srgb, var(--ptt) 70%, #000) !important;
  border-radius: 0 !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--ptt-hot) 60%, #fff), 0 4px 0 color-mix(in srgb, var(--ptt) 70%, #000) !important;
}

.speaker-rect {
  border: 0 !important;
  border-right: 3px solid var(--line) !important;
  border-radius: 0 !important;
  background: var(--bg0) !important;
}

.speaker-grille-css {
  background-color: var(--bg0) !important;
  background-image: repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--text) 75%, transparent) 0 8px,
    var(--bg0) 8px 13px
  ) !important;
}

.speaker-rect img {
  display: none !important;
}

.walkie-bottom {
  border-top-color: var(--line) !important;
  background: var(--bg0) !important;
}

.ptt-main {
  border-radius: 0 !important;
}

.voice-note {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
}
.voice-play {
  background: var(--accent) !important;
  color: var(--bg0) !important;
}
.error {
  color: var(--danger) !important;
}

.settings-sheet,
.profile-sheet,
.media-splash-stage {
  border-color: var(--line) !important;
}
.settings-head,
.profile-head,
.media-splash-bar {
  background: linear-gradient(180deg, var(--face-top), var(--face-bot)) !important;
  border-bottom-color: var(--line-hot) !important;
  color: var(--text) !important;
}
.profile-avatar {
  background: var(--panel) !important;
  border-color: var(--line-hot) !important;
  color: var(--text) !important;
}
.trophy-card,
.profile-wall-card,
.theme-swatch {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
.chat-link {
  color: color-mix(in srgb, var(--accent) 40%, #1565C0) !important;
}