/* ───────────────── Base / Resets ───────────────── */
* { box-sizing: border-box }
html, body { height: 100% }
html { color-scheme: light dark }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* ───────────────── Design Tokens ───────────────── */
:root{
  --bg:#f7f7fb; --bg-soft:#ffffff; --card: var(--bg-soft);
  --text:#111827; --muted:#6b7280; --border:#e5e7eb;

  --primary:#ff4d6d; --primary-600:#e63a5a; --primary-700:#cc2b4b; --primary-contrast:#ffffff;

  --brand-grad-start:#ff4d6d; --brand-grad-end:#7c3aed;

  --card-radius:18px; --shadow:0 10px 30px rgba(17,24,39,.08);

  --chip-bg: linear-gradient(135deg, rgba(255,77,109,.12), rgba(124,58,237,.12));
  --chip-bd: rgba(255,77,109,.25);
}
html[data-theme="dark"]{
  --bg:#0b0e14; --bg-soft:#121723; --card: rgba(18,23,35,.85);
  --text:#ECEFF4; --muted:#98a1b3; --border:#232a36;

  --primary:#ff6b88; --primary-600:#ff4d6d; --primary-700:#e63a5a; --primary-contrast:#0b0e14;

  --brand-grad-start:#ff6b88; --brand-grad-end:#7c3aed;

  --shadow:0 12px 40px rgba(0,0,0,.35);
}

/* ───────────────── Header / Navbar ───────────────── */
.ws-header{ position:relative; background:var(--bg-soft); border-bottom:1px solid var(--border) }
.ws-header-gradient{ position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--brand-grad-start),var(--brand-grad-end)); opacity:.8 }
.ws-brand{ font-weight:800; letter-spacing:.2px; color:var(--text)!important; display:flex; align-items:center; gap:.6rem }
.ws-brand span:last-child{ font-size:1.05rem }
.ws-brand-icon{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)); color:#fff; font-weight:900; line-height:1; box-shadow:0 4px 12px rgba(124,58,237,.25) }
.ws-nav .nav-link{ color:var(--muted); font-weight:600 }
.ws-nav .nav-link:hover, .ws-nav .nav-link.active{ color:var(--text) }
.offcanvas{ background:var(--bg-soft) }
.offcanvas .nav-link{ padding:.6rem .2rem; font-weight:600 }

