/* Sharadha Skill Academy — Online Examination
   Brand: navy + gold from the academy logo, with a small set of accent colours for status and numbers. */
:root {
  --navy: #1B2B5E;
  --navy-2: #243B7A;
  --navy-dark: #111C40;
  --gold: #C9A04A;
  --gold-soft: #F6EBD0;
  --ink: #1C2233;
  --muted: #5A6275;
  --line: #E1E5EE;
  --bg: #F3F5FA;
  --card: #FFFFFF;

  --blue: #2563EB;   --blue-bg: #E8F0FE;
  --green: #12805C;  --green-bg: #E3F6EE;
  --teal: #0E7C86;   --teal-bg: #E0F4F5;
  --purple: #6941C6; --purple-bg: #EFEAFB;
  --orange: #C2570C; --orange-bg: #FDEFE3;
  --red: #C0262D;    --red-bg: #FDEBEC;
  --amber: #8A5A00;  --amber-bg: #FFF4D6;

  --shadow: 0 1px 2px rgba(17, 28, 64, .06), 0 4px 16px rgba(17, 28, 64, .06);
  --radius: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--navy-2); }
h1 { font-size: 26px; line-height: 1.2; margin: 0; color: var(--navy); letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 28px 0 12px; color: var(--navy); display: flex; align-items: center; gap: 10px; }
h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--gold); }
.card h2:first-child, .card > h2 { margin-top: 0; }
h3 { font-size: 16px; margin: 0 0 8px; }
.muted { color: var(--muted); }
.lead { font-size: 15px; color: var(--muted); margin: 6px 0 0; }
.bad { color: var(--red); }
.ic { width: 18px; height: 18px; flex: none; }

