*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Arial,sans-serif;color:#182033}
.login-body{min-height:100vh;background:linear-gradient(135deg,#071b4d,#003b8f,#00a6d6);display:flex;align-items:center;justify-content:center;overflow:hidden}
.login-bg{position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(0,213,255,.35),transparent 35%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.18),transparent 35%)}
.login-wrapper{position:relative;width:100%;padding:24px;display:flex;justify-content:center}
.login-card{width:100%;max-width:430px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);border-radius:28px;padding:38px;box-shadow:0 30px 80px rgba(0,0,0,.28);animation:fadeUp .7s ease}
.brand{text-align:center;margin-bottom:26px}
.brand img{width:190px;max-width:80%;margin-bottom:18px}
.brand h1{font-size:27px;color:#151b5f;margin-bottom:8px}
.brand p{color:#667085;font-size:14px}
.login-form{display:flex;flex-direction:column;gap:11px}
.login-form label{font-weight:600;font-size:14px;color:#253858}
.login-form input{height:48px;border:1px solid #d8deea;border-radius:14px;padding:0 15px;font-size:15px;outline:none;background:white}
.login-form input:focus{border-color:#009ee3;box-shadow:0 0 0 4px rgba(0,158,227,.14)}
.login-form button,.btn{margin-top:10px;border:0;border-radius:14px;padding:14px 18px;background:linear-gradient(135deg,#151b8d,#009ee3);color:white;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center;box-shadow:0 12px 28px rgba(0,80,180,.28)}
.login-form button:hover,.btn:hover{transform:translateY(-1px)}
.alert{background:#ffe8e8;color:#9f1d1d;border:1px solid #ffc9c9;border-radius:12px;padding:12px;margin-bottom:16px;font-size:14px}
.login-footer{text-align:center;margin-top:24px;color:#667085;font-size:13px;display:flex;flex-direction:column;gap:4px}

.app-body{min-height:100vh;background:#f4f7fb;display:flex}
.sidebar{width:280px;min-height:100vh;background:#071b4d;color:white;padding:28px 22px;position:fixed;left:0;top:0;bottom:0}
.sidebar-logo{width:170px;background:white;border-radius:18px;padding:12px;margin-bottom:18px}
.sidebar h3{margin-bottom:28px;font-size:20px}
.sidebar nav{display:flex;flex-direction:column;gap:10px}
.sidebar nav a,.logout{color:#dce8ff;text-decoration:none;padding:13px 15px;border-radius:14px;font-weight:600}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.14);color:white}
.logout{position:absolute;bottom:24px;left:22px;right:22px;background:rgba(255,255,255,.1)}
.content{margin-left:280px;width:calc(100% - 280px);padding:34px}
.topbar{display:flex;justify-content:space-between;align-items:center;background:white;border-radius:24px;padding:26px;box-shadow:0 12px 30px rgba(10,34,80,.08);margin-bottom:28px}
.topbar h1{font-size:30px;color:#071b4d}
.topbar p{color:#667085;margin-top:5px}
.topbar span{background:#eaf6ff;color:#0067b1;padding:10px 14px;border-radius:12px;font-weight:700}
.cards{display:grid;grid-template-columns:2fr 1fr;gap:22px}
.card{background:white;border-radius:24px;padding:28px;box-shadow:0 12px 30px rgba(10,34,80,.08)}
.main-card{grid-row:span 2;background:linear-gradient(135deg,#ffffff,#eef9ff)}
.card h2{color:#071b4d;margin:10px 0 12px;font-size:24px}
.card p{color:#667085;line-height:1.6}
.badge{display:inline-block;background:#dff7ff;color:#0078a8;border-radius:999px;padding:8px 13px;font-weight:700;font-size:12px}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:850px){
  .app-body{display:block}
  .sidebar{position:relative;width:100%;min-height:auto}
  .logout{position:relative;left:auto;right:auto;bottom:auto;display:block;margin-top:20px}
  .content{margin-left:0;width:100%;padding:20px}
  .topbar{flex-direction:column;align-items:flex-start;gap:14px}
  .cards{grid-template-columns:1fr}
}