/* kt20 导航站样式 —— 全部本地资源，无任何外部引用。
   布局：左侧固定分类栏 + 右侧一整块内容面板。
   主题：data-theme="dark" 属性驱动（nav.js 负责设置：记忆选择，默认跟随系统）。
   背景：本站 bg.svg（手绘柔和秋色），落叶动画纯 CSS。 */

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
    --bg: #f4f6fb;
    --panel: #ffffff;            /* 内容面板：白色实底 */
    --field: #eef1f8;            /* 面板内的输入框/下拉框底色 */
    --text: #2a3242;
    --muted: #7a8494;
    --line: #e4e8f1;
    --accent: #4c6ef0;
    --accent-weak: #edf1fe;
    --shadow: 0 10px 30px rgba(45, 60, 110, .10);
    /* 背景图上的轻纱：白天很淡，保持图片柔和不刺眼 */
    --veil: linear-gradient(rgba(250, 250, 248, .18), rgba(250, 250, 248, .32));
}

html[data-theme="dark"] {
    --bg: #0f131a;
    --panel: #1a202b;
    --field: #232c3a;
    --text: #e7eaf1;
    --muted: #949eb0;
    --line: #262e3c;
    --accent: #7488f5;
    --accent-weak: #232c44;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --veil: linear-gradient(rgba(10, 13, 18, .74), rgba(10, 13, 18, .84));
}

html { -webkit-text-size-adjust: 100%; overflow-y: scroll; } /* 滚动条轨道常驻：切分类时页面宽度恒定不跳 */

