:root { color-scheme: dark; --shell-bg: #101820; --shell-surface: #17222c; --shell-line: #2b3a46; --shell-text: #edf3f8; --shell-muted: #91a1af; --shell-blue: #5c8dff; --shell-red: #ef5350; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--shell-bg); color: var(--shell-text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.site-shell { min-height: 100vh; display: grid; grid-template-rows: 64px minmax(0, 1fr); }
.site-top { display: flex; align-items: center; gap: 26px; padding: 0 28px; background: var(--shell-surface); border-bottom: 1px solid var(--shell-line); }
.site-brand { display: grid; width: 38px; height: 38px; place-items: center; color: #fff; background: var(--shell-blue); border-radius: 6px; font: 800 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1px; text-decoration: none; }
.site-nav { display: flex; align-self: stretch; gap: 4px; }.site-nav button { padding: 0 13px; color: var(--shell-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font: 600 13px/1 inherit; cursor: pointer; }.site-nav button:hover { color: var(--shell-text); }.site-nav button.active { color: #fff; border-bottom-color: var(--shell-red); }
.site-meta { margin-left: auto; color: var(--shell-muted); font: 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.site-content { min-height: 0; }.site-view { display: block; width: 100%; height: calc(100vh - 64px); border: 0; background: #f4f7fa; }
@media (max-width: 680px) { .site-shell { grid-template-rows: 56px minmax(0, 1fr); }.site-top { gap: 10px; padding: 0 10px; }.site-brand { width: 32px; height: 32px; font-size: 12px; }.site-nav { flex: 1; justify-content: space-between; }.site-nav button { padding: 0 5px; font-size: 11px; }.site-meta { display: none; }.site-view { height: calc(100vh - 56px); } }