@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap";
:root{--color-primary-50:#fff8e1;--color-primary-100:#ffecb3;--color-primary-200:#ffe082;--color-primary-300:#ffd54f;--color-primary-400:#ffca28;--color-primary-500:#ffc107;--color-primary-600:#ffb300;--color-primary-700:#ffa000;--color-primary-800:#ff8f00;--color-primary-900:#ff6f00;--color-secondary-50:#e8f5e9;--color-secondary-100:#c8e6c9;--color-secondary-200:#a5d6a7;--color-secondary-300:#81c784;--color-secondary-400:#66bb6a;--color-secondary-500:#2e7d32;--color-secondary-600:#27722d;--color-secondary-700:#1b5e20;--color-secondary-800:#145218;--color-secondary-900:#0d3b10;--color-accent:#ff6b6b;--color-accent-hover:#ff5252;--color-accent-light:#ffebee;--color-bg:#fffdf7;--color-bg-secondary:#fff9ee;--color-bg-card:#fff;--color-text:#1a1a2e;--color-text-secondary:#5a5a7a;--color-text-muted:#9a9ab0;--color-border:#e8e4dd;--color-border-focus:var(--color-primary-500);--color-success:#2e7d32;--color-success-bg:#e8f5e9;--color-error:#d32f2f;--color-error-bg:#ffebee;--color-warning:#f57f17;--color-warning-bg:#fff8e1;--color-info:#0277bd;--color-info-bg:#e1f5fe;--font-display:"Nunito", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-xl:36px;--radius-full:9999px;--shadow-sm:0 2px 8px #1a1a2e0a;--shadow-md:0 4px 16px #1a1a2e14;--shadow-lg:0 8px 32px #1a1a2e1f;--shadow-xl:0 16px 48px #1a1a2e29;--shadow-glow:0 0 24px #ffc1074d;--shadow-success-glow:0 0 24px #2e7d324d;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.15s;--duration-normal:.3s;--duration-slow:.5s;--max-width:1200px;--max-width-form:560px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);color:var(--color-text);background-color:var(--color-bg);min-height:100vh;line-height:1.6;overflow-x:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--color-text);font-weight:800;line-height:1.2}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}p{color:var(--color-text-secondary);line-height:1.7}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);font-family:var(--font-display);font-size:var(--text-lg);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-normal) var(--ease-spring);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;min-height:56px;font-weight:700;text-decoration:none;display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";pointer-events:none;background:linear-gradient(#ffffff26 0%,#0000 50%);position:absolute;inset:0}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));color:var(--color-text);box-shadow:var(--shadow-md), 0 4px 12px #ffc10740}.btn-primary:hover{box-shadow:var(--shadow-lg), var(--shadow-glow);transform:translateY(-2px)scale(1.02)}.btn-secondary{background:linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-700));color:#fff;box-shadow:var(--shadow-md), 0 4px 12px #2e7d3240}.btn-secondary:hover{box-shadow:var(--shadow-lg), var(--shadow-success-glow);transform:translateY(-2px)scale(1.02)}.btn-outline{color:var(--color-secondary-500);border:2px solid var(--color-secondary-500);background:0 0}.btn-outline:hover{background:var(--color-secondary-50);transform:translateY(-2px)}.btn-danger{background:linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));color:#fff}.btn-danger:hover{box-shadow:var(--shadow-lg), 0 0 24px #ff6b6b4d;transform:translateY(-2px)scale(1.02)}.btn-lg{padding:var(--space-5) var(--space-10);font-size:var(--text-xl);border-radius:var(--radius-lg);min-height:64px}.btn-full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:all var(--duration-normal) var(--ease-out)}.card:hover,.card-elevated{box-shadow:var(--shadow-lg)}.form-group{margin-bottom:var(--space-5)}.form-label{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--color-text);margin-bottom:var(--space-2);letter-spacing:.02em;display:block}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-4);font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-sm);transition:all var(--duration-fast) ease;outline:none;min-height:52px}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 4px #ffc10726}.form-input::placeholder{color:var(--color-text-muted)}.form-textarea{resize:vertical;min-height:100px}.form-error{color:var(--color-error);font-size:var(--text-sm);margin-top:var(--space-1);font-weight:500}.form-row{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}@media (max-width:640px){.form-row{grid-template-columns:1fr}}.checkbox-group{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-bg-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-fast) ease;display:flex}.checkbox-group:hover{background:var(--color-primary-50)}.checkbox-input{width:24px;min-width:24px;height:24px;accent-color:var(--color-secondary-500);cursor:pointer;margin-top:2px}.checkbox-label{font-size:var(--text-sm);color:var(--color-text-secondary);cursor:pointer;line-height:1.5}.toggle-group{align-items:center;gap:var(--space-3);display:flex}.toggle-switch{width:52px;min-width:52px;height:28px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background:var(--color-border);border-radius:var(--radius-full);transition:all var(--duration-normal) var(--ease-spring);position:absolute;inset:0}.toggle-slider:before{content:"";width:22px;height:22px;transition:all var(--duration-normal) var(--ease-spring);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;bottom:3px;left:3px}.toggle-switch input:checked+.toggle-slider{background:var(--color-secondary-500)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.stepper{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-6) 0;display:flex}.stepper-step{align-items:center;gap:var(--space-2);display:flex}.stepper-dot{width:40px;height:40px;font-family:var(--font-display);font-weight:800;font-size:var(--text-sm);transition:all var(--duration-normal) var(--ease-spring);border:2px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-muted);border-radius:50%;justify-content:center;align-items:center;display:flex}.stepper-dot.active{background:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-text);box-shadow:var(--shadow-glow);transform:scale(1.15)}.stepper-dot.completed{background:var(--color-secondary-500);border-color:var(--color-secondary-500);color:#fff}.stepper-line{background:var(--color-border);border-radius:var(--radius-full);width:40px;height:3px;transition:background var(--duration-normal) ease}.stepper-line.completed{background:var(--color-secondary-500)}.stepper-label{display:none}@media (min-width:640px){.stepper-label{font-size:var(--text-xs);color:var(--color-text-muted);text-align:center;margin-top:var(--space-1);font-weight:600;display:block}.stepper-label.active{color:var(--color-primary-700)}.stepper-label.completed{color:var(--color-secondary-500)}.stepper-step{flex-direction:column}.stepper-line{display:none}.stepper{gap:var(--space-8)}}.badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:700;font-family:var(--font-display);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;display:inline-flex}.badge-active{background:var(--color-success-bg);color:var(--color-success)}.badge-completed{background:var(--color-bg-secondary);color:var(--color-text-muted)}.badge-pulse:before{content:"";background:currentColor;border-radius:50%;width:8px;height:8px;animation:2s infinite pulse}.alert{padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);font-weight:500;display:flex}.alert-success{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-secondary-200)}.alert-error{background:var(--color-error-bg);color:var(--color-error);border:1px solid #ffcdd2}.alert-warning{background:var(--color-warning-bg);color:var(--color-warning);border:1px solid #ffe082}.alert-info{background:var(--color-info-bg);color:var(--color-info);border:1px solid #b3e5fc}.success-screen{text-align:center;padding:var(--space-12) var(--space-6);animation:slideUp .6s var(--ease-spring) both}.success-icon{width:120px;height:120px;margin:0 auto var(--space-8);background:var(--color-success-bg);animation:bounceIn .8s var(--ease-spring) .2s both;box-shadow:var(--shadow-success-glow);border-radius:50%;justify-content:center;align-items:center;font-size:56px;display:flex}.success-title{font-size:var(--text-3xl);margin-bottom:var(--space-3);color:var(--color-secondary-700)}.success-subtitle{font-size:var(--text-lg);color:var(--color-text-secondary);margin-bottom:var(--space-8)}.page-container{max-width:var(--max-width);padding:var(--space-4);min-height:100vh;margin:0 auto}.page-container-narrow{max-width:var(--max-width-form);padding:var(--space-4);min-height:100vh;margin:0 auto}.page-header p{font-size:var(--text-lg)}@media (max-width:480px){.page-container-narrow{padding:var(--space-2)}.page-header{padding:var(--space-4) 0}.card{padding:var(--space-5) var(--space-4);border-radius:var(--radius-md)}h1{font-size:var(--text-2xl)}}.nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;border-bottom:1px solid var(--color-border);transition:all var(--duration-normal) ease;background:#fffdf7e6;position:sticky;top:0}.nav-container{max-width:var(--max-width);padding:var(--space-4) var(--space-6);justify-content:space-between;align-items:center;width:100%;margin:0 auto;display:flex}@media (max-width:640px){.nav{padding:var(--space-3) var(--space-4)}.nav-brand-text{font-size:var(--text-lg)}.nav-brand-icon{width:36px;height:36px;font-size:20px}}.nav-brand{align-items:center;gap:var(--space-3);color:var(--color-text);text-decoration:none;display:flex}.nav-brand-icon{background:linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));border-radius:var(--radius-sm);width:44px;height:44px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;font-size:24px;display:flex}.nav-brand-text{font-family:var(--font-display);font-weight:900;font-size:var(--text-xl)}.nav-brand-text span{color:var(--color-secondary-500)}.nav-links{gap:var(--space-2);display:flex}.nav-link{padding:var(--space-2) var(--space-4);font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all var(--duration-fast) ease;text-decoration:none}.nav-link:hover{background:var(--color-primary-50);color:var(--color-text)}.nav-link.active{background:var(--color-primary-100);color:var(--color-primary-900)}@media (max-width:768px){.nav-links{display:none}}.bottom-nav{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--color-border);padding:var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));z-index:1000;background:#fffffff2;justify-content:space-around;align-items:center;display:none;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #0000000d}@media (max-width:768px){.bottom-nav{display:flex}body{padding-bottom:80px}}.bottom-nav-item{align-items:center;gap:var(--space-1);color:var(--color-text-muted);font-size:10px;font-weight:700;font-family:var(--font-display);transition:all var(--duration-fast) ease;flex-direction:column;min-width:60px;text-decoration:none;display:flex}.bottom-nav-icon{transition:transform var(--duration-fast) var(--ease-spring);font-size:20px}.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--color-primary-800)}.bottom-nav-item.active .bottom-nav-icon{text-shadow:0 4px 12px #ffc10766;transform:translateY(-4px)}.qr-scanner-container{aspect-ratio:1;border-radius:var(--radius-lg);background:var(--color-text);width:100%;max-width:400px;margin:0 auto;position:relative;overflow:hidden}.qr-scanner-overlay{justify-content:center;align-items:center;gap:var(--space-4);z-index:10;pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:0}.qr-scanner-frame{border:3px solid var(--color-primary-500);border-radius:var(--radius-md);width:200px;height:200px;box-shadow:var(--shadow-glow);position:relative}.qr-scanner-frame:before{content:"";background:var(--color-primary-500);height:3px;animation:2s ease-in-out infinite scanLine;position:absolute;top:0;left:0;right:0;box-shadow:0 0 12px #ffc10799}.dashboard-grid{gap:var(--space-6);margin-bottom:var(--space-8);grid-template-columns:repeat(3,1fr);display:grid}@media (max-width:768px){.dashboard-grid{grid-template-columns:1fr}}.stat-card{padding:var(--space-6);border-radius:var(--radius-lg);text-align:center;position:relative;overflow:hidden}.stat-card:before{content:"";opacity:.15;border-radius:50%;width:80px;height:80px;position:absolute;top:-20px;right:-20px}.stat-card-present{background:linear-gradient(135deg, var(--color-secondary-50), var(--color-secondary-100));border:1px solid var(--color-secondary-200)}.stat-card-present:before{background:var(--color-secondary-500)}.stat-card-checkin{background:linear-gradient(135deg, var(--color-primary-50), var(--color-primary-100));border:1px solid var(--color-primary-200)}.stat-card-checkin:before{background:var(--color-primary-500)}.stat-card-checkout{background:linear-gradient(135deg, var(--color-accent-light), #ffe0e0);border:1px solid #ffcdd2}.stat-card-checkout:before{background:var(--color-accent)}.stat-number{font-family:var(--font-display);font-size:var(--text-4xl);margin-bottom:var(--space-2);font-weight:900;line-height:1}.stat-label{font-size:var(--text-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.table-container{border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-bg-card);overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.data-table th{padding:var(--space-4) var(--space-5);text-align:left;font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);background:var(--color-bg-secondary);border-bottom:2px solid var(--color-border)}.data-table td{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:var(--color-bg-secondary)}.spinner{border:4px solid var(--color-border);border-top-color:var(--color-primary-500);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.loading-screen{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-16) 0;flex-direction:column;display:flex}.consent-box{background:var(--color-bg-secondary);border:2px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);max-height:320px;margin-bottom:var(--space-6);font-size:var(--text-sm);line-height:1.8;overflow-y:auto}.consent-box h3{font-size:var(--text-lg);margin-bottom:var(--space-4);color:var(--color-secondary-700)}.consent-box ul{margin:var(--space-3) 0;padding-left:var(--space-6)}.consent-box li{margin-bottom:var(--space-2);color:var(--color-text-secondary)}.info-card{align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-bg-secondary);border-radius:var(--radius-md);border:1px solid var(--color-border);margin-bottom:var(--space-3);transition:all var(--duration-fast) ease;display:flex}.info-card:hover{border-color:var(--color-primary-300);background:var(--color-primary-50)}.info-card-icon{border-radius:var(--radius-sm);justify-content:center;align-items:center;width:48px;min-width:48px;height:48px;font-size:24px;display:flex}.info-card-content{flex:1}.info-card-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-base)}.info-card-subtitle{font-size:var(--text-sm);color:var(--color-text-muted)}.hero{text-align:center;padding:var(--space-16) var(--space-4) var(--space-12);position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(ellipse at center top, var(--color-primary-100) 0%, transparent 60%);z-index:-1;opacity:.6;width:120%;height:100%;position:absolute;top:-50%;left:-10%}.hero-emoji{margin-bottom:var(--space-6);animation:bounceIn 1s var(--ease-spring) both;font-size:80px;display:block}.hero h1{font-size:var(--text-5xl);margin-bottom:var(--space-4);animation:slideUp .8s var(--ease-out) .1s both}.hero h1 .highlight{background:linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-500));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero p{font-size:var(--text-xl);max-width:600px;margin:0 auto var(--space-10);animation:slideUp .8s var(--ease-out) .2s both}.hero-actions{gap:var(--space-4);animation:slideUp .8s var(--ease-out) .3s both;flex-wrap:wrap;justify-content:center;display:flex}@media (max-width:640px){.hero h1{font-size:var(--text-3xl)}.hero p{font-size:var(--text-base)}.hero-actions{padding:0 var(--space-4);flex-direction:column}}.features{padding:var(--space-16) var(--space-4);max-width:var(--max-width);margin:0 auto}.features-grid{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.feature-card{padding:var(--space-8);border-radius:var(--radius-lg);background:var(--color-bg-card);border:1px solid var(--color-border);transition:all var(--duration-normal) var(--ease-spring);animation:slideUp .6s var(--ease-out) both}.feature-card:first-child{animation-delay:.1s}.feature-card:nth-child(2){animation-delay:.2s}.feature-card:nth-child(3){animation-delay:.3s}.feature-card:nth-child(4){animation-delay:.4s}.feature-card:hover{box-shadow:var(--shadow-xl);border-color:var(--color-primary-300);transform:translateY(-8px)rotate(-1deg)}.feature-icon{margin-bottom:var(--space-4);font-size:48px;display:block}.feature-card h3{margin-bottom:var(--space-2);font-size:var(--text-xl)}.feature-card p{font-size:var(--text-sm)}.section-title{text-align:center;margin-bottom:var(--space-12)}.section-title h2{margin-bottom:var(--space-3)}.filter-bar{gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;align-items:flex-end;display:flex}.filter-bar .form-group{flex:1;min-width:200px;margin-bottom:0}.tabs{gap:var(--space-1);background:var(--color-bg-secondary);border-radius:var(--radius-md);padding:var(--space-1);margin-bottom:var(--space-6);display:flex}.tab{padding:var(--space-3) var(--space-4);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-muted);transition:all var(--duration-fast) ease;background:0 0;border:none;flex:1}.tab.active{background:var(--color-bg-card);color:var(--color-text);box-shadow:var(--shadow-sm)}.tab:hover:not(.active){color:var(--color-text-secondary)}.empty-state{text-align:center;padding:var(--space-12) var(--space-6);color:var(--color-text-muted)}.empty-state-icon{margin-bottom:var(--space-4);opacity:.5;font-size:64px}.empty-state h3{color:var(--color-text-muted);font-size:var(--text-xl);margin-bottom:var(--space-2)}@keyframes slideUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}70%{transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}@keyframes scanLine{0%,to{top:0}50%{top:calc(100% - 3px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translate(-16px)}to{opacity:1;transform:translate(0)}}.text-center{text-align:center}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mx-auto{margin-left:auto;margin-right:auto}.gap-4{gap:var(--space-4)}.visually-hidden{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}