:root {
    --bg: #ffffff;
    --fg: #1a1a1a;
    --fgsecd: #1a1a1a;
    --muted: #6b6b6b;
    --card: #f5f5f5;
    --border: #e2e2e2;
    --bgitemhover: #0ea4e947;
    --bgitemactive: #0ea5e9;
    --fgitemtext: #fff;


    --terminalborder: #e2e2e2;
    color-scheme: light;
}


/* 浅色：只覆盖变量 */
html[data-theme="light"] {
    --bg: #ffffff;
    --fg: #1a1a1a;
    --fgsecd: #1a1a1a;
    --muted: #6b6b6b;
    --card: #f5f5f5;
    --border: #e2e2e2;
    --bgitemhover: #0ea4e952;
    --bgitemactive: #0ea5e9;
    --fgitemtext: #fff;

    --terminalborder: #e2e2e2;
    color-scheme: light;
}

/* 深色：只覆盖变量 */
html[data-theme="dark"] {
    --bg: #121212;
    --fg: #f0f0f0;
    --fgsecd: #f0f0f0;
    --muted: #9e9e9e;
    --card: #1e1e1e;
    --border: #333333;
    --bgitemhover: #0ea4e952;
    --bgitemactive: #0ea5e9;
    --fgitemtext: #fff;

    --terminalborder: #333333;
    color-scheme: dark;
}

/* 护眼：只覆盖变量 */
html[data-theme="sepia"] {
    --bg: #f4ecd8;
    --fg: #5b4636;
    --fgsecd: #5b4636;
    --muted: #8a7a5c;
    --card: #ebe1c8;
    --border: #d8c9a6;
    --bgitemhover: #0ea4e952;
    --bgitemactive: #0ea5e9;

    --terminalborder: #d8c9a6;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

/* 
  body {
    margin: 0;
    min-height: 100vh;
    padding: 32px;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    transition: background-color .25s ease, color .25s ease;
  } */

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    font-family: system-ui, sans-serif;

    background: var(--bg);
    color: var(--fg);
    border : 1px solid rgba(var(--fg), 0.2);
    transition: background-color .25s ease, color .25s ease;


    /* font-family: 'Menlo', 'Consolas', 'Monaco', 'Courier New', monospace; */
    /* background: #0a0e1a; */
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

#topnav {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    /* background: #0f172a;
    color: #cbd5e1; */
    height: 48px;
    align-items: center;
    flex-shrink: 0;
}

#topnav a {
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
}

#topnav a:hover {
    background: var(--bgitemhover);
    transition: background-color .25s ease, color .25s ease;

    /* background-color: color-mix(in oktab, var(--bg) 80%, #1e293b 20%); */
    /* background-color: color-mix(in srgb, #1e293b 80%, #1e293b 20%);
    /* background-color: rgb(from var(--fg) calc(r + 30) g calc(b + 30)); */
    /* background-color: rgb(from #1e293b calc(r + 30) g calc(b + 30)); */
    /* background-color: lch(from var(--fg) calc(l / 2) c h); */
}

#topnav a.active {
    background: var(--bgitemactive);
    color: var(--fgitemtext);
}

.pushright {
    margin-left: auto;
}
.themebox {
    margin-right: 20px;
}

#content {
    flex: 1;
    padding: 30px;
    /* overflow-y: auto; */
    overflow: hidden;
    display: flex;
}

.page {
    flex: 1;
    flex-direction: column;
    min-height: 0;
    display: none;
}

.page.active {
    display: flex;
}