:root {
  color-scheme: light;
  --bg: #f4f8ff;
  --bg-soft: #eef5ff;
  --sidebar: #e9f2ff;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(237, 245, 255, 0.86);
  --line: rgba(126, 157, 198, 0.18);
  --line-strong: rgba(110, 144, 190, 0.28);
  --text: #4e627a;
  --muted: #70839c;
  --heading: #22364d;
  --accent: #9bc4f6;
  --accent-deep: #6f98d4;
  --accent-soft: rgba(155, 196, 246, 0.18);
  --success: #7fb8a7;
  --warning: #d6b57e;
  --danger: #cb8f9b;
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow: 0 24px 60px rgba(111, 144, 190, 0.14);
  --shadow-soft: 0 14px 34px rgba(100, 134, 182, 0.08);
  --max: 1440px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b1322;
  --bg-soft: #10192c;
  --sidebar: #111a2d;
  --panel: rgba(15, 24, 43, 0.88);
  --panel-strong: rgba(20, 31, 56, 0.96);
  --panel-soft: rgba(18, 29, 52, 0.92);
  --line: rgba(123, 151, 255, 0.16);
  --line-strong: rgba(123, 151, 255, 0.24);
  --text: #b9c8e3;
  --muted: #90a5ca;
  --heading: #f4f8ff;
  --accent: #7da8ff;
  --accent-deep: #7ccfff;
  --accent-soft: rgba(123, 151, 255, 0.14);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(211, 229, 255, 0.95), transparent 28%),
    radial-gradient(circle at top right, rgba(229, 240, 255, 0.78), transparent 24%),
    radial-gradient(circle at bottom center, rgba(225, 237, 255, 0.9), transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, #f3f8ff 50%, #f8fbff 100%);
}

:root[data-theme='dark'] body {
  background:
    radial-gradient(circle at top left, rgba(56, 86, 166, 0.2), transparent 28%),
    radial-gradient(circle at top right, rgba(50, 160, 214, 0.14), transparent 22%),
    radial-gradient(circle at bottom center, rgba(86, 68, 170, 0.18), transparent 32%),
    linear-gradient(180deg, #09111f 0%, #0c1526 50%, #111b30 100%);
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: #59759a;
}

:root[data-theme='dark'] code {
  color: #9fc9ff;
}

.theme-toggle {
  width: 100%;
  justify-content: center;
  gap: 10px;
}

.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  font-size: 1rem;
  line-height: 1;
}

.theme-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.app-shell {
  width: min(calc(100% - 32px), var(--max));
  margin: 16px auto;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
}

.sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
  min-height: calc(100vh - 32px);
  padding: 24px;
  border: 1px solid rgba(155, 196, 246, 0.24);
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(233, 242, 255, 0.95));
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.brand-mark {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--heading);
  background: linear-gradient(145deg, #ffffff 0%, #e7f1ff 52%, #cbdeff 100%);
  border: 1px solid rgba(155, 196, 246, 0.28);
  box-shadow: 0 14px 38px rgba(108, 149, 207, 0.16);
}

.brand-copy strong,
.brand-copy span { display: block; }
.brand-copy strong { color: var(--heading); }
.brand-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.84rem;
}

.sidebar-group + .sidebar-group { margin-top: 24px; }

.sidebar-label,
.eyebrow,
.section-label {
  color: var(--accent-deep);
  font-size: 0.79rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-label { margin-bottom: 12px; }
.eyebrow, .section-label { margin-bottom: 8px; }

.sidebar-nav,
.sidebar-links,
.stats-grid,
.dashboard-grid,
.card-grid,
.panel-grid,
.quick-grid,
.list-grid,
.info-grid,
.meta-list,
.kpi-list,
.chart-grid {
  display: grid;
  gap: 18px;
  align-items: start;
}

.sidebar-nav { gap: 8px; }

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--muted);
  border: 1px solid transparent;
  background: rgba(255,255,255,0.34);
  transition: 180ms ease;
}

.sidebar-link-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-icon,
.card-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stat-icon-wrap {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(233,242,255,0.82));
  border: 1px solid rgba(155, 196, 246, 0.22);
}

.sidebar-link:hover,
.sidebar-link.active {
  color: var(--heading);
  background: rgba(255,255,255,0.9);
  border-color: rgba(155, 196, 246, 0.34);
  box-shadow: var(--shadow-soft);
}

.sidebar-note {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,0.56);
  border: 1px solid var(--line);
}

.sidebar-note strong {
  display: block;
  margin-bottom: 8px;
  color: var(--heading);
}

.content { min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-strong) 100%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.topbar-copy h1,
.topbar-copy p,
.hero-title,
.section-title,
.stat-label,
.card-title,
.kpi-item strong,
.meta-item strong,
.quick-card strong,
.info-card strong,
.list-card strong {
  margin: 0;
  color: var(--heading);
}

.topbar-copy h1 {
  font-size: clamp(2rem, 3vw, 3rem);
  letter-spacing: -0.05em;
}

.topbar-copy p {
  margin-top: 8px;
  color: var(--muted);
}

.topbar-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-strong) 100%);
  box-shadow: var(--shadow-soft);
}

.tab-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
  color: var(--heading);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: 180ms ease;
}

.tab-button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 88%, white), color-mix(in srgb, var(--accent) 38%, var(--panel-strong)) 56%, color-mix(in srgb, var(--accent-deep) 24%, var(--panel-strong)) 100%);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: var(--shadow-soft);
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
  font-size: 0.84rem;
  font-weight: 800;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.subtab-bar {
  margin-bottom: 16px;
}

.subtab-panel {
  padding-top: 4px;
}

.subtab-section-row {
  margin-top: 4px;
}

.subtab-title {
  font-size: 1.25rem;
}

.badge,
.inline-chip,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-strong) 76%, transparent);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.badge.accent {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 24%, var(--panel-strong));
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 28px;
  align-items: stretch;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  margin-bottom: 28px;
  align-items: stretch;
}

.card-grid,
.panel-grid,
.quick-grid,
.list-grid,
.info-grid,
.chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-grid {
  margin-bottom: 28px;
}

#resource-history-section {
  margin-top: -8px;
}

.resource-history-card {
  grid-column: 1 / -1;
}

.panel,
.stat-card,
.info-card,
.list-card,
.quick-card,
.chart-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-strong) 100%);
  box-shadow: var(--shadow);
}

.panel {
  display: flex;
  flex-direction: column;
}

.panel,
.info-card,
.list-card,
.quick-card,
.chart-card { padding: 22px; }

.compact-panel {
  padding: 18px;
  margin-bottom: 12px;
}

.compact-panel .section-row {
  margin-bottom: 10px;
}

.compact-panel .topbar-actions,
.compact-panel .actions {
  gap: 8px;
}

.chart-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.openclaw-stat-card {
  min-height: 160px;
}

.hero-title {
  font-size: clamp(2rem, 3.2vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.06em;
}

.section-title {
  font-size: clamp(1.4rem, 2vw, 2.15rem);
  letter-spacing: -0.04em;
}

.hero-copy,
.muted,
.card-copy,
.list-copy,
.stat-copy,
.meta-line,
.chart-copy {
  color: var(--muted);
}

.hero-copy {
  margin-top: 14px;
  max-width: 68ch;
  font-size: 1.03rem;
}

.actions { margin-top: 22px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  font-weight: 700;
  transition: 180ms ease;
}

.button.primary {
  color: var(--heading);
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 86%, white), color-mix(in srgb, var(--accent) 36%, var(--panel-strong)) 56%, color-mix(in srgb, var(--accent-deep) 24%, var(--panel-strong)) 100%);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow-soft);
}

.button.secondary {
  color: var(--heading);
  background: color-mix(in srgb, var(--panel-strong) 76%, transparent);
}

