:root{--brand: #0f4c81;--brand-dark: #0a3a63;--brand-light: #e8f1f8;--bg: #f4f6f9;--surface: #ffffff;--text: #1a2332;--text-muted: #64748b;--border: #e2e8f0;--success: #15803d;--success-bg: #dcfce7;--warning: #b45309;--warning-bg: #fef3c7;--danger: #b91c1c;--danger-bg: #fee2e2;--info-bg: #dbeafe;--radius: 10px;--shadow: 0 1px 3px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .06);--nav-height: 60px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}h1{font-size:1.4rem;margin:0 0 .75rem}h2{font-size:1.15rem;margin:1.25rem 0 .5rem}h3{font-size:1rem;margin:.75rem 0 .4rem}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}.app{display:flex;min-height:100vh}.sidebar{width:230px;flex-shrink:0;background:var(--brand-dark);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.sidebar .logo{padding:1.1rem 1.2rem;font-weight:700;font-size:1.05rem;letter-spacing:.02em;border-bottom:1px solid rgb(255 255 255 / .12)}.sidebar .logo small{display:block;font-weight:400;font-size:.72rem;opacity:.7}.sidebar nav{flex:1;overflow-y:auto;padding:.5rem 0}.sidebar nav a{display:flex;align-items:center;gap:.6rem;padding:.6rem 1.2rem;color:#ffffffd1;font-size:.92rem}.sidebar nav a:hover{background:#ffffff14;text-decoration:none}.sidebar nav a.active{background:#ffffff24;color:#fff;font-weight:600;border-right:3px solid #7fb3dd}.sidebar .user-box{padding:.9rem 1.2rem;border-top:1px solid rgb(255 255 255 / .12);font-size:.82rem}.sidebar .user-box .name{font-weight:600}.sidebar .user-box .roles{opacity:.7;font-size:.74rem}.sidebar .user-box button{margin-top:.5rem}.main{flex:1;min-width:0;padding:1.25rem 1.5rem 3rem;max-width:1200px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.bottom-nav{display:none}@media (max-width: 860px){.sidebar{display:none}.main{padding:.9rem .9rem calc(var(--nav-height) + 2rem)}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--nav-height);background:var(--surface);border-top:1px solid var(--border);z-index:50;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.65rem;color:var(--text-muted)}.bottom-nav a.active{color:var(--brand);font-weight:600}.bottom-nav a:hover{text-decoration:none}.bottom-nav .icon{font-size:1.25rem;line-height:1}}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}.card+.card{margin-top:.9rem}.grid{display:grid;gap:.9rem}.grid.cols-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.7rem;margin-bottom:1rem}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem;text-align:center}.stat .num{font-size:1.5rem;font-weight:700;color:var(--brand)}.stat.danger .num{color:var(--danger)}.stat.warning .num{color:var(--warning)}.stat .label{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-size:.88rem}th{text-align:left;padding:.5rem .6rem;color:var(--text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--border);white-space:nowrap}td{padding:.55rem .6rem;border-bottom:1px solid var(--border);vertical-align:top}tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--brand-light)}tr.overdue{background:var(--danger-bg)}tr.due-soon{background:var(--warning-bg)}label.field{display:block;margin-bottom:.75rem;font-size:.85rem;font-weight:600}label.field>span{display:block;margin-bottom:.25rem}input,select,textarea{width:100%;padding:.6rem .7rem;min-height:44px;border:1px solid var(--border);border-radius:8px;font-size:.95rem;font-family:inherit;background:var(--surface);color:var(--text)}input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}textarea{min-height:70px;resize:vertical}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem .9rem}.checkbox-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.checkbox-row input{width:auto;min-height:auto;width:20px;height:20px}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.55rem 1.1rem;border:none;border-radius:8px;background:var(--brand);color:#fff;font-size:.92rem;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none}button:hover,.btn:hover{background:var(--brand-dark);text-decoration:none}button:disabled{opacity:.45;cursor:not-allowed}button.secondary,.btn.secondary{background:var(--surface);color:var(--brand);border:1px solid var(--brand)}button.secondary:hover{background:var(--brand-light)}button.danger{background:var(--danger)}button.success{background:var(--success)}button.ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}button.small{min-height:34px;padding:.3rem .7rem;font-size:.8rem}.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}.badge.gray{background:#e2e8f0;color:#475569}.badge.green{background:var(--success-bg);color:var(--success)}.badge.yellow{background:var(--warning-bg);color:var(--warning)}.badge.red{background:var(--danger-bg);color:var(--danger)}.badge.blue{background:var(--info-bg);color:var(--brand)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a73;z-index:100;display:flex;align-items:flex-end;justify-content:center}.modal{background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;width:100%;max-width:640px;max-height:92vh;overflow-y:auto;padding:1.2rem}@media (min-width: 861px){.modal-backdrop{align-items:center}.modal{border-radius:var(--radius)}}.modal h2{margin-top:0}.signature-pad{border:2px dashed var(--border);border-radius:var(--radius);background:#fff;touch-action:none;width:100%;height:180px;display:block}.signature-pad.signed{border-style:solid;border-color:var(--success)}.qr-video{width:100%;max-height:300px;border-radius:var(--radius);background:#000;object-fit:cover}.notif-bell{position:relative}.notif-dot{position:absolute;top:4px;right:4px;min-width:17px;height:17px;border-radius:999px;background:var(--danger);color:#fff;font-size:.65rem;display:flex;align-items:center;justify-content:center;padding:0 4px}.notif-panel{position:absolute;right:0;top:110%;width:min(380px,90vw);max-height:60vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 30px #0f172a2e;z-index:60}.notif-item{padding:.7rem .9rem;border-bottom:1px solid var(--border);font-size:.85rem}.notif-item.unread{background:var(--brand-light)}.notif-item .time{font-size:.7rem;color:var(--text-muted)}.muted{color:var(--text-muted);font-size:.85rem}.error-box{background:var(--danger-bg);color:var(--danger);border-radius:8px;padding:.7rem .9rem;margin:.6rem 0;font-size:.88rem}.success-box{background:var(--success-bg);color:var(--success);border-radius:8px;padding:.7rem .9rem;margin:.6rem 0;font-size:.88rem}.info-box{background:var(--info-bg);color:var(--brand-dark);border-radius:8px;padding:.7rem .9rem;margin:.6rem 0;font-size:.88rem}.empty{text-align:center;color:var(--text-muted);padding:2rem 1rem}.spacer{flex:1}.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;align-items:center}.filters input,.filters select{width:auto;min-width:140px;flex:1;max-width:260px}.photo-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.photo-grid img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}@keyframes blink-red{0%,to{opacity:1}50%{opacity:.35}}.blink-red{animation:blink-red 1.1s ease-in-out infinite}@keyframes pulse-bg-red{0%,to{background:var(--danger-bg)}50%{background:#fca5a5}}tr.overdue-blink{animation:pulse-bg-red 1.4s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.blink-red,tr.overdue-blink{animation:none}tr.overdue-blink{background:var(--danger-bg)}}.cal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;min-width:720px}.cal-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);padding:.3rem .4rem;text-align:center}.cal-day{background:var(--surface);border:1px solid var(--border);border-radius:6px;min-height:84px;padding:.25rem .3rem;font-size:.72rem}.cal-day.other-month{opacity:.4}.cal-day.today{outline:2px solid var(--brand);outline-offset:-2px}.cal-day .num{font-weight:700;color:var(--text-muted);font-size:.7rem}.cal-chip{display:block;margin-top:2px;padding:1px 5px;border-radius:4px;font-size:.68rem;font-weight:600;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cal-chip.reserved{background:#94a3b8}.cal-chip.issued{background:var(--brand)}.cal-chip.overdue{background:var(--danger)}.cal-chip.partial{background:var(--warning)}.cal-chip.returned{background:var(--success);opacity:.75}.cal-more{font-size:.66rem;color:var(--text-muted);margin-top:2px}.cal-legend{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.5rem;font-size:.72rem;color:var(--text-muted);align-items:center}.cal-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--brand-dark),var(--brand) 60%,#2b6ca3);padding:1rem}.login-card{background:var(--surface);border-radius:14px;padding:2rem;width:100%;max-width:400px;box-shadow:0 20px 60px #00000040}.login-card h1{font-size:1.25rem}.login-card .brand{color:var(--brand);font-weight:800;letter-spacing:.03em;font-size:.8rem;text-transform:uppercase}