:root{
  color-scheme:light;
  --ink:#17322d;
  --muted:#60736e;
  --line:#dce9e5;
  --surface:#ffffff;
  --soft:#f1f8f5;
  --accent:#087f5b;
  --accent-dark:#056444;
  --gold:#d9a441;
  --danger:#b42318;
  --shadow:0 18px 50px rgba(23,50,45,.11);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 0%,rgba(217,164,65,.18),transparent 32rem),
    linear-gradient(180deg,#f7fbf9 0%,#edf6f2 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}
button,input{font:inherit}
button{touch-action:manipulation}
.public-header{
  width:min(980px,calc(100% - 32px));
  margin:0 auto;
  padding:22px 0 8px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  text-decoration:none;
}
.brand-mark{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,var(--accent),var(--accent-dark));
  box-shadow:0 8px 22px rgba(8,127,91,.24);
  font-weight:800;
  letter-spacing:.03em;
}
.brand strong,.brand small{display:block}
.brand strong{font-size:1rem}
.brand small{color:var(--muted);font-size:.75rem}
.public-shell{
  width:min(820px,calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 48px;
}
.hero{padding:38px 10px 30px;text-align:center}
.eyebrow{
  margin:0 0 8px;
  color:var(--accent);
  font-size:.77rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.1rem,8vw,4.1rem);
  line-height:1.04;
  letter-spacing:-.035em;
}
.hero p:last-child{max-width:610px;margin:18px auto 0;color:var(--muted);font-size:1.03rem}
.panel{
  margin:0 0 22px;
  padding:clamp(22px,5vw,38px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:26px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}
.section-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px}
.section-heading h2{margin:0 0 3px;font-size:1.35rem}
.section-heading p{margin:0;color:var(--muted)}
.step-number{
  display:grid;
  flex:0 0 36px;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--accent);
  font-weight:800;
}
label{display:block;margin-bottom:7px;font-weight:750}
.search-control{position:relative}
input[type="search"]{
  width:100%;
  min-height:54px;
  padding:13px 50px 13px 16px;
  border:1px solid #b8d0c8;
  border-radius:14px;
  outline:none;
  color:var(--ink);
  background:#fff;
  font-size:1rem;
  transition:border-color .16s,box-shadow .16s;
}
input[type="search"]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(8,127,91,.12);
}
.spinner{
  position:absolute;
  top:18px;
  right:18px;
  width:18px;
  height:18px;
  border:2px solid #c5d9d2;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:hg-public-spin .75s linear infinite;
}
@keyframes hg-public-spin{to{transform:rotate(360deg)}}
.hint,.status{margin:8px 0 0;color:var(--muted);font-size:.89rem}
.status.error{color:var(--danger)}
.status.success{color:var(--accent-dark)}
.search-results{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.search-result{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  background:#fff;
  text-align:left;
  cursor:pointer;
}
.search-result:hover,.search-result:focus-visible{
  border-color:var(--accent);
  outline:none;
  box-shadow:0 0 0 3px rgba(8,127,91,.1);
}
.search-result strong,.search-result span,.search-result small{display:block}
.search-result span{margin-top:2px;color:#3e5b54}
.search-result small{margin-top:3px;color:var(--muted)}
.selected-student{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:18px 0;
  padding:15px;
  border:1px solid #a9d5c5;
  border-radius:16px;
  background:var(--soft);
}
.selected-check{
  display:grid;
  flex:0 0 28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--accent);
  font-weight:800;
}
.selected-student small,.selected-student strong,.selected-student span{display:block}
.selected-student small{color:var(--muted)}
.selected-student strong{margin-top:1px}
.selected-student span{color:#3e5b54}
.student-code{font-size:.85rem}
.primary-button,.secondary-button,.payment-details button{
  min-height:46px;
  border:0;
  border-radius:13px;
  cursor:pointer;
  font-weight:750;
}
.primary-button{
  width:100%;
  padding:11px 18px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  box-shadow:0 8px 18px rgba(8,127,91,.2);
}
.primary-button:disabled{cursor:not-allowed;opacity:.48;box-shadow:none}
.secondary-button{
  width:100%;
  margin-top:18px;
  padding:10px 18px;
  color:var(--accent-dark);
  border:1px solid #a9d5c5;
  background:var(--soft);
}
.qr-layout{display:grid;grid-template-columns:minmax(230px,340px) 1fr;gap:28px;align-items:start}
.qr-image-wrap{
  padding:16px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  text-align:center;
}
.qr-image-wrap img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
}
.qr-image-wrap .primary-button{margin-top:12px}
.payment-details{margin:0}
.payment-details div{padding:11px 0;border-bottom:1px solid var(--line)}
.payment-details div:first-child{padding-top:0}
.payment-details dt{color:var(--muted);font-size:.79rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em}
.payment-details dd{margin:3px 0 0;font-weight:750;overflow-wrap:anywhere}
.payment-details .amount-row dd{color:var(--accent-dark);font-size:1.45rem}
.payment-details button{
  min-height:34px;
  margin-top:8px;
  padding:5px 10px;
  color:var(--accent-dark);
  background:var(--soft);
  font-size:.79rem;
}
.freshness-note{
  margin:20px 0 0;
  padding:12px 14px;
  border-left:4px solid var(--gold);
  border-radius:8px;
  color:#5a4a24;
  background:#fff8e7;
  font-size:.88rem;
}
.guide h2{margin-top:0}
.guide ol{margin:0;padding-left:22px}
.guide li+li{margin-top:7px}
.notice{
  margin-top:20px;
  padding:15px;
  border-radius:14px;
  color:#5a4a24;
  background:#fff8e7;
  font-weight:650;
}
footer{padding:0 16px 30px;color:var(--muted);text-align:center;font-size:.82rem}
@media(max-width:680px){
  .public-header,.public-shell{width:min(100% - 22px,820px)}
  .public-header{padding-top:14px}
  .public-shell{padding-top:0}
  .hero{padding:28px 4px 24px}
  .hero h1{font-size:clamp(2rem,12vw,3rem)}
  .panel{padding:21px 17px;border-radius:20px}
  .section-heading{gap:11px}
  .qr-layout{grid-template-columns:1fr}
  .qr-image-wrap{max-width:420px;width:100%;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .spinner{animation-duration:1.5s}
}