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

body {
    font-family: 'Arial', 'Microsoft YaHei', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
    overflow: auto;
    transition: background 0.3s ease;
}

/* 正方形画布容器 - 宽度100%，高度等于宽度 */
#main-canvas {
    width: 100vw;
    height: 100vw;
    position: relative;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

/* 反色模式 - 避免影响 fixed 定位 */
body.inverted {
}

/* 确保所有固定定位的控制面板在反色时保持可见和固定 */
body.inverted #main-canvas,
body.inverted .controls,
body.inverted .ring-controls,
body.inverted .color-controls,
body.inverted .artwork-info-panel,
body.inverted .top-menu-bar,
body.inverted .global-chrome-frame,
body.inverted .bottom-controls,
body.inverted .community-board-btn,
body.inverted .top-right-controls,
body.inverted .community-modal {
    filter: invert(1) hue-rotate(180deg);
}

body.inverted .controls,
body.inverted .ring-controls,
body.inverted .color-controls,
body.inverted .binary-structure-controls,
body.inverted .top-menu-bar,
body.inverted .bottom-controls,
body.inverted .community-board-btn,
body.inverted .top-right-controls {
    position: fixed;
}

/* 浏览模式 - 隐藏所有参数面板 */
body.browse-mode .controls,
body.browse-mode .ring-controls,
body.browse-mode .color-controls,
body.browse-mode .blur-controls,
body.browse-mode .display-controls,
body.browse-mode .binary-structure-controls,
body.browse-mode .totem-code-section,
body.browse-mode .totem-seed-panel,
body.browse-mode .totem-catalog-section,
body.browse-mode .community-board-btn,
body.browse-mode .artwork-guide-container,
body.browse-mode .artwork-info-panel,
body.browse-mode .mouse-guide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body:not(.browse-mode) .controls,
body:not(.browse-mode) .ring-controls,
body:not(.browse-mode) .color-controls,
body:not(.browse-mode) .blur-controls,
body:not(.browse-mode) .display-controls,
body:not(.browse-mode) .binary-structure-controls,
body:not(.browse-mode) .totem-code-section,
body:not(.browse-mode) .totem-seed-panel,
body:not(.browse-mode) .totem-catalog-section,
body:not(.browse-mode) .community-board-btn,
body:not(.browse-mode) .artwork-guide-container,
body:not(.browse-mode) .artwork-info-panel,
body:not(.browse-mode) .mouse-guide {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* 首屏观览模式：先只看主作品，再切回完整首页 */
body.intro-browse-mode {
    background: #000;
    overflow: hidden;
}

body.intro-browse-mode #main-canvas {
    background: #000;
    box-shadow: none;
}

body.intro-browse-mode #scalable-content {
    filter: blur(26px) brightness(0.08);
    transition: filter 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}

body.intro-browse-mode.intro-reveal #scalable-content {
    filter: blur(0) brightness(1);
}

body.intro-browse-mode header,
body.intro-browse-mode .top-menu-bar,
body.intro-browse-mode .global-chrome-frame,
body.intro-browse-mode .top-right-controls,
body.intro-browse-mode .ring-controls,
body.intro-browse-mode .color-controls,
body.intro-browse-mode .controls,
body.intro-browse-mode .blur-controls,
body.intro-browse-mode .binary-structure-controls,
body.intro-browse-mode .bottom-controls,
body.intro-browse-mode .community-board-btn,
body.intro-browse-mode .info-panel,
body.intro-browse-mode .artwork-info-panel,
body.intro-browse-mode .totem-search-row,
body.intro-browse-mode .totem-catalog-section,
body.intro-browse-mode .artwork-guide-container,
body.intro-browse-mode .mouse-guide {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

body.intro-browse-mode #matrixView {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.intro-browse-mode .view-panel {
    min-height: 100vh;
    padding: 0;
    justify-content: center;
    gap: 0;
}

body.intro-browse-mode .artwork-with-info {
    transform: scale(0.9);
    transform-origin: center center;
    transition: transform 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}

body.intro-browse-mode.intro-reveal .artwork-with-info {
    transform: scale(1);
}

.intro-window-frame {
    display: none;
}

body.intro-browse-mode .intro-window-frame {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(92vw, 900px);
    height: min(92vw, 900px);
    transform: translate(-50%, -48%);
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    z-index: 30;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}

body.intro-browse-mode.intro-reveal .intro-window-frame {
    opacity: 0;
}

/* 移除墙面和地板效果 */

/* 木地板已移除 */
.wood-grain {
    display: none;
}

/* 顶部菜单栏 */
.top-menu-bar {
    position: fixed;
    top: 14px;
    left: 12px;
    width: calc(100vw - 24px);
    padding: 0;
    z-index: 200;
}

.top-menu-inner {
    width: 100%;
    height: 54px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 56px 0 12px;
    background: transparent;
    border-radius: 14px 0 0 14px;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    will-change: filter;
}

header {
    position: static;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.top-right-controls {
    position: static;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 语言选择器 */
.language-selector {
    position: relative;
}

.lang-button {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.lang-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.lang-button svg {
    transition: transform 0.3s ease;
}

.lang-button:hover svg {
    transform: translateY(2px);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    min-width: 150px;
    display: none;
    flex-direction: column;
    gap: 4px;
}

.lang-dropdown.show {
    display: flex;
}

.lang-dropdown button {
    background: transparent;
    border: none;
    padding: 10px 16px;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.2s ease;
}

.lang-dropdown button:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}


/* 账户按钮 */
.account-button {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.account-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

header h1 {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 8px;
    color: #1a1a1a;
    font-family: 'Courier New', 'Consolas', monospace;
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

header h1:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}


/* 画布容器 - 显示粒子背景 */
#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

/* 移除粒子遮罩 - 粒子在整个画布显示 */

/* 可缩放的内容容器 */
#scalable-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transform-origin: center center;
}

/* 中心艺术作品 - 精确尺寸版本 */
.center-artwork {
    position: relative;
    z-index: 50;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* 外延暗灰色影子，附在外框边缘，偏下方向 - 加深20% */
    filter: drop-shadow(0 8px 12px rgba(64, 64, 64, 0.30))
            drop-shadow(0 15px 25px rgba(64, 64, 64, 0.18))
            drop-shadow(0 25px 40px rgba(64, 64, 64, 0.12));
    transition: filter 0.3s ease;
}

/* 中心隔离遮罩：阻断过渡带模糊向16格区域蔓延 */
.center-artwork::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 496.8px;
    height: 496.8px;
    transform: translate(-50%, -50%);
    background: #f8f8f8;
    z-index: 300;
    pointer-events: none;
}

/* 640mm - 最外层纯黑色金属框 - 边宽9.5mm */
.outer-frame {
    width: 640px;
    height: 640px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.05);
    position: relative;
}

