:root{--bg:#eef4f1;--panel:#fff;--ink:#17231f;--muted:#65736d;--line:#dce6e1;--brand:#116a6b;--brand-dark:#0b4f50;--accent:#e5b84b;--green:#16845b;--blue:#2766d8;--red:#c43d3d;--yellow:#b9860b;--shadow:0 18px 55px #17231f1f}*{box-sizing:border-box}html,body{min-height:100%}body{background:var(--bg);color:var(--ink);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}.login-page{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);min-height:100vh;display:grid}.login-visual{color:#fff;background-color:#0000;background-image:linear-gradient(135deg,#116a6bf0,#133b45f5),url(https://images.unsplash.com/photo-1558002038-1055907df827?auto=format&fit=crop&w=1600&q=80);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;flex-direction:column;justify-content:space-between;min-height:100%;padding:52px;display:flex;position:relative;overflow:hidden}.login-visual:after{content:"";border:1px solid #ffffff40;border-radius:8px;width:190px;height:190px;position:absolute;inset:auto 52px 52px auto}.brand-mark{z-index:1;align-items:center;gap:10px;width:fit-content;font-weight:700;display:inline-flex;position:relative}.brand-icon{background:#ffffff29;border-radius:8px;place-items:center;width:38px;height:38px;display:inline-grid}.login-copy{z-index:1;max-width:620px;position:relative}.login-copy h1{letter-spacing:0;max-width:600px;margin:0;font-size:clamp(2.5rem,6vw,5.8rem);line-height:.94}.login-copy p{color:#ffffffc7;max-width:520px;margin:24px 0 0;font-size:1.05rem;line-height:1.7}.login-stats{z-index:1;grid-template-columns:minmax(190px,260px);gap:12px;max-width:560px;display:grid;position:relative}.login-stat{background:#ffffff1c;border:1px solid #fff3;border-radius:8px;padding:16px}.login-stat strong{font-size:1.45rem;display:block}.login-stat span{color:#ffffffb8;font-size:.88rem}.login-panel{place-items:center;min-height:100vh;padding:32px;display:grid}.login-card{border:1px solid var(--line);background:var(--panel);width:min(100%,430px);box-shadow:var(--shadow);border-radius:8px;padding:32px}.login-card h2{margin:0 0 8px;font-size:1.85rem}.login-card p{color:var(--muted);margin:0 0 28px;line-height:1.6}.form-stack{gap:18px;display:grid}.field{gap:8px;display:grid}.field label{color:#2f413b;font-size:.9rem;font-weight:700}.field input,.field select{border:1px solid var(--line);width:100%;color:var(--ink);background:#fbfdfc;border-radius:8px;outline:none;padding:13px 14px}.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 4px #116a6b1f}.primary-button,.secondary-button,.icon-button,.danger-button{border:0;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:44px;font-weight:800;display:inline-flex}.primary-button{background:var(--brand);color:#fff;padding:0 18px}.primary-button:hover{background:var(--brand-dark)}.primary-button:disabled{cursor:not-allowed;opacity:.7}.secondary-button,.icon-button{border:1px solid var(--line);color:var(--ink);background:#fff;padding:0 14px}.secondary-button:disabled{cursor:not-allowed;opacity:.75}.spin-icon{animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.icon-button{width:44px;padding:0}.danger-button{color:var(--red);background:#fff2f0;border:1px solid #f0c8c8;padding:0 14px}.danger-button:disabled{cursor:not-allowed;opacity:.7}.auth-alert{color:#a73535;background:#fff2f0;border-radius:8px;padding:12px 14px;font-size:.92rem;line-height:1.5}.success-alert{color:var(--green);background:#e6f7ef;border-radius:8px;padding:12px 14px;font-size:.92rem;font-weight:700;line-height:1.5}.info-note{color:var(--muted);background:#f4f8f6;border-radius:8px;margin-top:18px;padding:13px 14px;font-size:.9rem;line-height:1.5}.app-shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:#fff;flex-direction:column;gap:28px;height:100vh;padding:24px;display:flex;position:sticky;top:0}.sidebar .brand-mark{color:var(--ink)}.nav-list{gap:8px;display:grid}.nav-item{color:var(--muted);border-radius:8px;align-items:center;gap:10px;padding:12px;font-weight:700;display:flex}.nav-item.active,.nav-item:hover{color:var(--brand);background:#eaf3f0}.sidebar-footer{gap:12px;margin-top:auto;display:grid}.logout-button{width:100%;min-height:44px;color:var(--red);background:#fff2f0;border:1px solid #f0c8c8;border-radius:8px;justify-content:center;align-items:center;gap:9px;font-weight:800;display:inline-flex}.logout-button:hover{background:#ffe7e7}.sidebar-status{background:#f3f7f5;border-radius:8px;padding:14px}.sidebar-status span{color:var(--muted);font-size:.85rem;display:block}.sidebar-status strong{margin-top:5px;display:block}.main-area{min-width:0;padding:28px}.topbar{justify-content:space-between;align-items:center;gap:18px;margin-bottom:28px;display:flex}.topbar h1{margin:0;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.1}.topbar p{color:var(--muted);margin:8px 0 0}.topbar-actions{align-items:center;gap:10px;display:flex}.summary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.summary-card,.locker-card,.activity-panel,.users-card,.profile-card{border:1px solid var(--line);background:#fff;border-radius:8px;box-shadow:0 12px 32px #17231f0f}.profile-card{grid-template-columns:auto minmax(0,1fr) minmax(260px,auto);align-items:center;gap:18px;margin-bottom:18px;padding:20px;display:grid}.profile-avatar{width:76px;height:76px;color:var(--brand);background:#eaf3f0;border-radius:8px;place-items:center;display:grid}.profile-main span{color:var(--brand);font-size:.86rem;font-weight:800}.profile-main h2{margin:6px 0;font-size:1.35rem}.profile-main p{color:var(--muted);margin:0;line-height:1.5}.profile-details{gap:10px;display:grid}.profile-details div{color:#334640;align-items:center;gap:9px;font-weight:700;display:flex}.summary-card{padding:18px}.summary-card span{color:var(--muted);font-size:.9rem;font-weight:700}.summary-card strong{margin-top:10px;font-size:2rem;display:block}.dashboard-grid{grid-template-columns:minmax(0,1fr) 340px;gap:18px;margin-top:18px;display:grid}.locker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.locker-card{gap:18px;min-height:232px;padding:20px;display:grid}.locker-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.locker-head h2{margin:0;font-size:1.35rem}.locker-head p,.locker-meta p{color:var(--muted);margin:5px 0 0}.locker-icon{width:48px;height:48px;color:var(--brand);background:#eef6f3;border-radius:8px;place-items:center;display:grid}.status-badge{border-radius:999px;align-items:center;gap:7px;width:fit-content;padding:7px 10px;font-size:.82rem;font-weight:800;display:inline-flex}.status-badge.available{color:var(--green);background:#e6f7ef}.status-badge.occupied{color:var(--yellow);background:#fff5d8}.locker-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.command-panel{gap:8px;display:grid}.command-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.command-message,.command-error{border-radius:8px;padding:9px 10px;font-size:.86rem;font-weight:700;line-height:1.4}.command-message{color:var(--green);background:#e6f7ef}.command-error{color:var(--red);background:#fff2f0}.rfid-panel{gap:14px;margin-top:18px;display:grid}.rfid-card-preview{border:1px solid var(--line);background:#fbfdfc;border-radius:8px;grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px;display:grid}.rfid-icon{width:48px;height:48px;color:var(--brand);background:#eaf3f0;border-radius:8px;place-items:center;display:grid}.rfid-card-preview span{color:var(--muted);font-size:.86rem;font-weight:800}.rfid-card-preview strong{margin-top:4px;font-size:1.25rem;display:block}.rfid-card-preview p{margin:5px 0 0}.rfid-actions{flex-wrap:wrap;gap:10px;display:flex}.activity-panel{padding:20px}.panel-title{justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;display:flex}.panel-title h2{margin:0;font-size:1.1rem}.activity-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.activity-list li{border-bottom:1px solid var(--line);grid-template-columns:12px 1fr;gap:10px;padding-bottom:12px;display:grid}.activity-dot{background:var(--brand);border-radius:999px;width:9px;height:9px;margin-top:6px}.activity-list strong{display:block}.activity-list span{color:var(--muted);margin-top:4px;font-size:.9rem;display:block}.users-page{max-width:980px}.profile-page{max-width:1120px}.profile-hero{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:22px;padding:24px;display:grid;box-shadow:0 12px 32px #17231f0f}.profile-hero-avatar{width:108px;height:108px;color:var(--brand);background:#eaf3f0;border-radius:8px;place-items:center;display:grid}.profile-hero span{color:var(--brand);font-size:.9rem;font-weight:800}.profile-hero h2{margin:8px 0;font-size:clamp(1.7rem,3vw,2.4rem)}.profile-hero p{max-width:720px;color:var(--muted);margin:0;line-height:1.6}.profile-info-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px;display:grid}.profile-info-card{border:1px solid var(--line);background:#fff;border-radius:8px;gap:10px;padding:18px;display:grid;box-shadow:0 12px 32px #17231f0f}.profile-info-card svg{color:var(--brand)}.profile-info-card span{color:var(--muted);font-size:.88rem;font-weight:800}.profile-info-card strong{font-size:1.1rem}.profile-access-card{margin-top:18px}.access-list{gap:12px;margin-top:16px;display:grid}.access-list div{border:1px solid var(--line);color:#334640;background:#fbfdfc;border-radius:8px;align-items:center;gap:10px;padding:14px;font-weight:700;display:flex}.access-list svg{color:var(--brand);flex:none}.users-card{padding:22px}.users-list-card{margin-top:18px}.users-card h2{margin:0 0 8px}.users-card p{color:var(--muted);line-height:1.6}.user-form{margin-top:22px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.form-hint{color:var(--muted);margin:0;font-size:.92rem;line-height:1.5}.registered-users{gap:14px;margin-top:20px;display:grid}.table-wrap{overflow-x:auto}.users-table{border-collapse:collapse;width:100%;min-width:680px}.users-table th,.users-table td{border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;padding:14px 12px}.users-table th{color:var(--muted);font-size:.86rem}.users-table td{color:var(--ink)}.empty-state{border:1px dashed var(--line);color:var(--muted);border-radius:8px;margin:0;padding:18px}.detail-page{max-width:1120px}.back-link{color:var(--brand);align-items:center;gap:8px;margin-bottom:14px;font-weight:800;display:inline-flex}.detail-card{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px;padding:22px;display:grid;box-shadow:0 12px 32px #17231f0f}.detail-icon{width:86px;height:86px;color:var(--brand);background:#eaf3f0;border-radius:8px;place-items:center;display:grid}.detail-main span{color:var(--muted);font-weight:800}.detail-main h2{margin:7px 0 12px;font-size:1.8rem}.detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;display:grid}.detail-info{border:1px solid var(--line);background:#fff;border-radius:8px;gap:10px;padding:18px;display:grid;box-shadow:0 12px 32px #17231f0f}.detail-info svg{color:var(--brand)}.detail-info span{color:var(--muted);font-size:.88rem;font-weight:800}.detail-info strong{font-size:1.15rem}.detail-info p{color:var(--muted);margin:0;line-height:1.5}.detail-control-card{margin-top:18px}@media (max-width:1040px){.login-page,.app-shell,.dashboard-grid{grid-template-columns:1fr}.login-visual{min-height:460px}.sidebar{height:auto;position:static}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-card{grid-template-columns:auto minmax(0,1fr)}.profile-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid{grid-template-columns:1fr}.profile-details{grid-column:1/-1}}@media (max-width:700px){.login-visual,.login-panel,.main-area,.sidebar{padding:22px}.login-stats,.summary-grid,.locker-grid,.form-grid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.topbar-actions{width:100%}.topbar-actions .secondary-button{flex:1}.profile-card,.profile-hero,.profile-info-grid,.detail-card{grid-template-columns:1fr}.profile-avatar{width:64px;height:64px}}
