:root{
  --qsi-bg:#f3f4f6;
  --qsi-card:#ffffff;
  --qsi-border:#e5e7eb;
  --qsi-text:#111827;
  --qsi-muted:#6b7280;
  --qsi-accent:#10b981;
  --qsi-radius:18px;
}

/* Reset-ish */
.qsi-container, .qsi-container *{box-sizing:border-box}
.qsi-container{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--qsi-text)}
.qsi-page{min-height:100vh;background:transparent;padding:16px}
.qsi-wrap{max-width:720px;margin:0 auto}

/* Hero */
.qsi-hero{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.10);
}
.qsi-hero img{
  display:block;
  width:100%;
  height:auto;
  max-height:340px;
  object-fit:cover;
}
.qsi-hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.65) 100%);
}
.qsi-hero-content{
  position:absolute;inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px 18px 22px;
  z-index:2;
}
.qsi-hero-title{
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
  text-align:center;
  font-size:34px;
  margin:0 0 8px;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.qsi-hero-subtitle{
  color:#fff;
  text-align:center;
  font-size:18px;
  line-height:1.35;
  margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  padding:0 10px;
}

/* Language switch */
.qsi-lang{
  position:absolute;
  top:clamp(10px, 2.5vw, 18px);
  right:calc(clamp(10px, 2.5vw, 18px) + env(safe-area-inset-right));
  left:auto;
  z-index:10;
  display:flex;
  gap:10px;
  align-items:center;
}
.qsi-lang a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:40px;
  border-radius:999px;
  font-weight:800;
  text-decoration:none;
  border:2px solid rgba(255,255,255,.65);
  color:#fff;
  background:rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.qsi-lang a.is-active{
  background:#fff;
  color:#111;
  border-color:#fff;
}

/* Cards */
.qsi-card{
  background:var(--qsi-card);
  border:1px solid var(--qsi-border);
  border-radius:var(--qsi-radius);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  padding:16px;
}
.qsi-section{margin-top:16px}
.qsi-question{
  background:#f9fafb;
  border:1px solid var(--qsi-border);
  border-radius:16px;
  padding:14px 14px 16px;
}
.qsi-question-title{
  font-weight:900;
  text-align:center;
  font-size:24px;
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
}
.qsi-question-title .req{color:#ef4444;margin-left:6px}

/* Inputs */
.qsi-field{margin-top:12px}
.qsi-field input[type="text"],
.qsi-field input[type="email"],
.qsi-field input[type="number"],
.qsi-field select,
.qsi-field textarea{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:12px 12px;
  font-size:16px;
  background:#fff;
  outline:none;
}
.qsi-field textarea{min-height:110px;resize:vertical}

/* Buttons */
.qsi-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--qsi-accent);
  border:0;
  color:#fff;
  padding:12px 16px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  font-size:16px;
}
.qsi-btn:disabled{opacity:.6;cursor:not-allowed}
.qsi-actions{display:flex;justify-content:center;margin-top:14px}

/* Rating faces row */
.qsi-rating{
  margin-top: -30px; /* extra space from title */
  width:100%;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
}
.qsi-face{
  position:relative;
  background:#fff;
  border:1px solid var(--qsi-border);
  border-radius:14px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-width:0;
}
.qsi-face:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.qsi-face svg{width:40px;height:40px;display:block}
.qsi-face input{position:absolute;opacity:0;pointer-events:none}

/* Selected state */
.qsi-face.is-selected{
  border-color: var(--qsi-accent);
  box-shadow:0 0 0 4px rgba(16,185,129,.18);
}
.qsi-face .qsi-check{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  color:rgba(16,185,129,.95);
  opacity:0;
  pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.12);
}
.qsi-face.is-selected .qsi-check{opacity:.92}

/* Responsive (mobile) */
@media (max-width: 520px){
  .qsi-page{padding:10px}
  .qsi-wrap{max-width:100%}
  .qsi-hero{border-radius:18px}
  .qsi-hero h1{font-size:2.2rem}
  .qsi-hero p{font-size:1.05rem}
}
@media (max-width: 390px){
  .qsi-hero h1{font-size:2.0rem}
  .qsi-hero p{font-size:1rem}
}

/* Faces rating: ensure always fit on small screens */
@media (max-width: 520px){
  .face-group{justify-content:space-between;gap:6px}
  .face-tile{flex:1 1 0;min-width:0;width:auto;padding:10px}
  .face-tile .emoji svg{width:32px;height:32px}
}
@media (max-width: 390px){
  .face-group{gap:4px}
  .face-tile{padding:8px}
  .face-tile .emoji svg{width:28px;height:28px}
}

/* NPS slider (0-10) */
.qsi-nps-slider-wrap{width:100%;padding:6px 2px;position:relative}
.qsi-nps-value {
  position: absolute;
  top: -30px;
  transform: translate(-50%, 0) scale(1);
  transform-origin: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  color: #fff;
  pointer-events: none;
  z-index: 2;
  background:#111827;
  transition: background-color .2s ease, transform .15s ease;
}
.qsi-nps-value.is-red{background:#ef4444;}
.qsi-nps-value.is-yellow{background:#f59e0b;}
.qsi-nps-value.is-green{background:#10b981;}
.qsi-nps-value.is-animating{
  transform: translateX(-50%) scale(1.15);
}

.qsi-nps-slider{
  --qsi-thumb-size: 22px;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#ef4444 0%, #f59e0b 55%, #10b981 100%);
  outline:none;
}
.qsi-nps-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  border:2px solid rgba(17,24,39,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.qsi-nps-slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#fff;
  border:2px solid rgba(17,24,39,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.qsi-nps-slider::-moz-range-track{
  height:10px;border-radius:999px;
  background:linear-gradient(90deg,#ef4444 0%, #f59e0b 55%, #10b981 100%);
}

/* Center submit button + keep brand color */
.qsi-actions{display:flex;justify-content:center;margin-top:24px}
.qsi-submit{min-width:260px;padding:16px 22px;font-size:18px;background:#10b981 !important;color:#fff !important;border:0}


/* Responsive thumb size for NPS slider */
.qsi-nps-slider { --qsi-thumb-size: 22px; }

@media (max-width: 520px){
  .qsi-nps-slider { --qsi-thumb-size: 20px; }
}

@media (max-width: 390px){
  .qsi-nps-slider { --qsi-thumb-size: 18px; }
}

.qsi-lang-switch{position:absolute;top:18px;right:18px;display:flex;gap:10px;align-items:center;z-index:5;}
@media (max-width:520px){.qsi-lang-switch{top:12px;right:12px;gap:8px;}}


/* Hero: ensure language buttons stay inside and text is centered */
.qsi-hero{position:relative;overflow:hidden;}
.qsi-hero-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:24px 18px;
}
.qsi-hero-title,.qsi-hero-message{
  text-align:center;
  margin-left:auto; margin-right:auto;
}
/* Language switch always inside viewport/hero (supports safe areas) */
.qsi-lang-switch{
  position:absolute;
  top:clamp(10px, 2.5vw, 18px);
  right:calc(clamp(10px, 2.5vw, 18px) + env(safe-area-inset-right));
  left:auto;
  display:flex; gap:10px; align-items:center;
  z-index:10;
}
@media (max-width:520px){
  .qsi-hero-overlay{ padding:18px 14px; }
  .qsi-lang-switch{
    top:10px;
    right:calc(10px + env(safe-area-inset-right));
    gap:8px;
  }
}

@media (max-width:520px){
  .qsi-lang{ top:10px; right:calc(10px + env(safe-area-inset-right)); gap:8px; }
}