/* ───────────────── Buttons ───────────────── */
.btn{ border-radius:12px; font-weight:700; touch-action:manipulation }
.btn-sm{ border-radius:10px }
.btn-primary{ background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)); border:0; color:#fff }
.btn-primary:hover{ filter:brightness(.96) }
.btn-outline-primary{ color:var(--primary); border-color:var(--primary) }
.btn-outline-primary:hover{ background:var(--primary); color:#fff }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--muted) }
.btn-warning-soft{ background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.25) }
.btn-danger-soft{ background:rgba(239,68,68,.15); color:#ef4444; border:1px solid rgba(239,68,68,.25) }
.btn:focus-visible{ outline:3px solid rgba(255,77,109,.35); outline-offset:2px }

/* ───────────────── Cards & Forms ───────────────── */
.ws-card{
  background:rgba(255,255,255,.75); border:1px solid var(--border);
  border-radius:var(--card-radius); box-shadow:var(--shadow);
  backdrop-filter:saturate(140%) blur(6px);
}
html[data-theme="dark"] .ws-card{ background:var(--card) }

a{ color:var(--primary); text-decoration:none } a:hover{ opacity:.9 }
.text-muted,.small,.form-text{ color:var(--muted)!important }

.form-control,.form-select{ background:var(--bg); color:var(--text); border-color:var(--border); border-radius:12px }
.form-control:focus,.form-select:focus{ border-color:var(--primary-600); box-shadow:0 0 0 .25rem rgba(255,77,109,.15) }

/* ───────────────── Avatars & Status ───────────────── */
.avatar-24,.avatar-32,.avatar-40,.avatar-64,.avatar-128{ object-fit:cover }
.avatar-24{width:24px;height:24px} .avatar-32{width:32px;height:32px}
.avatar-40{width:40px;height:40px} .avatar-64{width:64px;height:64px}
.avatar-128{width:128px;height:128px}
.ws-dot{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; border:2px solid var(--bg-soft) }
.ws-dot.online{ background:#22c55e }
.ws-verified{ display:inline-flex; align-items:center; gap:.35rem; font-size:.82rem; color:#16a34a }

/* ───────────────── Chips / Gallery / Helpers ───────────────── */
.ws-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:999px;
  background:var(--chip-bg); color:var(--primary); border:1px solid var(--chip-bd); font-weight:700 }
.ws-count{ display:inline-flex; min-width:22px; height:22px; padding:0 .4rem; align-items:center; justify-content:center;
  border-radius:999px; background:var(--primary); color:#fff; font-weight:800; font-size:.75rem }
.ws-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.6rem }
.ws-gallery img{ width:100%; height:110px; object-fit:cover; border-radius:12px; border:1px solid var(--border) }
.ws-ellipsis{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden }

.ws-empty{ color:var(--muted); background:var(--bg);
  border:1px dashed var(--border); border-radius:12px; padding:1rem; text-align:center }
.avatar-128.border{ box-shadow:0 6px 18px rgba(0,0,0,.08) }
.form-label{ font-weight:700 } hr{ border-color:var(--border); opacity:.5 }
.ws-card .btn-ghost{ background:transparent; border:1px solid var(--border) }
.opacity-60{ opacity:.6 } .rounded-14{ border-radius:14px }

/* ───────────────── Feed ───────────────── */
.ws-feed-item{ display:flex; align-items:flex-start; gap:14px; padding:14px 0 0; margin-top:14px; border-top:1px solid var(--border) }
.ws-feed-avatar{ width:40px;height:40px;border-radius:999px;border:1px solid var(--border);object-fit:cover;flex:0 0 40px;position:relative }
.ws-feed-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.92rem; color:var(--muted) }
.ws-actor{ font-weight:800; color:var(--text) } .ws-sep{ opacity:.6 }
.ws-badge{ font-size:.68rem; line-height:1; padding:.2rem .45rem; border-radius:.5rem; font-weight:700;
  background:var(--chip-bg); color:var(--primary); border:1px solid var(--chip-bd) }
.badge-photo{ color:#2563eb; border-color:rgba(37,99,235,.25); background:rgba(37,99,235,.10) }
.badge-album{ color:#0ea5e9; border-color:rgba(14,165,233,.25); background:rgba(14,165,233,.10) }
.badge-avatar{ color:#16a34a; border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.10) }
.badge-wall{ color:#6b7280; border-color:rgba(107,114,128,.25); background:rgba(107,114,128,.10) }
.ws-feed-meta{ color:var(--muted); font-size:.9rem; margin:.15rem 0 }
.ws-feed-body{ line-height:1.6; margin-top:.25rem; white-space:pre-wrap }
.ws-feed-photo{ margin-top:.5rem }
.ws-feed-photo img{ display:block; width:520px; max-width:100%; height:auto; border-radius:16px!important; box-shadow:0 6px 20px rgba(0,0,0,.07) }

/* ───────────────── Auth / Friends / Messages / Noti ───────────────── */
.ws-auth-wrap{ max-width:560px; margin-inline:auto }
.ws-auth-title{ font-weight:800; letter-spacing:.2px }
.ws-auth-sub{ color:var(--muted) }

.ws-friend-row{ display:flex; align-items:center; gap:12px; padding-top:12px; margin-top:12px; border-top:1px solid var(--border) }
.ws-name{ font-weight:800; color:var(--text) }

.ws-thread{ max-height:60vh; overflow:auto; padding-right:.25rem }
.ws-chat{ display:flex; flex-direction:column; gap:.35rem }
.ws-bubble{ max-width:80%; padding:.6rem .8rem; border-radius:14px; border:1px solid var(--border); background:var(--bg-soft);
  box-shadow:0 2px 10px rgba(0,0,0,.04); line-height:1.55 }
.ws-bubble.me{ margin-left:auto; background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)); color:#fff; border-color:transparent }
.ws-bubble .time{ display:block; margin-top:.25rem; font-size:.75rem; opacity:.7 }
.ws-composer{ position:sticky; bottom:0; background:var(--bg-soft); padding-top:10px }

.ws-noti-row{ display:flex; align-items:flex-start; gap:12px; padding-top:12px; margin-top:12px; border-top:1px solid var(--border) }
.ws-noti-time{ color:var(--muted); font-size:.85rem }

/* ───────────────── Profile – Hero / KV ───────────────── */
.ws-profile-hero{
  overflow:hidden;
  background:
    radial-gradient(1200px 200px at -10% -20%, rgba(124,58,237,.08), transparent),
    radial-gradient(1000px 200px at 120% 120%, rgba(255,77,109,.08), transparent),
    rgba(255,255,255,.75);
}
html[data-theme="dark"] .ws-profile-hero{
  background:
    radial-gradient(1200px 200px at -10% -20%, rgba(124,58,237,.15), transparent),
    radial-gradient(1000px 200px at 120% 120%, rgba(255,77,109,.12), transparent),
    rgba(18,23,35,.85);
}
.ws-hero-wrap{ display:flex; align-items:center; gap:16px }
.ws-hero-avatar img{ width:128px; height:128px; object-fit:cover }
.ws-avatar-ring{ position:relative }
.ws-avatar-ring::before{ content:""; position:absolute; inset:-6px; border-radius:999px;
  background:conic-gradient(from 0deg, var(--brand-grad-start), var(--brand-grad-end), var(--brand-grad-start)); z-index:0; filter:blur(.2px) }
.ws-avatar-ring img{ position:relative; z-index:1 }
.ws-action-bar .btn{ border-radius:999px }

.ws-kv{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; font-size:.95rem }
.ws-kv > div:nth-child(odd){ color:var(--muted) } .ws-kv > div:nth-child(even){ font-weight:600; color:var(--text) }

/* ───────────────── Über mich – Next Level Card ───────────────── */
.ws-about{ border-radius:16px; overflow:hidden; background:var(--card); border:1px solid var(--border); box-shadow:0 8px 30px rgba(0,0,0,.06) }
.ws-about-head{ padding:14px 16px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)), var(--card);
  position:sticky; top:0; z-index:1 }
.ws-about-grid{ list-style:none; margin:0; padding:12px; display:grid; grid-template-columns:1fr; gap:10px }
@media (min-width:768px){ .ws-about-grid{ grid-template-columns:1fr 1fr } }

.ws-about-item{ display:grid; grid-template-columns:44px 1fr; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--border); border-radius:14px; background:var(--bg);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease }
.ws-about-item:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.06);
  border-color: color-mix(in srgb, var(--border) 60%, transparent) }

