/* Global styles for haavk-nav */
:root{
    --bg:#0f1724;
    --card:#0b1220;
    --muted:#9aa4b2;
    --accent:#38bdf8;
    --glass: rgba(255,255,255,0.04);
    --radius:12px;
    --max-width:1100px;
}
/* Light theme variables */
[data-theme="light"]{
    --bg: #f6f9fb;
    --card: #ffffff;
    --muted: #4b5563;
    --accent: #0ea5e9;
    --glass: rgba(2,6,23,0.03);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, black 10%) 100%);
    color: #e6eef6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    padding:32px 16px;
}
/* adapt text color for light theme */
[data-theme="light"] body, [data-theme="light"] .muted{color:var(--muted)}

.wrap{max-width:var(--max-width);margin:0 auto}
header.site-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.logo{height:44px;margin-right:12px}
header h1{font-size:1.6rem;letter-spacing:0.4px}
.subtitle{color:var(--muted);font-size:0.95rem}

/* Navigation links in header */
.navigation-links{display:flex;gap:6px;align-items:center}
.navigation-links a{color:var(--muted);padding:8px 12px;border-radius:8px;text-decoration:none;display:inline-block;transition:background .16s ease,color .16s ease,transform .12s ease;font-weight:700}
.navigation-links a:hover{background:var(--glass);color:var(--accent);transform:translateY(-3px)}
.navigation-links a:active{transform:translateY(-1px)}
.navigation-links a + a{margin-left:6px}

/* Heading styling */
h2{display:flex;align-items:center;gap:10px;font-size:1.05rem;margin:20px 0 12px;color:var(--muted);font-weight:700}
h2::before{content:"";width:6px;height:26px;border-radius:4px;background:linear-gradient(180deg,var(--accent),#60a5fa);display:inline-block}

/* Light theme adjustments for nav and headings */
[data-theme="light"] .navigation-links a{color:#3b4853}
[data-theme="light"] h2{color:#374151}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:18px;box-shadow:0 6px 18px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease,box-shadow .18s ease}
.card{transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s}
.card:hover{transform:translateY(-10px) scale(1.01);box-shadow:0 28px 60px rgba(2,6,23,0.6)}
.card::before{content:"";display:block;height:6px;width:60px;background:linear-gradient(90deg,var(--accent),#60a5fa);border-radius:4px;margin-bottom:12px;opacity:0.95}
.card a{display:block;color:var(--accent);font-weight:600;text-decoration:none;font-size:1.05rem}
.card p{color:var(--muted);margin-top:8px;font-size:0.95rem}

/* subtle floating animation for cards */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
/* Enable floating animation for all cards */
.card{animation:floaty 6s ease-in-out infinite}

.top-link{margin-bottom:12px;color:var(--muted);display:inline-block;text-decoration:none}
.top-link:hover{color:var(--accent)}

.panel{background:var(--card);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* forms and buttons */
button, .btn{appearance:none;border:0;cursor:pointer;padding:10px 14px;border-radius:8px;background:linear-gradient(90deg,var(--accent),#60a5fa);color:#022235;font-weight:600}

footer{margin-top:28px;color:var(--muted);font-size:0.9rem;text-align:center}

/* small utilities */
.muted{color:var(--muted)}
@media (max-width:520px){body{padding:18px}header h1{font-size:1.2rem}}

/* details/summary 折叠面板样式 */
details{background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:6px 8px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary:after{content:"\25BE";margin-left:12px;opacity:0.9;transform-origin:center;transition:transform .18s}
details[open] summary:after{transform:rotate(180deg)}
details > pre{background:rgba(0,0,0,0.06);padding:10px;border-radius:8px;overflow:auto}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.controls .btn{padding:8px 10px;font-size:0.95rem}

/* main page collapsible sections */
.section-collapse{margin:10px 0 16px}
.section-collapse .section-title{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:var(--muted);font-weight:700}
.section-collapse .section-title::before{content:"";width:6px;height:26px;border-radius:4px;background:linear-gradient(180deg,var(--accent),#60a5fa);display:inline-block}
.section-collapse summary{padding:8px}
.section-collapse .grid{margin-top:8px}

/* theme-aware colors */
[data-theme="light"] body{color:#0b1220}
[data-theme="light"] .card{box-shadow:0 6px 16px rgba(2,6,23,0.06);border:1px solid rgba(2,6,23,0.04)}
[data-theme="light"] .section-collapse .section-title{color:#374151}

/* docs manual page tweaks */
.docs-manual details{
    margin:10px 4px;
    padding:10px;
    border-radius:10px;
    border:1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    background:color-mix(in srgb, var(--glass) 88%, var(--accent) 12%);
    overflow:hidden;
}
.docs-manual summary{
    padding:6px 8px;
}
.docs-manual details > ul,
.docs-manual details > ol{
    padding-left:20px;
    margin-top:8px;
}
.docs-manual details li + li{
    margin-top:6px;
}
.docs-manual .btn-download{
    display:inline-block;
    padding:8px 14px;
    font-size:0.9rem;
    font-weight:600;
    border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius:999px;
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, #60a5fa 22%, transparent));
    color:color-mix(in srgb, #e6eef6 86%, var(--accent) 14%);
    text-decoration:none;
    box-shadow:0 8px 20px rgba(2,6,23,0.26);
    transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.docs-manual .btn-download:hover{
    color:#f7fbff;
    border-color:color-mix(in srgb, var(--accent) 72%, transparent);
    box-shadow:0 10px 24px rgba(2,6,23,0.34);
    transform:translateY(-1px);
}
.docs-manual .btn-download:active{
    transform:translateY(0);
}
[data-theme="light"] .docs-manual .btn-download{
    color:#0b1220;
    box-shadow:0 6px 14px rgba(2,6,23,0.12);
}