/* Lumora TV · Aurora. Layout and remote-control sizing come from the base styles. */
:root {
  --aurora-ink: #f2fcfc;
  --aurora-muted: #b8d3d4;
  --aurora-edge: #c4f6ed4a;
  --aurora-focus: #a6fff0;
  --aurora-glass: linear-gradient(145deg, #defff522, #57a4a015 42%, #071f2a70);
  --aurora-selection: linear-gradient(133deg, #a9fce74d, #55c6bd2b 52%, #edb78d42);
  --aurora-depth: inset 0 1px #f1fffa44, inset 0 -1px #c1f6e525, 0 14px 34px #03141760;
}

html, body {
  color: var(--aurora-ink);
  background: #07181d;
}

#scene {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 7% 87%, #1b746f 0%, transparent 54%),
    radial-gradient(ellipse at 98% 13%, #644a38 0%, transparent 43%),
    radial-gradient(ellipse at 60% 3%, #29595f 0%, transparent 54%),
    linear-gradient(118deg, #0a2129, #0a2630 54%, #111e2b);
}

#scene::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -52% -12% 20% -25%;
  border-radius: 50%;
  transform: rotate(-20deg);
  background: radial-gradient(ellipse at 50% 42%, transparent 51%, #60918d3b 56%, #a6fff06b 59%, #5bb4aa1d 63%, transparent 68%);
  pointer-events: none;
}

.streak, .brand::after, .channel::after, .cinema {
  display: none;
}

header {
  background: linear-gradient(112deg, #d0fff011, #09252a40 58%, #f7d3ae15);
  border-bottom-color: var(--aurora-edge);
  box-shadow: inset 0 1px #e6fff932, 0 8px 30px #03151c60;
}

.divider, .date { border-color: var(--aurora-edge); }
.divider { background: var(--aurora-edge); }
.settings svg, .clock svg { color: var(--aurora-muted); }

.channels, .category-sidebar, .detail {
  background: var(--aurora-glass), #102f3d88;
  border-color: var(--aurora-edge);
  box-shadow: var(--aurora-depth);
}

.category-heading, .category-hint {
  color: var(--aurora-muted);
  border-color: var(--aurora-edge);
}

.channel, .category-item {
  background: linear-gradient(142deg, #e5fff414, #72a9a610 62%, #163f4760);
  border-color: #cbffef35;
  color: var(--aurora-ink);
  box-shadow: inset 0 1px #e4fff52d, 0 4px 12px #06222530;
}

.channel.active, .category-item.active {
  color: #fff;
  background: var(--aurora-selection);
  border-color: var(--aurora-focus);
  box-shadow: inset 0 1px #fff9, inset 0 -1px #aaffdf60, 0 0 16px #58eac640, 0 9px 18px #051b1e68;
}

.channel .name { border-left-color: #d4fff237; }
.category-item small, .srccur { color: var(--aurora-muted); }
.channel .playmark { color: var(--aurora-focus); text-shadow: 0 0 13px #49e7c77a; }
.channel:focus, .category-item:focus, .settings:focus { outline-color: var(--aurora-focus); }

.hero {
  background:
    radial-gradient(ellipse at 93% 20%, #ebae7b45, transparent 52%),
    radial-gradient(ellipse at 25% 50%, #68d8c938, transparent 68%),
    linear-gradient(110deg, #173e4a, #13313b 60%, #51443d);
}

.hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -172px;
  width: 490px;
  height: 360px;
  border-radius: 50%;
  transform: rotate(-24deg);
  background: radial-gradient(ellipse at 50% 48%, #c9fff20a 45%, #bbfff54a 62%, #f7bd8758 73%, #e7fff014 83%);
  box-shadow: inset 0 0 4px #f3fff9b0, 0 0 22px #8df6dc24;
  pointer-events: none;
}

.hero h1 { text-shadow: 0 3px 10px #001519a0; }
.guide {
  background: #091c23;
  border-color: var(--aurora-edge);
  box-shadow: inset 0 1px #d3fff642, 0 8px 20px #06151c70;
}
.guidehead, .trial-toolbar {
  background: linear-gradient(102deg, #1b3b46, #254a4c 57%, #514641);
  border-color: var(--aurora-edge);
}
.guide.player-selected { border-color: var(--aurora-focus); box-shadow: 0 0 20px #5af5d860; }
.srccount, .srchead b {
  background: #195459;
  border-color: #c0f8e7a0;
  color: #ecfffa;
  box-shadow: 0 3px 9px #08212885;
}
.srchead, .footer { color: var(--aurora-muted); }
.footer span { background: #0a2a3480; box-shadow: inset 0 1px #cbf5e72b; }

#overlay { background: #081d25eb; }
.panel, #toast {
  background: var(--aurora-glass), #123542;
  border-color: var(--aurora-edge);
  color: var(--aurora-ink);
}
.panel p, .guidebody .status { color: var(--aurora-muted); }
.panel button, .panel input, .trial-toolbar button, .playerbar button, .status button {
  background: linear-gradient(135deg, #2d545c, #1b3e49);
  border-color: var(--aurora-edge);
}
.panel button:focus, .panel input:focus {
  background: linear-gradient(135deg, #386965, #25525a);
  outline-color: var(--aurora-focus);
}
.panel .selected { border-color: var(--aurora-focus); }
.playerbar, .playernote { background: #153e47ed; }
.playerbar button:focus { outline-color: var(--aurora-focus); }