:root{--c-bg: #f4f5f7;--c-surface: #ffffff;--c-border: #dde1e9;--c-text: #1a1a2e;--c-muted: #6b7280;--c-white: #ffffff;--c-primary: #0f52ba;--c-primary-h: #0a3d8f;--c-danger: #dc2626;--c-success: #16a34a;--c-warning: #f59e0b;--c-info: #3b82f6;--c-overlay-subtle: rgba(255,255,255,.1);--c-overlay-soft: rgba(255,255,255,.2);--c-overlay-medium: rgba(255,255,255,.4);--c-overlay-strong: rgba(255,255,255,.6);--c-overlay-opaque: rgba(255,255,255,.95);--c-primary-tint: rgba(15,82,186,.06);--c-primary-ring: rgba(15,82,186,.15);--c-primary-shadow: rgba(15,82,186,.22);--c-danger-tint: rgba(220,38,38,.1);--c-danger-ring: rgba(220,38,38,.2);--c-success-tint: rgba(22,163,74,.1);--shadow: 0 2px 12px rgba(0,0,0,.08);--shadow-md: 0 4px 24px rgba(0,0,0,.12);--shadow-lg: 0 8px 32px rgba(0,0,0,.16);--radius: 12px;--radius-lg: 20px;--touch-target: 64px;--touch-medium: 56px;--touch-small: 48px;--font-base: 17px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:var(--font-base);background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100dvh;display:flex;flex-direction:column}.header,.form-header,.admin-header{display:grid;align-items:center;padding:0 var(--space-lg);background:var(--c-surface);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:10;box-shadow:var(--shadow);min-height:68px}.header{grid-template-columns:auto 1fr auto;gap:var(--space-md);background:var(--c-primary-h);border-bottom-color:var(--c-overlay-subtle)}.logo{display:flex;align-items:center}.logo-image img{height:36px;width:auto;display:block}.header-controls{grid-column:3;display:flex;align-items:center;gap:var(--space-md);justify-content:flex-end}.lang-toggle{background:none;border:0;width:var(--touch-small);height:var(--touch-small);padding:0;font-size:40px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius);transition:background .15s,transform .1s}.lang-toggle:hover{background:var(--c-overlay-soft)}.lang-toggle:active{transform:scale(.93)}.logout-btn{color:var(--c-white)!important;font-size:14px;font-weight:600;background:none;border:none;cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);opacity:.9;transition:opacity .15s,background .15s;white-space:nowrap}.logout-btn:hover{opacity:1;background:var(--c-overlay-subtle)}.form-header{grid-template-columns:1fr auto 1fr;gap:var(--space-sm)}.form-header .back-btn{justify-self:start}.form-title{grid-column:2;font-size:20px;font-weight:700;color:var(--c-text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-badge{justify-self:end;font-size:26px;line-height:1}.admin-header{grid-template-columns:1fr auto 1fr;gap:var(--space-sm)}.admin-header .back-btn{justify-self:start}.admin-header h1{grid-column:2;font-size:20px;font-weight:700;color:var(--c-text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-header:after{content:"";display:block}.back-btn{background:none;border:none;color:var(--c-primary);font-size:15px;font-weight:600;cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);transition:background .15s;display:inline-flex;align-items:center;gap:var(--space-xs);min-height:var(--touch-small);white-space:nowrap}.back-btn:hover{background:var(--c-primary-tint)}.home-screen{display:flex;flex-direction:column;min-height:100dvh;background:linear-gradient(145deg,var(--c-primary) 0%,var(--c-primary-h) 100%);color:var(--c-white)}.home-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg) 28px 40px;max-width:1200px;width:100%;margin:0 auto}.home-welcome{font-size:24px;opacity:.85;letter-spacing:.02em;text-align:center;font-weight:500;margin-bottom:8px}.role-section{width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:20px}.role-section--primary{margin-top:28px;margin-bottom:32px}.role-section--secondary{margin-bottom:28px}.role-section--admin{margin-top:32px;margin-bottom:24px;padding:24px 20px;background:var(--c-overlay-subtle);border-radius:20px;border:2px solid var(--c-overlay-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-section-header{display:flex;align-items:center;justify-content:center;margin-bottom:20px}.admin-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:var(--c-overlay-subtle);border:1.5px solid var(--c-overlay-soft);border-radius:24px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-overlay-opaque);box-shadow:0 4px 12px #0003;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 4px 12px #0003}50%{box-shadow:0 4px 16px var(--c-overlay-soft)}}.role-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);width:100%}.role-grid--large{max-width:650px;gap:20px}.role-grid--medium{max-width:550px;gap:16px}.role-grid--compact{max-width:900px;gap:14px}.role-grid--large .role-card{flex:1 1 280px;max-width:320px;min-height:160px;font-size:20px}.role-grid--large .role-icon{font-size:52px}.role-grid--medium .role-card{flex:1 1 240px;max-width:260px;min-height:130px;font-size:17px}.role-grid--medium .role-icon{font-size:40px}.role-grid--compact .role-card{flex:1 1 160px;max-width:200px;min-height:110px;font-size:14px;background:var(--c-overlay-subtle);border-color:var(--c-overlay-soft)}.role-grid--compact .role-card:hover{background:#ffffff2e;border-color:var(--c-overlay-medium)}.role-grid--compact .role-icon{font-size:32px}.role-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);min-height:140px;flex:1 1 220px;max-width:280px;border-radius:var(--radius-lg);border:2px solid var(--c-overlay-soft);background:#ffffff1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--c-white);font-size:18px;font-weight:600;cursor:pointer;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 12px #0000001a;position:relative}.role-card:hover,.role-card:focus-visible{background:#ffffff38;border-color:var(--c-overlay-medium);transform:translateY(-3px);outline:none;box-shadow:0 8px 20px #00000026}.role-card:active{transform:scale(.97)}.role-card.role-admin{background:#47556933;border-color:var(--c-overlay-soft)}.role-card.role-admin:hover{background:#4755694d;border-color:var(--c-overlay-medium)}.role-card.role-admin:before{content:"🔒";position:absolute;top:8px;right:8px;font-size:14px;opacity:.5}.role-icon{font-size:42px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.role-label{letter-spacing:.02em}.home-footer{padding:var(--space-md) 28px;text-align:center;font-size:12px;opacity:.45;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px}.footer-role{color:var(--c-overlay-strong);font-weight:600}.login-screen{display:flex;flex-direction:column;min-height:100dvh;background:linear-gradient(145deg,var(--c-primary) 0%,var(--c-primary-h) 100%);color:var(--c-white)}.login-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-lg) 28px 40px}.login-footer{padding:var(--space-md) 28px;text-align:center;font-size:12px;opacity:.5}.login-container{width:100%;max-width:440px;background:#ffffff38;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:var(--radius-lg);padding:var(--space-xl) 28px;border:1.5px solid rgba(255,255,255,.45);box-shadow:0 8px 40px #0000004d,inset 0 1px #ffffff4d}.login-form{display:flex;flex-direction:column;gap:var(--space-lg)}.login-title{text-align:center;font-size:28px;font-weight:700;margin-bottom:var(--space-lg)}.login-form .form-group{display:flex;flex-direction:column;gap:var(--space-sm)}.mt-1{margin-top:var(--space-sm)}.mt-2{margin-top:var(--space-md)}.mt-3{margin-top:var(--space-lg)}.mt-4{margin-top:var(--space-xl)}.login-form label{font-size:14px;font-weight:600;opacity:1;padding-top:var(--space-sm)}.login-form .form-control{height:var(--touch-target);padding:0 var(--space-md);border:1.5px solid rgba(255,255,255,.4);border-radius:var(--radius);background:#ffffff26;font-size:16px;font-family:inherit;color:var(--c-white);appearance:none;transition:border-color .15s,box-shadow .15s}.login-form .form-control::placeholder{color:#ffffffbf}.login-form .form-control:focus{outline:none;border-color:var(--c-white);box-shadow:0 0 0 3px #ffffff40}.login-form .btn-primary{width:100%;margin-top:var(--space-md);color:var(--c-white);border:1px solid var(--c-overlay-medium)}.error-message{color:#fee;background:var(--c-danger-ring);font-size:14px;text-align:center;padding:var(--space-md);border-radius:var(--radius);border:1px solid rgba(220,38,38,.35);opacity:0;visibility:hidden;height:0;overflow:hidden;transition:opacity .2s ease,visibility .2s ease}.error-message.show{opacity:1;visibility:visible;height:auto;margin-top:var(--space-md)}.form-screen{display:flex;flex-direction:column;min-height:100dvh;background:var(--c-bg)}.visitor-form{flex:1;padding:var(--space-xl) var(--space-lg) 48px;display:flex;flex-direction:column;gap:var(--space-lg);max-width:800px;width:100%;margin:0 auto}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.field{display:flex;flex-direction:column;gap:var(--space-sm)}.field--full{grid-column:1 / -1}.field-label{font-size:13px;font-weight:600;color:var(--c-muted);text-transform:uppercase;letter-spacing:.06em}.field-input,.form-control{height:var(--touch-target);padding:0 var(--space-md);border:1.5px solid var(--c-border);border-radius:var(--radius);background:var(--c-surface);font-size:16px;font-family:inherit;color:var(--c-text);appearance:none;transition:border-color .15s,box-shadow .15s}.field-input--large{font-size:18px;height:72px}.field-input:focus,.form-control:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-ring)}select.field-input,select.form-control{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}.field-error{font-size:12px;color:var(--c-danger);min-height:16px;font-weight:500}.field--error .field-input,.field--error .form-control{border-color:var(--c-danger);box-shadow:0 0 0 3px var(--c-danger-tint)}.sig-wrapper{display:flex;flex-direction:column;gap:var(--space-sm)}.sig-canvas{width:100%;max-width:650px;height:200px;border:2px solid var(--c-border);border-radius:var(--radius);background:var(--c-white);touch-action:none;cursor:crosshair;display:block;transition:border-color .15s,box-shadow .15s}.sig-canvas:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-ring)}.sig--error .sig-canvas{border-color:var(--c-danger);box-shadow:0 0 0 3px var(--c-danger-tint)}.sig-clear{align-self:flex-start;font-size:13px;color:var(--c-muted);background:none;border:none;cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);transition:background .15s;font-weight:600;text-decoration:underline}.sig-clear:hover{background:var(--c-bg);text-decoration:none}.consent-section{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:var(--c-primary-tint);border:1px solid var(--c-primary-ring);border-radius:var(--radius)}.consent-label{display:flex;align-items:flex-start;gap:var(--space-md);cursor:pointer}.consent-check{width:24px;height:24px;accent-color:var(--c-primary);cursor:pointer;flex-shrink:0;margin-top:2px}.consent-text{font-size:14px;color:var(--c-text);line-height:1.6}.privacy-link{color:var(--c-primary);font-weight:600;text-decoration:none}.privacy-link:hover{text-decoration:underline}.consent-error{color:var(--c-danger);font-size:12px;font-weight:500}.check-section{display:flex;flex-direction:column;gap:var(--space-sm)}.checkbox-row{padding:var(--space-xs) 0}.checkbox-label{display:flex;align-items:center;gap:var(--space-md);cursor:pointer;font-size:15px;line-height:1.6}.checkbox-label input[type=checkbox]{width:24px;height:24px;accent-color:var(--c-primary);cursor:pointer;flex-shrink:0}.btn-primary{height:var(--touch-target);padding:0 var(--space-xl);background:var(--c-primary);color:var(--c-white);border:none;border-radius:var(--radius);font-size:18px;font-weight:700;cursor:pointer;letter-spacing:.02em;box-shadow:0 4px 12px var(--c-primary-shadow);transition:background .15s,transform .1s,box-shadow .15s}.btn-primary:hover{background:var(--c-primary-h);box-shadow:0 6px 16px var(--c-primary-shadow)}.btn-primary:active{transform:scale(.98)}.btn-secondary{height:var(--touch-medium);padding:0 var(--space-lg);background:var(--c-bg);color:var(--c-text);border:1.5px solid var(--c-border);border-radius:var(--radius);font-size:16px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}.btn-secondary:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-tint)}.btn-ghost{background:none;border:none;color:var(--c-primary);font-size:15px;font-weight:600;cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);transition:background .15s}.btn-ghost:hover{background:var(--c-primary-tint)}.btn-submit{width:100%;margin-top:var(--space-sm)}.btn-delete,.btn-edit{font-size:14px;background:none;border:none;cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius);font-weight:600;transition:background .15s}.btn-delete{color:var(--c-danger)}.btn-delete:hover{background:var(--c-danger-tint)}.btn-edit{color:var(--c-primary);margin-right:var(--space-sm)}.btn-edit:hover{background:var(--c-primary-tint)}.btn-icon{background:none;border:none;font-size:18px;padding:var(--space-sm);cursor:pointer;border-radius:var(--radius);transition:background .15s,transform .1s;display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}.btn-icon:hover{background:var(--c-bg);transform:scale(1.1)}.btn-icon:active{transform:scale(.95)}.success-screen{min-height:100dvh;background:linear-gradient(145deg,var(--c-primary) 0%,var(--c-primary-h) 100%);display:flex;align-items:center;justify-content:center;padding:var(--space-lg)}.success-card{background:var(--c-surface);border-radius:var(--radius-lg);padding:48px 40px;max-width:480px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-md);box-shadow:var(--shadow-lg)}.success-icon{font-size:72px;animation:scaleIn .5s ease}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.success-title{font-size:28px;font-weight:800;color:var(--c-success);margin-top:var(--space-sm)}.success-sub{color:var(--c-muted);font-size:16px;line-height:1.5}.success-time{font-size:32px;font-weight:800;color:var(--c-text)}.success-home-btn{width:100%;margin-top:var(--space-md)}.success-badge-box{background:var(--c-bg);border-radius:var(--radius);padding:var(--space-lg) var(--space-xl);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);width:100%;margin:var(--space-sm) 0}.success-badge-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);font-weight:600}.success-badge-number{font-size:42px;font-weight:800;color:var(--c-primary);letter-spacing:.04em}.badge-management-screen{background:var(--c-bg)}.badge-management-body{flex:1;padding:var(--space-lg);max-width:950px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-xl)}.badge-section{background:var(--c-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow);border:1px solid var(--c-border)}.badge-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:2px solid var(--c-border);flex-wrap:wrap;gap:var(--space-md)}.badge-section-title{display:flex;align-items:center;gap:var(--space-md);font-size:22px;font-weight:700;color:var(--c-text)}.badge-type-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:24px}.visitor-icon{background:var(--c-primary-tint)}.tech-icon{background:#d977061f}.badge-count{font-size:17px;font-weight:600;color:var(--c-muted);background:var(--c-bg);padding:10px 20px;border-radius:24px;white-space:nowrap}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:14px}.badge-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:20px 14px;border-radius:var(--radius);cursor:pointer;transition:transform .15s,box-shadow .15s;border:2px solid transparent;min-height:110px}.badge-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000026}.badge-card:active{transform:scale(.98)}.badge-pill-free{background:linear-gradient(135deg,var(--c-success) 0%,#059669 100%);border-color:#059669;box-shadow:0 4px 12px var(--c-success-tint)}.badge-pill-free .badge-number{color:var(--c-white);font-weight:800}.badge-pill-free .badge-status{color:#d1fae5}.badge-pill-used{background:linear-gradient(135deg,var(--c-danger) 0%,#b91c1c 100%);border-color:var(--c-danger);box-shadow:0 4px 12px var(--c-danger-tint)}.badge-pill-used .badge-number{color:var(--c-white);font-weight:800}.badge-pill-used .badge-status{color:#fecaca}.badge-number{font-size:36px;font-weight:800;line-height:1;letter-spacing:.02em}.badge-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-align:center}.badge-legend{display:flex;align-items:center;justify-content:center;gap:var(--space-xl);padding:var(--space-md);background:var(--c-surface);border-radius:var(--radius);border:1px solid var(--c-border);flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--c-muted)}.badge-pill-demo{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:20px;font-weight:800;color:var(--c-white)}.badge-instructions{background:var(--c-primary-tint);border:1px solid var(--c-primary-ring);border-radius:var(--radius);padding:20px var(--space-lg)}.badge-instructions p{margin-bottom:var(--space-md);font-size:15px;color:var(--c-text)}.badge-instructions strong{color:var(--c-primary)}.badge-instructions ul{margin:0;padding-left:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-sm)}.badge-instructions li{font-size:14px;line-height:1.6;color:var(--c-muted)}.checkout-body{flex:1;padding:var(--space-xl) var(--space-lg);max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-lg)}.history-controls{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--c-surface);border-bottom:1px solid var(--c-border);flex-wrap:wrap}.filter-tabs{display:flex;gap:var(--space-sm)}.filter-tab{height:var(--touch-small);padding:0 20px;border-radius:24px;border:1.5px solid var(--c-border);background:transparent;font-size:15px;font-weight:600;cursor:pointer;color:var(--c-muted);transition:all .15s}.filter-tab--active{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white);box-shadow:0 2px 8px var(--c-primary-shadow)}.search-input{flex:1;min-width:180px;height:var(--touch-small);padding:0 var(--space-md);border:1.5px solid var(--c-border);border-radius:24px;font-size:15px;font-family:inherit;background:var(--c-surface);color:var(--c-text);outline:none;transition:border-color .15s,box-shadow .15s}.search-input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-ring)}.history-body{flex:1;overflow-x:auto}.table-wrap{overflow-x:auto;padding:20px var(--space-lg)}.history-table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap}.history-table th{text-align:left;padding:12px var(--space-md);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);border-bottom:2px solid var(--c-border);background:var(--c-bg);position:sticky;top:0}.history-table td{padding:var(--space-md);border-bottom:1px solid var(--c-border);color:var(--c-text)}.row--active td{background:var(--c-success-tint)}.type-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.type-badge--visitor{background:var(--c-primary-tint);color:var(--c-primary)}.type-badge--technician{background:#d977061f;color:#b45309}.empty-msg{text-align:center;color:var(--c-muted);padding:60px var(--space-lg);font-size:16px}.admin-screen{display:flex;flex-direction:column;min-height:100dvh;background:var(--c-bg)}.admin-main{flex:1;padding:var(--space-lg);max-width:1100px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-lg)}.admin-section{background:var(--c-surface);border-radius:var(--radius-lg);border:1px solid var(--c-border);overflow:hidden;box-shadow:var(--shadow)}.section-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--c-border);background:var(--c-bg);flex-wrap:wrap;gap:var(--space-md)}.section-header h2{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);margin:0}.user-management-section{background:var(--c-surface);border-radius:16px;border:1px solid var(--c-border);overflow:hidden;box-shadow:var(--shadow)}.user-list{padding:var(--space-lg);overflow-x:auto}.user-table{width:100%;border-collapse:collapse;font-size:14px;min-width:800px}.user-table th{text-align:left;padding:14px var(--space-md);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted);border-bottom:2px solid var(--c-border);background:var(--c-bg);white-space:nowrap}.user-table td{padding:var(--space-md);border-bottom:1px solid var(--c-border);color:var(--c-text)}.user-table tr:hover td{background:var(--c-bg)}.user-table tr.inactive td{opacity:.5}.user-table .actions{display:flex;gap:var(--space-sm);white-space:nowrap}.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.status-badge.active{background:var(--c-success-tint);color:var(--c-success)}.status-badge.inactive{background:var(--c-danger-tint);color:var(--c-danger)}.loading,.empty,.error{padding:60px var(--space-lg);text-align:center;color:var(--c-muted);font-size:16px}.error{color:var(--c-danger)}.modal{display:none;position:fixed;inset:0;background:#0009;align-items:center;justify-content:center;z-index:1000;padding:var(--space-lg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--c-surface);border-radius:20px;max-width:600px;width:100%;box-shadow:0 20px 60px #0000004d;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:2px solid var(--c-border);background:var(--c-bg);border-radius:20px 20px 0 0}.modal-header h3{font-size:22px;font-weight:700;color:var(--c-text);margin:0}.modal-close{background:none;border:none;font-size:32px;color:var(--c-muted);cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;transition:background .15s,color .15s,transform .1s;line-height:1}.modal-close:hover{background:var(--c-border);color:var(--c-text)}.modal-close:active{transform:scale(.9)}#user-form,.modal-form{padding:28px;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:var(--space-sm)}.form-group label{font-size:13px;font-weight:600;color:var(--c-bg);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:4px}.form-group input,.form-group select{height:var(--touch-medium);padding:0 var(--space-md);border:2px solid var(--c-border);border-radius:var(--radius);font-size:16px;font-family:inherit;color:var(--c-text);background:var(--c-surface);transition:border-color .15s,box-shadow .15s;width:100%}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-ring)}.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-md) center;padding-right:48px}.form-group input::placeholder{color:var(--c-muted);opacity:.5}#password-optional{font-size:11px;font-weight:400;text-transform:none;color:var(--c-muted);opacity:.7}.form-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;padding-top:20px;border-top:1px solid var(--c-border)}.form-actions button{height:var(--touch-medium);border-radius:var(--radius);font-size:16px;font-weight:700;cursor:pointer;letter-spacing:.02em;transition:all .15s}.form-actions .btn-primary{box-shadow:0 4px 12px var(--c-primary-shadow)}.form-actions .btn-primary:hover{transform:translateY(-1px)}.form-actions .btn-secondary{border-width:2px}#error-message{color:var(--c-white);background:var(--c-danger);font-size:14px;text-align:center;padding:14px var(--space-md);border-radius:10px;font-weight:500;opacity:0;visibility:hidden;height:0;overflow:hidden;transition:opacity .2s ease,visibility .2s ease}#error-message.show{opacity:1;visibility:visible;height:auto;margin-top:var(--space-md)}.toast-notification{position:fixed;bottom:var(--space-lg);right:var(--space-lg);min-width:320px;max-width:520px;padding:var(--space-md) var(--space-lg);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:15px;font-weight:600;z-index:9999;opacity:0;transform:translateY(20px);transition:all .3s ease;display:flex;align-items:center;gap:var(--space-md)}.toast-show{opacity:1;transform:translateY(0)}.toast-success{background:var(--c-success);color:var(--c-white)}.toast-error{background:var(--c-danger);color:var(--c-white)}.toast-info{background:var(--c-info);color:var(--c-white)}.toast-warning{background:var(--c-warning);color:var(--c-white)}@media(max-width:768px){.badge-management-body{padding:var(--space-md);gap:var(--space-lg)}.badge-section{padding:var(--space-md)}.badge-section-header{flex-direction:column;align-items:flex-start}.badge-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:12px}.badge-card{min-height:95px;padding:14px 10px}.badge-number{font-size:30px}.badge-legend{flex-direction:column;gap:var(--space-md)}.admin-main{padding:var(--space-md)}.section-header{flex-direction:column;align-items:stretch}.section-header button{width:100%}.user-list{padding:var(--space-md)}.user-table{font-size:13px}.user-table th,.user-table td{padding:12px}.modal{padding:var(--space-md);align-items:flex-start;padding-top:60px}.modal-content{max-height:85vh}#user-form,.modal-form{padding:20px;gap:var(--space-md)}.form-actions{grid-template-columns:1fr}.form-actions button{height:52px}.history-controls{flex-direction:column;align-items:stretch}.search-input{width:100%}.role-section--admin{padding:20px var(--space-md)}.role-grid--large .role-card{flex:1 1 260px;min-height:140px}.role-grid--medium .role-card{flex:1 1 220px}.role-grid--compact{gap:12px}.role-grid--compact .role-card{flex:1 1 145px;max-width:180px;min-height:100px;font-size:13px}.role-grid--compact .role-icon{font-size:28px}}@media(max-width:480px){:root{--font-base: 16px}.form-grid{grid-template-columns:1fr}.field--full{grid-column:1}.form-header h1,.admin-header h1,.form-title{font-size:17px}.modal-header{padding:20px}.modal-header h3{font-size:19px}#user-form,.modal-form{padding:var(--space-md)}.form-group input,.form-group select{height:52px;font-size:15px}.form-actions button{height:50px;font-size:15px}.user-list{overflow-x:auto;-webkit-overflow-scrolling:touch}.user-table{min-width:700px}.badge-section-title{font-size:19px}.badge-type-icon{width:40px;height:40px;font-size:20px}.badge-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr))}.badge-number{font-size:26px}.badge-status{font-size:10px}.success-card{padding:var(--space-xl) var(--space-lg)}.toast-notification{left:var(--space-md);right:var(--space-md);bottom:var(--space-md);min-width:auto}.role-section--admin{padding:var(--space-md) 12px}.role-grid--large .role-card{flex:1 1 100%;max-width:100%;min-height:130px;font-size:18px}.role-grid--large .role-icon{font-size:44px}.role-grid--medium .role-card{flex:1 1 100%;max-width:100%;min-height:120px;font-size:16px}.role-grid--medium .role-icon{font-size:36px}.role-grid--compact .role-card{flex:1 1 calc(50% - 5px);max-width:calc(50% - 5px);min-height:95px;font-size:12px}.role-grid--compact .role-icon{font-size:24px}.admin-badge{font-size:12px;padding:6px var(--space-md)}.home-welcome{font-size:20px}}:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:var(--radius)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.badge-card:hover,.role-card:hover{transform:none}.admin-badge,.modal,.modal-content{animation:none}}@media(hover:none)and (pointer:coarse){.role-card:hover,.badge-card:hover,.btn-icon:hover{transform:none}*{-webkit-tap-highlight-color:var(--c-primary-ring)}.role-card,.badge-card{-webkit-user-select:none;user-select:none}}@media(prefers-contrast:high){.form-group input,.form-group select,.field-input{border-width:3px}.status-badge{border:2px solid currentColor}.role-card{border-width:3px}}@media print{.header,.form-header,.admin-header,.btn-primary,.btn-secondary,.btn-ghost,.back-btn,.section-header button,.btn-icon,.modal{display:none!important}.form-screen,.admin-screen{background:var(--c-white)}.badge-card,.admin-section{box-shadow:none;border:1px solid var(--c-border)}.user-table,.user-table th,.user-table td{border:1px solid var(--c-border)}}