.ws-about-icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:1.15rem;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--brand-grad-start) 20%, transparent) 0%, transparent 60%), var(--card);
  border:1px solid var(--border) }
.ws-about-text{ min-width:0 }
.ws-about-label{ font-size:.78rem; color:var(--muted); letter-spacing:.01em }
.ws-about-value{ font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

@media (max-width:380px){
  .ws-about-item{ grid-template-columns:40px 1fr; padding:8px 10px }
  .ws-about-icon{ width:40px; height:40px }
}

/* Dense Mobile */
@media (max-width:576px){
  .ws-about{ box-shadow:0 4px 14px rgba(0,0,0,.05); border-radius:14px }
  .ws-about-head{ padding:10px 12px }
  .ws-about-grid{ padding:8px; gap:6px }
  @media (min-width:420px){ .ws-about-grid{ grid-template-columns:1fr 1fr } }
  .ws-about-item{ grid-template-columns:36px 1fr; gap:8px; padding:8px 10px; border-radius:12px; box-shadow:none }
  .ws-about-item:hover{ transform:none; box-shadow:none }
  .ws-about-icon{ width:36px; height:36px; border-radius:10px; font-size:.95rem }
  .ws-about-label{ font-size:.72rem }
  .ws-about-value{ font-size:.92rem; line-height:1.2 }
  .ws-card{ border-radius:14px }
}
@media (max-width:360px){
  .ws-about-grid{ grid-template-columns:1fr; gap:5px }
  .ws-about-item{ grid-template-columns:34px 1fr; padding:7px 9px }
  .ws-about-icon{ width:34px; height:34px; font-size:.9rem }
  .ws-about-value{ font-size:.9rem }
}

/* ───────────────── Profile Action Bar ───────────────── */
.ws-cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center }
.ws-cta .ws-inline{ display:inline-block; margin:0 } .ws-cta .ws-inline form{ display:inline }