/* 621mm - 第二层金属框 - 边宽9.3mm - 可选颜色 */
.second-frame {
    width: 621px;
    height: 621px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.second-frame.color-black { background: #000000; }
.second-frame.color-titanium { background: linear-gradient(135deg, #a8a9ad 0%, #d1d3d4 50%, #a8a9ad 100%); }
.second-frame.color-silver { background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%); }
.second-frame.color-white { background: #ffffff; }

/* 8层过渡带 - 整体从白色到黑色变化，每层速度翻倍 */
.transition-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transition-ring > .transition-ring,
.transition-ring > #grid-canvas-container {
    position: relative;
    z-index: 2;
}

/* 8层过渡带 - 动态模糊变量 */
:root {
    --ring-1-blur: 1.2px;
    --ring-2-blur: 1.05px;
    --ring-3-blur: 0.9px;
    --ring-4-blur: 0.75px;
    --ring-5-blur: 0.6px;
    --ring-6-blur: 0.45px;
    --ring-7-blur: 0.3px;
    --ring-8-blur: 0.15px;
}

/* 环1 (.ring-1) - 外延602.4mm */
.ring-1 {
    width: 596.16px;
    height: 596.16px;
    background-color: #000000;
    animation: ringColorShift1 1280s linear infinite;
    filter: blur(var(--ring-1-blur));
}

/* 环2 (.ring-2) - 外延583.7mm */
.ring-2 {
    width: 577.84px;
    height: 577.84px;
    background-color: #1a1a1a;
    animation: ringColorShift2 640s linear infinite;
    filter: blur(var(--ring-2-blur));
}

/* 环3 (.ring-3) - 外延567.6mm */
.ring-3 {
    width: 561.69px;
    height: 561.69px;
    background-color: #333333;
    animation: ringColorShift3 320s linear infinite;
    filter: blur(var(--ring-3-blur));
}

/* 环4 (.ring-4) - 外延552.7mm */
.ring-4 {
    width: 547.1px;
    height: 547.1px;
    background-color: #4d4d4d;
    animation: ringColorShift4 160s linear infinite;
    filter: blur(var(--ring-4-blur));
}

/* 环5 (.ring-5) - 外延539mm */
.ring-5 {
    width: 533.44px;
    height: 533.44px;
    background-color: #666666;
    animation: ringColorShift5 80s linear infinite;
    filter: blur(var(--ring-5-blur));
}

/* 环6 (.ring-6) - 外延526.5mm */
.ring-6 {
    width: 520.96px;
    height: 520.96px;
    background-color: #808080;
    animation: ringColorShift6 40s linear infinite;
    filter: blur(var(--ring-6-blur));
}

/* 环7 (.ring-7) - 外延515.4mm */
.ring-7 {
    width: 510.15px;
    height: 510.15px;
    background-color: #999999;
    animation: ringColorShift7 20s linear infinite;
    filter: blur(var(--ring-7-blur));
}

/* 环8 (.ring-8) - 外延505.5mm，内延496.8mm */
.ring-8 {
    width: 494px;
    height: 494px;
    background-color: #b3b3b3;
    animation: ringColorShift8 10s linear infinite;
    filter: blur(var(--ring-8-blur));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 496.8px - 中心16格图腾容器 - 最上层 */
#grid-canvas-container {
    width: 496.8px;
    height: 496.8px;
    background: #f8f8f8;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 400;
    isolation: isolate;
    transition: filter 0.3s ease;
}

#grid-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

body.hd-mode-active #grid-canvas-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* 整体颜色变化动画 - 从黑色到白色再回到黑色的循环 */
@keyframes ringColorShift {
    0% { background-color: #000000; }
    6.25% { background-color: #181818; }
    12.5% { background-color: #303030; }
    18.75% { background-color: #484848; }
    25% { background-color: #606060; }
    31.25% { background-color: #787878; }
    37.5% { background-color: #909090; }
    43.75% { background-color: #a8a8a8; }
    50% { background-color: #c0c0c0; }
    56.25% { background-color: #a8a8a8; }
    62.5% { background-color: #909090; }
    68.75% { background-color: #787878; }
    75% { background-color: #606060; }
    81.25% { background-color: #484848; }
    87.5% { background-color: #303030; }
    93.75% { background-color: #181818; }
    100% { background-color: #000000; }
}

/* 过渡带控制面板 - 左侧中上 */
.ring-controls {
    position: fixed;
    top: 100px;
    left: 30px;
    z-index: 200;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    width: 200px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* 金属框颜色选择按钮 */
.frame-color-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.frame-color-btn {
    padding: 8px 12px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #333;
    transition: all 0.2s ease;
}

.frame-color-btn:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
}

.frame-color-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* 模糊档位按钮样式 */
.blur-presets,
.totem-blur-levels,
.ring-blur-levels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.blur-preset-btn,
.totem-blur-btn,
.ring-blur-btn {
    padding: 6px 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    color: #666;
    transition: all 0.2s ease;
    text-align: center;
}

.blur-preset-btn:hover,
.totem-blur-btn:hover,
.ring-blur-btn:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
}

.blur-preset-btn.active,
.totem-blur-btn.active,
.ring-blur-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

/* 环模糊控制 */
.ring-blur-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ring-blur-control label {
    font-size: 9px;
    font-weight: 600;
    color: #666;
}

.ring-controls::-webkit-scrollbar {
    width: 6px;
}

.ring-controls::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.ring-controls::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.ring-controls::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.ring-controls h3 {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ring-section {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ring-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ring-section h4 {
    margin: 0 0 8px 0;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-align: center;
}

.ring-param-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.ring-speed-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.ring-color-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ring-color-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.ring-speed-control label,
.ring-color-control label {
    font-size: 9px;
    color: #333;
    font-weight: 600;
}

.ring-speed-control input[type="range"] {
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #fff 0%, #999 100%);
    outline: none;
    border-radius: 2px;
}

.ring-speed-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #666;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ring-speed-control input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #666;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

.ring-speed-value {
    font-size: 8px;
    color: #666;
    font-weight: 600;
}

.ring-color-control input[type="color"] {
    width: 100%;
    height: 28px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    background: none;
    padding: 2px;
}

.ring-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.ring-color-control input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

/* 彩虹控制行 */
.ring-rainbow-control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.ring-rainbow-toggle {
    flex-shrink: 0;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    color: #444;
}

.ring-rainbow-toggle.active {
    background: linear-gradient(90deg,
        hsl(0,90%,60%), hsl(51,90%,60%), hsl(120,75%,48%),
        hsl(180,85%,52%), hsl(210,90%,60%), hsl(270,80%,65%),
        hsl(300,90%,60%), hsl(360,90%,60%)
    );
    color: #fff;
    border-color: transparent;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.ring-rainbow-speed {
    flex: 1;
    height: 3px;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    outline: none;
    transition: opacity 0.2s;
}

.ring-rainbow-speed:disabled {
    opacity: 0.3;
}

.ring-rainbow-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
}

.ring-rainbow-speed:not(:disabled)::-webkit-slider-thumb {
    background: hsl(270,80%,60%);
}

.ring-rainbow-speed-val {
    font-size: 9px;
    color: #555;
    min-width: 24px;
    text-align: right;
}

/* 眼动视点 / 模糊度 控制面板 */
.blur-controls {
    position: fixed;
    top: 120px;
    left: 500px;
    z-index: 300;
    width: 260px;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.blur-controls .panel-window-content {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blur-controls h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.blur-section {
    margin-bottom: 12px;
}

.blur-section-title {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.55;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}

.blur-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 12px;
}

.blur-row label {
    width: 32px;
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
}

.blur-row input[type="range"] {
    flex: 1;
    min-width: 80px;
}

.blur-row span {
    width: 28px;
    text-align: right;
    font-size: 11px;
    opacity: 0.7;
}

.ring-blur-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ring-blur-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ring-blur-row > span {
    width: 24px;
    font-size: 11px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* 点阵颜色区域 */
.dot-color-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.07);
}

.dot-color-section h4 {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
    margin: 0 0 8px;
    letter-spacing: 0.3px;
}

.param-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 12px;
}

.param-row label {
    width: 44px;
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
}

.param-row input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
    outline: none;
}

.param-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
}

.param-row input[type="color"] {
    width: 34px;
    height: 24px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;
    background: none;
}

.param-row span {
    width: 30px;
    text-align: right;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    opacity: 0.7;
    flex-shrink: 0;
}

.dot-color-reset-btn {
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 4px;
    font-size: 13px;
    width: 26px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    flex-shrink: 0;
}

.dot-rainbow-toggle {
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(0,0,0,0.05);
    font-size: 11px;
    cursor: pointer;
    color: #333;
    transition: background 0.15s;
}

.dot-rainbow-toggle.active {
    background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
    border-color: transparent;
}

/* 模糊参数窗口 - 百分比滑杆行 */
.blur-pct-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blur-pct-row input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    outline: none;
}

.blur-pct-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
}

.blur-pct-row span {
    width: 36px;
    text-align: right;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    opacity: 0.7;
    flex-shrink: 0;
}

/* ── 深色格动态循环模糊 ──────────────────────────────────────── */
.dark-blur-anim-section {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dark-blur-anim-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}
.dark-blur-anim-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0,0,0,0.08);
    color: #888;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.dark-blur-anim-switch {
    width: 36px !important;
    flex: 0 0 36px !important;
    margin-left: auto;
    cursor: pointer;
}
.dark-blur-sub-label {
    font-size: 10px;
    opacity: 0.58;
    min-width: 52px;
    flex-shrink: 0;
}
.dark-blur-range-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.dark-blur-anchors {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dark-blur-anchor-label {
    font-size: 10px;
    opacity: 0.52;
    min-width: 26px;
    flex-shrink: 0;
}

/* ── 弹珠清晰层控件 ────────────────────────────────────────── */
.bounce-clarity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.bounce-clarity-header span {
    font-size: 11px;
    font-weight: 600;
    color: #333;
}

.bounce-clarity-toggle-btn {
    flex-shrink: 0;
    padding: 2px 9px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    color: #555;
    letter-spacing: 0.3px;
}

.bounce-clarity-toggle-btn.active {
    background: radial-gradient(circle at 30% 30%, #6ee7ff 0%, #a78bfa 50%, #f472b6 100%);
    color: #fff;
    border-color: transparent;
    text-shadow: 0 0 4px rgba(0,0,0,0.3);
}

.bounce-clarity-params {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 0.2s;
}

.bc-label {
    font-size: 10px;
    color: #444;
    min-width: 26px;
    flex-shrink: 0;
}

/* 颜色控制面板 - 左下角，反色时保持固定 */
.color-controls {
    position: fixed;
    bottom: 30px;
    left: 250px;
    z-index: 200;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    width: 200px;
    max-height: 85vh;
    will-change: filter;
    overflow-y: auto;
}

.color-controls h3 {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 颜色区域分组 */
.color-section {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.color-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.color-section h4 {
    margin: 0 0 8px 0;
    font-size: 10px;
    font-weight: 600;
    color: #666;
    text-align: center;
}

/* 作品和信息面板容器 */
.artwork-with-info {
    position: relative;
    display: inline-block;
    z-index: 10;
}

/* 作品信息看板 - 160x160 紧凑方形 */
.artwork-info-panel {
    position: absolute;
    right: -200px;
    bottom: 0;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.97);
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    z-index: 90;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.artwork-info-panel .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    margin: 2px 0;
    gap: 6px;
}

.artwork-info-panel .info-item:last-child {
    margin-bottom: 0;
}

.artwork-info-panel .info-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
    min-width: 40px;
    letter-spacing: 0;
}

.artwork-info-panel .info-value {
    font-size: 9px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: right;
    flex: 1;
    line-height: 1.15;
    letter-spacing: 0;
}

.artwork-info-panel .info-value.info-multiline {
    font-size: 8px;
    line-height: 1.2;
    word-break: break-word;
}

.artwork-info-panel .info-value.info-empty {
    color: rgba(0, 0, 0, 0.25);
    font-weight: 400;
}

.artwork-info-panel .info-value#artworkTotemCode {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    letter-spacing: 0.8px;
    font-weight: 700;
}

/* 控制面板 - 压缩版 */
.controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 200;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    width: 200px;
    max-height: 85vh;
    overflow-y: auto;
}

/* 自定义滚动条 */
.controls::-webkit-scrollbar,
.color-controls::-webkit-scrollbar {
    width: 6px;
}

.controls::-webkit-scrollbar-track,
.color-controls::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.controls::-webkit-scrollbar-thumb,
.color-controls::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.controls::-webkit-scrollbar-thumb:hover,
.color-controls::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* 缩放控制 - 垂直布局 */
.zoom-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.zoom-control input[type="range"] {
    width: 140px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #ddd 0%, #333 100%);
    outline: none;
    border-radius: 2px;
}

.zoom-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.zoom-control input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

/* 回正按钮 */
.zoom-reset {
    width: 100%;
    height: 34px;
    background: #f5f5f5;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.zoom-reset:hover {
    background: #eaeaea;
}

/* 过渡带模糊档位控制 */
.blur-preset-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.blur-preset-control label {
    font-size: 10px;
    font-weight: 600;
    color: #333;
}

/* 动态参数分组标签 */
.param-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.38);
    margin: 8px 0 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(0,0,0,0.10);
}

/* 参数组（并排布局） */
.param-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

/* 单个控制项 - 紧凑样式 */
.flow-control,
.dot-speed-control,
.dot-length-control,
.dot-diversity-control,
.dot-length-diversity-control,
.dot-clarity-diversity-control,
.dot-contrast-control,
.dot-meta-diversity-control,
.dot-shape-control,
.dot-shape-diversity-control,
.dot-direction-control,
.dot-direction-diversity-control,
.dot-length-animation-control,
.dot-length-animation-diversity-control,
.brightness-control,
.brightness-diversity-control,
.saturation-control,
.saturation-diversity-control,
.hue-control,
.hue-diversity-control,
.dark-brightness-control,
.dark-brightness-diversity-control,
.dark-saturation-control,
.dark-saturation-diversity-control,
.dark-hue-control,
.dark-hue-diversity-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.flow-control label,
.dot-speed-control label,
.dot-length-control label,
.dot-diversity-control label,
.dot-length-diversity-control label,
.dot-clarity-diversity-control label,
.dot-contrast-control label,
.dot-meta-diversity-control label,
.dot-shape-control label,
.dot-shape-diversity-control label,
.dot-direction-control label,
.dot-direction-diversity-control label,
.dot-length-animation-control label,
.dot-length-animation-diversity-control label,
.brightness-control label,
.brightness-diversity-control label,
.saturation-control label,
.saturation-diversity-control label,
.hue-control label,
.hue-diversity-control label,
.dark-brightness-control label,
.dark-brightness-diversity-control label,
.dark-saturation-control label,
.dark-saturation-diversity-control label,
.dark-hue-control label,
.dark-hue-diversity-control label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 9px;
    font-weight: 600;
}

.flow-control label svg {
    opacity: 0.7;
}

.flow-control input[type="range"],
.dot-speed-control input[type="range"],
.dot-length-control input[type="range"],
.dot-diversity-control input[type="range"],
.dot-length-diversity-control input[type="range"],
.dot-clarity-diversity-control input[type="range"],
.dot-contrast-control input[type="range"],
.dot-meta-diversity-control input[type="range"],
.dot-shape-control input[type="range"],
.dot-shape-diversity-control input[type="range"],
.dot-direction-control input[type="range"],
.dot-direction-diversity-control input[type="range"],
.dot-length-animation-control input[type="range"],
.dot-length-animation-diversity-control input[type="range"],
.brightness-control input[type="range"],
.brightness-diversity-control input[type="range"],
.saturation-control input[type="range"],
.saturation-diversity-control input[type="range"],
.dark-brightness-control input[type="range"],
.dark-brightness-diversity-control input[type="range"],
.dark-saturation-control input[type="range"],
.dark-saturation-diversity-control input[type="range"] {
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #fff 0%, #999 100%);
    outline: none;
    border-radius: 2px;
}

/* 色相滑块 - 彩虹渐变 */
.hue-control input[type="range"],
.hue-diversity-control input[type="range"],
.dark-hue-control input[type="range"],
.dark-hue-diversity-control input[type="range"] {
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border-radius: 2px;
}

.hue-control input[type="range"],
.dark-hue-control input[type="range"] {
    background: linear-gradient(to right, 
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%)
    );
}

.hue-diversity-control input[type="range"],
.dark-hue-diversity-control input[type="range"] {
    background: linear-gradient(to right, #fff 0%, #999 100%);
}

.flow-control input[type="range"]::-webkit-slider-thumb,
.dot-speed-control input[type="range"]::-webkit-slider-thumb,
.dot-length-control input[type="range"]::-webkit-slider-thumb,
.dot-diversity-control input[type="range"]::-webkit-slider-thumb,
.dot-length-diversity-control input[type="range"]::-webkit-slider-thumb,
.dot-clarity-diversity-control input[type="range"]::-webkit-slider-thumb,
.dot-contrast-control input[type="range"]::-webkit-slider-thumb,
.dot-meta-diversity-control input[type="range"]::-webkit-slider-thumb,
.dot-shape-control input[type="range"]::-webkit-slider-thumb,
.dot-shape-diversity-control input[type="range"]::-webkit-slider-thumb,
.dot-direction-control input[type="range"]::-webkit-slider-thumb,
.dot-direction-diversity-control input[type="range"]::-webkit-slider-thumb,
.dot-length-animation-control input[type="range"]::-webkit-slider-thumb,
.dot-length-animation-diversity-control input[type="range"]::-webkit-slider-thumb,
.brightness-control input[type="range"]::-webkit-slider-thumb,
.brightness-diversity-control input[type="range"]::-webkit-slider-thumb,
.saturation-control input[type="range"]::-webkit-slider-thumb,
.saturation-diversity-control input[type="range"]::-webkit-slider-thumb,
.hue-control input[type="range"]::-webkit-slider-thumb,
.hue-diversity-control input[type="range"]::-webkit-slider-thumb,
.dark-brightness-control input[type="range"]::-webkit-slider-thumb,
.dark-brightness-diversity-control input[type="range"]::-webkit-slider-thumb,
.dark-saturation-control input[type="range"]::-webkit-slider-thumb,
.dark-saturation-diversity-control input[type="range"]::-webkit-slider-thumb,
.dark-hue-control input[type="range"]::-webkit-slider-thumb,
.dark-hue-diversity-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #666;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.flow-control input[type="range"]::-moz-range-thumb,
.dot-speed-control input[type="range"]::-moz-range-thumb,
.dot-length-control input[type="range"]::-moz-range-thumb,
.dot-diversity-control input[type="range"]::-moz-range-thumb,
.dot-length-diversity-control input[type="range"]::-moz-range-thumb,
.dot-clarity-diversity-control input[type="range"]::-moz-range-thumb,
.dot-contrast-control input[type="range"]::-moz-range-thumb,
.dot-meta-diversity-control input[type="range"]::-moz-range-thumb,
.dot-shape-control input[type="range"]::-moz-range-thumb,
.dot-shape-diversity-control input[type="range"]::-moz-range-thumb,
.dot-direction-control input[type="range"]::-moz-range-thumb,
.dot-direction-diversity-control input[type="range"]::-moz-range-thumb,
.dot-length-animation-control input[type="range"]::-moz-range-thumb,
.dot-length-animation-diversity-control input[type="range"]::-moz-range-thumb,
.brightness-control input[type="range"]::-moz-range-thumb,
.brightness-diversity-control input[type="range"]::-moz-range-thumb,
.saturation-control input[type="range"]::-moz-range-thumb,
.saturation-diversity-control input[type="range"]::-moz-range-thumb,
.hue-control input[type="range"]::-moz-range-thumb,
.hue-diversity-control input[type="range"]::-moz-range-thumb,
.dark-brightness-control input[type="range"]::-moz-range-thumb,
.dark-brightness-diversity-control input[type="range"]::-moz-range-thumb,
.dark-saturation-control input[type="range"]::-moz-range-thumb,
.dark-saturation-diversity-control input[type="range"]::-moz-range-thumb,
.dark-hue-control input[type="range"]::-moz-range-thumb,
.dark-hue-diversity-control input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #666;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

.flow-value,
.dot-speed-value,
.dot-length-value,
.dot-diversity-value,
.dot-length-diversity-value,
.dot-clarity-diversity-value,
.dot-contrast-value,
.dot-meta-diversity-value,
.dot-shape-value,
.dot-shape-diversity-value,
.dot-direction-value,
.dot-direction-diversity-value,
.dot-length-animation-value,
.dot-length-animation-diversity-value,
.brightness-value,
.brightness-diversity-value,
.saturation-value,
.saturation-diversity-value,
.hue-value,
.hue-diversity-value,
.dark-brightness-value,
.dark-brightness-diversity-value,
.dark-saturation-value,
.dark-saturation-diversity-value,
.dark-hue-value,
.dark-hue-diversity-value {
    font-size: 8px;
    color: #666;
    font-weight: 600;
}

/* 图腾区模糊开关 & 自动生成开关 */
.auto-generate-toggle {
    width: 100%;
    height: 28px;
    background: #f5f5f5;
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.auto-generate-toggle:hover {
    background: #eaeaea;
}

.auto-generate-toggle.active {
    background: #1a1a1a;
    color: #fff;
}

.zoom-value {
    font-size: 11px;
    color: #333;
    font-weight: 600;
}

/* 粒子速度控制 */
.particle-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.particle-control label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 9px;
    font-weight: 600;
}

.particle-control label svg {
    opacity: 0.7;
}

.particle-control input[type="range"] {
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #ddd 0%, #666 100%);
    outline: none;
    border-radius: 2px;
}

.particle-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.particle-control input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

.particle-value {
    font-size: 8px;
    color: #666;
    font-weight: 600;
}

/* 笔触颗粒度控制 */
.brush-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.brush-control label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 9px;
    font-weight: 600;
}

.brush-control label svg {
    opacity: 0.7;
}

.brush-control input[type="range"] {
    width: 100%;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #ddd 0%, #8b4513 100%);
    outline: none;
    border-radius: 2px;
}

.brush-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #8b4513;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.brush-control input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #8b4513;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

.brush-value {
    font-size: 8px;
    color: #666;
    font-weight: 600;
}


/* 投影控制组 */
.projection-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 投影方向控制球 - 缩小 */
.shadow-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.shadow-joystick {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid #ddd;
}

.shadow-joystick-knob {
    width: 20px;
    height: 20px;
    background: #1a1a1a;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.1s ease;
}

.shadow-joystick:hover .shadow-joystick-knob {
    background: #333;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* 投影深度 & 距离参数列 */
.shadow-params-control {
    display: flex;
    flex-direction: column;
    gap: 7px;
    justify-content: center;
}

.shadow-param-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.shadow-param-row label {
    font-size: 9px;
    color: rgba(0,0,0,0.45);
    width: 22px;
    text-align: right;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.shadow-param-row input[type="range"] {
    width: 76px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.12);
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

.shadow-param-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 11px;
    height: 11px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.shadow-param-row input[type="range"]::-moz-range-thumb {
    width: 11px;
    height: 11px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

.shadow-param-row span {
    font-size: 9px;
    color: rgba(0,0,0,0.35);
    width: 24px;
    font-variant-numeric: tabular-nums;
}

/* 光源冷暖度控制 */
.temperature-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    flex: 1;
}

.temperature-control label {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 10px;
    font-weight: 600;
}

.temperature-control label svg {
    opacity: 0.7;
}

.temperature-control input[type="range"] {
    width: 90px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #4a90e2 0%, #fff 50%, #ff6b35 100%);
    outline: none;
    border-radius: 2px;
}

.temperature-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.temperature-control input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #1a1a1a;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
}

.temp-value {
    font-size: 9px;
    color: #666;
    font-weight: 600;
}

/* 作品下方引导容器 */
.artwork-guide-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 2;
}

/* 老鼠引导角色 - 可拖动浮窗 */
.mouse-guide {
    position: fixed;
    bottom: 200px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    z-index: 250;
    cursor: move;
    user-select: none;
}

.mouse-character {
    animation: bounce 2s ease-in-out infinite;
    filter: none;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.mouse-character svg {
    transition: transform 0.3s ease;
}

.mouse-character:hover svg {
    transform: scale(1.1) rotate(5deg);
}

/* 对话气泡 - 简化样式 */
.speech-bubble {
    position: relative;
    background: transparent;
    padding: 0;
    animation: fadeIn 0.5s ease;
}

.speech-bubble p {
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}

/* 保存种子按钮 */
.save-seed-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.save-seed-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.save-seed-btn:active {
    transform: translateY(0);
}

.random-seed-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.random-seed-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.random-seed-btn:active {
    transform: translateY(0);
}

.save-seed-btn.saving {
    opacity: 0.6;
    pointer-events: none;
}

.save-seed-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-seed-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
}

.save-seed-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #1a1a1a;
}

/* 主作品下方双栏：结构检索 + 种子检索 */
.totem-search-row {
    width: 86%;
    max-width: 1020px;
    margin: 0 auto 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

/* 图腾全展示（0000-9999） */
.totem-catalog-section {
    width: min(95%, 1456px);
    margin: 0 auto 20px;
    padding: 18px 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.totem-catalog-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: stretch;
}

.totem-catalog-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    width: 100%;
    text-align: center;
}

.totem-catalog-hint {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
    text-align: center;
    font-weight: 500;
    width: 100%;
}

.totem-catalog-grid-wrap {
    width: 100%;
    overflow: hidden;
    padding: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    aspect-ratio: 1 / 1;
    min-height: min(75vh, 884px);
}

.totem-catalog-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(var(--catalog-matrix-size, 20), minmax(0, 1fr));
    grid-template-rows: repeat(var(--catalog-matrix-size, 20), minmax(0, 1fr));
    gap: 0;
    padding: 10px;
    box-sizing: border-box;
}

.totem-catalog-side-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    padding: 8px 6px;
}

.totem-catalog-side-label {
    font-size: 10px;
    color: #666;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.totem-catalog-matrix-slider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 18px;
    height: 220px;
    cursor: ns-resize;
}

.totem-catalog-side-value {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: #222;
    font-weight: 700;
    text-align: center;
}

.totem-catalog-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.totem-catalog-mini {
    width: 90%;
    aspect-ratio: 1 / 1;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    background: #fff;
}

.totem-catalog-cell.is-dark {
    background: #111;
}

.totem-catalog-cell.is-light {
    background: #fff;
}

.totem-catalog-code {
    font-size: clamp(7px, 0.48vw, 10px);
    font-family: 'Courier New', monospace;
    color: #444;
    letter-spacing: 0.4px;
    line-height: 1;
}

.totem-catalog-footer {
    width: 100%;
    margin-top: 8px;
    font-size: 10px;
    color: #666;
    text-align: right;
    font-weight: 600;
}

/* 图腾检索输入区域 - 左栏 */
.totem-code-section {
    margin-top: 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: none;
    width: 100%;
}

.totem-code-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
}

.totem-code-input-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    max-width: 460px;
    width: 100%;
    overflow: hidden;
}

.totem-code-input {
    min-width: 0;
    padding: 10px 14px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
    transition: all 0.2s ease;
}

.totem-code-input:focus {
    outline: none;
    border-color: #1a1a1a;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.totem-code-input::placeholder {
    color: rgba(0, 0, 0, 0.25);
    letter-spacing: 4px;
}

.totem-code-apply-btn,
.totem-code-refresh-btn,
.totem-code-save-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.totem-code-apply-btn:hover,
.totem-code-refresh-btn:hover,
.totem-code-save-btn:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    transform: scale(1.05);
}

.totem-code-apply-btn:hover svg,
.totem-code-refresh-btn:hover svg,
.totem-code-save-btn:hover svg {
    stroke: #ffffff;
}

.totem-code-apply-btn:active,
.totem-code-refresh-btn:active,
.totem-code-save-btn:active {
    transform: scale(0.95);
}

.totem-code-hint {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    width: 100%;
}

/* 已保存的图腾结构区域 */
.saved-totem-structures {
    width: 100%;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.saved-totem-structures h4 {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px 0;
    text-align: center;
    letter-spacing: 0.5px;
}

.saved-structures-toolbar {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.structure-tab-btn {
    padding: 6px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    transition: all 0.2s ease;
}

.structure-tab-btn:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, 0.2);
}

.structure-tab-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.saved-structures-grid {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    justify-content: center;
    gap: 12px 14px;
    max-height: 620px;
    overflow-y: auto;
    padding: 4px;
}

.saved-structures-grid::-webkit-scrollbar {
    width: 6px;
}

.saved-structures-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.saved-structures-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.saved-structure-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 40px;
}

.saved-structure-item {
    position: relative;
    width: 40px;
    height: 40px;
    background: #f8f8f8;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.saved-structure-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
}

.saved-structure-item canvas {
    width: 100%;
    height: 100%;
}

.saved-structure-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.structure-item-controls {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.saved-structure-item:hover .structure-item-controls {
    opacity: 1;
}

.structure-control-btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.structure-control-btn:hover {
    transform: scale(1.1);
    background: #fff;
}

.structure-favorite-btn {
    color: #999;
}

.structure-favorite-btn.active {
    color: #ff4757;
}

.structure-delete-btn {
    color: #666;
}

.structure-delete-btn:hover {
    color: #ff4757;
}

.structure-item-code {
    color: #333;
    font-size: 8px;
    font-family: 'Courier New', monospace;
    text-align: center;
    line-height: 1.1;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.saved-structures-pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.saved-structures-page-info {
    font-size: 10px;
    color: #666;
    font-weight: 600;
}

.structures-page-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    color: #333;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.structures-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 信息面板 - 不显示 */
.info-panel {
    display: none;
}

.info-panel h3 {
    font-size: 0.9em;
    margin-bottom: 6px;
    color: #1a1a1a;
    font-weight: 600;
}

.info-panel p {
    font-size: 0.75em;
    line-height: 1.4;
    opacity: 0.75;
    margin-bottom: 4px;
    color: #333;
}

.info-panel .hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: #666;
    font-size: 0.7em;
}

/* 社交媒体链接 - 固定底部，反色时保持固定 */
/* 图腾种子面板（右栏） */
.totem-seed-panel {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.totem-seed-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
}

.totem-seed-action-group {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 460px;
    width: 100%;
}

.totem-seed-hint {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    width: 100%;
}

.seed-saved-group {
    margin-top: 24px;
}

.seed-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.seed-collection-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.seed-tab-btn {
    padding: 6px 16px;
}

.seed-tab-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.seed-tab-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.seed-scroll {
    max-height: 460px;
    overflow-y: auto;
    padding-right: 6px;
}

.seed-scroll::-webkit-scrollbar {
    width: 6px;
}

.seed-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.seed-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.seed-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.seed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.seed-pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.page-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
}

.page-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-status {
    font-size: 10px;
    color: #666;
    font-weight: 600;
}

.seed-item {
    position: relative;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 删除按钮 - 苹果风格 */
.seed-delete-btn {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.95);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
}

.seed-item:hover .seed-delete-btn {
    opacity: 1;
    transform: scale(1);
}

.seed-delete-btn:hover {
    background: rgba(255, 59, 48, 1);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(255, 59, 48, 0.6);
}

.seed-delete-btn:active {
    transform: scale(0.95);
}

/* 收藏按钮 - 爱心 */
.seed-favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #c4c4c4;
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.seed-favorite-btn.active {
    color: #ff3b30;
}

.seed-favorite-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.seed-favorite-btn:active {
    transform: scale(0.95);
}

.seed-item:hover {
    border-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.seed-item.active {
    border-color: #1a1a1a;
    background: rgba(26, 26, 26, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.seed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.seed-number {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}


.seed-preview {
    margin-bottom: 10px;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.seed-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seed-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    font-weight: 500;
}

.seed-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: #999;
    font-weight: 500;
    text-align: center;
}

.seed-time {
    font-size: 10px;
    color: #999;
}

.seed-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}

.seed-empty span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #bbb;
}

/* 种子通知 */
.seed-notification {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #1a1a1a;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10000;
}

.seed-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 响应式 */
@media (max-width: 1400px) {
    .artwork-info-panel {
        right: -180px;
    }
}

@media (max-width: 1200px) {
    .totem-search-row {
        width: 92%;
        grid-template-columns: 1fr;
    }

    .seed-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .artwork-info-panel {
        right: -170px;
    }
}

@media (max-width: 768px) {
    .totem-search-row {
        width: 95%;
        gap: 12px;
    }

    .seed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .totem-seed-panel {
        padding: 16px;
    }
    
    .totem-code-input-group {
        max-width: 100%;
        gap: 6px;
        grid-template-columns: minmax(0, 1fr) auto auto auto;
    }
    
    .totem-code-apply-btn,
    .totem-code-refresh-btn,
    .totem-code-save-btn {
        width: 38px;
        height: 38px;
    }
    
    .totem-code-input {
        font-size: 15px;
    }
}

/* 底部控制组 - 居中 */
.bottom-controls {
    position: fixed;
    bottom: 30px;
    left: 12px;
    transform: none;
    z-index: 200;
    width: calc(100vw - 24px);
    padding: 0;
}

.bottom-controls-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    padding: 10px 56px 10px 12px;
    border-radius: 14px 0 0 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

.global-chrome-frame {
    position: fixed;
    top: 14px;
    right: 12px;
    bottom: 30px;
    left: 12px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 160;
    --chrome-hole-left: calc(50% - (min(74vw, 980px) / 2));
    --chrome-hole-top: calc(50% - (min(66vh, 700px) / 2));
    --chrome-hole-width: min(74vw, 980px);
    --chrome-hole-height: min(66vh, 700px);
    --chrome-shell-bg: rgba(255, 255, 255, 0.2);
    --chrome-shell-border: rgba(255, 255, 255, 0.42);
    --chrome-ring-top: 54px;
    --chrome-ring-bottom: 56px;
    --chrome-ring-side: 42px;
    --chrome-inner-depth: 12px;
    --chrome-inner-blur: 0px;
    --chrome-inner-alpha: 0;
}

/* 一体大环外延范围：默认当前框架 */
body.chrome-extent-frame .global-chrome-frame,
body:not(.chrome-extent-full) .global-chrome-frame {
    top: 14px;
    right: 12px;
    bottom: 30px;
    left: 12px;
    border-radius: 14px;
}

body.chrome-extent-frame .top-menu-bar,
body:not(.chrome-extent-full) .top-menu-bar {
    top: 14px;
    left: 12px;
    width: calc(100vw - 24px);
}

body.chrome-extent-frame .bottom-controls,
body:not(.chrome-extent-full) .bottom-controls {
    bottom: 30px;
    left: 12px;
    width: calc(100vw - 24px);
}

/* 一体大环外延范围：铺满浏览器（含全屏） */
body.chrome-extent-full .global-chrome-frame {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
}

body.chrome-extent-full .top-menu-bar {
    top: 0;
    left: 0;
    width: 100vw;
}

body.chrome-extent-full .bottom-controls {
    bottom: 0;
    left: 0;
    width: 100vw;
}

body.chrome-extent-full .chrome-ring-top,
body.chrome-extent-full .chrome-ring-bottom,
body.chrome-extent-full .chrome-shell-ring .chrome-ring-band {
    border-radius: 0;
}

.global-chrome-frame::after {
    display: none;
}

.chrome-shell-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.chrome-ring-band {
    position: absolute;
    background: var(--chrome-shell-bg);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.chrome-ring-top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--chrome-ring-top);
    border-top: 1px solid var(--chrome-shell-border);
    border-left: 1px solid var(--chrome-shell-border);
    border-right: 1px solid var(--chrome-shell-border);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.chrome-ring-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--chrome-ring-bottom);
    border-bottom: 1px solid var(--chrome-shell-border);
    border-left: 1px solid var(--chrome-shell-border);
    border-right: 1px solid var(--chrome-shell-border);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.chrome-ring-left {
    top: var(--chrome-ring-top);
    bottom: var(--chrome-ring-bottom);
    left: 0;
    width: var(--chrome-ring-side);
    border-left: 1px solid var(--chrome-shell-border);
}

.chrome-ring-right {
    top: var(--chrome-ring-top);
    bottom: var(--chrome-ring-bottom);
    right: 0;
    width: var(--chrome-ring-side);
    border-right: 1px solid var(--chrome-shell-border);
}

.global-chrome-frost {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.global-chrome-frost::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, var(--chrome-frost-alpha, 0.1));
    backdrop-filter: blur(var(--chrome-frost-blur, 6px));
    -webkit-backdrop-filter: blur(var(--chrome-frost-blur, 6px));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.chrome-right-connector {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--chrome-ring-side);
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.chrome-left-theme-switch {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: var(--chrome-ring-side);
    padding: 4px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    pointer-events: auto;
    z-index: 2;
}

.chrome-theme-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.chrome-shell-opacity-control {
    width: 20px;
    height: 96px;
    border: 1px solid var(--chrome-shell-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

#chromeShellOpacitySlider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 12px;
    height: 74px;
    cursor: ns-resize;
    background: transparent;
}

.chrome-theme-btn.active {
    outline: 1px solid rgba(0, 0, 0, 0.3);
}

.chrome-switch-divider {
    width: 16px;
    height: 1px;
    background: rgba(0, 0, 0, 0.18);
    margin: 2px 0;
}

.frost-segment {
    position: absolute;
    background: rgba(255, 255, 255, var(--chrome-frost-alpha, 0.1));
    backdrop-filter: blur(var(--chrome-frost-blur, 6px));
    -webkit-backdrop-filter: blur(var(--chrome-frost-blur, 6px));
}

body.chrome-layout-cover .frost-segment {
    opacity: 0;
}

body.chrome-layout-cover .global-chrome-frost::before {
    opacity: 1;
}

.frost-top {
    top: 0;
    left: 0;
    right: 0;
    height: var(--chrome-hole-top);
}

.frost-bottom {
    top: calc(var(--chrome-hole-top) + var(--chrome-hole-height));
    left: 0;
    right: 0;
    bottom: 0;
}

.frost-left {
    top: var(--chrome-hole-top);
    height: var(--chrome-hole-height);
    left: 0;
    width: var(--chrome-hole-left);
}

.frost-right {
    top: var(--chrome-hole-top);
    height: var(--chrome-hole-height);
    left: calc(var(--chrome-hole-left) + var(--chrome-hole-width));
    right: 0;
}

.chrome-clarity-control {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 24px;
    height: 220px;
    background: transparent;
    border: 1px solid var(--chrome-shell-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
}

.chrome-edge-blur-control {
    position: relative;
    width: 24px;
    height: 160px;
    background: transparent;
    border: 1px solid var(--chrome-shell-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
}

#chromeDepthBlurSlider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 16px;
    height: 132px;
    cursor: ns-resize;
    background: transparent;
}

.chrome-inner-blur-transition {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.chrome-inner-blur-edge {
    position: absolute;
    background: rgba(255, 255, 255, var(--chrome-inner-alpha));
    backdrop-filter: blur(var(--chrome-inner-blur));
    -webkit-backdrop-filter: blur(var(--chrome-inner-blur));
}

.chrome-inner-blur-top {
    top: var(--chrome-hole-top);
    left: var(--chrome-hole-left);
    width: var(--chrome-hole-width);
    height: var(--chrome-inner-depth);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.chrome-inner-blur-bottom {
    top: calc(var(--chrome-hole-top) + var(--chrome-hole-height) - var(--chrome-inner-depth));
    left: var(--chrome-hole-left);
    width: var(--chrome-hole-width);
    height: var(--chrome-inner-depth);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.chrome-inner-blur-left {
    left: var(--chrome-hole-left);
    top: var(--chrome-hole-top);
    width: var(--chrome-inner-depth);
    height: var(--chrome-hole-height);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.chrome-inner-blur-right {
    left: calc(var(--chrome-hole-left) + var(--chrome-hole-width) - var(--chrome-inner-depth));
    top: var(--chrome-hole-top);
    width: var(--chrome-inner-depth);
    height: var(--chrome-hole-height);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* 菜单/状态栏外框主题 */
body.chrome-theme-light .top-menu-inner,
body.chrome-theme-light .bottom-controls-inner {
    background: transparent;
    border-color: transparent;
}

body.chrome-theme-light .global-chrome-frame {
    --chrome-shell-bg: rgba(255, 255, 255, 0.2);
    --chrome-shell-border: rgba(255, 255, 255, 0.42);
    border-color: var(--chrome-shell-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

body.chrome-theme-light .chrome-right-connector,
body.chrome-theme-light .chrome-left-theme-switch {
    background: transparent;
    border-color: var(--chrome-shell-border);
}

body.chrome-theme-light .chrome-inner-blur-edge {
    background: rgba(255, 255, 255, var(--chrome-inner-alpha));
}

body.chrome-theme-dark .top-menu-inner,
body.chrome-theme-dark .bottom-controls-inner {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

body.chrome-theme-dark .global-chrome-frame {
    --chrome-shell-bg: rgba(66, 71, 81, 0.8);
    --chrome-shell-border: rgba(88, 94, 106, 0.9);
    border-color: var(--chrome-shell-border);
    border-width: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(140, 150, 170, 0.14);
}

body.chrome-theme-dark .chrome-right-connector,
body.chrome-theme-dark .chrome-left-theme-switch,
body.chrome-theme-dark .chrome-clarity-control {
    background: transparent;
    border-color: var(--chrome-shell-border);
}

body.chrome-theme-dark .chrome-edge-blur-control {
    border-color: var(--chrome-shell-border);
}

body.chrome-theme-dark .chrome-inner-blur-edge {
    background: rgba(66, 71, 81, var(--chrome-inner-alpha));
}

/* 外框内延角样式切换（重点用于 dark 模式） */
body.chrome-corner-round .top-menu-inner,
body.chrome-corner-round .bottom-controls-inner {
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
}

body.chrome-corner-round .global-chrome-frame {
    border-radius: 14px !important;
}

body.chrome-corner-round .global-chrome-frame::after {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

body.chrome-corner-round .chrome-right-connector {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

body.chrome-corner-sharp .top-menu-inner,
body.chrome-corner-sharp .bottom-controls-inner {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

body.chrome-corner-sharp .global-chrome-frame {
    border-radius: 0 !important;
}

body.chrome-corner-sharp .global-chrome-frame::after,
body.chrome-corner-sharp .chrome-right-connector {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#chromeClaritySlider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 16px;
    height: 188px;
    cursor: ns-resize;
    background: transparent;
}

.social-links {
    display: flex;
    gap: 20px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    will-change: filter;
}

/* 视图控制按钮组 */
.view-controls {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    will-change: filter;
}

.view-control-btn {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1a1a1a;
    transition: all 0.2s ease;
}

.view-control-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mouse-guide:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.mouse-guide:active {
    cursor: grabbing;
}

.view-control-btn.active {
    background: #1a1a1a;
    color: #fff;
}

.view-control-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.15);
    margin: 0 4px;
}

.view-control-color {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.view-control-color::-webkit-color-swatch-wrapper {
    padding: 8px;
}

.view-control-color::-webkit-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 6px;
}

.view-control-color::-moz-color-swatch {
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 6px;
}

/* 底部时间显示 */
.bottom-time-display {
    position: absolute;
    right: 20px;
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    user-select: none;
    opacity: 0.75;
}

/* 地板过渡强度滑块 */
.floor-gradient-slider,
.floor-distance-slider {
    width: 60px;
    height: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    outline: none;
}

.floor-gradient-slider::-webkit-slider-thumb,
.floor-distance-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
}

.floor-gradient-slider::-moz-range-thumb,
.floor-distance-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
    border: none;
}

/* 可拖动参数窗口系统 */
.panel-window {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    cursor: move;
}

.panel-window-header {
    position: relative;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px 0 76px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.1) 100%);
    cursor: move;
    user-select: none;
}

.panel-window-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.3px;
    text-align: left;
    width: 100%;
}

.panel-window-controls {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

.panel-window-btn {
    width: 18px;
    height: 18px;
    padding: 0 !important;
    border: 1px solid var(--ui-btn-border) !important;
    background: linear-gradient(180deg, #f5f5f5 0%, #cfcfcf 100%) !important;
    color: #111 !important;
    border-radius: var(--ui-btn-radius) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #8b8b8b;
}

.panel-window-btn::before {
    font-size: 10px;
    line-height: 1;
    color: #111;
    font-family: "Chicago", "Geneva", "Courier New", monospace;
}

.panel-window-btn--toggle-minimize::before {
    content: "—";
}

.panel-window-btn--toggle-minimize.is-restore::before {
    content: "□";
}

.panel-window-btn--reset::before {
    content: "▢";
}

.panel-window-btn--maximize::before {
    content: "+";
}

.panel-window-content {
    padding: 14px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    font-size: 13px;
}

.panel-window.is-minimized .panel-window-content {
    display: none;
}

.panel-window-summary {
    display: none;
}

.panel-window.is-minimized {
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
}

.panel-window.is-minimized .panel-window-header {
    height: 32px;
    padding: 0 10px 0 76px;
    justify-content: flex-start;
}

.panel-window.is-minimized .panel-window-title {
    display: none;
}

.panel-window.is-minimized .panel-window-controls {
    width: auto;
    justify-content: flex-start;
}

.panel-window.is-minimized .panel-window-summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: calc(100% - 32px);
    padding: 4px 8px;
    text-align: left;
    font-size: 12px;
    line-height: 1.2;
    color: #111;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.panel-window.is-maximized {
    max-height: none !important;
}

.panel-window.is-maximized .panel-window-content {
    max-height: calc(100vh - 76px);
}

body.window-dragging {
    user-select: none;
}

/* 全站按钮：极细边框 + 统一圆角 */
:root {
    --ui-btn-radius: 6px;
    --ui-btn-border: rgba(255, 255, 255, 0.22);
}

button,
.lang-button,
.account-button,
.view-control-btn,
.matrix-btn,
.view-control-color,
.social-link,
.panel-window-btn {
    border-radius: var(--ui-btn-radius) !important;
}

button,
.lang-button,
.account-button,
.view-control-btn,
.matrix-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid var(--ui-btn-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(140%);
    color: #111 !important;
}

button:hover,
.lang-button:hover,
.account-button:hover,
.view-control-btn:hover,
.matrix-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    transform: translateY(-1px);
}

.view-controls,
.social-links {
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
}

.view-control-color::-webkit-color-swatch,
.view-control-color::-moz-color-swatch {
    border-radius: var(--ui-btn-radius) !important;
    border: 1px solid var(--ui-btn-border) !important;
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: var(--ui-btn-radius);
    border: 1px solid var(--ui-btn-border);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.14);
}

.social-link:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
    color: #000;
}

.social-link svg {
    width: 24px;
    height: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .top-menu-bar {
        top: 10px;
        height: 48px;
        padding: 0 8px;
    }

    .top-menu-inner {
        height: 48px;
        padding: 0 50px 0 10px;
    }

    .bottom-controls {
        left: 8px;
        width: calc(100vw - 16px);
    }

    .bottom-controls-inner {
        padding: 8px 50px 8px 10px;
    }
    
    .bottom-time-display {
        right: 10px;
        font-size: 11px;
    }

    .global-chrome-frame {
        left: 8px;
        right: 8px;
    }

    body.chrome-extent-full .global-chrome-frame {
        left: 0;
        right: 0;
    }

    body.chrome-extent-full .top-menu-bar,
    body.chrome-extent-full .bottom-controls {
        left: 0;
        width: 100vw;
    }

    .global-chrome-frame {
        --chrome-ring-side: 36px;
    }

    .chrome-left-theme-switch {
        left: 6px;
        width: var(--chrome-ring-side);
    }

    .chrome-theme-btn {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }

    .chrome-shell-opacity-control {
        width: 16px;
        height: 84px;
    }

    #chromeShellOpacitySlider {
        width: 10px;
        height: 64px;
    }

    .chrome-switch-divider {
        width: 12px;
    }

    .chrome-clarity-control {
        width: 20px;
        height: 140px;
    }

    .chrome-edge-blur-control {
        width: 20px;
        height: 120px;
    }

    #chromeDepthBlurSlider {
        width: 12px;
        height: 96px;
    }
    
    header h1 {
        font-size: 24px;
        letter-spacing: 4px;
    }
    
    
    .view-panel {
        padding: 140px 0 60px;
    }
    
    .top-right-controls {
        gap: 8px;
    }
    
    .lang-button {
        padding: 8px 15px;
        font-size: 12px;
    }
    
    .account-button {
        width: 38px;
        height: 38px;
    }
    
    .account-button svg {
        width: 18px;
        height: 18px;
    }
    
    .artwork-info-panel {
        right: -158px;
        width: 148px;
        height: 148px;
        padding: 10px;
    }
    
    .artwork-info-panel .info-title {
        font-size: 9px;
        margin-bottom: 4px;
        padding-bottom: 4px;
    }
    
    .artwork-info-panel .info-label {
        font-size: 7px;
        min-width: 36px;
    }
    
    .artwork-info-panel .info-value {
        font-size: 8px;
    }
    
    .artwork-info-panel .info-value.info-multiline {
        font-size: 7px;
    }
    
    .artwork-info-panel .info-value#artworkTotemCode {
        font-size: 10px;
        letter-spacing: 0.6px;
    }
    
    .artwork-info-panel .info-item {
        margin: 1px 0;
    }
    
    .controls {
        bottom: 20px;
        right: 15px;
        padding: 15px;
        gap: 10px;
        width: 170px;
    }
    
    .zoom-control input[type="range"] {
        width: 130px;
    }
    
    .particle-control input[type="range"] {
        width: 130px;
    }
    
    .brush-control input[type="range"] {
        width: 130px;
    }
    
    .projection-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .shadow-joystick {
        width: 60px;
        height: 60px;
    }
    
    .shadow-joystick-knob {
        width: 18px;
        height: 18px;
    }
    
    .temperature-control input[type="range"] {
        width: 100px;
    }
    
    
    .social-links {
        bottom: 100px;
        gap: 15px;
        padding: 12px 20px;
    }
    
    .social-link {
        width: 36px;
        height: 36px;
    }
    
    .social-link svg {
        width: 20px;
        height: 20px;
    }
    
    .artwork-guide-container {
        margin-top: 30px;
    }
    
    .totem-code-section {
        max-width: 95%;
        padding: 16px;
    }

    .totem-catalog-section {
        width: 95%;
        padding: 14px 12px;
    }

    .totem-catalog-layout {
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 8px;
    }

    .totem-catalog-grid-wrap {
        min-height: min(68vh, 702px);
    }

    .totem-catalog-grid {
        gap: 0;
        padding: 8px;
    }

    .totem-catalog-matrix-slider {
        height: 170px;
    }
    
    .saved-structures-grid {
        grid-template-columns: repeat(4, 36px);
        justify-content: center;
        gap: 8px;
        max-height: 360px;
    }

    .saved-structure-card {
        width: 36px;
    }

    .saved-structure-item {
        width: 36px;
        height: 36px;
    }
    
    .structure-item-code {
        font-size: 8px;
    }
    
    .info-panel {
        position: relative;
        right: auto;
        bottom: auto;
        width: 90%;
        max-width: 300px;
        margin: 20px auto 0;
        font-size: 0.8em;
        padding: 10px 16px;
    }
    
    .mouse-guide {
        padding: 10px 15px;
        gap: 10px;
        right: 10px;
        bottom: 120px;
    }
    
    .mouse-character svg {
        width: 50px;
        height: 50px;
    }
    
    .speech-bubble p {
        font-size: 12px;
    }
}

/* ==================== 快照系统样式 ==================== */

/* 视图模式切换器（已移至底部状态栏） */
.view-mode-switcher {
    display: none;
}

.mode-dot {
    display: none;
}

/* 新的视图模式按钮样式 */
.view-mode-btn {
    position: relative;
}

.view-mode-btn.active {
    background: rgba(0, 0, 0, 0.08);
}

.view-mode-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 0;
}

/* 背景切换按钮样式 */
.bg-toggle-btn {
    position: relative;
}

.bg-toggle-btn.active {
    background: rgba(0, 0, 0, 0.08);
}

.bg-toggle-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 0;
}

/* ── 图片上传叠层按钮 ─────────────────────────────────────────────────────── */
.image-totem-btn {
    position: relative;
}

.image-totem-btn.active {
    color: #fb923c !important;                          /* 橙色高亮 */
    background: rgba(251, 146, 60, 0.13) !important;
}

/* 激活时右上角小方块（像素感标识） */
.image-totem-btn.active::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #fb923c;
}

