:root,
:root[data-theme="light"] {
  --bg: #edf2f6;
  --surface: #f8fafc;
  --card: #ffffff;
  --card2: #eef3f7;
  --line: #cbd5df;
  --txt: #18212b;
  --sub: #536170;
  --muted: #748190;
  --info: #1769c2;
  --info-bg: #eaf3ff;
  --go: #087d3e;
  --go-bg: #e9f7ef;
  --warn: #9a6200;
  --warn-bg: #fff5dd;
  --header: rgba(255, 255, 255, .94);
  --shadow: 0 14px 34px rgba(31, 52, 72, .10);
  --shadow-soft: 0 7px 20px rgba(31, 52, 72, .07);
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #151a21;
  --card: #1a212a;
  --card2: #202a35;
  --line: #303a46;
  --txt: #f2f4f6;
  --sub: #a9b3bd;
  --muted: #84909c;
  --info: #66a7ff;
  --info-bg: #13243a;
  --go: #35c46f;
  --go-bg: #10271a;
  --warn: #f0b84b;
  --warn-bg: #302613;
  --header: rgba(21, 26, 33, .94);
  --shadow: 0 14px 34px rgba(0, 0, 0, .24);
  --shadow-soft: 0 7px 20px rgba(0, 0, 0, .18);
}

