/* Auth pages (login / register): black + orange glass, matches the landing page. No icons, no emojis. */
body.auth,.auth-modal{--gold:#ff9900;--gold-2:#e68a00;--green:#ffb84d;--ink:#f5f5f5;--mute:#a3a3a3;--serif:Georgia,"Times New Roman",serif;--line:rgba(255,255,255,.13);--sans:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif}
:where(body.auth *,.auth-modal *){box-sizing:border-box;margin:0}
html:has(body.auth){background:#000000}
body.auth{min-height:100vh;color:var(--ink);font-family:var(--sans);line-height:1.5;overflow-x:hidden;background:#000000}
body.auth a,.auth-modal a{color:inherit;text-decoration:none}

/* Background */
.auth-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 60% at 50% 0,#1a1a1a 0,#000000 62%)}
.auth-bg svg{position:absolute;inset:0;width:100%;height:100%}
.auth-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.7) 100%);pointer-events:none}
.rb{transform-box:fill-box;transform-origin:center}
.rb-a{animation:driftA 24s ease-in-out infinite alternate}
.rb-b{animation:driftB 19s ease-in-out infinite alternate}
.rb-c{animation:driftA 27s ease-in-out infinite alternate-reverse}
.rb-d{animation:driftB 30s ease-in-out infinite alternate-reverse}
@keyframes driftA{from{transform:translate(-50px,10px) rotate(-.8deg)}to{transform:translate(50px,-24px) rotate(.8deg)}}
@keyframes driftB{from{transform:translate(40px,-14px) scale(1.02)}to{transform:translate(-44px,22px) scale(.99)}}

/* Top bar */
.auth-top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 4vw;font-size:.82rem}
.auth-brand{font-weight:700;letter-spacing:.04em}
.auth-home{color:var(--mute);border:1px solid var(--line);padding:.35rem .9rem;border-radius:99px;transition:.2s}
.auth-home:hover,.auth-brand:hover{color:var(--gold)}
.auth-home:hover{border-color:var(--gold)}

/* Stage + card */
.auth-stage{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:5.5rem 1rem 2.5rem}
.auth-card{position:relative;width:min(100%,460px);padding:2rem 2rem 1.6rem;border-radius:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);
  animation:cardIn .75s cubic-bezier(.2,.8,.2,1) both}
.auth-card.wide{width:min(100%,520px)}
/* beveled corner pieces (top-left, bottom-right) */
.auth-card::before,.auth-card::after{content:"";position:absolute;width:44px;height:44px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.auth-card::before{top:-7px;left:-7px;border-radius:26px 8px 8px 8px}
.auth-card::after{bottom:-7px;right:-7px;border-radius:8px 8px 26px 8px}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* Logo glyph shown while the card swaps between Sign In / Create Account */
.auth-glyph{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:16px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);transform:rotate(45deg);opacity:0;pointer-events:none;z-index:3}
.auth-glyph::after{content:"";position:absolute;left:50%;top:18%;bottom:18%;width:2px;margin-left:-1px;background:rgba(255,255,255,.55);border-radius:2px}
.auth-card .auth-glyph{animation:glyphIn .9s ease both}
.auth-card.switching .auth-glyph{animation:glyphOut .55s ease forwards}
@keyframes glyphIn{0%{opacity:1;transform:rotate(45deg) scale(1)}55%{opacity:1}100%{opacity:0;transform:rotate(45deg) scale(.7)}}
@keyframes glyphOut{from{opacity:0;transform:rotate(0) scale(.7)}to{opacity:1;transform:rotate(45deg) scale(1)}}

.auth-inner{animation:innerIn .55s .4s ease both}
.auth-card.switching .auth-inner{animation:innerOut .3s ease forwards}
@keyframes innerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes innerOut{to{opacity:0;transform:scale(.98)}}

