
:root{
  --ros-bg:#f4f7fb;
  --ros-card:#ffffff;
  --ros-text:#172033;
  --ros-muted:#6c7891;
  --ros-border:#e4e9f2;
  --ros-shadow:0 18px 45px rgba(27,39,69,.09);
}
.ros-shell{max-width:980px;margin:30px auto;padding:20px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ros-text)}
.ros-header{display:flex;justify-content:space-between;gap:28px;align-items:center;margin-bottom:22px}
.ros-header h1{font-size:34px;line-height:1.1;margin:6px 0 8px}
.ros-header p{margin:0;color:var(--ros-muted)}
.ros-kicker{font-weight:800;font-size:12px;letter-spacing:.12em;color:#68758d}
.ros-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;min-width:330px}
.ros-mini{background:#fff;border:1px solid var(--ros-border);border-radius:18px;padding:14px;text-align:center;box-shadow:0 8px 22px rgba(30,45,80,.05)}
.ros-mini span{display:block;font-size:20px}
.ros-mini strong{display:block;font-size:23px;margin:3px 0}
.ros-mini small{color:var(--ros-muted)}
.ros-card{background:var(--ros-card);border:1px solid var(--ros-border);border-radius:24px;box-shadow:var(--ros-shadow);padding:28px}
.ros-battle{min-height:440px}
.ros-battle-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid var(--ros-border);padding-bottom:18px;margin-bottom:24px}
.ros-battle-title h2{margin:5px 0 0;font-size:28px}
.ros-badge{background:#eef4ff;border:1px solid #dae7ff;padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px}
.ros-type{display:inline-block;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:#f1f3f8;color:#5d6880;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.ros-question{font-size:27px;line-height:1.35;font-weight:760;margin:5px 0 22px}
.ros-options{display:grid;gap:10px;margin-bottom:18px}
.ros-option{width:100%;text-align:left;border:1px solid var(--ros-border);background:#fff;border-radius:15px;padding:15px 16px;font-size:16px;cursor:pointer}
.ros-option:hover{border-color:#b8c5d9;background:#fafcff}
.ros-option.ros-selected{border-color:#9db4d9;background:#f2f7ff}
.ros-primary{border:0;background:#1e293b;color:#fff;padding:13px 18px;border-radius:14px;font-size:16px;font-weight:750;cursor:pointer;text-decoration:none;display:inline-block}
.ros-primary:hover{opacity:.92;color:#fff}
.ros-answer{margin-top:22px;border-radius:18px;background:#f7f9fc;border:1px solid var(--ros-border);padding:18px}
.ros-answer-label{font-size:12px;font-weight:850;letter-spacing:.08em;color:#62708a;margin-bottom:8px}
#ros-answer-text{font-size:21px;font-weight:780;line-height:1.4}
.ros-explanation{margin-top:10px;color:#59667e;line-height:1.55}
.ros-rating{margin-top:24px}
.ros-rating-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ros-rate{border:1px solid var(--ros-border);background:#fff;border-radius:16px;padding:13px 8px;font-size:15px;font-weight:760;cursor:pointer}
.ros-rate small{display:block;color:#7d8799;font-weight:500;margin-top:4px}
.ros-rate:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,45,80,.08)}
.ros-done{text-align:center;padding:38px 10px}
.ros-big-icon{font-size:58px}
.ros-done h2{font-size:30px;margin:10px 0}
.ros-done p{color:var(--ros-muted);max-width:560px;margin:0 auto 20px}
.ros-footer-note{text-align:center;color:var(--ros-muted);font-size:13px;margin-top:15px}
.ros-login{text-align:center}
.ros-loading{opacity:.55;pointer-events:none}
@media(max-width:760px){
  .ros-header{flex-direction:column;align-items:stretch}
  .ros-stat-grid{min-width:0}
  .ros-rating-grid{grid-template-columns:1fr 1fr}
  .ros-question{font-size:22px}
  .ros-card{padding:20px}
}
