:root{
  --navy:#071a3d;--navy2:#0b2858;--blue:#0b57d0;--blue2:#2f7df4;--gold:#f4b400;
  --bg:#f5f7fb;--panel:#fff;--ink:#12213d;--muted:#68758b;--line:#dce4f0;
  --green:#147a4a;--red:#b42318;--orange:#b54708;--shadow:0 18px 50px rgba(7,26,61,.09);
  --radius:18px
}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Manrope,Arial,sans-serif}
a{color:inherit}button,input,select,textarea{font:inherit}.shell{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.sidebar{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:12px;align-items:center;padding:10px}.brand-badge{width:44px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff,#e7efff);display:grid;place-items:center;color:var(--navy);font-weight:900}.brand strong{font-size:14px;display:block}.brand small{opacity:.72}
.nav-title{margin:20px 10px 8px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.nav{display:grid;gap:6px}.nav a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:13px;text-decoration:none;color:#fff;opacity:.86}.nav a:hover,.nav a.active{background:rgba(255,255,255,.12);opacity:1}.nav a.active{background:#fff;color:var(--navy);font-weight:800}
.nav .ico{width:24px;text-align:center}.sidebar-user{margin-top:18px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06)}.sidebar-user small{opacity:.7}.sidebar-user a{display:inline-block;margin-top:9px;color:#fff;font-size:12px}
.main{min-width:0}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}.menu-btn{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}.content{padding:24px;max-width:1440px;margin:auto}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.page-head h1{font-size:26px;margin:0 0 5px}.page-head p{margin:0;color:var(--muted)}.actions{display:flex;gap:9px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;padding:10px 14px;background:var(--blue);color:#fff;font-weight:800;text-decoration:none;cursor:pointer}.btn:hover{filter:brightness(.98)}.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.danger{background:var(--red)}.btn.success{background:var(--green)}.btn.sm{padding:7px 10px;font-size:12px}.btn:disabled{opacity:.55;cursor:not-allowed}
.grid{display:grid;gap:16px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card.pad{padding:18px}.metric .label{font-size:12px;color:var(--muted);font-weight:700}.metric .value{font-size:30px;font-weight:900;margin-top:6px}.metric .sub{font-size:12px;color:var(--muted);margin-top:5px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}.panel-head h2{margin:0;font-size:16px}.panel-body{padding:18px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:760px}.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}.table th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:#fbfcff}.table tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;background:#eef3ff;color:var(--blue)}.badge.green{background:#eaf8f0;color:var(--green)}.badge.red{background:#fff0ef;color:var(--red)}.badge.orange{background:#fff4e8;color:var(--orange)}.badge.gray{background:#eef1f5;color:#596579}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:800;color:#34415a}.field input,.field select,.field textarea{width:100%;border:1px solid #ccd6e5;border-radius:11px;padding:11px 12px;background:#fff;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,87,208,.1)}
.filters{display:flex;gap:10px;flex-wrap:wrap}.filters input,.filters select{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:#fff}.alert{padding:12px 14px;border-radius:12px;margin-bottom:14px;font-size:13px;border:1px solid}.alert.success{background:#eefaf3;border-color:#b9e8cd;color:#11663e}.alert.error{background:#fff1f0;border-color:#f2c4bf;color:#9d251c}.alert.info{background:#eef5ff;border-color:#c8dcff;color:#174ea6}
.empty{padding:36px;text-align:center;color:var(--muted)}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:16px}
.avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#eef2f8;display:grid;place-items:center;font-weight:900;color:var(--navy)}
.student-card{display:flex;gap:14px;align-items:center}.student-card .avatar{width:70px;height:70px;border-radius:16px}.student-card h3{margin:0 0 5px}.student-card p{margin:2px 0;color:var(--muted);font-size:13px}
.terminal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.terminal-tab{padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;font-weight:800;color:#45516a}.terminal-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}.terminal-pane{display:none}.terminal-pane.active{display:block}


.status-box{padding:12px;border-radius:11px;background:#f6f8fc;border:1px solid var(--line);font-size:13px;margin-top:12px;min-height:45px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;font-size:13px}.kv div:nth-child(odd){color:var(--muted);font-weight:700}.photo-large{width:180px;height:210px;object-fit:cover;border-radius:18px;border:1px solid var(--line);background:#eef2f8}
.pagination{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding:14px}.pagination a,.pagination span{padding:7px 10px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-size:12px;background:#fff}.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}
.login-page{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}.login-brand{padding:60px;background:linear-gradient(145deg,var(--navy),var(--blue));color:#fff;display:flex;flex-direction:column;justify-content:space-between}.login-brand h1{font-size:46px;line-height:1.06;margin:0;max-width:700px}.login-brand p{max-width:600px;opacity:.78;line-height:1.7}.login-form-wrap{display:grid;place-items:center;padding:36px;background:#fff}.login-box{width:min(430px,100%)}.login-box h2{font-size:30px;margin:0 0 7px}.login-box>p{color:var(--muted);margin:0 0 24px}.login-box .field{margin-bottom:14px}
@media(max-width:1100px){.grid.cards{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-brand{display:none}}
@media(max-width:860px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;z-index:50;width:270px;transform:translateX(-105%);transition:.2s}.sidebar.open{transform:translateX(0)}.menu-btn{display:block}.content{padding:16px}.topbar{padding:0 16px}.grid.cards{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.page-head{flex-direction:column}.table.mobile-cards{min-width:0}.table.mobile-cards thead{display:none}.table.mobile-cards,.table.mobile-cards tbody,.table.mobile-cards tr,.table.mobile-cards td{display:block;width:100%}.table.mobile-cards tr{padding:10px 12px;border-bottom:1px solid var(--line)}.table.mobile-cards td{border:0;padding:5px 0}.table.mobile-cards td[data-label]:before{content:attr(data-label) ": ";font-weight:800;color:var(--muted)}}
@media(max-width:520px){.grid.cards{grid-template-columns:1fr}.content{padding:12px}.page-head h1{font-size:22px}.kv{grid-template-columns:1fr}.kv div:nth-child(odd){margin-top:8px}}
@media print{.sidebar,.topbar,.no-print{display:none!important}.shell{display:block}.content{padding:0;max-width:none}.card,.panel{box-shadow:none}}


/* Professional Face Enrollment Camera */

.face-camera-container{
    width:100%;
    max-width:360px;
    margin:auto;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:var(--shadow);
}


.face-camera-title{
    padding:14px 18px;
    font-size:14px;
    font-weight:800;
    background:#f8fafc;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:10px;
}


.live-dot{
    width:9px;
    height:9px;
    background:#16a34a;
    border-radius:50%;
}


.face-camera-frame{

    position:relative;

    width:100%;

    height:420px;

    background:#020617;

    overflow:hidden;

}



.face-camera-frame video{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scaleX(-1);

}



.face-mask{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}



.face-outline{

    width:220px;

    height:280px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,.9);

    box-shadow:
    0 0 0 999px rgba(0,0,0,.45);

}



.face-help{

    padding:12px;

    text-align:center;

    font-size:13px;

    color:#475569;

}



.face-actions{

    display:flex;

    gap:10px;

    margin-top:15px;

}


.face-actions .btn{

    flex:1;

}



.status-box{

    margin-top:12px;

    background:#eff6ff;

    border:1px solid #bfdbfe;

    color:#174ea6;

}

/* FINAL FACE ENROLLMENT DESIGN */


.face-enroll-box{

    width:100%;

    max-width:420px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:20px;

    padding:0;

    overflow:hidden;

    box-shadow:var(--shadow);

}



.face-header{

    padding:15px 18px;

    font-weight:800;

    display:flex;

    align-items:center;

    gap:10px;

    background:#f8fafc;

}



.camera-status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

}



.face-preview{

    position:relative;

    width:100%;

    height:420px;

    background:#000;

    overflow:hidden;

}



.face-preview video{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scaleX(-1);

}



.face-guide{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:220px;

    height:280px;

    border-radius:50%;

    border:3px solid white;

    box-shadow:
    0 0 0 9999px rgba(0,0,0,.45);

}



.face-instruction{

    padding:12px;

    text-align:center;

    color:#64748b;

    font-size:13px;

}



.face-controls{

    display:flex;

    gap:10px;

    padding:15px;

}



.face-controls button{

    flex:1;

}



.status-box{

    margin:0 15px 15px;

}