@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

/*
  Palette pulled from the Kendriya Vidyalaya emblem itself (the lamp on the badge):
  antique gold/bronze as the single accent, warm ivory ground, warm-neutral ink.
  Deliberately one accent colour, used sparingly — restraint reads as premium.
*/
:root{
  --bg:#FAF8F3;
  --surface:#FFFFFF;
  --surface-2:#F4F0E7;
  --ink:#211D16;
  --ink-soft:#5C574B;
  --ink-faint:#928C7C;
  --primary:#8E6B29;
  --primary-hover:#7A5B21;
  --primary-ink:#FFFFFF;
  --primary-soft:#F3E9D3;
  --good:#3E7A4C;
  --good-soft:#E7F1E9;
  --warn:#A8452A;
  --warn-soft:#F7E9E2;
  --border:#E7E1D3;
  --border-soft:#F0ECE1;
  --shadow: 0 1px 2px rgba(33,29,22,.05), 0 10px 24px -16px rgba(33,29,22,.16);
  --shadow-lg: 0 24px 56px -24px rgba(33,29,22,.32);
  --radius: 14px;
  --radius-sm: 10px;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  color-scheme: light;
}
/* Deliberately one theme, white/ivory-based — visitors' OS dark-mode setting is ignored. */

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:1040px; margin:0 auto; padding:20px 16px 64px;}
@media (min-width:640px){ .wrap{padding:36px 24px 80px;} }

h1,h2,h3{font-family:var(--font-display); margin:0; text-wrap:balance; font-weight:800; letter-spacing:-.01em;}
a{color:var(--primary);}

.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
.brand-row{display:flex; align-items:center; gap:10px;}
.brand-row .kv-logo{height:24px; width:auto; flex:none;}
#introSplash .kv-logo{height:96px; width:auto; margin:0 auto 22px; display:block; opacity:0; animation:splashIn .7s ease forwards .1s;}

header.top{
  padding:28px 4px 24px;
  border-bottom:1px solid var(--border);
  margin-bottom:30px;
}
@media (min-width:640px){ header.top{padding:8px 4px 30px;} }
header.top h1{font-size:clamp(24px,5vw,34px); color:var(--ink); line-height:1.16; margin-top:12px;}
header.top .sub{color:var(--ink-soft); font-size:14.5px; max-width:58ch; margin-top:9px; line-height:1.6;}
.meta-row{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; font-size:12.5px; color:var(--ink-faint); font-weight:600;}
.meta-row .sep{color:var(--border);}
.meta-row .live{color:var(--good); display:inline-flex; align-items:center; gap:6px;}
.meta-row .live .dot{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none;}
.title-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.title-row h1{margin-top:0;}
.top-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px;}
.title-row .top-actions{margin-top:6px;}
.link-btn{appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font:inherit; font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:8px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:border-color .15s, color .15s;}
.link-btn:hover{color:var(--primary); border-color:var(--primary);}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}

/* ---------- form ---------- */
.form-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start;}
@media (max-width:860px){ .form-grid{grid-template-columns:1fr;} }
.form-card{padding:26px 20px 32px;}
@media (min-width:640px){ .form-card{padding:38px 40px 42px;} }
.fieldset{margin-bottom:38px; padding-top:26px; border-top:1px solid var(--border-soft);}
.fieldset:first-child{margin-top:0; padding-top:0; border-top:none;}
.fieldset:last-child{margin-bottom:0;}
.fieldset-title{font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--ink); margin-bottom:20px;}

.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px;}
.field-row:last-child{margin-bottom:0;}
.field-row.single{grid-template-columns:1fr;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }

label.field{display:flex; flex-direction:column; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink);}
label.field .hint{font-weight:400; color:var(--ink-faint); font-size:12px;}
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], textarea, select{
  font:inherit; font-size:16px; padding:11px 13px; border-radius:9px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--ink); width:100%;
}
@media (min-width:640px){ input[type=text], input[type=tel], input[type=email], input[type=number], input[type=password], textarea, select{font-size:14px;} }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
textarea{resize:vertical; min-height:76px; font-family:inherit;}
select{ background-image:linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; appearance:none; padding-right:34px;}

/* ---------- segmented controls (Yes / Maybe / No) and switches (Yes / No) ---------- */
.segmented, .switch{
  position:relative; display:inline-flex; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:3px; user-select:none;
}
.segmented input, .switch input{position:absolute; opacity:0; width:1px; height:1px; margin:0;}
.segmented label, .switch label{
  position:relative; z-index:2; flex:1; display:flex; align-items:center; justify-content:center;
  padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
  border-radius:7px; white-space:nowrap; transition:color .2s ease;
}
.segmented input:focus-visible + label, .switch input:focus-visible + label{outline:2px solid var(--primary); outline-offset:2px;}
.segmented::before, .switch::before{
  content:""; position:absolute; top:3px; left:3px; height:calc(100% - 6px);
  background:var(--primary); border-radius:7px; z-index:1;
  transition:transform .25s cubic-bezier(.3,.85,.4,1.1);
  box-shadow:0 1px 3px rgba(33,29,22,.2);
}
.segmented input:checked + label, .switch input:checked + label{color:var(--primary-ink);}

