/* CSS 保险层，最后载入。现代浏览器保持原效果；能力不足才启用对应分支。
   核心样式另已补齐 inset 的物理四边、vh、min/max/clamp 的基础声明及 :is 的简单选择器版本。
   这里不创建新 UI、不改业务逻辑；Quark 分支只匹配安卓夸克。尺寸仍使用 vh / rem / 百分比。 */

/* aspect-ratio 失效时，空容器 / 小圆点也必须有真实高度。 */
html.viewer_no_aspect_ratio .ai_empower_ring::after { height: .45vh; }
html.viewer_no_aspect_ratio .color_wheel_wrap::before { content: ''; display: block; padding-top: 100%; }
html.viewer_no_aspect_ratio .color_wheel_wrap canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; }
html.viewer_no_aspect_ratio .color_swatches .color_swatch { min-height: 2.7vh; }

/* 计算值检测不通过时，不能把未知单位留在自定义属性里。 */
html.viewer_no_svh .smart_scene_ui { --smart-ui-unit: 1vh; }
html.viewer_no_svh .smart_dialog { --smart-dialog-unit: 1vh; }
html.viewer_no_svh .smart_dock { --smart-dock-unit: 1vh; }
html.viewer_no_svh .smart_perception { --perception-unit: 1vh; }
html.viewer_no_svh .smart_features { --features-unit: 1vh; }
html.viewer_no_svh .product_picker { --picker-current-unit: 1vh; }
html.viewer_no_css_math .viewer_tools, html.viewer_no_css_math .menu_btn { --tool-size: 2.8vh; }

/* Flex gap 的 Grid 语法检查并不可靠；这些 margin 只在真实 Flex 间距检测失败时启用。 */
html.viewer_no_flex_gap .viewer_tools > * + * { margin-left: 1vh; }
html.viewer_no_flex_gap .settings_trigger svg { margin-right: .6vh; }
html.viewer_no_flex_gap .nav_bar .nav_list > .item + .item { margin-top: 4.4vh; }
html.viewer_no_flex_gap .nav_bar .item .name { margin-top: 1.4vh; }
html.viewer_no_flex_gap .variant_button + .variant_button { margin-left: 1.8vh; }
html.viewer_no_flex_gap .settings_row > * + * { margin-left: 2vh; }
html.viewer_no_flex_gap .settings_section_heading > * + * { margin-left: 1vh; }
html.viewer_no_flex_gap .parts_toggle .parts_cube, html.viewer_no_flex_gap .parts_exit svg { margin-right: .8vh; }
html.viewer_no_flex_gap .smart_dock_exit { margin-left: .6rem; }
html.viewer_no_flex_gap .smart_dock_exit > * + * { margin-left: .4em; }
html.viewer_no_flex_gap .smart_scene_tap { margin-top: 1.2vh; }
html.viewer_no_flex_gap .perception_card_content > * + * { margin-top: .3rem; }
html.viewer_no_flex_gap .perception_card_heading .perception_card_titles { margin-top: .6rem; }
html.viewer_no_flex_gap .perception_node_subtitle { margin-top: .25rem; }
html.viewer_no_flex_gap .smart_dialog_scroll { margin-top: 2.5vh; }
html.viewer_no_flex_gap .smart_dialog_close_label { margin-top: .45rem; }
html.viewer_no_flex_gap .color_actions > button + button { margin-left: 2vh; }
html.viewer_no_flex_gap .color_tabs > button + button { margin-left: 1.6vh; }
html.viewer_no_flex_gap .color_swatches > .color_swatch { margin-right: .65vh; margin-bottom: .65vh; }
html.viewer_no_flex_gap .product_picker_footer > * + * { margin-left: 3vh; }
html.viewer_no_flex_gap .product_picker_heading > * + * { margin-top: 1vh; }
html.viewer_no_flex_gap .product_card_placeholder > * + * { margin-top: 2vh; }
html.viewer_no_flex_gap .product_card_current > * + * { margin-left: .4em; }
html.viewer_no_flex_gap .product_swiper:not(.swiper-initialized) .swiper-slide + .swiper-slide { margin-left: 3vh; }
html.viewer_no_flex_gap .feature_list > li + li { margin-top: 2vh; }
html.viewer_no_flex_gap .feature_list li .text_box { margin-left: 1.2vh; }
html.viewer_no_flex_gap .panel_details .feature_list > li + li { margin-top: 2.2vh; }
html.viewer_no_flex_gap .panel_details .feature_list li .text_box { margin-left: 1.8vh; }
html.viewer_no_flex_gap .param_item .param_value { margin-top: 4vh; }
html.viewer_no_flex_gap .param_value .param_unit { margin-left: .22em; }
html.viewer_no_flex_gap .dimension_badge > * + * { margin-left: .6vh; }
html.viewer_no_flex_gap .ai_empower_text > * + * { margin-left: .25em; }
html.viewer_no_flex_gap .ai_empower.is-explore .ai_empower_text > * + * { margin-left: .8em; }
html.viewer_no_flex_gap .features_content > * + * { margin-top: calc(var(--features-unit, 1vh) * 2.5); }
html.viewer_no_flex_gap .features_slide > * + * { margin-left: .85rem; }
html.viewer_no_flex_gap .features_meta > * + * { margin-left: 1rem; }

