/* ============================================================
 * X字怎么写 墨水屏优化样式 — 小朋友护眼版（Issue IKDHOZ 布局重构）
 *
 * 原则：大字 + 简洁 + 零动画
 * 配色（全局统一浅米色背景，与小程序一致）：
 *   浅米背景 #f2ecdf / 墨色 #33302b / 次级纸底 #f6f1e7
 *   弱化 #9a917e / 占位 #b8ae98 / 浅分隔 #e8dfcb
 * 布局：去大描边框，留白与细分割线分区；大屏宽度放开 min(1100px, 100%)
 * ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
    background: #f2ecdf;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px 0;
    color: #33302b;
    /* 移动端点按高亮清理（Issue IKF9NL）：默认 tap highlight 在手机浏览器
       （微信内核/Chrome）点击可点元素瞬间闪现蓝色方块；属性可继承，
       页面内全部元素一次覆盖，按压反馈保留 :active/:hover 样式 */
    -webkit-tap-highlight-color: transparent;
}

/* === 主界面容器（无描边框，靠留白分区；flex:1 占满页脚上方空间）=== */
.app-view {
    width: min(1100px, 100%);
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* === 主界面头部 === */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 8px;
    border-bottom: 1px solid #e8dfcb;
}

.app-brand {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 4px;
}

.logout-btn {
    border: 2px solid #33302b;
    background: #f6f1e7;
    color: #33302b;
    font-size: 18px;
    padding: 8px 22px;
    cursor: pointer;
    font-family: inherit;
}

.logout-btn:hover {
    background: #efe7d6;
}

/* === 状态行 === */
.status-text {
    font-size: 20px;
    color: #9a917e;
    padding: 14px 0 4px;
    min-height: 42px;
}

.status-text.recording-status {
    color: #33302b;
    font-weight: 700;
}

/* === 结果展示区 = 打字模式录入区（Issue IKDHOZ 方案 E）===
   结果态纯展示（点击无副作用）；打字模式时内部渲染 .type-input。
   可滚动 + 细侧条滚动指示（4px 淡墨色）。 */
.result-box {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 48px;
    line-height: 1.6;
    color: #33302b;
    word-break: break-all;
    scrollbar-width: thin;
    scrollbar-color: rgba(51, 48, 43, 0.25) transparent;
}

.result-box::-webkit-scrollbar {
    width: 4px;
}

.result-box::-webkit-scrollbar-track {
    background: transparent;
}

.result-box::-webkit-scrollbar-thumb {
    background: rgba(51, 48, 43, 0.25);
    border-radius: 2px;
}

/* 关键字模式：超大居中。逐字拆分后（Issue IKF9OM）每个字是独立
   flex 项，必须显式 row + wrap——否则继承基础样式 flex-direction:
   column，每个字被堆成独立一行（语音多字关键字折行根因） */
.result-box.keyword {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: 96px;
    line-height: 1.2;
}

.result-box .placeholder {
    font-size: 26px;
    color: #b8ae98;
}

/* 输入态/录音态：result-box 切换为纵向 flex，内层 flex:1 填满后居中
   （不依赖百分比高度解析，Issue IKDHXR：输入框垂直居中 middle） */
.result-box.center-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 打字模式输入态：展示区即输入框（大号居中可换行，占位提示；垂直居中） */
.result-box .type-area-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-box .type-input {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    font-size: 52px;
    line-height: 1.4;
    color: #33302b;
    word-break: break-all;
    caret-color: #33302b;
}

.result-box .type-input:empty::before {
    content: '拼音或汉字都可以';
    color: #b8ae98;
    letter-spacing: 2px;
}

/* 录音中倒计时：大字等宽数字（无波纹、无闪烁动画；随 center-state 纵向居中） */
.rec-display {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-time {
    font-size: 96px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 6px;
}

/* === 底部操作区按钮（方角 3px 墨边，沿用现有风格）=== */
.mode-area {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 14px 0 4px;
}

.big-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 0;
    border: 3px solid #33302b;
    background: #33302b;
    color: #fffdf8;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 8px;
    cursor: pointer;
    font-family: inherit;
}

