/* Campus Pay dark glass skin. Layered over style.css; stays dark, adds frosted depth, soft highlights and blur. */
html{background:#08080a}
html body{background:transparent!important;background-image:none!important}
html body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(520px 380px at 12% 6%,rgba(225,29,46,.13),transparent 70%),radial-gradient(480px 420px at 92% 62%,rgba(150,150,170,.07),transparent 70%),radial-gradient(420px 360px at 20% 96%,rgba(225,29,46,.07),transparent 70%)}

/* surfaces */
html body .card,html body .stat{background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.026) 55%,rgba(255,255,255,.042));border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.035),0 10px 30px rgba(0,0,0,.5)}
html body .stat{border-left:3px solid #e11d2e}
html body .hero{background:radial-gradient(420px 200px at 100% 0,rgba(225,29,46,.42),transparent 62%),linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 60%),rgba(20,8,10,.55);border:1px solid rgba(255,80,92,.3);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 16px 44px rgba(0,0,0,.6)}
html body .hero::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.13),transparent 36%);pointer-events:none}
html body .note{background:linear-gradient(145deg,rgba(225,29,46,.13),rgba(225,29,46,.05));border:1px solid rgba(225,29,46,.34);border-left:3px solid #e11d2e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html body .chip{background:rgba(255,255,255,.055);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
html body .kv{border-bottom-color:rgba(255,255,255,.07)}

/* bars: frosted, iOS style */
html body .top{background:rgba(14,14,16,.58);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:inset 0 -1px 0 rgba(225,29,46,.28)}
html body .atabs{background:rgba(14,14,16,.55);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border-bottom:1px solid rgba(255,255,255,.07)}
html body .atabs a.on{background:linear-gradient(180deg,rgba(255,60,75,.26),rgba(225,29,46,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
html body .tabs{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding-bottom:0;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:rgba(18,18,21,.6);-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 40px rgba(0,0,0,.6);overflow:hidden}
html body .tabs a{border-top:0;border-radius:18px;margin:5px 2px}
html body .tabs a.on{background:linear-gradient(180deg,rgba(255,60,75,.26),rgba(225,29,46,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* buttons: glossy */
html body .btn{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
html body .btn.green{background:linear-gradient(180deg,#ff4656 0%,#e11d2e 52%,#b3121f 100%);border:1px solid rgba(255,120,130,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -10px 16px rgba(0,0,0,.2),0 8px 22px rgba(225,29,46,.36)}
html body .btn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
html body .btn.red{background:rgba(225,29,46,.07);border:1px solid rgba(225,29,46,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* inputs: inset glass */
html body input,html body select,html body textarea{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 3px rgba(0,0,0,.55);transition:border-color .15s,box-shadow .15s}
html body input:focus,html body select:focus,html body textarea:focus{border-color:rgba(255,70,86,.75);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 0 0 3px rgba(225,29,46,.2);outline:none}
html body select option{background:#17171a;color:#f3f3f4}

/* sheets and dialogs: deepest glass */
html body .modal{background:rgba(0,0,0,.52);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html body .sheet{background:linear-gradient(180deg,rgba(44,44,50,.78),rgba(18,18,21,.88));border:1px solid rgba(255,255,255,.12);border-bottom:0;-webkit-backdrop-filter:blur(34px) saturate(170%);backdrop-filter:blur(34px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 -14px 50px rgba(0,0,0,.6)}
html body .sheet::before{content:'';display:block;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:-8px auto 12px}

/* the receipt stays plain white for printing */
@media print{html body::before{display:none}}

/* browsers without blur support: solid dark surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html body .card,html body .stat,html body .tabs,html body .top,html body .atabs{background:#17171a}html body .sheet{background:#141416}}
