/* 基础重置 */
@import url('../static/icon/iconfont.css');
@import url('../static/dist/swiper-11.0.3/swiper/swiper-bundle.min.css');

*{
    margin: 0;
    padding: 0;
    user-select: none;
}

/* 产品选择页：独立覆盖层，尺寸随现有可视视口计算，保留底层三维状态。 */
.menu_btn .item[data-action="product"]:focus { outline: none; }
.menu_btn .item[data-action="product"][data-input-mode="keyboard"]:focus-visible {
    outline: 0.185185vh solid #00b4ff;
    outline-offset: 0.462963vh;
}
.product_picker {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: grid;
    grid-template-rows: 14% 11% minmax(0, 1fr) 17%;
    box-sizing: border-box;
    padding-top: 2vh;
    padding-top: 2svh;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(27, 75, 106, 0.25), transparent 31%),
        radial-gradient(ellipse at 18% 84%, rgba(23, 76, 135, 0.3), transparent 32%),
        linear-gradient(175deg, #020508 30%, #03080e 62%, #03142a);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(3vh);
    transform: translateY(3svh);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
}
.product_picker.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}
.product_picker:focus { outline: none; }
.product_picker::before {
    content: "";
    position: absolute;
    top: 15vh;
    top: 15svh;
    left: 10vw;
    width: 28vh;
    width: 28svh;
    height: 28vh;
    height: 28svh;
    border-radius: 50%;
    background: conic-gradient(from 20deg, #678349, #875541, #613265, #24688b, #236d57, #678349);
    filter: blur(6vh);
    filter: blur(6svh);
    opacity: 0.25;
    pointer-events: none;
    z-index: -1;
}
.product_picker :where(button) {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.product_picker_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.product_picker_logo .iconfont {
    font-size: 6.2vh;
    font-size: 6.2svh;
    line-height: 1;
}
.product_picker_close {
    position: absolute;
    top: 4vh;
    top: 4svh;
    right: 3vh;
    right: 3svh;
    display: grid;
    place-items: center;
    width: 5.5vh;
    width: 5.5svh;
    height: 5.5vh;
    height: 5.5svh;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.product_picker_close .iconfont {
    font-size: 3vh;
    font-size: 3svh;
}
.product_picker_close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.05);
}
.product_picker_heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vh;
    gap: 1svh;
    padding: 0 8vw;
    text-align: center;
}
.product_picker_heading h2 {
    font-size: 2.5vh;
    font-size: 2.5svh;
    line-height: 1.4;
}
.product_picker_heading p {
    font-size: 1.4vh;
    font-size: 1.4svh;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.46);
}
.product_picker_carousel {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.product_swiper {
    width: 100%;
    height: 54vh;
    height: 54svh;
    max-height: 100%;
    margin: 0;
    touch-action: pan-y;
    cursor: grab;
}
.product_swiper.swiper-grabbing { cursor: grabbing; }
.product_swiper:not(.swiper-initialized) { overflow-x: auto; scroll-snap-type: x mandatory; }
.product_swiper:not(.swiper-initialized) .swiper-wrapper { gap: 3vh; gap: 3svh; }
.product_swiper .swiper-slide { scroll-snap-align: center; }
.product_swiper .swiper-slide {
    box-sizing: border-box;
    width: min(49vh, 76vw);
    width: min(49svh, 76vw);
    height: 100%;
}
.product_card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 3vh;
    padding: 3svh;
    box-sizing: border-box;
    border: 0.14vh solid rgba(255, 255, 255, 0.23);
    border: 0.14svh solid rgba(255, 255, 255, 0.23);
    border-radius: 2vh;
    border-radius: 2svh;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.025));
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.product_card.is-current { border-color: rgba(255, 255, 255, 0.4); }
.product_card:hover { border-color: rgba(180, 215, 255, 0.65); }
.product_card:disabled { cursor: wait; }
.product_picker button:focus-visible {
    outline: 0.22vh solid #2273D7;
    outline: 0.22svh solid #2273D7;
    outline-offset: -0.45vh;
    outline-offset: -0.45svh;
}
.product_card_media {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-height: 0;
    width: 100%;
}
.product_card_media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
}
.product_card [hidden] { display: none; }
.product_card_placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    gap: 2svh;
    color: rgba(200, 215, 235, 0.25);
}
.product_card_code {
    font-family: Arial, sans-serif;
    font-size: 7vh;
    font-size: 7svh;
    line-height: 1;
    letter-spacing: 0.04em;
}
.product_card_image_note {
    font-size: 1.5vh;
    font-size: 1.5svh;
    color: rgba(255, 255, 255, 0.3);
}
.product_card_name {
    flex: none;
    margin-top: 2vh;
    margin-top: 2svh;
    font-size: 2.1vh;
    font-size: 2.1svh;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
}
.product_picker_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
}
.product_picker_back {
    border: 0;
    border-radius: 50vh;
    border-radius: 50svh;
    padding: 1.3vh 3.2vh;
    padding: 1.3svh 3.2svh;
    font-size: 1.9vh;
    font-size: 1.9svh;
    line-height: 1.4;
    background: rgba(25, 43, 62, 0.5);
}
.product_picker_back:disabled { opacity: 0.85; }

