/* Meyram Quiz — styles (clean) */
:root{
  --bg:#0a0f1f;
  --card:#101833;
  --muted:#a9b4d0;
  --text:#e8eeff;
  --primary:#6ea8fe;
  --accent:#86ffda;
  --danger:#ff7b86;
  --ok:#38d39f;
}

*{ box-sizing:border-box }

/* Base */
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 800px at 80% -10%, #1e2a56 0%, transparent 60%),
    radial-gradient(800px 600px at -10% 110%, #1b3659 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}
.wrap{ max-width:960px; margin:24px auto; padding:12px; }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:24px;
  padding:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.card.inner{
  background:#0f1732;
  border:1px solid rgba(255,255,255,.06);
}

h1{
  font-size:clamp(20px,4.8vw,34px);
  margin:0 0 20px;
  line-height:1.25;
}
p.lead{
  color:var(--muted);
  margin-top:20px;
  text-align:center;
}

/* NEW: disclaimer (экранда да көрінеді) */
.disclaimer{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:left;
}

.row{ display:flex; gap:16px; flex-wrap:wrap; }
.grow{ flex:1 1 280px; }

/* Toggle */
.switch{ display:inline-flex; align-items:center; gap:10px; user-select:none; }
.switch input{ display:none; }
.toggle{
  width:54px; height:30px; border-radius:999px;
  background:#2a355f; position:relative; transition:.2s;
}
.toggle::after{
  content:""; position:absolute; width:22px; height:22px;
  border-radius:50%; background:white; left:4px; top:4px; transition:.2s;
}
input:checked + .toggle{ background:#3559f3; }
input:checked + .toggle::after{ left:28px; }

/* Buttons */
.btn{
  appearance:none; border:0; cursor:pointer;
  border-radius:14px; padding:14px 18px; font-weight:700; width:100%;
}
.btn.primary{ background:linear-gradient(180deg,#6ea8fe,#517cfe); color:#fff; }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.14); }
.btn.share{
  background:linear-gradient(180deg,#f6f7fb,#eef1f7);
  color:#0f172a; border:1px solid rgba(15,23,42,.15);
}
/* Опция: .btn.send — егер “Send” түрі бөлек керек болса */
.btn.send{ background:linear-gradient(180deg,#f6f7fb,#eef1f7); color:#0f172a; border:1px solid rgba(15,23,42,.15); }

.btn .ico{ width:18px; height:18px; margin-right:8px; display:inline-block; vertical-align:middle; }

button[disabled], .btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Progress */
.progress{ height:10px; background:#202a50; border-radius:999px; overflow:hidden; }
.bar{ height:100%; background:linear-gradient(90deg,#6ea8fe,#86ffda); width:0%; transition:width .3s; }

/* Scale options */
.scale{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px; }
.opt{
  background:#1a2447; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 12px; text-align:center; cursor:pointer;
}
.opt.active{ outline:2px solid #6ea8fe; background:#18234d; }
.opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Text helpers */
.muted{ color:var(--muted); text-align:left; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:#1b2a4b; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:999px; color:#cfe0ff;
}
.grid{ display:grid; gap:16px; }
.hidden{ display:none !important; } /* JS toggle үшін сенімді */
.result-grid{ display:grid; grid-template-columns:1fr; gap:16px; }

/* Header / Logo / Title */
.header-row{ display:flex; align-items:center; gap:12px; }

.logo{
  width:100px; height:100px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; background:none;
}
.logo img{ max-width:100%; max-height:100%; display:block; }

.brand{ font-size:22px; font-weight:700; color:#fff; }
.tagline{
  text-align:center;
  font-size:18px;
  color:#a9b4d0;
  margin-top:4px;
}

/* Section titles */
.section-title { font-weight:800; font-size:18px; margin:8px 0; }

/* Explain — BLOCK формат (адаптивті) */
.explain-grid{
  display:grid;
  grid-template-columns:1fr;         /* әдетте бір баған */
  gap:14px;
}
.explain-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:16px;
  background:rgba(255,255,255,.04);
  box-shadow:0 6px 18px rgba(0,0,0,.25) inset, 0 2px 10px rgba(0,0,0,.15);
}
.explain-card .name{
  font-weight:800;
  margin:0 0 8px;
  font-size:16px;
}
.explain-card .small{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

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

/* Bar chart */
.bars{ display:grid; gap:10px; }
.barrow{ display:grid; grid-template-columns:150px 1fr 60px; align-items:center; gap:12px; }
.bartrack{ height:14px; background:#1a2450; border-radius:999px; overflow:hidden; }
.barfill{ height:100%; background:linear-gradient(90deg,#6ea8fe,#86ffda); width:0%; }
.badge{ font-size:12px; border:1px solid rgba(255,255,255,.12); padding:3px 8px; border-radius:999px; color:#a6b7ff; }
.tip{ font-size:14px; color:#b6c2e8; }
.footer{ opacity:.7; font-size:12px; margin-top:24px; }

/* Waiting / loader */
.waitbox{
  display:flex; align-items:center; gap:10px; padding:12px;
  border:1px dashed rgba(255,255,255,.2); border-radius:10px; background:rgba(255,255,255,.03);
}
.spinner{
  width:24px; height:24px; border:3px solid rgba(255,255,255,.2);
  border-top-color:#6ea8fe; border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Quick additions */
.scale .opt{ color:#fff; } /* жауап опциялары ақ */

/* Responsive */
@media (min-width:640px){
  .scale{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:900px){
  .result-grid{ grid-template-columns:1.1fr .9fr; }
  .explain-grid{ grid-template-columns:1fr 1fr; }  /* кең экранда 2 баған */
}

/* Tablet (<=768px) */
@media (max-width:768px){
  .logo{ width:80px; height:80px; }
  .logo img{ max-width:95%; max-height:95%; }
  .tagline{ font-size:15px; margin-top:6px; text-align:center; }
  .centered{ font-size:24px; margin:18px 0; line-height:1.4; }
  .btn{ padding:12px 16px; font-size:15px; }
  .opt{ font-size:15px; padding:12px; }
  .scale{ grid-template-columns:repeat(2,1fr); }
  .result-grid{ grid-template-columns:1fr; }
  .barrow{ grid-template-columns:120px 1fr 50px; gap:8px; }
  .card{ padding:18px; }
  .row{ gap:12px; }
}

/* Mobile (<=480px) */
@media (max-width:480px){
  .logo{ width:70px; height:70px; }
  .logo img{ max-width:90%; max-height:90%; }
  .tagline{ font-size:14px; margin:8px 0 0; text-align:center; }
  .centered{ font-size:20px; margin:16px 0; line-height:1.4; }
  .btn{ padding:12px 14px; font-size:14px; }
  .opt{ padding:10px; font-size:14px; }
  .row{ gap:8px; }
  .barrow{ grid-template-columns:1fr; gap:6px; }
  .barrow div:last-child{ text-align:left; }
  .card{ padding:16px; }
  .scale{ grid-template-columns:1fr; }
  .explain-grid{ grid-template-columns:1fr; } /* блоктар толық енімен */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bar, .barfill{ transition:none !important; }
  .spinner{ animation:none; }
}

/* ===================== PRINT ===================== */
/* Бір бет, A4, автосәйкестендіру (JS --print-scale айнымалысын орнатса, дәлме-дәл масштабталады) */
@media print{
  @page { size: A4; margin: 0; }

  html, body{ height:auto; }
  body{ background:#fff; color:#000; }
  .wrap{ max-width:210mm; margin:0; padding:0; }

  /* Экран элементтерін жасырамыз, нәтижені ғана қалдырамыз */
  #screen-start, #screen-quiz, .footer, .pill, .progress, .actions-row, .btn,
  #busyOverlay{ display:none !important; }          /* NEW: күту оверлейін жасырамыз */
  #screen-result{ display:block !important; }

  /* Автомасштаб: JS (beforeprint) --print-scale орнатады; болмаса 1x */
  #screen-result{
    transform-origin: top left;
    transform: scale(var(--print-scale, 1));
    width: calc(100% / var(--print-scale, 1));
  }

  /* Биіктікті үнемдеу үшін: шеттерді, көлеңкені алып тастаймыз */
  .card{ box-shadow:none; border:0; padding:0; background:transparent; }

  /* Баспаға ыңғайлы типографика */
  body{ font-size:11pt; }
  h1{ font-size:18pt; margin:0 0 10pt; }
  .section-title{ font-size:14pt; margin:6pt 0; }
  .tip{ font-size:11pt; color:#111; }

  /* Макет бір бағанға түссін — биіктікті ұтымды қолдану */
  .result-grid{ grid-template-columns:1fr !important; gap:8pt; }
  .explain-grid{ grid-template-columns:1fr !important; gap:8pt; }

  /* Барлар ықшам */
  .barrow{ grid-template-columns:140pt 1fr 40pt; gap:8pt; }
  .bartrack{ height:10pt; }

  /* NEW: дисклеймерді принтте міндетті көрсету */
  #screen-result .disclaimer{
    display:block !important;
    color:#000;
    font-size:10pt;
    margin-top:6pt;
  }

  /* NEW: бет бөлінуін болдырмау */
  #screen-result, #screen-result .card, #screen-result .explain-card{
    page-break-inside: avoid;
    break-inside: avoid;
  }
}