:root{--navy:#1a2340;--navy2:#243050;--red:#c0392b;--orange:#e67e22;--gold:#f5a623;--success:#27ae60;--warning:#f39c12;--danger:#e74c3c;--bg:#f0f2f7;--white:#fff;--border:#dde1ea;--text:#2d3748;--muted:#718096;--topbar:62px;--r:10px;--shadow:0 2px 12px rgba(0,0,0,.07)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
mark{background:#fff3b0;border-radius:2px;padding:0 1px}

/* ── TOPBAR ── */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar);background:var(--navy);display:flex;align-items:stretch;padding:0;z-index:500;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.topbar-brand{display:flex;align-items:center;gap:10px;padding:0 18px;text-decoration:none;flex-shrink:0;border-right:1px solid rgba(255,255,255,.08)}
.topbar-brand img{height:34px;filter:brightness(0) invert(1)}
.brand-text{font-family:'Nunito',sans-serif;color:#fff;font-weight:900;font-size:16px;white-space:nowrap}

/* Nav links — icon on top, text below */
.nav-link{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(255,255,255,.65);padding:0 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0;transition:color .15s,background .15s;cursor:pointer;border:none;background:none;height:100%}
.nav-link svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-link.active{color:#fff;background:rgba(255,255,255,.13);box-shadow:inset 0 -3px 0 #fff}
.nav-btn{border:none;background:none;height:100%}

/* Dropdown wrapper */
.nav-dropdown-wrap{position:relative;display:flex;align-items:stretch;flex-shrink:0}

/* WHITE dropdown panel — exactly like screenshot */
.drop-panel{position:absolute;top:calc(100% + 2px);left:0;background:#fff;border:1px solid #dde1ea;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.13);min-width:200px;padding:4px 0;display:none;z-index:9999}
.drop-panel.open{display:block}
.drop-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:#2d3748;font-size:13px;font-weight:500;transition:background .12s;white-space:nowrap}
.drop-item svg{width:15px;height:15px;stroke:#718096;fill:none;stroke-width:2;flex-shrink:0}
.drop-item:hover{background:#f5f7fa;color:var(--navy)}
.drop-item:hover svg{stroke:var(--navy)}
.drop-item-active{background:#eef2ff;color:var(--navy);font-weight:600}
.drop-item-active svg{stroke:var(--navy)}

.main-content{margin-top:var(--topbar);padding:18px;min-height:calc(100vh - var(--topbar))}
.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}.page-hdr h1{font-family:'Nunito',sans-serif;font-size:24px;font-weight:900;color:var(--navy)}.hdr-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .18s;text-decoration:none;white-space:nowrap}.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.btn-navy{background:var(--navy);color:#fff!important}.btn-navy:hover,.btn-navy:focus,.btn-navy:active{background:#243050!important;color:#fff!important}.btn-red{background:var(--red);color:#fff!important}.btn-red:hover,.btn-red:focus,.btn-red:active{background:#a93226!important;color:#fff!important}.btn-ghost{background:#fff;color:var(--text);border:1.5px solid var(--border)}.btn-ghost:hover{background:#f0f2f5;color:var(--text)}.btn-success{background:var(--success);color:#fff!important}.btn-warning{background:var(--warning);color:#fff!important}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:6px}.btn-xs{padding:3px 8px;font-size:11px;border-radius:5px}
.filter-bar{background:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow);display:grid;gap:10px}
.g1{grid-template-columns:1fr}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g6{grid-template-columns:repeat(6,1fr)}
.f-group{display:flex;flex-direction:column;gap:4px}.f-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.f-ctrl{padding:8px 10px;border:1.5px solid var(--border);border-radius:7px;font-size:13px;background:#fff;outline:none;transition:border .2s;width:100%}.f-ctrl:focus{border-color:var(--navy)}.f-actions{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.table-card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}.t-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}.t-wrap table{min-width:500px}
thead tr{background:#f7f8fc}th{padding:10px 12px;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);text-align:left;white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid #f2f4f8;vertical-align:middle}tr:last-child td{border-bottom:none}tbody tr:hover td{background:#f9faff}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;white-space:nowrap}
.bg-green{background:#e8f8f0;color:#1a7a47}.bg-yellow{background:#fff8e1;color:#9a6800}.bg-red{background:#fdecea;color:#c0392b}.bg-blue{background:#e3f2fd;color:#1565c0}.bg-navy{background:#e8ebf5;color:#1a2340}.bg-gray{background:#f0f2f5;color:#555}.bg-orange{background:#fff3e0;color:#e65100}
.toggle{position:relative;display:inline-flex;width:38px;height:22px;cursor:pointer;flex-shrink:0}.toggle input{display:none}.toggle-sl{position:absolute;inset:0;border-radius:22px;background:#d0d4dd;transition:.25s}.toggle-sl::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)}.toggle input:checked+.toggle-sl{background:var(--navy)}.toggle input:checked+.toggle-sl::before{transform:translateX(16px)}
.pag-wrap{display:flex;align-items:center;gap:4px;padding:10px 14px;border-top:1px solid var(--border);flex-wrap:wrap}
.pag-btn{min-width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;transition:all .15s;text-decoration:none;color:var(--text);padding:0 6px}.pag-btn:hover:not(.active):not(.disabled){background:#f5f7fb}.pag-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}.pag-btn.disabled{opacity:.4;pointer-events:none}.pag-info{margin-left:auto;font-size:12px;color:var(--muted);font-weight:500}
.modal-bg{position:fixed;inset:0;background:rgba(10,15,30,.52);display:flex;align-items:flex-start;justify-content:center;z-index:500;opacity:0;pointer-events:none;transition:opacity .2s;padding:10px;overflow-y:auto}.modal-bg.open{opacity:1;pointer-events:all}
.modal-box{background:#fff;border-radius:14px;padding:22px;max-width:720px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(-18px);transition:transform .2s;margin:auto}.modal-bg.open .modal-box{transform:translateY(0)}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.modal-title{font-family:'Nunito',sans-serif;font-size:18px;font-weight:800;color:var(--navy)}.modal-close{width:30px;height:30px;border-radius:7px;background:#f0f2f5;border:none;cursor:pointer;font-size:17px;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}.modal-close:hover{background:#e2e5ec}
.form-group{margin-bottom:13px}.form-label{display:block;font-size:11px;font-weight:700;color:var(--text);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}.form-ctrl{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;outline:none;transition:border .2s;background:#fafbfc}.form-ctrl:focus{border-color:var(--navy);background:#fff}textarea.form-ctrl{resize:vertical;min-height:65px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap}
.ac-wrap{position:relative}.ac-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid var(--navy);border-top:none;border-radius:0 0 8px 8px;max-height:190px;overflow-y:auto;z-index:400;display:none;box-shadow:0 6px 20px rgba(0,0,0,.1)}.ac-list.open{display:block}.ac-item{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f2f4f8;transition:background .1s}.ac-item:hover,.ac-item.selected{background:#f0f4ff;color:var(--navy);font-weight:600}.ac-item small{font-size:10px;color:var(--muted);display:block}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat-card{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--shadow);border-left:4px solid var(--navy)}.stat-card.red{border-left-color:var(--red)}.stat-card.gold{border-left-color:var(--gold)}.stat-card.green{border-left-color:var(--success)}.stat-num{font-family:'Nunito',sans-serif;font-size:30px;font-weight:900;color:var(--navy);line-height:1}.stat-label{font-size:10px;color:var(--muted);margin-top:5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.chart-card{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:14px}.chart-title{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:14px}.bar-chart{display:flex;align-items:flex-end;gap:6px;height:150px}.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}.bar{width:100%;border-radius:5px 5px 0 0;min-height:4px;cursor:default;transition:opacity .2s}.bar:hover{opacity:.75}.bar-lbl{font-size:10px;color:var(--muted);font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.bar-val{font-size:10px;font-weight:800;color:var(--navy)}
.section-hdr{background:var(--navy);color:#fff;padding:7px 14px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;border-radius:6px;margin:12px 0 2px}
.q-row{display:grid;align-items:start;padding:8px 10px;border-bottom:1px solid #f2f4f8;gap:8px}.q-row:last-child{border-bottom:none}.q-grid{grid-template-columns:minmax(120px,2fr) minmax(100px,1.5fr) auto}.q-emri{font-size:13px;line-height:1.4;padding-top:3px}
.score-grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.score-opt{display:flex;align-items:center;gap:3px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}.score-opt input{cursor:pointer;accent-color:var(--navy)}
.q-input{width:100%;padding:6px 9px;border:1.5px solid var(--border);border-radius:6px;font-size:12px;outline:none;background:#fafbfc}.q-input:focus{border-color:var(--navy)}
.drop-zone{border:2px dashed var(--border);border-radius:10px;padding:18px;text-align:center;color:var(--muted);font-size:13px;margin:10px 0;cursor:pointer;transition:all .2s}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--navy);background:#f8f9ff}.drop-zone strong{color:var(--red)}
.file-preview-list{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-direction:column;gap:4px}.file-preview-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f5f7fb;border-radius:7px;font-size:12px}.file-preview-item .fname{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-preview-item .fsize{color:var(--muted);flex-shrink:0}.file-preview-item .fdel{background:none;border:none;cursor:pointer;color:#e74c3c;font-size:16px;line-height:1;flex-shrink:0}
.alert{padding:10px 15px;border-radius:8px;font-size:13px;font-weight:500;margin-bottom:12px;display:flex;align-items:center;gap:8px}.alert-success{background:#e8f8f0;color:#1a7a47;border-left:4px solid var(--success)}.alert-danger{background:#fdecea;color:#c0392b;border-left:4px solid var(--danger)}.alert-warning{background:#fff8e1;color:#9a6800;border-left:4px solid var(--warning)}.alert svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.ip-block-msg{background:#fff8e1;border:2px solid var(--warning);border-radius:10px;padding:14px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px}.ip-block-msg svg{width:22px;height:22px;stroke:var(--warning);fill:none;stroke-width:2;flex-shrink:0}.ip-block-msg .ib-title{font-weight:700;color:#9a6800;font-size:14px}.ip-block-msg .ib-sub{font-size:12px;color:#9a6800}
#toast{position:fixed;bottom:18px;right:18px;z-index:9999;background:var(--navy);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.2);opacity:0;transform:translateY(14px);transition:all .3s;pointer-events:none;max-width:300px}#toast.show{opacity:1;transform:translateY(0)}#toast.err{background:var(--red)}
.report-card{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:14px}.report-title{font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;color:var(--navy);margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.kv-item .kv-l{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}.kv-item .kv-v{font-size:14px;font-weight:600;color:var(--text)}
.dt-display{background:#f0f4ff;border:1.5px solid #c5d0f0;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:7px}
/* Mobile card table */
@media(max-width:600px){
  .t-wrap table{min-width:0}
  .t-wrap table thead{display:none}
  .t-wrap table tr{display:block;border:1px solid var(--border);border-radius:10px;margin:8px 0;padding:10px 12px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05)}
  .t-wrap table td{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border:none;font-size:13px;flex-wrap:wrap;gap:4px}
  .t-wrap table td[data-label]:before{content:attr(data-label);font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;margin-right:6px;min-width:80px}
  .t-wrap table td:last-child{padding-top:8px;border-top:1px solid #f2f4f8;margin-top:4px;justify-content:flex-end}
}
@media(max-width:1100px){.stats-grid{grid-template-columns:1fr 1fr}.filter-bar.g5,.filter-bar.g6{grid-template-columns:repeat(3,1fr)}.kv-grid{grid-template-columns:repeat(2,1fr)}.form-row3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.main-content{padding:10px}.topbar-brand span{display:none}.nav-link{padding:6px 7px;font-size:9px}.nav-link svg{width:16px;height:16px}.filter-bar.g2,.filter-bar.g3,.filter-bar.g4,.filter-bar.g5,.filter-bar.g6{grid-template-columns:1fr 1fr}.form-row,.form-row3{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.q-grid{grid-template-columns:1fr;gap:5px}.kv-grid{grid-template-columns:1fr 1fr}.modal-box{padding:16px}}
@media(max-width:480px){.filter-bar.g2,.filter-bar.g3,.filter-bar.g4,.filter-bar.g5,.filter-bar.g6{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}.page-hdr h1{font-size:20px}}
@media print{
  .topbar,.filter-bar,.hdr-actions,.pag-wrap,#toast,.btn,.modal-bg,.no-print,
  nav,.nav-items,.nav-user,.topbar-brand,form,.alert{display:none!important}
  .main-content{margin:0!important;padding:0!important}
  body{background:#fff!important}
  .print-area{display:block!important}
  .table-card,.report-card{box-shadow:none!important;border:1px solid #ddd}
  .page-hdr h1{font-size:16px;margin-bottom:8px}
  table{width:100%;border-collapse:collapse}
  th,td{border:1px solid #ccc;padding:5px 8px;font-size:11px}
  th{background:#f0f0f0!important;-webkit-print-color-adjust:exact}
  .badge{border:1px solid #ccc;background:transparent!important;color:#000!important}
}
.fpl-item{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f5f7fb;border-radius:7px;font-size:12px;list-style:none}.fpl-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fpl-rm{background:none;border:none;cursor:pointer;color:#e74c3c;font-size:15px;line-height:1;flex-shrink:0;padding:0 2px}

.role-checkbox-grid{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.role-cb-item{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 2px}
.role-cb-item input[type=checkbox]{width:15px;height:15px;accent-color:var(--navy);cursor:pointer;flex-shrink:0}
.role-cb-item:hover .badge{opacity:.85}
.q-row.q-required{background:#fff8e1;border-left:3px solid var(--warning);border-radius:6px;padding-left:8px;transition:background .3s}
.q-row.q-required .q-emri{color:#9a6800}


/* ── LOGIN PAGE ───────────────────────────────── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#eef0f5;padding:20px}
.login-card{background:#fff;border-radius:12px;padding:40px 40px 32px;width:100%;max-width:420px;box-shadow:0 4px 32px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center}
.login-logo{width:120px;height:auto;margin-bottom:18px;border-radius:8px;object-fit:contain}
.login-welcome{font-family:'Nunito',sans-serif;font-size:28px;font-weight:800;color:var(--navy);margin-bottom:4px;letter-spacing:-.3px}
.login-sub{font-size:14px;color:var(--muted);margin-bottom:26px;font-weight:400}
.login-error{width:100%;background:#fdecea;color:#c0392b;border-left:4px solid var(--red);border-radius:6px;padding:10px 12px;font-size:13px;font-weight:500;margin-bottom:14px}
.login-field{width:100%;margin-bottom:16px}
.login-field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.login-field input{width:100%;padding:11px 14px;border:1.5px solid #dde1ea;border-radius:8px;font-size:14px;color:var(--text);outline:none;transition:border-color .2s;font-family:'Inter',sans-serif;background:#f8f9fb}
.login-field input:focus{border-color:var(--navy);background:#fff}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;display:flex;align-items:center}
.pw-eye svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
.login-btn{width:100%;padding:13px;background:var(--navy);color:#fff!important;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;letter-spacing:.3px;transition:background .2s;font-family:'Inter',sans-serif}
.login-btn:hover,.login-btn:focus,.login-btn:active{background:#243050!important;color:#fff!important}
.login-footer{font-size:12px;color:#bbb;margin-top:22px;font-weight:400}