@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    .product_picker_close {
        top: 3.2vh;
        top: 3.2svh;
        right: 2.2vh;
        right: 2.2svh;
        width: max(5.5vh, 5vw);
        width: max(5.5svh, 5vw);
        height: max(5.5vh, 5vw);
        height: max(5.5svh, 5vw);
    }
    .product_picker_heading h2 {
        font-size: clamp(2.5vh, 3.6vw, 3vh);
        font-size: clamp(2.5svh, 3.6vw, 3svh);
    }
    .product_picker_heading p {
        font-size: clamp(1.4vh, 2.5vw, 1.7vh);
        font-size: clamp(1.4svh, 2.5vw, 1.7svh);
    }
    .product_card_name {
        font-size: clamp(1.85vh, 4vw, 2.3vh);
        font-size: clamp(1.85svh, 4vw, 2.3svh);
    }
    .product_picker_back {
        font-size: clamp(1.7vh, 3.8vw, 2.1vh);
        font-size: clamp(1.7svh, 3.8vw, 2.1svh);
    }
    @supports (top: calc(1vh + env(safe-area-inset-top, 0vh))) {
        html.viewer_safe_area .product_picker {
            padding-top: calc(2vh + env(safe-area-inset-top, 0vh));
            padding-top: calc(2svh + env(safe-area-inset-top, 0vh));
            padding-bottom: env(safe-area-inset-bottom, 0vh);
        }
        html.viewer_safe_area .product_picker_close {
            top: calc(3.2vh + env(safe-area-inset-top, 0vh));
            top: calc(3.2svh + env(safe-area-inset-top, 0vh));
            right: calc(2.2vh + env(safe-area-inset-right, 0vh));
            right: calc(2.2svh + env(safe-area-inset-right, 0vh));
        }
    }
}
@media (max-height: 540px) and (max-width: 1200px) {
    .product_picker { grid-template-rows: 14% 17% minmax(0, 1fr) 17%; }
    .product_picker_heading { gap: 0.3vh; gap: 0.3svh; }
    .product_picker_heading h2 { font-size: max(2.5vh, 1.9vw); font-size: max(2.5svh, 1.9vw); }
    .product_picker_heading p { font-size: max(1.4vh, 1.2vw); font-size: max(1.4svh, 1.2vw); }
    .product_card_name { font-size: max(2.1vh, 1.6vw); font-size: max(2.1svh, 1.6vw); }
    .product_picker_back { font-size: max(1.9vh, 1.45vw); font-size: max(1.9svh, 1.45vw); }
}
@media (prefers-reduced-motion: reduce) {
    .product_picker, .product_picker button { transition: none; }
}

/* 产品标题 */

/* ================= 标题栏平滑过渡样式 ================= */
.product_name_container{
    position: absolute;
    top: 0;
    display: flex;
    align-items: stretch;
    /* 保证左右两翼与文字高度严格一致，避免出现缝隙 */
    user-select: none;
}

.product_name_container .name{
    background: #031A36;
    color: #fff;
    font-size: 3.6vh;
    font-size: 3.6lvh;
    padding: 0 0 1.3vh;
    padding: 0 0 1.3lvh;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
}

/* 左右两侧平滑过渡翼 */
.product_name_container::before,
.product_name_container::after{
    position: relative;
    content: "";
    width: 10vh;
    width: 10lvh;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 C60,100 40,0 0,0 Z' fill='%23031A36'/%3E%3C/svg%3E");
}
/* 右侧：水平镜像翻转即可与左侧完全对称 */
.product_name_container::after{
    transform: scaleX(-1);
}

/* 导航与面板 */
/* =========================================================================
   【导航复合外壳 (nav_wrapper)】
   ========================================================================= */
   .nav_wrapper {
    --viewer-dock: side;
    position: absolute;
    left: 1.5%;
    top: 6%;
    height: 88%;
    display: flex;
    align-items: stretch;
    z-index: 10;
    pointer-events: none;
    /* 折叠时不阻挡 3D 画布交互 */
    border-radius: 2vh;
    border-radius: 2lvh;
    background: linear-gradient(to bottom, #09101886 40%, #003a7d7e, #00000087);
    overflow: hidden;
        /* opacity: 0;
    */
        backdrop-filter: blur(2.5vh) saturate(180%);
        -webkit-backdrop-filter: blur(2.5vh) saturate(180%);
}

/* =========================================================================
   【左侧固定操作栏 (nav_bar)】
   ========================================================================= */
.nav_bar {
    width: 8.5vh;
    width: 8.5lvh;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    pointer-events: auto;
    flex-shrink: 0;
}
.nav_bar .logo .item .iconfont{
    font-size: 4vh !important;
    font-size: 4lvh !important;
}
.nav_bar .iconfont, .menu_btn .iconfont {
    color: #fff;
    font-size: 1.9vh;
    font-size: 1.9svh;
}

.nav_bar .nav_list {
    gap: 4.4vh;
    gap: 4.4svh;
    display: flex;
    flex-direction: column;
}

.nav_bar .item, .menu_btn .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    gap: 1.4vh;
    gap: 1.4svh;
    transition: transform 0.2s ease;
}

.nav_bar .item:active, .menu_btn .item:active {
    transform: scale(0.92);
}

.nav_bar .item .name, .menu_btn .item .name {
    color: #fff;
    font-size: 1.6vh;
    font-size: 1.6svh;
    transition: color 0.3s ease;
}

/* 激活高亮态 (如设计图中的“详情”) */
.nav_bar .item.active .iconfont,
.nav_bar .item.active .name {
    color: #2273D7;
    text-shadow: 0 0 1.111111vh rgba(34, 115, 215, 0.8);
}

/* =========================================================================
   【右侧灵动展开抽屉 (nav_drawer)】
   ========================================================================= */
.nav_drawer {
    position: relative;
    width: 0;
    margin-left: 0;
    overflow: hidden;
    pointer-events: auto;
    box-sizing: border-box;
    /* 苹果专属灵动岛流体阻尼曲线 */
    transition: 
        width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
}

/* 展开激活态 */
.nav_drawer.open {
    width: var(--drawer-content-width, 0);
    opacity: 1;
}

/* 内部内容层 (随展开平滑淡入滑入) */
.drawer_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* padding: 3vh 3.5vh;
    */
    box-sizing: border-box;
    opacity: 0;
    transition: 
        opacity 0.28s ease,
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav_drawer.open .drawer_inner {
    opacity: 1;
    transition-delay: 0.12s;
    /* 略微延时，待外壳展开后优雅浮现 */
}

/* 顶部操作条 */
.drawer_header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 8%;
    padding-right: 7.2vh;
    padding-right: 7.2svh;
    box-sizing: border-box;
    /* margin-bottom: 2.5vh;
    */
}

/* 毛玻璃胶囊标签 */
.capsule_tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50vh;
    padding: 0.4vh;
}

.capsule_btn {
    border: none;
    outline: none;
    background: transparent;
    color: #8fa5c4;
    padding: 0.6vh 2vh;
    font-size: 1.5vh;
    border-radius: 50vh;
    cursor: pointer;
    transition: all 0.3s ease;
}

.capsule_btn.active {
    background: rgba(0, 140, 255, 0.4);
    color: #fff;
    box-shadow: 0 0 1vh rgba(0, 140, 255, 0.4);
}

/* 关闭按钮独立定位到抽屉外壳，不参与内部面板淡入淡出。 */
.drawer_close_btn {
    position: absolute;
    top: 1.6vh;
    top: 1.6svh;
    right: 1.6vh;
    right: 1.6svh;
    z-index: 2;
    width: 4vh;
    width: 4svh;
    height: 4vh;
    height: 4svh;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.2s ease;
}

