:root{
  --ink:#000; --paper:#FFF6E9; --white:#fff;
  --yellow:#FFC900; --pink:#FF90E8; --green:#00DC82; --blue:#7DD6FF; --red:#FF5C5C;
  --shadow:5px 5px 0 #000; --shadow-sm:3px 3px 0 #000; --shadow-lg:8px 8px 0 #000;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Public Sans',system-ui,sans-serif; background:var(--paper); color:#111;
  min-height:100vh;
}
h1,h2,h3,.big,.logo-text{font-family:'Bricolage Grotesque','Public Sans',sans-serif}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(#00000010 1px,transparent 1px),linear-gradient(90deg,#00000010 1px,transparent 1px);
  background-size:28px 28px;}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px;position:relative;z-index:1}

/* header */
.nb-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:3px solid #000}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.logo{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer}
.logo-mark{background:#000;color:var(--yellow);font-weight:800;font-size:20px;padding:8px 10px;border:3px solid #000;box-shadow:var(--shadow-sm)}
.logo-text{font-size:22px;font-weight:800}
.logo-text b{color:#7a5cff}
.header-right{display:flex;align-items:center;gap:10px}
.pill{font-size:11px;font-weight:800;border:2px solid #000;padding:5px 10px;letter-spacing:.06em}
.pill-black{background:#000;color:#fff}
.marquee{border-top:3px solid #000;background:var(--yellow);overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;padding:6px 0;font-weight:800;font-size:12px;letter-spacing:.08em;animation:mq 22s linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* buttons / inputs */
.nb-btn{background:var(--yellow);border:3px solid #000;box-shadow:var(--shadow-sm);
  font-weight:800;padding:10px 16px;cursor:pointer;transition:all 100ms cubic-bezier(.4,0,.2,1);font-size:14px}
.nb-btn:hover{transform:translate(3px,3px);box-shadow:none;background:#000;color:#fff}
.nb-btn:active{scale:.95}
.nb-btn.small{padding:7px 12px;font-size:12px}
.nb-btn.ghost{background:#fff}
.nb-input{width:100%;border:3px solid #000;padding:11px 12px;font-weight:700;font-size:15px;background:#fff;box-shadow:var(--shadow-sm);outline:none}
.nb-input:focus{background:#FFF3BF}
select.nb-input{cursor:pointer}
label{font-size:12px;font-weight:800;letter-spacing:.05em;display:block;margin-bottom:14px}
label input, label select{margin-top:6px}

/* views */
.view{display:none;padding:26px 0 40px}
.view.active{display:block}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin:14px 0 20px}
.hero h1{font-size:clamp(44px,7vw,76px);line-height:.95;margin:6px 0 12px;font-weight:800}
.hl{background:var(--pink);border:3px solid #000;padding:0 10px;box-shadow:var(--shadow-sm);display:inline-block}
.lede{font-size:17px;font-weight:600;max-width:480px}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tag{border:2px solid #000;font-size:11px;font-weight:800;padding:5px 10px}
.t-yellow{background:var(--yellow)} .t-pink{background:var(--pink)} .t-green{background:var(--green)}
.hero-card{padding:18px}
.hero-card ol{margin:10px 0;padding-left:18px;font-weight:700}
.stamp{display:inline-block;background:#000;color:#fff;font-weight:800;padding:6px 12px;margin-top:8px;transform:rotate(-3deg)}

/* cards */
.nb-card{background:#fff;border:3px solid #000;box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.nb-card.clickable{cursor:pointer;text-align:left;width:100%;font:inherit;transition:all 100ms}
.nb-card.clickable:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.nb-card.clickable:active{transform:translate(4px,4px);box-shadow:none}
.nb-card.pink{background:#FFE3F6} .nb-card.yellow{background:#FFF0B3}
.nb-card.green{background:#D3FFE6} .nb-card.blue{background:#DDF3FF}
.nb-card.dark{background:#000;color:#fff}
.nb-card.dark .lbl{color:var(--yellow)}
.card-emoji{width:52px;height:52px;border:3px solid #000;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;background:#fff;box-shadow:var(--shadow-sm);margin-bottom:12px}
.nb-card h3{margin:0 0 8px;font-size:24px;font-weight:800}
.nb-card p{margin:0 0 14px;font-weight:500;color:#333}
.nb-card.dark p{color:#ddd}
.go{font-weight:800;border-bottom:3px solid #000}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.view-head h2{font-size:clamp(26px,4vw,38px);margin:10px 0 4px}
.view-head p{font-weight:600;color:#444;margin:0 0 16px}
.kicker{font-size:12px;border:2px solid #000;padding:4px 8px;margin-right:8px;vertical-align:middle}
.k-pink{background:var(--pink)} .k-yellow{background:var(--yellow)} .k-green{background:var(--green)} .k-blue{background:var(--blue)}

.nb-alert{border:3px solid #000;background:#fff;box-shadow:var(--shadow-sm);padding:12px 14px;font-weight:600;margin:14px 0}
.nb-alert.warn{background:#FFF0B3}
.x{background:#000;color:#fff;border:none;font-weight:800;cursor:pointer;padding:2px 8px;margin-left:8px}
.hidden{display:none!important}

/* subject */
.form3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.formula{background:#000;color:var(--yellow);font-weight:700;padding:10px 12px;margin:8px 0;font-size:13px}
.formula.light{background:#222;color:#fff;border:2px solid var(--yellow)}
.result{border:3px solid #000;padding:16px;background:#F6F6F6;margin-top:12px;font-weight:700}
.result .grade{font-size:44px;font-weight:800}
.badge{display:inline-block;border:3px solid #000;padding:4px 12px;font-weight:800;box-shadow:var(--shadow-sm)}

/* sgpa */
.cgpa{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#000!important;color:#fff;flex-wrap:wrap}
.lbl{font-size:12px;font-weight:800;letter-spacing:.08em}
.big{font-size:56px;font-weight:800;line-height:1}
.sub{font-size:13px;font-weight:600;opacity:.85;margin-top:6px}
.cgpa-actions{display:flex;gap:10px;flex-wrap:wrap}
.sem{border:3px solid #000;background:#fff;box-shadow:var(--shadow);margin-bottom:16px}
.sem-head{display:flex;justify-content:space-between;align-items:center;background:var(--yellow);border-bottom:3px solid #000;padding:10px 14px;gap:10px;flex-wrap:wrap}
.sem-head input{border:3px solid #000;font-weight:800;padding:6px 10px;font-size:16px;max-width:220px}
.sgpa-pill{background:#000;color:#fff;font-weight:800;padding:6px 12px}
.course{border-top:3px solid #000;padding:14px;display:grid;gap:10px}
.course.detained{background:#FFE0E0}
.course-top{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.toggles{display:flex;gap:8px;flex-wrap:wrap}
.tgl{border:2px solid #000;background:#fff;font-weight:800;font-size:11px;padding:6px 10px;cursor:pointer}
.tgl.on{background:#000;color:#fff}
.fail{border:2px solid #000;background:var(--red);color:#000;font-weight:800;font-size:12px;padding:4px 8px;display:inline-block}
.okbox{border:2px solid #000;background:var(--green);font-weight:800;font-size:12px;padding:4px 8px;display:inline-block}

/* target */
.rowline{display:flex;gap:10px;align-items:end}
.grow{flex:1}
.nb-input.big{font-size:22px;border-width:3px}
.hint{font-size:12px;font-weight:700;background:#FFF0B3;border:2px solid #000;padding:6px 8px;margin:-6px 0 12px}
.tmsg{font-weight:800;margin-top:8px}
.tmsg.easy{color:var(--green)} .tmsg.hard{color:var(--yellow)} .tmsg.bad{color:var(--red)}

/* attendance */
.att-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.targetbox{border:3px solid #000;padding:8px 10px;background:var(--yellow);min-width:130px}
.att-btns{display:flex;gap:8px}
.how{margin-top:10px;font-weight:600}.ok{color:#067a3d}.bad{color:#c00}
.att-card{border:3px solid #000;background:#fff;box-shadow:var(--shadow-sm);padding:14px;margin-bottom:12px}
.att-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:10px 0}
.att-msg{font-weight:800;border:2px solid #000;padding:6px 10px;display:inline-block}
.att-msg.safe{background:var(--green)} .att-msg.danger{background:var(--red);color:#fff}
.stepper{display:flex;gap:8px}
.stepper button{flex:1}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal-box{background:#fff;border:3px solid #000;box-shadow:var(--shadow-lg);max-width:640px;width:100%}
.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #000;background:var(--pink);padding:12px 16px}
.modal-body{padding:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;border-top:3px solid #000;padding:12px 16px;background:#F6F6F6}
.steps{font-weight:600;margin:0 0 10px 18px}
kbd{border:2px solid #000;background:#fff;padding:1px 6px;font-weight:800;box-shadow:2px 2px 0 #000}
textarea{width:100%;min-height:140px;border:3px solid #000;padding:10px;font-family:monospace;font-size:12px;box-shadow:var(--shadow-sm)}
footer{border-top:3px solid #000;background:#fff;padding:16px 0;font-weight:600;margin-top:20px;font-size:14px;line-height:1.6}
.footer-inner{display:flex;flex-direction:column;gap:6px}
.footer-line{overflow-wrap:anywhere}
.footer-sub{opacity:.7}
footer a{color:#000;background:var(--yellow);border:2px solid #000;padding:1px 6px;font-weight:800;text-decoration:none;box-shadow:2px 2px 0 #000;white-space:nowrap}
footer a:hover{background:#000;color:var(--yellow)}

/* mukesh actor */
.mukesh-polaroid{background:#fff;border:3px solid #000;box-shadow:var(--shadow-sm);padding:8px 8px 10px;margin:12px 0 4px;max-width:340px}
.mukesh-polaroid img{width:100%;height:auto;display:block;border:3px solid #000;aspect-ratio:16/9;object-fit:cover}
.mukesh-polaroid.tall img{aspect-ratio:9/14;max-height:300px}
.mukesh-polaroid figcaption{font-size:12px;font-weight:700;padding-top:8px;line-height:1.4}
.mukesh-polaroid.tilt-l{transform:rotate(-2deg)}
.mukesh-polaroid.tilt-r{transform:rotate(2deg)}
.mukesh-polaroid.small{max-width:100%}
.filmstrip{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.filmstrip .mukesh-polaroid{margin:0;background:#FFFDF4}
.mukesh-inline{display:flex;gap:12px;align-items:center;border:3px solid #000;background:#FFFDF4;box-shadow:var(--shadow-sm);padding:10px;margin:14px 0}
.mukesh-inline img{width:110px;height:110px;object-fit:cover;border:3px solid #000;flex-shrink:0}
.mukesh-inline figcaption{font-size:13px;font-weight:600;line-height:1.45}
.mukesh-inline.on-dark{background:#1a1a1a;color:#fff}
.mukesh-inline.on-dark img{object-position:top}
.footer-cast{display:flex;align-items:center;gap:8px}
.footer-cast img{width:34px;height:34px;object-fit:cover;border:2px solid #000}

@media(max-width:760px){
  .filmstrip{grid-template-columns:1fr}
  .mukesh-inline img{width:84px;height:84px}
}
  .hero,.grid2,.form3,.course-top,.att-row{grid-template-columns:1fr}
  .big{font-size:44px}
  .header-right .pill{display:none}
  .cgpa{flex-direction:column;align-items:stretch}
}