/* ==========================================================================
   天宏考试系统 · 设计系统 app.css
   方向：Operations-grade Enterprise（工业级企业运维）
   主色：Navy 深海军蓝 / 点睛：Amber 琥珀金 / 底：Stone 石板灰
   设计意图：稳重、权威、专业、清晰 —— 告别紫蓝渐变与通用 SaaS 视觉
   ========================================================================== */

:root {
    /* —— 品牌色板 —— */
    --navy-900: #0b1f3a;
    --navy-800: #122a4a;
    --navy-700: #1b3a5f;
    --navy-600: #244e7a;
    --navy-500: #2f5d8e;

    --amber-600: #b8740f;
    --amber-500: #d98324;
    --amber-400: #e89a3c;
    --amber-100: #fbeed4;

    --stone-50:  #f7f6f3;
    --stone-100: #eeede8;
    --stone-200: #dddacf;
    --stone-300: #c4c2b3;

    --ink-900: #14181f;
    --ink-700: #353c47;
    --ink-500: #5a6271;
    --ink-400: #7c8493;

    /* —— 语义色 —— */
    --success: #1c7c54;
    --success-bg: #e3f2e9;
    --warning: #b8860b;
    --warning-bg: #fbf3da;
    --danger:  #b3261e;
    --danger-bg: #fbe5e3;
    --info:    #2f5d8e;
    --info-bg: #e4ecf5;

    /* —— 覆盖 Bootstrap 主色，让 btn-primary / text-primary 走 navy —— */
    --bs-primary: #1b3a5f;
    --bs-primary-rgb: 27, 58, 95;

    /* —— 排版 —— */
    --font-sans: "Inter", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

    /* —— 节奏 —— */
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06), 0 1px 3px rgba(11, 31, 58, 0.04);
    --shadow:    0 4px 12px rgba(11, 31, 58, 0.08), 0 1px 3px rgba(11, 31, 58, 0.04);
    --shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.12), 0 2px 6px rgba(11, 31, 58, 0.06);
}

/* —— 基础重置 —— */
* { box-sizing: border-box; }
html, body { font-family: var(--font-sans); }
body {
    background: var(--stone-50);
    color: var(--ink-900);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "tnum" 0;
}
.tnum, .stat-num, .score-display, .timer #timeLeft { font-variant-numeric: tabular-nums; }

::selection { background: var(--amber-400); color: var(--navy-900); }

/* 滚动条（桌面） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--stone-100); }
::-webkit-scrollbar-thumb { background: var(--stone-300); border-radius: 6px; border: 2px solid var(--stone-100); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ==========================================================================
   顶部品牌栏 .app-nav  —— 深海军蓝 + 琥珀发丝线（记忆点）
   ========================================================================== */
.app-nav {
    background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
    border-bottom: 1px solid var(--navy-700);
    box-shadow: 0 2px 8px rgba(11, 31, 58, 0.18);
    position: relative;
}
.app-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--amber-500) 0%, var(--amber-400) 40%, transparent 100%);
    opacity: 0.85;
}
.app-nav .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.app-nav .brand-mark {
    width: 30px; height: 30px;
    background: var(--amber-500);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-900);
    font-weight: 800;
    font-size: 0.95rem;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.app-nav .navbar-nav .nav-link {
    color: rgba(255,255,255,0.72);
    font-weight: 500;
    padding: 0.5rem 0.95rem !important;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
    letter-spacing: 0.01em;
}
.app-nav .navbar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.app-nav .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.10);
    box-shadow: inset 0 -2px 0 var(--amber-500);
}
.app-nav .navbar-text { color: rgba(255,255,255,0.78) !important; font-size: 0.88rem; }
.app-nav .btn-outline-light {
    border-color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-sm);
}
.app-nav .btn-outline-light:hover { background: var(--amber-500); border-color: var(--amber-500); color: var(--navy-900); }

/* ==========================================================================
   页面容器与标题
   ========================================================================== */