body {
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background:
        var(--veil),
        url("/static/bg.svg") center / cover fixed no-repeat,
        var(--bg);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ---------- 整体布局 ---------- */
.layout {
    display: flex; gap: 18px;
    max-width: 1680px; margin: 0 auto;
    padding: 18px;
}

/* ---------- 左侧固定分类栏 ---------- */
.side {
    position: sticky; top: 18px;
    width: 240px; flex: none;
    height: calc(100vh - 36px);
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 18px 12px 12px;
}
/* logo 与分类列表的距离：让“全部”一行与右侧搜索框顶部对齐 */
.brand {
    display: block; margin: 0 6px 25px; text-align: center;
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.brand .logo { display: block; height: 36px; width: auto; margin: 0 auto; }

/* LOGO 下方浏览统计（电脑端显示，手机隐藏） */
.views {
    margin: 0 2px 14px; padding: 10px 10px;
    background: var(--field); border-radius: 10px;
}
.views .v-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px; }
.views .v-label { color: var(--muted); font-size: 13px; }
.views .v-num { font-weight: 700; color: var(--accent); font-size: 15px; font-variant-numeric: tabular-nums; }

/* logo 是深色文字，夜间垫一块浅色圆角底保证可读 */
html[data-theme="dark"] .brand .logo {
    background: rgba(255, 255, 255, .88);
    border-radius: 8px;
    padding: 3px 10px;
}

/* 分类列表：竖排；分类再多也可在栏内滚动 */
.cats {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; gap: 4px;
    overflow-y: auto; scrollbar-width: thin;
}
.tab {
    display: flex; align-items: center; gap: 10px;
    border: none; background: none; color: var(--muted);
    padding: 12px 14px; border-radius: 10px;
    font-size: 18px; text-align: left; cursor: pointer;
    white-space: nowrap;
}
.tab:hover { background: var(--accent-weak); color: var(--text); }
.tab.active { background: var(--accent); color: #fff; }
.tab .ico { width: 26px; height: 26px; border-radius: 6px; font-size: 15px; }
.tab .ico.emo { font-size: 18px; background: var(--accent-weak); }
html[data-theme="dark"] .tab .ico.emo { background: var(--field); }
.tab.active .ico.emo { background: rgba(255, 255, 255, .2); }

/* 夜间/日间切换按钮（侧栏底部） */
.theme-btn {
    flex: none; margin-top: 10px;
    border: 1px solid var(--line); background: var(--field);
    color: var(--muted);
    font-size: 14px; text-align: center; cursor: pointer;
    padding: 10px 8px; border-radius: 10px;
    white-space: nowrap;
}
.theme-btn:hover { color: var(--text); background: var(--accent-weak); }

/* ---------- 右侧一整块内容面板 ---------- */
.main {
    flex: 1; min-width: 0;
    background: var(--panel);
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 26px 28px 30px;
}

/* ---------- 时钟 ---------- */
.clock { text-align: center; margin: 8px 0 4px; }
.clock .time {
    font-size: 54px; font-weight: 700; letter-spacing: 2px; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.clock .hello { color: var(--muted); font-size: 17px; margin-top: 6px; }
.quote { text-align: center; color: var(--muted); font-size: 14.5px; opacity: .85; margin: 10px 0 24px; }

/* ---------- 搜索框 ---------- */
.search {
    max-width: 720px; margin: 0 auto 30px;
    display: flex; align-items: center; gap: 4px;
    background: var(--field); border: 1px solid var(--line); border-radius: 16px;
    padding: 6px;
}
.engine {
    flex: none;
    border: none; outline: none;
    color: var(--text);
    font-size: 16px;
    padding: 10px 32px 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: var(--panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8494' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
}
#q {
    flex: 1; min-width: 0;
    border: none; outline: none; background: none; color: var(--text);
    font-size: 17px; padding: 10px 6px;
}
#q::placeholder { color: var(--muted); }
.clear {
    border: none; background: none; color: var(--muted);
    font-size: 20px; line-height: 1; cursor: pointer;
    padding: 6px 10px; border-radius: 8px;
}
.clear:hover { background: var(--accent-weak); color: var(--text); }
.go {
    width: 44px; height: 44px; flex: none;
    border: none; border-radius: 12px; cursor: pointer;
    background: var(--accent); color: #fff;
    display: grid; place-items: center;
}
.go:hover { filter: brightness(1.07); }

/* ---------- 分类区块（同一块面板内，用分隔线区隔） ---------- */
.cat { margin-bottom: 26px; }
.cat:last-child { margin-bottom: 6px; }
.cat h2 {
    display: flex; align-items: center; gap: 10px; font-size: 20px;
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px; }
.site {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; border-radius: 10px; font-size: 18px;
    white-space: nowrap; overflow: hidden;
}
.site:hover { background: var(--accent-weak); }
.site .txt { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 图标位（首字色块，以后可换 /icons/ 本地图标） ---------- */
.ico {
    width: 30px; height: 30px; flex: none;
    border-radius: 8px; overflow: hidden;
    display: grid; place-items: center;
    font-size: 16px; font-weight: 600;
}
.ico img { width: 100%; height: 100%; object-fit: contain; }
/* 真图标垫白色芯片 + 细边框：白底 logo（如政务网站）不会在白色面板上隐身 */
.ico-img { background: #fff; border: 1px solid var(--line); }
.ico.emo { font-size: 18px; background: var(--accent-weak); }
html[data-theme="dark"] .ico.emo { background: var(--field); }
.cat h2 .ico { width: 32px; height: 32px; border-radius: 8px; font-size: 16px; }
.cat h2 .ico.emo { font-size: 18px; }

/* 首字色块的 12 个固定配色（不使用内联样式，CSP 才能设得最严） */
.c0  { background: hsl(0   70% 89%); color: hsl(0   55% 36%); }
.c1  { background: hsl(25  75% 89%); color: hsl(25  55% 34%); }
.c2  { background: hsl(45  80% 88%); color: hsl(45  55% 30%); }
.c3  { background: hsl(80  55% 89%); color: hsl(80  45% 30%); }
.c4  { background: hsl(140 50% 89%); color: hsl(140 45% 30%); }
.c5  { background: hsl(170 50% 89%); color: hsl(170 45% 28%); }
.c6  { background: hsl(200 65% 89%); color: hsl(200 50% 32%); }
.c7  { background: hsl(220 70% 90%); color: hsl(220 55% 36%); }
.c8  { background: hsl(255 65% 91%); color: hsl(255 50% 40%); }
.c9  { background: hsl(290 60% 91%); color: hsl(290 45% 38%); }
.c10 { background: hsl(320 60% 91%); color: hsl(320 45% 38%); }
.c11 { background: hsl(345 65% 90%); color: hsl(345 50% 36%); }

html[data-theme="dark"] .c0  { background: hsl(0   32% 24%); color: hsl(0   70% 74%); }
html[data-theme="dark"] .c1  { background: hsl(25  32% 24%); color: hsl(25  70% 72%); }
html[data-theme="dark"] .c2  { background: hsl(45  35% 24%); color: hsl(45  75% 68%); }
html[data-theme="dark"] .c3  { background: hsl(80  28% 23%); color: hsl(80  60% 70%); }
html[data-theme="dark"] .c4  { background: hsl(140 28% 22%); color: hsl(140 60% 70%); }
html[data-theme="dark"] .c5  { background: hsl(170 30% 22%); color: hsl(170 60% 70%); }
html[data-theme="dark"] .c6  { background: hsl(200 32% 24%); color: hsl(200 65% 74%); }
html[data-theme="dark"] .c7  { background: hsl(220 35% 26%); color: hsl(220 70% 78%); }
html[data-theme="dark"] .c8  { background: hsl(255 32% 27%); color: hsl(255 65% 78%); }
html[data-theme="dark"] .c9  { background: hsl(290 30% 27%); color: hsl(290 60% 76%); }
html[data-theme="dark"] .c10 { background: hsl(320 30% 27%); color: hsl(320 60% 76%); }
html[data-theme="dark"] .c11 { background: hsl(345 32% 26%); color: hsl(345 65% 75%); }

/* ---------- 秋风落叶（纯 CSS，零图片零脚本） ---------- */
.leaves {
    position: fixed; inset: 0;
    overflow: hidden; pointer-events: none; z-index: 50;
}
.leaves span {
    position: absolute; top: -6vh;
    opacity: .8;
    animation: leaf-fall linear infinite, leaf-sway ease-in-out infinite;
}
@keyframes leaf-fall { to { transform: translateY(112vh) rotate(340deg); } }
@keyframes leaf-sway {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: 46px; }
}
.leaves span:nth-child(1)  { left: 3%;  font-size: 20px; animation-duration: 16s, 3.4s; animation-delay: -2s,  -1s; }
.leaves span:nth-child(2)  { left: 11%; font-size: 15px; animation-duration: 19s, 2.8s; animation-delay: -7s,  -3s; }
.leaves span:nth-child(3)  { left: 19%; font-size: 23px; animation-duration: 14s, 3.8s; animation-delay: -11s, -2s; }
.leaves span:nth-child(4)  { left: 27%; font-size: 17px; animation-duration: 21s, 3.1s; animation-delay: -5s,  -4s; }
.leaves span:nth-child(5)  { left: 35%; font-size: 21px; animation-duration: 17s, 2.6s; animation-delay: -14s, -1s; }
.leaves span:nth-child(6)  { left: 43%; font-size: 14px; animation-duration: 23s, 3.5s; animation-delay: -9s,  -2s; }
.leaves span:nth-child(7)  { left: 51%; font-size: 19px; animation-duration: 15s, 3.0s; animation-delay: -3s,  -4s; }
.leaves span:nth-child(8)  { left: 59%; font-size: 24px; animation-duration: 18s, 3.7s; animation-delay: -12s, -1s; }
.leaves span:nth-child(9)  { left: 67%; font-size: 16px; animation-duration: 20s, 2.9s; animation-delay: -6s,  -3s; }
.leaves span:nth-child(10) { left: 74%; font-size: 22px; animation-duration: 16s, 3.3s; animation-delay: -10s, -2s; }
.leaves span:nth-child(11) { left: 81%; font-size: 15px; animation-duration: 22s, 2.7s; animation-delay: -4s,  -4s; }
.leaves span:nth-child(12) { left: 88%; font-size: 20px; animation-duration: 17s, 3.6s; animation-delay: -15s, -1s; }
.leaves span:nth-child(13) { left: 94%; font-size: 17px; animation-duration: 19s, 3.2s; animation-delay: -8s,  -3s; }
.leaves span:nth-child(14) { left: 7%;  font-size: 13px; animation-duration: 24s, 4.0s; animation-delay: -17s, -2s; }
@media (prefers-reduced-motion: reduce) {
    .leaves { display: none; }
}

/* ---------- 页脚 ---------- */
.foot { text-align: center; color: var(--muted); font-size: 14px; line-height: 1.9; margin-top: 30px; }

/* ---------- 手机：分类换成 4 列网格（不再横向滑动），网址固定两列铺满屏宽 ---------- */
@media (max-width: 960px) {
    .layout { display: block; padding: 12px; }
    .side {
        position: static; /* 手机上不吸顶，省屏幕空间 */
        width: auto; height: auto;
        flex-direction: column;
        border-radius: 14px; padding: 12px;
        margin-bottom: 12px;
    }
    .brand { margin: 0 auto 10px; padding: 0; border: 0; }
    .brand .logo { height: 30px; }
    .cats {
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    .tab {
        padding: 8px 2px; font-size: 16px;
        justify-content: center; gap: 6px;
    }
    .tab .ico { width: 22px; height: 22px; }
    .tab .ico.emo { font-size: 16px; }
    .theme-btn { margin: 10px 0 0; }
    .views { display: none; }
    .main { padding: 18px 14px 22px; }
    .clock .time { font-size: 40px; }
    .sites { grid-template-columns: repeat(2, 1fr); }
}