@charset "utf-8";
:root{
    --primary-color:#667eea;
    --secondary-color:#764ba2;
    --success-color:#28a745;
    --warning-color:#ffc107;
    --danger-color:#dc3545;
    --border-primary:#007bff;
    --bg-body:#f8f9fa;
    --text-primary:#212529;
    --text-muted:#6c757d;
    --navbar-bg:#fff;
    --card-bg:#fff;
    --border-color:#dee2e6;
    --hover-shadow:rgba(0,0,0,.15);
    --bs-light-border-subtle:#f1f1f1;
    --bs-navbar-active-color:#0056b3;
    --icon-highlight-color:#ffd700;
    --background-hover:#e9ecef;
    --accent-color:#764ba2;
    --content-max-width:1320px;
    --card-radius:.75rem;
    --card-shadow:0 .25rem .75rem rgba(0,0,0,.05);
    --card-shadow-hover:0 .75rem 1.5rem rgba(0,0,0,.1);
}
html{scroll-behavior:smooth}
body{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color:var(--bg-body);
    color:var(--text-primary);
    line-height:1.6;
}
img{max-width:100%}
a{color:var(--primary-color);text-decoration:none}
a:hover{color:var(--secondary-color)}
button,input,textarea,select{font:inherit}
h1,h2,h3,h4,h5,h6{color:var(--text-primary)}
h1,h2,h3,h4{line-height:1.3}
h2,.h2{font-size:1.22rem;font-weight:600}
h3,.h3{font-size:1.14rem;font-weight:500}
h4,.h4{font-size:1rem;font-weight:400}
.title-h1{
    font-size:1.5rem;
    line-height:1.3;
    letter-spacing:2px;
    margin:.6rem auto;
    padding-bottom:.4rem;
    border-bottom:1px solid var(--border-primary);
    text-shadow:1px 1px 4px rgba(0,0,0,.15);
}
.breadcrumb{margin:.6rem auto .1rem}
.btn{transition:all .25s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 .4rem 1rem rgba(0,0,0,.12)}
.btn:active{transform:translateY(0)}
.card{
    background-color:var(--card-bg);
    border:1px solid rgba(0,0,0,.06);
    border-radius:var(--card-radius);
}
.card-hover{transition:all .25s ease}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover)}
.navbar{
    background-color:var(--navbar-bg);
    padding:10px 20px;
    box-shadow:0 4px 8px rgba(0,0,0,.05);
}
.navbar .navbar-brand{
    font-weight:700;
    font-size:1.5rem;
    color:var(--primary-color);
}
/* Logo：只锁高度、宽度交给原图比例（等比率缩放，永不拉伸）。
 * 全局 img{max-width:100%} 在极窄屏会把宽度压住，object-fit:contain 保证
 * 此时是等比留白而不是压扁；窄屏用断点收小，别让 70px 的 logo 占满手机导航条。 */
.navbar .navbar-brand img{
    display:block;
    height:70px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}
.navbar .nav-link{
    font-weight:500;
    padding:8px 12px;
    border-radius:6px;
    transition:color .2s ease,background-color .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
    color:var(--bs-navbar-active-color);
    background-color:var(--background-hover);
}
.dropdown-menu{
    border:1px solid rgba(0,0,0,.06);
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}
.dropdown-item{border-radius:6px}
.dropdown-item:hover,
.dropdown-item:focus{background-color:var(--background-hover)}
.section{
    padding:20px;
    background-color:var(--bg-body);
}
.index_section{
    width:100%;
    max-width:var(--content-max-width);
    margin:10px auto;
    padding:15px!important;
    background-color:var(--card-bg);
    border-radius:var(--card-radius);
    box-shadow:var(--card-shadow);
}
.index_section>.card{
    border-color:rgba(0,0,0,.06);
    box-shadow:none;
}
.right_box{
    background-color:var(--card-bg);
    padding:25px;
    border-radius:var(--card-radius);
    box-shadow:var(--card-shadow);
}
.right_box h1{
    font-weight:700;
    margin-bottom:25px;
    color:var(--text-primary);
    border-bottom:2px solid var(--border-primary);
    padding-bottom:10px;
}
.right_box .card{
    border-radius:10px;
    box-shadow:var(--card-shadow);
    border:0;
    background-color:var(--card-bg);
}
.right_box .card-body{padding:30px}

