:root{
    --bg:#0b0c0f; --panel:#121318; --panel-2:#0f1014; --fg:#e9eaf0; --muted:#9aa2ad;
    --border:rgba(255,255,255,.08); --hair:rgba(255,255,255,.06);
    --primary:#000; --primary-2:#000; --ok:#22c55e; --warn:#000;
    --radius:16px; --radius-sm:12px; --shadow:0 10px 28px rgba(0,0,0,.32);
    --container:920px; --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-32:32px;
    --space-2:12px; --space-3:14px; --space-4:18px;
}
@media (prefers-color-scheme: light){
    :root{ --bg:#f6f7fa; --panel:#ffffff; --panel-2:#fbfbfd; --fg:#14161a; --muted:#606870; --border:rgba(0,0,0,.08); --hair:rgba(0,0,0,.06); --shadow:0 12px 26px rgba(12,14,18,.08); }
}
*{box-sizing:border-box}
html {
    font-size: 14px; /* 或 18px，看你想整体放大/缩小多少 */
}
html,body{height:100%}
body{
    background:
            radial-gradient(900px 480px at 8% -10%, rgba(124,92,255,.12), transparent 60%),
            radial-gradient(700px 420px at 92% 0, rgba(16,185,129,.10), transparent 60%),
            var(--bg);
    color:var(--fg); font-size:var(--fs-14); line-height:1.45;margin:0px;
}
.page{min-height:100dvh;display:flex;flex-direction:column}

.progress {
    height: 10px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
    border: 1px solid var(--border);
    margin-top: 6px;
}

.progress>i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#ff6b6b,#e82127);
    transition: width .35s ease;
}

.topbar h1 { margin: 0 auto;}
.page{min-height:100vh;background:var(--bg)}
.topbar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 10px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:10}
.back-btn{height:32px;width:32px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.theme-btn{height:32px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--fg);padding:0 10px;display:flex;align-items:center;gap:6px;cursor:pointer}
.iconlogo {width: 108px;
    margin-top: -4px;
    position: absolute;}

:root{
    --tab-bg:#fff; --tab-fg:#6b7280; --tab-active:#4f46e5; --tab-border:rgba(0,0,0,.08);
}
.footer{
    position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--tab-bg); border-top:1px solid var(--tab-border);
    backdrop-filter: saturate(150%) blur(8px);
}
.footer ul{
    margin:0; padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);
    list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:2px;
}
.footer li a{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:6px 0; color:var(--tab-fg); text-decoration:none; font-size:12px;
}
.footer li a i{ font-size:20px; line-height:1; }
.footer li.active a{ color:var(--tab-active); }

.footer li.active a::after{
    content:""; width:22px; height:3px; border-radius:999px; background:var(--tab-active); margin-top:2px;
}