@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;1,6..12,300;1,6..12,400&display=swap');

:root{
  --bg: #0a0f1e;
  --panel: #10182c;
  --panel-2: #141d35;
  --border: #212c47;
  --text: #eef1fb;
  --muted: #8b94b3;
  --blue: #3d5cff;
  --blue-2: #1b2f8f;
  --green: #22c58b;
  --amber: #e8a93a;
  --red: #e8506a;
  --radius: 14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  /* Avenir Light Oblique. Avenir ipo kwenye Mac/iOS pekee (ni ya kulipia, haiwezi
     kupakiwa mtandaoni), kwa hiyo Nunito Sans ni mbadala wa karibu kwa
     Windows/Android - ina umbo la duara linalofanana. */
  font-family:'Avenir','Avenir Next','Nunito Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-style:italic;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none}

.app{display:flex; min-height:100vh}

/* Sidebar */
.sidebar{
  width:260px; background:var(--panel); border-right:1px solid var(--border);
  padding:24px 18px; display:flex; flex-direction:column; gap:22px;
}
.brand{display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700}
.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--blue),#7fa1ff)}
.nav-section-label{font-size:11px; letter-spacing:.08em; color:var(--muted); margin:14px 4px 4px; text-transform:uppercase}
.nav-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--text); font-size:14.5px; font-weight:500;
}
.nav-item:hover{background:var(--panel-2)}
.nav-item.active{background:var(--panel-2); border:1px solid var(--border)}
.pill{font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(34,197,139,.15); color:var(--green); font-weight:600}
.workspace-card{
  margin-top:auto; padding:12px; border-radius:12px; background:var(--panel-2); border:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.avatar-sq{width:34px;height:34px;border-radius:8px;background:var(--amber); display:flex; align-items:center; justify-content:center; font-weight:700; color:#1a1200}

/* Main area */
.main{flex:1; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; border-bottom:1px solid var(--border);
}
.topbar h1{font-size:24px; margin:0}
.topbar-right{display:flex; align-items:center; gap:14px}
.chip{
  display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px;
  background:var(--panel-2); border:1px solid var(--border); font-size:14px; font-weight:600;
}
.content{padding:26px 28px; display:flex; flex-direction:column; gap:22px}

/* Hero */
.hero{
  background:linear-gradient(120deg,var(--blue-2),var(--blue));
  border-radius:20px; padding:32px; position:relative; overflow:hidden;
}
.hero h2{font-size:34px; margin:6px 0 10px; letter-spacing:-.02em}
.hero p{color:#dbe2ff; max-width:560px; margin:0 0 20px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  border:none; border-radius:10px; padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer;
}
.btn-white{background:#fff; color:#131a33}
.btn-outline{background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35)}
.hero-stats{display:flex; gap:44px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.2); flex-wrap:wrap}
.hero-stat-label{font-size:11px; letter-spacing:.06em; color:#c7d1ff; text-transform:uppercase}
.hero-stat-value{font-size:24px; font-weight:800; margin-top:4px}

/* Cards grid */
.grid{display:grid; gap:16px}
.grid-6{grid-template-columns:repeat(6,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.grid-6{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr}}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px;
}
.card-label{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.card-value{font-size:26px; font-weight:800; margin-top:8px}
.card-sub{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.4}

.section-title{font-size:12px; text-transform:uppercase; color:#7fa1ff; font-weight:800; letter-spacing:.06em}
.section-heading{font-size:20px; font-weight:800; margin:4px 0 16px; letter-spacing:-.01em}

.bar{height:8px; border-radius:999px; background:var(--border); overflow:hidden; display:flex}
.bar-seg{height:100%}

/* Login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg)}
.login-box{width:380px; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px}
.login-box h1{font-size:22px; margin:0 0 4px}
.login-box p{color:var(--muted); margin:0 0 24px; font-size:14px}
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; margin-bottom:6px; color:var(--muted)}
.field input{
  width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--text); font-size:14px;
}
.error-box{background:rgba(232,80,106,.12); border:1px solid rgba(232,80,106,.4); color:#ff9fb0; padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:14px}
.success-box{background:rgba(34,197,139,.12); border:1px solid rgba(34,197,139,.4); color:#8ff0c8; padding:10px 12px; border-radius:10px; font-size:13px; margin-bottom:14px}

/* Tables */
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data th{text-align:left; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; border-bottom:1px solid var(--border)}
table.data td{padding:12px; border-bottom:1px solid var(--border)}
table.data tr:last-child td{border-bottom:none}
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.badge-active{background:rgba(34,197,139,.15); color:var(--green)}
.badge-expired{background:rgba(232,80,106,.15); color:var(--red)}
.badge-pending{background:rgba(232,169,58,.15); color:var(--amber)}
.badge-grace{background:rgba(232,169,58,.15); color:var(--amber)}
.badge-unused{background:rgba(61,92,255,.15); color:#8fa2ff}
.badge-used{background:var(--panel-2); color:var(--muted)}
.badge-overdue{background:rgba(232,80,106,.15); color:var(--red)}
.badge-paid{background:rgba(34,197,139,.15); color:var(--green)}
.badge-awaiting{background:rgba(232,169,58,.15); color:var(--amber)}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; gap:12px; flex-wrap:wrap}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.form-grid .full{grid-column:1/-1}
select{width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2); color:var(--text); font-size:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.03em; font-style:normal}

/* Namba na takwimu zisimame wima ili ziwe rahisi kusoma, hata ingawa
   maandishi mengine yameinama (Light Oblique) */
.card-value, table.data td, .hero-stat-value{font-style:normal}