@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #18211d; --muted: #68746d; --line: #dbe3de; --paper: #f6f8f4; --mint: #c5f26b; --deep: #1d3b30; --blue: #dce9ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Space Grotesk', sans-serif; }
button { font: inherit; cursor: pointer; }
.shell { min-height: 100vh; }
.app-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 1.25rem clamp(1.25rem, 5vw, 5rem); }
.brand { align-items: center; color: var(--ink); display: flex; font-size: 1.35rem; font-weight: 700; gap: .6rem; text-decoration: none; }
.brand-mark { align-items: center; background: var(--deep); border-radius: 50%; color: var(--mint); display: inline-flex; font-size: .9rem; height: 2rem; justify-content: center; width: 2rem; }
.brand-dot { color: #82a6ff; }.header-caption { color: var(--muted); font-family: 'DM Mono', monospace; font-size: .72rem; text-transform: uppercase; }
.main-content { margin: 0 auto; max-width: 1100px; padding: clamp(2.5rem, 7vw, 6rem) clamp(1.25rem, 5vw, 3rem); }
.hero { align-items: flex-start; display: flex; gap: 2rem; justify-content: space-between; margin-bottom: 4.5rem; }.eyebrow, .label { color: var(--muted); font: 500 .7rem 'DM Mono', monospace; letter-spacing: .12em; margin: 0 0 .8rem; }.hero h1 { font-size: clamp(2.5rem, 6vw, 5.4rem); letter-spacing: -.07em; line-height: .95; margin: 0; max-width: 700px; }.lede { color: var(--muted); font-size: 1.1rem; line-height: 1.5; max-width: 520px; }.mode-badge { align-items: center; border-radius: 2rem; display: flex; font: 500 .7rem 'DM Mono', monospace; gap: .55rem; padding: .75rem 1rem; white-space: nowrap; }.mode-badge.local { background: var(--mint); }.mode-badge.cloud { background: var(--blue); }.status-dot { background: currentColor; border-radius: 50%; height: .45rem; width: .45rem; }
section { border-top: 1px solid var(--ink); padding-top: 1.3rem; }.section-heading { align-items: baseline; display: flex; justify-content: space-between; gap: 1rem; }.section-heading h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }.boundary-note, .muted, small { color: var(--muted); font-size: .78rem; }.mode-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }.mode-card { background: transparent; border: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.5rem; text-align: left; transition: .15s ease; }.mode-card:hover, .mode-card.selected { border-color: var(--deep); box-shadow: 5px 5px 0 var(--deep); transform: translate(-2px, -2px); }.mode-card.selected { background: #f0f8dc; }.mode-icon { background: var(--deep); border-radius: 50%; color: var(--mint); font-size: 1.2rem; height: 2.5rem; line-height: 2.5rem; text-align: center; width: 2.5rem; }.mode-card strong { font-size: 1.1rem; }.mode-card span:not(.mode-icon) { color: var(--muted); line-height: 1.4; }.mode-card small { margin-top: .5rem; }
.workspace { margin-top: 4rem; }.primary, .secondary, .action { border: 0; font-weight: 600; padding: .8rem 1rem; }.primary { background: var(--deep); color: white; }.secondary { background: var(--mint); color: var(--ink); }.empty-state { align-items: flex-start; border: 1px dashed #aebbb2; display: flex; flex-direction: column; gap: .8rem; padding: 2rem; }.empty-state strong { font-size: 1.2rem; }.cloud-empty { background: #f0f4fd; border-color: #9eb7e9; }.warning { color: #405b98; font: .78rem 'DM Mono', monospace; }.program-card { align-items: center; background: var(--deep); color: white; display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem; }.program-card .label { color: var(--mint); }.program-card h3 { font-size: 1.8rem; margin: .2rem 0; }.program-card .muted { color: #b6c6bd; font-family: 'DM Mono', monospace; font-size: .68rem; }.actions { display: flex; gap: .5rem; }.action { background: var(--mint); color: var(--ink); }.action:disabled { cursor: not-allowed; opacity: .65; } footer { color: var(--muted); font: .68rem 'DM Mono', monospace; padding: 2rem clamp(1.25rem, 5vw, 5rem); }
@media (max-width: 700px) { .hero, .section-heading, .program-card { align-items: flex-start; flex-direction: column; }.mode-grid { grid-template-columns: 1fr; }.mode-badge { align-self: flex-start; }.actions { flex-direction: column; width: 100%; }.action { width: 100%; } }

#blazor-error-ui { background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .reload { color: inherit; margin-left: .35rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }