:root {
  --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-500: #6366f1;
  --indigo-600: #4f46e5; --indigo-700: #4338ca;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-300: #d1d5db;
  --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
  --green-50: #f0fdf4; --green-600: #16a34a;
  --red-50: #fef2f2; --red-600: #dc2626;
}
body { background: var(--gray-50); font-family: Inter, Segoe UI, system-ui, sans-serif; }
.container-fluid { max-width: 1280px; margin: 0 auto; }
.py-4 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.px-4 { padding-left: 2rem !important; padding-right: 2rem !important; }
/* Reset */
a { text-decoration: none; }
/* Cards */
.card { border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid var(--gray-100); }
.card.stat-card { border: none; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.stat-card .text-primary { color: var(--indigo-600) !important; }
.stat-card h3 { font-size: 1.875rem; font-weight: 700; }
.stat-card h5 { font-weight: 600; }
/* Buttons */
.btn-primary { background: var(--indigo-600); border-color: var(--indigo-600); border-radius: .5rem; font-weight: 500; }
.btn-primary:hover, .btn-primary:focus { background: var(--indigo-700); border-color: var(--indigo-700); }
/* Tables */
.table { margin: 0; }
.table thead th { background: var(--gray-50); color: var(--gray-600); font-size: .875rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.table tbody tr:hover { background: var(--gray-50); }
.table td { vertical-align: middle; }
/* Forms */
.form-control, .form-select { border-radius: .5rem; border-color: var(--gray-300); padding: .5rem .75rem; font-size: .875rem; }
.form-control:focus, .form-select:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px rgba(99,102,241,.2); }
.form-label { font-size: .875rem; font-weight: 500; color: var(--gray-700); margin-bottom: .25rem; }
/* Badges */
.badge { font-weight: 500; border-radius: 9999px; padding: .125rem .625rem; font-size: .75rem; }
.badge.bg-success { background: var(--green-50) !important; color: var(--green-600); }
.badge.bg-danger { background: var(--red-50) !important; color: var(--red-600); }
.bg-primary { background: var(--indigo-600) !important; }
.text-primary { color: var(--indigo-600) !important; }
/* Skill badges */
.badge-foundation { background: var(--indigo-50); color: var(--indigo-700); border-radius: 9999px; font-weight: 500; }
.badge-enhancement { background: var(--green-50); color: var(--green-600); border-radius: 9999px; font-weight: 500; }
.badge-mastery { background: #f3e8ff; color: #7c3aed; border-radius: 9999px; font-weight: 500; }
/* Alerts */
.alert-success { background: var(--green-50); color: var(--green-600); border: none; border-radius: .5rem; }
.alert-danger { background: var(--red-50); color: var(--red-600); border: none; border-radius: .5rem; }
/* Links */
a { color: var(--indigo-600); }
a:hover { color: var(--indigo-700); }
/* Page headings */
h2 { color: var(--gray-800); font-weight: 700; }
/* Nav tabs (journal) */
.nav-tabs .nav-link { color: var(--gray-600); border: none; border-radius: .5rem; font-weight: 500; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--indigo-700); background: var(--indigo-50); border: none; }
/* Misc utility */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05) !important; }

/* Layout */
.layout-wrapper { display: flex; min-height: 100vh; }
.min-vh-100 { min-height: 100vh; }

/* Sidebar */
.sidebar { width: 256px; min-width: 256px; background: #fff; border-right: 1px solid var(--gray-100); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar-header { padding: 1.5rem 1.25rem .75rem; border-bottom: 1px solid var(--gray-100); }
.sidebar-brand { display: block; font-size: 1.25rem; font-weight: 700; color: var(--indigo-600); text-decoration: none; margin-bottom: 1rem; }
.sidebar-brand:hover { color: var(--indigo-700); }
.sidebar-user { }
.sidebar-user-name { display: block; font-size: .875rem; font-weight: 600; color: var(--gray-800); }
.sidebar-user-role { display: block; font-size: .75rem; color: var(--gray-500); margin-top: .125rem; }

.sidebar-nav { flex: 1; padding: .75rem .75rem; overflow-y: auto; }
.sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: var(--gray-600); text-decoration: none; margin-bottom: .125rem; transition: background .1s, color .1s; }
.sidebar-link:hover { background: var(--gray-50); color: var(--gray-800); }
.sidebar-link.active { background: var(--indigo-50); color: var(--indigo-700); }
.sidebar-link span { font-size: 1.125rem; line-height: 1; }
.sidebar-parent { cursor: pointer; }
.sidebar-chevron { margin-left: auto; font-size: .75rem; transition: transform .2s; color: var(--gray-400); }
.sidebar-parent[aria-expanded="false"] .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-subnav { margin-bottom: .25rem; overflow: hidden; }
.sidebar-sublink { font-size: .8125rem !important; padding: .375rem .75rem .375rem 3.5rem !important; border-radius: .375rem; margin-bottom: .0625rem; }
.sidebar-sublink:hover { background: var(--gray-50); color: var(--gray-800); }
.sidebar-sublink.active { background: var(--indigo-50); color: var(--indigo-700); }
.sidebar-subgroup { margin-bottom: .125rem; }
.sidebar-parent2 { font-size: .8125rem !important; padding: .375rem .75rem .375rem 3.5rem !important; border-radius: .375rem; cursor: pointer; margin-bottom: .0625rem; }
.sidebar-parent2:hover { background: var(--gray-50); color: var(--gray-800); }
.sidebar-parent2 span:first-child { font-size: 1rem; }
.sidebar-sublink2 { display: flex; align-items: center; gap: .625rem; padding: .3125rem .75rem .3125rem 5rem !important; border-radius: .375rem; font-size: .8125rem; font-weight: 500; color: var(--gray-600); text-decoration: none; margin-bottom: .0625rem; transition: background .1s, color .1s; }
.sidebar-sublink2:hover { background: var(--gray-50); color: var(--gray-800); }
.sidebar-sublink2.active { background: var(--indigo-50); color: var(--indigo-700); }
.sidebar-subnav2 { overflow: hidden; }

.sidebar-footer { padding: .75rem; border-top: 1px solid var(--gray-100); }
.sidebar-logout { color: var(--red-600); }
.sidebar-logout:hover { background: var(--red-50); color: var(--red-600) !important; }

/* Main content */
.main-content { flex: 1; background: var(--gray-50); min-width: 0; }