/* 智能学习屋：极光学习实验室主题。仅改变视觉，不改变任何数据或控制绑定。 */

body.aurora-learning-theme {
  --moon: #eef5ff;
  --paper: #f9fbff;
  --ink: #121b38;
  --ink-soft: #5b6882;
  --celadon: #2563eb;
  --celadon-pale: #e6efff;
  --sunlight: #7c3aed;
  --sunlight-pale: #f0e9ff;
  --wire: #0891b2;
  --wire-pale: #e0f7fc;
  --danger: #d92d4b;
  --danger-pale: #ffe8ed;
  --line: #ced9ee;
  --line-strong: #9dafcf;
  --shadow: 0 30px 60px -12px rgba(0,0,0,0.25);
  --radius: 18px;
  --font-display: "Segoe UI", "Microsoft YaHei", sans-serif;
  --font-body: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-data: "Cascadia Code", Consolas, "Liberation Mono", monospace;
  color: var(--ink);
  background:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.045) 1px, transparent 1px),
    linear-gradient(145deg, #eef5ff 0%, #f7f4ff 45%, #e9fbff 100%);
  background-size: 34px 34px, 34px 34px, 100% 100%;
}

body.aurora-learning-theme::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 12% 20%, rgba(37, 99, 235, 0.18), transparent 27rem),
    radial-gradient(circle at 90% 34%, rgba(124, 58, 237, 0.13), transparent 25rem),
    radial-gradient(circle at 55% 88%, rgba(6, 182, 212, 0.12), transparent 32rem);
  content: "";
  pointer-events: none;
}

.aurora-learning-theme .page-atmosphere {
  z-index: -2;
}

.aurora-learning-theme .season-orbit {
  border-color: rgba(96, 165, 250, 0.2);
  box-shadow: inset 0 0 80px rgba(124, 58, 237, 0.05);
}

.aurora-learning-theme .masthead {
  position: relative;
  isolation: isolate;
  width: min(1560px, calc(100% - 32px));
  min-height: 214px;
  align-items: center;
  padding: 32px 34px 58px;
  color: #f8fafc;
}

.aurora-learning-theme .masthead::before {
  position: absolute;
  inset: 0 50% 0 auto;
  z-index: -2;
  width: 100vw;
  transform: translateX(50%);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 70% 100%, 0 88%);
  background:
    linear-gradient(115deg, rgba(11, 16, 38, 0.24), transparent 42%),
    linear-gradient(128deg, #0b1026 0%, #172554 24%, #4338ca 49%, #7c3aed 70%, #0891b2 100%);
  background-size: 100% 100%, 220% 220%;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.25);
  content: "";
  animation: aurora-learning-shift 20s ease-in-out infinite alternate;
}

.aurora-learning-theme .masthead::after {
  position: absolute;
  top: -120px;
  right: 0;
  z-index: -1;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 64%);
  content: "";
  pointer-events: none;
}

@keyframes aurora-learning-shift {
  0% { background-position: 0 0, 0% 45%; }
  50% { background-position: 0 0, 58% 55%; }
  100% { background-position: 0 0, 100% 45%; }
}

.aurora-learning-theme .brand-block {
  align-self: start;
  padding-top: 10px;
}

.aurora-learning-theme .season-seal {
  flex-basis: 64px;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 16px 16px 16px 4px;
  color: #fff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.06), 0 16px 32px rgba(2, 6, 23, 0.25);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: none;
  backdrop-filter: blur(16px);
}

.aurora-learning-theme .eyebrow {
  color: #67e8f9;
}

.aurora-learning-theme h1 {
  margin-bottom: 8px;
  color: #fff;
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 780;
  letter-spacing: -0.035em;
}

.aurora-learning-theme h1 span {
  color: #c4b5fd;
  font-size: 0.38em;
  letter-spacing: 0.04em;
}

.aurora-learning-theme .brand-note {
  color: rgba(235, 245, 255, 0.78);
}

.aurora-learning-theme .connection-bar {
  align-self: start;
  border-color: rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  background: rgba(7, 14, 42, 0.48);
  box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(22px) saturate(135%);
}

.aurora-learning-theme .status-pill {
  border-color: rgba(255, 255, 255, 0.2);
  color: #d8e7ff;
  background: rgba(255, 255, 255, 0.08);
}

.aurora-learning-theme .frame-time,
.aurora-learning-theme .frame-time time {
  color: #cbd5e1;
}

.aurora-learning-theme .connection-actions .button,
.aurora-learning-theme .connection-actions a,
.aurora-learning-theme .connection-actions button {
  border-color: rgba(255, 255, 255, 0.28);
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.1);
}