/* ── 摄像头图腾叠层按钮 ──────────────────────────────────────────────────── */
.camera-totem-btn {
    position: relative;
}

.camera-totem-btn.active {
    color: #818cf8 !important;                          /* 紫色高亮 */
    background: rgba(129, 140, 248, 0.13) !important;
}

.camera-totem-btn.loading {
    opacity: 0.55;
    pointer-events: none;
    animation: camBlink 0.7s ease-in-out infinite;
}

@keyframes camBlink {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 1;    }
}

/* 激活时右上角小圆点（实时录制提示） */
.camera-totem-btn.active::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f87171;
    animation: camDot 1.4s ease-in-out infinite;
}

@keyframes camDot {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.3; transform: scale(0.7); }
}

/* ── 声音控速按钮 ─────────────────────────────────────────────────────────── */
.audio-speed-btn {
    position: relative;
    overflow: visible;
}

/* 激活状态：绿色高亮 */
.audio-speed-btn.active {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.12) !important;
}

/* 加载动画中的脉冲 */
.audio-speed-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 电平可视化：四条竖线（绝对定位在按钮右上角） */
.audio-level-indicator {
    position: absolute;
    top: 2px;
    right: 1px;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 8px;
    width: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.audio-speed-btn.active .audio-level-indicator {
    opacity: 1;
}

.ali-bar {
    flex: 1;
    background: #22c55e;
    border-radius: 1px;
    height: 30%;
    transition: height 0.08s ease-out, background 0.1s;
}

.ali-bar.active {
    background: #4ade80;
}

/* 整体跳动动画（默认状态下各 bar 交错高度） */
.audio-speed-btn.active .ali-bar:nth-child(1) { animation: aliPulse 0.9s ease-in-out infinite; }
.audio-speed-btn.active .ali-bar:nth-child(2) { animation: aliPulse 0.9s ease-in-out 0.15s infinite; }
.audio-speed-btn.active .ali-bar:nth-child(3) { animation: aliPulse 0.9s ease-in-out 0.3s infinite; }
.audio-speed-btn.active .ali-bar:nth-child(4) { animation: aliPulse 0.9s ease-in-out 0.45s infinite; }

@keyframes aliPulse {
    0%, 100% { height: 25%; }
    50%       { height: 90%; }
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

/* 画廊效果 - 浅橡木色透视木地板背景层 */
.gallery-floor {
    position: absolute;
    top: calc(50% + 582px);
    left: 50%;
    transform: translateX(-50%) perspective(1200px) rotateX(72deg);
    transform-origin: center top;
    width: 160%;
    height: 120vh;
    background: rgba(212, 165, 116, 1);
    z-index: 1;
    pointer-events: none;
    display: none;
    transition: background 0.3s ease, top 0.3s ease;
}

.gallery-floor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1.2%,
        rgba(0, 0, 0, 0.05) 1.2%,
        rgba(0, 0, 0, 0.05) 1.4%
    );
}