/* ==================== 通用工具工作区 ==================== */
.tool-workspace{height:650px}
.tool-workspace>.col-lg-4,
.tool-workspace>.col-lg-5,
.tool-workspace>.col-lg-6,
.tool-workspace>.col-lg-7,
.tool-workspace>.col-lg-8{
    min-height:0;
}
.tool-workspace>.col-lg-4>.card,
.tool-workspace>.col-lg-5>.card,
.tool-workspace>.col-lg-6>.card,
.tool-workspace>.col-lg-7>.card,
.tool-workspace>.col-lg-8>.card{
    width:100%;
    height:100%;
    min-height:0;
}
.tool-workspace .card-body{
    min-height:0;
}
.tool-workspace-scroll{
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
}
.tool-workspace-scroll::-webkit-scrollbar{width:6px}
.tool-workspace-scroll::-webkit-scrollbar-track{background:transparent}
.tool-workspace-scroll::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,.2);
    border-radius:10px;
}
.tool-workspace-scroll::-webkit-scrollbar-thumb:hover{
    background-color:rgba(0,0,0,.35);
}

/* ==================== Tool Detail ==================== */
.tool-detail-clamp{
    max-height:300px;
    padding-top:10px;
    padding-bottom:50px;
    transition:max-height .35s ease;
}
.tool-detail-mask{
    height:4.5rem;
    bottom:0;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95));
}
.tool_detail ul,
.tool_detail ol{
    list-style-position:outside;
    padding-left:20px;
    margin:0;
}
.tool_detail li{margin-bottom:8px}
.tool_detail .code-block{
    background:var(--text-primary);
    color:var(--bg-body);
    border-left:3px solid var(--primary-color);
    padding:20px;
    border-radius:5px;
    font-family:"Courier New",Courier,monospace;
    overflow-x:auto;
    margin:20px 0;
}
#cms-thin-content{
    border-top-left-radius:var(--card-radius);
    border-bottom-left-radius:var(--card-radius);
    border-left:4px solid var(--primary-color)!important;
    box-shadow:-4px 0 10px -2px rgba(var(--bs-primary-rgb),.2);
}
#cms-thin-content.card{border-left:4px solid var(--primary-color)}
#cms-thin-content .card-title{color:var(--primary-color)}
#cms-thin-content .card-body{padding:1.5rem}
#cms-thin-content .card-body p{margin-bottom:.8rem}
#cms-thin-content .card-body ul.thin-bullets{margin-top:.5rem}

/* ==================== Sidebar ==================== */
.sidebar{
    height:100%;
    padding:20px;
    background-color:var(--card-bg);
    border-radius:8px;
    box-shadow:var(--card-shadow);
}
.sidebar h4{
    font-weight:600;
    margin-bottom:20px;
    color:var(--text-primary);
}
.sidebar .nav-link{
    display:flex;
    align-items:center;
    position:relative;
    padding:10px 15px;
    border-radius:6px;
    color:var(--text-primary);
    background-color:transparent;
    font-weight:500;
    transition:all .25s ease;
}
.sidebar .nav-link i{
    margin-right:8px;
    font-size:1.1rem;
    transition:color .25s ease;
}
.sidebar .nav-link:hover{
    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.sidebar .nav-link.active{
    background-color:var(--primary-color);
    color:#fff;
    font-weight:600;
    box-shadow:inset 0 -2px 0 var(--bs-navbar-active-color);
}
.sidebar .nav-link.active:hover{
    box-shadow:inset 0 -4px 0 var(--bs-navbar-active-color),0 4px 12px rgba(0,0,0,.15);
}
.sidebar .nav-link:hover i,
.sidebar .nav-link.active i{color:var(--icon-highlight-color)}

/* ==================== Form ==================== */
.form-control,
.form-select{border-color:var(--border-color)}
.form-control:focus,
.form-select:focus{
    border-color:rgba(var(--bs-primary-rgb),.55);
    box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.1);
}
.form-label{font-weight:500}
textarea.form-control{
    min-height:120px;
    resize:vertical;
}