.cron-filter.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 86%, white), color-mix(in srgb, var(--accent) 36%, var(--panel-strong)) 56%, color-mix(in srgb, var(--accent-deep) 24%, var(--panel-strong)) 100%);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow-soft);
}

.button:hover,
.sidebar-link:hover { transform: translateY(-1px); }

.form-stack {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--heading);
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.82);
  color: var(--heading);
  font: inherit;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(111, 152, 212, 0.45);
  box-shadow: 0 0 0 4px rgba(155, 196, 246, 0.16);
}

.form-status {
  min-height: 24px;
  padding: 4px 2px 0;
}

.form-status.success {
  color: #507b6e;
}

.form-status.error {
  color: #8b4a4a;
}

.chat-thread {
  display: grid;
  gap: 12px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}

.chat-form {
  margin-top: 12px;
}

.chat-bubble {
  max-width: 85%;
  padding: 14px 16px;
  border-radius: 18px;
  line-height: 1.5;
  border: 1px solid var(--line);
}

.chat-bubble.assistant {
  justify-self: start;
  background: rgba(255,255,255,0.82);
  color: var(--heading);
}

.chat-bubble.user {
  justify-self: end;
  background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 56%, #cfe1ff 100%);
  color: var(--heading);
}

.stat-value {
  color: var(--accent-deep);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.stat-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.stat-label { font-weight: 700; }
.stat-copy {
  margin-top: 8px;
  line-height: 1.5;
  max-width: 22ch;
}

.section-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.kpi-item,
.meta-item {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(240,246,255,0.96));
  border: 1px solid var(--line);
}

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.chart-canvas-wrap {
  height: 220px;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(236,244,255,0.98));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.chart-canvas-wrap-bar {
  height: 240px;
}

.chart-canvas-wrap-tall {
  height: 280px;
}

.chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-copy {
  line-height: 1.55;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

.status-ok { color: var(--success); }
.status-warning { color: var(--warning); }
.status-danger { color: var(--danger); }

.cron-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cron-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cron-ok {
  color: #507b6e;
  background: rgba(127, 184, 167, 0.16);
  border: 1px solid rgba(127, 184, 167, 0.28);
}

.cron-warning {
  color: #8a6a35;
  background: rgba(214, 181, 126, 0.16);
  border: 1px solid rgba(214, 181, 126, 0.3);
}

.cron-failed,
.cron-unknown {
  color: #8b4a4a;
  background: rgba(198, 112, 112, 0.14);
  border: 1px solid rgba(198, 112, 112, 0.3);
}

.site-footer {
  margin-top: 22px;
  padding: 16px 4px 24px;
  color: var(--muted);
  font-size: 0.94rem;
}

.hero-surface {
  margin-bottom: 28px;
  overflow: hidden;
}

.hero-surface-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 24px;
  align-items: center;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.hero-visual-card {
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(233,242,255,0.95));
  border: 1px solid rgba(155, 196, 246, 0.28);
  box-shadow: var(--shadow-soft);
}

.hero-visual-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hero-device-shot {
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(155,196,246,0.32), transparent 28%),
    linear-gradient(180deg, rgba(248,251,255,0.96), rgba(227,238,255,0.96));
  border: 1px solid rgba(155, 196, 246, 0.28);
  min-height: 320px;
}

.device-topbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.device-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(111, 152, 212, 0.45);
}

.device-layout {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  min-height: 250px;
}

.device-sidebar,
.device-content,
.device-chart-card,
.device-tile,
.device-metric {
  border-radius: 18px;
}

.device-sidebar {
  padding: 14px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(155,196,246,0.2);
}

.device-logo {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(145deg, #d3e4ff, #ffffff);
  margin-bottom: 14px;
}

.device-nav-line {
  height: 12px;
  border-radius: 999px;
  background: rgba(155,196,246,0.42);
  margin-bottom: 10px;
}

.device-nav-line.short {
  width: 68%;
}

.device-content {
  display: grid;
  gap: 14px;
}

.device-metric-row,
.device-bottom-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.device-bottom-row {
  grid-template-columns: 1.4fr 0.8fr;
}

.device-metric,
.device-tile,
.device-chart-card {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(155,196,246,0.2);
}

.device-metric {
  min-height: 70px;
}

.device-chart-card {
  min-height: 120px;
  padding: 16px;
  display: flex;
  align-items: end;
}

.device-tile {
  min-height: 70px;
}

.device-tile.wide {
  min-height: 88px;
}

.mini-bars {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
}

.mini-bars span {
  display: block;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #8eb8ef, #5d88c8);
}

.stats-grid-home .stat-card {
  min-height: 210px;
}

.stat-card-highlight {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(223,236,255,0.98));
}

.home-feature-grid {
  align-items: stretch;
}

.feature-list {
  display: grid;
  gap: 14px;
}

.feature-item {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(240,246,255,0.96));
  border: 1px solid var(--line);
}

.feature-item strong {
  display: block;
  color: var(--heading);
  margin-bottom: 8px;
}

.proof-panel {
  justify-content: center;
}

.proof-metrics {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.proof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--heading);
  font-weight: 700;
}

.progress-line {
  height: 12px;
  border-radius: 999px;
  background: rgba(155,196,246,0.18);
  overflow: hidden;
  margin-bottom: 6px;
}

.progress-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7fb8a7, #6f98d4);
}

.quick-card-home {
  position: relative;
  overflow: hidden;
}

.quick-card-home::after {
  content: '';
  position: absolute;
  inset: auto -30px -30px auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(155,196,246,0.18), transparent 68%);
}

.cta-panel {
  margin-top: 28px;
}