/* 视图面板 */
.view-panel {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 180px 0 80px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateX(120%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

body.mode-single .single-view {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateX(0);
}

body.mode-single .matrix-view {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateX(120%);
}

body.mode-matrix .matrix-view {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateX(0);
}

body.mode-matrix .single-view {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateX(-120%);
}

body.mode-matrix .gallery-floor {
    display: none !important;
}

/* 高清模式样式 */
body.hd-mode-active {
    overflow: hidden;
}

body.hd-mode-active #scalable-content {
    overflow: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100vw;
    height: 100vh;
    cursor: grab;
    padding: 50vh 50vw;
}

body.hd-mode-active #scalable-content:active {
    cursor: grabbing;
}

body.hd-mode-active .center-artwork {
    margin: 0;
}

body.hd-mode-active .view-panel {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 0;
}

/* HD模式下让 #singleView 成为 gallery-floor 的定位上下文（与普通模式相同） */
body.hd-mode-active #singleView {
    position: relative;
}

/* HD模式地板：尺寸适配 HD 1920×1920 场景，宽度覆盖 outer-frame（2061px） */
body.hd-mode-active .gallery-floor {
    width: 200%;        /* 覆盖 outer-frame 两侧 */
    height: 3000px;     /* HD 下用固定高度取代 120vh，保证够深 */
}

/* HD模式下所有过渡环按比例放大 */
body.hd-mode-active .ring-1 { width: 1920px; height: 1920px; }
body.hd-mode-active .ring-2 { width: 1861px; height: 1861px; }
body.hd-mode-active .ring-3 { width: 1809px; height: 1809px; }
body.hd-mode-active .ring-4 { width: 1762px; height: 1762px; }
body.hd-mode-active .ring-5 { width: 1718px; height: 1718px; }
body.hd-mode-active .ring-6 { width: 1678px; height: 1678px; }
body.hd-mode-active .ring-7 { width: 1643px; height: 1643px; }
body.hd-mode-active .ring-8 { width: 1596px; height: 1596px; }
body.hd-mode-active #grid-canvas-container { width: 1614px; height: 1614px; }
body.hd-mode-active .center-artwork::before { width: 1614px; height: 1614px; }

body.hd-mode-active .outer-frame { width: 2061px; height: 2061px; }
body.hd-mode-active .second-frame { width: 2000px; height: 2000px; }

body.hd-mode-active .top-menu-bar,
body.hd-mode-active .bottom-controls,
body.hd-mode-active .controls,
body.hd-mode-active .ring-controls,
body.hd-mode-active .color-controls,
body.hd-mode-active .blur-controls,
body.hd-mode-active .binary-structure-controls,
body.hd-mode-active .view-mode-switcher,
body.hd-mode-active .totem-search-row,
body.hd-mode-active .artwork-guide-container,
body.hd-mode-active .global-chrome-frame,
body.hd-mode-active .artwork-info-panel,
body.hd-mode-active .totem-catalog-section {
    opacity: 0 !important;
    pointer-events: none !important;
}

#hdModeButton.active {
    background: rgba(0, 0, 0, 0.08);
}

#hdModeButton.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #1a1a1a;
    border-radius: 0;
}

body.mode-single .artwork-with-info {
    transform: scale(0.85);
    transform-origin: center center;
}

/* 矩阵模式下隐藏信息看板 */
body.mode-matrix .artwork-info-panel {
    opacity: 0;
    pointer-events: none;
}

/* 大屏幕下信息框位置 */
@media (min-width: 1600px) {
    .artwork-info-panel {
        right: -220px;
    }
}

/* 作品矩阵视图 */
.matrix-view {
    gap: 24px;
}

.matrix-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    max-width: 400px;
    justify-content: center;
}

.matrix-btn {
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: #333;
    transition: all 0.2s ease;
}

.matrix-btn:hover {
    background: #f5f5f5;
}

.matrix-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}

.matrix-grid {
    width: 640px;
    max-width: 90vw;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    filter: drop-shadow(0 8px 12px rgba(35, 35, 35, 0.50))
            drop-shadow(0 12px 25px rgba(35, 35, 35, 0.35))
            drop-shadow(0 20px 40px rgba(35, 35, 35, 0.25));
    transition: filter 0.3s ease;
}

/* ── 矩阵主体横排（grid + 精准锁定面板） ──────────────────── */
.matrix-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* ── 精准锁定面板 ────────────────────────────────────────── */
.msp-wrap {
    width: 220px;
    min-width: 200px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.msp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.msp-title {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    letter-spacing: 0.02em;
}

.msp-clear-all {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    background: rgba(0,0,0,0.04);
    color: #555;
    cursor: pointer;
    transition: background 0.15s;
}
.msp-clear-all:hover { background: rgba(0,0,0,0.09); }

/* 分组容器 */
.msp-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msp-group-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 5px;
}

.msp-group--structure .msp-group-hd {
    background: rgba(77, 166, 255, 0.1);
    border-left: 3px solid #4da6ff;
}

.msp-group--seed .msp-group-hd {
    background: rgba(199, 125, 255, 0.1);
    border-left: 3px solid #c77dff;
}

.msp-group-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #333;
}