.app-page { padding: 2rem 0 3rem; }
.app-title {
    font-weight: 700;
    color: var(--navy-900);
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}
.app-title small { color: var(--ink-400); font-weight: 500; font-size: 0.85rem; }

/* 区块标题 */
.section-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: var(--navy-900);
}
.section-bar::before {
    content: "";
    width: 4px; height: 1.1rem;
    background: var(--amber-500);
    border-radius: 2px;
}

/* ==========================================================================
   卡片 .app-card —— 利落 4px 圆角 + 极浅边 + 内嵌分类色条
   ========================================================================== */
.app-card {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--stone-300);
}
.app-card .card-header {
    background: var(--stone-100);
    border-bottom: 1px solid var(--stone-200);
    font-weight: 700;
    color: var(--navy-900);
    padding: 0.9rem 1.25rem;
}
.app-card .card-body { padding: 1.25rem; }

/* 考试卡片（考试职工侧） */
.exam-card { border-left: 4px solid var(--amber-500); }
.exam-card .exam-title {
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: 0.35rem;
    line-height: 1.35;
}
.exam-card .exam-desc { color: var(--ink-500); font-size: 0.92rem; min-height: 2.6em; }
.exam-card .exam-meta {
    list-style: none;
    padding: 0; margin: 0.5rem 0 0;
    display: grid;
    gap: 0.4rem;
}
.exam-card .exam-meta li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-700);
    font-size: 0.9rem;
}
.exam-card .exam-meta .meta-k { color: var(--ink-400); width: 4.5em; flex-shrink: 0; }
.exam-card .exam-meta strong { color: var(--navy-900); }

/* ==========================================================================
   统计数字 .stat-grid / .stat-card —— 大号 tabular 数字
   ========================================================================== */
.stat-grid { display: grid; gap: 1rem; }
.stat-card {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.stat-card .stat-label {
    color: var(--ink-400);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.stat-card .stat-num {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--navy-900);
    line-height: 1;
    margin-top: 0.5rem;
    letter-spacing: -0.02em;
}
.stat-card .stat-foot { color: var(--ink-500); font-size: 0.85rem; margin-top: 0.5rem; }
.stat-card .stat-bar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--amber-500);
}
.stat-card.tone-success .stat-bar { background: var(--success); }
.stat-card.tone-info    .stat-bar { background: var(--info); }
.stat-card.tone-warning .stat-bar { background: var(--warning); }
.stat-card.tone-danger  .stat-bar { background: var(--danger); }

/* ==========================================================================
   表格 .app-table —— 紧凑、zebra、悬浮行
   ========================================================================== */
.app-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
}
.app-table thead th {
    background: var(--navy-800);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 0.7rem 1rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border-bottom: 2px solid var(--amber-500);
}
.app-table thead th:first-child { border-top-left-radius: var(--radius); }
.app-table thead th:last-child  { border-top-right-radius: var(--radius); }
.app-table tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--stone-200);
    color: var(--ink-700);
    vertical-align: middle;
}
.app-table tbody tr:nth-child(even) td { background: var(--stone-50); }
.app-table tbody tr:hover td { background: var(--amber-100); }
.app-table tbody tr:last-child td { border-bottom: none; }

/* ==========================================================================
   按钮 —— 收紧圆角，主按钮 navy，强调按钮 amber
   ========================================================================== */
.btn { border-radius: var(--radius); font-weight: 600; letter-spacing: 0.01em; }
.btn-primary {
    background: var(--navy-700); border-color: var(--navy-700);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--navy-800); border-color: var(--navy-800);
}
.btn-accent {
    background: var(--amber-500); border-color: var(--amber-500); color: var(--navy-900);
}
.btn-accent:hover { background: var(--amber-600); border-color: var(--amber-600); color: #fff; }
.btn-outline-primary { color: var(--navy-700); border-color: var(--navy-700); }
.btn-outline-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }

/* ==========================================================================
   表单 —— 减小圆角，聚焦时琥珀色描边
   ========================================================================== */