.nav_drawer.open > .drawer_close_btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.drawer_close_btn .close_icon {
    color: #fff;
    font-size: 1.3vh;
    font-size: 1.3svh;
}

.drawer_close_btn:hover {
    background: rgba(0, 168, 255, 0.4);
    transform: rotate(90deg);
}

/* 面板内容滚动容器 */
.drawer_body {
    height: 72%;
    overflow-y: auto;
    padding: 0 7.2vh;
    padding: 0 7.2svh;
}

/* 极简发光细滚动条 */
.drawer_body::-webkit-scrollbar {
    width: 0.37037vh;
}
.drawer_body::-webkit-scrollbar-track {
    background: transparent;
}
.drawer_body::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 255, 0.4);
    border-radius: 0.925926vh;
}

/* 主标题：特点详情 */
.panel_main_title {
    height: 20%;
    display: flex;
    align-items: center;
    font-size: 7.3vh;
    font-size: 7.3svh;
    padding-left: 7.2vh;
    padding-left: 7.2svh;
    /* font-weight: 300;
    */
    font-weight: lighter;
    color: #2273D7;
    box-sizing: border-box;
}

/* 子分类标题 [ 通用特点 ] */
.detail_section {
    margin-bottom: 3.5vh;
}

.section_subtitle {
    color: #5d7e9f;
    font-size: 1.6vh;
    letter-spacing: 0.092593vh;
    margin-bottom: 1.8vh;
}

/* 特点列表项 */
.feature_list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.feature_list li {
    display: flex;
    align-items: flex-start;
    gap: 1.2vh;
}

/* 发光小蓝圆点 */
.feature_list .dot {
    width: 0.8vh;
    height: 0.8vh;
    border-radius: 50%;
    background-color: #00b4ff;
    box-shadow: 0 0 0.740741vh #00b4ff;
    margin-top: 0.6vh;
    flex-shrink: 0;
}

.feature_list .text_box .title {
    color: #ffffff;
    font-size: 1.65vh;
    font-weight: 500;
    margin-bottom: 0.6vh;
    line-height: 1.3;
}

.feature_list .text_box .desc {
    color: #8da4be;
    font-size: 1.35vh;
    line-height: 1.6;
}

