:root {
  --stem-primary: #6c63ff;
  --stem-primary-light: #8b85ff;
  --stem-primary-dark: #4b44cc;
  --stem-secondary: #7c6fff;
  --stem-accent: #00d4aa;
  --stem-accent-light: #33ddbb;
  --stem-danger: #ff4757;
  --stem-warning: #ffa502;
  --stem-success: #2ed573;
  --stem-info: #1e90ff;
  --stem-bg: #f4f6fa;
  --stem-bg-soft: #eef2f7;
  --stem-surface: #ffffff;
  --stem-surface-2: #f9fafc;
  --stem-border: #e5e7eb;
  --stem-border-soft: #f0f2f6;
  --stem-text: #151827;
  --stem-text-2: #687089;
  --stem-text-3: #9aa3b8;
  --stem-radius-sm: 8px;
  --stem-radius: 12px;
  --stem-radius-lg: 16px;
  --stem-radius-xl: 20px;
  --stem-radius-full: 9999px;
  --stem-shadow-sm: 0 1px 3px rgba(15, 17, 23, .08);
  --stem-shadow: 0 8px 24px rgba(15, 17, 23, .10);
  --stem-shadow-lg: 0 18px 48px rgba(15, 17, 23, .16);
  --stem-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
  font-family: var(--stem-font);
  color-scheme: light;
}

body.stem-unified-theme {
  font-family: var(--stem-font) !important;
  background:
    radial-gradient(circle at top left, rgba(108, 99, 255, .10), transparent 30%),
    radial-gradient(circle at top right, rgba(0, 212, 170, .10), transparent 28%),
    var(--stem-bg) !important;
  color: var(--stem-text) !important;
  letter-spacing: 0 !important;
}

body.stem-unified-theme *,
body.stem-unified-theme *::before,
body.stem-unified-theme *::after {
  box-sizing: border-box;
}

body.stem-unified-theme button,
body.stem-unified-theme input,
body.stem-unified-theme textarea,
body.stem-unified-theme select {
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

body.stem-unified-theme button {
  touch-action: manipulation;
}

body.stem-unified-theme img,
body.stem-unified-theme video,
body.stem-unified-theme canvas {
  max-width: 100%;
}

body.stem-unified-theme .stem-app,
body.stem-unified-theme #app,
body.stem-unified-theme #app-root,
body.stem-unified-theme .app-shell,
body.stem-unified-theme .map-app,
body.stem-unified-theme .scan-app,
body.stem-unified-theme #calendar-app {
  color: var(--stem-text);
}

body.stem-unified-theme .stem-app,
body.stem-unified-theme #app,
body.stem-unified-theme #app-root {
  background: var(--stem-bg);
}

body.stem-unified-theme .stem-header,
body.stem-unified-theme .app-header,
body.stem-unified-theme .header,
body.stem-unified-theme #header,
body.stem-unified-theme .calendar-header,
body.stem-unified-theme .map-header,
body.stem-unified-theme .scan-topnav,
body.stem-unified-theme .top-bar {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--stem-text) !important;
  border-bottom: 1px solid var(--stem-border-soft) !important;
  box-shadow: 0 1px 0 rgba(15, 17, 23, .04) !important;
  backdrop-filter: blur(18px);
}

