/* --- Page shell -------------------------------------------------------- */
.docs-main { max-width:1280px; margin:0 auto; padding:110px 30px 100px; }
.docs-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:36px; }

.api-status {
  margin-bottom:20px; padding:12px 14px; border:1px solid rgba(203,155,81,.3);
  background:rgba(203,155,81,.08); color:#e3c98a; font-size:13px;
}

.account-bar { display:flex; align-items:center; gap:14px; }
.account-status { color:#9298a1; font-size:13px; }
#login-btn, #logout-btn { min-height:36px; padding:0 16px; font-size:12px; }
.admin-tools-btn {
  margin-left:auto;
  opacity:0;
  border-color:transparent !important;
  background:transparent !important;
  color:transparent !important;
  cursor:default;
}
.admin-tools-btn:hover { opacity:0; }

/* --- Sidebar + content layout ------------------------------------------- */
.docs-layout { display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }

.docs-sidebar { position:sticky; top:100px; }
.docs-category { margin-bottom:26px; }
.docs-category-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.docs-category-name {
  font:700 11px "Space Grotesk", sans-serif; text-transform:uppercase;
  letter-spacing:.08em; color:#767c86;
}
.docs-nav-list { list-style:none; margin:0; padding:0; }
.docs-nav-item {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-left:2px solid transparent; padding:7px 0 7px 12px; cursor:pointer;
}
.docs-nav-item:hover { border-left-color:var(--line); }
.docs-nav-item.active { border-left-color:#f6e27a; }
.docs-nav-title { color:#a7acb4; font-size:13.5px; flex:1; }
.docs-nav-item.active .docs-nav-title { color:#f6e27a; font-weight:700; }
.docs-nav-item:hover .docs-nav-title { color:#e6e8eb; }
.docs-nav-empty { color:#565b64; font-size:12px; padding:6px 0 6px 12px; }
.docs-nav-controls { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.docs-nav-delete {
  background:none; border:0; color:#6d7078; font-size:16px; line-height:1; cursor:pointer;
  padding:2px 6px; opacity:0; transition:.15s;
}
.docs-category:hover .docs-nav-delete, .docs-nav-item:hover .docs-nav-delete { opacity:1; }
.docs-nav-delete:hover { color:#e8a4a4; }
.docs-nav-move, .docs-nav-edit {
  background:none; border:0; color:#6d7078; font-size:12px; line-height:1; cursor:pointer;
  padding:3px 5px; opacity:0; transition:.15s;
}
.docs-category:hover .docs-nav-move, .docs-nav-item:hover .docs-nav-move,
.docs-category:hover .docs-nav-edit { opacity:1; }
.docs-nav-move:hover, .docs-nav-edit:hover { color:#f6e27a; }
.docs-nav-move:disabled { opacity:.15 !important; cursor:default; }
.docs-nav-move:disabled:hover { color:#6d7078; }

.docs-admin-bar { display:flex; gap:10px; margin-bottom:30px; }

.docs-content { max-width:760px; }
.docs-content h1 { font:700 34px "Space Grotesk", sans-serif; margin:0 0 6px; letter-spacing:-.01em; }
.docs-content-meta { color:#767c86; font-size:13px; margin-bottom:32px; }
.docs-content-admin-actions { display:flex; gap:10px; float:right; }

/* --- Rendered markdown body ---------------------------------------------- */
.docs-rendered-body { color:#c3c7cd; font-size:15px; line-height:1.75; clear:both; }
.docs-rendered-body h1, .docs-rendered-body h2, .docs-rendered-body h3 {
  font-family:"Space Grotesk", sans-serif; color:#eef0f3; margin:36px 0 14px;
}
.docs-rendered-body h1 { font-size:26px; }
.docs-rendered-body h2 { font-size:21px; }
.docs-rendered-body h3 { font-size:17px; }
.docs-rendered-body p { margin:0 0 18px; }
.docs-rendered-body a { color:#e3c98a; text-decoration:underline; text-underline-offset:2px; }
.docs-rendered-body a:hover { color:#f6e27a; }
.docs-rendered-body ul, .docs-rendered-body ol { margin:0 0 18px; padding-left:22px; }
.docs-rendered-body li { margin-bottom:6px; }
.docs-rendered-body code {
  background:rgba(255,255,255,.06); padding:2px 6px; font-size:.9em;
  font-family:"SF Mono", Consolas, monospace; color:#f6e27a;
}
.docs-rendered-body pre {
  background:#0a0b0d; border:1px solid var(--line); padding:16px 18px;
  overflow-x:auto; margin:0 0 18px;
}
.docs-rendered-body pre code { background:none; padding:0; color:#c3c7cd; }
.docs-rendered-body blockquote {
  border-left:2px solid var(--gold); margin:0 0 18px; padding:2px 0 2px 18px; color:#9298a1;
}
.docs-rendered-body img { max-width:100%; }
.docs-rendered-body hr { border:0; border-top:1px solid var(--line); margin:32px 0; }
.docs-rendered-body table { border-collapse:collapse; margin:0 0 18px; width:100%; }
.docs-rendered-body th, .docs-rendered-body td { border:1px solid var(--line); padding:8px 12px; text-align:left; }
.docs-rendered-body th { color:#eef0f3; font-family:"Space Grotesk", sans-serif; }

/* Embedded media in rendered post/document content */
.embed-image {
  display:block; max-width:100%; max-height:480px; border:1px solid var(--line);
  margin:18px 0; border-radius:2px;
}
.embed-video-frame {
  position:relative; width:100%; max-width:640px; aspect-ratio:16/9;
  margin:22px 0; border:1px solid var(--line); background:#000;
}
.embed-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
video.embed-video { display:block; max-width:100%; max-height:480px; margin:18px 0; border:1px solid var(--line); background:#000; }

.docs-markdown-hint { font-weight:400; text-transform:none; letter-spacing:0; color:#767c86; }

/* --- Shared modal/form styling (used across auth, admin, category, document) --- */
.forum-modal {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(4,4,5,.75); padding:20px;
}
.forum-modal[hidden] { display:none; }
.forum-modal-panel {
  width:min(560px, 100%); max-height:85vh; overflow-y:auto;
  background:#101216; border:1px solid var(--line); padding:36px; position:relative;
}
.forum-modal-panel-wide { width:min(720px, 100%); }
.forum-modal-panel h2 { font:700 24px "Space Grotesk", sans-serif; margin:0 0 24px; }
.forum-modal-close {
  position:absolute; top:18px; right:18px; background:none; border:0; color:#8d929b;
  font-size:22px; line-height:1; cursor:pointer; padding:4px;
}
.forum-modal-close:hover { color:#fff; }

.forum-modal-panel form label {
  display:block; margin-bottom:18px; font-size:11px; font-weight:700;
  color:#9ea5af; text-transform:uppercase; letter-spacing:.07em;
}
.forum-modal-panel form input,
.forum-modal-panel form select,
.forum-modal-panel form textarea {
  display:block; width:100%; margin-top:8px; padding:12px 13px; background:#090a0d;
  border:1px solid var(--line); color:#eef0f3; font:500 14px Inter, sans-serif;
  transition:.2s; resize:vertical;
}
.forum-modal-panel form textarea { font-family:"SF Mono", Consolas, monospace; font-size:13px; line-height:1.6; }
.forum-modal-panel form input:focus,
.forum-modal-panel form select:focus,
.forum-modal-panel form textarea:focus { outline:none; border-color:#cb9b51; background:#0d0e12; }
.forum-modal-panel form input::placeholder,
.forum-modal-panel form textarea::placeholder { color:#565b64; }

.forum-modal-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.form-error { color:#e8a4a4; font-size:13px; margin:14px 0 0; }
.form-success { color:#8fd19e; font-size:13px; margin:14px 0 0; }

.reset-password-result { margin-top:16px; padding:16px; border:1px solid rgba(203,155,81,.3); background:rgba(203,155,81,.06); }
.reset-password-value-row { display:flex; align-items:center; gap:10px; margin-top:10px; }
.reset-password-value {
  flex:1; font:700 14px "SF Mono", Consolas, monospace; color:#f6e27a;
  background:#090a0d; border:1px solid var(--line); padding:8px 12px; letter-spacing:.02em;
  overflow-x:auto; white-space:nowrap;
}
.reset-password-value-row button { flex-shrink:0; min-height:32px; padding:0 14px; font-size:11px; }
.forum-empty { color:#767c86; font-size:14px; padding:20px 0; }

/* Makes content swaps (sidebar populating, a document loading in)
   read as an intentional, smooth reveal rather than a flash of
   replaced text. Short duration on purpose — this is polish for an
   already-fast transition, not something meant to be noticed itself. */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { animation:fadeIn .25s ease; }
.forum-error-inline { color:#e8a4a4; font-size:13px; padding:20px 0; }

.delete-btn {
  background:none; border:1px solid rgba(232,164,164,.35); color:#e8a4a4;
  font-size:11px; font-weight:700; padding:4px 10px; cursor:pointer; transition:.2s;
  text-transform:uppercase; letter-spacing:.04em;
}
.delete-btn:hover { background:rgba(232,164,164,.1); border-color:#e8a4a4; }

/* --- Auth modal specifics ------------------------------------------------ */
.auth-modal-panel { width:min(380px, 100%); text-align:center; }
.auth-modal-panel .auth-heading { font:700 22px "Space Grotesk", sans-serif; margin:0 0 8px; }
.auth-subheading { color:#8d929b; font-size:13px; margin:0 0 26px; }
.auth-tabs {
  display:flex; gap:4px; margin-bottom:26px; padding:4px;
  background:#090a0d; border:1px solid var(--line);
}
.auth-tab-btn {
  flex:1; padding:10px 4px; background:none; border:0;
  color:#8d929b; font:700 13px "Space Grotesk", sans-serif; cursor:pointer; transition:.2s;
}
.auth-tab-btn.active { color:#08090b; background:#f6e27a; }
.auth-tab-btn:not(.active):hover { color:#e6e8eb; }
#auth-form { text-align:left; }
.auth-submit { width:100%; margin-top:6px; }

/* --- Site Admin tools ----------------------------------------------------- */
.admin-tools-hint { color:#7e848e; font-size:13px; margin:0 0 22px; line-height:1.6; }
.admin-tools-hint code { color:#cb9b51; background:rgba(203,155,81,.1); padding:1px 5px; }
#admin-key-form { display:flex; gap:12px; align-items:flex-end; margin-bottom:10px; }
#admin-key-form label { flex:1; margin-bottom:0; }
#admin-key-form .forum-modal-actions { margin:0; }
.admin-user-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.admin-user-row:last-child { border-bottom:0; }
.admin-user-name { font:700 14px "Space Grotesk", sans-serif; color:#eef0f3; }
.admin-user-name .badge-admin { color:#f6e27a; font-size:11px; margin-left:8px; text-transform:uppercase; letter-spacing:.05em; }
.admin-user-meta { color:#767c86; font-size:12px; margin-top:2px; }
.admin-user-actions button { min-height:32px; padding:0 14px; font-size:11px; }

.admin-invites-section { margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.admin-invites-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.admin-invites-head h3 { font:700 16px "Space Grotesk", sans-serif; margin:0; }
.admin-invite-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 4px; border-bottom:1px solid var(--line);
}
.admin-invite-row:last-child { border-bottom:0; }
.admin-invite-code {
  font:700 14px "SF Mono", Consolas, monospace; color:#f6e27a; letter-spacing:.03em;
}
.invite-used-badge {
  color:#767c86; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--line); padding:5px 10px;
}

/* --- Toast ----------------------------------------------------------------- */
.forum-toast {
  position:fixed; left:50%; bottom:30px; transform:translate(-50%, 20px);
  max-width:min(480px, calc(100vw - 40px)); background:#161821; border:1px solid rgba(203,155,81,.4);
  color:#eef0f3; font-size:13px; line-height:1.6; padding:16px 20px; z-index:999;
  opacity:0; pointer-events:none; transition:.25s ease;
}
.forum-toast.visible { opacity:1; transform:translate(-50%, 0); }

/* --- Mobile ----------------------------------------------------------------- */
@media (max-width: 800px) {
  .docs-main { padding:130px 20px 80px; }
  .docs-layout { grid-template-columns:1fr; gap:36px; }
  .docs-sidebar { position:static; border-bottom:1px solid var(--line); padding-bottom:20px; }
  .account-bar { flex-wrap:wrap; }
  .admin-tools-btn { margin-left:0; }
  .forum-modal-panel { padding:22px; }
  .forum-modal-actions { justify-content:stretch; }
  .forum-modal-actions button { width:100%; }
  #admin-key-form { flex-direction:column; align-items:stretch; }
  #admin-key-form .forum-modal-actions { margin-top:6px; }
  #admin-key-form .forum-modal-actions button { width:100%; }
  .admin-user-row { flex-wrap:wrap; gap:10px; }
  .docs-admin-bar { flex-wrap:wrap; }
  .docs-admin-bar button { flex:1; }
}