.ws-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  height:36px; padding:0 14px; border-radius:999px; font-weight:800; font-size:.95rem;
  border:1px solid var(--border); background:var(--bg-soft); color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}
.ws-pill:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.06) }
.ws-pill:disabled{ opacity:.6; transform:none; box-shadow:none }

.ws-pill-primary{ background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)); border-color:transparent; color:var(--primary-contrast) }
.ws-pill-outline{ background:transparent; color:var(--text); border-color:var(--border) }
.ws-pill-success{ background:rgba(22,163,74,.12); color:#16a34a; border-color:rgba(22,163,74,.25) }
.ws-pill-warning{ background:rgba(245,158,11,.15); color:#b45309; border-color:rgba(245,158,11,.25) }
.ws-pill-danger{  background:rgba(239,68,68,.14); color:#b91c1c; border-color:rgba(239,68,68,.28) }

.ws-iconbtn{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-soft); box-shadow:0 6px 18px rgba(0,0,0,.05); font-size:1rem
}
.ws-iconbtn:hover{ transform:translateY(-1px) }
.ws-iconbtn-danger{  background:rgba(239,68,68,.12); color:#b91c1c; border-color:rgba(239,68,68,.28) }
.ws-iconbtn-warning{ background:rgba(245,158,11,.12); color:#b45309; border-color:rgba(245,158,11,.25) }

.ws-profile-meta .ws-cta{ margin-top:10px }

/* ───────────────── Responsive polish ───────────────── */
@media (max-width:576px){
  .ws-hero-wrap{ flex-direction:column; text-align:center }
  .ws-hero-main{ width:100% }
  .ws-hero-avatar img{ width:96px; height:96px }
  .ws-profile-hero .ws-chip{ font-size:.85rem; padding:.35rem .6rem }
  .ws-action-bar{ justify-content:center }
  .ws-kv{ gap:6px 10px }
}

/* ───────────────── Motion safety ───────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
}

/* ───────── Search Upgrades ───────── */
.ws-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ws-toggle{display:inline-flex;align-items:center;gap:.45rem;height:36px;padding:0 14px;border-radius:999px;font-weight:800;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,.05)}
.ws-toggle:hover{transform:translateY(-1px)}
.ws-toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}

#searchLayout{position:relative}
.ws-layout--filters-collapsed #filterCol{display:none}
.ws-layout--filters-collapsed #resultsCol{width:100%}
.ws-fab{
  position:fixed; right:18px; bottom:18px; z-index:50;
  display:none; width:48px;height:48px;border-radius:999px;border:1px solid var(--border);
  background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end)); color:#fff;
  box-shadow:var(--shadow); font-weight:900; font-size:1.05rem; align-items:center;justify-content:center
}
.ws-layout--filters-collapsed .ws-fab{display:flex}
@media (max-width:991.98px){ .ws-fab{right:14px;bottom:14px} }

/* Result Card v2 */
.ws-user-card{position:relative;overflow:hidden;border-radius:16px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);padding:14px}
.ws-user-card::before{
  content:""; position:absolute; inset:-1px; border-radius:18px; z-index:0;
  background:conic-gradient(from 0deg, var(--brand-grad-start), var(--brand-grad-end), var(--brand-grad-start));
  opacity:.12; filter:blur(20px)
}
.ws-user {position:relative; z-index:1; display:grid; grid-template-columns:92px 1fr; gap:12px; align-items:center}
.ws-user .avatar{width:92px;height:92px;border-radius:16px;object-fit:cover;border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.ws-user .name{display:flex;align-items:center;gap:6px;font-weight:900;line-height:1.1}
.ws-user .meta{color:var(--muted);font-size:.9rem}
.ws-user-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ws-badge-friends{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .5rem;border-radius:999px;font-weight:800;font-size:.75rem;color:#16a34a;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.25)}
.ws-user-card:hover{transform:translateY(-2px)}