*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f4f6f9;color:#1f2937}
body.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.wrap{max-width:1100px;margin:0 auto;padding:24px 16px}
h1{font-size:1.4rem;margin:0 0 16px}
h2{font-size:1.1rem;margin:0 0 12px}
.card,.panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:20px}
.card{width:100%;max-width:360px}
.panel{margin-bottom:16px}
.bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}
label{display:block;font-size:.85rem;margin-bottom:12px}
input{display:block;width:100%;padding:8px 10px;margin-top:4px;border:1px solid #cbd5e1;border-radius:6px;font:inherit}
button{background:#1d4ed8;color:#fff;border:0;border-radius:6px;padding:9px 16px;font:inherit;cursor:pointer}
button:hover{background:#1e40af}
button.danger{background:#b91c1c;padding:5px 10px}
form.inline{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
form.inline label{flex:1 1 180px;margin:0}
.notice{background:#e0f2fe;border:1px solid #bae6fd;padding:8px 12px;border-radius:6px;font-size:.9rem}
.notice.err{background:#fee2e2;border-color:#fecaca}
.foot{font-size:.85rem;color:#6b7280;margin-top:16px}
a{color:#1d4ed8}
.scroll{overflow-x:auto;margin-bottom:12px}
table{border-collapse:collapse;width:100%;background:#fff}
th,td{border:1px solid #d1d5db;padding:8px 10px;text-align:center;font-size:.9rem}
table.pop thead th{background:#1f2937;color:#fff}
table.pop thead th.male{background:#1d4ed8}
table.pop thead th.female{background:#be185d}
table.pop td.lvl{text-align:left;font-weight:600;background:#f9fafb;white-space:nowrap}
table.pop tfoot th{background:#e5e7eb;color:#111;font-weight:700}
table.pop td input{width:80px;text-align:center;margin:0;padding:6px}
table.list th{background:#f3f4f6}
table.list td,table.list th{text-align:left}
.incoming-box{margin-top:20px}
table.inc th{background:#1f2937;color:#fff}
table.inc td.lbl,table.inc th.lbl{text-align:left;font-weight:700;white-space:nowrap}
table.inc td.lbl.male{background:#dbeafe;color:#1d4ed8}
table.inc td.lbl.female{background:#fce7f3;color:#be185d}
button.link{background:none;color:#1d4ed8;padding:0 4px;text-decoration:underline}
button.link:hover{background:none}
code.pw{font-size:.9rem}
.muted{color:#9ca3af;font-size:.85rem}

.wrap{max-width:1400px}
table.arts th.arts-title{text-align:left;font-size:1rem}
table.arts-in th.arts-title{background:#e6b8b0;color:#1f2937}
table.arts-out th.arts-title{background:#ffd966;color:#1f2937}
table.arts thead th.male,table.arts thead th.female{background:#374151}
table.arts td input{width:64px}
table.arts-sum td.arts-lbl{background:#e6b8b0;color:#1f2937;white-space:normal;min-width:200px}

.form-wrap{max-width:760px}
.reg fieldset{border:1px solid #e5e7eb;border-radius:8px;margin:0 0 12px;padding:10px 12px}
.reg legend{font-size:.85rem;font-weight:600;padding:0 6px}
.reg .row{display:flex;gap:12px;flex-wrap:wrap}
.reg .row label{flex:1 1 180px}
.reg .row label.narrow{flex:0 0 90px}
.reg select{display:block;width:100%;padding:8px 10px;margin-top:4px;border:1px solid #cbd5e1;border-radius:6px;font:inherit;background:#fff}
.reg label.check{display:flex;gap:10px;align-items:flex-start;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px}
.reg label.check input{width:auto;margin:3px 0 0}
.reg input[readonly]{background:#f3f4f6}
.hp{position:absolute;left:-9999px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs a{padding:6px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;text-decoration:none}
.tabs a.on{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.tabs a.export{margin-left:auto}
table.list td{white-space:nowrap;font-size:.85rem}

.wrap.wide{max-width:none}
table.list th.staff{background:#5b3f8c;color:#fff}
table.list th.grp{background:#ede9f6;color:#3b2a66;text-align:left;font-size:.85rem}
table.list th{white-space:normal;min-width:90px;vertical-align:middle}
table.list td.act{white-space:nowrap}
a.btn{display:inline-block;padding:4px 10px;border:1px solid #1d4ed8;border-radius:6px;text-decoration:none;font-size:.85rem}
.summary{margin-bottom:12px}

table.list td.in{padding:2px}
table.list td.in input,table.list td.in select{width:100%;min-width:110px;margin:0;padding:5px 6px;font-size:.85rem;border:1px solid #e5e7eb;border-radius:4px;background:#fff}
table.list td.in input[type=date]{min-width:135px}
table.list td.in input[type=number]{min-width:80px}
table.list td.bmi{font-weight:700;background:#f5f3ff}
table.list tr.ok td.in input,table.list tr.ok td.in select{background:#ecfdf5}
table.list tr.bad td.in input,table.list tr.bad td.in select{background:#fef2f2}
table.list td.act button{padding:4px 10px;font-size:.85rem}
.tabs a.add{margin-left:auto;background:#047857;color:#fff;border-color:#047857}
.tabs a.add + a{margin-left:0}
.tabs a.export{margin-left:0}

.topnav{margin:-8px 0 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
a.pill{display:inline-block;background:#1d4ed8;color:#fff;text-decoration:none;padding:8px 18px;border-radius:999px;font-weight:600}
a.pill:hover{background:#1e40af}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
table.personnel{margin-bottom:20px}
table.personnel th.title{font-size:1rem}
table.personnel th.sub{background:#374151}
table.personnel th.male{background:#1d4ed8}
table.personnel th.female{background:#be185d}
table.personnel td.lbl.row{background:#f9fafb;color:#1f2937;font-weight:600;white-space:normal}
table.personnel td.tot{font-weight:700;background:#f3f4f6}

table.list th.grp.g2{background:#e0e7ff;color:#1e3a8a}
.reg h2{margin-top:0}

.chip{display:inline-block;font-size:.75rem;padding:2px 10px;border-radius:999px;vertical-align:middle;font-weight:600}
.chip.ok{background:#d1fae5;color:#065f46}.chip.wait{background:#fef3c7;color:#92400e}.chip.bad{background:#fee2e2;color:#991b1b}
table.list td.in input:disabled,table.list td.in select:disabled{background:#f3f4f6;color:#6b7280;cursor:not-allowed}

h2.sect{margin:32px 0 12px}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
.chart-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px 16px}
.chart-card h3{margin:0 0 10px;font-size:.95rem;color:#1f2937}
.chart-card.wide{margin-top:4px}
.chart svg,.chart-card svg{max-width:100%;height:auto;display:block}
.chart-card .pie{max-width:230px;margin:0 auto}
ul.legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem}
ul.legend li{display:flex;align-items:center;gap:6px}
ul.legend i{display:inline-block;width:12px;height:12px;border-radius:3px}
.syform{display:inline-block;margin:0}
.syform label{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem}
.syform select{padding:6px 10px;border:1px solid #cbd5e1;border-radius:6px;font:inherit;background:#fff}

/* ---------- one-screen dashboard with zoomable tiles ---------- */
body.dash{margin:0;height:100vh;overflow:hidden}
body.noscroll{overflow:hidden}
.dashwrap{height:100vh;box-sizing:border-box;display:flex;flex-direction:column;padding:10px 14px;gap:8px}
.dashbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dashbar h1{margin:0;font-size:1.3rem}
.dashbar .topnav{margin:0}
.dashbar .hint{color:#6b7280;font-size:.85rem}
.dashbar a.pill{padding:6px 16px}
.tiles{flex:1;min-height:0;display:grid;gap:10px;grid-template-columns:repeat(5,minmax(0,1fr))}
.tiles.r2{grid-template-rows:repeat(2,minmax(0,1fr))}
.tiles.r3{grid-template-rows:repeat(3,minmax(0,1fr))}
.tile{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;min-height:0;min-width:0;transition:box-shadow .15s,border-color .15s}
.tile.span3{grid-column:span 3}
.tile:hover,.tile:focus-visible{box-shadow:0 4px 14px rgba(0,0,0,.14);border-color:#2563eb;outline:none}
.tile header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile h3{margin:0 0 6px;font-size:.82rem;line-height:1.2;color:#1f2937}
.tile .close,.tile .full{display:none}
.tile .face{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.tile .mini{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.tile .mini svg{width:100%;height:100%;max-width:100%}
.tile.open{display:block;position:fixed;z-index:60;top:4vh;bottom:4vh;left:3vw;right:3vw;overflow:auto;cursor:default;padding:18px 24px;box-shadow:0 20px 60px rgba(0,0,0,.4);border-color:#e5e7eb}
.tile.open header{position:sticky;top:-18px;background:#fff;padding:4px 0 10px;margin-bottom:6px;z-index:2}
.tile.open h3{font-size:1.2rem;margin:0}
.tile.open .face{display:none}
.tile.open .full{display:block}
.tile.open .close{display:inline-block;padding:6px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;font:inherit}
.tile.open .full svg{max-height:68vh}
.tile.open .full svg.pie{max-width:520px;margin:0 auto}
.tile.open ul.legend{justify-content:center;font-size:.95rem}
#backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:55}
#backdrop.on{display:block}
.flist{list-style:none;margin:0;padding:0;font-size:.78rem}
.flist li{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px dashed #eef2f7}
.flist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#374151}
.fbig{text-align:center}.fbig b{display:block;font-size:2.4rem;color:#1f2937;line-height:1.1}.fbig span{font-size:.78rem;color:#6b7280}
.fpair{display:flex;justify-content:space-around;text-align:center}
.fpair b{display:block;font-size:2rem;line-height:1.1}.fpair span{font-size:.78rem}
.fpair .m b,.fpair .m span{color:#1d4ed8}.fpair .f b,.fpair .f span{color:#be185d}
@media (max-width:1000px),(max-height:520px){
    body.dash{height:auto;overflow:auto}
    .dashwrap{height:auto}
    .tiles,.tiles.r2,.tiles.r3{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
    .tile{min-height:190px}
    .tile.span3{grid-column:1 / -1}
    .tile.open{top:2vh;bottom:2vh;left:2vw;right:2vw}
}
.tile.open .close{color:#1f2937;font-weight:600}
.tile.open .close:hover{background:#f3f4f6}
.tile.open .full svg{margin:0 auto}