.form-control, .form-select {
    border-radius: var(--radius);
    border-color: var(--stone-200);
    color: var(--ink-900);
}
.form-control:focus, .form-select:focus {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(217, 131, 36, 0.18);
}
.form-label { font-weight: 600; color: var(--ink-700); margin-bottom: 0.35rem; }
.form-text { color: var(--ink-400); }

/* ==========================================================================
   徽章 —— 工业标签风，去卡通化
   ========================================================================== */
.badge { font-weight: 600; letter-spacing: 0.02em; padding: 0.4em 0.6em; border-radius: var(--radius-sm); }
.badge.bg-primary { background: var(--navy-700) !important; }
.badge.bg-info    { background: var(--info) !important; color: #fff !important; }
.badge.bg-warning { background: var(--warning) !important; color: #fff !important; }
.badge.bg-secondary { background: var(--ink-500) !important; }

/* ==========================================================================
   登录页 —— 蓝图网格底（致敬工程感，非装饰色块）
   ========================================================================== */
.bg-blueprint {
    background-color: var(--navy-900);
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.login-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.login-card .login-head {
    background: var(--navy-900);
    color: #fff;
    padding: 1.8rem 2rem 1.6rem;
    position: relative;
}
.login-card .login-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--amber-500), var(--amber-400) 50%, transparent);
}
.login-card .login-head .kicker {
    color: var(--amber-400);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.login-card .login-head h1 {
    font-size: 1.45rem; font-weight: 800; margin: 0.4rem 0 0; letter-spacing: 0.01em;
}
.login-card .login-head p { color: rgba(255,255,255,0.6); margin: 0.4rem 0 0; font-size: 0.88rem; }
.login-card .login-body { padding: 2rem; }

/* ==========================================================================
   考试页 —— 去掉紫蓝渐变 header，计时栏重设
   ========================================================================== */
.exam-hero {
    background: var(--navy-900);
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.8rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--navy-700);
}
.exam-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--amber-500), var(--amber-400) 50%, transparent);
}
.exam-hero h3 { font-weight: 800; margin: 0 0 0.3rem; letter-spacing: 0.01em; }
.exam-hero p { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.92rem; }
.exam-hero .hero-stats {
    display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem;
    padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12);
}
.exam-hero .hero-stats span { color: rgba(255,255,255,0.85); font-size: 0.9rem; }
.exam-hero .hero-stats strong { color: var(--amber-400); font-size: 1.05rem; }

/* 计时栏 */
.exam-timer {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-left: 4px solid var(--navy-700);
    border-radius: var(--radius);
    padding: 0.9rem 1.25rem;
    box-shadow: var(--shadow-sm);
    color: var(--navy-900);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: border-color .2s, color .2s, background .2s;
}
.exam-timer small { color: var(--ink-400); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.exam-timer.warning {
    border-left-color: var(--danger);
    color: var(--danger);
    background: var(--danger-bg);
    animation: examPulse 1.1s ease-in-out infinite;
}
@keyframes examPulse { 0%,100%{opacity:1;} 50%{opacity:0.72;} }

/* 题目卡 */
.question-card {
    background: #fff;
    border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
}
.question-card .q-num {
    width: 30px; height: 30px;
    background: var(--navy-800); color: #fff;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem;
}
.question-card .q-text { font-weight: 600; color: var(--ink-900); font-size: 1.04rem; line-height: 1.55; }
.opt-item {
    border: 1.5px solid var(--stone-200);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex; align-items: center; gap: 0.6rem;
}
.opt-item:hover { border-color: var(--amber-500); background: var(--amber-100); }
.opt-item input { accent-color: var(--navy-700); }
.opt-item input:checked ~ .opt-label { color: var(--navy-800); font-weight: 600; }

/* 固定提交栏 */
.exam-submitbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--stone-200);
    box-shadow: 0 -4px 16px rgba(11,31,58,0.08);
    padding: 0.85rem 0;
    z-index: 1030;
}

/* ==========================================================================
   成绩页 —— 大号得分环 / 进度条
   ========================================================================== */
