:root{
  --blue:#3478F6;--blue2:#1553C7;--cyan:#45D4D0;--mint:#BDF4E8;
  --bg:#F4F7FC;--surface:#FFFFFF;--ink:#14213D;--muted:#6D7B91;--line:#E5EBF4;
  --success:#16A978;--warning:#F4A62A;--danger:#E5485D;
  --shadow:0 18px 55px rgba(31,73,125,.12);--shadow-soft:0 8px 28px rgba(31,73,125,.08);
  --grad:linear-gradient(135deg,var(--blue2) 0%,var(--blue) 52%,var(--cyan) 100%);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}
body{background:radial-gradient(circle at 10% 0%,rgba(69,212,208,.14),transparent 26%),radial-gradient(circle at 96% 10%,rgba(52,120,246,.13),transparent 28%),var(--bg)}
.logo-mark{width:48px;height:48px;border-radius:16px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:23px;font-weight:900;box-shadow:0 10px 28px rgba(52,120,246,.28)}
.brand-lockup{display:flex;gap:12px;align-items:center}.brand-name{font-size:15px;font-weight:900;letter-spacing:.12em}.brand-sub{font-size:10px;letter-spacing:.19em;opacity:.72;margin-top:2px}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--blue2);font-weight:900;text-transform:uppercase}.panel{background:rgba(255,255,255,.98);border:1px solid rgba(219,229,242,.95);border-radius:24px;box-shadow:var(--shadow)}
/* Public portal – KRD PASS / ID & QR visual language */
.portal-shell{min-height:100vh;display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);padding:24px;gap:24px;max-width:1480px;margin:auto}.brand-panel{position:relative;overflow:hidden;background:var(--grad);color:#fff;padding:34px;border-radius:28px;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(30,83,174,.24);isolation:isolate}.brand-panel:before,.brand-panel:after{content:"";position:absolute;border-radius:999px;z-index:-1}.brand-panel:before{width:270px;height:270px;right:-95px;top:-90px;background:rgba(255,255,255,.13)}.brand-panel:after{width:220px;height:220px;left:-95px;bottom:-90px;background:rgba(189,244,232,.16)}.brand-panel .logo-mark{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);box-shadow:none;backdrop-filter:blur(8px)}.brand-panel .brand-sub{color:rgba(255,255,255,.72)}.brand-panel .brand-lockup{margin-bottom:auto}.brand-copy{padding:72px 0 54px}.module-tag{display:inline-flex;padding:7px 11px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.10);border-radius:999px;color:#fff;font-size:10px;letter-spacing:.14em;font-weight:800;backdrop-filter:blur(8px)}.brand-copy h1{font-size:44px;line-height:1.04;margin:18px 0 16px;letter-spacing:-.035em}.brand-copy p{margin:8px 0;color:rgba(255,255,255,.80);line-height:1.58}.brand-foot{font-size:11px;color:rgba(255,255,255,.67);letter-spacing:.04em}.portal-main{display:grid;place-items:center;padding:12px}.portal-card{width:min(900px,100%);padding:30px}.panel-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid var(--line)}.panel-head h2,.table-tools h2{margin:5px 0 6px;font-size:29px;letter-spacing:-.025em}.deadline-box{min-width:235px;padding:13px 15px;border:1px solid #DCE6F3;border-radius:17px;background:linear-gradient(180deg,#fff,#F8FBFF);box-shadow:var(--shadow-soft)}.deadline-box span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:800}.deadline-box strong{display:block;font-size:13px;margin:5px 0 9px}.status-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:#EEF3F8;font-size:10px;font-weight:800}.status-badge.ok{background:#E8F8F2;color:var(--success)}.status-badge.ok:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status-badge.closed{background:#FFF0F2;color:var(--danger)}
.form-grid{display:grid;gap:19px;margin-top:24px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field-wide{grid-column:1/-1}.form-grid label>span{display:block;font-size:12px;font-weight:800;margin-bottom:7px}.form-grid input,.table-tools input,.table-tools select{width:100%;border:1px solid #D8E2EF;border-radius:14px;padding:13px 14px;background:#fff;outline:none;transition:.16s}.form-grid input:focus,.table-tools input:focus,.table-tools select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(52,120,246,.10)}.photo-section{border-top:1px solid var(--line);padding-top:20px}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.section-label>span{font-size:12px;font-weight:900}.section-label small{color:var(--muted)}.photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.photo-choice{border:1px solid #DDE6F2;border-radius:18px;background:#fff;padding:17px;display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;transition:.18s;box-shadow:0 5px 16px rgba(30,73,125,.04)}.photo-choice:hover{border-color:#AFC7F6;background:#F8FBFF;transform:translateY(-2px);box-shadow:var(--shadow-soft)}.choice-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#E9F2FF,#DFF9F7);color:var(--blue);display:grid;place-items:center;font-size:24px;font-weight:900}.photo-choice strong,.photo-choice small{display:block}.photo-choice small{color:var(--muted);font-size:11px;margin-top:3px}.photo-preview-card{margin-top:15px;border:1px solid #DDE6F2;border-radius:20px;overflow:hidden;width:min(340px,100%);background:#fff;box-shadow:var(--shadow-soft)}.photo-preview-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.photo-caption{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line)}.photo-caption strong{font-size:13px;text-align:center;flex:1}.photo-caption button{border:0;background:#EEF4FF;color:var(--blue2);padding:7px 9px;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}.requirements{border-radius:15px;background:linear-gradient(135deg,#F7FAFF,#F1FBFA);border:1px solid #E3EDF7;padding:13px 14px;font-size:12px;display:flex;gap:10px;flex-wrap:wrap}.requirements span{color:var(--muted)}.primary,.button{border:0;border-radius:13px;padding:12px 15px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:.16s}.primary,.button.accent{background:var(--grad);color:#fff;box-shadow:0 10px 22px rgba(52,120,246,.20)}.primary:hover,.button.accent:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(52,120,246,.25)}.primary{min-height:48px}.primary:disabled{opacity:.55;cursor:not-allowed;transform:none}.button.ghost{background:#fff;border:1px solid #DCE5F0;color:#2D3C56}.button.danger{background:#FFF0F2;color:var(--danger)}.message{min-height:18px;font-size:12px}.message.error{color:var(--danger)}.message.success{color:var(--success);font-weight:800}
.modal{position:fixed;inset:0;background:rgba(14,28,55,.70);display:grid;place-items:center;padding:18px;z-index:100;backdrop-filter:blur(5px)}.camera-modal-card{width:min(570px,100%);background:#fff;border-radius:24px;padding:19px;box-shadow:0 30px 90px rgba(0,0,0,.28)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:13px}.modal-head h3{margin:4px 0}.icon-btn{border:0;background:#EEF3F8;width:36px;height:36px;border-radius:11px;font-size:22px;cursor:pointer}.camera-stage{position:relative;border-radius:20px;overflow:hidden;background:#0F203B;aspect-ratio:1/1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.camera-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-guide{position:absolute;inset:12% 20%;border:2px dashed rgba(255,255,255,.78);border-radius:44%;box-shadow:0 0 0 999px rgba(10,23,45,.08)}.camera-actions{display:flex;gap:10px;margin-top:12px}.camera-actions>*{flex:1}
/* Admin */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 20% 0%,rgba(69,212,208,.16),transparent 30%),linear-gradient(145deg,#EEF4FF,#F9FBFE)}.login-card{width:min(430px,100%);padding:30px}.login-card .logo-mark{margin-bottom:14px}.login-card h1{margin:8px 0 4px}.compact{margin-top:20px}.app-shell{min-height:100vh;display:grid;grid-template-columns:246px 1fr}.sidebar{background:linear-gradient(180deg,#143A78 0%,#1553C7 48%,#3478F6 100%);color:#fff;padding:22px 16px;display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(32,75,150,.12)}.sidebar .logo-mark{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);box-shadow:none}.sidebar .brand-lockup{padding:3px 8px 25px}.sidebar .brand-sub{color:rgba(255,255,255,.72)}.sidebar nav{display:grid;gap:6px}.nav-item{color:rgba(255,255,255,.72);text-decoration:none;padding:12px 13px;border-radius:13px;font-size:13px;font-weight:700;display:flex;gap:10px;align-items:center}.nav-item.active,.nav-item:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding:16px 9px 4px;font-size:11px;color:rgba(255,255,255,.70)}.app-main{padding:26px 30px 50px;min-width:0}.topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}.topbar h1{font-size:29px;margin:4px 0 0;letter-spacing:-.025em}.actions{display:flex;gap:8px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:15px}.stat{background:#fff;border:1px solid #E1E9F3;border-radius:18px;padding:16px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}.stat:after{content:"";position:absolute;width:78px;height:78px;border-radius:50%;right:-30px;top:-32px;background:linear-gradient(135deg,rgba(52,120,246,.10),rgba(69,212,208,.16))}.stat-top{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:800}.stat-top b{color:var(--blue);font-size:10px}.stat .v{font-size:28px;font-weight:900;margin:7px 0 1px}.stat small{color:var(--muted)}.admin-card{padding:18px}.table-tools{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:15px}.table-tools h2{font-size:21px}.tool-controls{display:grid;grid-template-columns:minmax(240px,380px) 100px;gap:8px}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}.staff-card{border:1px solid #E0E8F2;border-radius:19px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(31,73,125,.06);transition:.18s}.staff-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}.staff-photo{display:block;background:linear-gradient(135deg,#EEF4FF,#E9FAF8);aspect-ratio:1/1;overflow:hidden}.staff-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:.2s}.staff-photo:hover img{transform:scale(1.025)}.staff-name{padding:12px 11px 5px;font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.staff-meta{padding:0 11px 10px;display:grid;gap:3px;color:var(--muted);font-size:10px;text-align:center}.staff-foot{border-top:1px solid var(--line);padding:8px 9px;display:flex;justify-content:space-between;align-items:center;gap:7px}.staff-foot small{color:var(--muted);font-size:9px}.delete-btn{border:0;background:#FFF0F2;color:var(--danger);padding:7px 9px;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px}.empty-state{grid-column:1/-1;padding:48px;text-align:center;color:var(--muted);border:1px dashed #CCD9E8;border-radius:18px;background:#FBFDFF}
@media(max-width:1000px){.portal-shell{grid-template-columns:1fr;padding:14px;align-content:start}.brand-panel{padding:23px;min-height:auto}.brand-panel .brand-lockup{margin-bottom:22px}.brand-copy{padding:18px 0}.brand-copy h1{font-size:32px}.brand-foot{display:none}.portal-main{place-items:start center;width:100%}.app-shell{grid-template-columns:1fr}.sidebar{display:none}.app-main{padding:20px 14px 40px}.topbar{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:repeat(2,1fr)}.actions{width:100%}.actions .button{flex:1}.table-tools{align-items:stretch;flex-direction:column}.tool-controls{grid-template-columns:1fr 90px}}
@media(max-width:1000px){html,body{width:100%;overflow-x:hidden}.portal-shell{min-height:auto;padding:0;gap:0;width:100%;max-width:none}.brand-panel{border-radius:0 0 22px 22px;padding:14px 16px 16px;display:grid;grid-template-columns:1fr;gap:9px}.brand-panel .brand-lockup{margin-bottom:0}.brand-copy{padding:0}.brand-copy h1{font-size:clamp(25px,4vw,30px);margin:8px 0 0;line-height:1.02}.brand-copy p{display:none}.module-tag{font-size:9px;padding:5px 9px}.brand-foot{display:none}.portal-main{padding:7px;width:100%}.portal-card{width:100%;padding:20px 16px;border-radius:18px;margin:0}.panel-head{flex-direction:column;gap:12px;padding-bottom:17px}.panel-head h2{font-size:28px}.panel-head .muted{font-size:15px;line-height:1.45}.deadline-box{width:100%;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}.deadline-box span,.deadline-box strong{grid-column:1}.deadline-box strong{font-size:14px;margin:4px 0 0}.deadline-box .status-badge{grid-column:2;grid-row:1/3}.form-grid{gap:20px;margin-top:20px}.field-grid,.photo-actions{grid-template-columns:1fr}.field-wide{grid-column:auto}.form-grid label>span{font-size:13px;margin-bottom:8px}.form-grid input{min-width:0;min-height:52px;font-size:16px;padding:14px 15px}.section-label{align-items:flex-start;flex-direction:column;gap:4px}.section-label>span{font-size:14px}.section-label small{font-size:12px}.photo-choice{width:100%;min-width:0;min-height:64px;padding:15px}.photo-choice strong{font-size:16px}.photo-choice small{font-size:12px}.requirements{line-height:1.5;font-size:13px}.primary{width:100%;min-height:54px;font-size:16px}.camera-modal-card{max-height:calc(100dvh - 24px);overflow:auto;padding:14px}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.staff-name{font-size:11px}.tool-controls{grid-template-columns:1fr}.stats{gap:8px}.stat{padding:12px;border-radius:16px}.stat .v{font-size:23px}.topbar h1{font-size:25px}.button{font-size:12px}}
@media(max-width:420px){.brand-panel{padding:12px 13px 14px}.logo-mark{width:42px;height:42px;border-radius:13px}.brand-name{font-size:13px}.brand-copy h1{font-size:24px}.portal-main{padding:5px}.portal-card{padding:17px 13px}.panel-head h2{font-size:25px}.panel-head .muted{font-size:14px}.photo-choice{padding:14px}.choice-icon{width:38px;height:38px}.camera-actions{flex-direction:column}}