/* ── Date&Learn — design tokens ──
   One system for every page: light theme in the site's sky blue, dark theme in ink and gold
   (the same as the home page, assets/css/landing.css, and the sign-in pages, assets/css/auth.css).
   Roles, not colours: surfaces, lines, text, the brand accent (sky / gold), "info" blue for chat and
   language cues (blue in both themes), and soft tints for status colours. Old names below are aliases. */
:root {
  --page:        #f2f8fe;   /* page background */
  --surface:     #ffffff;   /* cards, panels, menus */
  --surface-2:   #f6f9fd;   /* insets: inputs, quiet blocks inside cards */
  --surface-3:   #edf3fa;   /* chips, hover */
  --surface-4:   #e1e9f3;   /* pressed / stronger chips */
  --line:        rgba(13,60,110,.10);
  --line-soft:   rgba(13,60,110,.06);
  --line-strong: rgba(13,60,110,.18);
  --text:        #0b1f38;
  --text-2:      #26374e;
  --text-3:      #3d4d63;
  --muted:       #5b6b80;
  --faint:       #77879c;
  --accent:        #1a9ee5;
  --accent-strong: #0d7ec4;
  --accent-text:   #0d76bd;
  --accent-soft:   #eaf4fd;
  --accent-soft-2: #d9ecfb;
  --accent-line:   rgba(26,158,229,.32);
  --accent-rgb:    26 158 229;
  --on-accent:     #ffffff;
  --btn-bg:        linear-gradient(135deg,#36b2f3 0%,#1a9ee5 45%,#0d7ec4 100%);
  --btn-shadow:    inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -10px rgba(13,126,196,.75);
  --btn-shadow-hover: inset 0 1px 0 rgba(255,255,255,.3),0 14px 28px -10px rgba(13,126,196,.85);
  --focus-ring:    0 0 0 4px rgba(26,158,229,.18);
  --info:        #0369a1;   /* chat and language cues stay blue in both themes */
  --info-solid:  #1a9ee5;
  --info-soft:   #e7f4fd;
  --info-line:   #bae6fd;
  --chat-mine-bg:   #e0f2fe;
  --chat-mine-line: #bae6fd;
  --chat-mine-meta: #0284c7;
  --danger:      #dc2626;  --danger-solid:#ef4444;  --danger-soft:#fef2f2;  --danger-line:#fecaca;
  --success:     #15803d;  --success-solid:#22c55e; --success-soft:#f0fdf4; --success-line:#bbf7d0;
  --warn:        #b45309;  --warn-solid:#f59e0b;    --warn-soft:#fffbeb;    --warn-line:#fde68a;
  --violet:      #6d28d9;  --violet-soft:#f5f3ff;   --violet-line:#ddd6fe;
  --pink:        #be185d;  --pink-soft:#fdf2f8;     --pink-line:#fbcfe8;
  --elev-1: 0 1px 2px rgba(13,60,110,.05),0 8px 24px -12px rgba(13,60,110,.16);
  --elev-2: 0 2px 6px rgba(13,60,110,.05),0 18px 40px -18px rgba(13,60,110,.24);
  --elev-3: 0 24px 60px -20px rgba(8,50,100,.38);
  --overlay:  rgba(11,31,56,.45);
  --nav-bg:   rgba(255,255,255,.88);
  --nav-line: rgba(13,60,110,.07);
  --glow-a:   rgba(122,190,240,.28);   /* soft light at the top of the page */
  --glow-b:   rgba(255,214,90,.10);
  --placeholder-gradient: linear-gradient(135deg,#e7f1fb,#c9e2f7);

  /* Old names (kept so every existing var() follows the theme) */
  --blue:    var(--accent);
  --blue2:   var(--accent-strong);
  --blue-lt: #5bbff7;
  --yellow:  #FFD140;
  --white:   #ffffff;
  --bg:      var(--page);
  --bg2:     var(--surface-3);
  --bg3:     var(--surface-4);
  --card:    var(--surface);
  --border:  var(--line);
  --input-bg:     var(--surface-2);
  --input-border: var(--line-strong);
  --primary:      var(--accent);
  --bg-card:      var(--surface);
  --bg-hover:     var(--surface-3);
  --border-color: var(--line);
  --text-main:    var(--text);
  --text-color:   var(--text);
  --text-muted:   var(--muted);
  --chat-bg:      var(--page);
  --chat-bubble-theirs:        var(--surface);
  --chat-bubble-theirs-border: var(--line);
  --shadow:      rgba(13,60,110,.08);
  --shadow-lg:   rgba(13,60,110,.14);
  --shadow-card: rgba(13,60,110,.08);
  --auth-bg:     linear-gradient(135deg,#e8f4fe,#f0f9ff);
  --radius:  16px;
  --nav-h:   64px;   /* the logo is 42px tall: 11px of air above and below */
  color-scheme: light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--page)}
body{background:var(--page);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Soft light at the top of every page (the home page draws its own backgrounds) */
body:not(.lp-page)::before{content:"";position:fixed;left:0;right:0;top:0;height:min(72vh,660px);z-index:-1;pointer-events:none;background:radial-gradient(58% 70% at 88% -12%,var(--glow-a),transparent 70%),radial-gradient(42% 52% at 2% -8%,var(--glow-b),transparent 70%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgb(var(--accent-rgb) / .24)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=range],input[type=checkbox],input[type=radio],progress{accent-color:var(--accent)}
/* Form fields without colours of their own follow the theme (zero specificity: any page rule wins) */
:where(textarea,select,input:not([type=checkbox],[type=radio],[type=range],[type=submit],[type=button],[type=reset],[type=file],[type=color],[type=image],[type=hidden])){background-color:var(--surface);color:var(--text)}
:where(textarea,input)::placeholder{color:var(--faint)}

/* ── NAV: frosted bar, the current section is highlighted ── */
.ahh-nav{position:fixed;top:0;left:0;width:100%;z-index:1000;height:var(--nav-h);background:var(--nav-bg);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid var(--nav-line);transition:box-shadow .3s ease,background-color .3s ease}
.ahh-nav.is-scrolled{box-shadow:var(--elev-1)}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:24px}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{position:relative;color:var(--muted);font-size:.875rem;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;transition:color .2s,background-color .2s}
.nav-link:hover{color:var(--text);background:var(--surface-3)}
.nav-link.is-active{color:var(--accent-text);background:var(--accent-soft)}
.nav-link.is-admin{color:var(--accent-text)}
.nav-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:.66rem;font-weight:800;line-height:18px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;margin-left:2px;text-align:center}
.nav-cta{display:flex;align-items:center;gap:8px}
.btn-primary-sm{display:inline-flex;align-items:center;background:var(--btn-bg);color:var(--on-accent);padding:9px 18px;border-radius:999px;font-size:.84rem;font-weight:700;box-shadow:var(--btn-shadow);transition:transform .2s,box-shadow .2s}
.btn-primary-sm:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.btn-ghost-sm{display:inline-flex;align-items:center;border:1px solid var(--line-strong);color:var(--text);padding:8px 16px;border-radius:999px;font-size:.84rem;font-weight:600;transition:background-color .2s,border-color .2s,color .2s}
.btn-ghost-sm:hover{background:var(--text);border-color:var(--text);color:var(--page)}
/* Sign In plain text link in nav (like InterPals "Войти") */
.nav-link-signin{color:var(--muted);font-size:.875rem;font-weight:600;transition:color .2s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav-link-signin:hover{color:var(--text)}
/* Globe language dropdown */
.nav-globe{position:relative;display:flex;align-items:center}
.nav-globe-btn{display:flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--muted);padding:8px 10px;border-radius:999px;transition:color .2s,background-color .2s}
.nav-globe-btn:hover{color:var(--text);background:var(--surface-3)}
.globe-dropdown{display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--elev-2);min-width:200px;max-height:380px;overflow-y:auto;z-index:2000;padding:6px}
.globe-dropdown.open{display:block}
.globe-lang-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:.875rem;color:var(--text);transition:background-color .15s;white-space:nowrap}
.globe-lang-item:hover{background:var(--surface-3)}
.globe-lang-item.active{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.btn-avatar{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.82rem;font-weight:600}
.avatar-dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto;border-radius:10px}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--text-3);border-radius:2px;transition:.3s}
.nav-drawer{display:none;flex-direction:column;padding:8px 20px 16px;border-top:1px solid var(--line);background:var(--surface);box-shadow:var(--elev-2)}
.drawer-link{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line-soft);color:var(--text-2);font-size:.92rem;font-weight:500}
.drawer-link:last-child{border:none}
.drawer-link.is-active{color:var(--accent-text);font-weight:700}
.drawer-link .badge{margin-left:auto;font-size:.72rem}
.drawer-link .nav-ico{width:19px;height:19px;color:var(--muted)}
.drawer-link.is-active .nav-ico{color:var(--accent-text)}
.drawer-cta{color:var(--accent-text);font-weight:700}
.drawer-cta .nav-ico{color:var(--accent-text)}
.drawer-danger,.drawer-danger .nav-ico{color:var(--danger)}
.nav-spacer{height:var(--nav-h)}
/* Short confirmation message (window.dlToast in assets/js/ahh.js) */
.dl-toast{position:fixed;left:50%;bottom:24px;z-index:3000;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;background:var(--text);color:var(--page);font-weight:600;font-size:.92rem;line-height:1.4;box-shadow:var(--elev-3);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .2s,transform .2s}
.dl-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 26px;border-radius:999px;font-weight:700;font-size:.92rem;font-family:inherit;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s,background-color .2s,color .2s,border-color .2s}
.btn-accent{background:var(--btn-bg);color:var(--on-accent);box-shadow:var(--btn-shadow)}
.btn-accent:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.btn-outline{background:var(--surface);border:1.5px solid var(--accent-line);color:var(--accent-text)}
.btn-outline:hover{background:var(--accent-soft);border-color:var(--accent)}
.btn-teal{background:#22c55e;color:#fff;font-weight:800}
.btn-teal:hover{filter:brightness(1.1)}
.btn-yellow{background:var(--yellow);color:#1a2035;font-weight:800}
.btn-yellow:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* Save buttons in the profile (enabled = brand gradient, disabled = quiet) */
.pf-save-btn{border:none;padding:10px 16px;border-radius:12px;font:600 .9rem/1.2 inherit;font-family:inherit;background:var(--btn-bg);color:var(--on-accent);box-shadow:var(--btn-shadow);cursor:pointer;transition:transform .2s,box-shadow .2s}
.pf-save-btn.is-small{padding:8px 16px;border-radius:10px}
.pf-save-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.pf-save-btn:disabled{background:var(--surface-3);color:var(--faint);box-shadow:none;cursor:not-allowed}
/* Main action button of member pages (profile, search filters, report dialog) */
.btn-premium-write{background:var(--btn-bg);color:var(--on-accent)!important;border:none;border-radius:16px;font-family:inherit;font-weight:700;font-size:.95rem;padding:12px 28px;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;box-shadow:var(--btn-shadow);transition:transform .2s,box-shadow .2s;cursor:pointer}
.btn-premium-write:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.btn-premium-write.is-danger{background:var(--danger-solid);color:#fff!important;box-shadow:0 10px 22px -12px rgba(239,68,68,.7)}
/* ── HERO ── */
.hero{min-height:88vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:var(--btn-bg);
  padding:80px 24px}
.hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.hero-glow{display:none}
.hero-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;padding:6px 16px;border-radius:40px;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}
.hero-title{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-.02em;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.15;margin-bottom:16px;color:#fff}
.hero-title em{color:var(--yellow);font-style:normal}
.hero-desc{color:rgba(255,255,255,.88);font-size:1.05rem;margin-bottom:32px;max-width:480px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-btns .btn-accent{background:var(--surface);color:var(--blue)}
.hero-btns .btn-accent:hover{background:var(--yellow);color:#1a2035}
.hero-btns .btn-outline{border-color:var(--surface);color:#fff;background:transparent}
.hero-btns .btn-outline:hover{background:var(--surface);color:var(--blue)}
.hero-checks{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.hero-check{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.92);font-size:.92rem}
.hero-check::before{content:'✓';width:20px;height:20px;background:rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;text-align:center;line-height:20px}
.hero-stats{display:flex;gap:28px;margin-top:36px}
.stat-item .stat-num{font-size:1.8rem;font-weight:800;color:#fff}
.stat-item .stat-lbl{font-size:.68rem;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.1em}
.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── MEMBER CARDS (MODERN Tinder-like OVERLAY STYLE) ── */
.member-card {
  position: relative;
  background: var(--surface);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(var(--accent-rgb) / 0.08);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  aspect-ratio: 3/4;
}
.member-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgb(var(--accent-rgb) / 0.22);
}
.member-card a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,var(--accent-soft),var(--accent-soft-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
/* Circular Flag floating top right */
.card-flag {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3.5px solid var(--surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.card-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Modern clean overlay at the bottom */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;
  z-index: 3;
}
/* Language Badge Pill inside card */
.card-lang-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 2px;
}
.card-lang-badge svg.chat-icon {
  fill: currentColor;
  opacity: 0.9;
  flex-shrink: 0;
}
/* Name and Age Row */
.card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid var(--surface);
  box-shadow: 0 0 6px #22c55e;
  flex-shrink: 0;
}
.card-name-txt {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1.5px 4px rgba(0,0,0,0.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Location Row */
.card-location-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
.card-location-row svg.pin-icon {
  stroke: currentColor;
  flex-shrink: 0;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}

/* ── SECTIONS ── */
.section{padding:72px 24px}
.section-inner{max-width:1280px;margin:0 auto}
.section-alt{background:var(--surface)}
.section-tag{font-size:.72rem;font-weight:800;color:var(--blue);letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}
.section-title{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.2;font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:14px;color:var(--text)}
.section-sub{color:var(--muted);max-width:520px;margin-bottom:44px}
.members-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}

/* ── SEARCH BAR ── */
.search-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:36px;box-shadow:0 2px 12px rgb(var(--accent-rgb) / .06)}
.search-bar select,.search-bar input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;font-size:.875rem;min-width:120px;outline:none;transition:border-color .2s}
.search-bar select:focus,.search-bar input:focus{border-color:var(--blue)}

/* ── FEATURES ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;transition:box-shadow .2s,transform .2s;box-shadow:0 2px 8px rgb(var(--accent-rgb) / .06)}
.feature-card:hover{box-shadow:0 8px 30px rgb(var(--accent-rgb) / .15);transform:translateY(-3px)}
.feature-icon{font-size:2rem;margin-bottom:14px}
.feature-card h3{font-size:1rem;font-weight:700;margin-bottom:8px;color:var(--text)}
.feature-card p{color:var(--muted);font-size:.875rem}

/* ── LANGUAGE GRID ── */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.lang-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:600;color:var(--text);transition:all .2s;box-shadow:0 1px 4px rgb(var(--accent-rgb) / .06)}
.lang-card:hover{border-color:var(--blue);background:rgb(var(--accent-rgb) / .06);color:var(--blue);transform:translateY(-2px)}
.lang-flag{font-size:1.4rem;display:inline-flex;flex-shrink:0}
.lang-flag img,.flag-ico{display:inline-block;border-radius:50%;box-shadow:0 1px 3px rgba(15,23,42,.18);vertical-align:middle}

/* ── CTA ── */
.cta-section{background:var(--btn-bg);border-radius:24px;padding:64px 40px;text-align:center;color:var(--on-accent)}
.cta-title{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.2;font-size:clamp(1.8rem,3.5vw,2.8rem);margin-bottom:16px;color:#fff}
.cta-title em{color:var(--yellow);font-style:normal}
.cta-sub{color:rgba(255,255,255,.85);margin-bottom:32px;font-size:1.05rem}
.cta-section .btn-accent{background:var(--surface);color:var(--blue)}
.cta-section .btn-accent:hover{background:var(--yellow);color:#1a2035}

/* ── PROFILE ── */
.profile-layout{max-width:980px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:280px 1fr;gap:28px}
.profile-sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 12px rgb(var(--accent-rgb) / .07)}
.profile-avatar{width:100%;aspect-ratio:1;object-fit:cover}
.profile-sidebar-body{padding:20px}
.profile-name{font-size:1.35rem;font-weight:800;color:var(--text);margin-bottom:4px}
.profile-location{color:var(--muted);font-size:.875rem;margin-bottom:16px}
.profile-action-btns{display:flex;flex-direction:column;gap:10px}
.profile-main-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 2px 12px rgb(var(--accent-rgb) / .07)}
.profile-section-title{font-weight:700;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin:22px 0 12px;border-bottom:2px solid var(--line);padding-bottom:8px}
.profile-about{line-height:1.8;color:var(--text)}
.detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:.875rem}
.detail-row:last-child{border:none}
.detail-label{color:var(--muted)}
.detail-val{font-weight:600;color:var(--text)}

/* ── MESSAGES ── */
.msgs-layout{max-width:960px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:280px 1fr;gap:0;height:calc(100vh - var(--nav-h) - 40px);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgb(var(--accent-rgb) / .08)}
.msgs-list{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto}
.msg-thread{display:flex;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .2s}
.msg-thread:hover,.msg-thread.active{background:var(--accent-soft)}
.thread-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.thread-name{font-weight:600;font-size:.875rem;color:var(--text)}
.thread-preview{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.msg-window{display:flex;flex-direction:column;background:var(--surface-2)}
.msg-window-header{padding:14px 20px;border-bottom:1px solid var(--border);font-weight:700;background:var(--surface);color:var(--text)}
.msg-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:65%;padding:10px 16px;border-radius:18px;font-size:.9rem;line-height:1.5}
.bubble.mine{background:var(--blue);color:var(--on-accent);align-self:flex-end;border-bottom-right-radius:4px}
.bubble.theirs{background:var(--surface);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;border:1px solid var(--border)}
.msg-compose{padding:12px;border-top:1px solid var(--border);display:flex;gap:10px;background:var(--surface)}
.msg-compose input{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:40px;outline:none;font-size:.9rem}
.msg-compose input:focus{border-color:var(--blue)}
.msg-compose button{background:var(--blue);color:var(--on-accent);border:none;padding:10px 22px;border-radius:40px;font-weight:700;cursor:pointer}

/* ── AUTH ── */
.auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-soft-2))}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:40px;width:100%;max-width:460px;box-shadow:0 8px 40px rgb(var(--accent-rgb) / .12)}
.auth-title{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.8rem;margin-bottom:8px;color:var(--text)}
.auth-sub{color:var(--muted);font-size:.875rem;margin-bottom:32px}
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.form-control{width:100%;background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);padding:12px 16px;border-radius:10px;font-size:.9rem;outline:none;transition:border-color .2s;font-family:inherit}
.form-control:focus{border-color:var(--blue);background:var(--surface)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-hint{font-size:.75rem;color:var(--muted);margin-top:5px}
.alert-box{padding:12px 16px;border-radius:10px;font-size:.85rem;margin-bottom:18px}
.alert-error{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger)}
.alert-success{background:var(--success-soft);border:1px solid var(--success-line);color:var(--success)}

