@charset "utf-8";
/* ============================================================
   小白 · 个人网址全导航（AI 版式 2）—— 星空玻璃拟态样式
   配套：static/js/sites.js（数据） + static/js/nav.js（渲染交互）
   ============================================================ */

:root {
    --bg-0: #02040c;
    --bg-1: #071233;
    --bg-2: #123c86;
    --bg-3: #5788fe;

    --txt: #eaf1ff;
    --txt-2: rgba(234, 241, 255, .68);
    --txt-3: rgba(234, 241, 255, .45);

    --line: rgba(255, 255, 255, .14);
    --line-2: rgba(255, 255, 255, .07);

    --glass: rgba(11, 21, 46, .58);
    --glass-2: rgba(255, 255, 255, .06);

    --acc: #6ea8ff;
    --acc-2: #a78bfa;
    --ok: #34d399;
    --warn: #ffc247;

    --r-lg: 22px;
    --r: 16px;
    --r-sm: 11px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --hair: 1px solid var(--line);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #02040c;
    color: var(--txt);
    font-family: 'Questrial', 'Noto Serif SC', 'Microsoft YaHei', 'PingFang SC', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }
/* body 保持透明：背景统一交给 .bg-layer，避免 body 底色盖住背景层 */
body { overflow-x: hidden; background: transparent; }

/* ---------- 背景：星空渐变 + 星轨 canvas + 流星 + 呼吸光 ----------
   说明：背景统一放进 .bg-layer（z-index 0，位于 body 背景之上），
        内容层 .wrap 为 z-index 2，始终压在背景之上。            */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(110, 168, 255, .34), transparent 62%),
        radial-gradient(900px 520px at 8% 4%, rgba(167, 139, 250, .22), transparent 60%),
        linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 42%, var(--bg-2) 76%, var(--bg-3) 112%);
}

/* 底部地平线剪影（版式 3 的 .landscape，用内联 SVG 代替外链图） */
.bg-landscape {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='300' viewBox='0 0 1000 300'%3E%3Cpath d='M0 300 L0 170 L92 108 L170 156 L266 72 L350 138 L442 62 L530 130 L614 74 L702 134 L790 86 L876 140 L962 100 L1000 136 L1000 300 Z' fill='%23051130' opacity='.85'/%3E%3Cpath d='M0 300 L0 226 L110 180 L206 216 L314 156 L408 204 L504 150 L594 192 L698 144 L786 184 L882 152 L962 186 L1000 172 L1000 300 Z' fill='%23020618' opacity='.95'/%3E%3C/svg%3E");
    background-size: 1000px 300px;
    background-repeat: repeat-x;
    background-position: center bottom;
}

#canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* 原「防迷路」页的红蓝呼吸滤镜，保留氛围感（同 index1.html 的 .filter） */
.bg-filter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #fe5757;
    mix-blend-mode: overlay;
    opacity: 0;
    animation: colorChange 30s ease-in-out infinite;
    animation-fill-mode: both;
}
@keyframes colorChange {
    0%, 100% { opacity: 0; }
    50%      { opacity: .72; }
}

/* ---------- 布局 ---------- */
.wrap {
    position: relative;
    z-index: 2;
    max-width: 1260px;
    margin: 0 auto;
    padding: 34px 22px 70px;
}

/* ---------- 顶部信息面板 ---------- */
.head {
    border: var(--hair);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow);
    padding: 26px 26px 22px;
}

.brand { display: flex; align-items: center; gap: 15px; }

.logo {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--acc), var(--acc-2));
    box-shadow: 0 10px 26px rgba(110, 168, 255, .38);
}

.brand-txt { flex: 1 1 auto; min-width: 0; }

.head h1 {
    margin: 0;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: 3px;
    font-weight: 700;
    background: linear-gradient(96deg, #ffffff 8%, #b9d2ff 52%, #d3c4ff 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.head .sub {
    margin: 8px 0 0;
    font-size: 13.5px;
    letter-spacing: .6px;
    color: var(--txt-2);
}

.ver {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 5px 11px;
    border-radius: 999px;
    color: #cfe0ff;
    border: 1px solid rgba(110, 168, 255, .45);
    background: rgba(110, 168, 255, .13);
    white-space: nowrap;
}

.hitokoto {
    margin: 16px 0 0;
    font-size: 14px;
    letter-spacing: 1.2px;
    color: var(--txt-3);
    transition: opacity .26s ease;
    min-height: 20px;
}

/* ---------- 搜索区 ---------- */
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.s-ico { font-size: 15px; opacity: .7; margin-right: -30px; margin-left: 13px; z-index: 1; }

#q {
    flex: 1 1 300px;
    min-width: 0;
    height: 46px;
    padding: 0 16px 0 38px;
    font-size: 15px;
    color: var(--txt);
    border: var(--hair);
    border-radius: var(--r-sm);
    background: rgba(6, 12, 28, .6);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
#q::placeholder { color: var(--txt-3); }
#q:focus {
    border-color: rgba(110, 168, 255, .7);
    background: rgba(8, 16, 36, .78);
    box-shadow: 0 0 0 4px rgba(110, 168, 255, .16);
}