/* ---------- header ---------- */
.masthead { background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; min-width: 0; }
.brand img { height: 46px; width: auto; display: block; }
.brand-sub { padding-left: 16px; border-left: 2px solid var(--gold); color: var(--navy); font-weight: 600; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.who-text { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; }
.role-pill { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 0 8px; border-radius: 999px; background: var(--gold-soft); color: #7A5A12; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.iconlink { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--navy); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.iconlink:hover { background: var(--bg); }
.mainnav { background: linear-gradient(90deg, var(--navy-dark), var(--navy) 55%, var(--navy-2)); border-bottom: 3px solid var(--gold); }
.mainnav-in { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 2px; }
.mainnav a { display: flex; align-items: center; gap: 8px; color: #D4DBEE; text-decoration: none; padding: 12px 14px; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.mainnav a.on { color: #fff; border-bottom-color: #F2D184; background: rgba(255, 255, 255, .10); }
.mainnav a.on .ic { color: #F2D184; }

main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 24px 56px; flex: 1; }
.pagehead { margin-bottom: 18px; }
.foot { text-align: center; color: var(--muted); font-size: 13px; padding: 18px; border-top: 1px solid var(--line); background: #fff; }

/* ---------- surfaces ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 18px; box-shadow: var(--shadow); }
.card.narrow { max-width: 440px; margin: 24px auto; }
.card.warn { border-color: #EBCB7B; background: #FFFBEF; }
.card.good { border: 0; background: linear-gradient(135deg, #0F7A57, #12805C 50%, #1B9C70); color: #fff; }
.card.good h2 { color: #fff; } .card.good h2::before { background: #F2D184; }
.card.good .btn { background: #fff; color: var(--green); border-color: #fff; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.row-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.row-form label { min-width: 180px; flex: 1; }
.row-form .btn { margin-bottom: 10px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.item:first-of-type { border-top: 0; }
.item .dot { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.item a { font-weight: 600; text-decoration: none; }
.item small { display: block; color: var(--muted); }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
label.check, label.inline-label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; font-size: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 12px; font: inherit; font-weight: 400; color: var(--ink); border: 1px solid #C9CFDC; border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover, textarea:hover { border-color: #A9B2C6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(36, 59, 122, .18); }
input[type=checkbox], input[type=radio] { display: inline-block; width: 18px; height: 18px; margin: 0; accent-color: var(--navy); box-shadow: none; }
input.mark { width: 84px; display: inline-block; margin: 0; padding: 6px 8px; }
form.inline { display: inline; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .05s; }
.btn:hover { background: var(--navy-dark); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #2B2006; }
.btn.gold:hover { background: #B88E37; }
.btn.green { background: var(--green); border-color: var(--green); }
.btn.ghost { background: #fff; color: var(--navy); border-color: #C9CFDC; }
.btn.ghost:hover { background: #F1F4FA; border-color: var(--navy-2); }
.btn.small { padding: 5px 11px; font-size: 13px; border-radius: 7px; }
.btn.big { padding: 14px 26px; font-size: 17px; }
button.link { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

.flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; background: var(--green-bg); color: #0B5E43; border: 1px solid #A8DCC5; border-left: 5px solid var(--green); }
.flash.err { background: var(--red-bg); color: #8E1B21; border-color: #F3B9BC; border-left-color: var(--red); }
.flash.info { background: var(--blue-bg); color: #1E3F96; border-color: #BCD0F8; border-left-color: var(--blue); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid #EDF0F5; vertical-align: top; }
th { background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; letter-spacing: .01em; }
th:first-child { border-top-left-radius: 11px; } th:last-child { border-top-right-radius: 11px; }
tbody tr:nth-child(even) td { background: #FAFBFD; }
tbody tr:hover td { background: #F3F6FC; }
tbody tr:last-child td { border-bottom: 0; }
tr.dim td { color: #9AA0AD; }
td.actions { white-space: nowrap; }
table.results td:first-child { white-space: nowrap; font-weight: 600; color: var(--navy); }
.card table th { background: #F0F3F9; color: var(--navy); }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-pass { background: var(--green-bg); color: var(--green); }
.b-fail { background: var(--red-bg); color: var(--red); }
.b-stop { background: var(--red); color: #fff; }
.b-pend { background: var(--amber-bg); color: var(--amber); }
.b-live { background: var(--blue-bg); color: var(--blue); }
.b-live::before { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.warnnum { display: inline-block; min-width: 24px; padding: 0 6px; text-align: center; border-radius: 999px; background: var(--red-bg); color: var(--red); font-weight: 700; }
.gradeA { color: var(--green); font-weight: 700; }
blockquote { margin: 6px 0 12px; padding: 12px 14px; background: #F7F9FC; border: 1px solid var(--line); border-left: 4px solid var(--navy-2); border-radius: 8px; white-space: pre-wrap; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 8px; }
.tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); text-decoration: none; color: inherit; position: relative; overflow: hidden; }
.tile::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tone); }
a.tile:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(17, 28, 64, .10); }
.tile-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); flex: none; }
.tile-ic .ic { width: 24px; height: 24px; }
.tile-body { display: flex; flex-direction: column; min-width: 0; }
.tile .num { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.tile .lbl { color: var(--muted); font-size: 13px; }
.t-blue { --tone: var(--blue); --tone-bg: var(--blue-bg); }
.t-green { --tone: var(--green); --tone-bg: var(--green-bg); }
.t-teal { --tone: var(--teal); --tone-bg: var(--teal-bg); }
.t-purple { --tone: var(--purple); --tone-bg: var(--purple-bg); }
.t-orange { --tone: var(--orange); --tone-bg: var(--orange-bg); }
.t-red { --tone: var(--red); --tone-bg: var(--red-bg); }
.t-gold { --tone: #A47A1E; --tone-bg: var(--gold-soft); }
.t-navy { --tone: var(--navy); --tone-bg: #E6EAF5; }

/* ---------- welcome banner ---------- */
.hero { position: relative; overflow: hidden; border-radius: 16px; padding: 24px 28px; margin-bottom: 20px; color: #fff; background: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 45%, var(--navy-2) 100%); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(242, 209, 132, .55); outline: 1px solid rgba(242, 209, 132, .3); outline-offset: 24px; }
.hero h1 { color: #fff; font-size: 24px; }
.hero p { margin: 6px 0 0; color: #D4DBEE; position: relative; z-index: 1; }
.hero .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; position: relative; z-index: 1; }
.hero .chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: 4px 12px; border-radius: 999px; font-size: 13px; }
.hero .chip .ic { width: 15px; height: 15px; color: #F2D184; }

/* ---------- student exam cards ---------- */
.examcard { border-top: 4px solid var(--navy-2); }
.examcard.open { border-top-color: var(--green); }
.examcard.done { border-top-color: var(--teal); }
.examcard.stopped { border-top-color: var(--red); }
.examcard .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 14px; margin: 4px 0 14px; }
.examcard .meta span { display: inline-flex; align-items: center; gap: 6px; }
.rules { background: #F7F9FC; border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; margin-bottom: 14px; }
.rules ul { margin: 6px 0; padding-left: 0; list-style: none; }
.rules li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.rules li .ic { color: var(--navy-2); margin-top: 2px; }
.notice { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.notice.ok { background: var(--teal-bg); color: var(--teal); }
.notice.badn { background: var(--red-bg); color: var(--red); }
.notice.wait { background: var(--blue-bg); color: var(--blue); }

/* ---------- login ---------- */
.login-page { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.login-art { position: relative; overflow: hidden; color: #fff; padding: 48px 56px; display: flex; flex-direction: column; justify-content: center; gap: 22px; background: radial-gradient(circle at 15% 20%, #2E4A94 0, transparent 45%), linear-gradient(140deg, var(--navy-dark), var(--navy) 60%, #22397A); }
.login-art::before { content: ""; position: absolute; right: -140px; bottom: -140px; width: 440px; height: 440px; border-radius: 50%; border: 2px solid rgba(242, 209, 132, .55); outline: 1px solid rgba(242, 209, 132, .3); outline-offset: 34px; }
.login-art::after { content: ""; position: absolute; left: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); }
.login-art img { width: 88px; height: auto; position: relative; }
.login-art h1 { color: #fff; font-size: 34px; position: relative; }
.login-art h1 span { color: #F2D184; }
.login-art p { color: #D4DBEE; max-width: 460px; margin: 0; font-size: 16px; position: relative; }
.login-art ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; position: relative; }
.login-art li { display: flex; align-items: center; gap: 12px; }
.login-art li .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #F2D184; }
.login-form-wrap { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.login-form { width: 100%; max-width: 380px; }
.login-form img { height: 56px; width: auto; margin-bottom: 26px; }
.login-form h2 { font-size: 24px; margin: 0 0 4px; }
.login-form h2::before { display: none; }
.login-form .lead { margin-bottom: 22px; }
.login-form .btn { width: 100%; padding: 12px; font-size: 16px; margin-top: 4px; }
.login-form .foot-note { margin-top: 18px; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- exam screen ---------- */
.exam-body { background: var(--bg); user-select: none; -webkit-user-select: none; }
.exam-body textarea { user-select: text; -webkit-user-select: text; }
.exam-top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, var(--navy-dark), var(--navy) 60%, var(--navy-2)); color: #fff; padding: 10px 24px; border-bottom: 3px solid var(--gold); }
.exam-top .who-exam { display: flex; align-items: center; gap: 12px; }
.exam-top .who-exam img { height: 34px; width: auto; }
.exam-top small { color: #C9D1E8; }
.timer { display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .1); padding: 4px 14px; border-radius: 10px; }
.timer .ic { width: 22px; height: 22px; color: #F2D184; }
.timer.low { background: var(--red); }
.warnbox { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); padding: 6px 14px; border-radius: 10px; }
.warnbox .ic { color: #FFC9A9; }
.save { font-size: 13px; color: #B9EBD5; }
.save.bad { color: #FFB4A9; font-weight: 700; }
.exam-wrap { width: 100%; display: flex; flex-wrap: wrap; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 24px; }
.palette { flex: 0 0 236px; align-self: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 6px; }
.palette-title { width: 100%; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.pal { width: 40px; height: 40px; border: 1px solid #C9CFDC; background: #fff; border-radius: 8px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.pal:hover { border-color: var(--navy-2); }
.pal.done { background: var(--green-bg); border-color: #7CC9A8; color: var(--green); }
.pal.flag { background: var(--gold-soft); border-color: var(--gold); color: #7A5A12; }
.pal.cur { background: var(--navy); border-color: var(--navy); color: #fff; }
.legend { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .pal { width: 14px; height: 14px; border-radius: 4px; cursor: default; }
.qarea { flex: 999 1 560px; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow); }
.qnum { display: inline-block; color: var(--navy-2); background: #E9EEFA; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin: 0 0 12px; }
.qtext { font-size: 19px; margin: 0 0 18px; font-weight: 500; }
.opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: 10px; color: var(--ink); font-size: 16px; font-weight: 400; cursor: pointer; transition: background .12s, border-color .12s; }
.opt:hover { background: #F5F8FE; border-color: #B9C6E6; }
.opt:has(input:checked) { background: #EEF3FF; border-color: var(--navy-2); }
.optl { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EEF1F7; font-weight: 700; color: var(--navy); flex: none; }
.opt:has(input:checked) .optl { background: var(--navy); color: #fff; }
textarea.written { font-size: 16px; min-height: 240px; }
.qnav { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.qnav #submit { margin-left: auto; background: var(--green); border-color: var(--green); }
.qnav #submit:hover { background: #0B6447; }
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(17, 28, 64, .94); display: flex; align-items: center; justify-content: center; padding: 20px; }
.overlay[hidden] { display: none; }
.overlay-box { background: #fff; border-radius: 16px; padding: 32px 36px; max-width: 540px; text-align: center; border-top: 6px solid var(--gold); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.overlay-box .big-ic { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: #A47A1E; }
.overlay-box .big-ic .ic { width: 32px; height: 32px; }
.overlay-box h2 { justify-content: center; }
.overlay-box h2::before { display: none; }
.overlay-box.bad { border-top-color: var(--red); }
.overlay-box.bad .big-ic { background: var(--red-bg); color: var(--red); }
.overlay-box.bad h2 { color: var(--red); }
.toast { position: fixed; z-index: 30; left: 50%; top: 84px; transform: translateX(-50%); max-width: 92%; display: flex; align-items: center; gap: 10px; background: var(--red); color: #fff; font-weight: 600; padding: 14px 20px; border-radius: 10px; box-shadow: 0 10px 30px rgba(192, 38, 45, .35); }
.toast[hidden] { display: none; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .masthead { padding: 10px 16px; }
  .brand img { height: 36px; }
  .brand-sub, .who-text { display: none; }
  main { padding: 18px 16px 40px; }
  .mainnav a span { display: none; }
  .mainnav a { padding: 12px; }
  .login-page { grid-template-columns: 1fr; }
  .login-art { padding: 32px 24px; }
  .login-art ul { display: none; }
}

@media print {
  .masthead, .mainnav, .foot, .toolbar, button, form { display: none !important; }
  body { background: #fff; }
  .card, .tablewrap { box-shadow: none; }
}
table.mini { font-size: 12px; margin: 14px 0; border: 1px solid var(--line); }
table.mini th, table.mini td { padding: 5px 8px; }
table.mini th { background: #F0F3F9; color: var(--navy); }
details { margin-top: 8px; }
details summary { cursor: pointer; color: var(--navy-2); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
input[type=file] { padding: 7px; background: #F7F9FC; }