@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   Design System v4 — Dark Theme Premium
   Architecture: @layer cascade system
   Ref: Linea Creative (high-contrast dark)
        Unicell (Noto Sans JP + warm accents)
   ============================================ */

/* --- @layer declaration (cascade order) --- */
@layer reset, theme, base, layout, components, utilities, responsive;

/* ============================================
   @property — Animatable CSS custom properties
   ============================================ */
@property --glow-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.25;
}

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 135deg;
}

@property --shimmer-x {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -100%;
}

/* ============================================
   Theme — CSS Custom Properties
   ============================================ */
@layer theme {
  :root {
    color-scheme: dark;

    /* ===== Color Palette (7 core colors) ===== */

    /* Gold — primary accent, CTAs, highlights (muted amber: キャンドル・月光) */
    --color-gold:        #c8924a;
    --color-gold-light:  #d4aa6a;
    --color-gold-dark:   #a87230;
    --color-gold-glow:   rgba(200, 146, 74, 0.28);
    --color-gold-subtle: rgba(200, 146, 74, 0.10);

    /* Teal — secondary accent, links, info (抑制: ペルソナに合わせgold/roseを主役に) */
    --color-teal:        #3ec9c9;
    --color-teal-light:  #5ee0e0;
    --color-teal-dark:   #2aa8a8;
    --color-teal-glow:   rgba(62, 201, 201, 0.13);
    --color-teal-subtle: rgba(62, 201, 201, 0.05);

    /* Grey — neutral tones, borders, muted text (warm tint) */
    --color-grey-100: #e8e8ec;
    --color-grey-200: #c8c8d0;
    --color-grey-300: #9898a4;
    --color-grey-400: #68607a;
    --color-grey-500: #443e5a;
    --color-grey-600: #2e2840;
    --color-grey-700: #201c30;
    --color-grey-800: #171224;
    --color-grey-900: #0c0a16;

    /* Pink/Rose — love, compatibility, warmth (温かいローズに調整) */
    --color-pink:        #d45e82;
    --color-pink-light:  #e87ea0;
    --color-pink-dark:   #b84066;
    --color-pink-glow:   rgba(212, 94, 130, 0.26);
    --color-pink-subtle: rgba(212, 94, 130, 0.08);

    /* Purple — primary brand, mystical, fortune */
    --color-purple:        #7c5cbf;
    --color-purple-light:  #9a7ed8;
    --color-purple-dark:   #5e3ea0;
    --color-purple-glow:   rgba(124, 92, 191, 0.28);
    --color-purple-subtle: rgba(124, 92, 191, 0.08);

    /* Olive — nature, earth, stability */
    --color-olive:        #8aad5a;
    --color-olive-light:  #a4c878;
    --color-olive-dark:   #6e8e42;
    --color-olive-glow:   rgba(138, 173, 90, 0.22);
    --color-olive-subtle: rgba(138, 173, 90, 0.07);

    /* Brown — warmth, grounding, reliability */
    --color-brown:        #a0785a;
    --color-brown-light:  #b89478;
    --color-brown-dark:   #886040;
    --color-brown-glow:   rgba(160, 120, 90, 0.22);
    --color-brown-subtle: rgba(160, 120, 90, 0.07);

    /* ===== Semantic Colors ===== */
    --color-bg:              #100c1e;
    --color-bg-alt:          #160e28;
    --color-bg-card:         rgba(22, 16, 40, 0.88);
    --color-bg-card-hover:   rgba(30, 22, 48, 0.92);
    --color-bg-elevated:     rgba(34, 24, 52, 0.82);
    --color-bg-glass:        rgba(255, 255, 255, 0.04);

    --color-text:           #f2f2f7;
    --color-text-secondary: rgba(242, 242, 247, 0.70);
    --color-text-tertiary:  rgba(242, 242, 247, 0.42);
    --color-text-inverse:   #0d0a14;

    --color-primary:       var(--color-purple);
    --color-primary-light: var(--color-purple-light);
    --color-accent:        var(--color-gold);
    --color-accent-hover:  var(--color-gold-light);

    --color-border:        rgba(255, 255, 255, 0.09);
    --color-border-light:  rgba(255, 255, 255, 0.05);
    --color-border-focus:  var(--color-gold);
    --color-border-glow:   rgba(124, 92, 191, 0.35);

    --color-error:   #e05555;
    --color-success: var(--color-olive);
    --color-card:    var(--color-bg-card);

    /* ===== Typography — fluid scale via clamp() ===== */
    --font-family: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --font-size-xs:   clamp(0.688rem, 0.65rem + 0.19vw,  0.75rem);
    --font-size-sm:   clamp(0.813rem, 0.79rem + 0.11vw,  0.875rem);
    --font-size-base: clamp(0.938rem, 0.90rem + 0.19vw,  1rem);
    --font-size-md:   clamp(1.0rem,   0.96rem + 0.22vw,  1.125rem);
    --font-size-lg:   clamp(1.125rem, 1.05rem + 0.37vw,  1.25rem);
    --font-size-xl:   clamp(1.25rem,  1.10rem + 0.74vw,  1.5rem);
    --font-size-2xl:  clamp(1.6rem,   1.30rem + 1.5vw,   2.2rem);
    --font-size-3xl:  clamp(2.0rem,   1.55rem + 2.5vw,   3.0rem);
    --font-size-4xl:  clamp(2.6rem,   1.80rem + 4.0vw,   4.4rem);

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:   1.35;
    --line-height-normal:  1.75;
    --line-height-relaxed: 2.0;

    /* ===== Spacing ===== */
    --space-xs:      0.5rem;
    --space-sm:      1rem;
    --space-md:      1.5rem;
    --space-lg:      3rem;
    --space-xl:      5rem;
    --space-2xl:     7rem;
    --space-3xl:     9rem;
    --space-section: 6rem;

    /* ===== Border Radius ===== */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    /* ===== Shadows ===== */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.44);
    --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.52);
    --shadow-xl:  0 16px 64px rgba(0, 0, 0, 0.60);

    --shadow-glow-gold:   0 0 32px var(--color-gold-glow),   0 0 64px rgba(200, 146, 74, 0.08);
    --shadow-glow-purple: 0 0 28px var(--color-purple-glow), 0 0 56px rgba(140, 100, 200, 0.08);
    --shadow-glow-teal:   0 0 24px var(--color-teal-glow),   0 0 48px rgba(62, 201, 201, 0.06);
    --shadow-glow-pink:   0 0 28px var(--color-pink-glow),   0 0 56px rgba(212, 94, 130, 0.08);

    /* ===== Transitions (優しい・ゆったり — ペルソナに合わせ急すぎない) ===== */
    --transition-fast:   0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-normal: 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow:   0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ===== Glassmorphism ===== */
    --glass-blur:    blur(20px) saturate(160%);
    --glass-blur-lg: blur(32px) saturate(180%);

    /* ===== Header height (for scroll-margin-top) ===== */
    --header-height: 50px;

    /* ===== Custom scrollbar ===== */
    scrollbar-color: var(--color-grey-600) var(--color-bg);
    scrollbar-width: thin;

    /* ===== Form accent ===== */
    accent-color: var(--color-purple);
  }
}

/* ============================================
   Reset
   ============================================ */
@layer reset {
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
  }

  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  button, input, select, textarea {
    font: inherit;
  }

  /* Selection highlight */
  ::selection {
    background: var(--color-purple-glow);
    color: var(--color-text);
  }

  /* Scrollbar — WebKit */
  ::-webkit-scrollbar              { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track        { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb        { background: var(--color-grey-600); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover  { background: var(--color-grey-500); }
}

/* ============================================
   Base
   ============================================ */
@layer base {
  body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    line-height: var(--line-height-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--font-size-base);
    overflow-x: hidden;
  }

  a {
    color: var(--color-teal);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-teal-light);
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    line-height: var(--line-height-tight);
  }

  h2 { font-size: var(--font-size-2xl); }   /* 1.6→2.2rem — global floor */
  h3 { font-size: var(--font-size-xl);  }   /* 1.25→1.5rem — global floor */

  p {
    text-wrap: pretty;
  }

  /* Anchor scroll compensation */
  [id] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
  }

  /* Legacy: floating elements disabled */
  body::before                                    { display: none; }
  #particles-js                                   { display: none; }
  .floating-elements, .floating-element,
  .floating-element-1, .floating-element-2,
  .floating-element-3                             { display: none; }
}

/* ============================================
   Background Canvas
   ============================================ */
