/* MTTC Student Portal look: bright and playful, in the MTTC website colours (blue, teal, orange, pink). Loaded after styles.css. */
body.sp{
  --sp-blue:#016BED;--sp-teal:#00A884;--sp-orange:#F59E0B;--sp-pink:#F52A62;--sp-purple:#7C4DFF;
  --display:"Poppins",ui-sans-serif,system-ui,sans-serif;--body:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --bg:#F5F8FF;--surface:#FFFFFF;--fg:#191B22;--muted:#5D6475;--line:#E3E8F2;--soft:#EEF3FF;
  --accent:#016BED;--accent-soft:#E3EEFF;--accent-ink:#FFFFFF;
  --bar:#FFFFFF;--bar-fg:#191B22;--bar-muted:#5D6475;--bar-soft:#EEF3FF;
  --ok:#0E9F6E;--bad:#E11D48;--warn:#B45309;
  --shadow:0 2px 0 rgba(25,27,34,.04),0 10px 30px -12px rgba(1,107,237,.18);
  background:var(--bg);color:var(--fg);font-family:var(--body);
  background-image:radial-gradient(circle at 100% 100%,rgba(245,42,98,.06) 0 200px,transparent 201px),radial-gradient(circle at 0 100%,rgba(0,168,132,.06) 0 160px,transparent 161px);background-attachment:fixed}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.sp{--bg:#0E1424;--surface:#161E33;--fg:#EEF2FA;--muted:#A3ADC4;--line:#26314C;--soft:#1C2742;
    --accent:#4D9BFF;--accent-soft:#1A2B4D;--bar:#121A2E;--bar-fg:#EEF2FA;--bar-muted:#A3ADC4;--bar-soft:#1C2742;--sp-blue:#4D9BFF;--sp-teal:#2DD4AC;--sp-orange:#FBBF24;--sp-pink:#FF5C8A;--sp-purple:#A78BFA;
    --ok:#34D399;--bad:#FB7185;--warn:#FBBF24}}
:root[data-theme="dark"] body.sp{--bg:#0E1424;--surface:#161E33;--fg:#EEF2FA;--muted:#A3ADC4;--line:#26314C;--soft:#1C2742;--accent:#4D9BFF;--accent-soft:#1A2B4D;--bar:#121A2E;--bar-fg:#EEF2FA;--bar-muted:#A3ADC4;--bar-soft:#1C2742}
body.sp h1,body.sp h2,body.sp h3{font-family:var(--display);letter-spacing:-.015em}
body.sp h1{font-weight:800}
body.sp .eyebrow{color:var(--sp-blue);font-weight:700}

/* Top bar: white with the four-colour stripe */
body.sp .appbar{background:var(--bar);color:var(--bar-fg);border-bottom:1px solid var(--line);box-shadow:0 6px 20px -16px rgba(25,27,34,.4)}
body.sp .appbar::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--sp-blue) 0 25%,var(--sp-teal) 25% 50%,var(--sp-orange) 50% 75%,var(--sp-pink) 75%)}
.sp-logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.sp-logo img{width:40px;height:40px;display:block;transition:transform .3s ease}
.sp-logo:hover img{transform:rotate(-8deg) scale(1.05)}
.sp-logo .wm{display:grid;line-height:1.05}
.sp-logo .wm small{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sp-logo .wm b{font-family:var(--display);font-weight:800;font-size:1.15rem}
.sp-logo .wm b span{background:linear-gradient(90deg,var(--sp-blue),var(--sp-teal));-webkit-background-clip:text;background-clip:text;color:transparent}
body.sp .who b{color:var(--fg)}
body.sp .who span{color:var(--muted)}
body.sp .iconbtn{background:var(--soft);color:var(--fg);border:0}
body.sp .avatar{background:linear-gradient(135deg,var(--sp-pink),var(--sp-orange))!important;box-shadow:0 0 0 3px var(--surface),0 0 0 5px rgba(245,42,98,.25)}

/* Tabs: colourful pills, each section in its own colour */
body.sp .tabs{gap:6px;padding-bottom:10px;scrollbar-width:none}
body.sp .tabs button{color:var(--muted);border:0;border-radius:99px;padding:8px 12px;font-size:.9rem;min-height:40px;transition:background .15s ease,color .15s ease,transform .15s ease}
body.sp .tabs button:hover{background:var(--soft);color:var(--fg)}
body.sp .tabs button[aria-current="page"]{color:#fff;background:var(--tc,var(--sp-blue));box-shadow:0 6px 14px -8px var(--tc,var(--sp-blue))}
body.sp [data-tab="home"]{--tc:var(--sp-blue)}
body.sp [data-tab="schedule"]{--tc:var(--sp-teal)}
body.sp [data-tab="news"]{--tc:var(--sp-orange)}
body.sp [data-tab="attend"]{--tc:var(--sp-pink)}
body.sp [data-tab="merit"]{--tc:#E8A200}
body.sp [data-tab="core"]{--tc:var(--sp-purple)}
body.sp [data-tab="docs"]{--tc:var(--sp-teal)}
body.sp [data-tab="results"]{--tc:var(--sp-blue)}
body.sp .bnav{background:var(--surface);border-top:1px solid var(--line)}
body.sp .bnav button[aria-current="page"]{color:var(--tc,var(--sp-blue))}
body.sp .bnav button[aria-current="page"] svg{background:var(--tc,var(--sp-blue));color:#fff;border-radius:10px;padding:4px;width:28px;height:28px;box-sizing:border-box}

/* Page heading with playful shapes */
body.sp .hero{position:relative;padding:22px 22px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
body.sp .hero::before{content:"";position:absolute;right:-36px;top:-64px;width:150px;height:150px;border-radius:50%;background:var(--sp-pink);z-index:-1}
body.sp .hero::after{content:"";position:absolute;right:150px;top:18px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid var(--sp-orange);z-index:-1;transform:rotate(-12deg)}
body.sp .hero > div{max-width:min(640px,100%)}
body.sp .hero h1 .hl{background:linear-gradient(90deg,var(--sp-blue),var(--sp-teal));-webkit-background-clip:text;background-clip:text;color:transparent}
body.sp .hero .ring{position:absolute;right:70px;bottom:-52px;width:96px;height:96px;border-radius:50%;border:16px solid var(--sp-teal);z-index:-1;box-sizing:border-box}
@media (max-width:640px){body.sp .hero{padding-right:70px}body.sp .hero::before{width:96px;height:96px;right:-34px;top:-40px}body.sp .hero::after{right:20px;top:auto;bottom:12px;border-bottom-width:22px;border-left-width:12px;border-right-width:12px}body.sp .hero .ring{display:none}}
@media (prefers-reduced-motion:no-preference){
  body.sp .hero::before{animation:spFloat 7s ease-in-out infinite}
  body.sp .hero::after{animation:spBob 5s ease-in-out infinite}
  @keyframes spFloat{50%{transform:translate(-8px,10px) scale(1.04)}}
  @keyframes spBob{50%{transform:translateY(-6px) rotate(-4deg)}}
  body.sp .card{transition:transform .18s ease,box-shadow .18s ease}
  body.sp .card:hover{transform:translateY(-2px)}}

/* Cards with a coloured top edge, rotating through the palette */
body.sp .card{border-radius:20px;border-color:var(--line);overflow:hidden}
body.sp .card.sc::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--cc,var(--sp-blue))}
body.sp .grid3 > .card:nth-child(4n+1){--cc:var(--sp-blue)}
body.sp .grid3 > .card:nth-child(4n+2){--cc:var(--sp-orange)}
body.sp .grid3 > .card:nth-child(4n+3){--cc:var(--sp-teal)}
body.sp .grid3 > .card:nth-child(4n+4){--cc:var(--sp-pink)}
body.sp .wrap > .card.sc{--cc:var(--sp-orange)}
body.sp .card h3{display:flex;align-items:center;gap:8px}
body.sp .big.num{color:var(--cc,var(--sp-blue))}
body.sp .empty{border-radius:20px;border-color:color-mix(in srgb,var(--sp-blue) 30%,var(--line));background:color-mix(in srgb,var(--sp-blue) 4%,transparent)}
body.sp .banner{border-radius:16px}
body.sp .tbl{border-radius:18px}
body.sp .bar{height:14px;border-radius:99px}
body.sp .bar .fill{border-radius:99px;background:linear-gradient(90deg,var(--sp-pink),var(--sp-orange),var(--sp-teal))!important}

/* Buttons: bright orange like the website's "Apply now" */
body.sp .btn{border-radius:99px;font-weight:700;background:var(--sp-orange);color:#191B22;border:0;box-shadow:0 4px 0 #C77F00}
body.sp .btn:hover{filter:brightness(1.05)}
body.sp .btn:active{transform:translateY(2px);box-shadow:0 2px 0 #C77F00}
body.sp .btn.ghost{background:var(--surface);color:var(--fg);border:1.5px solid var(--line);box-shadow:none}
body.sp .btn.gbtn{background:var(--surface);color:var(--fg);border:1.5px solid var(--line);box-shadow:0 4px 0 var(--line)}

/* Sign-in page */
body.sp .login-wrap{background:var(--bg);position:relative;overflow:hidden;isolation:isolate}
body.sp .login-wrap::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--sp-pink);right:-160px;top:-160px;z-index:-1}
body.sp .login-wrap::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;border:56px solid var(--sp-teal);left:-130px;bottom:-130px;z-index:-1;box-sizing:border-box}
body.sp .login{overflow:hidden;border-radius:28px;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(1,107,237,.35);position:relative}
body.sp .login::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--sp-blue) 0 25%,var(--sp-teal) 25% 50%,var(--sp-orange) 50% 75%,var(--sp-pink) 75%)}
body.sp .login h1{font-size:2.1rem;line-height:1.1}
body.sp .login h1 span{position:relative;white-space:nowrap}
body.sp .login h1 span::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;border-radius:6px;background:var(--sp-orange)}
body.sp .login .sp-tri{position:absolute;right:26px;top:26px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid var(--sp-orange)}
body.sp .login .eyebrow{color:var(--sp-blue)}
body.sp .chips{display:flex;flex-wrap:wrap;gap:6px}
body.sp .chips span{font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--soft);color:var(--fg)}
body.sp .chips span:nth-child(4n+1){background:#E3EEFF;color:#0B4FB3}
body.sp .chips span:nth-child(4n+2){background:#DDF7EF;color:#04745C}
body.sp .chips span:nth-child(4n+3){background:#FFF1D6;color:#8A5300}
body.sp .chips span:nth-child(4n+4){background:#FFE3EB;color:#B0123F}