body.stem-unified-theme .stem-header-title,
body.stem-unified-theme .header-title,
body.stem-unified-theme .page-title,
body.stem-unified-theme .calendar-header__title,
body.stem-unified-theme .map-header__title,
body.stem-unified-theme .scan-topnav__title,
body.stem-unified-theme .top-bar-title {
  color: var(--stem-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.stem-unified-theme .stem-card,
body.stem-unified-theme .card,
body.stem-unified-theme .stat-card,
body.stem-unified-theme .user-card,
body.stem-unified-theme .role-card,
body.stem-unified-theme .log-card,
body.stem-unified-theme .mem-card,
body.stem-unified-theme .scan-card,
body.stem-unified-theme .map-card,
body.stem-unified-theme .booking-card,
body.stem-unified-theme .panel,
body.stem-unified-theme .section-card,
body.stem-unified-theme [class*="Card"],
body.stem-unified-theme [class*="-card"] {
  border: 1px solid var(--stem-border-soft) !important;
  border-radius: var(--stem-radius-lg) !important;
  box-shadow: var(--stem-shadow-sm) !important;
}

body.stem-unified-theme .stem-card:hover,
body.stem-unified-theme .card:hover,
body.stem-unified-theme .stat-card:hover,
body.stem-unified-theme .user-card:hover,
body.stem-unified-theme .mem-card:hover,
body.stem-unified-theme .scan-card:hover,
body.stem-unified-theme [class*="-card"]:hover {
  box-shadow: var(--stem-shadow) !important;
}

body.stem-unified-theme .btn,
body.stem-unified-theme .stem-btn,
body.stem-unified-theme .action-btn,
body.stem-unified-theme .act-btn,
body.stem-unified-theme .scan-btn,
body.stem-unified-theme .tab-btn,
body.stem-unified-theme .filter-chip,
body.stem-unified-theme .schedule-view-tab {
  border-radius: var(--stem-radius) !important;
  font-weight: 700 !important;
}

body.stem-unified-theme .btn-primary,
body.stem-unified-theme .stem-btn-primary,
body.stem-unified-theme .scan-btn--gradient,
body.stem-unified-theme .action-btn.primary,
body.stem-unified-theme .tab-btn.active,
body.stem-unified-theme .filter-chip.active,
body.stem-unified-theme .schedule-view-tab.active {
  background: linear-gradient(135deg, var(--stem-primary), var(--stem-accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(108, 99, 255, .22) !important;
}

body.stem-unified-theme .stem-icon-btn,
body.stem-unified-theme .icon-btn,
body.stem-unified-theme .header-icon-btn,
body.stem-unified-theme .calendar-header__btn,
body.stem-unified-theme .map-icon-btn,
body.stem-unified-theme .scan-icon-btn,
body.stem-unified-theme .header-back,
body.stem-unified-theme .stem-header-back,
body.stem-unified-theme .page-back-btn {
  border-radius: var(--stem-radius-full) !important;
  background: rgba(108, 99, 255, .08) !important;
  color: var(--stem-primary) !important;
  border: 1px solid rgba(108, 99, 255, .10) !important;
}

body.stem-unified-theme .stem-bottom-nav,
body.stem-unified-theme .bottom-nav,
body.stem-unified-theme .calendar-sidebar,
body.stem-unified-theme .scan-sidebar,
body.stem-unified-theme #sidebar-nav {
  background: rgba(255, 255, 255, .94) !important;
  border-color: var(--stem-border-soft) !important;
  box-shadow: 0 -1px 0 rgba(15, 17, 23, .04) !important;
  backdrop-filter: blur(18px);
}

body.stem-unified-theme .stem-bottom-nav button,
body.stem-unified-theme .bottom-nav button,
body.stem-unified-theme .scan-nav-item,
body.stem-unified-theme .calendar-sidebar button {
  border-radius: var(--stem-radius) !important;
}

body.stem-unified-theme .active,
body.stem-unified-theme [aria-selected="true"] {
  --stem-active-color: var(--stem-primary);
}

body.stem-unified-theme .badge,
body.stem-unified-theme .stem-badge,
body.stem-unified-theme .role-badge,
body.stem-unified-theme .tag,
body.stem-unified-theme [class*="badge"] {
  border-radius: var(--stem-radius-full) !important;
  font-weight: 800 !important;
}

body.stem-unified-theme input,
body.stem-unified-theme textarea,
body.stem-unified-theme select,
body.stem-unified-theme .search-bar,
body.stem-unified-theme .scan-topnav__search {
  border-radius: var(--stem-radius) !important;
  border-color: var(--stem-border) !important;
  background: var(--stem-surface) !important;
}

body.stem-unified-theme input:focus,
body.stem-unified-theme textarea:focus,
body.stem-unified-theme select:focus {
  outline: 2px solid rgba(108, 99, 255, .18) !important;
  border-color: var(--stem-primary) !important;
}

body.stem-unified-theme .stem-unified-icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: -0.16em;
}

body.stem-unified-theme .stem-unified-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.stem-unified-theme button .stem-unified-icon,
body.stem-unified-theme .stem-icon-btn .stem-unified-icon,
body.stem-unified-theme .icon-btn .stem-unified-icon,
body.stem-unified-theme .header-icon-btn .stem-unified-icon,
body.stem-unified-theme .scan-icon-btn .stem-unified-icon,
body.stem-unified-theme .map-icon-btn .stem-unified-icon {
  margin-right: .42em;
}

body.stem-unified-theme .stem-icon-btn .stem-unified-icon:only-child,
body.stem-unified-theme .icon-btn .stem-unified-icon:only-child,
body.stem-unified-theme .header-icon-btn .stem-unified-icon:only-child,
body.stem-unified-theme .scan-icon-btn .stem-unified-icon:only-child,
body.stem-unified-theme .map-icon-btn .stem-unified-icon:only-child {
  margin-right: 0;
}

body.stem-unified-theme .stem-unified-back-home {
  position: fixed;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 9000;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  border: 1px solid rgba(108, 99, 255, .18);
  background: linear-gradient(135deg, rgba(108, 99, 255, .96), rgba(0, 212, 170, .96));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--stem-shadow-lg);
  text-decoration: none;
}

body.stem-unified-theme .stem-unified-back-home svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 540px) {
  body.stem-unified-theme .stem-app,
  body.stem-unified-theme .map-app,
  body.stem-unified-theme #calendar-app {
    max-width: 430px;
    min-height: 100vh;
    margin-inline: auto;
    box-shadow: var(--stem-shadow-lg);
  }

  body.stem-unified-theme .scan-app {
    max-width: 1180px;
    margin-inline: auto;
  }
}

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