.qlr-app {
  --wine: #5c173f;
  --wine2: #761e56;
  --gold: #e7a91e;
  min-height: 100vh;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top, rgba(231,169,30,.14), transparent 30%),
    linear-gradient(145deg, #310b24, #681747 58%, #3a0d2b);
}
.qlr-app * { box-sizing: border-box; }
.qlr-shell { width: min(100%, 1440px); margin: 0 auto; padding: clamp(28px,4vw,64px); }
.qlr-header { margin-bottom: clamp(20px,3vw,42px); text-align: center; }
.qlr-brand { color:#fff; font-size:clamp(20px,2vw,34px); font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.qlr-kicker { margin-top:10px; color:var(--gold); font-size:clamp(15px,1.5vw,25px); font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.qlr-header h1 { margin:10px 0 0; color:#fff; font-size:clamp(42px,6vw,92px); line-height:1; }
.qlr-card { width:min(100%,1200px); margin:0 auto; padding:clamp(20px,3vw,44px); border:1px solid rgba(255,255,255,.16); border-radius:34px; background:rgba(255,255,255,.08); box-shadow:0 34px 90px rgba(0,0,0,.3); }
.qlr-ranking { margin:0; padding:0; list-style:none; }
.qlr-row { display:grid; grid-template-columns:100px minmax(0,1fr) 160px; gap:20px; align-items:center; min-height:clamp(78px,8vh,112px); padding:14px 24px; border-bottom:1px solid rgba(255,255,255,.13); }
.qlr-row:last-child { border-bottom:0; }
.qlr-position { color:var(--gold); font-size:clamp(34px,4vw,62px); font-weight:900; text-align:center; }
.qlr-team { min-width:0; color:#fff; font-size:clamp(30px,4vw,60px); font-weight:800; overflow-wrap:anywhere; }
.qlr-score { color:var(--gold); font-size:clamp(34px,4vw,64px); font-weight:900; text-align:right; }
.qlr-position-1 { border-radius:20px; background:linear-gradient(90deg,rgba(231,169,30,.24),transparent); }
.qlr-waiting,.qlr-error { display:grid; min-height:420px; place-items:center; align-content:center; text-align:center; }
.qlr-waiting h2,.qlr-error h2 { margin:12px 0 4px; color:#fff; font-size:clamp(34px,5vw,68px); }
.qlr-waiting p,.qlr-error p { color:rgba(255,255,255,.86); font-size:clamp(18px,2vw,30px); }
.qlr-spinner { width:82px; height:82px; border:8px solid rgba(255,255,255,.15); border-top-color:var(--gold); border-radius:50%; animation:qlr-spin .9s linear infinite; }
@keyframes qlr-spin { to { transform:rotate(360deg); } }
@media (max-width:700px) {
  .qlr-row { grid-template-columns:58px minmax(0,1fr) 78px; gap:10px; padding:12px 8px; }
  .qlr-position { font-size:28px; }
  .qlr-team { font-size:26px; }
  .qlr-score { font-size:30px; }
}