*{box-sizing:border-box}body{margin:0;background:#f3f4f6;color:#111827;font-family:Arial,sans-serif}.container{max-width:900px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}h1{margin:0;font-size:28px}h2{margin-top:0;font-size:19px}.label{display:block;color:#6b7280;font-size:13px;margin-bottom:7px}.badge{padding:7px 12px;border-radius:999px;background:#e5e7eb;font-size:13px}.online{background:#dcfce7;color:#166534}.offline{background:#fee2e2;color:#991b1b}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.card{background:white;border-radius:14px;padding:18px;box-shadow:0 2px 10px #0000000d;margin-bottom:12px}.card strong{font-size:20px}.action-card{text-align:center}.unlock,.save,.small{border:0;border-radius:10px;padding:12px 18px;cursor:pointer;font-weight:700}.unlock{background:#111827;color:white;font-size:16px;width:100%;max-width:400px}.save{background:#2563eb;color:white;margin-top:15px}.small{background:#e5e7eb;padding:8px 12px}.action-card p,.card p{min-height:18px;color:#6b7280}label{display:block;padding:9px 0}input{margin-right:8px}.section-head{display:flex;justify-content:space-between;align-items:center}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;font-size:14px}@media(max-width:650px){.container{padding:12px}.grid{grid-template-columns:repeat(2,1fr)}h1{font-size:23px}.card{padding:15px}}