/* THEME01R1: soft teal control edges and immediate theme colors. */
:root {
  --control-surface: #fff;
  --control-hover: #edf5f7;
  --control-ink: #102237;
  --control-border: #b7d7d2;
  --control-border-hover: #8dbfb6;
  --control-focus: #087983;
}
:root[data-theme="dark"], :root.dark {
  --control-surface: #112438;
  --control-hover: #1a344a;
  --control-ink: #f0f6fc;
  --control-border: #42676f;
  --control-border-hover: #69b0a8;
  --control-focus: #69dace;
}
/* Hero/brand bands retain a dark surface in either page theme. */
.hero, .section-dark, .section-dark-soft {
  --control-surface: #112438;
  --control-hover: #1a344a;
  --control-ink: #f0f6fc;
  --control-border: #42676f;
  --control-border-hover: #69b0a8;
  --control-focus: #69dace;
}
/* Color and shadow transitions leave old-theme pixels behind. Keep motion only. */
.button, .site-nav a, .feature-card, .legal-card, .rf-root button {
  transition-property: transform, opacity;
}
:root .button.button-outline,
:root .button.button-secondary {
  color: var(--control-ink);
  background: var(--control-surface);
  border: 1px solid var(--control-border);
  box-shadow: none;
}
:root .button.button-outline:hover,
:root .button.button-secondary:hover {
  color: var(--control-ink);
  background: var(--control-hover);
  border-color: var(--control-border-hover);
  box-shadow: none;
}
:root .theme-toggle,
:root .nav-toggle {
  color: var(--control-ink);
  background: var(--control-surface);
  border-color: var(--control-border);
}
:root .theme-toggle:hover,
:root .nav-toggle:hover {
  background: var(--control-hover);
  border-color: var(--control-border-hover);
}
:root .faq-filters button,
:root .scenario-tabs button[aria-selected="true"],
:root .screen-close,
:root .recovery-links .btn,
:root .refund-page input,
:root .refund-page .support-button,
:root .rf-root button,
:root .rf-root textarea,
:root .rf-close,
:root .cr-dialog input,
:root .cr-dialog .cr-icon-button,
:root .checkout-field :is(input, select, textarea),
:root .checkout-dialog-close,
:root .checkout-payment-close {
  border-color: var(--control-border);
}
:root .faq-filters button[aria-pressed="true"],
:root .faq-filters button:hover,
:root .scenario-tabs button[aria-selected="true"]:hover,
:root .refund-page .support-button:hover:not(:disabled),
:root .rf-root button:hover:not(:disabled),
:root .cr-dialog .cr-icon-button:hover {
  border-color: var(--control-border-hover);
}
/* Clickable FAQ/policy surfaces follow the same edge hierarchy. */
:root .faq-item,
:root .legal-card {
  border-color: var(--control-border);
}
:root .faq-item.open,
:root .legal-card:hover {
  border-color: var(--control-border-hover);
}
/* This band is mint/blue in both themes, so its secondary action stays dark. */
:root .support-section {
  --control-border: #365f73;
  --control-border-hover: #163f55;
  --control-focus: #163f55;
}
:root .support-actions .refund-support-link {
  border-color: var(--control-border);
}
:root .support-actions .refund-support-link:hover {
  border-color: var(--control-border-hover);
  background: rgb(9 35 56 / 6%);
}
/* The manual uses .dark, while the other pages use data-theme. */
:root:not([data-theme]) :is(button, select),
:root:not([data-theme]) .toTop {
  border-color: var(--control-border);
}
:root .quick a:not(:first-child) {
  border-color: var(--control-border);
}
:root :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 3px;
}
/* Long translated recovery/error copy must wrap inside the mobile card. */
.recovery-main { min-width: 0; }
.recovery-main :is(h1, .lead, .recovery-status, .recovery-note) {
  overflow-wrap: anywhere;
}
html[lang="ja"] .recovery-main :is(.lead, .recovery-status, .recovery-note) {
  word-break: normal;
  line-break: strict;
}
@media (prefers-reduced-motion: reduce) {
  .button, .site-nav a, .feature-card, .legal-card, .rf-root button {
    transition: none;
  }
}

/* HOME02: one application-style display control on headers, dialogs and manual. */
:root{--theme-control-icon:#147d78}
:root[data-theme="dark"],:root.dark{--theme-control-icon:#66e4c3}
:root .theme-toggle,:root #theme{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;padding:0;border:1px solid var(--control-border);border-radius:12px;background:var(--control-surface);color:var(--theme-control-icon);box-shadow:none;line-height:1;cursor:pointer;transform:none;transition:transform .16s ease}
:root .theme-toggle:hover,:root #theme:hover{background:var(--control-hover);border-color:var(--control-border-hover);color:var(--theme-control-icon);transform:translateY(-1px)}
:root .theme-toggle:active,:root #theme:active{transform:none}
:root .theme-toggle:focus-visible,:root #theme:focus-visible{outline:2px solid var(--control-focus);outline-offset:3px}
:root .theme-toggle .site-theme-symbol,:root #theme .site-theme-symbol{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:none;transition:none}
:root[data-theme="light"] .theme-toggle .site-theme-symbol,:root:not([data-theme]):not(.dark) #theme .site-theme-symbol{transform:rotate(22.5deg)}
@media(prefers-reduced-motion:reduce){:root .theme-toggle,:root #theme{transition:none;transform:none}}