:root{
    --bg:#ffffff; --card:#f7f9fb; --accent:#0b6efd; --muted:#667085;
    --success:#16a34a; --danger:#dc2626; --max-width:900px;
    --focus: 3px solid rgba(11,110,253,0.2);
  }
  html,body{height:100%; margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:var(--bg); color:#0f172a;}
  .wrap{max-width:var(--max-width); margin:28px auto; padding:20px;}
  header{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  h1{font-size:1.25rem;margin:0;}
  .card{background:var(--card); padding:18px;border-radius:12px; box-shadow:0 6px 18px rgba(10,16,34,0.04);}
  .center{display:flex;align-items:center;justify-content:center;}
  .img-frame{width:100%; max-width:640px; height:420px; background:#000; border-radius:8px; overflow:hidden; position:relative; display:flex;align-items:center;justify-content:center;}
  .img-frame img, .img-frame svg{max-width:100%; max-height:100%; display:block;}
  .controls{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
  .btn{padding:12px 18px;border-radius:8px;border:0;cursor:pointer;font-weight:600;min-width:120px;}
  .btn-star{background:#fef3c7;color:#92400e;}
.btn-star.selected {background:#fef3c7;color:#92400e;outline: 2px solid #b09115;}
  .btn-galaxy{background:#e0f2fe;color:#0369a1;}
.btn-galaxy.selected  {background:#e0f2fe;color:#0369a1;outline: 2px solid #4487b4;}
#ai-compare .summary-item {
  background: rgba(11, 110, 253, 0.04);
}



  .progress{margin-top:12px;font-size:0.9rem;color:var(--muted);}
  label{display:block;margin-top:12px;font-weight:600;}
  .slider-row{display:flex;align-items:center;gap:8px;}
  input[type="range"]{flex:1;}
  .reason{width:100%; min-height:72px; padding:10px; border-radius:8px; border:1px solid #dbeafe; margin-top:8px; resize:vertical;}
  .footer{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:14px;}
  .small{font-size:0.9rem;color:var(--muted);}
  .hidden{display:none;}
  .summary-item{display:flex;gap:12px;align-items:center;padding:8px;border-radius:8px;}
  .summary-item.correct{background:rgba(22,163,74,0.08);}
  .summary-item.wrong{background:rgba(220,38,38,0.06);}
  .expert{font-size:0.9rem;color:var(--muted); margin-top:6px; text-align: left;}
  .privacy{font-size:0.95rem;margin-bottom:12px;}
  .teacher{max-width:240px;padding:8px;border-radius:8px;border:1px solid #e6eef8;}
  .sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}

  @media (max-width:600px){
    .img-frame{height:260px;}
    .btn{min-width:48%;}
  }