.aurora-learning-theme .connection-actions .button-primary {
  border-color: #67e8f9;
  color: #07152f;
  background: linear-gradient(120deg, #67e8f9, #60a5fa);
}

.aurora-learning-theme .connection-actions .button-studio {
  border-color: rgba(196, 181, 253, 0.66);
  color: #fff;
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.78), rgba(37, 99, 235, 0.72));
}

.aurora-learning-theme .browser-message {
  color: #fecdd3;
  background: rgba(136, 19, 55, 0.65);
}

.aurora-learning-theme .mock-ribbon {
  border-color: #fde68a;
  color: #422006;
  background: #fef3c7;
}

.aurora-learning-theme main {
  width: min(1500px, calc(100% - 40px));
  gap: 14px;
  margin-top: -12px;
}

.aurora-learning-theme .panel {
  border-color: rgba(123, 146, 190, 0.32);
  background: rgba(249, 251, 255, 0.9);
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.25);
  backdrop-filter: blur(18px) saturate(120%);
}

.aurora-learning-theme .alert-notice {
  min-height: 98px;
  border-left-color: #64748b;
  background: rgba(248, 250, 252, 0.94);
}

.aurora-learning-theme .alert-notice.is-safe {
  border-left-color: #0891b2;
  background: linear-gradient(105deg, rgba(224, 247, 252, 0.96), rgba(249, 251, 255, 0.96));
}

.aurora-learning-theme .alert-notice.is-danger {
  border-color: rgba(217, 45, 75, 0.42);
  border-left-color: var(--danger);
  background: linear-gradient(105deg, #ffe8ed, #fff7f8 58%);
  box-shadow: 0 22px 50px rgba(217, 45, 75, 0.2);
}

.aurora-learning-theme .hero-grid,
.aurora-learning-theme .operation-grid,
.aurora-learning-theme .overview-column {
  gap: 14px;
}

.aurora-learning-theme .house-card {
  position: relative;
  overflow: hidden;
  padding-top: 58px;
  border-color: rgba(37, 99, 235, 0.34);
}

.aurora-learning-theme .house-card::before,
.aurora-learning-theme .data-panel::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 38px;
  padding: 11px 18px 0 76px;
  border-bottom: 1px solid rgba(123, 146, 190, 0.26);
  color: #60708f;
  background: linear-gradient(90deg, rgba(229, 238, 255, 0.95), rgba(245, 240, 255, 0.88));
  content: "LIVE HOME UI  /  N16R8";
  font-family: var(--font-data);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.aurora-learning-theme .house-card::after,
.aurora-learning-theme .data-panel::after {
  position: absolute;
  top: 13px;
  left: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 18px 0 #fbbf24, 36px 0 #22d3ee;
  content: "";
}

.aurora-learning-theme .house-shell {
  border-color: rgba(37, 99, 235, 0.3);
  background:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px),
    linear-gradient(145deg, #f8fbff, #edf5ff);
  background-size: 24px 24px, 24px 24px, 100% 100%;
}

.aurora-learning-theme .room {
  border-color: rgba(99, 122, 166, 0.28);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.08);
}

