/* Public docs styles */
#content-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px 40px;
  background: var(--bg);
}
#doc-content {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 15px;
}
#doc-content h1 { font-size: 2em; color: var(--purple); border-bottom: 1px solid var(--bg-lighter); padding-bottom: 12px; margin-bottom: 20px; }
#doc-content h2 { font-size: 1.5em; color: var(--cyan); margin: 28px 0 12px; }
#doc-content h3 { font-size: 1.2em; color: var(--green); margin: 20px 0 8px; }
#doc-content p { margin: 12px 0; }
#doc-content code { background: var(--bg-lighter); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
#doc-content pre { background: var(--bg-light); padding: 16px; border-radius: 8px; overflow-x: auto; margin: 16px 0; }
#doc-content pre code { background: none; padding: 0; font-size: 13px; }
#doc-content ul, #doc-content ol { margin: 12px 0; padding-left: 24px; }
#doc-content li { margin: 4px 0; }
#doc-content blockquote { border-left: 4px solid var(--purple); margin: 16px 0; padding: 4px 20px; color: var(--comment); font-style: italic; }
#doc-content a { color: var(--cyan); text-decoration: none; }
#doc-content a:hover { text-decoration: underline; }
#doc-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
#doc-content th, #doc-content td { border: 1px solid var(--bg-lighter); padding: 8px 12px; text-align: left; }
#doc-content th { background: var(--bg-light); }
#doc-content img { max-width: 100%; border-radius: 4px; }

/* Auth */
#auth-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}
#login-card {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
#login-card h1 { text-align: center; color: var(--purple); margin-bottom: 24px; font-size: 1.5em; }
#form-tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid var(--bg-lighter); }
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--comment);
  padding: 8px;
  cursor: pointer;
  font-size: 14px;
}
.auth-tab.active { color: var(--purple); border-bottom: 2px solid var(--purple); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input {
  background: var(--bg);
  border: 1px solid var(--bg-lighter);
  color: var(--fg);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
}
.auth-form input:focus { border-color: var(--purple); }
.auth-form button {
  background: var(--purple);
  color: var(--bg);
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}
.auth-form button:hover { opacity: 0.9; }
.auth-error { color: var(--red); font-size: 13px; display: none; }
.auth-success { color: var(--green); font-size: 13px; display: none; }

@media (max-width: 768px) {
  #content-area { padding: 16px; }
  #doc-content { font-size: 14px; }
}