.switch{width:112px;}
.switch::before{width:calc(50% - 3px);}
.switch:has(input:last-of-type:checked)::before{transform:translateX(100%);}

.segmented::before{width:calc(33.334% - 2px);}
.segmented:has(input:nth-of-type(2):checked)::before{transform:translateX(100%);}
.segmented:has(input:nth-of-type(3):checked)::before{transform:translateX(200%);}

.date-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
@media (max-width:560px){ .date-grid{grid-template-columns:1fr;} }
.date-card{position:relative;}
.date-card input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0;}
.date-card span{display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; transition:border-color .15s, background .15s;}
.date-card span b{font-size:13.5px; color:var(--ink); font-weight:700;}
.date-card span em{font-style:normal; font-size:11.5px; color:var(--ink-faint);}
.date-card input:checked + span{background:var(--primary-soft); border-color:var(--primary);}
.date-card input:checked + span b{color:var(--primary-hover);}
.date-card input:focus-visible + span{outline:2px solid var(--primary); outline-offset:2px;}

.submit-row{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap;}
button.primary, .btn.primary{appearance:none; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:14.5px; background:var(--primary); color:var(--primary-ink); padding:13px 26px; border-radius:10px; box-shadow:0 1px 2px rgba(33,29,22,.1), 0 8px 18px -10px rgba(33,29,22,.35); width:100%; transition:background .15s, transform .1s;}
@media (min-width:560px){ button.primary, .btn.primary{width:auto;} }
button.primary:hover{background:var(--primary-hover);}
button.primary:active{transform:translateY(1px);}
button.primary:disabled{opacity:.6; cursor:not-allowed;}
.form-note{font-size:12px; color:var(--ink-faint);}

.side-card{padding:24px; display:flex; flex-direction:column; gap:24px;}
.side-card h3{font-family:var(--font-display); font-size:15.5px; font-weight:800;}
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
.checklist li{display:flex; gap:11px; font-size:13px; color:var(--ink-soft); align-items:flex-start; line-height:1.55;}
.checklist li .num{flex:none; width:19px; height:19px; border-radius:50%; background:var(--primary-soft); color:var(--primary-hover); font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px;}

/* ---------- report / dashboard ---------- */
.dash-note{font-size:12.5px; color:var(--ink-faint); padding:0 0 18px; border-bottom:1px solid var(--border-soft); margin-bottom:22px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;}
@media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat-tile{padding:18px 18px 16px;}
.stat-tile .label{font-size:11.5px; color:var(--ink-faint); font-weight:700;}
.stat-tile .value{font-family:var(--font-display); font-size:28px; font-weight:800; margin-top:5px; font-variant-numeric:tabular-nums; color:var(--ink);}

.dash-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:14px; margin-bottom:14px;}
@media (max-width:800px){ .dash-grid{grid-template-columns:1fr;} }
.panel{padding:20px 20px 22px;}
@media (min-width:640px){ .panel{padding:24px 26px 26px;} }
.panel h3{font-family:var(--font-display); font-size:14.5px; font-weight:800; margin-bottom:4px;}
.panel .panel-sub{font-size:12px; color:var(--ink-faint); margin-bottom:18px;}

.bar-row{display:grid; grid-template-columns:96px 1fr 30px; align-items:center; gap:10px; margin-bottom:12px; font-size:12.5px;}
@media (min-width:640px){ .bar-row{grid-template-columns:112px 1fr 34px;} }
.bar-row .bar-label{color:var(--ink-soft); font-weight:600;}
.bar-track{height:7px; border-radius:6px; background:var(--border-soft); overflow:hidden;}
.bar-fill{height:100%; border-radius:6px; background:var(--primary); transition:width .5s ease;}
.bar-fill.gold{background:var(--primary);}
.bar-row .bar-val{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-faint); font-weight:600;}
.bar-row.leader .bar-label{color:var(--primary-hover); font-weight:700;}
.bar-row.leader .bar-fill{background:var(--primary);}

.pref-list{display:flex; flex-direction:column; gap:14px;}
.pref-item{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.pref-item .pref-name{font-size:13px; font-weight:600; color:var(--ink-soft);}
.pref-item .pref-bar{flex:1; margin:0 12px;}
.pref-item .pref-count{font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; width:44px; text-align:right;}

table.resp-table{width:100%; border-collapse:collapse; font-size:13px; min-width:820px; border:1px solid var(--border);}
table.resp-table th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:10px; border:1px solid var(--border); white-space:nowrap; font-weight:700; background:var(--surface-2);}
table.resp-table td{padding:13px 10px; border:1px solid var(--border-soft); color:var(--ink-soft); vertical-align:top;}
table.resp-table th.col-sno, table.resp-table td.col-sno{width:1%; text-align:center; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
table.resp-table tr:hover td{background:var(--surface-2);}
table.resp-table .name-cell{color:var(--ink); font-weight:700;}
table.resp-table .sub-line{display:block; color:var(--ink-faint); font-weight:400; font-size:11.5px; margin-top:2px;}
table.resp-table .muted{color:var(--ink-faint);}
.chip{display:inline-flex; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; margin:1px 3px 1px 0;}
.chip.yes{background:var(--good-soft); color:var(--good);}
.chip.no{background:var(--warn-soft); color:var(--warn);}
.chip.maybe{background:var(--primary-soft); color:var(--primary-hover);}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px;}
.empty-state{padding:34px 20px; text-align:center; color:var(--ink-faint); font-size:13.5px;}

