
:root{--bg:#0f1220;--panel:#171a2b;--muted:#9aa3b2;--text:#e9ecf1;--accent:#7aa2ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.container{max-width:1100px;margin:28px auto;padding:0 16px}.card{background:var(--panel);border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.25);margin-bottom:16px}
.hrow{display:flex;flex-wrap:wrap;gap:12px}.col{flex:1 1 260px;min-width:260px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #293046;background:#101427;color:#e9ecf1}
button{background:var(--accent);border:none;color:#0b1022;padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:#233057;color:#cfe0ff;font-size:12px}
.kpi{background:#0f142a;border-radius:12px;padding:14px;text-align:center}.kpi .label{color:#aeb6c6;font-size:12px}.kpi .value{font-size:20px;font-weight:800;margin-top:8px}
.small{font-size:12px;color:#9aa3b2}
.footer{margin:24px 0;text-align:center;color:#9aa3b2;font-size:12px;white-space:pre-line}


/* Hide level badges and any explicit level bubbles in recommendation lists */
#recommendResult .badge, #recommendResult .level-badge, #recommendResult .chip-level, #recommendResult .pill-level, #recommendResult .levelTag, #recommendResult .level-bubble { display: none !important; }


/* Center hero caption under logo */
.hero-caption-center { text-align: center; margin: 0 auto; }


/* === Ivy-style intro splash === */
#introSplash {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, #181d3b 0, #050815 55%, #020309 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.splash-content {
  text-align: center;
  max-width: 520px;
  padding: 48px 40px 40px;
  background: rgba(10, 13, 32, 0.94);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.7);
}

.splash-logo {
  width: 170px;
  height: 170px;
  object-fit: contain;
  margin: 10px auto 26px;
  display: block;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.75));
}

.ua-subtitle {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(233, 236, 241, 0.65);
  margin: 0 0 18px;
}

.splash-title {
  font-size: 30px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.ua-tagline {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 30px;
}

#enterBtn {
  width: 190px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: var(--accent);
  color: #0b1022;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  border: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#enterBtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7);
}

.ua-warning {
  font-size: 11px;
  line-height: 1.7;
  color: rgba(233, 236, 241, 0.55);
  margin-top: 22px;
}

@media (max-width: 640px) {
  .splash-content {
    margin: 0 16px;
    padding: 32px 22px 26px;
    border-radius: 18px;
  }
  .splash-logo {
    width: 130px;
    height: 130px;
    margin-bottom: 18px;
  }
  .splash-title {
    font-size: 24px;
    letter-spacing: 0.18em;
  }
}


#introSplash .splash-content {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#introSplash .ua-warning {
    text-align: center !important;
}

/* --- UA Intro Splash Hard Center Lock (Colle Advisor) --- */
#introSplash {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

#introSplash .splash-content {
    margin: 0 auto !important;
    text-align: center !important;
}

#introSplash .splash-content a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

#introSplash .splash-logo {
    margin-left: auto !important;
    margin-right: auto !important;
}



/* Force center the disclaimer on splash page */
#introSplash .ua-warning,
#introSplash .ua-warning * {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}


/* Essay modal overlay */
#essayModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:900;
}
#essayModalOverlay.active{
  display:flex;
}
#essayModalCard{
  max-width:760px;
  width:calc(100% - 32px);
  margin:0;
}
