:root{--primary:#4f46e5;--primary-light:#eef2ff;--primary-dark:#4338ca;--bg-main:#f8fafc;--surface:#fff;--text-title:#0f172a;--text-body:#334155;--text-sub:#64748b;--border-color:#e2e8f0;--card-shadow:0 10px 25px -5px #0f172a0d, 0 8px 10px -6px #0f172a0d;--success:#10b981;--warning:#f59e0b;--radius:18px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{color:var(--text-body);background-color:#e2e8f0;justify-content:center;min-height:100vh;display:flex}.mobile-frame{background-color:var(--bg-main);flex-direction:column;width:100%;max-width:440px;min-height:100vh;display:flex;position:relative;box-shadow:0 0 30px #00000014}.app-bar{z-index:20;border-bottom:1px solid var(--border-color);background:#fff;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.app-brand{align-items:center;gap:12px;display:flex}.app-logo{background:var(--primary);color:#fff;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.brand-title{color:var(--text-title);font-size:16px;font-weight:800}.brand-desc{color:var(--text-sub);font-size:11px}.status-tag{border-radius:30px;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:700;display:flex}.status-tag.online{color:#059669;background:#ecfdf5;border:1px solid #a7f3d0}.status-tag.offline{color:#dc2626;background:#fef2f2;border:1px solid #fecaca}.dot{background-color:currentColor;border-radius:50%;width:7px;height:7px}.toast{color:#f8fafc;text-align:center;background:#1e293b;border-radius:12px;margin:12px 18px 0;padding:12px 16px;font-size:13px;font-weight:500}.hidden{display:none!important}.content-area{flex-direction:column;gap:20px;padding:18px;display:flex}.card-box{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border-color);box-shadow:var(--card-shadow);padding:20px}.card-heading{color:var(--text-title);align-items:center;gap:8px;margin-bottom:16px;font-size:16px;font-weight:800;display:flex}.field-row{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;display:grid}.field-block{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}label{color:var(--text-sub);text-transform:uppercase;letter-spacing:.5px;font-size:11.5px;font-weight:700}input,select,textarea{border:1.5px solid var(--border-color);width:100%;color:var(--text-title);background:#f8fafc;border-radius:12px;outline:none;padding:12px 14px;font-size:14px}input:focus,select:focus,textarea:focus{border-color:var(--primary);background:#fff}.btn-main{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:14px;width:100%;margin-top:6px;padding:14px;font-size:14px;font-weight:700}.btn-main:active{background:var(--primary-dark)}.records-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.records-header h3{color:var(--text-title);font-size:15px;font-weight:800}.btn-refresh{color:var(--primary);cursor:pointer;background:0 0;border:none;font-size:12px;font-weight:700}.records-stack{flex-direction:column;gap:10px;display:flex}.record-card{background:var(--surface);border:1px solid var(--border-color);border-radius:14px;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.record-primary{color:var(--text-title);font-size:14px;font-weight:700}.record-secondary{color:var(--text-sub);margin-top:2px;font-size:12px}.badge{border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700}.badge.synced{color:#059669;background:#ecfdf5}.badge.pending{color:#b45309;background:#fef3c7}