@layer base {
  #dotted-bg,
  #bg-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
}

/* ============================================
   Layout
   ============================================ */
@layer layout {
  /* Full-width outer shell */
  .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }

  /* Constrained inner wrapper */
  .content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
  }

  /* Main content area */
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

/* ============================================
   Components
   ============================================ */
@layer components {

  /* --- Site Header (sticky nav) --- */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: linear-gradient(180deg, rgba(10, 10, 24, 0.97) 0%, rgba(10, 10, 24, 0.90) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
    display: flex;
    align-items: center;
  }

  .site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .site-header-logo {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
  }

  .site-header-logo:hover {
    color: var(--color-gold-light);
  }

  /* --- Site Nav --- */
  .site-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .site-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
  }

  .site-nav-link:hover,
  .site-nav-link[aria-current="page"] {
    color: var(--color-text);
    background: var(--color-bg-glass);
  }

  /* --- Header (page hero area) --- */
  .header {
    width: 100%;
    text-align: center;
    padding: 7rem 2rem var(--space-xl);
    position: relative;
  }

  .title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    line-height: var(--line-height-tight);
    text-shadow: 0 2px 16px rgba(124, 92, 191, 0.35);
  }

  .title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
  }

  .title a:hover {
    color: var(--color-gold-light);
    text-shadow: 0 2px 16px var(--color-gold-glow);
  }

  .subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
  }

  /* --- Header Banner (ad) --- */
  .header-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(10, 10, 24, 0.98), rgba(10, 10, 24, 0.92));
    padding: 2px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  /* --- Card --- */
  .card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition:
      transform var(--transition-normal),
      box-shadow var(--transition-normal),
      border-color var(--transition-normal);
    position: relative;
  }

  /* Gradient border overlay */
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.01)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* v4: @starting-style for smooth card entrance */
  @starting-style {
    .card {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
  }

  .card-header  { padding: var(--space-md) var(--space-md) 0; }
  .card-content { padding: var(--space-md); }
  .card-footer  { padding: 0 var(--space-md) var(--space-md); }

  /* --- Form / Result container --- */
  .form-container,
  .result-container {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  .form-container::before,
  .result-container::before { display: none; }

  /* --- Hero Catch --- */
  .hero-catch {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-md);
  }

  /* --- Main / Sub catch copy --- */
  .main-catch {
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .sub-catch {
    font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0;
  }

  /* --- Description --- */
  .description-container {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 720px;
    margin: var(--space-md) auto 0;
    overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  .description-section {
    padding: var(--space-lg);
  }

  .description-section h2 {
    font-size: 1.7rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
  }

  .description-section p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
  }

  .description-section h3 {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    margin: var(--space-md) 0 0.75rem 0;
    color: var(--color-text);
  }

  .description-section ul {
    margin: var(--space-sm) 0 var(--space-md) 1.5rem;
    color: var(--color-text-secondary);
  }

  .description-section li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height-relaxed);
    font-size: 0.95rem;
  }

  .description-section strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  /* --- Form Styles --- */
  .birthdate-form { padding: var(--space-md) var(--space-lg); }

  .form-section h3 {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
    text-align: center;
  }

  fieldset.form-section {
    border: none;
    padding: 0;
    margin: 0;
  }

  fieldset.form-section legend {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
    text-align: center;
    width: 100%;
  }

  /* Select group */
  .select-group {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    align-items: flex-start;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
  }

  .select-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
  }

  .select-item label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    display: none;
  }

  .select-item select {
    width: 100%;
    min-width: 120px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-grey-500);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    background: var(--color-grey-700);
    color: var(--color-text);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      background var(--transition-fast);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239898a4' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 2.5rem;
  }

  .select-item select:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-glow);
    background-color: var(--color-grey-600);
  }

  .select-item select:hover {
    border-color: var(--color-grey-400);
    background-color: var(--color-grey-600);
  }

  /* Legacy input group */
  .input-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-md);
  }

  .input-group input {
    width: 90px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-grey-500);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    background: var(--color-grey-700);
    color: var(--color-text);
    text-align: center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-weight: var(--font-weight-medium);
  }

  .input-group input:focus {
    outline: none;
    border-color: var(--color-teal);
    box-shadow: 0 0 0 3px var(--color-teal-glow);
  }

  .input-group label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--font-size-base);
  }

  /* --- Buttons --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-normal);
    border: none;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    will-change: transform;
  }

  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0);
    transition: background var(--transition-fast);
  }

  .btn:hover::after {
    background: rgba(255, 255, 255, 0.06);
  }

  .btn-primary {
    background: linear-gradient(var(--gradient-angle), var(--color-purple), var(--color-purple-dark));
    color: #fff;
    padding: 0.875rem 2rem;
    height: 3.25rem;
    box-shadow: var(--shadow-glow-purple);
    animation: gradientAngle 6s linear infinite;
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow-purple);
  }

  .btn-outline {
    border: 1px solid var(--color-grey-500);
    background: transparent;
    color: var(--color-text);
    padding: 0.875rem 2rem;
    height: 3rem;
  }

  .btn-outline:hover {
    background: var(--color-grey-700);
    border-color: var(--color-teal);
    box-shadow: var(--shadow-glow-teal);
    color: var(--color-text);
  }

  .submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-text-inverse);
    padding: 0 2rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: all var(--transition-normal);
    height: 3.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow-gold);
    letter-spacing: 0.02em;
    will-change: transform;
  }

  /* Shimmer on submit button */
  .submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );
    transform: skewX(-20deg);
    animation: shimmerSlide 3s ease-in-out infinite;
  }

  .submit-btn:hover {
    background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow-gold);
  }

  .submit-btn:active {
    transform: translateY(0);
  }

  .reset-btn {
    width: 100%;
    background: var(--color-grey-700);
    color: var(--color-text-secondary);
    padding: 1rem 2rem;
    border: 1px solid var(--color-grey-500);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-normal);
    height: 3rem;
    margin-top: var(--space-sm);
  }

  .reset-btn:hover {
    background: var(--color-grey-600);
    transform: translateY(-1px);
    border-color: var(--color-grey-400);
  }

  /* --- Tag / Chip component (v4 new) --- */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    border: 1px solid transparent;
  }

  .tag-purple {
    background: var(--color-purple-subtle);
    border-color: var(--color-purple-glow);
    color: var(--color-purple-light);
  }

  .tag-gold {
    background: var(--color-gold-subtle);
    border-color: var(--color-gold-glow);
    color: var(--color-gold-light);
  }

  .tag-teal {
    background: var(--color-teal-subtle);
    border-color: var(--color-teal-glow);
    color: var(--color-teal-light);
  }

  .tag-pink {
    background: var(--color-pink-subtle);
    border-color: var(--color-pink-glow);
    color: var(--color-pink-light);
  }

  /* --- Result Page --- */
  .result-header {
    text-align: center;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }

  .animal-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
  }

  .animal-image { margin-bottom: 0.5rem; }

  .animal-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
    transition: filter var(--transition-normal), transform var(--transition-slow);
  }

  .animal-img:hover {
    filter: drop-shadow(0 4px 24px var(--color-purple-glow));
    transform: scale(1.03);
  }

  .animal-name {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
    text-align: center;
    line-height: var(--line-height-tight);
    text-shadow: 0 2px 12px var(--color-gold-glow);
  }

  /* Details section */
  .details-section { padding: var(--space-lg); }

  .details-section h2 {
    font-size: 1.7rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
    color: var(--color-text);
    text-align: center;
  }

  .detail-item {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    transition:
      border-color var(--transition-normal),
      background var(--transition-normal),
      box-shadow var(--transition-normal);
  }

  .detail-item:hover {
    border-color: rgba(124, 92, 191, 0.4);
    background: rgba(124, 92, 191, 0.06);
    box-shadow: 0 0 0 1px rgba(124, 92, 191, 0.15) inset;
  }

  .detail-item h3 {
    font-size: 1.3rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.75rem;
    color: var(--color-teal-light);
    letter-spacing: -0.01em;
  }

  .detail-item p {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    font-size: 0.95rem;
    margin: 0;
  }

  .detail-text {
    color: var(--color-text-secondary);
    line-height: 1.75;
    font-size: 1.14rem;
  }

  /* --- Error Message --- */
  .error-message {
    background: rgba(224, 85, 85, 0.08);
    border: 1px solid rgba(224, 85, 85, 0.28);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  .error-message p {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .error-heading {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
    margin-bottom: 1rem;
  }

  /* --- Breadcrumb --- */
  .breadcrumb {
    margin-bottom: var(--space-md);
    margin-top: 10px;
    margin-left: 10px;
    font-size: var(--font-size-sm);
  }

  .breadcrumb a {
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .breadcrumb a:hover { color: var(--color-teal); }

  .breadcrumb span {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
  }

  /* --- Animal Number Badge --- */
  .animal-number-badge {
    background: var(--color-grey-700);
    color: var(--color-text-secondary);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    margin-top: 0.5rem;
    border: 1px solid var(--color-border);
  }

  /* --- Action / Related Content --- */
  .action-section {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin: var(--space-lg) 0;
    flex-wrap: wrap;
  }

  .action-section .btn { min-width: 200px; }

  .btn-large {
    padding: 1.1rem 2.5rem;
    font-size: 1.2rem;
    height: 4rem;
    min-width: 320px;
  }

  .related-content {
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    padding: var(--space-lg);
    text-align: center;
  }

  .related-content h2 {
    font-size: 1.6rem;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
  }

  .related-links {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-md);
    flex-wrap: wrap;
  }

  .related-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-purple), var(--color-purple-dark));
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    transition: all var(--transition-normal);
    min-width: 160px;
    min-height: 44px;
    box-shadow: var(--shadow-glow-purple);
    will-change: transform;
  }

  .related-link:hover {
    background: linear-gradient(135deg, var(--color-purple-light), var(--color-purple));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md), var(--shadow-glow-purple);
    color: #fff;
  }

  /* --- Banner --- */
  .banner-area {
    margin: var(--space-lg) 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* --- SNS Share --- */
  .sns-share-section {
    padding: var(--space-lg);
    text-align: center;
    border-top: 1px solid var(--color-border);
  }

  .sns-share-section h2 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-md);
    color: var(--color-text);
  }

  .sns-share-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .sns-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    min-height: 44px;
    min-width: 120px;
    transition: all var(--transition-normal);
    will-change: transform;
  }

  .sns-share-btn:hover { transform: translateY(-2px); }

  .sns-x-btn {
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .sns-x-btn:hover {
    background: #1a1a1a;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  .sns-line-btn {
    background: #06c755;
    color: #fff;
  }

  .sns-line-btn:hover {
    background: #05b04b;
    color: #fff;
    box-shadow: 0 4px 20px rgba(6, 199, 85, 0.3);
  }

  /* --- Score / Compatibility --- */
  .compatibility-score {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
    text-align: center;
    text-shadow: 0 2px 16px var(--color-gold-glow);
    line-height: 1;
    margin: var(--space-sm) 0;
  }

  .score-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    text-align: center;
    margin-top: 0.25rem;
  }

  .score-bar-wrap {
    background: var(--color-grey-700);
    border-radius: var(--radius-full);
    height: 8px;
    overflow: hidden;
    margin: var(--space-sm) 0;
  }

  .score-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-purple), var(--color-gold));
    box-shadow: 0 0 12px var(--color-purple-glow);
    transition: width 1.0s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* v4: animate from 0 on entrance */
    width: 0;
  }

  .score-bar.is-visible {
    /* JS sets inline width; this just ensures transition fires */
    transition: width 1.0s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* --- Animals Grid --- */
  .animals-container {
    max-width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    container-type: inline-size;
  }

  .animals-intro {
    text-align: center;
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-sm);
  }

  .animals-intro h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
    margin-bottom: 0.6rem;
  }

  .animals-intro p {
    font-size: 0.95rem;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }

  /* Group section */
  .animal-group-section {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .animal-group-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
  }

  .animal-group-name {
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
    margin: 0;
    line-height: var(--line-height-tight);
  }

  .animal-group-desc {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
    margin: 0;
  }

  /* Grid: @container queries (mobile-first via max-width breakpoints) */
  .animals-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-sm);
  }

  @container (max-width: 1000px) {
    .animals-grid { grid-template-columns: repeat(5, 1fr); }
  }

  @container (max-width: 800px) {
    .animals-grid { grid-template-columns: repeat(4, 1fr); }
  }

  @container (max-width: 600px) {
    .animals-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  }

  @container (max-width: 460px) {
    .animals-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  }

  .animal-card {
    background: linear-gradient(160deg, var(--color-grey-700) 0%, rgba(26, 22, 46, 0.95) 100%);
    border: 1px solid var(--color-grey-600);
    border-radius: 14px;
    padding: var(--space-sm) var(--space-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition:
      transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
      border-color var(--transition-normal),
      box-shadow var(--transition-normal),
      background var(--transition-normal);
    will-change: transform;
  }

  .animal-card:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: var(--color-gold);
    box-shadow: var(--shadow-md), var(--shadow-glow-gold);
    color: var(--color-text);
    background: linear-gradient(160deg, var(--color-grey-700) 0%, rgba(34, 26, 52, 0.98) 100%);
  }

  .animal-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
  }

  .animal-card-image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    transition: filter var(--transition-normal), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .animal-card:hover .animal-card-image img {
    filter: drop-shadow(0 0 12px var(--color-gold-glow));
    transform: scale(1.08);
  }

  .animal-card-name {
    font-size: 0.88rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.35rem;
    line-height: var(--line-height-tight);
    letter-spacing: 0.01em;
  }

  .animal-card-features {
    font-size: 0.73rem;
    color: var(--color-text-tertiary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* === Accent Color System (6-color cycle over 12 groups) === */
  .accent-gold .animal-group-name { color: var(--color-gold-light); }
  .accent-gold .animal-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-md), 0 0 16px var(--color-gold-glow); }
  .accent-gold .animal-card:hover .animal-card-image img { filter: drop-shadow(0 0 12px var(--color-gold-glow)); }

  .accent-teal .animal-group-name { color: var(--color-teal-light); }
  .accent-teal .animal-card:hover { border-color: var(--color-teal); box-shadow: var(--shadow-md), 0 0 16px var(--color-teal-glow); }
  .accent-teal .animal-card:hover .animal-card-image img { filter: drop-shadow(0 0 12px var(--color-teal-glow)); }

  .accent-pink .animal-group-name { color: var(--color-pink-light); }
  .accent-pink .animal-card:hover { border-color: var(--color-pink); box-shadow: var(--shadow-md), 0 0 16px var(--color-pink-glow); }
  .accent-pink .animal-card:hover .animal-card-image img { filter: drop-shadow(0 0 12px var(--color-pink-glow)); }

  .accent-purple .animal-group-name { color: var(--color-purple-light); }
  .accent-purple .animal-card:hover { border-color: var(--color-purple); box-shadow: var(--shadow-md), 0 0 16px var(--color-purple-glow); }
  .accent-purple .animal-card:hover .animal-card-image img { filter: drop-shadow(0 0 12px var(--color-purple-glow)); }

  .accent-olive .animal-group-name { color: var(--color-olive-light); }
  .accent-olive .animal-card:hover { border-color: var(--color-olive); box-shadow: var(--shadow-md), 0 0 16px var(--color-olive-glow); }
  .accent-olive .animal-card:hover .animal-card-image img { filter: drop-shadow(0 0 12px var(--color-olive-glow)); }

  .accent-brown .animal-group-name { color: var(--color-brown-light); }
  .accent-brown .animal-card:hover { border-color: var(--color-brown); box-shadow: var(--shadow-md), 0 0 16px var(--color-brown-glow); }
  .accent-brown .animal-card:hover .animal-card-image img { filter: drop-shadow(0 0 12px var(--color-brown-glow)); }

  /* --- Navigation Links --- */
  .nav-links-section {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    flex-wrap: wrap;
  }

  .nav-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-grey-500);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    transition: all var(--transition-normal);
    min-width: 200px;
    will-change: transform;
  }

  .nav-link-btn:hover {
    background: var(--color-grey-600);
    border-color: var(--color-teal);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-teal);
    color: var(--color-text);
  }

  .nav-link-icon { font-size: 1.1rem; }
  .nav-link-text { font-weight: var(--font-weight-semibold); }

  /* --- Common Footer --- */
  .site-footer {
    width: 100%;
    text-align: center;
    padding: var(--space-lg) var(--space-sm);
    margin-top: var(--space-2xl);
    background: linear-gradient(180deg, var(--color-grey-900), #040410);
    border-top: 1px solid var(--color-border);
    position: relative;
  }

  /* Glowing separator line */
  .site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-purple-glow),
      transparent
    );
  }

  .site-footer-nav {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
  }

  .site-footer-link {
    color: var(--color-text-tertiary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    padding: 0.3rem 0.5rem;
    transition: color var(--transition-fast);
  }

  .site-footer-link:hover { color: var(--color-teal); }

  .site-footer-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin-bottom: 0.25rem;
  }

  .site-footer-copy {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
  }

  /* --- Focus / Accessibility --- */
  .btn:focus-visible,
  input:focus-visible,
  select:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
    border-radius: 3px;
  }
}

