/* =========================
   BASE VARIABLES & RESET
========================= */
:root{
  --bg:#e9f1f6;
  --card:#f0f5fa;
  --accent:#6ea8d9;
  --accent2:#4f8fc2;
  --text:#153243;
  --muted:#6b7280;

  --btn-shadow1: 10px 10px 20px rgba(137,155,169,0.20);
  --btn-shadow2: -10px -10px 20px rgba(255,255,255,0.85);
  --inset: inset 6px 6px 12px rgba(137,155,169,0.15),
           inset -6px -6px 12px rgba(255,255,255,0.9);

  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body{
  margin:0;
  padding:0;
  background: linear-gradient(180deg,#eef5fb,#e6edf5);
  color:var(--text);
  min-height:100vh;
}

/* =========================
   LAYOUT
========================= */
.page-content{
  min-height: calc(100vh - 120px); /* если хедер ~120px */
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:40px 20px;
}

.wrap{
  width:100%;
  max-width:900px;
  background:var(--card);
  border-radius:22px;
  padding:26px;
  box-shadow: var(--btn-shadow1), var(--btn-shadow2);
}

/* =========================
   TYPOGRAPHY
========================= */
h1{
  margin:0 0 4px 0;
  font-size:22px;
}

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

/* =========================
   PROGRESS BAR (TOP)
========================= */
.progress{
  margin:14px 0;
  height:10px;
  width:100%;
  border-radius:999px;
  background: rgba(255,255,255,0.7);
  box-shadow: inset 2px 2px 6px rgba(150,160,170,0.25);
  overflow:hidden;
}

.progress i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#7fb1e6,#4f8fc2);
  transition:width .3s ease;
}

/* =========================
   QUESTION
========================= */
.question{
  font-size:18px;
  margin:20px 0 14px 0;
  min-height:60px;
  line-height:1.35;
}

/* =========================
   SCALE OPTIONS
========================= */
.scale{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px 14px;
}

.option{
  background:var(--card);
  border-radius:14px;
  padding:14px 16px;
  box-shadow: var(--inset);
  cursor:pointer;
  transition: all .15s ease;
  text-align:center;
}

.option strong{
  font-size:16px;
}

.option span{
  font-size:13px;
  color:#4c5965;
}

.option:hover{
  transform:translateY(-3px);
}

.option.active{
  background:linear-gradient(180deg,#f7fbff,#eaf6ff);
  border:1px solid rgba(115,164,203,0.28);
  transform:translateY(-2px);
  box-shadow:
    8px 8px 18px rgba(110,168,217,0.20),
   -8px -8px 18px rgba(255,255,255,0.9);
}

/* =========================
   CONTROLS & BUTTONS
========================= */
.controls{
  display:flex;
  justify-content:space-between;
  margin-top:18px;
}

.btn{
  padding:12px 20px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-size:15px;
  background:var(--card);
  box-shadow: var(--btn-shadow1), var(--btn-shadow2);
}

.btn.primary{
  background: linear-gradient(180deg,#67a7dd,#4f8fc2);
  color:#fff;
  box-shadow: 10px 10px 20px rgba(79,143,194,0.25);
}

.btn:disabled{
  opacity:0.45;
  cursor:default;
}

/* =========================
   RESULTS
========================= */
#results{
  margin-top:20px;
  display:none;
}

.schema{
  margin:12px 0;
}

.schema-title{
  font-size:15px;
  margin-bottom:6px;
  color:#1a2c38;
}

.bar{
  height:12px;
  width:100%;
  border-radius:999px;
  background:#e5edf3;
  box-shadow: inset 2px 2px 6px rgba(120,140,150,0.28);
  overflow:hidden;
}

.bar i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg,#6ea8d9,#4f8fc2);
  transition:width .4s ease;
}

/* цветовые классы из второго файла */
.bar.red i{
  background: linear-gradient(90deg,#d9534f,#c9302c);
}

.bar.yellow i{
  background: linear-gradient(90deg,#f0ad4e,#ec971f);
}

.score{
  font-size:13px;
  margin-top:4px;
  color:var(--muted);
}

/* =========================
   MOBILE ADAPTATION
========================= */
@media (max-width: 480px){

  .wrap{
    padding:18px;
  }

  .scale{
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
  }

  .option strong{
    font-size:14px;
  }

  .option span{
    font-size:12px;
  }

  .controls{
    flex-direction:column;
    gap:10px;
  }

  .btn{
    width:100%;
    padding:14px;
    font-size:16px;
  }

  h1{
    font-size:18px;
  }

  .question{
    font-size:16px;
    min-height:auto;
  }
}