:root{--color-primary: #2d5016;--color-primary-dark: #1f3810;--color-primary-light: #4a7f2a;--color-success: #5a9216;--color-danger: #c53030;--color-warning: #d69e2e;--color-bg: #f7fafc;--color-surface: #ffffff;--color-border: #e2e8f0;--color-text: #1a202c;--color-text-light: #718096;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--radius: 1rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--color-text);background:#f7fafc;min-height:100vh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.container{max-width:480px;margin:0 auto;padding:1rem;min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;padding:1.5rem 1rem;background:#fff;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 2px 4px #0000000d}.header .logo{max-width:280px;width:90%;height:auto;margin-bottom:.75rem}.header h1,.header h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem;margin-top:.5rem;color:var(--color-primary)}.subtitle{font-size:1rem;color:var(--color-text-light);font-weight:500}.welcome-content{flex:1;background:#fff;border-radius:0 0 var(--radius) var(--radius);padding:2rem;box-shadow:var(--shadow);text-align:center}.welcome-icon{font-size:5rem;margin-bottom:1rem}.welcome-content h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-text)}.welcome-content>p{color:var(--color-text-light);margin-bottom:2rem}.instructions{background:var(--color-bg);padding:1.5rem;border-radius:var(--radius);text-align:left;margin-bottom:2rem}.instructions h3{margin-bottom:1rem;font-size:1.125rem}.instructions ol{margin-left:1.5rem;color:var(--color-text-light)}.instructions li{margin-bottom:.5rem}.manual-token{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--color-border)}.pin-content{flex:1;background:#fff;border-radius:0 0 var(--radius) var(--radius);padding:2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center}.pin-input-container{display:flex;gap:1rem;margin:2rem 0}.pin-digit{width:4rem;height:4.5rem;font-size:2rem;text-align:center;border:2px solid var(--color-border);border-radius:var(--radius);font-weight:700;transition:all .2s}.pin-digit:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #2d501633}.main-content{flex:1;background:#fff;border-radius:0 0 var(--radius) var(--radius);padding:1.5rem;box-shadow:var(--shadow)}.door-status-card{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;border-radius:var(--radius);margin-bottom:1.5rem;transition:all .3s ease;border:2px solid var(--color-border)}.door-status-card.status-locked{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-color:#dc2626}.door-status-card.status-unlocked{background:linear-gradient(135deg,#5a9216,#4a7f2a);color:#fff;border-color:#4a7f2a}.door-status-card.status-open{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb}.door-status-card.status-pending{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:#d97706;animation:pulse 1.5s ease-in-out infinite}.door-status-card.status-unknown{background:#e5e7eb;color:#6b7280;border-color:#d1d5db}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.status-icon{font-size:3.5rem;line-height:1}.status-text{flex:1}.status-label{font-size:.875rem;opacity:.9;font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.status-value{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.status-time{font-size:.75rem;opacity:.8}.status-banner{padding:1rem;border-radius:var(--radius);margin-bottom:1.5rem;text-align:center;font-weight:500}.status-banner.warning{background:#fef3c7;color:#92400e}.status-banner.error{background:#fee2e2;color:#991b1b}.access-info{margin-bottom:2rem}.info-card{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:linear-gradient(135deg,#2d5016,#4a7f2a);color:#fff;border-radius:var(--radius)}.info-icon{font-size:2.5rem}.info-content{flex:1}.info-value{font-size:2.5rem;font-weight:700;line-height:1}.info-label{font-size:.875rem;opacity:.9;margin-top:.25rem}.door-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.btn-door{padding:1.5rem;border-radius:var(--radius);font-size:1.25rem;font-weight:600;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all .2s;box-shadow:var(--shadow)}.btn-unlock{background:linear-gradient(135deg,#5a9216,#4a7f2a)}.btn-unlock:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-unlock:active:not(:disabled){transform:scale(.98)}.btn-lock{background:linear-gradient(135deg,#6b7280,#4b5563)}.btn-lock:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-door:disabled{opacity:.5;cursor:not-allowed}.btn-door.loading{opacity:.7;cursor:wait}.btn-icon{font-size:1.5rem}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.stat-box{text-align:center;padding:1.25rem;background:var(--color-bg);border-radius:var(--radius)}.stat-value{font-size:2rem;font-weight:700;color:var(--color-primary);line-height:1}.stat-label{font-size:.875rem;color:var(--color-text-light);margin-top:.5rem}.btn-primary,.btn-secondary{padding:.875rem 1.5rem;border-radius:var(--radius);font-weight:600;border:none;cursor:pointer;transition:all .2s;font-size:1rem}.btn-primary{background:var(--color-primary);color:#fff;width:100%}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-primary.btn-large{padding:1.125rem 2rem;font-size:1.125rem}.btn-secondary{background:#fff;color:var(--color-text);border:2px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg)}.error-message,.success-message{padding:1rem;border-radius:var(--radius);margin-bottom:1rem;font-weight:500}.error-message{background:#fee2e2;color:#991b1b;border-left:4px solid var(--color-danger)}.success-message{background:#d1fae5;color:#065f46;border-left:4px solid var(--color-success)}.footer{text-align:center;padding:2rem 0 1rem;color:var(--color-text-light);font-size:.875rem}.footer-actions{display:flex;gap:.75rem;margin-top:1rem}.footer-actions button{flex:1}@media (max-width: 400px){.pin-digit{width:3.5rem;height:4rem;font-size:1.75rem}.btn-door{padding:1.25rem;font-size:1.125rem}}