:root {
  --bg-1: #050d25;
  --bg-2: #0b1d49;
  --bg-3: #142f72;
  --card-border: rgba(183, 214, 255, 0.16);
  --text: #eef6ff;
  --muted: #b9c9ec;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Inter", "Hiragino Sans", "Yu Gothic", sans-serif; color: var(--text); }
body {
  background:
    radial-gradient(circle at 20% 0%, rgba(122, 214, 255, 0.22), transparent 18%),
    radial-gradient(circle at 85% 10%, rgba(255, 203, 100, 0.16), transparent 15%),
    radial-gradient(circle at 50% 35%, rgba(111, 112, 255, 0.14), transparent 28%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 38%, var(--bg-3));
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  padding: env(safe-area-inset-top, 0) 14px calc(98px + env(safe-area-inset-bottom, 0));
  position: relative;
  overflow: hidden;
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}
.stars-a {
  opacity: 0.66;
  background-image: radial-gradient(circle, rgba(255,255,255,.92) 0 1px, transparent 1.6px);
  background-size: 120px 120px;
}
.stars-b {
  opacity: 0.42;
  background-image: radial-gradient(circle, rgba(255,232,151,.8) 0 1px, transparent 1.6px);
  background-size: 170px 170px;
  background-position: 30px 40px;
}
.stars-c {
  opacity: 0.18;
  background-image: radial-gradient(circle, rgba(126,225,255,.75) 0 2px, transparent 2.6px);
  background-size: 280px 280px;
  animation: floatStars 18s linear infinite;
}

@keyframes floatStars {
  from { transform: translateY(0); }
  to { transform: translateY(-80px); }
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding: 22px 4px 14px;
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.title-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  font-size: .78rem;
  font-weight: 800;
  color: #f4fbff;
  background: rgba(27, 52, 122, 0.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.topbar h1 {
  margin: 0;
  font-size: 2.08rem;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.subtitle {
  margin: 8px 0 0;
  color: #d9e7ff;
  font-size: .95rem;
}
.title-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.title-feature {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  color: #f5fbff;
  background: linear-gradient(180deg, rgba(31,62,144,.78), rgba(12,31,81,.78));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.18);
}
.version-pill {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(18, 37, 87, 0.7);
  border: 1px solid rgba(255,255,255,.12);
  color: #dbe7ff;
  font-weight: 800;
}

.page { display: grid; gap: 18px; position: relative; z-index: 1; }
.glass {
  background: linear-gradient(180deg, rgba(14, 31, 74, 0.82), rgba(8, 22, 57, 0.76));
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}

.hero-card {
  position: relative;
  border-radius: 32px;
  padding: 18px;
  overflow: hidden;
}
.hero-glow,
.hero-sparkle {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.hero-glow { filter: blur(8px); }
.hero-glow-a {
  width: 140px;
  height: 140px;
  right: -32px;
  top: 30px;
  background: radial-gradient(circle, rgba(255,207,95,.38), transparent 70%);
}
.hero-glow-b {
  width: 180px;
  height: 180px;
  left: -54px;
  bottom: -30px;
  background: radial-gradient(circle, rgba(110,216,255,.26), transparent 72%);
}
.hero-sparkle-a,
.hero-sparkle-b {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, rgba(255,255,255,.98), rgba(255,223,136,.7) 55%, transparent 75%);
  box-shadow: 0 0 18px rgba(255,219,116,.55);
  animation: twinkle 2.2s ease-in-out infinite alternate;
}
.hero-sparkle-a { right: 42px; top: 88px; }
.hero-sparkle-b { left: 116px; bottom: 96px; animation-delay: .7s; }
@keyframes twinkle {
  from { transform: scale(.8); opacity: .6; }
  to { transform: scale(1.18); opacity: 1; }
}

.hero-topline {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.segmented {
  display:flex;
  flex:1;
  background: rgba(7,16,39,.56);
  border-radius: 18px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.09);
}
.segment {
  flex:1;
  border:0;
  border-radius:14px;
  padding: 12px 8px;
  color:#dce7ff;
  background:transparent;
  font-weight:900;
  font-size:1rem;
}
.segment.active {
  background: linear-gradient(180deg, #78ddff, #488fff);
  color: #062355;
  box-shadow: 0 10px 22px rgba(65, 152, 255, .35);
}
.ghost-btn {
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  background: rgba(17,34,82,.72);
  padding: 12px 14px;
  border-radius: 16px;
  font-weight:900;
  white-space: nowrap;
}

.hero-main {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
.hero-left { display: grid; place-items: start center; gap: 12px; }
.avatar-ring {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  border: none;
  padding: 6px;
  position: relative;
  background: conic-gradient(from 180deg, #ff78de, #ffd659, #79f7ff, #7088ff, #ff78de);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1), 0 16px 30px rgba(0,0,0,.35), 0 0 32px rgba(121, 211, 255, .28);
}
.avatar-ring::before {
  content: "";
  position:absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.24), transparent 35%), linear-gradient(180deg, #122f6f, #091836);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.avatar-core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 30% 30%, #254b98, #102249 68%);
  font-size: 3.1rem;
  z-index: 1;
}
.avatar-level {
  position:absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1f4fb7, #0c2259);
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 14px;
  border-radius: 999px;
  z-index:2;
  font-weight:900;
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.hero-aura-pill {
  width: 100%;
  text-align: center;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  color: #ffeeaf;
  background: rgba(20, 38, 91, .82);
  border: 1px solid rgba(255,255,255,.1);
}
.hero-copy-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-name {
  font-size: 1.15rem;
  font-weight: 900;
}
.hero-rank {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 900;
  color: #102449;
  background: linear-gradient(180deg, #ffe89b, #ffc85d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-points-wrap { margin-top: 10px; }
.hero-points {
  font-size: 2.55rem;
  font-weight: 900;
  line-height: 1;
  color: #fff4b1;
  text-shadow: 0 0 20px rgba(255, 210, 91, .14);
}
.hero-points small {
  margin-left: 4px;
  font-size: 1rem;
}
.hero-badge-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.mini-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  color: #dce8ff;
  background: rgba(18, 35, 81, .85);
  border: 1px solid rgba(255,255,255,.09);
}
.mini-badge-gold {
  color: #4b2600;
  background: linear-gradient(180deg, #fff1a9, #ffcb55);
}
.hero-subline {
  margin-top: 8px;
  color: #d7e7ff;
  font-size: .92rem;
  font-weight: 700;
}
.score-box {
  margin-top: 14px;
  padding: 16px 16px 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15,35,83,.9), rgba(8,22,57,.82));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.exp-meta {
  display:flex;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}
.exp-track {
  margin-top: 12px;
  height: 16px;
  border-radius: 999px;
  overflow:hidden;
  position:relative;
  background: rgba(2,10,28,.75);
  border: 1px solid rgba(255,255,255,.08);
}
.exp-fill {
  height:100%;
  width:0%;
  border-radius:inherit;
  background: linear-gradient(90deg, #ffca4d 0%, #ffec93 30%, #7fe7ff 80%, #6b76ff 100%);
  box-shadow: 0 0 24px rgba(255, 208, 97, .35);
  transition: width .35s ease;
}
.exp-glow {
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  mix-blend-mode: screen;
  animation: shine 2.8s linear infinite;
}
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.milestone-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.milestone-card {
  padding: 12px;
  border-radius: 18px;
  background: rgba(7, 18, 47, .52);
  border: 1px solid rgba(255,255,255,.08);
}
.milestone-card-accent {
  background: linear-gradient(180deg, rgba(54,72,160,.78), rgba(22,35,89,.78));
}
.milestone-label {
  display: block;
  color: #cad9fb;
  font-size: .72rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.milestone-card strong {
  display: block;
  font-size: .95rem;
  line-height: 1.25;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stat-pill {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 20px;
  background: rgba(7,18,47,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.stat-pill-accent {
  background: linear-gradient(180deg, rgba(45,60,138,.72), rgba(20,33,87,.72));
}
.stat-label {
  display:block;
  color: #c9dafc;
  font-size: .72rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.stat-pill strong {
  display:block;
  font-size: .96rem;
  font-weight: 900;
  line-height: 1.2;
}

.unlock-panel {
  margin-top: 16px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(7,18,47,.56), rgba(6,16,41,.42));
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 1;
}
.panel-head,
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 8px;
  margin-bottom: 14px;
}
.panel-head h2,
.section-head h2 {
  margin: 0;
  font-size: 1.14rem;
}
.panel-note,
.chip {
  background: rgba(25, 47, 107, 0.9);
  color: #d6e4ff;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.unlock-strip-wrap { margin-top: 2px; }
.unlock-strip {
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:4px;
}
.unlock-strip::-webkit-scrollbar { display:none; }
.avatar-chip {
  min-width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(23,48,111,.92), rgba(10,23,58,.92));
  display:grid;
  place-items:center;
  font-size: 1.75rem;
  position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.avatar-chip.locked { filter: grayscale(1); opacity: .55; }
.avatar-chip.selected { box-shadow: 0 0 0 2px #7fe7ff inset, 0 0 22px rgba(127,231,255,.25); }
.avatar-chip .lock {
  position:absolute;
  right:8px;
  bottom:6px;
  font-size:.72rem;
  font-weight: 800;
}

.form-card,
.history-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 28px;
}
.card-shine {
  position: absolute;
  inset: auto -40px auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
.card-shine-form {
  top: -34px;
  right: -42px;
  background: radial-gradient(circle, rgba(255,211,99,.22), rgba(255,211,99,0) 70%);
}
.card-shine-history {
  top: -30px;
  right: -20px;
  background: radial-gradient(circle, rgba(106,190,255,.18), rgba(106,190,255,0) 72%);
}
.section-copy {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .86rem;
}
.field { display:grid; gap:8px; margin-bottom: 14px; }
.field span { color: #dbe7ff; font-weight: 800; font-size: .92rem; }
input, textarea, select {
  width:100%;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  background: rgba(5,14,36,.68);
  border-radius: 18px;
  padding: 14px 16px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
input::placeholder, textarea::placeholder { color: #9cb0d7; }
textarea { resize: vertical; min-height: 72px; }
.two-cols { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.primary-btn {
  width:100%;
  border:0;
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 17px 18px;
  font-size:1.02rem;
  font-weight:900;
  color:#3f2200;
  background: linear-gradient(180deg, #fff099, #ffb93b 72%, #ff9713);
  box-shadow: 0 16px 26px rgba(255, 163, 41, .28), inset 0 1px 0 rgba(255,255,255,.56);
}
.primary-btn::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -22%;
  width: 32%;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: btnSweep 3.2s ease-in-out infinite;
}
.primary-btn:active { transform: translateY(1px) scale(.995); }
@keyframes btnSweep {
  0%, 20% { left: -30%; opacity: 0; }
  32% { opacity: .9; }
  52%, 100% { left: 112%; opacity: 0; }
}

.history-list { display:grid; gap: 12px; }
.history-item {
  display:grid;
  grid-template-columns: 54px 1fr auto;
  gap:12px;
  align-items:center;
  padding: 14px;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8,20,52,.76), rgba(7,18,47,.58));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.history-icon {
  width:54px;
  height:54px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size: 1.62rem;
  background: linear-gradient(180deg, rgba(79,136,255,.22), rgba(37,73,173,.18));
}
.history-item::after {
  content: "";
  position: absolute;
  inset: auto -18px -28px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,193,255,.14), rgba(107,193,255,0) 72%);
  pointer-events: none;
}
.history-main strong { display:block; font-size: 1rem; }
.history-meta {
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.history-kind {
  display:inline-flex;
  align-items:center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  color: #eef7ff;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(22,47,109,.78);
}
.history-kind.study { background: rgba(68, 86, 191, .82); }
.history-kind.clean { background: rgba(35, 122, 116, .82); }
.history-kind.help { background: rgba(140, 93, 31, .82); }
.history-kind.other { background: rgba(76, 82, 115, .82); }
.history-main small {
  display:block;
  margin-top:4px;
  color: var(--muted);
  line-height: 1.4;
}
.history-points {
  padding: 10px 12px;
  border-radius: 999px;
  font-weight:900;
  min-width: 74px;
  text-align:center;
  background: linear-gradient(180deg, rgba(56, 204, 136, .24), rgba(24, 96, 71, .24));
  color: #94ffd2;
  border:1px solid rgba(148,255,210,.18);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  width: min(412px, calc(100vw - 20px));
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 28px;
  z-index: 3;
}
.nav-btn {
  border: 0;
  position: relative;
  background: rgba(8,21,53,.62);
  color: #dfe9ff;
  border-radius: 20px;
  min-height: 62px;
  display:grid;
  place-items:center;
  gap: 4px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-btn.active {
  color: #082b59;
  background: linear-gradient(90deg, #9ef0ff, #ffd76c 70%, #ff9a8a);
  box-shadow: 0 10px 24px rgba(255,190,109,.24);
}
.nav-btn span { display:block; font-size: .88rem; }
.nav-dot {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 0 4px rgba(255,107,107,.14), 0 0 12px rgba(255,107,107,.46);
}

.avatar-modal {
  width: min(420px, calc(100vw - 28px));
  border: none;
  border-radius: 28px;
  padding: 18px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(10,27,67,.95), rgba(7,18,47,.96));
}
.avatar-modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(5px); }
.modal-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.modal-head h3 { margin: 0; }
.close-btn {
  border:0;
  background: rgba(255,255,255,.08);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.4rem;
}
.modal-note { color: var(--muted); font-size: .9rem; }
.avatar-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.avatar-grid .avatar-chip { width: 100%; min-width: 0; height: 72px; }

.point-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.point-chip {
  position: absolute;
  left: 50%;
  bottom: 160px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  color: #412100;
  background: linear-gradient(180deg, #fff3ae, #ffcc5e 70%, #ff9e19);
  box-shadow: 0 14px 24px rgba(255, 164, 47, .3);
  animation: pointPop 1.15s ease forwards;
}
@keyframes pointPop {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.7); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -86px) scale(1.05); }
}
.spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(255,215,102,.72) 55%, transparent 72%);
  animation: sparkFly .9s ease-out forwards;
}
@keyframes sparkFly {
  from { opacity: 1; transform: translate(0, 0) scale(.8); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4); }
}

@media (max-width: 390px) {
  .hero-topline {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-main {
    grid-template-columns: 1fr;
  }
  .hero-left { place-items: center; }
  .hero-stats,
  .milestone-row { grid-template-columns: 1fr; }
  .two-cols { grid-template-columns: 1fr; }
}


.topbar::after {
  content: "";
  position: absolute;
  inset: 10px -10px -8px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(31,60,136,.16), rgba(31,60,136,0));
  z-index: -1;
  filter: blur(10px);
}
.segmented {
  padding: 4px;
  border-radius: 999px;
  background: rgba(6,18,46,.64);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.segment {
  border: 0;
  min-width: 76px;
  padding: 11px 14px;
  border-radius: 999px;
  background: transparent;
  color: #d8e7ff;
  font-weight: 900;
}
.segment.active {
  color: #082b59;
  background: linear-gradient(180deg, #a7efff, #ffd86d 68%, #ffaf57);
  box-shadow: 0 10px 22px rgba(255,186,86,.24), inset 0 1px 0 rgba(255,255,255,.5);
}
.ghost-btn {
  border: 1px solid rgba(255,255,255,.11);
  padding: 11px 14px;
  border-radius: 999px;
  color: #f6fbff;
  font-weight: 900;
  background: linear-gradient(180deg, rgba(24,52,121,.84), rgba(11,24,61,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 22px rgba(0,0,0,.22);
}
.hero-card {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,227,121,.20), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(129,237,255,.22), transparent 20%),
    linear-gradient(180deg, rgba(16,34,79,.96), rgba(8,21,55,.92));
  box-shadow: 0 24px 52px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%, transparent 72%, rgba(255,236,146,.05));
}
.hero-ribbon {
  box-shadow: 0 12px 22px rgba(255,173,67,.20);
}
.hero-comet {
  position: absolute;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,236,157,0));
  opacity: .7;
  transform: rotate(-28deg);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.35));
}
.hero-comet-a { top: 72px; right: 44px; animation: cometDrift 4.8s ease-in-out infinite; }
.hero-comet-b { top: 134px; left: 18px; width: 56px; opacity: .45; animation: cometDrift 6.2s ease-in-out infinite reverse; }
@keyframes cometDrift {
  0%, 100% { transform: translateX(0) rotate(-28deg); opacity: .25; }
  50% { transform: translateX(14px) rotate(-28deg); opacity: .75; }
}
.hero-left {
  align-content: start;
}
.hero-aura-pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 18px rgba(0,0,0,.18);
}
.score-box {
  position: relative;
  overflow: hidden;
}
.score-box::after {
  content: "";
  position: absolute;
  inset: auto -36px -46px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,231,255,.18), rgba(126,231,255,0) 70%);
}
.unlock-panel {
  background: linear-gradient(180deg, rgba(11,24,60,.78), rgba(6,16,41,.56));
}
.form-card,
.history-card {
  background:
    linear-gradient(180deg, rgba(12,28,68,.90), rgba(7,18,47,.86));
  box-shadow: 0 20px 42px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.section-head {
  position: relative;
}
.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,0));
}
.field input,
.field textarea,
.field select {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(127,231,255,.52);
  box-shadow: 0 0 0 3px rgba(127,231,255,.12), inset 0 1px 0 rgba(255,255,255,.05);
  transform: translateY(-1px);
}
.history-item {
  background: linear-gradient(180deg, rgba(10,24,61,.86), rgba(7,18,47,.72));
}
.history-headline {
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  gap: 8px;
}
.history-item .history-main strong {
  font-size: 1.02rem;
}
.history-points {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.history-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.08);
}
.history-badge.is-gold { color:#4c2500; background: linear-gradient(180deg, #fff2ac, #ffc44a); }
.history-badge.is-blue { color:#082b59; background: linear-gradient(180deg, #b7f1ff, #78ceff); }
.history-badge.is-violet { color:#f2eaff; background: linear-gradient(180deg, #785df6, #5a45c9); }
.bottom-nav {
  background: linear-gradient(180deg, rgba(11,25,60,.92), rgba(6,15,40,.90));
  box-shadow: 0 22px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-btn:active {
  transform: translateY(1px) scale(.99);
}
.nav-btn:not(.active):hover {
  background: rgba(13,31,77,.82);
}