:root{
  --black:#080808;--black-2:#111214;--black-3:#181a1d;--panel:#151619;
  --gold:#d7a928;--gold-2:#f4cd55;--gold-soft:#fff4c8;--white:#fff;
  --muted:#a9adb5;--line:#2a2d32;--danger:#d84d4d;--success:#2db478;
  --warning:#e9a72e;--shadow:0 20px 55px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#f4f4f5;color:#171717}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
img{max-width:100%}
.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#080808,#141414);color:#fff;padding:24px 18px;display:flex;flex-direction:column;border-right:1px solid #292929;z-index:40}
.brand{display:flex;align-items:center;gap:13px;padding:5px 8px 25px;border-bottom:1px solid #292929}
.brand-mark{width:46px;height:46px;border-radius:14px;background:#fff;padding:5px;display:grid;place-items:center;box-shadow:0 0 0 2px rgba(215,169,40,.45)}
.brand-mark img{width:100%;height:100%;object-fit:contain;border-radius:9px}
.brand strong{font-size:1.05rem;letter-spacing:.12em;color:var(--gold-2)}
.brand small{display:block;color:#d0d0d0;font-size:.72rem;margin-top:3px}
.nav{display:grid;gap:8px;margin-top:24px}
.nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:13px;color:#d4d4d4;font-size:.93rem;transition:.2s}
.nav a span{width:25px;text-align:center;color:var(--gold)}
.nav a:hover,.nav a.active{background:linear-gradient(90deg,rgba(215,169,40,.2),rgba(215,169,40,.06));color:#fff;border:1px solid rgba(215,169,40,.3)}
.sidebar-foot{margin-top:auto;border-top:1px solid #2b2b2b;padding-top:18px}
.user-mini{display:flex;gap:10px;align-items:center}
.user-mini .avatar{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#090909;display:grid;place-items:center;font-weight:800}
.user-mini strong{display:block;font-size:.82rem;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-mini small{color:#9fa1a5}
.logout-link{display:block;margin-top:14px;color:#f0c34b;font-size:.83rem}
.main{min-width:0}
.topbar{height:84px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30}
.topbar h1{font-size:1.25rem;margin:2px 0 0}
.topbar small{color:#777}
.top-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;border:0;background:#111;color:#fff;border-radius:10px;padding:9px 11px}
.icon-btn{width:39px;height:39px;border:1px solid #ddd;border-radius:11px;display:grid;place-items:center}
.content{padding:26px;max-width:1600px;margin:auto}
.footer{padding:18px 28px;color:#737373;font-size:.78rem;border-top:1px solid #e5e5e5;background:#fff}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.045);padding:22px}
.card.dark{background:linear-gradient(145deg,#101010,#1c1c1c);color:#fff;border-color:#292929}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-card{position:relative;overflow:hidden}
.stat-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-30px;top:-35px;background:rgba(215,169,40,.12)}
.stat-label{color:#747474;font-size:.8rem}
.stat-value{font-size:2rem;font-weight:800;margin:6px 0 2px}
.stat-foot{font-size:.75rem;color:#909090}
.dark .stat-label,.dark .stat-foot{color:#aaa}
.gold-text{color:var(--gold)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px}
.page-head h2{margin:0;font-size:1.35rem}
.page-head p{margin:5px 0 0;color:#707070;font-size:.88rem}
.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#111;box-shadow:0 8px 20px rgba(215,169,40,.23)}
.btn-dark{background:#111;color:#fff}
.btn-light{background:#f1f1f1;color:#222;border:1px solid #ddd}
.btn-danger{background:#fff0f0;color:#a91d1d;border:1px solid #f0c0c0}
.btn-sm{padding:8px 12px;font-size:.8rem;border-radius:9px}
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.col-12{grid-column:span 12}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
.field label{display:block;font-size:.78rem;font-weight:700;margin-bottom:6px;color:#555}
.input,.select,.textarea{width:100%;border:1px solid #dcdcdc;background:#fff;border-radius:11px;padding:11px 12px;outline:none;transition:.18s}
.input:focus,.select:focus,.textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(215,169,40,.15)}
.textarea{min-height:90px;resize:vertical}
.filter-bar{background:#fff;border:1px solid #e4e4e4;border-radius:17px;padding:15px;margin-bottom:18px}
.table-wrap{overflow:auto;border:1px solid #e4e4e4;border-radius:15px}
table{border-collapse:collapse;width:100%;font-size:.84rem}
th{background:#111;color:#f8d469;text-align:left;padding:13px 12px;white-space:nowrap}
td{padding:12px;border-bottom:1px solid #ececec;vertical-align:middle}
tr:last-child td{border-bottom:0}
tr:hover td{background:#fffaf0}
.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:.72rem;font-weight:800}
.badge-success{background:#e4f7ef;color:#15734e}
.badge-warning{background:#fff3d7;color:#8a5b00}
.badge-danger{background:#fde8e8;color:#a72424}
.badge-dark{background:#e9e9e9;color:#333}
.badge-gold{background:#fff1bf;color:#765500}
.avatar-photo{width:44px;height:44px;border-radius:13px;object-fit:cover;background:#eee;border:1px solid #ddd}
.avatar-placeholder{width:44px;height:44px;border-radius:13px;background:#161616;color:#e5bc45;display:grid;place-items:center;font-weight:800}
.alert{padding:13px 16px;border-radius:12px;margin-bottom:15px;font-size:.87rem}
.alert-success{background:#e5f8ef;color:#166643;border:1px solid #b8ead3}
.alert-warning{background:#fff5dc;color:#765100;border:1px solid #efdaa5}
.alert-danger,.alert-error{background:#ffe8e8;color:#8e1d1d;border:1px solid #efbcbc}
.alert-info{background:#e8f2ff;color:#174f84;border:1px solid #bdd7f0}
.pagination{display:flex;gap:7px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:36px;height:36px;border-radius:9px;border:1px solid #ddd;display:grid;place-items:center;background:#fff;font-size:.8rem}
.pagination .active{background:#111;color:#f1c74c;border-color:#111}
.hero{min-height:100vh;background:radial-gradient(circle at 80% 20%,rgba(225,177,45,.16),transparent 30%),linear-gradient(135deg,#050505,#111);color:#fff;display:grid;grid-template-columns:1.12fr .88fr;overflow:hidden}
.hero-copy{padding:8vw;display:flex;flex-direction:column;justify-content:center}
.hero-logo{display:flex;align-items:center;gap:13px;margin-bottom:40px}
.hero-logo img{width:64px;height:64px;background:white;border-radius:18px;padding:6px}
.hero-logo strong{color:#f2c845;letter-spacing:.12em}
.hero h1{font-size:clamp(2.7rem,6vw,5.7rem);line-height:.97;margin:0;max-width:780px}
.hero h1 span{color:var(--gold-2)}
.hero p{max-width:680px;color:#c8c8c8;font-size:1.08rem;line-height:1.7;margin:25px 0 32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{display:grid;place-items:center;padding:5vw;position:relative}
.scan-orb{width:min(430px,80vw);aspect-ratio:1;border-radius:50%;border:1px solid rgba(240,193,61,.35);display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(225,177,45,.14),rgba(0,0,0,.2) 58%,transparent 60%)}
.scan-orb:before,.scan-orb:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(240,193,61,.25)}
.scan-orb:before{inset:10%}.scan-orb:after{inset:22%}
.face-icon{font-size:7rem;color:#efc34b;filter:drop-shadow(0 0 30px rgba(239,195,75,.35))}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#090909}
.login-art{background:radial-gradient(circle at 30% 30%,rgba(217,170,41,.22),transparent 35%),#0d0d0d;color:#fff;padding:8vw;display:flex;flex-direction:column;justify-content:center}
.login-art h1{font-size:3.2rem;margin:18px 0 10px}
.login-art p{color:#bdbdbd;max-width:520px;line-height:1.65}
.login-panel{background:#fff;display:grid;place-items:center;padding:35px}
.login-card{width:min(440px,100%);padding:35px;border:1px solid #e5e5e5;border-radius:24px;box-shadow:var(--shadow)}
.login-card h2{margin:0 0 6px;font-size:1.65rem}
.login-card>p{color:#777;margin:0 0 25px}
.camera-card{background:#0b0b0b;border-radius:22px;padding:18px;color:#fff;position:relative;overflow:hidden}
.camera-frame{aspect-ratio:4/3;background:#000;border-radius:15px;overflow:hidden;position:relative;border:1px solid #333}
.camera-frame video,.camera-frame img,.camera-frame canvas{width:100%;height:100%;object-fit:cover}
.scan-line{position:absolute;left:8%;right:8%;height:2px;background:#f2c94c;box-shadow:0 0 15px #f2c94c;animation:scan 2.4s ease-in-out infinite}
@keyframes scan{0%,100%{top:12%}50%{top:85%}}
.camera-status{display:flex;align-items:center;gap:10px;margin-top:13px;color:#d0d0d0;font-size:.85rem}
.status-dot{width:10px;height:10px;border-radius:50%;background:#e9a72e;box-shadow:0 0 12px currentColor}
.status-dot.ok{background:#2db478}.status-dot.err{background:#d84d4d}
.kiosk-page{min-height:100vh;background:radial-gradient(circle at 50% 0,rgba(214,167,37,.16),transparent 32%),#080808;color:#fff;padding:25px}
.kiosk-shell{max-width:1250px;margin:auto}
.kiosk-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.kiosk-brand{display:flex;align-items:center;gap:12px}.kiosk-brand img{width:53px;height:53px;border-radius:15px;background:#fff;padding:4px}
.kiosk-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.kiosk-panel{background:#151515;border:1px solid #2d2d2d;border-radius:24px;padding:22px}
.kiosk-result{min-height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center}
.result-avatar{width:120px;height:120px;border-radius:30px;object-fit:cover;margin:0 auto 16px;border:3px solid #e0b137}
.progress{height:9px;background:#ededed;border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,#b68714,#f0ce62)}
.location-card{border:1px solid #e5e5e5;border-radius:16px;padding:17px;background:#fff}
.location-card h3{margin:0 0 5px}.location-card p{color:#777;font-size:.82rem;margin:0 0 13px}
.code-pill{display:inline-flex;background:#151515;color:#f2c84c;border-radius:9px;padding:5px 8px;font-size:.72rem;font-weight:800}
.empty{text-align:center;padding:40px;color:#888}
.face-note{font-size:.76rem;color:#8b8b8b;line-height:1.5;margin-top:12px}
@media(max-width:1050px){
 .app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-290px;width:270px;transition:.25s}.sidebar-open .sidebar{left:0}.menu-toggle{display:inline-block}
 .grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}
 .hero{grid-template-columns:1fr}.hero-visual{display:none}.login-wrap{grid-template-columns:1fr}.login-art{display:none}
 .kiosk-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
 .content{padding:16px}.topbar{padding:0 16px}.topbar .btn{display:none}
 .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
 .form-grid{grid-template-columns:1fr}.form-grid>*{grid-column:span 1!important}
 .page-head{align-items:flex-start;flex-direction:column}
 .hero-copy{padding:35px 24px}.hero h1{font-size:2.8rem}
 .kiosk-page{padding:12px}.kiosk-header{align-items:flex-start;gap:15px}.kiosk-header .clock{font-size:.8rem}
}
@media print{
 .sidebar,.topbar,.footer,.no-print,.btn{display:none!important}.app-shell{display:block}.content{padding:0}.card{box-shadow:none;border-color:#bbb}
}
/* Portal Murid V1B */
.murid-portal-body{min-height:100vh;background:radial-gradient(circle at 50% 0,rgba(215,169,40,.22),transparent 30%),#090909;color:#fff;padding:18px}
.murid-portal{width:min(680px,100%);margin:0 auto}
.murid-portal-head{display:flex;align-items:center;gap:12px;padding:10px 0 20px}
.murid-portal-head img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:16px;padding:5px}
.murid-portal-head h1{font-size:1.35rem;margin:3px 0 0}.murid-portal-head small{color:#e6bf4d;font-weight:800;letter-spacing:.12em}
.murid-portal-head .btn{margin-left:auto}
.mobile-card,.mobile-profile-card{margin-bottom:16px;color:#171717}
.mobile-profile-main{display:flex;gap:15px;align-items:center}.mobile-profile-main h2{font-size:1.18rem;margin:8px 0 4px}.mobile-profile-main p{margin:0;color:#777;font-size:.83rem}
.mobile-face-photo,.mobile-face-placeholder{width:84px;height:84px;border-radius:22px;flex:0 0 84px}.mobile-face-photo{object-fit:cover;border:3px solid #d9ad32}.mobile-face-placeholder{display:grid;place-items:center;background:#111;color:#f3ca54;font-size:2rem;font-weight:800}
.registration-state{margin-top:18px;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}.registration-state.done{background:#e4f7ef;color:#176544}.registration-state.pending{background:#fff3d7;color:#7a5200}.registration-state span{font-size:.8rem;line-height:1.45}
.instruction-list{padding-left:20px;color:#555;line-height:1.7;font-size:.9rem}.muted-copy{color:#666;line-height:1.6}
.self-camera-card{margin-bottom:18px}
@media(max-width:520px){.murid-portal-body{padding:12px}.murid-portal-head h1{font-size:1.1rem}.murid-portal-head img{width:48px;height:48px}.mobile-profile-main{align-items:flex-start}.mobile-face-photo,.mobile-face-placeholder{width:70px;height:70px;flex-basis:70px}.login-panel{padding:18px}.login-card{padding:24px 20px;border-radius:20px}}