/* 夸克不依赖浏览器的按钮外观和自动文字放大，避免 SVG、文字、按钮高度各算一套。 */
html.viewer_quark_android { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.viewer_quark_android .settings_trigger,
html.viewer_quark_android .menu_btn .item,
html.viewer_quark_android .ai_empower { -webkit-appearance: none; appearance: none; }

@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    html.viewer_no_css_math .viewer_tools, html.viewer_no_css_math .menu_btn { --tool-size: 4.2vh; }
    html.viewer_no_flex_gap .nav_bar .nav_list > .item + .item { margin-top: 0; }
    html.viewer_no_flex_gap .nav_bar .item .name { margin-top: 0; margin-left: .6vh; }
    html.viewer_no_flex_gap .settings_trigger svg { margin-right: .35vh; }
    html.viewer_no_flex_gap .menu_btn .item .iconfont { margin-right: .35vh; }
    html.viewer_no_flex_gap .color_actions > button + button { margin-left: .8vh; }
    html.viewer_no_flex_gap .color_tabs > button + button { margin-left: 1.8vh; }
    html.viewer_no_flex_gap .variant_button + .variant_button { margin-left: 1.4vh; }
    html.viewer_no_flex_gap .product_picker_heading > * + * { margin-top: .3vh; }
    html.viewer_no_flex_gap .panel_details .feature_list li .text_box { margin-left: 1.2vh; }
    html.viewer_no_flex_gap .param_item .param_value { margin-top: 0; margin-left: 1.6vh; }
    html.viewer_no_flex_gap .settings_row > * + * { margin-left: 3vw; }
    html.viewer_no_flex_gap .smart_dock_exit { margin-left: .4rem; }
    html.viewer_no_flex_gap .smart_dock_exit > * + * { margin-left: .25em; }
    html.viewer_no_aspect_ratio .color_swatches .color_swatch { height: 0; min-height: 0; padding-top: 100%; }
    html.viewer_no_flex_gap .color_swatches > .color_swatch { margin: 0; }

    html.viewer_quark_android .nav_wrapper {
        --viewer-dock: bottom;
        position: absolute;
        top: auto; right: auto; bottom: calc(var(--viewer-compat-unit, 1vh) * 1.6); left: 4%;
        width: 92%; max-width: none; height: auto;
        display: flex; flex-direction: column-reverse; align-items: stretch;
        gap: 0; transform: none; box-sizing: border-box;
    }
    html.viewer_quark_android .nav_bar {
        width: 100%; height: var(--viewer-compat-nav, 8.4vh); flex: 0 0 var(--viewer-compat-nav, 8.4vh);
        min-height: 0; display: flex; flex-direction: row;
    }
    html.viewer_quark_android .viewer_tools {
        --tool-size: var(--viewer-compat-tool, 4.2vh);
        position: absolute; top: calc(var(--viewer-compat-unit, 1vh) * 3.8); right: auto; bottom: auto; left: calc(var(--viewer-compat-unit, 1vh) * 2.6);
    }
    html.viewer_quark_android .menu_btn {
        --tool-size: var(--viewer-compat-tool, 4.2vh);
        position: absolute; top: calc(var(--viewer-compat-unit, 1vh) * 3.8); right: calc(var(--viewer-compat-unit, 1vh) * 2.6); bottom: auto; left: auto;
    }
    html.viewer_quark_android .viewer_tools .settings_trigger,
    html.viewer_quark_android .menu_btn .item {
        display: inline-flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: nowrap;
        width: auto; min-width: var(--viewer-compat-tool, 4.2vh); height: var(--viewer-compat-tool, 4.2vh);
        padding: calc(var(--viewer-compat-unit, 1vh) * .8) calc(var(--viewer-compat-unit, 1vh) * .9);
        gap: 0; line-height: 1; font-size: var(--viewer-compat-tool-font, 1.5vh); white-space: nowrap; box-sizing: border-box;
    }
    html.viewer_quark_android .viewer_tools .settings_trigger svg,
    html.viewer_quark_android .menu_btn .item .iconfont {
        display: block; flex: 0 0 auto;
        width: var(--viewer-compat-icon, 1.7vh); height: var(--viewer-compat-icon, 1.7vh);
        margin: 0 calc(var(--viewer-compat-unit, 1vh) * .35) 0 0;
        font-size: var(--viewer-compat-icon, 1.7vh); line-height: 1;
    }
    html.viewer_quark_android .menu_btn .item .iconfont { display: inline-flex; align-items: center; justify-content: center; }
    html.viewer_quark_android .viewer_tools .settings_trigger > span,
    html.viewer_quark_android .menu_btn .item .name { display: block; margin: 0; line-height: 1; white-space: nowrap; }

    /* 普通产品的“了解数智款”保持原来的矩形入口，不套圆形 AI 入口的保险样式。 */
    html.viewer_quark_android .ai_empower:not(.is-explore) {
        width: calc(var(--viewer-compat-unit, 1vh) * 7.4); height: calc(var(--viewer-compat-unit, 1vh) * 7.4);
        display: flex; align-items: center; justify-content: center;
        font-size: calc(var(--viewer-compat-unit, 1vh) * 1.5); border-radius: 50%; overflow: visible;
    }
    html.viewer_quark_android .ai_empower:not(.is-explore)::before,
    html.viewer_quark_android .ai_empower:not(.is-explore)::after {
        top: calc(var(--viewer-compat-unit, 1vh) * -.7); right: calc(var(--viewer-compat-unit, 1vh) * -.7);
        bottom: calc(var(--viewer-compat-unit, 1vh) * -.7); left: calc(var(--viewer-compat-unit, 1vh) * -.7);
        width: auto; height: auto; border-width: .08rem; border-style: solid; border-color: var(--smart-stroke); border-radius: 50%;
    }
    html.viewer_quark_android .ai_empower:not(.is-explore)::before {
        border-top-color: var(--smart-accent); border-bottom-color: transparent;
        -webkit-animation: ai-orbit 10s linear infinite; animation: ai-orbit 10s linear infinite;
    }
    html.viewer_quark_android .ai_empower:not(.is-explore) .ai_empower_ring {
        top: calc(var(--viewer-compat-unit, 1vh) * .4); right: calc(var(--viewer-compat-unit, 1vh) * .4);
        bottom: calc(var(--viewer-compat-unit, 1vh) * .4); left: calc(var(--viewer-compat-unit, 1vh) * .4);
    }
    html.viewer_quark_android .ai_empower_ring::after { width: calc(var(--viewer-compat-unit, 1vh) * .45); height: calc(var(--viewer-compat-unit, 1vh) * .45); }
    /* 不能让上方显式 flex 布局覆盖业务状态的 hidden（抽屉 / AI 场景 / 隔离模式）。 */
    html.viewer_quark_android .ai_empower[hidden] { display: none; }
}
@media (max-width: 75em) and (max-aspect-ratio: 1/1) {
    html.viewer_no_flex_gap .smart_dialog_scroll { margin-top: .9rem; }
    html.viewer_no_flex_gap .smart_dialog_close_label { margin-top: 0; }
    html.viewer_no_flex_gap .features_content > * + * { margin-top: .55rem; }
    html.viewer_no_flex_gap .features_slide > * + * { margin-left: .75rem; }
}
@media (max-height: 30em) and (orientation: landscape) {
    html.viewer_no_flex_gap .features_content > * + * { margin-top: .6rem; }
    html.viewer_no_flex_gap .features_slide > * + * { margin-left: .7rem; }
}
@media (max-width: 62.25em) and (max-height: 30em) and (orientation: landscape) {
    html.viewer_no_flex_gap .smart_dialog_scroll { margin-top: .6rem; }
}