/* Typography */
.auth-title{font-family:var(--serif);font-size:2.2rem;font-weight:400;letter-spacing:-.02em;line-height:1.1;margin-bottom:.35rem}
.auth-title span{font-style:italic;background:linear-gradient(90deg,var(--gold),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{color:var(--mute);font-size:.86rem;margin-bottom:1.4rem}
.auth-role{display:inline-block;margin-left:.4rem;padding:.1rem .6rem;border:1px solid rgba(255,153,0,.45);color:var(--gold);border-radius:99px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}

/* Fields */
.auth-card label{display:block;font-size:.8rem;font-weight:600;color:#f5f5f5;margin-bottom:.4rem}
.field{position:relative;margin-bottom:1rem}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number]{width:100%;height:46px;padding:0 1rem;border-radius:12px;background:rgba(0,0,0,.38);border:1px solid var(--line);color:#fff;font:500 .9rem var(--sans);outline:none;transition:.2s}
.field.has-toggle input{padding-right:4.4rem}
.field input::placeholder{color:#777777}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,153,0,.15);background:rgba(0,0,0,.5)}
.field input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #111111 inset;caret-color:#fff}
.field .hint{display:block;margin-top:.3rem;color:var(--mute);font-size:.74rem}
.toggle-pw{position:absolute;right:.5rem;bottom:.5rem;height:30px;padding:0 .6rem;border:0;border-radius:8px;background:transparent;color:var(--mute);font:700 .68rem var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.2s}
.toggle-pw:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.auth-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 .85rem}
@media(max-width:520px){.auth-grid-2{grid-template-columns:1fr}.auth-card{padding:1.6rem 1.25rem 1.3rem}}

.captcha{margin-bottom:1.1rem;padding:.9rem 1rem;border:1px dashed rgba(255,153,0,.4);border-radius:14px;background:rgba(255,153,0,.05)}
.captcha p{font-size:.84rem;color:var(--mute);margin-bottom:.6rem}
.captcha p strong{color:#fff;font-size:1rem;margin-left:.3rem}
.captcha .field{margin:0}
.check{display:flex;align-items:flex-start;gap:.55rem;margin:.2rem 0 1.1rem;font-size:.82rem;color:var(--mute)}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin-top:.1rem;border-radius:5px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);cursor:pointer;display:grid;place-content:center;transition:.2s}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{content:"";width:9px;height:5px;border-left:2px solid #000000;border-bottom:2px solid #000000;transform:rotate(-45deg) translate(1px,-1px)}
.check input:focus-visible{box-shadow:0 0 0 3px rgba(255,153,0,.25)}
.check label{margin:0;font-weight:500;color:var(--mute);cursor:pointer}

/* Button */
.btn-gold{display:block;width:100%;height:48px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffc266,var(--gold));color:#000000;font:800 .95rem var(--sans);cursor:pointer;
  box-shadow:0 8px 30px rgba(255,153,0,.32),inset 0 1px 0 rgba(255,255,255,.65);transition:.2s}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 38px rgba(255,153,0,.45),inset 0 1px 0 rgba(255,255,255,.65)}
.btn-gold:active{transform:none}
.btn-gold[disabled]{opacity:.65;cursor:progress;transform:none}

.auth-switch{text-align:center;margin-top:1.15rem;font-size:.84rem;color:var(--mute)}
.auth-switch a{color:var(--gold);font-weight:700;margin-left:.3rem}
.auth-switch a:hover{text-decoration:underline}

/* Alerts */
.auth-alert{margin-bottom:1.1rem;padding:.75rem .95rem;border-radius:12px;font-size:.84rem;border:1px solid var(--line);border-left-width:3px;background:rgba(255,255,255,.05)}
.auth-alert strong{margin-right:.35rem;font-size:.7rem;letter-spacing:.08em}
.auth-alert.error{border-color:rgba(255,107,122,.5);background:rgba(255,107,122,.09);color:#ffc7cd}
.auth-alert.success{border-color:rgba(125,255,79,.45);background:rgba(125,255,79,.08);color:#d2ffbf}
.auth-alert.warning{border-color:rgba(255,184,77,.5);background:rgba(255,184,77,.09);color:#ffdfa8}
.auth-alert.info{border-color:rgba(255,153,0,.4);background:rgba(255,153,0,.07);color:#ffe0b3}

/* Demo credentials */
.auth-demo{width:min(100%,460px);padding:.85rem 1.1rem;border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.76rem;color:var(--mute);animation:innerIn .6s .7s ease both}
.auth-demo b{display:block;margin-bottom:.35rem;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#bdbdbd}
.auth-demo code{color:var(--gold);background:none}
.auth-demo .cols{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:520px){.auth-demo .cols{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.auth-inner,.auth-card,.auth-demo{opacity:1!important}}

/* Leave room for the beveled corner piece */
.auth-title,.auth-sub{margin-left:.9rem}
@media(max-width:520px){.auth-title,.auth-sub{margin-left:.6rem}}

/* ===== Modal mode (opened from index.php): glass card over the blurred landing page ===== */
.auth-modal{position:fixed;inset:0;z-index:200;display:flex;padding:1rem;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;font-family:var(--sans);color:var(--ink);line-height:1.5}
.auth-modal.open{opacity:1;visibility:visible}
.auth-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}
.auth-modal-body{position:relative;margin:auto;width:100%;display:flex;justify-content:center;padding:1.5rem 0}
.auth-modal .auth-card{margin:0;transition:width .5s cubic-bezier(.2,.8,.2,1);background:linear-gradient(160deg,rgba(27,27,27,.72),rgba(8,8,8,.68))}
.auth-modal:not(.open) .auth-card{animation:none}
.auth-close{position:absolute;top:1rem;right:1.1rem;z-index:4;height:28px;padding:0 .75rem;border:1px solid var(--line);border-radius:99px;background:rgba(0,0,0,.3);color:var(--mute);font:700 .66rem var(--sans);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:.2s}
.auth-close:hover{color:var(--gold);border-color:var(--gold)}
.auth-card.is-loading .auth-inner{opacity:.55;pointer-events:none}

/* Student / Administrator login tabs */
.auth-tabs{display:flex;gap:4px;padding:4px;margin-bottom:1.1rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(0,0,0,.28)}
.auth-tabs a{flex:1;text-align:center;padding:.55rem .5rem;border-radius:10px;font-size:.85rem;font-weight:600;color:var(--mute);text-decoration:none;transition:.25s}
.auth-tabs a:hover{color:var(--ink)}
.auth-tabs a.on{color:#000000;background:linear-gradient(180deg,#ffc266,var(--gold));box-shadow:0 4px 18px rgba(255,153,0,.28)}

/* Logo (white badge so the dark-blue artwork stays readable on the dark theme) */
.brand-logo{display:inline-block;width:42px;height:42px;object-fit:contain;padding:0;border-radius:12px;background:#fff;box-shadow:0 4px 16px rgba(255,153,0,.22);vertical-align:middle;margin-right:.65rem}
.nav-brand,.auth-brand,.univ-header-brand{display:inline-flex;align-items:center}
.auth-logo{display:block;width:150px;height:150px;object-fit:contain;margin:0 auto 1rem;padding:0;border-radius:24px;background:#fff;box-shadow:0 10px 34px rgba(255,153,0,.25)}
@media(max-height:760px){.auth-logo{width:104px;height:104px;margin-bottom:.7rem;border-radius:18px}}

/* Separate Student / Administrator login badge (replaces the old tab switch) */
.auth-role-badge{display:inline-block;margin:0 0 .9rem;padding:.38rem .9rem;border:1px solid rgba(255,153,0,.35);border-radius:999px;background:rgba(255,153,0,.08);color:var(--gold);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

/* Role chooser (login.php) + back link on the login forms */
.role-list{display:grid;gap:.75rem;margin:.4rem 0 .3rem}
.role-btn{display:block;padding:1rem 1.2rem;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.28);text-align:left;transition:.25s}
.role-btn strong{display:block;font-size:1.02rem;font-weight:800;color:var(--ink)}
.role-btn small{display:block;margin-top:.15rem;font-size:.8rem;color:var(--mute)}
.role-btn:hover,.role-btn:focus-visible{border-color:var(--gold);background:linear-gradient(180deg,rgba(255,153,0,.16),rgba(255,153,0,.05));transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,153,0,.18);outline:none}
.role-btn:hover strong{color:var(--gold)}
.auth-back{display:inline-block;margin-bottom:.8rem;font-size:.8rem;font-weight:700;color:var(--mute);transition:.2s}
.auth-back:hover{color:var(--gold)}

/* =====================================================================
   THEME: Black + orange (charcoal card, orange pill buttons)
   Overrides the base theme above for login / register / role selection.
   Optional: drop a campus photo at assets/img/campus-bg.jpg to use it as the background.
   ===================================================================== */
body.auth,.auth-modal{--gold:#ff9900;--gold-2:#ffb84d;--green:#ffb84d;--ink:#ffffff;--mute:#a3a3a3;--line:rgba(255,153,0,.28);--sans:Arial,"Segoe UI",system-ui,-apple-system,sans-serif}
html:has(body.auth){background:#000}
body.auth{background:#000}

/* Background: black with a soft orange glow and an orange line at the bottom */
.auth-bg{background:url(../img/campus-bg.jpg) center/cover no-repeat,radial-gradient(ellipse at 50% 105%,rgba(255,153,0,.24),transparent 60%),linear-gradient(180deg,#000 0%,#0b0b0b 60%,#141414 100%)}
.auth-bg svg{display:none}
.auth-bg::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:linear-gradient(90deg,transparent,#ff9900 30%,#ffb84d 50%,#ff9900 70%,transparent);box-shadow:0 0 30px rgba(255,153,0,.6);pointer-events:none}

/* Top bar */
.auth-brand{color:var(--ink)}
.auth-home{color:var(--gold);border-color:rgba(255,153,0,.4);background:rgba(255,255,255,.06)}
.auth-home:hover,.auth-brand:hover{color:var(--gold-2)}
.auth-home:hover{border-color:var(--gold);background:rgba(255,153,0,.15)}

/* Card */
.auth-card{border-radius:20px;background:rgba(20,20,20,.9);border:1px solid rgba(255,153,0,.28);
  backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 40px rgba(255,153,0,.08)}
.auth-card::before,.auth-card::after{display:none}
.auth-glyph{border-color:rgba(255,153,0,.4);background:rgba(255,255,255,.06)}
.auth-glyph::after{background:var(--gold)}
.auth-logo{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 30px rgba(255,153,0,.18)}
.brand-logo{box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* Typography */
.auth-title,.auth-sub{margin-left:0;text-align:center}
.auth-title{font-family:var(--sans);font-size:1.7rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.auth-title span{font-style:normal;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--gold)}
.auth-sub{color:var(--mute)}
.auth-card label{color:var(--ink)}

/* Fields */
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number]{background:#0f0f0f;border:1px solid rgba(255,153,0,.3);color:var(--ink)}
.field input::placeholder{color:#777}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,153,0,.2);background:#000}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #0f0f0f inset;caret-color:var(--ink)}
.toggle-pw{color:var(--mute)}
.toggle-pw:hover{color:var(--gold);background:rgba(255,153,0,.1)}
.captcha{border-color:rgba(255,153,0,.4);background:rgba(255,153,0,.06)}
.captcha p strong{color:var(--ink)}
.check input{border-color:rgba(255,153,0,.45);background:#0f0f0f}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{border-left-color:#000;border-bottom-color:#000}
.check input:focus-visible{box-shadow:0 0 0 3px rgba(255,153,0,.28)}

/* Buttons: orange pills with black text */
.btn-gold{height:52px;border-radius:999px;background:#ff9900;color:#000;box-shadow:0 8px 20px rgba(255,153,0,.3)}
.btn-gold:hover{background:#ffad33;filter:none;box-shadow:0 12px 26px rgba(255,153,0,.45)}
.role-btn{text-align:center;padding:.95rem 1.2rem;border-radius:999px;border:0;background:#ff9900;box-shadow:0 6px 16px rgba(255,153,0,.28)}
.role-btn strong{color:#000;font-size:1.05rem}
.role-btn small{color:rgba(0,0,0,.72)}
.role-btn:hover,.role-btn:focus-visible{background:#ffad33;border:0;transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,153,0,.4)}
.role-btn:hover strong{color:#000}
.auth-back{color:var(--gold)}
.auth-back:hover{color:var(--gold-2);text-decoration:underline}
.auth-role-badge{display:block;width:max-content;margin:0 auto .9rem;border-color:rgba(255,153,0,.4);background:rgba(255,153,0,.1);color:var(--gold)}
.auth-switch a{color:var(--gold)}

/* Alerts */
.auth-alert{background:rgba(255,255,255,.06)}
.auth-alert.error{border-color:rgba(255,107,122,.55);background:rgba(255,107,122,.1);color:#ffc7cd}
.auth-alert.success{border-color:rgba(125,255,79,.45);background:rgba(125,255,79,.08);color:#d2ffbf}
.auth-alert.warning{border-color:rgba(255,184,77,.5);background:rgba(255,184,77,.09);color:#ffdfa8}
.auth-alert.info{border-color:rgba(255,153,0,.45);background:rgba(255,153,0,.08);color:#ffd9a0}

/* Modal on the landing page: dark backdrop + dark card */
.auth-modal-backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.auth-modal .auth-card{background:rgba(20,20,20,.96)}
.auth-close{background:rgba(255,255,255,.08);color:var(--gold);border-color:rgba(255,153,0,.4)}
.auth-close:hover{color:#000;background:var(--gold);border-color:var(--gold)}

/* links inside the card keep the orange accent (beats the generic "a{color:inherit}" reset) */
body.auth .auth-switch a,.auth-modal .auth-switch a,body.auth .auth-back,.auth-modal .auth-back{color:var(--gold)}
body.auth .auth-back:hover,.auth-modal .auth-back:hover{color:var(--gold-2)}
body.auth .role-btn,.auth-modal .role-btn{color:#000}