@media (max-width: 1150px) {
  .hero-surface-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .device-layout,
  .device-metric-row,
  .device-bottom-row {
    grid-template-columns: 1fr;
  }

  .hero-visual-card,
  .hero-device-shot {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  .hero-device-shot {
    min-height: auto;
  }
}

.main-home-v2 {
  background:
    radial-gradient(circle at 8% 12%, rgba(92, 126, 255, 0.18), transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(70, 201, 255, 0.18), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(128, 92, 255, 0.2), transparent 28%),
    linear-gradient(180deg, #09111f 0%, #0c1526 52%, #111c31 100%);
  color: #c5d3ec;
}

.main-home-v2 .hybrid-shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

.main-home-v2 .hybrid-sidebar {
  background: linear-gradient(180deg, rgba(13,21,39,0.95), rgba(17,28,49,0.88));
  border: 1px solid rgba(125, 154, 255, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

.main-home-v2 .brand-mark {
  color: #f4f8ff;
  background: linear-gradient(145deg, rgba(98,132,255,0.48), rgba(76,205,255,0.22));
  border-color: rgba(125, 154, 255, 0.28);
}

.main-home-v2 .brand-copy strong,
.main-home-v2 .hero-title,
.main-home-v2 .section-title,
.main-home-v2 .quick-card strong,
.main-home-v2 .sidebar-note strong,
.main-home-v2 .sidebar-link:hover,
.main-home-v2 .sidebar-link.active,
.main-home-v2 .surface-card strong,
.main-home-v2 .case-study-card h3,
.main-home-v2 .capability-card strong,
.main-home-v2 .mini-metric-card strong,
.main-home-v2 .proof-chart-header strong,
.main-home-v2 .proof-line,
.main-home-v2 .hybrid-stat-top strong,
.main-home-v2 .show-stat b,
.main-home-v2 .showcase-header-card strong,
.main-home-v2 .showcase-case-card strong {
  color: #f4f8ff;
}

.main-home-v2 .brand-copy span,
.main-home-v2 .muted,
.main-home-v2 .hero-copy,
.main-home-v2 .card-copy,
.main-home-v2 .quick-card p,
.main-home-v2 .surface-card p,
.main-home-v2 .case-study-card p,
.main-home-v2 .capability-card p,
.main-home-v2 .hybrid-stat-card p,
.main-home-v2 .show-stat span,
.main-home-v2 .showcase-case-card small,
.main-home-v2 .proof-quote-panel span,
.main-home-v2 .sidebar-link,
.main-home-v2 .sidebar-note p {
  color: #9fb1d3;
}

.main-home-v2 .sidebar-link {
  background: rgba(255,255,255,0.03);
  border-color: transparent;
}

.main-home-v2 .sidebar-link:hover,
.main-home-v2 .sidebar-link.active {
  background: rgba(120, 150, 255, 0.12);
  border-color: rgba(120, 150, 255, 0.18);
}

.main-home-v2 .sidebar-label,
.main-home-v2 .eyebrow,
.main-home-v2 .section-label,
.main-home-v2 .logo-strip-label,
.main-home-v2 .case-tag {
  color: #78c9ff;
}

.main-home-v2 .panel,
.main-home-v2 .hybrid-logo-strip,
.main-home-v2 .hybrid-cta,
.main-home-v2 .hybrid-stat-card,
.main-home-v2 .capability-card,
.main-home-v2 .case-study-card,
.main-home-v2 .surface-card,
.main-home-v2 .proof-chart-panel,
.main-home-v2 .proof-quote-panel,
.main-home-v2 .mini-metric-card {
  background: linear-gradient(180deg, rgba(14,22,40,0.84), rgba(18,29,52,0.94));
  border: 1px solid rgba(123, 151, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.main-home-v2 .hybrid-content {
  display: grid;
  gap: 26px;
}

.hybrid-hero {
  position: relative;
  overflow: hidden;
  padding: 34px;
}

.hybrid-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(105, 136, 255, 0.18), transparent 26%),
    radial-gradient(circle at 86% 20%, rgba(77, 204, 255, 0.16), transparent 22%);
  pointer-events: none;
}

.hybrid-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 28px;
  align-items: center;
}

.hybrid-hero-copy,
.hybrid-hero-visual {
  position: relative;
  z-index: 1;
}

.hero-mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.mini-metric-card {
  padding: 14px 16px;
  border-radius: 18px;
}

.mini-metric-card strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.mini-metric-card span {
  font-size: 0.92rem;
  color: #9fb1d3;
}

.hybrid-hero-visual {
  min-height: 560px;
}

.floating-chip {
  position: absolute;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 27, 49, 0.82);
  border: 1px solid rgba(120, 150, 255, 0.22);
  color: #dce7ff;
  font-size: 0.88rem;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.chip-a { top: 30px; right: 24px; }
.chip-b { top: 110px; left: 8px; }
.chip-c { bottom: 34px; right: 34px; }

.showcase-frame {
  position: absolute;
  inset: 24px 18px 12px 18px;
  border-radius: 30px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(11,18,33,0.94), rgba(16,27,48,0.94));
  border: 1px solid rgba(122, 151, 255, 0.18);
  box-shadow: 0 28px 70px rgba(0,0,0,0.34);
}

.showcase-topbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.showcase-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(165, 186, 255, 0.42);
}

.showcase-grid {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  min-height: 455px;
}

.simplified-showcase-grid {
  min-height: 430px;
}

.simplified-sidebar-col {
  gap: 10px;
}

.simplified-main-col {
  grid-template-rows: auto 1.15fr auto auto;
  gap: 12px;
}

.compact-header-card {
  padding: 16px 18px;
}

.compact-header-card strong {
  font-size: 1rem;
}

.hero-chart-card {
  min-height: 210px;
}

.simplified-stats-row .show-stat {
  padding: 14px;
}

.simplified-stats-row .show-stat span {
  font-size: 0.82rem;
}

.simplified-bottom-row {
  grid-template-columns: 1.2fr 0.7fr;
  align-items: stretch;
}

.wide-bars-card {
  padding: 16px;
}

.wide-bars-card .vertical-bars {
  grid-template-columns: repeat(5, 1fr);
  min-height: 86px;
}

.mini-note-card {
  border-radius: 20px;
  border: 1px solid rgba(125, 154, 255, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  padding: 16px;
  display: grid;
  gap: 10px;
  align-content: center;
}

.mini-note-card span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(140, 173, 255, 0.24);
}

.mini-note-card span.short {
  width: 64%;
}

.replacement-hero-visual {
  position: relative;
  min-height: 560px;
}

.hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(6px);
  opacity: 0.9;
}

.orb-one {
  width: 220px;
  height: 220px;
  top: 34px;
  right: 18px;
  background: radial-gradient(circle, rgba(90, 126, 255, 0.42), transparent 70%);
}

.orb-two {
  width: 180px;
  height: 180px;
  bottom: 26px;
  left: 10px;
  background: radial-gradient(circle, rgba(76, 205, 255, 0.34), transparent 70%);
}

.alt-visual-stack {
  position: relative;
  z-index: 1;
  min-height: 560px;
}

.alt-main-panel,
.alt-side-card,
.alt-floating-card {
  position: absolute;
  border-radius: 28px;
  border: 1px solid rgba(123, 151, 255, 0.16);
  background: linear-gradient(180deg, rgba(12,20,37,0.9), rgba(18,29,52,0.96));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.3);
}

.alt-main-panel {
  inset: 54px 56px 84px 28px;
  padding: 24px;
}

.alt-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.alt-panel-header small,
.alt-side-card small,
.alt-floating-card small,
.alt-number-card span {
  display: block;
  color: #7ccfff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-bottom: 6px;
}

.alt-panel-header strong,
.alt-side-card strong,
.alt-floating-card strong,
.alt-number-card strong {
  color: #f4f8ff;
}

.alt-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.alt-number-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(123, 151, 255, 0.12);
}

.alt-number-card.wide {
  grid-column: 1 / -1;
}

.alt-number-card strong {
  font-size: 1.12rem;
}

.alt-graph-panel {
  position: relative;
  margin-top: 16px;
  min-height: 210px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border: 1px solid rgba(123, 151, 255, 0.12);
  overflow: hidden;
}

.alt-graph-area {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(93,124,255,0.08), rgba(79,209,255,0.22));
  clip-path: polygon(0 80%, 14% 68%, 30% 72%, 45% 54%, 60% 60%, 74% 42%, 88% 35%, 100% 16%, 100% 100%, 0 100%);
}

.alt-graph-line {
  position: absolute;
  inset: 26px 18px 36px 18px;
  border-bottom: 2px solid rgba(110, 200, 255, 0.9);
  border-radius: 18px;
  clip-path: polygon(0 78%, 14% 66%, 30% 70%, 45% 52%, 60% 58%, 74% 40%, 88% 33%, 100% 14%, 100% 20%, 88% 39%, 74% 46%, 60% 64%, 45% 58%, 30% 76%, 14% 72%, 0 84%);
  background: linear-gradient(90deg, rgba(106, 120, 255, 0.0), rgba(110, 200, 255, 0.18), rgba(110, 200, 255, 0.0));
}

.alt-graph-dots {
  position: absolute;
  inset: 0;
}

.alt-graph-dots span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #8fdcff;
  box-shadow: 0 0 0 6px rgba(110, 200, 255, 0.1);
}

.alt-graph-dots span:nth-child(1) { left: 14%; top: 63%; }
.alt-graph-dots span:nth-child(2) { left: 41%; top: 48%; }
.alt-graph-dots span:nth-child(3) { left: 67%; top: 37%; }
.alt-graph-dots span:nth-child(4) { left: 86%; top: 24%; }

.alt-side-card {
  width: 168px;
  padding: 18px;
}

.top-card {
  top: 18px;
  right: 0;
}

.bottom-card {
  right: 8px;
  bottom: 22px;
}

.bottom-card strong {
  display: none;
}

.alt-mini-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 96px;
}

.alt-mini-bars span {
  display: block;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #7cd4ff, #637aff);
}

.alt-floating-card {
  padding: 16px 18px;
  min-width: 170px;
}

.left-float {
  left: 0;
  bottom: 54px;
}

.right-float {
  right: 34px;
  top: 210px;
}

