:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-body); }
a { color: inherit; }
button, input, select { font: inherit; }
button { border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-surface); padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 18rem 1fr; }
aside { background: var(--color-primary); color: var(--color-surface); padding: var(--spacing-lg); box-shadow: var(--shadow-sidebar); }
.brand { display: block; font-size: var(--font-size-heading); font-weight: var(--font-weight-bold); text-decoration: none; }
.role-label { display: grid; gap: var(--spacing-xs); margin: var(--spacing-lg) 0; }
select, input { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-sm); background: var(--color-surface); color: var(--color-text); }
nav { display: grid; gap: var(--spacing-xs); max-height: 70vh; overflow: auto; }
nav a { padding: var(--spacing-sm); border-radius: var(--radius-md); text-decoration: none; }
nav a:hover, nav a:focus-visible { background: var(--color-primary-hover); outline: 2px solid var(--color-info); }
.topbar { min-height: 4rem; display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-surface); box-shadow: var(--shadow-topbar); }
.menu { display: none; margin-right: auto; }
main { padding: var(--spacing-xl); }
.screen-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
h1, h2, p { margin-top: 0; }
h1 { font-size: var(--font-size-heading); }
.eyebrow { color: var(--color-text-muted); font-size: var(--font-size-caption); text-transform: uppercase; font-weight: var(--font-weight-bold); }
.badge, .element-type { border-radius: var(--radius-pill); background: var(--color-surface-soft); padding: var(--spacing-xs) var(--spacing-sm); color: var(--color-secondary); font-size: var(--font-size-caption); }
.section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: var(--shadow-card); }
.task-center { margin-bottom: var(--spacing-xl); }
.capability-grid, .workflow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.capability, .workflow { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--shadow-card); }
.capability p { color: var(--color-text-muted); margin: var(--spacing-sm) 0; }
.capability span, .task-step small { color: var(--color-secondary); font-size: var(--font-size-caption); }
.workflow ol { display: grid; gap: var(--spacing-sm); padding-left: var(--spacing-lg); }
.task-step { padding-left: var(--spacing-xs); }
.task-step input { width: auto; margin-right: var(--spacing-sm); }
.task-step small { display: block; margin-left: var(--spacing-lg); }
.task-step.complete a, .task-step.complete span { text-decoration: line-through; color: var(--color-text-muted); }
.element-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--spacing-md); }
.element { display: grid; gap: var(--spacing-sm); background: var(--color-surface-soft); border-radius: var(--radius-md); padding: var(--spacing-md); }
.auth-shell { min-height: 100vh; display: grid; place-items: center; }
.auth-card { width: min(28rem, calc(100vw - var(--spacing-xl))); display: grid; gap: var(--spacing-md); background: var(--color-surface); padding: var(--spacing-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); }
.auth-card label { display: grid; gap: var(--spacing-xs); }
.status { min-height: var(--spacing-lg); color: var(--color-secondary); }
.fatal { max-width: 50rem; margin: var(--spacing-xl) auto; }
@media (max-width: 1024px) { .app-shell { grid-template-columns: 1fr; } aside { display: none; position: fixed; inset: 0 auto 0 0; width: 18rem; z-index: var(--z-sidebar); } aside.open { display: block; } .menu { display: block; } main { padding: var(--spacing-lg); } }