/* =============================================================
   mobile-mirror.css —— 手机/平板端 1:1 样式复刻层
   数据来源：xiazaitu.com parse.css @media(max-width:640px)、
   /tutorial/ 与 /open/ 内联样式的手机段，以及 393×852 实测量尺。
   全部规则只在 ≤900px 生效；本文件由 main.py 在 </head> 最末注入，
   靠「最后加载 + !important」压过页面内联样式，桌面端完全不受影响。
   ============================================================= */

@media (max-width: 900px) {

    /* ---------- 0. 全局基线：内容宽 365 = 393 - 14×2 ---------- */
    body { --ink: #0f172a !important; --text: #0f172a !important; }

    .site-header .wrap {
        height: 58px !important; min-height: 58px !important; max-height: 58px !important;
        padding: 0 14px !important; gap: 8px !important;
    }
    /* tidy.css 用 body.home .site-header > .wrap 锁死 64px，必须同特异性才压得住 */
    body.home .site-header, body.home .site-header > .wrap {
        height: 58px !important; min-height: 58px !important; max-height: 58px !important;
        padding: 0 14px !important; gap: 8px !important; max-width: none !important;
    }
    .site-header .brand img, .site-header .logo-mark img { height: 34px !important; }

    main, .td-main { padding-left: 14px !important; padding-right: 14px !important; padding-bottom: 50px !important; }
    main > .wrap, main > div.wrap {
        padding-left: 0 !important; padding-right: 0 !important;
        max-width: none !important;
    }

    /* 统一入场：参考站 fadeUp（14px 上移 + 淡入），各元素错峰 */
    @keyframes dpFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes dpPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

    /* ---------- 1. 首页 hero ---------- */
    body.home .td-hero { padding: 34px 0 18px !important; }
    body.home .td-badge {
        padding: 0 14px !important; height: 32px !important; font-size: 13px !important;
        animation: dpFadeUp .6s cubic-bezier(.22,1,.36,1) both;
    }
    body.home .td-h1 {
        font-size: 26px !important; line-height: 1.25 !important; letter-spacing: -1px !important;
        margin: 18px 0 10px !important; color: #0f172a !important;
        animation: dpFadeUp .7s .05s cubic-bezier(.22,1,.36,1) both;
    }
    body.home .td-h1 .td-grad { font-size: inherit !important; }
    body.home .td-lead {
        font-size: 13px !important; line-height: 1.6 !important; color: #64748b !important;
        animation: dpFadeUp .7s .12s cubic-bezier(.22,1,.36,1) both;
    }

    /* ---------- 2. 首页解析卡 ---------- */
    body.home .td-parse-card {
        padding: 18px 16px !important; border-radius: 20px !important; margin-top: 22px !important;
    }
    body.home .td-input-wrap { min-height: 52px !important; }
    body.home #input-url, body.home .td-input-wrap textarea {
        height: 52px !important; min-height: 52px !important;
        padding-left: 44px !important; font-size: 14px !important; line-height: 1.4 !important;
        border-radius: 16px !important;
    }
    body.home .td-btn-row { gap: 10px !important; }
    body.home .td-btn {
        height: 48px !important; padding: 0 10px !important; font-size: 14px !important;
        letter-spacing: 0 !important; border-radius: 16px !important;
    }
    body.home .td-btn-svg { width: 16px !important; height: 16px !important; }
    body.home .td-platforms { gap: 6px !important; }

    /* ---------- 3. 首页区块头（核心优势 / 使用步骤 / 常见问题） ---------- */
    body.home .td-section { margin-top: 38px !important; }
    body.home .td-section-head { margin-bottom: 20px !important; }
    body.home .td-eyebrow {
        height: 28px !important; padding: 0 12px !important; margin-bottom: 12px !important;
        font-size: 12px !important; letter-spacing: .5px !important;
        background: rgba(79,124,255,.10) !important;
        border: 1px solid rgba(79,124,255,.18) !important; color: #3b5bdb !important;
    }
    body.home .td-eyebrow svg { width: 13px !important; height: 13px !important; }
    body.home .td-section-head h2 {
        font-size: 20px !important; line-height: 1.34 !important; letter-spacing: -.4px !important;
        margin: 0 0 10px !important; color: #0f172a !important;
    }
    body.home .td-section-head h2 .td-grad { font-size: inherit !important; }
    body.home .td-section-head p {
        font-size: 13.5px !important; line-height: 1.8 !important; color: #64748b !important;
        max-width: 700px !important;
    }
    body.home .td-content-card { padding: 18px 16px !important; border-radius: 20px !important; }

    /* 优势卡：40px 图标 / 18×16 内边距 / 12px 间距 */
    body.home .td-feature-grid, body.home .td-steps {
        grid-template-columns: 1fr !important; gap: 12px !important;
    }
    body.home .td-feature-item { padding: 18px 16px !important; border-radius: 16px !important; }
    body.home .td-feature-icon {
        width: 40px !important; height: 40px !important; margin-bottom: 12px !important;
        border-radius: 12px !important;
    }
    body.home .td-feature-icon svg { width: 19px !important; height: 19px !important; }
    body.home .td-feature-item h3 { color: #0f172a !important; }
    body.home .td-feature-item:hover, body.home .td-step:hover {
        transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(15,23,42,.55);
    }

    /* 步骤卡：62px 左缩进给 32px 序号徽章 */
    body.home .td-step { padding: 18px 16px 18px 62px !important; border-radius: 16px !important; }
    body.home .td-step h3 { color: #0f172a !important; }

    /* FAQ */
    body.home .td-faq-item { border-radius: 16px !important; }
    body.home .td-faq-item summary {
        padding: 15px 16px !important; font-size: 14.5px !important; color: #0f172a !important;
    }
    body.home .td-faq-answer {
        padding: 0 16px 16px !important; font-size: 13.5px !important; color: #334155 !important;
        animation: dpFadeUp .24s cubic-bezier(.22,1,.36,1) both;
    }
    body.home .td-seo-note {
        padding: 16px 16px 16px 21px !important; font-size: 13px !important; border-radius: 16px !important;
    }

    /* ---------- 4. 教程中心 ---------- */
    .tut-hero { padding: 34px 0 18px !important; }
    .tut-eyebrow {
        padding: 0 14px !important; height: 32px !important; font-size: 13px !important;
        animation: dpFadeUp .6s cubic-bezier(.22,1,.36,1) both;
    }
    .tut-hero h1 {
        font-size: 26px !important; line-height: 1.25 !important; letter-spacing: -1px !important;
        margin: 18px 0 10px !important; color: #0f172a !important;
        animation: dpFadeUp .7s .05s cubic-bezier(.22,1,.36,1) both;
    }
    .tut-hero h1 .tut-grad { font-size: inherit !important; }
    body .tut-hero .tut-lead {
        font-size: 13px !important; line-height: 1.6 !important; color: #64748b !important;
        animation: dpFadeUp .7s .12s cubic-bezier(.22,1,.36,1) both;
    }
    body .tut-hero .tut-search input {
        height: 50px !important; font-size: 14px !important; color: #0f172a !important;
        border-radius: 16px !important;
    }
    /* 参考站手机端不显示分类 chips：搜索框下直接是「共找到 N 篇教程」 */
    .tut-filters { display: none !important; }
    .tut-count { margin: 22px 0 18px !important; font-size: 13px !important; }
    .tut-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .tut-card { border-radius: 16px !important; color: #0f172a !important; }
    .tut-card:hover { transform: translateY(-4px); }
    .tut-cover { height: 122px !important; padding: 14px 16px !important; }
    .tut-cover-name { font-size: 22px !important; margin-top: 12px !important; }
    .tut-card-body { padding: 14px 16px !important; }
    .tut-card-title { margin-bottom: 8px !important; font-size: 15.5px !important; }
    .tut-card-desc { font-size: 13.5px !important; line-height: 1.78 !important; margin-bottom: 14px !important; }
    .tut-card-foot { padding-top: 13px !important; font-size: 12.5px !important; }

    /* ---------- 5. 教程详情 ---------- */
    .breadcrumb {
        font-size: 12.5px !important; padding-top: 16px !important; margin-bottom: 0 !important;
        color: #64748b !important;
    }
    .page-hero { padding: 14px 0 0 !important; margin-bottom: 0 !important; }
    .page-hero h1 {
        font-size: 23px !important; line-height: 1.28 !important; letter-spacing: -.5px !important;
        margin-bottom: 12px !important; color: #0f172a !important;
    }
    .page-hero .lead { font-size: 14px !important; line-height: 1.85 !important; color: #64748b !important; }
    .dp-tut-tag {
        display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
        margin-bottom: 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
        color: #fff; background: linear-gradient(120deg, #4f7cff, #8b5cf6);
    }
    .dp-tut-meta {
        display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px;
        font-size: 12.5px; line-height: 20px; color: #64748b;
    }
    .dp-tut-meta span { display: inline-flex; align-items: center; gap: 5px; }
    .tut-toc { padding: 14px !important; border-radius: 16px !important; }
    .tut-toc h4 { margin-bottom: 10px !important; }
    .tut-body { padding: 18px 16px !important; border-radius: 20px !important; }
    .tut-step + .tut-step, .tut-step + .tut-faq { margin-top: 24px !important; padding-top: 24px !important; }
    .tut-step-head { gap: 10px !important; margin-bottom: 12px !important; }
    .tut-step-num { width: 32px !important; height: 32px !important; border-radius: 10px !important; font-size: 13px !important; }
    .tut-step-head h2 { font-size: 16.5px !important; }
    .tut-body p, .tut-body ul li { font-size: 14px !important; line-height: 1.9 !important; }
    .tut-body img { max-height: 360px !important; }

    /* ---------- 6. API 接口列表 ---------- */
    .doc-hero { padding: 24px 16px 20px !important; }
    .doc-hero .breadcrumb { display: none !important; }
    .doc-hero h1 { font-size: 21px !important; margin-bottom: 6px !important; }
    .doc-hero h1 .hl { font-size: inherit !important; }
    .doc-hero p.sub { font-size: 13px !important; line-height: 1.75 !important; }
    .doc-hero .badge-row { margin-top: 10px !important; }
    .doc-hero .badge-row span { padding: 4px 11px !important; font-size: 12px !important; margin: 0 3px 6px !important; }
    .doc-hero-cta { margin-top: 10px !important; }
    .doc-buy-btn {
        display: flex !important; align-items: center !important; justify-content: center !important;
        flex-wrap: wrap !important; gap: 4px 8px !important; line-height: 24.5px !important;
        width: 100% !important; min-height: 69px !important;
        padding: 10px 22px !important; border-radius: 999px !important;
        font-size: 14px !important; font-weight: 700 !important;
        background: linear-gradient(135deg,#4f7cff,#2f5bff) !important;
        box-shadow: 0 12px 26px rgba(47,91,255,.32) !important;
    }
    .doc-buy-btn .cta-narrow { display: none !important; }
    .doc-buy-btn .cta-wide { display: inline !important; }
    .doc-buy-btn .price-tag { font-size: 13px !important; padding: 2px 12px !important; }
    .doc-hero-cta .cta-sub { font-size: 12px !important; margin-top: 6px !important; }
    .api-section-title { font-size: 21px !important; letter-spacing: 1px !important; }
    .api-filter { height: 38px !important; padding: 0 16px !important; font-size: 13.5px !important; }
    /* 参考站 3 个筛选一行；本站 4 个，允许横滑但不允许换行把工具栏撑高 */
    .api-filters { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; }
    .api-filters .api-filter { flex: 0 0 auto !important; }
    .api-card-desc { font-size: 13.5px !important; }

    /* ---------- 7. 页脚：参考站极简版（品牌 + 胶囊链接 + 版权） ---------- */
    .site-footer {
        padding: 0 !important; margin-top: 38px !important;
        background: linear-gradient(180deg,#0f172a 0%,#0b1220 100%) !important;
        color: #94a3b8 !important; font-size: 13px !important;
        border-top: none !important;
    }
    .site-footer::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: radial-gradient(620px 260px at 10% 0%, rgba(79,124,255,.20), transparent 70%),
                    radial-gradient(560px 240px at 90% 8%, rgba(139,92,246,.16), transparent 70%);
    }
    .site-footer::after {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(79,124,255,.7), rgba(139,92,246,.7), transparent);
    }
    .site-footer > .wrap, body.home .site-footer > .wrap {
        position: relative; z-index: 1;
        padding: 30px 16px 20px !important; max-width: none !important; margin: 0 !important;
    }
    body.home .site-footer { margin-top: 38px !important; }
    .site-footer .footer-cols { display: block !important; margin-bottom: 0 !important; }
    .site-footer .footer-group:not(.footer-brand) { display: none !important; }
    .site-footer .footer-all { display: none !important; }
    .site-footer .footer-brand { margin: 0 !important; }
    .site-footer .footer-brand h4 { display: none !important; }
    .site-footer .footer-brand p { display: none !important; }
    .dp-f-brand { display: flex; align-items: center; gap: 12px; }
    /* 品牌图：用站内自己的 icon.svg（与顶部 logo / tidy-base 页脚同款），
       不再是模仿参考站的「↓ 下载标识」 */
    .dp-f-logo {
        flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; overflow: hidden;
        background: #0b0420; display: block;
        box-shadow: 0 12px 24px -12px rgba(79,124,255,.95), inset 0 1px 0 rgba(255,255,255,.3);
    }
    .dp-f-logo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
    .dp-f-brand-txt strong { display: block; font-size: 15.5px; font-weight: 800; color: #e2e8f0; letter-spacing: .2px; }
    .dp-f-brand-txt span { display: block; margin-top: 3px; font-size: 12.5px; color: #7f8ea8; }
    .dp-f-links { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 14px; }
    .dp-f-links a {
        flex: 1 1 calc(50% - 4px); display: inline-flex; align-items: center; justify-content: center;
        padding: 7px 15px; border-radius: 999px; font-size: 13px; color: #aab8cd;
        background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.14);
        text-decoration: none; transition: color .22s, background .22s, transform .22s;
    }
    .dp-f-links a:active { color: #fff; background: rgba(79,124,255,.2); transform: translateY(-2px); }
    .site-footer .footer-copy {
        margin: 12px 0 0 !important; padding-top: 12px !important;
        border-top: 1px solid rgba(148,163,184,.16) !important;
        font-size: 12.5px !important; line-height: 1.8 !important; color: #7f8ea8 !important;
    }

    /* ---------- 8. 站内自有的悬浮功能窗：手机端保留（用户明确要求） ----------
       .miniapp-bar 与 #fab-toggle / 托盘的避让逻辑沿用 app.js、style.css 原设计，
       这里绝不再覆盖它们的 bottom —— 上一版把五个气泡全压成 bottom:16px，
       叠在一起看起来就像「悬浮窗没了」。只收起非悬浮窗的 iOS 装桌面提示卡。 */
    #pwa-install { display: none !important; }

    /* ---------- 9. 浮层/按钮的轻量反馈 ---------- */
    .td-btn:active, .tut-chip:active, .api-filter:active, .doc-buy-btn:active { transform: scale(.98); }
}

@media (min-width: 901px) {
    /* 旋转到桌面 / 宽屏：注入层彻底失效 */
    .dp-f-brand, .dp-f-links, .dp-tut-tag, .dp-tut-meta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .td-badge, .td-h1, .td-lead, .tut-eyebrow, .tut-hero h1, .tut-lead, .td-faq-answer { animation: none !important; }
}

/* FAQ 答案里的「联系我们」：参考站同款 #4f7cff 下划线 600，桌面 / 手机都生效 */
.dp-contact-link {
    color: #4f7cff !important; text-decoration: underline !important;
    text-underline-offset: 2px; font-weight: 600;
}
.dp-contact-link:hover { color: #2f5bff !important; }

/* ===== 个人中心：滚到内容区后吸顶的快速切换条（手机单列布局） =====
   首屏仍是账号卡 + 竖向列表；一旦列表滚出视口，这条常驻在头部下方，
   随时点任意栏目切换，不必再滚回顶部。 */
@media (max-width:700px) {
    .dp-acct-tabs {
        position: fixed; top: 58px; left: 0; right: 0; z-index: 9;
        display: flex; gap: 6px; padding: 8px 12px;
        overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-bottom: 1px solid #e8edf8; box-shadow: 0 6px 18px rgba(20,33,61,.06);
        opacity: 0; transform: translateY(-8px); pointer-events: none;
        transition: opacity .2s ease, transform .2s ease;
    }
    .dp-acct-tabs::-webkit-scrollbar { display: none; }
    .dp-acct-tabs.show { opacity: 1; transform: none; pointer-events: auto; }
    .dp-acct-tabs button {
        flex: 0 0 auto; height: 34px; padding: 0 14px; border: none; border-radius: 999px;
        background: #F1F4FB; color: #5B6478; font-size: 13px; font-weight: 700;
        white-space: nowrap; cursor: pointer; transition: background .16s, color .16s;
    }
    .dp-acct-tabs button.active {
        background: #1F4FFF; color: #fff; box-shadow: 0 6px 14px rgba(31,79,255,.28);
    }
}
@media (min-width:701px) {
    .dp-acct-tabs { display: none !important; }
}

/* ===== 悬浮浮层手机端适配：从贴底小浮卡改成居中弹卡 =====
   原来三个面板都是 position:fixed 贴右下、宽 320px，点击后托盘收起、
   气泡全 hidden，只剩一张小卡压在底部引流条上，看着像「悬浮窗没了」，
   内部按钮/文字也是按 264px 桌面宽排的，手机上很挤。 */
@media (max-width:700px) {
    .dp-panel-mask {
        position: fixed; inset: 0; z-index: 10015; background: rgba(15,23,42,.45);
        opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .dp-panel-mask.show { opacity: 1; pointer-events: auto; }

    .sfab-panel {
        position: fixed !important;
        top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
        margin: auto !important;                 /* top/bottom 都为 0 + margin:auto → 垂直居中，不靠 transform */
        width: calc(100vw - 28px) !important; max-width: 360px !important;
        height: fit-content !important; max-height: calc(100dvh - 90px) !important;
        overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        padding: 20px 18px 22px !important; border-radius: 20px !important;
        z-index: 10020 !important; transform-origin: center center !important;
        box-shadow: 0 24px 70px -24px rgba(20,33,61,.5) !important;
    }
    .sfab-panel .sfab-hd {
        font-size: 16px !important; text-align: center !important;
        padding: 0 30px 12px !important; margin-bottom: 14px !important;
    }
    .sfab-panel .sfab-x {
        top: 12px !important; right: 12px !important; width: 30px !important; height: 30px !important;
        font-size: 15px !important; background: #F1F4FB !important;
    }
    .sfab-panel .sfab-tip, .sfab-panel .sfab-cap {
        font-size: 12.5px !important; line-height: 1.7 !important; text-align: center !important;
    }
    .sfab-panel .sfab-sec { text-align: center !important; }
    .sfab-panel .sfab-sec img, .sfab-panel .qr-dl img {
        width: 150px !important; height: 150px !important;
    }
    .sfab-panel .sfab-api-pre {
        font-size: 12px !important; line-height: 1.7 !important;
        white-space: pre-wrap !important; word-break: break-word !important; text-align: left !important;
    }
    .sfab-panel .sfab-api-btns { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .sfab-panel .sfab-api-btns .btn {
        font-size: 12.5px !important; padding: 11px 8px !important; white-space: nowrap !important;
    }

    /* 反馈弹窗：小屏可滚动，避免底部内容被裁 */
    .fb-modal-card {
        max-height: calc(100dvh - 48px) !important; overflow-y: auto !important;
        overscroll-behavior: contain;
    }
    /* 反馈入口：手机上只要一个图标圆钮（原来被托盘规则拉成「💬 反馈」宽胶囊）。
       白底 + 淡灰 emoji 对比太弱，改成品牌红渐变底 + 白色剪影图标。 */
    #fb-fab {
        width: 46px !important; height: 46px !important; padding: 0 !important;
        gap: 0 !important; justify-content: center !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #ff6b81, #fe2c55 58%, #e11d48) !important;
        box-shadow: 0 10px 24px -9px rgba(225,29,72,.6), 0 0 0 3px rgba(255,255,255,.92) !important;
    }
    #fb-fab > span:not(.sfab-ic):not(.fb-fab-badge) { display: none !important; }
    #fb-fab .sfab-ic {
        background: transparent !important; width: auto !important; height: auto !important;
        font-size: 20px !important;
        filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.12)) !important;
    }

    /* 最近解析：手机端做底部抽屉（贴底、圆角、最高 64vh），
       不再 width/height 100% 铺满整屏；上面留出页面本身，点遮罩即关。 */
    .hist-drawer {
        z-index: 10030 !important;
        align-items: flex-end !important; justify-content: center !important;
    }
    .hist-drawer-panel {
        width: 100% !important; max-width: none !important;
        height: auto !important; max-height: min(64vh, 560px) !important;
        border-radius: 22px 22px 0 0 !important;
        border-left: none !important;
        border-top: 1px solid rgba(226,232,240,.92) !important;
        box-shadow: 0 -18px 48px rgba(15,18,34,.18) !important;
        padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        animation: dpSheetIn .3s cubic-bezier(.22,1,.36,1) both !important;
    }
    .hist-drawer-panel::before {
        content: ""; display: block; flex: none;
        width: 38px; height: 4px; margin: 8px auto 0; border-radius: 999px;
        background: #E2E8F4;
    }
    .hist-drawer-head {
        padding-top: 10px !important; margin-bottom: 4px !important;
    }
    .hist-drawer-head .history-title { font-size: 15px !important; }
    /* 面板是 height:auto，基础样式的 .history-list{flex:1 1 0%} 在自动高度容器里
       会被算成 0 —— 有解析记录时整块面板只剩抓手条 + 标题栏（看起来就是一条白条）。
       这里改成按内容撑开，超出上限再内部滚动。 */
    .hist-drawer .history-list {
        flex: 0 1 auto !important;
        min-height: 0 !important;
        max-height: calc(min(64vh, 560px) - 122px) !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch;
        padding-top: 4px !important;
    }
    .hist-drawer.mo-closing .hist-drawer-panel,
    .hist-drawer.closing .hist-drawer-panel {
        animation: dpSheetOut .22s ease-in both !important;
    }
    @keyframes dpSheetIn {
        from { transform: translate3d(0, 100%, 0); opacity: .55; }
        to   { transform: none; opacity: 1; }
    }
    @keyframes dpSheetOut {
        from { transform: none; opacity: 1; }
        to   { transform: translate3d(0, 100%, 0); opacity: .5; }
    }
}
@media (min-width:701px) {
    .dp-panel-mask { display: none !important; }
}

/* ===== 手机悬浮入口：全部收成图标圆钮（2026-11-13 用户要求）=====
   原方案「＋ 收起 / 展开成带文字胶囊」两个毛病：收起态反馈入口完全看不见
   （用户反馈「反馈我也没看到」），展开后四个胶囊宽度不一、竖向占一大列。
   改成常驻图标圆钮：反馈 / 最近解析 / 开放API / 小程序 四个 44px 圆形、
   只留 emoji 图标不带文字，竖向贴右；点开仍是居中弹卡，关掉回到原位。
   用 ID 选择器拿特异性，不受 body.fab-open / has-miniapp-bar 那几层规则影响。 */
@media (max-width: 720px) {
    .fab-toggle { display: none !important; }

    html body #fb-fab,
    html body .sfab-wrap #hist-fab,
    html body .sfab-wrap #api-fab,
    html body .sfab-wrap #miniapp-fab {
        display: inline-flex !important;
        width: 44px !important; height: 44px !important;
        padding: 0 !important; gap: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important; align-items: center !important;
        right: 12px !important;
        animation: none !important;
        box-shadow: 0 8px 20px -8px rgba(15,18,34,.5), 0 0 0 3px rgba(255,255,255,.94) !important;
    }

    /* 只留图标：文字节点全部隐藏 */
    html body .sfab-txt,
    html body.fab-open .sfab-txt,
    html body #fb-fab > span:not(.fb-fab-badge):not(.sfab-ic),
    html body.fab-open #fb-fab > span:not(.fb-fab-badge):not(.sfab-ic) { display: none !important; }

    html body .sfab-bubble .sfab-ic,
    html body.fab-open .sfab-bubble .sfab-ic,
    html body #fb-fab .sfab-ic {
        width: auto !important; height: auto !important; border-radius: 0 !important;
        background: transparent !important; font-size: 19px !important;
    }
    /* 反馈：品牌红渐变底 + 白色剪影（白底 + 淡灰 emoji 对比太弱） */
    html body #fb-fab {
        background: linear-gradient(135deg, #ff6b81, #fe2c55 58%, #e11d48) !important;
        border-color: transparent !important;
    }
    html body #fb-fab .sfab-ic {
        filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.14)) !important;
    }

    /* 竖排：44px 圆钮 + 8px 间距，底部小程序条常驻时整体上移（--fab-b=74px）。
       顺序按用户要求：最近解析放最上面一列（最常点），反馈留最下面贴底。 */
    html body #fb-fab        { bottom: calc(var(--fab-b, 12px) + 0px) !important; }
    html body #api-fab       { bottom: calc(var(--fab-b, 12px) + 52px) !important; }
    html body #miniapp-fab   { bottom: calc(var(--fab-b, 12px) + 104px) !important; }
    html body #hist-fab      { bottom: calc(var(--fab-b, 12px) + 156px) !important; }
}