.docs-shell { width: min(1120px, 100%); margin: auto; }
.docs-card { padding: 32px; border: 1px solid var(--line); border-radius: 26px; background: rgba(10,28,42,.9); box-shadow: var(--shadow); }
.docs-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.docs-nav a { margin-inline-start: auto; color: var(--accent); text-decoration: none; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 42px; align-items: center; }
.hero-grid h1 { font-size: clamp(2.5rem,7vw,5.2rem); }
.hero-grid .intro { font-size: 1.05rem; }
.flow { display: grid; gap: 10px; }
.flow div { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(1,12,20,.35); }
.flow b { display: block; color: var(--accent); font-size: .72rem; letter-spacing: .08em; }
.setup { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; margin-top: 50px; }
.setup-panel { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(3,17,27,.45); }
.setup-panel h2 { margin-bottom: 12px; font-size: 1.7rem; }
.setup-panel input, .setup-panel textarea { width: 100%; margin: 6px 0 13px; padding: 13px; border: 1px solid rgba(202,230,242,.22); border-radius: 12px; color: white; background: #061823; direction: ltr; text-align: left; letter-spacing: 0; font-size: .95rem; }
.setup-panel label { font-size: .85rem; }
.setup-panel textarea { min-height: 85px; resize: vertical; }
.setup-panel .primary-button { margin-top: 4px; }
.result { margin-top: 20px; }
.result[hidden] { display: none; }
.key-box { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #040f17; direction: ltr; text-align: left; overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: .78rem; }
.warning { padding: 12px; border-right: 3px solid #ffb66d; color: #ffd2a3; background: rgba(255,156,72,.08); font-size: .82rem; line-height: 1.5; }
pre { overflow: auto; padding: 15px; border-radius: 13px; color: #bdeee4; background: #020b11; direction: ltr; text-align: left; font-size: .76rem; line-height: 1.5; }
.features { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; }
.features div { padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
.features strong { display: block; margin-bottom: 7px; color: var(--accent); }
@media (max-width: 800px) {
  .hero-grid, .setup { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .docs-card { padding: 22px; }
  .hero-grid { gap: 20px; }
}