@media (max-width: 980px) {
  .replacement-hero-visual,
  .alt-visual-stack {
    min-height: 680px;
  }

  .alt-main-panel {
    inset: 70px 12px 180px 12px;
  }

  .top-card {
    top: 0;
    right: 16px;
  }

  .right-float {
    right: 16px;
    top: auto;
    bottom: 120px;
  }

  .left-float {
    left: 16px;
    bottom: 24px;
  }

  .bottom-card {
    right: 16px;
    bottom: 24px;
  }
}

@media (max-width: 760px) {
  .replacement-hero-visual,
  .alt-visual-stack {
    min-height: 720px;
  }

  .alt-side-card,
  .alt-floating-card {
    position: absolute;
    min-width: 140px;
  }

  .alt-analytics-grid {
    grid-template-columns: 1fr;
  }
}

.surface-page .surface-shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

.surface-content {
  display: grid;
  gap: 24px;
}

.surface-hero {
  padding: 30px;
  overflow: hidden;
}

.surface-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 24px;
  align-items: center;
}

.surface-visual-panel {
  min-height: 340px;
  border-radius: 28px;
  border: 1px solid rgba(123, 151, 255, 0.16);
  background: linear-gradient(180deg, rgba(12,20,37,0.76), rgba(18,29,52,0.92));
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
  position: relative;
  overflow: hidden;
}

:root:not([data-theme='dark']) .surface-visual-panel {
  border-color: rgba(155, 196, 246, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96));
  box-shadow: var(--shadow-soft);
}

.surface-stat-strip,
.surface-duo-grid {
  display: grid;
  gap: 18px;
}

.surface-stat-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.surface-duo-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: start;
}

.glass-form-panel,
.surface-results-panel,
.surface-support-panel {
  background: linear-gradient(180deg, rgba(14,22,40,0.9), rgba(18,29,52,0.96));
}

:root:not([data-theme='dark']) .glass-form-panel,
:root:not([data-theme='dark']) .surface-results-panel,
:root:not([data-theme='dark']) .surface-support-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96));
}

.surface-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.surface-kpi-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(123, 151, 255, 0.12);
}

:root:not([data-theme='dark']) .surface-kpi-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96));
  border-color: rgba(155, 196, 246, 0.18);
  box-shadow: var(--shadow-soft);
}

.surface-kpi-card small {
  display: block;
  color: #7ccfff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

:root:not([data-theme='dark']) .surface-kpi-card small {
  color: var(--accent-deep);
}

.surface-kpi-card strong {
  display: block;
  color: #f4f8ff;
  font-size: 1.2rem;
  margin-bottom: 6px;
}

:root:not([data-theme='dark']) .surface-kpi-card strong {
  color: var(--heading);
}

.surface-kpi-card span {
  color: #9fb1d3;
}

:root:not([data-theme='dark']) .surface-kpi-card span {
  color: var(--muted);
}

.tool-visual-panel {
  padding: 20px;
  display: grid;
  gap: 16px;
}

.tool-visual-top,
.tool-visual-main,
.tool-visual-bottom {
  display: grid;
  gap: 14px;
}

.tool-visual-top {
  grid-template-columns: 1fr 1fr;
}

.tool-visual-card,
.tool-visual-graph,
.forms-flow-card,
.admin-visual-card {
  border-radius: 22px;
  border: 1px solid rgba(123, 151, 255, 0.14);
  background: rgba(255,255,255,0.05);
}

:root:not([data-theme='dark']) .tool-visual-card,
:root:not([data-theme='dark']) .tool-visual-graph,
:root:not([data-theme='dark']) .forms-flow-card,
:root:not([data-theme='dark']) .admin-visual-card {
  border-color: rgba(155, 196, 246, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96));
  box-shadow: var(--shadow-soft);
}

.tool-visual-card {
  padding: 16px;
}

.tool-visual-card small,
.forms-flow-card small,
.admin-visual-card small {
  display: block;
  color: #7ccfff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.tool-visual-card strong,
.forms-flow-card strong,
.admin-visual-card strong {
  color: #f4f8ff;
}

:root:not([data-theme='dark']) .tool-visual-card small,
:root:not([data-theme='dark']) .forms-flow-card small,
:root:not([data-theme='dark']) .admin-visual-card small {
  color: var(--accent-deep);
}

:root:not([data-theme='dark']) .tool-visual-card strong,
:root:not([data-theme='dark']) .forms-flow-card strong,
:root:not([data-theme='dark']) .admin-visual-card strong {
  color: var(--heading);
}

.tool-visual-main {
  grid-template-columns: 1.1fr 0.7fr;
  min-height: 190px;
}

.tool-visual-graph {
  position: relative;
  overflow: hidden;
}

.tool-visual-graph::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 68%;
  background: linear-gradient(180deg, rgba(93,124,255,0.08), rgba(79,209,255,0.26));
  clip-path: polygon(0 78%, 18% 62%, 34% 69%, 50% 44%, 66% 57%, 82% 34%, 100% 18%, 100% 100%, 0 100%);
}

.tool-visual-graph::after {
  content: '';
  position: absolute;
  inset: 20px 18px 26px 18px;
  border-bottom: 2px solid rgba(110, 200, 255, 0.9);
  clip-path: polygon(0 76%, 18% 60%, 34% 67%, 50% 42%, 66% 55%, 82% 32%, 100% 16%, 100% 22%, 82% 38%, 66% 61%, 50% 48%, 34% 73%, 18% 66%, 0 82%);
  background: linear-gradient(90deg, rgba(110, 200, 255, 0), rgba(110, 200, 255, 0.16), rgba(110, 200, 255, 0));
}

.tool-visual-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(123, 151, 255, 0.14);
  background: rgba(255,255,255,0.05);
}

:root:not([data-theme='dark']) .tool-visual-bars {
  border-color: rgba(155, 196, 246, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96));
  box-shadow: var(--shadow-soft);
}

.tool-visual-bars span {
  display: block;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #7cd4ff, #637aff);
}

.tool-visual-bottom {
  grid-template-columns: repeat(3, 1fr);
}

.tool-visual-bottom span {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(123, 151, 255, 0.12);
  color: #dce7ff;
}

:root:not([data-theme='dark']) .tool-visual-bottom span {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96));
  border-color: rgba(155, 196, 246, 0.18);
  color: var(--heading);
}

.forms-visual-panel {
  min-height: 360px;
}

.forms-flow-card {
  position: absolute;
  width: 180px;
  padding: 18px;
}

.flow-top-card { top: 28px; left: 28px; }
.flow-mid-card { top: 132px; right: 44px; }
.flow-bottom-card { bottom: 34px; left: 84px; }

.forms-connector {
  position: absolute;
  background: linear-gradient(180deg, rgba(124, 207, 255, 0.26), rgba(93, 124, 255, 0.22));
  border-radius: 999px;
}

.connector-one {
  width: 8px;
  height: 108px;
  top: 92px;
  left: 150px;
  transform: rotate(-24deg);
}

.connector-two {
  width: 8px;
  height: 120px;
  bottom: 94px;
  left: 210px;
  transform: rotate(32deg);
}

.intake-kpi-grid {
  grid-template-columns: 1fr;
}

.admin-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
}

.admin-visual-panel {
  min-height: 320px;
}

.admin-visual-card {
  position: absolute;
  padding: 18px;
}

.admin-visual-card.large {
  inset: 26px 26px 112px 26px;
}

.admin-visual-card.small.one {
  left: 26px;
  bottom: 26px;
  width: 110px;
}

.admin-visual-card.small.two {
  left: 148px;
  bottom: 26px;
  width: 110px;
}

.admin-visual-card.small.three {
  right: 26px;
  bottom: 26px;
  width: 110px;
}

