:root{--brand:#0ea5e9;--brand2:#2563eb;--bg:#0b1020;--card:#0f172a;--muted:#94a3b8;--fg:#e2e8f0}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;background:var(--bg);color:var(--fg)}
header{background:linear-gradient(45deg,var(--brand),var(--brand2));color:white;padding:12px 0 0 0}
header .top{padding:10px 16px}
header .title{font-size:2rem;margin:10px 0}
nav a{color:white;text-decoration:none;margin-right:16px;opacity:.95}
.container{max-width:1100px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid #1f2a44;border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid var(--brand);color:var(--fg);text-decoration:none}
input,textarea,select{width:100%;padding:10px;border-radius:12px;border:1px solid #334155;background:#0b1328;color:var(--fg)}
.small{color:var(--muted);font-size:.95rem}
.hero{display:flex;gap:18px;align-items:center;padding:0 16px 16px 16px}
.hero img{width:92px;height:92px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.6)}
.carousel{position:relative;overflow:hidden}
.carousel-track{display:flex;transition:transform .6s ease}
.carousel img{width:100%;height:320px;object-fit:cover;display:block}
.carousel .dotbox{position:absolute;left:0;right:0;bottom:10px;text-align:center}
.carousel .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#fff;opacity:.5;margin:0 4px}
.carousel .dot.active{opacity:1}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.gallery img{width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid #1f2a44}
footer{color:#9aa7bd;padding:24px;text-align:center;margin-top:20px}

/* v3.1 tweaks */
.hero .subtitle{font-size:1.05rem;display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter: blur(2px);text-shadow:0 1px 2px rgba(0,0,0,.7)}
.hero-row{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:8px;align-items:start}
.hero .party-logo{width:92px;height:92px;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.8)}
.hero .big-photo{width:100%;height:280px;object-fit:cover;border-radius:16px;border:2px solid rgba(255,255,255,.2)}
@media(max-width:800px){.hero-row{grid-template-columns:1fr}.hero .big-photo{height:220px}}

/* v3.2: Bio panel with strong contrast */
.hero .bio-panel{
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px 14px;
  color: #f8fafc; /* near-white for readability */
  line-height: 1.5;
}
.hero .bio-panel p{margin: 0 0 8px 0}

/* v3.4 CTA button */
.btn-cta{
  background: linear-gradient(45deg, var(--brand), var(--brand2));
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.btn-cta:hover{filter:brightness(1.05)}

/* v3.4.1: Ensure each slide uses full viewport width */
.carousel-track > * { flex: 0 0 100%; }

/* v3.5: readonly dimension hint styling */
.hint-dimension{
  width:100%;margin-top:6px;padding:8px 10px;border-radius:10px;
  border:1px dashed #3b82f6;background:rgba(59,130,246,.08);color:#c7d2fe;
}
/* modal overlay for gallery zoom */
.gallery-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;z-index:9999}
.gallery-overlay img{max-width:90%;max-height:90%;border-radius:12px;box-shadow:0 0 20px rgba(0,0,0,.8)}
.gallery-overlay .meta{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#e5e7eb;font-size:.95rem}

/* v3.6: Align party logo with title */
.hero{align-items:flex-start}
.hero .party-logo{align-self:flex-start;margin-top:6px}
/* Reaction bar */
.reactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.reaction-btn{border:1px solid #2b3b67;border-radius:999px;padding:6px 10px;background:#0b1328;cursor:pointer}
.reaction-btn[data-active="1"]{outline:2px solid #3b82f6}
.reaction-count{opacity:.9}
/* Admin small reply box */
.inline-reply{margin:6px 0}
.inline-reply textarea{width:100%;min-height:60px}