@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --bg:#07100d;--surface:#0d1814;--surface-2:#12231c;--surface-3:#0a1410;
  --text:#edfff7;--muted:#8aa198;--primary:#9fef00;--primary-dark:#77b900;
  --border:#20382f;--success:#9fef00;--danger:#ff5d73;--warning:#ffc857;
  --cyan:#2ee6c5;--shadow:0 18px 55px rgba(0,0,0,.32)
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 10% 0,rgba(159,239,0,.05),transparent 25%),var(--bg);color:var(--text);font:15px/1.55 'Space Grotesk',Segoe UI,Arial,sans-serif}
a{color:var(--primary);text-decoration:none}a:hover{color:#c5ff55}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.site-header{background:rgba(7,16,13,.92);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;backdrop-filter:blur(14px)}
.header-inner{display:flex;justify-content:space-between;align-items:center;min-height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand-mark{width:42px;height:42px;border:1px solid rgba(159,239,0,.35);border-radius:4px;background:rgba(159,239,0,.08);display:grid;place-items:center;color:var(--primary);font-weight:800;box-shadow:inset 0 0 18px rgba(159,239,0,.04)}
.brand small{display:block;color:var(--muted);font-family:'JetBrains Mono',monospace}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.nav a{color:#c9d9d2}.nav a:hover{color:var(--primary)}
.user-pill{padding:7px 11px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px}
.page{padding:34px 0 60px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 0}.hero.compact{padding-top:8px}
.hero h1{font-size:clamp(28px,4vw,44px);margin:4px 0 8px;letter-spacing:-.04em}.hero p{color:var(--muted);max-width:720px}
.eyebrow{font:700 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--primary)}
.card,.auth-card,.lab-card,.stat-card{background:linear-gradient(180deg,var(--surface),#0a1511);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow)}
.card,.lab-card,.stat-card{position:relative;overflow:hidden}.card:before,.lab-card:before,.stat-card:before{content:'';position:absolute;left:0;top:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(159,239,0,.7),transparent);opacity:.65}
.card{padding:24px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-card{padding:20px}.stat-card span{display:block;color:var(--muted)}.stat-card strong{display:block;font-size:30px;margin-top:4px;color:var(--primary)}
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lab-card{padding:20px;transition:.2s}.lab-card:hover{transform:translateY(-3px);border-color:#385f4e;box-shadow:0 18px 45px rgba(0,0,0,.38),0 0 0 1px rgba(159,239,0,.05)}
.lab-card h2,.lab-card h3{margin:12px 0 8px}.lab-card p{color:var(--muted)}
.lab-meta,.section-heading,.lab-stats{display:flex;justify-content:space-between;gap:12px;align-items:center}.lab-stats{font-size:13px;color:var(--muted);margin:18px 0 8px}.deadline{font-size:13px;margin-bottom:14px;color:#c4d4cc}
.badge,.status{display:inline-flex;padding:6px 10px;border-radius:3px;font:700 11px 'JetBrains Mono',monospace}.badge{background:rgba(159,239,0,.09);border:1px solid rgba(159,239,0,.22);color:var(--primary)}
.status{background:#17251f;color:#9db0a8;text-transform:capitalize}.status.completed{background:rgba(159,239,0,.09);color:var(--success)}.status.in_progress{background:rgba(255,200,87,.09);color:var(--warning)}.status.not_started{background:#14201b;color:#879b92}
.btn,button{display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--primary);border-radius:3px;background:var(--primary);color:#07100d;padding:11px 16px;font:700 12px 'JetBrains Mono',monospace;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}.btn:hover,button:hover{background:#b9ff35;box-shadow:0 0 24px rgba(159,239,0,.14)}.btn.full{width:100%}
.auth-shell{min-height:65vh;display:grid;place-items:center}.auth-card{width:min(480px,100%);padding:30px}
label{display:block;font:600 12px 'JetBrains Mono',monospace;margin:14px 0 6px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:3px;background:#07110d;color:var(--text);font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(159,239,0,.08)}
.check{display:flex;gap:8px;align-items:center}.check input{width:auto}.muted{color:var(--muted)}
.demo-box,.notice,.success-panel{margin-top:20px;padding:16px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border)}.success-panel{background:rgba(159,239,0,.07);border-color:rgba(159,239,0,.22)}
.flash{padding:13px 15px;border-radius:3px;margin-bottom:18px}.flash.success{background:rgba(159,239,0,.08);color:var(--success);border:1px solid rgba(159,239,0,.25)}.flash.error{background:rgba(255,93,115,.08);color:var(--danger);border:1px solid rgba(255,93,115,.25)}
.grid-two{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--surface)}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--border);vertical-align:top}th{font:600 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}tr:hover td{background:rgba(159,239,0,.025)}
.hash{display:inline-block;max-width:420px;word-break:break-all;font-family:'JetBrains Mono',monospace}.flag{display:inline-block;padding:10px 12px;background:#050b09;color:var(--primary);border:1px solid rgba(159,239,0,.25);border-radius:3px;font-family:'JetBrains Mono',monospace}
.details{display:grid;grid-template-columns:1fr 1fr;gap:12px}.details div{padding:12px;background:#09130f;border:1px solid var(--border);border-radius:3px}.details dt{font-size:12px;color:var(--muted)}.details dd{margin:3px 0 0;font-weight:700}
.footer{padding:24px 0;border-top:1px solid var(--border);color:var(--muted);background:#07100d}
@media(max-width:900px){.stat-grid,.lab-grid{grid-template-columns:repeat(2,1fr)}.grid-two{grid-template-columns:1fr}.header-inner,.hero{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.stat-grid,.lab-grid{grid-template-columns:1fr}.nav{gap:10px}}

/* =========================================================
   Student dashboard and labs cyber components
   Merged into the main stylesheet
   ========================================================= */

/* =========================================================
   MyEduGate Labs — Student cyber pages patch
   Append this file AFTER the main style.css
   ========================================================= */

.page {
  position: relative;
  padding: 40px 0 72px;
}

.page::before {
  content: "";
  position: fixed;
  inset: 72px 0 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 10%, rgba(154, 255, 0, .055), transparent 28%),
    radial-gradient(circle at 85% 45%, rgba(0, 255, 196, .035), transparent 30%),
    linear-gradient(rgba(154,255,0,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,255,0,.018) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
}

.cyber-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  align-items: center;
  gap: 42px;
  padding: 34px 0 42px;
}

.terminal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #a8ff60;
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: lowercase;
}

.terminal-dot,
.online-pulse {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9aff00;
  box-shadow: 0 0 0 5px rgba(154,255,0,.08), 0 0 16px rgba(154,255,0,.8);
}

.online-pulse {
  animation: cyberPulse 1.8s ease-in-out infinite;
}

@keyframes cyberPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.78); }
}

.cyber-hero h1,
.cyber-page-header h1 {
  margin: 15px 0 12px;
  max-width: 760px;
  color: #f7f9f8;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.03;
  letter-spacing: -.055em;
}

.cyber-hero h1 span {
  color: #b3ff66;
  text-shadow: 0 0 26px rgba(154,255,0,.16);
}

.cyber-hero-copy > p,
.cyber-page-header p {
  max-width: 700px;
  margin: 0;
  color: #98a39e;
  font-size: 16px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.system-online,
.toolbar-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #aab4af;
  font-size: 13px;
}

.cyber-btn,
.btn.cyber-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #9aff00;
  border-radius: 7px;
  color: #081006;
  background: #9aff00;
  box-shadow: 0 0 0 rgba(154,255,0,0);
  font-weight: 800;
  letter-spacing: .01em;
}

.cyber-btn:hover,
.btn.cyber-btn:hover {
  color: #081006;
  background: #b3ff66;
  box-shadow: 0 0 26px rgba(154,255,0,.18);
  transform: translateY(-1px);
}

.cyber-terminal {
  overflow: hidden;
  border: 1px solid rgba(154,255,0,.2);
  border-radius: 14px;
  background: rgba(5,13,10,.86);
  box-shadow: 0 22px 65px rgba(0,0,0,.28), inset 0 0 45px rgba(154,255,0,.018);
}

.terminal-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(154,255,0,.12);
  background: rgba(255,255,255,.025);
}

.terminal-topbar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #47504c;
}
.terminal-topbar span:first-child { background: #ff5f57; }
.terminal-topbar span:nth-child(2) { background: #febc2e; }
.terminal-topbar span:nth-child(3) { background: #28c840; }

.terminal-topbar strong {
  margin-left: auto;
  color: #6f7d76;
  font: 600 10px ui-monospace, monospace;
  letter-spacing: .08em;
}

.terminal-body {
  min-height: 230px;
  padding: 22px;
  color: #d4ddd8;
  font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.terminal-body p { margin: 0 0 5px; }
.prompt { color: #9aff00; }
.terminal-output { margin-left: 18px !important; color: #87968e; }
.terminal-output b { color: #e7eee9; font-weight: 600; }
.terminal-success {
  margin-left: 18px !important;
  color: #9aff00;
  text-shadow: 0 0 15px rgba(154,255,0,.35);
}

.cyber-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin: 0 0 42px;
}

.cyber-stat-card {
  position: relative;
  min-height: 145px;
  display: flex;
  gap: 15px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #26322c;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15,23,20,.98), rgba(9,16,13,.98));
}

.cyber-stat-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  opacity: .55;
  background: linear-gradient(90deg, #9aff00, transparent 72%);
}

.stat-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(154,255,0,.22);
  border-radius: 9px;
  color: #9aff00;
  background: rgba(154,255,0,.055);
  font: 800 15px ui-monospace, monospace;
}

.cyber-stat-card span {
  display: block;
  color: #8e9a94;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cyber-stat-card strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 29px;
  line-height: 1.1;
}

.cyber-stat-card strong em {
  color: #78827d;
  font-size: 16px;
  font-style: normal;
}

.cyber-stat-card small {
  display: block;
  margin-top: 7px;
  color: #68736d;
}

.mini-progress {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: #1b2520;
}

.mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9aff00;
  box-shadow: 0 0 12px rgba(154,255,0,.6);
}

.cyber-section {
  padding: 30px;
  border: 1px solid #243029;
  border-radius: 15px;
  background: rgba(10,17,14,.72);
}

.cyber-section-heading,
.cyber-page-header,
.labs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cyber-section-heading {
  margin-bottom: 24px;
}

.cyber-section-heading h2 {
  margin: 7px 0 4px;
  color: #f4f7f5;
  font-size: 24px;
}

.cyber-section-heading p {
  margin: 0;
  color: #78847e;
}

.text-link {
  color: #a8ff60;
  font-weight: 700;
  white-space: nowrap;
}

.text-link:hover { color: #c3ff8a; }

.cyber-empty-state {
  min-height: 245px;
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 30px;
  border: 1px dashed #314039;
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(154,255,0,.025), transparent 38%),
    rgba(4,10,8,.55);
}

.empty-radar {
  position: relative;
  width: 105px;
  height: 105px;
  border: 1px solid rgba(154,255,0,.3);
  border-radius: 50%;
  background:
    linear-gradient(rgba(154,255,0,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,255,0,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  overflow: hidden;
}

.empty-radar::before,
.empty-radar::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(154,255,0,.18);
  border-radius: 50%;
  inset: 20px;
}
.empty-radar::after { inset: 40px; }

.empty-radar span {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 50%;
  top: 0;
  transform-origin: left bottom;
  background: linear-gradient(135deg, rgba(154,255,0,.28), transparent 70%);
  animation: radarSpin 2.8s linear infinite;
}

.empty-radar i {
  position: absolute;
  width: 6px;
  height: 6px;
  left: 66%;
  top: 38%;
  border-radius: 50%;
  background: #9aff00;
  box-shadow: 0 0 14px #9aff00;
}

@keyframes radarSpin {
  to { transform: rotate(360deg); }
}

.cyber-empty-state h3,
.cyber-empty-state h2 {
  margin: 7px 0 8px;
  color: #f4f7f5;
  font-size: 23px;
}

.cyber-empty-state p {
  max-width: 610px;
  margin: 0;
  color: #7f8b85;
  line-height: 1.7;
}

.empty-command {
  min-width: 210px;
  padding: 15px;
  border-left: 2px solid #9aff00;
  background: #07100b;
}

.empty-command code {
  display: block;
  color: #a8ff60;
  font: 12px ui-monospace, monospace;
}

.empty-command span {
  display: block;
  margin-top: 8px;
  color: #65716b;
  font-size: 11px;
}

.cyber-lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.cyber-lab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 21px;
  border: 1px solid #27342e;
  border-radius: 12px;
  background: linear-gradient(145deg, #101914, #0a110e);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cyber-lab-card:hover {
  transform: translateY(-3px);
  border-color: rgba(154,255,0,.42);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

.lab-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lab-code {
  margin-top: 22px;
  color: #59665f;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: .12em;
}

.cyber-lab-card h3,
.cyber-lab-card h2 {
  margin: 8px 0 8px;
  color: #f2f6f3;
  font-size: 20px;
  letter-spacing: -.02em;
}

.cyber-lab-card > p {
  flex: 1;
  margin: 0 0 18px;
  color: #849089;
  line-height: 1.7;
}

.lab-info-row,
.lab-mark-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #202b25;
  color: #69756e;
  font-size: 12px;
}

.lab-info-row b,
.lab-mark-row strong {
  color: #dce5df;
}

.cyber-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 0 17px;
  border: 1px solid #222f28;
  border-radius: 9px;
  overflow: hidden;
  background: #222f28;
}

.cyber-details div {
  padding: 12px;
  background: #0c1511;
}

.cyber-details dt {
  color: #657169;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.cyber-details dd {
  margin: 4px 0 0;
  color: #dbe4de;
  font-size: 13px;
  font-weight: 700;
}

.deadline,
.completed-note {
  margin: 2px 0 15px;
  color: #6e7a73;
  font: 11px/1.5 ui-monospace, monospace;
}

.completed-note {
  color: #9aff00;
}

.cyber-page-header {
  padding: 28px 0 32px;
}

.cyber-page-header h1 {
  font-size: clamp(36px, 5vw, 58px);
}

.page-header-chip {
  min-width: 150px;
  padding: 17px 20px;
  border: 1px solid #2a3730;
  border-radius: 11px;
  background: #0c1511;
}

.page-header-chip span {
  display: block;
  color: #9aff00;
  font-size: 30px;
  font-weight: 800;
}

.page-header-chip small {
  color: #758078;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.labs-toolbar {
  margin-bottom: 24px;
  padding: 13px 16px;
  border: 1px solid #222e28;
  border-radius: 9px;
  background: #09110d;
}

.toolbar-command code {
  color: #637068;
  font: 11px ui-monospace, monospace;
}

.labs-empty {
  grid-template-columns: 120px minmax(0,1fr) auto;
  min-height: 330px;
}

@media (max-width: 1050px) {
  .cyber-hero {
    grid-template-columns: 1fr;
  }
  .cyber-terminal {
    max-width: 700px;
  }
  .cyber-stat-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .cyber-lab-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .page { padding-top: 24px; }
  .cyber-hero { padding-top: 14px; }
  .cyber-stat-grid,
  .cyber-lab-grid {
    grid-template-columns: 1fr;
  }
  .cyber-section {
    padding: 18px;
  }
  .cyber-section-heading,
  .cyber-page-header,
  .labs-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .cyber-empty-state,
  .labs-empty {
    grid-template-columns: 1fr;
  }
  .empty-command {
    width: 100%;
  }
  .page-header-chip {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-pulse,
  .empty-radar span {
    animation: none;
  }
}

/* =========================================================
   Profiles, scoreboard, streaks and First Blood
   ========================================================= */
.nav-counter{display:inline-flex!important;align-items:center;gap:5px;min-height:34px;padding:5px 9px!important;border:1px solid #2b3d34;border-radius:7px;background:#0b1511;color:#dce8e1!important;font:700 12px 'JetBrains Mono',monospace}.nav-counter:hover{border-color:rgba(159,239,0,.45);background:#101d17}.nav-counter small{font-size:8px;text-transform:uppercase;letter-spacing:.06em}.counter-flame{filter:saturate(1.1)}.blood-counter{border-color:rgba(255,74,96,.32);color:#ff8595!important}.blood-counter .counter-flame{filter:hue-rotate(300deg) saturate(2)}
.nav-profile{display:flex!important;align-items:center;gap:8px;padding:5px 8px!important;border:1px solid #25362e;border-radius:8px;background:#0c1612;color:#dbe7e0!important}.nav-profile img,.nav-avatar-initials{width:28px;height:28px;border-radius:50%;object-fit:cover}.nav-avatar-initials{display:grid;place-items:center;background:rgba(159,239,0,.1);color:#a8ff60;font:700 10px 'JetBrains Mono',monospace}
.profile-avatar{position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(159,239,0,.35);border-radius:50%;background:linear-gradient(145deg,#13231b,#08100d);color:#b8ff72;font-weight:800}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar.large{width:142px;height:142px;font-size:42px;box-shadow:0 0 0 8px rgba(159,239,0,.025),0 20px 50px rgba(0,0,0,.3)}.profile-online{position:absolute;right:8px;bottom:10px;width:16px;height:16px;border:3px solid #08110d;border-radius:50%;background:#9fef00;box-shadow:0 0 14px rgba(159,239,0,.8)}
.profile-hero{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:36px 0 30px}.profile-identity{display:flex;align-items:center;gap:28px}.profile-identity h1{margin:9px 0 4px;font-size:clamp(36px,5vw,58px);line-height:1;letter-spacing:-.05em}.profile-handle{margin:0;color:#7f8f87;font-family:'JetBrains Mono',monospace}.profile-headline{margin:14px 0 0;color:#d6e2dc;font-size:16px}.profile-bio{max-width:720px;margin:10px 0 0;color:#829189;line-height:1.7}.profile-rank-card{min-width:165px;padding:19px;border:1px solid #2c3d34;border-radius:12px;background:#0b1611;text-align:center}.profile-rank-card small,.profile-rank-card span{display:block;color:#74837b;text-transform:uppercase;letter-spacing:.08em}.profile-rank-card strong{display:block;margin:5px 0;color:#9fef00;font-size:42px}.profile-rank-card span{font:10px 'JetBrains Mono',monospace}
.profile-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.profile-stats-grid article{position:relative;padding:19px;border:1px solid #27382f;border-radius:11px;background:linear-gradient(145deg,#101b16,#09110e);overflow:hidden}.profile-stats-grid article:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#9fef00,transparent)}.profile-stats-grid span{display:block;color:#839188;font-size:12px;text-transform:uppercase;letter-spacing:.07em}.profile-stats-grid strong{display:block;margin:8px 0 4px;color:#fff;font-size:32px}.profile-stats-grid small{color:#66746d}.profile-stats-grid .blood-stat:after{background:linear-gradient(90deg,#ff4b62,transparent)}.blood-stat strong{color:#ff7183!important}.streak-stat strong{color:#ffbd4a!important}
.profile-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:22px;align-items:start}.profile-sidebar{display:grid;gap:18px}.profile-main-section{min-width:0}.profile-solved-list{display:grid;gap:10px}.profile-solved-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:15px;padding:15px;border:1px solid #23332b;border-radius:10px;background:#0a1410}.solved-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(159,239,0,.3);border-radius:9px;color:#9fef00;background:rgba(159,239,0,.06);font-weight:800}.solved-copy h3{margin:0;color:#eef5f1;font-size:16px}.solved-copy p{margin:5px 0;color:#718078;font-size:12px}.solved-copy small{color:#56645d;font-family:'JetBrains Mono',monospace}.solved-title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.solved-score{color:#9fef00;font-size:22px;font-weight:800}.solved-score span{color:#637169;font-size:12px}.first-blood-badge{display:inline-flex!important;padding:5px 8px;border:1px solid rgba(255,75,98,.38);border-radius:5px;color:#ff7486!important;background:rgba(255,75,98,.07)!important;font:700 10px 'JetBrains Mono',monospace!important;text-transform:uppercase}.profile-empty{padding:26px;border:1px dashed #2b3b33;border-radius:10px;color:#748279;text-align:center;background:#08110d}
.profile-editor h2,.classmates-card h2{margin:7px 0 15px}.profile-editor label{margin-top:14px}.profile-editor input,.profile-editor textarea{background:#07110d;border-color:#294037;color:#e9f4ee}.profile-editor input[type=file]{padding:10px}.field-help{display:block;margin:6px 0 12px;color:#607068;font-size:11px}.classmate-list{display:grid;gap:8px;margin-bottom:15px}.classmate-list a,.dashboard-classmate-list a{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #223129;border-radius:9px;background:#09120e;color:#dce8e1}.classmate-list a:hover,.dashboard-classmate-list a:hover{border-color:rgba(159,239,0,.35);background:#0d1813}.classmate-list a>span:nth-child(2),.dashboard-classmate-list a>span:nth-child(2){min-width:0;flex:1}.classmate-list strong,.dashboard-classmate-list strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.classmate-list small,.dashboard-classmate-list small{display:block;color:#67766e}.mini-avatar{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;border:1px solid #365044;border-radius:50%;background:#13231b;color:#aaff61;font:700 11px 'JetBrains Mono',monospace}.mini-avatar img{width:100%;height:100%;object-fit:cover}
.scoreboard-header{padding-bottom:22px}.podium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;align-items:end;margin:5px 0 22px}.podium-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:25px 18px;border:1px solid #2a3a32;border-radius:13px;background:linear-gradient(145deg,#101b16,#08110d);color:#eaf3ee;text-align:center}.podium-card:hover{transform:translateY(-3px);border-color:rgba(159,239,0,.45)}.podium-card.place-1{min-height:310px;border-color:rgba(159,239,0,.5);box-shadow:inset 0 2px #9fef00}.podium-card.place-2{min-height:280px}.podium-card.place-3{min-height:265px}.podium-rank{position:absolute;top:12px;right:13px;color:#9fef00;font:800 14px 'JetBrains Mono',monospace}.podium-avatar{width:88px;height:88px;font-size:25px}.podium-card h2{margin:14px 0 2px;font-size:18px}.podium-card p{margin:0;color:#75837b}.podium-card>strong{margin-top:14px;color:#9fef00;font-size:25px}.podium-meta{display:flex;gap:12px;margin-top:13px;color:#9aa8a0;font:700 11px 'JetBrains Mono',monospace}.red-flame{color:#ff6f81}.scoreboard-table-section{margin-bottom:20px}.scoreboard-list{display:grid;gap:8px}.scoreboard-row{display:grid;grid-template-columns:48px 42px minmax(180px,1fr) 90px 80px 65px 80px 22px;align-items:center;gap:10px;padding:11px 13px;border:1px solid #23322a;border-radius:9px;background:#09130f;color:#dce8e1}.scoreboard-row:hover{border-color:rgba(159,239,0,.38);background:#0d1813}.scoreboard-row.is-current-user{border-color:rgba(159,239,0,.5);box-shadow:inset 3px 0 #9fef00}.score-rank{color:#9fef00;font:800 13px 'JetBrains Mono',monospace}.score-user strong,.score-user small{display:block}.score-user small{color:#69776f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-metric small,.score-metric strong{display:block}.score-metric small{color:#64726a;font-size:9px;text-transform:uppercase}.score-metric strong{color:#f3f7f5}.score-badge{display:inline-flex;justify-content:center;padding:6px;border:1px solid #304137;border-radius:6px;font:700 11px 'JetBrains Mono',monospace}.streak-badge{color:#ffbd4a}.scoreboard-row .first-blood-badge{justify-content:center}.score-arrow{color:#9fef00}
.dashboard-social-grid{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:18px;margin-top:20px}.dashboard-profile-card{display:flex;align-items:center;gap:20px}.dashboard-profile-card h2{margin:6px 0}.dashboard-profile-card p{color:#78877e}.dashboard-avatar{width:92px;height:92px;flex:0 0 auto;font-size:26px}.dashboard-classmate-list{display:grid;gap:7px}.dashboard-classmate-list a{display:grid;grid-template-columns:38px minmax(0,1fr) 56px 56px 15px}.classmate-score{text-align:center}.classmate-score b{display:block;color:#dfe9e4}.gamified-stat-grid .blood-card:after{background:linear-gradient(90deg,#ff4b62,transparent 72%)}.gamified-stat-grid .blood-card .stat-icon{color:#ff7183;border-color:rgba(255,75,98,.35);background:rgba(255,75,98,.06)}.gamified-stat-grid .streak-card .stat-icon{color:#ffbd4a;border-color:rgba(255,189,74,.32);background:rgba(255,189,74,.06)}
@media(max-width:1050px){.profile-layout{grid-template-columns:1fr}.profile-stats-grid{grid-template-columns:repeat(2,1fr)}.scoreboard-row{grid-template-columns:45px 40px minmax(160px,1fr) 75px 65px 60px 70px 20px}.dashboard-social-grid{grid-template-columns:1fr}}
@media(max-width:760px){.profile-hero,.profile-identity{align-items:flex-start;flex-direction:column}.profile-rank-card{width:100%;text-align:left}.profile-stats-grid,.podium-grid{grid-template-columns:1fr}.podium-card.place-1,.podium-card.place-2,.podium-card.place-3{min-height:0}.scoreboard-row{grid-template-columns:40px 38px minmax(0,1fr) 58px 20px}.scoreboard-row .score-metric:nth-of-type(2),.scoreboard-row .score-badge{display:none}.dashboard-profile-card{align-items:flex-start;flex-direction:column}.dashboard-classmate-list a{grid-template-columns:38px minmax(0,1fr) 50px 14px}.dashboard-classmate-list .classmate-score:nth-of-type(2){display:none}.nav-counter small,.nav-profile>span:last-child{display:none}}
@media(max-width:520px){.profile-stats-grid{grid-template-columns:1fr}.profile-solved-item{grid-template-columns:38px minmax(0,1fr)}.solved-score{grid-column:2}.profile-avatar.large{width:110px;height:110px}.nav{gap:7px}.nav>a{font-size:12px}}

/* =========================================================
   Layout footer repair + animated navigation flames
   ========================================================= */

/* Keep the footer at the bottom on every short page. */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header {
  flex: 0 0 auto;
  width: 100%;
}

.page {
  flex: 1 0 auto;
  width: 100%;
}

.footer {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: 100%;
  margin-top: auto;
  padding: 22px 0;
  border-top: 1px solid #20382f;
  background:
    linear-gradient(180deg, rgba(7,16,13,.98), #050c09);
  box-shadow: 0 -12px 35px rgba(0,0,0,.12);
}

.footer .container {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* Remove the old counter boxes. */
.nav-counter {
  position: relative;
  min-height: 42px;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 3px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #edf7f1 !important;
  overflow: visible;
}

.nav-counter:hover {
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}

.nav-counter small {
  margin-left: 1px;
  color: #899991;
  font-size: 8px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/*
 * The existing emoji is hidden visually and replaced by a CSS flame.
 * No markup changes are required.
 */
.counter-flame {
  position: relative;
  width: 22px;
  height: 29px;
  flex: 0 0 22px;
  display: inline-block;
  font-size: 0 !important;
  line-height: 0;
  filter: none !important;
  transform-origin: 50% 92%;
  animation: flameSway 1.15s ease-in-out infinite alternate;
}

.counter-flame::before,
.counter-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform-origin: 50% 100%;
}

/* Outer orange/yellow flame. */
.counter-flame::before {
  width: 18px;
  height: 26px;
  margin-left: -9px;
  border-radius: 70% 30% 62% 38% / 72% 45% 55% 28%;
  background:
    radial-gradient(circle at 52% 73%, #fff7a3 0 12%, transparent 13%),
    radial-gradient(circle at 50% 72%, #ffd83d 0 28%, transparent 29%),
    linear-gradient(155deg, #ffef63 3%, #ff9f1c 43%, #ff4d00 79%, #cf2100 100%);
  box-shadow:
    0 0 7px rgba(255,167,28,.9),
    0 0 16px rgba(255,87,0,.58),
    0 0 27px rgba(255,61,0,.22);
  transform: rotate(-5deg) scaleY(1);
  animation: flameOuter .72s ease-in-out infinite alternate;
}

/* Inner hot flame. */
.counter-flame::after {
  width: 9px;
  height: 16px;
  margin-left: -4px;
  bottom: 3px;
  border-radius: 62% 38% 58% 42% / 75% 48% 52% 25%;
  background: linear-gradient(165deg, #fffbd1 0%, #fff15c 42%, #ff9e17 100%);
  box-shadow: 0 0 7px rgba(255,244,104,.9);
  transform: rotate(5deg);
  animation: flameInner .54s ease-in-out infinite alternate-reverse;
}

/* Red First Blood flame. */
.blood-counter {
  border: 0 !important;
  background: transparent !important;
  color: #ff7587 !important;
}

.blood-counter:hover {
  color: #ff9baa !important;
}

.blood-counter .counter-flame::before {
  background:
    radial-gradient(circle at 52% 73%, #ffd3d9 0 12%, transparent 13%),
    radial-gradient(circle at 50% 72%, #ff7d90 0 29%, transparent 30%),
    linear-gradient(155deg, #ff9aa9 0%, #ff405b 43%, #d6002d 78%, #790017 100%);
  box-shadow:
    0 0 7px rgba(255,75,101,.95),
    0 0 17px rgba(237,0,55,.58),
    0 0 28px rgba(191,0,35,.28);
}

.blood-counter .counter-flame::after {
  background: linear-gradient(165deg, #fff0f2 0%, #ff8fa0 42%, #ef1741 100%);
  box-shadow: 0 0 8px rgba(255,92,116,.95);
}

/* The number stays clear beside the flame. */
.nav-counter > span:not(.counter-flame),
.nav-counter > strong {
  color: currentColor;
  font: 800 12px/1 'JetBrains Mono', monospace;
  text-shadow: 0 0 10px currentColor;
}

@keyframes flameSway {
  0%   { transform: rotate(-3deg) translateY(1px); }
  50%  { transform: rotate(2deg) translateY(-1px); }
  100% { transform: rotate(4deg) translateY(0); }
}

@keyframes flameOuter {
  0% {
    transform: rotate(-7deg) scaleX(.91) scaleY(.96);
    border-radius: 75% 25% 65% 35% / 78% 42% 58% 22%;
  }
  45% {
    transform: rotate(2deg) scaleX(1.04) scaleY(1.07);
  }
  100% {
    transform: rotate(7deg) scaleX(.94) scaleY(1.12);
    border-radius: 58% 42% 73% 27% / 66% 54% 46% 34%;
  }
}

@keyframes flameInner {
  from {
    transform: rotate(7deg) scale(.88, .92) translateY(1px);
  }
  to {
    transform: rotate(-6deg) scale(1.04, 1.11) translateY(-1px);
  }
}

@media (max-width: 900px) {
  body {
    min-height: 100svh;
  }

  .footer .container {
    justify-content: center;
    text-align: center;
  }

  .nav-counter {
    gap: 4px;
    padding-inline: 2px !important;
  }

  .counter-flame {
    width: 19px;
    height: 26px;
    flex-basis: 19px;
    transform: scale(.9);
  }
}

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

/* =========================================================
   Page width and responsive sizing repair
   ========================================================= */

/*
 * Force all normal application pages back into the same centered
 * content width as the navigation bar. This prevents dashboard
 * sections from stretching across the full monitor.
 */
body:not(.login-page) .site-header > .container,
body:not(.login-page) main.page > .container,
body:not(.login-page) .page > .container,
body:not(.login-page) .footer > .container {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Do not allow page sections to become wider than their container. */
.page,
.cyber-hero,
.cyber-stat-grid,
.cyber-section,
.cyber-page-header,
.labs-toolbar,
.cyber-lab-grid,
.dashboard-social-grid {
  min-width: 0;
  max-width: 100%;
}

.cyber-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(30px, 4vw, 58px);
  padding-top: 46px;
}

.cyber-hero-copy {
  min-width: 0;
}

.cyber-hero h1 {
  max-width: 650px;
  font-size: clamp(38px, 4.1vw, 58px);
  overflow-wrap: normal;
}

.cyber-hero-copy > p {
  max-width: 620px;
}

.cyber-terminal {
  width: 100%;
  max-width: 470px;
  justify-self: end;
}

.cyber-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cyber-stat-card {
  min-width: 0;
}

.cyber-stat-card strong {
  overflow-wrap: anywhere;
}

.cyber-section {
  width: 100%;
}

/* Prevent wide empty-state content from pushing the page outward. */
.cyber-empty-state {
  grid-template-columns: 110px minmax(0, 1fr) minmax(190px, auto);
}

.empty-command {
  min-width: 0;
  width: min(230px, 100%);
}

/* Large monitors should remain comfortably centered, not oversized. */
@media (min-width: 1500px) {
  body:not(.login-page) .site-header > .container,
  body:not(.login-page) main.page > .container,
  body:not(.login-page) .page > .container,
  body:not(.login-page) .footer > .container {
    width: min(1220px, calc(100% - 64px)) !important;
    max-width: 1220px !important;
  }

  .cyber-hero h1 {
    font-size: 58px;
  }
}

/* Medium desktop and laptop screens. */
@media (max-width: 1100px) {
  body:not(.login-page) .site-header > .container,
  body:not(.login-page) main.page > .container,
  body:not(.login-page) .page > .container,
  body:not(.login-page) .footer > .container {
    width: min(100% - 32px, 980px) !important;
  }

  .cyber-hero {
    grid-template-columns: 1fr;
  }

  .cyber-terminal {
    max-width: 720px;
    justify-self: start;
  }

  .cyber-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet and mobile spacing. */
@media (max-width: 720px) {
  body:not(.login-page) .site-header > .container,
  body:not(.login-page) main.page > .container,
  body:not(.login-page) .page > .container,
  body:not(.login-page) .footer > .container {
    width: calc(100% - 24px) !important;
  }

  .page {
    padding-top: 20px;
  }

  .cyber-hero {
    gap: 26px;
    padding: 22px 0 30px;
  }

  .cyber-hero h1 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .cyber-stat-grid {
    grid-template-columns: 1fr;
  }

  .cyber-empty-state {
    grid-template-columns: 1fr;
  }

  .empty-command {
    width: 100%;
  }
}

/* =========================================================
   FINAL hard centering fix
   Works whether header.php includes a .container or not.
   ========================================================= */

:root {
  --app-content-width: 1180px;
  --app-page-gap: 40px;
}

/* Main application page itself must never behave like a full-width content container. */
main.page,
.page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/*
 * Some project versions place dashboard sections directly inside .page,
 * while others wrap them in .container. Support both structures.
 */
main.page > .container,
.page > .container {
  width: min(var(--app-content-width), calc(100% - var(--app-page-gap))) !important;
  max-width: var(--app-content-width) !important;
  margin-inline: auto !important;
}

/* Direct page sections: center each one when there is no container wrapper. */
main.page > .cyber-hero,
main.page > .cyber-stat-grid,
main.page > .cyber-section,
main.page > .cyber-page-header,
main.page > .labs-toolbar,
main.page > .cyber-lab-grid,
main.page > .dashboard-social-grid,
main.page > .profile-hero,
main.page > .profile-stats-grid,
main.page > .profile-layout,
main.page > .scoreboard-header,
main.page > .podium-grid,
main.page > .scoreboard-table-section,
.page > .cyber-hero,
.page > .cyber-stat-grid,
.page > .cyber-section,
.page > .cyber-page-header,
.page > .labs-toolbar,
.page > .cyber-lab-grid,
.page > .dashboard-social-grid,
.page > .profile-hero,
.page > .profile-stats-grid,
.page > .profile-layout,
.page > .scoreboard-header,
.page > .podium-grid,
.page > .scoreboard-table-section {
  width: min(var(--app-content-width), calc(100% - var(--app-page-gap))) !important;
  max-width: var(--app-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Preserve intentional vertical spacing after overriding margins above. */
main.page > .cyber-stat-grid,
.page > .cyber-stat-grid {
  margin-top: 0 !important;
  margin-bottom: 42px !important;
}

main.page > .cyber-section,
.page > .cyber-section {
  margin-bottom: 0 !important;
}

main.page > .labs-toolbar,
.page > .labs-toolbar {
  margin-bottom: 24px !important;
}

main.page > .dashboard-social-grid,
.page > .dashboard-social-grid {
  margin-top: 20px !important;
}

/* Header and footer use the exact same width. */
.site-header .header-inner,
.footer .container {
  width: min(var(--app-content-width), calc(100% - var(--app-page-gap))) !important;
  max-width: var(--app-content-width) !important;
  margin-inline: auto !important;
}

/* Avoid accidental horizontal overflow from grids and terminal content. */
main.page > *,
.page > *,
.cyber-hero > *,
.cyber-stat-grid > *,
.cyber-section > *,
.cyber-lab-grid > * {
  min-width: 0;
}

body {
  overflow-x: hidden;
}

@media (min-width: 1500px) {
  :root {
    --app-content-width: 1220px;
    --app-page-gap: 64px;
  }
}

@media (max-width: 900px) {
  :root {
    --app-page-gap: 32px;
  }
}

@media (max-width: 600px) {
  :root {
    --app-page-gap: 24px;
  }
}


/* =========================================================
   Advanced profile, operator titles and avatar dropdown
   ========================================================= */
.profile-menu{position:relative}.profile-menu>summary{list-style:none}.profile-menu>summary::-webkit-details-marker{display:none}
.profile-menu-trigger{display:flex;align-items:center;gap:7px;padding:3px;border:1px solid transparent;border-radius:999px;cursor:pointer;transition:.18s}.profile-menu[open] .profile-menu-trigger,.profile-menu-trigger:hover{border-color:rgba(159,239,0,.28);background:rgba(159,239,0,.05)}
.profile-menu-avatar{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(159,239,0,.32);border-radius:50%;background:#12231c;color:#baff72;font:700 11px 'JetBrains Mono',monospace}.profile-menu-avatar img{width:100%;height:100%;object-fit:cover}.profile-menu-chevron{padding-right:5px;color:#6f8178;font-size:13px;transition:transform .18s}.profile-menu[open] .profile-menu-chevron{transform:rotate(180deg)}
.profile-dropdown{position:absolute;right:0;top:calc(100% + 13px);z-index:100;width:245px;padding:9px;border:1px solid #2a3a32;border-radius:13px;background:rgba(7,16,13,.98);box-shadow:0 26px 70px rgba(0,0,0,.48);backdrop-filter:blur(18px)}.profile-dropdown:before{content:"";position:absolute;right:19px;top:-6px;width:10px;height:10px;border-left:1px solid #2a3a32;border-top:1px solid #2a3a32;background:#07100d;transform:rotate(45deg)}
.profile-dropdown-head{display:flex;align-items:center;gap:11px;padding:10px 9px 13px;border-bottom:1px solid #203129}.large-menu-avatar{width:44px;height:44px;flex:0 0 auto}.profile-dropdown-head strong,.profile-dropdown-head small{display:block}.profile-dropdown-head strong{color:#edf6f1;font-size:13px}.profile-dropdown-head small{margin-top:3px;color:#9fef00;font:700 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.07em}
.profile-dropdown>a{display:flex;align-items:center;justify-content:space-between;padding:11px 10px;border-radius:8px;color:#cddbd4!important;font-size:13px}.profile-dropdown>a:hover{background:rgba(159,239,0,.07);color:#baff72!important}.profile-dropdown>a b{color:#5f7168}.profile-dropdown .dropdown-logout{margin-top:4px;border-top:1px solid #1d2c25;border-radius:0 0 8px 8px;color:#ff8998!important}
.advanced-profile-hero{align-items:flex-start}.profile-copy{min-width:0}.profile-topline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.level-badge{display:inline-flex;padding:6px 10px;border:1px solid rgba(159,239,0,.35);border-radius:999px;background:rgba(159,239,0,.08);color:#b8ff72;font:800 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;box-shadow:inset 0 0 16px rgba(159,239,0,.03)}
.level-progress-block{max-width:520px;margin-top:19px}.level-progress-labels{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px}.level-progress-labels span{color:#dce8e1;font:700 11px 'JetBrains Mono',monospace;text-transform:uppercase}.level-progress-labels small{color:#718078}.level-progress{height:7px;overflow:hidden;border:1px solid #26382f;border-radius:999px;background:#07100d}.level-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#77b900,#b9ff35);box-shadow:0 0 15px rgba(159,239,0,.35)}
.profile-hero-actions{display:flex;align-items:flex-start;gap:14px}.profile-edit-button{padding:11px 16px;border:1px solid rgba(159,239,0,.38);border-radius:8px;background:rgba(159,239,0,.06);color:#b9ff61;font:700 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em}.profile-edit-button:hover{background:#9fef00;color:#07100d}
.profile-editor-shell{margin:0 0 24px;padding:20px;border:1px solid #2a3b32;border-radius:15px;background:linear-gradient(145deg,rgba(13,26,21,.98),rgba(6,14,11,.98));box-shadow:0 24px 65px rgba(0,0,0,.22)}.profile-editor-shell[hidden]{display:none}.profile-editor-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.profile-editor-toolbar h2{margin:6px 0 0}.profile-editor-close{width:38px;height:38px;padding:0;border:1px solid #304138;border-radius:50%;background:#0a1511;color:#9baba2;font-size:24px;line-height:1}.profile-editor-close:hover{border-color:#ff6b7e;background:rgba(255,75,98,.08);color:#ff8b9a;box-shadow:none}.profile-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.profile-editor h3{margin:7px 0 18px;font-size:22px}
.advanced-profile-layout{grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr)}.level-card{position:relative;overflow:hidden}.level-card:before{content:"";position:absolute;right:-35px;top:-45px;width:130px;height:130px;border:1px solid rgba(159,239,0,.11);border-radius:50%;box-shadow:0 0 0 22px rgba(159,239,0,.018),0 0 0 44px rgba(159,239,0,.01)}.level-card-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:12px 0}.level-card-title strong{color:#f1f7f3;font-size:25px}.level-card-title span{color:#9fef00;font:700 11px 'JetBrains Mono',monospace}.level-card p{margin:13px 0 0;color:#74827a;font-size:12px;line-height:1.65}
@media(max-width:900px){.profile-menu{margin-left:auto}.profile-editor-grid{grid-template-columns:1fr}.profile-hero-actions{width:100%;justify-content:space-between}.advanced-profile-layout{grid-template-columns:1fr}}
@media(max-width:600px){.profile-menu-chevron{display:none}.profile-dropdown{right:-5px;width:min(245px,calc(100vw - 24px))}.profile-hero-actions{flex-direction:column}.profile-edit-button,.profile-rank-card{width:100%}.profile-topline{align-items:flex-start;flex-direction:column}.level-progress-labels{align-items:flex-start;flex-direction:column;gap:4px}}

/* =========================================================
   Profile internal navigation tabs
   ========================================================= */

.profile-tabs {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 auto 26px;
  padding: 5px;
  border: 1px solid #25372e;
  border-radius: 11px;
  background: rgba(7,16,13,.78);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
}

.profile-tab {
  min-width: 130px;
  min-height: 42px;
  padding: 10px 18px;
  border: 0;
  border-radius: 7px;
  color: #819088;
  background: transparent;
  box-shadow: none;
  font: 700 11px 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.profile-tab:hover {
  color: #dce8e1;
  background: rgba(255,255,255,.025);
  box-shadow: none;
}

.profile-tab.is-active {
  color: #07100d;
  background: #9fef00;
  box-shadow: 0 0 20px rgba(159,239,0,.12);
}

.profile-tab-panel {
  display: none;
  width: 100%;
}

.profile-tab-panel.is-active {
  display: block;
  animation: profilePanelIn .22s ease;
}

@keyframes profilePanelIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overview remains in its normal place. */
.profile-tab-panel[data-profile-panel="overview"] > .profile-hero,
.profile-tab-panel[data-profile-panel="overview"] > .profile-stats-grid,
.profile-tab-panel[data-profile-panel="overview"] > .profile-layout {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  margin-left: auto !important;
  margin-right: auto !important;
}

.profile-tab-panel[data-profile-panel="overview"] > .profile-stats-grid {
  margin-bottom: 24px !important;
}

/* Edit and Security are independent pages, never inserted between profile sections. */
.profile-settings-page {
  width: min(860px, calc(100% - var(--app-page-gap, 40px)));
  margin: 0 auto;
  padding: 12px 0 40px;
}

.profile-settings-header {
  margin-bottom: 20px;
}

.profile-settings-header h2 {
  margin: 7px 0 7px;
  color: #f3f8f5;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.035em;
}

.profile-settings-header p {
  max-width: 620px;
  margin: 0;
  color: #7e8d85;
}

.settings-card {
  padding: 26px;
}

.settings-avatar-row {
  display: grid;
  grid-template-columns: 90px minmax(0,1fr);
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid #203028;
}

.settings-avatar {
  width: 84px;
  height: 84px;
  font-size: 23px;
}

.settings-avatar-row label {
  margin-top: 0;
}

.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.settings-full {
  grid-column: 1 / -1;
}

.settings-fields label {
  margin-top: 0;
}

.settings-fields textarea {
  resize: vertical;
  min-height: 145px;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #203028;
}

.settings-actions .btn {
  min-width: 170px;
}

.security-card {
  max-width: 700px;
}

.security-card .settings-fields {
  grid-template-columns: 1fr 1fr;
}

/* Remove the old edit shell if an older template accidentally remains. */
.profile-editor-shell,
.profile-edit-shell,
.profile-edit-area,
.account-control-panel {
  display: none !important;
}

@media (max-width: 720px) {
  .profile-tabs {
    width: calc(100% - 24px);
    overflow-x: auto;
    justify-content: flex-start;
  }

  .profile-tab {
    min-width: max-content;
  }

  .profile-settings-page {
    width: calc(100% - 24px);
  }

  .settings-card {
    padding: 18px;
  }

  .settings-avatar-row {
    grid-template-columns: 1fr;
  }

  .settings-fields,
  .security-card .settings-fields {
    grid-template-columns: 1fr;
  }

  .settings-full {
    grid-column: auto;
  }

  .settings-actions {
    justify-content: stretch;
  }

  .settings-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-tab-panel.is-active {
    animation: none;
  }
}

/* =========================================================
   Professional operator identity and system-wide student network
   ========================================================= */

.level-badge {
  display: inline-grid;
  gap: 2px;
  min-width: 126px;
  padding: 8px 12px;
  border: 1px solid rgba(159,239,0,.34);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(159,239,0,.09), rgba(159,239,0,.025));
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.14);
}

.level-badge small {
  color: #718079;
  font: 600 8px 'JetBrains Mono', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.level-badge strong {
  color: #baff70;
  font: 800 11px 'JetBrains Mono', monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.operator-command-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-color: rgba(159,239,0,.21);
  background:
    radial-gradient(circle at 100% 0%, rgba(159,239,0,.07), transparent 34%),
    linear-gradient(145deg, #0d1813, #08100d);
}

.operator-command-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, #9fef00, rgba(159,239,0,.08), transparent);
}

.operator-card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.operator-card-head h2 {
  margin: 7px 0 0;
  color: #f4faf6;
  font-size: 27px;
  letter-spacing: -.03em;
}

.operator-level-number {
  width: 62px;
  min-height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(159,239,0,.25);
  border-radius: 11px;
  background: rgba(159,239,0,.045);
}

.operator-level-number small {
  color: #6d7b74;
  font: 600 8px 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.operator-level-number strong {
  color: #9fef00;
  font-size: 24px;
  line-height: 1;
}

.operator-current-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  color: #829189;
  font: 600 10px 'JetBrains Mono', monospace;
}

.professional-progress {
  height: 8px;
  margin-top: 10px;
  border: 1px solid #26372f;
  border-radius: 999px;
  background: #07100d;
}

.professional-progress span {
  position: relative;
  background: linear-gradient(90deg, #72b500, #9fef00);
}

.professional-progress span::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 16px;
  border-radius: 50%;
  background: #d6ff8d;
  filter: blur(5px);
}

.operator-title-path {
  position: relative;
  display: grid;
  gap: 4px;
  margin-top: 22px;
}

.operator-title-path::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  bottom: 17px;
  width: 1px;
  background: #26362e;
}

.operator-path-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  align-items: center;
  gap: 11px;
  min-height: 47px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.operator-path-node {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #2c3c34;
  border-radius: 50%;
  color: #66756d;
  background: #0a1410;
  font: 700 9px 'JetBrains Mono', monospace;
}

.operator-path-item strong,
.operator-path-item small {
  display: block;
}

.operator-path-item strong {
  color: #7f8d86;
  font-size: 12px;
}

.operator-path-item small {
  margin-top: 2px;
  color: #546159;
  font: 500 9px 'JetBrains Mono', monospace;
}

.operator-path-item.is-unlocked .operator-path-node {
  border-color: rgba(159,239,0,.3);
  color: #9fef00;
  background: rgba(159,239,0,.06);
}

.operator-path-item.is-unlocked strong {
  color: #cbd8d1;
}

.operator-path-item.is-current {
  border-color: rgba(159,239,0,.26);
  background: linear-gradient(90deg, rgba(159,239,0,.075), transparent);
}

.operator-path-item.is-current .operator-path-node {
  color: #07100d;
  background: #9fef00;
  box-shadow: 0 0 18px rgba(159,239,0,.28);
}

.operator-path-item.is-current strong {
  color: #baff70;
}

.classmates-card .cyber-section-heading p {
  margin: 6px 0 0;
  color: #6f7e76;
  font-size: 12px;
}

.student-network-item {
  display: grid !important;
  grid-template-columns: 40px minmax(0,1fr) 44px;
  align-items: center;
  gap: 11px;
  padding: 11px !important;
}

.student-network-copy {
  min-width: 0;
}

.student-network-copy strong,
.student-network-copy small,
.student-network-copy em {
  display: block;
}

.student-network-copy strong {
  overflow: hidden;
  color: #e7f0eb;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-network-copy small {
  overflow: hidden;
  color: #67766e;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-network-copy em {
  width: fit-content;
  margin-top: 4px;
  color: #a8ff60;
  font: 700 8px 'JetBrains Mono', monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.student-network-score {
  text-align: center;
}

.student-network-score strong,
.student-network-score small {
  display: block;
}

.student-network-score strong {
  color: #f0f6f2;
  font-size: 16px;
}

.student-network-score small {
  color: #65736b;
  font-size: 8px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .level-badge {
    min-width: 0;
  }

  .operator-current-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   Operator progression moved below bio — horizontal layout
   ========================================================= */

.operator-command-horizontal {
  width: 100%;
  max-width: 760px;
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(159,239,0,.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(159,239,0,.07), transparent 32%),
    linear-gradient(145deg, #0d1813, #08100d);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}

.operator-command-horizontal .operator-card-head {
  align-items: center;
}

.operator-command-horizontal .operator-card-head h2 {
  font-size: 24px;
}

.operator-command-horizontal .operator-current-row {
  margin-top: 14px;
}

.operator-command-horizontal .professional-progress {
  margin-top: 9px;
}

.operator-command-horizontal .operator-title-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 20px;
}

.operator-command-horizontal .operator-title-path::before {
  display: none;
}

.operator-command-horizontal .operator-path-item {
  min-height: 78px;
  grid-template-columns: 32px minmax(0,1fr);
  padding: 10px;
  border: 1px solid #23342b;
  border-radius: 10px;
  background: rgba(5,12,9,.45);
}

.operator-command-horizontal .operator-path-item.is-current {
  border-color: rgba(159,239,0,.38);
  background: linear-gradient(145deg, rgba(159,239,0,.11), rgba(159,239,0,.025));
  box-shadow: inset 0 0 20px rgba(159,239,0,.025);
}

.operator-command-horizontal .operator-path-node {
  width: 30px;
  height: 30px;
}

.progression-moved {
  grid-template-columns: minmax(0,1.75fr) minmax(280px,.55fr);
}

.progression-moved .profile-sidebar {
  align-self: start;
}

/* Remove any old sidebar progression card that may still exist. */
.profile-sidebar > .operator-command-card {
  display: none !important;
}

@media (max-width: 1050px) {
  .operator-command-horizontal {
    max-width: none;
  }

  .operator-command-horizontal .operator-title-path {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .progression-moved {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .operator-command-horizontal {
    padding: 17px;
  }

  .operator-command-horizontal .operator-card-head,
  .operator-command-horizontal .operator-current-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .operator-command-horizontal .operator-level-number {
    width: 100%;
    min-height: 54px;
    grid-auto-flow: column;
    justify-content: start;
    gap: 8px;
    padding: 0 14px;
  }

  .operator-command-horizontal .operator-title-path {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Hacker Rank (Classic) — compact professional horizontal design
   ========================================================= */

.hacker-rank-card {
  width: 100%;
  max-width: 760px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(159,239,0,.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(159,239,0,.065), transparent 34%),
    linear-gradient(145deg, #0d1813, #08100d);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}

.hacker-rank-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.hacker-rank-head h2 {
  margin: 7px 0 5px;
  color: #f4faf6;
  font-size: 28px;
  letter-spacing: -.035em;
}

.hacker-rank-head p {
  max-width: 540px;
  margin: 0;
  color: #7d8c84;
  font-size: 12px;
  line-height: 1.65;
}

.hacker-rank-percent {
  min-width: 112px;
  padding: 13px 15px;
  border: 1px solid rgba(159,239,0,.28);
  border-radius: 11px;
  background: rgba(159,239,0,.045);
  text-align: right;
}

.hacker-rank-percent strong,
.hacker-rank-percent small {
  display: block;
}

.hacker-rank-percent strong {
  color: #aaff61;
  font-size: 25px;
  line-height: 1;
}

.hacker-rank-percent small {
  margin-top: 5px;
  color: #69776f;
  font: 700 8px 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hacker-rank-track {
  position: relative;
  height: 10px;
  margin-top: 22px;
  border: 1px solid #293a31;
  border-radius: 999px;
  background: #06100c;
}

.hacker-rank-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6cae00, #9fef00);
  box-shadow: 0 0 16px rgba(159,239,0,.28);
}

.hacker-rank-track > i {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #314139;
  border-radius: 50%;
  background: #09130f;
  transform: translate(-50%, -50%);
}

.hacker-rank-track > i.is-reached {
  border-color: #9fef00;
  background: #9fef00;
  box-shadow: 0 0 11px rgba(159,239,0,.55);
}

.hacker-rank-meta,
.hacker-rank-unlocks {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.hacker-rank-meta {
  margin-top: 13px;
  color: #75837b;
  font: 600 10px 'JetBrains Mono', monospace;
}

.hacker-rank-meta strong {
  color: #c7d6ce;
}

.hacker-rank-unlocks {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid #203028;
}

.hacker-rank-unlocks span {
  color: #65736b;
  font-size: 10px;
}

.profile-handle {
  color: #819088;
}

/* Old progression grid is no longer used. */
.operator-command-horizontal,
.operator-title-path {
  display: none !important;
}

@media (max-width: 650px) {
  .hacker-rank-card {
    padding: 18px;
  }

  .hacker-rank-head,
  .hacker-rank-meta,
  .hacker-rank-unlocks {
    align-items: flex-start;
    flex-direction: column;
  }

  .hacker-rank-percent {
    width: 100%;
    text-align: left;
  }
}

/* =========================================================
   Minimal Hacker Rank line under the bio
   ========================================================= */

.hacker-rank-card,
.hacker-rank-head,
.hacker-rank-track,
.hacker-rank-meta,
.hacker-rank-unlocks,
.level-badge {
  display: none !important;
}

.hacker-rank-line {
  width: 100%;
  max-width: 650px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(159,239,0,.22);
  border-bottom: 1px solid rgba(159,239,0,.12);
  color: #819088;
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .045em;
}

.hacker-rank-label {
  color: #6f7e76;
  text-transform: uppercase;
}

.hacker-rank-line > strong {
  color: #baff70;
  font-size: 12px;
  text-transform: uppercase;
}

.hacker-rank-divider {
  width: 1px;
  height: 17px;
  background: #2b3b33;
}

.hacker-rank-owned {
  color: #e8f2ed;
}

.hacker-rank-next {
  margin-left: auto;
  color: #6d7b74;
  font-weight: 600;
}

@media (max-width: 620px) {
  .hacker-rank-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hacker-rank-next {
    width: 100%;
    margin-left: 0;
  }
}

/* =========================================================
   Professional class/system scoreboard
   ========================================================= */

.advanced-scoreboard-header {
  padding-bottom: 20px;
}

.scoreboard-scope-tabs {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 28px;
  padding: 5px;
  border: 1px solid #26372f;
  border-radius: 10px;
  background: rgba(7,16,13,.82);
}

.scoreboard-scope-tabs a {
  min-width: 140px;
  padding: 10px 18px;
  border-radius: 6px;
  color: #7f8f87;
  font: 700 11px 'JetBrains Mono', monospace;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.scoreboard-scope-tabs a:hover {
  color: #e4eee8;
  background: rgba(255,255,255,.025);
}

.scoreboard-scope-tabs a.is-active {
  color: #07100d;
  background: #9fef00;
}

.scoreboard-podium {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: end;
  gap: 15px;
  margin: 0 auto 22px;
}

.scoreboard-podium-card {
  position: relative;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 27px 20px 21px;
  overflow: hidden;
  border: 1px solid #293b32;
  border-radius: 14px;
  color: #eaf3ee;
  background:
    radial-gradient(circle at 50% -15%, rgba(159,239,0,.075), transparent 38%),
    linear-gradient(150deg, #101b16, #08110d);
  text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}

.scoreboard-podium-card:hover {
  color: #eaf3ee;
  border-color: rgba(159,239,0,.45);
  transform: translateY(-3px);
}

.scoreboard-podium-card.place-1 {
  min-height: 345px;
  border-color: rgba(159,239,0,.48);
}

.scoreboard-podium-card.place-2 {
  min-height: 325px;
}

.scoreboard-podium-card.place-3 {
  min-height: 310px;
}

.scoreboard-podium-card.is-current-user {
  box-shadow: inset 0 2px #9fef00;
}

.podium-position {
  position: absolute;
  top: 14px;
  right: 15px;
  color: #9fef00;
  font: 800 13px 'JetBrains Mono', monospace;
}

.podium-person h2 {
  margin: 13px 0 3px;
  color: #f2f8f4;
  font-size: 19px;
}

.podium-person p {
  margin: 0;
  color: #728078;
  font-size: 12px;
}

.podium-hacker-rank {
  margin-top: 11px;
  color: #aaff61;
  font: 700 10px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.podium-score {
  margin-top: 15px;
  color: #f5faf7;
  font-size: 28px;
}

.podium-score small {
  color: #69776f;
  font-size: 10px;
  text-transform: uppercase;
}

.podium-progress {
  width: 100%;
  height: 3px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 99px;
  background: #25342d;
}

.podium-progress span {
  display: block;
  height: 100%;
  background: #9fef00;
  box-shadow: 0 0 12px rgba(159,239,0,.45);
}

.podium-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #203028;
}

.podium-stats strong,
.podium-stats small {
  display: block;
}

.podium-stats strong {
  color: #e7f0eb;
  font-size: 15px;
}

.podium-stats small {
  color: #617067;
  font-size: 8px;
  text-transform: uppercase;
}

.podium-stats .blood-value strong {
  color: #ff7587;
}

.advanced-scoreboard-section {
  margin-bottom: 22px;
}

.advanced-scoreboard-list {
  display: grid;
  gap: 8px;
}

.advanced-scoreboard-row {
  display: grid;
  grid-template-columns:
    48px
    42px
    minmax(170px,1.25fr)
    minmax(110px,.75fr)
    75px
    68px
    72px
    66px
    66px
    20px;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid #24342c;
  border-radius: 9px;
  color: #dce8e1;
  background: #09130f;
  transition: border-color .16s ease, background .16s ease;
}

.advanced-scoreboard-row:hover {
  color: #dce8e1;
  border-color: rgba(159,239,0,.38);
  background: #0c1812;
}

.advanced-scoreboard-row.is-current-user {
  border-color: rgba(159,239,0,.5);
  box-shadow: inset 3px 0 #9fef00;
}

.score-user strong em {
  display: inline-flex;
  margin-left: 7px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #9fef00;
  background: rgba(159,239,0,.08);
  font: 700 8px 'JetBrains Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
}

.rank-name-cell small,
.rank-name-cell strong,
.score-percent small,
.score-percent strong {
  display: block;
}

.rank-name-cell small,
.score-percent small {
  color: #637169;
  font-size: 8px;
  text-transform: uppercase;
}

.rank-name-cell strong {
  overflow: hidden;
  color: #aaff61;
  font: 700 10px 'JetBrains Mono', monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-percent strong {
  color: #e9f2ed;
  font-size: 13px;
}

.score-badge {
  gap: 6px;
  align-items: center;
  border: 0;
  background: transparent;
}

.score-flame {
  position: relative;
  width: 13px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
}

.score-flame::before,
.score-flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform-origin: 50% 100%;
}

.score-flame::before {
  width: 12px;
  height: 17px;
  margin-left: -6px;
  border-radius: 70% 30% 60% 40% / 75% 45% 55% 25%;
  animation: scoreboardFlame .7s ease-in-out infinite alternate;
}

.score-flame::after {
  width: 6px;
  height: 10px;
  margin-left: -3px;
  bottom: 2px;
  border-radius: 65% 35% 58% 42% / 75% 45% 55% 25%;
}

.score-flame-orange::before {
  background: linear-gradient(160deg, #ffe65c, #ff8f16 48%, #e73500);
  box-shadow: 0 0 8px rgba(255,126,0,.65);
}

.score-flame-orange::after {
  background: linear-gradient(160deg, #fffbd0, #ffd839);
}

.score-flame-red::before {
  background: linear-gradient(160deg, #ff9eac, #ff3556 48%, #9a001d);
  box-shadow: 0 0 8px rgba(255,38,76,.6);
}

.score-flame-red::after {
  background: linear-gradient(160deg, #ffe9ed, #ff7589);
}

@keyframes scoreboardFlame {
  from {
    transform: rotate(-5deg) scale(.93, .96);
  }
  to {
    transform: rotate(6deg) scale(1.04, 1.1);
  }
}

@media (max-width: 1100px) {
  .advanced-scoreboard-row {
    grid-template-columns:
      44px
      40px
      minmax(150px,1fr)
      minmax(100px,.7fr)
      65px
      60px
      64px
      58px
      20px;
  }

  .advanced-scoreboard-row .score-percent {
    display: none;
  }
}

@media (max-width: 850px) {
  .scoreboard-podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .scoreboard-podium-card.place-1,
  .scoreboard-podium-card.place-2,
  .scoreboard-podium-card.place-3 {
    min-height: 0;
  }

  .advanced-scoreboard-row {
    grid-template-columns:
      40px
      38px
      minmax(0,1fr)
      76px
      58px
      20px;
  }

  .advanced-scoreboard-row .rank-name-cell,
  .advanced-scoreboard-row .score-metric:nth-of-type(2),
  .advanced-scoreboard-row .first-blood-badge {
    display: none;
  }
}

@media (max-width: 600px) {
  .scoreboard-scope-tabs {
    width: calc(100% - 24px);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .scoreboard-scope-tabs a {
    min-width: 0;
    padding-inline: 10px;
  }

  .advanced-scoreboard-row {
    grid-template-columns: 36px 36px minmax(0,1fr) 55px 18px;
    padding-inline: 10px;
  }

  .advanced-scoreboard-row .score-metric:first-of-type,
  .advanced-scoreboard-row .streak-badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .score-flame::before {
    animation: none;
  }
}

/* =========================================================
   Clean professional scoreboard redesign
   ========================================================= */

.scoreboard-page-head,
.scoreboard-view-switch,
.scoreboard-featured,
.scoreboard-panel,
.scoreboard-empty {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  margin-left: auto;
  margin-right: auto;
}

.scoreboard-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 22px;
}

.scoreboard-page-head h1 {
  margin: 10px 0 6px;
  color: #f3f8f5;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -.05em;
}

.scoreboard-page-head p {
  margin: 0;
  color: #7f8d86;
}

.scoreboard-count {
  min-width: 105px;
  padding: 14px 16px;
  border-left: 2px solid #9fef00;
  background: rgba(159,239,0,.035);
}

.scoreboard-count strong,
.scoreboard-count span {
  display: block;
}

.scoreboard-count strong {
  color: #9fef00;
  font-size: 28px;
  line-height: 1;
}

.scoreboard-count span {
  margin-top: 5px;
  color: #6d7a73;
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.scoreboard-view-switch {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid #22322a;
}

.scoreboard-view-switch a {
  position: relative;
  padding: 11px 2px 13px;
  color: #74837b;
  font: 700 11px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.scoreboard-view-switch a:hover {
  color: #d7e4dd;
}

.scoreboard-view-switch a.is-active {
  color: #b9ff6c;
}

.scoreboard-view-switch a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #9fef00;
}

.scoreboard-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.featured-player {
  display: grid;
  grid-template-columns: 34px 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 15px;
  border: 1px solid #25362e;
  border-radius: 10px;
  color: #e4eee8;
  background: #0a1410;
}

.featured-player:hover {
  color: #e4eee8;
  border-color: rgba(159,239,0,.38);
  background: #0d1813;
}

.featured-player.place-1 {
  border-color: rgba(159,239,0,.5);
  box-shadow: inset 3px 0 #9fef00;
}

.featured-player.is-current-user {
  background: rgba(159,239,0,.035);
}

.featured-place {
  color: #9fef00;
  font: 800 13px 'JetBrains Mono', monospace;
}

.featured-avatar {
  width: 50px;
  height: 50px;
  font-size: 13px;
}

.featured-copy {
  min-width: 0;
}

.featured-copy strong,
.featured-copy small,
.featured-copy em {
  display: block;
}

.featured-copy strong {
  overflow: hidden;
  color: #f0f6f2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-copy small {
  overflow: hidden;
  margin-top: 2px;
  color: #66756d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-copy em {
  margin-top: 5px;
  color: #a8ff60;
  font: 700 8px 'JetBrains Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.featured-score {
  text-align: right;
}

.featured-score strong,
.featured-score small {
  display: block;
}

.featured-score strong {
  color: #fff;
  font-size: 21px;
}

.featured-score small {
  color: #617067;
  font-size: 8px;
  text-transform: uppercase;
}

.scoreboard-panel {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid #25362e;
  border-radius: 12px;
  background: rgba(8,17,13,.82);
}

.scoreboard-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #203028;
}

.scoreboard-panel-head h2 {
  margin: 6px 0 0;
  color: #f3f8f5;
  font-size: 23px;
}

.scoreboard-sort-note {
  color: #59675f;
  font: 600 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.scoreboard-table-head,
.scoreboard-clean-row {
  display: grid;
  grid-template-columns:
    54px
    minmax(220px,1.45fr)
    minmax(105px,.7fr)
    70px
    70px
    70px
    88px
    20px;
  align-items: center;
  gap: 12px;
}

.scoreboard-table-head {
  padding: 10px 18px;
  border-bottom: 1px solid #1f2d26;
  color: #5e6d65;
  font: 700 8px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.scoreboard-clean-list {
  display: grid;
}

.scoreboard-clean-row {
  min-height: 68px;
  padding: 10px 18px;
  border-bottom: 1px solid #1d2a24;
  color: #dce8e1;
  background: transparent;
}

.scoreboard-clean-row:last-child {
  border-bottom: 0;
}

.scoreboard-clean-row:hover {
  color: #dce8e1;
  background: rgba(159,239,0,.025);
}

.scoreboard-clean-row.is-current-user {
  box-shadow: inset 3px 0 #9fef00;
  background: rgba(159,239,0,.03);
}

.clean-rank {
  color: #9fef00;
  font: 800 12px 'JetBrains Mono', monospace;
}

.clean-student {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}

.clean-student strong,
.clean-student small {
  display: block;
}

.clean-student strong {
  overflow: hidden;
  color: #eef5f1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-student small {
  overflow: hidden;
  color: #65736b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clean-student em {
  padding: 3px 6px;
  border-radius: 4px;
  color: #9fef00;
  background: rgba(159,239,0,.07);
  font: 700 8px 'JetBrains Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
}

.clean-hacker-rank {
  color: #a8ff60;
  font: 700 10px 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.clean-number {
  color: #edf5f1;
  font: 700 13px 'JetBrains Mono', monospace;
}

.clean-flame-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #dbe6e0;
  font: 700 11px 'JetBrains Mono', monospace;
}

.clean-flame-value.streak {
  color: #ffbd4a;
}

.clean-flame-value.blood {
  color: #ff7587;
}

.clean-arrow {
  color: #59675f;
}

.scoreboard-empty {
  padding: 42px;
  border: 1px dashed #2a3a32;
  border-radius: 12px;
  background: #08110d;
}

.scoreboard-empty h2 {
  margin: 7px 0 5px;
  color: #eef5f1;
}

.scoreboard-empty p {
  margin: 0;
  color: #6d7a73;
}

@media (max-width: 980px) {
  .scoreboard-featured {
    grid-template-columns: 1fr;
  }

  .scoreboard-table-head,
  .scoreboard-clean-row {
    grid-template-columns:
      48px
      minmax(180px,1.3fr)
      minmax(95px,.7fr)
      65px
      60px
      65px
      20px;
  }

  .scoreboard-table-head span:nth-child(7),
  .scoreboard-clean-row .blood {
    display: none;
  }
}

@media (max-width: 720px) {
  .scoreboard-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .scoreboard-count {
    width: 100%;
  }

  .scoreboard-table-head {
    display: none;
  }

  .scoreboard-clean-row {
    grid-template-columns: 42px minmax(0,1fr) 62px 20px;
    gap: 9px;
    padding: 12px;
  }

  .scoreboard-clean-row .clean-hacker-rank,
  .scoreboard-clean-row .clean-number:nth-of-type(2),
  .scoreboard-clean-row .streak,
  .scoreboard-clean-row .blood {
    display: none;
  }

  .clean-student {
    grid-template-columns: 36px minmax(0,1fr);
  }

  .clean-student em {
    display: none;
  }
}

/* =========================================================
   Animated top-three podium showcase
   ========================================================= */

.scoreboard-featured {
  display: none !important;
}

.scoreboard-podium-stage {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  margin: 0 auto 28px;
  padding-top: 24px;
}

.podium-grid-impressive {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 16px;
}

.podium-showcase-card {
  --podium-accent: #9fef00;
  --podium-accent-rgb: 159, 239, 0;
  position: relative;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 22px 54px;
  overflow: hidden;
  border: 1px solid rgba(var(--podium-accent-rgb), .28);
  border-radius: 16px 16px 7px 7px;
  color: #eef6f1;
  background:
    radial-gradient(circle at 50% 5%, rgba(var(--podium-accent-rgb), .12), transparent 32%),
    linear-gradient(160deg, #101b16, #07100d 72%);
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    0 20px 50px rgba(0,0,0,.2);
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease;
}

.podium-showcase-card:hover {
  color: #eef6f1;
  border-color: rgba(var(--podium-accent-rgb), .58);
  transform: translateY(-6px);
}

.podium-showcase-card.place-1 {
  --podium-accent: #9fef00;
  --podium-accent-rgb: 159, 239, 0;
  min-height: 390px;
  order: 2;
  border-color: rgba(159,239,0,.52);
  box-shadow:
    inset 0 2px #9fef00,
    0 26px 65px rgba(0,0,0,.28),
    0 0 36px rgba(159,239,0,.07);
}

.podium-showcase-card.place-2 {
  --podium-accent: #aebbc4;
  --podium-accent-rgb: 174, 187, 196;
  min-height: 350px;
  order: 1;
}

.podium-showcase-card.place-3 {
  --podium-accent: #d8874e;
  --podium-accent-rgb: 216, 135, 78;
  min-height: 330px;
  order: 3;
}

.podium-showcase-card.is-current-user {
  box-shadow:
    inset 0 2px var(--podium-accent),
    0 24px 60px rgba(0,0,0,.26);
}

.podium-top-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 4;
}

.podium-top-label span {
  color: var(--podium-accent);
  font: 700 9px 'JetBrains Mono', monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.podium-top-label strong {
  color: #f5faf7;
  font: 800 13px 'JetBrains Mono', monospace;
}

.podium-avatar-shell {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin-top: 25px;
  z-index: 3;
}

.place-1 .podium-avatar-shell {
  width: 132px;
  height: 132px;
  margin-top: 30px;
}

.podium-showcase-avatar {
  width: 88px;
  height: 88px;
  z-index: 2;
  border-color: rgba(var(--podium-accent-rgb), .56);
  font-size: 22px;
}

.place-1 .podium-showcase-avatar {
  width: 104px;
  height: 104px;
  font-size: 27px;
}

.podium-avatar-ring {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--podium-accent-rgb), .32);
  border-radius: 50%;
  animation: podiumRingRotate 8s linear infinite;
}

.podium-avatar-ring::before,
.podium-avatar-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--podium-accent);
  box-shadow: 0 0 12px rgba(var(--podium-accent-rgb), .8);
}

.podium-avatar-ring::before {
  width: 7px;
  height: 7px;
  left: 50%;
  top: -4px;
}

.podium-avatar-ring::after {
  width: 5px;
  height: 5px;
  right: 4px;
  bottom: 12px;
}

.podium-place-medal {
  position: absolute;
  right: 5px;
  bottom: 7px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  z-index: 3;
  border: 2px solid #07100d;
  border-radius: 50%;
  color: #07100d;
  background: var(--podium-accent);
  font: 900 12px 'JetBrains Mono', monospace;
  box-shadow: 0 0 18px rgba(var(--podium-accent-rgb), .34);
}

.podium-crown {
  position: absolute;
  top: 42px;
  left: 50%;
  width: 60px;
  height: 30px;
  z-index: 5;
  transform: translateX(-50%);
  animation: podiumCrownFloat 2.1s ease-in-out infinite;
}

.podium-crown::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 0;
  height: 8px;
  border-radius: 2px;
  background: #9fef00;
  box-shadow: 0 0 18px rgba(159,239,0,.35);
}

.podium-crown span {
  position: absolute;
  bottom: 7px;
  width: 17px;
  height: 22px;
  background: linear-gradient(150deg, #dfff9e, #9fef00);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.podium-crown span:nth-child(1) {
  left: 2px;
  transform: rotate(-8deg);
}

.podium-crown span:nth-child(2) {
  left: 21px;
  height: 27px;
}

.podium-crown span:nth-child(3) {
  right: 2px;
  transform: rotate(8deg);
}

.podium-showcase-copy {
  position: relative;
  z-index: 3;
  margin-top: 17px;
  text-align: center;
}

.podium-showcase-copy h2 {
  margin: 0;
  color: #f4f8f6;
  font-size: 20px;
}

.podium-showcase-copy p {
  margin: 4px 0 0;
  color: #6e7d75;
  font-size: 12px;
}

.podium-showcase-copy span {
  display: inline-flex;
  margin-top: 9px;
  color: var(--podium-accent);
  font: 700 9px 'JetBrains Mono', monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.podium-showcase-score {
  position: relative;
  z-index: 3;
  margin-top: 17px;
  text-align: center;
}

.podium-showcase-score strong,
.podium-showcase-score small {
  display: block;
}

.podium-showcase-score strong {
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.podium-showcase-score small {
  margin-top: 5px;
  color: #627068;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.podium-showcase-progress {
  width: 100%;
  height: 3px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #26352e;
  position: relative;
  z-index: 3;
}

.podium-showcase-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--podium-accent);
  box-shadow: 0 0 12px rgba(var(--podium-accent-rgb), .48);
}

.podium-showcase-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 18px;
  position: relative;
  z-index: 3;
}

.podium-showcase-stats > span {
  padding: 10px 5px;
  border-top: 1px solid #203028;
  text-align: center;
}

.podium-showcase-stats strong,
.podium-showcase-stats small {
  display: block;
}

.podium-showcase-stats strong {
  color: #eaf2ed;
  font-size: 15px;
}

.podium-showcase-stats small {
  margin-top: 3px;
  color: #607067;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.podium-base {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 39px;
  display: grid;
  place-items: center;
  z-index: 4;
  border-top: 1px solid rgba(var(--podium-accent-rgb), .28);
  background:
    linear-gradient(90deg, transparent, rgba(var(--podium-accent-rgb), .12), transparent),
    #08110d;
}

.podium-base span {
  color: var(--podium-accent);
  font: 900 13px 'JetBrains Mono', monospace;
  letter-spacing: .18em;
}

.podium-orbit {
  position: absolute;
  border: 1px solid rgba(var(--podium-accent-rgb), .08);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  width: 220px;
  height: 220px;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  animation: podiumOrbitPulse 3.2s ease-in-out infinite;
}

.orbit-two {
  width: 300px;
  height: 300px;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  animation: podiumOrbitPulse 3.2s ease-in-out infinite reverse;
}

.podium-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0,
    rgba(var(--podium-accent-rgb), .035) 48%,
    rgba(var(--podium-accent-rgb), .11) 50%,
    rgba(var(--podium-accent-rgb), .035) 52%,
    transparent 100%
  );
  transform: translateY(-100%);
  animation: podiumScan 4.8s linear infinite;
  pointer-events: none;
}

@keyframes podiumRingRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes podiumCrownFloat {
  0%, 100% {
    transform: translate(-50%, 0) rotate(-1deg);
  }
  50% {
    transform: translate(-50%, -6px) rotate(1deg);
  }
}

@keyframes podiumOrbitPulse {
  0%, 100% {
    opacity: .35;
    transform: translateX(-50%) scale(.95);
  }
  50% {
    opacity: .75;
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes podiumScan {
  to {
    transform: translateY(100%);
  }
}

@media (max-width: 900px) {
  .podium-grid-impressive {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .podium-showcase-card.place-1,
  .podium-showcase-card.place-2,
  .podium-showcase-card.place-3 {
    order: initial;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .podium-avatar-ring,
  .podium-crown,
  .podium-orbit,
  .podium-scan {
    animation: none !important;
  }
}

/* =========================================================
   Premium scoreboard — graphite, gold, silver, bronze
   ========================================================= */

:root {
  --premium-bg: #090b0f;
  --premium-panel: #111419;
  --premium-panel-2: #151920;
  --premium-border: #242a32;
  --premium-text: #f2f4f7;
  --premium-muted: #8b929d;
  --premium-gold: #f2c94c;
  --premium-silver: #c1c7d0;
  --premium-bronze: #c97d4a;
}

.premium-scoreboard-head,
.premium-scoreboard-tabs,
.premium-winners,
.premium-ranking-panel,
.premium-empty-state {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  margin-left: auto;
  margin-right: auto;
}

.premium-scoreboard-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 20px;
}

.premium-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9ea5af;
  font: 700 10px 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.premium-kicker > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #54d38a;
  box-shadow: 0 0 12px rgba(84,211,138,.55);
}

.premium-scoreboard-head h1 {
  margin: 11px 0 7px;
  color: var(--premium-text);
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: -.05em;
}

.premium-scoreboard-head p {
  margin: 0;
  color: var(--premium-muted);
}

.premium-student-count {
  min-width: 135px;
  padding: 14px 0 14px 18px;
  border-left: 2px solid #58606b;
}

.premium-student-count strong,
.premium-student-count span {
  display: block;
}

.premium-student-count strong {
  color: var(--premium-text);
  font-size: 29px;
  line-height: 1;
}

.premium-student-count span {
  margin-top: 5px;
  color: var(--premium-muted);
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.premium-scoreboard-tabs {
  display: flex;
  gap: 24px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--premium-border);
}

.premium-scoreboard-tabs a {
  position: relative;
  padding: 11px 2px 14px;
  color: #777f8a;
  font: 700 11px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.premium-scoreboard-tabs a:hover {
  color: var(--premium-text);
}

.premium-scoreboard-tabs a.is-active {
  color: var(--premium-text);
}

.premium-scoreboard-tabs a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--premium-gold);
}

.premium-winners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: end;
  gap: 18px;
  margin-bottom: 26px;
}

.premium-winner {
  --winner-accent: var(--premium-silver);
  --winner-accent-rgb: 193, 199, 208;
  position: relative;
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 22px 26px;
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-radius: 16px;
  color: var(--premium-text);
  background:
    linear-gradient(180deg, rgba(var(--winner-accent-rgb), .045), transparent 34%),
    var(--premium-panel);
  box-shadow:
    0 22px 60px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.025);
  transition: transform .2s ease, border-color .2s ease;
}

.premium-winner:hover {
  color: var(--premium-text);
  border-color: rgba(var(--winner-accent-rgb), .52);
  transform: translateY(-5px);
}

.premium-winner-1 {
  --winner-accent: var(--premium-gold);
  --winner-accent-rgb: 242, 201, 76;
  min-height: 385px;
  order: 2;
  border-color: rgba(242,201,76,.42);
}

.premium-winner-2 {
  --winner-accent: var(--premium-silver);
  --winner-accent-rgb: 193, 199, 208;
  min-height: 350px;
  order: 1;
}

.premium-winner-3 {
  --winner-accent: var(--premium-bronze);
  --winner-accent-rgb: 201, 125, 74;
  min-height: 335px;
  order: 3;
}

.premium-winner.is-current-user {
  box-shadow:
    0 24px 70px rgba(0,0,0,.25),
    inset 0 2px var(--winner-accent);
}

.winner-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 3;
}

.winner-top span {
  color: var(--winner-accent);
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.winner-top strong {
  color: var(--premium-text);
  font: 800 13px 'JetBrains Mono', monospace;
}

.winner-avatar-wrap {
  position: relative;
  width: 122px;
  height: 122px;
  display: grid;
  place-items: center;
  margin-top: 27px;
  z-index: 3;
}

.premium-winner-1 .winner-avatar-wrap {
  width: 142px;
  height: 142px;
  margin-top: 31px;
}

.winner-hex {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(var(--winner-accent-rgb), .45);
  clip-path: polygon(25% 7%,75% 7%,100% 50%,75% 93%,25% 93%,0 50%);
  animation: premiumHexRotate 13s linear infinite;
}

.winner-avatar {
  width: 88px;
  height: 88px;
  z-index: 2;
  border-color: rgba(var(--winner-accent-rgb), .5);
  font-size: 22px;
}

.premium-winner-1 .winner-avatar {
  width: 104px;
  height: 104px;
  font-size: 27px;
}

.winner-medal {
  position: absolute;
  right: 7px;
  bottom: 8px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  z-index: 4;
  border: 2px solid var(--premium-panel);
  border-radius: 50%;
  color: #0b0d10;
  background: var(--winner-accent);
  font: 900 12px 'JetBrains Mono', monospace;
}

.winner-copy {
  position: relative;
  z-index: 3;
  margin-top: 16px;
  text-align: center;
}

.winner-copy h2 {
  margin: 0;
  color: var(--premium-text);
  font-size: 20px;
}

.winner-copy p {
  margin: 4px 0 0;
  color: var(--premium-muted);
  font-size: 12px;
}

.winner-copy span {
  display: inline-flex;
  margin-top: 9px;
  color: var(--winner-accent);
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.winner-score {
  margin-top: 17px;
  text-align: center;
  position: relative;
  z-index: 3;
}

.winner-score strong,
.winner-score small {
  display: block;
}

.winner-score strong {
  color: #fff;
  font-size: 31px;
  line-height: 1;
}

.winner-score small {
  margin-top: 5px;
  color: #6d7580;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.winner-progress {
  width: 100%;
  height: 4px;
  margin-top: 17px;
  overflow: hidden;
  border-radius: 999px;
  background: #242a31;
  position: relative;
  z-index: 3;
}

.winner-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--winner-accent);
  box-shadow: 0 0 12px rgba(var(--winner-accent-rgb), .22);
}

.winner-meta {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 18px;
  position: relative;
  z-index: 3;
}

.winner-meta > span {
  padding-top: 12px;
  border-top: 1px solid var(--premium-border);
  text-align: center;
}

.winner-meta strong,
.winner-meta small {
  display: block;
}

.winner-meta strong {
  color: #e8ebef;
  font-size: 15px;
}

.winner-meta small {
  margin-top: 3px;
  color: #707985;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.winner-shine {
  position: absolute;
  inset: -40% auto -40% -35%;
  width: 25%;
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--winner-accent-rgb), .09),
    transparent
  );
  transform: skewX(-18deg);
  animation: premiumShine 7s ease-in-out infinite;
}

.winner-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.winner-particles i {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--winner-accent);
  opacity: 0;
  animation: premiumParticle 5.2s linear infinite;
}

.winner-particles i:nth-child(1) { left: 18%; animation-delay: .2s; }
.winner-particles i:nth-child(2) { left: 35%; animation-delay: 1.4s; }
.winner-particles i:nth-child(3) { left: 52%; animation-delay: 2.5s; }
.winner-particles i:nth-child(4) { left: 70%; animation-delay: 3.3s; }
.winner-particles i:nth-child(5) { left: 84%; animation-delay: 4.2s; }

.premium-ranking-panel {
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid var(--premium-border);
  border-radius: 14px;
  background: rgba(17,20,25,.92);
}

.premium-ranking-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--premium-border);
}

.premium-ranking-head span {
  color: #8e96a0;
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.premium-ranking-head h2 {
  margin: 6px 0 0;
  color: var(--premium-text);
  font-size: 23px;
}

.premium-ranking-head small {
  color: #666e78;
  font: 600 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.premium-ranking-columns,
.premium-ranking-row {
  display: grid;
  grid-template-columns:
    54px
    minmax(220px,1.45fr)
    minmax(105px,.7fr)
    70px
    70px
    70px
    88px
    20px;
  align-items: center;
  gap: 12px;
}

.premium-ranking-columns {
  padding: 10px 18px;
  border-bottom: 1px solid #20252c;
  color: #626a74;
  font: 700 8px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.premium-ranking-list {
  display: grid;
}

.premium-ranking-row {
  min-height: 68px;
  padding: 10px 18px;
  border-bottom: 1px solid #20252c;
  color: #dce1e6;
  background: transparent;
  transition: background .16s ease, transform .16s ease;
}

.premium-ranking-row:last-child {
  border-bottom: 0;
}

.premium-ranking-row:hover {
  color: #fff;
  background: rgba(255,255,255,.025);
  transform: translateX(3px);
}

.premium-ranking-row.is-current-user {
  box-shadow: inset 3px 0 var(--premium-gold);
  background: rgba(242,201,76,.025);
}

.premium-rank-number {
  color: var(--premium-gold);
  font: 800 12px 'JetBrains Mono', monospace;
}

.premium-student {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
}

.premium-student strong,
.premium-student small {
  display: block;
}

.premium-student strong {
  overflow: hidden;
  color: #f0f2f5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-student small {
  overflow: hidden;
  color: #727a84;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.premium-student em {
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--premium-gold);
  background: rgba(242,201,76,.08);
  font: 700 8px 'JetBrains Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
}

.premium-hacker-rank {
  color: #c7ccd3;
  font: 700 10px 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

.premium-number {
  color: #f1f3f5;
  font: 700 13px 'JetBrains Mono', monospace;
}

.premium-fire-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px 'JetBrains Mono', monospace;
}

.premium-streak {
  color: #ffbd4a;
}

.premium-blood {
  color: #ff7587;
}

.premium-arrow {
  color: #69717b;
}

.premium-empty-state {
  padding: 42px;
  border: 1px dashed var(--premium-border);
  border-radius: 14px;
  background: var(--premium-panel);
}

.premium-empty-state > span {
  color: var(--premium-gold);
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.premium-empty-state h2 {
  margin: 7px 0 5px;
  color: var(--premium-text);
}

.premium-empty-state p {
  margin: 0;
  color: var(--premium-muted);
}

@keyframes premiumHexRotate {
  to { transform: rotate(360deg); }
}

@keyframes premiumShine {
  0%, 55% { transform: translateX(-160%) skewX(-18deg); }
  75%, 100% { transform: translateX(700%) skewX(-18deg); }
}

@keyframes premiumParticle {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.6);
  }
  18% {
    opacity: .45;
  }
  100% {
    opacity: 0;
    transform: translateY(-270px) scale(1.2);
  }
}

@media (max-width: 900px) {
  .premium-winners {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .premium-winner-1,
  .premium-winner-2,
  .premium-winner-3 {
    order: initial;
    min-height: 0;
  }

  .premium-ranking-columns,
  .premium-ranking-row {
    grid-template-columns:
      48px
      minmax(180px,1.3fr)
      minmax(95px,.7fr)
      65px
      60px
      65px
      20px;
  }

  .premium-ranking-columns span:nth-child(7),
  .premium-ranking-row .premium-blood {
    display: none;
  }
}

@media (max-width: 700px) {
  .premium-scoreboard-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .premium-student-count {
    width: 100%;
  }

  .premium-ranking-columns {
    display: none;
  }

  .premium-ranking-row {
    grid-template-columns: 42px minmax(0,1fr) 62px 20px;
    gap: 9px;
    padding: 12px;
  }

  .premium-ranking-row .premium-hacker-rank,
  .premium-ranking-row .premium-number:nth-of-type(2),
  .premium-ranking-row .premium-streak,
  .premium-ranking-row .premium-blood {
    display: none;
  }

  .premium-student {
    grid-template-columns: 36px minmax(0,1fr);
  }

  .premium-student em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .winner-hex,
  .winner-shine,
  .winner-particles i {
    animation: none !important;
  }
}

/* =========================================================
   Final top-three redesign — clean, compact, professional
   ========================================================= */

.premium-winners {
  display: none !important;
}

.top-three-board {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin: 0 auto 24px;
}

.top-three-player {
  --rank-accent: #c4cad2;
  --rank-accent-rgb: 196, 202, 210;
  position: relative;
  width: min(100%, 360px);
  min-height: 132px;
  display: grid;
  grid-template-columns: 34px 58px minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 13px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid #272d35;
  border-radius: 13px;
  color: #edf0f3;
  background: linear-gradient(145deg, #12161b, #0d1014);
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.top-three-player:hover {
  color: #fff;
  border-color: rgba(var(--rank-accent-rgb), .5);
  background: linear-gradient(145deg, #151a20, #0f1318);
  transform: translateY(-3px);
}

.top-three-1 {
  --rank-accent: #f0c75e;
  --rank-accent-rgb: 240, 199, 94;
  border-color: rgba(240,199,94,.38);
}

.top-three-2 {
  --rank-accent: #c4cad2;
  --rank-accent-rgb: 196, 202, 210;
}

.top-three-3 {
  --rank-accent: #c8824f;
  --rank-accent-rgb: 200, 130, 79;
}

.top-three-player::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rank-accent);
}

.top-three-player::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -25%;
  width: 18%;
  height: 200%;
  opacity: .16;
  background: linear-gradient(90deg, transparent, var(--rank-accent), transparent);
  transform: skewX(-18deg);
  animation: topThreeSweep 7s ease-in-out infinite;
  pointer-events: none;
}

.top-three-medal {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  border: 1px solid rgba(var(--rank-accent-rgb), .5);
  border-radius: 50%;
  color: #0c0f13;
  background: var(--rank-accent);
  font: 900 11px 'JetBrains Mono', monospace;
}

.top-three-avatar {
  width: 56px;
  height: 56px;
  grid-row: 1 / span 2;
  border-color: rgba(var(--rank-accent-rgb), .5);
  font-size: 15px;
}

.top-three-copy {
  min-width: 0;
  align-self: end;
}

.top-three-copy > small,
.top-three-copy > strong,
.top-three-copy > span,
.top-three-copy > em {
  display: block;
}

.top-three-copy > small {
  color: var(--rank-accent);
  font: 700 8px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.top-three-copy > strong {
  overflow: hidden;
  margin-top: 3px;
  color: #f3f5f7;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-three-copy > span {
  overflow: hidden;
  color: #7e8791;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-three-copy > em {
  margin-top: 4px;
  color: #adb4bd;
  font: 700 8px 'JetBrains Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
}

.top-three-score {
  align-self: end;
  text-align: right;
}

.top-three-score strong,
.top-three-score small {
  display: block;
}

.top-three-score strong {
  color: #fff;
  font-size: 23px;
  line-height: 1;
}

.top-three-score small {
  margin-top: 4px;
  color: #707983;
  font-size: 8px;
  text-transform: uppercase;
}

.top-three-meta {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid #252b32;
}

.top-three-meta b {
  color: #dfe3e7;
  font: 700 11px 'JetBrains Mono', monospace;
}

.top-three-meta b small {
  display: block;
  margin-top: 2px;
  color: #68717b;
  font-size: 7px;
  text-transform: uppercase;
}

.top-three-player.is-current-user {
  box-shadow:
    inset 0 0 0 1px rgba(var(--rank-accent-rgb), .18),
    0 14px 35px rgba(0,0,0,.2);
}

@keyframes topThreeSweep {
  0%, 60% {
    transform: translateX(-180%) skewX(-18deg);
  }
  78%, 100% {
    transform: translateX(820%) skewX(-18deg);
  }
}

@media (max-width: 1050px) {
  .top-three-board {
    flex-wrap: wrap;
  }

  .top-three-player {
    width: min(100%, 520px);
  }
}

@media (max-width: 620px) {
  .top-three-board {
    width: calc(100% - 24px);
  }

  .top-three-player {
    grid-template-columns: 30px 50px minmax(0,1fr);
  }

  .top-three-score {
    grid-column: 3;
    text-align: left;
  }

  .top-three-meta {
    grid-column: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-three-player::after {
    animation: none;
  }
}

/* =========================================================
   Screenshot-inspired top three podium
   ========================================================= */

.top-three-board {
  display: none !important;
}

.screenshot-podium {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: end;
  gap: 18px;
  margin: 0 auto 28px;
}

.screenshot-podium-card {
  --podium-accent: #bfc5d2;
  --podium-accent-rgb: 191,197,210;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  overflow: visible;
  border: 1px solid rgba(var(--podium-accent-rgb), .3);
  border-radius: 14px;
  color: #f1f4f7;
  background:
    linear-gradient(180deg, rgba(var(--podium-accent-rgb), .035), transparent 34%),
    #11151a;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  transition: transform .2s ease, border-color .2s ease;
}

.screenshot-podium-card:hover {
  color: #fff;
  border-color: rgba(var(--podium-accent-rgb), .56);
  transform: translateY(-5px);
}

.screenshot-podium-card.place-1 {
  --podium-accent: #f7c948;
  --podium-accent-rgb: 247,201,72;
  min-height: 340px;
  order: 2;
  border-color: rgba(247,201,72,.55);
  background:
    radial-gradient(circle at 50% 0%, rgba(247,201,72,.10), transparent 38%),
    #11151a;
}

.screenshot-podium-card.place-2 {
  --podium-accent: #bfc5d2;
  --podium-accent-rgb: 191,197,210;
  order: 1;
}

.screenshot-podium-card.place-3 {
  --podium-accent: #c77d4a;
  --podium-accent-rgb: 199,125,74;
  order: 3;
}

.screenshot-podium-card.is-current-user {
  box-shadow:
    inset 0 1px var(--podium-accent),
    0 20px 50px rgba(0,0,0,.24);
}

.podium-award {
  position: absolute;
  top: -48px;
  left: 24px;
  width: 78px;
  height: 78px;
  z-index: 5;
  filter: drop-shadow(0 9px 16px rgba(0,0,0,.35));
  animation: awardFloat 2.8s ease-in-out infinite;
}

.place-1 .podium-award {
  top: -62px;
  left: 50%;
  width: 96px;
  height: 84px;
  transform: translateX(-50%);
}

.podium-award svg {
  width: 100%;
  height: 100%;
  display: block;
}

.podium-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.podium-card-head span {
  color: var(--podium-accent);
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.podium-card-head strong {
  color: #f5f7f9;
  font: 800 13px 'JetBrains Mono', monospace;
}

.podium-main {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}

.place-1 .podium-main {
  flex-direction: column;
  margin-top: 40px;
  text-align: center;
}

.screenshot-podium-avatar {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border: 2px solid var(--podium-accent);
  box-shadow:
    0 0 0 5px rgba(var(--podium-accent-rgb), .055),
    0 12px 28px rgba(0,0,0,.28);
  font-size: 23px;
}

.place-1 .screenshot-podium-avatar {
  width: 108px;
  height: 108px;
  flex-basis: 108px;
}

.podium-person {
  min-width: 0;
}

.podium-person h2 {
  overflow: hidden;
  margin: 0;
  color: #f5f7f9;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-person p {
  margin: 5px 0 0;
  color: #858e99;
  font-size: 12px;
}

.podium-person span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--podium-accent);
  font: 700 9px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.podium-points {
  margin-top: 24px;
  text-align: center;
}

.podium-points strong,
.podium-points small {
  display: block;
}

.podium-points strong {
  color: #ffffff;
  font-size: 31px;
  line-height: 1;
}

.podium-points small {
  margin-top: 6px;
  color: #6e7782;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.podium-stat-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #2a3038;
}

.podium-stat-row > span {
  text-align: center;
}

.podium-stat-row strong,
.podium-stat-row small {
  display: block;
}

.podium-stat-row strong {
  color: #edf0f3;
  font-size: 15px;
}

.podium-stat-row small {
  margin-top: 4px;
  color: #707984;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.podium-bottom-glow {
  position: absolute;
  right: 10%;
  bottom: -1px;
  left: 10%;
  height: 2px;
  border-radius: 999px;
  background: var(--podium-accent);
  box-shadow: 0 0 18px rgba(var(--podium-accent-rgb), .55);
  opacity: .85;
}

.screenshot-podium-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 18%;
  height: 180%;
  opacity: .12;
  background: linear-gradient(90deg, transparent, var(--podium-accent), transparent);
  transform: skewX(-18deg);
  animation: podiumHighlight 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes awardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.place-1 .podium-award {
  animation-name: awardFloatCenter;
}

@keyframes awardFloatCenter {
  0%,100% { transform: translate(-50%,0); }
  50% { transform: translate(-50%,-6px); }
}

@keyframes podiumHighlight {
  0%,58% { transform: translateX(-180%) skewX(-18deg); }
  78%,100% { transform: translateX(850%) skewX(-18deg); }
}

@media (max-width: 920px) {
  .screenshot-podium {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .screenshot-podium-card.place-1,
  .screenshot-podium-card.place-2,
  .screenshot-podium-card.place-3 {
    order: initial;
    min-height: 0;
    margin-top: 42px;
  }

  .place-1 .podium-main {
    flex-direction: row;
    margin-top: 28px;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .screenshot-podium {
    width: calc(100% - 24px);
  }

  .podium-main,
  .place-1 .podium-main {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .podium-person h2 {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .podium-award,
  .screenshot-podium-card::after {
    animation: none !important;
  }
}

/* =========================================================
   Reference-matched podium layout
   ========================================================= */

.screenshot-podium {
  display: none !important;
}

.reference-podium {
  width: min(var(--app-content-width, 1180px), calc(100% - var(--app-page-gap, 40px)));
  max-width: var(--app-content-width, 1180px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
  margin: 58px auto 28px;
}

.reference-podium.count-1 {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}

.reference-podium.count-2 {
  grid-template-columns: repeat(2, minmax(0, 470px));
  justify-content: center;
}

.reference-winner {
  --winner-color: #c8ced7;
  --winner-rgb: 200, 206, 215;
  position: relative;
  min-height: 286px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 20px;
  overflow: visible;
  border: 1px solid rgba(var(--winner-rgb), .38);
  border-radius: 14px;
  color: #f4f6f8;
  background:
    linear-gradient(180deg, rgba(var(--winner-rgb), .03), transparent 38%),
    #11151a;
  box-shadow:
    0 22px 55px rgba(0,0,0,.24),
    inset 0 1px rgba(255,255,255,.025);
  transition: transform .2s ease, border-color .2s ease;
}

.reference-winner:hover {
  color: #fff;
  border-color: rgba(var(--winner-rgb), .68);
  transform: translateY(-5px);
}

.reference-winner.place-1 {
  --winner-color: #f7c948;
  --winner-rgb: 247, 201, 72;
  min-height: 358px;
  order: 2;
  border-color: rgba(247,201,72,.7);
  background:
    radial-gradient(circle at 50% 0, rgba(247,201,72,.10), transparent 38%),
    #11151a;
}

.reference-winner.place-2 {
  --winner-color: #c9d0da;
  --winner-rgb: 201, 208, 218;
  order: 1;
}

.reference-winner.place-3 {
  --winner-color: #c77d4a;
  --winner-rgb: 199, 125, 74;
  order: 3;
}

.reference-podium.count-1 .reference-winner.place-1,
.reference-podium.count-2 .reference-winner.place-1,
.reference-podium.count-2 .reference-winner.place-2 {
  order: initial;
}

.winner-award {
  position: absolute;
  top: -56px;
  left: 22px;
  width: 86px;
  height: 96px;
  z-index: 5;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.38));
  animation: referenceAwardFloat 3s ease-in-out infinite;
}

.place-1 .winner-award {
  top: -70px;
  left: 50%;
  width: 116px;
  height: 92px;
  transform: translateX(-50%);
  animation-name: referenceAwardFloatCenter;
}

.winner-award svg {
  width: 100%;
  height: 100%;
  display: block;
}

.winner-rank-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  color: var(--winner-color);
  font: 900 13px 'JetBrains Mono', monospace;
}

.winner-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
}

.place-1 .winner-profile {
  flex-direction: column;
  margin-top: 38px;
  text-align: center;
}

.reference-avatar {
  width: 98px;
  height: 98px;
  flex: 0 0 98px;
  border: 2px solid var(--winner-color);
  box-shadow:
    0 0 0 5px rgba(var(--winner-rgb), .055),
    0 14px 30px rgba(0,0,0,.3);
  font-size: 24px;
}

.place-1 .reference-avatar {
  width: 116px;
  height: 116px;
  flex-basis: 116px;
}

.winner-identity {
  min-width: 0;
}

.winner-identity h2 {
  overflow: hidden;
  margin: 0;
  color: #f8f9fa;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winner-identity p {
  margin: 5px 0 0;
  color: #89919b;
  font-size: 13px;
}

.winner-identity span {
  display: inline-flex;
  margin-top: 8px;
  color: var(--winner-color);
  font: 700 10px 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.winner-score {
  margin-top: 24px;
  text-align: center;
}

.winner-score strong,
.winner-score small {
  display: block;
}

.winner-score strong {
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.winner-score small {
  margin-top: 6px;
  color: #707985;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.winner-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #2a3038;
}

.winner-stats > span {
  text-align: center;
}

.winner-stats strong,
.winner-stats small {
  display: block;
}

.winner-stats strong {
  color: #f0f2f4;
  font-size: 16px;
}

.winner-stats small {
  margin-top: 4px;
  color: #737c87;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.reference-winner::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -1px;
  left: 8%;
  height: 2px;
  border-radius: 99px;
  background: var(--winner-color);
  box-shadow: 0 0 18px rgba(var(--winner-rgb), .55);
}

@keyframes referenceAwardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes referenceAwardFloatCenter {
  0%,100% { transform: translate(-50%,0); }
  50% { transform: translate(-50%,-6px); }
}

@media (max-width: 920px) {
  .reference-podium,
  .reference-podium.count-1,
  .reference-podium.count-2 {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }

  .reference-winner.place-1,
  .reference-winner.place-2,
  .reference-winner.place-3 {
    order: initial;
    min-height: 0;
  }

  .place-1 .winner-profile {
    flex-direction: row;
    margin-top: 24px;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .reference-podium {
    width: calc(100% - 24px);
  }

  .winner-profile,
  .place-1 .winner-profile {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
  }

  .winner-identity h2 {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .winner-award {
    animation: none !important;
  }
}


/* =========================================================
   SCOREBOARD — exact dark reference visual override
   ========================================================= */
:root{
  --score-bg:#071014;
  --score-panel:#10171c;
  --score-panel-2:#0b1217;
  --score-line:#25313a;
  --score-text:#f4f7f8;
  --score-muted:#82919d;
  --score-green:#9cff00;
  --score-gold:#ffc21c;
  --score-silver:#c8d0d8;
  --score-bronze:#d27a38;
}

body{
  background:
    radial-gradient(circle at 22% 18%,rgba(35,255,167,.035),transparent 28%),
    linear-gradient(rgba(87,130,140,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(87,130,140,.028) 1px,transparent 1px),
    #061014;
  background-size:auto,42px 42px,42px 42px,auto;
}

.premium-scoreboard-head,
.premium-scoreboard-tabs,
.reference-podium,
.premium-ranking-panel{
  width:min(1380px,calc(100% - 64px))!important;
  max-width:1380px!important;
}

.premium-scoreboard-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  padding:38px 0 22px;
  margin-inline:auto;
}
.premium-kicker{color:#43d65c!important;font-size:12px!important;letter-spacing:.07em!important}
.premium-kicker>span{width:6px!important;height:6px!important;background:#46e95f!important;box-shadow:0 0 12px #46e95f!important}
.premium-scoreboard-head h1{font-size:52px!important;line-height:1!important;letter-spacing:-.045em!important;margin:18px 0 12px!important}
.premium-scoreboard-head p{font-size:15px!important;color:#87949f!important}
.premium-student-count{width:160px!important;min-height:102px!important;padding:20px 28px!important;border-radius:11px!important;border-color:#27333b!important;background:linear-gradient(145deg,#11191e,#0b1116)!important}
.premium-student-count strong{color:var(--score-green)!important;font-size:40px!important}
.premium-student-count span{font-size:10px!important;color:#96a4af!important}

.premium-scoreboard-tabs{
  margin:0 auto!important;
  border-bottom:1px solid #202a31!important;
  min-height:48px;
  gap:42px!important;
}
.premium-scoreboard-tabs a{padding:14px 0 16px!important;font-size:13px!important;color:#a8b2ba!important}
.premium-scoreboard-tabs a.is-active{color:var(--score-green)!important}
.premium-scoreboard-tabs a.is-active:after{height:2px!important;background:var(--score-green)!important;box-shadow:0 0 14px rgba(156,255,0,.45)!important}

.reference-podium{
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,1fr)!important;
  gap:20px!important;
  margin:78px auto 26px!important;
}
.reference-winner{
  min-height:280px!important;
  padding:34px 22px 18px!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,rgba(19,27,33,.97),rgba(10,16,21,.99))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025)!important;
}
.reference-winner.place-1{
  min-height:344px!important;
  background:radial-gradient(circle at 50% 0,rgba(255,193,25,.16),transparent 47%),linear-gradient(145deg,#171811,#0b1217 68%)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,234,160,.09)!important;
}
.reference-winner.place-2{border-color:rgba(200,208,216,.43)!important}
.reference-winner.place-3{border-color:rgba(210,122,56,.43)!important}
.reference-winner:hover{transform:translateY(-4px) scale(1.005)!important}

.winner-award{top:-38px!important;left:24px!important;width:82px!important;height:92px!important}
.place-1 .winner-award{top:-73px!important;left:50%!important;width:134px!important;height:104px!important}
.place-1 .winner-award:after{
  content:"";position:absolute;left:50%;bottom:-6px;width:190px;height:56px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(255,194,28,.20),transparent 68%);filter:blur(8px);z-index:-1;
}
.award-sparkles,.award-sparkles:before,.award-sparkles:after{
  position:absolute;content:"";inset:-15px -35px;background:
    radial-gradient(circle at 12% 60%,#ffbe18 0 1px,transparent 2px),
    radial-gradient(circle at 28% 22%,#ffe16a 0 1px,transparent 2px),
    radial-gradient(circle at 72% 18%,#ffc020 0 1.4px,transparent 2.4px),
    radial-gradient(circle at 88% 58%,#ffe784 0 1px,transparent 2px),
    radial-gradient(circle at 55% 2%,#ffd13e 0 1px,transparent 2px);
  animation:sparkleBlink 1.8s ease-in-out infinite alternate;pointer-events:none;
}
.award-sparkles:before{transform:rotate(18deg) scale(.9);animation-delay:.4s}
.award-sparkles:after{transform:rotate(-15deg) scale(1.08);animation-delay:.8s}
@keyframes sparkleBlink{from{opacity:.25}to{opacity:1}}

.winner-rank-badge{
  top:17px!important;left:18px!important;right:auto!important;width:42px;height:42px;display:grid;place-items:center;
  border-radius:50%;font-size:17px!important;background:radial-gradient(circle at 35% 25%,#fff6bf,#f5c43d 52%,#b56c00)!important;
  color:#684000!important;border:2px solid rgba(255,230,112,.85);box-shadow:0 5px 15px rgba(0,0,0,.3),0 0 18px rgba(255,194,28,.18);
}
.place-2 .winner-rank-badge{background:radial-gradient(circle at 35% 25%,#fff,#d7dde3 55%,#818b95)!important;color:#31383e!important;border-color:#f0f3f6!important}
.place-3 .winner-rank-badge{background:radial-gradient(circle at 35% 25%,#ffd3ae,#c77b45 56%,#75401f)!important;color:#40200f!important;border-color:#e8a36f!important}

.winner-profile{margin-top:16px!important;gap:20px!important}
.place-1 .winner-profile{margin-top:36px!important}
.reference-avatar{width:92px!important;height:92px!important;flex-basis:92px!important}
.place-1 .reference-avatar{width:110px!important;height:110px!important;flex-basis:110px!important}
.winner-identity h2{font-size:20px!important}
.winner-identity p{font-size:14px!important;color:#7f8e99!important}
.winner-identity span{font-family:'Space Grotesk',sans-serif!important;font-size:13px!important;text-transform:none!important;letter-spacing:0!important}
.rank-elite{color:#ffc21c!important}.rank-pro{color:#69aaff!important}.rank-hacker{color:#ff8735!important}.rank-script{color:#be74ff!important}.rank-noob{color:#8399aa!important}
.winner-score{margin-top:20px!important}.winner-score strong{font-size:31px!important}.winner-score small{font-size:9px!important}
.winner-stats{margin-top:18px!important;padding-top:15px!important;border-color:#2a333a!important}
.winner-stats strong{display:flex!important;align-items:center;justify-content:center;gap:7px;font-size:15px!important}
.winner-stats small{font-size:8px!important;color:#81909b!important}
.stat-check{width:18px;height:18px;display:inline-grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-style:normal;font-size:11px;color:var(--winner-color)}
.mini-fire{position:relative;width:13px;height:18px;display:inline-block;border-radius:60% 40% 60% 40% / 70% 45% 55% 30%;transform:rotate(4deg);animation:miniFlame .75s ease-in-out infinite alternate}
.mini-fire-orange{background:linear-gradient(#fff16c,#ffad00 48%,#ff5700);box-shadow:0 0 8px rgba(255,126,0,.65)}
.mini-fire-red{background:linear-gradient(#ffb1bc,#ff405d 50%,#d6002f);box-shadow:0 0 8px rgba(255,48,82,.65)}
@keyframes miniFlame{to{transform:rotate(-5deg) scale(.9,1.1)}}

.premium-ranking-panel{
  margin:0 auto 45px!important;padding:0 20px 10px!important;border:1px solid #263139!important;border-radius:14px!important;
  background:linear-gradient(145deg,rgba(17,24,29,.97),rgba(10,16,21,.98))!important;overflow:hidden;
}
.premium-ranking-head{display:none!important}
.premium-ranking-columns,.premium-ranking-row{
  grid-template-columns:84px minmax(230px,1.35fr) minmax(160px,.9fr) 90px 90px 90px 110px 28px!important;
  gap:14px!important;
}
.premium-ranking-columns{padding:19px 12px 13px!important;border-bottom:1px solid #27323a!important;color:#8b9aa5!important;font-size:11px!important}
.premium-ranking-row{min-height:64px!important;padding:10px 12px!important;border:0!important;border-bottom:1px solid #242e35!important;border-radius:0!important;background:transparent!important}
.premium-ranking-row:last-child{border-bottom:0!important}
.premium-ranking-row:hover{background:rgba(156,255,0,.025)!important;transform:none!important}
.premium-ranking-row.is-current-user{box-shadow:inset 3px 0 var(--score-green)!important}
.premium-rank-number{color:#e8edf0!important;font-size:14px!important}
.premium-student .mini-avatar{width:38px!important;height:38px!important;background:#1a2a23!important;border:0!important;color:#c7e1d0!important}
.premium-student strong{font-size:14px!important}.premium-student small{font-size:11px!important;color:#7d8a94!important}
.premium-hacker-rank{font-size:13px!important;font-weight:700!important}
.premium-number{color:var(--score-green)!important;font-size:16px!important}
.premium-fire-value{font-size:14px!important;color:#edf1f3!important}
.score-flame{width:13px!important;height:18px!important}
.premium-arrow{color:#8da0ad!important;font-size:22px!important}
.ranking-complete-message{padding:24px;text-align:center;color:#7f8d97;font-size:13px}

@media(max-width:1050px){
  .premium-scoreboard-head,.premium-scoreboard-tabs,.reference-podium,.premium-ranking-panel{width:min(100% - 32px,920px)!important}
  .premium-ranking-columns,.premium-ranking-row{grid-template-columns:65px minmax(210px,1fr) 140px 75px 70px 75px 24px!important}
  .premium-ranking-columns span:nth-child(7),.premium-ranking-row .premium-blood{display:none!important}
}
@media(max-width:760px){
  .premium-scoreboard-head{align-items:flex-start;flex-direction:column}.premium-student-count{width:100%!important}
  .reference-podium{grid-template-columns:1fr!important}.reference-winner.place-1,.reference-winner.place-2,.reference-winner.place-3{order:initial!important;min-height:280px!important}
  .premium-ranking-columns{display:none!important}
  .premium-ranking-row{grid-template-columns:44px minmax(0,1fr) 70px 22px!important;gap:8px!important}
  .premium-ranking-row .premium-hacker-rank,.premium-ranking-row .premium-number:nth-of-type(2),.premium-ranking-row .premium-streak,.premium-ranking-row .premium-blood{display:none!important}
}
@media(prefers-reduced-motion:reduce){.award-sparkles,.award-sparkles:before,.award-sparkles:after,.mini-fire{animation:none!important}}

/* =========================================================
   FINAL SCOREBOARD BACKGROUND REPAIR
   Keep this block at the absolute end of the stylesheet.
   ========================================================= */

html {
  min-height: 100%;
  background: #061014;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: hidden;
  background: #061014 !important;
}

/* Disable the older page-level grid layers that caused the bright left strip. */
.page::before,
.page::after {
  content: none !important;
  display: none !important;
}

/* Main atmospheric layer: soft lighting + professional dark grid. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -18%, rgba(156,255,0,.105) 0, rgba(156,255,0,.035) 26%, transparent 52%),
    radial-gradient(circle at 12% 24%, rgba(41,184,118,.045) 0, transparent 34%),
    radial-gradient(circle at 88% 34%, rgba(0,154,190,.035) 0, transparent 32%),
    linear-gradient(rgba(73,115,119,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,115,119,.035) 1px, transparent 1px),
    linear-gradient(180deg, #071116 0%, #061014 48%, #050d11 100%);
  background-size:
    auto,
    auto,
    auto,
    42px 42px,
    42px 42px,
    auto;
  background-position:
    center top,
    left top,
    right top,
    center top,
    center top,
    center;
}

/* Vignette, scanlines and a faint center light for depth. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.16) 76%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 4px);
  opacity: .88;
}

/* Make content areas transparent so the repaired background stays visible. */
main.page,
.page {
  background: transparent !important;
}

/* Subtle animated ambient glow. */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    animation: scoreboardBackgroundDrift 16s ease-in-out infinite alternate;
  }
}

@keyframes scoreboardBackgroundDrift {
  0% {
    background-position:
      50% 0,
      0 0,
      100% 0,
      0 0,
      0 0,
      center;
  }
  100% {
    background-position:
      52% 18px,
      2% 10px,
      98% 16px,
      0 8px,
      8px 0,
      center;
  }
}

@media (max-width: 760px) {
  body::before {
    background-size:
      auto,
      auto,
      auto,
      34px 34px,
      34px 34px,
      auto;
  }
}


/* =========================================================
   FINAL SCOREBOARD LAYOUT REPAIR
   Keep this block at the absolute end of the stylesheet.
   It preserves the repaired background and fixes the podium/table layout.
   ========================================================= */

/* Keep all scoreboard sections aligned to the same centered width. */
.premium-scoreboard-head,
.premium-scoreboard-tabs,
.reference-podium,
.premium-ranking-panel {
  width: min(1380px, calc(100% - 64px)) !important;
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Do not let a one-person podium use the three-column layout. */
.reference-podium.count-1 {
  display: grid !important;
  grid-template-columns: minmax(320px, 460px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: 0 !important;
  margin-top: 56px !important;
  margin-bottom: 28px !important;
}

.reference-podium.count-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 460px)) !important;
  justify-content: center !important;
  align-items: end !important;
  gap: 22px !important;
  margin-top: 62px !important;
  margin-bottom: 28px !important;
}

.reference-podium.count-3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr) !important;
  align-items: end !important;
  gap: 20px !important;
  margin-top: 78px !important;
  margin-bottom: 28px !important;
}

/* Correct visual order: second, first, third. */
.reference-podium.count-3 .place-1 { order: 2 !important; }
.reference-podium.count-3 .place-2 { order: 1 !important; }
.reference-podium.count-3 .place-3 { order: 3 !important; }

/* Compact one-student card instead of the oversized empty layout. */
.reference-podium.count-1 .reference-winner.place-1 {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 58px 22px 18px !important;
}

.reference-podium.count-1 .place-1 .winner-award {
  top: -58px !important;
  width: 116px !important;
  height: 90px !important;
}

.reference-podium.count-1 .place-1 .winner-profile {
  margin-top: 8px !important;
}

.reference-podium.count-1 .place-1 .reference-avatar {
  width: 92px !important;
  height: 92px !important;
  flex-basis: 92px !important;
}

.reference-podium.count-1 .winner-score {
  margin-top: 14px !important;
}

.reference-podium.count-1 .winner-stats {
  margin-top: 14px !important;
}

/* The ranking table must always be visible, including for one student. */
.premium-ranking-panel {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 44px !important;
}

.premium-ranking-list {
  display: block !important;
}

/* Keep table rows readable and aligned. */
.premium-ranking-row {
  width: 100% !important;
}

/* Slightly reduce vertical page emptiness when there are few students. */
.page {
  padding-bottom: 34px !important;
}

@media (max-width: 1050px) {
  .premium-scoreboard-head,
  .premium-scoreboard-tabs,
  .reference-podium,
  .premium-ranking-panel {
    width: min(100% - 32px, 920px) !important;
  }

  .reference-podium.count-2 {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .premium-scoreboard-head,
  .premium-scoreboard-tabs,
  .reference-podium,
  .premium-ranking-panel {
    width: calc(100% - 24px) !important;
  }

  .reference-podium.count-1,
  .reference-podium.count-2,
  .reference-podium.count-3 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 62px !important;
  }

  .reference-podium.count-3 .place-1,
  .reference-podium.count-3 .place-2,
  .reference-podium.count-3 .place-3 {
    order: initial !important;
  }
}

/* =========================================================
   MYEDUGATE LABS V2 — LAB CATALOG + DASHBOARD
   ========================================================= */
main.page > .labs-v2-header, main.page > .labs-v2-stats, main.page > .labs-v2-toolbar,
main.page > .labs-v2-grid, main.page > .labs-v2-empty, main.page > .labs-v2-no-match,
main.page > .dash-v2-hero, main.page > .dash-v2-layout,
.page > .labs-v2-header, .page > .labs-v2-stats, .page > .labs-v2-toolbar,
.page > .labs-v2-grid, .page > .labs-v2-empty, .page > .labs-v2-no-match,
.page > .dash-v2-hero, .page > .dash-v2-layout {
  width:min(var(--app-content-width),calc(100% - var(--app-page-gap)))!important;
  max-width:var(--app-content-width)!important;margin-left:auto!important;margin-right:auto!important;
}
.labs-v2-header{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:28px 0 25px}
.labs-v2-kicker{display:inline-flex;align-items:center;gap:9px;color:#9fef00;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.12em}
.labs-v2-kicker i{width:7px;height:7px;border-radius:50%;background:#9fef00;box-shadow:0 0 14px #9fef00;animation:cyberPulse 1.7s infinite}
.labs-v2-header h1,.dash-v2-hero h1{margin:12px 0 8px;color:#f7fbf9;font-size:clamp(38px,4.5vw,58px);line-height:1;letter-spacing:-.055em}
.labs-v2-header p,.dash-v2-hero p{max-width:680px;margin:0;color:#84968d;font-size:15px}
.labs-v2-overall{display:flex;align-items:center;gap:18px;min-width:320px;padding:16px 20px;border:1px solid #26362e;border-radius:14px;background:rgba(9,17,14,.88)}
.labs-v2-overall>div:last-child strong,.labs-v2-overall>div:last-child span,.labs-v2-overall>div:last-child small{display:block}.labs-v2-overall>div:last-child strong{font-size:20px}.labs-v2-overall>div:last-child span{color:#87988f}.labs-v2-overall>div:last-child small{margin-top:4px;color:#9fef00}
.labs-v2-ring{--progress:0;position:relative;width:76px;height:76px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;background:conic-gradient(#9fef00 calc(var(--progress)*1%),#1b2922 0)}
.labs-v2-ring:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#09120e}.labs-v2-ring strong,.labs-v2-ring span{position:relative;z-index:1;display:block;text-align:center}.labs-v2-ring strong{font-size:17px}.labs-v2-ring span{margin-top:-23px;color:#718179;font-size:8px;text-transform:uppercase}
.labs-v2-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:0 auto 20px!important}.labs-v2-stats article{position:relative;padding:17px 19px;border:1px solid #24352c;border-radius:11px;background:linear-gradient(145deg,rgba(15,24,19,.96),rgba(8,15,12,.96));overflow:hidden}.labs-v2-stats article:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#9fef00,transparent 72%)}.labs-v2-stats span,.labs-v2-stats small{display:block}.labs-v2-stats span{color:#819188;font-size:10px;text-transform:uppercase;letter-spacing:.09em}.labs-v2-stats strong{display:block;margin:6px 0 2px;font-size:28px}.labs-v2-stats small{color:#627168;font-size:11px}
.labs-v2-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 auto 22px!important;padding:11px;border:1px solid #24342c;border-radius:12px;background:rgba(7,14,11,.82)}.labs-v2-tabs{display:flex;gap:4px;flex-wrap:wrap}.labs-v2-tabs button{min-height:36px;padding:8px 12px;border:0;border-radius:7px;background:transparent;color:#83948b;font:700 10px 'JetBrains Mono',monospace;text-transform:uppercase}.labs-v2-tabs button b{margin-left:5px;color:#66756d}.labs-v2-tabs button.is-active{background:rgba(159,239,0,.1);color:#baff72;box-shadow:none}.labs-v2-search{width:min(260px,100%);display:flex;align-items:center;gap:8px;margin:0;padding:0 11px;border:1px solid #26382e;border-radius:8px;background:#07100d}.labs-v2-search span{color:#9fef00;font-size:19px}.labs-v2-search input{padding:9px 0;border:0;background:transparent;box-shadow:none!important;text-transform:none}
.labs-v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin-bottom:34px!important}.labs-v2-card{position:relative;overflow:hidden;border:1px solid #26362e;border-radius:14px;background:linear-gradient(160deg,#101a15,#08100d);box-shadow:0 18px 45px rgba(0,0,0,.17);transition:.2s}.labs-v2-card:hover{transform:translateY(-4px);border-color:rgba(159,239,0,.42);box-shadow:0 25px 60px rgba(0,0,0,.3),0 0 26px rgba(159,239,0,.04)}.labs-v2-card[hidden]{display:none!important}
.labs-v2-cover{position:relative;height:112px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 120%,rgba(159,239,0,.2),transparent 50%),linear-gradient(135deg,#13231b,#09110e)}.labs-v2-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(159,239,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(159,239,0,.035) 1px,transparent 1px);background-size:22px 22px}.labs-v2-cover.difficulty-medium{background:radial-gradient(circle at 50% 120%,rgba(255,191,71,.22),transparent 50%),linear-gradient(135deg,#251c10,#0d110e)}.labs-v2-cover.difficulty-hard{background:radial-gradient(circle at 50% 120%,rgba(255,74,99,.23),transparent 50%),linear-gradient(135deg,#251014,#0d1010)}
.labs-v2-icon{position:relative;z-index:1;width:58px;height:58px;display:grid;place-items:center;border:1px solid rgba(159,239,0,.33);border-radius:15px;color:#9fef00;background:rgba(159,239,0,.07);box-shadow:0 0 32px rgba(159,239,0,.09)}.labs-v2-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.difficulty-medium .labs-v2-icon{color:#ffbd4a;border-color:rgba(255,189,74,.4);background:rgba(255,189,74,.07)}.difficulty-hard .labs-v2-icon{color:#ff6378;border-color:rgba(255,99,120,.4);background:rgba(255,99,120,.07)}
.labs-v2-code,.labs-v2-state{position:absolute;z-index:2;top:12px;font:700 9px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.labs-v2-code{left:13px;color:#6f8178}.labs-v2-state{right:12px;padding:5px 7px;border:1px solid #31443a;border-radius:5px;color:#86978e;background:rgba(7,16,13,.72)}.labs-v2-state.in_progress{color:#ffbd4a;border-color:rgba(255,189,74,.35)}.labs-v2-state.completed{color:#9fef00;border-color:rgba(159,239,0,.35)}
.labs-v2-card-body{padding:18px}.labs-v2-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#819189;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.difficulty-pill{padding:4px 7px;border-radius:5px;background:rgba(159,239,0,.08);color:#9fef00}.difficulty-pill.medium{color:#ffbd4a;background:rgba(255,189,74,.08)}.difficulty-pill.hard{color:#ff6378;background:rgba(255,99,120,.08)}.labs-v2-card h2{margin:10px 0 7px;color:#f2f7f4;font-size:19px;letter-spacing:-.025em}.labs-v2-card-body>p{min-height:66px;margin:0 0 14px;color:#788980;font-size:12px;line-height:1.65}
.labs-v2-facts{display:flex;gap:13px;flex-wrap:wrap;padding:11px 0;border-top:1px solid #1e2b24;border-bottom:1px solid #1e2b24;color:#77877e;font-size:10px}.labs-v2-facts b{color:#9fef00}.labs-v2-progress{padding:13px 0}.labs-v2-progress>div{display:flex;justify-content:space-between;color:#77877e;font-size:10px}.labs-v2-progress strong{color:#dbe6df}.labs-v2-progress i{display:block;height:4px;margin-top:7px;overflow:hidden;border-radius:99px;background:#1b2721}.labs-v2-progress i b{display:block;height:100%;border-radius:inherit;background:#9fef00;box-shadow:0 0 9px rgba(159,239,0,.65)}
.labs-v2-footer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.labs-v2-footer-row small{color:#56665e;font-size:9px}.deadline-chip{color:#7f9087;font:700 9px 'JetBrains Mono',monospace}.deadline-chip.warning{color:#ffbd4a}.deadline-chip.danger{color:#ff6378}.labs-v2-launch{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 13px;border:1px solid rgba(159,239,0,.42);border-radius:7px;background:rgba(159,239,0,.08);color:#baff72!important;font:800 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em}.labs-v2-launch:hover{background:#9fef00;color:#07100d!important;box-shadow:0 0 23px rgba(159,239,0,.13)}.labs-v2-launch.inline{width:auto;display:inline-flex;gap:30px}.labs-v2-empty,.labs-v2-no-match{padding:30px;border:1px dashed #304239;border-radius:13px;background:rgba(7,14,11,.75)}.labs-v2-empty{display:flex;align-items:center;gap:28px}.labs-v2-empty h2{margin:6px 0}.labs-v2-empty p{margin:0;color:#7a8a81}.labs-v2-no-match{text-align:center;color:#74857c}
.dash-v2-hero{display:flex;align-items:center;justify-content:space-between;gap:38px;padding:34px 0 28px}.dash-v2-actions{display:flex;align-items:center;gap:18px;margin-top:22px}.dash-v2-link{color:#b4c2ba;font-weight:700}.dash-v2-rank{min-width:260px;padding:21px;border:1px solid #283a30;border-radius:14px;background:#0a1410}.dash-v2-rank span,.dash-v2-rank small{display:block;color:#788980}.dash-v2-rank strong{display:block;margin:5px 0;font-size:38px;color:#9fef00}.dash-v2-rank i{display:block;height:5px;margin:10px 0;border-radius:99px;background:#1b2922;overflow:hidden}.dash-v2-rank i b{display:block;height:100%;background:#9fef00}.dash-v2-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:18px;margin-bottom:32px!important}.dash-v2-main,.dash-v2-side{padding:20px;border:1px solid #25372e;border-radius:14px;background:rgba(9,17,14,.86)}.dash-v2-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.dash-v2-section-head span{color:#9fef00;font:700 9px 'JetBrains Mono',monospace;text-transform:uppercase}.dash-v2-section-head h2{margin:4px 0 0}.dash-v2-section-head a{color:#aaff62;font-size:12px}.dash-v2-assignment-list,.dash-v2-recent{display:grid;gap:8px}.dash-v2-assignment{display:grid;grid-template-columns:42px minmax(0,1fr) auto 18px;align-items:center;gap:13px;padding:13px;border:1px solid #22332a;border-radius:10px;background:#08110d;color:#dfe9e3}.dash-v2-assignment:hover{border-color:rgba(159,239,0,.35);background:#0d1813}.dash-v2-assignment-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(159,239,0,.28);border-radius:9px;color:#9fef00;background:rgba(159,239,0,.05)}.dash-v2-assignment small,.dash-v2-assignment strong,.dash-v2-assignment em{display:block}.dash-v2-assignment small{color:#6f8077;font-size:9px;text-transform:uppercase}.dash-v2-assignment strong{margin:3px 0}.dash-v2-assignment em{color:#66766e;font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dash-v2-assignment-meta{text-align:right}.dash-v2-assignment-meta b,.dash-v2-assignment-meta small{display:block}.dash-v2-assignment-meta b{font-size:11px}.dash-v2-assignment-meta small{margin-top:3px;color:#9fef00}.dash-v2-recent article{display:grid;grid-template-columns:31px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border-bottom:1px solid #1e2c25}.dash-v2-recent i{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(159,239,0,.08);color:#9fef00;font-style:normal}.dash-v2-recent strong,.dash-v2-recent span{display:block}.dash-v2-recent strong{font-size:12px}.dash-v2-recent span{color:#65756d;font-size:9px}.dash-v2-recent b{color:#9fef00;font-size:11px}.dash-v2-empty-card{padding:25px;border:1px dashed #2c3e34;border-radius:10px;text-align:center}.dash-v2-empty-card strong,.dash-v2-empty-card span{display:block}.dash-v2-empty-card span{margin-top:5px;color:#718178}.dash-v2-empty-card.small{padding:20px}
@media(max-width:1000px){.labs-v2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-v2-layout{grid-template-columns:1fr}.labs-v2-header,.dash-v2-hero{align-items:flex-start;flex-direction:column}.labs-v2-overall,.dash-v2-rank{width:100%}}
@media(max-width:760px){.labs-v2-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.labs-v2-toolbar{align-items:stretch;flex-direction:column}.labs-v2-search{width:100%}.labs-v2-grid{grid-template-columns:1fr}.dash-v2-assignment{grid-template-columns:38px minmax(0,1fr) 18px}.dash-v2-assignment-meta{display:none}}
@media(max-width:480px){.labs-v2-stats{grid-template-columns:1fr}.labs-v2-overall{align-items:flex-start;flex-direction:column}.labs-v2-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}}

/* =========================================================
   MYEDUGATE DASHBOARD — REFERENCE MATCH
   Dashboard-only classes; all other pages remain unchanged.
   ========================================================= */

.md-hero,
.md-stat-grid,
.md-progress-card,
.md-panel,
.md-bottom-grid{
  width:min(var(--app-content-width,1180px),calc(100% - var(--app-page-gap,40px)));
  max-width:var(--app-content-width,1180px);
  margin-left:auto;
  margin-right:auto;
}

.md-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
  gap:56px;
  align-items:center;
  padding:48px 0 34px;
}

.md-kicker,
.md-section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#9fef00;
  font:700 10px/1.2 'JetBrains Mono',monospace;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.md-kicker span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9fef00;
  box-shadow:0 0 13px rgba(159,239,0,.8);
}

.md-hero h1{
  margin:14px 0 13px;
  color:#f2f7f4;
  font-size:clamp(42px,5vw,66px);
  line-height:.98;
  letter-spacing:-.06em;
}

.md-hero h1 strong{
  color:#9fef00;
  font-weight:700;
  text-shadow:0 0 28px rgba(159,239,0,.18);
}

.md-hero-copy>p{
  max-width:600px;
  margin:0;
  color:#8b9991;
  font-size:16px;
  line-height:1.75;
}

.md-hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:27px;
}

.md-primary-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border:1px solid #9fef00;
  border-radius:7px;
  color:#07100d!important;
  background:#9fef00;
  font:800 12px 'JetBrains Mono',monospace;
}

.md-primary-btn:hover{
  color:#07100d!important;
  background:#b9ff35;
  box-shadow:0 0 25px rgba(159,239,0,.15);
}

.md-online{
  display:flex;
  align-items:center;
  gap:9px;
  color:#93a199;
  font-size:13px;
}

.md-online i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9fef00;
  box-shadow:0 0 13px rgba(159,239,0,.8);
  animation:mdPulse 1.8s ease-in-out infinite;
}

.md-terminal{
  overflow:hidden;
  border:1px solid #2a3a32;
  border-radius:11px;
  background:rgba(5,12,9,.9);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.md-terminal-bar{
  min-height:43px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid #24332b;
  background:rgba(255,255,255,.02);
}

.md-terminal-bar span{
  width:9px;
  height:9px;
  border-radius:50%;
}
.md-terminal-bar .red{background:#ff5d73}
.md-terminal-bar .yellow{background:#ffc857}
.md-terminal-bar .green{background:#55d980}

.md-terminal-bar strong{
  margin-left:auto;
  color:#6b7971;
  font:600 10px 'JetBrains Mono',monospace;
}

.md-terminal-body{
  min-height:235px;
  padding:22px;
  color:#d8e3dd;
  font:13px/1.75 'JetBrains Mono',monospace;
}

.md-terminal-body p{margin:0 0 4px}
.md-terminal-body p b{color:#9fef00}
.md-terminal-body code{
  display:block;
  margin:0 0 10px 18px;
  color:#87958d;
  white-space:normal;
}
.md-terminal-body em{color:#edf6f1;font-style:normal}
.md-terminal-success{color:#9fef00!important}
.md-terminal-cursor{display:flex;align-items:center;gap:6px}
.md-terminal-cursor i{
  width:7px;
  height:14px;
  background:#c5d0ca;
  animation:mdBlink 1s steps(1) infinite;
}

.md-stat-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}

.md-stat-card{
  position:relative;
  min-height:130px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px;
  overflow:hidden;
  border:1px solid #27372f;
  border-radius:9px;
  background:linear-gradient(145deg,#0e1814,#09110e);
}

.md-stat-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent),transparent 72%);
}

.md-stat-icon{
  width:38px;
  height:38px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  border-radius:50%;
  color:var(--accent);
  font-size:22px;
  line-height:1;
}

.md-stat-card span{
  display:block;
  color:#7d8c84;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.md-stat-card strong{
  display:block;
  margin-top:8px;
  color:#f4f8f5;
  font-size:29px;
  line-height:1;
}

.md-stat-card strong em{
  color:#79867f;
  font-size:13px;
  font-style:normal;
}

.md-stat-card small{
  display:block;
  margin-top:10px;
  color:#66736c;
}

.md-stat-green{--accent:#9fef00}
.md-stat-orange{--accent:#ff8a1f}
.md-stat-red{--accent:#ff3458}

.md-progress-card{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr) 130px;
  align-items:center;
  gap:32px;
  margin-bottom:20px;
  padding:24px 28px;
  border:1px solid #26372e;
  border-radius:10px;
  background:
    radial-gradient(circle at 100% 50%,rgba(159,239,0,.04),transparent 28%),
    rgba(9,17,13,.82);
}

.md-progress-summary{
  display:flex;
  align-items:center;
  gap:22px;
}

.md-progress-ring{
  --progress:0;
  width:92px;
  height:92px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle,#0b1511 61%,transparent 63%),
    conic-gradient(#9fef00 calc(var(--progress)*1%),#27362f 0);
  box-shadow:inset 0 0 0 1px #2b3b33;
}

.md-progress-ring span{
  color:#fff;
  font:800 20px 'JetBrains Mono',monospace;
}

.md-progress-summary h2{
  margin:7px 0 6px;
  color:#f2f6f3;
  font-size:22px;
}

.md-progress-summary p{
  margin:0;
  color:#7d8b84;
  line-height:1.6;
}

.md-progress-bars{
  display:grid;
  gap:17px;
}

.md-progress-row>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.md-progress-row span{
  color:#8c9a92;
  font-size:12px;
}

.md-progress-row strong{
  color:#e9f0ec;
  font:800 11px 'JetBrains Mono',monospace;
}

.md-track{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#1d2923;
}

.md-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#77b900,#9fef00);
  box-shadow:0 0 12px rgba(159,239,0,.25);
}

.md-radar{
  position:relative;
  width:105px;
  height:105px;
  margin-left:auto;
  border:1px dashed rgba(159,239,0,.27);
  border-radius:50%;
}

.md-radar::before,
.md-radar::after{
  content:"";
  position:absolute;
  border:1px solid rgba(159,239,0,.14);
  border-radius:50%;
  inset:21px;
}

.md-radar::after{inset:41px}

.md-radar span{
  position:absolute;
  inset:10px;
  border-top:1px solid rgba(159,239,0,.25);
  transform:rotate(40deg);
}

.md-radar i{
  position:absolute;
  left:50%;
  top:50%;
  width:17px;
  height:17px;
  background:#9fef00;
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 18px rgba(159,239,0,.55);
}

.md-panel{
  padding:24px;
  border:1px solid #26372e;
  border-radius:10px;
  background:rgba(9,17,13,.8);
}

.md-panel-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:20px;
}

.md-panel-head.compact{margin-bottom:15px}

.md-panel-head h2{
  margin:7px 0 5px;
  color:#f1f6f3;
  font-size:23px;
}

.md-panel-head p{
  margin:0;
  color:#7d8b84;
}

.md-panel-head>a{
  color:#9fef00!important;
  font-weight:700;
  white-space:nowrap;
}

.md-lab-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.md-lab-card{
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:16px;
  padding:16px;
  border:1px solid #293a31;
  border-radius:9px;
  background:
    radial-gradient(circle at 100% 0,rgba(159,239,0,.035),transparent 28%),
    linear-gradient(145deg,#101914,#0a110e);
}

.md-lab-icon{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  align-self:start;
  margin-top:17px;
  border:1px solid rgba(159,239,0,.46);
  border-radius:10px;
  color:#9fef00;
  background:rgba(159,239,0,.025);
  font:700 26px 'JetBrains Mono',monospace;
  box-shadow:inset 0 0 20px rgba(159,239,0,.025);
}

.md-lab-content{min-width:0}

.md-lab-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.md-category,
.md-status{
  display:inline-flex;
  padding:5px 7px;
  border-radius:4px;
  font:700 9px 'JetBrains Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.md-category{
  border:1px solid rgba(159,239,0,.32);
  color:#9fef00;
  background:rgba(159,239,0,.06);
}

.md-status{
  border:1px solid #35463d;
  color:#9ba9a1;
  background:#132119;
}

.md-status.completed{color:#9fef00}
.md-status.in_progress{color:#ffc857}

.md-lab-code{
  margin-top:10px;
  color:#5d6a63;
  font:700 9px 'JetBrains Mono',monospace;
  letter-spacing:.10em;
}

.md-lab-card h3{
  margin:5px 0 7px;
  color:#f2f6f3;
  font-size:20px;
}

.md-lab-card p{
  margin:0 0 14px;
  color:#819087;
  line-height:1.65;
}

.md-lab-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 18px;
  padding:11px 0;
  border-top:1px solid #202b25;
  color:#718078;
  font-size:11px;
}

.md-lab-info span{
  display:flex;
  justify-content:space-between;
  gap:8px;
}

.md-lab-info b{
  color:#dce6e0;
  font-weight:700;
}

.md-lab-btn{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-top:4px;
  padding:10px;
  border:1px solid rgba(159,239,0,.52);
  border-radius:5px;
  color:#9fef00!important;
  background:rgba(159,239,0,.025);
  font:800 12px 'JetBrains Mono',monospace;
}

.md-lab-btn:hover{
  color:#07100d!important;
  background:#9fef00;
}

.md-bottom-grid{
  display:grid;
  grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);
  gap:18px;
  margin-top:18px;
}

.md-profile-card{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 50%,rgba(159,239,0,.04),transparent 35%),
    linear-gradient(145deg,#0d1813,#08100d);
}

.md-profile-avatar{
  width:70px;
  height:70px;
  border-color:rgba(159,239,0,.42);
}

.md-profile-copy h2{
  margin:5px 0 4px;
  font-size:21px;
}

.md-profile-copy p{
  margin:0 0 8px;
  color:#809087;
}

.md-rank-pill{
  display:inline-flex;
  padding:4px 8px;
  border:1px solid rgba(159,239,0,.24);
  border-radius:4px;
  color:#9fef00;
  background:rgba(159,239,0,.04);
  font:700 10px 'JetBrains Mono',monospace;
}

.md-outline-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(159,239,0,.55);
  border-radius:5px;
  color:#9fef00!important;
  background:rgba(159,239,0,.025);
  font:800 11px 'JetBrains Mono',monospace;
}

.md-outline-btn:hover{
  color:#07100d!important;
  background:#9fef00;
}

.md-class-list{
  display:grid;
  gap:8px;
}

.md-class-list>a{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 52px 52px 14px;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #24342c;
  border-radius:7px;
  background:#09120e;
  color:#dde7e1!important;
}

.md-class-list strong,
.md-class-list small{
  display:block;
}

.md-class-list small{color:#68766f}
.md-class-list>a>span:nth-last-child(2),
.md-class-list>a>span:nth-last-child(3){text-align:center}

.md-no-classmates{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border:1px dashed #304138;
  border-radius:7px;
  color:#748279;
}

.md-no-classmates span{
  font-size:27px;
  color:#9aaba2;
}

.md-no-classmates p{margin:0}

.md-empty-state{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  color:#7d8b84;
}

@keyframes mdPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.78)}
}

@keyframes mdBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@media(max-width:1100px){
  .md-hero{grid-template-columns:1fr}
  .md-terminal{max-width:720px}
  .md-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md-progress-card{grid-template-columns:1fr}
  .md-radar{display:none}
  .md-lab-grid{grid-template-columns:1fr}
  .md-bottom-grid{grid-template-columns:1fr}
}

@media(max-width:720px){
  .md-hero{padding-top:22px;gap:26px}
  .md-hero h1{font-size:clamp(36px,12vw,50px)}
  .md-stat-grid{grid-template-columns:1fr}
  .md-progress-summary{align-items:flex-start;flex-direction:column}
  .md-panel{padding:18px}
  .md-panel-head{align-items:flex-start;flex-direction:column}
  .md-lab-card{grid-template-columns:1fr}
  .md-lab-icon{margin-top:0}
  .md-profile-card{grid-template-columns:1fr}
  .md-outline-btn{width:100%;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .md-online i,
  .md-terminal-cursor i{animation:none}
}

/* =========================================================
   MYEDUGATE DASHBOARD — INTERACTIVE MOTION LAYER
   Dashboard-only animation and interaction enhancements.
   ========================================================= */

.md-hero,
.md-stat-grid,
.md-progress-card,
.md-panel,
.md-bottom-grid{
  --mouse-x:50%;
  --mouse-y:50%;
}

/* Smooth page entrance */
.md-hero,
.md-stat-card,
.md-progress-card,
.md-panel{
  opacity:0;
  transform:translateY(18px);
}

body.md-dashboard-ready .md-hero,
body.md-dashboard-ready .md-stat-card,
body.md-dashboard-ready .md-progress-card,
body.md-dashboard-ready .md-panel{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.7,.2,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

body.md-dashboard-ready .md-stat-card:nth-child(1){transition-delay:.06s}
body.md-dashboard-ready .md-stat-card:nth-child(2){transition-delay:.12s}
body.md-dashboard-ready .md-stat-card:nth-child(3){transition-delay:.18s}
body.md-dashboard-ready .md-stat-card:nth-child(4){transition-delay:.24s}
body.md-dashboard-ready .md-stat-card:nth-child(5){transition-delay:.30s}
body.md-dashboard-ready .md-progress-card{transition-delay:.18s}
body.md-dashboard-ready .md-assignments{transition-delay:.24s}
body.md-dashboard-ready .md-bottom-grid .md-panel:first-child{transition-delay:.30s}
body.md-dashboard-ready .md-bottom-grid .md-panel:last-child{transition-delay:.36s}

/* Subtle animated background glow */
.md-hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  left:-120px;
  top:-80px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(159,239,0,.075),transparent 68%);
  filter:blur(16px);
  animation:mdHeroGlow 8s ease-in-out infinite;
}

.md-hero{
  position:relative;
  isolation:isolate;
}

/* Cursor-following card highlight */
.md-stat-card::before,
.md-progress-card::before,
.md-panel::before,
.md-terminal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(
      260px circle at var(--mouse-x) var(--mouse-y),
      rgba(159,239,0,.075),
      transparent 58%
    );
  opacity:0;
  transition:opacity .22s ease;
}

.md-stat-card:hover::before,
.md-progress-card:hover::before,
.md-panel:hover::before,
.md-terminal:hover::before{
  opacity:1;
}

.md-stat-card,
.md-progress-card,
.md-panel,
.md-terminal,
.md-lab-card{
  position:relative;
  isolation:isolate;
}

/* Floating terminal */
.md-terminal{
  animation:mdTerminalFloat 6s ease-in-out infinite;
  transform-style:preserve-3d;
}

.md-terminal:hover{
  border-color:rgba(159,239,0,.42);
  box-shadow:
    0 30px 75px rgba(0,0,0,.34),
    0 0 0 1px rgba(159,239,0,.035),
    0 0 34px rgba(159,239,0,.07);
}

.md-terminal-bar .red,
.md-terminal-bar .yellow,
.md-terminal-bar .green{
  animation:mdWindowDot 2.4s ease-in-out infinite;
}

.md-terminal-bar .yellow{animation-delay:.22s}
.md-terminal-bar .green{animation-delay:.44s}

/* Terminal line reveal */
.md-terminal-body p,
.md-terminal-body code{
  opacity:0;
  transform:translateX(-8px);
}

body.md-dashboard-ready .md-terminal-body p,
body.md-dashboard-ready .md-terminal-body code{
  animation:mdTerminalLine .36s ease forwards;
}

body.md-dashboard-ready .md-terminal-body p:nth-child(1){animation-delay:.45s}
body.md-dashboard-ready .md-terminal-body code:nth-child(2){animation-delay:.58s}
body.md-dashboard-ready .md-terminal-body p:nth-child(3){animation-delay:.72s}
body.md-dashboard-ready .md-terminal-body code:nth-child(4){animation-delay:.86s}
body.md-dashboard-ready .md-terminal-body p:nth-child(5){animation-delay:1s}
body.md-dashboard-ready .md-terminal-body code:nth-child(6){animation-delay:1.14s}
body.md-dashboard-ready .md-terminal-body p:nth-child(7){animation-delay:1.28s}

/* Interactive stat cards */
.md-stat-card{
  cursor:default;
  transform-style:preserve-3d;
  will-change:transform;
}

.md-stat-card:hover{
  transform:translateY(-6px) scale(1.012);
  border-color:rgba(159,239,0,.34);
  box-shadow:
    0 22px 45px rgba(0,0,0,.26),
    0 0 0 1px rgba(159,239,0,.025);
}

.md-stat-orange:hover{border-color:rgba(255,138,31,.38)}
.md-stat-red:hover{border-color:rgba(255,52,88,.38)}

.md-stat-icon{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.md-stat-card:hover .md-stat-icon{
  transform:rotate(-7deg) scale(1.12);
  box-shadow:0 0 18px color-mix(in srgb,var(--accent) 28%,transparent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);
}

.md-stat-card strong{
  transition:color .2s ease,text-shadow .2s ease;
}

.md-stat-card:hover strong{
  color:#fff;
  text-shadow:0 0 16px rgba(255,255,255,.08);
}

/* Progress animation and radar */
.md-progress-ring{
  transition:transform .25s ease,box-shadow .25s ease;
  animation:mdRingBreathe 4s ease-in-out infinite;
}

.md-progress-card:hover .md-progress-ring{
  transform:scale(1.06);
  box-shadow:
    inset 0 0 0 1px #2b3b33,
    0 0 24px rgba(159,239,0,.10);
}

.md-track i{
  width:0!important;
  transition:width 1.25s cubic-bezier(.2,.75,.2,1);
}

body.md-progress-loaded .md-track i{
  width:var(--target-width)!important;
}

.md-radar{
  animation:mdRadarPulse 4s ease-in-out infinite;
}

.md-radar span{
  animation:mdRadarSweep 3.6s linear infinite;
  transform-origin:50% 50%;
}

.md-radar i{
  animation:mdRadarCore 1.9s ease-in-out infinite;
}

/* Lab card movement */
.md-lab-card{
  overflow:hidden;
  transform-style:preserve-3d;
  transition:
    transform .26s cubic-bezier(.2,.7,.2,1),
    border-color .22s ease,
    box-shadow .22s ease;
  will-change:transform;
}

.md-lab-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(159,239,0,.07) 42%,
      transparent 62%
    );
  transform:translateX(-120%);
  transition:transform .75s ease;
}

.md-lab-card:hover{
  border-color:rgba(159,239,0,.48);
  box-shadow:
    0 24px 55px rgba(0,0,0,.30),
    0 0 26px rgba(159,239,0,.055);
}

.md-lab-card:hover::before{
  transform:translateX(120%);
}

.md-lab-icon{
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease,
    background .3s ease;
}

.md-lab-card:hover .md-lab-icon{
  transform:translateY(-4px) rotate(-3deg) scale(1.06);
  background:rgba(159,239,0,.055);
  box-shadow:
    inset 0 0 24px rgba(159,239,0,.045),
    0 0 20px rgba(159,239,0,.08);
}

.md-category{
  transition:transform .2s ease,box-shadow .2s ease;
}

.md-lab-card:hover .md-category{
  transform:translateY(-1px);
  box-shadow:0 0 14px rgba(159,239,0,.08);
}

/* Buttons */
.md-primary-btn,
.md-lab-btn,
.md-outline-btn,
.md-panel-head>a{
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease;
}

.md-primary-btn:hover,
.md-lab-btn:hover,
.md-outline-btn:hover{
  transform:translateY(-2px);
}

.md-primary-btn span,
.md-lab-btn span,
.md-outline-btn span,
.md-panel-head>a span{
  display:inline-block;
  transition:transform .2s ease;
}

.md-primary-btn:hover span,
.md-lab-btn:hover span,
.md-outline-btn:hover span,
.md-panel-head>a:hover span{
  transform:translateX(5px);
}

.md-ripple{
  position:absolute;
  width:8px;
  height:8px;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  transform:translate(-50%,-50%) scale(0);
  animation:mdRipple .55s ease-out forwards;
}

/* Profile and classmates */
.md-profile-card:hover .md-profile-avatar{
  transform:scale(1.06) rotate(-2deg);
  box-shadow:0 0 24px rgba(159,239,0,.13);
}

.md-profile-avatar{
  transition:transform .25s ease,box-shadow .25s ease;
}

.md-class-list>a{
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.md-class-list>a:hover{
  transform:translateX(5px);
  border-color:rgba(159,239,0,.34);
  background:#0d1813;
}

/* Section header link pulse */
.md-panel-head>a{
  animation:mdLinkPulse 3s ease-in-out infinite;
}

/* Keyframes */
@keyframes mdHeroGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.7}
  50%{transform:translate3d(55px,25px,0) scale(1.12);opacity:1}
}

@keyframes mdTerminalFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

@keyframes mdWindowDot{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(.78);opacity:.55}
}

@keyframes mdTerminalLine{
  to{opacity:1;transform:translateX(0)}
}

@keyframes mdRingBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}

@keyframes mdRadarPulse{
  0%,100%{opacity:.72;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

@keyframes mdRadarSweep{
  to{transform:rotate(400deg)}
}

@keyframes mdRadarCore{
  0%,100%{box-shadow:0 0 18px rgba(159,239,0,.55)}
  50%{box-shadow:0 0 34px rgba(159,239,0,.9)}
}

@keyframes mdBlink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@keyframes mdRipple{
  to{transform:translate(-50%,-50%) scale(22);opacity:0}
}

@keyframes mdLinkPulse{
  0%,100%{text-shadow:none}
  50%{text-shadow:0 0 14px rgba(159,239,0,.30)}
}

@media(max-width:720px){
  .md-terminal{animation:none}
  .md-stat-card:hover,
  .md-lab-card:hover{transform:translateY(-3px)}
}

@media(prefers-reduced-motion:reduce){
  .md-hero,
  .md-stat-card,
  .md-progress-card,
  .md-panel,
  .md-terminal-body p,
  .md-terminal-body code{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  .md-terminal,
  .md-terminal-bar span,
  .md-progress-ring,
  .md-radar,
  .md-radar span,
  .md-radar i,
  .md-panel-head>a{
    animation:none!important;
  }

  .md-track i{
    transition:none!important;
  }
}

/* =========================================================
   REAL FLAMES + CLEAN PROGRESS SCANNER
   ========================================================= */

/* Remove the generic circle treatment from both flame stat icons. */
.md-stat-icon.md-real-flame{
  position:relative;
  width:42px;
  height:45px;
  flex:0 0 42px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform-origin:50% 88%;
  animation:mdStatFlameSway 1.05s ease-in-out infinite alternate;
}

/* Main outer flame. */
.md-real-flame::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:27px;
  height:38px;
  margin-left:-13px;
  border-radius:72% 28% 63% 37% / 76% 44% 56% 24%;
  transform-origin:50% 100%;
  animation:mdStatFlameOuter .72s ease-in-out infinite alternate;
}

/* Inner hot flame. */
.md-real-flame::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:13px;
  height:23px;
  margin-left:-6px;
  border-radius:64% 36% 58% 42% / 76% 48% 52% 24%;
  transform-origin:50% 100%;
  animation:mdStatFlameInner .52s ease-in-out infinite alternate-reverse;
}

/* Small secondary tongue of fire. */
.md-real-flame>i{
  position:absolute;
  left:8px;
  bottom:8px;
  width:10px;
  height:20px;
  border-radius:75% 25% 65% 35% / 74% 48% 52% 26%;
  transform:rotate(-18deg);
  transform-origin:50% 100%;
  animation:mdStatFlameTongue .64s ease-in-out infinite alternate;
}

/* Orange daily-streak fire. */
.md-real-flame-orange::before{
  background:
    radial-gradient(circle at 51% 75%,#fff7a0 0 10%,transparent 11%),
    radial-gradient(circle at 50% 73%,#ffd843 0 25%,transparent 26%),
    linear-gradient(155deg,#fff168 0%,#ffb21e 34%,#ff6a00 68%,#c62b00 100%);
  box-shadow:
    0 0 8px rgba(255,189,45,.92),
    0 0 18px rgba(255,103,0,.56),
    0 0 32px rgba(255,74,0,.20);
}

.md-real-flame-orange::after{
  background:linear-gradient(165deg,#fffbd7 0%,#fff06c 42%,#ff9d19 100%);
  box-shadow:0 0 8px rgba(255,239,93,.90);
}

.md-real-flame-orange>i{
  background:linear-gradient(165deg,#ffd44a,#ff6700);
  box-shadow:0 0 8px rgba(255,111,0,.50);
}

/* Red First Blood fire. */
.md-real-flame-red::before{
  background:
    radial-gradient(circle at 51% 75%,#ffe3e7 0 10%,transparent 11%),
    radial-gradient(circle at 50% 73%,#ff8da0 0 25%,transparent 26%),
    linear-gradient(155deg,#ffb1bc 0%,#ff4d68 38%,#dc0036 72%,#750018 100%);
  box-shadow:
    0 0 8px rgba(255,91,116,.94),
    0 0 19px rgba(232,0,54,.58),
    0 0 34px rgba(179,0,37,.24);
}

.md-real-flame-red::after{
  background:linear-gradient(165deg,#fff0f2 0%,#ff91a2 42%,#ef1741 100%);
  box-shadow:0 0 8px rgba(255,91,116,.92);
}

.md-real-flame-red>i{
  background:linear-gradient(165deg,#ff8a9c,#d90035);
  box-shadow:0 0 8px rgba(228,0,53,.55);
}

.md-stat-card:hover .md-real-flame{
  transform:scale(1.09);
  background:transparent;
  box-shadow:none;
}

/* Cleaner circular scanner replacing the awkward old radar shape. */
.md-scanner{
  position:relative;
  width:112px;
  height:112px;
  margin-left:auto;
  overflow:hidden;
  border:1px solid rgba(159,239,0,.24);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(159,239,0,.08) 0 2%,transparent 3%),
    radial-gradient(circle at center,rgba(159,239,0,.035),transparent 66%);
  box-shadow:
    inset 0 0 28px rgba(159,239,0,.025),
    0 0 24px rgba(159,239,0,.035);
}

.md-scanner-ring{
  position:absolute;
  border:1px solid rgba(159,239,0,.17);
  border-radius:50%;
}

.md-scanner-ring.ring-one{inset:20px}
.md-scanner-ring.ring-two{inset:39px}

.md-scanner-cross{
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(159,239,0,.11);
  transform:translate(-50%,-50%);
}

.md-scanner-cross.cross-x{
  width:84%;
  height:1px;
}

.md-scanner-cross.cross-y{
  width:1px;
  height:84%;
}

.md-scanner-sweep{
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:50%;
  transform-origin:0 0;
  background:
    linear-gradient(
      135deg,
      rgba(159,239,0,.28),
      rgba(159,239,0,.07) 45%,
      transparent 72%
    );
  clip-path:polygon(0 0,100% 0,0 100%);
  animation:mdScannerSweep 3.2s linear infinite;
}

.md-scanner-core{
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  border:2px solid #b9ff35;
  border-radius:50%;
  background:#9fef00;
  transform:translate(-50%,-50%);
  box-shadow:
    0 0 10px rgba(159,239,0,.95),
    0 0 25px rgba(159,239,0,.52);
  animation:mdScannerCore 1.65s ease-in-out infinite;
}

.md-scanner-dot{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9fef00;
  box-shadow:0 0 8px rgba(159,239,0,.8);
  animation:mdScannerDot 2s ease-in-out infinite;
}

.md-scanner-dot.dot-one{
  left:69%;
  top:29%;
}

.md-scanner-dot.dot-two{
  left:27%;
  top:68%;
  animation-delay:.72s;
}

@keyframes mdStatFlameSway{
  0%{transform:rotate(-3deg) translateY(1px)}
  50%{transform:rotate(2deg) translateY(-1px)}
  100%{transform:rotate(4deg)}
}

@keyframes mdStatFlameOuter{
  0%{
    transform:rotate(-6deg) scaleX(.90) scaleY(.95);
    border-radius:76% 24% 65% 35% / 78% 42% 58% 22%;
  }
  48%{
    transform:rotate(2deg) scaleX(1.05) scaleY(1.05);
  }
  100%{
    transform:rotate(7deg) scaleX(.94) scaleY(1.12);
    border-radius:58% 42% 72% 28% / 67% 54% 46% 33%;
  }
}

@keyframes mdStatFlameInner{
  from{transform:rotate(6deg) scale(.88,.92) translateY(1px)}
  to{transform:rotate(-6deg) scale(1.06,1.12) translateY(-1px)}
}

@keyframes mdStatFlameTongue{
  from{transform:rotate(-22deg) scale(.86,.92)}
  to{transform:rotate(-10deg) scale(1.04,1.12) translateY(-2px)}
}

@keyframes mdScannerSweep{
  to{transform:rotate(360deg)}
}

@keyframes mdScannerCore{
  0%,100%{transform:translate(-50%,-50%) scale(.88);opacity:.82}
  50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}
}

@keyframes mdScannerDot{
  0%,100%{opacity:.22;transform:scale(.72)}
  50%{opacity:1;transform:scale(1.18)}
}

@media(max-width:1100px){
  .md-scanner{display:none}
}

@media(prefers-reduced-motion:reduce){
  .md-real-flame,
  .md-real-flame::before,
  .md-real-flame::after,
  .md-real-flame>i,
  .md-scanner-sweep,
  .md-scanner-core,
  .md-scanner-dot{
    animation:none!important;
  }
}

/* =========================================================
   DASHBOARD ASSIGNED LABS — MATCH MY LABS PAGE
   Reuses the original Labs-page card visual language.
   ========================================================= */

.md-assignments{
  overflow:visible;
}

.md-dashboard-labs-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:0!important;
}

.md-dashboard-lab-card{
  min-width:0;
  height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}

.md-dashboard-lab-card .labs-v2-cover{
  min-height:150px;
}

.md-dashboard-lab-card .labs-v2-card-body{
  display:flex;
  flex-direction:column;
  min-height:340px;
}

.md-dashboard-lab-card .labs-v2-card-body>p{
  flex:1;
  min-height:0;
}

.md-dashboard-lab-card .labs-v2-launch{
  margin-top:auto;
}

/* Make both dashboard cards use the same outlined launch button.
   This avoids one card appearing filled while the other is outlined. */
.md-dashboard-lab-card .labs-v2-launch{
  color:#9fef00!important;
  background:rgba(159,239,0,.025)!important;
  border-color:rgba(159,239,0,.52)!important;
}

.md-dashboard-lab-card .labs-v2-launch:hover{
  color:#07100d!important;
  background:#9fef00!important;
  box-shadow:0 0 24px rgba(159,239,0,.12);
}

/* Interactive sheen and lift copied into the dashboard context. */
.md-dashboard-lab-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      112deg,
      transparent 18%,
      rgba(255,255,255,.028) 42%,
      rgba(159,239,0,.045) 48%,
      transparent 66%
    );
  transform:translateX(-125%);
  transition:transform .85s ease;
}

.md-dashboard-lab-card:hover::after{
  transform:translateX(125%);
}

.md-dashboard-lab-card:hover{
  border-color:rgba(159,239,0,.48);
  box-shadow:
    0 28px 65px rgba(0,0,0,.32),
    0 0 28px rgba(159,239,0,.055);
}

.md-dashboard-lab-card .labs-v2-icon{
  transition:
    transform .28s cubic-bezier(.2,.75,.2,1),
    box-shadow .28s ease,
    background .28s ease;
}

.md-dashboard-lab-card:hover .labs-v2-icon{
  transform:translateY(-4px) rotate(-3deg) scale(1.06);
  box-shadow:
    inset 0 0 28px rgba(159,239,0,.045),
    0 0 23px rgba(159,239,0,.11);
}

.md-dashboard-lab-card .labs-v2-launch span{
  transition:transform .2s ease;
}

.md-dashboard-lab-card .labs-v2-launch:hover span{
  transform:translateX(5px);
}

@media(max-width:900px){
  .md-dashboard-labs-grid{
    grid-template-columns:1fr;
  }

  .md-dashboard-lab-card .labs-v2-card-body{
    min-height:auto;
  }
}

@media(prefers-reduced-motion:reduce){
  .md-dashboard-lab-card,
  .md-dashboard-lab-card::after,
  .md-dashboard-lab-card .labs-v2-icon,
  .md-dashboard-lab-card .labs-v2-launch span{
    transition:none!important;
    transform:none!important;
  }
}

/* =========================================================
   MY LABS PAGE — INTERACTIVE MOTION LAYER
   Only affects the Labs V2 page.
   ========================================================= */

.labs-v2-header,
.labs-v2-stats,
.labs-v2-toolbar,
.labs-v2-grid,
.labs-v2-empty{
  --mouse-x:50%;
  --mouse-y:50%;
}

/* Page entrance */
.labs-v2-header,
.labs-v2-stats article,
.labs-v2-toolbar,
.labs-v2-card{
  opacity:0;
  transform:translateY(18px);
}

body.labs-v2-ready .labs-v2-header,
body.labs-v2-ready .labs-v2-toolbar{
  opacity:1;
  transform:translateY(0);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.2,1);
}

body.labs-v2-ready .labs-v2-stats article{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.75,.2,1),
    border-color .22s ease,
    box-shadow .22s ease;
}

body.labs-v2-ready .labs-v2-stats article:nth-child(1){transition-delay:.08s}
body.labs-v2-ready .labs-v2-stats article:nth-child(2){transition-delay:.14s}
body.labs-v2-ready .labs-v2-stats article:nth-child(3){transition-delay:.20s}
body.labs-v2-ready .labs-v2-stats article:nth-child(4){transition-delay:.26s}
body.labs-v2-ready .labs-v2-toolbar{transition-delay:.22s}

.labs-v2-card.is-revealed{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .48s ease calc(var(--visible-index,0) * 55ms),
    transform .48s cubic-bezier(.2,.75,.2,1) calc(var(--visible-index,0) * 55ms),
    border-color .22s ease,
    box-shadow .22s ease;
}

/* Header light motion */
.labs-v2-header{
  position:relative;
  isolation:isolate;
}

.labs-v2-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:430px;
  height:430px;
  left:-160px;
  top:-150px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(159,239,0,.08),transparent 68%);
  filter:blur(16px);
  animation:labsV2HeaderGlow 8s ease-in-out infinite;
}

.labs-v2-kicker i{
  animation:labsV2OnlinePulse 1.8s ease-in-out infinite;
}

/* Overall progress ring */
.labs-v2-ring{
  animation:labsV2RingBreathe 4s ease-in-out infinite;
  transition:transform .25s ease,box-shadow .25s ease;
}

.labs-v2-overall:hover .labs-v2-ring{
  transform:scale(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(159,239,0,.22),
    0 0 28px rgba(159,239,0,.10);
}

/* Interactive stat cards */
.labs-v2-stats article{
  position:relative;
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.labs-v2-stats article::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(220px circle at 18% 15%,rgba(159,239,0,.07),transparent 60%);
  opacity:0;
  transition:opacity .22s ease;
}

.labs-v2-stats article:hover{
  transform:translateY(-5px);
  border-color:rgba(159,239,0,.38);
  box-shadow:0 20px 42px rgba(0,0,0,.24);
}

.labs-v2-stats article:hover::before{
  opacity:1;
}

/* Tabs and search */
.labs-v2-tabs button{
  position:relative;
  overflow:hidden;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.labs-v2-tabs button:hover{
  transform:translateY(-1px);
}

.labs-v2-tabs button::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  height:2px;
  background:#9fef00;
  transition:left .22s ease,right .22s ease;
}

.labs-v2-tabs button.is-active::after{
  left:12px;
  right:12px;
}

.labs-v2-search{
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.labs-v2-search:focus-within{
  transform:translateY(-1px);
  border-color:rgba(159,239,0,.55);
  box-shadow:0 0 0 3px rgba(159,239,0,.07),0 14px 32px rgba(0,0,0,.16);
}

.labs-v2-search span{
  transition:transform .2s ease,color .2s ease;
}

.labs-v2-search:focus-within span{
  color:#9fef00;
  transform:scale(1.12) rotate(-8deg);
}

/* Card glow, tilt and light sweep */
.labs-v2-card{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}

.labs-v2-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(
      310px circle at var(--mouse-x) var(--mouse-y),
      rgba(159,239,0,.09),
      transparent 58%
    );
  opacity:0;
  transition:opacity .22s ease;
}

.labs-v2-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:5;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      112deg,
      transparent 20%,
      rgba(255,255,255,.03) 42%,
      rgba(159,239,0,.06) 49%,
      transparent 67%
    );
  transform:translateX(-125%);
  transition:transform .85s ease;
}

.labs-v2-card:hover{
  border-color:rgba(159,239,0,.50);
  box-shadow:
    0 30px 72px rgba(0,0,0,.34),
    0 0 30px rgba(159,239,0,.06);
}

.labs-v2-card:hover::before{
  opacity:1;
}

.labs-v2-card:hover::after{
  transform:translateX(125%);
}

.labs-v2-cover,
.labs-v2-card-body{
  position:relative;
  z-index:2;
}

.labs-v2-icon{
  transition:
    transform .3s cubic-bezier(.2,.75,.2,1),
    box-shadow .3s ease,
    background .3s ease;
}

.labs-v2-card:hover .labs-v2-icon{
  transform:translateY(-5px) rotate(-4deg) scale(1.07);
  box-shadow:
    inset 0 0 28px rgba(159,239,0,.05),
    0 0 25px rgba(159,239,0,.13);
}

.labs-v2-icon svg{
  transition:transform .3s ease,filter .3s ease;
}

.labs-v2-card:hover .labs-v2-icon svg{
  transform:scale(1.05);
  filter:drop-shadow(0 0 7px rgba(159,239,0,.38));
}

.labs-v2-state,
.difficulty-pill,
.deadline-chip{
  transition:transform .2s ease,box-shadow .2s ease;
}

.labs-v2-card:hover .labs-v2-state,
.labs-v2-card:hover .difficulty-pill{
  transform:translateY(-1px);
}

.labs-v2-card:hover .deadline-chip{
  box-shadow:0 0 13px rgba(159,239,0,.06);
}

/* Progress bars animate after load */
.labs-v2-progress i b{
  width:0!important;
  transition:width 1.2s cubic-bezier(.2,.75,.2,1);
}

body.labs-v2-progress-ready .labs-v2-progress i b{
  width:var(--target-progress)!important;
}

/* Launch buttons */
.labs-v2-launch{
  position:relative;
  overflow:hidden;
  transition:
    transform .18s ease,
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.labs-v2-launch:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(159,239,0,.12);
}

.labs-v2-launch>span{
  display:inline-block;
  transition:transform .2s ease;
}

.labs-v2-launch:hover>span{
  transform:translateX(6px);
}

.labs-v2-ripple{
  position:absolute;
  width:8px;
  height:8px;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,255,255,.43);
  transform:translate(-50%,-50%) scale(0);
  animation:labsV2Ripple .58s ease-out forwards;
}

/* Filtering transitions */
.labs-v2-card[hidden]{
  display:none!important;
}

.labs-v2-no-match{
  opacity:0;
  transform:translateY(8px);
}

.labs-v2-no-match.is-visible{
  opacity:1;
  transform:translateY(0);
  animation:labsV2EmptyIn .32s ease;
}

/* Empty state radar remains alive */
.labs-v2-empty .empty-radar span{
  animation:radarSpin 2.8s linear infinite;
}

/* Keyframes */
@keyframes labsV2HeaderGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.72}
  50%{transform:translate3d(70px,30px,0) scale(1.13);opacity:1}
}

@keyframes labsV2OnlinePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.76)}
}

@keyframes labsV2RingBreathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.13)}
}

@keyframes labsV2Ripple{
  to{transform:translate(-50%,-50%) scale(24);opacity:0}
}

@keyframes labsV2EmptyIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:720px){
  .labs-v2-card:hover{
    transform:translateY(-3px);
  }
}

@media(prefers-reduced-motion:reduce){
  .labs-v2-header,
  .labs-v2-stats article,
  .labs-v2-toolbar,
  .labs-v2-card{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  .labs-v2-header::before,
  .labs-v2-kicker i,
  .labs-v2-ring,
  .labs-v2-empty .empty-radar span{
    animation:none!important;
  }

  .labs-v2-progress i b{
    width:var(--target-progress)!important;
    transition:none!important;
  }
}

/* =========================================================
   SCOREBOARD — INTERACTIVE MOTION LAYER
   Only affects the premium scoreboard page.
   ========================================================= */

.premium-scoreboard-head,
.premium-scoreboard-tabs,
.reference-winner,
.premium-ranking-panel{
  opacity:0;
  transform:translateY(18px);
}

body.scoreboard-ready .premium-scoreboard-head,
body.scoreboard-ready .premium-scoreboard-tabs,
body.scoreboard-ready .premium-ranking-panel{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .65s ease,
    transform .65s cubic-bezier(.2,.75,.2,1);
}

body.scoreboard-ready .premium-scoreboard-tabs{transition-delay:.10s}
body.scoreboard-ready .premium-ranking-panel{transition-delay:.28s}

body.scoreboard-ready .reference-winner{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .58s ease calc(var(--winner-index,0) * 90ms + 130ms),
    transform .58s cubic-bezier(.2,.75,.2,1) calc(var(--winner-index,0) * 90ms + 130ms),
    border-color .22s ease,
    box-shadow .22s ease;
}

/* Header movement */
.premium-scoreboard-head{
  position:relative;
  isolation:isolate;
}

.premium-scoreboard-head::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  left:-150px;
  top:-155px;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(159,239,0,.08),transparent 68%);
  filter:blur(18px);
  animation:scoreboardHeaderGlow 8s ease-in-out infinite;
}

.premium-kicker>span{
  animation:scoreboardLivePulse 1.7s ease-in-out infinite;
}

.premium-student-count{
  position:relative;
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.premium-student-count::before,
.reference-winner::before,
.premium-ranking-panel::before,
.premium-ranking-row::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(
      280px circle at var(--mouse-x,50%) var(--mouse-y,50%),
      rgba(159,239,0,.08),
      transparent 60%
    );
  opacity:0;
  transition:opacity .22s ease;
}

.premium-student-count:hover{
  transform:translateY(-3px);
  border-color:rgba(159,239,0,.42);
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}

.premium-student-count:hover::before,
.reference-winner:hover::before,
.premium-ranking-panel:hover::before,
.premium-ranking-row:hover::before{
  opacity:1;
}

/* Scope tabs */
.premium-scoreboard-tabs a{
  position:relative;
  overflow:hidden;
  transition:
    color .18s ease,
    transform .18s ease,
    background .18s ease;
}

.premium-scoreboard-tabs a:hover{
  transform:translateY(-1px);
}

.premium-scoreboard-tabs a::after{
  content:"";
  position:absolute;
  left:50%;
  right:50%;
  bottom:0;
  height:2px;
  background:#9fef00;
  transition:left .22s ease,right .22s ease;
}

.premium-scoreboard-tabs a.is-active::after{
  left:14px;
  right:14px;
}

/* Podium cards */
.reference-winner{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform-style:preserve-3d;
  will-change:transform;
}

.reference-winner::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:7;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      112deg,
      transparent 20%,
      rgba(255,255,255,.035) 42%,
      rgba(159,239,0,.055) 49%,
      transparent 67%
    );
  transform:translateX(-125%);
  transition:transform .85s ease;
}

.reference-winner:hover{
  border-color:rgba(159,239,0,.48);
  box-shadow:
    0 30px 72px rgba(0,0,0,.34),
    0 0 30px rgba(159,239,0,.06);
}

.reference-winner.place-1:hover{
  box-shadow:
    0 34px 82px rgba(0,0,0,.38),
    0 0 38px rgba(247,201,72,.14);
}

.reference-winner.place-2:hover{
  box-shadow:
    0 30px 72px rgba(0,0,0,.34),
    0 0 30px rgba(197,204,214,.08);
}

.reference-winner.place-3:hover{
  box-shadow:
    0 30px 72px rgba(0,0,0,.34),
    0 0 30px rgba(199,125,74,.09);
}

.reference-winner:hover::after{
  transform:translateX(125%);
}

.winner-award{
  transition:transform .3s cubic-bezier(.2,.75,.2,1),filter .3s ease;
  transform-origin:50% 70%;
}

.reference-winner:hover .winner-award{
  transform:translateY(-6px) rotate(-3deg) scale(1.07);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.10));
}

.reference-winner.place-1 .winner-award{
  animation:winnerCupFloat 3.4s ease-in-out infinite;
}

.reference-avatar{
  transition:
    transform .26s ease,
    box-shadow .26s ease;
}

.reference-winner:hover .reference-avatar{
  transform:scale(1.06);
  box-shadow:
    0 0 0 5px rgba(159,239,0,.035),
    0 0 24px rgba(159,239,0,.12);
}

.winner-rank-badge{
  animation:winnerBadgePulse 3s ease-in-out infinite;
}

.award-sparkles{
  animation:winnerSparkleRotate 8s linear infinite;
}

/* Real flames stay alive */
.mini-fire,
.score-flame{
  transform-origin:50% 90%;
  animation:scoreboardFireSway 1.1s ease-in-out infinite alternate;
}

/* Ranking panel and rows */
.premium-ranking-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.premium-ranking-row{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateX(-14px);
  transition:
    opacity .42s ease calc(var(--row-index,0) * 42ms + 340ms),
    transform .42s cubic-bezier(.2,.75,.2,1) calc(var(--row-index,0) * 42ms + 340ms),
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

body.scoreboard-ready .premium-ranking-row{
  opacity:1;
  transform:translateX(0);
}

.premium-ranking-row::after{
  content:"";
  position:absolute;
  left:-40%;
  top:0;
  width:28%;
  height:100%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(159,239,0,.055),transparent);
  transition:left .65s ease;
}

.premium-ranking-row:hover{
  transform:translateX(6px);
  border-color:rgba(159,239,0,.38);
  background:rgba(159,239,0,.035);
  box-shadow:0 12px 30px rgba(0,0,0,.17);
}

.premium-ranking-row:hover::after{
  left:115%;
}

.premium-ranking-row .mini-avatar{
  transition:transform .22s ease,box-shadow .22s ease;
}

.premium-ranking-row:hover .mini-avatar{
  transform:scale(1.08);
  box-shadow:0 0 18px rgba(159,239,0,.10);
}

.premium-arrow{
  display:inline-block;
  transition:transform .2s ease,color .2s ease;
}

.premium-ranking-row:hover .premium-arrow{
  transform:translateX(6px);
  color:#c5ff55;
}

.premium-ranking-row.is-current-user{
  animation:currentUserRowGlow 3.2s ease-in-out infinite;
}

/* Click ripple */
.scoreboard-ripple{
  position:absolute;
  z-index:20;
  width:8px;
  height:8px;
  pointer-events:none;
  border-radius:50%;
  background:rgba(255,255,255,.40);
  transform:translate(-50%,-50%) scale(0);
  animation:scoreboardRipple .58s ease-out forwards;
}

/* Keyframes */
@keyframes scoreboardHeaderGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.7}
  50%{transform:translate3d(72px,32px,0) scale(1.12);opacity:1}
}

@keyframes scoreboardLivePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.72)}
}

@keyframes winnerCupFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-7px) rotate(1deg)}
}

@keyframes winnerBadgePulse{
  0%,100%{box-shadow:0 0 0 rgba(159,239,0,0)}
  50%{box-shadow:0 0 18px rgba(159,239,0,.18)}
}

@keyframes winnerSparkleRotate{
  to{transform:rotate(360deg)}
}

@keyframes scoreboardFireSway{
  0%{transform:rotate(-3deg) translateY(1px)}
  100%{transform:rotate(4deg) translateY(-1px)}
}

@keyframes currentUserRowGlow{
  0%,100%{box-shadow:inset 3px 0 #9fef00,0 0 0 rgba(159,239,0,0)}
  50%{box-shadow:inset 3px 0 #9fef00,0 0 24px rgba(159,239,0,.07)}
}

@keyframes scoreboardRipple{
  to{transform:translate(-50%,-50%) scale(24);opacity:0}
}

@media(max-width:760px){
  .reference-winner:hover,
  .premium-ranking-row:hover{
    transform:translateY(-3px);
  }
}

@media(prefers-reduced-motion:reduce){
  .premium-scoreboard-head,
  .premium-scoreboard-tabs,
  .reference-winner,
  .premium-ranking-panel,
  .premium-ranking-row{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  .premium-scoreboard-head::before,
  .premium-kicker>span,
  .reference-winner.place-1 .winner-award,
  .winner-rank-badge,
  .award-sparkles,
  .mini-fire,
  .score-flame{
    animation:none!important;
  }
}

/* =========================================================
   PROFILE — PROFESSIONAL INTERACTIVE THEME
   ========================================================= */

.profile-tabs,
.profile-tab-panel[data-profile-panel="overview"] > .profile-hero,
.profile-tab-panel[data-profile-panel="overview"] > .profile-stats-grid,
.profile-tab-panel[data-profile-panel="overview"] > .profile-layout{
  --profile-panel:#0b1612;
  --profile-panel-2:#101d17;
  --profile-border:#263a30;
  --profile-muted:#819188;
  --profile-lime:#9fef00;
  --profile-gold:#ffc857;
  --profile-red:#ff5d73;
}

/* Entrance animation */
.profile-tabs,
.profile-hero,
.profile-stats-grid article,
.profile-layout .cyber-section{
  opacity:0;
  transform:translateY(16px);
}

body.profile-interactive-ready .profile-tabs,
body.profile-interactive-ready .profile-hero,
body.profile-interactive-ready .profile-stats-grid article,
body.profile-interactive-ready .profile-layout .cyber-section{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .58s ease,
    transform .58s cubic-bezier(.2,.75,.2,1),
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

body.profile-interactive-ready .profile-hero{transition-delay:.06s}
body.profile-interactive-ready .profile-stats-grid article:nth-child(1){transition-delay:.12s}
body.profile-interactive-ready .profile-stats-grid article:nth-child(2){transition-delay:.18s}
body.profile-interactive-ready .profile-stats-grid article:nth-child(3){transition-delay:.24s}
body.profile-interactive-ready .profile-stats-grid article:nth-child(4){transition-delay:.30s}
body.profile-interactive-ready .profile-layout .profile-main-section{transition-delay:.26s}
body.profile-interactive-ready .profile-layout .classmates-card{transition-delay:.34s}

/* Tabs */
.profile-tabs{
  border-color:#25372e;
  background:
    linear-gradient(180deg,rgba(12,24,19,.94),rgba(7,16,13,.94));
}

.profile-tab{
  transition:
    color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.profile-tab:hover{
  transform:translateY(-1px);
}

.profile-tab.is-active{
  background:#9fef00;
  color:#07100d;
  box-shadow:
    0 0 0 1px rgba(159,239,0,.20),
    0 9px 24px rgba(159,239,0,.10);
}

/* Hero */
.advanced-profile-hero{
  position:relative;
  overflow:hidden;
  padding:34px;
  border:1px solid #263a30;
  border-radius:16px;
  background:
    radial-gradient(circle at 12% 22%,rgba(159,239,0,.065),transparent 30%),
    radial-gradient(circle at 88% 8%,rgba(255,200,87,.025),transparent 28%),
    linear-gradient(145deg,rgba(13,25,20,.96),rgba(7,15,12,.96));
  box-shadow:0 24px 65px rgba(0,0,0,.22);
}

.advanced-profile-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(159,239,0,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,239,0,.016) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,#000,transparent 72%);
}

.profile-identity,
.profile-rank-card{
  position:relative;
  z-index:2;
}

.profile-avatar.large{
  width:138px;
  height:138px;
  border:2px solid rgba(159,239,0,.45);
  box-shadow:
    0 0 0 8px rgba(159,239,0,.025),
    0 24px 55px rgba(0,0,0,.34),
    0 0 28px rgba(159,239,0,.08);
  transition:transform .25s ease,box-shadow .25s ease;
}

.profile-avatar.large:hover{
  box-shadow:
    0 0 0 8px rgba(159,239,0,.04),
    0 28px 65px rgba(0,0,0,.38),
    0 0 34px rgba(159,239,0,.14);
}

.profile-online{
  animation:profileOnlinePulse 1.8s ease-in-out infinite;
}

.profile-copy h1{
  color:#f4faf6;
  text-shadow:0 0 24px rgba(255,255,255,.025);
}

.profile-handle{
  color:#9aa9a1;
}

/* Rebuilt hacker-rank component */
.profile-rank-progress-card{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  width:min(600px,100%);
  margin-top:20px;
  padding:17px 18px 16px;
  overflow:hidden;
  border:1px solid #2a4034;
  border-radius:12px;
  background:
    radial-gradient(280px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.075),transparent 62%),
    linear-gradient(145deg,#101d17,#09120e);
  box-shadow:inset 0 1px rgba(255,255,255,.02);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.profile-rank-progress-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,transparent 25%,rgba(159,239,0,.055) 48%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .8s ease;
}

.profile-rank-progress-card:hover{
  transform:translateY(-2px);
  border-color:rgba(159,239,0,.48);
  box-shadow:
    0 18px 38px rgba(0,0,0,.20),
    0 0 22px rgba(159,239,0,.055);
}

.profile-rank-progress-card:hover::after{
  transform:translateX(130%);
}

.profile-rank-progress-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.profile-rank-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#73837a;
  font:700 9px 'JetBrains Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.profile-rank-progress-head strong{
  color:#f0f7f3;
  font-size:21px;
}

.profile-rank-owned{
  min-width:84px;
  color:#9fef00;
  text-align:right;
  font:800 18px 'JetBrains Mono',monospace;
}

.profile-rank-owned small{
  display:block;
  margin-top:3px;
  color:#64736b;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.profile-rank-track{
  position:relative;
  height:9px;
  margin-top:15px;
  overflow:hidden;
  border:1px solid #26372e;
  border-radius:999px;
  background:#07100d;
}

.profile-rank-track-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg,#72ae00,#9fef00 65%,#c5ff55);
  box-shadow:
    0 0 12px rgba(159,239,0,.48),
    inset 0 1px rgba(255,255,255,.20);
  transition:width 1.25s cubic-bezier(.2,.75,.2,1);
}

body.profile-rank-loaded .profile-rank-track-fill{
  width:var(--rank-target);
}

.profile-rank-track-glow{
  position:absolute;
  top:50%;
  left:0;
  width:34px;
  height:20px;
  border-radius:50%;
  background:rgba(159,239,0,.22);
  filter:blur(8px);
  transform:translate(-50%,-50%);
  animation:profileRankGlowTravel 3.4s ease-in-out infinite;
}

.profile-rank-scale{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:9px;
  color:#68776f;
  font:600 9px 'JetBrains Mono',monospace;
}

.profile-rank-scale strong{
  color:#b9ff70;
}

.profile-rank-milestones{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:center;
  margin-top:14px;
}

.profile-rank-milestones>span{
  position:relative;
  height:13px;
}

.profile-rank-milestones>span::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:#223129;
}

.profile-rank-milestones>span:first-child::before{left:50%}
.profile-rank-milestones>span:last-child::before{right:50%}

.profile-rank-milestones i{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border:1px solid #45564d;
  border-radius:50%;
  background:#101a15;
  transform:translate(-50%,-50%);
}

.profile-rank-milestones .is-reached i{
  border-color:#9fef00;
  background:#9fef00;
  box-shadow:0 0 8px rgba(159,239,0,.5);
}

.profile-rank-milestones .is-current i{
  width:11px;
  height:11px;
  animation:profileMilestonePulse 1.8s ease-in-out infinite;
}

/* Class rank card */
.profile-rank-card{
  --mouse-x:50%;
  --mouse-y:50%;
  overflow:hidden;
  border-color:#2c4035;
  background:
    radial-gradient(180px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.075),transparent 62%),
    linear-gradient(145deg,#101c16,#09120e);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.profile-rank-card:hover{
  transform:translateY(-4px);
  border-color:rgba(159,239,0,.48);
  box-shadow:0 20px 45px rgba(0,0,0,.24);
}

.profile-rank-card strong{
  text-shadow:0 0 22px rgba(159,239,0,.16);
}

/* Statistics */
.profile-stats-grid article{
  --mouse-x:50%;
  --mouse-y:50%;
  overflow:hidden;
  background:
    radial-gradient(220px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.065),transparent 62%),
    linear-gradient(145deg,#101b16,#09110e);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.profile-stats-grid article:hover{
  transform:translateY(-5px);
  border-color:rgba(159,239,0,.40);
  box-shadow:0 20px 42px rgba(0,0,0,.24);
}

.profile-stats-grid .streak-stat{
  background:
    radial-gradient(220px circle at var(--mouse-x) var(--mouse-y),rgba(255,200,87,.07),transparent 62%),
    linear-gradient(145deg,#1a1710,#0e100c);
}

.profile-stats-grid .blood-stat{
  background:
    radial-gradient(220px circle at var(--mouse-x) var(--mouse-y),rgba(255,93,115,.07),transparent 62%),
    linear-gradient(145deg,#181014,#0d0d0e);
}

/* Solved labs */
.profile-solved-item{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(260px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.06),transparent 62%),
    #0a1410;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.profile-solved-item:hover{
  transform:translateX(5px);
  border-color:rgba(159,239,0,.38);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.profile-solved-item:hover .solved-icon{
  transform:rotate(-6deg) scale(1.08);
  box-shadow:0 0 16px rgba(159,239,0,.10);
}

.solved-icon{
  transition:transform .22s ease,box-shadow .22s ease;
}

/* Student network */
.student-network-item{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(220px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.055),transparent 62%),
    #09120e!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.student-network-item:hover{
  transform:translateX(5px);
  border-color:rgba(159,239,0,.38)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.student-network-item:hover .mini-avatar{
  transform:scale(1.08);
  box-shadow:0 0 14px rgba(159,239,0,.10);
}

.student-network-item .mini-avatar{
  transition:transform .2s ease,box-shadow .2s ease;
}

/* Settings */
.profile-settings-page .cyber-section{
  border-color:#293d32;
  background:
    radial-gradient(circle at 0 0,rgba(159,239,0,.035),transparent 32%),
    linear-gradient(145deg,#0e1914,#08110d);
}

.settings-card input,
.settings-card textarea{
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.settings-card input:focus,
.settings-card textarea:focus{
  background:#09150f;
  border-color:#9fef00;
  box-shadow:0 0 0 3px rgba(159,239,0,.075);
}

@keyframes profileOnlinePulse{
  0%,100%{transform:scale(1);box-shadow:0 0 14px rgba(159,239,0,.8)}
  50%{transform:scale(.78);box-shadow:0 0 24px rgba(159,239,0,.95)}
}

@keyframes profileRankGlowTravel{
  0%,100%{left:0;opacity:.2}
  50%{left:100%;opacity:.85}
}

@keyframes profileMilestonePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 14px rgba(159,239,0,.75)}
}

@media(max-width:900px){
  .advanced-profile-hero{
    padding:24px;
  }

  .profile-rank-progress-card{
    width:100%;
  }
}

@media(max-width:620px){
  .profile-rank-progress-head,
  .profile-rank-scale{
    align-items:flex-start;
    flex-direction:column;
  }

  .profile-rank-owned{
    text-align:left;
  }

  .profile-rank-milestones{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .profile-tabs,
  .profile-hero,
  .profile-stats-grid article,
  .profile-layout .cyber-section{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .profile-online,
  .profile-rank-track-glow,
  .profile-rank-milestones .is-current i{
    animation:none!important;
  }

  .profile-rank-track-fill{
    width:var(--rank-target)!important;
    transition:none!important;
  }
}

/* =========================================================
   PROFILE — REFERENCE MATCH FINAL POLISH
   ========================================================= */

/* Hero composition */
.advanced-profile-hero{
  display:grid!important;
  grid-template-columns:160px minmax(0,1fr) 210px;
  gap:32px;
  align-items:center!important;
  min-height:430px;
  padding:38px!important;
}

.advanced-profile-hero .profile-identity{
  display:contents!important;
}

.advanced-profile-hero .profile-avatar.large{
  grid-column:1;
  grid-row:1;
  width:150px!important;
  height:150px!important;
  justify-self:center;
}

.advanced-profile-hero .profile-copy{
  grid-column:2;
  min-width:0;
  width:100%;
}

.advanced-profile-hero .profile-rank-card{
  grid-column:3;
  align-self:start;
  width:100%;
  min-height:190px;
  display:grid;
  place-items:center;
  align-content:center;
  border-color:rgba(159,239,0,.28)!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 70% 30%,rgba(159,239,0,.055),transparent 42%),
    linear-gradient(145deg,#101d17,#09120e)!important;
}

.advanced-profile-hero .profile-rank-card::after{
  content:"";
  position:absolute;
  inset:auto 10px 8px;
  height:42px;
  opacity:.24;
  background:
    radial-gradient(circle,rgba(159,239,0,.55) 1px,transparent 1.5px);
  background-size:9px 9px;
  mask-image:linear-gradient(to top,#000,transparent);
}

/* Rank box: long line, no milestone dots */
.profile-rank-progress-card{
  width:100%!important;
  max-width:none!important;
  margin-top:22px!important;
  padding:20px 22px 18px!important;
  border-radius:12px!important;
  border-color:#2b4035!important;
  background:
    radial-gradient(circle at 86% 12%,rgba(159,239,0,.055),transparent 34%),
    linear-gradient(145deg,#101d17,#09120e)!important;
}

.profile-rank-progress-head{
  align-items:flex-end!important;
}

.profile-rank-progress-head strong{
  font-size:25px!important;
  line-height:1!important;
}

.profile-rank-owned{
  font-size:28px!important;
  line-height:.95!important;
}

.profile-rank-track{
  width:100%!important;
  height:10px!important;
  margin-top:20px!important;
  border-color:#30463a!important;
  background:#07100d!important;
}

.profile-rank-track-fill{
  min-width:8px;
}

.profile-rank-scale{
  width:100%!important;
  margin-top:10px!important;
  font-size:11px!important;
}

.profile-rank-milestones,
.profile-rank-track-glow{
  display:none!important;
}

/* Better headline and bio block */
.profile-headline{
  position:relative;
  margin-top:24px!important;
  padding-left:18px;
  color:#edf7f1!important;
  font-size:18px!important;
}

.profile-headline::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:2px;
  border-radius:99px;
  background:#9fef00;
  box-shadow:0 0 12px rgba(159,239,0,.4);
}

.profile-bio{
  margin-top:12px!important;
  padding-left:18px;
  color:#8fa098!important;
}

/* Stat cards */
.profile-stats-grid{
  gap:18px!important;
  margin-top:22px!important;
}

.profile-stats-grid article.profile-stat-card{
  min-height:168px;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:24px!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 14% 28%,rgba(159,239,0,.055),transparent 38%),
    linear-gradient(145deg,#101b16,#09110e)!important;
}

.profile-stat-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:1px solid rgba(159,239,0,.34);
  border-radius:50%;
  color:#9fef00;
  background:rgba(159,239,0,.045);
  font-size:29px;
  box-shadow:inset 0 0 18px rgba(159,239,0,.025);
}

.profile-stat-copy{
  min-width:0;
}

.profile-stats-grid .profile-stat-copy>span{
  font-size:12px!important;
}

.profile-stats-grid .profile-stat-copy>strong{
  margin:8px 0 6px!important;
  font-size:35px!important;
}

.profile-stat-streak{
  background:
    radial-gradient(circle at 14% 28%,rgba(255,157,33,.08),transparent 38%),
    linear-gradient(145deg,#19150d,#0d100c)!important;
}

.profile-stat-streak .profile-stat-icon{
  border-color:rgba(255,157,33,.34);
  color:#ff9d21;
  background:rgba(255,157,33,.06);
}

.profile-stat-blood{
  background:
    radial-gradient(circle at 14% 28%,rgba(255,70,99,.08),transparent 38%),
    linear-gradient(145deg,#171014,#0d0d0e)!important;
}

.profile-stat-blood .profile-stat-icon{
  border-color:rgba(255,70,99,.34);
  color:#ff4663;
  background:rgba(255,70,99,.06);
}

/* Real small flame inside Current Streak */
.profile-stat-flame{
  position:relative;
  overflow:visible;
  font-size:0;
}

.profile-stat-flame::before,
.profile-stat-flame::after,
.profile-stat-flame i{
  content:"";
  position:absolute;
  left:50%;
  bottom:13px;
  transform-origin:50% 100%;
}

.profile-stat-flame::before{
  width:24px;
  height:35px;
  margin-left:-12px;
  border-radius:72% 28% 63% 37% / 76% 44% 56% 24%;
  background:linear-gradient(155deg,#fff168 0%,#ffb21e 34%,#ff6a00 68%,#c62b00 100%);
  box-shadow:0 0 9px rgba(255,103,0,.56);
  animation:profileStatFlameOuter .72s ease-in-out infinite alternate;
}

.profile-stat-flame::after{
  width:11px;
  height:20px;
  margin-left:-5px;
  bottom:15px;
  border-radius:64% 36% 58% 42% / 76% 48% 52% 24%;
  background:linear-gradient(165deg,#fffbd7 0%,#fff06c 42%,#ff9d19 100%);
  animation:profileStatFlameInner .52s ease-in-out infinite alternate-reverse;
}

.profile-stat-flame i{
  width:8px;
  height:16px;
  margin-left:-13px;
  bottom:17px;
  border-radius:70% 30% 65% 35%;
  background:#ff7600;
  transform:rotate(-18deg);
}

/* Lower feature cards */
.advanced-profile-layout{
  grid-template-columns:1fr 1fr!important;
  gap:28px!important;
}

.profile-feature-card{
  position:relative;
  min-height:330px;
  overflow:hidden;
  padding:32px!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 88% 50%,rgba(159,239,0,.05),transparent 32%),
    linear-gradient(145deg,#0f1a15,#08110d)!important;
}

.profile-feature-card .cyber-section-heading{
  position:relative;
  z-index:2;
  width:58%;
  margin-bottom:18px!important;
}

.profile-feature-card .cyber-section-heading h2{
  font-size:28px!important;
}

.profile-feature-card .profile-empty,
.profile-feature-card .profile-solved-list,
.profile-feature-card .classmate-list,
.profile-feature-card>.text-link{
  position:relative;
  z-index:2;
  max-width:58%;
}

.profile-feature-art{
  position:absolute;
  right:34px;
  top:50%;
  width:230px;
  height:180px;
  transform:translateY(-50%);
  opacity:.78;
  pointer-events:none;
}

.profile-feature-art-completed .art-board{
  position:absolute;
  left:42px;
  top:20px;
  width:98px;
  height:120px;
  border:2px solid rgba(159,239,0,.52);
  border-radius:10px;
  box-shadow:0 0 20px rgba(159,239,0,.10);
}

.profile-feature-art-completed .art-board::before,
.profile-feature-art-completed .art-board::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  height:2px;
  background:rgba(159,239,0,.45);
  box-shadow:0 24px rgba(159,239,0,.45),0 48px rgba(159,239,0,.45);
  top:30px;
}

.profile-feature-art-completed .art-line{
  position:absolute;
  right:12px;
  bottom:30px;
  width:92px;
  height:60px;
  border-left:2px solid rgba(159,239,0,.52);
  border-bottom:2px solid rgba(159,239,0,.52);
  transform:skewY(-24deg);
}

.profile-feature-art-completed .art-bar{
  position:absolute;
  bottom:22px;
  width:14px;
  background:#9fef00;
  box-shadow:0 0 14px rgba(159,239,0,.22);
}
.profile-feature-art-completed .art-bar-a{right:74px;height:38px}
.profile-feature-art-completed .art-bar-b{right:52px;height:62px}
.profile-feature-art-completed .art-bar-c{right:30px;height:82px}

/* =========================================================
   Student Network Illustration (FIXED)
   ========================================================= */

.profile-feature-art-network{
    position:absolute;
    right:32px;
    top:50%;
    transform:translateY(-50%);
    width:180px;
    height:180px;
    pointer-events:none;
    overflow:visible;
}

/* Remove any duplicated generated layers */
.profile-feature-art-network::before,
.profile-feature-art-network::after,
.network-card::before,
.network-card::after{
    content:none !important;
    display:none !important;
}

/* Base phone */
.network-card{
    position:absolute;
    border:2px solid rgba(159,239,0,.45);
    border-radius:14px;
    background:rgba(159,239,0,.03);
    box-shadow:none;
    overflow:hidden;
}

.network-card-left{
    width:56px;
    height:86px;
    left:8px;
    top:60px;
    z-index:2;
}

.network-card-center{
    width:68px;
    height:138px;
    left:70px;
    top:4px;
    z-index:3;
}

.network-card-right{
    width:56px;
    height:102px;
    left:126px;
    top:26px;
    z-index:1;
}

/* Person icon */
.network-card{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='30' r='14' fill='%239fef00'/%3E%3Cpath d='M25 72c0-14 11-25 25-25s25 11 25 25v4H25z' fill='%239fef00'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:58%;
}
/* Hide long student lists in the visual card until needed */
.profile-feature-network .classmate-list{
  max-height:125px;
  overflow:auto;
  scrollbar-width:thin;
}

@keyframes profileStatFlameOuter{
  from{transform:rotate(-6deg) scale(.92,.96)}
  to{transform:rotate(7deg) scale(1.03,1.12)}
}

@keyframes profileStatFlameInner{
  from{transform:rotate(5deg) scale(.88,.92)}
  to{transform:rotate(-5deg) scale(1.05,1.12)}
}

@media(max-width:1050px){
  .advanced-profile-hero{
    grid-template-columns:130px minmax(0,1fr)!important;
  }

  .advanced-profile-hero .profile-avatar.large{
    width:125px!important;
    height:125px!important;
  }

  .advanced-profile-hero .profile-rank-card{
    grid-column:1 / -1;
    width:220px;
    justify-self:end;
  }

  .advanced-profile-layout{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:760px){
  .advanced-profile-hero{
    display:flex!important;
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .advanced-profile-hero .profile-rank-card{
    width:100%;
  }

  .profile-stats-grid article.profile-stat-card{
    grid-template-columns:54px 1fr;
  }

  .profile-stat-icon{
    width:52px;
    height:52px;
  }

  .profile-feature-card .cyber-section-heading,
  .profile-feature-card .profile-empty,
  .profile-feature-card .profile-solved-list,
  .profile-feature-card .classmate-list,
  .profile-feature-card>.text-link{
    width:100%;
    max-width:100%;
  }

  .profile-feature-art{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .profile-stat-flame::before,
  .profile-stat-flame::after{
    animation:none!important;
  }
}

/* =========================================================
   PROFILE — PIXEL-CLOSER REFERENCE LAYOUT
   Final visual pass to closely match the supplied mockup.
   ========================================================= */

.profile-tabs{
  margin-bottom:22px!important;
  min-height:66px;
  padding:5px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#0b1511,#08110d)!important;
  border:1px solid #25372e!important;
}

.profile-tab{
  min-width:150px;
  min-height:52px;
  border-radius:8px!important;
  background:transparent!important;
  color:#bcc9c2!important;
}

.profile-tab.is-active{
  color:#07100d!important;
  background:linear-gradient(180deg,#a9ff10,#8fe300)!important;
  box-shadow:0 0 0 1px rgba(159,239,0,.28),0 12px 28px rgba(159,239,0,.10)!important;
}

/* Main profile hero */
.advanced-profile-hero{
  min-height:420px!important;
  display:grid!important;
  grid-template-columns:210px minmax(0,1fr) 190px!important;
  align-items:start!important;
  gap:34px!important;
  padding:34px!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 10% 20%,rgba(159,239,0,.055),transparent 34%),
    radial-gradient(circle at 86% 12%,rgba(159,239,0,.025),transparent 28%),
    linear-gradient(145deg,#0d1914,#07110d)!important;
}

.advanced-profile-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(rgba(159,239,0,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(159,239,0,.012) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(90deg,#000,transparent 65%);
}

.advanced-profile-hero .profile-avatar.large{
  grid-column:1!important;
  grid-row:1!important;
  align-self:start!important;
  justify-self:center!important;
  width:168px!important;
  height:168px!important;
  margin-top:30px!important;
  border:2px solid #9fef00!important;
  box-shadow:
    0 0 0 8px rgba(159,239,0,.025),
    0 24px 55px rgba(0,0,0,.36),
    0 0 30px rgba(159,239,0,.11)!important;
}

.advanced-profile-hero .profile-copy{
  grid-column:2!important;
  width:100%!important;
  min-width:0;
}

.advanced-profile-hero .profile-rank-card{
  grid-column:3!important;
  grid-row:1!important;
  width:100%!important;
  min-height:220px!important;
  margin-top:0!important;
  border-radius:16px!important;
  align-self:start!important;
}

.profile-topline{
  margin-top:4px;
}

.profile-copy h1{
  margin:12px 0 5px!important;
  font-size:clamp(46px,4.3vw,64px)!important;
  letter-spacing:-.055em!important;
}

.profile-handle{
  position:relative;
  padding-left:26px;
  font-size:17px!important;
  color:#aab8b0!important;
}

.profile-handle::before{
  content:"◇";
  position:absolute;
  left:0;
  top:-1px;
  color:#9fef00;
  font-size:17px;
}

/* Rank panel */
.profile-rank-progress-card{
  width:100%!important;
  margin-top:24px!important;
  padding:20px 22px 17px!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#101b16,#09120e)!important;
}

.profile-rank-progress-head{
  align-items:center!important;
}

.profile-rank-eyebrow{
  color:#9fef00!important;
  font-size:10px!important;
}

.profile-rank-progress-head strong{
  display:block;
  margin-top:5px;
  font-size:28px!important;
}

.profile-rank-owned{
  font-size:31px!important;
}

.profile-rank-track{
  width:100%!important;
  height:9px!important;
  margin-top:18px!important;
  border-radius:999px!important;
}

.profile-rank-scale{
  width:100%!important;
  font-size:11px!important;
  margin-top:10px!important;
}

.profile-headline{
  margin-top:30px!important;
  padding-left:20px!important;
  font-size:18px!important;
}

.profile-bio{
  padding-left:20px!important;
  font-size:15px!important;
}

/* Class rank */
.profile-rank-card small{
  font-size:11px!important;
}

.profile-rank-card strong{
  margin:12px 0!important;
  font-size:52px!important;
}

.profile-rank-card span{
  font-size:11px!important;
}

/* Stats closer to mockup */
.profile-stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  margin-top:22px!important;
}

.profile-stats-grid article.profile-stat-card{
  min-height:168px!important;
  grid-template-columns:66px minmax(0,1fr)!important;
  gap:18px!important;
  padding:22px!important;
  border-radius:15px!important;
}

.profile-stat-icon{
  width:64px!important;
  height:64px!important;
  font-size:30px!important;
}

.profile-stat-copy>span{
  font-size:12px!important;
}

.profile-stat-copy>strong{
  font-size:37px!important;
}

/* Lower feature area */
.advanced-profile-layout{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:22px!important;
  margin-top:22px!important;
}

.profile-feature-card{
  min-height:310px!important;
  padding:30px!important;
  border-radius:17px!important;
}

.profile-feature-card .cyber-section-heading{
  width:54%!important;
  max-width:54%!important;
}

.profile-feature-card .cyber-section-heading h2{
  font-size:31px!important;
  margin-top:8px!important;
}

.profile-feature-card .cyber-section-heading p{
  font-size:15px!important;
}

.profile-feature-action{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:190px;
  margin-top:18px;
  padding:13px 16px;
  border:1px solid rgba(159,239,0,.42);
  border-radius:7px;
  color:#9fef00!important;
  background:rgba(159,239,0,.025);
  font:800 12px 'JetBrains Mono',monospace;
  transition:.2s ease;
}

.profile-feature-action:hover{
  transform:translateY(-2px);
  color:#07100d!important;
  background:#9fef00;
  box-shadow:0 0 24px rgba(159,239,0,.12);
}

.profile-feature-action span{
  transition:transform .2s ease;
}

.profile-feature-action:hover span{
  transform:translateX(5px);
}

/* Keep actual lists available but visually subordinate */
.profile-feature-card .profile-empty,
.profile-feature-card .profile-solved-list,
.profile-feature-card .classmate-list{
  margin-top:18px;
  max-width:100%!important;
}

.profile-feature-card .profile-solved-list,
.profile-feature-card .classmate-list{
  max-height:150px;
  overflow:auto;
  scrollbar-width:thin;
}

.profile-feature-art{
  right:26px!important;
  width:220px!important;
  opacity:.88!important;
}

.profile-feature-network .profile-feature-art{
  right:22px!important;
}

/* Hide redundant old bottom text-link in the student card */
.profile-feature-network > .text-link{
  display:none!important;
}

/* Interactive polish */
.profile-feature-card:hover .profile-feature-art{
  transform:translateY(-50%) scale(1.035);
  filter:drop-shadow(0 0 18px rgba(159,239,0,.12));
}

.profile-feature-art{
  transition:transform .28s ease,filter .28s ease;
}

@media(max-width:1100px){
  .advanced-profile-hero{
    grid-template-columns:160px minmax(0,1fr)!important;
  }

  .advanced-profile-hero .profile-avatar.large{
    width:145px!important;
    height:145px!important;
  }

  .advanced-profile-hero .profile-rank-card{
    grid-column:1 / -1!important;
    width:220px!important;
    justify-self:end!important;
  }

  .profile-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:760px){
  .advanced-profile-hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }

  .advanced-profile-hero .profile-rank-card{
    width:100%!important;
  }

  .profile-stats-grid,
  .advanced-profile-layout{
    grid-template-columns:1fr!important;
  }

  .profile-feature-card .cyber-section-heading{
    width:100%!important;
    max-width:100%!important;
  }

  .profile-feature-art{
    display:none!important;
  }
}

/* =========================================================
   PROFILE PAGE — FINAL CLEAN REFERENCE MATCH
   This is the final override. Keep it at the very end.
   ========================================================= */

/* Profile page width: never stretch across an ultra-wide screen. */
.profile-tabs,
.profile-tab-panel {
  width: min(1296px, calc(100% - 40px)) !important;
  max-width: 1296px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.profile-tabs {
  min-height: 66px !important;
  margin-top: 28px !important;
  margin-bottom: 28px !important;
  padding: 7px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  overflow: hidden !important;
  border: 1px solid #263b32 !important;
  border-radius: 15px !important;
  background: rgba(5, 15, 12, .82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !important;
}

.profile-tab {
  width: 146px !important;
  min-width: 146px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #c2ccc7 !important;
  box-shadow: none !important;
  font: 700 12px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

.profile-tab:hover {
  color: #fff !important;
  background: rgba(159,239,0,.055) !important;
  transform: none !important;
}

.profile-tab.is-active {
  color: #07100d !important;
  background: linear-gradient(180deg, #aaff05, #93e900) !important;
  box-shadow: 0 0 22px rgba(159,239,0,.13) !important;
}

.profile-tab-panel {
  display: none !important;
}

.profile-tab-panel.is-active {
  display: block !important;
}

/* Main profile hero */
.advanced-profile-hero,
.profile-hero.advanced-profile-hero {
  position: relative !important;
  width: 100% !important;
  min-height: 480px !important;
  margin: 0 0 28px !important;
  padding: 42px 36px 118px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  align-items: start !important;
  gap: 30px !important;
  overflow: hidden !important;
  border: 1px solid #294038 !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(159,239,0,.055), transparent 31%),
    radial-gradient(circle at 70% 15%, rgba(34,230,197,.018), transparent 28%),
    linear-gradient(145deg, rgba(6,18,14,.985), rgba(4,13,10,.985)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.012) !important;
}

.advanced-profile-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(159,239,0,.011) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,239,0,.011) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  mask-image: linear-gradient(to right, #000, transparent 45%) !important;
  opacity: .45 !important;
}

.profile-identity {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 210px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 30px !important;
}

.profile-copy {
  min-width: 0 !important;
  padding-top: 1px !important;
}

.profile-avatar.large {
  width: 190px !important;
  height: 190px !important;
  margin: 10px auto 0 !important;
  border: 4px solid #8de400 !important;
  border-radius: 50% !important;
  background: #0a1511 !important;
  box-shadow:
    0 0 0 8px rgba(159,239,0,.045),
    0 0 32px rgba(159,239,0,.17),
    0 22px 45px rgba(0,0,0,.32) !important;
}

.profile-avatar.large img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.profile-avatar.large .profile-online {
  display: none !important;
}

.profile-topline {
  margin: 0 0 10px !important;
}

.profile-topline .terminal-kicker {
  gap: 10px !important;
  color: #a7f927 !important;
  font: 700 13px/1.2 'JetBrains Mono', monospace !important;
  letter-spacing: 0 !important;
  text-transform: lowercase !important;
}

.profile-topline .terminal-dot {
  width: 9px !important;
  height: 9px !important;
  box-shadow: 0 0 0 5px rgba(159,239,0,.07), 0 0 15px rgba(159,239,0,.65) !important;
}

.profile-identity h1 {
  margin: 0 0 9px !important;
  color: #f4f7f5 !important;
  font-size: clamp(40px, 3.25vw, 52px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 700 !important;
  text-shadow: 0 3px 0 rgba(0,0,0,.28) !important;
}

.profile-handle {
  position: relative !important;
  margin: 0 0 22px !important;
  padding-left: 23px !important;
  color: #a9b7b0 !important;
  font: 500 15px/1.5 'JetBrains Mono', monospace !important;
}

.profile-handle::before {
  content: "◇" !important;
  position: absolute !important;
  left: 0 !important;
  top: -1px !important;
  color: #9fef00 !important;
  font-size: 17px !important;
}

.profile-rank-progress-card {
  width: 100% !important;
  min-height: 178px !important;
  margin: 0 !important;
  padding: 22px 22px 17px !important;
  border: 1px solid #2b4439 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(9,22,17,.94), rgba(5,15,12,.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

.profile-rank-progress-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin: 0 0 16px !important;
}

.profile-rank-eyebrow {
  display: block !important;
  margin: 0 0 7px !important;
  color: #9fef00 !important;
  font: 800 12px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.profile-rank-progress-head > div > strong {
  display: block !important;
  color: #f4f7f5 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

.profile-rank-owned {
  display: block !important;
  min-width: 110px !important;
  color: #9fef00 !important;
  text-align: right !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

.profile-rank-owned small {
  display: block !important;
  margin-top: 9px !important;
  color: #7f9188 !important;
  font: 700 11px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.profile-rank-track {
  position: relative !important;
  width: 100% !important;
  height: 14px !important;
  margin: 0 0 12px !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 1px solid #304a3e !important;
  border-radius: 999px !important;
  background: #06100c !important;
}

.profile-rank-track-fill {
  display: block !important;
  width: max(7px, var(--rank-target)) !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #9fef00, #c7ff5b) !important;
  box-shadow: 0 0 12px rgba(159,239,0,.65) !important;
}

.profile-rank-scale {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  color: #9baaa3 !important;
  font: 600 13px/1.35 'JetBrains Mono', monospace !important;
}

.profile-rank-scale > span:last-child {
  text-align: right !important;
}

.profile-rank-scale strong {
  color: #9fef00 !important;
}

.profile-rank-card {
  position: relative !important;
  z-index: 1 !important;
  width: 230px !important;
  min-width: 230px !important;
  height: 310px !important;
  margin: 0 !important;
  padding: 34px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  border: 1px solid rgba(159,239,0,.45) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(159,239,0,.075), transparent 32%),
    linear-gradient(160deg, #091712, #06100c) !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
}

.profile-rank-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 70px !important;
  background:
    radial-gradient(circle, rgba(159,239,0,.20) 1px, transparent 1.5px) !important;
  background-size: 7px 7px !important;
  mask-image: linear-gradient(to top, #000, transparent) !important;
  opacity: .45 !important;
}

.profile-rank-card small {
  color: #aebbb5 !important;
  font: 700 12px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
}

.profile-rank-card strong {
  display: block !important;
  margin: 32px 0 18px !important;
  color: #9fef00 !important;
  font-size: 64px !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  text-shadow: 0 0 24px rgba(159,239,0,.20) !important;
}

.profile-rank-card span {
  color: #a8b7b0 !important;
  font: 700 12px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .065em !important;
  text-transform: uppercase !important;
}

.profile-headline,
.profile-bio {
  position: absolute !important;
  left: 36px !important;
  z-index: 2 !important;
  width: calc(100% - 72px) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding-left: 22px !important;
  border-left: 3px solid #9fef00 !important;
}

.profile-headline {
  bottom: 68px !important;
  color: #f1f5f3 !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

.profile-bio {
  bottom: 34px !important;
  color: #9aa9a1 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Stats */
.profile-stats-grid {
  width: 100% !important;
  margin: 0 0 28px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.profile-stat-card {
  position: relative !important;
  min-width: 0 !important;
  min-height: 168px !important;
  padding: 24px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  overflow: hidden !important;
  border: 1px solid #2a4037 !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #0c1914, #08120e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.014) !important;
}

.profile-stat-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #9fef00 0%, #9fef00 50%, transparent 86%) !important;
}

.profile-stat-icon {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(159,239,0,.42) !important;
  border-radius: 50% !important;
  color: #9fef00 !important;
  background: rgba(159,239,0,.055) !important;
  font-size: 32px !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 25px rgba(159,239,0,.025) !important;
}

.profile-stat-copy {
  min-width: 0 !important;
}

.profile-stat-copy > span {
  display: block !important;
  margin-bottom: 8px !important;
  color: #9ca9a3 !important;
  font: 700 12px/1.2 'JetBrains Mono', monospace !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.profile-stat-copy > strong {
  display: block !important;
  margin: 0 0 9px !important;
  color: #f4f7f5 !important;
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

.profile-stat-copy > small {
  display: block !important;
  color: #829088 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.profile-stat-streak::after {
  background: linear-gradient(90deg, #ff9800 0%, #ff9800 50%, transparent 86%) !important;
}
.profile-stat-streak .profile-stat-icon {
  color: #ff9800 !important;
  border-color: rgba(255,152,0,.42) !important;
  background: rgba(255,152,0,.065) !important;
}
.profile-stat-blood::after {
  background: linear-gradient(90deg, #ff536b 0%, #ff536b 50%, transparent 86%) !important;
}
.profile-stat-blood .profile-stat-icon {
  color: #ff536b !important;
  border-color: rgba(255,83,107,.42) !important;
  background: rgba(255,83,107,.065) !important;
}

/* Feature cards */
.profile-layout.advanced-profile-layout {
  width: 100% !important;
  margin: 0 0 50px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.profile-layout .profile-sidebar {
  display: block !important;
  min-width: 0 !important;
}

.profile-feature-card {
  position: relative !important;
  width: 100% !important;
  min-height: 270px !important;
  padding: 38px 36px !important;
  overflow: hidden !important;
  border: 1px solid #294038 !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 85% 50%, rgba(159,239,0,.045), transparent 30%),
    linear-gradient(145deg, #0b1813, #08120e) !important;
}

.profile-feature-card .cyber-section-heading {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
}

.profile-feature-card .eyebrow {
  color: #9fef00 !important;
  font: 800 12px/1 'JetBrains Mono', monospace !important;
  letter-spacing: .075em !important;
}

.profile-feature-card h2 {
  margin: 17px 0 10px !important;
  color: #f4f7f5 !important;
  font-size: 29px !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}

.profile-feature-card p {
  margin: 0 !important;
  color: #8e9c95 !important;
  font-size: 15px !important;
}

.profile-feature-action {
  position: absolute !important;
  left: 36px !important;
  bottom: 35px !important;
  z-index: 3 !important;
  min-width: 190px !important;
  height: 54px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  border: 1px solid rgba(159,239,0,.38) !important;
  border-radius: 8px !important;
  color: #aaff22 !important;
  background: rgba(9,24,17,.84) !important;
  font-weight: 700 !important;
}

.profile-feature-action:hover {
  color: #c7ff61 !important;
  border-color: #9fef00 !important;
  background: rgba(159,239,0,.07) !important;
}

.profile-feature-art {
  position: absolute !important;
  right: 36px !important;
  top: 54px !important;
  width: 170px !important;
  height: 150px !important;
  opacity: .86 !important;
  filter: drop-shadow(0 0 13px rgba(159,239,0,.19)) !important;
}

#profile-solved-history,
#student-network-list,
.profile-feature-card > .text-link {
  display: none;
}

.profile-feature-card.is-expanded {
  min-height: 380px !important;
}
.profile-feature-card.is-expanded #profile-solved-history,
.profile-feature-card.is-expanded #student-network-list,
.profile-feature-card.is-expanded > .text-link {
  display: block !important;
}
.profile-feature-card.is-expanded .profile-feature-action {
  position: static !important;
  margin-top: 24px !important;
  margin-bottom: 20px !important;
}

/* Edit and security tabs */
.profile-settings-page {
  width: 100% !important;
  margin-bottom: 50px !important;
}
.profile-settings-header {
  margin-bottom: 18px !important;
}
.profile-settings-header h2 {
  margin: 8px 0 !important;
  font-size: 34px !important;
}
.settings-card {
  border-radius: 14px !important;
}

/* Responsive */
@media (max-width: 1100px) {
  .advanced-profile-hero,
  .profile-hero.advanced-profile-hero {
    grid-template-columns: minmax(0, 1fr) 200px !important;
    padding: 34px 28px 116px !important;
  }
  .profile-identity {
    grid-template-columns: 175px minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .profile-avatar.large {
    width: 165px !important;
    height: 165px !important;
  }
  .profile-rank-card {
    width: 200px !important;
    min-width: 200px !important;
  }
  .profile-headline,
  .profile-bio {
    left: 28px !important;
    width: calc(100% - 56px) !important;
  }
  .profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .profile-tabs,
  .profile-tab-panel {
    width: min(100% - 24px, 1296px) !important;
  }
  .profile-tabs {
    overflow-x: auto !important;
  }
  .advanced-profile-hero,
  .profile-hero.advanced-profile-hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    padding: 28px !important;
  }
  .profile-identity {
    grid-template-columns: 1fr !important;
  }
  .profile-avatar.large {
    margin: 0 !important;
  }
  .profile-rank-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 210px !important;
  }
  .profile-headline,
  .profile-bio {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 18px !important;
  }
  .profile-layout.advanced-profile-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 580px) {
  .profile-tab {
    width: auto !important;
    min-width: 122px !important;
  }
  .profile-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .profile-stat-card {
    min-height: 145px !important;
  }
  .profile-feature-card {
    min-height: 300px !important;
    padding: 30px 24px !important;
  }
  .profile-feature-action {
    left: 24px !important;
    bottom: 26px !important;
  }
  .profile-feature-art {
    right: 15px !important;
    opacity: .48 !important;
  }
}

/* =========================================================
   DASHBOARD LAB CARDS VISIBILITY REPAIR
   Prevents the Labs-page entrance animation from hiding
   the same card component when it is reused on the dashboard.
   ========================================================= */

.md-assignments{
  min-height:0!important;
}

.md-dashboard-labs-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:18px!important;
  margin-top:22px!important;
  min-height:0!important;
  visibility:visible!important;
  opacity:1!important;
}

.md-dashboard-lab-card{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}

/* The global Labs-page animation sets every .labs-v2-card to opacity:0.
   Dashboard cards must not depend on the Labs page's JS classes. */
body .md-dashboard-lab-card.labs-v2-card{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

/* Keep a small dashboard-only reveal without hiding the cards first. */
body.md-dashboard-labs-ready .md-dashboard-lab-card{
  animation:dashboardLabCardReveal .5s cubic-bezier(.2,.75,.2,1) both;
}

body.md-dashboard-labs-ready .md-dashboard-lab-card:nth-child(2){
  animation-delay:.08s;
}

.md-dashboard-lab-card .labs-v2-cover,
.md-dashboard-lab-card .labs-v2-card-body{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

.md-dashboard-lab-card .labs-v2-card-body{
  flex:1 1 auto!important;
  min-height:0!important;
}

.md-dashboard-lab-card .labs-v2-progress i b{
  width:var(--dashboard-progress,0%)!important;
}

/* Stop Labs-page progress animation from forcing dashboard bars back to zero. */
body:not(.labs-v2-progress-ready) .md-dashboard-lab-card .labs-v2-progress i b{
  width:var(--dashboard-progress,0%)!important;
}

@keyframes dashboardLabCardReveal{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:900px){
  .md-dashboard-labs-grid{
    grid-template-columns:1fr!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.md-dashboard-labs-ready .md-dashboard-lab-card{
    animation:none!important;
  }
}

/* =========================================================
   DASHBOARD LAB CARD LAYOUT FINAL FIX
   Restores the centered cover icon and prevents LAB code overlap.
   ========================================================= */

.md-dashboard-lab-card .labs-v2-cover{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 150px!important;
  width:100%!important;
  min-height:150px!important;
  height:150px!important;
  overflow:hidden!important;
}

/* Keep the icon centered and above the grid background. */
.md-dashboard-lab-card .labs-v2-icon{
  position:relative!important;
  z-index:3!important;
  display:grid!important;
  place-items:center!important;
  width:62px!important;
  height:62px!important;
  margin:0!important;
}

/* LAB code and status stay in their own top corners. */
.md-dashboard-lab-card .labs-v2-code{
  position:absolute!important;
  z-index:4!important;
  top:13px!important;
  left:15px!important;
  margin:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.md-dashboard-lab-card .labs-v2-state{
  position:absolute!important;
  z-index:4!important;
  top:12px!important;
  right:12px!important;
  margin:0!important;
  white-space:nowrap!important;
}

/* Restore the card body layout without affecting the cover. */
.md-dashboard-lab-card .labs-v2-card-body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-height:340px!important;
  padding:20px!important;
}

.md-dashboard-lab-card .labs-v2-card-body>p{
  flex:1 1 auto!important;
  min-height:48px!important;
}

/* Keep both cards aligned even when descriptions have different lengths. */
.md-dashboard-lab-card .labs-v2-facts,
.md-dashboard-lab-card .labs-v2-progress,
.md-dashboard-lab-card .labs-v2-footer-row,
.md-dashboard-lab-card .labs-v2-launch{
  flex:0 0 auto!important;
}

.md-dashboard-lab-card .labs-v2-launch{
  margin-top:auto!important;
}

/* Make the grid background stay behind everything. */
.md-dashboard-lab-card .labs-v2-cover::before{
  z-index:1!important;
}

@media(max-width:900px){
  .md-dashboard-lab-card .labs-v2-card-body{
    min-height:auto!important;
  }
}

/* =========================================================
   STUDENT LAB WORKSPACE PAGE
   ========================================================= */

.lab-workspace-hero,
.lab-workspace-stats,
.lab-workspace-grid,
.lab-workspace-flash{
  width:min(var(--app-content-width,1180px),calc(100% - var(--app-page-gap,40px)));
  max-width:var(--app-content-width,1180px);
  margin-left:auto;
  margin-right:auto;
}

.lab-workspace-hero{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:34px 0 27px;
}

.lab-workspace-icon{
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  border:1px solid rgba(159,239,0,.38);
  border-radius:18px;
  color:#9fef00;
  background:
    radial-gradient(circle,rgba(159,239,0,.08),transparent 67%),
    #0c1712;
  box-shadow:0 0 30px rgba(159,239,0,.06);
}

.lab-workspace-icon svg{
  width:42px;
  height:42px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lab-workspace-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:#9fef00;
  font:700 10px 'JetBrains Mono',monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.lab-workspace-kicker i{
  color:#66776e;
  font-style:normal;
}

.lab-workspace-title h1{
  margin:8px 0 7px;
  color:#f3f8f5;
  font-size:clamp(35px,4vw,53px);
  line-height:1.04;
  letter-spacing:-.045em;
}

.lab-workspace-title>p{
  max-width:760px;
  margin:0;
  color:#829188;
  line-height:1.7;
}

.lab-workspace-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}

.lab-workspace-status{
  display:inline-flex;
  padding:6px 9px;
  border:1px solid #32473c;
  border-radius:6px;
  color:#92a39a;
  background:#111f18;
  font:700 9px 'JetBrains Mono',monospace;
  text-transform:uppercase;
}

.lab-workspace-status.completed{
  color:#9fef00;
  border-color:rgba(159,239,0,.28);
  background:rgba(159,239,0,.06);
}

.lab-workspace-status.in_progress{
  color:#ffc857;
  border-color:rgba(255,200,87,.28);
  background:rgba(255,200,87,.06);
}

.lab-workspace-back{
  align-self:start;
  padding-top:7px;
  color:#9aaba2!important;
  font-weight:700;
}

.lab-workspace-back:hover{
  color:#9fef00!important;
}

.lab-workspace-flash{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:18px;
  padding:14px 16px;
  border:1px solid;
  border-radius:10px;
}

.lab-workspace-flash span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:900;
}

.lab-workspace-flash p{margin:0}

.lab-workspace-flash.success{
  color:#caff8d;
  border-color:rgba(159,239,0,.32);
  background:rgba(159,239,0,.065);
}

.lab-workspace-flash.success span{
  color:#07100d;
  background:#9fef00;
}

.lab-workspace-flash.error{
  color:#ff9aa9;
  border-color:rgba(255,93,115,.32);
  background:rgba(255,93,115,.06);
}

.lab-workspace-flash.error span{
  color:#fff;
  background:#ff5d73;
}

.lab-workspace-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.lab-workspace-stats article{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid #273a31;
  border-radius:12px;
  background:
    radial-gradient(200px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.065),transparent 63%),
    linear-gradient(145deg,#101b16,#09110e);
  transition:.2s ease;
}

.lab-workspace-stats article:hover{
  transform:translateY(-4px);
  border-color:rgba(159,239,0,.4);
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.lab-workspace-stats span,
.lab-workspace-stats small{
  display:block;
}

.lab-workspace-stats span{
  color:#829188;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.lab-workspace-stats strong{
  display:block;
  margin:7px 0 4px;
  color:#f5faf7;
  font-size:29px;
}

.lab-workspace-stats small{
  color:#66766d;
}

.lab-workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
  gap:18px;
  align-items:start;
}

.lab-workspace-panel{
  --mouse-x:50%;
  --mouse-y:50%;
  position:relative;
  overflow:hidden;
  padding:26px;
  border:1px solid #293c32;
  border-radius:15px;
  background:
    radial-gradient(300px circle at var(--mouse-x) var(--mouse-y),rgba(159,239,0,.055),transparent 65%),
    linear-gradient(145deg,#0e1914,#08110d);
  opacity:0;
  transform:translateY(16px);
}

body.lab-workspace-ready .lab-workspace-panel{
  opacity:1;
  transform:translateY(0);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.2,1),border-color .2s ease,box-shadow .2s ease;
}

body.lab-workspace-ready .lab-submit-panel{transition-delay:.09s}

.lab-workspace-panel:hover{
  border-color:rgba(159,239,0,.38);
  box-shadow:0 24px 55px rgba(0,0,0,.24);
}

.lab-workspace-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

.lab-workspace-eyebrow{
  color:#9fef00;
  font:700 10px 'JetBrains Mono',monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.lab-workspace-panel h2{
  margin:7px 0 0;
  color:#f0f6f2;
  font-size:25px;
}

.lab-version{
  padding:6px 8px;
  border:1px solid #30443a;
  border-radius:6px;
  color:#718178;
  font:700 9px 'JetBrains Mono',monospace;
}

.lab-mission-steps{
  display:grid;
  gap:10px;
}

.lab-mission-steps article{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:13px;
  padding:13px;
  border:1px solid #22342b;
  border-radius:9px;
  background:#09130f;
}

.lab-mission-steps article>b{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(159,239,0,.28);
  border-radius:8px;
  color:#9fef00;
  background:rgba(159,239,0,.045);
  font:800 10px 'JetBrains Mono',monospace;
}

.lab-mission-steps h3{
  margin:0 0 3px;
  color:#eaf2ed;
  font-size:15px;
}

.lab-mission-steps p{
  margin:0;
  color:#77877e;
  line-height:1.55;
}

.lab-mission-steps code{
  color:#b9ff70;
  font-family:'JetBrains Mono',monospace;
}

.lab-launch-environment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid #9fef00;
  border-radius:8px;
  color:#07100d!important;
  background:#9fef00;
  transition:.2s ease;
}

.lab-launch-environment:hover{
  transform:translateY(-2px);
  color:#07100d!important;
  background:#b6ff37;
  box-shadow:0 0 28px rgba(159,239,0,.14);
}

.lab-launch-environment small,
.lab-launch-environment span{
  display:block;
}

.lab-launch-environment small{
  margin-bottom:2px;
  color:#315000;
  font:700 8px 'JetBrains Mono',monospace;
  text-transform:uppercase;
}

.lab-launch-environment span{
  font-weight:800;
}

.lab-launch-environment>b{
  font-size:24px;
}

.lab-environment-note{
  margin-top:10px;
  color:#68786f;
  font-size:11px;
}

.lab-score-display{
  padding:15px;
  border:1px solid #26382f;
  border-radius:9px;
  background:#09130f;
}

.lab-score-display>div:first-child{
  display:flex;
  justify-content:space-between;
  gap:15px;
}

.lab-score-display span{
  color:#718178;
}

.lab-score-display strong{
  color:#f0f6f2;
}

.lab-score-track{
  height:6px;
  margin-top:11px;
  overflow:hidden;
  border-radius:999px;
  background:#1b2922;
}

.lab-score-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#9fef00;
  box-shadow:0 0 12px rgba(159,239,0,.4);
}

.lab-flag-form{
  margin-top:20px;
}

.lab-flag-form label{
  margin-top:0;
  color:#aebcb4;
}

.lab-flag-input{
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid #31483b;
  border-radius:8px;
  background:#06100c;
  transition:.18s ease;
}

.lab-flag-input:focus-within{
  border-color:#9fef00;
  box-shadow:0 0 0 3px rgba(159,239,0,.07);
}

.lab-flag-input>span{
  padding-left:14px;
  color:#9fef00;
  font:800 15px 'JetBrains Mono',monospace;
}

.lab-flag-input input{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-family:'JetBrains Mono',monospace;
}

.lab-flag-form>small{
  display:block;
  margin-top:8px;
  color:#66766d;
  line-height:1.55;
}

.lab-submit-button{
  width:100%;
  margin-top:15px;
  justify-content:space-between;
  border-radius:7px;
}

.lab-submit-button:disabled{
  cursor:not-allowed;
  opacity:.48;
}

.lab-completed-box{
  margin-top:19px;
  padding:22px;
  border:1px solid rgba(159,239,0,.3);
  border-radius:10px;
  background:rgba(159,239,0,.055);
  text-align:center;
}

.lab-completed-box>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  border-radius:50%;
  color:#07100d;
  background:#9fef00;
  font-size:22px;
  font-weight:900;
}

.lab-completed-box h3{
  margin:0 0 5px;
  color:#eaf5ee;
}

.lab-completed-box p{
  margin:0 0 5px;
  color:#9eafa5;
}

.lab-completed-box small{
  color:#66766d;
}

.lab-assignment-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin:20px 0 0;
  overflow:hidden;
  border:1px solid #24362d;
  border-radius:9px;
  background:#24362d;
}

.lab-assignment-details div{
  padding:12px;
  background:#09130f;
}

.lab-assignment-details dt{
  color:#63736a;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.lab-assignment-details dd{
  margin:4px 0 0;
  color:#dbe6df;
  font-weight:700;
  text-transform:capitalize;
}

@media(max-width:960px){
  .lab-workspace-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .lab-workspace-hero{
    grid-template-columns:72px minmax(0,1fr);
  }

  .lab-workspace-icon{
    width:68px;
    height:68px;
  }

  .lab-workspace-icon svg{
    width:32px;
    height:32px;
  }

  .lab-workspace-back{
    grid-column:1 / -1;
  }

  .lab-workspace-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .lab-workspace-stats{
    grid-template-columns:1fr;
  }

  .lab-workspace-panel{
    padding:18px;
  }

  .lab-assignment-details{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .lab-workspace-panel{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* =========================================================
   ABSOLUTE FINAL PODIUM FIX
   Awards centered above their own cards; duplicate rank badge removed.
   This block must remain at the very end of style.css.
   ========================================================= */

.reference-podium .reference-winner {
  position: relative !important;
  padding-top: 86px !important;
  text-align: center !important;
}

/* Center the trophy/medal over the exact horizontal center of each card. */
.reference-podium .reference-winner .winner-award,
.reference-podium .reference-winner.place-1 .winner-award,
.reference-podium .reference-winner.place-2 .winner-award,
.reference-podium .reference-winner.place-3 .winner-award {
  position: absolute !important;
  top: -58px !important;
  left: 50% !important;
  right: auto !important;
  width: 92px !important;
  height: 100px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 70% !important;
  animation: podiumAwardCenteredFloat 3s ease-in-out infinite !important;
  z-index: 20 !important;
}

/* First-place trophy is larger but uses the same center line. */
.reference-podium .reference-winner.place-1 .winner-award {
  top: -82px !important;
  width: 132px !important;
  height: 112px !important;
  animation: podiumCupCenteredFloat 3.4s ease-in-out infinite !important;
}

/*
 * Medal artwork already contains the place number.
 * Hide the separate circular rank badge to prevent duplicate 1/2/3.
 */
.reference-podium .reference-winner .winner-rank-badge {
  display: none !important;
}

/* Keep the entire person identity centered inside every card. */
.reference-podium .reference-winner .winner-profile,
.reference-podium .reference-winner.place-1 .winner-profile,
.reference-podium .reference-winner.place-2 .winner-profile,
.reference-podium .reference-winner.place-3 .winner-profile {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
}

.reference-podium .reference-winner.place-1 .winner-profile {
  margin-top: 22px !important;
}

.reference-podium .reference-winner .reference-avatar {
  margin: 0 auto !important;
}

.reference-podium .reference-winner .winner-identity,
.reference-podium .reference-winner .winner-identity h2,
.reference-podium .reference-winner .winner-identity p,
.reference-podium .reference-winner .winner-identity span,
.reference-podium .reference-winner .winner-score {
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hover animation must preserve translateX(-50%), otherwise medals jump left. */
.reference-podium .reference-winner:hover .winner-award,
.reference-podium .reference-winner.place-1:hover .winner-award,
.reference-podium .reference-winner.place-2:hover .winner-award,
.reference-podium .reference-winner.place-3:hover .winner-award {
  transform: translateX(-50%) translateY(-6px) rotate(-3deg) scale(1.07) !important;
}

/* Centered floating animations. */
@keyframes podiumAwardCenteredFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-6px) rotate(1deg);
  }
}

@keyframes podiumCupCenteredFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) rotate(-1deg);
  }
}

/* Responsive cards remain centered. */
@media (max-width: 920px) {
  .reference-podium .reference-winner,
  .reference-podium .reference-winner.place-1,
  .reference-podium .reference-winner.place-2,
  .reference-podium .reference-winner.place-3 {
    padding-top: 86px !important;
  }

  .reference-podium .reference-winner .winner-award {
    left: 50% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reference-podium .reference-winner .winner-award,
  .reference-podium .reference-winner.place-1 .winner-award {
    animation: none !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   FIX: Keep the hover shine inside the podium card.
   This overrides the old:
   .reference-winner:hover::after { transform: translateX(125%); }
   ========================================================= */

.reference-winner{
    position:relative;
}

.reference-winner::after{
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:inherit !important;
    clip-path: inset(0 round 14px) !important;
    transform:translateX(-105%) !important;
    opacity:0 !important;
    transition:
        transform .8s cubic-bezier(.22,.7,.25,1),
        opacity .2s ease !important;
}

.reference-winner:hover::after{
    opacity:1 !important;
    transform:translateX(105%) !important;
}