.sbtn {
    height: 46px;
    padding: 0 18px;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 1px;
    color: var(--txt);
    cursor: pointer;
    border: var(--hair);
    border-radius: var(--r-sm);
    background: var(--glass-2);
    transition: all .2s;
    white-space: nowrap;
}
.sbtn:hover {
    border-color: rgba(110, 168, 255, .6);
    background: rgba(110, 168, 255, .18);
    transform: translateY(-1px);
}
.sbtn.primary {
    color: #08122c;
    font-weight: 700;
    border-color: transparent;
    background: linear-gradient(135deg, #9fc2ff, #c3b5ff);
}
.sbtn.primary:hover { filter: brightness(1.06); }
.sbtn.add {
    color: #04241a;
    font-weight: 700;
    border-color: transparent;
    background: linear-gradient(135deg, #7ef0c2, #34d399);
    box-shadow: 0 8px 22px rgba(52, 211, 153, .26);
}
.sbtn.add:hover { filter: brightness(1.06); transform: translateY(-1px); }

.stat {
    margin: 14px 0 0;
    font-size: 13px;
    letter-spacing: .6px;
    color: var(--txt-3);
}

/* ---------- 分类导航 ---------- */
.tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 18px 0 4px;
    padding: 12px 2px;
    background: linear-gradient(180deg, rgba(3, 7, 20, .92), rgba(3, 7, 20, .62) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    font-size: 13.5px;
    font-family: inherit;
    letter-spacing: .8px;
    color: var(--txt-2);
    cursor: pointer;
    border: var(--hair);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    transition: all .2s;
}
.tab em {
    font-style: normal;
    font-size: 11.5px;
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--txt-3);
    background: rgba(255, 255, 255, .1);
}
.tab:hover { color: var(--txt); border-color: rgba(110, 168, 255, .55); transform: translateY(-1px); }
.tab.active {
    color: #08122c;
    font-weight: 700;
    border-color: transparent;
    background: linear-gradient(135deg, #9fc2ff, #c3b5ff);
    box-shadow: 0 8px 22px rgba(120, 160, 255, .3);
}
.tab.active em { color: #08122c; background: rgba(8, 18, 44, .16); }

/* ---------- 站点区块 ---------- */
.sec { margin-top: 34px; }

.sec-t {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    font-size: 17px;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--txt);
}
.sec-t .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--acc), var(--acc-2));
    box-shadow: 0 0 12px rgba(110, 168, 255, .8);
}
.sec-t em {
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    padding: 2px 9px;
    border-radius: 999px;
    color: var(--txt-3);
    border: var(--hair);
    background: rgba(255, 255, 255, .05);
}
.sec-t::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line), transparent);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 13px;
}

/* ---------- 站点卡片 ---------- */
.card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    text-decoration: none;
    color: var(--txt);
    border: var(--hair);
    border-radius: var(--r);
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .22s, border-color .22s, box-shadow .22s, background .22s;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(420px 120px at 12% 0%, rgba(110, 168, 255, .2), transparent 70%);
    transition: opacity .22s;
    pointer-events: none;
}
.card:hover {
    transform: translateY(-3px);
    border-color: rgba(110, 168, 255, .55);
    background: rgba(17, 31, 66, .72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .48);
}
.card:hover::before { opacity: 1; }

.ico {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--c1, #5b8cff), var(--c2, #8b5cf6));
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.ico-txt {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
}
.ico img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    object-fit: contain;
}

.meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.meta .t {
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: .4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.meta .d {
    font-size: 11.5px;
    letter-spacing: .3px;
    color: var(--txt-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta mark {
    color: #08122c;
    padding: 0 3px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffe08a, #ffc247);
}

.badge {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .5px;
    padding: 2px 6px;
    border-radius: 6px;
    color: #08122c;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd88a, #ffb347);
    box-shadow: 0 4px 12px rgba(255, 179, 71, .3);
}

.copy {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--txt-2);
    border: 1px solid transparent;
    border-radius: 8px;
    opacity: 0;
    cursor: pointer;
    transition: all .2s;
}
.card:hover .copy { opacity: 1; }
.copy:hover {
    color: #fff;
    border-color: rgba(110, 168, 255, .6);
    background: rgba(110, 168, 255, .22);
}

/* 自定义站点的「删除」按钮 */
.del {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: #ffb4b4;
    border: 1px solid transparent;
    border-radius: 8px;
    opacity: 0;
    cursor: pointer;
    transition: all .2s;
}
.card:hover .del { opacity: 1; }
.del:hover {
    color: #fff;
    border-color: rgba(255, 120, 120, .7);
    background: rgba(255, 90, 90, .28);
}

/* ---------- 添加网站弹窗 ---------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s, visibility .24s;
}
.modal.show { opacity: 1; visibility: visible; }

.modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(2, 5, 14, .68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-box {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: 88vh;
    overflow: auto;
    padding: 22px 22px 18px;
    border: var(--hair);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(20, 34, 72, .96), rgba(9, 17, 40, .96));
    box-shadow: var(--shadow);
    transform: translateY(14px) scale(.98);
    transition: transform .24s;
}
.modal.show .modal-box { transform: translateY(0) scale(1); }

.modal-box h3 {
    margin: 0 0 6px;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--txt);
}
.modal-tip {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--txt-3);
}
.modal-box label {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    letter-spacing: .6px;
    color: var(--txt-2);
}
.modal-box input[type=text],
.modal-box select {
    display: block;
    width: 100%;
    margin-top: 7px;
    height: 42px;
    padding: 0 13px;
    font-size: 14px;
    font-family: inherit;
    color: var(--txt);
    border: var(--hair);
    border-radius: var(--r-sm);
    background: rgba(5, 11, 26, .75);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.modal-box select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(234, 241, 255, .6) 50%),
                      linear-gradient(135deg, rgba(234, 241, 255, .6) 50%, transparent 50%);
    background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.modal-box input[type=text]::placeholder { color: var(--txt-3); }
.modal-box input[type=text]:focus,
.modal-box select:focus {
    border-color: rgba(110, 168, 255, .7);
    box-shadow: 0 0 0 4px rgba(110, 168, 255, .16);
}
.modal-box .chk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    cursor: pointer;
}
.modal-box .chk input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #6ea8ff;
    cursor: pointer;
}

.modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.mbtn {
    flex: 1;
    height: 44px;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 1px;
    color: var(--txt);
    cursor: pointer;
    border: var(--hair);
    border-radius: var(--r-sm);
    background: var(--glass-2);
    transition: all .2s;
}
.mbtn:hover { border-color: rgba(110, 168, 255, .6); background: rgba(110, 168, 255, .18); }
.mbtn.primary {
    color: #08122c;
    font-weight: 700;
    border-color: transparent;
    background: linear-gradient(135deg, #9fc2ff, #c3b5ff);
}
.mbtn.primary:hover { filter: brightness(1.06); }

/* ---------- 空态 / 页脚 ---------- */
.empty {
    margin: 60px auto;
    max-width: 460px;
    padding: 34px 24px;
    text-align: center;
    font-size: 14.5px;
    letter-spacing: 1px;
    color: var(--txt-2);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .04);
}

.foot {
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
    text-align: center;
    font-size: 13px;
    letter-spacing: .8px;
    line-height: 2.1;
    color: var(--txt-2);
}
.foot b { color: var(--txt); }
.foot .muted { font-size: 12px; color: var(--txt-3); }

/* 发邮件入口：保留原版霓虹白光效果 */
.cool {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-decoration: none;
    animation: neon 1.5s ease-in-out infinite alternate;
}
@keyframes neon {
    from { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 7px #fff, 0 0 10px #fff; }
    to   { text-shadow: 0 0 5px #fff, 0 0 8px #fff, 0 0 14px #fff, 0 0 20px #fff, 0 0 25px #fff; }
}
.cool::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 4px;
    background-color: #fff;
    filter: blur(15px);
    opacity: .55;
    z-index: -1;
    animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
    from { opacity: .25; filter: blur(10px); }
    to   { opacity: .65; filter: blur(15px); }
}

/* ---------- 回到顶部 / 提示 ---------- */
#totop {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 40;
    width: 46px;
    height: 46px;
    font-size: 19px;
    font-family: inherit;
    color: var(--txt);
    cursor: pointer;
    border: var(--hair);
    border-radius: 50%;
    background: rgba(12, 22, 48, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .26s;
}
#totop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#totop:hover { border-color: rgba(110, 168, 255, .7); background: rgba(110, 168, 255, .24); }

#toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 60;
    max-width: min(88vw, 560px);
    padding: 12px 20px;
    font-size: 13.5px;
    letter-spacing: .6px;
    color: var(--txt);
    text-align: center;
    word-break: break-all;
    border: var(--hair);
    border-radius: 999px;
    background: rgba(8, 16, 36, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 14px);
    transition: all .26s;
    pointer-events: none;
}
#toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- 主题切换按钮（白天 / 夜间） ---------- */
.sbtn.theme {
    color: #ffe9bd;
    font-weight: 700;
    border-color: rgba(255, 194, 71, .45);
    background: rgba(255, 194, 71, .12);
}
.sbtn.theme:hover {
    color: #fff4d8;
    border-color: rgba(255, 194, 71, .8);
    background: rgba(255, 194, 71, .24);
}

/* ---------- 白天模式 ----------
   说明：整页背景仍走 .bg-layer 里的星空渐变（观感不变），
        这里只把「内容层」的玻璃卡片换成浅色系，保证白天模式文字清晰可读。 */
body.light-mode { color: #101b36; }

/* 文字色 */
body.light-mode .head .sub,
body.light-mode .tab,
body.light-mode .foot { color: rgba(16, 27, 54, .78); }
body.light-mode .hitokoto,
body.light-mode .stat,
body.light-mode .meta .d,
body.light-mode .sec-t em,
body.light-mode .tab em,
body.light-mode .foot .muted { color: rgba(16, 27, 54, .55); }
body.light-mode .ver { color: rgba(16, 27, 54, .8); background: rgba(255, 255, 255, .5); border-color: rgba(110, 168, 255, .5); }

/* 顶部面板 / 分类栏 / 卡片：浅色玻璃 */
body.light-mode .head {
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62));
    border-color: rgba(16, 27, 54, .14);
    box-shadow: 0 18px 50px rgba(16, 32, 70, .18);
}
body.light-mode .head h1 {
    background: linear-gradient(96deg, #16233f 8%, #2f5fb8 52%, #6a4bc4 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .head .logo { box-shadow: 0 10px 26px rgba(110, 168, 255, .35); }

body.light-mode .tabs {
    background: linear-gradient(180deg, rgba(247, 250, 255, .94), rgba(247, 250, 255, .66) 72%, transparent);
}
body.light-mode .tab { border-color: rgba(16, 27, 54, .16); background: rgba(255, 255, 255, .58); }
body.light-mode .tab em { background: rgba(16, 27, 54, .09); }
body.light-mode .tab:hover { color: #101b36; border-color: rgba(70, 120, 220, .6); background: rgba(255, 255, 255, .82); }
body.light-mode .tab.active { color: #08122c; }
body.light-mode .tab.active em { color: #08122c; background: rgba(8, 18, 44, .16); }

/* 输入框 / 按钮 */
body.light-mode #q {
    color: #101b36;
    border-color: rgba(16, 27, 54, .16);
    background: rgba(255, 255, 255, .82);
}
body.light-mode #q::placeholder { color: rgba(16, 27, 54, .42); }
body.light-mode #q:focus { background: #fff; border-color: rgba(70, 120, 220, .7); box-shadow: 0 0 0 4px rgba(70, 120, 220, .14); }
body.light-mode .sbtn { color: #101b36; border-color: rgba(16, 27, 54, .16); background: rgba(255, 255, 255, .72); }
body.light-mode .sbtn:hover { border-color: rgba(70, 120, 220, .6); background: rgba(70, 120, 220, .14); }
body.light-mode .sbtn.primary { color: #08122c; }
body.light-mode .sbtn.add { color: #04241a; }
body.light-mode .sbtn.theme { color: #8a5a00; border-color: rgba(210, 150, 20, .5); background: rgba(255, 205, 100, .3); }
body.light-mode .sbtn.theme:hover { color: #6e4700; border-color: rgba(210, 150, 20, .85); background: rgba(255, 205, 100, .48); }

/* 站点区块标题 */
body.light-mode .sec-t { color: #101b36; }
body.light-mode .sec-t em { border-color: rgba(16, 27, 54, .14); background: rgba(255, 255, 255, .6); }
body.light-mode .sec-t::after { background: linear-gradient(90deg, rgba(16, 27, 54, .18), transparent); }

/* 站点卡片 */
body.light-mode .card {
    color: #101b36;
    border-color: rgba(16, 27, 54, .14);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 10px 26px rgba(16, 32, 70, .12);
}
body.light-mode .card:hover {
    border-color: rgba(70, 120, 220, .6);
    background: #fff;
    box-shadow: 0 16px 36px rgba(16, 32, 70, .2);
}
body.light-mode .card::before { background: radial-gradient(420px 120px at 12% 0%, rgba(70, 120, 220, .13), transparent 70%); }
body.light-mode .copy { color: rgba(16, 27, 54, .6); }
body.light-mode .copy:hover { color: #08122c; border-color: rgba(70, 120, 220, .55); background: rgba(70, 120, 220, .16); }
body.light-mode .del { color: #c0392b; }
body.light-mode .del:hover { color: #fff; border-color: rgba(200, 60, 60, .7); background: rgba(215, 70, 70, .82); }

/* 弹窗 / 空态 / 页脚 / 按钮 */
body.light-mode .modal-mask { background: rgba(12, 22, 46, .42); }
body.light-mode .modal-box {
    color: #101b36;
    border-color: rgba(16, 27, 54, .14);
    background: linear-gradient(180deg, #ffffff, #f2f6ff);
    box-shadow: 0 24px 60px rgba(16, 32, 70, .28);
}
body.light-mode .modal-box h3 { color: #101b36; }
body.light-mode .modal-tip,
body.light-mode .modal-box label { color: rgba(16, 27, 54, .74); }
body.light-mode .modal-box input[type=text],
body.light-mode .modal-box select {
    color: #101b36;
    border-color: rgba(16, 27, 54, .16);
    background: rgba(255, 255, 255, .9);
}
body.light-mode .modal-box input[type=text]::placeholder { color: rgba(16, 27, 54, .4); }
body.light-mode .modal-box select {
    background-image: linear-gradient(45deg, transparent 50%, rgba(16, 27, 54, .6) 50%),
                      linear-gradient(135deg, rgba(16, 27, 54, .6) 50%, transparent 50%);
}
body.light-mode .mbtn { color: #101b36; border-color: rgba(16, 27, 54, .16); background: rgba(255, 255, 255, .8); }
body.light-mode .mbtn.primary { color: #08122c; }
body.light-mode .empty { color: rgba(16, 27, 54, .72); border-color: rgba(16, 27, 54, .2); background: rgba(255, 255, 255, .68); }
body.light-mode .foot { border-top-color: rgba(16, 27, 54, .12); }
body.light-mode .foot b { color: #101b36; }
body.light-mode #totop { color: #101b36; border-color: rgba(16, 27, 54, .16); background: rgba(255, 255, 255, .88); }
body.light-mode #totop:hover { border-color: rgba(70, 120, 220, .7); background: rgba(70, 120, 220, .2); }
body.light-mode #toast { color: #101b36; border-color: rgba(16, 27, 54, .14); background: rgba(255, 255, 255, .96); }

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 720px) {
    .wrap { padding: 20px 14px 60px; }
    .head { padding: 20px 16px 18px; border-radius: 18px; }
    .brand { flex-wrap: wrap; gap: 12px; }
    .logo { width: 44px; height: 44px; font-size: 22px; }
    .head h1 { font-size: 20px; letter-spacing: 1.5px; }
    .head .sub { font-size: 12px; }
    .ver { order: 3; }
    .search { gap: 8px; }
    .s-ico { display: none; }
    #q { flex: 1 1 100%; padding-left: 16px; }
    .sbtn { flex: 1 1 auto; padding: 0 12px; height: 42px; font-size: 13px; }
    .tabs { margin-top: 14px; }
    .tab { padding: 8px 12px; font-size: 12.5px; }
    .sec { margin-top: 26px; }
    .sec-t { font-size: 15px; }
    .grid { grid-template-columns: 1fr; gap: 10px; }
    .copy { opacity: .75; }
    .del { opacity: .8; }
    .foot { font-size: 12px; }
    .modal { padding: 12px; }
    .modal-box { padding: 18px 16px 14px; border-radius: 18px; }
    .modal-box h3 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}