/* ===== Shareable Timer / Timer Link Generator ===== */
.tlg-form { display: flex; flex-direction: column; gap: 1.25rem; }
.tlg-duration-row { display: flex; align-items: flex-end; justify-content: center; gap: 0.5rem; }
.tlg-unit { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.tlg-unit-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; }
.tlg-unit-input {
  width: 88px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 600;
  padding: 0.6rem 0.5rem;
  background: #0f172a; color: #e2e8f0;
  border: 2px solid #2d4060; border-radius: 10px;
  -moz-appearance: textfield;
}
.tlg-unit-input::-webkit-inner-spin-button,
.tlg-unit-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.tlg-unit-input:focus { outline: none; border-color: #f97316; }
.tlg-sep { font-size: 2rem; font-weight: 600; color: #475569; padding-bottom: 0.3rem; }
.tlg-optional { font-weight: 400; color: #64748b; }
.tlg-check-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; color: #cbd5e1; font-size: 0.95rem; }
.tlg-check { width: 18px; height: 18px; accent-color: #f97316; cursor: pointer; flex-shrink: 0; }
.tlg-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tlg-preset {
  padding: 0.35rem 0.9rem; border-radius: 100px;
  border: 1.5px solid #2d4060; background: transparent;
  color: #94a3b8; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.tlg-preset:hover, .tlg-preset--featured { border-color: #f97316; color: #f97316; }
.tlg-result { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.tlg-divider { display: flex; align-items: center; gap: 0.75rem; color: #64748b; font-size: 13px; }
.tlg-divider::before, .tlg-divider::after { content: ''; flex: 1; height: 1px; background: #2d4060; }
.tlg-preview { font-size: 1.1rem; font-weight: 600; color: #e2e8f0; text-align: center; }

/* ===== Reaction Test ===== */
.reaction-area {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  margin: 0 auto 32px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
  background: #e2e8f0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 48px;
  font-weight: 700;
  color: #334155;
}
.reaction-waiting { background: #1e3a8a; color: white; }
.reaction-go { background: #16a34a; color: white; font-size: 56px; }
.reaction-result { background: transparent; color: #60a5fa; }
.reaction-early { background: #dc2626; color: white; font-size: 28px; }
.challenge-banner { background: #f97316; color: white; border-radius: 12px; padding: 20px 24px; margin-bottom: 24px; font-size: 18px; font-weight: 600; }
.rating-scale { width: 100%; border-collapse: collapse; margin-top: 24px; }
.rating-scale td, .rating-scale th { padding: 10px 16px; border-bottom: 1px solid #e2e8f0; font-size: 14px; }
.rating-scale th { background: #f8fafc; font-weight: 600; }

/* ===== Age in Seconds ===== */
.age-counter-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 32px 0; }
.age-counter-card { background: white; border-radius: 16px; padding: 24px 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.age-counter-card.primary { grid-column: 1 / -1; background: #1e3a8a; color: white; }
.age-counter-number { font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 700; color: #1e3a8a; display: block; }
.age-counter-card.primary .age-counter-number { color: white; font-size: 48px; }
.age-counter-label { font-size: 13px; color: #64748b; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
@keyframes pulse-count { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.pulse { animation: pulse-count 0.3s ease; }
.milestone-card { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-radius: 12px; margin-bottom: 8px; background: white; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.milestone-past { opacity: 0.5; }
.milestone-next { border: 2px solid #f97316; background: #fff7ed; }
.milestone-badge { font-size: 12px; padding: 4px 10px; border-radius: 100px; font-weight: 600; }
.milestone-badge.past { background: #dcfce7; color: #16a34a; }
.milestone-badge.future { background: #fef3c7; color: #d97706; }
.milestone-badge.next-up { background: #fed7aa; color: #f97316; }

/* ===== Event Countdown ===== */
.countdown-boxes { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 2.5rem 0; align-items: flex-start; }
.countdown-box { background: #1e2d45; border: 1px solid #2d4060; border-radius: 16px; padding: 1.5rem 1.25rem; text-align: center; min-width: 110px; }
.countdown-flip { display: block; }
.countdown-number { font-family: 'JetBrains Mono', monospace; font-size: clamp(2.5rem, 8vw, 4rem); font-weight: 700; color: #e2e8f0; line-height: 1; display: block; }
.countdown-box-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; margin-top: 10px; display: block; }
.countdown-separator { font-size: 2.5rem; font-weight: 300; color: #2d4060; align-self: center; padding-bottom: 1.5rem; }
.countdown-unit { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; margin-top: 8px; }
@keyframes flip { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } }
.flip { animation: flip 0.3s ease; }

/* Event header */
.event-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  flex-wrap: wrap;
}

.event-title-row .magnet-title {
  margin: 0;
}

.event-icon-wrap {
  width: clamp(58px, 6vw, 72px);
  height: clamp(58px, 6vw, 72px);
  border-radius: 50%;
  background: #1a2e50;
  border: 1.5px solid #2d4060;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #60a5fa;
}
.event-icon-wrap svg { width: clamp(28px, 3vw, 34px); height: clamp(28px, 3vw, 34px); }
.event-date-label { display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: .9375rem; margin-top: 1rem; }
.event-today-banner { background: rgba(22,163,74,.12); border: 1px solid #16a34a; border-radius: 12px; padding: 1rem 1.5rem; text-align: center; margin-bottom: 1.5rem; color: #4ade80; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.event-past-banner { background: rgba(100,116,139,.1); border: 1px solid #475569; border-radius: 12px; padding: 1rem 1.5rem; text-align: center; margin-bottom: 1.5rem; color: #94a3b8; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Share section */
.share-heading { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 700; color: #e2e8f0; margin-bottom: .5rem; }
.share-subtext { color: #94a3b8; font-size: 14px; margin-bottom: 1rem; }
.share-card { max-width: 580px; margin: 0 auto; background: #1e2d45; border: 1px solid #2d4060; border-radius: 14px; padding: 1.5rem; }

/* Create-own CTA */
.create-own-banner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: #1e2d45; border: 1px solid #2d4060; border-radius: 12px; padding: 1.5rem 2rem; flex-wrap: wrap; }
.create-own-text strong { color: #e2e8f0; display: block; font-size: 1rem; margin-bottom: 4px; }
.create-own-text p { color: #94a3b8; font-size: 14px; margin: 0; }

/* Countdown creator form */
.countdown-creator-section { padding: 2rem 0 2.5rem; }
.creator-card { max-width: 620px; margin: 0 auto; background: #1e2d45; border: 1px solid #2d4060; border-radius: 16px; padding: 2rem; }
.countdown-preview { border-top: 1px solid #2d4060; margin-top: 1.75rem; padding-top: 1.5rem; text-align: center; }
.preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 10px; }
.preview-content { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; }
.preview-emoji { font-size: 2rem; }
.preview-name { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; }
.preview-days { color: #94a3b8; font-size: .875rem; }

/* Popular preset cards */
.popular-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.popular-countdown-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 1.5rem 1rem 1.25rem; text-align: center; text-decoration: none; border-radius: 12px; border: 1px solid #2d4060; background: #1a2845; transition: border-color .15s, background .15s, transform .15s; }
.popular-countdown-card:hover { border-color: #60a5fa; background: #1e3260; transform: translateY(-2px); }
.popular-icon { width: 44px; height: 44px; border-radius: 50%; background: #152038; border: 1px solid #2d4060; display: flex; align-items: center; justify-content: center; color: #60a5fa; flex-shrink: 0; }
.popular-icon svg { width: 22px; height: 22px; }
.popular-countdown-card:hover .popular-icon { border-color: #60a5fa; color: #93c5fd; }
.popular-name { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.popular-date { font-size: 12px; color: #64748b; }

/* How it works */
.how-it-works-section { padding: 2.5rem 0; }
.how-steps { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; max-width: 540px; margin: 0 auto; }
.how-step { display: flex; align-items: flex-start; gap: 1rem; }
.how-step-number { width: 34px; height: 34px; border-radius: 50%; background: #f97316; color: white; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.how-step-content strong { color: #e2e8f0; display: block; margin-bottom: 4px; }
.how-step-content p { color: #94a3b8; font-size: 14px; margin: 0; }

/* Use case cards */
.use-case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.use-case-card { background: #152038; border: 1px solid #2d4060; border-radius: 12px; padding: 1.25rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.use-case-icon { width: 2.5rem; height: 2.5rem; color: #60a5fa; }
.use-case-label { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.use-case-desc { font-size: 12px; color: #64748b; }

/* FAQ - Defer all styling to timer.css; only override what's needed */
.faq-list { max-width: 100%; }
.faq-item { padding: 0; }

/* Event facts (preset event view) */
.event-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.25rem 0; }
.event-fact-card { background: #152038; border: 1px solid #2d4060; border-radius: 12px; padding: 1.25rem 1rem; text-align: center; }
.event-fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: 8px; }
.event-fact-value { font-size: 1.5rem; font-weight: 700; color: #60a5fa; display: block; }
.event-fact-sub { font-size: 12px; color: #64748b; margin-top: 6px; line-height: 1.5; }

/* Emoji picker (dark) */
.emoji-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.emoji-option { cursor: pointer; }
.emoji-radio { display: none; }
.emoji-btn { width: 44px; height: 44px; border: 2px solid #2d4060; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .1s, background .1s; background: #152038; font-size: 22px; line-height: 1; }
.emoji-radio:checked + .emoji-btn { border-color: #f97316; background: rgba(249,115,22,.12); }
.emoji-btn:hover { border-color: #f97316; }

@media (max-width: 640px) {
  .countdown-number { font-size: 2.25rem; }
  .countdown-box { min-width: 72px; padding: 1rem .875rem; }
  .countdown-separator { font-size: 1.75rem; }
}

/* ===== Challenge pages ===== */

/* Challenge hub */
.challenge-hub-page { padding-bottom: 3rem; }
.challenge-hub-hero { padding: 1.25rem 0 2.5rem; border-bottom: 1px solid #263a59; background: linear-gradient(180deg, rgba(30,45,69,.55), rgba(15,23,42,0)); }
.challenge-hub-hero .breadcrumb { margin-bottom: 2rem; }
.challenge-hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: clamp(1.25rem, 4vw, 3rem); align-items: end; }
.challenge-hub-hero h1 { max-width: 780px; margin: .35rem 0 1rem; color: #f8fafc; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; letter-spacing: 0; }
.challenge-hub-lede { max-width: 760px; color: #b7c4d8; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.challenge-hub-feature-card { display: grid; gap: .55rem; padding: 1.25rem; background: #1e2d45; border: 1px solid #385579; border-radius: 8px; color: #b7c4d8; }
.challenge-hub-feature-card strong { color: #f8fafc; font-size: 1.6rem; line-height: 1.1; }
.challenge-hub-feature-icon { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; color: #7cc2ff; background: #101b2e; border: 1px solid #385579; border-radius: 8px; }
.challenge-hub-feature-icon svg { width: 30px; height: 30px; }
.challenge-hub-section { padding: 2.5rem 0; }
.section-heading-row { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.25rem; }
.section-heading-row h2 { margin: .25rem 0 0; color: #f8fafc; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.challenge-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.challenge-hub-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; min-height: 190px; padding: 1.25rem; background: #1e2d45; border: 1px solid #385579; border-radius: 8px; color: #d8e2f1; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
.challenge-hub-card:hover { transform: translateY(-2px); border-color: var(--challenge-color, #7cc2ff); background: #243554; color: #f8fafc; }
.challenge-hub-card-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; color: var(--challenge-color, #7cc2ff); background: #101b2e; border: 1px solid #385579; border-radius: 8px; }
.challenge-hub-card-icon svg { width: 30px; height: 30px; }
.challenge-hub-card-body { display: grid; gap: .55rem; min-width: 0; }
.challenge-hub-card-title { color: #f8fafc; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.challenge-hub-card-desc { color: #b7c4d8; line-height: 1.55; }
.challenge-hub-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; color: #9fb0c7; font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.challenge-hub-card-meta span { display: inline-flex; align-items: center; min-height: 28px; padding: .25rem .6rem; background: #101b2e; border: 1px solid #385579; border-radius: 6px; }
.challenge-hub-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.challenge-hub-info-card { padding: 1.5rem; background: #162237; border: 1px solid #2b3f5f; border-radius: 8px; }
.challenge-hub-info-card h2 { margin: 0 0 .75rem; color: #f8fafc; font-size: 1.4rem; }
.challenge-hub-info-card p { margin: 0 0 .75rem; color: #b7c4d8; line-height: 1.7; }
.challenge-hub-info-card p:last-child { margin-bottom: 0; }
.challenge-hub-info-card a { color: #7cc2ff; text-underline-offset: 3px; }

/* Hero */
.challenge-page { padding-bottom: 3rem; }
.challenge-hero { text-align: center; padding: 3rem 0 2rem; }
.challenge-hero-title { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; color: #e2e8f0; }
.challenge-hero-icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; color: #f97316; }

/* Challenger incoming banner */
.challenger-incoming { background: #1e2d45; border-bottom: 2px solid #f97316; padding: .875rem 0; }
.challenger-incoming-inner { display: flex; align-items: center; gap: 14px; font-size: 15px; color: #e2e8f0; }
.challenger-incoming-inner strong { color: #f97316; }

/* Timer section layout */
.challenge-timer-section { padding: 2.5rem 0; }
.challenge-timer-section .container { display: flex; flex-direction: column; align-items: center; }

/* Pre-start description card */
.challenge-pre-start { background: #1e2d45; border: 1px solid #2d4060; border-radius: 10px; padding: 1.25rem 1.5rem; max-width: 520px; width: 100%; margin-bottom: 2rem; text-align: center; }
.challenge-pre-desc { color: #e2e8f0; font-size: 16px; line-height: 1.65; margin-bottom: .5rem; }
.challenge-pre-meta { color: #64748b; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.challenge-pre-meta strong { color: #94a3b8; }

/* SVG ring */
.challenge-ring-container { position: relative; width: 260px; height: 260px; margin: 0 auto 2rem; }
.challenge-ring-svg { transform: rotate(-90deg); }
.challenge-ring-bg { fill: none; stroke: #2d4060; stroke-width: 12; }
.challenge-ring-progress { fill: none; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 628; stroke-dashoffset: 0; transition: stroke-dashoffset 0.5s ease; }
.challenge-time-display { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 700; color: #e2e8f0; white-space: nowrap; }

/* Breathing phase */
.phase-indicator { text-align: center; font-size: 1.25rem; font-weight: 600; color: #60a5fa; height: 40px; transition: opacity 0.3s; margin-bottom: 1rem; }
@keyframes phase-change { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.phase-change { animation: phase-change 0.5s ease; }

/* Controls */
.challenge-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.challenge-start-btn { min-width: 200px; font-size: 1rem; font-weight: 700; letter-spacing: .02em; border-radius: 8px; padding: 14px 32px; border: 2px solid transparent; color: #fff; cursor: pointer; transition: opacity .15s, transform .1s; }
.challenge-start-btn:hover { opacity: .88; transform: translateY(-1px); }
.challenge-start-btn:active { transform: translateY(0); }
.btn-challenge-reset { color: #64748b; font-size: .875rem; background: none; border: none; cursor: pointer; padding: 4px 12px; }
.btn-challenge-reset:hover { color: #94a3b8; }

/* Completion card */
.challenge-completion { max-width: 520px; width: 100%; margin-top: 1rem; }
.challenge-completion-inner { text-align: center; padding: 2rem; background: #1e2d45; border: 2px solid #16a34a; border-radius: 12px; margin-bottom: 1rem; }
.challenge-trophy { font-size: 3rem; display: block; margin-bottom: .75rem; }
.challenge-completion-title { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin-bottom: .5rem; }
.challenge-completion-badge-text { color: #60a5fa; font-size: 15px; font-style: italic; }
.challenge-share-card { background: #1e2d45; border: 1px solid #2d4060; border-radius: 10px; padding: 1.5rem; }
.challenge-share-card h3 { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin-bottom: .375rem; }
.challenge-share-card > p { color: #94a3b8; font-size: 14px; margin-bottom: 1rem; }
.challenge-name-row { display: flex; gap: 8px; margin-bottom: .75rem; }
.challenge-name-row .form-input { flex: 1; }

/* Other challenges grid */
.challenge-others { padding: 2.5rem 0; }
.challenge-others-title { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1.25rem; }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.challenge-card-mini { background: #1e2d45; border-radius: 10px; padding: 1rem; text-align: center; border: 1px solid #2d4060; text-decoration: none; color: #cbd5e1; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: border-color .15s, background .15s; }
.challenge-card-mini:hover { border-color: #f97316; background: #243554; color: #f97316; }
.challenge-card-mini:hover .challenge-card-icon { color: #f97316; }
.challenge-card-icon { display: flex; align-items: center; justify-content: center; color: #60a5fa; }
.challenge-card-icon svg { width: 2rem; height: 2rem; }
.challenge-card-mini .name { font-size: 13px; font-weight: 600; }
.challenge-card-mini .meta { font-size: 11px; color: #64748b; }

/* Responsive */
@media (max-width: 640px) {
  .challenge-hub-hero-grid,
  .challenge-hub-grid,
  .challenge-hub-info-grid {
    grid-template-columns: 1fr;
  }

  .section-heading-row {
    align-items: start;
    flex-direction: column;
  }

  .challenge-hub-card {
    grid-template-columns: 1fr;
  }

  .challenge-ring-container { width: 200px; height: 200px; }
  .challenge-time-display { font-size: 36px; }
  .challenge-name-row { flex-direction: column; }
}

/* ===== Time Difference ===== */
.time-diff-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin: 32px 0; }
.city-clock { background: white; border-radius: 20px; padding: 32px 24px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.city-flag { font-size: 40px; display: block; margin-bottom: 8px; }
.city-name { font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 16px; }
.city-time { font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 700; color: #1e3a8a; line-height: 1; }
.city-date { font-size: 13px; color: #64748b; margin-top: 8px; }
.diff-badge { background: #1e3a8a; color: white; border-radius: 100px; padding: 12px 20px; font-size: 16px; font-weight: 700; text-align: center; white-space: nowrap; }
.overlap-card { background: #f0fdf4; border: 2px solid #16a34a; border-radius: 14px; padding: 20px; margin: 16px 0; text-align: center; }
.pair-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pair-link { background: white; border: 2px solid #e2e8f0; border-radius: 100px; padding: 8px 16px; font-size: 14px; text-decoration: none; color: #334155; transition: all 0.15s; }
.pair-link:hover { border-color: #1e3a8a; color: #1e3a8a; }

/* ===== Shared: Copy URL Box ===== */
.copy-url-box { display: flex; gap: 8px; align-items: center; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; margin: 16px 0; }
.copy-url-input { flex: 1; border: none; background: transparent; font-size: 14px; color: #475569; font-family: 'JetBrains Mono', monospace; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-copy { white-space: nowrap; }
.share-section { background: transparent; border: none; border-radius: 0; padding: 2rem 0; margin-top: 0; }
.share-section h3 { margin: 0 0 16px; font-size: 18px; }

/* Override .card white bg for share cards on dark pages */
.how-old-am-i-page .share-card,
.reaction-test-page .share-card,
.magnet-page .share-card {
  background: #1e2d45;
  border-color: #2d4060;
  color: #e2e8f0;
}
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.btn-twitter { background: #000000; color: white; }
.btn-twitter:hover { background: #333; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .age-counter-grid { grid-template-columns: 1fr 1fr; }
  .countdown-number { font-size: 44px; }
  .countdown-box { min-width: 80px; padding: 16px 12px; }
  .time-diff-grid { grid-template-columns: 1fr; }
  .diff-badge { border-radius: 12px; }
  .city-time { font-size: 36px; }
  .challenge-ring-container { width: 200px; height: 200px; }
  .challenge-time-display { font-size: 36px; }
  .reaction-area { font-size: 36px; }
}

/* ===== Shared Magnet Page Layout ===== */
.magnet-page { /* inherits page background */ }
.magnet-header { text-align: center; padding: 3rem 0 2rem; }
.magnet-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: #e2e8f0; margin-bottom: .5rem; }
.magnet-subtitle { color: #94a3b8; font-size: 1.125rem; }
.stats-section { padding: 2.5rem 0; }
.section-heading { font-size: 1.375rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1.25rem; }

/* Shared: Copy box */
.copy-box { display: flex; gap: 8px; align-items: center; background: #152038; border: 1px solid #2d4060; border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.copy-input { flex: 1; border: none; background: transparent; font-size: 13px; color: #94a3b8; font-family: 'JetBrains Mono', monospace; outline: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #60a5fa; border: 1px solid #2d4060; border-radius: 8px; background: transparent; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.btn-copy:hover { background: #1e3a8a; color: white; }
.copy-label { /* text */ }

/* Shared: Social buttons */
.btn-social { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: opacity .15s; }
.btn-twitter { background: #000; color: white; border: none; }
.btn-twitter:hover { opacity: .85; }
.social-share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Shared: Card variants */
.magnet-page .card { background: #1e2d45; border-color: #2d4060; color: #e2e8f0; }
.card--orange { border-color: #f97316 !important; background: rgba(249,115,22,.1); }
.card--elevated { box-shadow: 0 4px 24px rgba(0,0,0,.3); }

/* Shared: Related tools grid */
.related-section { padding: 2.5rem 0; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.related-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 1.25rem 1rem; text-align: center; text-decoration: none; border-radius: 10px; color: #cbd5e1; border: 1px solid #2d4060; background: #1e2d45; transition: border-color .15s, background .15s; }
.related-card:hover { border-color: #f97316; background: #243554; color: #f97316; }
.related-svg { width: 1.75rem; height: 1.75rem; color: #60a5fa; flex-shrink: 0; }
.related-card:hover .related-svg { color: inherit; }
.related-name { font-size: 14px; font-weight: 600; }
.related-desc { font-size: 12px; color: #64748b; }

/* Share card (how-old-am-i) */
.how-old-am-i-page .share-card { max-width: 100%; margin: 0; }
.share-heading { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1rem; }

/* ===== Reaction Test Page ===== */
.challenge-banner-section { padding: .625rem 0; background: #1e2d45; border-bottom: 1px solid #2d4060; }
.challenge-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; }
.challenge-banner-icon { flex-shrink: 0; color: #f97316; }
.challenge-banner-text { flex: 1; font-size: 15px; color: #94a3b8; }
.challenge-banner-text strong { color: #e2e8f0; }
.challenge-banner-badge { background: #f97316; color: white; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 100px; white-space: nowrap; }

.game-section { padding: 2.5rem 0; }
.reaction-target { width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto 2rem; border-radius: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; background: #1e2d45; border: 2px solid #2d4060; transition: background .15s, border-color .15s; }
.reaction-target[data-state="ready"] { background: #1e3a8a; border-color: #3b82f6; }
.reaction-target[data-state="go"]    { background: #166534; border-color: #16a34a; }
.reaction-target[data-state="early"] { background: #991b1b; border-color: #dc2626; }
.reaction-target[data-state="result"]{ background: #1e2d45; border-color: #2d4060; }
.reaction-target-inner { text-align: center; padding: 2rem; width: 100%; }
.reaction-state { display: none; }
.reaction-state:not([hidden]) { display: block; }
.reaction-message { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; }
.reaction-message--go { font-size: 2rem; color: #4ade80; }
.reaction-message--early { color: #fca5a5; }
.reaction-message-sub { font-size: 1rem; color: #94a3b8; margin-top: .5rem; }
.reaction-result { font-family: 'JetBrains Mono', monospace; font-size: 3rem; font-weight: 700; color: #60a5fa; display: block; }
.reaction-rating { font-size: 1.125rem; color: #94a3b8; display: block; margin-top: .25rem; }

.game-controls { display: flex; justify-content: center; gap: 12px; margin-bottom: 1.5rem; }
.round-tracker { text-align: center; margin-bottom: 1.5rem; }
.round-pips { display: flex; justify-content: center; gap: 8px; margin-bottom: .5rem; }
.round-pip { width: 14px; height: 14px; border-radius: 50%; background: #2d4060; border: 2px solid transparent; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.round-pip--done { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12); }
.round-pip--current { background: #60a5fa; border-color: #bfdbfe; transform: scale(1.12); box-shadow: 0 0 0 5px rgba(96, 165, 250, .14); }
.round-pip--early { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
.round-pip--pending { background: #2d4060; }
.round-tracker-label { font-size: 14px; color: #94a3b8; }

.mode-toggle { display: flex; justify-content: center; gap: 8px; margin-bottom: 1.5rem; }
.mode-btn { color: #64748b; }
.mode-btn--active { color: #60a5fa !important; border-color: #60a5fa !important; }

.average-result-card { text-align: center; margin-top: 1rem; padding: 1.5rem; }
.average-result-heading { font-size: 1rem; font-weight: 600; color: #94a3b8; margin-bottom: .5rem; }
.average-result-score { font-family: 'JetBrains Mono', monospace; font-size: 2.5rem; font-weight: 700; color: #60a5fa; display: block; }
.average-result-rating { font-size: 1rem; color: #94a3b8; display: block; margin-top: .25rem; }

.rating-scale-section { padding: 2rem 0; }
.rating-scale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 1.25rem 0; }
.rating-band { padding: 12px 16px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; background: #1e2d45; border: 1px solid #2d4060; }
.rating-band--superhuman { border-color: #a855f7; background: rgba(168,85,247,.1); }
.rating-band--lightning  { border-color: #60a5fa; background: rgba(96,165,250,.1); }
.rating-band--excellent  { border-color: #16a34a; background: rgba(22,163,74,.1); }
.rating-band--good       { border-color: #22c55e; background: rgba(34,197,94,.08); }
.rating-band--average    { border-color: #f59e0b; background: rgba(245,158,11,.08); }
.rating-band--practice   { border-color: #dc2626; background: rgba(220,38,38,.08); }
.rating-range { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.rating-label { font-size: 12px; color: #94a3b8; }
.rating-scale-note { font-size: 13px; color: #64748b; text-align: center; }

.challenge-section { padding: 2rem 0; }
.challenge-card { max-width: 560px; margin: 0 auto; }
.challenge-heading { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; margin-bottom: .25rem; }
.challenge-subtext { color: #94a3b8; font-size: 14px; margin-bottom: 1rem; }
.challenge-input-row { display: flex; gap: 8px; margin-top: .5rem; }
.challenge-input-row .form-input { flex: 1; }
.challenge-result { margin-top: 1rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.stat-card { background: #1e2d45 !important; border-color: #2d4060 !important; text-align: center; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: #60a5fa; display: block; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: .05em; }
.stats-context-card { margin-top: .5rem; }
.stats-context-card h3 { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin-bottom: .5rem; }
.stats-context-card p { font-size: 14px; color: #94a3b8; line-height: 1.7; }

/* ===== How Old Am I Page ===== */
.dob-input-section { padding: 2rem 0; }
.dob-card { max-width: 560px; margin: 0 auto; }
.dob-input-row { display: flex; gap: 8px; margin-top: .75rem; flex-wrap: wrap; }
.dob-input-row .form-input { flex: 1; min-width: 160px; }
.form-label--large { font-size: 1.125rem; font-weight: 600; color: #e2e8f0; }
.form-input--date { min-width: 0; }
.form-input--large { font-size: 1rem; padding: 12px 16px; }

.live-counters-section { padding: 2.5rem 0; }
.age-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.25rem 0; }
.age-stat-card { padding: 1.25rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; background: #1e2d45 !important; border-color: #2d4060 !important; }
.age-stat-card--hero { grid-column: 1 / -1; padding: 1.75rem; background: #1e3a8a !important; border-color: #2563eb !important; }
.age-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
.age-stat-card--hero .age-stat-label { color: rgba(255,255,255,.7); }
.age-stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 700; color: #60a5fa; }
.age-stat-value--hero { font-size: 2.5rem; color: white; }
.age-stat-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: pulse-dot 1.2s ease infinite; }
.stat-approx { font-size: 9px; color: #64748b; text-transform: none; letter-spacing: 0; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

.fun-fact-card { display: flex; align-items: flex-start; gap: 12px; padding: 1rem 1.25rem; margin-top: 1rem; background: #1e2d45 !important; border-color: #2d4060 !important; }
.fun-fact-icon { flex-shrink: 0; color: #f97316; margin-top: 2px; }
.fun-fact-text { font-size: 15px; color: #94a3b8; line-height: 1.65; }

.milestones-section { padding: 2.5rem 0; }
.milestones-list { display: flex; flex-direction: column; gap: 6px; }

/* Global: constrain all section containers on every magnet page */
.magnet-page section > .container {
  max-width: 860px;
}
.milestone-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; background: #1e2d45; border: 1px solid #2d4060; }
.milestone-item--next { border-color: #f97316; background: rgba(249,115,22,.07); }
.milestone-item--past { opacity: .5; }
.milestone-icon-col { flex-shrink: 0; }
.milestone-content { flex: 1; min-width: 0; }
.milestone-label { font-size: 14px; font-weight: 600; color: #e2e8f0; display: block; }
.milestone-date { font-size: 12px; color: #64748b; display: block; }
.milestone-badge-col { flex-shrink: 0; }
.milestone-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.milestone-badge--past   { background: rgba(22,163,74,.15); color: #4ade80; }
.milestone-badge--next   { background: rgba(249,115,22,.2); color: #fb923c; }
.milestone-badge--future { background: rgba(100,116,139,.15); color: #94a3b8; }

/* ===== Magnet page shared section heading (overrides .section-heading from tools) ===== */
.magnet-page .section-heading { font-size: 1.375rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1.25rem; }

/* ===== Prose sections (informational content on magnet pages) ===== */
/* Reset the full-width card styling main.css applies to .prose-section */
.prose-section {
  padding: 2rem 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
}

.prose-section h2 {
  font-size: 22px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 12px;
  margin-top: 0;
  letter-spacing: -0.01em;
}

.prose-section h3 {
  font-size: 17px;
  font-weight: 600;
  color: #e2e8f0;
  margin-bottom: 8px;
  margin-top: 20px;
}

.prose-section p {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.75;
  margin-bottom: 14px;
}

.prose-section a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose-section ol,
.prose-section ul {
  padding-left: 22px;
  margin-bottom: 14px;
}

.prose-section li {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.7;
  margin-bottom: 6px;
}

.prose-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid #2d4060;
  border-radius: 8px;
  overflow: hidden;
}

.prose-section th {
  background: #1e2d45;
  color: #e2e8f0;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #2d4060;
}

.prose-section td {
  padding: 9px 14px;
  color: #94a3b8;
  border-bottom: 1px solid #1a2744;
}

.prose-section tr:last-child td { border-bottom: none; }
.prose-section tr:nth-child(even) td { background: rgba(30,45,69,.4); }

/* Faq-section on magnet pages */
.prose-section .faq-section { margin-bottom: 0; }
.prose-section .faq-title {
  font-size: 22px;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .magnet-header { padding: 2rem 0 1.5rem; }
  .age-stats-grid { grid-template-columns: 1fr 1fr; }
  .age-stat-card--hero { grid-column: 1 / -1; }
  .age-stat-value--hero { font-size: 2rem; }
  .rating-scale-grid { grid-template-columns: 1fr 1fr; }
  .reaction-target { max-width: 340px; }
  .reaction-result { font-size: 2.5rem; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .dob-input-row { flex-direction: column; }
  .event-facts-grid { grid-template-columns: 1fr; }
  .popular-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Tip/info box (loop-timer etc) ===== */
.tip-box { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.2); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; color: #94a3b8; font-size: 14px; line-height: 1.65; }

/* ===== Time Difference page ===== */
.city-picker-section { margin-bottom: 2rem; }

.city-picker-card { padding: 1.75rem; }

.city-pickers-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.city-picker-field {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.city-picker-vs {
  font-size: 1.1rem;
  font-weight: 700;
  color: #64748b;
  padding-bottom: .5rem;
  flex-shrink: 0;
}

.form-select--large {
  font-size: 1rem;
  padding: .65rem .9rem;
  height: auto;
}

/* Popular pairs */
.popular-pairs-section { margin-bottom: 2.5rem; }

.popular-pairs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.pair-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: #1e2d45;
  border: 1px solid #2d4060;
  text-decoration: none;
  transition: border-color .15s, transform .1s;
  color: #e2e8f0;
}

.pair-card:hover {
  border-color: #60a5fa;
  transform: translateY(-2px);
}

.pair-flags { font-size: 1.4rem; line-height: 1; }

.pair-codes {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.pair-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2d4060;
  color: #60a5fa;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  border-radius: 4px;
  padding: 3px 7px;
  min-width: 2rem;
}
.pair-arrow {
  color: #94a3b8;
  font-size: .85rem;
}

.pair-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.pair-label {
  font-weight: 600;
  font-size: .95rem;
  color: #e2e8f0;
}

.pair-diff {
  font-size: .8rem;
  color: #60a5fa;
}

/* Why / use-cases section */
.why-section { margin-bottom: 2.5rem; }

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.use-case-title {
  font-weight: 600;
  font-size: .95rem;
  color: #e2e8f0;
  margin-bottom: .25rem;
}

.use-case-desc {
  font-size: .85rem;
  color: #94a3b8;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .city-pickers-row { flex-direction: column; }
  .city-picker-vs { padding-bottom: 0; align-self: center; }
  .popular-pairs-grid { grid-template-columns: 1fr 1fr; }
  .use-cases-grid { grid-template-columns: 1fr; }
}

/* ===== Time Difference alignment and result cards ===== */
.page-time-difference .magnet-page-header,
.page-time-difference .dual-clock-section > .container,
.page-time-difference .overlap-section > .container,
.page-time-difference .share-section > .container,
.page-time-difference .popular-pairs-section > .container,
.page-time-difference .magnet-page > .container {
  max-width: 980px;
}

.page-time-difference .magnet-page-header {
  padding-top: 1.75rem;
}

.page-time-difference .tool-header {
  margin-bottom: 2rem;
}

.page-time-difference .tool-breadcrumb {
  margin-bottom: 1rem;
}

.page-time-difference .dual-clock-section {
  padding: 0 0 2rem;
}

.page-time-difference .dual-clock-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.page-time-difference .city-clock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 238px;
  padding: 24px;
  border-radius: 8px;
  background: #172033;
  border: 1px solid #334155;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
  color: #e2e8f0;
}

.page-time-difference .city-clock-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.page-time-difference .city-flag {
  margin-bottom: 0;
  font-size: 34px;
}

.page-time-difference .city-name {
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
}

.page-time-difference .city-tz {
  color: #94a3b8;
  font-size: 13px;
}

.page-time-difference .city-time {
  margin-top: 18px;
  color: #60a5fa;
  font-size: clamp(38px, 4.7vw, 58px);
  letter-spacing: 0;
}

.page-time-difference .city-date {
  color: #a8b3c5;
  font-size: 14px;
}

.page-time-difference .hour-diff-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 112px;
}

.page-time-difference .hour-diff-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #1e3a8a;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(30, 58, 138, .28);
}

.page-time-difference .hour-diff-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.page-time-difference .hour-diff-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: .82;
  text-transform: uppercase;
}

.page-time-difference .switch-cities-btn {
  min-height: 36px;
  border-radius: 6px;
  background: #152038;
  border: 1px solid #334155;
  color: #dbeafe;
}

.page-time-difference .different-day-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: #152038;
  color: #cbd5e1;
  font-size: 14px;
}

.page-time-difference .overlap-section,
.page-time-difference .share-section,
.page-time-difference .popular-pairs-section {
  padding: 0 0 2rem;
  margin: 0;
}

.page-time-difference .overlap-card,
.page-time-difference .share-card {
  max-width: 100%;
  margin: 0;
  padding: 22px;
  border-radius: 8px;
  background: #1e2d45;
  border: 1px solid #2d4060;
  text-align: left;
}

.page-time-difference .overlap-heading,
.page-time-difference .share-heading {
  margin: 0 0 6px;
  color: #f8fafc;
  font-size: 20px;
}

.page-time-difference .overlap-subtext {
  margin: 0 0 16px;
  color: #94a3b8;
}

.page-time-difference .overlap-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #152038;
  border: 1px solid #334155;
}

.page-time-difference .popular-pairs-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.page-time-difference .pair-card {
  border-radius: 8px;
  padding: 14px;
}

.page-time-difference .compare-another {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.page-time-difference .compare-another-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #3f5f86;
  background: #152038;
  color: #dbeafe;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.page-time-difference .compare-another-link:hover {
  background: #1f3554;
  border-color: #60a5fa;
  color: #f8fafc;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .page-time-difference .dual-clock-wrapper {
    grid-template-columns: 1fr;
  }

  .page-time-difference .hour-diff-center {
    min-width: 0;
  }

  .page-time-difference .popular-pairs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .page-time-difference .city-clock {
    min-height: 210px;
    padding: 20px;
  }

  .page-time-difference .copy-box {
    flex-direction: column;
    align-items: stretch;
  }

  .page-time-difference .popular-pairs-grid {
    grid-template-columns: 1fr;
  }
}

.page-time-difference-form .magnet-page-header,
.page-time-difference-form .city-picker-section > .container,
.page-time-difference-form .popular-pairs-section > .container,
.page-time-difference-form .why-section > .container,
.page-time-difference-form .magnet-page > .container {
  max-width: 1040px;
}

.page-time-difference-form .magnet-page-header {
  padding-top: 1.75rem;
}

.time-difference-picker {
  padding: 0 0 2.25rem;
}

.time-difference-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: stretch;
}

.time-difference-intro-card,
.page-time-difference-form .city-picker-card {
  border-radius: 8px;
  background: linear-gradient(180deg, #1e2d45 0%, #172033 100%);
  border: 1px solid #2d4060;
  padding: 24px;
}

.time-difference-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(96, 165, 250, .12);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
}

.time-difference-intro-card h2 {
  margin: 18px 0 10px;
  color: #f8fafc;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

.time-difference-intro-card p {
  color: #a8b3c5;
  line-height: 1.65;
  margin: 0;
}

.time-difference-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.time-difference-highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #334155;
  border-radius: 5px;
  background: #152038;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.page-time-difference-form .city-picker-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-time-difference-form .city-pickers-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.page-time-difference-form .form-label--large {
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
}

.page-time-difference-form .form-select--large {
  width: 100%;
  min-height: 48px;
  border-radius: 7px;
  background: #0f172a;
  border: 1px solid #334155;
  color: #f8fafc;
}

.city-picker-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  border: 1px solid #334155;
  border-radius: 7px;
  background: #152038;
  color: #93c5fd;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}

.city-picker-swap:hover {
  border-color: #60a5fa;
  background: #1e2d45;
}

.time-difference-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #0f172a;
  border: 1px dashed #334155;
  color: #94a3b8;
  text-align: center;
}

.time-difference-preview strong {
  color: #f8fafc;
}

.time-difference-preview span {
  color: #60a5fa;
  font-weight: 700;
}

.form-error-message {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(239, 68, 68, .12);
  border: 1px solid rgba(248, 113, 113, .35);
  color: #fecaca;
  font-size: 13px;
  font-weight: 600;
}

.page-time-difference-form .btn-full {
  width: 100%;
  justify-content: center;
  border-radius: 7px;
}

@media (max-width: 860px) {
  .time-difference-picker-grid,
  .page-time-difference-form .city-pickers-row {
    grid-template-columns: 1fr;
  }

  .city-picker-swap {
    width: 100%;
  }
}