:root {
  --sidebar-w: 240px;
  --sidebar-bg: #1f3a5f;
  --sidebar-fg: #e9eef5;
  --sidebar-fg-muted: #9eb4cd;
}

body { background: #f5f7fa; }

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

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  padding: 1.25rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand small { display:block; color: var(--sidebar-fg-muted); font-weight:400; font-size:.75rem; }
.sidebar .nav-link {
  color: var(--sidebar-fg-muted);
  padding: .65rem 1rem;
  border-left: 3px solid transparent;
  border-radius: 0;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
.sidebar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-left-color: #4ea1ff;
}
.sidebar .user-block {
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: .85rem;
}
.sidebar .user-block .role { color: var(--sidebar-fg-muted); font-size:.75rem; }

.main { flex: 1; min-width: 0; }
.topbar {
  background: #fff;
  border-bottom: 1px solid #e3e7ee;
  padding: .75rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.content { padding: 1.5rem; }

.stat-card { border: 1px solid #e3e7ee; border-radius: 10px; padding: 1rem; background: #fff; }
.stat-card .label { color: #6b7785; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; }
.stat-card .value { font-size: 1.6rem; font-weight: 700; color: #1f3a5f; }

.card-clean { border: 1px solid #e3e7ee; border-radius: 10px; background: #fff; }

.timeline { border-left: 2px solid #e3e7ee; padding-left: 1rem; margin-left: .5rem; }
.timeline-item { position: relative; padding-bottom: 1rem; }
.timeline-item::before {
  content:''; position:absolute; left:-1.4rem; top:.35rem;
  width:.7rem; height:.7rem; border-radius:50%;
  background:#4ea1ff; border:2px solid #fff;
}

.note-card { border:1px solid #e3e7ee; border-radius:8px; padding:.75rem 1rem; background:#fff; margin-bottom:.6rem; }
.note-card .meta { font-size:.78rem; color:#6b7785; margin-bottom:.25rem; }

@media (max-width: 768px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar .nav { display: flex; flex-wrap: wrap; }
  .sidebar .nav-link { border-left: none; border-bottom: 3px solid transparent; }
  .sidebar .nav-link.active { border-left: none; border-bottom-color: #4ea1ff; }
}