:root{
  --ink:#111827;
  --blue:#2b4cff;
  --pink:#ffc7e6;
  --pink2:#ffe8f3;
  --shadow: 0 18px 50px rgba(17,24,39,.18);
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f8ff, #ffffff);
}

.lang-toggle{
  position:fixed; top:14px; right:14px;
  z-index:60;
  border:3px solid #222;
  background:rgba(255,255,255,.9);
  border-radius:999px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(17,24,39,.12);
}

.hidden{display:none !important;}
.dot{opacity:.5; margin:0 6px}

/* landing */
.landing{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.landing-hero{
  width:min(880px, 100%);
  padding: 26px;
  border-radius: var(--radius);
  border: 4px solid #222;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  background: linear-gradient(135deg, #5a5cf0, #37b7ff);
}
.landing-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%);
  background-size: 120px 120px;
  background-position: 0 0, 0 60px, 60px -60px, -60px 0px;
  opacity:.25;
  pointer-events:none;
}
.landing-card{
  position:relative; z-index:1;
  margin:auto;
  width:min(560px,100%);
  background: rgba(255,255,255,.9);
  border: 4px solid #222;
  border-radius: 22px;
  padding: 24px 20px 22px;
  box-shadow: 0 18px 40px rgba(17,24,39,.15);
  text-align:center;
}
.landing-kicker{
  font-weight:1000;
  letter-spacing: 3px;
  font-size: 12px;
  opacity:.8;
}
.landing-title{
  margin-top:10px;
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
}
.landing-sub{
  margin: 12px auto 18px;
  max-width: 44ch;
  font-weight:800;
  opacity:.8;
}
.btn-start{
  border: 4px solid #222;
  background: #ff7ac8;
  color:#111;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 1000;
  letter-spacing: 2px;
  cursor:pointer;
  box-shadow: 0 10px 0 rgba(0,0,0,.18);
  transition: transform .08s ease;
}
.btn-start:active{ transform: translateY(2px); }

/* test layout */
.test{ min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20;
  padding: 14px 14px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(0,0,0,.08);
  display:flex; align-items:center; gap:12px;
}
.topbar-center{ flex:1; min-width: 0; }
.topbar-title{ font-weight: 1000; letter-spacing:.4px; margin-bottom:8px; }

.progress-wrap{ display:flex; flex-direction:column; gap:6px; }
.progress-meta{ font-weight:900; font-size: 12px; opacity:.85; }
.progress-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
  border: 2px solid rgba(0,0,0,.1);
}
.progress-bar{
  height:100%;
  width:0%;
  background: var(--blue);
  border-radius: 999px;
  transition: width .25s ease;
}
.topbar-actions{
  display:flex; gap:8px;
  flex-wrap:wrap; justify-content:flex-end;
}
.btn-ghost{
  text-decoration:none;
  border:2px solid rgba(0,0,0,.14);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight:900;
  background: rgba(255,255,255,.65);
}
.btn-soft{
  border:2px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
}
#robotBtn{
  border-color:#111827;
  background: linear-gradient(135deg, #ffffff, #eef2ff);
}

.content{
  padding: 16px 14px 88px;
  width:min(980px, 100%);
  margin: 0 auto;
}
.questions{ display:flex; flex-direction:column; gap:14px; }

.qsection{
  border-radius: 18px;
  border: 3px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  overflow:hidden;
  transform: translateY(10px);
  opacity:0;
  transition: transform .4s ease, opacity .4s ease;
}
.qsection.inview{ transform:none; opacity:1; }

.qsection-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 2px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,199,230,.55), rgba(255,255,255,.0));
}
.qsection-head .title{
  font-weight: 1000;
  letter-spacing: 1px;
  font-size: 12px;
  opacity:.9;
}
.qsection-head .chip{
  font-weight: 1000;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.7);
}
.qsection-body{ padding: 12px 12px 14px; }
.qtext{
  font-weight: 900;
  line-height:1.35;
  font-size: 15px;
  margin-bottom: 12px;
}
.answer-bar{
  border: 3px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.9);
  border-radius: 18px;
  padding: 10px 10px 8px;
}
.answer-bar-top{
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6aa5, #ffd04f, #6a7cff);
  opacity:.75;
  margin-bottom: 10px;
}
.hearts{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.heart-btn{
  border: 3px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 10px 8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 1000;
  transition: transform .08s ease, background .12s ease;
}
.heart-btn:active{ transform: translateY(1px); }
.heart-btn .heart{ font-size: 16px; opacity:.85; }
.heart-btn.selected{
  border-color:#111827;
  background: rgba(255,122,200,.28);
}
.scale-labels{
  display:flex; justify-content:space-between;
  margin-top: 8px;
  font-weight: 900;
  font-size: 12px;
  opacity:.75;
}

.bottom-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:25;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border-top: 2px solid rgba(0,0,0,.08);
  padding: 12px 14px;
  display:flex; align-items:center; gap:12px;
}
.bottom-left{ flex:1; min-width:0; }
.bottom-title{ font-weight:1000; letter-spacing:.4px; }
.bottom-sub{ font-weight:800; opacity:.72; font-size: 12px; }
.btn-primary{
  border: 4px solid #222;
  background: #ff7ac8;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 1000;
  letter-spacing: 1px;
  cursor:pointer;
  box-shadow: 0 10px 0 rgba(0,0,0,.16);
}
.btn-primary:active{ transform: translateY(2px); }