.msp-group--structure .msp-group-title { color: #2a7bd4; }
.msp-group--seed .msp-group-title      { color: #9b4fd4; }

.msp-group-hint {
    font-size: 10px;
    color: #aaa;
    margin-left: auto;
}

/* 种子组锁定色 */
.msp-slot--seed.msp-slot--locked {
    border-color: #c77dff;
    background: #faf4ff;
}

.msp-code-seed {
    color: #9b4fd4;
}

.msp-hint {
    font-size: 10.5px;
    color: #999;
    line-height: 1.5;
    text-align: center;
    display: none; /* 两组各有标题，全局提示隐藏 */
}

/* 2×2 槽位网格 */
.msp-slots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* 单个槽位 */
.msp-slot {
    background: #f7f7f7;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.18s;
    min-height: 120px;
}
.msp-slot--locked {
    border-color: #4da6ff;
    background: #f0f7ff;
}

.msp-slot-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.msp-slot-label {
    font-size: 10.5px;
    font-weight: 600;
    color: #555;
}

.msp-slot-del {
    width: 16px;
    height: 16px;
    border: none;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}
.msp-slot-del:hover { background: rgba(220,50,50,0.18); color: #c00; }

/* 槽位预览区 */
.msp-slot-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-slot-empty {
    font-size: 10px;
    color: #bbb;
    text-align: center;
    line-height: 1.4;
    padding: 8px 0;
}

.msp-slot-prev-totem,
.msp-slot-prev-seed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.msp-prev-svg {
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}

.msp-slot-code-tag {
    font-size: 9.5px;
    color: #4da6ff;
    font-weight: 600;
    font-family: monospace;
}

.msp-slot-seed-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #ddd;
}

/* 搜索输入 */
.msp-slot-search-wrap {
    position: relative;
}

.msp-slot-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 10.5px;
    padding: 4px 6px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
}
.msp-slot-input:focus { border-color: #4da6ff; }
.msp-slot-input::placeholder { color: #bbb; }

/* 下拉列表 */
.msp-slot-dd {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.13);
    z-index: 9000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.msp-dd-item {
    padding: 6px 8px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}
.msp-dd-item:last-child { border-bottom: none; }
.msp-dd-item:hover { background: #f0f7ff; }

.msp-dd-totem,
.msp-dd-seed {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msp-dd-code {
    font-size: 10.5px;
    font-weight: 600;
    font-family: monospace;
    color: #222;
}

.msp-dd-name {
    font-size: 10px;
    color: #777;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msp-dd-type-tag {
    font-size: 9px;
    color: #fff;
    background: #4da6ff;
    border-radius: 3px;
    padding: 1px 4px;
    flex-shrink: 0;
}
.msp-dd-type-tag--seed { background: #c77dff; }

.msp-dd-seed-img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.msp-dd-empty {
    padding: 10px 8px;
    font-size: 10px;
    color: #aaa;
    text-align: center;
}

.matrix-random-btn {
    padding: 10px 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.matrix-random-btn:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.matrix-seed-panel {
    width: min(960px, 90vw);
    padding: 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.matrix-seed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.matrix-seed-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.matrix-seed-save-btn {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #222;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.matrix-seed-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.matrix-seed-tab-btn {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.matrix-seed-tab-btn.active {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.matrix-seed-scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.matrix-seed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.matrix-seed-item {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.matrix-seed-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.matrix-seed-item.active {
    border-color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.matrix-seed-preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f3f3;
    margin-bottom: 8px;
}

.matrix-seed-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.matrix-seed-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #666;
}

.matrix-seed-favorite-btn,
.matrix-seed-delete-btn {
    position: absolute;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.matrix-seed-favorite-btn {
    right: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #c4c4c4;
}

.matrix-seed-favorite-btn.active {
    color: #ff3b30;
}

.matrix-seed-delete-btn {
    left: 6px;
    background: rgba(255, 59, 48, 0.95);
    color: #fff;
}

.matrix-seed-pagination {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

.matrix-page-btn {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.matrix-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.matrix-item {
    background: transparent;
    border-radius: 0;
    padding: 0;
    border: none;
}

.matrix-item .matrix-outer-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    border-radius: 0;
    overflow: visible;
}

.matrix-item .matrix-second-frame,
.matrix-item .matrix-ring {
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-item .matrix-second-frame {
    width: 97.03125%;
    height: 97.03125%;
    position: absolute;
    background: #1a1a1a;
    border-radius: 0;
}

/* 过渡带只在496.8之外 */
.matrix-item .matrix-ring-1 { width: 94.125%; height: 94.125%; position: absolute; background: #2a2a2a; border-radius: 0; }
.matrix-item .matrix-ring-2 { width: 91.203125%; height: 91.203125%; position: absolute; background: #3a3a3a; border-radius: 0; }
.matrix-item .matrix-ring-3 { width: 88.6875%; height: 88.6875%; position: absolute; background: #4a4a4a; border-radius: 0; }
.matrix-item .matrix-ring-4 { width: 86.359375%; height: 86.359375%; position: absolute; background: #5a5a5a; border-radius: 0; }
.matrix-item .matrix-ring-5 { width: 84.21875%; height: 84.21875%; position: absolute; background: #6a6a6a; border-radius: 0; }
.matrix-item .matrix-ring-6 { width: 82.265625%; height: 82.265625%; position: absolute; background: #7a7a7a; border-radius: 0; }
.matrix-item .matrix-ring-7 { width: 80.53125%; height: 80.53125%; position: absolute; background: #8a8a8a; border-radius: 0; }
.matrix-item .matrix-ring-8 { width: 78.984375%; height: 78.984375%; position: absolute; background: #9a9a9a; border-radius: 0; display: flex; align-items: center; justify-content: center; }

.matrix-item .totem-canvas {
    position: absolute;
    z-index: 10;
    width: 93.93%;
    height: 93.93%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.matrix-item .totem-canvas canvas {
    display: block;
    border-radius: 0;
}

/* ── 显示参数控制面板 ─────────────────────────────────────────── */
.display-controls {
    position: fixed;
    top: 120px;
    right: 270px;
    z-index: 300;
    width: 260px;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* 初始隐藏，由 display-params.js 控制开关 */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96) translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.display-controls.dp-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.display-controls .panel-window-content {
    max-height: 55vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.display-controls h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ── 显示参数双锚滑杆 ──────────────────────────────────────── */
.dp-pg {
    margin-bottom: 14px;
}

.dp-pg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.dp-pg-label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.65;
    color: #222;
}

.dp-pg-val {
    font-size: 11px;
    font-weight: 600;
    color: #333;
    min-width: 40px;
    text-align: right;
}

/* 双轨容器 */
.dp-dual {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}

/* 轨道底色 */
.dp-dual::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 3px;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
    pointer-events: none;
}

/* 两个锚之间的高亮填充 */
.dp-fill {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 3px;
    background: rgba(80,140,255,0.5);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
    transition: left 0.05s, width 0.05s;
}

/* 当前值动点 */
.dp-cur {
    position: absolute;
    top: 50%; transform: translate(-50%, -50%);
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #4d8fff;
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 0 5px rgba(77,143,255,0.7);
    transition: left 0.05s;
}

/* 两个 range input 叠加 */
.dp-dual input[type=range] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    margin: 0; padding: 0;
    z-index: 2;
}

.dp-dual input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    height: 3px;
}

.dp-dual input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 10px; height: 20px;
    border-radius: 4px;
    cursor: ew-resize;
    position: relative;
    z-index: 3;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* lo 锚：蓝色 */
.dp-lo::-webkit-slider-thumb {
    background: #4d8fff;
}

/* hi 锚：橙色 */
.dp-hi::-webkit-slider-thumb {
    background: #ff9f45;
}

/* 速度行 */
.dp-spd-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}

.dp-spd-lbl {
    font-size: 10px;
    opacity: 0.45;
    min-width: 22px;
    color: #222;
}

.dp-spd-row input[type=range] {
    flex: 1;
    min-width: 0;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
    outline: none;
}

.dp-spd-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #888;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.dp-spd-val {
    font-size: 10px;
    opacity: 0.55;
    min-width: 24px;
    text-align: right;
    color: #222;
}

/* ── 二元结构参数面板 ─────────────────────────────────────────── */ 
.binary-structure-controls {
    position: fixed;
    top: 80px;
    right: 550px;
    z-index: 300;
    width: 290px;
    min-width: 240px;
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* 隐藏滚动条但保留滚动功能 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.binary-structure-controls::-webkit-scrollbar { display: none; }

.binary-structure-controls .panel-window-content {
    max-height: 75vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.binary-structure-controls h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ── Bitotem Epoch 区块 ───────────────────────────────────────── */
.epoch-section {
    background: rgba(100, 120, 255, 0.06);
    border: 1px solid rgba(100, 120, 255, 0.18);
    border-radius: 10px;
    padding: 8px 10px !important;
}
.epoch-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #3b5bdb;
}
.epoch-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4dabf7;
    box-shadow: 0 0 6px 2px rgba(77, 171, 247, 0.6);
    animation: epochPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes epochPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}
.epoch-countdown {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: #74c0fc;
    font-variant-numeric: tabular-nums;
}
.epoch-enable-switch {
    width: 32px !important;
    flex: 0 0 32px !important;
    margin-left: 6px;
    cursor: pointer;
}
.epoch-enable-label {
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    color: #4ade80;
    flex-shrink: 0;
}
.epoch-desc {
    font-size: 10px;
    color: #555;
    margin: 4px 0 8px;
    line-height: 1.4;
}
.epoch-trigger-btn {
    width: 100%;
    padding: 6px 0;
    background: linear-gradient(135deg, rgba(77,171,247,0.18), rgba(99,102,241,0.18));
    border: 1px solid rgba(77, 171, 247, 0.35);
    border-radius: 8px;
    color: #2c5f8a;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.epoch-trigger-btn:hover {
    background: linear-gradient(135deg, rgba(77,171,247,0.32), rgba(99,102,241,0.32));
}
.epoch-trigger-btn:active { transform: scale(0.97); }

/* ── 显示参数按钮（底栏） ─────────────────────────────────────── */
.display-params-btn {
    position: relative;
}

.display-params-btn.active {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
}

.display-params-btn.active svg {
    stroke: #06b6d4;
}

/* ══════════════════════════════════════════════════════════════════════
   顶部菜单栏左侧按钮区
══════════════════════════════════════════════════════════════════════ */
.top-menu-left {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    justify-self: start;
}

.top-menu-left-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 9px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.top-menu-left-btn:hover {
    background: rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.22);
}
.top-menu-left-btn.cfp-active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════
   图腾全展示 · 全屏页面 (#catalog-fullpage)
══════════════════════════════════════════════════════════════════════ */
#catalog-fullpage {
    position: fixed;
    inset: 0;
    z-index: 9600;
    background: #050505;
    display: flex;
    flex-direction: column;
    /* 隐藏状态 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#catalog-fullpage.cfp-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── 顶部栏 ──────────────────────────────────────────────────────── */
.cfp-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: #050505;
}

.cfp-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.cfp-title {
    font-size: 12px;
    font-family: monospace;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}
.cfp-hint {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    display: none;
}
@media (min-width: 700px) { .cfp-hint { display: block; } }

.cfp-header-center {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    pointer-events: auto;
    z-index: 2;
}

/* 跳码搜索 */
.cfp-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cfp-code-input {
    width: 64px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-family: monospace;
    text-align: center;
    padding: 4px 6px;
    letter-spacing: 0.1em;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.cfp-code-input::placeholder { color: rgba(255,255,255,0.2); }
.cfp-code-input:focus {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
}
.cfp-code-btn {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-family: monospace;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cfp-code-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}

/* 翻页控件 */
.cfp-page-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cfp-pg-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.55);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.cfp-pg-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cfp-pg-btn:disabled { opacity: 0.2; pointer-events: none; }

.cfp-status {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    text-align: center;
    min-width: 220px;
}

.cfp-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
/* 关闭键：在标题栏最左侧，flex-shrink:0 保持固定宽度 */
.cfp-close-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    cursor: pointer;
    padding: 3px 9px;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    margin-right: 4px;
}
.cfp-close-btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.28);
}

/* ── 筛选条 ──────────────────────────────────────────────────────── */
.cfp-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    font-family: monospace;
    flex-shrink: 0;
    min-height: 0;
}
/* Hide when empty (no active filters) */
.cfp-filter-bar:empty { display: none; }
/* 全选勾 */
.cfp-fb-all {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255,255,255,0.5);
    user-select: none;
    flex-shrink: 0;
    padding-right: 8px;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.cfp-fb-all input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}
.cfp-fb-all input[type="checkbox"]:checked {
    background: rgba(100,200,160,0.25);
    border-color: rgba(100,200,160,0.6);
}
.cfp-fb-all input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 2px; top: 0px;
    width: 5px; height: 8px;
    border: 1.5px solid #7dedb8;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.cfp-fb-all:hover input[type="checkbox"] { border-color: rgba(100,200,160,0.5); }
.cfp-fb-all-label { letter-spacing: 0.04em; }

.cfp-fb-sep { color: rgba(255,255,255,0.15); }
.cfp-fb-pre { color: rgba(255,255,255,0.3); }
.cfp-fb-tag  {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px; color: #fff; padding: 2px 8px; cursor: pointer;
    font-size: 10px; font-family: monospace; transition: background 0.15s;
}
.cfp-fb-tag:hover { background: rgba(255,100,100,0.25); }
.cfp-fb-clear {
    background: none; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px; color: rgba(255,255,255,0.4); cursor: pointer;
    padding: 2px 8px; font-size: 10px; font-family: monospace;
    transition: color 0.15s, border-color 0.15s;
}
.cfp-fb-clear:hover { color: #fff; border-color: rgba(255,255,255,0.35); }

/* ── 主内容区：五列 Grid（排序 / 详情 / 图层 / 网格 / K线） ─────── */
.cfp-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    background: #050505;
}

/* ── 左侧控制栏 ──────────────────────────────────────────────────── */
.cfp-left-bar {
    width: 84px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    padding: 8px 6px;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,0.05);
}

/* 排序按钮组 */
.cfp-lb-sort {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cfp-lb-title {
    font-size: 8.5px;
    font-family: monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    margin-bottom: 2px;
    text-align: center;
}
.cfp-sort-btn {
    display: block;
    width: 100%;
    padding: 5px 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    color: rgba(255,255,255,0.45);
    font-size: 10px;
    font-family: monospace;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: center;
    white-space: nowrap;
}
.cfp-sort-btn:hover        { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); }
.cfp-sort-btn.cfp-sort-active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
}

/* 竖向滑块组 */
.cfp-lb-sliders {
    flex: 1;
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: stretch;
    min-height: 0;
}
.cfp-vslider-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.cfp-vs-end {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.3);
    line-height: 1;
}
.cfp-vslider {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 18px;
    flex: 1;
    min-height: 80px;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.15s;
}
.cfp-vslider:hover { opacity: 1; }
.cfp-vs-name {
    font-size: 8.5px;
    font-family: monospace;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.2);
    text-align: center;
}
.cfp-matrix-value {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.45);
    text-align: center;
    line-height: 1.3;
}

/* ── 图腾网格区：居中最大正方形 ─────────────────────────────────── */
.cfp-grid-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
    background: #050505;
}

/* 网格：居中的最大正方形 */
#catalog-fullpage .totem-catalog-grid {
    /* square: take the smaller of available width vs available height */
    width:  min(100%, calc(100vh - 160px));
    height: min(100%, calc(100vh - 160px));
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(var(--catalog-matrix-size, 10), 1fr);
    grid-template-rows: repeat(var(--catalog-matrix-size, 10), 1fr);
    /* gap and padding are set dynamically by JS (10% of cell size) */
    gap: 0;
    padding: 0;
    box-sizing: border-box;
    background: #050505;
}
/* Each grid cell is strictly square via aspect-ratio */
#catalog-fullpage .totem-catalog-item {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0;
    border: none;
    outline: none;
    box-shadow: none;
}
#catalog-fullpage .totem-catalog-item:hover {
    box-shadow: none;
}
#catalog-fullpage .totem-catalog-mini {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0;
    overflow: hidden;
    border: none;
    outline: none;
}
#catalog-fullpage .totem-catalog-cell.is-dark  { background: #ffffff; }
#catalog-fullpage .totem-catalog-cell.is-light { background: #000000; }

/* ── Bottom bar + detail/layer panels hidden ─────────────────────── */
.cfp-bottom-bar { display: none !important; }

/* ── 详情面板 ─────────────────────────────────────────────────────── */
.cfp-detail-panel {
    flex: 1;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
    overflow-y: auto;
    overflow-x: hidden;
}
.cfp-detail-panel::-webkit-scrollbar { width: 3px; }
.cfp-detail-panel::-webkit-scrollbar-track { background: transparent; }
.cfp-detail-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* 占位符 */
.cfp-det-ph {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255,255,255,0.18);
    font-size: 11px;
    font-family: monospace;
    text-align: center;
    padding: 20px;
    line-height: 1.7;
}
.cfp-det-ph-icon { font-size: 28px; opacity: 0.3; }

