/* SecuGen Connect — Developer Guide doc viewer */

:root[data-theme="dark"]{
  --bg-deep:#081022;
  --bg-surface:#101b3a;
  --bg-card:#142347;
  --bg-card-hover:#1d2d58;
  --border:rgba(99,132,255,.18);
  --border-strong:rgba(99,132,255,.35);
  --accent:#4f7df9;
  --accent-light:#7ca3ff;
  --accent-glow:rgba(79,125,249,.20);
  --text-white:#f0f4ff;
  --text-mid:#bcc7e3;
  --text-dim:#8b9cc7;

  --code-bg:#0b1430;
  --code-border:rgba(99,132,255,.18);
  --code-ink:#dde6ff;
  --code-comment:#7c8db5;
  --code-key:#7ca3ff;
  --code-string:#9cd9b7;
  --code-num:#ffd58a;

  --table-row:rgba(255,255,255,.025);
  --table-head-bg:linear-gradient(180deg,rgba(79,125,249,.18),rgba(79,125,249,.10));
  --table-shadow:0 12px 28px rgba(0,0,0,.35);
  --table-hover:rgba(79,125,249,.10);

  --shadow:0 12px 32px rgba(0,0,0,.35);
  --hairline:rgba(255,255,255,.08);

  --node-bg:#142347;
  --node-bg-grad:linear-gradient(160deg,rgba(79,125,249,.18),rgba(20,35,71,1) 60%);
  --node-border:rgba(99,132,255,.35);
  --layer-bg:rgba(79,125,249,.05);
  --layer-border:rgba(99,132,255,.18);
  --arrow:rgba(124,163,255,.55);
}

:root[data-theme="light"]{
  --bg-deep:#f8fafc;
  --bg-surface:#ffffff;
  --bg-card:#ffffff;
  --bg-card-hover:#f1f5f9;
  --border:#e2e8f0;
  --border-strong:rgba(33,150,243,.35);
  --accent:#2196f3;
  --accent-light:#34a6f7;
  --accent-glow:rgba(33,150,243,.10);
  --text-white:#0f172a;
  --text-mid:#334155;
  --text-dim:#64748b;

  --code-bg:#f1f5f9;
  --code-border:#dbe3ec;
  --code-ink:#0f172a;
  --code-comment:#64748b;
  --code-key:#1d4ed8;
  --code-string:#0f766e;
  --code-num:#a16207;

  --table-row:rgba(15,23,42,.025);
  --table-head-bg:linear-gradient(180deg,#eef4fb,#e3edf7);
  --table-shadow:0 6px 18px rgba(15,23,42,.06);
  --table-hover:rgba(33,150,243,.06);

  --shadow:0 6px 18px rgba(15,23,42,.08);
  --hairline:rgba(15,23,42,.08);

  --node-bg:#ffffff;
  --node-bg-grad:linear-gradient(160deg,#f0f7ff,#ffffff 60%);
  --node-border:rgba(33,150,243,.35);
  --layer-bg:#f8fbff;
  --layer-border:#e2e8f0;
  --arrow:#94a3b8;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  font-family:'Outfit','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-deep);
  color:var(--text-mid);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* === Top bar === */
.dg-top{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(8,16,34,.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
:root[data-theme="light"] .dg-top{background:rgba(255,255,255,.92)}
.dg-brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--text-white);text-decoration:none;
  font:700 18px 'Outfit',sans-serif;letter-spacing:-.01em;
}
.dg-brand .dg-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.dg-back{
  margin-left:18px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  border:1px solid var(--border);
  color:var(--text-mid);text-decoration:none;
  font-size:13px;font-weight:600;
  transition:all .15s ease;
}
.dg-back:hover{border-color:var(--border-strong);color:var(--text-white);background:var(--accent-glow)}
.dg-actions{display:flex;align-items:center;gap:8px}
.dg-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-card);
  color:var(--text-white);
  font:600 13px 'Outfit',sans-serif;
  cursor:pointer;
  transition:all .15s ease;
}
.dg-btn:hover{border-color:var(--border-strong);background:var(--bg-card-hover)}
.dg-btn.primary{
  border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent),var(--accent-light));
  color:#fff;
}
.dg-btn.primary:hover{filter:brightness(1.08)}

