/* Shared theme for the profile, app gallery, contact form and policy pages. */
:root {
  color-scheme: light;
  --bg: #f4efdf;
  --background: var(--bg);
  --card: rgba(255, 252, 246, 0.88);
  --text: #1d2318;
  --muted: #697060;
  --line: rgba(29, 35, 24, 0.08);
  --accent: #55b84a;
  --shadow: 0 18px 50px rgba(55, 53, 36, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: "IBM Plex Sans JP", "IBM Plex Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(189, 232, 143, 0.55), transparent 32%),
    linear-gradient(180deg, #f8f4e8 0%, var(--bg) 100%);
}

.card, .surface {
  padding: 32px 28px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.language-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.72); }
.language-switch[hidden] { display: none; }
.language-switch button { margin: 0; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); box-shadow: none; font: inherit; font-size: 12px; cursor: pointer; }
.language-switch button[aria-pressed="true"] { background: #e0efcf; color: var(--text); }
.language-switch button:hover { background: #eaf4df; }
.language-switch button:focus-visible { outline: 2px solid #357c2c; outline-offset: 2px; }
.language-switch button:hover:not(:disabled) { background: #eaf4df; }
.profile-page { position: relative; padding-top: 80px; }
.profile-page > .language-switch { position: absolute; top: 24px; right: 24px; }

@media (max-width: 480px) {
  .card, .surface { padding: 24px 20px; border-radius: 24px; }
}