/* ── FOOTER (deep ink in both themes, gold accents as on the home page) ── */
/* Light theme: deep navy with sky-blue headings (the site's blue); dark theme: ink with gold (below) */
.ahh-footer{background:#0b1f38;color:rgba(240,246,252,.8);padding:64px 24px 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{max-width:1232px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px}
.footer-brand-logo{margin-bottom:18px}
.footer-brand p{color:rgba(232,240,250,.66);font-size:.9rem;line-height:1.7;max-width:34ch}
.footer-socials{display:flex;gap:10px;margin-top:18px}
.social-icon{width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:background .2s;color:#fff}
.social-icon:hover{background:rgba(255,255,255,.16)}
.footer-col h4{font-size:.72rem;font-weight:700;color:#7cc8f8;text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px}
.footer-col a{display:block;color:rgba(232,240,250,.7);font-size:.9rem;margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:1232px;margin:0 auto;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.8rem;color:rgba(232,240,250,.5)}
.footer-safe{color:rgba(232,240,250,.62)}

/* ── UTILS ── */
.text-accent{color:var(--blue)}
.text-muted{color:var(--muted)}
.text-center{text-align:center}
.w-full{width:100%}
.flex{display:flex}
.items-center{align-items:center}
.gap-2{gap:8px}
.hidden{display:none!important}

/* ── RESPONSIVE ── */
/* Header stays on one line: first the username next to the avatar goes, then the link texts (icons remain; the text is kept for screen readers and in the tooltip) */
@media(max-width:1080px){
  .nav-profile-username,.nav-profile-chevron{display:none!important}
}
@media(max-width:940px){
  .nav-inner{gap:20px}
  .nav-links{gap:14px}
  .nav-link{font-size:1.1rem}
  .nav-ico{width:20px;height:20px}
  .nav-link-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-cards{display:none}
  .profile-layout{grid-template-columns:1fr}
  .msgs-layout{grid-template-columns:1fr}
  .msgs-list{display:none}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  :root{--nav-h:60px}
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:flex}
  .nav-drawer.open{display:flex}
  .footer-inner{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .cta-section{padding:40px 24px}
}

/* .form-input = alias for .form-control (admin pages) */
.form-input{width:100%;background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);padding:12px 16px;border-radius:10px;font-size:.9rem;outline:none;transition:border-color .2s;font-family:inherit}
.form-input:focus{border-color:var(--blue);background:var(--surface)}
textarea.form-input{resize:vertical}
/* btn-primary */
.btn-primary{background:var(--blue);color:var(--on-accent);border:none;padding:14px 32px;border-radius:14px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s;font-family:inherit;display:inline-block;text-align:center}
.btn-primary:hover{opacity:.88}

/* ── DARK THEME: ink and gold ── */
html[data-theme="dark"] {
  --page:        #080e1b;
  --surface:     #111a2c;
  --surface-2:   #0b1322;
  --surface-3:   #18233a;
  --surface-4:   #22304b;
  --line:        rgba(255,255,255,.08);
  --line-soft:   rgba(255,255,255,.05);
  --line-strong: rgba(255,255,255,.16);
  --text:        #eef2f8;
  --text-2:      #d5dbe6;
  --text-3:      #b9c3d3;
  --muted:       #a3b0c4;
  --faint:       #76849a;
  --accent:        #e8bd68;
  --accent-strong: #d9a246;
  --accent-text:   #ecc677;
  --accent-soft:   rgba(232,189,104,.12);
  --accent-soft-2: rgba(232,189,104,.2);
  --accent-line:   rgba(232,189,104,.34);
  --accent-rgb:    232 189 104;
  --on-accent:     #1d1406;
  --btn-bg:        linear-gradient(135deg,#f7dc98 0%,#e9b85c 55%,#d9a246 100%);
  --btn-shadow:    inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -10px rgba(232,182,90,.5);
  --btn-shadow-hover: inset 0 1px 0 rgba(255,255,255,.5),0 14px 32px -10px rgba(232,182,90,.62);
  --focus-ring:    0 0 0 4px rgba(232,189,104,.2);
  --info:        #7dd3fc;
  --info-solid:  #38bdf8;
  --info-soft:   rgba(14,165,233,.14);
  --info-line:   rgba(56,189,248,.32);
  --chat-mine-bg:   #123a5c;
  --chat-mine-line: #1c5682;
  --chat-mine-meta: #9fd4f7;
  --danger:      #fca5a5;  --danger-solid:#ef4444;  --danger-soft:rgba(239,68,68,.13);  --danger-line:rgba(239,68,68,.34);
  --success:     #86efac;  --success-solid:#22c55e; --success-soft:rgba(34,197,94,.13); --success-line:rgba(34,197,94,.32);
  --warn:        #fcd34d;  --warn-solid:#f59e0b;    --warn-soft:rgba(245,158,11,.13);   --warn-line:rgba(245,158,11,.32);
  --violet:      #c4b5fd;  --violet-soft:rgba(139,92,246,.16); --violet-line:rgba(139,92,246,.36);
  --pink:        #f9a8d4;  --pink-soft:rgba(236,72,153,.14);   --pink-line:rgba(236,72,153,.34);
  --elev-1: 0 1px 2px rgba(0,0,0,.3),0 10px 26px -14px rgba(0,0,0,.6);
  --elev-2: 0 2px 6px rgba(0,0,0,.3),0 20px 44px -18px rgba(0,0,0,.72);
  --elev-3: 0 28px 70px -20px rgba(0,0,0,.78);
  --overlay:  rgba(2,6,14,.62);
  --nav-bg:   rgba(9,14,27,.86);
  --nav-line: rgba(255,255,255,.06);
  --glow-a:   rgba(54,140,230,.16);
  --glow-b:   rgba(232,189,104,.07);
  --placeholder-gradient: linear-gradient(135deg,#18233a,#22304b);
  --blue-lt: #f3d48e;
  --shadow:      rgba(0,0,0,.3);
  --shadow-lg:   rgba(0,0,0,.45);
  --shadow-card: rgba(0,0,0,.3);
  --auth-bg:     linear-gradient(135deg,#080e1b,#111a2c);
  color-scheme: dark;
}

/* Tinder Member Cards */
html[data-theme="dark"] .member-card {
  background: var(--card);
  box-shadow: 0 10px 30px var(--shadow-card);
}
html[data-theme="dark"] .member-card:hover {
  box-shadow: 0 18px 45px rgb(var(--accent-rgb) / 0.22);
}
html[data-theme="dark"] .card-img-placeholder {
  background: var(--placeholder-gradient);
}
html[data-theme="dark"] .card-flag {
  border-color: var(--card);
}
html[data-theme="dark"] .card-online-dot {
  border-color: var(--card);
}

html[data-theme="dark"] .feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
}
html[data-theme="dark"] .feature-card:hover {
  box-shadow: 0 8px 30px var(--shadow-lg);
}
html[data-theme="dark"] .feature-card h3 {
  color: var(--text);
}

html[data-theme="dark"] .lang-grid .lang-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px var(--shadow);
}
html[data-theme="dark"] .lang-grid .lang-card:hover {
  border-color: var(--blue);
  background: rgb(var(--accent-rgb) / .12);
  color: var(--blue);
}

html[data-theme="dark"] .profile-sidebar-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow-card);
}

html[data-theme="dark"] .profile-main-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow-card);
}

