:root { color-scheme: light; --ink: #2b1b12; --muted: #75675e; --surface: #fffaf4; --panel: #fff; --line: #e7d9ca; --accent: #bf6b2b; --danger: #9c312b; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; } body { margin: 0; color: var(--ink); background: var(--surface); } a { color: inherit; } button { font: inherit; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 16px; top: 16px; z-index: 2; padding: 12px; background: var(--ink); color: white; }
.topbar { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--panel); } .wordmark { text-decoration: none; font-weight: 900; letter-spacing: .08em; } .wordmark span { margin-left: 9px; color: var(--muted); font-size: .68rem; letter-spacing: .16em; } .topbar-actions { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; }
.layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: calc(100vh - 69px); } .sidebar { padding: 28px 18px; border-right: 1px solid var(--line); background: #f7efe6; } .sidebar nav { display: grid; gap: 3px; margin-top: 18px; } .sidebar a { padding: 11px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); } .sidebar a:hover, .sidebar a:focus-visible, .sidebar a[aria-current="page"] { color: var(--ink); background: var(--panel); outline: none; } .content { width: min(1180px, 100%); padding: clamp(28px, 5vw, 72px); } .page-header { max-width: 720px; padding-bottom: 34px; border-bottom: 1px solid var(--line); } .eyebrow { color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } h1 { max-width: 780px; margin: 16px 0; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.055em; } .lead { color: var(--muted); font-size: 1.15rem; line-height: 1.6; } .notice { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--panel); } .notice p { margin-bottom: 0; color: var(--muted); line-height: 1.5; } .notice-warning { border-left-color: #bd7d1e; } .dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; } .metric { min-height: 126px; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); } .metric strong { display: block; font-size: 2.1rem; } .metric span { color: var(--muted); } .empty-state { grid-column: 1 / -1; padding: 24px; color: var(--muted); border: 1px dashed var(--line); } .button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--panel); color: var(--ink); } .button:focus-visible, a:focus-visible { outline: 3px solid #e6a66e; outline-offset: 3px; } .button-quiet:hover { border-color: var(--accent); }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 20px; } .sidebar nav { display: flex; flex-wrap: wrap; } .sidebar a { padding: 8px 10px; } .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .topbar { align-items: flex-start; padding: 14px 16px; } .topbar-actions { align-items: flex-end; flex-direction: column; gap: 4px; } .wordmark span { display: block; margin: 5px 0 0; } .content { padding: 28px 18px 48px; } .dashboard-grid { grid-template-columns: 1fr; } }
@media (prefers-contrast: more) { :root { --line: #75675e; } .metric, .notice, .empty-state { border-width: 2px; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }