@charset "utf-8";
/* ==========================================================================
   华苑蒙古文翻译 · 全站统一主题  theme.css
   --------------------------------------------------------------------------
   设计语言：蒙古蓝(#1B5FA8/#2E86DE) + 白云白(#FFFFFF/#F4F7FB)
             + 金线回纹(#C9A227) + 赭红点缀(#C0392B)
   加载位置：inc_header_base.php 中所有原有样式之后（最后覆盖）
   纯样式文件，不含任何脚本逻辑，不改变任何功能。
   ========================================================================== */

/* ==========================================================================
   1. 字体统一
   --------------------------------------------------------------------------
   font.css 里有一条 `* { font-family:'shmn' ... }`，把蒙古文字体强制套到了
   全站（含中文与表单控件），导致中文字形与字号不统一。
   这里用「中文优先 + 蒙古文兜底」的标准字体栈覆盖它；
   蒙古文区域(.mn / .sxt / .inputEditRow textarea) 仍优先使用蒙古文字体。
   ========================================================================== */
* {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", Helvetica, Arial, sans-serif, 'shmn';
}

.mn, .mn *, .sxt, .inputEditRow textarea {
    font-family: 'shmn', "Consolas", "Monaco", "Courier New", '微软雅黑', monospace;
}

/* ==========================================================================
   2. 基础排版与背景
   ========================================================================== */
html, body {
    color: #26333F;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 云纹质感的浅色底纹（蒙古族祥云意象，纯 CSS 径向渐变，无额外图片请求） */
body {
    background-color: #F4F7FB;
    background-image:
        radial-gradient(circle at 10% 12%, rgba(46, 134, 222, .055), transparent 38%),
        radial-gradient(circle at 90% 8%, rgba(201, 162, 39, .05), transparent 34%),
        radial-gradient(circle at 78% 88%, rgba(46, 134, 222, .05), transparent 40%),
        radial-gradient(circle at 18% 82%, rgba(201, 162, 39, .045), transparent 36%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    color: #1B3A5C;
    font-weight: 600;
    letter-spacing: .5px;
}

a, a:visited {
    color: #1B5FA8;
    text-decoration: none;
    transition: color .18s ease;
}

a:hover {
    color: #C9A227;
}

::selection {
    background: #1B5FA8;
    color: #fff;
}

/* 滚动条（Webkit 内核） */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #EAEFF6;
}

::-webkit-scrollbar-thumb {
    background: #B4C6DA;
    border-radius: 6px;
    border: 2px solid #EAEFF6;
}

::-webkit-scrollbar-thumb:hover {
    background: #1B5FA8;
}

/* ==========================================================================
   3. 蒙古族文化元素：回纹（云雷纹）装饰
   --------------------------------------------------------------------------
   用内联 SVG 平铺成一条金色回纹带，通过伪元素加在页头/页脚，
   无需修改任何 HTML 结构。
   ========================================================================== */
/* 页头需要 relative 来定位底部的金色回纹。
   页脚这里【有意】改成随内容流（覆盖 common.css 的 position:fixed）：
   固定页脚在内容较短时会撑出「视口 - 内容」的一大段空白，
   改为跟随内容流后，底部留白由 .viewspace 控制（约 50px），页面更紧凑。 */
.header, .footer {
    position: relative;
}

/* 页头底部：金线回纹 */
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'%3E%3Cpath d='M0 6h4V1h4v5h4V1h4v5h4V1h4' fill='none' stroke='%23C9A227' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: auto 7px;
    opacity: .9;
}

/* 页脚顶部：金线回纹 */
.footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 7px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='7' viewBox='0 0 24 7'%3E%3Cpath d='M0 6h4V1h4v5h4V1h4v5h4V1h4' fill='none' stroke='%23C9A227' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: auto 7px;
    opacity: .9;
}

/* 通用标题装饰：左侧金色竖条 + 蓝色主标题 */
.mg-title, .headtitle, .down .headtitle, .my .headtitle {
    position: relative;
    padding-left: 14px;
    color: #1B3A5C !important;
    font-weight: 600;
    letter-spacing: 1px;
}

.mg-title::before, .headtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(180deg, #C9A227, #E0B84C);
}

/* ==========================================================================
   4. 页头导航（蒙古蓝 + 金线）
   ========================================================================== */
