:root {
  --portal-red: #1b4d8a;
  --portal-red-dark: #0a1830;
  --portal-black: #090909;
  --portal-graphite: #202020;
  --portal-paper: #f6f4f3;
  --portal-line: rgba(9, 9, 9, .1);
}

html { accent-color: var(--portal-red); }

body {
  color: #202020;
  background:
    radial-gradient(circle at 7% 4%, rgba(27,77,138, .13), transparent 27rem),
    radial-gradient(circle at 95% 92%, rgba(9, 9, 9, .1), transparent 31rem),
    linear-gradient(145deg, #f7f5f4, #ebe7e5) fixed;
}

.login-card,
.box,
.card,
.hero {
  border: 1px solid rgba(255, 255, 255, .8);
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .67));
  box-shadow: 0 24px 58px rgba(9, 9, 9, .12), inset 0 1px 0 #fff;
  backdrop-filter: blur(26px) saturate(150%);
}

body > .login-card,
body > .box {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

body > .login-card::before,
body > .box::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  content: '';
  background: linear-gradient(90deg, var(--portal-red), #ff394a 65%, var(--portal-black));
}

.login-card .crest,
.box .head img {
  padding: 5px;
  border: 1px solid rgba(9, 9, 9, .08);
  background: rgba(255, 255, 255, .9);
  filter: drop-shadow(0 12px 18px rgba(9, 9, 9, .17));
}

.login-card h1,
.box .head h1 {
  color: var(--portal-black);
  font-family: 'Barlow Condensed', 'Outfit', sans-serif;
  font-size: 29px;
  line-height: .96;
  text-transform: uppercase;
}

.login-card p.sub,
.box .head p,
.footer-note {
  color: #737373;
}

.field input,
.box input,
select,
textarea {
  color: #151515;
  border-color: rgba(9, 9, 9, .13);
  background: rgba(255, 255, 255, .76);
}

.field input:focus,
.box input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(27,77,138, .58);
  box-shadow: 0 0 0 4px rgba(27,77,138, .09);
}

.btn-entrar,
.btn-submit,
.box button {
  color: #fff;
  background: linear-gradient(110deg, var(--portal-red), var(--portal-red-dark));
  box-shadow: 0 15px 28px rgba(27,77,138, .24);
}

.topbar,
.top {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 80% 0, rgba(27,77,138, .42), transparent 24rem),
    linear-gradient(100deg, rgba(9, 9, 9, .98), rgba(29, 29, 29, .96));
  box-shadow: 0 14px 40px rgba(9, 9, 9, .2);
}

.topbar a,
.top a {
  color: #fff;
}

.athlete-square,
.top .brand img {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .1);
}

.wrap { position: relative; }
.card { border-radius: 20px; }
.card h3 { color: #4a4a4a; }
.slider-row input[type='range'] { accent-color: var(--portal-red); }
.slider-val { background: linear-gradient(135deg, var(--portal-black), #303030); }
.ja-respondeu { color: #8b0008; border-color: rgba(27,77,138, .2); background: rgba(255, 231, 233, .82); }

.macro-banner {
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 46, 63, .45), transparent 15rem),
    linear-gradient(130deg, var(--portal-black), #242424);
  box-shadow: 0 22px 50px rgba(9, 9, 9, .2);
}

.jogo-data,
.date {
  color: #fff;
  background: linear-gradient(145deg, var(--portal-red), var(--portal-red-dark));
  box-shadow: 0 8px 17px rgba(27,77,138, .18);
}

.sessao-dia .num { color: var(--portal-red-dark); }

.top .brand img { padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .94); }
.hero { border-radius: 26px; }
.photo { color: var(--portal-red-dark); background: #f2dcde; }
.category { color: #fff; background: linear-gradient(110deg, var(--portal-red), var(--portal-red-dark)); }
.chip { border: 1px solid rgba(27,77,138, .08); background: rgba(27,77,138, .055); }
.chip b { color: var(--portal-red-dark); }
.eval { background: rgba(9, 9, 9, .045); }
.bar { background: rgba(9, 9, 9, .1); }
.bar span { background: linear-gradient(90deg, var(--portal-red), #ff4352); }

.alert-error,
.flash { color: #8b0008; background: #ffe6e8; }
.alert-success { color: #145b35; background: #e1f5e9; }

@media (max-width: 850px) {
  .topbar,
  .top { gap: 14px; }
  .topbar > div:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .topbar a { margin-left: 0; }
}

@media (max-width: 520px) {
  body > .login-card,
  body > .box { border-radius: 22px; }
  .topbar { align-items: flex-start; }
  .athlete-square { width: 46px; height: 46px; }
  .card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}