:root{
    --purple-950:#2e1065;
    --purple-900:#4c1d95;
    --purple-800:#5b21b6;
    --purple-700:#6d28d9;
    --purple-600:#7c3aed;
    --purple-500:#8b5cf6;
    --purple-200:#ddd6fe;
    --purple-100:#ede9fe;
    --purple-50:#f5f3ff;
    --gold:#facc15;
    --white:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e9d5ff;
    --bg:#f7f3ff;
    --danger:#dc2626;
    --success:#16a34a;
    --warning:#d97706;
    --info:#0369a1;
    --shadow-sm:0 10px 22px rgba(76,29,149,.10);
    --shadow:0 22px 55px rgba(76,29,149,.18);
    --shadow-strong:0 28px 70px rgba(46,16,101,.28);
    --radius:28px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--text);
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 4%,rgba(250,204,21,.22),transparent 22%),
        radial-gradient(circle at 85% 10%,rgba(216,180,254,.52),transparent 30%),
        linear-gradient(180deg,#4c1d95 0%,#6d28d9 17%,#a78bfa 34%,#f8f5ff 58%,#ffffff 100%);
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(135deg,rgba(255,255,255,.12) 0 25%,transparent 25% 50%,rgba(255,255,255,.08) 50% 75%,transparent 75%) 0 0/34px 34px,
        radial-gradient(circle at 50% -15%,rgba(255,255,255,.32),transparent 34%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 32%,transparent 78%);
}
a{text-decoration:none;color:inherit}.hidden{display:none!important}.nowrap{white-space:nowrap}.w-full{width:100%}.mt-2{margin-top:10px}.mt-3{margin-top:14px}.mb-2{margin-bottom:10px}.no-margin{margin:0!important}
.app-shell{
    position:relative;
    z-index:1;
    max-width:540px;
    min-height:100vh;
    margin:0 auto;
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom));
}
.splash-screen{position:fixed;z-index:99;inset:0;background:linear-gradient(145deg,#2e1065,#6d28d9 50%,#c4b5fd);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;transition:.38s ease}.splash-screen.hide{opacity:0;visibility:hidden}.splash-logo,.brand-logo{width:86px;height:86px;border-radius:30px;background:linear-gradient(145deg,#fff,#f5f3ff);color:var(--purple-700);display:grid;place-items:center;font-weight:950;font-size:31px;box-shadow:0 28px 60px rgba(46,16,101,.34),inset 0 0 0 1px rgba(255,255,255,.8)}.splash-title{font-size:20px;font-weight:900;margin-top:16px;letter-spacing:.02em}.toast{position:fixed;z-index:30;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);max-width:460px;width:calc(100% - 32px);padding:13px 15px;border-radius:18px;font-weight:900;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.55)}.toast.success{background:#dcfce7;color:#166534}.toast.error{background:#fee2e2;color:#991b1b}
/* Login */
.login-page{min-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center;padding:28px 0}.brand-card{text-align:center;color:#fff;margin-bottom:22px}.brand-card .brand-logo{margin:0 auto 14px}.brand-card h1{margin:0;font-size:31px;letter-spacing:-.04em}.brand-card p{margin:9px auto 0;max-width:360px;opacity:.93;line-height:1.55}.luxury-login:before{content:"";position:absolute;inset:auto 18px 64px;height:180px;border-radius:999px;background:rgba(250,204,21,.18);filter:blur(40px);z-index:-1}.glass-card,.hero-card,.shift-card,.location-card,.camera-card,.presence-card,.history-card,.filter-card,.empty-card,.stat-card,.user-card{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.72);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
    margin-bottom:16px;
}
.premium-card{border-radius:32px;box-shadow:var(--shadow-strong);border:1px solid rgba(255,255,255,.84);position:relative;overflow:hidden}.premium-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#facc15,#c084fc,#6d28d9)}.login-card label,.form-card label{display:block;font-size:13px;font-weight:850;color:#4b5563;margin:13px 0 7px}input,select,textarea{width:100%;border:1px solid var(--purple-200);background:rgba(255,255,255,.98);border-radius:17px;padding:13px 14px;font-size:15px;outline:none;color:#111827;transition:.18s ease}textarea{min-height:98px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--purple-500);box-shadow:0 0 0 4px rgba(139,92,246,.14)}.checkbox-row{display:flex!important;gap:10px;align-items:center}.checkbox-row input{width:auto;accent-color:var(--purple-700)}.primary-btn,.secondary-btn,.soft-btn,.danger-btn,.muted-btn,.biometric-btn{border:0;border-radius:20px;padding:14px 16px;font-weight:900;font-size:15px;cursor:pointer;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.primary-btn:hover,.secondary-btn:hover,.soft-btn:hover,.danger-btn:hover,.muted-btn:hover,.biometric-btn:hover{transform:translateY(-1px)}.primary-btn{width:100%;background:linear-gradient(135deg,#9333ea,#6d28d9 48%,#4c1d95);color:#fff;box-shadow:0 14px 28px rgba(109,40,217,.30)}.secondary-btn{width:100%;background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff}.soft-btn{background:linear-gradient(180deg,#f5f3ff,#ede9fe);color:#4c1d95;border:1px solid rgba(221,214,254,.85)}.danger-btn{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.muted-btn{background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}.primary-btn:disabled,.secondary-btn:disabled,.soft-btn:disabled{filter:grayscale(.8);opacity:.58;cursor:not-allowed;transform:none}.hint{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.55}.divider{display:flex;align-items:center;gap:10px;margin:15px 0;color:#6b7280;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.divider:before,.divider:after{content:"";height:1px;background:#ddd6fe;flex:1}.biometric-btn{width:100%;background:linear-gradient(135deg,#111827,#4c1d95);color:#fff;box-shadow:0 14px 28px rgba(17,24,39,.22)}.bio-icon{font-size:20px}.message-box{margin-top:12px;border-radius:18px;padding:12px 13px;background:#f3f4f6;color:#374151;font-weight:850;line-height:1.45}.message-box.success{background:#dcfce7;color:#166534}.message-box.error{background:#fee2e2;color:#991b1b}
/* Header & common pages */
.hero-card{display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(135deg,#2e1065,#5b21b6 52%,#8b5cf6);padding:22px;position:relative;overflow:hidden}.premium-hero:after,.admin-hero:after{content:"";position:absolute;right:-46px;top:-56px;width:154px;height:154px;border-radius:999px;background:rgba(255,255,255,.18)}.premium-hero:before,.admin-hero:before{content:"";position:absolute;inset:auto 20px 18px auto;width:94px;height:3px;border-radius:999px;background:rgba(250,204,21,.85)}.hero-card h1{position:relative;z-index:1;font-size:38px;line-height:1;margin:8px 0;letter-spacing:-.04em}.hero-card p{position:relative;z-index:1;margin:0;opacity:.94}.eyebrow{text-transform:uppercase;letter-spacing:.095em;font-size:11px;font-weight:950}.avatar{position:relative;z-index:1;width:60px;height:60px;border-radius:23px;background:rgba(255,255,255,.19);display:grid;place-items:center;font-weight:950;font-size:24px;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}.page-header{color:#fff;padding:10px 4px 14px}.page-header h1{margin:0 0 5px;font-size:30px;letter-spacing:-.04em}.page-header p{margin:0;opacity:.92;line-height:1.5}.section-title{font-weight:950;font-size:16px;margin-bottom:10px;letter-spacing:-.01em}.status-note{border-radius:20px;padding:13px 14px;margin-bottom:16px;font-weight:900;line-height:1.45}.status-note.warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}.status-note.info{background:#e0f2fe;color:#075985;border:1px solid #bae6fd}.success-badge{background:#dcfce7;color:#166534;border-radius:18px;padding:11px 13px;margin-bottom:12px;font-weight:900;border:1px solid #bbf7d0}
/* Dashboard user */
.top-camera-card{padding:14px;border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,245,255,.96));box-shadow:0 24px 60px rgba(76,29,149,.23)}.camera-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}.camera-frame{position:relative;overflow:hidden;border-radius:28px;background:#111827;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}.camera-frame video{display:block;width:100%;border-radius:28px;aspect-ratio:3/4;max-height:440px;object-fit:cover;transform:scaleX(-1);background:#1f2937}.face-guide{position:absolute;left:50%;top:49%;width:58%;height:58%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.94);border-radius:45% 45% 48% 48%;box-shadow:0 0 0 999px rgba(17,24,39,.18),0 0 30px rgba(255,255,255,.28);pointer-events:none}.face-guide:before,.face-guide:after{content:"";position:absolute;width:28px;height:28px;border-color:#facc15}.face-guide:before{left:-8px;top:-8px;border-left:4px solid #facc15;border-top:4px solid #facc15;border-radius:12px 0 0 0}.face-guide:after{right:-8px;bottom:-8px;border-right:4px solid #facc15;border-bottom:4px solid #facc15;border-radius:0 0 12px 0}.face-status{border-radius:999px;padding:7px 11px;font-weight:950;font-size:11px;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap}.face-status.scanning{background:#fef3c7;color:#92400e}.face-status.ready{background:#dcfce7;color:#166534}.face-status.error{background:#fee2e2;color:#991b1b}.snapshot-preview{display:flex;align-items:center;gap:10px;margin-top:10px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:18px;padding:8px 10px;font-size:12px;font-weight:950;color:#4c1d95}.snapshot-preview img{width:46px;height:46px;border-radius:14px;object-fit:cover;transform:scaleX(-1)}.shift-card,.presence-row,.small-grid,.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}.premium-shift{background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(245,243,255,.97));border:1px solid rgba(221,214,254,.9)}.shift-card span,.presence-row span,.stat-card span{color:var(--muted);font-size:12px;display:block;font-weight:800}.shift-card strong,.presence-row strong{font-size:20px;letter-spacing:-.02em}.shift-time{background:linear-gradient(180deg,#f5f3ff,#ede9fe);border-radius:20px;padding:14px;text-align:center;font-weight:950;color:#5b21b6;border:1px solid #ddd6fe}.premium-presence .presence-row div{background:linear-gradient(180deg,#faf5ff,#fff);border:1px solid #ede9fe;border-radius:22px;padding:15px;text-align:center}.one-presence-btn{margin-top:16px;min-height:58px;font-size:16px;border-radius:23px;background:linear-gradient(135deg,#9333ea,#6d28d9 45%,#4c1d95)}.location-card p{margin:0 0 12px;color:#374151;line-height:1.5}.premium-map-card{overflow:hidden}.attendance-map{width:100%;height:265px;border-radius:25px;border:1px solid #ddd6fe;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}.biometric-card{display:grid;gap:10px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,243,255,.96));border:1px solid rgba(221,214,254,.9)}
/* Admin dashboard, users, reports */
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.quick-grid .soft-btn{min-height:66px;flex-direction:column;font-size:14px;line-height:1.2}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.stat-card{position:relative;overflow:hidden;min-height:112px}.stat-card:after{content:"";position:absolute;right:-28px;top:-28px;width:88px;height:88px;background:#ede9fe;border-radius:999px}.stat-card span,.stat-card strong{position:relative;z-index:1}.stat-card strong{display:block;font-size:36px;color:#4c1d95;margin-top:8px;letter-spacing:-.05em}.stat-card:nth-child(2) strong{color:#7c2d12}.stat-card:nth-child(3) strong{color:#991b1b}.stat-card:nth-child(4) strong{color:#92400e}.table-wrap{overflow:auto;border-radius:22px;border:1px solid #ede9fe}table{width:100%;border-collapse:collapse;min-width:640px;background:rgba(255,255,255,.78)}th,td{padding:12px;border-bottom:1px solid #ede9fe;text-align:left;font-size:13px}th{color:#4c1d95;background:#f5f3ff;font-weight:950;position:sticky;top:0}td{color:#374151}.pill,.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:6px 11px;font-weight:900;font-size:12px;background:#ede9fe;color:#4c1d95}.badge.green{background:#dcfce7;color:#166534}.badge.red{background:#fee2e2;color:#991b1b}.badge.gray{background:#f3f4f6;color:#374151}.filter-card{display:flex;gap:8px;align-items:center;overflow:auto}.filter-card input{min-width:170px}.card-list{display:grid;gap:12px}.user-card{padding:15px;border:1px solid #ede9fe}.user-card h3{margin:0 0 6px;letter-spacing:-.02em}.user-meta{display:grid;gap:5px;color:#6b7280;font-size:13px;line-height:1.35}.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.action-row .soft-btn,.action-row .danger-btn,.action-row .muted-btn{padding:9px 12px;font-size:13px;border-radius:15px}.form-card .primary-btn{margin-top:16px}.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.help-box{background:#f5f3ff;border:1px dashed #a78bfa;border-radius:20px;padding:13px;color:#4c1d95;font-size:13px;margin:12px 0;line-height:1.5}.empty-card{text-align:center;color:#6b7280;font-weight:850}.history-card{display:flex;gap:14px}.date-box{min-width:66px;height:74px;border-radius:23px;background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 14px 28px rgba(76,29,149,.18)}.date-box strong{font-size:25px;line-height:1}.date-box span{font-size:12px;text-transform:uppercase;font-weight:900}.history-content{flex:1}.history-content h3{margin:2px 0 2px;letter-spacing:-.02em}.history-content p{margin:0 0 10px;color:var(--muted)}.presence-row.mini{grid-template-columns:repeat(3,1fr);gap:8px}.presence-row.mini div{background:#f5f3ff;border:1px solid #ede9fe;border-radius:16px;padding:10px}.presence-row.mini strong{font-size:14px}.pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.pagination a,.pagination span{background:#fff;border:1px solid #ede9fe;border-radius:12px;padding:8px 11px;color:#4c1d95;font-weight:900;box-shadow:var(--shadow-sm)}
/* Bottom navigation */
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(540px,calc(100% - 24px));background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(237,233,254,.94);border-radius:28px;box-shadow:0 18px 45px rgba(46,16,101,.24);display:grid;grid-template-columns:repeat(4,1fr);padding:8px}.bottom-nav.admin-nav{grid-template-columns:repeat(5,1fr)}.bottom-nav a,.bottom-nav button{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:20px;color:#6b7280;font-weight:900;width:100%;min-height:48px;cursor:pointer;border-radius:20px}.bottom-nav span{font-size:10.5px;line-height:1}.bottom-nav .active{color:#6d28d9;background:linear-gradient(180deg,#f5f3ff,#ede9fe)}.bottom-nav form{margin:0;display:flex}
/* Leaflet polish */
.leaflet-container{font-family:inherit}.leaflet-control-zoom a{border-radius:12px!important;color:#4c1d95!important;font-weight:900}.leaflet-popup-content-wrapper{border-radius:16px!important}.leaflet-popup-content{font-weight:800;color:#374151}
@media(min-width:520px){.camera-frame video{max-height:500px}.attendance-map{height:300px}.app-shell{padding-left:18px;padding-right:18px}}
@media(max-width:390px){.button-grid,.shift-card,.small-grid,.two-cols,.quick-grid,.form-actions{grid-template-columns:1fr}.hero-card h1{font-size:33px}.stat-card strong{font-size:31px}.bottom-nav span{font-size:9.5px}.bottom-nav{width:calc(100% - 16px);padding:7px}.bottom-nav a,.bottom-nav button{font-size:18px}.camera-frame video{max-height:405px}.filter-card{display:grid;grid-template-columns:1fr}.filter-card input{min-width:0}.presence-row.mini{grid-template-columns:1fr}}


/* === SCHOOL BRANDING UPDATE: favicon, logo sekolah, splash screen, dan tema premium === */
:root{
    --purple-950:#082f49;
    --purple-900:#0f3a5f;
    --purple-800:#0f4c81;
    --purple-700:#0f766e;
    --purple-600:#0d9488;
    --purple-500:#14b8a6;
    --purple-200:#bae6fd;
    --purple-100:#e0f2fe;
    --purple-50:#f0fdfa;
    --gold:#f59e0b;
    --line:#dbeafe;
    --bg:#f5fbff;
    --shadow-sm:0 10px 22px rgba(8,47,73,.10);
    --shadow:0 22px 55px rgba(8,47,73,.18);
    --shadow-strong:0 28px 70px rgba(8,47,73,.28);
}
body{
    background:
        radial-gradient(circle at 14% 6%,rgba(245,158,11,.22),transparent 23%),
        radial-gradient(circle at 90% 9%,rgba(34,211,238,.30),transparent 31%),
        linear-gradient(180deg,#082f49 0%,#0f4c81 22%,#0f766e 42%,#e0f2fe 70%,#ffffff 100%);
}
body:before{
    background:
        linear-gradient(135deg,rgba(255,255,255,.10) 0 25%,transparent 25% 50%,rgba(255,255,255,.065) 50% 75%,transparent 75%) 0 0/36px 36px,
        radial-gradient(circle at 50% -14%,rgba(255,255,255,.34),transparent 34%);
}
.splash-screen{
    isolation:isolate;
    overflow:hidden;
    padding:28px;
    text-align:center;
    background:
        radial-gradient(circle at 18% 16%,rgba(245,158,11,.36),transparent 24%),
        radial-gradient(circle at 82% 8%,rgba(34,211,238,.24),transparent 30%),
        linear-gradient(145deg,#031a2f 0%,#0f4c81 48%,#0f766e 100%);
}
.splash-screen:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(135deg,rgba(255,255,255,.08) 0 25%,transparent 25% 50%,rgba(255,255,255,.055) 50% 75%,transparent 75%) 0 0/30px 30px;
    opacity:.78;
}
.splash-orb{position:absolute;border-radius:999px;filter:blur(2px);opacity:.72;z-index:-1}
.orb-one{width:180px;height:180px;background:rgba(245,158,11,.22);left:-58px;top:-42px}
.orb-two{width:210px;height:210px;background:rgba(34,211,238,.18);right:-72px;bottom:-64px}
.splash-logo-wrap{
    width:124px;
    height:124px;
    border-radius:38px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.96);
    box-shadow:0 30px 70px rgba(3,26,47,.38), inset 0 0 0 1px rgba(255,255,255,.82);
    animation:splashPulse 1.8s ease-in-out infinite;
}
.school-logo-img,.logo-image img,.school-avatar img{width:100%;height:100%;object-fit:contain;display:block}
.splash-logo-wrap .school-logo-img{width:92px;height:92px}
.splash-title{
    max-width:320px;
    font-size:20px;
    line-height:1.2;
    font-weight:950;
    margin-top:20px;
    letter-spacing:.03em;
    text-shadow:0 10px 26px rgba(0,0,0,.18);
}
.splash-subtitle{margin-top:7px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.86}
.splash-loader{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:22px}
.splash-loader span{width:8px;height:8px;border-radius:999px;background:#fbbf24;animation:splashDot 1s infinite ease-in-out}
.splash-loader span:nth-child(2){animation-delay:.15s;background:#fff}
.splash-loader span:nth-child(3){animation-delay:.30s;background:#67e8f9}
@keyframes splashPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.03)}}
@keyframes splashDot{0%,80%,100%{transform:translateY(0);opacity:.45}40%{transform:translateY(-7px);opacity:1}}
.brand-logo.logo-image{
    padding:9px;
    background:rgba(255,255,255,.96);
    color:inherit;
}
.brand-kicker{display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);font-size:11px;font-weight:950;letter-spacing:.08em}
.brand-card h1{font-size:34px}
.hero-card{background:linear-gradient(135deg,#031a2f,#0f4c81 52%,#0f766e);}
.hero-card h1{text-shadow:0 14px 28px rgba(0,0,0,.16)}
.welcome-text{margin-top:8px!important;font-weight:850;color:rgba(255,255,255,.88)}
.school-avatar{background:rgba(255,255,255,.95);padding:8px;color:inherit;border-radius:24px}
.premium-card:before{background:linear-gradient(90deg,#f59e0b,#22d3ee,#0f766e)}
.primary-btn{background:linear-gradient(135deg,#0d9488,#0f766e 45%,#0f4c81);box-shadow:0 14px 30px rgba(15,118,110,.30)}
.secondary-btn{background:linear-gradient(135deg,#14b8a6,#0f766e);}
.soft-btn{background:linear-gradient(180deg,#f0fdfa,#e0f2fe);color:#0f4c81;border-color:#bae6fd}
.biometric-btn{background:linear-gradient(135deg,#031a2f,#0f4c81);}
.shift-time{background:linear-gradient(180deg,#f0fdfa,#e0f2fe);color:#0f4c81;border-color:#bae6fd}
.premium-presence .presence-row div,.presence-row.mini div{background:linear-gradient(180deg,#f8fdff,#ffffff);border-color:#dbeafe}
.stat-card strong,.bottom-nav .active{color:#0f766e}
th{color:#0f4c81;background:#eff6ff}
.pill,.badge{background:#e0f2fe;color:#0f4c81}
.date-box{background:linear-gradient(135deg,#0f766e,#0f4c81)}
.face-guide:before,.face-guide:after{border-color:#f59e0b}
.face-guide:before{border-left-color:#f59e0b;border-top-color:#f59e0b}
.face-guide:after{border-right-color:#f59e0b;border-bottom-color:#f59e0b}
.bottom-nav{box-shadow:0 18px 45px rgba(8,47,73,.24)}
@media(max-width:390px){.splash-title{font-size:18px}.splash-logo-wrap{width:108px;height:108px;border-radius:32px}.splash-logo-wrap .school-logo-img{width:80px;height:80px}}

/* === REAL SCHOOL GATE + OFFICIAL LOGO UPDATE (20260621-template-logo-v4) === */
body{
    background-image:
        linear-gradient(180deg,rgba(3,26,47,.88) 0%,rgba(15,76,129,.74) 34%,rgba(15,118,110,.48) 54%,rgba(245,251,255,.96) 82%,#ffffff 100%),
        url('/assets/img/gerbang-sekolah.jpg?v=20260621-template-logo-v4');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
body:before{
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.28),transparent 31%),
        linear-gradient(135deg,rgba(255,255,255,.10) 0 25%,transparent 25% 50%,rgba(255,255,255,.055) 50% 75%,transparent 75%) 0 0/32px 32px;
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.68) 42%,transparent 84%);
}
.splash-screen{
    background-image:
        linear-gradient(180deg,rgba(3,26,47,.80),rgba(15,76,129,.70) 45%,rgba(15,118,110,.62)),
        url('/assets/img/gerbang-sekolah.jpg?v=20260621-template-logo-v4');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.splash-screen:before{
    background:
        linear-gradient(135deg,rgba(255,255,255,.12) 0 25%,transparent 25% 50%,rgba(255,255,255,.075) 50% 75%,transparent 75%) 0 0/30px 30px,
        radial-gradient(circle at 50% 12%,rgba(255,255,255,.24),transparent 32%);
    opacity:.82;
}
.splash-screen:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.08) 42%,rgba(0,0,0,.30));
    pointer-events:none;
}
.splash-logo-wrap{
    width:128px;
    height:128px;
    border-radius:36px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(255,255,255,.78);
    box-shadow:0 30px 76px rgba(3,26,47,.46), inset 0 0 0 1px rgba(255,255,255,.88);
}
.splash-logo-wrap .school-logo-img{
    width:104px;
    height:104px;
    filter:drop-shadow(0 9px 13px rgba(3,26,47,.18));
}
.splash-title{
    background:rgba(3,26,47,.34);
    border:1px solid rgba(255,255,255,.18);
    padding:10px 14px;
    border-radius:18px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.splash-subtitle{
    color:#fff7ed;
    text-shadow:0 8px 22px rgba(0,0,0,.32);
}
.school-logo-img,.logo-image img,.school-avatar img{
    object-fit:contain;
    filter:drop-shadow(0 6px 9px rgba(3,26,47,.12));
}
.login-page{
    position:relative;
    isolation:isolate;
}
.brand-card{
    text-shadow:0 10px 24px rgba(0,0,0,.28);
}
.brand-card .brand-logo.logo-image{
    width:104px;
    height:104px;
    border-radius:32px;
    padding:10px;
    background:rgba(255,255,255,.97);
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 28px 62px rgba(3,26,47,.32), inset 0 0 0 1px rgba(255,255,255,.84);
}
.brand-kicker{
    background:rgba(3,26,47,.42);
    border-color:rgba(255,255,255,.28);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.brand-card p{
    background:rgba(3,26,47,.30);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:11px 13px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.glass-card,.hero-card,.shift-card,.location-card,.camera-card,.presence-card,.history-card,.filter-card,.empty-card,.stat-card,.user-card{
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.76);
    box-shadow:0 22px 56px rgba(3,26,47,.18);
}
.premium-card{
    background:rgba(255,255,255,.965);
}
.premium-hero,.admin-hero{
    background-image:
        linear-gradient(135deg,rgba(3,26,47,.92),rgba(15,76,129,.84) 48%,rgba(15,118,110,.74)),
        url('/assets/img/gerbang-sekolah.jpg?v=20260621-template-logo-v4');
    background-size:cover;
    background-position:center 43%;
    border:1px solid rgba(255,255,255,.20);
}
.school-avatar{
    width:68px;
    height:68px;
    border-radius:24px;
    padding:7px;
    background:rgba(255,255,255,.97);
    box-shadow:0 18px 32px rgba(3,26,47,.25), inset 0 0 0 1px rgba(255,255,255,.82);
}
.bottom-nav{
    background:rgba(255,255,255,.95);
    border-color:rgba(219,234,254,.92);
}
@media(max-width:520px){
    body{background-attachment:scroll;background-position:center top}
    .splash-logo-wrap{width:118px;height:118px;border-radius:34px}
    .splash-logo-wrap .school-logo-img{width:96px;height:96px}
    .brand-card .brand-logo.logo-image{width:96px;height:96px}
}
/* === END REAL SCHOOL GATE UPDATE === */

/* === BIOMETRIC UX REVISION (20260621-bio-page) === */
.fingerprint-login-btn,
.fingerprint-action-btn{
    gap:12px;
}
.fingerprint-icon{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:13px;
    box-shadow:0 10px 22px rgba(3,26,47,.18);
}
.fingerprint-action-btn .fingerprint-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
}
.fingerprint-badge{
    width:76px;
    height:76px;
    border-radius:27px;
    background:rgba(255,255,255,.96);
    display:grid;
    place-items:center;
    box-shadow:0 18px 34px rgba(3,26,47,.28), inset 0 0 0 1px rgba(255,255,255,.84);
    padding:10px;
}
.fingerprint-badge img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.biometric-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.biometric-hero h1{
    margin:0;
    color:#fff;
    font-size:34px;
    letter-spacing:-.04em;
}
.biometric-activation-card,
.biometric-device-card{
    background:rgba(255,255,255,.965);
}
.bio-account-card{
    margin-top:14px;
    padding:14px;
    border-radius:22px;
    background:linear-gradient(180deg,#f8fdff,#e0f2fe);
    border:1px solid #bae6fd;
    display:grid;
    gap:3px;
}
.bio-account-card span,
.bio-account-card small,
.credential-row span{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
}
.bio-account-card strong{
    color:#0f4c81;
    font-size:18px;
}
.bio-note{
    padding:11px 12px;
    background:#f8fafc;
    border:1px dashed #bae6fd;
    border-radius:17px;
}
.credential-row{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:12px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #e0f2fe;
}
.credential-row:last-child{
    border-bottom:0;
    padding-bottom:0;
}
.credential-icon{
    width:48px;
    height:48px;
    border-radius:18px;
    background:#f0fdfa;
    display:grid;
    place-items:center;
    padding:7px;
    border:1px solid #bae6fd;
}
.credential-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.credential-row strong{
    display:block;
    color:#0f4c81;
    margin-bottom:2px;
}
.nav-fingerprint{
    width:22px;
    height:22px;
    border-radius:8px;
    display:block;
}
.bottom-nav.user-nav{
    grid-template-columns:repeat(5,1fr);
}
.bottom-nav .active .nav-fingerprint{
    box-shadow:0 8px 14px rgba(15,118,110,.18);
}
@media(max-width:390px){
    .bottom-nav.user-nav span{font-size:8.8px}
    .bottom-nav.user-nav a,.bottom-nav.user-nav button{font-size:17px;min-height:46px}
    .nav-fingerprint{width:20px;height:20px}
}
/* === END BIOMETRIC UX REVISION === */
.credential-row{
    grid-template-columns:48px 1fr auto;
}
.credential-remove-btn{
    padding:9px 10px;
    border-radius:14px;
    font-size:12px;
    min-height:38px;
}
@media(max-width:390px){
    .credential-row{grid-template-columns:44px 1fr}
    .credential-row form{grid-column:2;justify-self:start}
}

/* === ATTENDANCE CLEAN PAGE + LOCATION INFO PAGE (20260621-info-map) === */
.attendance-only-card{
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,253,250,.96));
    border:1px solid rgba(186,230,253,.9);
}
.gps-mini-status{
    margin-top:14px;
    border-radius:20px;
    padding:12px 13px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    align-items:center;
    background:linear-gradient(180deg,#f8fafc,#e0f2fe);
    border:1px solid #bae6fd;
    color:#0f4c81;
    font-weight:900;
}
.gps-mini-status span{font-size:13px;white-space:nowrap}
.gps-mini-status strong{font-size:13px;line-height:1.35}
.gps-mini-status.ready{background:linear-gradient(180deg,#ecfdf5,#ccfbf1);border-color:#99f6e4;color:#0f766e}
.gps-mini-status.error{background:#fee2e2;border-color:#fecaca;color:#991b1b}
.info-hero h1{font-size:32px;line-height:1.05;margin:6px 0 7px}
.workrule-card,.location-page-card{position:relative;overflow:hidden}
.workrule-card:before,.location-page-card:before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:5px;
    background:linear-gradient(90deg,#f59e0b,#14b8a6,#0f4c81);
}
.workrule-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.workrule-item{
    border-radius:22px;
    padding:14px;
    border:1px solid #dbeafe;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    box-shadow:0 10px 22px rgba(8,47,73,.07);
}
.workrule-item span,.location-summary-card span,.distance-card span,.map-floating-card span{
    display:block;
    color:var(--muted);
    font-size:11.5px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.045em;
    margin-bottom:5px;
}
.workrule-item strong{display:block;color:#0f4c81;font-size:14px;line-height:1.35;margin-bottom:5px}
.workrule-item small{display:block;color:#475569;line-height:1.35;font-weight:800}
.workrule-item.active{background:linear-gradient(180deg,#ecfeff,#f0fdfa);border-color:#99f6e4}
.workrule-item.friday{background:linear-gradient(180deg,#fffbeb,#fff7ed);border-color:#fde68a}
.workrule-item.saturday{background:linear-gradient(180deg,#eff6ff,#f8fafc);border-color:#bfdbfe}
.workrule-item.off{background:linear-gradient(180deg,#fef2f2,#fff);border-color:#fecaca}
.map-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.radius-pill{
    white-space:nowrap;
    padding:8px 11px;
    border-radius:999px;
    background:#ecfdf5;
    color:#0f766e;
    border:1px solid #99f6e4;
    font-weight:950;
    font-size:12px;
}
.map-panel{position:relative;border-radius:27px;overflow:hidden;margin-bottom:12px;box-shadow:0 18px 40px rgba(8,47,73,.16)}
.info-map{height:360px;margin:0;border-radius:27px;border:1px solid #bae6fd}
.map-floating-card{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:500;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.82);
    border-radius:20px;
    padding:11px 13px;
    box-shadow:0 14px 30px rgba(8,47,73,.16);
}
.map-floating-card strong{display:block;color:#0f4c81;line-height:1.35}
.location-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.location-summary-card,.distance-card{
    border-radius:22px;
    padding:14px;
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    border:1px solid #dbeafe;
    box-shadow:0 10px 22px rgba(8,47,73,.07);
}
.location-summary-card.school{background:linear-gradient(180deg,#ecfeff,#ffffff)}
.location-summary-card.user{background:linear-gradient(180deg,#f0fdfa,#ffffff)}
.location-summary-card strong{display:block;color:#0f4c81;font-size:14px;line-height:1.35;min-height:38px}
.location-summary-card small{display:block;color:#64748b;font-weight:800;line-height:1.35;margin-top:5px;word-break:break-word}
.distance-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;background:linear-gradient(135deg,#082f49,#0f4c81 50%,#0f766e);color:#fff;border-color:rgba(255,255,255,.2)}
.distance-card span{color:rgba(255,255,255,.74)}
.distance-card strong{display:block;font-size:20px;color:#fff;line-height:1.2}
.map-location-text{margin:0 0 12px!important;padding:12px 13px;border-radius:18px;background:#f8fafc;border:1px dashed #bae6fd;color:#334155!important;font-weight:850;line-height:1.45}
.map-pin{border:0!important;background:transparent!important}
.map-pin span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:17px 17px 17px 4px;
    transform:rotate(-45deg);
    font-size:23px;
    box-shadow:0 16px 30px rgba(8,47,73,.22);
    border:2px solid rgba(255,255,255,.95);
}
.map-pin span:before{transform:rotate(45deg)}
.school-pin span{background:linear-gradient(135deg,#0f4c81,#0f766e)}
.user-pin span{background:linear-gradient(135deg,#f59e0b,#0f766e)}
.user-pin.outside span{background:linear-gradient(135deg,#dc2626,#991b1b)}
.leaflet-popup-content b{color:#0f4c81}
.bottom-nav.user-nav{grid-template-columns:repeat(6,1fr)}
@media(max-width:430px){
    .bottom-nav.user-nav span{font-size:8.2px}
    .bottom-nav.user-nav a,.bottom-nav.user-nav button{font-size:16px;min-height:45px;gap:1px}
}
@media(max-width:390px){
    .workrule-grid,.location-summary-grid,.distance-card{grid-template-columns:1fr}
    .info-map{height:320px}
    .bottom-nav.user-nav{padding:6px;border-radius:24px}
    .bottom-nav.user-nav span{font-size:7.8px}
    .bottom-nav.user-nav a,.bottom-nav.user-nav button{font-size:15px;min-height:43px}
    .nav-fingerprint{width:18px;height:18px}
}
/* === END ATTENDANCE CLEAN PAGE + LOCATION INFO PAGE === */
.map-pin span{transform:none;border-radius:18px;background-clip:padding-box}


/* === AUTO DAILY THEME + RED HOLIDAY THEME (20260621-template-logo-v4) === */
body.theme-auto{
    --theme-primary:#0f4c81;
    --theme-secondary:#0f766e;
    --theme-accent:#f59e0b;
    --theme-dark:#082f49;
    --theme-soft:#e0f2fe;
    --theme-soft-2:#f0fdfa;
    --theme-border:#bae6fd;
    --theme-primary-rgb:15,76,129;
    --theme-secondary-rgb:15,118,110;
    --theme-accent-rgb:245,158,11;
    --theme-dark-rgb:8,47,73;
    --theme-glow-rgb:34,211,238;
}
body.theme-monday{--theme-primary:#0f4c81;--theme-secondary:#0f766e;--theme-accent:#f59e0b;--theme-dark:#082f49;--theme-soft:#e0f2fe;--theme-soft-2:#f0fdfa;--theme-border:#bae6fd;--theme-primary-rgb:15,76,129;--theme-secondary-rgb:15,118,110;--theme-accent-rgb:245,158,11;--theme-dark-rgb:8,47,73;--theme-glow-rgb:34,211,238}
body.theme-tuesday{--theme-primary:#047857;--theme-secondary:#059669;--theme-accent:#22c55e;--theme-dark:#064e3b;--theme-soft:#dcfce7;--theme-soft-2:#ecfdf5;--theme-border:#bbf7d0;--theme-primary-rgb:4,120,87;--theme-secondary-rgb:5,150,105;--theme-accent-rgb:34,197,94;--theme-dark-rgb:6,78,59;--theme-glow-rgb:110,231,183}
body.theme-wednesday{--theme-primary:#4338ca;--theme-secondary:#2563eb;--theme-accent:#38bdf8;--theme-dark:#1e1b4b;--theme-soft:#e0e7ff;--theme-soft-2:#eff6ff;--theme-border:#c7d2fe;--theme-primary-rgb:67,56,202;--theme-secondary-rgb:37,99,235;--theme-accent-rgb:56,189,248;--theme-dark-rgb:30,27,75;--theme-glow-rgb:147,197,253}
body.theme-thursday{--theme-primary:#7c3aed;--theme-secondary:#9333ea;--theme-accent:#f472b6;--theme-dark:#3b0764;--theme-soft:#f3e8ff;--theme-soft-2:#faf5ff;--theme-border:#e9d5ff;--theme-primary-rgb:124,58,237;--theme-secondary-rgb:147,51,234;--theme-accent-rgb:244,114,182;--theme-dark-rgb:59,7,100;--theme-glow-rgb:216,180,254}
body.theme-friday{--theme-primary:#047857;--theme-secondary:#0f766e;--theme-accent:#fbbf24;--theme-dark:#064e3b;--theme-soft:#ecfdf5;--theme-soft-2:#fffbeb;--theme-border:#a7f3d0;--theme-primary-rgb:4,120,87;--theme-secondary-rgb:15,118,110;--theme-accent-rgb:251,191,36;--theme-dark-rgb:6,78,59;--theme-glow-rgb:253,230,138}
body.theme-saturday{--theme-primary:#ea580c;--theme-secondary:#0284c7;--theme-accent:#f97316;--theme-dark:#7c2d12;--theme-soft:#ffedd5;--theme-soft-2:#f0f9ff;--theme-border:#fed7aa;--theme-primary-rgb:234,88,12;--theme-secondary-rgb:2,132,199;--theme-accent-rgb:249,115,22;--theme-dark-rgb:124,45,18;--theme-glow-rgb:251,146,60}
body.theme-holiday{--theme-primary:#dc2626;--theme-secondary:#be123c;--theme-accent:#fb7185;--theme-dark:#7f1d1d;--theme-soft:#fee2e2;--theme-soft-2:#fff1f2;--theme-border:#fecaca;--theme-primary-rgb:220,38,38;--theme-secondary-rgb:190,18,60;--theme-accent-rgb:251,113,133;--theme-dark-rgb:127,29,29;--theme-glow-rgb:252,165,165}
body.theme-auto{
    background-image:
        linear-gradient(180deg,rgba(var(--theme-dark-rgb),.90) 0%,rgba(var(--theme-primary-rgb),.76) 34%,rgba(var(--theme-secondary-rgb),.52) 54%,rgba(245,251,255,.96) 82%,#ffffff 100%),
        url('/assets/img/gerbang-sekolah.jpg?v=20260621-template-logo-v4');
}
body.theme-auto:before{
    background:
        radial-gradient(circle at 50% 0%,rgba(255,255,255,.28),transparent 31%),
        radial-gradient(circle at 12% 11%,rgba(var(--theme-accent-rgb),.20),transparent 22%),
        radial-gradient(circle at 88% 6%,rgba(var(--theme-glow-rgb),.18),transparent 27%),
        linear-gradient(135deg,rgba(255,255,255,.10) 0 25%,transparent 25% 50%,rgba(255,255,255,.055) 50% 75%,transparent 75%) 0 0/32px 32px;
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.68) 42%,transparent 84%);
}
.theme-auto .splash-screen{
    background-image:
        linear-gradient(180deg,rgba(var(--theme-dark-rgb),.84),rgba(var(--theme-primary-rgb),.72) 46%,rgba(var(--theme-secondary-rgb),.66)),
        url('/assets/img/gerbang-sekolah.jpg?v=20260621-template-logo-v4');
}
.theme-auto .splash-orb.orb-one{background:rgba(var(--theme-accent-rgb),.26)}
.theme-auto .splash-orb.orb-two{background:rgba(var(--theme-glow-rgb),.20)}
.theme-auto .splash-loader span:first-child{background:var(--theme-accent)}
.theme-auto .splash-loader span:nth-child(3){background:var(--theme-soft)}
.theme-auto .hero-card,
.theme-auto .distance-card,
.theme-auto .date-box{
    background:linear-gradient(135deg,var(--theme-dark),var(--theme-primary) 52%,var(--theme-secondary));
}
.theme-auto .primary-btn,
.theme-auto .secondary-btn,
.theme-auto .biometric-btn,
.theme-auto .fingerprint-action-btn,
.theme-auto .face-capture-btn{
    background:linear-gradient(135deg,var(--theme-secondary),var(--theme-primary) 48%,var(--theme-dark));
    box-shadow:0 14px 30px rgba(var(--theme-primary-rgb),.30);
}
.theme-auto .soft-btn,
.theme-auto .shift-time,
.theme-auto .bio-account-card,
.theme-auto .gps-mini-status,
.theme-auto .workrule-item.active,
.theme-auto .location-summary-card.school,
.theme-auto .location-summary-card.user{
    background:linear-gradient(180deg,var(--theme-soft-2),var(--theme-soft));
    color:var(--theme-primary);
    border-color:var(--theme-border);
}
.theme-auto .glass-card:before,
.theme-auto .premium-card:before,
.theme-auto .workrule-card:before,
.theme-auto .location-page-card:before{
    background:linear-gradient(90deg,var(--theme-accent),var(--theme-secondary),var(--theme-primary));
}
.theme-auto .bottom-nav .active{
    color:var(--theme-primary);
    background:linear-gradient(180deg,var(--theme-soft-2),var(--theme-soft));
}
.theme-auto .bottom-nav,
.theme-auto .camera-card,
.theme-auto .presence-card,
.theme-auto .glass-card,
.theme-auto .biometric-activation-card,
.theme-auto .biometric-device-card{
    border-color:rgba(var(--theme-primary-rgb),.16);
    box-shadow:0 18px 45px rgba(var(--theme-dark-rgb),.18);
}
.theme-auto .section-title,
.theme-auto .stat-card strong,
.theme-auto .bio-account-card strong,
.theme-auto .credential-row strong,
.theme-auto .map-floating-card strong,
.theme-auto .location-summary-card strong,
.theme-auto .workrule-item strong,
.theme-auto th,
.theme-auto .leaflet-popup-content b{
    color:var(--theme-primary);
}
.theme-auto .pill,
.theme-auto .badge,
.theme-auto .radius-pill{
    background:var(--theme-soft);
    color:var(--theme-primary);
    border-color:var(--theme-border);
}
.theme-auto .face-guide:before,
.theme-auto .face-guide:after{border-color:var(--theme-accent)}
.theme-auto .face-guide:before{border-left-color:var(--theme-accent);border-top-color:var(--theme-accent)}
.theme-auto .face-guide:after{border-right-color:var(--theme-accent);border-bottom-color:var(--theme-accent)}
.theme-auto .school-pin span{background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary))}
.theme-auto .user-pin span{background:linear-gradient(135deg,var(--theme-accent),var(--theme-secondary))}
.theme-auto.theme-holiday .user-pin.outside span,
.theme-auto .user-pin.outside span{background:linear-gradient(135deg,#dc2626,#991b1b)}
.theme-auto.theme-holiday .status-note.warn,
.theme-auto.theme-holiday .workrule-item.off{
    background:linear-gradient(180deg,#fee2e2,#fff1f2);
    border-color:#fecaca;
    color:#991b1b;
}
.theme-day-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
    padding:9px 12px;
    border-radius:999px;
    color:#fff;
    background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.92),rgba(var(--theme-secondary-rgb),.92));
    border:1px solid rgba(255,255,255,.30);
    box-shadow:0 16px 32px rgba(var(--theme-dark-rgb),.22);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    font-size:12px;
    font-weight:900;
}
.theme-day-badge:before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--theme-accent);
    box-shadow:0 0 0 5px rgba(255,255,255,.14);
}
.theme-day-badge span{opacity:.84;text-transform:uppercase;letter-spacing:.06em;font-size:10px}
.theme-day-badge strong{font-size:12px;color:#fff}
.theme-day-badge.holiday{
    background:linear-gradient(135deg,#991b1b,#dc2626 55%,#be123c);
}
.theme-day-badge.holiday:before{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.20)}
.theme-auto.theme-holiday .bottom-nav .active,
.theme-auto.theme-holiday .soft-btn,
.theme-auto.theme-holiday .gps-mini-status,
.theme-auto.theme-holiday .shift-time{
    background:linear-gradient(180deg,#fff1f2,#fee2e2);
    color:#b91c1c;
    border-color:#fecaca;
}
.theme-auto.theme-holiday .primary-btn:disabled,
.theme-auto .primary-btn:disabled{
    filter:saturate(.75);
    opacity:.72;
}
@media(max-width:430px){.theme-day-badge{margin-left:2px;margin-bottom:10px;font-size:11px;padding:8px 11px}.theme-day-badge span{font-size:9px}.theme-day-badge strong{font-size:11px}}
/* === END AUTO DAILY THEME + RED HOLIDAY THEME === */


/* === USER IMPORT TEMPLATE + CLEAN APP ICON REFINEMENT (20260621-template-logo-v4) === */
.import-card{display:grid;gap:12px}
.import-template-box{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:15px;border-radius:24px;background:linear-gradient(135deg,#eff6ff,#f0fdfa);border:1px solid #bae6fd;box-shadow:0 14px 30px rgba(15,76,129,.10)}
.import-template-box strong{display:block;color:#0f4c81;font-size:16px;letter-spacing:-.02em}
.import-template-box p{margin:5px 0 0;color:#475569;font-size:13px;line-height:1.45}
.template-download-btn{width:auto!important;white-space:nowrap;margin-top:0!important;border-radius:18px}
.splash-logo-wrap,.brand-card .brand-logo.logo-image,.school-avatar{background:linear-gradient(180deg,#ffffff,#eff6ff)!important}
.school-logo-img,.logo-image img,.school-avatar img{background:transparent!important}
@media(max-width:520px){.import-template-box{grid-template-columns:1fr}.template-download-btn{width:100%!important}}
/* === END USER IMPORT TEMPLATE + CLEAN APP ICON REFINEMENT === */