:root{
  --bg:#f4f7fb;
  --panel:#fff;
  --text:#172033;
  --muted:#64748b;
  --brand:#0ea5e9;
  --brand2:#7c3aed;
  --border:#d8e0ec;
  --shadow:0 14px 38px rgba(15,23,42,.10);
  --r:22px;
  --star:#facc15;
  --starOff:#cbd5e1;
  --c1:#166534;
  --c2:#65a30d;
  --c3:#eab308;
  --c4:#f97316;
  --c5:#dc2626;
  --c6:#7f1d1d;
}

*{box-sizing:border-box}

html{font-size:16px}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left,#bae6fd 0,transparent 32%),
    radial-gradient(circle at top right,#ddd6fe 0,transparent 30%),
    var(--bg);
}

header,.wrap{
  max-width:980px;
  margin:auto;
  padding:24px 16px;
}

.hero{
  background:linear-gradient(135deg,#0f172a,#1e3a8a 55%,#5b21b6);
  color:white;
  border-radius:28px;
  padding:28px;
  box-shadow:var(--shadow);
}

h1{
  margin:0;
  font-size:clamp(32px,8vw,58px);
  line-height:1;
  letter-spacing:-.05em;
}

.subtitle{
  margin:10px 0 0;
  font-size:clamp(18px,4.5vw,22px);
  opacity:.9;
}

.card{
  background:rgba(255,255,255,.94);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px;
  box-shadow:var(--shadow);
  margin:16px 0;
}

.question{
  border-top:1px solid var(--border);
  padding:20px 0;
}

.question:first-child{border-top:0;padding-top:4px}
.question:last-child{padding-bottom:6px}

.qTitle{
  font-weight:800;
  font-size:clamp(16px,4.2vw,20px);
  line-height:1.35;
  margin-bottom:6px;
}

.ratingHint{
  color:var(--muted);
  font-size:13px;
  margin-bottom:8px;
}

.stars{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2px;
  width:100%;
  max-width:390px;
  padding:4px 0;
}

.star{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--starOff);
  cursor:pointer;
  font-size:clamp(30px,10.5vw,42px);
  line-height:1;
  padding:6px 4px;
  min-width:42px;
  min-height:44px;
  text-align:center;
  transition:transform .12s ease,color .12s ease;
  touch-action:manipulation;
}

.star:hover,
.star:focus-visible{
  color:var(--star);
  transform:scale(1.08);
  outline:none;
}

.star.active{color:var(--star)}

textarea,input,select{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:13px 14px;
  font:inherit;
  background:white;
}

textarea{
  min-height:110px;
  resize:none;
  overflow:hidden;
}

.btn{
  width:auto;
  border:1px solid var(--border);
  border-radius:16px;
  padding:13px 18px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(135deg,#38bdf8,#a78bfa);
  color:white;
}

.btn.ghost{background:white;color:var(--text)}
.btn.danger{background:#fee2e2;color:#991b1b}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:14px;
}

.small{
  color:var(--muted);
  font-size:13px;
}

.hidden{display:none!important}

.barRow{
  display:grid;
  grid-template-columns:92px 1fr 44px;
  gap:10px;
  align-items:center;
  margin:7px 0;
}

.barTrack{
  height:20px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

.bar{height:100%;border-radius:999px}
.c1{background:var(--c1)}
.c2{background:var(--c2)}
.c3{background:var(--c3)}
.c4{background:var(--c4)}
.c5{background:var(--c5)}
.c6{background:var(--c6)}

.summary{
  font-size:42px;
  font-weight:900;
}

.adminTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.qEdit{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  margin:8px 0;
}

.printOnly{display:none}

.comment{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  margin:10px 0;
  background:#f8fafc;
  white-space:pre-wrap;
}

#msg{
  color:#b91c1c;
  font-weight:700;
}

@media (max-width:520px){
  header,.wrap{padding:14px 10px}
  .hero{border-radius:22px;padding:22px 18px}
  .card{border-radius:20px;padding:16px;margin:12px 0}
  .question{padding:18px 0}
  .stars{max-width:none;gap:0}
  .star{min-width:0;flex:1;padding:8px 0;font-size:clamp(28px,12vw,38px)}
  .btn{width:100%;padding:15px 18px}
  .qEdit{grid-template-columns:1fr}
  .barRow{grid-template-columns:72px 1fr 34px;font-size:13px}
}

@media (max-width:340px){
  header,.wrap{padding-left:8px;padding-right:8px}
  .hero{padding:20px 14px}
  .card{padding:14px}
  .qTitle{font-size:15px}
  .ratingHint{font-size:12px}
  .star{font-size:27px;padding:7px 0}
}

@media print{
  body{background:white}
  .noPrint{display:none!important}
  .printOnly{display:block}
  .hero,.card{box-shadow:none;border:1px solid #bbb;break-inside:avoid}
  .wrap,header{max-width:none;padding:10px}
  .comment{break-inside:avoid}
  h1{font-size:34px}
  .subtitle{font-size:18px}
}