:root{--blue:#3a5a8c;--blue-line:#9fb3d3;--blue-text:#24447a;--tint:#f3f5f9;--ink:#1c1e21}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Devanagari",sans-serif;background:#fff;color:var(--ink)}
header{background:#fff;color:var(--blue-text);padding:8px 16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;border-bottom:2px solid var(--blue)}
header .brand{color:var(--blue-text);font-weight:700;text-decoration:none}
header nav.main a{color:var(--blue-text);margin-right:16px;text-decoration:none}
header nav.main a:hover{text-decoration:underline}
.menus{margin-left:auto;display:flex;gap:6px;align-items:center}
details.menu{position:relative}
details.menu summary{list-style:none;cursor:pointer;padding:6px 10px;border-radius:5px;color:var(--blue-text);border:1px solid transparent;user-select:none}
details.menu summary::-webkit-details-marker{display:none}
details.menu summary::after{content:" \25BE"}
details.menu[open] summary,details.menu summary:hover{background:var(--tint);border-color:var(--blue-line)}
.menu-items{position:absolute;right:0;top:100%;margin-top:4px;min-width:170px;background:#fff;border:1px solid var(--blue);border-radius:8px;box-shadow:0 4px 14px rgba(36,52,77,.18);padding:6px 0;z-index:10}
.menu-items a{display:block;padding:8px 14px;color:var(--ink);text-decoration:none}
.menu-items a:hover{background:var(--tint)}
.menu-items .who{padding:4px 14px 8px;color:#667;font-size:.85rem;border-bottom:1px solid var(--blue-line);margin-bottom:4px}
main{max-width:960px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:.3em 0 .8em;color:var(--blue-text)}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:.3em 0 .8em}
.titlebar h1{margin:0}
.title-actions{display:flex;gap:8px}
.crumbs{color:#667;font-size:.9rem;margin:0}
a{color:#1a5fb4;text-decoration:none}
.flash{padding:8px 12px;border-radius:6px;margin-bottom:12px;border:1px solid transparent}
.flash.ok{background:#e1f5e5;color:#145a24;border-color:#a9d8b4}.flash.err{background:#fde4e4;color:#8a1c1c;border-color:#efb3b3}
.hint{color:#667;font-size:.9rem}
.note{color:#667;font-size:.8rem;font-weight:400;margin:.5rem 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--tint);border:1px solid var(--blue);border-radius:8px;padding:8px 10px;margin:0 0 8px}
.row.add{background:#e6edf8}
.row .actions{margin-left:auto;display:flex;gap:8px}
input[type=text],input[type=password],input:not([type]),input[type=number],select{padding:6px 8px;border:1px solid var(--blue-line);border-radius:5px;font:inherit;background:#fff}
input:focus,select:focus{outline:2px solid #bcd0ee;border-color:var(--blue)}
input[name=name]{flex:1;min-width:160px}
input.narrow{width:70px}
input.wide{flex:1;min-width:220px}
.opts label{margin-right:8px;font-size:.9rem;white-space:nowrap}
.typebox{flex:0 0 100%}
.typebox summary{cursor:pointer;font-size:.9rem;color:#1a5fb4;padding:2px 0}
.typebox .typegrid{margin-top:6px}
.typegrid{display:grid;grid-template-columns:repeat(2,max-content);column-gap:24px;row-gap:4px;align-items:center}
.typeopt{display:flex;align-items:center;gap:8px;white-space:nowrap}
.typeopt .tname{flex:0 0 15em;margin-right:0}
.typeopt .byhand{margin-right:0;font-size:.85rem;color:#445}
@media (max-width:820px){.typegrid{grid-template-columns:max-content}}
button{padding:6px 12px;border:0;border-radius:5px;background:#1a5fb4;color:#fff;font:inherit;cursor:pointer}
button.danger{background:#b3261e}
button.grey{background:#667}
button:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--tint);border:1px solid var(--blue);border-radius:8px;padding:12px 16px;margin-bottom:12px}
.big{font-size:1.5rem;font-weight:600}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stats div{background:var(--tint);border:1px solid var(--blue);border-radius:8px;padding:10px 16px;min-width:110px}
.stats b{display:block;font-size:1.4rem}
label.field{display:flex;flex-direction:column;gap:8px;font-weight:500}
label.field input,label.field select{font-weight:400;width:100%}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:16px;max-width:380px}
.login{max-width:380px;margin:8vh auto;padding:0 16px}
.login form{background:var(--tint);border:1px solid var(--blue);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:16px}
.menu-items button{display:block;width:100%;text-align:left;padding:8px 14px;background:none;color:var(--ink);border-radius:0;font:inherit}
.menu-items button:hover{background:var(--tint)}
.cols{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start}
.cols>.card{flex:1;min-width:290px;margin-bottom:0}
.cols .stack{max-width:none}
dialog{border:1px solid var(--blue);border-radius:10px;padding:18px 20px;width:92%;max-width:400px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(36,52,77,.45)}
dialog h2{margin:0;font-size:1.15rem;color:var(--blue-text)}
dialog .stack{max-width:none}
.card.sect{padding:0;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.card-h{padding:10px 16px;font-weight:600;color:#fff;background:var(--blue);border-bottom:1px solid var(--blue)}
.card-b{padding:16px;background:var(--tint);flex:1 1 auto}
.card-b.stack{display:flex;flex-direction:column;gap:16px;max-width:none}
.card-f{padding:10px 16px;background:#fff;border-top:1px solid var(--blue);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;flex:0 0 auto}
.at{display:flex;align-items:stretch}
.at>span{padding:6px 8px;border:1px solid var(--blue-line);border-right:0;border-radius:5px 0 0 5px;background:var(--tint);color:#667}
.at>input{flex:1;min-width:0;border-radius:0 5px 5px 0}
textarea{padding:6px 8px;border:1px solid var(--blue-line);border-radius:5px;font:inherit;background:#fff;resize:vertical}
textarea:focus{outline:2px solid #bcd0ee;border-color:var(--blue)}
label.field textarea{font-weight:400;width:100%}
.field-label{font-weight:500}
.qform{max-width:720px;display:flex;flex-direction:column;gap:16px}
.tsec{display:flex;flex-direction:column;gap:16px}
.tsec[hidden]{display:none}
.optrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.optrow input[type=radio]{flex:0 0 auto}
.optrow input:not([type=radio]){flex:1;min-width:0}
.imgs{display:flex;gap:12px;flex-wrap:wrap}
.imgbox{border:1px solid var(--blue-line);border-radius:8px;padding:8px;background:var(--tint);display:flex;flex-direction:column;gap:6px;max-width:180px}
.thumb{max-width:160px;max-height:110px;object-fit:contain;background:#fff;border:1px solid var(--blue-line);border-radius:4px}
.tablewrap{overflow-x:auto}
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{padding:8px;border-bottom:1px solid var(--blue-line);text-align:left;vertical-align:top}
table.list td.actions{white-space:nowrap}
form.inl{display:inline-flex;gap:8px;margin-left:8px}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;background:#e6edf8;color:var(--blue-text);font-size:.8rem;white-space:nowrap}
.pager{display:flex;gap:16px;align-items:center}
.qform input[hidden]{display:none}

/* changing numbers (templates, SPEC 3c) */
.tplbox{border:1px solid #cfd6df;border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:12px}
.tplbox[hidden]{display:none}
.tplbox legend{font-weight:600;padding:0 6px}
.tplbox .check{display:flex;gap:8px;align-items:center;font-weight:500}
.tplbox [hidden]{display:none}
.tplrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.tplrow input{min-width:0}
.tplrow input:first-child{flex:0 0 110px}
.tplrow input:nth-child(3){flex:1}
.tplout{display:flex;flex-direction:column;gap:8px}
.tplsample{border:1px solid #e1e5ea;border-radius:6px;padding:8px 12px}
.tplsample .q{font-weight:500}
.tplsample ul{margin:6px 0;padding-left:20px}
.tplsample li.right{font-weight:600}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}

/* Question types page */
.typecard summary{cursor:pointer;font-size:1.1rem;font-weight:600;padding:2px 0}
.typecard summary .hint{font-size:.85rem;font-weight:400}
.typecard[open] summary{margin-bottom:10px}
.typecard dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}
.typecard dt{font-weight:600}
.typecard dd{margin:0}
@media (max-width:600px){.typecard dl{grid-template-columns:1fr}.typecard dt{margin-top:6px}}

.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;min-width:0;padding-right:38px}
.pw-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);padding:4px 6px;background:transparent;color:#667;border:0;line-height:0}
.pw-eye:hover{color:var(--blue,#1a5fb4);background:transparent}

.typerow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.typerow label.field{flex:0 1 320px}
.tplbtn{white-space:nowrap}
.tplon{margin-left:8px;padding:1px 7px;border-radius:10px;background:#fff;color:#1a5fb4;font-size:.8rem;font-weight:600}
dialog.tpldlg{max-width:680px;max-height:90vh;overflow:auto}
dialog.tpldlg>*+*{margin-top:12px}
dialog.tpldlg .btns{display:flex;justify-content:flex-end}
dialog.tpldlg .check{display:flex;gap:8px;align-items:center;font-weight:500}
dialog.tpldlg [hidden]{display:none}

/* Preview dialog and samples (includes/preview_ui.php) */
dialog.pvdlg{max-width:560px}
.pvq{font-weight:500;white-space:pre-wrap}
.pvq .blank{display:inline-block;min-width:5.5em;border-bottom:2px solid #7d8794;margin:0 2px}
.tplsample .hint{margin-top:6px}
.pvopts{list-style:none;padding-left:0!important;margin:8px 0}
.pvopts li{border:1px solid #d3d9e0;border-radius:6px;padding:7px 10px;margin-bottom:6px}
.pv-shown .pvopts li.isright{border-color:#2e7d32;background:#eef7ee;font-weight:600}
.pvbox{border:1px solid #d3d9e0;border-radius:6px;padding:8px 10px;margin:8px 0;color:#7d8794;background:#fafbfc}
.pvtable{border-collapse:collapse;margin:8px 0;max-width:100%}
.pvtable td,.pvtable th{border:1px solid #d3d9e0;padding:5px 10px;text-align:left}
.pvtable th{background:#f2f5f8}
.pvshow{margin-top:6px}
.pvreveal{margin-top:8px;padding:8px 10px;border-left:3px solid #2e7d32;background:#f6faf6}
.pvreveal ul,.pvreveal ol{margin:4px 0;padding-left:20px}
.pvlabel{font-size:.8rem;font-weight:600;color:#2e7d32;text-transform:uppercase;letter-spacing:.03em}
dialog.pvdlg .btns{gap:8px}

/* Example dialog (includes/example_ui.php) */
.linkbtn{background:none;border:0;padding:6px 4px;color:var(--blue,#1a5fb4);text-decoration:underline;font:inherit;cursor:pointer;white-space:nowrap}
.linkbtn:hover{background:none;text-decoration:none}
dialog.exdlg{max-width:620px}
.exitem{border:1px solid #d3d9e0;border-radius:8px;padding:10px 14px;margin-bottom:12px;background:#fafbfc}
.exitem h3{margin:0 0 6px;font-size:1rem;color:var(--blue-text)}
.exitem p{margin:8px 0}
.exq{border-left:3px solid var(--blue-line,#bcd0ee);padding:2px 10px;white-space:pre-wrap}
.exlabel{display:block;font-size:.75rem;font-weight:600;color:#667;text-transform:uppercase;letter-spacing:.03em}

/* Number answer fields: one-line labels, boxes on one line, notes underneath */
.numgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:6px 16px;align-items:start}
.numgrid label.field{white-space:normal}
.numgrid label.field>span{display:block;white-space:nowrap}
.numgrid .note{display:block;font-weight:400;margin-top:4px}
@media (max-width:640px){.numgrid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.numgrid{grid-template-columns:1fr}}
.exlist{margin:0 0 6px;padding-left:20px}.exlist li{margin-bottom:6px}
.optrow input[type=checkbox]{flex:0 0 auto}
.fixpos{flex:0 0 auto;white-space:nowrap;font-weight:400;font-size:.85rem;color:#556;display:flex;gap:4px;align-items:center}
.pvfixed{font-size:.8rem;font-weight:400;color:#7d8794}
@media (max-width:480px){.optrow{flex-wrap:wrap}.optrow input:not([type=radio]):not([type=checkbox]){flex:1 1 60%}}

/* classes page: label / number / section with small captions */
.classrow{align-items:flex-end;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;font-size:12px;color:#666;gap:2px}
.fld input{font-size:14px}
/* archive: archived rows are greyed, the badge says so, and Show archived is a small link above the list */
.row.archived{opacity:.6;background:#eee;border-color:#999}
.badge.arch{background:#ddd;color:#444}
.archnav{margin:0 0 8px;font-size:.9rem}
tr.archived{opacity:.6;background:#eee}

/* Notes page */
.btnlink{display:inline-block;padding:6px 12px;border-radius:5px;background:#1a5fb4;color:#fff;text-decoration:none}
.noterow{align-items:flex-end}
.noterow .fld input[type=file]{font-size:13px;max-width:230px}
.noterow .fld input[name=title]{width:200px;max-width:100%}
.noterow .kindbox{display:flex;gap:4px;flex-wrap:wrap}
.noterow .kindbox select,.noterow .fld select{font-size:14px}
.noterow .kindnew{width:130px;font-size:14px}
.noterow .acts{display:flex;gap:8px;flex-wrap:wrap}
.noteinfo{flex-basis:100%;font-size:.85rem;color:#556}
table.list tr.latest td{background:#f2f7ff;font-weight:600}