:root[data-theme='dark'] .surface-admin .tab-bar,
:root[data-theme='dark'] .surface-admin .panel-soft,
:root[data-theme='dark'] .surface-admin .session-detail-card,
:root[data-theme='dark'] .surface-admin .chat-bubble.assistant,
:root[data-theme='dark'] .surface-admin .chat-bubble.user,
:root[data-theme='dark'] .surface-admin .message-body,
:root[data-theme='dark'] .surface-admin .list-card,
:root[data-theme='dark'] .surface-admin .info-card,
:root[data-theme='dark'] .surface-admin .chart-card,
:root[data-theme='dark'] .surface-admin .stat-card,
:root[data-theme='dark'] .surface-admin .kpi-item,
:root[data-theme='dark'] .surface-admin .meta-item {
  background: linear-gradient(180deg, rgba(16,26,48,0.92), rgba(22,35,62,0.98));
  border-color: rgba(116, 151, 255, 0.18);
  color: #d5e2f7;
}

:root[data-theme='dark'] .surface-admin .list-card strong,
:root[data-theme='dark'] .surface-admin .info-card strong,
:root[data-theme='dark'] .surface-admin .stat-label,
:root[data-theme='dark'] .surface-admin .kpi-item strong,
:root[data-theme='dark'] .surface-admin .meta-item strong,
:root[data-theme='dark'] .surface-admin .topbar-copy h1,
:root[data-theme='dark'] .surface-admin .topbar-copy p,
:root[data-theme='dark'] .surface-admin .chart-copy,
:root[data-theme='dark'] .surface-admin .message-body,
:root[data-theme='dark'] .surface-admin .session-detail-pre,
:root[data-theme='dark'] .surface-admin .field span,
:root[data-theme='dark'] .surface-admin .form-status,
:root[data-theme='dark'] .surface-admin .tab-button,
:root[data-theme='dark'] .surface-admin .tab-count,
:root[data-theme='dark'] .surface-admin .button.secondary,
:root[data-theme='dark'] .surface-admin .inline-chip,
:root[data-theme='dark'] .surface-admin .badge,
:root[data-theme='dark'] .surface-admin .status-badge {
  color: #f4f8ff;
}

:root[data-theme='dark'] .surface-admin .topbar,
:root[data-theme='dark'] .surface-admin #overview-header-panel,
:root[data-theme='dark'] .surface-admin #overview-health-panel,
:root[data-theme='dark'] .surface-admin #failure-summary-panel,
:root[data-theme='dark'] .surface-admin #notification-strip-panel,
:root[data-theme='dark'] .surface-admin #resource-history-section .chart-card,
:root[data-theme='dark'] .surface-admin #operations-layout-panel,
:root[data-theme='dark'] .surface-admin #cron-results-ops,
:root[data-theme='dark'] .surface-admin #submissions-inbox,
:root[data-theme='dark'] .surface-admin #messages-panel,
:root[data-theme='dark'] .surface-admin #audit-log-panel,
:root[data-theme='dark'] .surface-admin #admin-chat,
:root[data-theme='dark'] .surface-admin #task-queue,
:root[data-theme='dark'] .surface-admin #assistant-rules-panel,
:root[data-theme='dark'] .surface-admin #system-actions-panel,
:root[data-theme='dark'] .surface-admin #change-password-panel,
:root[data-theme='dark'] .surface-admin #openclaw-live-status-ops,
:root[data-theme='dark'] .surface-admin #openclaw-visibility-panel-ops,
:root[data-theme='dark'] .surface-admin #agent-defaults-panel-ops,
:root[data-theme='dark'] .surface-admin #agent-control-panel-ops,
:root[data-theme='dark'] .surface-admin #recent-completions-panel-ops {
  background: linear-gradient(180deg, rgba(14,22,40,0.94), rgba(18,29,52,0.99));
  border-color: rgba(116, 151, 255, 0.18);
}