/* ==================== Auth ==================== */
.auth-container{width:100%;max-width:540px;margin:0 auto}
.auth-icon{
    width:56px;
    height:56px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--primary-color);
    color:#fff;
    font-size:23px;
    box-shadow:0 .5rem 1rem rgba(102,126,234,.2);
}
.auth-title{font-size:24px;font-weight:600;margin-bottom:6px}
.auth-subtitle{
    font-size:14px;
    color:var(--bs-secondary-color);
    margin-bottom:26px;
}
.auth-label{font-weight:500}
.auth-input-wrap{position:relative}
.auth-input-wrap>.form-control{padding-left:42px}
.auth-input-icon{
    position:absolute;
    left:14px;
    top:50%;
    z-index:3;
    transform:translateY(-50%);
    color:var(--bs-secondary-color);
    pointer-events:none;
}
.auth-password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    z-index:3;
    transform:translateY(-50%);
    padding:5px 7px;
    border:0;
    background:transparent;
    color:var(--bs-secondary-color);
}
.auth-password-toggle:hover{color:var(--primary-color)}
.auth-submit{height:46px;font-weight:500}
.auth-links{font-size:14px;color:var(--bs-secondary-color)}
.auth-links a{color:var(--primary-color);text-decoration:none}
.auth-links a:hover{color:var(--secondary-color);text-decoration:underline}
.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:24px 0 16px;
    color:var(--bs-secondary-color);
    font-size:13px;
}
.auth-divider::before,
.auth-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:var(--bs-border-color);
}
.agreement{
    font-size:13px;
    color:var(--bs-secondary-color);
    line-height:1.6;
}
.agreement a{color:var(--primary-color)}
.captcha-btn{min-width:115px}

/* ==================== Bootstrap 表单验证 ==================== */
.was-validated .auth-input-wrap:has(.form-control:invalid)+.invalid-feedback{display:block}
.was-validated .auth-input-wrap:has(.form-control:invalid) .form-control{
    border-color:var(--bs-form-invalid-border-color);
}
.was-validated .auth-input-wrap:has(.form-control:invalid) .form-control:focus{
    border-color:var(--bs-form-invalid-border-color);
    box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
}
.auth-input-wrap:has(.form-control.is-invalid)+.invalid-feedback{display:block}
.auth-input-wrap:has(.form-control.is-invalid) .form-control{
    border-color:var(--bs-form-invalid-border-color);
}
.auth-input-wrap:has(.form-control.is-invalid) .form-control:focus{
    border-color:var(--bs-form-invalid-border-color);
    box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
}

/* ==================== Toast ==================== */
#customToastContainer{
    position:fixed;
    top:100px;
    left:50%;
    z-index:1100;
    transform:translateX(-50%);
}
.custom-toast{
    min-width:300px;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}

/* ==================== News ==================== */
.article-card{
    margin-bottom:1.5rem;
    overflow:hidden;
    border:0;
    border-radius:12px;
    box-shadow:0 4px 6px rgba(0,0,0,.05);
    transition:all .25s ease;
}
.article-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,.1);
}
.article-image{
    width:100%;
    height:180px;
    object-fit:cover;
    transition:transform .3s ease;
}
.article-card:hover .article-image{transform:scale(1.03)}
.article-title{
    font-weight:600;
    line-height:1.4;
    color:var(--text-primary);
    text-decoration:none;
}
.article-title:hover{color:var(--primary-color)}
.article-meta{font-size:.875rem;color:var(--text-muted)}
.category-badge{
    padding:.35em .65em;
    background:linear-gradient(45deg,var(--primary-color),var(--accent-color));
    color:#fff;
    border:0;
    font-size:.75rem;
}
.load-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--background-hover);
    color:var(--text-muted);
}

/* ==================== Footer ==================== */
.footer{
    margin-top:20px;
    padding:25px 0 18px;
    background:var(--bs-light-border-subtle);
}
.footer h6{
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted);
    margin-bottom:.75rem;
}
.footer a{
    color:var(--text-muted);
    transition:color .2s ease;
}
.footer a:hover{
    color:var(--primary-color);
    text-decoration:none;
}
.footer .text-muted{color:var(--text-muted)}