/* 参数抽屉：内容与列数由 HTML 配置，适配现有导航外壳。 */
.nav_wrapper {
    max-width: 97%;
}
.panel_content[hidden], .params_grid[hidden], .params_empty[hidden], .param_unit[hidden] {
    display: none !important;
   
}
.nav_drawer .drawer_body {
    min-height: 0;
    overscroll-behavior: contain;
   
}
.nav_drawer[data-active-panel="params"] .drawer_body {
    padding: 0;
    scrollbar-gutter: stable;
   
}
.panel_params {
    height: 100%;
   
}
.panel_details {
    width: max-content;
    max-width: 100%;
   
}
.params_grid {
    display: grid;
    grid-template-columns: repeat(var(--params-columns, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(13.425926vh, 1fr);
    min-height: 100%;
    margin: 0;
}
.param_item {
    min-width: 0;
    padding: 4vh 5.8vh;
    padding: 4svh 5.8svh;
    box-sizing: border-box;
    border: 0.092593vh solid rgba(255, 255, 255, 0.055);
    margin: -0.092593vh 0 0 -0.092593vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4vh;
    gap: 4svh;
}
.param_item[data-span="full"] {
    grid-column: 1 / -1;
   
}
.param_label {
    color: #8c99a5;
    font-size: clamp(1.111111vh, 1.6vh, 1.574074vh);
    font-size: clamp(1.111111svh, 1.6svh, 1.574074svh);
    font-weight: 400;
}
.param_value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.22em;
    row-gap: 0.08em;
    margin: 0;
    color: #fff;
    font-size: clamp(2.222222vh, 4.1vh, 4.444444vh);
    font-size: clamp(2.222222svh, 4.1svh, 4.444444svh);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    overflow-wrap: anywhere;
}
.param_unit {
    white-space: nowrap;
    letter-spacing: -0.03em;
   
}
.param_unit sup {
    font-size: 0.6em;
   
}
.params_empty {
    padding: 4vh 7.2vh;
    padding: 4svh 7.2svh;
    color: #8da4be;
    font-size: 1.481481vh;
    line-height: 1.6;
}
.nav_drawer[data-active-panel="params"] .panel_main_title {
    color: var(--drawer-panel-accent, #2273D7);
   
}
.nav_bar [role="button"]:focus-visible, .drawer_close_btn:focus-visible {
    outline: 0.185185vh solid #00b4ff;
    outline-offset: 0.462963vh;
   
}
/* 点击/触摸时不显示键盘焦点框；键盘操作仍保留清晰的焦点位置。 */
.nav_wrapper[data-input-mode="pointer"] .nav_bar [role="button"]:focus,
.nav_wrapper[data-input-mode="pointer"] .drawer_close_btn:focus {
    outline: none;
   
}

@media (prefers-reduced-motion: reduce) {
    .nav_drawer, .drawer_inner, .nav_bar .item, .menu_btn .item, .drawer_close_btn {
    transition: none;
   
}
}


/* 仅用于隔离测量自然内容宽度，测完即移除；不参与外壳布局/交互。 */
.nav_drawer.drawer_measure {
    position: absolute;
    inset: 0 auto auto 0;
    width: max-content !important;
    max-width: none;
    overflow: visible;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}
.drawer_measure .drawer_inner {
    position: relative;
    width: max-content;
    opacity: 1;
    transition: none;
   
}
.drawer_measure > .drawer_close_btn {
    display: none;
   
}
.drawer_measure .drawer_body {
    width: max-content;
    overflow: visible;
    flex: none;
   
}
.drawer_measure .params_grid {
    width: max-content;
    grid-template-columns: repeat(var(--params-columns, 2), max-content);
}
.drawer_measure .param_value {
    flex-wrap: nowrap;
   
}
.drawer_measure .panel_details {
    max-width: none;
   
}

/* 详情页按效果图的纵向比例留白；分组边线贯穿正文区域。 */
.nav_drawer[data-active-panel="details"] .drawer_header {
    height: 6%;
   
}
.nav_drawer[data-active-panel="details"] .panel_main_title {
    height: 20.5%;
    font-size: 8vh;
    font-size: 8svh;
    flex-shrink: 0;
    margin: 0;
    padding-bottom: 2vh;
    padding-bottom: 2svh;
}
.nav_drawer[data-active-panel="details"] .drawer_body {
    height: 73.5%;
    padding: 0;
    margin-right: 1.9vh;
    scrollbar-gutter: stable;
}
/* 保留原生滚动交互；轨道上下留白，视觉长度只占正文中间一段。 */
.nav_drawer[data-active-panel="details"] .drawer_body::-webkit-scrollbar-track {
    margin-top: 14vh;
    margin-top: 14svh;
    margin-bottom: 26vh;
    margin-bottom: 26svh;
    background: rgba(141, 164, 190, 0.2);
    border-radius: 0.925926vh;
}
.nav_drawer[data-active-panel="details"] .drawer_body::-webkit-scrollbar-thumb {
    background: rgba(141, 164, 190, 0.58);
    border-radius: 0.925926vh;
}
.panel_details .detail_section {
    margin: 0;
    padding: 4.3vh 7.2vh;
    padding: 4.3svh 7.2svh;
    border-top: 0.092593vh solid rgba(141, 164, 190, 0.12);
    box-sizing: border-box;
}
.panel_details .section_subtitle {
    margin: 0 0 3.4vh;
    margin: 0 0 3.4svh;
    font-size: 1.7vh;
    font-size: 1.7svh;
    line-height: 1.4;
}
.panel_details .feature_list {
    margin: 0;
    padding: 0;
    gap: 2.2vh;
    gap: 2.2svh;
}
.panel_details .feature_list li {
    gap: 1.8vh;
    gap: 1.8svh;
}
.panel_details .feature_list .text_box {
    min-width: 0;
    max-width: 57.6vh;
    max-width: 57.6svh;
}
.panel_details .feature_list .dot {
    width: 0.6vh;
    width: 0.6svh;
    height: 0.6vh;
    height: 0.6svh;
    margin-top: 0.7vh;
    margin-top: 0.7svh;
    background: #2273D7;
    box-shadow: none;
}
.panel_details .feature_list .title {
    margin: 0 0 0.8vh;
    margin: 0 0 0.8svh;
    font-size: 1.8vh;
    font-size: 1.8svh;
    font-weight: 600;
    line-height: 1.35;
}
.panel_details .feature_list .desc {
    margin: 0;
    font-size: 1.65vh;
    font-size: 1.65svh;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* 产品特点保留原列表排版；配置聚焦零件后支持鼠标、触屏和键盘。 */
.panel_details [data-feature-index][aria-disabled="false"] { cursor: pointer; }
.panel_details [data-feature-index][aria-disabled="false"]:hover .title,
.panel_details [data-feature-index].is-focused .title { color: #2273D7; }
.panel_details [data-feature-index]:focus-visible {
    outline: 0.18vh solid #2273D7;
    outline: 0.18svh solid #2273D7;
    outline-offset: 0.6vh;
    outline-offset: 0.6svh;
}



/* 颜色编辑器；宽度由色盘、色块与按钮自然撑开后交给 JS 测量。 */
.color_tabs[hidden], .panel_main_title[hidden] {
    display: none !important;
   
}
.nav_drawer[data-active-panel="color"] .drawer_header {
    height: 10%;
    flex-shrink: 0;
    justify-content: space-between;
    padding-left: 4vh;
    padding-left: 4svh;
    box-sizing: border-box;
   
}
.nav_drawer[data-active-panel="color"] .drawer_body {
    height: 90%;
    flex-shrink: 0;
    padding: 1.4vh 5vh 2.4vh;
    padding: 1.4svh 5svh 2.4svh;
    box-sizing: border-box;
   
}
.color_tabs {
    display: flex;
    gap: 1.6vh;
    align-items: center;
   
}
.color_tabs button {
    border: 0;
    background: transparent;
    color: #b5c9db;
    font: inherit;
    font-size: 1.7vh;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.7vh 0;
   
}
.color_tabs button.active {
    color: #fff;
    text-shadow: 0 0 1.8vh #398cdf;
   
}
.color_tabs button:disabled {
    opacity: 0.4;
    cursor: default;
   
}
.color_editor {
    width: max-content;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2vh;
    gap: 3.2svh;
    margin-inline: auto;
   
}
/* 默认保持原色盘大小；空间不足时由真实内容高度计算剩余可用尺寸。 */
.color_wheel_wrap {
    position: relative;
    width: var(--color-wheel-size, 30vh);
    max-width: 100%;
    aspect-ratio: 1;
    justify-self: center;
   
}
/* var() 的回退单位需先检测支持，避免旧浏览器在计算阶段把整条宽度声明作废。 */
@supports (width: 1svh) {
    .color_wheel_wrap {
        width: var(--color-wheel-size, 30vh);
        width: var(--color-wheel-size, 30svh);
   
}
}
.color_wheel_wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    cursor: crosshair;
    touch-action: none;
   
}
.color_marker {
    position: absolute;
    width: 1.5vh;
    height: 1.5vh;
    min-width: 1.111111vh;
    min-height: 1.111111vh;
    border: 0.185185vh solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0.185185vh #122332;
    pointer-events: none;
   
}
.color_value_slider {
    width: 100%;
    height: 2.4vh;
    height: 2.4svh;
    min-height: 1.851852vh;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50vh;
    outline: none;
    cursor: pointer;
    margin: 0;
   
}
/* 明度工具与预设颜色分区留白；底部操作仍沿用紧凑区域。 */
.color_value_slider + .color_palette {
    margin-top: 1.6vh;
    margin-top: 1.6svh;
}
.color_value_slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 1.5vh;
    height: 1.5vh;
    min-width: 1.111111vh;
    min-height: 1.111111vh;
    border: 0.185185vh solid #fff;
    background: var(--color-selected, #2273D7);
    border-radius: 50%;
    box-shadow: 0 0 0 0.092593vh #233643;
   
}
.color_value_slider::-moz-range-thumb {
    width: 1.111111vh;
    height: 1.111111vh;
    border: 0.185185vh solid #fff;
    background: var(--color-selected, #2273D7);
    border-radius: 50%;
   
}
.color_palette h3 {
    color: #fff;
    font-weight: 400;
    font-size: 1.7vh;
    line-height: 1.25;
    margin-bottom: 1.25vh;
    margin-bottom: 1.25svh;
   
}
.color_swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65vh;
   
}
.color_swatch {
    width: 2.7vh;
    height: 2.7vh;
    min-width: 1.851852vh;
    min-height: 1.851852vh;
    padding: 0;
    border: 0;
    border-radius: 0.5vh;
    cursor: pointer;
   
}
.color_swatch.active {
    outline: 0.185185vh solid #fff;
    outline-offset: 0.185185vh;
   
}
/* HEX、提示与操作作为一个紧凑区域，避免两次外层 gap 放大底部空白。 */
.color_footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.1vh;
    row-gap: 0.1svh;
    min-width: 0;
}
.color_hex_field {
    display: flex;
    background: rgba(134,161,190,.22);
    border-radius: 0.8vh;
    overflow: hidden;
    width: 24vh;
    max-width: 100%;
    justify-self: center;
    min-width: 0;
    color: #fff;
    font-size: 1.8vh;
    align-items: center;
   
}
.color_hex_field > span {
    padding: 1vh 2vh;
    border-right: 0.092593vh solid rgba(255,255,255,.3);
   
}
.color_hex_field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 1vh;
    color: inherit;
    text-align: center;
    font: inherit;
   
}
.color_hex_field:focus-within {
    box-shadow: 0 0 0 0.092593vh #398cdf;
   
}
.color_hex_field input[aria-invalid="true"] {
    color: #ffaaa8;
   
}
/* 两行提示在紧凑区域中固定占位，内容切换不推动按钮。 */
.color_message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #a9c3dd;
    font-size: 1.35vh;
    line-height: 1.5;
    width: 30vh;
    width: 30svh;
    max-width: 100%;
    height: 3em;
    margin: 0;
    justify-self: center;
   
}
.color_message:empty {
    visibility: hidden;
   
}
.color_actions {
    display: flex;
    justify-content: space-between;
    gap: 2vh;
   
}
.color_actions button {
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 1.8vh;
    border-radius: 50vh;
    padding: 1.2vh 3.3vh;
    cursor: pointer;
    background: rgba(57,106,154,.2);
   
}
.color_actions [data-color-confirm] {
    flex: 1;
    background: #2273D7;
    box-shadow: 0 0 1.5vh rgba(34,115,215,.35);
   
}
.color_actions button:disabled {
    opacity: .4;
    cursor: default;
   
}
.color_editor button:focus-visible, .color_tabs button:focus-visible, .color_wheel_wrap canvas:focus-visible, .color_value_slider:focus-visible {
    outline: 0.185185vh solid #00b4ff;
    outline-offset: 0.37037vh;
   
}
.drawer_measure .color_editor {
    width: max-content;
    max-width: none;
   
}
.drawer_measure .color_swatches {
    flex-wrap: nowrap;
   
}