.header {
    height: 54px;
    line-height: 54px;
    background: linear-gradient(180deg, #1B5FA8 0%, #174F8C 100%);
    border-top: 3px solid #C9A227;
    border-bottom: 0;
    box-shadow: 0 2px 12px rgba(23, 79, 140, .25);
}

.header .menus li {
    color: #EAF2FB;
    margin-right: 18px;
    font-size: 15px;
    transition: color .18s ease;
}

.header a li:hover {
    color: #FFD966;
}

.header .inputs li {
    color: #D6E6F7;
    font-size: 13px;
}

.header .inputs a li:hover {
    color: #FFD966;
}

/* 未登录时的行内登录框（浅色玻璃质感，放在蓝底上）
   注意: 上边距 2px、下方留 10px，避免输入框贴住页头底部的金色回纹线 */
.header .inputs .loginbox .input {
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .16);
    border-radius: 7px;
    line-height: 28px;
    height: 28px;
    margin: 2px 10px 10px 0;
    padding: 0 10px;
    transition: background .18s ease, border-color .18s ease;
}

.header .inputs .loginbox .input:focus-within {
    background: rgba(255, 255, 255, .26);
    border-color: #FFD966;
}

.header .inputs .loginbox input {
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 13px;
}

.header .inputs .loginbox input::placeholder {
    color: rgba(255, 255, 255, .62);
}

.header .inputs .loginbox .action {
    background: linear-gradient(180deg, #E8C55C 0%, #C9A227 100%);
    color: #3B2E00;
    font-weight: 600;
    border-radius: 7px;
    line-height: 28px;
    height: 28px;
    margin: 2px 0 10px;
    padding: 0 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: filter .18s ease, transform .18s ease;
}

.header .inputs .loginbox .action:hover {
    color: #3B2E00;
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* 去掉浏览器「自动填充」强制刷上的浅灰底
   Chrome 会给已保存的账号密码输入框加 rgb(232,240,254) 背景, 把页头登录框的
   透明玻璃质感盖掉。这里用「不透明内阴影覆盖 + 超长过渡延迟」双重保险。 */
.header .inputs .loginbox input:-webkit-autofill,
.header .inputs .loginbox input:-webkit-autofill:hover,
.header .inputs .loginbox input:-webkit-autofill:focus,
.header .inputs .loginbox input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #3e74ad inset !important;
    transition: background-color 9999999s ease-in-out 0s !important;
    caret-color: #ffffff;
}

/* 其它页面的输入框同样去掉自动填充底色, 保留其原本背景 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    transition: background-color 9999999s ease-in-out 0s !important;
}

/* 站点标识区（logo 下的装饰带）
   降低透明度（原来 0.9 → 现在完全不透明，即透明度减少），
   并用「顶部高光 + 底部暗部光泽 + 外投影」做出浮雕立体感 */
.headlogo .line {
    position: relative;
    opacity: 1;
    border-top: 1px solid rgba(255, 255, 255, .6);
    border-bottom: 1px solid rgba(23, 79, 140, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 4px rgba(27, 95, 168, .2),
    0 4px 12px rgba(27, 95, 168, .38);
}

/* 光泽层：上亮下暗，强化圆柱/浮雕的立体感 */
.headlogo .line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
    rgba(255, 255, 255, .45) 0%,
    rgba(255, 255, 255, .12) 36%,
    rgba(255, 255, 255, 0) 58%,
    rgba(23, 79, 140, .18) 100%);
}

/* ==========================================================================
   5. 页脚（蒙古蓝 + 金线回纹）
   ========================================================================== */
.footer {
    background: linear-gradient(180deg, #174F8C 0%, #103A68 100%);
    border-top: 0;
    border-bottom: 0;
    color: #CFE1F4;
    box-shadow: 0 -2px 12px rgba(16, 58, 104, .22);
}

.footer .screen {
    height: auto;
    min-height: 50px;
    padding: 12px 0 10px;
    line-height: 28px;
    /* 页脚 4 项是浮动的, 不 clear 的话背景盖不住换行后的那一行 */
    overflow: hidden;
}

.footer li {
    color: #CFE1F4;
    border-right: 1px solid rgba(255, 255, 255, .18);
    padding: 0 14px;
    font-size: 13px;
}

.footer li.noborder {
    border: 0;
}

.footer li a,
.footer li a:visited {
    color: #9FC4EA;
}

.footer li a:hover {
    color: #FFD966;
}

.footer .space {
    background: transparent;
}

/* ==========================================================================
   6. 表单控件统一（文本框美化）
   ========================================================================== */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"], select, textarea {
    padding: 0 12px;
    color: #26333F;
    background: #fff;
    border: 1px solid #D6E0EC;
    border-radius: 7px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"], select {
    height: 38px;
    line-height: 38px;
}

