/* ============================================================
   定考无忧题库 · 手机端适配样式
   ------------------------------------------------------------
   设计原则：
   1. 所有规则都包在 @media (max-width: 768px) 里，桌面端 0 影响
   2. 本文件必须在各页面自带 <style> 之后引入，才能覆盖同名规则
   3. 关键元素用 px 明确值，不依赖 rem，避免受 html 基准字号波动
   4. html 基准从 18px 降到 15px —— 这是桌面像素复刻留下的值，
      手机屏窄，沿用 18px 会让所有 rem 文字被放大 1.2 倍
   ============================================================ */

@media screen and (max-width: 768px) {

    /* ---------- 1. 根字号与基础排版 ---------- */
    html {
        font-size: 15px !important;
        /* 禁止 iOS / 微信 WebView 自行放大正文，这是"字号忽大忽小"的常见元凶 */
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body {
        font-size: 15px;
        line-height: 1.6;
        /* 消除 iOS 点击高亮方块 */
        -webkit-tap-highlight-color: transparent;
    }

    /* 触控目标不小于 40px 高度，方便点按 */
    button, .btn {
        touch-action: manipulation;
    }

    /* ---------- 2. 顶部导航栏 ---------- */
    .topbar {
        height: 46px !important;
        padding: 0 8px !important;
        gap: 4px !important;
    }

    .topbar-left {
        gap: 5px !important;
        min-width: 0;
        overflow: hidden;
        flex: 0 1 auto;
    }

    .topbar-right {
        gap: 4px !important;
        flex: 0 0 auto;
    }

    /* 站点名：强制不折行，这是之前被挤成两行的直接原因 */
    .topbar-logo {
        font-size: 14px !important;
        font-weight: 700;
        white-space: nowrap !important;
        flex: 0 0 auto;
        gap: 5px !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-logo i {
        font-size: 15px !important;
        display: inline-block !important;
    }

    /* 账号名：12 位随机串太长，超出就省略，不挤占其他元素 */
    .user-badge {
        font-size: 11px !important;
        padding: 3px 7px !important;
        gap: 3px !important;
        max-width: 92px;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    .user-badge i {
        display: inline-block !important;
        font-size: 10px !important;
        flex: 0 0 auto;
    }

    .user-badge span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .logout-btn, .back-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        flex: 0 0 auto;
    }

    /* 字号调节控件（原为内联样式，只能用 !important 覆盖） */
    .topbar-right > span {
        margin-left: 0 !important;
        gap: 1px !important;
    }

    .topbar-right > span button {
        font-size: 11px !important;
        padding: 3px 5px !important;
        min-width: 24px;
        line-height: 1.2;
    }

    #fontSizeLabel {
        font-size: 9px !important;
        min-width: 20px;
        text-align: center;
    }

    /* 折叠状态下的账号提示条 */
    .userInfoDisplay {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    /* ---------- 3. 内容容器 ---------- */
    .container {
        padding: 12px !important;
        max-width: 100% !important;
    }

    /* ---------- 4. 卡片与标题（通用） ---------- */
    .welcome-card {
        padding: 16px 18px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    .welcome-card h2 {
        font-size: 17px !important;
        margin-bottom: 3px !important;
    }

    .welcome-card p {
        font-size: 12.5px !important;
    }

    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .card {
        padding: 18px 16px !important;
        border-radius: 12px !important;
    }

    .card-icon {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }

    .card-title {
        font-size: 15.5px !important;
        margin-bottom: 3px !important;
    }

    .card-desc {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    /* ---------- 5. 表单与按钮 ---------- */
    input[type="text"], input[type="password"], input[type="number"], textarea, select {
        font-size: 15px !important; /* 低于 16px 在 iOS 上会触发自动放大 */
    }

    /* ---------- 6. 弹窗（自绘 / 页面内嵌） ---------- */
    .uid-card {
        max-width: calc(100vw - 40px) !important;
        padding: 18px 16px 14px !important;
        border-radius: 12px !important;
    }

    .uid-title {
        font-size: 15.5px !important;
    }

    .uid-body {
        font-size: 13.5px !important;
        line-height: 1.7 !important;
    }

    .uid-btn {
        min-width: 70px !important;
        height: 36px !important;
        font-size: 13.5px !important;
    }

    .modal-box, .rule-tip-box {
        max-width: calc(100vw - 32px) !important;
        padding: 18px 16px 16px !important;
        border-radius: 12px !important;
    }

    .rule-tip-body {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }

    .rule-tip-title {
        font-size: 15.5px !important;
        margin-bottom: 12px !important;
    }

    .rule-tip-now, .rule-tip-alert {
        font-size: 12.5px !important;
        padding: 8px 10px !important;
    }

    .rule-tip-btn {
        font-size: 14px !important;
        padding: 9px 26px !important;
    }

    .modal-content {
        font-size: 13px !important;
        line-height: 1.7 !important;
    }
}

/* ---------- 7. 超窄屏（iPhone SE 等 360px 以下） ---------- */
@media screen and (max-width: 365px) {
    .topbar-logo {
        font-size: 13px !important;
    }
    .user-badge {
        max-width: 72px;
        font-size: 10px !important;
    }
    .logout-btn, .back-btn {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }
}