:root { --bg:#0f172a; --panel:#111827; --card:#0b1220; --muted:#9ca3af; --text:#e5e7eb; --link:#60a5fa; --border:#1f2937; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
}

/* Anti casual image download (cannot fully prevent) */
img, picture, figure img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
}
img.nodrag { -webkit-user-drag: none; }

/* Header */
.header { background: var(--panel); color: var(--text); padding: 10px 16px; border-bottom:1px solid var(--border); }
.header .logo img { height: 36px; vertical-align: middle; }
.header .navigation ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 16px; }
.header .navigation a { color: #eee; text-decoration: none; }

/* Footer */
.footer { margin-top: 40px; background: var(--panel); color: var(--muted); padding: 20px 16px; border-top:1px solid var(--border); }
.footer a { color: var(--text); }

/* Docs layout */
.docs-page .container { max-width: 1280px; margin: 0 auto; padding: 16px; }
.docs-layout { display: grid; grid-template-columns: 260px 1fr 240px; gap: 24px; align-items: start; }
.sidebar { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; position: sticky; top: 12px; }
.sidebar h2 { margin: 0 0 8px; font-size: 16px; color: var(--muted); font-weight:600; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 6px 0; }
.sidebar a { color: var(--text); text-decoration: none; }
.content { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 24px; min-height: 60vh; }
.content h1, .content h2, .content h3 { margin-top: 1.2em; }
.toc { position: sticky; top: 12px; background: var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; }
.toc-title { color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.breadcrumb { color: var(--muted); margin-bottom: 12px; }
.breadcrumb a { color: var(--link); text-decoration: none; }
.breadcrumb .sep { margin: 0 6px; color: var(--muted); }

/* Generic */
a { color: var(--link); }
pre, code { background: #0b1220; border: 1px solid var(--border); border-radius: 6px; }
pre { padding: 12px; overflow: auto; }

.hero-banner { background: var(--card); color: var(--text); padding: 20px 0; text-align: center; border-bottom:1px solid var(--border); }

.panel {
    max-width: 800px;
    margin: 0 auto;
}

.panel-logo {
    width: 100px;
}

.panel-title { font-size: 2em; margin-top: 10px; }

.subnav {
    margin-top: 10px;
}

.subnav a { color: var(--link); text-decoration: none; }

.subnav .sep {
    color: #ccc;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px;
}

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 15px; text-align: center; transition: transform 0.2s; }

.card:hover {
    transform: scale(1.05);
}

.link-underline { text-decoration: underline; cursor: pointer; }

/* --- Enhancements --- */
/* Header link hover and color override */
.header .navigation a { color: var(--text); }
.header .navigation a:hover { text-decoration: underline; }

/* Sidebar links + search input */
.sidebar a { display:block; padding:6px 8px; border-radius:6px; }
.sidebar a:hover { background:#0b1220; }
.sidebar a.active { background:#0b1220; outline:1px solid var(--border); color:#fff; }
.sidebar input[type="text"]{ width:100%; box-sizing:border-box; background:#0b1220; border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:6px; margin-bottom:8px; }

/* Content rich elements */
.content img { max-width:100%; height:auto; border:1px solid var(--border); border-radius:8px; }
.content img { cursor: zoom-in; }
/* Lightbox */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:9999; padding:32px; animation:lb-fade .18s ease; }
.lightbox-overlay img { max-width:90vw; max-height:90vh; box-shadow:0 8px 28px -4px rgba(0,0,0,.6); border:1px solid #334155; border-radius:10px; background:#0f172a; }
.lightbox-overlay .lb-close { position:absolute; top:14px; right:18px; color:#cbd5e1; font-size:20px; cursor:pointer; padding:4px 10px; line-height:1; border-radius:6px; background:rgba(30,41,59,.6); backdrop-filter:blur(4px); }
.lightbox-overlay .lb-close:hover { background:rgba(51,65,85,.85); color:#fff; }
@keyframes lb-fade { from { opacity:0; } to { opacity:1; } }
.content blockquote { margin:12px 0; padding:10px 12px; background:#0b1220; border-left:3px solid #60a5fa; border-radius:6px; color:#cbd5e1; }
.content table { width:100%; border-collapse: collapse; }
.content th, .content td { border:1px solid var(--border); padding:8px; }
.content thead th { background:#0b1220; }

/* Code blocks and copy button */
pre { position: relative; }
.copy-btn { position:absolute; right:8px; top:8px; background:#0b1220; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:4px 8px; cursor:pointer; font-size:12px; }
.copy-btn:hover { color:#fff; border-color:#2b3650; }

/* TOC styles */
.toc a { color: var(--text); text-decoration: none; display:block; padding:4px 6px; border-radius:6px; }
.toc a:hover { background:#0b1220; }
.toc a.active { background:#0b1220; outline:1px solid var(--border); color:#fff; }

/* Left sidebar (page sections as big blocks) */
#sidebar-toc ul { list-style:none; margin:0; padding:0; }
#sidebar-toc li { margin:8px 0; }
#sidebar-toc a { display:block; padding:10px 14px; background:#0b1220; border:1px solid var(--border); border-radius:8px; font-size:14px; font-weight:600; line-height:1.3; color:var(--text); text-decoration:none; position:relative; transition:.18s background,.18s border-color,.18s color; }
#sidebar-toc a:hover { background:#122035; border-color:#273247; }
#sidebar-toc a.active { background:#1a2842; border-color:#375394; color:#fff; box-shadow:0 0 0 1px #375394; }
#sidebar-toc a.active:before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#4f8cff; border-radius:4px 0 0 4px; }

/* Mobile adjustments */
@media (max-width: 980px){
    .docs-layout { grid-template-columns: 1fr; }
    .sidebar, .toc { position: static; }
    .sidebar { margin-bottom: 12px; }
    .toc { display:none; }
    .sidebar .mobile-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:6px 10px; background:#0b1220; border:1px solid var(--border); border-radius:6px; font-size:14px; margin-bottom:8px; }
    .sidebar.collapsed nav#sidebar-toc { display:none; }
    .sidebar.collapsed h2 { display:none; }
}

    /* Back to top button */
    #backTopBtn { position:fixed; right:20px; bottom:28px; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:#1d4ed8; color:#fff; font-size:22px; line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px -4px rgba(0,0,0,.55); transition:background .18s,border-color .18s,transform .18s; z-index:500; }
    #backTopBtn:hover { background:#2563eb; transform:translateY(-2px); }
    #backTopBtn:active { transform:translateY(0); }