/* ===== Portal 公共样式：头部用户控件（品牌栏 + 导航 + Banner）+ 底部 ===== */
a { color: inherit; text-decoration: none; }
/* 防止 Vue 挂载前 {{}} 模板闪烁 */
[v-cloak] { display: none; }
body { background: #f5f7fa; margin: 0; font-family: "Microsoft YaHei", sans-serif; color: #333; overflow-x: hidden; }

/* ===== 顶部导航（仿官网 #hd 结构：圆角 + 阴影悬浮感） ===== */
#hd { background: transparent; position: relative; }
#hd .wp { width: 88%; margin: 0 auto; padding: 14px 0 18px; }
#hd .main-container { position: relative; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,0.12); }
#hd .hd-row { display: flex; align-items: center; justify-content: space-between; flex: 1; }
#hd .logo { display: flex; align-items: center; flex: 1; min-width: 0; }
#hd .logo img { height: auto; width: 85%; display: block; object-fit: contain; }
#hd .nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; flex: 1; justify-content: center; gap: 6px; }
#hd .nav li { position: relative; }
#hd .nav li a.v1 { display: block; padding: 0 18px; height: 72px; line-height: 72px; font-size: 16px; color: #333; text-decoration: none; white-space: nowrap; position: relative; }
#hd .nav li a.v1::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; background: #1a3a6e; transform: scaleX(0); transition: transform .25s ease; }
#hd .nav li a.v1:hover { color: #1a3a6e; }
#hd .nav li a.v1:hover::after { transform: scaleX(1); }
#hd .nav li.active a.v1 { color: #1a3a6e; font-weight: bold; }
#hd .nav li.active a.v1::after { transform: scaleX(1); }
#hd .nav-lang { font-size: 13px; color: #999; white-space: nowrap; }
#hd .nav-lang a { color: #999; }
#hd .nav-lang a:hover { color: #1a3a6e; }
.hidden-xs { display: inline-block; }

/* 汉堡按钮（默认隐藏，手机端显示） */
#hd .menuBtn { display: none; width: 28px; height: 24px; position: absolute; right: 24px; top: 24px; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 1000; }
#hd .menuBtn .line { display: block; height: 3px; background: #1a3a6e; border-radius: 2px; transition: .3s; }
#hd .menuBtn.open .line1 { transform: translateY(10px) rotate(45deg); }
#hd .menuBtn.open .line2 { opacity: 0; }
#hd .menuBtn.open .line3 { transform: translateY(-10px) rotate(-45deg); }

/* 手机端侧边菜单（默认隐藏，open 时滑出） */
#aside { display: none; position: fixed; top: 0; right: 0; width: 70%; max-width: 280px; height: 100%; background: #fff; box-shadow: -2px 0 12px rgba(0,0,0,.15); z-index: 999; padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform .3s; }
#aside.open { display: block; transform: translateX(0); }
#aside .nv { list-style: none; margin: 0; padding: 0; }
#aside .nv li { border-bottom: 1px solid #eee; }
#aside .nv li a { display: block; padding: 14px 6px; font-size: 15px; color: #333; }
#aside .nv li a:hover, #aside .nv li.active a { color: #1a3a6e; }
#aside .lang { margin-top: 16px; font-size: 14px; }
#aside .lang a { color: #1a3a6e; margin-right: 12px; }

/* 蓝色横幅（100% 沾满窗体宽度，直角无阴影，仅 header 有圆角阴影） */
.banner { background: linear-gradient(135deg,#1a3a6e 0%, #2c5aa0 100%); color: #fff; padding: 36px 0; }
.banner-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; }
.banner h1 { margin: 0; font-size: 26px; font-weight: normal; }
.banner p { margin: 8px 0 0; font-size: 13px; opacity: .85; }

/* 底部 */
.foot { background: #343434; color: #cfd2d6; font-size: 16px; margin-top: 30px; padding: 40px 0; text-align: center; }
.foot .container { margin: 0 auto; }
.foot p { margin: 0; line-height: 1.8; }
.foot a { color: #cfd2d6; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 900px) {
    #hd .wp { width: 100%; padding: 14px 0 18px; }   /* 左右不留，上下留空间让圆角阴影显现 */
    #hd .main-container { height: 72px; padding: 0 16px; }  /* 保留圆角 + 阴影 */
    #hd .nav { display: none; }              /* 仅隐藏菜单，保留 logo 和 nav-lang */
    #hd .hd-row { justify-content: space-between; gap: 12px; }
    #hd .nav-lang { display: none; }        /* 语言切换移至 #aside 抽屉，header 简化 */
    #hd .menuBtn { display: flex; }
    .banner { padding: 24px 0; }
    .banner h1 { font-size: 20px; }
    .banner-inner { padding: 0 20px; }

/* ===== 统一响应式（覆盖所有 Portal 页面） ===== */
/* 平板及以下：主区域收窄留白、banner 纵向堆叠 */
@media (max-width: 900px) {
    .portal-main { padding: 0 12px 30px; margin-top: 16px; }
    .banner-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .banner p { font-size: 12px; }
}

/* 手机：进一步收紧，表单 label 置顶、输入框全宽 */
@media (max-width: 600px) {
    .portal-main { padding: 0 10px 24px; }
    .banner { padding: 20px 0; }
    .banner h1 { font-size: 18px; }
    .banner p { font-size: 11px; }
    .foot { font-size: 13px; padding: 12px 10px; }
    .portal-card { border-radius: 6px; }
    .card-header { padding: 12px 14px; }
    .card-header h3 { font-size: 15px; }

    /* 注册/表单类页面：label 顶部对齐，输入框占满 */
    .reg-wrap { margin: 16px auto; padding: 0 10px; }
    .reg-card { padding: 18px 16px; }
    .reg-actions .el-button { width: 100%; min-width: 0; }

    /* 所有 el-form 在窄屏 label 置顶、内容占满 */
    .el-form-item__label { float: none; display: block; text-align: left; line-height: normal; padding-bottom: 4px; }
    .el-form-item__content { margin-left: 0 !important; }
    .el-form-item { margin-bottom: 14px; }

    /* 考试答题选项在窄屏全宽、文字可换行 */
    .q-options .el-radio, .q-options .el-checkbox { white-space: normal; margin: 10px 0 !important; height: auto; }
    .q-options .el-radio.is-bordered, .q-options .el-checkbox.is-bordered { width: 100%; }
    .q-card { padding: 12px; }
    .exam-info { gap: 10px; }
    .exam-info span { font-size: 12px; padding: 4px 10px; }

    /* 首页入口卡（学习中心/考试中心）手机端修复：避免 flex 收缩致内容塌缩 */
    .entrance-col { display: block !important; gap: 14px; height: auto !important; min-height: 0 !important; }
    .entrance-card { flex: 0 0 auto !important; min-height: 240px !important; padding: 18px 16px !important; margin-bottom: 14px !important; display: block !important; overflow: visible !important; height: auto !important; background: #fff !important; border: 1px solid #e6e8eb !important; border-radius: 6px !important; position: relative !important; }
    .entrance-card h4 { font-size: 16px; margin: 0 0 8px; display: block; color: #1a3a6e !important; visibility: visible !important; opacity: 1 !important; }
    .entrance-card .desc { font-size: 12px; margin: 0 0 12px; display: block; color: #6b7280 !important; visibility: visible !important; opacity: 1 !important; }
    .entrance-card .tags { display: block; margin-bottom: 12px; visibility: visible !important; }
    .entrance-card .tags .el-tag { display: inline-block; margin: 0 6px 6px 0; visibility: visible !important; }
    .entrance-card .el-button { width: 100% !important; font-size: 14px; padding: 11px 0; display: block !important; visibility: visible !important; opacity: 1 !important; }

    /* 首页 .row 手机端取消固定最小高度，让两行按内容自然高度堆叠 */
    .row { min-height: 0 !important; }
}