*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:#e9ecef;color:#2d3748;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.material-icons{font-size:22px;vertical-align:middle}

#shell{width:100%;margin:0 auto;min-height:100vh;background:#fff;position:relative}
#bar{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:1px solid #e5e7eb;font-weight:500;font-size:18px}
#bar[hidden]{display:none}
#back{position:absolute;left:6px;top:6px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
#back:hover{background:#f1f3f5}
.screen{min-height:calc(100vh - 56px);padding:0}
.screen.pad{padding:20px;background:#f8f9fa}
.bg{background-size:cover;background-position:center;position:relative}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.plain{background:#f8f9fa}
.title{font-size:30px;font-weight:700;text-align:center;margin-bottom:20px;color:#1f2937}
.title.white{color:#fff;text-shadow:-1px 1px 10px rgba(0,0,0,.75);font-size:36px}
.title.dark{color:#000;font-size:28px;margin-bottom:30px}
.title.brown{color:brown;margin-bottom:40px}
.title.red{color:red;font-size:24px;margin-bottom:30px}
.muted{color:#6c757d;text-align:center}
.card{background:#fff;border-radius:10px;padding:15px;margin-bottom:14px;box-shadow:0 2px 5px rgba(0,0,0,.1)}
.card p{line-height:1.5}

/* splash + toast + modal */
#splash{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-items:center;transition:opacity .5s}
#splash img{width:min(60vw,280px)}
#splash.hide{opacity:0;pointer-events:none}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#333;color:#fff;padding:10px 18px;border-radius:24px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;display:grid;place-items:center;padding:20px}
#modal[hidden]{display:none}
#modal .box{background:#fff;border-radius:14px;padding:22px;width:min(100%,340px)}
#modal h3{margin-bottom:8px}
#modal p{color:#555;margin-bottom:18px}
#mok{display:block;margin-left:auto;background:#8e24aa;color:#fff;padding:9px 22px;border-radius:8px;font-weight:700}

/* auth */
.auth{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:#f3e5f5;min-height:100vh}
.tabs{display:flex;background:#e0e0e0;border-radius:30px;margin-bottom:20px;box-shadow:0 2px 3px rgba(0,0,0,.2);width:min(100%,360px)}
.tabs button{flex:1;padding:15px;border-radius:30px;background:#e0e0e0;color:#fff;font-size:18px;font-weight:700}
.tabs button.active{background:#8e24aa}
.tabs button{font-size:16px;padding:14px 8px}
.admin-hint{display:block;width:100%;margin-top:14px;padding:12px 14px;text-align:left;background:#f3e5f5;border:1px dashed #8e24aa;border-radius:10px;color:#4a148c;line-height:1.6}
.admin-hint span{display:block;font-weight:700;margin-bottom:2px}
.admin-hint small{font-weight:400;color:#7b1fa2}
.admin-hint b{display:block;font-family:Consolas,monospace;font-size:15px}
.admin-hint:hover{background:#ead1f0}
.form-card{width:min(100%,420px);background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.form-card h2{font-size:28px;color:#8e24aa;text-align:center;margin-bottom:30px}
.input{display:flex;align-items:center;gap:10px;background:#f5f5f5;border:1px solid #ddd;border-radius:10px;padding:10px;margin-bottom:20px;color:#888}
.input input{flex:1;border:0;background:none;outline:0;font:inherit;font-size:16px;color:#222;min-width:0}
.input:focus-within{border-color:#8e24aa}
.btn-primary{width:100%;padding:15px;background:#8e24aa;color:#fff;border-radius:10px;font-size:18px;font-weight:700;box-shadow:0 2px 3px rgba(0,0,0,.25)}
.btn-primary:disabled{opacity:.6;cursor:wait}

/* home */
.home{display:flex;min-height:100vh}
.home-inner{width:100%;display:flex;flex-direction:column;align-items:center;padding:20px 20px 24px}
.logo{width:300px;max-width:85%;margin:70px 0 20px}
.welcome{font-size:28px;font-weight:700;margin:50px 0;text-align:center;text-shadow:2px 2px 3px #000;animation:welcome 5s linear infinite}
@keyframes welcome{0%,100%{color:#FF5733}25%{color:#33FF57}50%{color:#3357FF}75%{color:#FF33A1}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;padding:0 6%}
.pill{display:flex;align-items:center;justify-content:center;gap:10px;background:#B03052;color:#fff;padding:15px 8px;border-radius:25px;font-size:18px;font-weight:700;transition:transform .15s,filter .15s}
.pill:hover{filter:brightness(1.1);transform:translateY(-2px)}
.footer{margin-top:auto;padding-top:80px;color:#fff;font-size:14px}

/* about */
.about .title{font-size:32px;color:#333}
.section{padding:15px}
.sec-title{width:100%;display:flex;justify-content:center;align-items:center;gap:6px;font-size:18px;font-weight:700}
.sec-title .material-icons{color:#4CAF50;font-size:24px}
.cycle{animation:cycle 3s linear infinite}
@keyframes cycle{0%,100%{color:#4CAF50}33%{color:#FF5733}66%{color:#2980B9}}
.sec-text{margin-top:10px;font-size:16px;line-height:24px;color:#555}
.sec-text[hidden]{display:none}
.bottom{margin-top:30px;text-align:center}
.bottom h3{font-size:20px;color:#4CAF50;margin-bottom:10px}
.bottom p{margin-bottom:10px;color:#555;line-height:24px}
.bottom a{color:blue}

/* faculty / semester / resources */
.faculty{padding:20px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.col{display:flex;flex-direction:column;align-items:center;width:100%}
.glass{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(300px,100%);margin:5px;padding:15px;border-radius:12px;color:#fff;font-weight:700;font-size:16px;text-align:center;background:linear-gradient(135deg,rgba(139,69,19,.82),rgba(160,82,45,.82));box-shadow:0 2px 3px rgba(0,0,0,.2);backdrop-filter:blur(2px);transition:transform .15s}
.glass:hover{transform:scale(1.03)}
.glass .material-icons{font-size:40px}
.green{display:flex;flex-direction:column;align-items:center;gap:8px;width:80%;max-width:300px;margin-bottom:20px;padding:15px 30px;background:#34c759;color:#fff;font-weight:700;border-radius:10px;transition:transform .15s}
.green:hover{transform:scale(1.03)}
.green .material-icons{font-size:32px}
.grad{display:flex;align-items:center;gap:10px;width:80%;max-width:340px;margin:10px;padding:15px;border-radius:10px;color:#fff;font-size:18px;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .15s}
.grad span:last-child{flex:1;text-align:center}
.grad:hover{transform:translateY(-2px)}

/* lists */
.items{width:100%;display:flex;flex-direction:column;align-items:center}
.item{display:block;width:80%;max-width:360px;margin:10px;padding:10px;background:lightblue;color:blue;border-radius:10px;text-align:center;font-weight:700;transition:filter .15s}
a.item:hover{filter:brightness(.95)}
.item.off{opacity:.55;cursor:not-allowed}
.item small{display:block;font-weight:400;color:#335;font-size:12px}
.retry{margin-top:12px;background:#007bff;color:#fff;padding:10px 24px;border-radius:25px;font-weight:600}
.click{background:#007bff;color:#fff;padding:15px 30px;border-radius:25px;font-size:18px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.syl{text-align:center}
.syl p{font-size:18px;margin-bottom:22px;color:#000;text-shadow:0 0 6px rgba(255,255,255,.9)}

/* library / contact / map */
.lib h3{font-size:20px;margin-bottom:10px}
.lib p{margin-bottom:5px;font-size:16px}
.lib{border:1px solid #cbd5e0;box-shadow:none}
.green-l{background:#e2f0d9}.green-l h3{color:#3a7d44}
.green-m{background:#d1e7dd}.green-m h3{color:#256c50}
.red-l{background:#f8d7da}.red-l h3{color:#842029}
.contact-top{background:#e2e8f0;border:1px solid #cbd5e0;box-shadow:none}
.contact-top h3{font-size:20px;color:#2c5282;margin-bottom:10px}
.contact-top p{font-size:16px;margin-bottom:5px}
.contact{background:#f1f5f9;box-shadow:none}
.contact b{display:block;font-size:18px;color:#0d6efd;margin-bottom:5px}
.contact a{font-size:16px;color:#374151;word-break:break-all}
.contact a:hover{text-decoration:underline}
.conduct{width:100%;height:auto;margin-top:20px}
.map{height:420px;border-radius:10px;overflow:hidden;margin-top:10px;z-index:0}

/* ---------- tablet / desktop ---------- */
@media (min-width:700px){
  #bar{height:64px;font-size:20px}
  #back{top:10px;left:16px}
  .screen{min-height:calc(100vh - 64px)}
  .screen.pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-content:start;align-items:start;padding:32px max(24px,calc((100% - 1200px)/2))}
  .screen.pad>.title,.screen.pad>.map,.screen.pad>.conduct,.screen.pad>.contact-top,.screen.pad>.bottom{grid-column:1/-1}
  .screen.pad>.card{margin-bottom:0}
  .about.pad{grid-template-columns:1fr;max-width:900px;margin:0 auto;gap:12px}
  .conduct{max-width:600px;justify-self:center}
  .title{font-size:38px}
  .map{height:min(70vh,640px)}
  .auth{background:#f3e5f5 url(../assets/logo1.png) no-repeat center 24px/180px}
  .tabs,.form-card{width:min(100%,460px)}

  .home-inner{max-width:1000px;margin:0 auto}
  .logo{width:420px;margin-top:60px}
  .welcome{font-size:40px;margin:36px 0 44px}
  .grid2{grid-template-columns:repeat(3,1fr);gap:20px;padding:0}
  .pill{font-size:20px;padding:20px 10px}

  .faculty{padding:40px 24px}
  .col{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1100px;justify-items:center}
  .col{align-items:stretch}
  .glass{width:100%;margin:0;padding:26px 18px;justify-content:center}
  .green,.grad{max-width:460px}
  .grad{font-size:20px;padding:20px}
  .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:1000px;justify-items:center}
  .item{width:100%;max-width:440px;margin:8px;font-size:17px;padding:14px}
  .syl p{font-size:22px}
}
@media (min-width:1100px){
  .grid2{max-width:900px}
  .col{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}