/* =============================================================
   HCC Theme - Holy Cross College (Autonomous), Tiruchirappalli
   Colour theme taken from the COLLEGE LOGO (navy blue + gold)
   ============================================================= */
:root {
    --pri:#12386f; --pri2:#1e4fa3; --navy:#001a6e;
    --dark:#0a2246; --darker:#061531; --btn:#1e4fa3;
    --bg:#eef2f8; --card:#ffffff; --soft:#e9eff8;
    --line:#cfd9ea; --txt:#1a1a2e; --muted:#525368;
    --gold:#c9a227; --gold2:#e3bc4f; --err:#b3261e; --ok:#1b7f3b;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:"DM Sans","Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--txt); min-height:100vh; }

/* ============ HCC SITE HEADER ============ */
.hccnav { background:#fff; display:flex; align-items:center; justify-content:space-between;
    padding:8px 22px; border-bottom:3px solid var(--gold); box-shadow:0 2px 10px rgba(10,34,70,.12);
    position:sticky; top:0; z-index:40; flex-wrap:wrap; }
.hccnav .brand { display:flex; align-items:center; gap:14px; text-decoration:none; }
.hccnav .brand img { height:64px; width:auto; }
.hccnav .bname { font-family:Georgia,"Times New Roman",serif; color:var(--navy); line-height:1.15; }
.hccnav .bname b { display:block; font-size:20px; letter-spacing:1.2px; color:var(--dark); }
.hccnav .bname small { font-size:11.5px; color:var(--muted); letter-spacing:.4px; }
.hmenu { display:flex; flex-wrap:wrap; gap:2px; }
.hmenu a { color:#1a1a2e; font-weight:600; font-size:13.5px; text-decoration:none; padding:9px 12px; border-radius:8px; }
.hmenu a:hover { color:var(--navy); background:rgba(0,26,110,.06); }

/* ============ PANEL STRIP ============ */
.panelstrip { background:linear-gradient(90deg,var(--dark),var(--pri2)); color:#fff; padding:15px 22px;
    background-size:220% 220%; animation:gradmove 9s ease infinite, fadeUp .5s ease both; }
.panelstrip b { font-size:18px; }
.panelstrip small { display:block; font-size:12px; opacity:.92; margin-top:3px; }
.panelstrip .glow { color:#ffe9a8; }

.wrap { max-width:980px; margin:24px auto; padding:0 14px 36px; }
.wrap.narrow { max-width:470px; }
.wrap.wide { max-width:1120px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:18px;
    box-shadow:0 1px 4px rgba(10,34,70,.07); animation:fadeUp .45s ease both; }
.card:nth-of-type(2) { animation-delay:.07s; } .card:nth-of-type(3) { animation-delay:.14s; }
.card:nth-of-type(4) { animation-delay:.21s; } .card:nth-of-type(5) { animation-delay:.28s; }
h2 { font-size:18px; margin-bottom:12px; color:var(--dark); }
h3 { font-size:15px; margin:16px 0 8px; }
p { font-size:14px; line-height:1.5; }
label { display:block; font-size:13px; font-weight:600; margin:12px 0 5px; color:var(--dark); }
input[type=text], input[type=password], input[type=number], select, textarea {
    width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px; font-size:15px; background:#fff; color:var(--txt); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--pri2); box-shadow:0 0 0 3px rgba(30,79,163,.14); }
textarea { min-height:86px; resize:vertical; }
input[readonly] { background:var(--soft); color:var(--dark); font-weight:600; }
.row3 { display:flex; gap:10px; }
.row3 > div { flex:1; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--btn); color:#fff; border:0;
    border-radius:9px; padding:11px 20px; font-size:15px; font-weight:700; cursor:pointer; margin-top:16px; margin-right:8px;
    text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { background:var(--pri2); transform:translateY(-2px); box-shadow:0 8px 18px rgba(10,34,70,.18); }
.btn:active { transform:translateY(0); }
.btn.sec { background:var(--soft); color:var(--dark); border:1px solid var(--line); }
.btn.sec:hover { background:#dde7f5; }
.btn.dark { background:var(--dark); }
.btn.danger { background:var(--err); }
.btn.sm { padding:8px 14px; font-size:13px; margin-top:0; }
.btn.xs { padding:4px 10px; font-size:12px; margin-top:0; }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.alert { border-radius:10px; padding:12px 15px; font-size:14px; margin-bottom:14px; border:1px solid transparent; animation:fadeUp .3s ease both; }
.alert.err { background:#fdecea; color:var(--err); border-color:#f3c2bd; }
.alert.ok { background:#e9f6ec; color:var(--ok); border-color:#bfe3c8; }
.alert.info { background:var(--soft); color:var(--dark); border-color:var(--line); }
.muted { color:var(--muted); font-size:13px; line-height:1.55; }
.kv { width:100%; border-collapse:collapse; }
.kv td { padding:9px 6px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top; }
.kv td:first-child { width:38%; color:var(--muted); font-weight:600; }
.badge { display:inline-block; background:var(--soft); color:var(--dark); border:1px solid var(--line); border-radius:20px; padding:5px 14px; font-size:13px; font-weight:600; }
.badge.red { background:#fdecea; color:var(--err); border-color:#f3c2bd; }
.badge.green { background:#e9f6ec; color:var(--ok); border-color:#bfe3c8; }
.badge.gold { background:#fff8e1; color:#7a5c00; border-color:#ead9a0; }
.qbox { border:1px solid var(--line); border-radius:10px; padding:15px; margin-top:12px; background:var(--soft); animation:fadeUp .35s ease both; }
.qbox .qno, .qno { font-weight:700; color:var(--dark); margin-right:6px; }
.opt { margin:7px 0 0 10px; font-size:14px; }
.opt .letter, .opt span.letter { display:inline-block; min-width:70px; font-weight:700; color:var(--dark); }
.nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
.footer { text-align:center; color:var(--muted); font-size:12px; padding:14px; }
a { color:var(--pri2); transition:color .15s ease; }
ul.plain { margin:8px 0 8px 20px; font-size:14px; line-height:1.7; }

/* ============ QUIZ OPTIONS (old single-page view) ============ */
.qoption { display:block; margin:8px 0 0 6px; font-size:14px; cursor:pointer; padding:8px 10px; border-radius:8px; transition:background .15s ease; }
.qoption:hover { background:var(--soft); }
.qoption input { margin-right:8px; }
.timerbox .badge { font-size:15px; padding:8px 18px; background:var(--dark); color:#fff; border-color:var(--dark); }
.timerbox .badge.low { background:var(--err); border-color:var(--err); }
.block-overlay { display:none; position:fixed; inset:0; background:rgba(6,21,49,.92); z-index:80; color:#fff;
    align-items:center; justify-content:center; text-align:center; padding:20px; }
.block-overlay .box { max-width:460px; }
.block-overlay h2 { color:#ffd9d4; margin-bottom:10px; }

/* ============ COMPETITIVE EXAM PANEL (one-by-one questions) ============ */
.qz-wrap { animation:fadeUp .4s ease both; }
.qz-top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
    background:var(--dark); color:#fff; border-radius:12px 12px 0 0; padding:14px 18px; }
.qz-top .qz-title b { font-size:16px; }
.qz-top .qz-sub { display:block; font-size:12px; opacity:.85; margin-top:2px; }
.qz-top .timerbox { position:static; margin:0; }
.qz-body { display:grid; grid-template-columns:236px 1fr; gap:16px; background:var(--card);
    border:1px solid var(--line); border-top:none; border-radius:0 0 12px 12px; padding:16px; }
.qz-side { border-right:1px solid var(--line); padding-right:14px; }
.qz-legend { display:grid; gap:6px; margin-bottom:12px; }
.qz-legend .lg { font-size:12px; display:flex; align-items:center; gap:8px; color:var(--muted); }
.qz-legend .sw { width:22px; height:22px; border-radius:6px; border:2px solid var(--line); display:inline-flex;
    align-items:center; justify-content:center; font-size:11px; font-weight:800; }
.qz-legend .sw.ans { background:#e9f6ec; border-color:var(--ok); color:var(--ok); }
.qz-legend .sw.not { background:#fdecea; border-color:var(--err); color:var(--err); }
.qz-legend .sw.new { background:#fff; color:var(--muted); }
.qz-palette { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
.qz-pbtn { min-height:40px; border-radius:9px; border:2px solid var(--line); background:#fff; color:var(--muted);
    font-weight:800; font-size:13px; cursor:pointer; transition:transform .12s ease, background .15s ease; }
.qz-pbtn:hover { transform:translateY(-2px); }
.qz-pbtn.ans { background:#e9f6ec; border-color:var(--ok); color:var(--ok); }
.qz-pbtn.not { background:#fdecea; border-color:var(--err); color:var(--err); }
.qz-pbtn.new { background:#fff; color:var(--muted); }
.qz-pbtn.cur { outline:3px solid var(--gold); outline-offset:1px; }
.qz-form { min-width:0; }
.qz-qhead { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    font-size:13px; font-weight:700; color:var(--dark); background:var(--soft); border:1px solid var(--line);
    border-radius:9px; padding:9px 13px; margin-bottom:14px; }
.qz-qhead .qz-qn { color:var(--navy); font-size:15px; }
.qz-q h2 { font-size:16.5px; margin-bottom:6px; }
.qz-nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line);
    margin-top:18px; padding-top:14px; }
.qz-nav .spacer { flex:1; }
.qz-nav .btn { margin-top:0; }
.json-box { margin-top:14px; border:1px solid var(--line); border-radius:10px; background:#f8fafc; }
.json-box summary { cursor:pointer; font-weight:700; color:var(--dark); padding:10px 14px; font-size:13.5px; }
.json-box pre { padding:0 14px 14px; font-family:Consolas,"Courier New",monospace; font-size:12px;
    white-space:pre-wrap; word-break:break-all; color:#333; max-height:340px; overflow:auto; }

/* ============ HCC SITE FOOTER ============ */
.hccfooter { background:var(--dark); color:var(--soft); margin-top:30px; animation:fadeUp .5s ease both; }
.fcols { max-width:980px; margin:0 auto; padding:30px 22px 22px; display:flex; gap:34px; flex-wrap:wrap; justify-content:space-between; }
.fcols > div { min-width:220px; flex:1; }
.fcols h4 { color:#fff; font-size:15px; margin-bottom:10px; letter-spacing:.4px; }
.fcols p, .fcols a { font-size:13px; color:var(--soft); line-height:1.8; text-decoration:none; display:block; }
.fcols a:hover { color:#ffe9a8; }
.fcopy { background:var(--darker); color:var(--soft); text-align:center; font-size:12px; line-height:1.8; padding:14px 16px; }
.fcopy a { color:#fff; text-decoration:none; }
.fcopy a:hover { color:#ffe9a8; }

/* ============ ANIMATIONS + TICKER ============ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes popIn    { from { opacity:0; transform:scale(.96); }       to { opacity:1; transform:scale(1); } }
@keyframes gradmove { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes tickmove { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes floaty   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.hccnav { animation:fadeUp .4s ease both; }
.hccnav .brand img { animation:floaty 5s ease-in-out infinite; }
.qbox { animation:fadeUp .35s ease both; }
.ticker { overflow:hidden; white-space:nowrap; margin-top:5px; }
.ticker .track { display:inline-block; white-space:nowrap; animation:tickmove 26s linear infinite; }
.ticker .track > span { display:inline-block; padding-right:60px; font-size:12px; color:#ffe9a8; }
.ticker .track b { color:#fff; }
.ticker:hover .track { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
    *, .card, .panelstrip, .hccnav, .hccnav .brand img, .ticker .track, .qbox, .alert, .hccfooter {
        animation:none !important; transition:none !important;
    }
}
@media (max-width: 991px) {
    .qz-body { grid-template-columns:1fr; }
    .qz-side { border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:12px; }
    .qz-palette { grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); }
}
@media (max-width: 640px) {
    .hccnav .bname small { display:none; }
    .hccnav .brand img { height:52px; }
    .qz-nav .btn { flex:1 1 44%; }
}

/* ===== v6.1 Student Premium Responsive ===== */
.wrap.wide{max-width:1200px}
.card{border-radius:14px;box-shadow:0 2px 12px rgba(10,34,70,.06)}
@media(max-width:768px){
  .wrap{padding:12px}
  .card{padding:16px;border-radius:12px}
  .hccnav{padding:10px 12px;flex-wrap:wrap;gap:8px}
  .hccnav .brand .bname b{font-size:14px}
  .hccnav .brand .bname small{display:none}
  .panelstrip{padding:10px 12px}
  .panelstrip b{font-size:14px}
  .nav{flex-direction:column;align-items:flex-start!important}
}

/* ===== Final responsive student footer ===== */
.student-footer{background:#0a2246;color:#fff;text-align:center;padding:14px 16px;font-size:12.5px;line-height:1.7;border-top:3px solid #c9a227;margin-top:28px}
.student-footer a{color:#ffe9a8;text-decoration:none}
.student-footer a:hover{text-decoration:underline}
@media(max-width:600px){.student-footer{font-size:11.5px;padding:12px 10px}.student-footer div+div{margin-top:2px}}

html,body{min-height:100%;}
body{display:flex;flex-direction:column;}
.wrap{width:100%;flex:1;}

/* ===== Student login/dashboard footer final layout ===== */
html,body{min-height:100%;margin:0;}
body{min-height:100vh;display:flex;flex-direction:column;}
.wrap{flex:1 0 auto;width:100%;box-sizing:border-box;}
.student-footer{flex:0 0 auto;width:100%;box-sizing:border-box;background:#0a2246;color:#fff;text-align:center;padding:14px 16px;font-size:12.5px;line-height:1.7;border-top:3px solid #c9a227;margin-top:28px;}
.student-footer a{color:#ffe9a8;text-decoration:none;}
.student-footer a:hover{text-decoration:underline;}
@media(max-width:600px){.student-footer{font-size:11.5px;padding:12px 10px;}}

/* ===== Student login page: centered panel + footer always visible ===== */
body.student-login-page{min-height:100vh;display:flex;flex-direction:column;}
body.student-login-page .wrap{flex:1 1 auto;width:100%;max-width:980px;margin:0 auto;padding:34px 18px 30px;display:flex;flex-direction:column;justify-content:center;}
body.student-login-page .panelstrip{flex:0 0 auto;}
body.student-login-page .student-login-card{width:100%;}
body.student-login-page .student-footer{margin-top:0;}
@media(max-width:640px){body.student-login-page .wrap{padding:22px 12px 24px;} }

/* ============================================================
   HCC UI POLISH - R7
   Visual-only responsive layer. No examination logic changed.
   ============================================================ */
:root{
  --ui-navy:#0b2854;
  --ui-blue:#1f55a6;
  --ui-gold:#c9a227;
  --ui-bg:#f4f7fb;
  --ui-card:#ffffff;
  --ui-border:#dbe4f0;
  --ui-text:#172b4d;
  --ui-muted:#66758f;
  --ui-shadow:0 10px 30px rgba(20,48,88,.08);
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#f7f9fc 0,#eef3f9 100%);color:var(--ui-text);font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hccnav{min-height:78px;padding:10px clamp(14px,3vw,34px);border-bottom:2px solid var(--ui-gold);box-shadow:0 2px 18px rgba(10,34,70,.08);background:rgba(255,255,255,.98);backdrop-filter:blur(8px)}
.hccnav .brand{gap:13px;min-width:0}
.hccnav .brand img{height:58px}
.hccnav .bname b{font-size:clamp(17px,2vw,21px);letter-spacing:.8px}
.hccnav .bname small{font-size:11px;color:#687790}
.hmenu{align-items:center;gap:7px}
.hmenu a{padding:9px 12px;border:1px solid transparent}
.hmenu a:hover{border-color:#dbe4f0;background:#f4f7fb}
.panelstrip{padding:12px clamp(14px,3vw,34px);background:linear-gradient(100deg,#09234a,#174a93);box-shadow:0 4px 14px rgba(7,28,60,.12)}
.panelstrip b{font-size:16px}
.panelstrip small{font-size:11.5px;color:#e5edf9}
.wrap{max-width:1160px;margin:24px auto;padding:0 clamp(12px,2vw,22px) 38px}
.wrap.narrow{max-width:780px}
.wrap.wide{max-width:1280px}
.card{border:1px solid var(--ui-border);border-radius:16px;padding:22px;box-shadow:var(--ui-shadow);background:rgba(255,255,255,.98)}
.card:hover{box-shadow:0 14px 34px rgba(20,48,88,.10)}
h2{font-size:18px;letter-spacing:-.1px}
p{color:#52627b}
.muted{color:var(--ui-muted)}
input[type=text],input[type=password],input[type=number],select,textarea{min-height:44px;border:1px solid #cbd7e6;border-radius:10px;padding:10px 13px;transition:border-color .18s,box-shadow .18s,background .18s}
input:focus,select:focus,textarea:focus{border-color:#2b63b6;box-shadow:0 0 0 4px rgba(31,85,166,.10)}
.btn{min-height:42px;border-radius:10px;padding:10px 17px;background:var(--ui-blue);box-shadow:0 5px 12px rgba(31,85,166,.14)}
.btn:hover{background:#17488f;transform:translateY(-1px);box-shadow:0 8px 18px rgba(31,85,166,.18)}
.btn.sec{background:#fff;border-color:#ccd8e7;box-shadow:none}
.btn.sec:hover{background:#f5f8fc}
.badge{padding:6px 12px}
.alert{border-radius:12px;padding:13px 15px}
.student-footer{margin-top:22px;background:#08234a;border-top:2px solid var(--ui-gold);padding:15px 18px;font-size:12px;color:#e7eef8}
.student-footer a{color:#f4d77b}

/* Student dashboard */
.exam-list-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.exam-list-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,48,88,.10)}
.qz-wrap{border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(20,48,88,.10)}
.qz-top{padding:15px 18px;background:linear-gradient(100deg,#09234a,#174a93);border-radius:0}
.qz-body{padding:18px;gap:20px;border:1px solid var(--ui-border);border-top:0;background:#fff}
.qz-side{padding-right:18px}
.qz-palette{gap:7px}
.qz-pbtn{min-height:42px;border-radius:10px;background:#fff;border-color:#cfdae8}
.qz-pbtn.cur{outline:2px solid var(--ui-gold);outline-offset:2px}
.qz-qhead{padding:10px 13px;background:#f5f8fc;border-color:#dbe4f0}
.qz-q h2{font-size:18px;line-height:1.55;margin:12px 0 14px}
.qz-q label,.qz-q .qoption{border:1px solid #dbe4f0;background:#fff;border-radius:11px;padding:13px 14px;margin:9px 0;transition:border-color .15s,background .15s,box-shadow .15s}
.qz-q label:hover,.qz-q .qoption:hover{background:#f7faff;border-color:#aac2e5;box-shadow:0 4px 12px rgba(20,48,88,.06)}
.qz-nav{padding-top:16px}
.timerbox .badge{font-size:14px;padding:9px 14px;border-radius:999px}

/* Student login */
body.student-login-page{background:radial-gradient(circle at 50% 18%,#fff 0,#f5f8fc 42%,#edf2f8 100%)}
body.student-login-page .wrap{max-width:900px!important;padding:34px 18px 40px!important}
body.student-login-page .student-login-head{width:min(720px,100%)!important;margin:0 auto 14px!important}
body.student-login-page .student-login-head strong{font-size:22px!important}
body.student-login-page .student-login-card{width:min(720px,100%)!important;max-width:720px!important;padding:34px 42px!important;border-radius:20px!important;box-shadow:0 18px 50px rgba(20,48,88,.12)!important}
body.student-login-page .login-brand{align-items:center;padding-bottom:18px!important;margin-bottom:24px!important}
body.student-login-page .login-brand img{width:56px!important;height:56px!important;border-radius:14px!important}
body.student-login-page .login-brand b{font-size:18px!important}
body.student-login-page .student-login-card h2{font-size:24px!important;line-height:1.3!important}
body.student-login-page .student-login-card form>.btn{min-height:48px!important;margin-top:20px!important}
body.student-login-page .student-login-card .btn.sec{margin-top:10px!important}
body.student-login-page .login-note{background:#f7f9fc;border-color:#e0e7f0}

/* Remove excessive animated ticker on narrow devices; keep it readable. */
@media(max-width:760px){
  .hccnav{min-height:auto}
  .hccnav .brand img{height:48px}
  .hccnav .bname b{font-size:16px}
  .hmenu{width:100%;justify-content:flex-start}
  .hmenu a,.hmenu .st-chip{font-size:11px}
  .panelstrip{padding:10px 12px}
  .panelstrip small{font-size:10.5px}
  .wrap{margin:16px auto;padding:0 12px 26px}
  .card{padding:17px;border-radius:13px}
  .qz-top{padding:13px}
  .qz-body{padding:12px;gap:12px}
  .qz-side{padding-right:0;padding-bottom:13px}
  .qz-palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .qz-pbtn{min-height:38px;font-size:12px}
  .qz-q h2{font-size:16px;line-height:1.5}
  .qz-nav{gap:7px}
  .qz-nav .btn{flex:1 1 calc(50% - 7px);margin:0}
  body.student-login-page .wrap{padding:22px 12px 28px!important}
  body.student-login-page .student-login-card{padding:25px 20px!important;border-radius:17px!important}
}
@media(max-width:480px){
  .hccnav{padding:9px 10px}
  .hccnav .brand{gap:9px}
  .hccnav .brand img{height:42px}
  .hccnav .bname b{font-size:14px;letter-spacing:.3px}
  .hmenu{gap:4px}
  .hmenu a{padding:7px 9px}
  .panelstrip .ticker{display:none}
  .wrap{padding-left:10px;padding-right:10px}
  .card{padding:14px}
  .qz-top .qz-sub{font-size:10.5px}
  .qz-top .timerbox{width:100%}
  .qz-top .timerbox .badge{display:block;text-align:center}
  .qz-palette{grid-template-columns:repeat(5,1fr)}
  .qz-qhead{font-size:12px}
  .qz-nav .btn{width:100%;flex-basis:100%}
  body.student-login-page .student-login-head{align-items:flex-start!important}
  body.student-login-page .student-login-head .btn{width:100%!important;margin-top:8px}
  body.student-login-page .student-login-card{padding:22px 16px!important}
  body.student-login-page .student-login-card h2{font-size:20px!important}
  body.student-login-page .student-login-card .row3{grid-template-columns:repeat(3,1fr)!important;display:grid!important;gap:7px!important}
}
@media(max-width:360px){
  body.student-login-page .student-login-card .row3{grid-template-columns:1fr!important}
  .qz-pbtn{min-height:34px;font-size:11px}
}