@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;background:#ffffff;color:#222}
.bg{min-height:100vh;display:flex;align-items:center;justify-content:center}
.auth-card{background:#fff;border-radius:14px;padding:28px;max-width:380px;width:90%;box-shadow:0 10px 18px rgba(0,0,0,.2)}
.auth-card h1{margin:0 0 16px;color:#8b0000}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:10px;margin:8px 0;background:#fff}
.btn{background:#b0171d;color:#fff;border:none;border-radius:18px;padding:10px 16px;cursor:pointer}
.btn:hover{background:#8b0000}
.btn.small{padding:6px 10px;border-radius:14px;font-size:12px}
.btn.secondary{background:#ddd;color:#333}
.btn.danger{background:#8b0000}
.muted{font-size:12px;color:#666;margin-top:8px}
.topbar{position:sticky;top:0;background:#5a0f0f;color:#fff;display:flex;align-items:center;padding:12px 16px}
.title{font-weight:600}
.spacer{flex:1}
.burger{background:transparent;color:#fff;border:1px solid #fff;border-radius:8px;padding:6px 8px;margin-right:8px}
.topnav a{color:#fff;text-decoration:none;margin-left:12px;padding:6px 8px;border-radius:8px}
.topnav a:hover{background:#5a0f0f}
.sidenav{position:fixed;left:-240px;top:56px;width:240px;background:#4a0c0c;height:100%;padding:12px;transition:left .2s;z-index:1000;border-top-right-radius:12px}
.sidenav.open{left:0}
.sidenav a{display:block;color:#fff;text-decoration:none;padding:10px 12px;border-radius:10px}
.sidenav a:hover{background:#5a0f0f}
.content{padding:16px}
.section{max-width:1000px;margin:0 auto}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#8b0000;font-weight:600}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.card{background:#fff;border-radius:14px;padding:12px;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.card-title{font-weight:600;margin-bottom:6px}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.badge{padding:4px 8px;border-radius:12px;background:#eee;color:#333;font-size:12px}
.badge.pending{background:#ffe3e3;color:#8b0000}
.badge.completed{background:#e3ffe6;color:#187b1d}
.actions{display:flex;gap:8px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-body{background:#fff;border-radius:14px;padding:16px;min-width:320px;max-width:520px}
#installBtn{margin-top:10px;display:none}
.input-group{position:relative}
.eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;font-size:16px;cursor:pointer}
.sidenav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none;z-index:999}
.sidenav-overlay.show{display:block}