body.haienavi-page {
  font-size: 16px;
  background:
    radial-gradient(circle at 50% -120px, rgba(196, 135, 19, .13), transparent 390px),
    radial-gradient(circle at 94% 30%, rgba(23, 105, 194, .08), transparent 360px),
    radial-gradient(circle at 5% 72%, rgba(8, 125, 62, .06), transparent 340px),
    linear-gradient(180deg, #fbfcfd 0, var(--bg) 460px, #e9eff4 100%);
  background-attachment: fixed;
}

:root[data-theme="dark"] body.haienavi-page {
  background:
    radial-gradient(circle at 50% -120px, rgba(217, 166, 46, .11), transparent 390px),
    radial-gradient(circle at 94% 30%, rgba(102, 167, 255, .07), transparent 360px),
    linear-gradient(180deg, #111720 0, var(--bg) 460px, #0a0e13 100%);
}

.haienavi-page header {
  background: var(--header);
  border-bottom-color: var(--line);
  box-shadow: 0 5px 20px rgba(31, 52, 72, .06);
  backdrop-filter: blur(10px);
}

.haienavi-page .theme-toggle {
  width: 54px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--txt);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.haienavi-page .theme-icon {
  font-size: 18px;
  line-height: 1;
}

.haienavi-page .theme-label {
  color: var(--sub);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.haienavi-page .top-login {
  box-shadow: var(--shadow-soft);
}

.haienavi-page .page-hero {
  margin: 0 0 22px;
  padding: 20px 22px;
  border: 1px solid rgba(23, 105, 194, .20);
  border-top: 3px solid rgba(196, 135, 19, .72);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(234, 243, 255, .74));
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .haienavi-page .page-hero {
  background: linear-gradient(135deg, #1a212a, #13243a);
  border-color: #354151;
  border-top-color: rgba(217, 166, 46, .72);
}

.haienavi-page .page-hero .crumbs {
  margin-bottom: 10px;
}

.haienavi-page .page-hero h1 {
  margin-top: 0;
  font-size: clamp(24px, 4.2vw, 34px);
}

.haienavi-page .page-hero .lead,
.haienavi-page .page-hero .subtitle {
  font-size: 16px;
  margin-bottom: 0;
}

.haienavi-page .card,
.haienavi-page .guide-card,
.haienavi-page .machine-list a,
.haienavi-page .machine-row,
.haienavi-page .summary-grid > div,
.haienavi-page details.detail-group,
.haienavi-page .stat {
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

.public-list-page .machine-list a {
  position: relative;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 250, 252, .96));
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.public-list-page .machine-list a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--info), rgba(196, 135, 19, .78));
}

.public-list-page .machine-list a:hover,
.member-list-page .machine-row:hover {
  transform: translateY(-1px);
  border-color: var(--info);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .public-list-page .machine-list a {
  background: linear-gradient(145deg, var(--card), var(--surface));
}

.public-machine-page article > .card:first-of-type {
  background: linear-gradient(145deg, rgba(255, 253, 248, .98), var(--card));
  border-color: rgba(196, 135, 19, .30);
}

:root[data-theme="dark"] .public-machine-page article > .card:first-of-type {
  background: linear-gradient(145deg, #241f16, var(--card));
  border-color: rgba(217, 166, 46, .35);
}

.public-machine-page .summary-grid > div {
  background: var(--card2);
}

.public-machine-page .ev-public-table,
.public-machine-page .calc-table {
  box-shadow: var(--shadow-soft);
}

.public-machine-page .cta {
  background: linear-gradient(135deg, #168649, #087239);
  border-color: #087239;
  color: #fff;
  box-shadow: 0 9px 24px rgba(8, 125, 62, .18);
}

.member-list-page .page-hero,
.member-machine-page .machine-head {
  padding: 18px 20px;
  border: 1px solid rgba(23, 105, 194, .20);
  border-top: 3px solid rgba(196, 135, 19, .70);
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(234, 243, 255, .70));
  box-shadow: var(--shadow-soft);
}

:root[data-theme="dark"] .member-list-page .page-hero,
:root[data-theme="dark"] .member-machine-page .machine-head {
  background: linear-gradient(135deg, #1a212a, #13243a);
  border-color: #354151;
  border-top-color: rgba(217, 166, 46, .72);
}

.member-list-page .machine-row {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--card), var(--surface));
}

.member-machine-page .decision,
.sample-page .decision,
.member-machine-page .target-section,
.sample-page .target-section {
  box-shadow: var(--shadow);
}

.sample-page .sample-bar {
  background: linear-gradient(90deg, #c88b16, #e2b12d);
  box-shadow: 0 5px 18px rgba(97, 65, 8, .20);
}

.sample-page .sample-full-intro,
.sample-page .sample-full-cta {
  background: linear-gradient(145deg, #fffaf0, var(--card));
}

:root[data-theme="dark"] .sample-page .sample-full-intro,
:root[data-theme="dark"] .sample-page .sample-full-cta {
  background: linear-gradient(145deg, #2b2414, var(--card));
}

.auth-page,
.completion-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 26px 18px 42px;
}

.auth-page main,
.completion-page main {
  position: relative;
}

.auth-page .logo,
.completion-page .logo,
.legal-page .logo,
.account-page .logo,
.cancellation-page .logo,
.analytics-page .logo {
  filter: none;
}

.haienavi-page .logo-dark {
  display: none;
}

:root[data-theme="dark"] .haienavi-page .logo-light {
  display: none;
}

:root[data-theme="dark"] .haienavi-page .logo-dark {
  display: block;
}

.auth-page .card,
.completion-page .card,
.account-page .card,
.cancellation-page .card,
.legal-page .card {
  border-radius: 18px;
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(247, 250, 252, .96));
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .auth-page .card,
:root[data-theme="dark"] .completion-page .card,
:root[data-theme="dark"] .account-page .card,
:root[data-theme="dark"] .cancellation-page .card,
:root[data-theme="dark"] .legal-page .card {
  background: linear-gradient(145deg, var(--card), var(--surface));
}

.auth-page input,
.completion-page input {
  background: var(--surface);
  color: var(--txt);
}

.auth-page button,
.completion-page button,
.completion-page .primary,
.account-page .primary {
  border-color: #1f70c7;
  background: linear-gradient(135deg, #2175cc, #155ca9);
  color: #fff;
  box-shadow: 0 9px 24px rgba(23, 105, 194, .20);
}

.page-theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
}

.legal-page,
.account-page,
.cancellation-page,
.analytics-page {
  min-height: 100vh;
}

.legal-page main,
.account-page main,
.cancellation-page main,
.analytics-page main {
  position: relative;
}

.legal-page h1,
.account-page h1,
.cancellation-page h1,
.analytics-page h1 {
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(196, 135, 19, .42);
}

.legal-page p,
.legal-page li,
.legal-page dt,
.legal-page dd {
  font-size: 15px;
}

.analytics-page .metric {
  background: var(--card2);
  box-shadow: var(--shadow-soft);
}

.account-page .trial.active {
  box-shadow: var(--shadow-soft);
}

.analytics-page .panel,
.analytics-page .card,
.analytics-page table {
  box-shadow: var(--shadow-soft);
}

.haienavi-page a:focus-visible,
.haienavi-page button:focus-visible,
.haienavi-page input:focus-visible,
.haienavi-page select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--info) 42%, transparent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .haienavi-page .page-hero,
  .member-list-page .page-hero,
  .member-machine-page .machine-head {
    padding: 16px 14px;
    border-radius: 15px;
  }

  .public-list-page .machine-list {
    grid-template-columns: 1fr;
  }

  .page-theme-toggle {
    top: 12px;
    right: 12px;
  }
}