:root{
  --primary-green:#198754;
  --dark-green:#146c43;
  --light-green:#d1e7dd;
  --bg-color:#f8f9fa;
  --bg:var(--bg-color);
  --card:#ffffff;
  --text:#1f2937;
  --mute:#64748b;
  --acc:#10b981;
  --acc2:#22c55e;
  --err:#ef4444
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Poppins,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{max-width:1100px;margin:32px auto;padding:0 16px}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:14px;padding:20px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
h1{font-size:22px;margin:0 0 12px}
p.muted{color:var(--mute);margin-top:0}
.row{display:flex;gap:12px;flex-wrap:wrap}
.field{flex:1 1 220px;display:flex;flex-direction:column}
.field label{font-size:12px;color:var(--mute);margin-bottom:6px}
input[type=text],input[type=email],input[type=password],select,input[type=number],textarea{background:#ffffff;border:1px solid #d1d5db;color:#1f2937;padding:10px 12px;border-radius:10px;outline:none}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,select:focus,input[type=number]:focus,textarea:focus{box-shadow:0 0 0 2px rgba(16,185,129,.35)}
textarea{min-height:96px;resize:vertical;line-height:1.45}
button.primary{background:linear-gradient(135deg,var(--acc2),var(--acc));border:0;color:#052e27;padding:10px 16px;border-radius:10px;font-weight:700;cursor:pointer;transition:transform .1s ease,filter .2s ease}
button.primary:hover{filter:brightness(1.05)}
button.primary:active{transform:scale(.98)}
button.primary:disabled{opacity:.6;cursor:not-allowed}
.results{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.result{background:#0b1220;border:1px solid #1f2937;border-radius:12px;padding:14px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid #a7f3d0;color:#065f46;background:#ecfdf5}
.choices{margin:8px 0 0 0;padding-left:18px;list-style:lower-alpha}
.err{color:var(--err)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;position:sticky;top:0;padding:12px 0;background:var(--bg);border-bottom:1px solid #e2e8f0;z-index:40}
.topbar h1{font-size:20px;margin:0}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo{height:20px;display:block}
.nav{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.link{color:#0f766e;text-decoration:none;display:inline-block;padding:6px 8px;border-radius:8px;transition:background .2s ease,color .2s ease}
.link:hover{background:#f1f5f9}
.link.active{background:#eafaf1;border:1px solid #a7f3d0}
.nav .badge{margin-left:4px}
.link:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}

/* Global app theme */
.navbar{
  background:linear-gradient(135deg,var(--primary-green),var(--dark-green));
  box-shadow:0 2px 10px rgba(0,0,0,0.1)
}
.navbar .navbar-brand,
.navbar .nav-link{color:#ffffff}
.navbar .nav-link:hover,
.navbar .nav-link.active{color:#ffffff;opacity:.9}
.navbar .navbar-toggler{border-color:#ffffff50}
.navbar .navbar-toggler-icon{filter:invert(1)}

.card{
  border:none;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,0.05);
  transition:transform .3s
}
.card:hover{transform:translateY(-5px)}
.card h2{
  background-color:#ffffff;
  border-bottom:2px solid var(--light-green);
  font-weight:600;
  border-radius:15px 15px 0 0;
  padding:1.5rem;
  margin:0 0 1rem
}
.btn-success{
  background-color:var(--primary-green);
  border:none
}
.btn-success:hover{background-color:var(--dark-green)}
.sidebar-link{
  text-decoration:none;color:#333;display:block;padding:10px 15px;border-radius:10px;margin-bottom:5px;transition:all .3s
}
.sidebar-link:hover,.sidebar-link.active{
  background-color:var(--light-green);color:var(--dark-green);font-weight:500
}
.sidebar-link i{width:25px;text-align:center;margin-right:10px}
.stat-card{border-left:5px solid var(--primary-green)}

/* Mobile-first responsive adjustments */
@media (max-width: 640px){
  .container{margin:16px auto;padding:0 12px}
  .topbar{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0}
  .topbar h1{font-size:18px}
  .logo{height:18px}
  .nav{width:100%;display:none;gap:8px;padding-bottom:2px}
  .nav.open{display:flex;flex-direction:column;background:var(--card);border:1px solid #e2e8f0;border-radius:12px;padding:8px;box-shadow:0 10px 20px rgba(0,0,0,.12)}
  .card{padding:14px;border-radius:12px}
  .row{flex-direction:column;gap:10px}
  .field{flex:1 1 auto;min-width:100%}
  input[type=text],input[type=email],input[type=password],select,input[type=number],textarea{font-size:16px}
  button.primary{width:100%}
  .results{grid-template-columns:1fr !important}
  .choices{padding-left:16px}
}

/* Medium screens */
@media (min-width: 641px) and (max-width: 900px){
  .container{max-width:820px}
  .results{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
.menu-toggle{display:none;border:1px solid #e2e8f0;background:#ffffff;color:#0f766e;border-radius:10px;padding:8px 10px;cursor:pointer}
@media (max-width: 640px){
  .menu-toggle{display:inline-flex;align-items:center;gap:8px}
}