html[data-theme="dark"] .profile-section-title {
  border-bottom: 2px solid var(--border);
  color: var(--muted);
}

html[data-theme="dark"] .detail-row {
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .detail-val {
  color: var(--text);
}

html[data-theme="dark"] .msgs-layout {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 20px var(--shadow-card);
}

html[data-theme="dark"] .msgs-list {
  background: var(--card);
  border-right: 1px solid var(--border);
}

html[data-theme="dark"] .msg-thread {
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .msg-thread:hover,
html[data-theme="dark"] .msg-thread.active {
  background: var(--bg2);
}

html[data-theme="dark"] .msg-window {
  background: var(--chat-bg);
}

html[data-theme="dark"] .msg-window-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

html[data-theme="dark"] .bubble.theirs {
  background: var(--chat-bubble-theirs);
  color: var(--text);
  border: 1px solid var(--chat-bubble-theirs-border);
}
html[data-theme="dark"] .bubble.mine {
  background: var(--blue);
  color: var(--on-accent);
}

html[data-theme="dark"] .msg-compose {
  background: var(--card);
  border-top: 1px solid var(--border);
}

html[data-theme="dark"] .msg-compose input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
}

html[data-theme="dark"] .auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 40px var(--shadow-lg);
}

html[data-theme="dark"] .auth-wrap {
  background: var(--auth-bg);
}