/* ============================================
   Entrance Animations — [data-animate] system (v4)
   JS adds class "is-visible" via IntersectionObserver
   ============================================ */
@layer components {
  [data-animate] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.5s ease-out,
      transform 0.5s ease-out;
  }

  [data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children */
  [data-animate-stagger] > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.4s ease-out,
      transform 0.4s ease-out;
  }

  [data-animate-stagger].is-visible > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.05s; }
  [data-animate-stagger].is-visible > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.10s; }
  [data-animate-stagger].is-visible > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.15s; }
  [data-animate-stagger].is-visible > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.20s; }
  [data-animate-stagger].is-visible > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.25s; }
  [data-animate-stagger].is-visible > *:nth-child(n+6){ opacity: 1; transform: none; transition-delay: 0.30s; }
}

/* ============================================
   Animations
   ============================================ */
@layer components {
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 18px var(--color-purple-glow); }
    50%       { box-shadow: 0 0 36px var(--color-purple-glow), 0 0 72px rgba(124, 92, 191, 0.12); }
  }

  @keyframes gradientAngle {
    0%   { --gradient-angle: 135deg; }
    100% { --gradient-angle: 495deg; }
  }

  @keyframes shimmerSlide {
    0%   { left: -100%; }
    60%  { left: 150%; }
    100% { left: 150%; }
  }

  @keyframes goldPulse {
    0%, 100% { text-shadow: 0 2px 12px var(--color-gold-glow); }
    50%       { text-shadow: 0 2px 24px var(--color-gold-glow), 0 0 48px rgba(212, 160, 74, 0.15); }
  }

  /* Disabled legacy animations */
  @keyframes gradientShift  { from, to { background-position: 0 0; } }
  @keyframes floatingOrbs   { from, to { transform: none; opacity: 1; } }
  @keyframes shimmer        { from, to { background-position: 0; } }
  @keyframes gradientMove   { from, to { background-position: 0 0; } }
  @keyframes sparkle        { from, to { opacity: 0; transform: scale(0); } }
  @keyframes floatUpDown    { from, to { transform: none; } }

  .animate-fade-in       { animation: fadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  .animate-fade-in-scale { animation: fadeInScale 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
  .animate-glow-pulse    { animation: glowPulse 3s ease-in-out infinite; }
  .animate-gold-pulse    { animation: goldPulse 3s ease-in-out infinite; }

  @keyframes slideInUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* Scroll reveal — base state (JS adds .is-visible via IntersectionObserver) */
  .scroll-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .scroll-reveal-left {
    opacity: 0;
    transform: translateX(-24px);
    transition:
      opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .scroll-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
  /* Stagger delays for grouped reveals */
  .scroll-reveal:nth-child(2) { transition-delay: 0.10s; }
  .scroll-reveal:nth-child(3) { transition-delay: 0.20s; }
  .scroll-reveal:nth-child(4) { transition-delay: 0.30s; }
  .scroll-reveal:nth-child(5) { transition-delay: 0.40s; }

  /* prefers-reduced-motion: disable all transitions/animations */
  @media (prefers-reduced-motion: reduce) {
    .scroll-reveal, .scroll-reveal-left {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .animate-fade-in, .animate-fade-in-scale,
    .animate-glow-pulse, .animate-gold-pulse {
      animation: none;
    }
  }

  /* Shimmer loading effect */
  .shimmer-loading {
    position: relative;
    overflow: hidden;
    background: var(--color-grey-700);
  }

  .shimmer-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.06) 50%,
      transparent 100%
    );
    transform: translateX(-100%);
    animation: shimmerSlide 1.5s infinite;
  }
}