/* 场景与标注 */
.main_container{
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100lvh;
    background: linear-gradient(to bottom ,#031934,#031D3E);
    display: flex;
    justify-content: center;
}
.size_limit_container{
    position: absolute;
    width: 99%;
    height: 98.7%;
    bottom: 0;
    background: linear-gradient(to top ,#0044ef,#0a2770 12%,#05182f 30%,#01060d 80%,#000000);
    border-radius: 4vh 4vh 0 0;
    border-radius: 4lvh 4lvh 0 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
#webgl_container{
    position: absolute;
    width: 100%;
    height: 100%;
}
.bg_en_name{
    position: absolute;
    font-weight: normal;
    font-size: 34vh;
    font-size: 34svh;
    color: #FFFFFF;
    line-height: 1;
    background: linear-gradient(180deg, #6B7480 35%, #010813 90%);
    opacity: 0.5;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-30%);
    transform: translate(var(--bg-follow-x, 0vh), var(--bg-follow-y, 0vh)) translateY(-30%);
}
/* =========================================================================
   【3D 展开结构动态标注 - 四向自适应极简工业版】
   ========================================================================= */
.annotation_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
    transform: translateZ(0);
    /* will-change: opacity;
    */
}

.annotation_layer.visible {
    opacity: 1;
}

/* SVG 连线画布 */
.annotation_svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* 0.092593vh 亚像素超平滑贝塞尔曲线 */
.annotation_svg path {
    fill: none;
    stroke: rgba(180, 215, 255, 0.9);
    stroke-width: 0.092593vh;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
    filter: drop-shadow(0 0 0.092593vh rgba(180, 215, 255, 0.8));
    transition: stroke-opacity 0.2s ease;
}

/* 零件锚点微环 */
.annotation_anchor_dot {
    position: absolute;
    width: 0.555556vh;
    height: 0.555556vh;
    border-radius: 50%;
    border: 0.092593vh solid rgba(255, 255, 255, 0.85);
    background: rgba(0, 168, 255, 0.9);
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-sizing: border-box;
    will-change: left, top, opacity;
    transition: opacity 0.2s ease;
}

/* 悬浮文字胶囊：中心垂直水平智能居中锚定 */
.annotation_label_box {
    position: absolute;
    padding: 0.7vh 1.8vh;
    padding: 0.7svh 1.8svh;
    font-size: 1.48vh;
    border-radius: 50vh;
    color: #fff;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.3);
    /* backdrop-filter: blur(0.37037vh);
    -webkit-backdrop-filter: blur(0.37037vh);
    */
    border: 0.092593vh solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    line-height: 1;
    transform: translate(-50%, -50%);
    /* 严格以自身几何中心平滑插值 */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    /* will-change: left, top, opacity;
    */
    transition: opacity 0.25s ease;
    gap: 1vh;
    gap: 1svh;
}

.annotation_label_box::before {
    content: "";
    width: 0.6vh;
    width: 0.6svh;
    height: 0.6vh;
    height: 0.6svh;
    background: #2273D7;
    border-radius: 50%;
}


/* =========================================================================
   【3D 空间工程尺寸标注层】
   ========================================================================= */
   .dimension_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.dimension_layer.visible {
    opacity: 1;
    visibility: visible;
}

/* 尺寸数值悬浮胶囊 */
.dimension_badge {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 0.6vh 1.4vh;
    padding: 0.6svh 1.4svh;
    font-size: 1.35vh;
    font-size: 1.35svh;
    border-radius: 50vh;
    background: rgba(0, 0, 0, 0.5);
    /* border: 0.092593vh solid rgba(0, 180, 255, 0.2);
    */
    /* backdrop-filter: blur(0.37037vh);
    */
    /* -webkit-backdrop-filter: blur(0.37037vh);
    */
    color: #ffffff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.6vh;
    gap: 0.6svh;
    pointer-events: none;
    user-select: none;
    will-change: left, top;
}

/* 长/宽/高类别前缀标签 */
.dimension_badge .dim_label {
    color: #00b4ff;
    font-weight: 600;
}

/* 尺寸数值 */
.dimension_badge .dim_val {
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.046296vh;
}

/* 单位后缀 */
.dimension_badge .dim_unit {
    color: #8da4be;
    font-size: 1.1vh;
}

/* 全屏展厅手势隔离：固定页面；抽屉内部滚动和输入编辑仍可使用。 */
html.viewer_page,
html.viewer_page body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}
html.viewer_page body {
    position: fixed;
    inset: 0;
   
}
html.viewer_page .main_container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    height: var(--viewer-visual-height, 100vh);
    top: var(--viewer-visual-top, 0vh);
}
html.viewer_page body,
html.viewer_page body * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
html.viewer_page img,
html.viewer_page a,
html.viewer_page svg,
html.viewer_page canvas {
    -webkit-user-drag: none;
   
}
html.viewer_page #webgl_container,
html.viewer_page #webgl_container canvas,
html.viewer_page .color_wheel_wrap canvas,
html.viewer_page input[type="range"] {
    touch-action: none;
    overscroll-behavior: none;
}
html.viewer_page .bg_en_name,
html.viewer_page .annotation_layer,
html.viewer_page .dimension_layer {
    pointer-events: none;
   
}
html.viewer_page .drawer_body {
    touch-action: pan-y;
    overscroll-behavior: contain;
}
html.viewer_page input:not([type="range"]),
html.viewer_page textarea,
html.viewer_page select,
html.viewer_page [contenteditable]:not([contenteditable="false"]) {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
    touch-action: manipulation;
}

