/* Viewgram site. Dark navy by default, light via prefers-color-scheme. No gradients, glow, shadows. */
:root {
  color-scheme: dark light;
  --bg: #0B1220;
  --surface: #111B30;
  --border: #22304F;
  --text: #E8EDF7;
  --muted: #9FACC8;
  --accent: #4B95FF;
  --link: #4B95FF;
  --on-accent: #0B1220;
  --mark: rgba(75, 149, 255, .22);
  --radius: 20px;
  --radius-sm: 14px;
  --gutter: 16px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F4F7FC;
    --surface: #FFFFFF;
    --border: #D9E1EF;
    --text: #0B1220;
    --muted: #4A5877;
    --link: #1D5FD1;
    --mark: rgba(75, 149, 255, .26);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 12px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.site-header { padding: 18px 0 8px; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 650; font-size: 1.125rem; text-decoration: none; letter-spacing: .01em; }
.brand svg { width: 30px; height: 28px; flex: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.site-nav a {
  color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 12px; font-size: .9375rem;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
.site-nav .lang { color: var(--link); border: 1px solid var(--border); margin-left: 6px; }

main { flex: 1 0 auto; padding: 16px 0 56px; }

/* Landing */
.hero { padding: 48px 0 8px; }
.hero .mark { width: 76px; height: 71px; display: block; margin-bottom: 24px; }
.hero h1 { font-size: 2.75rem; line-height: 1.1; margin: 0 0 14px; letter-spacing: -.01em; }
.lead { font-size: 1.1875rem; line-height: 1.65; margin: 0 0 28px; max-width: 34em; }
.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  font-weight: 650; text-decoration: none; padding: 13px 26px; border-radius: var(--radius-sm);
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.hero .fine { color: var(--muted); font-size: .875rem; margin: 14px 0 0; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin: 28px 0 0;
}
.card h2 { font-size: 1rem; margin: 0 0 6px; }
.card p { margin: 0; color: var(--muted); }
.card p + p { margin-top: 8px; }

.links { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.links a {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 22px; text-decoration: none; color: var(--text); font-weight: 600;
}
.links a span { display: block; color: var(--muted); font-weight: 400; font-size: .9375rem; }
.links a:hover { border-color: var(--accent); }

/* Documents */
.doc h1 { font-size: 2rem; line-height: 1.25; margin: 24px 0 12px; }
.doc .meta { margin: 0 0 20px; color: var(--muted); font-size: .9375rem; }
.doc .meta p { margin: 0; line-height: 1.6; }
.doc h2 { font-size: 1.3125rem; line-height: 1.4; margin: 44px 0 10px; scroll-margin-top: 16px; }
.doc h3 { font-size: 1.0625rem; line-height: 1.5; margin: 26px 0 6px; }
.doc p { margin: 0 0 14px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 1.5em; }
.doc li { margin: 0 0 8px; }
.doc li::marker { color: var(--muted); }

.toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px 12px; margin: 24px 0 0; }
.toc h2 { font-size: 1rem; margin: 0 0 8px; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 28px; }
.toc li { margin: 0 0 6px; break-inside: avoid; }

/* Tables: one card per row at every width (the same as in the app). The header row is kept for
   screen readers and each cell repeats its column name above its value. */
.table-wrap { margin: 6px 0 18px; }
.table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; }
.table-wrap table { width: 100%; }
.table-wrap tbody { display: grid; gap: 12px; }
.table-wrap tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px 8px; }
.table-wrap td { margin: 0 0 10px; overflow-wrap: anywhere; }
.table-wrap td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.table-wrap td.key { font-weight: 650; }
.table-wrap td.key::before { display: none; }

.doc-note { color: var(--muted); font-size: .875rem; margin: 40px 0 0; }

mark.todo { background: var(--mark); color: inherit; border-radius: 6px; padding: 0 4px; text-decoration: underline wavy var(--accent); text-underline-offset: 3px; }

/* Support */
.faq h2 { font-size: 1.1875rem; line-height: 1.45; margin: 34px 0 6px; }
.faq p { margin: 0 0 12px; }
.faq ul, .faq ol { margin: 0 0 14px; padding-left: 1.5em; }
.faq li { margin: 0 0 6px; }
.page-title { font-size: 2rem; line-height: 1.25; margin: 24px 0 12px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 24px 0 36px; color: var(--muted); font-size: .875rem; }
.site-footer p { margin: 0 0 10px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 12px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }

@media (min-width: 720px) {
  :root { --gutter: 24px; }
  .hero { padding-top: 80px; }
  .hero h1 { font-size: 3.5rem; }
  .doc h1, .page-title { font-size: 2.5rem; }
  .links { grid-template-columns: repeat(3, 1fr); }
  .table-wrap tr { padding: 16px 24px 8px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .skip { display: none; } body { background: #fff; color: #000; } }