.result-card {
    max-width: 640px; margin: 0 auto;
    background: #fff; border: 1px solid var(--stone-200);
    border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.result-card .result-head {
    background: var(--navy-900); color: #fff; padding: 1.8rem 2rem; text-align: center;
    position: relative;
}
.result-card .result-head::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
    background: linear-gradient(90deg, var(--amber-500), var(--amber-400) 50%, transparent);
}
.result-score { font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--navy-900); }
.result-score .score-total { color: var(--amber-500); font-size: 1.6rem; }
.result-grade {
    display: inline-block; padding: 0.4rem 1.1rem; border-radius: 999px;
    font-weight: 700; letter-spacing: 0.04em; font-size: 0.95rem;
}
.grade-excellent { background: var(--success); color: #fff; }
.grade-good      { background: var(--info); color: #fff; }
.grade-average   { background: var(--warning); color: #fff; }
.grade-pass      { background: var(--amber-500); color: var(--navy-900); }
.grade-fail      { background: var(--danger); color: #fff; }
.result-card .progress { height: 12px; border-radius: 999px; background: var(--stone-200); }
.result-card .progress-bar { background: linear-gradient(90deg, var(--navy-700), var(--amber-500)); }

/* ==========================================================================
   模态框 / 步骤指示器 / 工具
   ========================================================================== */
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal-header { background: var(--navy-900); color: #fff; border-bottom: none; }
.modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-title { font-weight: 700; letter-spacing: 0.01em; }

/* 步骤指示器 */
.steps { display: flex; gap: 0.5rem; }
.step {
    flex: 1; text-align: center; padding: 0.7rem 0.4rem;
    background: var(--stone-100); border: 1px solid var(--stone-200);
    border-radius: var(--radius); color: var(--ink-400);
    font-size: 0.85rem; font-weight: 600; position: relative;
}
.step.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); box-shadow: inset 0 -2px 0 var(--amber-500); }

/* 提示条美化 */
.alert { border-radius: var(--radius); border: none; padding: 0.8rem 1.1rem; }
.alert-info { background: var(--info-bg); color: var(--navy-800); }
.alert-success { background: var(--success-bg); color: #14593f; }
.alert-warning { background: var(--warning-bg); color: #7a5a08; }
.alert-danger { background: var(--danger-bg); color: #8a1b16; }

/* 分页 */
.pagination .page-link { color: var(--navy-700); border-color: var(--stone-200); border-radius: var(--radius-sm) !important; margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }

/* 顶部用户栏（首页游客/欢迎） */
.user-bar {
    background: var(--navy-900); border-bottom: 1px solid var(--navy-700);
    color: rgba(255,255,255,0.8); font-size: 0.88rem;
}
.user-bar .container { display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; padding: 0.5rem 0; }

/* 工具类 */
.text-amber { color: var(--amber-600) !important; }
.text-navy { color: var(--navy-800) !important; }
.bg-navy { background: var(--navy-800) !important; }
.divider { height: 1px; background: var(--stone-200); margin: 1.25rem 0; border: none; }

/* ==========================================================================
   页脚 .app-footer —— 版权信息
   ========================================================================== */
.app-footer {
    background: var(--navy-900);
    color: rgba(255,255,255,0.65);
    padding: 1.2rem 0;
    margin-top: 3rem;
    border-top: 1px solid var(--navy-700);
    font-size: 0.85rem;
    text-align: center;
}
.app-footer .footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.app-footer .footer-divider {
    color: rgba(255,255,255,0.3);
}
.app-footer .footer-link {
    color: var(--amber-400);
    text-decoration: none;
    transition: color 0.15s;
}
.app-footer .footer-link:hover {
    color: var(--amber-500);
    text-decoration: underline;
}

/* 响应式微调 */
@media (max-width: 575.98px) {
    .stat-card .stat-num { font-size: 2rem; }
    .exam-hero .hero-stats { gap: 1rem; }
    .result-score { font-size: 2.6rem; }
    .app-footer .footer-content { flex-direction: column; gap: 0.4rem; }
}