:root { --navy:#06356c; --blue:#0878d1; --sky:#e9f7ff; --red:#d91e36; --gold:#f5b326; --ink:#17324d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(180deg,#f6fbff 0,#fff 58%); font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; min-height:100vh; }
.school-nav { background:linear-gradient(110deg,#032c5d,#065496 62%,#0878d1); box-shadow:0 5px 20px rgba(3,44,93,.18); }
.navbar-brand img { background:#fff; border-radius:50%; padding:3px; box-shadow:0 0 0 4px rgba(255,255,255,.16); object-fit:contain; }
.navbar-brand strong { font-size:clamp(1.05rem,2.5vw,1.45rem); letter-spacing:.035em; }
.navbar-brand small { font-size:clamp(.68rem,1.6vw,.9rem); opacity:.9; letter-spacing:.055em; margin-top:.25rem; }
.hero-section { position:relative; overflow:hidden; padding:4.7rem 0 6.8rem; background:radial-gradient(circle at 12% 20%,rgba(53,191,255,.19),transparent 25%),radial-gradient(circle at 88% 38%,rgba(245,179,38,.2),transparent 22%),linear-gradient(160deg,#edfaff,#fffaf0); }
.hero-section:after { content:""; position:absolute; left:-5%; right:-5%; bottom:-75px; height:135px; background:#fff; border-radius:50% 50% 0 0/55% 55% 0 0; }
.hero-badge-wrap { position:relative; display:inline-block; }
.hero-badge { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.5rem; padding:.58rem 1.08rem; border-radius:99px; color:#075aa0; background:#dff4ff; font-weight:700; font-size:.98rem; }
.firework { position:absolute; z-index:0; top:50%; width:5px; height:5px; border-radius:50%; color:#f5b326; background:currentColor; box-shadow:0 -20px currentColor,14px -14px #d91e36,20px 0 #0878d1,14px 14px #16b777,0 20px #d91e36,-14px 14px #f5b326,-20px 0 #0878d1,-14px -14px #16b777; animation:firework-burst 1.8s ease-out infinite; }
.firework-left { left:-34px; animation-delay:.15s; }
.firework-right { right:-34px; color:#d91e36; animation-delay:1.05s; }
@keyframes firework-burst { 0%,28% { opacity:0; transform:translateY(-50%) scale(.25) rotate(0); } 42% { opacity:1; } 72%,100% { opacity:0; transform:translateY(-50%) scale(1) rotate(18deg); } }
@media (prefers-reduced-motion:reduce) { .firework { animation:none; opacity:.75; transform:translateY(-50%) scale(.72); } }
.hero-section h1 { margin:1.25rem 0 .75rem; color:var(--navy); font-weight:800; font-size:clamp(2.1rem,5vw,3.45rem); letter-spacing:-.035em; }
.hero-section h1 span { color:var(--red); }
.hero-section p { color:#54708a; font-size:clamp(1rem,2vw,1.16rem); }
.search-card { position:relative; z-index:2; max-width:820px; margin-top:2rem; padding:1.2rem; background:rgba(255,255,255,.96); border:1px solid rgba(8,120,209,.12); border-radius:1.25rem; box-shadow:0 18px 50px rgba(6,53,108,.15); }
.search-card .input-group { border:2px solid #cbe7f8; border-radius:.9rem; overflow:hidden; transition:.2s; }
.search-card .input-group:focus-within { border-color:#1697e8; box-shadow:0 0 0 .25rem rgba(22,151,232,.12); }
.search-card .input-group-text,.search-card .form-control { border:0; background:#fff; }
.search-card .form-control { min-width:0; touch-action:manipulation; }
.search-card .form-control:focus { box-shadow:none; }
.btn-search { color:#fff; background:linear-gradient(135deg,#0878d1,#0756a0); border:0; font-weight:700; }
.btn-search:hover { color:#fff; background:linear-gradient(135deg,#076ab9,#043f7b); }
.search-hint { margin-top:.8rem; color:#688199; font-size:.82rem; }
.result-container { position:relative; z-index:3; margin-top:-2.2rem; padding-bottom:2rem; }
.student-card,.empty-card { max-width:980px; padding:clamp(1.25rem,4vw,2.5rem); background:#fff; border:1px solid #dcebf5; border-radius:1.5rem; box-shadow:0 14px 45px rgba(6,53,108,.1); margin-bottom:2rem; }
.success-seal { display:inline-grid; place-items:center; width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#16b777,#07945d); color:#fff; font-size:1.8rem; box-shadow:0 7px 18px rgba(7,148,93,.24); }
.celebration .eyebrow { margin-top:.85rem; color:#16845e; font-weight:800; letter-spacing:.13em; font-size:.8rem; }
.celebration h2 { margin:.35rem 0 1.7rem; color:var(--red); font-size:clamp(1.75rem,4vw,2.55rem); font-weight:900; text-transform:uppercase; }
.info-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; border:1px solid #dbe8f1; border-radius:1rem; background:#dbe8f1; }
.info-item { padding:1rem 1.15rem; background:#f9fcff; }
.info-item span,.class-result span,.order-number span { display:block; color:#6c8296; font-size:.8rem; margin-bottom:.25rem; }
.info-item strong { color:#163d62; font-size:1.02rem; }
.class-result { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1.2rem 1.35rem; margin:1.25rem 0; border-radius:1rem; color:#fff; background:linear-gradient(120deg,#064984,#087acb); }
.class-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:.8rem; background:rgba(255,255,255,.14); font-size:1.45rem; }
.class-result span,.order-number span { color:#cae9ff; }
.class-result strong { font-size:1.7rem; }
.order-number { min-width:95px; padding-left:1.25rem; border-left:1px solid rgba(255,255,255,.24); text-align:center; }
.preference-box { padding:1.15rem 1.25rem; background:#fff9e8; border:1px solid #ffe09a; border-radius:1rem; }
.preference-label { color:#a76700; font-weight:800; }
.preference-box p { margin:.5rem 0 0; line-height:1.55; }
.program-section { margin-top:1.7rem; }
.section-title { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.section-title>i { color:#0878d1; font-size:1.55rem; }
.section-title strong,.section-title small { display:block; }
.section-title small { color:#71879b; margin-top:.15rem; }
.program-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #d9e6ef; border-radius:1rem; overflow:hidden; }
.program-item { min-height:105px; display:grid; grid-template-columns:38px 1fr 32px; align-items:center; gap:.65rem; padding:1rem; background:#fafcfe; border-right:1px solid #d9e6ef; border-bottom:1px solid #d9e6ef; color:#687e91; }
.program-item:nth-child(3n) { border-right:0; }
.program-item:nth-last-child(-n+3) { border-bottom:0; }
.program-item.registered { color:#123c60; background:#eff9ff; }
.program-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:.65rem; color:#7890a3; background:#e9eef2; font-size:1.05rem; }
.registered .program-icon { color:#0677bd; background:#d7efff; }
.program-item>span:nth-child(2) { font-weight:700; line-height:1.25; }
.check-box { display:grid; place-items:center; width:29px; height:29px; border:2px solid #afbec9; background:#fff; color:var(--red); font-size:1.65rem; font-weight:900; line-height:1; }
.registered .check-box { border-color:var(--red); }
.empty-card { max-width:600px; padding-top:3rem; padding-bottom:3rem; }
.empty-icon { font-size:2.8rem; color:#93a9b9; }
.empty-card h2 { font-weight:800; color:#31536f; }
.empty-card p { color:#71879b; margin-bottom:0; }
.result-list { max-width:980px; }
.section-heading { margin:0 0 1.5rem; }
.section-heading span { color:#0878d1; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; }
.section-heading h2 { font-size:1.45rem; color:#193b59; font-weight:800; margin-top:.3rem; }
@media (max-width:767.98px) {
  .navbar-brand img { width:58px; height:58px; }
  .hero-section { padding:3.2rem 0 5.8rem; }
  .search-card { padding:.8rem; }
  .search-card .input-group { display:flex; flex-wrap:wrap; }
  .search-card .input-group-text { flex:0 0 auto; }
  .search-card .form-control { flex:1 1 0; width:1%; min-width:0; font-size:16px; }
  .search-card .btn-search { flex:0 0 100%; width:100%; margin-left:0!important; border-radius:0; padding:.7rem; touch-action:manipulation; }
  .info-grid { grid-template-columns:repeat(2,1fr); }
  .class-result { grid-template-columns:auto 1fr; }
  .order-number { grid-column:1/3; border-left:0; border-top:1px solid rgba(255,255,255,.24); padding:1rem 0 0; display:flex; justify-content:space-between; align-items:center; text-align:left; }
  .program-grid { grid-template-columns:1fr; }
  .program-item,.program-item:nth-child(3n),.program-item:nth-last-child(-n+3) { border-right:0; border-bottom:1px solid #d9e6ef; min-height:82px; }
  .program-item:last-child { border-bottom:0; }
}