:root {
  /* Brand blues, taken from the IranFina logo (deep navy ring, mid blue body, light sky-blue top, white wave) */
  --navy: #133a6b;
  --navy-dark: #0a2549;
  --blue: #1483c4;
  --blue-light: #5fc1e8;
  --wave-white: #f4fbff;
  --accent: #17c3e6; /* vivid splash-cyan, lifted from the logo's light wave — stays in the brand family */
  --accent-dark: #0fa3c2;
  --bg: #f5f9fc;
  --text: #14222f;
  --muted: #5d7184;
  --card-bg: #ffffff;
  --border: #e1ebf2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  text-align: right;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== Header ===== */
.site-header {
  background: linear-gradient(115deg, var(--navy-dark), var(--navy) 60%, var(--blue));
  color: #fff;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 18px rgba(10,37,73,.18);
}

/* ===== Front-end admin toolbar ===== */
.admin-bar { position: sticky; top: 0; z-index: 60; background: #14233a; color: #cfe0f2; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; }
body.has-admin-bar .site-header { top: 40px; } /* push sticky header below the bar */
.ab-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px 16px; height: 40px; }
.admin-bar a { color: #cfe0f2; text-decoration: none; padding: 6px 10px; border-radius: 7px; line-height: 1; white-space: nowrap; }
.admin-bar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.ab-brand { font-weight: 800; color: #fff !important; }
.ab-edit { background: var(--accent, #2e86c1); color: #fff !important; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.ab-edit:hover { filter: brightness(1.08); }
.ab-ico { font-size: 14px; }
.ab-spacer { flex: 1; }
.ab-logout { color: #f3b0b0 !important; }
@media (max-width: 640px) {
  .ab-inner { gap: 2px; padding: 6px 10px; overflow-x: auto; }
  .admin-bar a { padding: 6px 8px; }
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-left { display: flex; align-items: center; gap: 28px; }

.logo { display: flex; align-items: center; gap: 10px; }
.logo img { height: 38px; display: block; }
.logo-text { font-size: 20px; font-weight: 800; color: #fff; }
.logo-text span { color: var(--blue-light); }

.main-nav { display: flex; gap: 22px; }
.main-nav a {
  font-size: 15px;
  opacity: .88;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.active {
  opacity: 1;
  border-bottom-color: var(--blue-light);
}

.header-right { display: flex; align-items: center; gap: 14px; }
.social-links { display: flex; align-items: center; gap: 10px; }
.social-links a {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: background .15s, color .15s;
}
.social-links a:hover { background: var(--accent); color: #fff; }
.social-icon { width: 18px; height: 18px; }
.btn-app-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(23,195,230,.4);
}
.btn-app-header:hover { background: var(--accent-dark); }

@media (max-width: 900px) {
  .main-nav { display: none; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 45%, var(--blue) 100%);
  color: #fff;
  padding: 64px 0 110px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(95,193,232,.35), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 60px);
  pointer-events: none;
}
.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  width: 100%;
  display: block;
  line-height: 0;
}
.hero-content { position: relative; z-index: 2; }
.hero h1 { font-size: 34px; margin: 0 0 14px; line-height: 1.5; }
.hero p { color: #d7eaf7; max-width: 580px; line-height: 2; margin: 0 0 28px; font-size: 16px; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-2px); }

.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 22px rgba(23,195,230,.35); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-outline { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.1); }
.btn-white { background: #fff; color: var(--navy); }

/* ===== App banner (single, prominent — replaces the old two-card split) ===== */
.app-banner {
  background: linear-gradient(115deg, var(--navy-dark), var(--blue) 70%, var(--accent));
  border-radius: 20px;
  margin-top: -56px;
  position: relative;
  z-index: 3;
  padding: 30px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: #fff;
  box-shadow: 0 20px 40px rgba(10,37,73,.22);
}
.app-banner .icon-row { display: flex; align-items: center; gap: 16px; }
.app-banner .sport-icon { width: 46px; height: 46px; flex-shrink: 0; }
.app-banner h3 { font-size: 20px; margin: 0 0 4px; }
.app-banner p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; }
.app-banner .btn-accent { background: #fff; color: var(--navy-dark); box-shadow: none; font-size: 15px; padding: 14px 30px; }
.app-banner .btn-accent:hover { background: var(--wave-white); }
@media (max-width: 760px) { .app-banner { margin-top: -36px; padding: 24px; text-align: center; justify-content: center; } }

/* Decorative water-sport line icons (used since real photography isn't wired up yet) */
.sport-icon { stroke: currentColor; fill: none; stroke-width: 1.6; }
.hero-icons { position: absolute; left: 24px; bottom: 18px; display: flex; gap: 22px; opacity: .5; z-index: 1; }
.hero-icons svg { width: 54px; height: 54px; color: var(--blue-light); }
@media (max-width: 760px) { .hero-icons { display: none; } }

/* ===== Section ===== */
.section { padding: 52px 0; }
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section-title h2 { font-size: 23px; margin: 0; border-right: 4px solid var(--accent); padding-right: 12px; }
.section-title a { color: var(--blue); font-size: 14px; font-weight: 700; }

.section-alt { background: linear-gradient(180deg, #eef6fb, var(--bg)); }

/* ===== Cards grid ===== */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(19,58,107,.14); }

/* Photo placeholders: since real action photos aren't wired up yet, these use varied
   "pool lane" gradient + diagonal stripe treatments so the layout reads energetic
   instead of flat corporate gray boxes. Swap for real <img> once photos are ready. */
.card-image {
  aspect-ratio: 4/3;
  position: relative;
  display: flex;
  align-items: flex-end;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  overflow: hidden;
}
.card-image span { position: relative; z-index: 1; padding: 10px 12px; font-weight: 700; }
.card-image::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,37,73,.55), transparent 55%);
  z-index: 0;
}
.photo-1 { background: linear-gradient(135deg, #1483c4, #0a2549), repeating-linear-gradient(120deg, rgba(255,255,255,.12) 0 8px, transparent 8px 26px); background-blend-mode: overlay; }
.photo-2 { background: linear-gradient(135deg, #5fc1e8, #133a6b), repeating-linear-gradient(60deg, rgba(255,255,255,.1) 0 10px, transparent 10px 30px); background-blend-mode: overlay; }
.photo-3 { background: linear-gradient(135deg, #ff7a30, #133a6b 70%); }
.photo-4 { background: linear-gradient(135deg, #0a2549, #1483c4, #5fc1e8); }

.card-body { padding: 16px; }
.card-tag {
  display: inline-block;
  background: rgba(20,131,196,.12);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.card-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; line-height: 1.6; }
.card-meta { font-size: 13px; color: var(--muted); }

/* ===== Athlete profile - magazine style ===== */
.athlete-hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: start;
}
/* fun-facts sits in the photo column, right under the photo */
.ah-funfacts { margin-top: 18px; }
.ah-funfacts .subhead { margin-top: 0; padding-top: 0; border-top: none; }
@media (max-width: 800px) { .athlete-hero { grid-template-columns: 1fr; } }

.athlete-photo {
  aspect-ratio: 3/4;
  border-radius: 18px;
  display: flex;
  align-items: flex-end;
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
}
.athlete-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,37,73,.6), transparent 50%);
}
.athlete-photo span { position: relative; z-index: 1; padding: 14px; font-weight: 700; }

.athlete-name { font-size: 30px; margin: 0 0 6px; }
.athlete-sub { color: var(--muted); margin-bottom: 20px; }
.bio-text { line-height: 2; font-size: 16px; }

.stat-row { display: flex; gap: 24px; margin: 20px 0; flex-wrap: wrap; }
.stat-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 120px;
}
.stat-box .label { font-size: 12px; color: var(--muted); }
.stat-box .value { font-size: 18px; font-weight: 800; color: var(--navy); }

/* ===== Records tables ===== */
.records-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.records-table th, .records-table td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--border); font-size: 14px; }
.records-table th { background: var(--navy); color: #fff; font-weight: 700; }
.records-table tr:last-child td { border-bottom: none; }

.tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ===== Footer ===== */
.site-footer { background: var(--navy-dark); color: #aac3d8; padding: 36px 0; margin-top: 40px; font-size: 14px; }
.site-footer a { color: #fff; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  transition: background .15s;
}
.footer-social a:hover { background: var(--accent); }
.footer-social .social-icon { width: 19px; height: 19px; }

/* ===== Admin ===== */
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 220px; background: var(--navy-dark); color: #fff; padding: 24px 16px; }
.admin-sidebar a { display: block; padding: 10px 12px; border-radius: 8px; color: #cdd6ea; margin-bottom: 4px; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: var(--blue); color: #fff; }
.admin-main { flex: 1; padding: 28px; background: var(--bg); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px;
}
.form-group textarea { min-height: 220px; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
.admin-table th, .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: right; }
.admin-table th { background: #eef1f8; }
.admin-table tr.rec-group td { background: #1f3a52; color: #fff; font-weight: 700; font-size: 14px; padding: 9px 14px; }
.login-box { max-width: 360px; margin: 80px auto; background: #fff; padding: 32px; border-radius: 14px; border: 1px solid var(--border); }
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: #fde8e8; color: #b42318; }
.alert-success { background: #e6f4ea; color: #1b6e34; }

/* ============================================================
   CINEMATIC HOMEPAGE  (dark, Sui-inspired split hero)
   ============================================================ */

.split-hero {
  position: relative;
  height: calc(100vh - 70px);
  min-height: 560px;
  display: flex;
  overflow: hidden;
  background: #04101f;
}

/* the two choice panes */
.split-pane {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  transition: flex .65s cubic-bezier(.16,1,.3,1);
}
.split-pane::before { /* cinematic depth gradient + vignette */
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .6s;
}
.pane-site::before {
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(20,131,196,.55), transparent 60%),
    linear-gradient(160deg, #0a2549 0%, #06182f 70%);
}
.pane-app::before {
  background:
    radial-gradient(120% 90% at 30% 30%, rgba(23,195,230,.5), transparent 60%),
    linear-gradient(160deg, #06233a 0%, #041422 70%);
}
.split-pane::after { /* darkening veil that lifts on hover */
  content: '';
  position: absolute; inset: 0;
  background: rgba(2,8,18,.35);
  z-index: 1;
  transition: background .5s;
}

/* hover-expand interaction */
.split-hero:hover .split-pane { flex: .82; }
.split-hero .split-pane:hover { flex: 1.45; }
.split-pane:hover::after { background: rgba(2,8,18,0); }
.split-pane:hover::before { transform: scale(1.08); }

.pane-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 30px;
  max-width: 460px;
  transform: translateY(8px);
  transition: transform .5s;
}
.split-pane:hover .pane-inner { transform: translateY(0); }

.pane-kicker {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--blue-light);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pane-inner h2 {
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  margin: 0 0 14px;
  line-height: 1.25;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.pane-inner p { color: rgba(225,238,248,.78); font-size: 16px; line-height: 1.9; margin: 0 0 26px; }
.pane-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-dark);
  transition: transform .2s, box-shadow .2s;
}
.pane-app .pane-cta { background: var(--accent); color: #04101f; }
.split-pane:hover .pane-cta { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }

.pane-icon { width: 56px; height: 56px; color: var(--blue-light); margin: 0 auto 18px; opacity: .9; }
.pane-app .pane-icon { color: var(--accent); }

/* center brand badge sitting on the divider */
.split-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 5;
  text-align: center;
  pointer-events: none;
}
.split-center .divider-line {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 1px; height: 70vh;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.25), transparent);
}
.split-center .brand-badge {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(4,16,31,.7);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.split-center .brand-badge img { width: 60px; height: 60px; object-fit: contain; }
.split-center .tagline {
  margin-top: 16px;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
}

/* scroll cue */
.scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  text-align: center;
  pointer-events: none;
}
.scroll-cue svg { width: 22px; height: 22px; display: block; margin: 6px auto 0; animation: bob 1.6s ease-in-out infinite; }

/* floating bubbles */
.bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(95,193,232,.08)); filter: blur(.5px); z-index: 1; pointer-events: none; animation: floatUp linear infinite; }

@keyframes floatUp {
  0%   { transform: translateY(40px) scale(.8); opacity: 0; }
  20%  { opacity: .7; }
  100% { transform: translateY(-120px) scale(1.1); opacity: 0; }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* stack on mobile */
@media (max-width: 760px) {
  .split-hero { flex-direction: column; height: auto; }
  .split-pane { min-height: 52vh; flex: none; }
  .split-hero:hover .split-pane, .split-hero .split-pane:hover { flex: none; }
  .split-center .divider-line { width: 70vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }
}

/* ===== Dark content area on homepage ===== */
.home-dark {
  background:
    radial-gradient(80% 50% at 80% 0%, rgba(20,131,196,.15), transparent 60%),
    linear-gradient(180deg, #04101f 0%, #061d36 100%);
  color: #eaf2fa;
}
.home-dark .section-title h2 { color: #fff; }
.home-dark .section-title a { color: var(--blue-light); }
.home-dark .card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(6px);
}
.home-dark .card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.45); border-color: rgba(95,193,232,.4); }
.home-dark .card-title { color: #fff; }
.home-dark .card-meta { color: #9fb6cb; }

/* app banner sits inside the dark area now */
.home-dark .app-banner { margin-top: 0; }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   GLOBAL DARK CINEMATIC THEME  (public pages only — body.theme-dark)
   ============================================================ */
body.theme-dark {
  background:
    radial-gradient(90% 60% at 85% -5%, rgba(20,131,196,.16), transparent 60%),
    linear-gradient(180deg, #04101f 0%, #061d36 60%, #04101f 100%);
  background-attachment: fixed;
  color: #e8f1fa;
  font-weight: 400;
}
.theme-dark h1, .theme-dark h2, .theme-dark h3 { letter-spacing: -.2px; }
.theme-dark .section-alt { background: rgba(255,255,255,.02); }

/* real-photo cover boxes */
.has-photo { background-size: cover !important; background-position: center !important; }

/* cards as glass on dark */
.theme-dark .card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(7px);
}
.theme-dark .card:hover { box-shadow: 0 18px 42px rgba(0,0,0,.5); border-color: rgba(95,193,232,.45); }
.theme-dark .card-title { color: #fff; }
.theme-dark .card-meta { color: #9fb6cb; }
.theme-dark .card-tag { background: rgba(95,193,232,.16); color: var(--blue-light); }

/* section titles */
.theme-dark .section-title h2 { color: #fff; }
.theme-dark .section-title a { color: var(--blue-light); }

/* decorative water-sport icon beside section titles */
.section-title { gap: 12px; }
.section-title .title-wrap { display: flex; align-items: center; gap: 12px; }
.section-title .title-icon { width: 30px; height: 30px; color: var(--blue-light); flex-shrink: 0; }

/* athlete profile on dark */
.theme-dark .athlete-name { color: #fff; }
.theme-dark .bio-text { color: #d6e4f0; }
.theme-dark .stat-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.theme-dark .stat-box .label { color: #9fb6cb; }
.theme-dark .stat-box .value { color: #fff; }

/* records tables on dark */
.theme-dark .records-table { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.theme-dark .records-table th { background: rgba(20,131,196,.85); }
.theme-dark .records-table td { border-bottom-color: rgba(255,255,255,.08); color: #dce8f2; }
.theme-dark .tab-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #cfe0ee; }
.theme-dark .tab-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* generic content headings */
.theme-dark h1 { color: #fff; }

/* page header strip with icon, used on inner pages */
.page-head { padding: 46px 0 8px; }
.page-head .container { display: flex; align-items: center; gap: 14px; }
.page-head .title-icon { width: 40px; height: 40px; color: var(--blue-light); }
.page-head h1 { margin: 0; font-size: 30px; }

/* ===== refine split hero: stronger type, photo support ===== */
.pane-inner h2 { font-weight: 900; }
.split-pane.has-photo::before { opacity: .82; } /* let photo show through under gradient */

/* center brand uses the slogan lockup (image #3) */
.split-center .brand-badge {
  width: auto; height: auto;
  padding: 16px 22px;
  border-radius: 18px;
}
.split-center .brand-badge img { width: auto; height: 64px; }

/* ===== Athlete profile (structured) ===== */
.athlete-badges { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px; }
.badge { font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; background:rgba(95,193,232,.16); color:var(--blue-light); border:1px solid rgba(95,193,232,.25); }
.badge.role-coach { background:rgba(23,195,230,.16); color:var(--accent); border-color:rgba(23,195,230,.3); }

.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
@media (max-width:640px){ .info-grid{ grid-template-columns:repeat(2,1fr);} }
.info-cell { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:12px 14px; }
.info-cell .k { font-size:12px; color:#9fb6cb; margin-bottom:4px; }
.info-cell .v { font-size:15px; font-weight:700; color:#fff; }

.achievements-list { list-style:none; padding:0; margin:14px 0; }
.achievements-list li { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); line-height:1.7; }
.achievements-list li::before { content:'🏅'; flex-shrink:0; }

.mini-records { width:100%; border-collapse:collapse; margin-top:10px; }
.mini-records td { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.08); font-size:14px; }
.mini-records td:last-child { text-align:left; font-weight:800; color:var(--blue-light); font-variant-numeric:tabular-nums; }

.profile-social { display:inline-flex; align-items:center; gap:8px; margin-top:6px; color:var(--accent); font-weight:700; }
.profile-social svg { width:18px; height:18px; }

.subhead { font-size:18px; font-weight:800; margin:26px 0 8px; color:#fff; display:flex; align-items:center; gap:10px; }
.subhead::before { content:''; width:4px; height:18px; background:var(--accent); border-radius:2px; }
/* Athlete profile: clear separation between bio / achievements / fun-facts / records */
.athlete-hero .subhead { margin-top:40px; padding-top:30px; border-top:1px solid rgba(128,128,128,.22); }
.athlete-hero .bio-text, .athlete-hero .achievements-list, .athlete-hero .mini-records, .athlete-hero .fun-facts { margin-bottom:6px; }
.athlete-hero .fun-facts { margin-top:4px; }

.records-note { font-size:13px; color:#9fb6cb; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px 14px; margin-bottom:18px; line-height:1.8; }

/* ===== Comments ===== */
.comments { margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.comment { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.comment-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.comment-author { font-weight:800; color:#fff; }
.comment-date { font-size:12px; color:#9fb6cb; }
.comment-body { line-height:1.9; color:#d6e4f0; }
.comment-form { margin-top:24px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px 20px; }
.comment-form .form-group input, .comment-form .form-group textarea {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff;
}
.comment-form .form-group label { color:#cfe0ee; }

/* admin pending badge */
.nav-badge { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; background:var(--accent); color:#04101f; border-radius:999px; font-size:11px; font-weight:800; padding:0 5px; margin-right:6px; }

/* ===== Single full-bleed hero photo (overrides per-pane gradients) ===== */
.split-hero.has-bg { background-size: cover; background-position: center; }
.split-hero.has-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,16,31,.45) 0%, rgba(4,16,31,.65) 55%, rgba(4,16,31,.82) 100%);
  z-index: 1;
}
/* let the photo show through the panes; keep only a soft hover tint */
.split-hero.has-bg .split-pane::before { background: transparent; }
.split-hero.has-bg .split-pane::after { background: rgba(2,8,18,.12); }
.split-hero.has-bg .pane-site:hover::after { background: rgba(20,131,196,.22); }
.split-hero.has-bg .pane-app:hover::after { background: rgba(23,195,230,.20); }

/* refined, minimal hero overlay when a photo is present — text sits low, well-spaced, off the subject */
.split-hero.has-bg .split-pane { align-items: flex-end; }
.split-hero.has-bg .pane-inner { padding-bottom: 58px; transform: none; }
.split-hero.has-bg .pane-icon { display: none; }
.split-hero.has-bg .pane-kicker {
  background: transparent;
  border: none;
  letter-spacing: 5px;
  font-size: 10px;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 14px;
  padding: 0;
}
.split-hero.has-bg .pane-inner h2 {
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: .5px;
  margin: 0 0 14px;
  text-shadow: 0 2px 20px rgba(0,0,0,.7);
}
.split-hero.has-bg .pane-inner p {
  font-size: 12px;
  line-height: 2.3;
  max-width: 250px;
  margin: 0 auto 22px;
  color: rgba(225,238,248,.7);
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.split-hero.has-bg .pane-cta {
  padding: 9px 22px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,.9);
}
.split-hero.has-bg .pane-app .pane-cta { background: var(--accent); color: #04101f; }
.split-hero.has-bg .brand-badge { padding: 10px 16px; background: rgba(4,16,31,.4); }
.split-hero.has-bg .brand-badge img { height: 50px; }

/* ===== Athletes: horizontal circular scroller ===== */
.athlete-scroller {
  display: flex; gap: 26px;
  overflow-x: auto;
  padding: 8px 2px 20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.athlete-scroller::-webkit-scrollbar { height: 6px; }
.athlete-scroller::-webkit-scrollbar-track { background: transparent; }
.athlete-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.athlete-chip { flex: 0 0 auto; width: 132px; text-align: center; scroll-snap-align: start; }
.athlete-avatar {
  width: 124px; height: 124px; border-radius: 50%;
  margin: 0 auto 12px;
  border: 2px solid rgba(95,193,232,.35);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 30px;
  overflow: hidden;
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.athlete-chip:hover .athlete-avatar { transform: translateY(-5px) scale(1.05); border-color: var(--accent); box-shadow: 0 16px 34px rgba(23,195,230,.3); }
.athlete-chip .a-name { font-weight: 700; font-size: 14px; color: #fff; line-height: 1.5; }
.athlete-chip .a-spec { font-size: 12px; color: #9fb6cb; margin-top: 2px; }
.athlete-chip .a-badge { display:inline-block; margin-top:6px; font-size:10px; font-weight:700; color:var(--accent); border:1px solid rgba(23,195,230,.4); border-radius:999px; padding:2px 8px; }

/* ===== Articles: minimal editorial cards (title over image) ===== */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.article-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0,0,0,.45); border-color: rgba(95,193,232,.4); }
.article-card .ac-img { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; overflow: hidden; }
.article-card .ac-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.article-card .ac-cat { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: var(--blue-light); background: rgba(95,193,232,.16); border: 1px solid rgba(95,193,232,.3); padding: 3px 10px; border-radius: 999px; }
.article-card .ac-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.7; margin: 0; }
.article-card .ac-excerpt { font-size: 13px; color: #9fb6cb; line-height: 1.9; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .ac-date { font-size: 12px; color: #7e93a8; margin-top: 2px; }

/* athletes full-page wrap of circular chips */
.athlete-wrap { display:flex; flex-wrap:wrap; gap:28px 18px; justify-content:flex-start; }
.athlete-wrap .athlete-chip { width:140px; }

/* ===== Records preview (homepage teaser) ===== */
.records-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 880px) { .records-preview { grid-template-columns: repeat(2, 1fr); } }
.record-pill {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 11px 13px;
  transition: transform .15s, border-color .15s, background .15s;
}
.record-pill:hover { transform: translateY(-3px); border-color: rgba(95,193,232,.4); background: rgba(255,255,255,.06); }
.record-pill .rp-event { font-size: 12px; color: #9fb6cb; }
.record-pill .rp-time { font-size: 17px; font-weight: 800; color: var(--blue-light); font-variant-numeric: tabular-nums; }
.record-pill .rp-holder { font-size: 11px; color: #c2d2e2; }

/* ===== SEO assistant (admin) ===== */
.seo-box { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; margin-bottom:16px; max-width:760px; }
.seo-score { display:flex; align-items:center; gap:14px; border:2px solid; border-radius:10px; padding:12px 16px; margin-bottom:14px; }
.seo-score .seo-num { font-size:34px; font-weight:900; line-height:1; }
.seo-list { list-style:none; padding:0; margin:0; }
.seo-list li { padding:7px 0; border-bottom:1px solid #eef1f8; font-size:14px; }
.seo-list li.ok { color:#1b7e3c; }
.seo-list li.no { color:#c0392b; }

/* ===== Filters & search ===== */
.filter-search { display:flex; gap:10px; margin-bottom:18px; max-width:520px; }
.filter-search input { flex:1; padding:11px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:14px; }
.filter-search button { display:inline-flex; align-items:center; gap:6px; padding:11px 20px; border:none; border-radius:10px; background:var(--accent); color:#04101f; font-weight:800; cursor:pointer; font-size:14px; }
.filter-search button svg { width:16px; height:16px; }

.filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.filter-label { font-size:13px; color:#9fb6cb; margin-left:6px; }
.chip { font-size:13px; font-weight:700; padding:7px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#cfe0ee; transition:all .15s; }
.chip:hover { border-color:rgba(95,193,232,.5); }
.chip.on { background:var(--accent); border-color:var(--accent); color:#04101f; }
.filter-count { font-size:13px; color:#9fb6cb; margin:14px 0 20px; }
.filter-count a { color:var(--accent); }

/* big search page input */
.search-hero { display:flex; gap:12px; max-width:680px; }
.search-hero input { flex:1; padding:16px 20px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:17px; }
.search-hero button { padding:16px 30px; border:none; border-radius:14px; background:var(--accent); color:#04101f; font-weight:800; font-size:16px; cursor:pointer; }

/* ===== Header live search ===== */
.hsearch { position: relative; }
.hsearch-toggle {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer;
  transition: background .15s;
}
.hsearch-toggle:hover { background: var(--accent); }
.hsearch-toggle svg { width: 18px; height: 18px; }
.hsearch-panel {
  position: absolute; top: 46px; left: 0;
  width: 340px; max-width: 86vw;
  background: #0a1f3d;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0,0,0,.5);
  padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 60;
}
.hsearch.open .hsearch-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.hsearch-panel input {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: #fff; font-family: inherit; font-size: 14px;
}
.hsearch-results { margin-top: 8px; max-height: 60vh; overflow-y: auto; display: none; }
.hsearch-results.show { display: block; }
.hs-group { font-size: 11px; color: #7e93a8; padding: 10px 6px 4px; letter-spacing: .5px; }
.hs-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 9px; }
.hs-item:hover { background: rgba(255,255,255,.06); }
.hs-av {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center;
  background-color: rgba(95,193,232,.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
}
.hs-txt { display: flex; flex-direction: column; min-width: 0; }
.hs-txt b { color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-txt small { color: #9fb6cb; font-size: 12px; }
.hs-en { color: #7e93a8; font-weight: 400; font-size: 12px; }
.hs-empty { padding: 14px; text-align: center; color: #9fb6cb; font-size: 13px; }
@media (max-width: 900px) { .hsearch-panel { left: auto; right: 0; } }

/* athlete English name */
.a-en { font-size: 11px; color: #7e93a8; direction: ltr; margin-top: 1px; }
.athlete-name-en { font-size: 16px; color: #8aa1b6; direction: ltr; margin: -2px 0 10px; font-weight: 600; }

/* ===== About / Contact pages ===== */
.about-hero { position: relative; padding: 56px 0 30px; text-align: center; overflow: hidden;
  background: radial-gradient(70% 90% at 50% -10%, rgba(20,131,196,.22), transparent 60%); }
.about-hero h1 { font-size: 34px; margin: 6px 0 10px; }
.about-hero .about-intro { color: #9fb6cb; font-size: 16px; max-width: 620px; margin: 0 auto; line-height: 2; }
.about-hero-icons { display: flex; justify-content: center; gap: 18px; opacity: .5; margin-bottom: 6px; }
.about-hero-icons svg { width: 40px; height: 40px; color: var(--blue-light); stroke: currentColor; fill: none; stroke-width: 1.5; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: linear-gradient(135deg, rgba(20,131,196,.16), rgba(255,255,255,.04));
  border: 1px solid rgba(95,193,232,.22); border-radius: 16px; padding: 26px 18px; text-align: center; }
.stat-card .stat-num { font-size: 38px; font-weight: 900; color: var(--blue-light); line-height: 1; }
.stat-card .stat-label { color: #c2d2e2; font-size: 14px; margin-top: 8px; }

.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
@media (max-width: 760px) { .about-cols { grid-template-columns: 1fr; } }
.about-block { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 28px; }
.about-block h2 { font-size: 20px; margin: 0 0 12px; color: #fff; }
.about-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(95,193,232,.14);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.about-icon svg { width: 28px; height: 28px; color: var(--blue-light); stroke: currentColor; fill: none; stroke-width: 1.5; }

.about-cta { margin-top: 26px; background: linear-gradient(115deg, var(--navy-dark), var(--blue) 75%, var(--accent));
  border-radius: 20px; padding: 28px 34px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; color: #fff; }
.about-cta h3 { margin: 0 0 4px; font-size: 20px; }
.about-cta p { margin: 0; color: rgba(255,255,255,.85); font-size: 14px; }

/* contact info cards */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 18px 20px; }
.contact-card .cc-label { font-size: 12px; color: #7e93a8; margin-bottom: 6px; }
.contact-card .cc-value { font-size: 17px; font-weight: 700; color: #fff; }
a.cc-value:hover { color: var(--blue-light); }

/* FAQ accordion */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; overflow: hidden; }
.faq-q { width: 100%; text-align: right; background: none; border: none; cursor: pointer; color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-toggle { color: var(--blue-light); font-size: 22px; font-weight: 400; flex-shrink: 0; transition: transform .2s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; padding: 0 18px;
  color: #9fb6cb; font-size: 14px; line-height: 2; }
.faq-item.open .faq-a { max-height: 400px; padding: 0 18px 18px; }

/* ===== Imported article content hardening (keeps WP/Elementor content tidy) ===== */
.bio-text { overflow-wrap: break-word; word-wrap: break-word; }
.bio-text::after { content: ""; display: block; clear: both; } /* contain floated figures */
.bio-text figure.align-right { float: right; max-width: 46%; margin: 6px 0 12px 16px; }
.bio-text figure.align-left { float: left; max-width: 46%; margin: 6px 16px 12px 0; }
.bio-text figure.align-center { float: none; text-align: center; }
.bio-text figure.align-full img { width: 100%; }
.bio-text a { color: #2e86c1; text-decoration: underline; word-break: break-all; }
.fun-facts { background: rgba(46,134,193,.08); border-right: 3px solid var(--accent,#2e86c1); border-radius: 10px; padding: 14px 18px; margin-top: 6px; }
.bio-text img,
.bio-text video,
.bio-text iframe,
.bio-text table { max-width: 100% !important; height: auto; border-radius: 10px; }
.bio-text img { display: block; margin: 16px auto; }
.bio-text figure { margin: 16px 0; max-width: 100% !important; }
.bio-text table { width: 100% !important; border-collapse: collapse; display: block; overflow-x: auto; }
.bio-text td, .bio-text th { border: 1px solid rgba(255,255,255,.12); padding: 8px 10px; }
.bio-text h2, .bio-text h3, .bio-text h4 { color: #fff; margin: 22px 0 10px; line-height: 1.6; }
.bio-text p { margin: 0 0 14px; }
.bio-text a { color: var(--blue-light); text-decoration: underline; }
/* editor image alignment + captions */
.bio-text figure { clear: both; }
.bio-text figure.align-center { text-align: center; }
.bio-text figure.align-center img { margin-left: auto; margin-right: auto; }
.bio-text figure.align-right { float: right; max-width: 46%; margin: 6px 0 14px 18px; }
.bio-text figure.align-left { float: left; max-width: 46%; margin: 6px 18px 14px 0; }
.bio-text figure.align-full img { width: 100%; }
.bio-text figcaption { font-size: 13px; color: #8aa0b4; text-align: center; margin-top: 6px; }
@media (max-width: 640px) {
  .bio-text figure.align-right, .bio-text figure.align-left { float: none; max-width: 100%; margin: 16px 0; }
}
/* article lead / summary block under the featured image */
.article-lead { font-size: 18px; line-height: 1.95; font-weight: 600; color: #25425c; margin: 0 0 6px; }
.theme-dark .article-lead { color: #eaf2fa; }
.article-lead-sep { border: none; border-top: 2px solid var(--accent, #2e86c1); width: 54px; margin: 14px 0 26px; opacity: .8; }
.bio-text ul, .bio-text ol { padding-right: 22px; margin: 0 0 14px; }
.bio-text li { margin-bottom: 6px; }
.bio-text blockquote { border-right: 3px solid var(--accent); margin: 16px 0; padding: 6px 16px; color: #cfe0ee; background: rgba(255,255,255,.03); border-radius: 8px; }
.bio-text * { max-width: 100%; }

/* ===== Admin search bar ===== */
.admin-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-search { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.admin-search input { padding: 9px 13px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; min-width: 240px; }
.admin-search button { padding: 9px 18px; border: none; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
.admin-search .admin-clear { font-size: 13px; color: var(--muted); }
.admin-count { color: var(--muted); font-size: 13px; margin: 6px 0 14px; }

/* ===== Admin dashboard ===== */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 760px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
.dash-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; text-align: center; transition: transform .15s, box-shadow .15s; }
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(19,58,107,.1); }
.dash-card .dc-num { font-size: 32px; font-weight: 900; color: var(--blue); }
.dash-card .dc-label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.dash-card.alert-card { background: #fff7ed; border-color: #fed7aa; }
.dash-card.alert-card .dc-num { color: #d97706; }
.dash-quick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .dash-cols { grid-template-columns: 1fr; } }
.dash-panel { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.dash-panel h3 { margin: 0 0 12px; font-size: 16px; }
.dash-panel .admin-table a { color: var(--blue); }

/* inline image uploader in article editor */
.inline-uploader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 12px; background: #f0f5fa; border: 1px dashed var(--border); border-radius: 10px; }
.inline-uploader span { font-size: 13px; color: var(--muted); }
.inline-uploader button { padding: 8px 16px; border: none; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
#inlineUploadMsg { color: #1b7e3c; }

/* settings section headings */
.set-section { margin: 30px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--border); font-size: 17px; color: var(--navy); }

/* ===== Athletes filter toolbar ===== */
.page-head .container { align-items: center; }
.page-sub { color: #9fb6cb; font-size: 14px; margin: 4px 0 0; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 12px; margin-bottom: 8px;
}
.filter-bar .fb-search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 0 12px; }
.filter-bar .fb-search svg { width: 17px; height: 17px; color: #7e93a8; flex-shrink: 0; }
.filter-bar .fb-search input { flex: 1; background: none; border: none; color: #fff; font-family: inherit; font-size: 14px; padding: 11px 0; outline: none; }
.filter-bar select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff;
  border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 14px; cursor: pointer;
}
.filter-bar select option { background: #0a1f3d; color: #fff; }
.filter-bar .fb-go { background: var(--accent); color: #04101f; border: none; border-radius: 10px;
  padding: 11px 22px; font-weight: 800; cursor: pointer; font-family: inherit; }

/* ===== Mobile hamburger nav ===== */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-app-link { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .header-left { gap: 12px; }
  .main-nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: 0; right: -300px; width: 270px; height: 100vh;
    background: var(--navy-dark); padding: 70px 0 20px; z-index: 70;
    box-shadow: -8px 0 30px rgba(0,0,0,.4); transition: right .28s ease; overflow-y: auto;
  }
  .main-nav.open { right: 0; }
  .main-nav a { padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,.07); opacity: 1; }
  .main-nav a.active { border-bottom-color: rgba(255,255,255,.07); background: rgba(255,255,255,.05); }
  .nav-app-link { display: block; color: var(--accent) !important; font-weight: 800; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 65; opacity: 0; visibility: hidden; transition: .25s; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
  /* trim header right on mobile */
  .btn-app-header { display: none; }
  .social-links { display: none; }
}

/* ===== General mobile polish ===== */
@media (max-width: 760px) {
  .container { padding: 0 16px; }
  .hero h1, .about-hero h1, .page-head h1 { font-size: 23px; line-height: 1.6; }
  .section { padding: 34px 0; }
  .section-title h2 { font-size: 19px; }
  .athlete-wrap { gap: 20px 12px; justify-content: center; }
  .athlete-wrap .athlete-chip, .athlete-chip { width: 30%; min-width: 96px; }
  .athlete-avatar { width: 88px; height: 88px; }
  .app-banner { flex-direction: column; text-align: center; }
  .records-table th, .records-table td { padding: 9px 8px; font-size: 13px; }
  .filter-bar select, .filter-bar .fb-go { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .athlete-wrap .athlete-chip, .athlete-chip { width: 45%; }
}

/* ===== Featured article (articles page) ===== */
.article-featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px; overflow: hidden; margin-bottom: 26px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.article-featured:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(0,0,0,.45); border-color: rgba(95,193,232,.4); }
.article-featured .af-img { min-height: 280px; background-size: cover; background-position: center; }
.article-featured .af-body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.article-featured .af-tag { align-self: flex-start; font-size: 12px; font-weight: 800; color: #04101f; background: var(--accent); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.article-featured h2 { font-size: 24px; color: #fff; margin: 0 0 12px; line-height: 1.6; }
.article-featured p { color: #9fb6cb; font-size: 14px; line-height: 2; margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-featured .af-date { color: #7e93a8; font-size: 13px; }
@media (max-width: 760px) {
  .article-featured { grid-template-columns: 1fr; }
  .article-featured .af-img { min-height: 200px; }
  .article-featured .af-body { padding: 22px; }
  .article-featured h2 { font-size: 20px; }
}

.article-card.is-hidden { display: none; }

/* ===== Records filters ===== */
.rec-filters { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 22px; }
.rec-group { display: flex; flex-wrap: wrap; gap: 8px; }
.records-table .rec-time { font-weight: 800; color: var(--blue-light); font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* ===== Bottom full-width photo band ===== */
.photo-band { position: relative; min-height: 360px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 40px; }
.photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,16,31,.6), rgba(4,16,31,.78)); }
.photo-band .pb-inner { position: relative; z-index: 2; max-width: 640px; padding: 30px 20px; color: #fff; }
.photo-band h3 { font-size: 26px; margin: 0 0 12px; }
.photo-band p { color: #cfe0ee; line-height: 2; margin: 0 0 20px; }

/* ===== Admin bulk actions ===== */
.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #eef1f8; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.bulk-bar label { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.bulk-bar select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; }
.bulk-bar .bulk-apply { padding: 8px 18px; border: none; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
.admin-table td input[type=checkbox], .admin-table th input[type=checkbox] { width: 17px; height: 17px; }

/* record holder link */
.records-table a.rec-holder { color: var(--blue-light); }
.records-table a.rec-holder:hover { text-decoration: underline; }
#insertLinkBtn { padding: 8px 16px; border: none; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }

/* ===== Article actions: rating + share ===== */
.article-actions { margin: 30px 0; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 16px; }
.rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rating-label { color: #9fb6cb; font-size: 14px; }
.stars { display: inline-flex; flex-direction: row-reverse; }
.stars .star { background: none; border: none; cursor: pointer; font-size: 26px; line-height: 1; color: #3a4a5e; padding: 0 2px; transition: color .12s; }
.stars .star.on, .stars .star:hover { color: #f5b301; }
.rating-avg { color: #c2d2e2; font-size: 13px; }
.share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-label { color: #9fb6cb; font-size: 14px; }
.share-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s, transform .15s; }
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover { transform: translateY(-2px); }
.sb-telegram:hover { background: #29a9eb; color:#fff; border-color:#29a9eb; }
.sb-whatsapp:hover { background: #25d366; color:#fff; border-color:#25d366; }
.sb-x:hover { background: #000; color:#fff; border-color:#000; }
.sb-fb:hover { background: #1877f2; color:#fff; border-color:#1877f2; }
.sb-copy:hover { background: var(--accent); color:#04101f; border-color: var(--accent); }
.share-btn.copied { background: #1b9e4b; color:#fff; border-color:#1b9e4b; }

/* ===== Tags ===== */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.tag-chip { font-size: 13px; font-weight: 700; color: var(--blue-light); background: rgba(95,193,232,.12); border: 1px solid rgba(95,193,232,.28); padding: 5px 12px; border-radius: 999px; }
.tag-chip:hover { background: var(--accent); color: #04101f; border-color: var(--accent); }
.active-tag { color: var(--blue-light); font-weight: 700; margin: 0 0 8px; }

/* ===== Popular box ===== */
/* Articles page: main content + most-viewed sidebar */
.articles-layout.has-aside { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 28px; align-items: start; }
.articles-layout.has-aside .article-grid { grid-template-columns: repeat(2, 1fr); }
.articles-aside { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 18px; }
.articles-aside .popular-box { margin-bottom: 0; }

/* Latest-articles widget (thumbnail list, distinct from the numbered popular box) */
.latest-box { background: linear-gradient(160deg, rgba(46,134,193,.12), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 18px 18px; }
.latest-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.latest-list { display: flex; flex-direction: column; gap: 12px; }
.latest-item { display: flex; gap: 11px; align-items: center; text-decoration: none; }
.li-thumb { flex: 0 0 60px; width: 60px; height: 60px; border-radius: 11px; background-size: cover; background-position: center; }
.li-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.li-title { color: #eaf2fb; font-size: 14px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.latest-item:hover .li-title { color: #fff; text-decoration: underline; }
.li-date { color: #9fb6cb; font-size: 12px; }
@media (max-width: 980px) {
  .articles-layout.has-aside { grid-template-columns: 1fr; }
  .articles-aside { position: static; margin-top: 24px; }
}
@media (max-width: 560px) { .articles-layout.has-aside .article-grid { grid-template-columns: 1fr; } }

.popular-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 18px 20px; margin-bottom: 24px; }
.popular-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.popular-title svg { width: 22px; height: 22px; color: var(--accent); stroke: currentColor; fill: none; stroke-width: 1.6; }
.popular-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.popular-list li a { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.popular-list li:last-child a { border-bottom: none; }
.popular-list .pl-rank { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: rgba(95,193,232,.16); color: var(--blue-light); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.popular-list .pl-title { flex: 1; color: #eaf2fa; font-size: 14px; font-weight: 600; }
.popular-list li a:hover .pl-title { color: var(--blue-light); }
.popular-list .pl-views { color: #7e93a8; font-size: 12px; white-space: nowrap; }

/* ===== Theme toggle button ===== */
.theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.12); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.theme-toggle:hover { background: var(--accent); }
.theme-toggle .tt-icon-light { display: none; }
body.theme-light .theme-toggle .tt-icon-dark { display: none; }
body.theme-light .theme-toggle .tt-icon-light { display: inline; }

/* ===== LIGHT THEME (day mode) ===== */
body.theme-light { background: #f3f7fb; color: #182433; }
.theme-light .home-dark { background: #f3f7fb; color: #182433; }
.theme-light .section-title h2 { color: #14222f; }
.theme-light .page-head h1, .theme-light h1 { color: #12202e; }
.theme-light .page-sub { color: #5d7184; }

/* cards & glass surfaces -> white */
.theme-light .card,
.theme-light .home-dark .card,
.theme-light .article-card,
.theme-light .popular-box,
.theme-light .contact-card,
.theme-light .about-block,
.theme-light .stat-card,
.theme-light .faq-item,
.theme-light .filter-bar {
  background: #fff; border-color: #e1ebf2;
}
.theme-light .home-dark .card-title,
.theme-light .article-card .ac-title,
.theme-light .popular-list .pl-title,
.theme-light .about-block h2,
.theme-light .contact-card .cc-value,
.theme-light .popular-title,
.theme-light .faq-q { color: #16263a; }
.theme-light .home-dark .card-meta,
.theme-light .article-card .ac-excerpt,
.theme-light .article-card .ac-date,
.theme-light .a-spec,
.theme-light .faq-a,
.theme-light .records-note { color: #5d7184; }

/* athlete names */
.theme-light .a-name { color: #16263a; }

/* filter bar inputs */
.theme-light .filter-bar .fb-search,
.theme-light .filter-bar select { background: #f5f9fc; border-color: #e1ebf2; color: #16263a; }
.theme-light .filter-bar .fb-search input { color: #16263a; }
.theme-light .filter-bar .fb-search svg { color: #5d7184; }
.theme-light .filter-bar select option { background: #fff; color: #16263a; }
.theme-light .chip { background: #eef3f8; border-color: #e1ebf2; color: #2c3e50; }

/* records table */
.theme-light .records-table { background: #fff; border-color: #e1ebf2; }
.theme-light .records-table td { color: #182433; border-bottom-color: #eef1f6; }

/* bio / article body text */
.theme-light .bio-text { color: #25333f; }
.theme-light .bio-text h2, .theme-light .bio-text h3, .theme-light .bio-text h4 { color: #14222f; }

/* share / rating */
.theme-light .share-btn { background: #eef3f8; border-color: #e1ebf2; color: #16263a; }
.theme-light .article-actions { border-color: #e1ebf2; }
.theme-light .rating-label, .theme-light .share-label, .theme-light .rating-avg { color: #5d7184; }

/* stat card on about */
.theme-light .stat-card { background: linear-gradient(135deg, #e9f4fb, #fff); border-color: #cfe6f5; }
.theme-light .stat-card .stat-label { color: #45596c; }

/* tag chips */
.theme-light .tag-chip { background: #eaf4fb; color: #1483c4; border-color: #cfe6f5; }

/* ---- Light theme: complete coverage for profile / comments / sidebar widgets ---- */
.theme-light .subhead { color: #14222f; }
.theme-light .athlete-name { color: #12202e; }
.theme-light .athlete-name-en { color: #5d7184; }
.theme-light .info-cell { background: #f5f9fc; border-color: #e1ebf2; }
.theme-light .info-cell .k { color: #5d7184; }
.theme-light .info-cell .v { color: #16263a; }
.theme-light .achievements-list li { border-bottom-color: #eef1f6; color: #25333f; }
.theme-light .mini-records { background: #fff; }
.theme-light .mini-records td { color: #182433; border-bottom-color: #eef1f6; }
.theme-light .mini-records td:last-child { color: var(--blue); }
.theme-light .fun-facts { background: #eef6fc; }
.theme-light .comments { border-top-color: #e1ebf2; }
.theme-light .comment { background: #fff; border-color: #e1ebf2; }
.theme-light .comment-author { color: #16263a; }
.theme-light .comment-date { color: #5d7184; }
.theme-light .comment-body { color: #25333f; }
.theme-light .latest-box { background: linear-gradient(160deg, #eaf4fb, #fff); border-color: #cfe6f5; }
.theme-light .latest-title { color: #14222f; }
.theme-light .li-title { color: #16263a; }
.theme-light .li-date { color: #5d7184; }
.theme-light .popular-list .pl-views { color: #7e93a8; }
.theme-light .section-alt { background: #eef4f9; }
/* public form fields (comment / rating) */
.theme-light .form-group label { color: #45596c; }
.theme-light .form-group input, .theme-light .form-group textarea { background: #f5f9fc; border-color: #e1ebf2; color: #16263a; }

/* ===== Mobile: story-style horizontal scroll on homepage ===== */
@media (max-width: 760px) {
  /* homepage articles -> horizontal story scroll */
  .home-dark .article-grid {
    display: flex; overflow-x: auto; gap: 14px; padding-bottom: 12px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .home-dark .article-grid .article-card { flex: 0 0 76%; scroll-snap-align: start; }
  .home-dark .article-grid::-webkit-scrollbar { height: 5px; }
  .home-dark .article-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

  /* homepage records preview -> horizontal scroll */
  .records-preview {
    display: flex; overflow-x: auto; gap: 12px; padding-bottom: 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .records-preview .record-pill { flex: 0 0 58%; scroll-snap-align: start; }
  .records-preview::-webkit-scrollbar { height: 5px; }
  .records-preview::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

  /* tighten homepage spacing */
  .split-hero { min-height: 460px; }
  .section-title h2 { font-size: 18px; }
  .athlete-scroller { gap: 16px; }
  .athlete-chip { width: 104px; }
  .athlete-avatar { width: 92px; height: 92px; }
  .share-label { width: 100%; margin-bottom: 4px; }
}

/* ===== Photo backgrounds on about-hero & app-banner ===== */
.about-hero.has-photo-bg { background-size: cover; background-position: center; position: relative; min-height: 320px; display: flex; align-items: center; }
.about-hero.has-photo-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,16,31,.42), rgba(4,16,31,.66)); z-index: 0; }
.about-hero.has-photo-bg .container { position: relative; z-index: 1; }
.about-hero.has-photo-bg h1, .about-hero.has-photo-bg .about-intro { color: #fff; }

.app-banner.has-photo-bg { position: relative; background-size: cover; background-position: center; overflow: hidden; }
.app-banner.has-photo-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(10,37,73,.9), rgba(20,131,196,.78) 70%, rgba(23,195,230,.7)); z-index: 0; }
.app-banner.has-photo-bg > * { position: relative; z-index: 1; }

/* ===== Contact form (public) ===== */
.contact-form-box { max-width: 680px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 22px; }
.contact-form-box .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .contact-form-box .cf-row { grid-template-columns: 1fr; } }
.contact-form-box label { color: #cfe0ee; font-size: 14px; }
.contact-form-box input, .contact-form-box textarea { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; }
body.theme-light .contact-form-box { background: #fff; border-color: #e1ebf2; }
body.theme-light .contact-form-box label { color: #45596c; }
body.theme-light .contact-form-box input, body.theme-light .contact-form-box textarea { background: #f5f9fc; border-color: #e1ebf2; color: #16263a; }

/* ===== Admin messages ===== */
.msg-list { display: flex; flex-direction: column; gap: 12px; }
.msg-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.msg-card.is-new { border-color: #fed7aa; background: #fffaf3; }
.msg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.msg-badge { background: var(--accent); color: #04101f; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-right: 6px; }
.msg-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.msg-actions { font-size: 13px; }
.msg-subject { font-weight: 700; margin: 10px 0 4px; }
.msg-body { color: #2c3e50; line-height: 1.9; font-size: 14px; }