:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #172033; background: #eef2f7; line-height: 1.5; } * { box-sizing: border-box; } body { margin: 0; } a { color: inherit; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: 17rem 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'header header' 'nav main' 'footer footer'; } .top-header { grid-area: header; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(255,255,255,.96); border-bottom: 1px solid #d9dfeb; position: sticky; top: 0; z-index: 2; } .brand-lockup { display: flex; align-items: center; gap: .75rem; font-size: 1.05rem; } .surface-label { padding: .25rem .55rem; border: 1px solid #d9dfeb; border-radius: 999px; opacity: .78; font-size: .85rem; } .header-status { display: flex; flex-wrap: wrap; gap: .5rem; } .status-badge, .header-status span { border: 1px solid #c9d3e5; border-radius: 999px; padding: .25rem .55rem; font-size: .8rem; background: #f8fafc; } .left-navigation { grid-area: nav; padding: 1rem; background: #172033; color: white; display: flex; flex-direction: column; gap: 1rem; } .nav-group, .left-navigation section { display: grid; gap: .45rem; } .nav-group h2, .left-navigation h2 { margin: .35rem 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); } .left-navigation a { color: white; text-decoration: none; padding: .72rem .78rem; border-radius: .7rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); } .left-navigation a[data-materialized='false'] { opacity: .58; } .left-navigation span { display: block; } .left-navigation small { display: block; font-size: .72rem; opacity: .72; margin-top: .2rem; } .main-content { grid-area: main; padding: clamp(1rem, 2.2vw, 2rem); max-width: 1180px; width: 100%; } .footer-status { grid-area: footer; padding: .75rem 1.25rem; background: white; border-top: 1px solid #d9dfeb; color: #4b5870; } .hero, .status-card, .workspace-card, .workspace-panel, .empty-state-card, .workspace-grid article { background: white; border: 1px solid #d9dfeb; border-radius: 1rem; padding: 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 8px rgba(0,0,0,.06); } .hero h1 { margin: .25rem 0 .4rem; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; } .eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 800; color: #55657f; } .workspace-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1rem; } .workspace-card, .workspace-panel, .workspace-grid article { margin-bottom: 0; } .workspace-card a { display: inline-flex; margin-top: .5rem; font-weight: 700; } .section-heading-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .status-pill { border-radius: 999px; border: 1px solid #c9d3e5; padding: .25rem .6rem; font-size: .8rem; font-weight: 700; } .status-loading, [data-status-state='loading'] { background: #f8fafc; } .status-ready, [data-status-state='success'] { background: #eef8f1; } .status-error, [data-status-state='error'] { background: #fff1f1; } dl.status-grid, dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .55rem 1rem; align-items: start; } dt { font-weight: 800; color: #34435c; } dd { margin: 0; overflow-wrap: anywhere; } .muted, .endpoint-note, .empty-state { color: #536179; } .error { color: #9b1c1c; font-weight: 700; } form { display: grid; gap: .75rem; } input, button { font: inherit; padding: .65rem .75rem; border-radius: .6rem; border: 1px solid #c9d3e5; } button:disabled { opacity: .55; } @media (max-width:900px){ .app-shell { grid-template-columns:1fr; grid-template-areas:'header' 'nav' 'main' 'footer'; } .left-navigation { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); } .top-header { align-items:flex-start; flex-direction:column; } } @media (max-width:600px){ .main-content { padding:1rem; } dl.status-grid, dl { grid-template-columns:1fr; } }