.mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #06231a;
  font-weight: 600;
  font-size: 15px;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast), opacity var(--motion-duration-fast);
  box-shadow: var(--shadow-sm);
}
.mh-btn:hover {
  box-shadow: var(--shadow-md);
}
.mh-btn:active {
  transform: scale(0.97);
}
.mh-btn--ghost {
  background: transparent;
  color: var(--theme-text-muted);
  box-shadow: none;
}
.mh-btn--ghost:hover {
  color: var(--theme-text);
}

.mh-card {
  border-radius: var(--radius-lg);
  background: var(--theme-surface-elevated);
  border: 1px solid var(--theme-border);
  overflow: hidden;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast);
}
.mh-card:active {
  transform: scale(0.98);
}

.mh-card-cover {
  aspect-ratio: 3 / 4;
  background: var(--theme-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-text-muted);
  font-size: 12px;
}

.mh-card-body {
  padding: var(--space-3);
}
.mh-card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.mh-section-title {
  font-size: 15px;
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--theme-text);
}

.mh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  color: var(--theme-text-muted);
}
.mh-empty-state-icon {
  width: 48px;
  height: 48px;
  opacity: 0.6;
}

.mh-clock {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.mh-clock-time {
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.mh-clock-meta {
  font-size: 13px;
  color: var(--theme-text-muted);
}

.mh-diag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--theme-border);
  font-size: 14px;
}
.mh-diag-status {
  font-weight: 600;
}
.mh-diag-status[data-level='supported'] {
  color: var(--color-success);
}
.mh-diag-status[data-level='limited'] {
  color: #f6c453;
}
.mh-diag-status[data-level='unsupported'] {
  color: var(--color-danger);
}

.mh-splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-system);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--theme-bg);
  color: var(--theme-text);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-standard);
}
.mh-splash[data-visible='false'] {
  opacity: 0;
  pointer-events: none;
}
.mh-splash-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--grad-brand, linear-gradient(135deg, var(--color-accent), var(--mh-primary-light)));
}

.mh-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-6);
}
.mh-setup-title {
  font-size: 26px;
  font-weight: 700;
}
.mh-setup-subtitle {
  color: var(--theme-text-muted);
  font-size: 15px;
}
.mh-setup-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* --- Mintホーム: 大型時計（仕様 §11, §109）--- */
.mh-bigclock {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.mh-bigclock-time {
  font-size: clamp(64px, 22vw, 96px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.mh-bigclock-date {
  font-size: 17px;
  font-weight: 500;
  color: var(--theme-text-muted);
}

/* 空状態の文言は単語の途中で改行しない（日本語は文節単位で折る） */
.mh-empty-state p {
  max-width: 28ch;
  line-height: 1.6;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 日付は時計の右下に添える（HomeScreen の小さめ時計） */
.mh-clock-meta {
  margin-left: var(--space-1);
}

/* --- Setup / onboarding --- */
.mh-screen--setup {
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 92%, #000 8%), var(--theme-bg));
}
.mh-setup {
  width: min(100%, 760px);
  height: 100%;
  margin-inline: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(env(safe-area-inset-bottom, 0px) + 22px);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  position: relative;
}
.mh-setup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.mh-setup-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 760;
  letter-spacing: .02em;
}
.mh-setup-brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 32%, transparent);
}
.mh-setup-step,
.mh-setup-eyebrow {
  color: var(--theme-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.mh-setup-eyebrow { margin: 6px 0 0; }
.mh-setup-title {
  margin: 2px 0 0;
  font-size: clamp(28px, 7vw, 42px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.mh-setup-subtitle {
  max-width: 640px;
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.mh-setup-progress {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 5px;
  margin: 7px 0 8px;
}
.mh-setup-progress-dot {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-text) 9%, transparent);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-spring);
}
.mh-setup-progress-dot[data-state='done'] { background: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.mh-setup-progress-dot[data-state='active'] { background: var(--color-accent); transform: scaleY(1.8); }
.mh-setup-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  padding: 8px 2px 14px;
}
.mh-setup-body > * { width: 100%; }
.mh-setup-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--theme-border);
}
.mh-setup-next { min-height: 52px; }
.mh-setup-next--complete { box-shadow: 0 12px 34px color-mix(in srgb, var(--color-accent) 24%, transparent); }
.mh-setup-back { min-height: 52px; }
.mh-setup-hero,
.mh-setup-complete {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 100%;
  text-align: center;
  gap: 18px;
}
.mh-setup-orb {
  width: min(42vw, 188px);
  aspect-ratio: 1;
  border-radius: 42%;
  background: radial-gradient(circle at 40% 32%, #fff8, transparent 33%), var(--grad-brand);
  box-shadow: 0 32px 70px color-mix(in srgb, var(--color-accent) 20%, transparent), inset 0 -14px 28px rgb(0 0 0 / .14);
  animation: mh-setup-orb-float 4.6s ease-in-out infinite;
  transform: rotate(-8deg);
}
.mh-setup-orb-core {
  display: block;
  width: 34%;
  aspect-ratio: 1;
  margin: 33% auto;
  border-radius: 50%;
  background: rgb(255 255 255 / .13);
  box-shadow: 0 0 32px rgb(255 255 255 / .12);
}
@keyframes mh-setup-orb-float {
  0%,100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-7px); }
}
.mh-setup-feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 560px);
}
.mh-setup-feature {
  padding: 12px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--theme-surface-elevated) 74%, transparent);
}
.mh-setup-feature-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 800;
}
.mh-setup-feature-label { display: block; font-size: 12px; font-weight: 720; }
.mh-setup-feature small { display: block; margin-top: 2px; font-size: 10px; color: var(--theme-text-muted); }
.mh-setup-note { color: var(--theme-text-muted); font-size: 12px; line-height: 1.6; text-align: center; margin: 0; }
.mh-setup-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mh-setup-option {
  position: relative;
  min-height: 92px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--theme-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--theme-surface-elevated) 84%, transparent);
  transition: border-color var(--motion-duration-fast), transform var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast);
}
.mh-setup-option:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--theme-border)); }
.mh-setup-option:active { transform: scale(.985); }
.mh-setup-option[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--color-accent) 72%, var(--theme-border));
  background: color-mix(in srgb, var(--color-accent) 9%, var(--theme-surface-elevated));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.mh-setup-option-mark { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--theme-text) 12%, transparent); }
