/* Shared light theme for every public page. Dark mode remains the default. */
:root {
  --xs-light-bg: #edf2f7;
  --xs-light-bg-deep: #e5ebf2;
  --xs-light-surface: rgba(255, 255, 255, .86);
  --xs-light-surface-solid: #ffffff;
  --xs-light-surface-soft: #f6f8fb;
  --xs-light-border: #d5dee9;
  --xs-light-border-strong: #b9c8d9;
  --xs-light-text: #1e2b3d;
  --xs-light-muted: #52647a;
  --xs-light-dim: #708196;
  --xs-light-blue: #2864a8;
  --xs-light-blue-soft: rgba(40, 100, 168, .1);
  --xs-light-shadow: 0 12px 30px rgba(43, 64, 91, .12);
}

/* Neutral near-black dark palette, inspired by the reference image. */
html:not([data-theme='light']) {
  --bg: #0f0f11;
  --bg-2: #15161a;
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .09);
  --border-hi: rgba(255, 255, 255, .16);
}

html:not([data-theme='light']) body {
  background: var(--bg) !important;
}

/* Keep the dark shell neutral like Jimeng; colorful accents belong to content and actions. */
html:not([data-theme='light']) .hero,
html:not([data-theme='light']) .hero-bg,
html:not([data-theme='light']) .page-hero {
  background: var(--bg) !important;
}

html:not([data-theme='light']) .page-hero::before {
  background: none !important;
}

html[data-theme='light'] {
  color-scheme: light;
  background: var(--xs-light-bg);
}

html[data-theme='light'] body {
  background: var(--xs-light-bg) !important;
  color: var(--xs-light-text) !important;
}

html[data-theme='light'] body::before,
html[data-theme='light'] body::after {
  opacity: .16;
}

/* Shared shell elements across the public tools and account pages. */
html[data-theme='light'] .navbar,
html[data-theme='light'] .topbar,
html[data-theme='light'] .admin-header {
  background: rgba(255, 255, 255, .88) !important;
  border-color: var(--xs-light-border) !important;
  box-shadow: 0 4px 18px rgba(43, 64, 91, .07) !important;
}

html[data-theme='light'] .navbar.scrolled {
  background: rgba(255, 255, 255, .94) !important;
}

html[data-theme='light'] .nav-links a,
html[data-theme='light'] .nav-link,
html[data-theme='light'] .topbar a {
  color: var(--xs-light-muted) !important;
}

html[data-theme='light'] .nav-links a:hover,
html[data-theme='light'] .nav-link:hover {
  color: var(--xs-light-blue) !important;
}

html[data-theme='light'] .nav-logo .logo-text {
  color: var(--xs-light-text) !important;
  -webkit-text-fill-color: currentColor;
}

html[data-theme='light'] .glass,
html[data-theme='light'] .matrix-card,
html[data-theme='light'] .tool-card,
html[data-theme='light'] .stat-card,
html[data-theme='light'] .price-card,
html[data-theme='light'] .panel,
html[data-theme='light'] .card,
html[data-theme='light'] .surface,
html[data-theme='light'] .workspace,
html[data-theme='light'] .form-card {
  background: var(--xs-light-surface) !important;
  border-color: var(--xs-light-border) !important;
  box-shadow: var(--xs-light-shadow);
}

html[data-theme='light'] .matrix-card:hover,
html[data-theme='light'] .tool-card:hover,
html[data-theme='light'] .stat-card:hover,
html[data-theme='light'] .card:hover {
  background: var(--xs-light-surface-solid) !important;
  border-color: var(--xs-light-border-strong) !important;
  box-shadow: 0 16px 34px rgba(43, 64, 91, .16) !important;
}

html[data-theme='light'] h1,
html[data-theme='light'] h2,
html[data-theme='light'] h3,
html[data-theme='light'] h4,
html[data-theme='light'] .matrix-title,
html[data-theme='light'] .tool-card h3,
html[data-theme='light'] .section-title,
html[data-theme='light'] .hero h1 {
  color: var(--xs-light-text) !important;
}

