/* ==========================================================================
   custom_ui.css — 简约大气 UI 覆盖层
   在 style.css 之后加载，仅做视觉覆盖，不改变任何功能与结构
   设计令牌：中性色为主 + 品牌橙强调色
   ========================================================================== */

:root {
    --ui-accent: #ff6500;          /* 品牌强调色（沿用图标体系） */
    --ui-accent-hover: #e65a00;
    --ui-accent-soft: #fff4ec;     /* 强调色浅底 */
    --ui-text-strong: #1d2530;     /* 主标题 */
    --ui-text-body: #3d4655;       /* 正文 */
    --ui-text-muted: #8b95a5;      /* 次要 */
    --ui-text-faint: #aab3c0;      /* 弱化 */
    --ui-border: #e9edf2;          /* 分隔线/描边 */
    --ui-border-strong: #dde3ea;
    --ui-bg-page: #f6f7f9;         /* 页面底色 */
    --ui-bg-card: #ffffff;
    --ui-bg-soft: #f3f5f8;         /* 浅灰块 */
    --ui-radius-lg: 14px;
    --ui-radius-md: 12px;
    --ui-radius-sm: 8px;
    --ui-shadow-card: 0 1px 2px rgba(29, 37, 48, .04);
    --ui-shadow-hover: 0 12px 28px rgba(29, 37, 48, .09);
    --ui-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 全局排版 ---------- */

body {
    font-family: var(--ui-font);
    color: var(--ui-text-body);
    background-color: var(--ui-bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--ui-text-body); }

::selection { background: rgba(255, 101, 0, .16); }

.main {
    background-color: transparent;
}

.center { max-width: 64rem; }

/* ---------- 左侧导航 ---------- */

.left-nav {
    border-right: 1px solid var(--ui-border);
    background-color: #fff;
}

.left-nav::after { display: none; }   /* 去除顶部渐变装饰，保持纯净 */

.left-nav .logo {
    border-bottom: 1px solid var(--ui-border);
}

.left-nav .nav { padding-top: 1rem; }

.left-nav .nav li { padding: 1px 0.6rem; }

.left-nav .nav li a {
    height: 2.3rem;
    line-height: 2.3rem;
    padding-left: 1rem;
    border-radius: var(--ui-radius-sm);
    color: #4a5462;
    font-size: 0.66rem;
    letter-spacing: 0.01em;
    transition: background .2s ease, color .2s ease;
}

.left-nav .nav li a i {
    color: var(--ui-accent);
    font-weight: normal;
    transition: color .2s ease;
}

.left-nav .nav li a:hover {
    background: var(--ui-bg-soft);
    color: var(--ui-text-strong);
}

.left-nav .nav li a.act {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-weight: 600;
}

.left-nav .nav li a.act i { color: var(--ui-accent); }

/* 二级菜单 */
.left-nav .nav > li > ul {
    background-color: transparent;
    padding: 0.25rem 0.5rem 0.5rem;
}

.left-nav .nav > li > ul a {
    border-radius: var(--ui-radius-sm);
    color: #6b7585;
}

.left-nav .nav > li > ul > li a.act,
.left-nav .nav > li > ul > li a:hover {
    background-color: var(--ui-bg-soft);
    color: var(--ui-text-strong);
}

.left-nav .nav > li > ul > li a.act { color: var(--ui-accent); font-weight: 600; }

/* ---------- 顶部栏 ---------- */

.head_div {
    border-bottom: 1px solid var(--ui-border);
    background-color: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* 头部推广链接：去渐变色，改中性灰 */
.headada a {
    color: var(--ui-text-muted);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    transition: color .2s ease;
}

.headada a:hover { color: var(--ui-accent); }
.headada a i { color: var(--ui-text-faint); }
.headada a:hover i { color: var(--ui-accent); }

/* 搜索框 */
.search {
    height: 1.8rem;
    line-height: 1.8rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: 999px;
    background-color: var(--ui-bg-soft);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.search:hover { border-color: #cfd6df; }

.search:focus-within {
    border-color: var(--ui-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 101, 0, .12);
}

.search input { height: 1.8rem; line-height: 1.8rem; color: var(--ui-text-strong); }
.search i { color: var(--ui-text-faint); }
.search i:hover { color: var(--ui-accent); }
.search span { line-height: 1.8rem; color: var(--ui-text-faint); }
.search span strong { color: var(--ui-accent); font-weight: 600; }

/* 顶部圆形按钮 → 圆角方块，统一组件语言 */
.headerbut {
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1.8rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: 10px;
    color: #5b6675;
    transition: all .2s ease;
}

.headerbut:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.headerbut i { transition: color .2s ease; }

.headerbut > span {                       /* tooltip */
    background-color: #232a35;
    border-radius: 6px;
    font-size: 0.58rem;
}

.headerbut > span::before { border-bottom-color: #232a35; }

.headbutdiv { top: 0.6rem; }

/* ---------- 版块标题 ---------- */

.moder_h1,
.moder_h2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ui-text-strong);
    height: auto;
    line-height: 1.5;
    margin: 1.9rem 0 0.9rem;
    letter-spacing: 0.01em;
}

.moder_h2_one { margin-top: 0.5rem; }

.moder_h1 i,
.moder_h2 i { color: var(--ui-accent); font-weight: normal; }

/* ---------- 工具卡片 ---------- */

.moder { margin: 0 -0.5rem; }

.moder li { padding: 0.5rem; }

.moder li a {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-bg-card);
    box-shadow: var(--ui-shadow-card);
    padding: 1.05rem 1rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.moder li a:hover {
    border-color: var(--ui-accent);
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-hover);
}

.moder li a img { border-radius: 10px; }

.moder li a span,
.moder li a h3 {
    color: var(--ui-text-strong);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.moder li a p {
    color: var(--ui-text-muted);
    font-size: 0.58rem;
    margin-top: 0.3rem;
}

/* ---------- 工具页主体面板 ---------- */

.tools {
    background: var(--ui-bg-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-card);
    padding: 0.25rem 1.25rem 1.25rem;
}

.tools-info { border-bottom: 1px solid var(--ui-border); }

/* ---------- 底部 ---------- */

.footer {
    border-top: none;
    background-color: #1f2329;
    margin-top: 2.5rem;
    padding: 2.5rem 1rem 1.5rem;
}

.footercent h4 { color: #e6eaef; font-weight: 600; }
.footercent h4::before { background-color: var(--ui-accent); border-radius: 2px; }

.foota > div {
    background-color: #282d34;
    color: #aab2bd;
    border-radius: 10px;
    line-height: 1.5rem;
}

.footb p { color: #98a1ad; }
.footer a:hover { color: #fff; }

/* ---------- 移动端底部导航 ---------- */

@media screen and (max-width: 450px) {
    .fnavs {
        box-shadow: 0 -4px 16px rgba(29, 37, 48, .06);
        border-bottom: none;
        border-top: 1px solid var(--ui-border);
    }
}

/* ---------- 夜间模式适配 ---------- */

.night body,
body.night { background-color: #14161a; }

.night .main { background-color: transparent; }

.night .left-nav { background-color: #1b1e23; border-right-color: #2a2f37; }
.night .left-nav .logo { border-bottom-color: #2a2f37; }
.night .left-nav .nav li a { color: #9aa4b1; }
.night .left-nav .nav li a:hover { background: #252a31; color: #e4e9ef; }
.night .left-nav .nav li a.act { background: rgba(255, 101, 0, .14); color: #ff8a3d; }
.night .left-nav .nav > li > ul { background-color: transparent; }
.night .left-nav .nav > li > ul a { color: #7f8894; }
.night .left-nav .nav > li > ul > li a.act,
.night .left-nav .nav > li > ul > li a:hover { background: #252a31; color: #e4e9ef; }

.night .head_div {
    background-color: rgba(27, 30, 35, .88);
    border-bottom-color: #2a2f37;
}

.night .search { background-color: #23272e; border-color: #333a44; }
.night .search:hover { border-color: #414a56; }
.night .search:focus-within { border-color: var(--ui-accent); background-color: #1b1e23; }
.night .search input { color: #dde3ea; }

.night .headerbut { border-color: #333a44; color: #8b95a2; }
.night .headerbut:hover { border-color: var(--ui-accent); color: #ff8a3d; background: rgba(255, 101, 0, .12); }
.night .headerbut i { color: inherit; }

.night .moder_h1,
.night .moder_h2 { color: #e6ebf1; }

.night .moder li a {
    background: #1d2126;
    border-color: #2b313a;
    box-shadow: none;
}

.night .moder li a:hover {
    border-color: var(--ui-accent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.night .moder li a span,
.night .moder li a h3 { color: #dde3ea; }
.night .moder li a p { color: #7d8692; }

.night .tools { background: #1d2126; border-color: #2b313a; box-shadow: none; }
.night .tools-info { border-bottom-color: #2b313a; }

.night .footer { background-color: #171a1e; }

/* ---------- 响应式微调 ---------- */

@media screen and (max-width: 1250px) {
    .moder li { padding: 0.45rem; }
    .moder li a { padding: 0.95rem 0.9rem; }
}

@media screen and (max-width: 886px) {
    .main { padding: 0 1rem; }
    .moder_h1, .moder_h2 { margin: 1.5rem 0 0.8rem; font-size: 0.8rem; }
    .footer { margin-top: 2rem; padding: 2rem 1rem 1.25rem; }
}

@media screen and (max-width: 640px) {
    .main { padding: 0 0.75rem; }
    .moder { margin: 0 -0.3rem; }
    .moder li { padding: 0.3rem; }
    .moder li a { padding: 0.8rem 0.75rem; border-radius: 10px; }
    .moder li a img { width: 1.8rem; height: 1.8rem; }
    .tools { padding: 0.15rem 0.9rem 0.9rem; border-radius: 12px; }
}

/* 超小屏：隐藏卡片描述，聚焦工具名（信息降噪） */
@media screen and (max-width: 480px) {
    .moder li a p { display: none; }
    .moder li a div { height: auto; }
    .moder li a span,
    .moder li a h3 { height: auto; line-height: 1.8rem; }
}

/* ==========================================================================
   登录 / 注册 / 找回密码 弹窗优化（PC + 移动端）
   结构：ajax 返回的 .login 弹窗（三弹窗共用结构）
   ========================================================================== */

/* 遮罩层：加深 + 轻微毛玻璃，聚焦弹窗 */
.login_bg {
    background-color: rgba(18, 24, 33, .45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: xc-login-fade .25s ease;
}

/* 弹窗本体 */
.login {
    width: 18rem;
    padding: 1.9rem 1.6rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--ui-border);
    box-shadow: 0 24px 64px rgba(15, 23, 42, .22);
    animation: xc-login-pop .3s cubic-bezier(.2, .9, .3, 1.2);
}

@keyframes xc-login-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes xc-login-pop {
    from { opacity: 0; transform: translate(-50%, -47%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* 标题：更大更挺，左侧点缀强调条 */
.login h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ui-text-strong);
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
    padding-left: 0.6rem;
}

.login h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 0.9rem;
    border-radius: 2px;
    background: var(--ui-accent);
}

/* 关闭按钮：橙色吊牌 → 简洁圆形幽灵按钮 */
.login .icoclose {
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.4rem;
    top: 0.9rem;
    right: 0.9rem;
    border-radius: 50%;
    background-color: transparent;
    color: var(--ui-text-faint);
    font-weight: normal;
    font-size: 0.75rem;
    transition: color .2s ease, background .2s ease;
}

.login .icoclose:hover {
    color: var(--ui-text-strong);
    background-color: var(--ui-bg-soft);
}

/* 输入框：加高、浅灰底、聚焦橙环 */
.login input[type="text"],
.login input[type="password"] {
    height: 2.4rem;
    line-height: 2.4rem;
    border: 1px solid var(--ui-border-strong);
    border-radius: 10px;
    background-color: var(--ui-bg-soft);
    padding: 0 2rem 0 2.1rem;
    font-size: 0.68rem;
    color: var(--ui-text-strong);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: var(--ui-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 101, 0, .12);
}

.login input::-webkit-input-placeholder { color: var(--ui-text-faint); font-size: 0.65rem; }
.login input::-moz-placeholder { color: var(--ui-text-faint); font-size: 0.65rem; }
.login input:-ms-input-placeholder { color: var(--ui-text-faint); font-size: 0.65rem; }

.login p { margin-bottom: 0.85rem; }

/* 输入框内左图标 / 右侧眼睛图标：随新高度垂直居中 */
.login p i {
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-faint);
    font-size: 0.75rem;
}

.login p span {
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ui-text-faint);
    transition: color .2s ease;
}

.login p span:hover { color: var(--ui-accent); }

/* 图形验证码行 */
.login p .vfs { width: calc(100% - 7rem); }

.login p .vfs + img {
    height: 2.4rem;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
}

/* 邮箱验证码文字按钮 */
.login .emilpstcode {
    font-size: 0.62rem;
    color: var(--ui-accent);
    font-weight: 600;
}

/* 记住我 / 找回密码行 */
.login .ppass {
    font-size: 0.62rem;
    color: var(--ui-text-muted);
}

.login .ppass .lr:hover { color: var(--ui-accent); }

/* 主按钮：加高、品牌橙、字重加大 */
.login_but {
    height: 2.4rem;
    line-height: 2.4rem;
    border-radius: 10px;
    margin-top: 1.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    background-color: var(--ui-accent);
    box-shadow: 0 4px 12px rgba(255, 101, 0, .25);
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}

.login_but:hover {
    background-color: var(--ui-accent-hover);
    box-shadow: 0 6px 16px rgba(255, 101, 0, .32);
}

.login_but:active { transform: scale(.98); }

/* 底部链接区 */
.login_foot {
    margin-top: 1.1rem;
    font-size: 0.62rem;
    color: var(--ui-text-muted);
}

.login_foot a { color: var(--ui-accent); font-weight: 600; }
.login_foot a:hover { color: var(--ui-accent-hover); }
.login_foot .act::before { color: var(--ui-accent); }

/* 协议/微信等次级弹窗：圆角与阴影统一 */
.logins { border-radius: 16px; box-shadow: 0 24px 64px rgba(15, 23, 42, .22); overflow: hidden; }
.logins .logins_title { background-color: var(--ui-bg-soft); }

/* ---------- 夜间模式 ---------- */

.night .login {
    background-color: #1d2126;
    border-color: #2b313a;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

.night .login h2 { color: #e6ebf1; }

.night .login .icoclose { color: #5f6875; }
.night .login .icoclose:hover { color: #e6ebf1; background-color: #252a31; }

.night .login input[type="text"],
.night .login input[type="password"] {
    background-color: #23272e;
    border-color: #333a44;
    color: #dde3ea;
}

.night .login input[type="text"]:focus,
.night .login input[type="password"]:focus {
    border-color: var(--ui-accent);
    background-color: #1b1e23;
    box-shadow: 0 0 0 3px rgba(255, 101, 0, .18);
}

.night .login input::-webkit-input-placeholder { color: #5f6875; }
.night .login input::-moz-placeholder { color: #5f6875; }
.night .login input:-ms-input-placeholder { color: #5f6875; }

.night .login p i,
.night .login p span { color: #5f6875; }
.night .login p span:hover { color: #ff8a3d; }

.night .login p .vfs + img { border-color: #333a44; }
.night .login .emilpstcode { color: #ff8a3d; }
.night .login .ppass { color: #7d8692; }
.night .login_foot { color: #7d8692; }
.night .login_foot a { color: #ff8a3d; }
.night .logins { background-color: #1d2126; }
.night .logins .logins_title { background-color: #14161a; }

/* ---------- 移动端 ---------- */

@media screen and (max-width: 640px) {
    .login {
        width: calc(100vw - 3rem);
        max-width: 17.5rem;
        padding: 1.6rem 1.25rem 1.25rem;
    }

    .login h2 { font-size: 0.95rem; margin-bottom: 1.2rem; }

    /* 次级弹窗防止超出屏幕 */
    .logins {
        width: calc(100vw - 3rem);
        max-width: 17.5rem;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }

    /* 原关闭图标在弹窗左侧外，移动端会出屏，收回弹窗内 */
    .logins .icochahao {
        left: auto;
        right: 0.5rem;
        top: 0.5rem;
        z-index: 10;
    }
}