:root { --bg: #fff; --fg: #111; --muted: #777; --line: #e9e9e9; --accent: #111; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg); background: var(--bg);
}
.app-header {
  position: sticky; top: 0; z-index: 10; background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/md_zvbaoy_d0b53ba360b1ef3a94370a2f781a28fe279b20d0.jpg') center/cover no-repeat;
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); }
.brand h1 { font-size: 16px; margin: 0; letter-spacing: 0.2px; }
.tabs { display: flex; gap: 8px; }
.tab {
  appearance: none; border: 1px solid var(--line); background: #f9f9f9; color: var(--fg);
  padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.tab:hover { background: #f3f3f3; }
.tab.active { background: #fff; border-color: #dcdcdc; box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset; }
.actions { display: flex; gap: 12px; }
.link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.link:hover { border-color: var(--fg); }

.content { max-width: 1200px; margin: 0 auto; padding: 16px 20px 24px; }
.panel { display: none; animation: fade .18s ease; }
.panel.visible { display: grid; }
@keyframes fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.frame-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
#preview-frame { width: 100%; height: min(78vh, 1000px); border: 0; display: block; background: #fff; }

#panel-doc {
  grid-template-columns: 260px 1fr; gap: 20px; align-items: start;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.98));
  background-image: url('/328478dd-118d-432a-aebb-a8665e5808fd.png');
  background-blend-mode: lighten;
  background-size: cover;
  border-radius: 12px;
  padding: 12px;
}

.toc {
  position: sticky; top: 78px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 14px;
  background: linear-gradient(rgba(255,255,255,0.94), rgba(255,255,255,0.94)), url('/d5501ace-6620-488d-836d-40e4003ee40e.png') center/140% no-repeat;
  background-blend-mode: overlay;
}
.toc h3 { margin: 4px 8px 8px; font-size: 12px; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 6px 0; }
.toc a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { border-color: var(--line); }
.toc a.active { border-color: var(--fg); font-weight: 600; }

.markdown { border: 1px solid var(--line); border-radius: 12px; padding: 24px; overflow: auto; line-height: 1.6; }
.markdown h1, .markdown h2, .markdown h3 { margin-top: 1.8em; scroll-margin-top: 80px; }
.markdown pre { background: #f7f7f7; padding: 14px; border-radius: 10px; overflow: auto; border: 1px solid #eee; }
.markdown code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Space Mono", monospace; font-size: 0.95em; }

.app-footer { border-top: 1px solid var(--line); padding: 10px 20px; color: var(--muted); font-size: 13px; }
.status { opacity: .8; }

@media (max-width: 920px) {
  #panel-doc { grid-template-columns: 1fr; }
  .toc { position: relative; top: auto; }
}