html[data-theme="dark"] .form-control {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text);
}

html[data-theme="dark"] .form-input {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text);
}

html[data-theme="dark"] .search-bar {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow);
}

html[data-theme="dark"] .search-bar select,
html[data-theme="dark"] .search-bar input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
}

html[data-theme="dark"] .ip-login-card {
  background: var(--card);
  box-shadow: 0 20px 60px var(--shadow-lg);
}

html[data-theme="dark"] .ip-field input {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  color: var(--text);
}

html[data-theme="dark"] .ip-btn-google {
  background: var(--card);
  border: 1.5px solid var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .ip-btn-google:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px var(--shadow);
}

html[data-theme="dark"] .ip-divider::before,
html[data-theme="dark"] .ip-divider::after {
  background: var(--input-border);
}

html[data-theme="dark"] .ahh-features {
  background: var(--bg);
}

html[data-theme="dark"] .ahh-badge {
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text);
}
html[data-theme="dark"] .ahh-badge:hover {
  background: var(--bg2);
  color: var(--blue);
}

html[data-theme="dark"] .pol-placeholder {
  background: var(--placeholder-gradient);
}

html[data-theme="dark"] .section-alt {
  background: var(--bg2);
}

html[data-theme="dark"] .section-title {
  color: var(--text);
}

