@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

:root {
  --green-950: #062d23;
  --green-900: #0a3c2e;
  --green-800: #10513e;
  --green-700: #17664e;
  --gold: #d5ae55;
  --gold-dark: #a77a23;
  --ink: #17251f;
  --muted: #6c7b74;
  --line: #e4eae6;
  --surface: #f5f7f5;
  --white: #fff;
  --shadow: 0 18px 50px rgba(7, 45, 34, .11);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; background: var(--surface); }
a { color: var(--green-700); text-decoration: none; }
.form-control, .form-select { min-height: 46px; border-color: #dbe3dd; border-radius: 10px; padding: .68rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--green-700); box-shadow: 0 0 0 .2rem rgba(23,102,78,.12); }
.form-label { color: #34483f; font-size: .84rem; font-weight: 700; }
.form-label span { color: #bf3849; }
.alert { border: 0; border-radius: 12px; }
.btn { border-radius: 10px; font-weight: 700; }
.btn-primary-action { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; color: white; background: linear-gradient(135deg, var(--green-700), var(--green-900)); border: 0; padding: .72rem 1.15rem; box-shadow: 0 8px 18px rgba(16,81,62,.18); }
.btn-primary-action:hover { color: white; background: var(--green-950); transform: translateY(-1px); }
.btn-gold { color: var(--green-950); border: 0; background: linear-gradient(135deg, #e7c976, #c79b3b); box-shadow: 0 14px 32px rgba(213,174,85,.27); font-weight: 800; }
.btn-gold:hover { background: #ebcc73; color: var(--green-950); transform: translateY(-1px); }

.brand-seal { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(214,177,91,.65); border-radius: 12px; color: var(--gold); background: rgba(255,255,255,.07); }
.brand-seal-lg { width: 64px; height: 64px; margin: 0 auto 1rem; font-size: 1.5rem; color: var(--gold-dark); background: #fbf6e9; border-color: #ead7a8; }
.navbar-brand span:last-child, .scan-brand span:last-child, .sidebar-brand span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.navbar-brand strong, .scan-brand strong, .sidebar-brand strong { letter-spacing: .16em; }
.navbar-brand small, .scan-brand small, .sidebar-brand small { margin-top: .28rem; opacity: .68; font-size: .66rem; letter-spacing: .06em; }
.institutional-nav { min-height: 72px; background: var(--green-950); }
.app-institutional-nav .container { justify-content: center; }
.app-institutional-nav .scan-institution { color: white; }
.page-shell { min-height: calc(100vh - 72px); background: radial-gradient(circle at 0 0, rgba(213,174,85,.07), transparent 25%), var(--surface); }
.card-soft { padding: 2rem; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: 0 16px 40px rgba(7,45,34,.06); }

/* Scanner */
.scan-page { overflow-x: hidden; color: white; background: var(--green-950); }
.scan-page::before { position: fixed; inset: 0; content: ''; pointer-events: none; background: radial-gradient(circle at 78% 35%, rgba(29,110,84,.45), transparent 35%), radial-gradient(circle at 10% 80%, rgba(213,174,85,.07), transparent 30%), linear-gradient(135deg, #05271f, #093a2c 68%, #072f25); }
.scan-shell { position: relative; z-index: 1; display: flex; min-height: 100vh; flex-direction: column; }
.scan-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1.25rem clamp(1.25rem, 4vw, 4.5rem); border-bottom: 1px solid rgba(255,255,255,.1); }
.scan-brand { display: flex; align-items: center; gap: .8rem; color: white; }
.agency-lockup { display: flex; align-items: center; gap: .75rem; text-align: left; }
.agency-lockup span:last-child { display: flex; flex-direction: column; }
.agency-lockup small { color: var(--gold); font-size: .57rem; letter-spacing: .2em; }
.agency-lockup strong { font-size: .74rem; letter-spacing: .09em; }
.logo-placeholder { display: grid; width: 38px; height: 44px; place-items: center; color: var(--gold); border: 1px dashed rgba(213,174,85,.7); font-size: .48rem; }
.scan-admin-link { justify-self: end; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .85rem; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; font-size: .82rem; }
.scan-admin-link:hover { color: white; border-color: var(--gold); }
.scanner-layout { width: min(1360px, 100%); margin: auto; padding: clamp(2rem, 5vh, 5rem) clamp(1.25rem, 5vw, 5rem); display: grid; grid-template-columns: minmax(270px, .68fr) minmax(520px, 1.25fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.scanner-copy { max-width: 480px; }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--gold-dark); font-size: .68rem; font-weight: 800; letter-spacing: .2em; }
.scan-page .eyebrow { color: #e3c26d; }
.eyebrow > span { width: 30px; height: 1px; background: currentColor; }
.scanner-copy h1 { margin: 1rem 0 1.25rem; font-size: clamp(2.8rem, 5vw, 5.1rem); line-height: .98; letter-spacing: -.045em; }
.scanner-copy h1 em { color: var(--gold); font-family: 'Playfair Display', serif; font-weight: 600; }
.scanner-copy > p { max-width: 430px; color: rgba(255,255,255,.63); font-size: 1rem; line-height: 1.8; }
.privacy-note { display: flex; align-items: center; gap: .9rem; margin-top: 2rem; padding: 1rem 1.1rem; width: fit-content; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); }
.privacy-note > i { color: var(--gold); font-size: 1.4rem; }
.privacy-note span { display: flex; flex-direction: column; color: rgba(255,255,255,.55); font-size: .72rem; }
.privacy-note strong { color: white; font-size: .8rem; }
.camera-card { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.08); box-shadow: 0 35px 90px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.camera-stage { position: relative; min-height: 510px; overflow: hidden; background: #031b15; }
.camera-stage video, .camera-stage canvas { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.camera-stage canvas { pointer-events: none; }
.camera-placeholder { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 40%, #164f3e, #041f18 70%); }
.camera-placeholder::before { position: absolute; width: 350px; height: 350px; content: ''; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.018), 0 0 0 110px rgba(255,255,255,.012); }
.camera-placeholder > * { position: relative; z-index: 1; }
.camera-placeholder h2 { margin: 1rem 0 .5rem; font-size: 1.25rem; }
.camera-placeholder p { max-width: 330px; color: rgba(255,255,255,.55); font-size: .85rem; }
.camera-icon { display: grid; width: 62px; height: 62px; place-items: center; color: var(--gold); border: 1px solid rgba(213,174,85,.42); border-radius: 50%; background: rgba(213,174,85,.08); font-size: 1.55rem; }
.face-guide { position: absolute; top: 50%; left: 50%; z-index: 3; width: 46%; height: 72%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 0 0 999px rgba(1,14,11,.22); transition: border-color .25s, box-shadow .25s; }
.face-guide.detected { border-color: #69d29f; box-shadow: 0 0 28px rgba(75,203,143,.45), 0 0 0 999px rgba(1,14,11,.18); }
.face-guide .corner { position: absolute; width: 32px; height: 32px; border-color: var(--gold); border-style: solid; }
.face-guide .c1 { top: 8%; left: 2%; border-width: 3px 0 0 3px; border-radius: 12px 0 0; }
.face-guide .c2 { top: 8%; right: 2%; border-width: 3px 3px 0 0; border-radius: 0 12px 0 0; }
.face-guide .c3 { bottom: 8%; left: 2%; border-width: 0 0 3px 3px; border-radius: 0 0 0 12px; }
.face-guide .c4 { right: 2%; bottom: 8%; border-width: 0 3px 3px 0; border-radius: 0 0 12px; }
.camera-status { position: absolute; top: 1rem; left: 1rem; z-index: 6; display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(0,0,0,.42); font-size: .72rem; backdrop-filter: blur(8px); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #7c8983; }
.status-dot.live { background: #43d28f; box-shadow: 0 0 0 4px rgba(67,210,143,.14); animation: pulse 1.5s infinite; }
.status-dot.error { background: #f45c6e; }
.direction-cue { position: absolute; top: 50%; left: 50%; z-index: 7; transform: translate(-50%,-50%); color: var(--gold); font-size: 7rem; filter: drop-shadow(0 5px 20px rgba(0,0,0,.5)); animation: cue 1s ease-in-out infinite alternate; }
.direction-cue.up { transform: translate(-50%,-50%) rotate(-90deg); }.direction-cue.down { transform: translate(-50%,-50%) rotate(90deg); }.direction-cue.left { transform: translate(-50%,-50%) rotate(180deg); }
.scanner-panel { display: grid; grid-template-columns: auto 1fr minmax(150px, .7fr); align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: rgba(1,20,15,.72); }
.instruction-icon { display: grid; width: 43px; height: 43px; place-items: center; color: var(--gold); border-radius: 12px; background: rgba(213,174,85,.12); }
.instruction-copy { display: flex; min-width: 0; flex-direction: column; }
.instruction-copy small { color: rgba(255,255,255,.45); font-size: .55rem; font-weight: 800; letter-spacing: .16em; }
.instruction-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.scan-progress-wrap { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: .5rem; font-size: .7rem; }
.scan-progress-wrap .progress { height: 5px; background: rgba(255,255,255,.1); }
.scan-progress-wrap .progress-bar { background: var(--gold); transition: width .35s; }
.scan-alert { padding: .7rem 1rem; color: #ffe1e4; background: rgba(173,33,54,.55); text-align: center; font-size: .78rem; }
.scan-alert.success { color: #d8f7e8; background: rgba(18,114,75,.6); }
.scan-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .85rem clamp(1.25rem,4vw,4.5rem); color: rgba(255,255,255,.38); border-top: 1px solid rgba(255,255,255,.08); font-size: .66rem; }
.scan-footer .btn { color: rgba(255,255,255,.58); font-size: .68rem; }
.scan-footer span:last-child { text-align: right; }
.scan-back-link { display: block; margin-top: 1rem; color: rgba(255,255,255,.7); font-size: .75rem; font-weight: 700; }
.scan-back-link:hover { color: white; }
.scan-header--institution { display: flex; justify-content: center; min-height: 82px; }
.scan-back-button { position: absolute; left: clamp(1rem, 4vw, 4.5rem); display: inline-flex; align-items: center; gap: .5rem; padding: .58rem .78rem; color: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.05); font-size: .75rem; font-weight: 700; }
.scan-back-button:hover { color: white; border-color: var(--gold); background: rgba(255,255,255,.1); }
.scan-institution { display: flex; align-items: center; gap: .8rem; text-align: left; }
.scan-institution img { width: 46px; height: 46px; object-fit: contain; }
.scan-institution span { display: flex; flex-direction: column; }
.scan-institution small { color: var(--gold); font-size: .61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.scan-institution strong { margin-top: .18rem; color: white; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; }
.scanner-layout--focused { grid-template-columns: minmax(520px, 760px); justify-content: center; flex: 1; padding-top: clamp(1.5rem, 4vh, 3.5rem); padding-bottom: clamp(1.5rem, 4vh, 3.5rem); }
.motion-demo { display: flex; align-items: center; flex-direction: column; gap: .55rem; margin-bottom: 1rem; }
.motion-demo__portrait { position: relative; width: 190px; height: 190px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 25%, rgba(213,174,85,.33), rgba(11,61,46,.8)); box-shadow: 0 0 0 8px rgba(255,255,255,.04); }
.motion-demo__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 5%; animation: portrait-right 1.5s ease-in-out infinite alternate; }
.motion-demo__portrait i { position: absolute; right: 7px; bottom: 42%; display: grid; width: 40px; height: 40px; place-items: center; color: var(--green-950); border-radius: 50%; background: var(--gold); font-size: 1.35rem; animation: guide-arrow 1s ease-in-out infinite alternate; }
.motion-demo strong { font-size: .95rem; }
.motion-demo small { color: rgba(255,255,255,.57); font-size: .73rem; }
.motion-guide { position: absolute; right: 1rem; bottom: 1rem; z-index: 6; display: flex; align-items: center; gap: .65rem; max-width: 250px; padding: .55rem .75rem .55rem .55rem; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(1,20,15,.8); box-shadow: 0 10px 30px rgba(0,0,0,.3); backdrop-filter: blur(8px); }
.motion-guide__portrait { width: 64px; height: 64px; overflow: hidden; flex: 0 0 auto; border-radius: 50%; background: #164f3e; }
.motion-guide__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 5%; }
.motion-guide strong { color: white; font-size: .7rem; letter-spacing: .06em; }
.motion-guide[data-direction="right"] .motion-guide__portrait img { animation: portrait-right 1s ease-in-out infinite alternate; }
.motion-guide[data-direction="left"] .motion-guide__portrait img { animation: portrait-left 1s ease-in-out infinite alternate; }
.motion-guide[data-direction="up"] .motion-guide__portrait img { animation: portrait-up 1s ease-in-out infinite alternate; }
.motion-guide[data-direction="down"] .motion-guide__portrait img { animation: portrait-down 1s ease-in-out infinite alternate; }
.motion-guide[data-direction="center"] .motion-guide__portrait img { animation: portrait-center 1s ease-in-out infinite alternate; }

/* Landing absensi */
.landing-page { display: grid; min-height: 100vh; padding: 2rem 1.25rem; place-items: center; background: radial-gradient(circle at 50% 0, rgba(213,174,85,.18), transparent 34%), linear-gradient(145deg,#05271f,#0a3c2e 65%,#062d23); }
.attendance-home { width: min(880px,100%); color: white; text-align: center; }
.landing-back { position: fixed; top: 1.35rem; left: 1.35rem; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .9rem; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(5,39,31,.55); font-size: .78rem; font-weight: 700; text-decoration: none; backdrop-filter: blur(8px); }
.landing-back:hover { color: white; border-color: var(--gold); background: rgba(255,255,255,.12); }
.attendance-home__mark { display: grid; width: 88px; height: 88px; margin: 0 auto 1.4rem; place-items: center; border: 1px solid rgba(213,174,85,.55); border-radius: 22px; background: rgba(255,255,255,.06); box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.attendance-home__mark img { width: 68px; height: 68px; object-fit: contain; }
.attendance-home .eyebrow { color: #e3c26d; }
.attendance-home h1 { margin: .8rem 0 1rem; font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.045em; }
.attendance-home__lead { width: min(680px,100%); margin: 0 auto 2.3rem; color: rgba(255,255,255,.68); line-height: 1.75; }
.attendance-home .alert { width: min(680px,100%); margin: 0 auto 1.3rem; text-align: left; }
.attendance-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.attendance-action { display: grid; grid-template-columns: auto 1fr auto; min-height: 170px; align-items: center; gap: 1.2rem; padding: 1.7rem; color: var(--ink); border: 1px solid rgba(255,255,255,.15); border-radius: 22px; background: white; box-shadow: 0 20px 55px rgba(0,0,0,.2); text-align: left; transition: transform .2s, box-shadow .2s; }
.attendance-action:hover { color: var(--ink); transform: translateY(-4px); box-shadow: 0 26px 65px rgba(0,0,0,.28); }
.attendance-action__icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 18px; font-size: 1.6rem; }
.attendance-action--out .attendance-action__icon { color: #a85024; background: #fceade; }
.attendance-action--in .attendance-action__icon { color: #167151; background: #e2f2e9; }
.attendance-action > span:nth-child(2) { display: flex; flex-direction: column; }
.attendance-action small { color: var(--gold-dark); font-size: .58rem; font-weight: 800; letter-spacing: .14em; }
.attendance-action strong { margin: .25rem 0; font-size: 1.75rem; }
.attendance-action em { color: var(--muted); font-size: .75rem; font-style: normal; }
.attendance-action > i { color: #9ba7a1; }
.attendance-info { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.8rem; color: rgba(255,255,255,.6); font-size: .78rem; }
.attendance-info i { color: var(--gold); }
.currently-out { margin-top: 2rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(1,31,23,.36); text-align: left; }
.currently-out__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.currently-out__heading span { color: #e3c26d; font-size: .58rem; font-weight: 800; letter-spacing: .14em; }
.currently-out__heading h2 { margin: 0; color: white; font-size: 1rem; }
.currently-out__list { display: grid; gap: .6rem; max-height: 315px; overflow-y: auto; padding-right: .25rem; }
.currently-out__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .75rem; border-radius: 12px; background: rgba(255,255,255,.08); }
.currently-out__avatar { display: grid; width: 34px; height: 34px; place-items: center; color: var(--green-950); border-radius: 50%; background: var(--gold); font-size: .75rem; font-weight: 800; }
.currently-out__item div { display: flex; min-width: 0; flex-direction: column; }.currently-out__item strong { overflow: hidden; color: white; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }.currently-out__item small { overflow: hidden; color: rgba(255,255,255,.58); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }.currently-out__item em { margin-top: .15rem; color: #e8cb7c; font-size: .61rem; font-style: normal; }.currently-out__item time { color: white; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.currently-out__empty { margin: 0; color: rgba(255,255,255,.62); font-size: .76rem; }.currently-out__empty i { margin-right: .45rem; color: #6ed6a1; }
.attendance-result__detail { display: grid; gap: .9rem; margin: 1.5rem 0; padding: 1.2rem; border-radius: 14px; background: #f4f7f5; text-align: left; }
.attendance-result__detail div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.attendance-result__detail small { color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.return-countdown { display: flex; align-items: center; justify-content: center; gap: .85rem; margin-top: 1.5rem; color: var(--muted); text-align: left; }
.return-countdown > span { display: grid; width: 46px; height: 46px; place-items: center; flex: 0 0 auto; color: white; border-radius: 50%; background: var(--green-700); font-size: 1.1rem; font-weight: 800; }
.return-countdown p { margin: 0; font-size: .76rem; }
.return-countdown strong { color: var(--green-800); }

/* Public pages */
.identity-wrap { max-width: 830px; margin: 0 auto; text-align: center; }
.success-mark, .error-mark { display: grid; width: 64px; height: 64px; margin: 0 auto 1.2rem; place-items: center; color: white; border-radius: 50%; background: var(--green-700); box-shadow: 0 0 0 9px #e7f3ed; font-size: 1.8rem; }
.error-mark { background: #b33d4c; box-shadow: 0 0 0 9px #faebed; }
.identity-heading span { color: var(--green-700); font-size: .65rem; font-weight: 800; letter-spacing: .2em; }
.identity-heading h1, .form-page-heading h1, .result-card h1 { margin: .35rem 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
.identity-heading p, .form-page-heading p, .result-card p { color: var(--muted); }
.identity-card { position: relative; margin-top: 2rem; overflow: hidden; padding: 2.2rem; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); text-align: left; }
.identity-accent { position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(var(--green-700), var(--gold)); }
.identity-profile { display: flex; align-items: center; gap: 1.3rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.identity-profile img, .avatar-placeholder { width: 88px; height: 88px; object-fit: cover; border: 4px solid #edf4ef; border-radius: 50%; }
.avatar-placeholder { display: grid; place-items: center; color: white; background: var(--green-800); font-size: 2rem; font-weight: 700; }
.identity-profile small { color: var(--gold-dark); font-size: .6rem; font-weight: 800; letter-spacing: .15em; }
.identity-profile h2 { margin: .2rem 0 .4rem; font-size: 1.6rem; }
.verified-pill { color: #18714e; font-size: .75rem; font-weight: 700; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 3rem; padding: 1.8rem 0; }
.identity-grid div { display: flex; flex-direction: column; }
.identity-grid small { margin-bottom: .25rem; color: var(--muted); font-size: .6rem; font-weight: 800; letter-spacing: .13em; }
.identity-card > .btn { width: 100%; }
.session-expiry { margin: 1rem 0 0; color: var(--muted); text-align: center; font-size: .7rem; }
.login-wrap { display: grid; min-height: calc(100vh - 155px); place-items: center; }
.login-panel { width: min(440px,100%); padding: 2.5rem; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); text-align: center; }
.login-panel h1 { margin: .7rem 0; font-size: 2rem; }
.login-panel > p { color: var(--muted); font-size: .88rem; }
.login-panel form { text-align: left; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; top: 50%; left: .85rem; z-index: 2; transform: translateY(-50%); color: #7e8e86; }
.input-icon .form-control { padding-left: 2.5rem; }
.back-link { display: inline-block; margin-top: 1.5rem; font-size: .78rem; }
.form-page-heading { margin-bottom: 2rem; }
.employee-summary { text-align: center; }
.summary-avatar { display: grid; width: 72px; height: 72px; margin: 0 auto 1rem; place-items: center; color: white; border-radius: 50%; background: var(--green-800); font-size: 1.7rem; font-weight: 800; }
.employee-summary > small { color: var(--green-700); font-size: .6rem; font-weight: 800; letter-spacing: .15em; }
.employee-summary h2 { margin: .35rem 0; font-size: 1.35rem; }.employee-summary > p { color: var(--muted); }
.employee-summary dl { margin: 0; text-align: left; }.employee-summary dt { color: var(--muted); font-size: .7rem; }.employee-summary dd { margin-bottom: 1rem; font-weight: 700; }
.permit-form { padding: 2rem; }
.form-note { display: flex; gap: .7rem; margin: 1.5rem 0; padding: .9rem 1rem; color: #72551d; border: 1px solid #ead9ad; border-radius: 10px; background: #fffaf0; font-size: .78rem; }
.result-card { max-width: 620px; margin: 5vh auto; text-align: center; }.permit-number { display: block; margin: 1rem auto; color: var(--green-800); font-size: 1.25rem; letter-spacing: .08em; }

/* Admin */
.admin-body { background: #f3f5f3; }
.admin-layout { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: 255px; padding: 1.4rem 1rem; flex-direction: column; color: white; background: linear-gradient(180deg,var(--green-950),#08281f); }
.sidebar::after { position: absolute; right: -1px; bottom: 8%; width: 1px; height: 35%; content: ''; background: linear-gradient(transparent,var(--gold),transparent); opacity: .5; }
.sidebar-brand { display: flex; align-items: center; gap: .8rem; padding: 0 .6rem 1.8rem; }
.sidebar-nav { display: flex; flex: 1; flex-direction: column; gap: .25rem; overflow-y: auto; }
.sidebar-nav .nav-caption { margin: 1.3rem .8rem .45rem; color: rgba(255,255,255,.3); font-size: .55rem; font-weight: 800; letter-spacing: .16em; }
.sidebar-nav a { display: flex; align-items: center; gap: .85rem; padding: .75rem .85rem; color: rgba(255,255,255,.65); border-radius: 9px; font-size: .82rem; font-weight: 600; }
.sidebar-nav a i { width: 18px; color: rgba(213,174,85,.78); font-size: .95rem; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: white; background: rgba(255,255,255,.08); }
.sidebar-nav a.active { box-shadow: inset 3px 0 var(--gold); }
.sidebar-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem .7rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-footer > div { display: flex; flex-direction: column; }.sidebar-footer strong { font-size: .78rem; }.sidebar-footer small { color: rgba(255,255,255,.45); font-size: .65rem; }
.admin-main { min-width: 0; margin-left: 255px; flex: 1; }
.admin-topbar { position: sticky; top: 0; z-index: 30; display: flex; height: 82px; align-items: center; gap: 1rem; padding: 0 clamp(1.2rem,3vw,2.5rem); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.admin-topbar > div { flex: 1; }.topbar-kicker { color: var(--gold-dark); font-size: .53rem; font-weight: 800; letter-spacing: .16em; }.admin-topbar h1 { margin: .15rem 0 0; font-size: 1.25rem; }.btn-scan { color: white; background: var(--green-800); }
.sidebar-toggle { display: none; font-size: 1.3rem; }
.admin-content { padding: clamp(1.3rem,3vw,2.5rem); }
.dashboard-intro, .page-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }.dashboard-intro p { margin: 0; color: var(--muted); }.date-chip, .soft-badge { padding: .55rem .8rem; color: #5d6d65; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: .72rem; }.date-chip i { margin-right: .5rem; color: var(--gold-dark); }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }.stat-card { display: flex; min-width: 0; align-items: center; gap: 1rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: 0 8px 26px rgba(7,45,34,.04); }.stat-icon { display: grid; width: 48px; height: 48px; place-items: center; flex: 0 0 auto; border-radius: 13px; font-size: 1.15rem; }.stat-icon.green { color: #167151; background: #e6f4ed; }.stat-icon.gold { color: #946b1e; background: #fbf2dc; }.stat-icon.orange { color: #b7592d; background: #fbeade; }.stat-icon.blue { color: #316b94; background: #e7f1f8; }.stat-card > div { display: flex; min-width: 0; flex-direction: column; }.stat-card small { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .1em; }.stat-card strong { font-size: 1.75rem; line-height: 1.25; }.stat-card span:last-child { color: #819089; font-size: .65rem; }
.dashboard-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 10px 30px rgba(7,45,34,.04); }.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }.section-heading small { color: var(--gold-dark); font-size: .55rem; font-weight: 800; letter-spacing: .14em; }.section-heading h2 { margin: .15rem 0 0; font-size: 1rem; }.section-heading > a { font-size: .72rem; font-weight: 700; }.chart-wrap { position: relative; height: 250px; }.quick-panel { height: 100%; }.quick-panel > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .75rem 0; color: var(--ink); border-bottom: 1px solid #edf1ee; }.quick-panel > a:last-child { border-bottom: 0; }.quick-panel > a > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--green-700); border-radius: 10px; background: #eaf3ee; }.quick-panel a div { display: flex; flex-direction: column; }.quick-panel a strong { font-size: .78rem; }.quick-panel a small { color: var(--muted); font-size: .65rem; }.quick-panel a > i { color: #a6b0ab; font-size: .7rem; }
.modern-table { margin: 0; vertical-align: middle; }.modern-table thead th { padding: .75rem; color: #849088; border-bottom-color: var(--line); background: #fafbfa; font-size: .55rem; letter-spacing: .1em; white-space: nowrap; }.modern-table tbody td { padding: .85rem .75rem; border-bottom-color: #edf0ee; font-size: .76rem; }.modern-table tbody td > strong, .modern-table tbody td > small { display: block; }.modern-table tbody td > small { margin-top: .18rem; color: var(--muted); font-size: .64rem; }.empty-cell { padding: 3rem !important; color: var(--muted); text-align: center; }.status-badge { display: inline-flex; align-items: center; padding: .28rem .55rem; border-radius: 999px; font-size: .6rem; font-weight: 800; white-space: nowrap; }.status-badge.pending { color: #7c621d; background: #f7efd3; }.status-badge.approved { color: #24678c; background: #e4f1f7; }.status-badge.outside { color: #a45222; background: #fae8dc; }.status-badge.returned { color: #176b4b; background: #e2f2e9; }.status-badge.rejected { color: #a33242; background: #f9e3e7; }.table-person { display: flex; align-items: center; gap: .65rem; }.table-person span { display: grid; width: 32px; height: 32px; place-items: center; color: white; border-radius: 9px; background: var(--green-700); font-weight: 800; }.filter-inline { display: flex; gap: .6rem; }.filter-inline .input-icon { min-width: 280px; }.modal-content { border: 0; border-radius: 18px; box-shadow: var(--shadow); }.modal-header, .modal-footer { padding: 1.2rem 1.4rem; border-color: var(--line); }.modal-body { padding: 1.4rem; }.modal-kicker { color: var(--gold-dark); font-size: .55rem; font-weight: 800; letter-spacing: .14em; }.code-label { color: var(--green-700) !important; font-family: monospace; }.text-wrap-cell { min-width: 180px; max-width: 280px; white-space: normal; }.action-stack { display: flex; gap: .35rem; }
.security-banner { display: flex; gap: .8rem; margin-bottom: 1.2rem; padding: 1rem; color: #66501f; border: 1px solid #ead7a4; border-radius: 12px; background: #fff9e9; }.security-banner i { font-size: 1.25rem; }.security-banner div { display: flex; flex-direction: column; }.security-banner strong { font-size: .8rem; }.security-banner span { font-size: .7rem; }.sticky-card { position: sticky; top: 102px; }.registration-steps { margin-top: 2rem; }.registration-steps > div { display: flex; gap: .8rem; padding: .75rem 0; color: #8d9792; }.registration-steps > div > span { display: grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; font-weight: 700; }.registration-steps .active > span { color: white; background: var(--green-700); }.registration-steps p { display: flex; margin: 0; flex-direction: column; }.registration-steps strong { color: var(--ink); font-size: .75rem; }.registration-steps small { font-size: .65rem; }.enroll-camera { position: relative; min-height: 390px; overflow: hidden; border-radius: 14px; background: #08271f; }.enroll-camera video, .enroll-camera canvas { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }.enroll-camera .face-guide { width: 39%; height: 75%; }.enroll-camera #enrollPlaceholder { position: absolute; inset: 0; display: grid; place-content: center; color: rgba(255,255,255,.5); text-align: center; }.enroll-camera #enrollPlaceholder i { font-size: 2rem; }.enroll-status { margin: .8rem 0; color: var(--muted); font-size: .75rem; }.filter-card { padding: 1rem 1.2rem; }.settings-list > div { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .78rem; }.settings-list > div:last-child { border-bottom: 0; }.settings-list span { color: var(--muted); }.security-card > i { display: grid; width: 52px; height: 52px; margin-bottom: 1rem; place-items: center; color: #9a7020; border-radius: 14px; background: #fff3d5; font-size: 1.4rem; }.security-card h2 { font-size: 1.1rem; }.security-card p, .security-card li { color: var(--muted); font-size: .75rem; line-height: 1.65; }

.public-gate-shell { max-width: 1180px; margin: 0 auto; }.public-gate-hero { position: relative; overflow: hidden; margin-bottom: 1.4rem; padding: clamp(1.5rem,4vw,2.7rem); color: white; border-radius: 22px; background: radial-gradient(circle at 85% 20%,rgba(211,168,67,.3),transparent 30%),linear-gradient(125deg,#073b2e,#126448); box-shadow: 0 18px 48px rgba(7,45,34,.16); }.public-gate-hero__icon { display: grid; width: 52px; height: 52px; margin-bottom: 1rem; place-items: center; color: #f0d17b; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.08); font-size: 1.45rem; }.public-gate-hero .eyebrow { color: #f0d17b; }.public-gate-hero h1 { margin: .55rem 0; font-size: clamp(1.65rem,4vw,2.5rem); font-weight: 800; }.public-gate-hero p { max-width: 700px; margin: 0; color: rgba(255,255,255,.78); }.public-gate-card { padding: clamp(1.1rem,3vw,1.65rem); border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 12px 32px rgba(7,45,34,.06); }.public-gate-pin { max-width: 560px; margin: 2rem auto; }.public-gate-pin .section-heading > i { color: var(--gold-dark); font-size: 1.35rem; }.public-gate-layout { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.2fr); gap: 1.2rem; }.public-gate-card h2 { margin: .2rem 0 .45rem; font-size: 1.15rem; }.public-gate-step { color: var(--gold-dark); font-size: .58rem; font-weight: 800; letter-spacing: .14em; }.selected-attendance { display: flex; margin-top: 1rem; padding: .9rem 1rem; flex-direction: column; border: 1px solid #dfece4; border-radius: 12px; background: #f4faf6; }.selected-attendance__label { color: #718078; font-size: .56rem; font-weight: 800; letter-spacing: .1em; }.selected-attendance strong { margin-top: .2rem; color: var(--green-800); font-size: .9rem; }.selected-attendance small { color: var(--muted); }.camera-consent { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem; color: #53665c; border-radius: 11px; background: #f4f6f5; font-size: .72rem; }.camera-consent i { color: var(--green-700); font-size: 1rem; }.camera-live { display: inline-flex; gap: .4rem; align-items: center; color: #25835b; font-size: .6rem; font-weight: 800; letter-spacing: .08em; }.camera-live i { width: 7px; height: 7px; border-radius: 50%; background: #33b779; box-shadow: 0 0 0 4px #e4f6ec; }.gate-camera-frame { position: relative; display: grid; min-height: 300px; overflow: hidden; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#102b23,#081a15); }.gate-camera-frame video, .gate-camera-frame img { display: block; width: 100%; max-height: 480px; object-fit: cover; }.gate-camera-frame video { transform: scaleX(-1); }.gate-camera-frame img[hidden],.gate-camera-frame video[hidden] { display: none; }.gate-camera-placeholder { position: absolute; inset: 0; display: flex; gap: .6rem; align-items: center; justify-content: center; flex-direction: column; color: rgba(255,255,255,.65); text-align: center; font-size: .78rem; }.gate-camera-placeholder[hidden] { display: none; }.gate-camera-placeholder i { color: #d3b765; font-size: 2rem; }.gate-camera-status { min-height: 2.5rem; padding: .75rem 0; color: var(--muted); font-size: .74rem; }.gate-camera-status.is-error { color: #b42332; }.public-gate-empty-icon { display: inline-block; margin-bottom: .8rem; color: #22845e; font-size: 2.4rem; }
@media (max-width: 767.98px) { .public-gate-layout { grid-template-columns: 1fr; }.gate-camera-frame { min-height: 230px; }.public-gate-hero { border-radius: 16px; } }

.gate-card { height: 100%; padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: #fafcfb; }
.gate-employee-list { display: grid; gap: .55rem; margin-top: 1rem; }.gate-employee-choice { display: flex; width: 100%; gap: .75rem; align-items: center; padding: .8rem; color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s,background .15s,transform .15s; }.gate-employee-choice:hover,.gate-employee-choice.is-selected { border-color: #3d9970; background: #f2faf5; }.gate-employee-choice:hover { transform: translateY(-1px); }.gate-employee-choice__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: var(--green-700); border-radius: 11px; background: #e7f4ec; font-size: 1.1rem; }.gate-employee-choice__details { display: flex; min-width: 0; flex: 1; flex-direction: column; }.gate-employee-choice__details strong { font-size: .78rem; }.gate-employee-choice__details small { color: var(--muted); font-size: .65rem; }.gate-employee-choice__arrow { color: #8d9992; font-size: .75rem; }.gate-verification-panel[hidden] { display: none; }.gate-pin-submit { margin-top: 1.2rem; padding: 1rem; border: 1px solid #e8e0cb; border-radius: 13px; background: #fffdf7; }
.gate-card h3 { margin: .25rem 0; font-size: 1rem; }.gate-card p { color: var(--muted); font-size: .7rem; }

@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(67,210,143,0); } }
@keyframes cue { from { opacity: .65; } to { opacity: 1; transform: translate(-46%,-50%) scale(1.06); } }
@keyframes guide-arrow { from { transform: translateX(-3px); } to { transform: translateX(5px); } }
@keyframes portrait-right { from { transform: rotate(0deg) translateX(-2px); } to { transform: rotate(7deg) translateX(5px); } }
@keyframes portrait-left { from { transform: scaleX(-1) rotate(0deg) translateX(-2px); } to { transform: scaleX(-1) rotate(7deg) translateX(5px); } }
@keyframes portrait-up { from { transform: translateY(4px); } to { transform: translateY(-6px); } }
@keyframes portrait-down { from { transform: translateY(-4px); } to { transform: translateY(7px); } }
@keyframes portrait-center { from { transform: scale(1); } to { transform: scale(1.06); } }

@media (max-width: 1100px) {
  .scanner-layout { grid-template-columns: 1fr; max-width: 800px; padding-top: 2rem; }.scanner-copy { max-width: none; text-align: center; }.scanner-copy h1 { font-size: 3rem; }.scanner-copy > p { margin-inline: auto; }.privacy-note { margin-inline: auto; }.stat-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .scan-header { grid-template-columns: 1fr auto; }.agency-lockup { display: none; }.scan-admin-link span { display: none; }.scan-footer { grid-template-columns: 1fr; text-align: center; }.scan-footer span:last-child { text-align: center; }.sidebar { transform: translateX(-100%); transition: transform .25s; }.sidebar-open .sidebar { transform: translateX(0); box-shadow: 15px 0 40px rgba(0,0,0,.25); }.admin-main { margin-left: 0; }.sidebar-toggle { display: inline-block; }.admin-topbar .btn-scan { font-size: 0; }.admin-topbar .btn-scan i { margin: 0 !important; font-size: 1rem; }.identity-grid { grid-template-columns: 1fr; }.filter-inline { width: 100%; flex-wrap: wrap; }.page-actions { align-items: stretch; flex-direction: column; }
}
@media (max-width: 600px) {
  .scan-header { padding: .85rem 1rem; }.scan-brand small { display: none; }.scan-back-button { left: .85rem; padding: .55rem .65rem; }.scan-back-button span { display: none; }.scan-institution img { width: 38px; height: 38px; }.scan-institution small { font-size: .49rem; }.scan-institution strong { font-size: .68rem; }.scanner-layout { display: block; padding: 0; }.scanner-layout--focused { padding: 0; }.scanner-copy { display: none; }.camera-card { min-height: calc(100vh - 71px); border: 0; border-radius: 0; }.camera-stage { min-height: calc(100vh - 160px); }.face-guide { width: 64%; height: 64%; }.scanner-panel { grid-template-columns: auto 1fr; }.scan-progress-wrap { grid-column: 1/-1; }.scan-footer { display: none; }.camera-placeholder { padding: 1.3rem; }.camera-placeholder::before { width: 270px; height: 270px; }.motion-guide { right: .7rem; bottom: .7rem; max-width: 190px; }.motion-guide__portrait { width: 52px; height: 52px; }.motion-guide strong { font-size: .61rem; }.landing-back { top: .85rem; left: .85rem; padding: .55rem .7rem; }.landing-back span { display: none; }.attendance-actions { grid-template-columns: 1fr; }.attendance-action { min-height: 130px; padding: 1.25rem; }.attendance-home h1 { font-size: 2.25rem; }.attendance-home__lead { font-size: .88rem; }.attendance-result__detail div { align-items: flex-start; flex-direction: column; gap: .25rem; }.stat-grid { grid-template-columns: 1fr; }.admin-topbar { height: 72px; padding: 0 .8rem; }.topbar-kicker { display: none; }.admin-content { padding: 1rem; }.identity-card { padding: 1.3rem; }.identity-profile { align-items: flex-start; }.identity-profile img, .avatar-placeholder { width: 65px; height: 65px; }.identity-profile h2 { font-size: 1.15rem; }.card-soft { padding: 1.3rem; }.filter-inline .input-icon { min-width: 100%; }.enroll-camera { min-height: 330px; }
}

/* Riwayat izin: tabel berubah menjadi kartu agar kolom tetap terbaca di ponsel. */
img, video { max-width: 100%; }
.history-card { min-width: 0; padding: clamp(.75rem,2vw,1.35rem); }
.history-table { min-width: 1180px; }
.history-employee strong { overflow-wrap: anywhere; }
.history-note { min-width: 190px; max-width: 300px; line-height: 1.55; overflow-wrap: anywhere; }
.history-time small { white-space: normal; }
.history-status { white-space: normal; }
.history-verifier { display: block; margin-top: .4rem; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.history-photo-strip { display: flex; min-width: 170px; gap: .55rem; align-items: flex-start; flex-wrap: wrap; }
.history-photo-strip figure { width: 58px; margin: 0; text-align: center; }
.history-photo { display: block; width: 58px; height: 58px; padding: 0; overflow: hidden; border: 1px solid #dfe8e2; border-radius: 10px; background: #f3f6f4; }
.history-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-photo-strip figcaption { margin-top: .2rem; color: var(--muted); font-size: .55rem; line-height: 1.2; }
.history-photo-full { max-height: min(72vh,760px); object-fit: contain; }
.admin-topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .history-table-wrap { overflow: visible; }
  .history-table, .history-table tbody { display: block; min-width: 0; width: 100%; }
  .history-table thead { display: none; }
  .history-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 .9rem; margin-bottom: .9rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(7,45,34,.04); }
  .history-table tbody tr:last-child { margin-bottom: 0; }
  .history-table tbody td { display: grid; grid-template-columns: minmax(88px,.42fr) minmax(0,1fr); gap: .55rem; align-items: start; min-width: 0; padding: .7rem .1rem; border-bottom: 1px solid #edf0ee; font-size: .76rem; }
  .history-table tbody td::before { content: attr(data-label); color: #7b8981; font-size: .57rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
  .history-table tbody td.history-employee, .history-table tbody td:nth-last-child(3), .history-table tbody td:last-child { grid-column: 1/-1; }
  .history-table tbody td:last-child { border-bottom: 0; }
  .history-note { max-width: none; }
  .history-table .empty-cell { display: block; border: 0; }
}

@media (max-width: 560px) {
  .history-table tbody tr { grid-template-columns: minmax(0,1fr); padding: .5rem .75rem; }
  .history-table tbody td, .history-table tbody td.history-employee, .history-table tbody td:nth-last-child(3), .history-table tbody td:last-child { grid-column: 1; grid-template-columns: minmax(90px,.38fr) minmax(0,1fr); }
  .history-table tbody td.history-employee { grid-template-columns: minmax(90px,.38fr) minmax(0,1fr); }
  .history-table .history-photo-strip { min-width: 0; }
  .history-table .action-stack { flex-wrap: wrap; }
  .filter-card .btn { min-height: 42px; }
}

/* Clear, responsive layouts for the runtime settings and face enrollment screens. */
.settings-page-intro { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; padding:1.15rem 1.3rem; border:1px solid #dfe9e2; border-radius:16px; background:linear-gradient(120deg,#f1f8f3,#fff); }
.settings-page-icon { display:grid; width:48px; height:48px; flex:0 0 auto; place-items:center; border-radius:14px; color:#216a4f; background:#deeee4; font-size:1.25rem; }
.settings-page-intro h2 { margin:0 0 .25rem; font-size:1.02rem; }.settings-page-intro p { margin:0; color:var(--muted); font-size:.76rem; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.settings-field { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-width:0; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:13px; background:#fff; }
.settings-field__label { max-width:55%; color:var(--ink); font-size:.78rem; font-weight:650; }.settings-field__control { display:flex; align-items:center; gap:.6rem; width:min(47%,230px); }.settings-field__control .form-control { min-width:75px; font-weight:700; }.settings-field__control small { color:var(--muted); font-size:.65rem; white-space:nowrap; }
.settings-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; }.settings-actions p { max-width:620px; margin:0; color:var(--muted); font-size:.72rem; }.settings-actions p i { margin-right:.25rem; color:#a27a2c; }.settings-actions .btn { flex:0 0 auto; }
.chart-description { margin:.25rem 0 0; color:var(--muted); font-size:.72rem; }
.face-reg-banner { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1rem; padding:1rem 1.15rem; border:1px solid #dce9e1; border-radius:14px; background:#f3f8f5; }.face-reg-banner>span { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:11px; color:#236a4f; background:#e0eee5; }.face-reg-banner strong { color:var(--ink); font-size:.8rem; }.face-reg-banner p { margin:.2rem 0 0; color:var(--muted); font-size:.72rem; line-height:1.55; }
.face-reg-employee { margin-bottom:1rem; padding:1.25rem 1.4rem; }.face-reg-step { display:flex; align-items:center; gap:.75rem; }.face-reg-step>span { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:11px; color:#236a4f; background:#e8f1eb; font-size:.68rem; font-weight:800; }.face-reg-step small { color:#74847a; font-size:.58rem; font-weight:800; letter-spacing:.1em; }.face-reg-step h2 { margin:.12rem 0 0; color:var(--ink); font-size:.98rem; }.face-reg-employee>.form-label { margin:.9rem 0 .35rem; font-size:.72rem; font-weight:650; }.face-reg-selected { display:flex; align-items:center; gap:.65rem; margin-top:.75rem; padding:.65rem .75rem; border-radius:10px; background:#f4f8f5; }.face-reg-selected>i { color:#267452; font-size:1.1rem; }.face-reg-selected span,.face-reg-complete span { display:flex; min-width:0; flex-direction:column; }.face-reg-selected strong { font-size:.74rem; }.face-reg-selected small { color:var(--muted); font-size:.66rem; }
.face-reg-camera-card,.face-reg-guide-card { height:100%; padding:1.3rem; }.face-reg-camera-card .section-heading { align-items:center; margin-bottom:1rem; }.face-reg-counter { padding:.45rem .7rem; border:1px solid #dce9e1; border-radius:999px; color:#216a4f; background:#f2f8f4; font-size:.7rem; font-weight:750; white-space:nowrap; }.enroll-camera { min-height:clamp(300px,42vw,490px); }.enroll-camera #enrollPlaceholder small { color:rgba(255,255,255,.55); font-size:.68rem; }.face-reg-actions { display:flex; flex-wrap:wrap; gap:.55rem; }.face-reg-actions .btn { min-height:42px; }.face-reg-hint { display:block; margin-top:.7rem; color:var(--muted); font-size:.66rem; line-height:1.5; }.face-reg-guide-card .face-reg-step { margin-bottom:1.1rem; }.face-reg-tips { display:grid; gap:.9rem; margin:0; padding:0; list-style:none; }.face-reg-tips li { display:flex; gap:.65rem; }.face-reg-tips li>span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:10px; color:#287151; background:#edf5ef; }.face-reg-tips li div { display:flex; flex-direction:column; gap:.15rem; }.face-reg-tips strong,.face-reg-complete strong { color:var(--ink); font-size:.72rem; }.face-reg-tips small,.face-reg-complete small { color:var(--muted); font-size:.66rem; line-height:1.45; }.face-reg-complete { display:flex; align-items:center; gap:.65rem; margin-top:1.1rem; padding:.8rem; border:1px solid #e0eae3; border-radius:11px; background:#f7faf7; }.face-reg-complete>i { color:#267452; }
@media (max-width:767.98px) { .settings-grid { grid-template-columns:1fr; }.settings-field { align-items:flex-start; flex-direction:column; gap:.5rem; }.settings-field__label { max-width:none; }.settings-field__control { width:100%; }.settings-actions { align-items:stretch; flex-direction:column; }.settings-actions .btn { width:100%; }.face-reg-camera-card,.face-reg-guide-card,.face-reg-employee { padding:1rem; }.face-reg-camera-card .section-heading { align-items:flex-start; }.face-reg-step h2 { font-size:.88rem; }.enroll-camera { min-height:290px; }.face-reg-actions .btn { flex:1 1 auto; }.face-reg-actions label { text-align:center; } }

.history-photo-strip--three { min-width: 198px; flex-wrap: nowrap; }
.history-photo--empty { display: grid; place-items: center; color: #9da9a2; border-style: dashed; }
.history-photo--empty i { font-size: 1.05rem; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.table-pagination__summary { color: var(--muted); font-size: .7rem; }
.table-pagination__actions, .table-pagination__actions label, .table-pagination__pages { display: flex; align-items: center; gap: .4rem; }
.table-pagination__actions label { margin: 0 .35rem 0 0; color: var(--muted); font-size: .68rem; }
.table-pagination__actions .form-select { width: auto; min-width: 66px; }
.table-pagination__button { display: grid; min-width: 32px; height: 32px; padding: 0 .45rem; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: #405149; background: #fff; font-size: .7rem; font-weight: 700; }
.table-pagination__button:hover:not(:disabled), .table-pagination__button.active { color: #fff; border-color: var(--green-700); background: var(--green-700); }
.table-pagination__button:disabled { cursor: default; opacity: .4; }
@media (max-width: 575.98px) { .table-pagination { align-items: stretch; flex-direction: column; }.table-pagination__actions { justify-content: space-between; }.table-pagination__pages { gap: .25rem; }.table-pagination__button { min-width: 30px; height: 30px; }.history-photo-strip--three { min-width: 0; gap: .4rem; }.history-photo-strip--three figure { width: 52px; }.history-photo-strip--three .history-photo { width: 52px; height: 52px; } }

.native-camera-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .6rem; color: #216a4f; border: 1px solid #d5e7dc; border-radius: 999px; background: #eef7f1; font-size: .6rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.gate-camera-placeholder strong { color: #fff; font-size: .82rem; }.gate-camera-placeholder span { max-width: 250px; color: rgba(255,255,255,.65); }
.gate-native-camera-actions { display: flex; flex-wrap: wrap; gap: .55rem; }.gate-native-camera-actions .btn { min-height: 44px; }
.gate-camera-frame img { min-height: 260px; background: #071b15; object-fit: contain; }
@media (max-width: 767.98px) { .public-gate-shell > .btn { width: 100%; }.public-gate-hero { padding: 1.35rem; }.public-gate-hero__icon { width: 44px; height: 44px; }.gate-employee-choice { min-height: 72px; }.gate-verification-panel { scroll-margin-top: 1rem; }.gate-native-camera-actions .btn { width: 100%; }.gate-camera-frame { min-height: 250px; }.gate-camera-frame img { min-height: 250px; }.gate-pin-submit .btn { min-height: 48px; } }