:root[data-theme='dark'] .surface-admin input,
:root[data-theme='dark'] .surface-admin select,
:root[data-theme='dark'] .surface-admin textarea,
:root[data-theme='dark'] .surface-admin .button.secondary,
:root[data-theme='dark'] .surface-admin .tab-button,
:root[data-theme='dark'] .surface-admin .inline-chip,
:root[data-theme='dark'] .surface-admin .badge,
:root[data-theme='dark'] .surface-admin .status-badge {
  background: linear-gradient(180deg, rgba(34,47,78,0.92), rgba(26,38,66,0.96));
  border-color: rgba(116, 151, 255, 0.22);
  color: #f4f8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

:root[data-theme='dark'] .surface-admin input::placeholder,
:root[data-theme='dark'] .surface-admin textarea::placeholder {
  color: #9fb1d3;
}

:root[data-theme='dark'] .surface-admin .tab-button.active,
:root[data-theme='dark'] .surface-admin .button.secondary:hover,
:root[data-theme='dark'] .surface-admin .badge.accent,
:root[data-theme='dark'] .surface-admin .status-badge,
:root[data-theme='dark'] .surface-admin .inline-chip {
  background: linear-gradient(135deg, rgba(91,124,255,0.92), rgba(76,205,255,0.84));
  border-color: rgba(124, 207, 255, 0.28);
  color: #ffffff;
}

:root[data-theme='dark'] .surface-admin .chat-bubble.assistant {
  background: linear-gradient(180deg, rgba(24,36,63,0.96), rgba(20,31,56,0.98));
}

:root[data-theme='dark'] .surface-admin .chat-bubble.user {
  background: linear-gradient(135deg, rgba(91,124,255,0.9), rgba(76,205,255,0.82));
}

@media (max-width: 1280px) {
  .surface-page .surface-shell {
    grid-template-columns: 1fr;
  }

  .surface-hero-grid,
  .admin-hero-grid,
  .surface-duo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .surface-stat-strip,
  .surface-kpi-grid,
  .tool-visual-top,
  .tool-visual-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .surface-hero {
    padding: 22px;
  }

  .forms-flow-card,
  .admin-visual-card {
    position: absolute;
    width: auto;
    max-width: calc(100% - 40px);
  }
}

:root[data-theme='dark'] .surface-page input,
:root[data-theme='dark'] .surface-page select,
:root[data-theme='dark'] .surface-page textarea,
:root[data-theme='dark'] .surface-page .button.secondary,
:root[data-theme='dark'] .surface-page .tab-button,
:root[data-theme='dark'] .surface-page .badge,
:root[data-theme='dark'] .surface-page .inline-chip,
:root[data-theme='dark'] .surface-page .status-badge,
:root[data-theme='dark'] .surface-page .field input,
:root[data-theme='dark'] .surface-page .field select,
:root[data-theme='dark'] .surface-page .field textarea {
  background: linear-gradient(180deg, rgba(35,48,80,0.94), rgba(24,36,64,0.98)) !important;
  border: 1px solid rgba(116, 151, 255, 0.24) !important;
  color: #f4f8ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 24px rgba(0,0,0,0.12);
}

:root[data-theme='dark'] .surface-page input::placeholder,
:root[data-theme='dark'] .surface-page textarea::placeholder {
  color: #9fb1d3 !important;
}

:root[data-theme='dark'] .surface-page .button.secondary:hover,
:root[data-theme='dark'] .surface-page .tab-button.active,
:root[data-theme='dark'] .surface-page .badge.accent,
:root[data-theme='dark'] .surface-page .inline-chip,
:root[data-theme='dark'] .surface-page .status-badge {
  background: linear-gradient(135deg, rgba(91,124,255,0.95), rgba(76,205,255,0.88)) !important;
  border-color: rgba(124, 207, 255, 0.3) !important;
  color: #ffffff !important;
}

:root[data-theme='dark'] .surface-page .chart-card,
:root[data-theme='dark'] .surface-page .chart-canvas-wrap,
:root[data-theme='dark'] .surface-page .chart-canvas-wrap-bar,
:root[data-theme='dark'] .surface-page .chart-canvas-wrap-tall,
:root[data-theme='dark'] .surface-page .chart-head,
:root[data-theme='dark'] .surface-page canvas,
:root[data-theme='dark'] .surface-page .kpi-item,
:root[data-theme='dark'] .surface-page .info-card,
:root[data-theme='dark'] .surface-page .list-card,
:root[data-theme='dark'] .surface-page .stat-card,
:root[data-theme='dark'] .surface-page .panel-soft,
:root[data-theme='dark'] .surface-page .tab-bar,
:root[data-theme='dark'] .surface-page .subtab-bar {
  background: linear-gradient(180deg, rgba(16,26,48,0.94), rgba(21,34,61,0.98)) !important;
  border-color: rgba(116, 151, 255, 0.18) !important;
  color: #d5e2f7 !important;
}

:root[data-theme='dark'] .surface-page option {
  background: #1a2742;
  color: #f4f8ff;
}

:root[data-theme='dark'] .surface-page input,
:root[data-theme='dark'] .surface-page select,
:root[data-theme='dark'] .surface-page textarea {
  -webkit-appearance: none;
  appearance: none;
  background-color: #1d2843 !important;
  background-image: none !important;
  color: #f4f8ff !important;
  caret-color: #7cd4ff;
}

:root[data-theme='dark'] .surface-page input:-webkit-autofill,
:root[data-theme='dark'] .surface-page input:-webkit-autofill:hover,
:root[data-theme='dark'] .surface-page input:-webkit-autofill:focus,
:root[data-theme='dark'] .surface-page textarea:-webkit-autofill,
:root[data-theme='dark'] .surface-page select:-webkit-autofill {
  -webkit-text-fill-color: #f4f8ff !important;
  -webkit-box-shadow: 0 0 0 1000px #1d2843 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

.surface-page .field {
  display: grid;
  gap: 10px;
}

.surface-page .field input,
.surface-page .field select,
.surface-page .field textarea {
  border-radius: 18px !important;
  padding: 15px 16px !important;
}

.showcase-column {
  display: grid;
  gap: 12px;
}

.sidebar-col {
  align-content: start;
}

.show-block,
.showcase-header-card,
.show-stat,
.showcase-chart-card,
.showcase-case-card,
.showcase-bars-card {
  border-radius: 20px;
  border: 1px solid rgba(125, 154, 255, 0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
}

.show-block {
  min-height: 78px;
}

.show-block.tall { min-height: 128px; }
.show-block.short { min-height: 56px; }

.main-col {
  grid-template-rows: auto auto 1fr auto;
}

.showcase-header-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
}

.showcase-header-card small,
.showcase-case-card small {
  display: block;
  color: #7ccfff;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.showcase-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.show-stat {
  padding: 16px;
}

.show-stat b {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.showcase-chart-card {
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.curve-chart {
  position: relative;
  min-height: 180px;
}

.curve-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.curve-chart path {
  fill: none;
  stroke: url(#unused);
  stroke: #6ec8ff;
  stroke-width: 3;
  stroke-linecap: round;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #89d8ff;
  box-shadow: 0 0 0 6px rgba(110, 200, 255, 0.12);
}

.d1 { left: 7%; top: 73%; }
.d2 { left: 28%; top: 57%; }
.d3 { left: 45%; top: 61%; }
.d4 { left: 66%; top: 45%; }
.d5 { left: 90%; top: 26%; }

.showcase-bottom-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.showcase-case-card,
.showcase-bars-card {
  padding: 18px;
}

.vertical-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 92px;
}

.vertical-bars span {
  display: block;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, #7cd4ff, #637aff);
}

.logo-strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.logo-strip-items span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(123, 151, 255, 0.14);
  color: #dce7ff;
}

.hybrid-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hybrid-stat-card {
  padding: 22px;
  border-radius: 24px;
}

.hybrid-stat-card.emphasis {
  background: linear-gradient(180deg, rgba(18,31,57,0.96), rgba(31,46,84,0.96));
}

.hybrid-stat-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hybrid-stat-top span {
  color: #7ccfff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 800;
}

.hybrid-section {
  display: grid;
  gap: 18px;
}

.capability-grid,
.case-study-grid,
.surface-cards-grid,
.proof-layout {
  display: grid;
  gap: 18px;
}

.capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-card,
.case-study-card,
.surface-card,
.proof-chart-panel,
.proof-quote-panel {
  padding: 22px;
  border-radius: 24px;
}

.capability-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 14px;
  color: #f4f8ff;
  background: linear-gradient(135deg, rgba(102,130,255,0.9), rgba(75,204,255,0.76));
  font-weight: 800;
}

.case-study-grid {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.case-study-card.featured {
  background: linear-gradient(180deg, rgba(21,34,61,0.96), rgba(31,48,88,0.96));
}

.case-tag {
  display: inline-flex;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.case-points {
  margin: 14px 0 0;
  padding-left: 18px;
  color: #c8d5ec;
}

.case-points li + li {
  margin-top: 8px;
}

.proof-layout {
  grid-template-columns: 1.15fr 0.85fr;
}

.proof-chart-lines {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.proof-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.progress-line.dark {
  background: rgba(255,255,255,0.07);
}

.progress-line.dark span {
  background: linear-gradient(90deg, #7cd4ff, #6d7dff);
}

.proof-quote-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.proof-quote-panel p {
  margin: 0 0 14px;
  color: #eef4ff;
  font-size: 1.24rem;
  line-height: 1.45;
}

.surface-cards-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.surface-card {
  position: relative;
  overflow: hidden;
}

.surface-card::after {
  content: '';
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(110, 200, 255, 0.18), transparent 68%);
}

.surface-card small {
  display: block;
  color: #7ccfff;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hybrid-footer {
  color: #90a5ca;
}

.main-home-v2 .button.primary {
  color: #f4f8ff;
  background: linear-gradient(135deg, #5d7cff 0%, #4fd1ff 100%);
  border-color: rgba(120, 150, 255, 0.36);
}

.main-home-v2 .button.secondary,
.main-home-v2 .badge,
.main-home-v2 .inline-chip,
.main-home-v2 .status-badge {
  color: #dce7ff;
  background: rgba(255,255,255,0.06);
  border-color: rgba(123, 151, 255, 0.16);
}

@media (max-width: 1280px) {
  .main-home-v2 .hybrid-shell {
    grid-template-columns: 1fr;
  }

  .main-home-v2 .hybrid-sidebar {
    position: static;
    min-height: auto;
  }

  .hybrid-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .hero-mini-metrics,
  .hybrid-stats-grid,
  .capability-grid,
  .case-study-grid,
  .surface-cards-grid,
  .proof-layout,
  .showcase-stats-row,
  .showcase-bottom-row {
    grid-template-columns: 1fr;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .sidebar-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hybrid-hero {
    padding: 22px;
  }

  .showcase-frame {
    position: relative;
    inset: auto;
  }

  .hybrid-hero-visual {
    min-height: auto;
  }

  .floating-chip {
    display: none;
  }
}

#failure-summary-panel,
#notification-strip-panel,
#overview-health-panel,
#resource-history-section,
#cron-results,
#cron-results-ops,
#task-queue,
#admin-chat,
#messages-panel,
#audit-log-panel,
#submissions-inbox {
  margin-bottom: 20px;
}

#cron-results {
  gap: 18px;
}

#assistant-rules-panel {
  margin-top: 18px;
}

#messages-panel {
  margin-bottom: 24px;
}

.ops-grid-tight {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 20px;
}

.session-detail-card {
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(236,244,255,0.98));
  border: 1px solid var(--line);
  padding: 12px;
}

.session-detail-pre {
  white-space: pre-wrap;
  margin-top: 12px;
  max-height: 320px;
  overflow: auto;
  font-size: 0.95rem;
  line-height: 1.6;
}

.mobile-search-input {
  width: 100%;
}

.message-card {
  grid-column: span 1;
}

.message-body {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(236,244,255,0.98));
  border: 1px solid var(--line);
  color: var(--heading);
  line-height: 1.6;
}

.rules-priority-strip {
  margin-top: 14px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(237, 245, 255, 0.94), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(155, 196, 246, 0.26);
  box-shadow: var(--shadow-soft);
}

.priority-rules-grid {
  margin-top: 0;
}

.priority-card {
  border-color: rgba(111, 152, 212, 0.26);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(239,246,255,0.98));
}