.mh-setup-option[aria-pressed='true'] .mh-setup-option-mark { background: var(--color-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 13%, transparent); }
.mh-setup-option-copy { min-width: 0; display: grid; gap: 4px; }
.mh-setup-option-copy strong { font-size: 14px; }
.mh-setup-option-copy span { color: var(--theme-text-muted); font-size: 11px; line-height: 1.45; }
.mh-setup-option-check { width: 20px; text-align: center; color: var(--color-accent); font-weight: 900; }
.mh-theme-swatch { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--theme-border); background: #0c201c; }
.mh-theme-swatch--system { background: linear-gradient(135deg,#f6fffb 0 49%,#0c201c 50%); }
.mh-theme-swatch--light { background: #f6fffb; }
.mh-theme-swatch--dark { background: #0c201c; }
.mh-theme-swatch--oled { background: #000; }
.mh-setup-color-panel { display: grid; gap: 12px; align-content: start; }
.mh-color-field {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 56px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  background: var(--theme-surface-elevated);
}
.mh-color-field-code { font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--theme-text-muted); }
.mh-color-input { width: 56px; height: 38px; padding: 3px; border: 0; border-radius: 11px; background: transparent; }
.mh-setup-color-preview { display:flex; align-items:center; gap:10px; padding:18px; border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--setup-accent-a) 24%,transparent),color-mix(in srgb,var(--setup-accent-b) 16%,transparent)); border:1px solid var(--theme-border); }
.mh-setup-preview-dot { width: 12px; height: 12px; border-radius:50%; background:var(--setup-accent-a); box-shadow:0 0 18px color-mix(in srgb,var(--setup-accent-a) 36%,transparent); }
.mh-setup-preview-line { flex:1; height:4px; border-radius:99px; background:linear-gradient(90deg,var(--setup-accent-a),var(--setup-accent-b)); }
.mh-setup-stack { display:grid; gap:10px; }
.mh-setup-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--theme-border); border-radius:18px; background:var(--theme-surface-elevated); }
.mh-setup-toggle-copy { display:grid; gap:4px; }
.mh-setup-toggle-copy strong { font-size:14px; }
.mh-setup-toggle-copy span { font-size:11px; line-height:1.5; color:var(--theme-text-muted); }
.mh-toggle-input { position:absolute; opacity:0; pointer-events:none; }
.mh-switch { position:relative; flex:0 0 auto; }
.mh-switch-track { display:block; width:48px; height:28px; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 13%,transparent); transition:background var(--motion-duration-fast); }
.mh-switch-track::after { content:''; display:block; width:22px; height:22px; margin:3px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgb(0 0 0 / .25); transition:transform var(--motion-duration-fast) var(--motion-spring); }
.mh-toggle-input:checked + .mh-switch-track { background:var(--color-accent); }
.mh-toggle-input:checked + .mh-switch-track::after { transform:translateX(20px); }
.mh-setup-library { display:grid; gap:12px; }
.mh-setup-dropzone { display:grid; justify-items:center; gap:7px; min-height:190px; padding:24px; border-radius:22px; border:1px dashed color-mix(in srgb,var(--color-accent) 55%,var(--theme-border)); background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 7%,transparent),var(--theme-surface-elevated)); text-align:center; transition:transform var(--motion-duration-fast), border-color var(--motion-duration-fast), background var(--motion-duration-fast); }
.mh-setup-dropzone:hover { border-color:var(--color-accent); }
.mh-setup-dropzone:active { transform:scale(.99); }
.mh-setup-dropzone span:last-child { color:var(--theme-text-muted); font-size:11px; }
.mh-setup-upload-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:4px; border-radius:17px; background:color-mix(in srgb,var(--color-accent) 14%,transparent); color:var(--color-accent); font-size:25px; }
.mh-setup-diagnostics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mh-setup-diag-row { display:flex; justify-content:space-between; gap:10px; padding:11px 12px; border:1px solid var(--theme-border); border-radius:14px; background:color-mix(in srgb,var(--theme-surface-elevated) 68%,transparent); font-size:11px; }
.mh-setup-diag-row strong { color:var(--theme-text); font-size:11px; }
.mh-setup-complete { min-height: 100%; }
.mh-setup-complete h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.mh-setup-complete p { max-width:480px; margin:0; color:var(--theme-text-muted); line-height:1.6; }
.mh-setup-check { display:grid; place-items:center; width:82px; height:82px; border-radius:50%; background:color-mix(in srgb,var(--color-success) 18%,transparent); color:var(--color-success); box-shadow:0 18px 42px color-mix(in srgb,var(--color-success) 18%,transparent); animation:mh-setup-check .55s var(--motion-spring) both; }
.mh-setup-check span { font-size:38px; font-weight:900; }
@keyframes mh-setup-check { from { transform:scale(.75); opacity:0; } to { transform:scale(1); opacity:1; } }
.mh-setup-summary { width:min(100%,520px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.mh-setup-summary-row { display:flex; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--theme-border); border-radius:14px; background:var(--theme-surface-elevated); font-size:12px; }
.mh-setup-summary-row span { color:var(--theme-text-muted); }

/* UI font selection */
[data-ui-font='serif'] { --font-ui-family: Georgia, 'Times New Roman', 'Noto Serif JP', serif; }
[data-ui-font='mono'] { --font-ui-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
[data-large-text='true'] { --ui-scale: 1.06; }
[data-large-text='true'] .mh-tab { font-size: calc(11px * var(--ui-scale, 1)); }
[data-large-text='true'] .mh-section-title { font-size: calc(15px * var(--ui-scale, 1)); }

@media (max-width: 560px) {
  .mh-setup { padding-inline: 14px; }
  .mh-setup-options { grid-template-columns: 1fr; }
  .mh-setup-feature-row { grid-template-columns: repeat(2, 1fr); }
  .mh-setup-diagnostics, .mh-setup-summary { grid-template-columns: 1fr; }
}
.mh-setup-choice-panel {
  min-height: 180px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--theme-border);
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 7%, transparent), var(--theme-surface-elevated));
}
.mh-setup-choice-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 850;
}
.mh-setup-choice-copy { display:grid; gap:7px; }
.mh-setup-choice-copy strong { font-size:16px; }
.mh-setup-choice-copy span { color:var(--theme-text-muted); font-size:12px; line-height:1.55; }
.mh-setup-choice-badge { align-self:start; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--theme-text) 7%,transparent); color:var(--theme-text-muted); font-size:9px; font-weight:800; letter-spacing:.08em; }

.mh-setup-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--theme-text) 16%, transparent) transparent; }
.mh-setup-body > * { animation: mh-setup-step-in var(--motion-duration-normal) var(--motion-ease-emphasized) both; }
@keyframes mh-setup-step-in { from { opacity:0; transform:translateY(8px) scale(.992); } to { opacity:1; transform:none; } }
[data-reduced-motion='true'] .mh-setup-body > * { animation:none; }