:root{--font-display: "Nunito", ui-sans-serif, system-ui, sans-serif;--font-body: "Inter", ui-sans-serif, system-ui, sans-serif;--canvas: #fdf6db;--canvas-2: #f7edc9;--paper: #fffdf3;--ink: #26383c;--ink-2: #4c5f60;--muted: #5c7072;--line: rgba(38, 56, 60, .16);--line-strong: rgba(38, 56, 60, .32);--deep: #0f4f51;--accent: #128c8e;--accent-ink: #0b6b6d;--accent-soft: #dceceb;--hadir: #0b6b6d;--hadir-bg: #dceceb;--terlambat: #8a5a00;--terlambat-bg: #f6ecd4;--izin: #4c5f60;--izin-bg: #eae7dc;--sakit: #4c5f60;--sakit-bg: #eae7dc;--alpa: #a3282f;--alpa-bg: #f8e4e3;--focus: #0f4f51;--radius-xs: 5px;--radius-sm: 9px;--radius-md: 13px;--radius-lg: 20px;--shadow-press: 0 1px 0 rgba(38, 56, 60, .18);--shadow-float: 0 18px 40px -24px rgba(15, 79, 81, .5);--shadow: 0 18px 40px -24px rgba(15, 79, 81, .35);--z-skip: 60;--z-banner: 50;--z-popup: 70;--z-bottom: 30;--text-xs: clamp(11.5px, .68rem + .2vw, 12.5px);--text-sm: clamp(13px, .78rem + .25vw, 14px);--text-md: clamp(15px, .9rem + .35vw, 16.5px);--text-lg: clamp(17px, 1rem + .5vw, 20px);--text-xl: clamp(20px, 1.15rem + .9vw, 26px);--text-2xl: clamp(24px, 1.4rem + 1.4vw, 32px);--tap: 44px;--gutter: clamp(14px, 3.2vw, 20px);font-family:var(--font-body);color:var(--ink);background:var(--canvas);font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scrollbar-color:var(--line-strong) transparent}*,*:before,*:after{box-sizing:border-box}html{min-height:100dvh;background:var(--canvas)}body{min-width:320px;min-height:100dvh;margin:0;overflow-x:hidden;color:var(--ink);font-family:var(--font-body);font-size:var(--text-md);line-height:1.55;background:var(--canvas);overscroll-behavior-y:none}body:before{position:fixed;inset:0;z-index:0;pointer-events:none;content:"";opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}p{margin:0}h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--deep)}button{min-height:var(--tap);margin:0;padding:0;font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}button:active{transform:translateY(1px)}input,select,textarea{min-height:var(--tap);font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm)}textarea{min-height:112px;padding:11px 13px;line-height:1.6;resize:vertical}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}.skip-link{position:absolute;left:12px;top:8px;z-index:var(--z-skip);transform:translateY(-160%);padding:10px 14px;color:var(--paper);background:var(--deep);border-radius:var(--radius-sm);text-decoration:none}.skip-link:focus{transform:translateY(0)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.primary-action,.mobile-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;color:var(--paper);background:var(--deep);border:1px solid var(--deep);border-radius:var(--radius-sm);box-shadow:var(--shadow-press);transition:background-color .14s ease,border-color .14s ease}@media(hover:hover){.primary-action:hover:not(:disabled),.mobile-primary:hover:not(:disabled){background:#0b3f41;border-color:#0b3f41}}.primary-action:disabled,.mobile-primary:disabled{color:var(--paper);background:#6e8c8d;border-color:#6e8c8d;box-shadow:none;cursor:not-allowed}.secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--tap);padding:0 15px;font-size:var(--text-sm);font-weight:600;color:var(--deep);background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);transition:background-color .14s ease,border-color .14s ease}@media(hover:hover){.secondary-action:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}}.secondary-action:disabled{color:var(--muted);border-color:var(--line);cursor:not-allowed}.secondary-action.active,.secondary-action.active-status{color:var(--paper);background:var(--deep);border-color:var(--deep)}.danger-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 16px;font-size:var(--text-sm);font-weight:700;color:var(--paper);background:var(--alpa);border:1px solid var(--alpa);border-radius:var(--radius-sm);box-shadow:var(--shadow-press)}.danger-button:disabled{color:var(--muted);background:transparent;border-color:var(--line-strong);box-shadow:none;cursor:not-allowed}.wide{width:100%}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);min-height:var(--tap);color:var(--deep);border:1px solid var(--line);border-radius:var(--radius-sm)}@media(hover:hover){.icon-button:hover{background:var(--accent-soft)}}.logout-chip{min-height:38px;padding:0 13px;font-size:var(--text-xs);font-weight:600;color:var(--ink-2);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.table-action-btn{min-height:36px;padding:0 12px;font-size:var(--text-xs);font-weight:600;color:var(--deep);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}@media(hover:hover){.table-action-btn:hover{background:var(--accent-soft);border-color:var(--accent)}}.api-banner{position:sticky;top:0;z-index:var(--z-banner);padding:9px 14px;font-size:var(--text-xs);font-weight:600;text-align:center;border-bottom:1px solid var(--line-strong)}.api-banner.loading{color:var(--izin);background:var(--izin-bg)}.api-banner.error{color:var(--alpa);background:var(--alpa-bg)}.api-banner.success{color:var(--hadir);background:var(--hadir-bg)}.empty-schedules{padding:14px 2px;color:var(--muted);font-size:var(--text-sm);text-align:center}.access-denied{position:fixed;inset:0;z-index:var(--z-popup);display:grid;place-items:center;padding:var(--gutter);background:#26383c6b}.access-denied>div{max-width:380px;padding:20px;white-space:pre-line;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-float)}.surface-links{display:flex;gap:6px;padding:4px;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--radius-sm)}.surface-links button{min-height:38px;padding:0 14px;font-size:var(--text-xs);font-weight:700;color:var(--ink-2);border-radius:var(--radius-xs)}.surface-links button.active{color:var(--paper);background:var(--deep)}.avatar{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 auto;overflow:hidden;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);color:var(--deep);background:var(--accent-soft);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.avatar.photo{padding:0;background:var(--canvas-2)}.avatar.photo img{width:100%;height:100%;object-fit:cover;display:block}.status-pill{display:inline-flex;align-items:center;padding:3px 8px;font-size:var(--text-xs);font-weight:700;border:1px solid currentColor;border-radius:var(--radius-xs);white-space:nowrap}.status-pill.present,.summary-cell.present,.quick-status-row button.present,.student-card.present{color:var(--hadir)}.status-pill.late,.summary-cell.late,.quick-status-row button.late,.student-card.late{color:var(--terlambat)}.status-pill.permit,.summary-cell.permit,.quick-status-row button.permit,.student-card.permit{color:var(--izin)}.status-pill.sick,.summary-cell.sick,.quick-status-row button.sick,.student-card.sick{color:var(--sakit)}.status-pill.absent,.summary-cell.absent,.quick-status-row button.absent,.student-card.absent{color:var(--alpa)}.status-pill.present{background:var(--hadir-bg)}.status-pill.late{background:var(--terlambat-bg)}.status-pill.permit{background:var(--izin-bg)}.status-pill.sick{background:var(--sakit-bg)}.status-pill.absent{background:var(--alpa-bg)}.spin{animation:s360-spin .9s linear infinite}@keyframes s360-spin{to{transform:rotate(360deg)}}.login-shell{position:relative;z-index:1;display:grid;place-items:center;min-height:100dvh;padding:var(--gutter);padding-bottom:calc(var(--gutter) + env(safe-area-inset-bottom))}.login-card{display:flex;flex-direction:column;gap:14px;width:min(420px,100%);padding:clamp(22px,6vw,34px);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.login-card:before{content:"";display:block;width:46px;height:3px;background:var(--accent)}.login-kicker{font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}.login-card h1{font-size:var(--text-2xl);color:var(--deep)}.login-sub,.login-card .login-sub{margin:-6px 0 4px;color:var(--ink-2);font-size:var(--text-sm)}.login-card label,.login-field{display:flex;flex-direction:column;gap:6px;font-size:var(--text-xs);font-weight:700;color:var(--ink-2)}.login-card input{width:100%;padding:0 13px}.login-card input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}.login-card .mobile-primary,.login-button{width:100%;margin-top:4px}.login-error,.login-error-msg{padding:10px 12px;font-size:var(--text-sm);font-weight:600;color:var(--alpa);background:var(--alpa-bg);border:1px solid var(--alpa);border-radius:var(--radius-sm)}.login-container{display:flex;flex-direction:column;gap:16px;width:min(420px,100%);margin:0 auto;padding:var(--gutter);padding-top:calc(28px + env(safe-area-inset-top))}.brand-icon{display:inline-grid;place-items:center;width:52px;height:52px;color:var(--paper);background:var(--deep);border-radius:var(--radius-sm);font-family:var(--font-display);font-weight:800}.login-form{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,5vw,30px);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-lg)}.login-demo-accounts{display:flex;flex-direction:column;gap:8px;font-size:var(--text-xs);color:var(--ink-2)}.demo-chips{display:flex;flex-wrap:wrap;gap:8px}.demo-chips button{padding:0 12px;font-size:var(--text-xs);font-weight:600;color:var(--deep);background:var(--canvas-2);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.login-footer{font-size:var(--text-xs);color:var(--muted);text-align:center}.phone-stage{position:relative;z-index:1;min-height:100dvh}.phone-shell{display:flex;flex-direction:column;gap:clamp(12px,3vw,18px);min-height:100dvh;padding:0 var(--gutter);padding-bottom:calc(96px + env(safe-area-inset-bottom));background:var(--canvas)}.mobile-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 calc(var(--gutter) * -1);padding:10px var(--gutter);background:var(--canvas);border-bottom:1px solid var(--line)}.brand-mini{display:flex;align-items:center;gap:10px;min-width:0}.brand-mini .brand-logo{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.brand-mini strong{display:block;font-family:var(--font-display);font-size:var(--text-md);font-weight:800;line-height:1.1;color:var(--deep)}.brand-mini small{display:block;font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}.brand-mini.light strong{color:var(--paper)}.brand-mini.light small{color:var(--accent-soft)}.brand-mini.light .brand-logo{border-color:#fffdf366}.teacher-profile{display:flex;align-items:center;gap:12px;padding-top:4px}.teacher-avatar{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;font-family:var(--font-display);font-size:var(--text-md);font-weight:800;color:var(--paper);background:var(--deep);border-radius:var(--radius-xs)}.teacher-profile p{font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}.teacher-profile h1{font-size:var(--text-xl);line-height:1.15}.teacher-profile span{display:block;font-size:var(--text-sm);color:var(--ink-2)}.week-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.week-strip::-webkit-scrollbar{display:none}.week-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-xs)}.week-day small{font-size:var(--text-xs);font-weight:600;color:var(--muted)}.week-day strong{font-family:var(--font-display);font-size:var(--text-md);font-variant-numeric:tabular-nums;color:var(--ink)}.week-day.active{background:var(--deep);border-color:var(--deep)}.week-day.active small{color:var(--accent-soft)}.week-day.active strong{color:var(--paper)}.gps-card{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"icon text" "action action";align-items:start;gap:6px 12px;padding:16px 16px 16px 19px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-md)}.gps-card:before{position:absolute;left:0;top:12px;bottom:12px;width:3px;content:"";background:var(--terlambat)}.gps-card.ontime:before{background:var(--hadir)}.gps-icon{grid-area:icon;display:grid;place-items:center;width:44px;height:44px;color:var(--deep);background:var(--accent-soft);border-radius:var(--radius-xs)}.gps-card>div:nth-child(2){grid-area:text;min-width:0}.gps-card span{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.gps-card strong{display:block;margin:2px 0 1px;font-family:var(--font-display);font-size:var(--text-lg);font-variant-numeric:tabular-nums;color:var(--deep)}.gps-card small{display:block;font-size:var(--text-xs);color:var(--ink-2)}.gps-card .mobile-primary{grid-area:action;width:100%;margin-top:12px}.attendance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat-card{display:flex;flex-direction:column;gap:8px;padding:12px 13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}.stat-card .label{display:flex;align-items:center;gap:6px;padding-bottom:7px;font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}.stat-card .value{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--deep)}.stat-card .hint{font-size:var(--text-xs);color:var(--ink-2)}.mobile-panel{padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md)}.mobile-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}.mobile-section-head h2{position:relative;padding-left:12px;font-size:var(--text-lg)}.mobile-section-head h2:before{position:absolute;left:0;top:.28em;bottom:.28em;width:3px;content:"";background:var(--accent)}.mobile-section-head span{font-size:var(--text-xs);font-weight:600;color:var(--muted);white-space:nowrap}.mobile-section-head button{min-height:32px;padding:0 10px;font-size:var(--text-xs);font-weight:700;color:var(--deep);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.schedule-dashboard,.schedule-stack{display:flex;flex-direction:column}.schedule-card{display:grid;grid-template-columns:62px 1fr 20px;align-items:center;gap:12px;min-height:68px;padding:10px 4px;text-align:left;border-bottom:1px solid var(--line);border-radius:0}.schedule-stack>.schedule-card:last-child{border-bottom:0}.schedule-card>div:nth-child(2){min-width:0}.schedule-card strong{display:block;font-family:var(--font-display);font-size:var(--text-md);color:var(--deep)}.schedule-card span{display:block;font-size:var(--text-xs);color:var(--ink-2)}.schedule-card small{display:block;margin-top:2px;font-size:var(--text-xs);font-weight:600;color:var(--accent-ink)}.schedule-card svg{color:var(--muted);justify-self:end}@media(hover:hover){.schedule-card:hover{background:var(--accent-soft)}}.schedule-card.active{background:var(--canvas-2);box-shadow:inset 3px 0 0 var(--accent)}.schedule-card.active strong{color:var(--deep)}.time-block{display:flex;flex-direction:column;gap:1px;padding-right:10px;border-right:1px solid var(--line)}.time-block strong{font-family:var(--font-display);font-size:var(--text-md);font-variant-numeric:tabular-nums;line-height:1.1;color:var(--deep)}.time-block span{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted)}.time-block.compact-time strong{font-size:var(--text-md)}.session-header-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;background:var(--deep);border-radius:var(--radius-md);color:var(--paper)}.session-header-card button{min-height:38px;padding:0 12px;font-size:var(--text-xs);font-weight:700;color:var(--paper);border:1px solid rgba(255,253,243,.45);border-radius:var(--radius-xs)}.session-header-card h2{font-size:var(--text-md);color:var(--paper)}.session-header-card p{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--accent-soft)}.session-header-card span{padding:3px 8px;font-size:var(--text-xs);font-weight:700;color:var(--paper);border:1px solid rgba(255,253,243,.45);border-radius:var(--radius-xs)}.next-class-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;background:var(--canvas-2);border:1px solid var(--line-strong);border-radius:var(--radius-md)}.next-class-card h2{font-size:var(--text-lg)}.next-class-card p{font-size:var(--text-sm);color:var(--ink-2)}.next-class-card small{font-size:var(--text-xs);font-weight:600;color:var(--accent-ink)}.next-class-card button{display:grid;place-items:center;width:var(--tap);height:var(--tap);color:var(--deep);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.mobile-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--radius-sm)}.mobile-tabs button{min-height:var(--tap);font-size:var(--text-sm);font-weight:700;color:var(--ink-2);border-radius:var(--radius-xs);box-shadow:inset 0 -3px 0 transparent}.mobile-tabs button.active{color:var(--deep);background:var(--paper);box-shadow:inset 0 -3px 0 var(--accent)}.quick-status-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.quick-status-row button{display:inline-flex;flex:1 1 92px;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 8px;font-size:var(--text-xs);font-weight:700;color:var(--ink-2);background:var(--canvas-2);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.quick-status-row button.present{background:var(--hadir-bg)}.quick-status-row button.late{background:var(--terlambat-bg)}.quick-status-row button.permit{background:var(--izin-bg)}.quick-status-row button.sick{background:var(--sakit-bg)}.quick-status-row button.absent{background:var(--alpa-bg)}.quick-status-row button.active-status{color:var(--paper);border-color:transparent}.quick-status-row button.present.active-status{background:var(--hadir)}.quick-status-row button.late.active-status{background:var(--terlambat)}.quick-status-row button.permit.active-status{background:var(--izin)}.quick-status-row button.sick.active-status{background:var(--sakit)}.quick-status-row button.absent.active-status{background:var(--alpa)}.quick-status-row button:disabled{opacity:.55;cursor:not-allowed}.mark-all-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--tap);margin-top:12px;font-size:var(--text-sm);font-weight:700;color:var(--deep);background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius-sm)}.mark-all-button:disabled{color:var(--muted);background:var(--canvas-2);border-color:var(--line);cursor:not-allowed}.mobile-roster{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line)}button.mobile-roster-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;width:100%;min-height:62px;padding:9px 4px;text-align:left;border-bottom:1px solid var(--line);border-radius:0}button.mobile-roster-row strong{display:block;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;color:var(--ink)}button.mobile-roster-row span{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted)}@media(hover:hover){button.mobile-roster-row:hover{background:var(--accent-soft)}}button.mobile-roster-row.selected{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}button.mobile-roster-row:disabled{cursor:not-allowed}.sticky-submit{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:16px;font-size:var(--text-sm);font-weight:700;color:var(--paper);background:var(--deep);border:1px solid var(--deep);border-radius:var(--radius-sm);box-shadow:0 8px 22px -16px #0f4f51e6}.sticky-submit:disabled{color:var(--muted);background:var(--canvas-2);border-color:var(--line-strong);box-shadow:none;cursor:not-allowed}.mobile-field{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:var(--text-sm);font-weight:700;color:var(--deep)}.field-label{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}.mobile-field textarea{width:100%;font-size:var(--text-md);font-weight:400;color:var(--ink)}.mobile-field textarea:focus-visible{border-color:var(--accent)}.mobile-field small{font-size:var(--text-xs);font-weight:400;color:var(--muted)}.mobile-field.check{flex-direction:row;align-items:center;gap:10px;min-height:var(--tap);padding:10px 12px;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--ink)}.mobile-field.check input{width:22px;height:22px;min-height:22px;accent-color:var(--accent)}.field-readonly{padding:11px 13px;font-size:var(--text-sm);font-weight:400;color:var(--ink-2);background:var(--canvas-2);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:var(--radius-xs)}.journal-history{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding:12px;background:var(--canvas-2);border:1px dashed var(--line-strong);border-radius:var(--radius-sm)}.history-mini{padding-left:10px;font-size:var(--text-xs);color:var(--ink-2);border-left:2px solid var(--line-strong)}.history-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}.history-item{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;min-height:58px;padding:9px 4px;border-bottom:1px solid var(--line)}.history-item>span{display:grid;place-items:center;width:34px;height:34px;color:var(--deep);background:var(--accent-soft);border-radius:var(--radius-xs)}.history-item strong{display:block;font-size:var(--text-sm);font-weight:600;color:var(--ink)}.history-item small{font-size:var(--text-xs);color:var(--muted)}button.history-item.clickable{width:100%;text-align:left;border-radius:0}@media(hover:hover){button.history-item.clickable:hover{background:var(--accent-soft)}}button.history-item.clickable:disabled{cursor:not-allowed}.mobile-bottom{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bottom);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px var(--gutter);padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line-strong);transition:transform .2s ease}.mobile-bottom.show{transform:translateY(0)}.mobile-bottom.hide{transform:translateY(130%)}.mobile-bottom button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;font-size:var(--text-xs);font-weight:700;color:var(--muted);border-radius:var(--radius-xs);box-shadow:inset 0 3px 0 transparent}.mobile-bottom button.active{color:var(--deep);background:var(--accent-soft);box-shadow:inset 0 3px 0 var(--accent)}.kiosk-app{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);min-height:100dvh;padding:clamp(16px,2.5vw,30px);padding-bottom:calc(clamp(16px,2.5vw,30px) + env(safe-area-inset-bottom));background:var(--canvas)}.kiosk-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:3px solid var(--deep)}.kiosk-title{min-width:0}.kiosk-title h1{font-size:var(--text-xl)}.kiosk-title p{font-size:var(--text-sm);color:var(--ink-2)}.kiosk-control-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.kiosk-lesson-pick,.kiosk-control-strip select{min-width:200px;padding:0 12px;font-size:var(--text-sm);font-weight:600;background:var(--paper)}.kiosk-timer{display:flex;align-items:baseline;gap:6px;font-size:var(--text-xs);color:var(--muted)}.kiosk-timer strong{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums;color:var(--deep)}.sync-line{font-size:var(--text-xs);font-weight:600;color:var(--muted)}.kiosk-main{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(16px,2.5vw,26px);align-items:start}.kiosk-main-scanonly{grid-template-columns:minmax(0,1fr);justify-items:center}.scan-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:min(100%,340px);padding:26px 20px;text-align:center;background:var(--paper);border:3px solid var(--deep);border-radius:var(--radius-md)}.scan-box:after{position:absolute;inset:8px;pointer-events:none;content:"";border:1px dashed var(--line-strong);border-radius:var(--radius-xs)}.scan-box svg{width:46px;height:46px;color:var(--deep)}.scan-box span{font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}.scan-box strong{font-family:var(--font-display);font-size:var(--text-lg);color:var(--deep)}.scan-box input{width:100%;padding:0 13px;font-size:var(--text-md);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.08em;text-align:center;text-transform:uppercase}.scan-box input:focus-visible{border-color:var(--accent)}.scan-box.ok{background:var(--hadir-bg);border-color:var(--hadir)}.scan-box.ok strong{color:var(--hadir)}.scan-box.error{background:var(--alpa-bg);border-color:var(--alpa)}.scan-box.error strong{color:var(--alpa)}.kiosk-scan-hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.kiosk-scan-hero h2{font-size:var(--text-xl)}.kiosk-scan-hero p{max-width:46ch;font-size:var(--text-md);color:var(--ink-2)}.scan-hero-icon{display:grid;place-items:center;width:84px;height:84px;color:var(--paper);background:var(--deep);border-radius:var(--radius-sm)}.scan-hero-stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.hero-stat{display:flex;align-items:baseline;gap:7px;padding:9px 14px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.hero-stat span{font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}.hero-stat strong{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums;color:var(--deep)}.hero-stat.hadir strong{color:var(--hadir)}.hero-stat.alpa strong{color:var(--alpa)}.hero-stat.total strong{color:var(--deep)}.kiosk-summary{display:flex;flex-direction:column;gap:12px;padding:clamp(16px,2vw,22px);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-md)}.kiosk-summary h2{font-size:var(--text-lg)}.substitute-note{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:var(--text-xs);font-weight:600;color:var(--izin);background:var(--izin-bg);border:1px solid var(--izin);border-radius:var(--radius-xs)}.substitute-note svg{flex:0 0 auto}.status-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}.summary-cell{display:flex;flex-direction:column;gap:4px;padding:11px 13px;background:var(--canvas-2);border:1px solid var(--line);border-left:3px solid currentColor;border-radius:var(--radius-xs)}.summary-cell span{font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:1}.summary-cell strong{font-family:var(--font-display);font-size:var(--text-lg);font-variant-numeric:tabular-nums}.kiosk-popup-overlay,.kiosk-verify-overlay{position:fixed;inset:0;z-index:var(--z-popup);display:grid;place-items:center;padding:clamp(16px,4vw,40px);background:#0f4f518c}.kiosk-popup{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,100%);padding:clamp(20px,3vw,28px);text-align:center;background:var(--paper);border:3px solid var(--deep);border-radius:var(--radius-md);box-shadow:var(--shadow-float)}.kiosk-popup.hadir{border-color:var(--hadir)}.kiosk-popup.late{border-color:var(--terlambat)}.kiosk-popup.error{border-color:var(--alpa)}.kiosk-popup h3,.kiosk-popup .h3{font-size:var(--text-xl)}.kiosk-popup.hadir h3,.kiosk-popup.hadir .h3{color:var(--hadir)}.kiosk-popup.late h3,.kiosk-popup.late .h3{color:var(--terlambat)}.kiosk-popup.error h3,.kiosk-popup.error .h3{color:var(--alpa)}.kiosk-popup .avatar.photo{width:76px;height:76px}.popup-badge{padding:4px 10px;font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid currentColor;border-radius:var(--radius-xs)}.popup-badge.hadir{color:var(--hadir);background:var(--hadir-bg)}.popup-badge.late{color:var(--terlambat);background:var(--terlambat-bg)}.popup-nis,.popup-class{font-size:var(--text-sm);font-variant-numeric:tabular-nums;color:var(--ink-2)}.popup-hint{font-size:var(--text-xs);color:var(--muted)}.kiosk-verify{display:flex;flex-direction:column;gap:12px;width:min(560px,100%);max-height:88dvh;overflow-y:auto;padding:clamp(18px,3vw,26px);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-float)}.kiosk-verify h3{font-size:var(--text-lg)}.verify-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}.verify-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}.verify-row strong{display:block;font-size:var(--text-sm);font-weight:600}.verify-row small{font-size:var(--text-xs);color:var(--muted)}.verify-choices{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.verify-chip{min-height:var(--tap);padding:0 12px;font-size:var(--text-xs);font-weight:700;color:var(--ink-2);background:var(--canvas-2);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.verify-chip.active.alpa{color:var(--paper);background:var(--alpa);border-color:var(--alpa)}.verify-chip.active.izin{color:var(--paper);background:var(--izin);border-color:var(--izin)}.verify-chip.active.sakit{color:var(--paper);background:var(--sakit);border-color:var(--sakit)}.admin-app{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);min-height:100dvh;background:var(--canvas)}.admin-sidebar{display:flex;flex-direction:column;gap:14px;padding:16px var(--gutter);background:var(--paper);border-bottom:1px solid var(--line-strong)}.admin-sidebar-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.admin-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.admin-nav::-webkit-scrollbar{display:none}.admin-nav button{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:var(--tap);padding:0 13px;font-size:var(--text-sm);font-weight:600;color:var(--ink-2);border:1px solid transparent;border-radius:var(--radius-xs)}.admin-nav button svg{flex:0 0 auto;color:var(--muted)}.admin-nav button.active{color:var(--deep);background:var(--accent-soft);border-color:var(--accent)}.admin-nav button.active svg{color:var(--accent-ink)}@media(hover:hover){.admin-nav button:hover:not(.active){background:var(--canvas-2);border-color:var(--line)}}.admin-workspace{display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);min-width:0;padding:clamp(14px,2.5vw,26px);padding-bottom:calc(clamp(14px,2.5vw,26px) + env(safe-area-inset-bottom))}.admin-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:3px solid var(--deep)}.admin-header h1{font-size:var(--text-2xl)}.admin-header p{font-size:var(--text-sm);color:var(--ink-2)}.admin-actions{display:flex;flex-wrap:wrap;gap:8px}.admin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}.kpi{position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 15px 14px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}.kpi:after{position:absolute;left:0;top:12px;bottom:12px;width:3px;content:"";background:var(--line-strong)}.kpi span{font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}.kpi strong{font-family:var(--font-display);font-size:var(--text-2xl);font-variant-numeric:tabular-nums;line-height:1;color:var(--deep)}.kpi small{font-size:var(--text-xs);color:var(--ink-2)}.kpi.green:after{background:var(--hadir)}.kpi.amber:after{background:var(--terlambat)}.kpi.red:after{background:var(--alpa)}.kpi.green strong{color:var(--hadir)}.kpi.amber strong{color:var(--terlambat)}.kpi.red strong{color:var(--alpa)}.admin-panel,.panel{padding:clamp(14px,2vw,20px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md)}.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:var(--text-lg)}.panel-head button{min-height:34px;padding:0 12px;font-size:var(--text-xs);font-weight:700;color:var(--deep);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}@media(hover:hover){.panel-head button:hover{background:var(--accent-soft);border-color:var(--accent)}}.admin-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}.admin-table th{padding:9px 10px;font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;text-align:left;color:var(--muted);border-bottom:1px solid var(--line-strong)}.admin-table td{padding:10px;color:var(--ink);border-bottom:1px solid var(--line)}.admin-table tbody tr:last-child td{border-bottom:0}@media(hover:hover){.admin-table tbody tr:hover{background:var(--canvas-2)}}.table-status{font-size:var(--text-xs);font-weight:700}.table-status.green{color:var(--hadir)}.table-status.amber{color:var(--terlambat)}.table-status.red{color:var(--alpa)}.admin-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--radius-sm)}.admin-date-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.admin-date-input{min-width:150px;padding:0 11px;font-size:var(--text-sm);font-variant-numeric:tabular-nums;background:var(--paper)}.admin-date-input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}.admin-filter-meta{font-size:var(--text-xs);font-weight:600;color:var(--muted)}.admin-badge-pulse{position:relative;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 9px;font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--hadir);background:var(--hadir-bg);border:1px solid var(--hadir);border-radius:var(--radius-xs)}.admin-badge-pulse:before{width:7px;height:7px;content:"";background:currentColor;border-radius:50%}.progress-stacked{display:flex;width:100%;height:14px;overflow:hidden;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--radius-xs)}.progress-stacked>div{height:100%;min-width:0}.seg-hadir{background:var(--hadir)}.seg-terlambat{background:var(--terlambat)}.seg-izin{background:var(--izin)}.seg-sakit{background:var(--sakit)}.seg-alpa{background:var(--alpa)}.kelas-bar-chart{display:flex;flex-direction:column;gap:12px}.kelas-bar-row{display:flex;flex-direction:column;gap:6px}.kelas-bar-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.kelas-bar-label strong{font-size:var(--text-sm);font-weight:700;color:var(--deep)}.kelas-bar-label span{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted)}.kelas-bar-track{display:flex;width:100%;height:12px;overflow:hidden;background:var(--canvas-2);border:1px solid var(--line);border-radius:var(--radius-xs)}.kelas-bar-seg{height:100%;min-width:0}.bg-hadir{background:var(--hadir)}.bg-terlambat{background:var(--terlambat)}.bg-izin{background:var(--izin)}.bg-sakit{background:var(--sakit)}.bg-alpa{background:var(--alpa)}.kelas-bar-summary{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--ink-2)}.attend-pills-row{display:flex;flex-wrap:wrap;gap:8px}.attend-pill{display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:var(--tap);padding:0 11px;font-size:var(--text-xs);font-weight:700;color:var(--ink-2);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-xs)}.attend-pill.h{color:var(--hadir);border-color:var(--hadir)}.attend-pill.t{color:var(--terlambat);border-color:var(--terlambat)}.attend-pill.i{color:var(--izin);border-color:var(--izin)}.attend-pill.s{color:var(--sakit);border-color:var(--sakit)}.attend-pill.a{color:var(--alpa);border-color:var(--alpa)}.attend-pill.active,.attend-pill.active-status{color:var(--paper)}.attend-pill.h.active{background:var(--hadir)}.attend-pill.t.active{background:var(--terlambat)}.attend-pill.i.active{background:var(--izin)}.attend-pill.s.active{background:var(--sakit)}.attend-pill.a.active{background:var(--alpa)}.journal-feed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.journal-feed-card{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius-sm);transition:border-color .14s ease,background-color .14s ease}@media(hover:hover){.journal-feed-card:hover{background:var(--canvas-2);border-color:var(--accent)}}.journal-feed-header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}.journal-feed-title{font-family:var(--font-display);font-size:var(--text-md);font-weight:800;color:var(--deep)}.journal-feed-meta{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted)}.journal-feed-content{font-size:var(--text-sm);color:var(--ink-2)}.journal-feed-progress{font-size:var(--text-xs);font-weight:700;color:var(--accent-ink)}.journal-admin-list{display:flex;flex-direction:column;gap:4px}.journal-admin-list strong{font-family:var(--font-display);font-size:var(--text-md);color:var(--deep)}.journal-admin-list small{font-size:var(--text-xs);color:var(--muted)}.mobile-bottom,.gps-card,.stat-card,.schedule-card,.mobile-tabs button,.week-day{transition:background-color .14s ease,transform .2s ease,box-shadow .14s ease,border-color .14s ease}@media(min-width:760px){.phone-stage{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding:26px var(--gutter) 40px}.phone-shell{width:min(100%,480px);min-height:auto;padding:0 20px 24px;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}.phone-shell .mobile-top{margin:0 -20px;padding:12px 20px;border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.mobile-bottom{position:sticky;left:auto;right:auto;bottom:0;margin:0 -20px -24px;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg)}.mobile-bottom.hide{transform:translateY(0)}.sticky-submit{bottom:12px}.attendance-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-app{grid-template-columns:232px minmax(0,1fr)}.admin-sidebar{position:sticky;top:0;align-self:start;height:100dvh;overflow-y:auto;border-right:1px solid var(--line-strong);border-bottom:0}.admin-nav{flex-direction:column;overflow:visible}.admin-nav button{width:100%}}@media(min-width:1100px){.kiosk-main{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}