.aurora-learning-theme .room.is-mode-active {
  border-color: rgba(37, 99, 235, 0.55);
  background: linear-gradient(145deg, #eef5ff, #e4f6ff);
}

.aurora-learning-theme .room.is-alert {
  border-color: var(--danger);
  color: #861c35;
  background: #fff0f3;
  box-shadow: 0 0 0 3px rgba(217, 45, 75, 0.12), 0 14px 30px rgba(217, 45, 75, 0.15);
}

.aurora-learning-theme .room-icon {
  color: #2563eb;
  background: linear-gradient(145deg, #e8efff, #e0f7fc);
}

.aurora-learning-theme .house-heart {
  border-color: #eef5ff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.aurora-learning-theme .season-card {
  border-color: rgba(96, 165, 250, 0.38);
  background:
    radial-gradient(circle at 86% 0%, rgba(34, 211, 238, 0.25), transparent 15rem),
    linear-gradient(135deg, #111936, #312e81 54%, #0e7490);
}

.aurora-learning-theme .season-card .section-kicker {
  color: #67e8f9;
}

.aurora-learning-theme .season-copy h2 {
  color: #f5f3ff;
  font-family: var(--font-body);
  font-weight: 760;
}

.aurora-learning-theme .season-name {
  border-color: rgba(196, 181, 253, 0.5);
  color: #e9d5ff;
  font-family: var(--font-body);
  font-weight: 800;
}

.aurora-learning-theme .data-panel {
  position: relative;
  overflow: hidden;
  padding-top: 58px;
  border-color: rgba(96, 165, 250, 0.44);
  color: #e5efff;
  background:
    linear-gradient(rgba(96, 165, 250, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.035) 1px, transparent 1px),
    #0b1229;
  background-size: 24px 24px, 24px 24px, 100% 100%;
}

.aurora-learning-theme .data-panel::before {
  border-bottom-color: rgba(148, 163, 184, 0.2);
  color: #93c5fd;
  background: #101a38;
  content: "telemetry.live.json  /  readonly";
}

.aurora-learning-theme .data-panel .section-kicker {
  color: #22d3ee;
}

.aurora-learning-theme .data-panel h2 {
  color: #f8fafc;
}

.aurora-learning-theme .data-panel .live-dot {
  border-color: rgba(34, 211, 238, 0.36);
  color: #a5f3fc;
  background: rgba(8, 145, 178, 0.16);
}

.aurora-learning-theme .metric {
  border-color: rgba(96, 165, 250, 0.2);
  border-radius: 10px;
  background: rgba(19, 31, 68, 0.82);
}

.aurora-learning-theme .metric p,
.aurora-learning-theme .metric small {
  color: #9fb1d1;
}

.aurora-learning-theme .metric strong {
  color: #f8fafc;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.18);
}

.aurora-learning-theme .metric-code {
  color: #22d3ee;
  opacity: 0.75;
}

.aurora-learning-theme .control-panel,
.aurora-learning-theme .device-panel,
.aurora-learning-theme .threshold-panel,
.aurora-learning-theme .actuator-test-panel,
.aurora-learning-theme .voice-panel,
.aurora-learning-theme .log-panel {
  padding: 19px;
}

.aurora-learning-theme .section-kicker {
  color: #2563eb;
}

.aurora-learning-theme .threshold-card,
.aurora-learning-theme .fixed-rule-card,
.aurora-learning-theme .actuator-test-card,
.aurora-learning-theme .device,
.aurora-learning-theme .control-group,
.aurora-learning-theme .voice-action-card,
.aurora-learning-theme .voice-text-card {
  border-color: rgba(115, 138, 181, 0.28);
  background: rgba(247, 250, 255, 0.88);
}

.aurora-learning-theme button:focus-visible,
.aurora-learning-theme select:focus-visible,
.aurora-learning-theme input:focus-visible,
.aurora-learning-theme a:focus-visible {
  outline-color: rgba(6, 182, 212, 0.58);
}

.aurora-learning-theme .button-primary,
.aurora-learning-theme .button-secondary {
  border-color: #2563eb;
  color: #fff;
  background: linear-gradient(120deg, #2563eb, #7c3aed);
}

.aurora-learning-theme footer {
  color: #53627d;
}

@media (max-width: 1120px) {
  .aurora-learning-theme .masthead {
    min-height: 0;
    padding-bottom: 64px;
  }

  .aurora-learning-theme .overview-column {
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .aurora-learning-theme .masthead {
    width: min(100% - 20px, 1500px);
    padding-right: 20px;
    padding-left: 20px;
  }

  .aurora-learning-theme .masthead::before {
    clip-path: polygon(0 0, 100% 0, 100% 91%, 42% 100%, 0 94%);
  }

  .aurora-learning-theme main {
    width: min(100% - 24px, 1500px);
  }
}

@media (max-width: 620px) {
  .aurora-learning-theme .masthead {
    width: calc(100% - 16px);
    gap: 16px;
    padding: 22px 12px 56px;
  }

  .aurora-learning-theme .masthead::after {
    right: 0;
  }

  .aurora-learning-theme h1 {
    font-size: 31px;
  }

  .aurora-learning-theme main {
    width: calc(100% - 18px);
    margin-top: -6px;
  }

  .aurora-learning-theme .house-card,
  .aurora-learning-theme .data-panel {
    padding-top: 53px;
  }

  .aurora-learning-theme .house-card::before,
  .aurora-learning-theme .data-panel::before {
    padding-right: 10px;
    padding-left: 70px;
    font-size: 8px;
  }

  .aurora-learning-theme .metric {
    min-height: 108px;
  }

  .aurora-learning-theme .control-panel,
  .aurora-learning-theme .device-panel,
  .aurora-learning-theme .threshold-panel,
  .aurora-learning-theme .actuator-test-panel,
  .aurora-learning-theme .voice-panel,
  .aurora-learning-theme .log-panel {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.aurora-learning-theme,
  .aurora-learning-theme *,
  .aurora-learning-theme *::before,
  .aurora-learning-theme *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}