:root{
  --primary:#0E7490;
  --primary-dark:#0B5A70;
  --primary-light:#E0F2FE;
  --accent:#F59E0B;
  --bg:#F1F5F9;
  --card:#FFFFFF;
  --text:#1E293B;
  --muted:#64748B;
  --border:#E2E8F0;
  --danger:#DC2626;
  --success:#16A34A;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:14px;
}
.navbar{
  background:var(--primary); color:#fff; display:flex; align-items:center;
  justify-content:space-between; padding:10px 20px; height:56px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px;}
.brand .logo{
  width:32px; height:32px; border-radius:50%; background:#fff; color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.navbar .user{display:flex; align-items:center; gap:10px; font-size:13px;}
.navbar .avatar{width:28px; height:28px; border-radius:50%; background:var(--primary-dark); display:flex; align-items:center; justify-content:center; font-size:12px;}

.layout{display:flex; min-height:calc(100vh - 56px);}
.sidebar{
  width:220px; background:#fff; border-right:1px solid var(--border); padding:16px 0; flex-shrink:0;
}
.sidebar a{
  display:flex; align-items:center; gap:10px; padding:10px 20px; color:var(--text);
  text-decoration:none; font-size:13.5px; border-left:3px solid transparent;
}
.sidebar a .ico{width:18px; text-align:center; color:var(--muted); font-size:14px;}
.sidebar a.active{background:var(--primary-light); color:var(--primary-dark); font-weight:600; border-left-color:var(--primary);}
.sidebar a.active .ico{color:var(--primary);}

.content{flex:1; padding:24px 28px;}
.page-title{font-size:20px; font-weight:700; margin:0 0 4px 0;}
.page-sub{color:var(--muted); font-size:13px; margin:0 0 20px 0;}

.card{background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 1px 3px rgba(0,0,0,0.04);}
.card-header{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border);}
.card-header h2{font-size:15px; margin:0; font-weight:600;}
.card-body{padding:18px;}

.btn{
  display:inline-flex; align-items:center; gap:6px; border:none; border-radius:7px;
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-accent{background:var(--accent); color:#fff;}
.btn-outline{background:#fff; border:1px solid var(--border); color:var(--text);}
.btn-sm{padding:5px 10px; font-size:12px; border-radius:6px;}
.btn-danger-outline{background:#fff; border:1px solid #FCA5A5; color:var(--danger);}

table{width:100%; border-collapse:collapse;}
th{
  text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--muted); border-bottom:1px solid var(--border); padding:8px 10px; background:#FAFBFC;
}
td{padding:10px; border-bottom:1px solid var(--border); font-size:13px;}
tr:last-child td{border-bottom:none;}
.badge{padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600;}
.badge-success{background:#DCFCE7; color:#15803D;}
.badge-warning{background:#FEF3C7; color:#B45309;}
.badge-muted{background:#F1F5F9; color:var(--muted);}

.form-label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--text);}
.form-control{
  width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:7px;
  font-size:13.5px; margin-bottom:14px; background:#fff; color:var(--text);
}
.form-row{display:flex; gap:14px;}
.form-row .form-control{flex:1;}

.kpi-row{display:flex; gap:16px; margin-bottom:20px;}
.kpi{flex:1; background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px 18px;}
.kpi .label{font-size:12px; color:var(--muted); margin-bottom:6px;}
.kpi .value{font-size:22px; font-weight:700;}
.kpi .value.accent{color:var(--primary);}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.search{padding:8px 12px; border:1px solid var(--border); border-radius:7px; font-size:13px; width:260px; background:#fff;}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--primary) 0%, #0891B2 55%, #22D3EE 100%);}
.login-card{background:#fff; border-radius:14px; width:360px; padding:34px 30px; box-shadow:0 20px 40px rgba(0,0,0,0.2); text-align:center;}
.login-card .logo{width:56px; height:56px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; margin:0 auto 10px;}
.login-card h1{font-size:17px; margin:4px 0 2px;}
.login-card p.sub{color:var(--muted); font-size:12.5px; margin:0 0 20px;}
.login-card .btn-primary{width:100%; justify-content:center; padding:10px;}
.login-card .form-control{text-align:left;}

/* Mobile frame */
.phone{
  width:390px; margin:30px auto; background:#fff; border-radius:30px; border:10px solid #111827;
  overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.25);
}
.phone .topbar{background:var(--primary); color:#fff; padding:14px 16px; font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px;}
.phone .pbody{padding:16px;}
.photo-box{
  border:2px dashed #94A3B8; border-radius:10px; height:140px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; color:var(--muted); font-size:12.5px; margin-bottom:16px; background:#F8FAFC;
}
.photo-box .camera{font-size:26px; margin-bottom:6px;}