.filter-bar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 18px; padding-bottom:18px; border-bottom:1px solid var(--border-soft);}
.filter-bar input[type=search], .filter-bar select{
  width:auto; font-size:12.5px; padding:8px 12px; border-radius:8px; border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--ink);
}
.filter-bar input[type=search]{flex:1 1 180px; min-width:160px;}
.filter-bar select{flex:0 0 auto; padding-right:28px;}
.filter-bar select:focus, .filter-bar input:focus{border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); outline:none;}
.filter-bar #filterReset{flex:0 0 auto; margin-left:auto;}
@media (max-width:640px){ .filter-bar #filterReset{margin-left:0;} }

table.resp-table th.col-expand, table.resp-table td.col-expand{width:1%; text-align:center;}
tr.resp-row{cursor:pointer;}
tr.resp-row .chevron{display:inline-block; color:var(--ink-faint); font-size:16px; font-weight:700; transition:transform .2s ease;}
tr.resp-row.expanded .chevron{transform:rotate(90deg); color:var(--primary-hover);}
tr.detail-row{display:none;}
tr.detail-row.show{display:table-row;}
tr.detail-row td{background:var(--surface-2); padding:20px 22px;}
.detail-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:16px 20px;}
.detail-item{display:flex; flex-direction:column; gap:4px;}
.detail-item .k, .detail-comments .k{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; display:block;}
.detail-item .v{font-size:13px; color:var(--ink); font-weight:700;}
.detail-comments{margin-top:16px; padding-top:16px; border-top:1px solid var(--border);}
.detail-comments .v{display:block; margin-top:4px; font-size:13px; color:var(--ink-soft); font-weight:400; line-height:1.5;}

footer.note{margin-top:30px; font-size:12px; color:var(--ink-faint); text-align:center;}

/* ---------- premium modals ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(33,29,22,.4);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-overlay.show{opacity:1; pointer-events:auto;}
.modal-box{
  background:var(--surface); border-radius:16px; box-shadow:var(--shadow-lg); border:1px solid var(--border);
  width:100%; max-width:400px; padding:28px 26px 26px; transform:translateY(14px) scale(.98); transition:transform .25s cubic-bezier(.2,.9,.3,1.3);
}
.modal-overlay.show .modal-box{transform:translateY(0) scale(1);}
.modal-icon{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.modal-icon svg{width:20px; height:20px;}
.modal-icon.success{background:var(--good-soft); color:var(--good);}
.modal-icon.error{background:var(--warn-soft); color:var(--warn);}
.modal-icon.info{background:var(--primary-soft); color:var(--primary-hover);}
.modal-box h3{font-family:var(--font-display); font-size:18px; margin-bottom:8px; font-weight:800;}
.modal-box p{font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin:0 0 22px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end;}
.modal-actions .btn{appearance:none; border:none; font:inherit; font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:9px; cursor:pointer;}
.modal-actions .btn.primary{background:var(--primary); color:var(--primary-ink);}
.modal-actions .btn.ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--border);}

#authOverlay .modal-box{max-width:360px; text-align:center;}
#authOverlay .modal-icon{margin-left:auto; margin-right:auto;}
#authOverlay input[type=password]{text-align:center; letter-spacing:.14em; font-weight:700;}
#authOverlay .auth-error{color:var(--warn); font-size:12.5px; min-height:16px; margin:-6px 0 12px;}

.spinner{width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; display:inline-block; animation:spin .7s linear infinite; vertical-align:-3px; margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

[hidden]{display:none !important;}

/* ---------- intro splash (data-taking page) ---------- */
#introSplash{
  position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  text-align:center; padding:24px; opacity:1; transition:opacity .7s ease;
}
#introSplash.fade-out{opacity:0; pointer-events:none;}
#introSplash .splash-inner{opacity:0; transform:translateY(10px); animation:splashIn .8s ease forwards .15s;}
#introSplash .eyebrow{opacity:0; animation:splashIn .7s ease forwards .35s; display:block; margin-bottom:14px; color:var(--primary-hover);}
#introSplash h1{font-size:clamp(26px,7vw,42px); color:var(--ink); line-height:1.15; opacity:0; animation:splashIn .8s ease forwards .55s;}
#introSplash .splash-rule{width:44px; height:2px; background:var(--primary); margin:24px auto 0; opacity:0; animation:splashIn .6s ease forwards .9s;}
@keyframes splashIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
body.splash-active{overflow:hidden;}