:root {
  --sidebar: #162239;
  --sidebar-muted: #91a0b9;
  --accent: #176b57;
  --surface: #ffffff;
  --background: #f4f6f8;
  --border: #e2e7ec;
}
body { background: var(--background); color: #233044; font-size: .925rem; }
.app-shell { min-height: 100vh; }
.sidebar { background: var(--sidebar); color: white; left: 0; min-height: 100vh; padding: 1.5rem 1rem; position: fixed; top: 0; width: 240px; z-index: 5; }
.brand { align-items: center; color: inherit; display: flex; gap: .75rem; }
.brand small { display: block; font-size: .68rem; opacity: .65; }
.brand-icon { border-radius: .65rem; display: block; height: 40px; width: 40px; }
.sidebar .nav { margin-top: 2rem; }
.sidebar .nav-link { border-radius: .45rem; color: #d7deea; margin-bottom: .15rem; padding: .65rem .8rem; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar .nav-link.active { background: var(--accent); color: white; font-weight: 600; }
.nav-section { color: var(--sidebar-muted); font-size: .67rem; font-weight: 700; letter-spacing: .08em; margin: 1.25rem .8rem .35rem; text-transform: uppercase; }
.main-area { margin-left: 240px; min-height: 100vh; }
.content { padding: 2rem; }
.page-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.page-heading h1 { font-size: 1.55rem; font-weight: 650; margin: .2rem 0; }
.page-heading p { color: #6c788b; margin: 0; }
.back-link { color: #6a7688; font-size: .85rem; text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #125646; border-color: #125646; }
.panel, .metric-card { border: 1px solid var(--border); border-radius: .65rem; box-shadow: 0 1px 2px rgba(30,42,60,.04); }
.panel .card-header { background: white; border-bottom: 1px solid var(--border); font-weight: 600; padding: .9rem 1rem; }
.metric-card { background: var(--surface); padding: 1.15rem 1.25rem; }
.metric-card span { color: #748094; display: block; font-size: .78rem; margin-bottom: .35rem; text-transform: uppercase; }
.metric-card strong { font-size: 1.65rem; font-weight: 650; }
.total-card { max-width: 360px; }
.table > :not(caption) > * > * { border-color: var(--border); padding: .85rem 1rem; vertical-align: middle; }
.table thead th { background: #f9fafb; color: #677386; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.actions { text-align: right; white-space: nowrap; }
.actions a, .actions .link-button { margin-left: .7rem; }
.code { color: #1b5d7a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; font-weight: 600; text-decoration: none; }
.empty-state { color: #7c8797; padding: 2rem !important; text-align: center; }
.form-panel { max-width: 760px; }
.form-control, .form-select { border-color: #cfd6df; padding: .58rem .7rem; }
.required { color: #c13d3d; }
.formula { background: #f1f4f6; border-radius: .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: .85rem; }
.video-player { background: #000; border-radius: .45rem; display: block; max-height: calc(100vh - 13rem); width: 100%; }
.dependency-chip { background: #eef2f5; border-radius: 1rem; display: inline-block; font-size: .75rem; margin: .15rem; padding: .25rem .55rem; }
.link-button { background: none; border: 0; color: #0d6efd; padding: 0; }
@media (max-width: 900px) {
  .sidebar { position: static; width: 100%; min-height: auto; }
  .sidebar .nav { flex-direction: row !important; flex-wrap: wrap; margin-top: 1rem; }
  .nav-section { display: none; }
  .main-area { margin-left: 0; }
  .content { padding: 1rem; }
  .page-heading { align-items: start; gap: 1rem; }
}