/* ── K线检索面板（已移除，隐藏以防 JS 引用报错） ─────────────────── */
.cfp-kline-panel { display: none !important; }
.cfp-kl-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cfp-kl-title {
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.75);
}
.cfp-kl-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.cfp-kl-mode-btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    border-radius: 6px;
    padding: 6px 5px;
    font-size: 9px;
    font-family: monospace;
    cursor: pointer;
}
.cfp-kl-mode-btn.cfp-kl-mode-active {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
}
.cfp-kl-section { display: none; }
.cfp-kl-section.cfp-kl-section-active {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}
.cfp-kl-sub {
    font-size: 9px;
    line-height: 1.5;
    font-family: monospace;
    color: rgba(255,255,255,0.3);
}
.cfp-kl-upload {
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    text-align: center;
}
.cfp-kl-upload:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
.cfp-kl-upload input { display: none; }
.cfp-kl-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: #0a0b0d;
}
.cfp-kl-match-btn {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    color: rgba(255,255,255,0.75);
    font-size: 10px;
    font-family: monospace;
    padding: 7px 8px;
    cursor: pointer;
}
.cfp-kl-match-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cfp-kl-match-btn:disabled { opacity: 0.35; cursor: default; }
.cfp-kl-result {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.6;
    font-family: monospace;
    color: rgba(255,255,255,0.35);
    white-space: pre-line;
}
.cfp-kl-snap-head {
    margin-top: 2px;
    font-size: 8.5px;
    font-family: monospace;
    color: rgba(185, 215, 255, 0.52);
    letter-spacing: 0.04em;
}
.cfp-kl-snap-list {
    border: 1px solid rgba(128, 176, 255, 0.2);
    border-radius: 6px;
    background: rgba(18, 30, 46, 0.16);
    padding: 6px;
    max-height: 120px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cfp-snap-item {
    width: 100%;
    border: 1px solid rgba(130, 178, 255, 0.24);
    border-radius: 5px;
    background: rgba(60, 110, 190, 0.12);
    color: rgba(230, 242, 255, 0.9);
    padding: 4px 6px;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 4px 6px;
    cursor: pointer;
}
.cfp-snap-item:hover {
    border-color: rgba(140, 198, 255, 0.52);
    background: rgba(74, 136, 232, 0.2);
}
.cfp-snap-idx {
    font-size: 8px;
    font-family: monospace;
    color: rgba(255,255,255,0.55);
}
.cfp-snap-code {
    font-size: 9px;
    font-family: monospace;
    color: rgba(155, 255, 220, 0.92);
}
.cfp-snap-meta {
    font-size: 8px;
    font-family: monospace;
    color: rgba(210, 230, 255, 0.75);
    justify-self: end;
}
.cfp-snap-time {
    grid-column: 1 / -1;
    font-size: 8px;
    font-family: monospace;
    color: rgba(255,255,255,0.42);
}
.cfp-snap-empty {
    font-size: 8.5px;
    font-family: monospace;
    color: rgba(255,255,255,0.32);
}

/* ── 自动化调度器 Bitotem Data Engine ────────────────────────────── */
.cfp-auto-scheduler {
    margin-top: 10px;
    border: 1px solid rgba(77, 171, 247, 0.22);
    border-radius: 10px;
    background: rgba(10, 25, 50, 0.45);
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cfp-auto-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cfp-auto-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(100,130,160,0.5);
    flex-shrink: 0;
    transition: background 0.3s, box-shadow 0.3s;
}
.cfp-auto-dot.is-running {
    background: #4ade80;
    box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.55);
    animation: autoDotPulse 2s ease-in-out infinite;
}
.cfp-auto-dot.is-busy {
    background: #fbbf24;
    box-shadow: 0 0 6px 2px rgba(251, 191, 36, 0.55);
    animation: autoDotPulse 0.6s ease-in-out infinite;
}
@keyframes autoDotPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.cfp-auto-title {
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(160, 200, 255, 0.85);
    letter-spacing: 0.02em;
    flex: 1;
}
.cfp-auto-toggle-btn {
    padding: 3px 10px;
    border: 1px solid rgba(77, 171, 247, 0.4);
    border-radius: 6px;
    background: rgba(30, 60, 100, 0.5);
    color: rgba(140, 190, 255, 0.9);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    white-space: nowrap;
}
.cfp-auto-toggle-btn:hover {
    background: rgba(50, 100, 160, 0.7);
    border-color: rgba(77, 171, 247, 0.7);
}
.cfp-auto-toggle-btn.is-active {
    background: rgba(20, 80, 40, 0.7);
    border-color: rgba(74, 222, 128, 0.5);
    color: #4ade80;
}
.cfp-auto-desc {
    font-size: 8.5px;
    color: rgba(180, 200, 230, 0.52);
    line-height: 1.45;
}
.cfp-auto-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.cfp-auto-label {
    font-size: 8.5px;
    color: rgba(180, 200, 230, 0.55);
    min-width: 22px;
}
.cfp-auto-ck {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: rgba(180, 210, 255, 0.75);
    cursor: pointer;
    user-select: none;
}
.cfp-auto-ck input[type="checkbox"] {
    width: 11px;
    height: 11px;
    accent-color: #4dabf7;
    cursor: pointer;
}
.cfp-auto-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.cfp-auto-status-txt {
    font-size: 9px;
    color: rgba(160, 200, 255, 0.7);
    font-family: monospace;
}
.cfp-auto-next {
    font-size: 9px;
    color: rgba(120, 170, 240, 0.55);
    font-family: monospace;
    font-variant-numeric: tabular-nums;
}
.cfp-auto-log-head {
    font-size: 8.5px;
    color: rgba(130, 170, 220, 0.45);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.cfp-auto-log {
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cfp-auto-log::-webkit-scrollbar { display: none; }
.cfp-auto-log-empty {
    font-size: 8.5px;
    color: rgba(255,255,255,0.25);
    font-family: monospace;
}
.cfp-al-run {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cfp-al-time {
    font-size: 8px;
    color: rgba(130, 160, 200, 0.5);
    font-family: monospace;
}
.cfp-al-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.cfp-al-tag {
    font-size: 8px;
    font-family: monospace;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.4;
}
.cfp-al-ok {
    background: rgba(30, 80, 50, 0.55);
    color: rgba(134, 239, 172, 0.85);
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.cfp-al-err {
    background: rgba(80, 25, 25, 0.55);
    color: rgba(252, 165, 165, 0.75);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.cfp-api-modal {
    display: none;
    position: relative;
}
.cfp-api-modal[aria-hidden="false"] { display: block; }
.cfp-api-modal-inner {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 8px;
    background: rgba(10,11,13,0.95);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cfp-api-modal-title {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255,255,255,0.7);
}
.cfp-api-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.82);
    font-size: 10px;
    font-family: monospace;
    padding: 6px 7px;
    outline: none;
}
.cfp-api-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.cfp-subject-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cfp-subject-item {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255,255,255,0.68);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
}
.cfp-subject-item.cfp-subject-item-active {
    color: #fff;
    border-color: rgba(140,220,255,0.5);
    background: rgba(80,160,255,0.2);
}
.cfp-subject-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.cfp-subject-period {
    flex: 1 1 calc(25% - 4px);
    min-width: 38px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    padding: 5px 4px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.65);
    font-size: 10px;
    font-family: monospace;
    cursor: pointer;
}
.cfp-subject-period.cfp-subject-period-active {
    color: #fff;
    border-color: rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.14);
}
.cfp-account-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cfp-account-item {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 9.5px;
    font-family: monospace;
    color: rgba(255,255,255,0.7);
}

/* 详情内容 */
.cfp-det-inner { padding: 12px; }
.cfp-det-id {
    font-size: 18px;
    font-family: monospace;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
    font-weight: 500;
}
/* 4×4 预览 */
.cfp-det-preview {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1px;
    margin-bottom: 14px;
    border-radius: 4px;
    overflow: hidden;
}
.cfp-pv-dark  { background: #1a1a1a; }
.cfp-pv-light { background: #e8e8e8; }

/* 区块标题 */
.cfp-det-sec {
    font-size: 8.5px;
    font-family: monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    margin: 10px 0 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cfp-det-sec-hint {
    font-size: 8px;
    opacity: 0.6;
    text-transform: none;
    letter-spacing: 0;
}
.cfp-det-fold-btn {
    margin-left: auto;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    color: rgba(220,235,255,0.72);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 8px;
    font-family: monospace;
    line-height: 1.5;
    cursor: pointer;
}
.cfp-det-fold-btn:hover {
    border-color: rgba(170,210,255,0.42);
    color: rgba(235,245,255,0.9);
}

/* 标签容器 */
/* ── 图腾点亮：彩色光环动画 ─────────────────────────────── */
@keyframes cfp-lit-ring {
    0%   { outline-color: #ff6b6b; }
    16%  { outline-color: #ffaa00; }
    33%  { outline-color: #ffe566; }
    50%  { outline-color: #6bcb77; }
    66%  { outline-color: #4d96ff; }
    83%  { outline-color: #c77dff; }
    100% { outline-color: #ff6b6b; }
}
#catalog-fullpage .totem-catalog-item.cfp-lit {
    outline: 2.5px solid #ff6b6b;
    outline-offset: 1px;
    position: relative;
    z-index: 2;
    animation: cfp-lit-ring 2s linear infinite;
}
@keyframes cfp-recorded-ring {
    0%   { border-color: #7c4dff; box-shadow: 0 0 0 1px #7c4dff, 0 0 7px rgba(124,77,255,0.55); }
    50%  { border-color: #4da6ff; box-shadow: 0 0 0 1px #4da6ff, 0 0 7px rgba(77,166,255,0.55); }
    100% { border-color: #7c4dff; box-shadow: 0 0 0 1px #7c4dff, 0 0 7px rgba(124,77,255,0.55); }
}
#catalog-fullpage .totem-catalog-item.cfp-recorded {
    outline: 2px solid #7c4dff;
    outline-offset: 1px;
    position: relative;
    z-index: 2;
    animation: cfp-recorded-ring 2.4s ease-in-out infinite;
}

/* ID 行（ID + 点亮按钮横排） */
.cfp-det-id-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}
.cfp-lit-btn {
    flex-shrink: 0;
    font-size: 9.5px;
    font-family: monospace;
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 2px 7px;
    line-height: 1.5;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.cfp-lit-btn:hover {
    color: #ffe566;
    border-color: rgba(255,229,102,0.35);
}
@keyframes cfp-lit-btn-glow {
    0%,100% { color: #ff6b6b; border-color: rgba(255,107,107,0.45); }
    16%     { color: #ffaa00; border-color: rgba(255,170,0,0.45);   }
    33%     { color: #ffe566; border-color: rgba(255,229,102,0.45); }
    50%     { color: #6bcb77; border-color: rgba(107,203,119,0.45); }
    66%     { color: #4d96ff; border-color: rgba(77,150,255,0.45);  }
    83%     { color: #c77dff; border-color: rgba(199,125,255,0.45); }
}
.cfp-lit-btn.cfp-lit-on {
    background: rgba(255,229,102,0.07);
    animation: cfp-lit-btn-glow 2s linear infinite;
}

/* 稀有度排名（ID 正下方） */
.cfp-det-rank {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.cfp-det-rank-val {
    font-size: 13px;
    font-weight: 700;
    color: rgba(180, 210, 255, 0.85);
    letter-spacing: 0.04em;
}
.cfp-det-rank-total {
    font-size: 9px;
    color: rgba(255,255,255,0.2);
}

/* 综合稀有度（ID 下方） */
.cfp-det-combined {
    font-size: 8.5px;
    font-family: monospace;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.cfp-det-combined-val {
    color: rgba(255,220,120,0.75);
    font-weight: 600;
}

/* 标签容器：纵向排列 */
.cfp-det-tags {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 2px;
}

/* 单行标签：左 = 标签，右 = 稀有度数字 */
.cfp-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.cfp-tag-row .cfp-tag {
    flex-shrink: 0;
}

/* 稀有度数字 */
.cfp-tag-rarity {
    font-size: 8.5px;
    font-family: monospace;
    color: rgba(255,255,255,0.28);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.cfp-det-records {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}
.cfp-rec-item {
    font-size: 8.5px;
    font-family: monospace;
    color: rgba(170, 215, 255, 0.72);
    line-height: 1.5;
    padding: 3px 6px;
    border: 1px solid rgba(120, 190, 255, 0.25);
    border-radius: 4px;
    background: rgba(60, 120, 190, 0.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 通用标签 */
.cfp-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 9.5px;
    font-family: monospace;
    cursor: default;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    border: 1px solid transparent;
    user-select: none;
}
/* 有属性 / 无属性 */
.cfp-t-yes {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}
.cfp-t-yes:hover  { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); }
.cfp-t-no  {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.28);
    cursor: pointer;
}
.cfp-t-no:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.45); }
/* 已激活筛选 */
.cfp-t-yes.cfp-t-filtered {
    background: rgba(100,220,160,0.18);
    border-color: rgba(100,220,160,0.5);
    color: #7dffbb;
}
/* 黑格 / 白格 */
.cfp-t-dark  {
    background: rgba(30,30,30,0.85);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
}
.cfp-t-dark:hover { border-color: rgba(255,255,255,0.35); }
.cfp-t-dark.cfp-t-filtered { border-color: rgba(100,220,160,0.6); color: #7dffbb; }
.cfp-t-light {
    background: rgba(240,240,240,0.12);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
}
.cfp-t-neutral {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.35);
}

/* 趋势标签 —— 未命中（置灰，始终显示） */
.cfp-t-trend-off {
    background: transparent;
    border-color: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.18);
    cursor: pointer;
}
.cfp-t-trend-off:hover {
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.32);
}

/* 趋势标签 —— 绝对（最强） */
.cfp-t-abs-rising {
    background: rgba(60, 230, 140, 0.14);
    border-color: rgba(60, 230, 140, 0.38);
    color: #5dffa0;
    cursor: pointer;
}
.cfp-t-abs-rising.cfp-t-filtered {
    background: rgba(60, 230, 140, 0.28);
    border-color: rgba(60, 230, 140, 0.7);
    color: #9affc8;
}
.cfp-t-abs-falling {
    background: rgba(240, 70, 70, 0.14);
    border-color: rgba(240, 70, 70, 0.38);
    color: #ff7070;
    cursor: pointer;
}
.cfp-t-abs-falling.cfp-t-filtered {
    background: rgba(240, 70, 70, 0.28);
    border-color: rgba(240, 70, 70, 0.7);
    color: #ff9999;
}
/* 趋势标签 —— 相对（中等） */
.cfp-t-rising {
    background: rgba(80, 210, 130, 0.09);
    border-color: rgba(80, 210, 130, 0.24);
    color: #7dedb8;
    cursor: pointer;
}
.cfp-t-rising.cfp-t-filtered {
    background: rgba(80, 210, 130, 0.2);
    border-color: rgba(80, 210, 130, 0.55);
    color: #a5ffda;
}
.cfp-t-falling {
    background: rgba(220, 80, 80, 0.09);
    border-color: rgba(220, 80, 80, 0.24);
    color: #f08888;
    cursor: pointer;
}
.cfp-t-falling.cfp-t-filtered {
    background: rgba(220, 80, 80, 0.2);
    border-color: rgba(220, 80, 80, 0.55);
    color: #ffaaaa;
}
/* 趋势标签 —— 一般（最淡） */
.cfp-t-rising-dim {
    background: rgba(80, 210, 130, 0.05);
    border-color: rgba(80, 210, 130, 0.14);
    color: rgba(125, 237, 184, 0.7);
    cursor: pointer;
}
.cfp-t-rising-dim.cfp-t-filtered {
    background: rgba(80, 210, 130, 0.15);
    border-color: rgba(80, 210, 130, 0.4);
    color: #a5ffda;
}
.cfp-t-falling-dim {
    background: rgba(220, 80, 80, 0.05);
    border-color: rgba(220, 80, 80, 0.14);
    color: rgba(240, 136, 136, 0.7);
    cursor: pointer;
}
.cfp-t-falling-dim.cfp-t-filtered {
    background: rgba(220, 80, 80, 0.15);
    border-color: rgba(220, 80, 80, 0.4);
    color: #ffaaaa;
}
.cfp-t-oscillating {
    background: rgba(210, 170, 60, 0.09);
    border-color: rgba(210, 170, 60, 0.24);
    color: #e8c66a;
    cursor: pointer;
}
.cfp-t-oscillating.cfp-t-filtered {
    background: rgba(210, 170, 60, 0.22);
    border-color: rgba(210, 170, 60, 0.6);
    color: #ffd98a;
}

/* 地点 */
.cfp-det-loc {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255,255,255,0.35);
    padding: 0 2px;
}

/* 相似结构网格 */
.cfp-det-similar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 4px;
}
.cfp-sim-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}
.cfp-sim-mini {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 0;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.15s;
}
.cfp-sim-item:hover .cfp-sim-mini { border-color: rgba(255,255,255,0.35); }
.cfp-sim-code {
    font-size: 8px;
    font-family: monospace;
    color: rgba(255,255,255,0.28);
}
.cfp-det-empty { font-size: 10px; color: rgba(255,255,255,0.2); font-family: monospace; }

/* 跳码高亮动画 */
#catalog-fullpage .totem-catalog-item.cfp-highlight .totem-catalog-mini {
    outline: 2px solid rgba(255,255,255,0.85);
    outline-offset: 1px;
    animation: cfp-flash 1.8s ease-out forwards;
}
@keyframes cfp-flash {
    0%   { outline-color: rgba(255,255,255,0.9); }
    100% { outline-color: rgba(255,255,255,0); }
}

/* ══════════════════════════════════════════════════════════════════════
   NODE MAP · 全球节点地图弹窗
══════════════════════════════════════════════════════════════════════ */
#node-map-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
}
#node-map-overlay.nm-open {
    opacity: 1;
}

#nm-panel {
    width: min(94vw, 1120px);
    height: min(86vh, 660px);
    background: #090b0e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7);
}
#node-map-overlay.nm-open #nm-panel {
    transform: scale(1) translateY(0);
}

/* 标题栏 */
#nm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
#nm-title {
    flex: 1;
    font-size: 11px;
    font-family: monospace;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
}
#nm-meta {
    font-size: 9.5px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.02em;
}
#nm-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    font-size: 13px;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
#nm-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* 主体布局 */
#nm-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* 地图区 */
#nm-mapwrap {
    flex: 1;
    position: relative;
    background: #050709;
    overflow: hidden;
    cursor: crosshair;
}
#nm-canvas {
    display: block;
    width: 100%;
    height: 100%;
}
#nm-legend {
    position: absolute;
    bottom: 10px;
    left: 12px;
    display: flex;
    gap: 14px;
    font-size: 9px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
#nm-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}
#nm-legend em {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    font-style: normal;
    opacity: 0.85;
}
#nm-watermark {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 8px;
    font-family: monospace;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    user-select: none;
}

/* 侧边栏 */
#nm-sidebar {
    width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    background: #0b0d11;
    overflow: hidden;
}

