/* Simple modern admin CSS using flexible layout; tweak as needed */
:root{--bg:#f5f7fb;--card:#ffffff;--accent:#3466ff;--muted:#6b7280}
*{box-sizing:border-box}

body{font-family: 'Roboto', 'IBM Plex Sans', sans-serif;background:var(--bg);margin:0;color:#111}

.container{max-width:1300px;margin:28px auto;padding:20px}
.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card{background:var(--card);border-radius:12px;box-shadow:0 6px 18px rgba(12,20,40,0.06);padding:18px}
.kpi-grid{display:flex;gap:14px}
.kpi{flex:1;padding:18px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);}
.kpi h3{margin:0;font-size:22px}
.kpi p{margin:6px 0 0;color:var(--muted)}
.form-row{display:flex;gap:12px;margin-bottom:12px}
.input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ef;font-family: 'Roboto', 'IBM Plex Sans', sans-serif;}
.btn{display:inline-block;padding:15px 18px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;border:none;cursor:pointer;font-family: 'Roboto', 'IBM Plex Sans', sans-serif;}
.btn1{width: 300px;display:inline-block;padding:15px 18px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;border:none;cursor:pointer;font-family: 'Roboto', 'IBM Plex Sans', sans-serif;}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(52,102,255,0.12)}
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{padding:10px;border-bottom:1px solid #eef2f6;text-align:left}
.search-box{display:flex;gap:8px;align-items:center}
.small{font-size:13px;color:var(--muted)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,12,20,0.4)}
.modal.open{display:flex}
.modal .card{max-width:720px;width:100%}
.footer{margin-top:24px;color:var(--muted);font-size:13px}
.input{font-family: 'Roboto', 'IBM Plex Sans', sans-serif;};

/* Responsive */
@media (max-width:800px){.kpi-grid{flex-direction:column}}