/* 页面工具独立于场景内框，避免移动端内框高度影响顶部定位。 */
.viewer_tools {
    --tool-size: 2.8vh;
    position: absolute;
    z-index: 11;
    top: 4.8vh;
    top: 4.8svh;
    right: 6vh;
    right: 6svh;
    display: flex;
    align-items: center;
    gap: 1vh;
    gap: 1svh;
}
.viewer_tools .language_link,
.viewer_tools .theme_switch {
    height: var(--tool-size);
    padding: 0;
    box-sizing: border-box;
    border: 0.08vh solid rgba(255, 255, 255, 0.18);
    border: 0.08svh solid rgba(255, 255, 255, 0.18);
    border-radius: 50vh;
    background: rgba(173, 184, 203, 0.28);
    color: #e4e9ef;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.viewer_tools .language_link {
    width: var(--tool-size);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.viewer_tools .iconfont { font-size: calc(var(--tool-size) * .7); line-height: 1; }
.viewer_tools .theme_switch { position: relative; width: calc(var(--tool-size) * 1.72); }
.theme_switch_thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--tool-size) * .08);
    width: calc(var(--tool-size) * .8);
    height: calc(var(--tool-size) * .8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(208, 216, 228, 0.38);
    transform: translateY(-50%);
    transition: transform .24s ease, background-color .24s ease;
}
.viewer_tools .theme_switch[aria-checked="true"] { background: rgba(34, 115, 215, 0.48); }
.theme_switch[aria-checked="true"] .theme_switch_thumb {
    transform: translate(calc(var(--tool-size) * .72), -50%);
    background: rgba(228, 236, 248, 0.6);
}
.viewer_tools a:focus-visible,
.viewer_tools button:focus-visible { outline: 0.15vh solid #8dbbff; outline-offset: 0.3vh; }
/* 自定义属性不会自动拒绝未知单位，因此 svh 版本也需要能力检测。 */
@supports (height: 1svh) {
    .viewer_tools {
        --tool-size: 2.8vh;
        --tool-size: 2.8svh;
    }
}

/* 手机基础断点保留 996；1200 范围同时照顾近方形折叠屏和触控横屏。
   JS 直接读取 --viewer-dock，不再维护另一套设备/媒体查询判断。 */
@media (max-width: 996px), (max-width: 1200px) and (max-aspect-ratio: 4/3), (max-width: 1200px) and (pointer: coarse) {
    .viewer_tools {
        --tool-size: max(3.2vh, 3.2vw);
        top: 3.2vh;
        top: 3.2svh;
        right: 2.2vh;
        right: 2.2svh;
    }
    @supports (height: 1svh) {
        .viewer_tools {
            --tool-size: max(3.2vh, 3.2vw);
            --tool-size: max(3.2svh, 3.2vw);
        }
    }
    .viewer_tools .language_link { display: none; }
    /* 页面底色覆盖完整布局视口；交互内容仍按实际可视区布局。
       Safari 在浏览器工具栏/安全区采样页面底色时，不再露出透明底。 */
    html.viewer_page, html.viewer_page body { background-color: #0044ef; }
    html.viewer_page body {
        min-height: 100vh;
        min-height: 100lvh;
    }
    .size_limit_container {
        width: 100%;
        border-radius: 2vh 2vh 0 0;
        border-radius: 2lvh 2lvh 0 0;
    }
    .nav_wrapper {
        --viewer-dock: bottom;
        left: 0;
        top: auto;
        bottom: 1.6vh;
        bottom: 1.6svh;
        width: 100%;
        max-width: none;
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
        gap: 0.8vh;
        gap: 0.8svh;
        overflow: visible;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav_bar {
        position: relative;
        width: 92%;
        height: max(8.4vh, 5.7vw);
        height: max(8.4svh, 5.7vw);
        flex-direction: row;
        border: 0.1vh solid rgba(153, 191, 240, 0.35);
        border-radius: 50vh;
        background: rgba(21, 57, 126, 0.65);
        box-sizing: border-box;
    }
    .nav_bar .logo { display: none; }
    .nav_bar .nav_list {
        width: 100%;
        height: 100%;
        flex-direction: row;
        justify-content: space-around;
        gap: 0;
        padding: 0.35vh;
        padding: 0.35svh;
        box-sizing: border-box;
    }
    .nav_bar .nav_list .item {
        flex: 1;
        justify-content: center;
        gap: 0.6vh;
        gap: 0.6svh;
        border-radius: 50vh;
        min-width: 0;
    }
    .nav_bar .nav_list .item.active { background: rgba(65, 122, 223, 0.22); }
    .nav_bar .iconfont, .menu_btn .iconfont {
        font-size: max(2.4vh, 2.2vw);
        font-size: max(2.4svh, 2.2vw);
        line-height: 1;
    }
    .nav_bar .item .name, .menu_btn .item .name {
        font-size: max(1.4vh, 1.2vw);
        font-size: max(1.4svh, 1.2vw);
        line-height: 1.2;
    }
    /* 挂在场景外层，和底部导航脱离；基础定位只用普通长度。 */
    .menu_btn {
        position: absolute;
        z-index: 11;
        pointer-events: auto;
        top: 3.2vh;
        top: 3.2svh;
        right: auto;
        bottom: auto;
        left: 2.2vh;
        left: 2.2svh;
    }
    .menu_btn .item { flex-direction: row; gap: 0.7vh; }
    .menu_btn .iconfont, .menu_btn .item .name { color: #2273D7; }
    .menu_btn .item .name {
        font-size: max(1.8vh, 1.25vw);
        font-size: max(1.8svh, 1.25vw);
    }
    .nav_bar .share_btn {
        display: none;
    }
    .product_name_container {
        top: 0;
        max-width: 66%;
    }
    /* 基础移动端定位不依赖 env；通过运行时校验的浏览器才启用安全区。
       安卓百度保持基础版，避免不完整的 env 实现将 top/bottom 算成 auto。 */
    @supports (top: calc(1vh + env(safe-area-inset-top, 0vh))) {
        html.viewer_safe_area .viewer_tools {
            top: calc(3.2vh + env(safe-area-inset-top, 0vh));
            top: calc(3.2svh + env(safe-area-inset-top, 0vh));
            right: calc(2.2vh + env(safe-area-inset-right, 0vh));
            right: calc(2.2svh + env(safe-area-inset-right, 0vh));
        }
        html.viewer_safe_area .nav_wrapper {
            bottom: calc(1.6vh + env(safe-area-inset-bottom, 0vh));
            bottom: calc(1.6svh + env(safe-area-inset-bottom, 0vh));
        }
        html.viewer_safe_area .menu_btn {
            top: calc(3.2vh + env(safe-area-inset-top, 0vh));
            top: calc(3.2svh + env(safe-area-inset-top, 0vh));
            left: calc(2.2vh + env(safe-area-inset-left, 0vh));
            left: calc(2.2svh + env(safe-area-inset-left, 0vh));
        }
        html.viewer_safe_area .product_name_container {
            top: env(safe-area-inset-top, 0vh);
        }
    }
    .product_name_container .name {
        position: relative;
        z-index: 1;
        font-size: max(2.1vh, 1.4vw);
        font-size: max(2.1svh, 1.4vw);
        padding-bottom: 1.4vh;
        padding-bottom: 1.4svh;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
    .product_name_container::before, .product_name_container::after {
        width: 7vh;
        width: 7svh;
        flex-shrink: 0;
    }
    /* 小数像素边界略微重叠，消除 SVG 曲线与中间底色的抗锯齿接缝。 */
    .product_name_container::before {
        margin-right: -0.2vh;
        margin-right: -0.2svh;
    }
    .product_name_container::after {
        margin-left: -0.2vh;
        margin-left: -0.2svh;
    }
    .bg_en_name {
        font-size: min(34vh, 48vw);
        font-size: min(34svh, 48vw);
    }
    .nav_drawer {
        width: 100%;
        height: 0;
        margin: 0;
        flex-shrink: 0;
        border-radius: 2.2vh 2.2vh 0 0;
        border-radius: 2.2svh 2.2svh 0 0;
        background: linear-gradient(135deg, rgba(7, 24, 41, 0.94), rgba(19, 55, 116, 0.92));
        transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    }
    .nav_drawer.open { width: 100%; height: var(--drawer-content-height, 0vh); }
    .drawer_inner {
        width: 100% !important;
        height: var(--drawer-content-height, auto);
        max-height: var(--drawer-cap-height, 56vh);
    }
    .nav_drawer[data-active-panel="params"], .nav_drawer[data-active-panel="details"] {
        --drawer-height-ratio: 0.44;
    }
    .nav_drawer[data-active-panel="params"] .drawer_header,
    .nav_drawer[data-active-panel="details"] .drawer_header {
        height: auto;
        min-height: max(4.6vh, 4.8vw);
        min-height: max(4.6svh, 4.8vw);
        flex-shrink: 0;
    }
    .nav_drawer[data-active-panel="params"] .panel_main_title,
    .nav_drawer[data-active-panel="details"] .panel_main_title {
        height: auto;
        flex-shrink: 0;
        font-size: max(3.2vh, 2.8vw);
        font-size: max(3.2svh, 2.8vw);
        line-height: 1.2;
        padding: 0 2.4vh 1.8vh;
        padding: 0 2.4svh 1.8svh;
    }
    .nav_drawer[data-active-panel="params"] .drawer_body,
    .nav_drawer[data-active-panel="details"] .drawer_body {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }
    .nav_drawer[data-active-panel="details"] .drawer_body {
        margin-right: 0;
        scrollbar-gutter: auto;
    }
    .nav_drawer[data-active-panel="details"] .drawer_body::-webkit-scrollbar-track {
        margin-top: 1.2vh;
        margin-top: 1.2svh;
        margin-bottom: 1.2vh;
        margin-bottom: 1.2svh;
    }
    .panel_details {
        width: 100%;
        max-width: 100%;
    }
    .panel_details .detail_section {
        padding: 2.4vh;
        padding: 2.4svh;
    }
    .panel_details .section_subtitle {
        margin-bottom: 1.8vh;
        margin-bottom: 1.8svh;
        font-size: max(1.7vh, 3.4vmin);
        font-size: max(1.7svh, 3.4vmin);
    }
    .panel_details .feature_list {
        gap: 2.2vh;
        gap: 2.2svh;
    }
    .panel_details .feature_list li {
        gap: 1.2vh;
        gap: 1.2svh;
    }
    .panel_details .feature_list .text_box {
        flex: 1;
        max-width: none;
    }
    .panel_details .feature_list .dot {
        width: max(0.6vh, 1vmin);
        width: max(0.6svh, 1vmin);
        height: max(0.6vh, 1vmin);
        height: max(0.6svh, 1vmin);
        margin-top: max(0.7vh, 1.8vmin);
        margin-top: max(0.7svh, 1.8vmin);
    }
    .panel_details .feature_list .title {
        margin-bottom: 0.7vh;
        margin-bottom: 0.7svh;
        font-size: max(1.8vh, 3.8vmin);
        font-size: max(1.8svh, 3.8vmin);
        line-height: 1.4;
    }
    .panel_details .feature_list .desc {
        font-size: max(1.65vh, 3.6vmin);
        font-size: max(1.65svh, 3.6vmin);
        line-height: 1.55;
    }
    .panel_params { height: auto; }
    .params_grid {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
        min-height: 0;
    }
    .param_item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.2vh 2.4vh;
        padding: 1.2svh 2.4svh;
        gap: 1.6vh;
        gap: 1.6svh;
    }
    .param_label {
        font-size: max(1.6vh, 1.6vw);
        font-size: max(1.6svh, 1.6vw);
    }
    .param_value {
        justify-content: flex-end;
        text-align: right;
        font-size: max(2.7vh, 2.3vw);
        font-size: max(2.7svh, 2.3vw);
    }
    .drawer_close_btn {
        top: 1vh;
        top: 1svh;
        right: 1.8vh;
        right: 1.8svh;
        width: max(3.6vh, 3.6vw);
        width: max(3.6svh, 3.6vw);
        height: max(3.6vh, 3.6vw);
        height: max(3.6svh, 3.6vw);
    }
    .drawer_close_btn .close_icon {
        font-size: max(1.3vh, 1.5vw);
        font-size: max(1.3svh, 1.5vw);
    }
    .nav_drawer[data-active-panel="color"] .drawer_header {
        height: auto;
        min-height: max(5.6vh, 4.8vw);
        min-height: max(5.6svh, 4.8vw);
        padding: 1vh 7vh 0.5vh 2.4vh;
        padding: 1svh 7svh 0.5svh 2.4svh;
    }
    .color_tabs {
        gap: 1.8vh;
        gap: 1.8svh;
    }
    .color_tabs button {
        font-size: max(1.8vh, 1.3vw);
        font-size: max(1.8svh, 1.3vw);
        padding: 0.5vh 0;
        padding: 0.5svh 0;
        line-height: 1.3;
    }
    .nav_drawer[data-active-panel="color"] .drawer_body {
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.8vh 2.4vh 1.2vh;
        padding: 0.8svh 2.4svh 1.2svh;
        overflow-x: hidden;
        scrollbar-width: none;
    }
    .nav_drawer[data-active-panel="color"] .drawer_body::-webkit-scrollbar { width: 0; height: 0; }
    .color_editor {
        width: 100%;
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "wheel presets" "wheel custom" "wheel hex" "lightness actions" "message message";
        column-gap: 2.3vh;
        column-gap: 2.3svh;
        row-gap: 0.9vh;
        row-gap: 0.9svh;
        align-items: center;
    }
    .color_wheel_wrap {
        grid-area: wheel;
        width: 100%;
        max-width: 22vh;
        max-width: 22svh;
        align-self: center;
    }
    .color_value_slider {
        grid-area: lightness;
        justify-self: center;
        max-width: 22vh;
        max-width: 22svh;
        height: max(2.4vh, 1.8vw);
        height: max(2.4svh, 1.8vw);
        min-height: 0;
    }
    .color_value_slider + .color_palette { grid-area: presets; margin: 0; }
    .color_palette + .color_palette { grid-area: custom; }
    .color_palette h3 {
        font-size: max(1.7vh, 1.5vw);
        font-size: max(1.7svh, 1.5vw);
        margin-bottom: 0.8vh;
        margin-bottom: 0.8svh;
    }
    .color_swatches {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        max-width: max(20vh, 20vw);
        max-width: max(20svh, 20vw);
        gap: 0.6vh;
        gap: 0.6svh;
    }
    .color_swatch {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        min-width: 0;
        min-height: 0;
    }
    .color_marker {
        width: max(1.5vh, 1.7vw);
        width: max(1.5svh, 1.7vw);
        height: max(1.5vh, 1.7vw);
        height: max(1.5svh, 1.7vw);
        min-width: 0;
        min-height: 0;
    }
    .color_value_slider::-webkit-slider-thumb {
        width: max(1.5vh, 1.7vw);
        width: max(1.5svh, 1.7vw);
        height: max(1.5vh, 1.7vw);
        height: max(1.5svh, 1.7vw);
        min-width: 0;
        min-height: 0;
    }
    .color_value_slider::-moz-range-thumb {
        width: max(1.5vh, 1.7vw);
        width: max(1.5svh, 1.7vw);
        height: max(1.5vh, 1.7vw);
        height: max(1.5svh, 1.7vw);
    }
    .color_footer { display: contents; }
    .color_hex_field {
        grid-area: hex;
        justify-self: stretch;
        width: 100%;
        font-size: max(1.7vh, 1.3vw);
        font-size: max(1.7svh, 1.3vw);
    }
    .color_hex_field > span {
        padding: 1vh 1.7vh;
        padding: 1svh 1.7svh;
    }
    .color_hex_field input {
        padding: 1vh 0.6vh;
        padding: 1svh 0.6svh;
    }
    .color_actions {
        grid-area: actions;
        gap: 0.8vh;
        gap: 0.8svh;
    }
    .color_actions button {
        flex: 1;
        padding: 1vh 0;
        padding: 1svh 0;
        font-size: max(1.9vh, 1.5vw);
        font-size: max(1.9svh, 1.5vw);
        white-space: nowrap;
    }
    .color_message {
        grid-area: message;
        width: 100%;
        font-size: max(1.25vh, 1.1vw);
        font-size: max(1.25svh, 1.1vw);
    }
}

/* 短横屏仍沿用底部抽屉；现有颜色工具排成三列，给场景保留上方空间。 */
@media (max-width: 996px) and (max-height: 540px) and (orientation: landscape), (max-width: 1200px) and (max-height: 540px) and (pointer: coarse) {
    .nav_drawer[data-active-panel="params"], .nav_drawer[data-active-panel="details"] {
        --drawer-height-ratio: 0.64;
    }
    .color_editor {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "wheel presets custom" "lightness hex actions" "message message message";
    }
    [data-custom-colors] { display: flex; flex-wrap: nowrap; max-width: 100%; }
    [data-custom-colors] .color_swatch { flex: 1 1 0; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .nav_drawer, .drawer_inner { transition: none; }
}