:root{
  --blue-50:#eef5ff;
  --blue-100:#dcebff;
  --blue-500:#2f6fed;
  --blue-600:#1f56cc;
  --blue-700:#173f99;
  --ink:#1a2540;
  --muted:#6b7686;
  --card-bg:#ffffff;
  --border:#e3e9f4;
  --red-bg:#fdecea;
  --red-border:#f5c6c1;
  --red-text:#c0392b;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,var(--blue-50) 0%,#ffffff 55%,var(--blue-100) 100%);
  min-height:100vh;
  color:var(--ink);
}
.logo{
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:20px;letter-spacing:1px;
  box-shadow:0 8px 20px rgba(47,111,237,.28);
  flex-shrink:0;
}
.logo.small{width:40px;height:40px;font-size:13px;border-radius:11px;}

.center-view{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.card{
  background:var(--card-bg);border:1px solid var(--border);border-radius:20px;
  padding:40px 36px;width:100%;max-width:380px;
  box-shadow:0 20px 60px rgba(31,86,204,.12); text-align:center;
}
.card h1{font-size:19px;margin:18px 0 4px;}
.card p.sub{color:var(--muted);font-size:13.5px;margin:0 0 28px;}
.field{text-align:left;margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em;}
.field input{
  width:100%;padding:11px 13px;border-radius:10px;border:1.5px solid var(--border);
  font-size:14.5px;background:#f9fbff;color:var(--ink);outline:none;transition:border-color .15s;
}
.field input:focus{border-color:var(--blue-500);background:#fff;}
.btn-primary{
  width:100%;padding:12px;border:none;border-radius:10px;background:var(--blue-500);
  color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;margin-top:6px;transition:background .15s;
}
.btn-primary:hover{background:var(--blue-600);}
.btn-primary:disabled{background:#9db6ef;cursor:wait;}
.msg{border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:14px;display:none;}
.msg.error{color:var(--red-text);background:var(--red-bg);border:1px solid var(--red-border);display:block;}
.msg.info{color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);display:block;}
.hint-box{
  margin-top:22px;padding:12px 14px;background:var(--blue-50);border:1px dashed var(--blue-500);
  border-radius:10px;font-size:12.5px;color:var(--blue-700);text-align:left;line-height:1.6;
}

/* Dashboard */
header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:#fff;border-bottom:1px solid var(--border);}
header .left{display:flex;align-items:center;gap:12px;}
header .left .titles{line-height:1.25;}
header .left .titles .company{font-weight:700;font-size:15px;}
header .left .titles .sub{font-size:12px;color:var(--muted);}
.logout-btn{border:1.5px solid var(--border);background:#fff;color:var(--ink);padding:8px 16px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;}
.logout-btn:hover{border-color:var(--blue-500);color:var(--blue-600);}
main{padding:40px 32px;max-width:1040px;margin:0 auto;}
main h2{font-size:20px;margin-bottom:4px;}
main p.lead{color:var(--muted);font-size:14px;margin:0 0 14px;}
.section-title{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:30px 0 14px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;}
.tile{
  background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:22px 14px 18px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,86,204,.15);border-color:var(--blue-500);}
.tile .icon-box{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;}
.tile .icon-box svg{width:28px;height:28px;}
.tile span.label{font-size:13.5px;font-weight:600;text-align:center;}
.tile span.hint{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.4;margin-top:-4px;}
.empty-state{color:var(--muted);font-size:14px;padding:30px 0;text-align:center;}