/* ============================================
   Utilities
   ============================================ */
@layer utilities {
  .text-center { text-align: center; }
  .text-left   { text-align: left; }
  .text-gold   { color: var(--color-gold-light); }
  .text-teal   { color: var(--color-teal); }
  .text-purple { color: var(--color-purple-light); }
  .text-muted  { color: var(--color-text-secondary); }

  .mt-auto { margin-top: auto; }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Content visibility for off-screen performance */
  .cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  /* Dark mode base — this IS the dark theme */
  .dark {}
}

/* ============================================
   Responsive — Breakpoints
   ============================================ */
@layer responsive {
  @media (max-width: 1024px) {
    /* animals-grid: handled by @container queries in components layer */
  }

  @media (max-width: 768px) {
    .container { padding: 0; }

    .header { padding: 7rem 1rem var(--space-xl); }
    .title   { font-size: 2.2rem; }
    .subtitle { font-size: 1rem; }

    .form-container,
    .result-container,
    .description-container {
      margin: 0 0.5rem;
      border-radius: var(--radius-md);
    }

    .description-container { margin-top: var(--space-sm); }

    .animal-img  { width: 160px; height: 160px; }
    .animal-name { font-size: 1.8rem; }

    .input-group { gap: 0.5rem; }
    .input-group input { width: 70px; padding: 0.5rem; }

    .select-group {
      flex-direction: column;
      gap: 0.75rem;
      align-items: center;
    }

    .select-item {
      width: 100%;
      max-width: 200px;
    }

    .btn-large {
      margin: 0 1rem;
      min-width: 0;
      max-width: 300px;
    }

    /* animals-grid, animals-container: handled by @container queries */

    .main-catch  { font-size: 1.4rem; }
    .sub-catch   { font-size: 0.9rem; }

    .site-nav { display: none; }

    /* result-section: フルワイド・完全フラット */
    .result-section {
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      border: none;
      border-radius: 0;
      background: none;
      padding-left: 0;
      padding-right: 0;
    }

    /* detail-item: フルワイド */
    .detail-item {
      border-left: none;
      border-right: none;
      border-radius: 0;
      padding: 1.25rem 1rem;
    }
  }

  @media (min-width: 769px) {
    .result-section {
      padding-left: 12vw;
      padding-right: 12vw;
    }
  }

  @media (max-width: 480px) {
    .header { padding: 5rem 1rem var(--space-md); }
    .title  { font-size: 1.7rem; }

    .animal-img  { width: 140px; height: 140px; }
    .detail-item { padding: var(--space-md); }

    /* animals-grid: handled by @container queries */

    .nav-links-section {
      flex-direction: column;
      align-items: center;
      padding: var(--space-sm) var(--space-md);
    }

    .nav-link-btn {
      width: 100%;
      max-width: 300px;
    }

    .related-links {
      flex-direction: column;
      align-items: center;
    }

    .related-link {
      width: 100%;
      max-width: 300px;
    }

    .site-footer { padding: var(--space-md) var(--space-sm); }
    .site-footer-nav { gap: var(--space-sm); }
    .site-footer-link { font-size: 0.85rem; }

    .main-catch  { font-size: 1.25rem; }
    .sub-catch   { font-size: 0.875rem; }
  }

  /* Accessibility — reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    html { scroll-behavior: auto; }

    [data-animate],
    [data-animate-stagger] > * {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }
}

/* ================================================================
 * @layer components — Migrated inline CSS (from PHP <style> blocks)
 * Added as a new block so source order overrides earlier definitions
 * !important removed — cascade within layer handles priority
 * ================================================================ */
@layer components {

  /* ----- Shared: .submit-btn overrides ----- */
  .submit-btn {
    max-width: 660px;
    margin: 0 auto;
    color: #fff;
  }
  .compatibility-mini-form .submit-btn,
  .form-container.compatibility-form .submit-btn {
    background: linear-gradient(135deg, #c4667a, #b8728a);
    color: #fff;
  }

  /* ----- Shared: SNS share buttons ----- */
  .sns-share-section { text-align: center; }
  .sns-share-section h2 { margin-bottom: 1.2rem; font-size: 1.2rem; }
  .sns-share-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
  .sns-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 52px;
    min-width: 160px;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .sns-share-btn:hover { transform: translateY(-3px); }
  .sns-share-x { background: #2a2a2a; color: #fff; border: 1px solid #555; }
  .sns-share-x:hover { background: #111; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
  .sns-share-line { background: #06c755; color: #fff; }
  .sns-share-line:hover { background: #05b04b; box-shadow: 0 6px 24px rgba(6,199,85,0.35); }

  /* ----- Shared: compat hero + score + detail (compatibility_result.php & compatibility_detail.php) ----- */
  .compat-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(124,92,191,0.14) 0%, rgba(224,96,136,0.14) 100%);
    border-bottom: 1px solid rgba(224,96,136,0.18);
    position: relative;
    overflow: hidden;
  }
  .compat-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 120%, rgba(212,160,74,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  @media (max-width: 480px) {
    .compat-hero { grid-template-columns: 1fr auto 1fr; gap: 0.5rem; padding: 1.5rem 0.75rem 1rem; }
  }
  .compat-animal { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
  .compat-animal-img {
    width: 160px; height: 160px; object-fit: contain;
    border-radius: 50%; border: 2px solid; display: block;
  }
  @media (max-width: 480px) { .compat-animal-img { width: 100px; height: 100px; } }
  .compat-animal--you .compat-animal-img    { border-color: var(--color-purple); box-shadow: 0 0 28px var(--color-purple-glow), 0 4px 16px rgba(0,0,0,0.4); }
  .compat-animal--partner .compat-animal-img { border-color: var(--color-pink);   box-shadow: 0 0 28px var(--color-pink-glow),   0 4px 16px rgba(0,0,0,0.4); }
  .compat-animal-label {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px;
  }
  .compat-animal--you .compat-animal-label     { color: var(--color-purple-light); background: rgba(124,92,191,0.15); border: 1px solid rgba(124,92,191,0.3); }
  .compat-animal--partner .compat-animal-label { color: var(--color-pink-light);   background: rgba(224,96,136,0.15); border: 1px solid rgba(224,96,136,0.3); }
  .compat-animal-name { font-size: 0.9rem; font-weight: 600; color: var(--color-text); text-align: center; line-height: 1.4; }
  @media (max-width: 480px) { .compat-animal-name { font-size: 0.75rem; } }
  .compat-vs {
    font-size: 2rem; font-weight: 700;
    color: var(--color-pink-light);
    text-shadow: 0 0 18px var(--color-pink-glow), 0 0 32px rgba(224,96,136,0.2);
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px var(--color-pink-glow));
  }
  .compat-vs::before { content: '×'; }

  .compat-score-section {
    text-align: center; padding: 2.5rem 1.5rem 2rem;
    background: linear-gradient(180deg, rgba(212,160,74,0.07) 0%, rgba(124,92,191,0.04) 60%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .compat-score-phrase { font-size: 1rem; color: var(--color-text-secondary); margin-top: 0.9rem; line-height: 1.6; letter-spacing: 0.04em; }
  .compat-score-phrase em { font-style: normal; color: var(--color-pink-light); }
  @keyframes fillBar { from { width: 0; opacity: 0.5; } }
  .compat-score-number {
    font-size: 4.5rem; font-weight: 800; color: var(--color-gold);
    line-height: 1; text-shadow: 0 0 32px var(--color-gold-glow), 0 2px 8px rgba(0,0,0,0.4);
    letter-spacing: -0.02em; margin-bottom: 0.25rem;
  }
  .compat-score-number span { font-size: 2rem; font-weight: 600; }
  @media (max-width: 480px) { .compat-score-number { font-size: 3.5rem; } }

  /* Progress bar in score section (compatibility_result.php / compatibility_detail.php) */
  .compat-score-section .compat-score-bar-wrap {
    max-width: 320px; margin: 1rem auto 0.75rem;
    background: rgba(255,255,255,0.08); border-radius: 999px; height: 10px; overflow: hidden;
  }
  .compat-score-section .compat-score-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light));
    box-shadow: 0 0 8px var(--color-gold-glow);
    transition: width 0.6s ease;
    animation: fillBar 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .compat-stars { margin: 0.5rem 0; }
  .compat-stars .star-filled { color: var(--color-gold); font-size: 1.4rem; }
  .compat-stars .star-empty  { color: rgba(255,255,255,0.2); font-size: 1.4rem; }
  .compat-category { font-size: 1.1rem; font-weight: 600; color: var(--color-text-secondary); margin-top: 0.25rem; }

  .compat-detail { padding: 2rem 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .compat-detail h2 {
    font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .compat-detail h2::before { content: ''; display: inline-block; width: 4px; height: 1.1em; border-radius: 2px; background: var(--color-gold); flex-shrink: 0; }
  .compat-detail--love h2 { color: var(--color-pink-light); }
  .compat-detail--love h2::before { background: var(--color-pink); }
  .compat-detail--work h2 { color: var(--color-teal-light); }
  .compat-detail--work h2::before { background: var(--color-teal); }
  .compat-detail--friend h2 { color: var(--color-purple-light); }
  .compat-detail--friend h2::before { background: var(--color-purple); }
  .compat-detail .detail-text { color: var(--color-text-secondary); line-height: 1.95; font-size: 1rem; letter-spacing: 0.01em; }

  .compat-footer > div { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .compatibility-individual-links { text-align: center; }
  .compat-cta-section { padding: 1.5rem; text-align: center; }
  .compat-cta-section p { color: var(--color-text-secondary); margin-bottom: 1rem; font-size: 0.95rem; }

  /* ----- index.php ----- */
  .idx-hero {
    text-align: center;
    padding: 1.2rem 1.5rem 0.8rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .idx-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 90% 70% at 50% -10%, rgba(124, 92, 191, 0.28) 0%, transparent 65%),
      radial-gradient(ellipse 55% 45% at 85% 85%,  rgba(212, 160, 74,  0.12) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 15% 85%,  rgba(62,  201, 201, 0.10) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
  }
  .idx-hero > * { position: relative; z-index: 1; }
  .idx-hero-deco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 4vw; pointer-events: none; z-index: 0; overflow: hidden; }
  .idx-hero-deco span { font-size: clamp(2rem, 5vw, 3.5rem); opacity: 0.045; user-select: none; flex-shrink: 0; transform: rotate(-10deg); }
  .idx-hero-deco span:nth-child(even) { transform: rotate(14deg); opacity: 0.035; }
  .idx-hero-deco span:nth-child(3n) { transform: rotate(-5deg) translateY(-1rem); }
  .idx-hero-eyebrow {
    display: inline-block; font-size: 0.70rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--color-gold-light); border: 1px solid rgba(212, 160, 74, 0.45);
    padding: 0.22rem 1.1rem; border-radius: var(--radius-full); margin-bottom: 0.5rem;
    background: rgba(212, 160, 74, 0.06); backdrop-filter: blur(4px);
  }
  .idx-hero-title {
    font-size: clamp(1.5rem, 4.8vw, 2.8rem); font-weight: var(--font-weight-bold);
    color: var(--color-grey-100); line-height: 1.2; margin-bottom: 0.4rem;
    letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(124, 92, 191, 0.35);
  }
  .idx-hero-title em { font-style: normal; color: var(--color-gold); text-shadow: 0 0 28px var(--color-gold-glow), 0 2px 8px rgba(0,0,0,0.3); }
  .idx-hero-sub { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.5; max-width: 520px; margin: 0 auto 0.5rem; font-weight: var(--font-weight-light); }
  .idx-hero-badges { display: flex; gap: 0.55rem; justify-content: center; flex-wrap: wrap; }
  .idx-badge {
    font-size: 0.73rem; color: var(--color-grey-200); background: rgba(36, 36, 58, 0.65);
    border: 1px solid var(--color-grey-600); padding: 0.22rem 0.85rem;
    border-radius: var(--radius-full); backdrop-filter: blur(6px); letter-spacing: 0.02em;
  }
  .idx-form-card {
    background: var(--color-bg-card); border: 1px solid rgba(212, 160, 74, 0.20);
    border-radius: var(--radius-lg); padding: 0.85rem 1.25rem 0.85rem;
    max-width: 500px; width: calc(100% - 2rem); margin: 0.4rem auto 0.6rem;
    box-shadow: var(--shadow-md), var(--shadow-glow-gold);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    position: relative; overflow: hidden;
  }
  .idx-form-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(212,160,74,0.35), rgba(212,94,130,0.20), rgba(124,92,191,0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
  }
  .idx-form-label { font-size: 0.82rem; color: var(--color-gold-light); text-align: center; margin-bottom: 0.5rem; display: block; letter-spacing: 0.03em; font-weight: var(--font-weight-normal); }
  .idx-select-row { display: flex; gap: 0.5rem; margin-bottom: 0.55rem; }
  .idx-select-row select {
    flex: 1; background: var(--color-grey-700); border: 1px solid var(--color-grey-500);
    color: var(--color-text); padding: 0.55rem 0.3rem; border-radius: var(--radius-sm);
    font-size: 0.87rem; appearance: none; -webkit-appearance: none;
    text-align: center; cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    font-family: var(--font-family);
  }
  .idx-select-row select:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--color-gold-glow); background: var(--color-grey-600); }
  .idx-select-row select:hover { border-color: var(--color-grey-400); background: var(--color-grey-600); }
  .idx-btn-diagnose {
    display: flex; align-items: center; justify-content: center; width: 100%;
    padding: 0.75rem; background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
    color: var(--color-text-inverse); font-size: 1rem; font-weight: var(--font-weight-bold);
    border: none; border-radius: var(--radius-sm); cursor: pointer; letter-spacing: 0.04em;
    transition: all var(--transition-normal); height: 3rem; position: relative; overflow: hidden;
    box-shadow: var(--shadow-glow-gold); will-change: transform; font-family: var(--font-family);
  }
  .idx-btn-diagnose::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
    transform: skewX(-20deg); animation: shimmerSlide 3s ease-in-out infinite;
  }
  .idx-btn-diagnose:hover { background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-glow-gold); }
  .idx-btn-diagnose:active { transform: translateY(0); }
  .idx-error { background: var(--color-pink-subtle); border: 1px solid var(--color-pink); color: var(--color-pink-light); padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.87rem; }
  .idx-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; max-width: 540px; width: calc(100% - 2rem); margin: 0 auto 3.5rem; }
  .idx-nav-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    padding: 1.25rem 1rem; background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none;
    font-size: 0.82rem; text-align: center;
    transition: border-color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
    line-height: 1.45; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  }
  .idx-nav-card:hover { border-color: var(--color-gold); background: var(--color-bg-card-hover); color: var(--color-text); box-shadow: var(--shadow-glow-gold); transform: translateY(-2px); }
  .idx-nav-icon { font-size: 1.6rem; margin-bottom: 0.1rem; }
  .idx-description {
    max-width: 760px; width: calc(100% - 2rem); margin: 0 auto 3rem;
    padding: 2rem 1.75rem; color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed); font-size: 0.92rem;
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); text-align: left;
  }
  .idx-description p { margin-bottom: 0.85rem; }
  .idx-description h2 { font-size: 1.3rem; color: var(--color-text); margin: 1.75rem 0 0.75rem; padding-left: 0.85rem; border-left: 3px solid var(--color-gold); font-weight: var(--font-weight-semibold); }
  .idx-description h2:first-child { margin-top: 0; }
  .idx-description h3 { font-size: 0.95rem; color: var(--color-grey-200); margin: 1.25rem 0 0.5rem; font-weight: var(--font-weight-semibold); }
  .idx-description ul { padding-left: 1.3rem; }
  .idx-description li { margin-bottom: 0.4rem; line-height: 1.7; }
  .idx-description strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }
  .idx-hero-animals { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .hero-animal { position: absolute; pointer-events: none; will-change: transform, opacity; object-fit: contain; opacity: 0; }
  @keyframes heroFloat1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-12px) rotate(3deg)} }
  @keyframes heroFloat2 { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-8px) rotate(0deg)} }
  @keyframes heroFloat3 { 0%,100%{transform:translateY(0) rotate(2deg)} 50%{transform:translateY(-15px) rotate(-2deg)} }
  @keyframes heroFloat4 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(4deg)} }
  @keyframes heroFloat5 { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(-6px) rotate(1deg)} }
  .header { overflow: hidden; }
  .header-animals { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .header-animal { position: absolute; pointer-events: none; will-change: transform, opacity; object-fit: contain; opacity: 0; }
  .header .title { position: relative; z-index: 1; }

  /* ----- result.php ----- */
  .result-page-wrap { width: 100%; }
  .result-hero {
    text-align: center; padding: 3rem 1.5rem 2.5rem;
    background:
      radial-gradient(ellipse 100% 80% at 50% 0%,   rgba(212, 160, 74, 0.14) 0%, transparent 65%),
      radial-gradient(ellipse 60%  50% at 20% 100%,  rgba(124,  92, 191, 0.08) 0%, transparent 50%),
      radial-gradient(ellipse 60%  50% at 80% 100%,  rgba(62,  201, 201, 0.06) 0%, transparent 50%);
    border-bottom: 1px solid rgba(212, 160, 74, 0.18);
    position: relative; overflow: hidden;
  }
  .result-hero::before {
    content: ''; position: absolute; top: 10%; left: 50%;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(212,160,74,0.08) 0%, transparent 70%);
    transform: translateX(-50%); pointer-events: none; z-index: 0;
  }
  .result-hero > * { position: relative; z-index: 1; }
  @keyframes result-animal-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .result-hero-img {
    width: clamp(220px, 42vw, 340px); height: clamp(220px, 42vw, 340px);
    object-fit: contain; border-radius: 50%; border: none;
    box-shadow: var(--shadow-glow-gold), var(--shadow-xl);
    filter: drop-shadow(0 4px 20px var(--color-gold-glow));
    display: block; margin: 0 auto 1.5rem;
    animation: result-animal-float 5s ease-in-out infinite;
  }
  .result-hero-number {
    display: inline-block; font-size: 0.70rem; letter-spacing: 0.18em;
    color: var(--color-gold); border: 1px solid rgba(212, 160, 74, 0.38);
    padding: 0.22rem 0.9rem; border-radius: var(--radius-full);
    background: rgba(212, 160, 74, 0.06); margin-bottom: 0.6rem; backdrop-filter: blur(4px);
  }
  .result-hero .animal-name { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: var(--font-weight-bold); color: var(--color-gold-light); text-shadow: 0 0 32px var(--color-gold-glow), 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 0.35rem; letter-spacing: -0.01em; }
  .result-hero-tagline { font-size: 0.92rem; color: var(--color-text-secondary); margin-top: 0.7rem; line-height: 1.7; max-width: 320px; margin-left: auto; margin-right: auto; }
  .result-hero-tagline em { font-style: normal; color: var(--color-gold-light); }
  .result-hero .breadcrumb { margin: 0 0 1.25rem 0; text-align: left; }
  .result-section { padding: 2rem 2rem; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .result-section h2 { font-size: 1.05rem; font-weight: var(--font-weight-bold); letter-spacing: 0.04em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.6rem; }
  .result-section h2::before { content: ''; display: inline-block; width: 4px; height: 1.2em; border-radius: 2px; flex-shrink: 0; }
  .result-section--gold { background: linear-gradient(135deg, rgba(212, 160, 74, 0.07) 0%, transparent 65%); border-left: 3px solid var(--color-gold); }
  .result-section--gold h2 { color: var(--color-gold-light); }
  .result-section--gold h2::before { background: var(--color-gold); }
  .result-section--gold .detail-item { border-color: rgba(212, 160, 74, 0.25); }
  .result-section--gold .detail-item:hover { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold-subtle); }
  .result-section--gold .detail-item h3 { color: var(--color-gold-light); }
  .result-section--pink { background: linear-gradient(135deg, rgba(224, 96, 136, 0.07) 0%, transparent 65%); border-left: 3px solid var(--color-pink); }
  .result-section--pink h2 { color: var(--color-pink-light); }
  .result-section--pink h2::before { background: var(--color-pink); }
  .result-section--pink .detail-item { border-color: rgba(224, 96, 136, 0.25); }
  .result-section--pink .detail-item:hover { border-color: var(--color-pink); box-shadow: 0 0 0 1px var(--color-pink-subtle); }
  .result-section--pink .detail-item h3 { color: var(--color-pink-light); }
  .result-section--teal { background: linear-gradient(135deg, rgba(62, 201, 201, 0.07) 0%, transparent 65%); border-left: 3px solid var(--color-teal); }
  .result-section--teal h2 { color: var(--color-teal-light); }
  .result-section--teal h2::before { background: var(--color-teal); }
  .result-section--teal .detail-item { border-color: rgba(62, 201, 201, 0.25); }
  .result-section--teal .detail-item:hover { border-color: var(--color-teal); box-shadow: 0 0 0 1px var(--color-teal-subtle); }
  .result-section--teal .detail-item h3 { color: var(--color-teal-light); }
  .result-section .banner-area { text-align: center; margin: 1.25rem 0 0.5rem; }
  .result-affirmation { text-align: center; padding: 2rem 1.75rem; background: linear-gradient(135deg, rgba(124, 92, 191, 0.10) 0%, rgba(212, 160, 74, 0.07) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .result-affirmation-msg { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.8; margin-bottom: 1.25rem; }
  .result-affirmation-msg strong { display: block; font-size: 1.15rem; color: var(--color-gold-light); margin-bottom: 0.3rem; }
  .result-affirmation .submit-btn { display: inline-block; padding: 0.75rem 2.5rem; font-size: 0.95rem; }
  .result-footer-sections { padding: 0; }
  .result-footer-sections .sns-share-section,
  .result-footer-sections .compatibility-mini-form,
  .result-footer-sections .related-content { padding: 1.75rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .compatibility-mini-form h2, .compatibility-mini-form > p { text-align: center; }
  @media (max-width: 768px) { .compatibility-mini-form h2, .compatibility-mini-form > p { text-align: left; } }
  @media (max-width: 768px) {
    .result-section { background: none; border: none; border-radius: 0; padding-left: 0; padding-right: 0; }
  }
  @media (min-width: 769px) {
    .result-section { padding-left: 12vw; padding-right: 12vw; }
  }

  /* ----- about.php ----- */
  .about-hero { text-align: center; padding: 3.5rem 1.5rem 2.5rem; position: relative; }
  .about-hero::before {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 92, 191, 0.18) 0%, transparent 65%),
      radial-gradient(ellipse 50% 40% at 80% 80%, rgba(212, 160, 74, 0.10) 0%, transparent 55%);
    pointer-events: none; z-index: 0;
  }
  .about-hero > * { position: relative; z-index: 1; }
  .about-eyebrow { display: inline-block; font-size: 0.70rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold-light); border: 1px solid rgba(212, 160, 74, 0.45); padding: 0.28rem 1.1rem; border-radius: var(--radius-full); margin-bottom: 1.2rem; background: rgba(212, 160, 74, 0.06); }
  .about-title { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: var(--font-weight-bold); color: var(--color-grey-100); margin-bottom: 0.75rem; text-shadow: 0 2px 20px rgba(124, 92, 191, 0.3); }
  .about-body { max-width: 1200px; width: 100%; margin: 0 auto 2rem; }
  .about-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; margin-bottom: 1.25rem; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
  .about-section h2 { font-size: 1.15rem; color: var(--color-text); margin: 0 0 1rem; padding-left: 0.85rem; border-left: 3px solid var(--color-gold); font-weight: var(--font-weight-semibold); }
  .about-section p { color: var(--color-text-secondary); font-size: 0.92rem; line-height: var(--line-height-relaxed); margin-bottom: 0.75rem; }
  .about-section p:last-child { margin-bottom: 0; }
  .about-section ul { padding-left: 1.3rem; color: var(--color-text-secondary); font-size: 0.92rem; line-height: var(--line-height-relaxed); }
  .about-section li { margin-bottom: 0.4rem; }
  .about-section strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }
  .about-disclaimer { border-color: rgba(212, 94, 130, 0.25); background: rgba(212, 94, 130, 0.04); }
  .about-disclaimer h2 { border-left-color: var(--color-pink); }
  .about-cta { max-width: 500px; width: calc(100% - 2rem); margin: 0 auto 3.5rem; display: flex; flex-direction: column; gap: 0.85rem; align-items: center; }
  .about-btn-primary { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; padding: 1rem; background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); color: var(--color-text-inverse); font-size: 1rem; font-weight: var(--font-weight-bold); border: none; border-radius: var(--radius-sm); cursor: pointer; letter-spacing: 0.04em; text-decoration: none; transition: all var(--transition-normal); box-shadow: var(--shadow-glow-gold); }
  .about-btn-primary:hover { background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-glow-gold); color: var(--color-text-inverse); }
  .about-btn-secondary { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text-secondary); font-size: 0.88rem; text-decoration: none; border: 1px solid var(--color-border); padding: 0.6rem 1.4rem; border-radius: var(--radius-full); transition: border-color var(--transition-normal), color var(--transition-normal); }
  .about-btn-secondary:hover { border-color: var(--color-gold); color: var(--color-text); }

  /* ----- compatibility.php ----- */
  .form-container.compatibility-form { max-width: 100%; }
  .compat-heading { text-align: center; padding: var(--space-sm) 0 var(--space-md); }
  .compat-heading h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); margin-bottom: 0.4rem; }
  .compat-heading .compat-subtitle { color: var(--color-text-secondary); font-size: var(--font-size-base); }
  @media (max-width: 768px) { .compat-heading p { text-align: left; } }
  .compat-pair-layout { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
  .compat-person { background: var(--color-bg-elevated); border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; }
  .compat-person-1 { border: 1px solid rgba(124, 92, 191, 0.5); box-shadow: 0 0 20px var(--color-purple-glow); }
  .compat-person-2 { border: 1px solid rgba(224, 96, 136, 0.5); box-shadow: 0 0 20px var(--color-pink-glow); }
  .compat-person-icon { font-size: 2rem; margin-bottom: 0.4rem; }
  .compat-person-label { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-sm); }
  .compat-person-1 .compat-person-label { color: var(--color-purple-light); }
  .compat-person-2 .compat-person-label { color: var(--color-pink-light); }
  .compat-person fieldset.form-section { border: none; padding: 0; margin: 0; }
  .compat-person fieldset.form-section legend { display: none; }
  .compat-person .select-group { flex-direction: column; align-items: center; gap: 0.6rem; }
  .compat-person .select-item { width: 100%; max-width: 160px; }
  .compat-vs-divider { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; width: 56px; }
  .compat-heart { font-size: 1.6rem; color: var(--color-pink); text-shadow: 0 0 12px var(--color-pink-glow); animation: compat-heartbeat 1.5s ease-in-out infinite; }
  .compat-vs-text { font-size: 1.4rem; font-weight: var(--font-weight-bold); color: var(--color-grey-400); letter-spacing: 0.08em; display: inline-block; }
  .compat-vs-text::before { content: '×'; }
  @keyframes compat-heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
  @media (max-width: 640px) {
    .compat-pair-layout { grid-template-columns: 1fr; }
    .compat-vs-divider { flex-direction: row; width: auto; justify-content: center; gap: 1rem; padding: 0.25rem 0; }
    .compat-person .select-group { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  }

  /* ----- compatibility_list.php ----- */
  .compat-list-hero { text-align: center; padding: 2.5rem 1.5rem 2rem; border-bottom: 1px solid rgba(212, 160, 74, 0.18); }
  .compat-list-hero .animal-thumb { width: 96px; height: 96px; border-radius: 50%; object-fit: contain; box-shadow: var(--shadow-glow-gold); margin: 0 auto 1rem; display: block; }
  .compat-list-hero h1 { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: var(--font-weight-bold); color: var(--color-gold-light); margin-bottom: 0.4rem; }
  .compat-list-hero p { font-size: 0.88rem; color: var(--color-text-secondary); }
  .compat-list-container { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
  .compat-rank-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; margin-bottom: 0.55rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); text-decoration: none; color: inherit; transition: background 0.2s, border-color 0.2s; }
  .compat-rank-item:hover { background: rgba(212, 160, 74, 0.08); border-color: rgba(212, 160, 74, 0.28); }
  .compat-rank-num { font-size: 0.80rem; font-weight: var(--font-weight-bold); color: var(--color-text-tertiary); width: 2.2rem; text-align: center; flex-shrink: 0; }
  .compat-rank-num.top3 { color: var(--color-gold); font-size: 1.5rem; line-height: 1; }
  .compat-rank-img { width: 72px; height: 72px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
  .compat-rank-info { flex: 1; min-width: 0; }
  .compat-rank-name { font-size: 0.95rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Rank list score bar (flex layout — different from score section progress bar) */
  .compat-rank-item .compat-score-bar-wrap { display: flex; align-items: center; gap: 0.55rem; }
  .compat-rank-item .compat-score-bar {
    flex: 1; height: 7px; border-radius: 4px;
    background: linear-gradient(90deg, #4a7ab8, #7ab8b8, #d4aa6a, #e8903a);
    position: relative; overflow: hidden;
  }
  .compat-rank-item .compat-score-bar-fill { position: absolute; top: 0; right: 0; bottom: 0; background: rgba(14, 10, 22, 0.88); border-radius: 0 4px 4px 0; transition: width 0.4s ease; }
  .compat-score-num { font-size: 0.82rem; font-weight: var(--font-weight-bold); color: var(--color-gold-light); width: 2.8rem; text-align: right; flex-shrink: 0; }
  .compat-list-back { text-align: center; margin-top: 2rem; }
  .compat-list-back a { font-size: 0.88rem; color: var(--color-text-secondary); text-decoration: underline; }

  /* ----- compatibility_group.php ----- */
  .compat-group-hero { text-align: center; padding: 2.5rem 1.5rem 2rem; border-bottom: 1px solid rgba(212, 160, 74, 0.18); }
  .compat-group-hero .animal-thumb { width: 96px; height: 96px; border-radius: 50%; object-fit: contain; box-shadow: var(--shadow-glow-gold); margin: 0 auto 1rem; display: block; }
  .compat-group-hero h1 { font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: var(--font-weight-bold); color: var(--color-gold-light); margin-bottom: 0.4rem; }
  .compat-group-hero .group-badge { display: inline-block; padding: 0.25rem 0.85rem; border-radius: 999px; background: rgba(212, 160, 74, 0.12); border: 1px solid rgba(212, 160, 74, 0.3); font-size: 0.82rem; color: var(--color-gold); margin-bottom: 0.5rem; }
  .compat-group-hero p { font-size: 0.88rem; color: var(--color-text-secondary); }
  .compat-group-container { max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
  .compat-group-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; margin-bottom: 0.55rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); text-decoration: none; color: inherit; transition: background 0.2s, border-color 0.2s; }
  .compat-group-item:hover { background: rgba(212, 160, 74, 0.08); border-color: rgba(212, 160, 74, 0.28); }
  .compat-group-rank { font-size: 0.80rem; font-weight: var(--font-weight-bold); color: var(--color-text-tertiary); width: 2.2rem; text-align: center; flex-shrink: 0; }
  .compat-group-rank.top3 { color: var(--color-gold); font-size: 1.5rem; line-height: 1; }
  .compat-group-img { width: 72px; height: 72px; border-radius: 50%; object-fit: contain; flex-shrink: 0; }
  .compat-group-info { flex: 1; min-width: 0; }
  .compat-group-name { font-size: 0.95rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Group score bar (flex layout) */
  .compat-group-item .compat-score-bar-wrap { display: flex; align-items: center; gap: 0.55rem; }
  .compat-group-item .compat-score-bar {
    flex: 1; height: 7px; border-radius: 4px;
    background: linear-gradient(90deg, #4a7ab8, #7ab8b8, #d4aa6a, #e8903a);
    position: relative; overflow: hidden;
  }
  .compat-group-item .compat-score-bar-fill { position: absolute; top: 0; right: 0; bottom: 0; background: rgba(14, 10, 22, 0.88); border-radius: 0 4px 4px 0; transition: width 0.4s ease; }
  .compat-group-back { text-align: center; margin-top: 2rem; }
  .compat-group-back a { font-size: 0.88rem; color: var(--color-text-secondary); text-decoration: underline; }
  .compat-group-empty { text-align: center; padding: 2rem 1.5rem; color: var(--color-text-secondary); font-size: 0.9rem; }
}

/* ============================================================
   Page Section — 全ページ共通レイアウト統一クラス
   result.php/.result-section ベースの幅・フォント・カード統一
   ============================================================ */
@layer components {
  .page-section {
    padding: 2rem 2rem;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: none;
    margin-bottom: 0;
  }
  .page-section p,
  .page-section li {
    font-size: 1rem;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
  }
  .page-section h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    margin-bottom: 0.75rem;
  }

  @media (max-width: 768px) {
    .page-section {
      padding-left: 0;
      padding-right: 0;
    }
  }
  @media (min-width: 769px) {
    .page-section {
      padding-left: 12vw;
      padding-right: 12vw;
    }
  }
}

/* ============================================================
   Chart — 年別アニマルタイプ早見表
   ============================================================ */
@layer components {

  /* --- 年一覧ページ --- */
  .chart-index-wrap {
    padding: var(--space-lg) 0;
  }
  .chart-index-hero {
    text-align: center;
    padding: 2rem 1.5rem 2.5rem;
  }
  .chart-index-hero h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
    margin-bottom: 0.6rem;
  }
  .chart-index-hero p {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }
  .chart-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.6rem;
    padding: 0 1rem 2rem;
  }
  .chart-year-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.4rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }
  .chart-year-card:hover {
    border-color: var(--color-gold);
    background: rgba(212, 160, 74, 0.08);
  }
  .chart-year-num {
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
  }
  .chart-year-label {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
  }

  /* --- 年別ページ --- */
  .chart-wrap {
    padding: 0 0 2rem;
  }
  .chart-breadcrumb {
    padding: 0.75rem 1.5rem 0;
  }
  .chart-hero {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
  }
  .chart-hero h1 {
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-light);
    margin-bottom: 0.5rem;
  }
  .chart-hero p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
  }

  /* --- 前年/翌年ナビ --- */
  .chart-year-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
  }
  .chart-year-nav--bottom {
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    margin-top: 0;
  }
  .chart-nav-btn {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.88rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
  }
  .chart-nav-btn:hover {
    border-color: var(--color-gold);
    background: rgba(212, 160, 74, 0.08);
  }
  .chart-nav-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }
  .chart-nav-year-index {
    font-size: 0.82rem;
    color: var(--color-teal-light);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* --- テーブル（横スクロール） --- */
  /* --- 月別グリッドセクション --- */
  .chart-months-wrap {
    padding: 0 1rem 2rem;
  }
  .chart-month-section {
    margin-bottom: 2.5rem;
  }
  .chart-month-heading {
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    padding: 0.3rem 0 0.3rem 0.85rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--color-gold);
    color: var(--color-gold-light);
  }
  .chart-month-heading--gold   { border-left-color: var(--color-gold);   color: var(--color-gold-light); }
  .chart-month-heading--teal   { border-left-color: var(--color-teal);   color: var(--color-teal-light); }
  .chart-month-heading--pink   { border-left-color: var(--color-pink);   color: var(--color-pink-light); }
  .chart-month-heading--purple { border-left-color: var(--color-purple); color: var(--color-purple-light); }

  .chart-month-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
  }

  /* --- セル --- */
  .chart-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    padding: 4px 2px;
    min-height: 96px;
  }
  .chart-cell--invalid {
    background: rgba(255,255,255,0.02);
    border-color: transparent;
    min-height: 96px;
  }
  .chart-cell-day {
    font-size: 0.62rem;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
    line-height: 1;
  }
  .chart-cell-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    border-radius: 4px;
    padding: 2px;
    transition: background var(--transition-fast);
    width: 100%;
  }
  .chart-cell-link:hover {
    background: rgba(212, 160, 74, 0.12);
  }
  .chart-cell-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
  }
  .chart-cell-name {
    font-size: 0.6rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
    text-align: center;
    word-break: break-all;
    display: block;
  }

  /* --- 診断CTAボタン --- */
  .chart-diagnose-cta {
    text-align: center;
    padding: 2rem 1.5rem 1rem;
  }
  .chart-diagnose-cta p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    line-height: var(--line-height-relaxed);
  }

  /* --- レスポンシブ --- */
  @media (max-width: 768px) {
    .chart-year-grid {
      grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
      gap: 0.4rem;
    }
    .chart-month-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
    }
    .chart-cell-img { width: 56px; height: 56px; }
    .chart-cell { min-height: 86px; }
  }
  @media (max-width: 480px) {
    .chart-month-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .chart-cell-img { width: 48px; height: 48px; }
    .chart-cell { min-height: 80px; }
  }

  /* --- お問い合わせフォーム --- */
  .contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
  }
  .contact-field label {
    font-size: 0.9rem;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
  }
  .contact-required {
    font-size: 0.72rem;
    color: var(--color-pink);
    margin-left: 0.3rem;
  }
  .contact-field input[type="text"],
  .contact-field input[type="email"],
  .contact-field textarea {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    padding: 0.65rem 0.85rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition-fast);
  }
  .contact-field input[type="text"]:focus,
  .contact-field input[type="email"]:focus,
  .contact-field textarea:focus {
    outline: none;
    border-color: var(--color-gold);
  }
  .contact-field textarea {
    resize: vertical;
  }
  .contact-submit {
    text-align: center;
    margin-top: 1.5rem;
  }
}