:root{
  --blue:#1F7BF4; --dark:#0B2A4A; --grey:#5A6472; --line:#e2e8f0;
  --bg:#f4f7fb; --ok:#1a9d54; --warn:#d98b0b; --bad:#d64545; --card:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Segoe UI,Calibri,system-ui,sans-serif;color:#1f2733;background:var(--bg)}
a{color:var(--blue);text-decoration:none}
.brand{font-size:22px;font-weight:800;color:var(--blue)}
.brand span{color:var(--dark)}

/* Assets MFB logo */
.brand-logo{display:block;width:200px;height:auto;margin:0 0 6px}
.login-card .brand-logo{margin:0 auto 10px}
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.topbar-logo{width:170px;margin:0}
.brand-divider{width:1px;height:26px;background:var(--line);flex:none}
.brand-app{font-size:15px;font-weight:600;color:var(--dark);white-space:nowrap}
@media (max-width:640px){
  .brand-divider,.brand-app{display:none}
  .topbar-logo{width:140px}
}
.btn{border:1px solid var(--line);background:#fff;color:#1f2733;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
.btn:hover{border-color:var(--blue)}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-primary:hover{background:#1668d6}
.btn-block{display:block;width:100%;text-align:center;margin-top:12px}
.err{color:var(--bad);margin-top:10px;font-size:14px}
.hint{color:var(--grey);font-size:12px;margin-top:10px}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px;width:360px;box-shadow:0 8px 30px rgba(11,42,74,.08)}
.subtitle{color:var(--grey);margin:4px 0 22px}
.divider{color:var(--grey);font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-align:center;margin:20px 0 10px}
.dev-login select{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px}

/* app shell */
header.topbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
.topbar .who{color:var(--grey);font-size:14px}
.topbar .who b{color:var(--dark)}
nav.tabs{display:flex;gap:4px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line)}
nav.tabs button{background:none;border:none;padding:14px 16px;font-size:14px;font-weight:600;color:var(--grey);cursor:pointer;border-bottom:3px solid transparent}
nav.tabs button.active{color:var(--blue);border-bottom-color:var(--blue)}
main{max-width:1080px;margin:24px auto;padding:0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.card h3{margin:0 0 14px;color:var(--dark)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.stat .n{font-size:26px;font-weight:800;color:var(--dark)}
.stat .l{color:var(--grey);font-size:13px;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--grey);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700}
.pill.answered{background:#e6f6ec;color:var(--ok)}
.pill.no_answer{background:#eef1f5;color:var(--grey)}
.pill.busy{background:#fdf1dd;color:var(--warn)}
.pill.failed{background:#fbe6e6;color:var(--bad)}
.pill.admin{background:#e7f0fe;color:var(--blue)}
.pill.user{background:#eef1f5;color:var(--grey)}
input[type=date],input[type=email],input[type=file],select{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.muted{color:var(--grey);font-size:13px}
.hidden{display:none}