* { box-sizing: border-box; }
body {
  --guide-bg: #f4f4f4;
  --guide-surface: #ffffff;
  --guide-border: #dbe3ea;
  --guide-text: #222222;
  --guide-muted: #64748b;
  --guide-accent: #0077b5;
  --guide-step: #e8f0f5;
  --guide-code: #f1f5f9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--guide-bg);
  color: var(--guide-text);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  transition: background .2s ease, color .2s ease;
}

body.dark-mode {
  --guide-bg: #121212;
  --guide-surface: #181818;
  --guide-border: #333333;
  --guide-text: #ffffff;
  --guide-muted: #a1a1aa;
  --guide-accent: #38a9df;
  --guide-step: #222222;
  --guide-code: #0a0a0a;
  --bg: #121212;
  --card: #181818;
  --text: #ffffff;
  --muted: #a1a1aa;
}

body.dark-mode > header,
body.dark-mode > footer { background: var(--guide-surface); border-color: var(--guide-border); }
.guide-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.header { border-bottom: 1px solid var(--guide-border); padding-bottom: 20px; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header h1 { margin: 0; color: var(--guide-text); font-size: 2rem; display: flex; align-items: center; gap: 12px; }
.header h1 i { color: var(--guide-accent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.back-btn, .theme-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--guide-accent); text-decoration: none; font-weight: 600; background: var(--guide-surface); padding: 8px 14px; border-radius: 6px; border: 1px solid var(--guide-border); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.theme-button { cursor: pointer; font-size: 1rem; }
.back-btn:hover, .theme-button:hover { background: var(--guide-accent); color: #fff; border-color: var(--guide-accent); }
.card { background: var(--guide-surface); border: 1px solid var(--guide-border); border-radius: 8px; padding: 24px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(15, 23, 42, .05); }
.card h2 { margin-top: 0; color: var(--guide-text); font-size: 1.3rem; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--guide-border); padding-bottom: 10px; }
.card h2 i { color: var(--guide-accent); }
p, li { color: var(--guide-muted); font-size: .98rem; }
ul, ol { padding-left: 20px; }
li { margin-bottom: 8px; }
.workflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.step { background: var(--guide-step); border: 1px solid var(--guide-border); padding: 16px; border-radius: 6px; text-align: center; }
.step-num { background: var(--guide-accent); color: #fff; font-weight: bold; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px auto; }
.step h4 { margin: 0 0 8px 0; color: var(--guide-text); }
.step p { font-size: .85rem; margin: 0; }
pre { background: var(--guide-code); border: 1px solid var(--guide-border); border-radius: 6px; padding: 14px; overflow-x: auto; color: var(--guide-accent); font-family: "Courier New", Courier, monospace; font-size: .9rem; }
.warning-box { background: rgba(255, 171, 0, .1); border-left: 4px solid #ffab00; padding: 15px; border-radius: 4px; margin-top: 15px; }
.warning-box h4 { margin: 0 0 5px 0; color: #b36b00; }
body.dark-mode .warning-box h4 { color: #ffab00; }
footer { text-align: center; color: var(--guide-muted); font-size: .85rem; margin-top: 40px; }

@media (max-width: 640px) {
  .guide-container { padding: 24px 16px; }
  .header { align-items: flex-start; flex-direction: column; }
  .header h1 { font-size: 1.55rem; }
  .header-actions { width: 100%; }
  .back-btn { flex: 1; }
}