.rules-sections {
  display: grid;
  gap: 22px;
  margin-top: 14px;
}

.rules-group {
  display: grid;
  gap: 12px;
}

.assistant-rules-grid {
  margin-top: 0;
}

.assistant-rules-grid .list-card strong {
  display: block;
  margin-bottom: 8px;
}

.compact-row {
  margin-bottom: 0;
}

#cron-status-meta {
  gap: 12px;
  margin-bottom: 4px;
}

#cron-filter-bar {
  gap: 10px;
  margin-bottom: 8px;
}

#task-meta,
#submissions-meta,
#cron-status-meta,
#cron-status-meta-ops,
#personal-cron-meta-ops,
#openclaw-status-meta-ops,
#openclaw-visibility-meta-ops,
#agent-defaults-meta-ops,
#recent-completions-meta-ops,
#messages-meta,
#notification-strip-meta,
#failure-summary-meta,
#audit-log-list,
#task-launcher-status,
#admin-chat-status {
  margin-top: 8px;
}

#task-edit-form,
#task-list,
#submissions-list,
#cron-status-grid,
#personal-cron-grid,
#cron-status-grid-ops,
#personal-cron-grid-ops,
#recent-completions-list,
#recent-completions-list-ops,
#messages-list,
#notification-strip-list,
#failure-summary-grid,
#openclaw-status-grid-ops,
#openclaw-active-sessions-ops,
#openclaw-recent-runs-ops,
#openclaw-stuck-tasks-ops,
#agent-defaults-grid-ops,
.stats-grid,
.chart-grid {
  margin-top: 12px;
}

#task-edit-form.hidden {
  margin-top: 0;
}

.hidden {
  display: none !important;
}

.empty-state {
  padding: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.6);
  border: 1px dashed var(--line-strong);
}

@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; min-height: auto; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .ops-grid-tight { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(calc(100% - 20px), var(--max));
    margin: 10px auto;
    gap: 14px;
  }

  .sidebar,
  .topbar,
  .panel,
  .stat-card,
  .chart-card,
  .info-card,
  .list-card,
  .quick-card {
    padding: 18px;
    border-radius: 22px;
  }

  .topbar,
  .section-row,
  .chart-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar-actions,
  .actions,
  .tab-bar,
  #task-filter-bar,
  #submission-filter-bar,
  #cron-filter-bar {
    width: 100%;
  }

  .tab-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }

  .tab-button {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
  }

  .button,
  .field input,
  .field select,
  .field textarea {
    width: 100%;
  }

  .topbar-actions input,
  .actions input,
  .mobile-search-input {
    width: 100%;
    min-width: 0 !important;
  }

  .stats-grid,
  .card-grid,
  .panel-grid,
  .quick-grid,
  .list-grid,
  .assistant-rules-grid,
  .info-grid,
  .chart-grid,
  .form-grid,
  .ops-grid-tight {
    grid-template-columns: 1fr;
  }

  .stat-head-row {
    align-items: center;
  }

  .hero-title { font-size: 2rem; }
  .section-title { font-size: 1.55rem; }
}

@media (max-width: 520px) {
  .tab-bar {
    grid-template-columns: 1fr;
  }

  .brand {
    margin-bottom: 20px;
  }

  .topbar-copy h1 {
    font-size: 1.8rem;
  }
}

.theme-toggle {
  white-space: nowrap;
}

.surface-helper-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.price-ladder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.helper-card strong {
  font-size: 1.1rem;
}

@media (max-width: 980px) {
  .surface-helper-grid,
  .price-ladder-grid {
    grid-template-columns: 1fr;
  }
}

:root:not([data-theme='dark']) .main-home-v2 {
  background:
    radial-gradient(circle at 8% 12%, rgba(155, 196, 246, 0.28), transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(181, 225, 255, 0.3), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(185, 195, 255, 0.22), transparent 28%),
    linear-gradient(180deg, #f9fbff 0%, #eef5ff 52%, #f5f9ff 100%);
  color: var(--text);
}

:root:not([data-theme='dark']) .main-home-v2 .hybrid-sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(233,242,255,0.94));
  border-color: rgba(155, 196, 246, 0.24);
  box-shadow: var(--shadow);
}

:root:not([data-theme='dark']) .main-home-v2 .brand-mark {
  color: var(--heading);
  background: linear-gradient(145deg, #ffffff 0%, #e7f1ff 52%, #cbdeff 100%);
  border-color: rgba(155, 196, 246, 0.28);
}

:root:not([data-theme='dark']) .main-home-v2 .brand-copy strong,
:root:not([data-theme='dark']) .main-home-v2 .hero-title,
:root:not([data-theme='dark']) .main-home-v2 .section-title,
:root:not([data-theme='dark']) .main-home-v2 .quick-card strong,
:root:not([data-theme='dark']) .main-home-v2 .sidebar-note strong,
:root:not([data-theme='dark']) .main-home-v2 .sidebar-link:hover,
:root:not([data-theme='dark']) .main-home-v2 .sidebar-link.active,
:root:not([data-theme='dark']) .main-home-v2 .surface-card strong,
:root:not([data-theme='dark']) .main-home-v2 .case-study-card h3,
:root:not([data-theme='dark']) .main-home-v2 .capability-card strong,
:root:not([data-theme='dark']) .main-home-v2 .mini-metric-card strong,
:root:not([data-theme='dark']) .main-home-v2 .proof-chart-header strong,
:root:not([data-theme='dark']) .main-home-v2 .proof-line,
:root:not([data-theme='dark']) .main-home-v2 .hybrid-stat-top strong,
:root:not([data-theme='dark']) .main-home-v2 .show-stat b,
:root:not([data-theme='dark']) .main-home-v2 .showcase-header-card strong,
:root:not([data-theme='dark']) .main-home-v2 .showcase-case-card strong,
:root:not([data-theme='dark']) .main-home-v2 .surface-kpi-card strong,
:root:not([data-theme='dark']) .main-home-v2 .helper-card strong {
  color: var(--heading);
}

:root:not([data-theme='dark']) .main-home-v2 .brand-copy span,
:root:not([data-theme='dark']) .main-home-v2 .muted,
:root:not([data-theme='dark']) .main-home-v2 .hero-copy,
:root:not([data-theme='dark']) .main-home-v2 .card-copy,
:root:not([data-theme='dark']) .main-home-v2 .quick-card p,
:root:not([data-theme='dark']) .main-home-v2 .surface-card p,
:root:not([data-theme='dark']) .main-home-v2 .case-study-card p,
:root:not([data-theme='dark']) .main-home-v2 .capability-card p,
:root:not([data-theme='dark']) .main-home-v2 .hybrid-stat-card p,
:root:not([data-theme='dark']) .main-home-v2 .show-stat span,
:root:not([data-theme='dark']) .main-home-v2 .showcase-case-card small,
:root:not([data-theme='dark']) .main-home-v2 .proof-quote-panel span,
:root:not([data-theme='dark']) .main-home-v2 .sidebar-link,
:root:not([data-theme='dark']) .main-home-v2 .sidebar-note p,
:root:not([data-theme='dark']) .main-home-v2 .surface-kpi-card span,
:root:not([data-theme='dark']) .main-home-v2 .surface-kpi-card small {
  color: var(--muted);
}

:root:not([data-theme='dark']) .main-home-v2 .sidebar-link {
  background: rgba(255,255,255,0.34);
  border-color: transparent;
}

:root:not([data-theme='dark']) .main-home-v2 .sidebar-link:hover,
:root:not([data-theme='dark']) .main-home-v2 .sidebar-link.active {
  background: rgba(255,255,255,0.9);
  border-color: rgba(155, 196, 246, 0.34);
}

:root:not([data-theme='dark']) .main-home-v2 .sidebar-label,
:root:not([data-theme='dark']) .main-home-v2 .eyebrow,
:root:not([data-theme='dark']) .main-home-v2 .section-label,
:root:not([data-theme='dark']) .main-home-v2 .logo-strip-label,
:root:not([data-theme='dark']) .main-home-v2 .case-tag,
:root:not([data-theme='dark']) .main-home-v2 .surface-kpi-card small {
  color: var(--accent-deep);
}

:root:not([data-theme='dark']) .main-home-v2 .panel,
:root:not([data-theme='dark']) .main-home-v2 .hybrid-logo-strip,
:root:not([data-theme='dark']) .main-home-v2 .hybrid-cta,
:root:not([data-theme='dark']) .main-home-v2 .hybrid-stat-card,
:root:not([data-theme='dark']) .main-home-v2 .capability-card,
:root:not([data-theme='dark']) .main-home-v2 .case-study-card,
:root:not([data-theme='dark']) .main-home-v2 .surface-card,
:root:not([data-theme='dark']) .main-home-v2 .proof-chart-panel,
:root:not([data-theme='dark']) .main-home-v2 .proof-quote-panel,
:root:not([data-theme='dark']) .main-home-v2 .mini-metric-card,
:root:not([data-theme='dark']) .main-home-v2 .surface-kpi-card,
:root:not([data-theme='dark']) .main-home-v2 .tool-visual-card,
:root:not([data-theme='dark']) .main-home-v2 .forms-flow-card,
:root:not([data-theme='dark']) .main-home-v2 .admin-visual-card,
:root:not([data-theme='dark']) .main-home-v2 .tool-visual-bars,
:root:not([data-theme='dark']) .main-home-v2 .tool-visual-bottom span,
:root:not([data-theme='dark']) .main-home-v2 .alt-main-panel,
:root:not([data-theme='dark']) .main-home-v2 .alt-side-card,
:root:not([data-theme='dark']) .main-home-v2 .alt-floating-card,
:root:not([data-theme='dark']) .main-home-v2 .alt-number-card,
:root:not([data-theme='dark']) .main-home-v2 .alt-graph-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(236,243,255,0.96));
  border-color: rgba(155, 196, 246, 0.18);
  box-shadow: var(--shadow-soft);
}