/* ── InterPals Hero Overrides ── */
html[data-theme="dark"] .ip-hero {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}

html[data-theme="dark"] .ip-polaroid {
  background: var(--card);
  box-shadow: 0 8px 30px var(--shadow-lg);
}

html[data-theme="dark"] .ip-start-btn {
  background: var(--blue);
  color: var(--on-accent);
}
html[data-theme="dark"] .ip-start-btn:hover {
  background: var(--yellow);
  color: #121824;
}

html[data-theme="dark"] .ip-field input:focus {
  border-color: var(--blue);
  background: var(--card);
}

html[data-theme="dark"] .ip-btn-blue {
  background: var(--blue);
  color: var(--on-accent);
}

html[data-theme="dark"] .ip-divider {
  color: var(--muted);
}

html[data-theme="dark"] .ip-register-line {
  color: var(--muted);
}

html[data-theme="dark"] .ip-field-icon svg {
  stroke: var(--muted);
}

html[data-theme="dark"] .ip-check {
  color: var(--text);
}

/* CTA Landing Section Overrides */
html[data-theme="dark"] .cta-section {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  box-shadow: 0 10px 40px var(--shadow-lg);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .cta-section .btn-accent {
  background: var(--blue);
  color: var(--on-accent);
}
html[data-theme="dark"] .cta-section .btn-accent:hover {
  background: var(--yellow);
  color: #121824;
}

/* Features Section Alternating Shades & Typography Overrides */
html[data-theme="dark"] .ahh-features {
  background: var(--card) !important; /* Lighter slate block, matching the light theme white-shaded parallel! */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
html[data-theme="dark"] .ahh-features-title {
  color: var(--text) !important;
}
html[data-theme="dark"] .ahh-card-green {
  background: linear-gradient(145deg, var(--success-soft), var(--success-soft)) !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
}
html[data-theme="dark"] .ahh-card-yellow {
  background: linear-gradient(145deg, var(--warn-soft), var(--warn-soft)) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
}
html[data-theme="dark"] .ahh-card-purple {
  background: linear-gradient(145deg, var(--violet-soft), var(--violet-soft)) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
}
html[data-theme="dark"] .ahh-card h3 {
  color: var(--text) !important;
}
html[data-theme="dark"] .ahh-card p {
  color: var(--muted) !important;
}
html[data-theme="dark"] .ahh-badge {
  background: var(--bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ahh-badge:hover {
  background: var(--bg2) !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* Footer Section Dark Mode Overrides: the footer stays deep ink, a shade darker than the page */
html[data-theme="dark"] .ahh-footer {
  background: #070c18;
  color: rgba(244, 241, 234, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .footer-col h4 { color: #e8bd68; }
html[data-theme="dark"] .footer-col a,
html[data-theme="dark"] .footer-brand p { color: rgba(244, 241, 234, 0.64); }
html[data-theme="dark"] .footer-col a:hover { color: var(--text); }

/* Scrollbar customizations for dark theme */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bg3);
  border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}




/* Languages: compact chips — spoken (grey) ⇄ learning (blue, with the level) */
.card-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.card-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}
.card-lang img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.06);
}
.card-lang.is-native { background: var(--surface-3); color: var(--text-2); }
.card-lang.is-learning { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }
.card-lang.is-more { padding: 0 9px; background: var(--surface-3); color: var(--muted); }
.card-lang-pair { display: inline-flex; align-items: center; gap: 6px; }
.card-lang-sep { color: var(--faint); flex-shrink: 0; margin: 0 1px; }
.card-lang-level { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; margin-left: 2px; }
.card-lang-level i { display: block; width: 3px; border-radius: 1px; background: var(--info-line); }
.card-lang-level i:nth-child(1) { height: 4px; }
.card-lang-level i:nth-child(2) { height: 6px; }
.card-lang-level i:nth-child(3) { height: 8px; }
.card-lang-level i:nth-child(4) { height: 11px; }
.card-lang-level.lvl-1 i:nth-child(-n+1),
.card-lang-level.lvl-2 i:nth-child(-n+2),
.card-lang-level.lvl-3 i:nth-child(-n+3),
.card-lang-level.lvl-4 i { background: var(--info-solid); }
[data-theme="dark"] .card-lang.is-native,
[data-theme="dark"] .card-lang.is-more { background: var(--surface-2); color: var(--text-2); }
[data-theme="dark"] .card-lang.is-learning { background: rgba(14,165,233,0.12); color: var(--info); box-shadow: inset 0 0 0 1px rgba(14,165,233,0.28); }
[data-theme="dark"] .card-lang-level i { background: rgba(125,211,252,0.3); }
[data-theme="dark"] .card-lang-level.lvl-1 i:nth-child(-n+1),
[data-theme="dark"] .card-lang-level.lvl-2 i:nth-child(-n+2),
[data-theme="dark"] .card-lang-level.lvl-3 i:nth-child(-n+3),
[data-theme="dark"] .card-lang-level.lvl-4 i { background: var(--info); }
.card-langs .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.card-langs.is-profile { margin: 0; gap: 8px; }
.card-langs.is-profile .card-lang { height: 30px; font-size: 0.84rem; padding-right: 12px; }
.card-langs.is-profile .card-lang img { width: 20px; height: 20px; }

/* Basics of a profile: height, relationship status, children, education, work, sport, smoking, alcohol, pets */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px}
.ls-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-2);font-size:.84rem;font-weight:600;line-height:1.2}
.ls-chip .ls-icon{font-size:.95rem;line-height:1}
.ls-chips .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ls-add-btn{border:1.5px dashed var(--accent-line);background:transparent;color:var(--accent-text);border-radius:12px;padding:8px 14px;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s}
.ls-add-btn:hover{background:var(--accent-soft);border-color:var(--accent)}
[data-theme="dark"] .ls-chip{background:var(--surface-2);border-color:var(--line);color:var(--text-2)}
[data-theme="dark"] .ls-add-btn{border-color:var(--accent-line);color:var(--accent-text)}
[data-theme="dark"] .ls-add-btn:hover{background:var(--accent-soft)}
.badge.badge-pink{background:#ec4899}

/* Compatibility percentage on member cards (includes/compat.php) */
.compat-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:.78rem;font-weight:800;line-height:1.3;white-space:nowrap;background:var(--violet-soft);color:var(--violet);border:1px solid var(--violet-line)}
.compat-pill.is-high{background:linear-gradient(135deg,var(--pink-soft),var(--violet-soft));color:var(--pink);border-color:var(--pink-line)}
.compat-pill.is-low{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.compat-pill .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-theme="dark"] .compat-pill:not(.on-photo){background:rgba(139,92,246,.18);color:var(--violet);border-color:var(--violet-line)}
[data-theme="dark"] .compat-pill.is-high:not(.on-photo){background:rgba(236,72,153,.16);color:var(--pink);border-color:var(--pink-line)}
[data-theme="dark"] .compat-pill.is-low:not(.on-photo){background:var(--surface-2);color:var(--muted);border-color:var(--line)}
.compat-pill.on-photo{background:rgba(15,23,42,.55);color:#fff;border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.compat-pill.on-photo.is-high{background:linear-gradient(135deg,rgba(236,72,153,.92),rgba(139,92,246,.92));border-color:rgba(255,255,255,.4)}