.big-btn:hover {
    background: #4a463f;
}

.big-btn:disabled {
    border-color: #b8ae98;
    background: #f6f1e7;
    color: #9a917e;
    cursor: default;
}

.big-btn svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    flex: none;
}

/* === 模式切换行：小字提示（点击切换，显示可切换到的模式）=== */
.switch-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 0 6px;
    font-size: 13px;
    color: #9a917e;
    cursor: pointer;
    user-select: none;
}

.switch-line:hover {
    color: #33302b;
}

.switch-line svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* 结果内容纵向居中容器（与小程序 result-scroll-center 语义同构，Issue IKDHXR）：
   flex: 1 0 auto —— 短内容时填满展示区并居中；长内容时撑开容器（不收缩），
   父级正常滚动、顶部不裁剪（不依赖百分比高度解析） */
.result-center {
    flex: 1 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* === 结果区候选网格（IKDFOQ：大字可辨、无点选）=== */
.candidate-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

.candidate-item {
    font-size: 48px;
    line-height: 1.2;
    color: #33302b;
}

/* 候选尾部：分页提示 / 加载更多 */
.candidate-tail {
    margin-top: 12px;
    font-size: 24px;
    color: #9a917e;
}

.candidate-more-btn {
    padding: 8px 32px;
    border: 2px solid #33302b;
    background: #f6f1e7;
    color: #33302b;
    font-size: 24px;
    cursor: pointer;
    font-family: inherit;
}

.candidate-more-btn:hover {
    background: #efe7d6;
}

/* ============================================================
 * 登录 / 注册 / 重置（无描边大框，大屏表单与小程序码引导区并排）
 * ============================================================ */

.auth-view {
    width: min(920px, 100%);
    padding: 32px 8px;
    /* 垂直居中（页脚在文档流末尾） */
    margin: auto 0;
}

.auth-title {
    text-align: center;
    font-size: 48px;
    letter-spacing: 8px;
    margin-bottom: 24px;
    color: #33302b;
}

/* 表单 + 引导区：>900px 并排，窄屏上下堆叠 */
.auth-body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.auth-forms {
    flex: 1;
    min-width: 0;
}

/* 消息区：无内容时自动隐藏 */
.auth-message {
    margin-bottom: 16px;
    padding: 14px 18px;
    border: 2px solid #33302b;
    font-size: 20px;
    line-height: 1.5;
    color: #33302b;
    word-break: break-all;
}

.auth-message:empty {
    display: none;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #33302b;
    background: #f2ecdf;
    font-size: 22px;
    color: #33302b;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: inherit;
}

.auth-input::placeholder {
    color: #b8ae98;
    font-size: 18px;
}

.auth-input:focus {
    border-color: #33302b;
    background: #f6f1e7;
}

.auth-submit {
    width: 100%;
    padding: 16px 24px;
    border: 3px solid #33302b;
    background: #33302b;
    color: #fffdf8;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 4px;
    cursor: pointer;
    font-family: inherit;
}

.auth-submit:hover {
    background: #4a463f;
}

.auth-submit:disabled {
    border-color: #b8ae98;
    background: #b8ae98;
    cursor: not-allowed;
}

.auth-links {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.auth-links button {
    border: none;
    background: none;
    padding: 8px;
    font-size: 20px;
    color: #33302b;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

.auth-tip {
    margin-top: 24px;
    text-align: center;
    font-size: 16px;
    line-height: 1.7;
    color: #9a917e;
}

/* 小程序码引导区（Issue IKDHOZ）：码图 + 一行文案 */
.qr-guide {
    flex: none;
    width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    border: 1px solid #e8dfcb;
}

.qr-guide-img {
    width: 210px;
    height: 210px;
    display: block;
}

.qr-guide-text {
    font-size: 15px;
    color: #33302b;
    line-height: 1.8;
    text-align: center;
}

/* 窄屏：引导区与表单上下堆叠 */
@media (max-width: 900px) {
    .auth-body {
        flex-direction: column;
        align-items: stretch;
    }

    .qr-guide {
        width: 100%;
    }
}

/* 页脚备案号：工信部要求已备案网站首页底部展示备案号并链接备案管理系统。
   随文档流排布（不固定定位）：滚动时不会遮挡底部操作区；
   短内容时 app-view flex:1 将其自然压到视口底部。 */
.site-footer {
    padding: 12px 0 16px;
    text-align: center;
    font-size: 14px;
}

.site-footer a {
    color: #8a8372;
    text-decoration: none;
}

.site-footer a:hover {
    color: #33302b;
    text-decoration: underline;
}

/* 声纹授权弹窗（Issue IKCE3Y）：无描边大框，纸底墨字 + 墨色主按钮 */
.consent-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.consent-dialog {
    width: min(560px, 90vw);
    background: #f2ecdf;
    padding: 36px 28px 28px;
    box-sizing: border-box;
}

.consent-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 20px;
    color: #33302b;
}

.consent-content {
    font-size: 17px;
    color: #4a4a56;
    line-height: 1.8;
    margin: 0 0 28px;
}

.consent-link {
    color: #8c2f2f;
    text-decoration: underline;
}

.consent-actions {
    display: flex;
    gap: 16px;
}

.consent-btn {
    flex: 1;
    font-size: 20px;
    padding: 14px 0;
    cursor: pointer;
    font-family: inherit;
}

.consent-btn-secondary {
    background: #f6f1e7;
    color: #33302b;
    border: 2px solid #33302b;
}

.consent-btn-primary {
    background: #33302b;
    color: #f6f1e7;
    border: 2px solid #33302b;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ============================================================
 * 汉字详情（Issue IKE5DG，版式同设计稿 v0.8）
 * ============================================================ */

/* 结果提示行（单字/多字自适应文案；空串隐藏） */
.result-tip {
    padding: 8px 8px 2px;
    text-align: center;
    font-size: 17px;
    color: #9a917e;
    letter-spacing: 2px;
}

/* 关键字逐字：详情入口（Issue IKF9OM：整块点击改逐字拆分，
   视觉不变——字号/居中/折行由容器继承，字格无额外间距保持字形流） */
.keyword-char {
    cursor: pointer;
}

.keyword-char:hover {
    color: #6b665c;
}

/* 多字结果：纯净大字间距排布，逐字可点（无边框无田字格） */
.char-cells {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.char-cell {
    font-size: 96px;
    line-height: 1.25;
    color: #33302b;
    padding: 8px 16px;
    cursor: pointer;
}

.char-cell:hover {
    color: #6b665c;
}

.char-plain {
    font-size: 48px;
    line-height: 1.6;
    color: #33302b;
    padding: 8px 4px;
}

/* 候选词内逐字：详情入口（IKE5DG，点"你好"的"你"只进"你"详情） */
.candidate-char {
    cursor: pointer;
    display: inline-block;
    padding: 0 4px;
}

.candidate-char:hover {
    color: #6b665c;
}

.candidate-char-plain {
    display: inline-block;
    padding: 0 2px;
}

/* === 详情覆盖层 === */
.detail-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2ecdf;
    z-index: 90;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.header-back {
    border: none;
    background: none;
    color: #33302b;
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    letter-spacing: 1px;
}

.header-spacer {
    width: 52px;
}

.detail-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px 16px;
    width: min(1100px, 100%);
    margin: 0 auto;
}

/* hero：动画态（无田字格线，描红轮廓，循环）与大字态 */
.detail-hero {
    text-align: center;
    padding: 30px 0 8px;
}

.detail-hero.hero-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 26px 0 4px;
}

.anim-box {
    width: 260px;
    height: 260px;
    max-width: 100%;
}

.anim-progress {
    font-size: 15px;
    color: #9a917e;
    letter-spacing: 2px;
    min-height: 22px;
    margin-top: 2px;
}

.hero-hint {
    margin-top: 8px;
}

.detail-char {
    font-family: "Kaiti SC", "STKaiti", "KaiTi", "AR PL KaitiM GB",
                 "AR PL UKai CN", "Noto Serif CJK SC", serif;
    font-size: 230px;
    line-height: 1.15;
    color: #33302b;
}

.pinyin-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pinyin-item {
    font-size: 24px;
    color: #33302b;
    letter-spacing: 1px;
}

/* 属性条：笔画 / 部首 */
.attr-bar {
    display: flex;
    margin: 22px 0 4px;
    border-top: 1px solid #e8dfcb;
    border-bottom: 1px solid #e8dfcb;
}

.attr-cell {
    flex: 1;
    text-align: center;
    padding: 12px 0;
}

.attr-cell + .attr-cell {
    border-left: 1px solid #e8dfcb;
}

.attr-label {
    font-size: 15px;
    color: #9a917e;
    letter-spacing: 2px;
}

.attr-value {
    font-size: 26px;
    color: #33302b;
    margin-top: 2px;
}

/* 详情分区与词组墙 */
.section {
    margin-top: 26px;
}

.section-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8dfcb;
}

.word-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.chip {
    background: #f6f1e7;
    border: 1px solid #e8dfcb;
    padding: 8px 16px;
    font-size: 19px;
    color: #33302b;
    letter-spacing: 1px;
}

.empty-state {
    margin-top: 16px;
    padding: 26px 0;
    text-align: center;
    font-size: 16px;
    color: #b8ae98;
    letter-spacing: 2px;
}

/* === 大屏（pad/PC）两栏：≥700px，左栏 hero 固定右栏信息列 === */
@media (min-width: 700px) {
    .detail-body {
        display: grid;
        grid-template-columns: 440px 1fr;
        gap: 40px;
        padding-top: 36px;
        padding-bottom: 16px;
        align-items: start;
    }

    .detail-hero.hero-anim .anim-box,
    .detail-hero .anim-box {
        width: 380px;
        height: 380px;
    }

    .detail-hero .detail-char {
        font-size: 340px;
        line-height: 1.1;
    }

    .info-col {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding-top: 8px;
    }

    .info-col .pinyin-row {
        justify-content: flex-start;
        margin-top: 0;
    }

    .info-col .pinyin-item {
        font-size: 30px;
    }

    .info-col .attr-bar {
        margin-top: 26px;
    }
}

/* 移动端点按高亮清理（Issue IKF9NL）：body 级继承透明为主；
   结果区高频可点元素显式声明，防个别内核不继承该属性 */
.char-cell,
.candidate-char,
.result-box.keyword,
.candidate-more-btn,
.switch-line,
.big-btn {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
 * 首屏引导页 + 协议提示行（首屏价值演示 Issue）
 * 规范见 docs/design/前端设计规范.md §8；token 见 §2
 * ============================================================ */

/* 引导页：标题+三步整体垂直居中（主按钮上方空间内），
   底部按钮/协议提示行/切换行与正常首屏同款 */
.guide-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 8px 0;
}

.guide-title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 28px;
}