:root:not([data-theme='dark']) .main-home-v2 .alt-panel-header strong,
:root:not([data-theme='dark']) .main-home-v2 .alt-side-card strong,
:root:not([data-theme='dark']) .main-home-v2 .alt-floating-card strong,
:root:not([data-theme='dark']) .main-home-v2 .alt-number-card strong,
:root:not([data-theme='dark']) .main-home-v2 .tool-visual-card strong,
:root:not([data-theme='dark']) .main-home-v2 .forms-flow-card strong,
:root:not([data-theme='dark']) .main-home-v2 .admin-visual-card strong,
:root:not([data-theme='dark']) .main-home-v2 .tool-visual-bottom span,
:root:not([data-theme='dark']) .main-home-v2 .proof-quote-panel p {
  color: var(--heading);
}

:root:not([data-theme='dark']) .main-home-v2 .alt-panel-header small,
:root:not([data-theme='dark']) .main-home-v2 .alt-side-card small,
:root:not([data-theme='dark']) .main-home-v2 .alt-floating-card small,
:root:not([data-theme='dark']) .main-home-v2 .alt-number-card span,
:root:not([data-theme='dark']) .main-home-v2 .tool-visual-card small,
:root:not([data-theme='dark']) .main-home-v2 .forms-flow-card small,
:root:not([data-theme='dark']) .main-home-v2 .admin-visual-card small {
  color: var(--accent-deep);
}

:root:not([data-theme='dark']) .main-home-v2 .button.primary {
  color: var(--heading);
  background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 56%, #cfe1ff 100%);
  border-color: rgba(155, 196, 246, 0.32);
}

:root:not([data-theme='dark']) .main-home-v2 .button.secondary,
:root:not([data-theme='dark']) .main-home-v2 .badge,
:root:not([data-theme='dark']) .main-home-v2 .inline-chip,
:root:not([data-theme='dark']) .main-home-v2 .status-badge {
  color: var(--heading);
  background: rgba(255,255,255,0.74);
  border-color: var(--line);
}

:root:not([data-theme='dark']) .surface-page input,
:root:not([data-theme='dark']) .surface-page select,
:root:not([data-theme='dark']) .surface-page textarea,
:root:not([data-theme='dark']) .surface-page .button.secondary,
:root:not([data-theme='dark']) .surface-page .tab-button,
:root:not([data-theme='dark']) .surface-page .badge,
:root:not([data-theme='dark']) .surface-page .inline-chip,
:root:not([data-theme='dark']) .surface-page .status-badge,
:root:not([data-theme='dark']) .surface-page .field input,
:root:not([data-theme='dark']) .surface-page .field select,
:root:not([data-theme='dark']) .surface-page .field textarea {
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,246,255,0.98)) !important;
  border: 1px solid rgba(126, 157, 198, 0.18) !important;
  color: var(--heading) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 10px 24px rgba(111, 144, 190, 0.08);
}

:root:not([data-theme='dark']) .surface-page input::placeholder,
:root:not([data-theme='dark']) .surface-page textarea::placeholder {
  color: var(--muted) !important;
}

:root:not([data-theme='dark']) .surface-page .button.secondary:hover,
:root:not([data-theme='dark']) .surface-page .tab-button.active,
:root:not([data-theme='dark']) .surface-page .badge.accent,
:root:not([data-theme='dark']) .surface-page .inline-chip,
:root:not([data-theme='dark']) .surface-page .status-badge {
  background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 56%, #cfe1ff 100%) !important;
  border-color: rgba(155, 196, 246, 0.3) !important;
  color: var(--heading) !important;
}

:root:not([data-theme='dark']) .surface-page .chart-card,
:root:not([data-theme='dark']) .surface-page .chart-canvas-wrap,
:root:not([data-theme='dark']) .surface-page .chart-canvas-wrap-bar,
:root:not([data-theme='dark']) .surface-page .chart-canvas-wrap-tall,
:root:not([data-theme='dark']) .surface-page .chart-head,
:root:not([data-theme='dark']) .surface-page canvas,
:root:not([data-theme='dark']) .surface-page .kpi-item,
:root:not([data-theme='dark']) .surface-page .info-card,
:root:not([data-theme='dark']) .surface-page .list-card,
:root:not([data-theme='dark']) .surface-page .stat-card,
:root:not([data-theme='dark']) .surface-page .panel-soft,
:root:not([data-theme='dark']) .surface-page .tab-bar,
:root:not([data-theme='dark']) .surface-page .subtab-bar {
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(237,245,255,0.96)) !important;
  border-color: rgba(126, 157, 198, 0.18) !important;
  color: var(--text) !important;
}

:root:not([data-theme='dark']) .surface-page option {
  background: #ffffff;
  color: var(--heading);
}

:root:not([data-theme='dark']) .surface-page input,
:root:not([data-theme='dark']) .surface-page select,
:root:not([data-theme='dark']) .surface-page textarea {
  background-color: #ffffff !important;
  color: var(--heading) !important;
  caret-color: var(--accent-deep);
}

:root:not([data-theme='dark']) .surface-page input:-webkit-autofill,
:root:not([data-theme='dark']) .surface-page input:-webkit-autofill:hover,
:root:not([data-theme='dark']) .surface-page input:-webkit-autofill:focus,
:root:not([data-theme='dark']) .surface-page textarea:-webkit-autofill,
:root:not([data-theme='dark']) .surface-page select:-webkit-autofill {
  -webkit-text-fill-color: var(--heading) !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}