html[data-theme='light'] p,
html[data-theme='light'] .matrix-desc,
html[data-theme='light'] .section-subtitle,
html[data-theme='light'] .t-desc,
html[data-theme='light'] .text-muted,
html[data-theme='light'] .text-dim {
  color: var(--xs-light-muted) !important;
}

html[data-theme='light'] .text-dim,
html[data-theme='light'] .tool-card.is-soon h3 {
  color: var(--xs-light-dim) !important;
}

html[data-theme='light'] input,
html[data-theme='light'] textarea,
html[data-theme='light'] select,
html[data-theme='light'] .input,
html[data-theme='light'] .select,
html[data-theme='light'] .textarea {
  background: var(--xs-light-surface-solid) !important;
  color: var(--xs-light-text) !important;
  border-color: var(--xs-light-border-strong) !important;
}

html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder {
  color: #8a9aad !important;
}

html[data-theme='light'] table,
html[data-theme='light'] th,
html[data-theme='light'] td,
html[data-theme='light'] .table-wrap,
html[data-theme='light'] .data-table {
  border-color: var(--xs-light-border) !important;
}

html[data-theme='light'] th {
  background: var(--xs-light-bg-deep) !important;
  color: var(--xs-light-text) !important;
}

html[data-theme='light'] td {
  color: var(--xs-light-muted) !important;
  background: rgba(255, 255, 255, .62) !important;
}

html[data-theme='light'] .btn-ghost,
html[data-theme='light'] .btn-secondary,
html[data-theme='light'] button.secondary,
html[data-theme='light'] .button-secondary {
  color: var(--xs-light-blue) !important;
  background: rgba(255, 255, 255, .76) !important;
  border-color: var(--xs-light-border-strong) !important;
}

html[data-theme='light'] .btn-ghost:hover,
html[data-theme='light'] .btn-secondary:hover,
html[data-theme='light'] button.secondary:hover,
html[data-theme='light'] .button-secondary:hover {
  background: var(--xs-light-blue-soft) !important;
}

html[data-theme='light'] .matrix-tools,
html[data-theme='light'] .tool-foot,
html[data-theme='light'] .card-enter,
html[data-theme='light'] .section-head,
html[data-theme='light'] .divider {
  border-color: var(--xs-light-border) !important;
}

html[data-theme='light'] .matrix-tools .tool-name,
html[data-theme='light'] .tool-name {
  color: var(--xs-light-text) !important;
}

html[data-theme='light'] .matrix-tools li.tool-unavailable .tool-name,
html[data-theme='light'] .tool-card.is-soon h3 {
  color: #8190a2 !important;
}

html[data-theme='light'] .matrix-tools .tool-token,
html[data-theme='light'] .t-token,
html[data-theme='light'] .badge-soon {
  background: #e8eef5 !important;
  color: #62758b !important;
}

html[data-theme='light'] .matrix-tools li:not(.tool-unavailable) .tool-token,
html[data-theme='light'] .tool-card:not(.is-soon) .t-token {
  color: #176ca5 !important;
  background: #dcefff !important;
  border-color: #b8d8ed !important;
}

/* Keep dark, saturated action colors readable without making the light theme loud. */
html[data-theme='light'] .btn-primary,
html[data-theme='light'] .btn-use.live,
html[data-theme='light'] .primary,
html[data-theme='light'] .action-primary {
  box-shadow: 0 6px 14px rgba(40, 100, 168, .2) !important;
}

html[data-theme='light'] .hero-bg,
html[data-theme='light'] .hero-grid,
html[data-theme='light'] .iot-bg {
  opacity: .32;
}

html[data-theme='light'] .hero {
  background: #eef4f8 !important;
}

html[data-theme='light'] .hero-key-message {
  color: #286fae !important;
  text-shadow: none;
}

html[data-theme='light'] .matrix-section-tag {
  background: rgba(54, 134, 222, .1) !important;
  border-color: #428ed5 !important;
  color: #286fae !important;
  box-shadow: 0 0 0 1px rgba(66, 142, 213, .12) inset, 0 0 14px rgba(66, 142, 213, .1) !important;
}

