:root{--color-primary: #71ad4f;--color-primary-hover: #5f943e;--color-primary-active: #4e7a32;--color-primary-light: #eaf4e4;--color-primary-pale: #f6faf3;--color-surface: #fafbf9;--color-surface-alt: #f1f3f0;--color-card: #ffffff;--color-border: #d9dcd6;--color-border-light: #eef0ec;--color-text: #1f2e1a;--color-text-secondary: #5f6d5a;--color-text-muted: #8f9a8a;--color-success: #5d9c3e;--color-warning: #d4872e;--color-warning-bg: #fef9f0;--color-warning-border: #f0d89c;--color-danger: #d15c5c;--color-danger-bg: #fef5f5;--color-info: #5b8fc2;--color-info-bg: #eef5fb;--color-header: #1f2e1a;--color-header-text: #ffffff;--shadow-sm: 0 1px 3px rgba(30, 40, 25, .06);--shadow-md: 0 4px 12px rgba(30, 40, 25, .08);--shadow-lg: 0 8px 24px rgba(30, 40, 25, .1);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s cubic-bezier(.16, 1, .3, 1);--transition-spring: .4s cubic-bezier(.34, 1.56, .64, 1);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--text-xs: .75rem;--text-sm: .85rem;--text-base: .95rem;--text-md: 1.05rem;--text-lg: 1.15rem;--text-xl: 1.3rem;--text-2xl: 1.5rem;--text-3xl: 2rem}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-surface);color:var(--color-text);line-height:1.5}#root{min-height:100vh;min-height:100dvh}button{font-family:inherit;cursor:pointer}input,select,textarea{font-family:inherit}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}button:focus-visible,a:focus-visible{border-radius:var(--radius-md)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-8px)}to{opacity:1;max-height:500px;transform:translateY(0)}}@keyframes skeletonShimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}@keyframes pulseGreen{0%,to{box-shadow:0 0 #71ad4f}50%{box-shadow:0 0 0 6px #71ad4f00}}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.skeleton{background:linear-gradient(90deg,var(--color-border-light) 0px,#f0f2ed 40px,var(--color-border-light) 80px);background-size:200px 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:8px}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--space-lg);background:var(--color-surface);animation:fadeIn var(--transition-slow)}.login-title{font-size:var(--text-3xl);font-weight:700;margin:0 0 var(--space-sm);color:var(--color-text);letter-spacing:-.02em}.login-subtitle{color:var(--color-text-secondary);margin:0 0 var(--space-xl);font-size:var(--text-lg)}.role-choices{display:flex;gap:var(--space-lg);flex-wrap:wrap;justify-content:center}.role-btn{display:flex;flex-direction:column;align-items:center;gap:12px;padding:var(--space-xl) var(--space-2xl);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-card);font-size:var(--text-xl);font-weight:600;color:var(--color-text);cursor:pointer;transition:transform var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base);min-width:180px;-webkit-tap-highlight-color:transparent}.role-btn:hover{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-md)}.role-btn:focus-visible{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-md)}.role-btn:active{transform:translateY(-1px) scale(.98)}.role-icon{font-size:3rem;transition:transform var(--transition-base)}.role-btn:hover .role-icon{transform:scale(1.15)}.back-btn{position:absolute;top:var(--space-lg);left:var(--space-lg);background:none;border:none;font-size:var(--text-md);font-weight:500;color:var(--color-primary);cursor:pointer;padding:var(--space-sm) 12px;border-radius:var(--radius-md);transition:color var(--transition-fast),background var(--transition-fast)}.back-btn:hover{background:var(--color-primary-light)}.login-form{display:flex;flex-direction:column;gap:var(--space-md);width:100%;max-width:380px;animation:fadeIn var(--transition-slow)}.login-form label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:var(--text-sm);color:var(--color-text-secondary)}.login-form input{padding:14px 16px;border:2px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem;background:var(--color-card);color:var(--color-text);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.login-form input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #71ad4f26;outline:none}.pin-display{display:flex;gap:14px;margin:var(--space-lg) 0}.pin-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--color-border);background:var(--color-card);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-spring)}.pin-dot.filled{background:var(--color-primary);border-color:var(--color-primary);transform:scale(1.15);animation:pulseGreen .6s ease}.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:320px;width:100%}.pin-key{aspect-ratio:1;border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-card);font-size:var(--text-2xl);font-weight:600;color:var(--color-text);cursor:pointer;transition:transform var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.pin-key:hover{border-color:var(--color-primary);background:var(--color-primary-pale)}.pin-key:active{background:var(--color-primary-light);transform:scale(.92);border-color:var(--color-primary)}.pin-key.empty{border:none;background:transparent;cursor:default}.pin-key.empty:hover{background:transparent}.pin-key.empty:active{transform:none}.pin-key.clear{font-size:2rem;color:var(--color-text-muted)}.submit-btn{margin-top:20px;padding:14px 48px;border:none;border-radius:var(--radius-md);background:var(--color-primary);color:#fff;font-size:var(--text-lg);font-weight:600;cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);display:flex;align-items:center;justify-content:center}.submit-btn:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.submit-btn:active:not(:disabled){transform:scale(.97)}.submit-btn:disabled{opacity:.65;cursor:default}.error-msg{background:var(--color-danger-bg);color:var(--color-danger);padding:12px 16px;border-radius:var(--radius-md);font-size:var(--text-base);text-align:center;font-weight:500;animation:fadeIn var(--transition-fast)}.loading-msg{color:var(--color-text-muted);font-size:var(--text-base);margin:var(--space-sm) 0}