:root {

  --primary: #2563eb;

  --bg: #f8fafc;

  --surface: #ffffff;

  --text: #0f172a;

  --border: #e2e8f0;

}


body {

  margin: 0;

  font-family: system-ui, -apple-system, sans-serif;

  background-color: var(--bg);

  color: var(--text);

}


.login-container {

  max-width: 400px;

  margin: 100px auto;

  padding: 2rem;

  background: var(--surface);

  border-radius: 8px;

  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

}


.dashboard {

  display: flex;

  min-height: 100vh;

}


.sidebar {

  width: 250px;

  background: #1e293b;

  color: #fff;

  padding: 1rem;

}


.sidebar button {

  display: block;

  width: 100%;

  padding: 0.75rem 1rem;

  margin-bottom: 0.5rem;

  background: transparent;

  color: #94a3b8;

  border: none;

  text-align: left;

  cursor: pointer;

  border-radius: 4px;

}


.sidebar button.active, .sidebar button:hover {

  background: #334155;

  color: #fff;

}


.content {

  flex: 1;

  padding: 2rem;

}


.card {

  background: var(--surface);

  padding: 1.5rem;

  border-radius: 8px;

  border: 1px solid var(--border);

  margin-bottom: 1rem;

}


input, select, textarea, button.btn-primary {

  width: 100%;

  padding: 0.75rem;

  margin-top: 0.5rem;

  margin-bottom: 1rem;

  border: 1px solid var(--border);

  border-radius: 4px;

  box-sizing: border-box;

}


button.btn-primary {

  background: var(--primary);

  color: white;

  border: none;

  font-weight: bold;

  cursor: pointer;

}


table {

  width: 100%;

  border-collapse: collapse;

}


th, td {

  padding: 0.75rem;

  text-align: left;

  border-bottom: 1px solid var(--border);

}