*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#4c51bf;
  --primary-200:#a5b4fc;
  --primary-300:#c7d2fe;
  --badge-start:#eef2ff;
  --badge-end:#e0f2fe;
  --prob-start:#eef2ff;
  --prob-end:#f0f9ff;
}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#e9eef5;color:#1f2937;min-height:100vh}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;flex-direction:column;gap:6px;align-items:center;margin:28px 0}
.title{font-size:28px;font-weight:800;color:var(--primary)}
.subtitle{font-size:14px;color:#6b7280}
.nav{display:flex;gap:8px;justify-content:center;margin:10px 0 20px 0}
.neo-btn{border:none;border-radius:12px;background:#ffffff;box-shadow:8px 8px 18px #c5cad1,-8px -8px 18px #fff;color:var(--primary);font-weight:700;padding:10px 16px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;border:1px solid var(--primary-300)}
.neo-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.neo-btn:active{box-shadow:inset 8px 8px 18px #c5cad1,inset -8px -8px 18px #fff}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{border-radius:16px;background:#ffffff;border:1px solid #e5e7eb;box-shadow:10px 10px 22px #c5cad1,-10px -10px 22px #fff;padding:16px;transition:transform .2s ease,box-shadow .2s ease,text-decoration .2s;color:inherit;border-top:4px solid var(--primary-200)}
.card:hover{transform:translateY(-3px);box-shadow:12px 12px 26px #c0c5cc,-12px -12px 26px #fff}
.card-title{font-size:18px;font-weight:800;color:#111827;margin-bottom:6px}
.card-desc{font-size:14px;color:#475569}
.section{margin:18px 0;padding:12px;border-radius:16px;background:#ffffff;border:1px solid #e5e7eb;box-shadow:6px 6px 14px #c5cad1,-6px -6px 14px #fff;position:relative}
.section:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--primary);border-top-left-radius:16px;border-bottom-left-radius:16px}
.section:nth-of-type(2n){background:#fdfbff}
.section-title{font-size:18px;font-weight:800;color:#1f2937;margin:10px 0 12px 2px}
.badge{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;color:#1f2937;background:linear-gradient(90deg,var(--badge-start),var(--badge-end));border:1px solid var(--primary-300)}
.chip{display:inline-block;border-radius:10px;background:#ffffff;box-shadow:6px 6px 14px #c5cad1,-6px -6px 14px #fff;padding:6px 10px;font-size:12px;font-weight:700;color:#374151;border:1px solid #e5e7eb}
.neo-input{height:36px;padding:8px 10px;border:1px solid #cbd5e1;border-radius:10px;background:#ffffff;color:#111827;outline:none;box-shadow:inset 2px 2px 6px rgba(0,0,0,0.06), inset -2px -2px 6px #fff;transition:border-color .15s ease, box-shadow .15s ease}
.neo-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(76,81,191,0.18), inset 2px 2px 6px rgba(0,0,0,0.06), inset -2px -2px 6px #fff}
.neo-input::placeholder{color:#9ca3af}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.footer{display:flex;justify-content:center;margin:24px 0;color:#6b7280;font-size:12px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.title{font-size:22px}}
.quiz{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.quiz-question{font-weight:800;color:#1f2937}
.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{justify-content:flex-start}
.quiz-option.selected{box-shadow:inset 6px 6px 14px #c5cad1,inset -6px -6px 14px #fff;transform:translateY(1px)}
.quiz-option.ok{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.quiz-option.bad{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}
.quiz-option:disabled{opacity:1;cursor:default}
.quiz-option:disabled.ok{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.quiz-option:disabled.bad{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}
.quiz-result{font-weight:800;color:#374151;margin:10px 0}
.progress{position:absolute;top:10px;right:10px}
.progress .badge{background:#ecfdf5;border-color:#bbf7d0;color:#065f46}
.hidden{display:none !important}
#prob, #ptext{
  display:block;
  flex-basis:100%;
  margin-top:8px;
  background:linear-gradient(90deg,var(--prob-start),var(--prob-end));
  border-color:var(--primary-300);
  color:#1f2937;
}
.neo-btn.mode.active{background:var(--primary);border-color:var(--primary);color:#ffffff}
.neo-btn#gen,.neo-btn.gen{background:linear-gradient(90deg,#ffe4f0,#ffeaf5);border:1px solid #f9a8d4;color:#be185d}
.neo-btn#gen:hover,.neo-btn.gen:hover{background:#ec4899;border-color:#ec4899;color:#ffffff}
.neo-btn#gen:active,.neo-btn.gen:active{box-shadow:inset 8px 8px 18px #c5cad1,inset -8px -8px 18px #fff}
.neo-btn.active{background:var(--primary);color:#ffffff;border-color:var(--primary);box-shadow:inset 8px 8px 18px #c5cad1,inset -8px -8px 18px #fff}
.neo-btn.bad{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}
.neo-btn:disabled{opacity:1;cursor:default}