textarea {
    line-height: 1.7;
    padding: 10px 12px;
    resize: vertical;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
input[type="url"]:focus, select:focus, textarea:focus {
    border-color: #2E86DE;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 134, 222, .15);
}

input[disabled], input[readonly], textarea[disabled], textarea[readonly], select[disabled] {
    background: #F1F5FA;
    color: #5B6B7C;
    cursor: default;
    box-shadow: none;
}

input::placeholder, textarea::placeholder {
    color: #A9B7C6;
}

/* ==========================================================================
   7. 按钮统一
   ========================================================================== */
.wui-btn, .info .btns .send, .user-box .submit, .submit, .btns .send, .button {
    border-radius: 7px;
    transition: filter .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.wui-btn:hover, .submit:hover, .btns .send:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* ==========================================================================
   8. 表格统一
   ========================================================================== */
.wui-table, .wui-table-box table, table.list, .list {
    border-collapse: separate;
    border-spacing: 0;
}

.wui-table-def thead th,
.wui-table thead td {
    background: #F3F8FD;
    color: #5B6B7C;
    font-weight: 600;
}

.wui-table-def tbody tr:nth-child(odd) {
    background: #FAFCFE;
}

.wui-table-def > tbody tr:hover {
    background: #EEF6FF;
}

/* ==========================================================================
   9. 卡片 / 内容盒
   ========================================================================== */
.wui-table-box {
    border: 1px solid #E3EAF3;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* 通用白卡片（各内页正文区常见写法） */
.about, .help, .feed, .price, .down, .user-box, .me, .info, .consume {
    box-sizing: border-box;
}

/* ==========================================================================
   10. 分页统一
   ========================================================================== */
.pages li, .wui-page li {
    border-radius: 8px;
    color: #5B6B7C;
    background: #EFF4FA;
    transition: background .18s ease, color .18s ease;
}

.pages li.cur, .pages li:hover,
.wui-page li.wui-cur-true, .wui-page li:hover {
    background: linear-gradient(135deg, #1B5FA8, #2E86DE);
    color: #fff;
}

/* ==========================================================================
   11. 首页翻译区细节
   ========================================================================== */
.body .inputbox .input {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(27, 95, 168, .07);
}

.body .inputbox .input input {
    border: 1px solid #D6E0EC;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: #26333F;
}

.body .inputbox .input input:focus {
    box-shadow: inset 0 0 0 2px rgba(46, 134, 222, .12);
}

/* ⚠ 重要: 首页这一行 输入框435 + 两个按钮各130 + 间距5 = 刚好 700px(容器宽度),
   任何加宽(letter-spacing / 加粗 / 额外 padding)都会把第二个按钮挤到下一行,
   所以这里只做「去边框」处理, 不加任何影响宽度的属性 */
.body .inputbox .input .button {
    border: 0;
}

.body .inputbox .input .button:last-child {
    border-radius: 0;
}

.body .inputbox .input .button.rgfy {
    border-radius: 0 8px 8px 0;
}

.body .inputbox .tip {
    color: #4E6A88;
}

.body .inputbox .resultbox .ibox {
    border: 1px solid #E0C070;
    border-radius: 8px;
    background: #FFFDF7;
}

/* 首页下方三张服务卡 */
#sponsor .more-services-list {
    border-bottom: 1px solid #E3EAF3;
}

#trans_tools .icons-notice1 {
    color: #1B3A5C;
}

#trans_tools .h2-sponsor:hover .icons-notice1,
#trans_tools .h1-sponsor:hover .icons-notice1,
#trans_tools .h3-sponsor:hover .icons-notice1 {
    color: #C9A227;
}

/* ==========================================================================
   12. 会员中心 / 管理中心（my.css 之后的统一收口）
   ========================================================================== */
.my .box {
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(24, 60, 100, .10);
}

.my .box .menu {
    background: linear-gradient(180deg, #F3F8FD, #EAF2FB);
    border-right: 1px solid #DCE7F3;
}

.my .box .menu .item div {
    border-radius: 8px;
    color: #46586B;
}

.my .box .menu .item div:hover {
    background: #E1EEFB;
    color: #1B5FA8;
}

.my .box .menu .item div.cur {
    background: linear-gradient(135deg, #1B5FA8, #2E86DE);
    box-shadow: 0 4px 12px rgba(27, 95, 168, .3);
}

.my .box .menu .item div.cur::before {
    background: #C9A227;
}

.my .content .headitem {
    background: linear-gradient(180deg, #F4F9FE, #FFFFFF);
    border-bottom: 1px solid #E6EEF7;
}

.my .content .headitem .head::before {
    background: linear-gradient(180deg, #C9A227, #E0B84C);
}

/* ==========================================================================
   13. 通用过渡与焦点可见性（无障碍）
   ========================================================================== */
button, .button, a, input, textarea, select {
    transition: background-color .18s ease, color .18s ease,
    border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

:focus-visible {
    outline: 2px solid rgba(46, 134, 222, .55);
    outline-offset: 2px;
}