.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.guide-step {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.guide-step-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border: 1px solid #33302b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guide-step-icon svg {
    width: 26px;
    height: 26px;
    fill: #33302b;
}

.guide-step-char {
    font-size: 30px;
    line-height: 1;
    color: #33302b;
}

.guide-step-body {
    flex: 1;
    min-width: 0;
}

.guide-step-title {
    font-size: 17px;
    font-weight: 700;
    color: #33302b;
    margin-bottom: 2px;
}

.guide-step-desc {
    font-size: 15px;
    color: #9a917e;
    line-height: 1.7;
}

/* 协议提示行：无边框纯文字、主按钮上方（引导页/正常首屏同款）；
   链接 seal-red 印章红 #8c2f2f */
.consent-hint-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 6px 0 14px;
    font-size: 15px;
    color: #9a917e;
    line-height: 1.7;
}

/* 横屏档1（高 ≤500px）：三步横排居中、超紧凑 px 档（规范 §8.1） */
@media (orientation: landscape) and (max-height: 500px) {
    .guide-view {
        padding: 8px 4px 0;
    }

    .guide-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .guide-steps {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .guide-step {
        flex-direction: column;
        flex: none;
        width: 200px;
        text-align: center;
        gap: 8px;
    }

    .guide-step-icon {
        width: 44px;
        height: 44px;
        margin: 0 auto;
    }

    .guide-step-icon svg {
        width: 22px;
        height: 22px;
    }

    .guide-step-char {
        font-size: 24px;
    }

    .guide-step-title {
        font-size: 14px;
    }

    .guide-step-desc {
        font-size: 12px;
    }

    .consent-hint-line {
        padding: 4px 0 8px;
        font-size: 12px;
    }
}

/* 横屏档2（高 ≥501px）：适中 px 档 */
@media (orientation: landscape) and (min-height: 501px) {
    .guide-title {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .guide-steps {
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }

    .guide-step {
        flex-direction: column;
        flex: none;
        width: 220px;
        text-align: center;
        gap: 10px;
    }

    .guide-step-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto;
    }

    .guide-step-icon svg {
        width: 24px;
        height: 24px;
    }

    .guide-step-char {
        font-size: 26px;
    }

    .guide-step-title {
        font-size: 15px;
    }

    .guide-step-desc {
        font-size: 13px;
    }

    .consent-hint-line {
        padding: 4px 0 10px;
        font-size: 13px;
    }
}

/* 通用隐藏工具类：必须置于文件末尾，确保覆盖 .consent-view 等 display 规则 */
.hidden {
    display: none;
}

/* ============================================================
 * 按钮按压/焦点/拦截状态（Issue IKFANS，色值见 docs/design/前端设计规范.md）
 * 悬停提亮、按压加深（方向相反）；按压零过渡瞬时——hover 过渡写在
 * :hover 状态上（进入有缓动、离开即时），基类无 transition，
 * :active 天然零过渡。移动端触摸无 hover，按压反馈全靠 :active。
 * 注意：本段必须位于 .hidden 之前的所有状态规则之后（含 :hover），
 * 保证按压/拦截优先级。
 * ============================================================ */

/* 悬停缓动（120ms ease，与小程序 PC 微信一致） */
.big-btn:hover,
.auth-submit:hover,
.logout-btn:hover,
.candidate-more-btn:hover,
.consent-btn-primary:hover,
.consent-btn-secondary:hover,
.switch-line:hover {
    transition: background .12s ease, color .12s ease;
}

/* 墨底按钮按压加深（悬停提亮沿用既有 :hover 值 #4a463f） */
.big-btn:not(:disabled):active,
.auth-submit:not(:disabled):active,
.consent-btn-primary:not(:disabled):active {
    background: #26231f;
}

/* 纸底描边按钮按压加深一档 */
.logout-btn:active,
.consent-btn-secondary:not(:disabled):active,
.candidate-more-btn:active {
    background: #e7dfca;
}

/* 文字类按压：字色 #6b665c（与详情字入口现状一致） */
.switch-line:active,
.keyword-char:active,
.char-cell:active,
.candidate-char:active {
    color: #6b665c;
}

/* 弹窗按钮悬停补齐（consent 此前无 hover） */
.consent-btn-primary:hover {
    background: #4a463f;
}

.consent-btn-secondary:hover {
    background: #efe7d6;
}

/* 弹窗按钮禁用（O2 提交互斥：同意变「提交中…」、不同意禁用） */
.consent-btn:disabled {
    border-color: #b8ae98;
    background: #f6f1e7;
    color: #9a917e;
    cursor: default;
}

/* Web 键盘焦点环（无障碍，方角） */
.big-btn:focus-visible,
.auth-submit:focus-visible,
.logout-btn:focus-visible,
.consent-btn:focus-visible,
.candidate-more-btn:focus-visible,
.switch-line:focus-visible {
    outline: 2px solid #33302b;
    outline-offset: 3px;
}

/* 切换行拦截禁用视觉（F3）：Web 仅准备/识别中拦截
   （查询中保持既有"结果仍上屏"宽容行为）；拦截态不响应 hover */
.switch-line.action-blocked {
    color: #c9c0ac;
    opacity: .45;
    cursor: default;
}

.switch-line.action-blocked:hover {
    color: #c9c0ac;
}