/* === Document body === */
.dg-doc{
  max-width:880px;
  margin:36px auto 80px;
  padding:0 28px;
}
.dg-doc-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:var(--accent-glow);
  border:1px solid var(--border-strong);
  color:var(--accent);
  font:600 11px 'Outfit',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
}
.dg-doc h1{
  font-family:'Outfit',sans-serif;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.12;letter-spacing:-.02em;
  color:var(--text-white);
  margin:14px 0 10px;
  font-weight:800;
}
.dg-doc .dg-lead{
  font-size:17px;line-height:1.55;
  color:var(--text-mid);
  margin:0 0 22px;
  max-width:720px;
}
.dg-doc h2{
  font-family:'Outfit',sans-serif;
  font-size:24px;line-height:1.25;letter-spacing:-.01em;
  color:var(--text-white);
  margin:42px 0 14px;
  font-weight:700;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.dg-doc h3{
  font-family:'Outfit',sans-serif;
  font-size:18px;line-height:1.3;
  color:var(--text-white);
  margin:28px 0 10px;
  font-weight:700;
}
.dg-doc h4{
  font-family:'Outfit',sans-serif;
  font-size:15px;line-height:1.35;
  color:var(--text-white);
  margin:22px 0 6px;
  font-weight:700;
}
.dg-doc p{margin:0 0 14px;font-size:15px;line-height:1.7}
.dg-doc ul,.dg-doc ol{margin:0 0 16px;padding-left:24px}
.dg-doc li{margin:6px 0;font-size:15px;line-height:1.6}
.dg-doc strong,.dg-doc b{color:var(--text-white);font-weight:700}
.dg-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.dg-doc a:hover{color:var(--accent-light)}

/* Inline code */
.dg-doc code{
  font-family:'JetBrains Mono','Menlo',monospace;
  font-size:.88em;
  padding:2px 6px;
  border-radius:5px;
  background:var(--accent-glow);
  border:1px solid var(--border);
  color:var(--accent);
}
:root[data-theme="light"] .dg-doc code{color:#1d4ed8}

/* Code blocks */
.dg-doc pre{
  position:relative;
  margin:18px 0 24px;
  padding:18px 20px 18px 22px;
  background:var(--code-bg);
  border:1px solid var(--code-border);
  border-radius:12px;
  overflow-x:auto;
  font-family:'JetBrains Mono','Menlo',monospace;
  font-size:13px;line-height:1.6;
  color:var(--code-ink);
  box-shadow:var(--shadow);
}
.dg-doc pre::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  border-radius:12px 0 0 12px;
  background:linear-gradient(180deg,var(--accent),var(--accent-light));
  opacity:.65;
}
.dg-doc pre code{
  background:transparent;border:0;padding:0;color:inherit;font-size:inherit;
}

/* Tables — fancy, sturdy, banded */
.dg-doc table{
  width:100%;border-collapse:separate;border-spacing:0;
  margin:18px 0 26px;
  font-size:14px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--table-shadow);
  background:var(--bg-card);
}
.dg-doc thead th{
  text-align:left;
  padding:12px 16px;
  background:var(--table-head-bg);
  color:var(--text-white);
  font-weight:700;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.dg-doc tbody td{
  padding:12px 16px;
  border-top:1px solid var(--hairline);
  vertical-align:top;
  color:var(--text-mid);
}
.dg-doc tbody tr:first-child td{border-top:0}
.dg-doc tbody tr:nth-child(even) td{background:var(--table-row)}
.dg-doc tbody tr:hover td{background:var(--table-hover)}
.dg-doc tbody td:first-child{color:var(--text-white);font-weight:600}

/* Callout */
.dg-callout{
  margin:18px 0 22px;
  padding:14px 18px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:linear-gradient(135deg,var(--accent-glow),transparent 80%);
  display:flex;gap:12px;align-items:flex-start;
  box-shadow:var(--shadow);
}
.dg-callout i{color:var(--accent);font-size:18px;margin-top:2px}
.dg-callout p{margin:0}
.dg-callout strong{color:var(--text-white)}

/* === Architecture diagram === */
.dg-arch{
  margin:18px 0 26px;
  padding:24px 22px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(160deg,var(--accent-glow),transparent 70%),var(--bg-card);
  box-shadow:var(--shadow);
}
.dg-arch-layer{
  position:relative;
  padding:14px 16px 16px;
  border:1px dashed var(--layer-border);
  background:var(--layer-bg);
  border-radius:12px;
  margin-bottom:6px;
}
.dg-arch-layer + .dg-arch-arrow{margin:6px auto}
.dg-arch-label{
  position:absolute;
  top:-9px;left:18px;
  padding:2px 10px;
  font:700 10px 'Outfit',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:999px;
}
.dg-arch-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.dg-arch-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dg-arch-row.cols-1{grid-template-columns:1fr;max-width:380px;margin:0 auto}
.dg-arch-row.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dg-arch-node{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:12px 14px;
  border:1px solid var(--node-border);
  border-radius:10px;
  background:var(--node-bg-grad);
  font-size:13px;
  color:var(--text-white);
  font-weight:600;
  transition:transform .15s ease, box-shadow .15s ease;
}
.dg-arch-node:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.16)}
.dg-arch-node i{color:var(--accent);font-size:14px}
.dg-arch-node .dg-arch-sub{font-size:11.5px;color:var(--text-dim);font-weight:500}
.dg-arch-node.compact{padding:8px 10px;font-size:11.5px;text-align:center;align-items:center;gap:2px}
.dg-arch-node.compact .dg-arch-sub{font-size:10px}
.dg-arch-arrow{
  width:1px;height:18px;
  background:var(--arrow);
  margin:6px auto;
  position:relative;
}
.dg-arch-arrow::after{
  content:'';position:absolute;left:50%;top:100%;
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--arrow);
  transform:translateX(-50%);
}
.dg-arch-bridge{
  padding:18px 18px 20px;
  border:1px solid var(--node-border);
  background:linear-gradient(160deg,var(--accent-glow),var(--node-bg) 70%);
  border-radius:12px;
  margin-bottom:6px;
}
.dg-arch-bridge h4{
  margin:0 0 10px;font-size:13px;color:var(--text-white);
  display:flex;align-items:center;gap:8px;
  font-family:'Outfit',sans-serif;
}
.dg-arch-bridge h4 i{color:var(--accent)}
.dg-arch-bridge .dg-arch-row{margin-bottom:0}