html[data-theme='light'] .hero .hero-actions .btn {
  color: #fff !important;
  background: linear-gradient(135deg, #31c2f7 0%, #3d7df4 100%) !important;
  border-color: rgba(87, 181, 246, .5) !important;
  box-shadow: 0 8px 20px rgba(50, 135, 245, .24) !important;
}

html[data-theme='light'] .hero-bg {
  opacity: 1 !important;
  background:
    radial-gradient(ellipse 72% 52% at 20% 16%, rgba(112, 195, 201, .22), transparent),
    radial-gradient(ellipse 58% 48% at 80% 30%, rgba(87, 142, 194, .16), transparent),
    #eef4f8 !important;
}

html[data-theme='light'] .page-hero {
  background: linear-gradient(180deg, #f7fbfd 0%, #edf5f8 100%) !important;
  border-bottom: 1px solid var(--xs-light-border);
}

html[data-theme='light'] .page-hero::before {
  opacity: .55;
}

html[data-theme='light'] .search-box {
  background:
    linear-gradient(#f8fbfd, #f8fbfd) padding-box,
    linear-gradient(135deg, #68c5d0, #477eaf) border-box !important;
}

/* The shared form rule above must not fill the transparent search field. */
html[data-theme='light'] .search-box input {
  background: transparent !important;
}

html[data-theme='light'] .search-count {
  color: #2d6494 !important;
  background: rgba(71, 126, 175, .1) !important;
}

html[data-theme='light'] .pill-name {
  color: var(--xs-light-text) !important;
  text-shadow: none;
}

html[data-theme='light'] .site-nav-member__meta,
html[data-theme='light'] .site-nav-member__level {
  color: #46617d !important;
  background: rgba(71, 126, 175, .09) !important;
}

html[data-theme='light'] .site-nav-member__link,
html[data-theme='light'] .site-nav-member__logout {
  color: #3d5d7e !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: #c6d4e1 !important;
}

html[data-theme='light'] .site-nav-member__link--primary {
  color: #fff !important;
  background: linear-gradient(135deg, #4f8fc0, #356c9e) !important;
  border-color: #4f8fc0 !important;
}

html[data-theme='light'] .sidebar,
html[data-theme='light'] aside {
  background: #e8eef5 !important;
  border-color: var(--xs-light-border) !important;
}

html[data-theme='light'] .modal,
html[data-theme='light'] .dialog,
html[data-theme='light'] .dropdown-menu,
html[data-theme='light'] .menu,
html[data-theme='light'] .popover {
  background: #ffffff !important;
  color: var(--xs-light-text) !important;
  border-color: var(--xs-light-border) !important;
  box-shadow: 0 18px 40px rgba(43, 64, 91, .18) !important;
}

html[data-theme='light'] .dropdown-menu a,
html[data-theme='light'] .menu a,
html[data-theme='light'] .popover button {
  color: var(--xs-light-text) !important;
}

html[data-theme='light'] .dropdown-menu a:hover,
html[data-theme='light'] .menu a:hover,
html[data-theme='light'] .popover button:hover {
  background: #edf3f9 !important;
}

.theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000001;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 10px;
  background: rgba(13, 20, 36, .76);
  color: #dbeafe;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.theme-switcher[data-theme-inline] {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 0;
  border-radius: 9px;
}

.theme-switcher:hover {
  transform: translateY(-2px);
  background: rgba(35, 53, 79, .92);
  border-color: rgba(147, 197, 253, .56);
}

html[data-theme='light'] .theme-switcher {
  background: rgba(255, 255, 255, .9);
  border-color: var(--xs-light-border-strong);
  color: #34577f;
  box-shadow: 0 8px 18px rgba(43, 64, 91, .14);
}

html[data-theme='light'] .theme-switcher:hover {
  background: #ffffff;
  border-color: #86a9cc;
}

@media (max-width: 760px) {
  .theme-switcher {
    bottom: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}