:root,
.theme-dark {
  --bg: #0f172a;
  --card: #0b1224;
  --panel: #0d162b;
  --border: #1f2a44;
  --accent: #46b2ff;
  --accent2: #9ee2ff;
  --text: #e6edf7;
  --muted: #95a3c2;
  --surface-1: #0b1224;
  --surface-2: #0d162b;
  --shadow-strong: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-soft: 0 12px 32px rgba(0,0,0,0.3);
  --btn-bg: linear-gradient(120deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  --input-bg: #0d162b;
  --input-placeholder: #95a3c2;
}

.theme-light {
  --bg: #f3f6fb;
  --card: #ffffff;
  --panel: #ffffff;
  --border: #dce3f3;
  --accent: #3f8bff;
  --accent2: #3f8bff;
  --text: #111827;
  --muted: #4b5563;
  --surface-1: #ffffff;
  --surface-2: #f8fbff;
  --shadow-strong: 0 18px 44px rgba(15,23,42,0.12);
  --shadow-soft: 0 12px 28px rgba(15,23,42,0.1);
  --btn-bg: linear-gradient(120deg, #ecf1f9, #f7faff);
  --input-bg: #ffffff;
  --input-placeholder: #6b7280;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 12% 20%, #1a2c52, transparent 25%),
              radial-gradient(circle at 92% 12%, #16395a, transparent 20%),
              radial-gradient(circle at 60% 82%, #0d2b45, transparent 25%),
              var(--bg);
  color: var(--text);
  font-family: "Inter", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.theme-light body {
  background: radial-gradient(circle at 8% 16%, rgba(63,139,255,0.08), transparent 32%),
              radial-gradient(circle at 82% 10%, rgba(99,102,241,0.08), transparent 28%),
              #f3f6fb;
  color: var(--text);
}
a { color: inherit; }

a.pill,
.energy-summary-link,
button,
.btn,
.llm-btn,
.llm-inline-btn {
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  will-change: transform;
}

a.pill.rollover-on,
.energy-summary-link.rollover-on,
button.rollover-on,
.btn.rollover-on,
.llm-btn.rollover-on,
.llm-inline-btn.rollover-on {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.icon-inline {
  vertical-align: middle;
  margin-right: 6px;
}

.page {
  width: min(1200px, 100%);
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 18px 28px;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.muted {
  color: var(--muted);
  margin-top: 4px;
}
.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
a.pill {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--btn-bg);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.pill.primary {
  background: linear-gradient(120deg, #46b2ff, #6ad8ff);
  border: none;
  color: #061322;
  box-shadow: 0 12px 32px rgba(70,178,255,0.25);
}
.llm-summary-select,
.llm-user-props {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 12px;
}
.llm-user-props {
  flex: 1 1 220px;
  width: 100%;
}
.llm-user-props::placeholder {
  color: var(--input-placeholder);
}

.is-mobile .page { padding: 18px 14px 24px; }
.is-mobile h1 { font-size: 18px; }
.is-mobile .actions { width: 100%; }
.is-mobile .actions a.pill { flex: 1 1 auto; text-align: center; }

/* Light mode global overrides for shared card-style components */
.theme-light .card,
.theme-light .device-card,
.theme-light .analysis-card,
.theme-light .metric,
.theme-light .chart-card,
.theme-light .pred-card,
.theme-light .pred-cell,
.theme-light .llm-card,
.theme-light .llm-inline,
.theme-light .llm-inline-body,
.theme-light .llm-inline-title,
.theme-light .stat,
.theme-light .meta .item {
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  color: var(--text);
}
.theme-light .llm-inline-body,
.theme-light .analysis-card.good,
.theme-light .analysis-card.warn,
.theme-light .analysis-card.bad,
.theme-light .analysis-card.mute,
.theme-light .chart-card {
  background: var(--surface-1);
}

/* Light mode: LLM / 데이터 기반 AI 섹션 */
.theme-light .llm-inline,
.theme-light .llm-card {
  background: linear-gradient(135deg, #f9fbff, #f4f7fd);
  border: 1px solid #b8c6df;
  box-shadow: none;
  padding: 16px 16px 14px;
  border-radius: 14px;
}
.theme-light .llm-inline-title { color: #1f2937; }
.theme-light .llm-inline-controls button,
.theme-light .llm-btn {
  background: linear-gradient(120deg, #3f8bff, #63b2ff);
  color: #ffffff;
  border: none;
  box-shadow: 0 10px 22px rgba(63,139,255,0.22);
}
.theme-light .llm-inline input,
.theme-light .llm-inline textarea,
.theme-light .llm-inline select,
.theme-light .llm-user-props {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.08);
}
.theme-light .llm-summary-select {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.08);
  font-weight: 700;
}
.theme-light .llm-inline-body {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.theme-light .tab,
.theme-light .pill,
.theme-light a.pill,
.theme-light .run-btn,
.theme-light .btn,
.theme-light .llm-btn,
.theme-light .mode-toggle {
  background: linear-gradient(120deg, #ecf1f9, #f7faff);
  color: #1f2937;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}

.theme-light .tab.active,
.theme-light a.pill.primary,
.theme-light .btn.active,
.theme-light button,
.theme-light .llm-btn {
  background: linear-gradient(120deg, #3f8bff, #63b2ff);
  color: #fff;
  border: none;
  box-shadow: 0 12px 28px rgba(63,139,255,0.25);
}

.theme-light .page { color: var(--text); }
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4 { color: #0f172a; }

.theme-light .empty { border-color: #e5e7eb; color: #6b7280; }