/* Footer */
.dg-foot{
  max-width:880px;margin:30px auto 60px;padding:18px 28px 0;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--text-dim);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.dg-foot a{color:var(--text-dim);text-decoration:none}
.dg-foot a:hover{color:var(--accent)}

/* === Print === */
@media print{
  :root,:root[data-theme="dark"],:root[data-theme="light"]{
    --bg-deep:#ffffff;--bg-surface:#ffffff;--bg-card:#ffffff;--bg-card-hover:#f1f5f9;
    --border:#cbd5e1;--border-strong:#94a3b8;
    --accent:#1d4ed8;--accent-light:#2563eb;--accent-glow:#eff6ff;
    --text-white:#0f172a;--text-mid:#1f2937;--text-dim:#475569;
    --code-bg:#f8fafc;--code-border:#cbd5e1;--code-ink:#0f172a;
    --code-comment:#475569;--code-key:#1d4ed8;--code-string:#0f766e;--code-num:#a16207;
    --table-row:#f8fafc;--table-head-bg:#eef4fb;--table-shadow:none;--table-hover:#eef4fb;
    --shadow:none;--hairline:#e2e8f0;
    --node-bg:#ffffff;--node-bg-grad:#ffffff;--node-border:#94a3b8;
    --layer-bg:#f8fafc;--layer-border:#cbd5e1;--arrow:#475569;
    color-scheme:light;
  }
  html,body{background:#fff!important;color:#0f172a!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .dg-top,.dg-foot,.dg-actions,.dg-back{display:none!important}
  .dg-doc{margin:0;max-width:none;padding:0 12mm}
  .dg-doc h1{font-size:24pt;page-break-after:avoid}
  .dg-doc h2{font-size:16pt;margin-top:18pt;page-break-after:avoid}
  .dg-doc h3{font-size:13pt;page-break-after:avoid}
  .dg-doc h4{font-size:11pt}
  .dg-doc p,.dg-doc li{font-size:10.5pt;line-height:1.55}
  .dg-doc pre,.dg-doc table,.dg-doc .dg-callout,.dg-arch{page-break-inside:avoid}
  .dg-doc pre{font-size:9pt;box-shadow:none}
  .dg-doc table{font-size:9.5pt;box-shadow:none}
  .dg-doc a{color:#1d4ed8;text-decoration:none}
  .dg-doc a[href^="http"]:after{content:" (" attr(href) ")";font-size:8.5pt;color:#64748b}
}

@media (max-width:780px){
  .dg-top{padding:12px 16px}
  .dg-back{display:none}
  .dg-doc{padding:0 18px;margin:24px auto 60px}
  .dg-doc h1{font-size:26px}
  .dg-doc h2{font-size:20px}
  .dg-btn{height:34px;padding:0 11px;font-size:12px}
  .dg-arch-row,.dg-arch-row.cols-5{grid-template-columns:1fr}
  .dg-arch-row.cols-2{grid-template-columns:1fr}
}