/* 节点列表 */
#nm-list-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#nm-list-label {
    font-size: 8.5px;
    font-family: monospace;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.2);
    padding: 8px 12px 4px;
    text-transform: uppercase;
    flex-shrink: 0;
}
#nm-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#nm-list::-webkit-scrollbar { width: 3px; }
#nm-list::-webkit-scrollbar-track { background: transparent; }
#nm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* 节点卡片 */
.nm-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.nm-card:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.13);
}
.nm-card.nm-sel {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}
.nm-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.nm-sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* 点亮状态脉冲 */
.nm-s-active .nm-sdot {
    animation: nm-sdot-pulse 2.2s ease-in-out infinite;
}
@keyframes nm-sdot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.45; transform: scale(1.35); }
}
/* 演化状态呼吸 */
.nm-s-evolving .nm-sdot {
    animation: nm-sdot-breathe 3s ease-in-out infinite;
}
@keyframes nm-sdot-breathe {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}
.nm-cid {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.04em;
    flex: 1;
}
.nm-slabel {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.3);
}
.nm-cyear {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.2);
}
.nm-ccity {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 1px;
}

/* 详情面板 */
#nm-detail {
    padding: 12px;
    min-height: 170px;
    max-height: 240px;
    overflow-y: auto;
    opacity: 0.65;
    transition: opacity 0.2s;
}
#nm-detail::-webkit-scrollbar { width: 3px; }
#nm-detail::-webkit-scrollbar-track { background: transparent; }
#nm-detail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.nm-dplaceholder {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.18);
    text-align: center;
    margin-top: 40px;
    line-height: 1.6;
}
.nm-did {
    font-size: 8.5px;
    font-family: monospace;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 3px;
}
.nm-dname {
    font-size: 13px;
    font-family: monospace;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 5px;
}
.nm-dloc {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 8px;
}
.nm-ddesc {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 8px;
    margin-bottom: 10px;
}
.nm-dsec {
    font-size: 8.5px;
    font-family: monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 5px;
}
.nm-dex {
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    padding-left: 4px;
}
.nm-dstatus {
    font-size: 11px;
    font-family: monospace;
    font-weight: bold;
    margin-top: 10px;
    letter-spacing: 0.04em;
}

/* ── 图层面板 ────────────────────────────────────────────────── */
.cfp-layer-panel {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    min-height: 0;
    padding: 6px 8px;
    border-left:  1px solid rgba(255,255,255,0.09);
    background: rgba(255,255,255,0.025);
}
.cfp-layer-head {
    font-size: 9px;
    font-family: monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding: 0 2px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.cfp-layer-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
}
.cfp-layer-item {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    transition: border-color 0.15s;
}
.cfp-layer-item.cfp-layer-editing {
    border-color: rgba(255,160,80,0.55);
    background: rgba(255,140,40,0.07);
}
.cfp-layer-item-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.cfp-layer-check {
    accent-color: rgba(180,220,255,0.9);
    cursor: pointer;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}
