:root{--bg:#071426;--panel:#0d2038;--panel2:#132d4d;--text:#f5f8ff;--muted:#9eb2ca;--gold:#ffd34d;--blue:#1e88ff;--danger:#ff4d6d;--green:#20c997}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top left,#173e73,#071426 46%,#030914);color:var(--text)}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;padding:24px;background:rgba(5,14,28,.8);border-right:1px solid rgba(255,255,255,.08);position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:30px}.brand span{display:block;color:var(--muted);font-size:13px}.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold),#ff8f00);color:#071426;font-weight:900;box-shadow:0 12px 30px rgba(255,211,77,.22)}.logo.big{width:74px;height:74px;border-radius:22px;margin:auto;font-size:24px}nav{display:grid;gap:10px}nav a{padding:13px 15px;border-radius:14px;color:var(--muted)}nav a:hover{background:rgba(255,255,255,.08);color:#fff}.main{flex:1;padding:28px}.top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.top h1{margin:0;font-size:34px}.top p{margin:8px 0 0;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.card,.panel,.login-card{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.28);backdrop-filter:blur(18px)}.card{padding:22px}.card span{color:var(--muted);font-size:14px}.card b{display:block;margin-top:10px;font-size:30px}.panel{padding:22px;margin-bottom:20px}.panel h2{margin-top:0}table{width:100%;border-collapse:collapse;overflow:hidden}th,td{text-align:left;padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}th{color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.06em}td{color:#eef5ff}.btn{border:0;border-radius:14px;padding:12px 18px;font-weight:800;cursor:pointer;background:rgba(255,255,255,.12);color:#fff}.btn.primary{background:linear-gradient(135deg,var(--blue),#00b7ff);box-shadow:0 12px 28px rgba(30,136,255,.28)}.btn.danger{background:linear-gradient(135deg,var(--danger),#ff8f6a)}.btn.small{padding:8px 12px;font-size:12px}.grid-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}input,select{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);color:#fff;border-radius:14px;padding:13px 14px}label{display:block;margin:14px 0 7px;color:var(--muted)}.login-page{min-height:100vh;display:grid;place-items:center;width:100%}.login-card{width:min(430px,92vw);padding:34px;text-align:center}.login-card p{color:var(--muted)}.login-card form{text-align:left}.login-card .btn{width:100%;margin-top:18px}.flash-wrap{margin-bottom:16px}.flash{padding:12px 14px;border-radius:14px;margin-bottom:8px;background:rgba(255,255,255,.1)}.flash.success{border-left:4px solid var(--green)}.flash.error{border-left:4px solid var(--danger)}.flash.warning{border-left:4px solid var(--gold)}@media(max-width:900px){.app-shell{display:block}.sidebar{width:auto;height:auto;position:relative}.cards,.grid-form{grid-template-columns:1fr}.top{display:block}.main{padding:18px}table{font-size:13px}.panel{overflow:auto}}

.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 203, 48, 0.8);
  box-shadow: 0 0 18px rgba(255, 203, 48, 0.25);
}

.avatar.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffcb30, #18a8ff);
  color: #061426;
  font-weight: 900;
}

.employee-cell{
  display:flex;
  align-items:center;
  gap:12px;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
}

.status-pill.online{
  background:rgba(38, 255, 139, .14);
  color:#57ff9a;
  border:1px solid rgba(87,255,154,.35);
}

.status-pill.offline{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.15);
}

.admin-live-timer{
  color:#ffcb30;
  font-size:18px;
  letter-spacing:1px;
}

.language-box{
  margin-top:24px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.language-box span{
  font-size:13px;
  opacity:.75;
}

.language-box a{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,203,48,.12);
  color:#ffcb30;
  font-weight:800;
  text-decoration:none;
}

.language-box{
  margin-top:24px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.language-box span{
  font-size:13px;
  opacity:.75;
}

.language-box a{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,203,48,.12);
  color:#ffcb30;
  font-weight:800;
  text-decoration:none;
}