:root {
  color-scheme: light;
  --ink: #111827;
  --muted: #5f6b7b;
  --line: #dce2ea;
  --soft: #f4f6fa;
  --page: #ffffff;
  --panel: #ffffff;
  --sidebar: #fafbfc;
  --primary: #633cff;
  --primary-dark: #4825d9;
  --green: #087a55;
  --amber: #9a5b00;
  --brand-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f7f8ff;
  --muted: #aab3c5;
  --line: #263047;
  --soft: #11192a;
  --page: #070b14;
  --panel: #0d1423;
  --sidebar: #0a101d;
  --primary-dark: #8d73ff;
  --green: #45d59d;
  --amber: #ffc66d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: var(--brand-font);
  line-height: 1.62;
}
a { color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: #fff; padding: 10px 14px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 94%, transparent);
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; }
.brand strong { color: var(--primary); }
.top-actions, .quick-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top-actions a, .top-actions button, .quick-actions a, .support-box a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 6px;
  border: 0;
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.primary { color: #fff; background: var(--primary); }
.primary:hover { background: var(--primary-dark); }
.secondary, .quiet { color: var(--ink); background: var(--panel); border: 1px solid var(--line) !important; }
.top-actions .tool { min-width: 42px; padding: 0 12px; }

.guide-layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); max-width: 1440px; margin: 0 auto; }
.sidebar {
  position: sticky;
  top: 68px;
  align-self: start;
  height: calc(100vh - 68px);
  overflow: auto;
  padding: 30px 22px;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
}
.sidebar-title { margin: 0 0 16px; font-weight: 850; }
.sidebar nav { display: grid; gap: 3px; }
.sidebar nav a { padding: 8px 10px; border-radius: 6px; color: #4c5869; text-decoration: none; font-size: 14px; }
.sidebar nav a:hover { color: var(--primary-dark); background: #ede9ff; }

main { width: min(100%, 980px); padding: 54px 64px 80px; }
section { padding: 18px 0 64px; scroll-margin-top: 82px; }
section + section { border-top: 1px solid var(--line); padding-top: 58px; }
.intro { padding-top: 6px; }
.eyebrow, .section-number { margin: 0 0 8px; color: var(--primary); font-size: 13px; font-weight: 850; text-transform: uppercase; }
h1 { max-width: 760px; margin: 0 0 18px; font-size: 48px; line-height: 1.08; letter-spacing: 0; }
h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.2; letter-spacing: 0; }
h3 { margin: 34px 0 12px; font-size: 21px; }
p, li { color: color-mix(in srgb, var(--ink) 78%, var(--muted)); }
.lead { max-width: 760px; margin: 0 0 24px; color: color-mix(in srgb, var(--ink) 82%, var(--muted)); font-size: 19px; }
.quick-actions { margin-bottom: 34px; }

figure { margin: 0; }
figure img { display: block; max-width: 100%; height: auto; }
figcaption { padding-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.wide-shot { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.wide-shot img { width: 100%; border-radius: 5px; }
.phone-grid { display: grid; gap: 22px; align-items: start; margin: 28px 0; }
.phone-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phone-grid figure, .phone-feature { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.phone-grid img, .phone-feature img { width: min(100%, 390px); margin: 0 auto; border-radius: 5px; }
.phone-feature { width: min(100%, 470px); margin: 28px auto; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; }
.steps div { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.steps b { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); }
.steps span { color: color-mix(in srgb, var(--ink) 76%, var(--muted)); }
.flow-list li, main ol li { margin: 8px 0; padding-left: 4px; }
.notice { margin: 24px 0; padding: 16px 18px; border-left: 4px solid var(--primary); background: #f0edff; color: #34275e; }
.notice.soft { border-left-color: #2196f3; background: #eef7ff; color: #214768; }
.check-list { padding: 0; list-style: none; }
.check-list li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid #edf0f4; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.mode-grid article { display: grid; gap: 6px; padding: 17px; border: 1px solid var(--line); border-radius: 8px; }
.mode-grid span { color: var(--muted); font-size: 14px; }
.admin-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.admin-capabilities article { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.admin-capabilities strong { color: var(--ink); font-size: 17px; }
.admin-capabilities span { color: var(--muted); font-size: 14px; }
.inline-action { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 6px; text-decoration: none; font-weight: 800; }

.status-table { margin-top: 24px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.status-row { display: grid; grid-template-columns: 1fr 130px 1.7fr; gap: 16px; padding: 13px 16px; border-top: 1px solid var(--line); align-items: center; }
.status-row:first-child { border-top: 0; }
.status-row.heading { background: var(--soft); font-weight: 800; }
.status-row span:last-child { color: var(--muted); }
.ready { color: var(--green); }
.progress { color: var(--amber); }
.support-box { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.support-box h3, .support-box p { margin: 0; }
footer { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
footer span { margin-right: auto; }

html[data-theme="dark"] .notice { background: #18132f; color: #d9d0ff; }
html[data-theme="dark"] .notice.soft { background: #0d2233; color: #c9e9ff; }
html[data-theme="dark"] .check-list li { border-bottom-color: var(--line); }
html[data-theme="dark"] .sidebar nav a:hover { background: #20184c; }

@media (max-width: 900px) {
  .guide-layout { display: block; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 20px; }
  .sidebar-title { margin-bottom: 8px; }
  .sidebar nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .sidebar nav a { white-space: nowrap; background: var(--panel); border: 1px solid var(--line); }
  main { padding: 36px 24px 64px; }
  h1 { font-size: 38px; }
}

@media (max-width: 640px) {
  .topbar { height: auto; min-height: 64px; padding: 10px 16px; }
  .top-actions .quiet { display: none; }
  .brand span { font-size: 14px; }
  main { padding: 30px 18px 56px; }
  section { padding-bottom: 48px; }
  section + section { padding-top: 44px; }
  h1 { font-size: 33px; }
  h2 { font-size: 27px; }
  .lead { font-size: 17px; }
  .steps, .phone-grid.two, .mode-grid, .admin-capabilities { grid-template-columns: 1fr; }
  .status-row { grid-template-columns: 1fr auto; gap: 5px 12px; }
  .status-row span:last-child { grid-column: 1 / -1; }
  .status-row.heading span:last-child { display: none; }
  .support-box { align-items: flex-start; flex-direction: column; }
}

@media print {
  .topbar, .sidebar, .quick-actions { display: none !important; }
  .guide-layout { display: block; }
  main { width: 100%; padding: 0; }
  section { break-inside: auto; }
  figure, .notice, .status-table { break-inside: avoid; }
  a { text-decoration: none; }
}