.cfp-layer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.85;
}
.cfp-layer-name {
    flex: 1;
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cfp-layer-count {
    font-size: 8px;
    font-family: monospace;
    color: rgba(255,255,255,0.50);
    white-space: nowrap;
}
.cfp-layer-actions {
    display: flex;
    gap: 3px;
    margin-top: 1px;
}
.cfp-layer-btn {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    font-size: 8px;
    font-family: monospace;
    padding: 2px 5px;
    cursor: pointer;
    white-space: nowrap;
}
.cfp-layer-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.cfp-layer-btn.cfp-layer-btn-del  { color: rgba(255,100,100,0.7); }
.cfp-layer-btn.cfp-layer-btn-del:hover { color: #ff7070; }
.cfp-layer-btn.cfp-layer-btn-edit-on {
    border-color: rgba(255,160,60,0.6);
    color: rgba(255,180,80,0.9);
    background: rgba(255,140,40,0.12);
}
.cfp-layer-sep {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 2px 0;
}
.cfp-layer-edit-hint {
    font-size: 7.5px;
    font-family: monospace;
    color: rgba(255,180,60,0.85);
    line-height: 1.4;
}
.cfp-layer-add-btn {
    border: 1px dashed rgba(255,255,255,0.18);
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 9px;
    font-family: monospace;
    padding: 5px;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s, border-color 0.15s;
}
.cfp-layer-add-btn:hover { color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.38); }
/* 自定义图层：给网格里对应图腾加彩色 outline */
.totem-catalog-item[data-layer-outline] {
    outline-offset: 1px;
    outline-width: 2px;
    outline-style: solid;
}
/* 图层筛选按钮 */
.cfp-layer-filt-btn {
    border-color: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.5) !important;
}
.cfp-layer-filt-btn.cfp-layer-filt-on {
    background: rgba(100,200,255,0.15) !important;
    border-color: rgba(100,200,255,0.55) !important;
    color: rgba(140,220,255,0.95) !important;
    box-shadow: 0 0 4px rgba(100,200,255,0.3);
}
/* 图层筛选状态栏 */
.cfp-layer-filter-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    background: rgba(100,180,255,0.08);
    border: 1px solid rgba(100,180,255,0.22);
    border-radius: 5px;
    flex-wrap: wrap;
}
.cfp-layer-filt-active {
    font-size: 8px;
    font-family: monospace;
    color: rgba(140,220,255,0.9);
    flex: 1;
    line-height: 1.3;
}
.cfp-layer-filt-clear-btn {
    border: 1px solid rgba(255,100,100,0.35);
    border-radius: 4px;
    background: rgba(255,60,60,0.08);
    color: rgba(255,130,130,0.85);
    font-size: 8px;
    font-family: monospace;
    padding: 1px 5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.cfp-layer-filt-clear-btn:hover { color: #ff8080; border-color: rgba(255,100,100,0.6); }

/* ══════════════════════════════════════════════════════════════
   风格搜索面板（style-chat.js）
   ══════════════════════════════════════════════════════════════ */

/* 右侧切换按钮（始终可见） */
.sc-tab-btn {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 8800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: rgba(20, 20, 20, 0.88);
    border: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s, right 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s;
    box-shadow: -3px 0 16px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sc-tab-btn:hover { background: rgba(40,40,40,0.96); }
.sc-tab-btn--open { right: 320px; }

.sc-tab-icon { font-size: 20px; line-height: 1; }
.sc-tab-text {
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.75);
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* 面板主体 */
.sc-panel {
    position: fixed;
    top: 0;
    right: -324px;
    width: 320px;
    height: 100vh;
    z-index: 8790;
    background: rgba(18, 18, 22, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    overflow: hidden;
}
.sc-panel--open { right: 0; }

/* 头部 */
.sc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.sc-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
}
.sc-close-btn {
    width: 28px; height: 28px;
    border: none;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.sc-close-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* 快捷风格区 */
.sc-preset-area {
    padding: 12px 14px 8px;
    flex-shrink: 0;
}
.sc-preset-label {
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.sc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sc-chip {
    padding: 4px 9px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.sc-chip:hover { background: rgba(255,255,255,0.13); color: #fff; }
.sc-chip--active {
    background: rgba(255,200,80,0.18);
    border-color: rgba(255,200,80,0.5);
    color: #ffd766;
}

/* 分隔线 */
.sc-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 0;
    flex-shrink: 0;
}

/* 历史记录区 */
.sc-history {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.sc-history::-webkit-scrollbar { width: 4px; }
.sc-history::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.sc-history-empty {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    text-align: center;
    line-height: 1.7;
    padding: 30px 0;
}

/* 历史卡片 */
.sc-history-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sc-hc-top {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sc-hc-emoji { font-size: 16px; flex-shrink: 0; }
.sc-hc-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.sc-hc-desc {
    font-size: 10.5px;
    color: rgba(255,255,255,0.4);
    margin-left: 2px;
}
.sc-hc-input {
    font-size: 10.5px;
    color: rgba(255,255,255,0.4);
    font-style: italic;
}
.sc-hc-params {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sc-param-tag {
    font-size: 9.5px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    padding: 1px 5px;
    color: rgba(255,255,255,0.5);
    font-family: monospace;
}
.sc-hc-reapply {
    font-size: 10.5px;
    padding: 3px 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.15s;
}
.sc-hc-reapply:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* 错误消息 */
.sc-msg-err {
    font-size: 11.5px;
    color: rgba(255,120,120,0.85);
    background: rgba(255,80,80,0.07);
    border: 1px solid rgba(255,80,80,0.15);
    border-radius: 6px;
    padding: 8px 10px;
    line-height: 1.5;
}
.sc-msg-user {
    font-size: 11.5px;
    color: rgba(255,255,255,0.5);
    align-self: flex-end;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 6px 10px;
}

/* 输入区 */
.sc-input-area {
    padding: 12px 14px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}
.sc-textarea {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 12.5px;
    padding: 8px 10px;
    resize: none;
    outline: none;
    line-height: 1.5;
    font-family: inherit;
    transition: border-color 0.15s;
}
.sc-textarea::placeholder { color: rgba(255,255,255,0.25); }
.sc-textarea:focus { border-color: rgba(255,200,80,0.4); }
.sc-send-btn {
    padding: 8px 14px;
    background: rgba(255,200,80,0.18);
    border: 1px solid rgba(255,200,80,0.35);
    border-radius: 8px;
    color: #ffd766;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.sc-send-btn:hover {
    background: rgba(255,200,80,0.28);
    border-color: rgba(255,200,80,0.6);
}

/* ══════════════════════════════════════════════════════════════
   深色区域Voronoi微扰动面板（dark-zone-panel.js）
   ══════════════════════════════════════════════════════════════ */

/* 触发按钮（固定在左侧） */
.dz-trigger-btn {
    position: fixed;
    left: 20px;
    bottom: 100px;
    z-index: 8700;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 8px 10px;
    background: rgba(20, 20, 28, 0.9);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dz-trigger-btn:hover { background: rgba(35,35,50,0.96); color: #fff; border-color: rgba(255,255,255,0.18); }
.dz-trigger-btn--active {
    background: rgba(80,60,140,0.85);
    border-color: rgba(150,120,255,0.4);
    color: #c8b4ff;
}
.dz-trigger-icon { font-size: 15px; opacity: 0.85; }
.dz-trigger-text { letter-spacing: 0.04em; }

/* 面板主体 */
.dz-panel {
    position: fixed;
    left: 80px;
    bottom: 80px;
    width: 300px;
    z-index: 8700;
    background: rgba(14, 14, 22, 0.97);
    border: 1px solid rgba(150,120,255,0.2);
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(150,120,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.97);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.dz-panel--visible {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

/* 头部 */
.dz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(150,120,255,0.12);
    user-select: none;
}
.dz-header-left { display: flex; align-items: center; gap: 10px; }
.dz-icon { font-size: 20px; color: #a080ff; }
.dz-title { font-size: 13.5px; font-weight: 700; color: #fff; }
.dz-subtitle { font-size: 10px; color: rgba(200,180,255,0.5); letter-spacing: 0.03em; margin-top: 1px; }
.dz-close {
    width: 26px; height: 26px; border: none;
    background: rgba(255,255,255,0.06); border-radius: 6px;
    color: rgba(255,255,255,0.5); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.dz-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* 内容区 */
.dz-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(150,120,255,0.2) transparent;
}
.dz-body::-webkit-scrollbar { width: 3px; }
.dz-body::-webkit-scrollbar-thumb { background: rgba(150,120,255,0.2); border-radius: 2px; }

/* 开关行 */
.dz-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(150,120,255,0.06);
    border: 1px solid rgba(150,120,255,0.12);
    border-radius: 8px;
}
.dz-toggle-label { font-size: 12.5px; color: rgba(255,255,255,0.8); font-weight: 600; }

/* Switch 样式 */
.dz-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.dz-switch input { opacity: 0; width: 0; height: 0; }
.dz-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.2s;
}
.dz-slider::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    left: 3px; top: 3px;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.dz-switch input:checked + .dz-slider { background: rgba(150,100,255,0.6); }
.dz-switch input:checked + .dz-slider::before {
    transform: translateX(18px);
    background: #fff;
}

/* 预览区 */
.dz-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dz-preview-label { font-size: 10px; color: rgba(200,180,255,0.5); letter-spacing: 0.04em; }
.dz-preview-canvas {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(150,120,255,0.15);
    background: rgba(255,255,255,0.03);
    image-rendering: pixelated;
    display: block;
}
.dz-preview-legend {
    display: flex;
    gap: 10px;
    font-size: 9.5px;
}
.dz-legend-item { display: flex; align-items: center; gap: 3px; color: rgba(255,255,255,0.45); }
.dz-legend-bright { color: rgba(255,255,220,0.7); }
.dz-legend-neutral { color: rgba(180,180,200,0.5); }
.dz-legend-dark    { color: rgba(100,110,160,0.7); }

/* 平衡条 */
.dz-balance-bar-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9.5px;
}
.dz-bal-label { color: rgba(200,180,255,0.45); white-space: nowrap; }
.dz-balance-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.dz-balance-fill {
    height: 100%;
    background: #4fc;
    border-radius: 3px;
    width: 0;
    transition: width 0.3s, background 0.3s;
}
.dz-bal-val { color: rgba(255,255,255,0.4); font-family: monospace; font-size: 9px; min-width: 32px; }

/* 参数行 */
.dz-row { display: flex; flex-direction: column; gap: 5px; }
.dz-row-header { display: flex; justify-content: space-between; align-items: baseline; }
.dz-row-label { font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 600; }
.dz-row-val { font-size: 11px; color: rgba(200,180,255,0.8); font-family: monospace; }
.dz-row-hint { font-size: 9.5px; color: rgba(255,255,255,0.25); line-height: 1.4; }

/* 滑块 */
.dz-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.dz-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #a080ff;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 6px rgba(160,128,255,0.5);
    cursor: pointer;
}
.dz-range::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #a080ff;
    border: 2px solid rgba(255,255,255,0.8);
    cursor: pointer;
}

/* 区域数量滑块：用青绿色区分 */
.dz-range--accent::-webkit-slider-thumb {
    background: #40e0c0;
    box-shadow: 0 0 6px rgba(64,224,192,0.5);
}
.dz-range--accent::-moz-range-thumb { background: #40e0c0; }

/* 形变速度滑块：橙色 */
.dz-range--shape::-webkit-slider-thumb {
    background: #ff9850;
    box-shadow: 0 0 6px rgba(255,152,80,0.5);
}
.dz-range--shape::-moz-range-thumb { background: #ff9850; }

/* 翻动感滑块：琥珀红 */
.dz-range--tumble::-webkit-slider-thumb {
    background: #e05080;
    box-shadow: 0 0 8px rgba(224,80,128,0.5);
}
.dz-range--tumble::-moz-range-thumb { background: #e05080; }

.dz-range--tension::-webkit-slider-thumb {
    background: #50c8e0;
    box-shadow: 0 0 8px rgba(80,200,224,0.5);
}
.dz-range--tension::-moz-range-thumb { background: #50c8e0; }

.dz-range--perturb::-webkit-slider-thumb {
    background: #a0d878;
    box-shadow: 0 0 8px rgba(160,216,120,0.5);
}
.dz-range--perturb::-moz-range-thumb { background: #a0d878; }

/* 形态模式切换按钮组 */
.dz-mode-toggle {
    display: flex;
    gap: 6px;
}
.dz-mode-btn {
    flex: 1;
    padding: 7px 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color: rgba(255,255,255,0.45);
    font-size: 11.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dz-mode-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.7); }
.dz-mode-btn--active {
    background: rgba(150,120,255,0.18);
    border-color: rgba(150,120,255,0.45);
    color: #c8b4ff;
    font-weight: 600;
}
.dz-mode-btn--active.dz-mode-btn[data-mode="animate"] {
    background: rgba(255,152,80,0.15);
    border-color: rgba(255,152,80,0.4);
    color: #ffb87a;
}
.dz-mode-icon { font-size: 13px; }

/* 重新生成按钮 */
.dz-regen-wrap { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.dz-regen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(150,120,255,0.12);
    border: 1px solid rgba(150,120,255,0.3);
    border-radius: 8px;
    color: #c8b4ff;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.dz-regen-btn:hover { background: rgba(150,120,255,0.22); border-color: rgba(150,120,255,0.5); }
.dz-regen-icon { font-size: 15px; display: inline-block; transition: transform 0.5s; }
.dz-regen-btn--spin .dz-regen-icon { transform: rotate(540deg); }
.dz-regen-hint { font-size: 9.5px; color: rgba(255,255,255,0.22); }

/* 说明区 */
.dz-info {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dz-info-title { font-size: 10px; color: rgba(200,180,255,0.55); font-weight: 700; letter-spacing: 0.04em; }
.dz-info-text { font-size: 10px; color: rgba(255,255,255,0.28); line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════════
   Display View — 16格展示页 v2（内嵌选项栏）
   ══════════════════════════════════════════════════════════════════ */

/* 顶部菜单 Display 按钮 */
.display-view-menu-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(255,255,255,0.75);
    font-size: 12px; letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.display-view-menu-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25); color: #fff;
}
.display-view-menu-btn svg { opacity: 0.7; flex-shrink: 0; }

/* 全屏遮罩 */
.dv-overlay {
    position: fixed; inset: 0; z-index: 9500;
    background: rgba(0,0,0,0.93);
    display: flex;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.dv-overlay--visible { opacity: 1; pointer-events: all; }

/* 主面板 */
.dv-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* 顶部栏 */
.dv-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.dv-title {
    font-size: 15px; font-weight: 700; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.85);
}
.dv-close-btn {
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%; color: rgba(255,255,255,0.45); font-size: 13px; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dv-close-btn:hover { background: rgba(255,70,70,0.18); color: #ff6060; }

/* 4×4 网格 */
.dv-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 20px 18px;
    overflow: auto;
}

/* 单格 */
.dv-slot { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* 缩略图包裹 */
.dv-slot-thumb-wrap {
    position: relative; aspect-ratio: 1/1; cursor: pointer;
    background: #0d0d0d;
    flex-shrink: 0;
}
.dv-slot-thumb-wrap:hover .dv-slot-hover { opacity: 1; }

/* 装饰环 */
.dv-slot-rings {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
}
.dv-ring {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%; box-sizing: border-box;
}
.dv-ring--1 { width: 94%; height: 94%; border: 1px solid rgba(255,255,255,0.06); }
.dv-ring--2 { width: 82%; height: 82%; border: 1px solid rgba(255,255,255,0.09); }
.dv-ring--3 { width: 70%; height: 70%; border: 1px solid rgba(255,255,255,0.05); }

/* 中心图案区 */
.dv-slot-thumb {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 62%; height: 62%; z-index: 3; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #111;
}
.dv-thumb-img, .dv-thumb-canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-thumb-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.12); font-size: 20px; background: #0e0e0e;
}

/* hover 覆盖 */
.dv-slot-hover {
    position: absolute; inset: 0; z-index: 10;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.16s ease;
    backdrop-filter: blur(2px);
}
.dv-enter-text {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

/* ── 内嵌选项栏 ── */
.dv-slot-bar {
    display: flex; flex-direction: column; gap: 3px;
    background: rgba(18,18,22,0.97);
    border: 1px solid rgba(255,255,255,0.07);
    border-top: none;
    padding: 5px 6px 6px;
}

/* 第一行：种子选择按钮 + 确认 + 导出 */
.dv-bar-row1 {
    display: flex; align-items: center; gap: 3px;
}

/* 第二行：图腾编号绑定 */
.dv-bar-row2 {
    display: flex; align-items: center; gap: 4px;
}
.dv-bar-totem-label {
    font-size: 9px; color: rgba(255,255,255,0.3);
    letter-spacing: 0.05em; flex-shrink: 0;
    white-space: nowrap;
}
.dv-bar-totem-input {
    flex: 1; min-width: 0;
    padding: 2px 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(220,200,120,0.9);
    font-family: 'Courier New', monospace;
    font-size: 11px; letter-spacing: 3px;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}
.dv-bar-totem-input:focus {
    outline: none;
    border-color: rgba(220,200,120,0.45);
    background: rgba(220,200,120,0.06);
}
.dv-bar-totem-input::placeholder { color: rgba(255,255,255,0.15); letter-spacing: 2px; }

.dv-bar-confirm {
    width: 22px; height: 22px;
    background: rgba(100,180,120,0.14);
    border: 1px solid rgba(100,200,130,0.25);
    border-radius: 4px;
    color: rgba(140,220,160,0.85); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}
.dv-bar-confirm:hover {
    background: rgba(100,180,120,0.28);
    border-color: rgba(100,200,130,0.5); color: #90e6a8;
}

/* 单格导出按钮 */
.dv-bar-export {
    width: 22px; height: 22px;
    background: rgba(80,140,200,0.12);
    border: 1px solid rgba(100,160,220,0.22);
    border-radius: 4px;
    color: rgba(120,180,240,0.75); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}
.dv-bar-export:hover {
    background: rgba(80,140,200,0.28);
    border-color: rgba(100,160,220,0.5); color: #78c0f8;
}

/* 写入代码按钮（主操作 — 生成 embedded-data.js） */
.dv-embed-btn {
    margin-left: auto; margin-right: 7px;
    padding: 5px 14px;
    background: rgba(100,200,160,0.12);
    border: 1px solid rgba(120,230,180,0.30);
    border-radius: 5px;
    color: rgba(160,240,200,0.9); font-size: 11px; cursor: pointer;
    letter-spacing: 0.05em; font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dv-embed-btn:hover {
    background: rgba(100,200,160,0.26);
    border-color: rgba(130,240,190,0.55); color: #90ffcc;
}

/* Import 标签（文件选择 → 模拟按钮外观） */
.dv-import-label {
    margin-right: 5px;
    padding: 4px 12px;
    background: rgba(200,120,80,0.10);
    border: 1px solid rgba(230,150,100,0.28);
    border-radius: 5px;
    color: rgba(240,170,130,0.85); font-size: 11px; cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    user-select: none;
    display: inline-flex; align-items: center;
}
.dv-import-label:hover {
    background: rgba(200,120,80,0.24);
    border-color: rgba(240,160,110,0.5); color: #ffb080;
}

/* Bundle 按钮（主要操作 — 生成 registry.json） */
.dv-bundle-btn {
    margin-left: auto; margin-right: 6px;
    padding: 4px 13px;
    background: rgba(90,200,120,0.13);
    border: 1px solid rgba(100,220,140,0.35);
    border-radius: 5px;
    color: rgba(140,230,160,0.9); font-size: 11px; cursor: pointer;
    letter-spacing: 0.04em; font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dv-bundle-btn:hover {
    background: rgba(90,200,120,0.28);
    border-color: rgba(100,230,150,0.6); color: #80ffaa;
}

/* 导出全部按钮（header 区域） */
.dv-export-all-btn {
    margin-right: 8px;
    padding: 4px 12px;
    background: rgba(80,140,200,0.12);
    border: 1px solid rgba(100,160,220,0.25);
    border-radius: 5px;
    color: rgba(120,180,240,0.8); font-size: 11px; cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dv-export-all-btn:hover {
    background: rgba(80,140,200,0.28);
    border-color: rgba(100,160,220,0.55); color: #a0d4ff;
}

/* 当前选择标签（点击展开下拉） */
.dv-bar-sel-btn {
    flex: 1; min-width: 0; text-align: left;
    padding: 3px 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: rgba(255,255,255,0.45); font-size: 10px; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.12s, border-color 0.12s;
}
.dv-bar-sel-btn:hover {
    background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
}

/* ── 共享下拉选择器 ── */
.dv-dropdown {
    position: absolute; z-index: 9600;
    background: rgba(16,16,20,0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.7);
    padding: 8px;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    min-width: 200px;
}
.dv-dropdown.dv-dd--open { opacity: 1; pointer-events: all; transform: translateY(0); }

.dv-dd-search {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 5px;
    padding: 5px 9px; color: rgba(255,255,255,0.85); font-size: 11px; outline: none;
    transition: border-color 0.15s;
}
.dv-dd-search:focus { border-color: rgba(255,255,255,0.3); }

.dv-dd-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 220px; overflow-y: auto;
}
.dv-dd-empty { font-size: 10px; color: rgba(255,255,255,0.22); padding: 6px 4px; }
.dv-dd-item {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 7px; border-radius: 5px; cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.dv-dd-item:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.09); }
.dv-dd-item--sel {
    background: rgba(200,180,100,0.12); border-color: rgba(200,180,100,0.28);
}
.dv-dd-thumb { width: 30px; height: 30px; object-fit: cover; border-radius: 3px; flex-shrink: 0; }
.dv-dd-thumb-ph { width: 30px; height: 30px; background: rgba(255,255,255,0.06); border-radius: 3px; flex-shrink: 0; }
.dv-dd-svg { flex-shrink: 0; display: flex; }
.dv-dd-name { font-size: 11px; color: rgba(255,255,255,0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   显示媒介面板 · Silicon Media Archetypes
   ════════════════════════════════════════════════════════════════ */

/* 触发按钮 */
.media-styles-btn.active svg { stroke: #74c0fc; }

/* 浮动面板主体 */
.media-styles-panel {
    position: fixed;
    top: 72px;
    right: 60px;
    z-index: 450;
    width: 348px;
    background: rgba(8, 10, 20, 0.96);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(80, 120, 200, 0.25);
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    font-family: 'SF Mono', 'JetBrains Mono', monospace;
}

/* 面板头部 */
.ms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.18);
    background: rgba(20, 30, 55, 0.5);
}
.ms-title-block { display: flex; flex-direction: column; gap: 1px; }
.ms-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(180, 210, 255, 0.92);
    letter-spacing: 0.04em;
}
.ms-en-title {
    font-size: 9px;
    color: rgba(100, 140, 220, 0.6);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.ms-close-btn {
    background: none;
    border: none;
    color: rgba(150, 170, 210, 0.5);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.ms-close-btn:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255,255,255,0.08); }

/* 4×4 风格网格 */
.ms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 10px;
}

/* 单个风格卡片 */
.ms-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-align: center;
    min-height: 72px;
}
.ms-card:hover {
    background: rgba(80, 140, 255, 0.12);
    border-color: rgba(80, 140, 255, 0.3);
    transform: translateY(-1px);
}
.ms-card--active {
    background: rgba(50, 110, 255, 0.22) !important;
    border-color: rgba(100, 160, 255, 0.55) !important;
    box-shadow: 0 0 10px rgba(80, 140, 255, 0.28) inset,
                0 0 0 1px rgba(120, 180, 255, 0.15);
}
.ms-card--active .ms-card-num { color: #74c0fc; }
.ms-card--active .ms-card-name { color: rgba(180, 220, 255, 0.95); }

.ms-card-icon {
    font-size: 10px;
    color: rgba(100, 150, 220, 0.55);
    letter-spacing: -1px;
    height: 13px;
    line-height: 1;
}
.ms-card-num {
    font-size: 9px;
    color: rgba(100, 140, 200, 0.5);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    line-height: 1;
}
.ms-card-name {
    font-size: 8.5px;
    color: rgba(200, 220, 255, 0.75);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 2px;
    letter-spacing: -0.02em;
}
.ms-card-sub {
    font-size: 8px;
    color: rgba(120, 160, 220, 0.45);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 2px;
}

/* 底部 */
.ms-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 10px;
    border-top: 1px solid rgba(80, 120, 200, 0.14);
    background: rgba(10, 15, 30, 0.4);
}
.ms-clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(160, 190, 230, 0.7);
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ms-clear-btn:hover { background: rgba(255,80,80,0.12); color: rgba(255,160,160,0.9); border-color: rgba(255,80,80,0.25); }
.ms-active-label {
    font-size: 9.5px;
    color: rgba(100, 160, 255, 0.65);
    letter-spacing: 0.05em;
    font-style: italic;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* HD 模式适配 */
body.hd-mode-active .media-styles-panel { right: 80px; }

/* ── 16格各异特殊选项行 ─────────────────────────────────────── */
.ms-special-row {
    padding: 0 8px 6px;
}
.ms-card--special {
    width: 100%;
    height: 38px;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(120, 160, 255, 0.18);
    background: rgba(30, 45, 90, 0.35);
}
.ms-card--special .ms-card-icon {
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(140, 190, 255, 0.65);
    flex-shrink: 0;
}
.ms-card--special .ms-card-num {
    font-size: 13px;
    color: rgba(100, 160, 255, 0.55);
    min-width: auto;
}
.ms-card--special .ms-card-name {
    font-size: 11px;
    color: rgba(200, 225, 255, 0.82);
    white-space: nowrap;
    font-weight: 500;
}
.ms-card--special .ms-card-sub {
    margin-left: auto;
    font-size: 9px;
    color: rgba(100, 150, 220, 0.45);
    white-space: nowrap;
}
.ms-card--special:hover {
    background: rgba(40, 70, 140, 0.45);
    border-color: rgba(100, 160, 255, 0.35);
}
.ms-card--special.ms-card--active {
    background: rgba(40, 80, 180, 0.55);
    border-color: rgba(100, 160, 255, 0.60);
    box-shadow: 0 0 10px rgba(80, 140, 255, 0.20);
}
.ms-card--special.ms-card--active .ms-card-name {
    color: rgba(160, 210, 255, 1.0);
}

/* ── 随机按钮 ───────────────────────────────────────────────── */
.ms-random-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(160, 200, 255, 0.75);
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ms-random-btn:hover {
    background: rgba(80, 140, 255, 0.15);
    color: rgba(180, 220, 255, 0.95);
    border-color: rgba(80, 140, 255, 0.30);
}
.ms-random-btn:active {
    transform: scale(0.96);
}

/* ── 面板双列布局（左：卡片，右：参数） ─────────────────────── */
.media-styles-panel {
    flex-direction: row !important;
    align-items: stretch;
    width: auto !important;        /* 覆盖固定宽度，随右栏展开 */
    max-width: 600px;
}
.ms-left-col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 348px;   /* 保持原始卡片列宽 */
}

/* ── 右侧参数面板 ──────────────────────────────────────────── */
.ms-param-col {
    display: none;
    flex-direction: column;
    width: 210px;
    border-left: 1px solid rgba(80, 120, 200, 0.18);
    background: rgba(8, 12, 28, 0.55);
    padding: 0;
    flex-shrink: 0;
}
.ms-param-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 7px;
    border-bottom: 1px solid rgba(80, 120, 200, 0.14);
    gap: 6px;
}
.ms-param-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ms-param-badge {
    font-size: 7.5px;
    color: rgba(80, 160, 255, 0.55);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}
.ms-param-title {
    font-size: 10px;
    color: rgba(150, 190, 255, 0.88);
    letter-spacing: 0.06em;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px;
    line-height: 1;
}
.ms-param-reset {
    background: none;
    border: 1px solid rgba(100, 150, 255, 0.18);
    color: rgba(120, 170, 255, 0.6);
    font-size: 14px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.ms-param-reset:hover {
    background: rgba(100, 150, 255, 0.12);
    color: rgba(160, 210, 255, 0.9);
}
.ms-param-sliders {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}
.ms-param-sliders::-webkit-scrollbar { width: 3px; }
.ms-param-sliders::-webkit-scrollbar-track { background: transparent; }
.ms-param-sliders::-webkit-scrollbar-thumb { background: rgba(80,120,200,0.3); border-radius: 2px; }

/* ── 单行参数 ────────────────────────────────────────────── */
.ms-param-row {
    display: grid;
    grid-template-columns: 58px 1fr 46px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    transition: background 0.1s;
}
.ms-param-row:hover { background: rgba(80, 120, 200, 0.07); }
.ms-param-label {
    font-size: 9px;
    color: rgba(140, 180, 230, 0.65);
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1;
}
.ms-param-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    border-radius: 1px;
    background: rgba(80, 120, 200, 0.30);
    outline: none;
    cursor: pointer;
    width: 100%;
}
.ms-param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(100, 170, 255, 0.92);
    box-shadow: 0 0 4px rgba(80, 150, 255, 0.45);
    cursor: pointer;
    transition: background 0.1s, box-shadow 0.1s;
}
.ms-param-slider::-webkit-slider-thumb:hover {
    background: rgba(140, 200, 255, 1.0);
    box-shadow: 0 0 8px rgba(100, 180, 255, 0.65);
}
.ms-param-slider::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(to right, rgba(80,150,255,0.55) 0%, rgba(80,150,255,0.55) var(--pct,50%), rgba(80,120,200,0.22) var(--pct,50%));
}
.ms-param-value {
    font-size: 9px;
    color: rgba(100, 160, 255, 0.85);
    text-align: right;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* 百分比（物理量）值用更亮的白蓝色强调 */
.ms-param-row[data-pct="true"] .ms-param-value {
    color: rgba(180, 220, 255, 0.95);
    font-weight: 600;
}

/* HD 模式适配 */
body.hd-mode-active .ms-param-col { width: 220px; }

/* ── 变幻控制行 ───────────────────────────────────────────── */
.ms-morph-row {
    display: none;          /* 默认隐藏，per-cell 时由 JS 控制 */
    align-items: center;
    gap: 7px;
    padding: 5px 10px 7px;
    border-top: 1px solid rgba(80, 120, 200, 0.12);
    background: rgba(8, 12, 30, 0.45);
    flex-wrap: wrap;
}
.ms-morph-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(50, 80, 160, 0.20);
    border: 1px solid rgba(80, 130, 220, 0.25);
    color: rgba(140, 190, 255, 0.75);
    font-family: inherit;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    padding: 4px 9px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.ms-morph-btn:hover {
    background: rgba(70, 110, 200, 0.30);
    color: rgba(180, 220, 255, 0.95);
    border-color: rgba(100, 160, 255, 0.45);
}
.ms-morph-btn--active {
    background: rgba(60, 120, 255, 0.28) !important;
    border-color: rgba(80, 160, 255, 0.55) !important;
    color: rgba(140, 210, 255, 1.0) !important;
    box-shadow: 0 0 8px rgba(60, 130, 255, 0.25);
}
/* 激活状态下的 SVG 时钟图标 —— 加旋转动画 */
.ms-morph-btn--active svg {
    animation: ms-spin 3s linear infinite;
}
@keyframes ms-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── 速度选择 pills ────────────────────────────────────────── */
.ms-speed-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ms-speed-pill {
    background: rgba(30, 50, 100, 0.35);
    border: 1px solid rgba(60, 100, 180, 0.22);
    color: rgba(100, 150, 220, 0.65);
    font-family: inherit;
    font-size: 8.5px;
    letter-spacing: 0.05em;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.ms-speed-pill:hover {
    background: rgba(50, 80, 160, 0.40);
    color: rgba(160, 200, 255, 0.90);
    border-color: rgba(80, 130, 220, 0.38);
}
.ms-speed-pill--active {
    background: rgba(40, 90, 200, 0.38) !important;
    border-color: rgba(80, 150, 255, 0.48) !important;
    color: rgba(150, 210, 255, 0.95) !important;
}