/* ==================== Responsive ==================== */
@media(max-width:991.98px){
    .navbar{padding:8px 15px}
    .navbar .navbar-brand{font-size:1.35rem}
    .navbar .navbar-brand img{height:52px}
    .index_section{
        padding:12px!important;
        margin:8px auto;
    }
    .tool-workspace{height:auto}
    .tool-workspace>.col-lg-4,
    .tool-workspace>.col-lg-5,
    .tool-workspace>.col-lg-6,
    .tool-workspace>.col-lg-7,
    .tool-workspace>.col-lg-8{
        height:auto;
    }
    .tool-workspace>.col-lg-4>.card,
    .tool-workspace>.col-lg-5>.card,
    .tool-workspace>.col-lg-6>.card,
    .tool-workspace>.col-lg-7>.card,
    .tool-workspace>.col-lg-8>.card{
        height:auto;
    }
    .tool-workspace-scroll{
        height:auto;
        max-height:none;
        overflow:visible;
    }
}
@media(max-width:767.98px){
    .right_box{padding:20px}
    .right_box .card-body{padding:20px}
    .sidebar{padding:15px}
    .title-h1{
        font-size:1.35rem;
        letter-spacing:1px;
    }
}
@media(max-width:575.98px){
    .navbar .navbar-brand img{height:40px}
    .index_section{
        padding:10px!important;
        margin:5px auto;
        border-radius:.6rem;
    }
    .auth-container{width:100%}
    .auth-title{font-size:22px}
    .auth-icon{
        width:52px;
        height:52px;
        font-size:21px;
    }
    .captcha-btn{min-width:105px}
    .right_box{
        padding:15px;
        border-radius:6px;
    }
    .right_box .card-body{padding:15px}
}/* ===== Social login buttons ===== */
.social-login .auth-divider{margin:22px 0 14px}
.social-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.social-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 20px;border-radius:50rem;
    border:1px solid #dee2e6;background:#fff;
    font-size:.9rem;color:#495057;text-decoration:none;
    transition:all .2s ease;
}
.social-btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.08);color:#212529}
.social-btn i{font-size:1.05rem}
.social-btn-google i{color:#DB4437}
.social-btn-github i{color:#24292f}
.social-btn-facebook i{color:#1877F2}
.social-error-tip{border-radius:.5rem}

/* =========================================================
 * 导航栏溢出修复（2026-09-13）
 * 问题：es/fr/de 等长翻译下菜单项单行就需 ~1040px，而右侧（搜索/登录/语言）不可压缩，
 *       结果是菜单被挤成几百像素的窄列 → 菜单项逐字换行、登录昵称被压成一列一个字。
 * 策略：
 *   1) .navbar-collapse 允许折行 → 空间不够时右侧整块下移到第二行，而不是挤压菜单；
 *   2) 菜单项整项不换行（no 半截断行），菜单自身放不下时在条内折成多行；
 *   3) 右侧（搜索/登录/语言）不收缩，昵称超长走省略号。
 * 三者配合后：zh-cn 菜单短 → 仍是单行不变；es/fr/de → 菜单一行 + 右侧一行，整洁不挤压。
 * ========================================================= */
.navbar .navbar-collapse{
    align-items:center;
    flex-wrap:wrap;
    row-gap:.25rem;
}
.navbar .navbar-nav#top_menu{
    flex:1 1 auto;
    min-width:0;
    flex-wrap:wrap;
}
.navbar .navbar-nav#top_menu .nav-link{white-space:nowrap}

/* 右侧功能区（搜索 + 登录/语言）合成一个 flex 项：
   - 一行放得下时靠右（原样）
   - 长语种放不下时整块换到第二行，并靠 margin-left:auto 保持右对齐
     （否则会贴在左侧，就是"登录盒错位"的样子） */
.navbar .navbar-actions{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    margin-left:auto;
}
.navbar .navbar-actions > .d-flex{flex:0 0 auto}
.navbar .navbar-collapse > .d-flex{flex:0 0 auto}
#is_login_box{flex:0 0 auto;white-space:nowrap}
/* 头像、按钮永不压缩、永不被挤掉 */
#is_login_box img{flex:0 0 auto}
#is_login_box .btn{flex:0 0 auto;white-space:nowrap}
/* 昵称策略：够长就完整显示（上限 12rem ≈ 12 个汉字），超长用省略号截断，
   但至少保留 3rem —— 只截断、不隐藏（完整昵称挂在 title 上，hover 可见） */
#is_login_box .fw-medium{
    display:inline-block;
    flex:0 1 auto;
    min-width:3rem;
    max-width:12rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
}
@media (min-width:992px){
    .navbar .navbar-nav#top_menu .nav-link{padding:8px 9px}
}