/* ========== CSS Variables ========== */
:root {
    --icon-color: #333333;
    --sw: 2px;
}

/* ========== 主题平滑过渡：修复白天/黑夜切换迟钝 ========== */
html, body {
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ico-page,
.ico-sidebar,
.ico-main,
.ico-panel,
.side-footer,
.panel-footer,
.main-sticky-head,
.ico-search-box,
.ico-footer-bar,
.commenti-card,
.color-bar,
.color-palette-wrap,
.panel-title,
.side-title,
.toast,
.browse-divider,
.panel-divider,
.sw-divider,
.sw-track-bg,
.sw-track-fill,
.empty-state,
.ico-skeleton .sk-cell,
.side-scroll,
.panel-scroll {
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 文本类元素补充过渡 */
.side-item,
.browse-item,
.main-title,
.panel-empty,
.commenti-title,
.commenti-desc,
.commenti-ad,
.sw-title,
.sw-min,
.sw-max,
.sw-cur,
.sw-reset,
.browse-label,
.browse-meta {
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 确保滑块相关元素也有平滑过渡 */
.sw-thumb,
.palette-cursor,
.color-cursor {
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.05s linear, top 0.05s linear, transform 0.05s linear;
}

/* 预设色块在主题切换时边框过渡 */
.preset-colors .color-dot {
    transition: transform 0.12s ease,
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ========== 页面骨架：左右固定，中间滚动 ========== */
.ico-page {
    display: flex;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* 左侧边栏：固定 */
.ico-sidebar {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ========== 左侧：Browse 固定，图标聚合独立滚动 ========== */
.side-scroll {
    flex: 1;
    overflow: hidden;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
}
/* Browse 固定 + 背景遮挡 */
.side-scroll > .browse-group {
    flex-shrink: 0;
    background: #fff;
}
html.dark .side-scroll > .browse-group {
    background: #111;
}
/* 图标聚合独立滚动 */
.side-scroll > .side-group:not(.browse-group) {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.side-scroll > .side-group:not(.browse-group)::-webkit-scrollbar { width: 4px; }
.side-scroll > .side-group:not(.browse-group)::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 2px; }
html.dark .side-scroll > .side-group:not(.browse-group)::-webkit-scrollbar-thumb { background: #333; }

.side-title {
    font-size: 12px;
    font-weight: 500;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 10px;
    padding-left: 10px;
}
.side-group { margin-bottom: 24px; }
.side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: all .12s;
    font-family: inherit;
}

.side-item a {
    color: inherit !important;
    text-decoration: none;
}

.side-item:hover { background: #f5f5f5; color: #111; }
.side-item.active { background: #f5f5f5; color: #111; font-weight: 600; }
.side-item .si-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: inherit; }
.side-item .si-icon svg { width: 100%; height: 100%; }
.side-item .si-count {
    margin-left: auto;
    font-size: 13px;
    color: #bbb;
    font-weight: 400;
}
.side-item.active .si-count { color: #999; }

/* 底部固定栏：相关入口 */
.side-footer {
    flex-shrink: 0;
    padding: 16px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}
.side-footer .side-title {
    margin-bottom: 8px;
}
.side-footer .side-item {
    margin-bottom: 0;
}

/* ---------- Browse 区域 ---------- */
.browse-group { margin-bottom: 24px; }
.browse-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    text-decoration: none;
    cursor: pointer;
    transition: all .12s;
    font-family: inherit;
}
.browse-item:hover { background: #f5f5f5; color: #111; }
.browse-item.active { background: #f5f5f5; color: #111; font-weight: 600; }
.browse-icon {
    width: 19px; height: 19px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: inherit;
}
.browse-icon svg { width: 100%; height: 100%; display: block; }
/* Commenti 品牌图标 */
.browse-icon.commenti-logo-icon {
    width: 18px; height: 18px;
    background: #2e2e2e; border-radius: 50%;
    color: #fff; font-size: 10px; font-weight: 700;
    font-family: system-ui, -apple-system, sans-serif; line-height: 1;
}
.browse-label { flex: 1; min-width: 0; }
.browse-meta {
    margin-left: auto; font-size: 13px; color: #bbb; font-weight: 400;
    display: flex; align-items: center; justify-content: center;
}
.browse-meta svg { width: 14px; height: 14px; display: block; }
/* 渐变分隔线 */
.browse-divider {
    height: 1px; margin: 2px 10px; border: none;
    background: linear-gradient(90deg, transparent 0%, #e8e8e8 20%, #e8e8e8 80%, transparent 100%);
}

/* 中间主区域：滚动 */
.ico-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ico-main::-webkit-scrollbar {
    display: none;
}

/* ========== 吸顶栏：左标题，右搜索框 ========== */
.main-sticky-head {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto 16px;
    padding: 14px 32px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
}
.main-head-left {
    flex-shrink: 0;
}
.main-title {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.6px;
}
.main-head-right {
    flex-shrink: 0;
    width: 240px; /* 搜索框固定宽度，靠右 */
}

/* ========== 搜索框：白色底框 ========== */
.ico-search-box {
    width: 100%;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}
.ico-search-box input {
    flex: 1;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    font-size: 13px;
    background: transparent;
    font-family: inherit;
    transition: all .2s;
    color: #333;
    box-sizing: border-box;
    line-height: 1.4;
}
.ico-search-box input:focus {
    outline: none;
    background: transparent;
}
.ico-search-box input::placeholder { color: #bbb; }
.ico-search-box .ico-search-icon {
    width: 14px;
    height: 14px;
    color: #bbb;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ico-search-box .ico-search-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 内容区 */
.main-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 32px 60px;
    box-sizing: border-box;
}

/* 图标网格 */
.ico-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
}
.ico-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all .12s;
}
.ico-cell:hover {
    background: #f8f8f8;
    border-color: #eee;
}
.ico-cell.active {
    background: #111;
    border-color: #111;
}
.ico-cell .ic-svg {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
}
.ico-cell.active .ic-svg { color: #fff !important; }
.ico-cell .ic-svg svg {
    width: 100%;
    height: 100%;
    color: inherit;
}

/* 核心：用 CSS 变量控制图标粗细，优先级最高 */
.ico-cell svg,
.ico-cell svg * { stroke-width: var(--sw, 2) !important; }
/* 性能优化：stroke 统一由 CSS 变量控制 */
.ico-cell svg * {
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* 骨架屏 */
.ico-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
}
.ico-skeleton .sk-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    background: #f5f5f5;
    animation: skPulse 1.4s ease-in-out infinite;
}
@keyframes skPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* 右侧功能面板：固定 */
.ico-panel {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid #f0f0f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
}
.panel-scroll::-webkit-scrollbar { width: 4px; }
.panel-scroll::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 2px; }

.panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin: 0 0 14px;
}

/* 颜色渐变条 */
.color-bar-wrap {
    margin-bottom: 20px;
}
.color-bar {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(to right,
        #111 0%, #888 15%, #fff 30%,
        #ef4444 40%, #f97316 48%, #eab308 55%,
        #22c55e 62%, #14b8a6 70%, #06b6d4 78%,
        #3b82f6 85%, #6366f1 90%, #a855f7 95%, #ec4899 100%
    );
    cursor: crosshair;
    position: relative;
    border: 1px solid #eee;
}
/* 玻璃态光标（与 palette-cursor / sw-thumb 统一） */
.color-cursor {
    position: absolute;
    top: -4px;
    width: 12px;
    height: 44px;
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    border: 1.5px solid rgba(255,255,255,0.6);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        0 2px 6px rgba(0,0,0,0.25);
    pointer-events: none;
    transform: translateX(-50%);
    left: 0%;
    transition: left 0.1s;
}

/* 调色板 */
.color-palette-wrap {
    position: relative;
    width: 100%;
    height: 140px;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #eee;
    cursor: crosshair;
}
.color-palette-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.palette-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        0 2px 6px rgba(0,0,0,0.25);
    pointer-events: none;
    transform: translate(-50%, -50%);
    left: 100%;
    top: 0%;
    transition: left 0.05s, top 0.05s;
    z-index: 2;
}

html.dark .color-palette-wrap {
    border-color: #333;
}

/* 预设色块 */
.preset-colors {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.preset-colors .color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all .12s;
    position: relative;
    flex-shrink: 0;
}
.preset-colors .color-dot:hover { transform: scale(1.15); }
.preset-colors .color-dot.active {
    border-color: #111;
    box-shadow: 0 0 0 2px #fff inset;
}

/* 导出 */
.export-group { display: flex; flex-direction: column; gap: 8px; }
.exp-row { display: flex; gap: 8px; }
.exp-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    background: #fff;
    color: #555;
    transition: all .12s;
    font-family: inherit;
}
.exp-btn:hover { border-color: #ccc; color: #111; background: #fafafa; }
.exp-btn.primary {
    background: #888;
    color: #fff;
    border-color: #888;
}
.exp-btn.primary:hover { background: #666; border-color: #666; }
.exp-btn .exp-icon {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
}
.exp-btn .exp-icon svg { width: 100%; height: 100%; }

.panel-empty {
    text-align: center;
    padding: 32px 0;
    color: #bbb;
    font-size: 13px;
    line-height: 1.6;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    z-index: 9999;
    animation: toastIn 0.3s ease;
    pointer-events: none;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* 空状态 */
.empty-state {
    text-align: center;
    padding: 80px 0;
    color: #999;
    grid-column: 1 / -1;
}
.empty-state .big { font-size: 40px; opacity: 0.25; margin-bottom: 12px; }

/* 底部固定条 */
.ico-footer-bar {
    position: fixed;
    bottom: 0;
    left: 240px;
    right: 280px;
    height: 44px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #666;
    gap: 6px;
    z-index: 100;
}
.ico-footer-bar a {
    color: #111;
    font-weight: 600;
    text-decoration: none;
}
.ico-footer-bar a:hover { text-decoration: underline; }

/* 彻底切断全局及分区的 overscroll 回弹 */
html, body,
.ico-page,
.ico-main,
.side-scroll,
.panel-scroll {
    overscroll-behavior: none;
}

/* ========== 黑夜模式 ========== */
html.dark {
    --icon-color: #dddddd;
}
html.dark .ico-sidebar { background: #111; border-color: #222; }
html.dark .side-title { color: #555 !important; }
html.dark .side-item { color: #aaa !important; }
html.dark .side-item:hover { background: #1a1a1a !important; color: #fff !important; }
html.dark .side-item.active { background: #1a1a1a !important; color: #fff !important; }
html.dark .side-item .si-count { color: #555 !important; }

html.dark .side-footer { background: #111; border-color: #222; }

html.dark .browse-item { color: #aaa !important; }
html.dark .browse-item:hover { background: #1a1a1a !important; color: #fff !important; }
html.dark .browse-item.active { background: #1a1a1a !important; color: #fff !important; }
html.dark .browse-meta { color: #555 !important; }
html.dark .browse-divider {
    background: linear-gradient(90deg, transparent 0%, #2a2a2a 20%, #2a2a2a 80%, transparent 100%) !important;
}

html.dark .ico-main { background: #111; }
html.dark .main-sticky-head { background: rgba(17,17,17,0.92) !important; border-bottom-color: #222 !important; }
html.dark .main-title { color: #f0f0f0 !important; }

html.dark .ico-cell:hover { background: #1a1a1a !important; border-color: #333 !important; }
html.dark .ico-cell.active { background: #fff !important; border-color: #fff !important; }
html.dark .ico-cell .ic-svg { color: var(--icon-color) !important; }
html.dark .ico-cell.active .ic-svg { color: #111 !important; }
html.dark .sk-cell { background: #1a1a1a !important; }
html.dark .empty-state { color: #555 !important; }

html.dark .ico-panel { background: #111; border-color: #222; }
html.dark .panel-title { color: #f0f0f0 !important; }

/* 黑夜模式：搜索框 */
html.dark .ico-search-box {
    background: #1a1a1a;
    border-color: #333;
}
html.dark .ico-search-box input {
    background: transparent !important;
    border: none !important;
    color: #f0f0f0 !important;
}
html.dark .ico-search-box input:focus {
    background: transparent !important;
}
html.dark .ico-search-box input::placeholder { color: #555 !important; }
html.dark .ico-search-box .ico-search-icon { color: #555 !important; }

html.dark .color-bar { border-color: #333 !important; }
html.dark .preset-colors .color-dot.active { border-color: #fff !important; box-shadow: 0 0 0 2px #111 inset !important; }

html.dark .exp-btn {
    background: #1a1a1a !important;
    border-color: #333 !important;
    color: #aaa !important;
}
html.dark .exp-btn:hover { border-color: #555 !important; color: #fff !important; background: #222 !important; }
html.dark .exp-btn.primary {
    background: #555 !important;
    border-color: #555 !important;
    color: #fff !important;
}
html.dark .exp-btn.primary:hover { background: #777 !important; border-color: #777 !important; }
html.dark .panel-empty { color: #444 !important; }

html.dark .ico-footer-bar { background: #111; border-color: #222; color: #888; }
html.dark .ico-footer-bar a { color: #f0f0f0; }
html.dark .toast { background: #fff !important; color: #111 !important; }

/* 右侧底部固定导出面板 */
.panel-footer {
    flex-shrink: 0;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

/* 黑夜模式 */
html.dark .panel-footer {
    background: #111;
    border-color: #222;
}

/* ========== Stroke Width 调节器（独立） ========== */
.stroke-width-section {
    padding-top: 4px;
}
.sw-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 20px;
    border: none;
    background: linear-gradient(90deg, transparent 0%, #e0e0e0 20%, #e0e0e0 80%, transparent 100%);
}
.sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.sw-title {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.2px;
}
.sw-reset {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: color .12s;
}
.sw-reset:hover { color: #111; }
.sw-reset svg { width: 14px; height: 14px; }

/* 滑块区域 */
.sw-slider-box {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}
.sw-track-bg {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    background: #f0f0f0;
    pointer-events: none;
}
.sw-track-fill {
    position: absolute;
    left: 0;
    top: 50%; transform: translateY(-50%);
    height: 4px;
    border-radius: 2px;
    background: #111;
    width: 60%;
    pointer-events: none;
}
/* 玻璃态滑块按钮（与 palette-cursor / color-cursor 统一） */
.sw-thumb {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    border: 1.5px solid rgba(255,255,255,0.6);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        0 2px 6px rgba(0,0,0,0.25);
    pointer-events: none;
    transition: left 0.05s linear;
}
.sw-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

/* 底部数值标签 */
.sw-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    position: relative;
    height: 18px;
}
.sw-min, .sw-max {
    font-size: 11px;
    color: #bbb;
    font-weight: 500;
}
.sw-cur {
    position: absolute;
    left: 60%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #111;
    font-weight: 600;
    transition: left 0.05s linear;
}

/* ========== 响应式 ========== */

/* ---------- 手机竖屏 (< 768px) ---------- */
@media (max-width: 767px) {
    .ico-page { flex-direction: column; height: auto; overflow: visible; }
    .ico-sidebar { 
        width: 100%; 
        border-right: none; 
        border-bottom: 1px solid #f0f0f0;
        flex-direction: row;
        height: auto;
    }
    .side-scroll { 
        display: flex; 
        gap: 8px; 
        overflow-x: auto; 
        padding: 12px;
        flex-direction: row;
        -webkit-overflow-scrolling: touch;
    }
    .side-group { 
        display: flex; 
        gap: 6px; 
        margin: 0; 
        flex-shrink: 0; 
    }
    .side-title { display: none; }
    .side-item { 
        white-space: nowrap; 
        width: auto; 
        padding: 6px 12px; 
    }
    .side-item .si-count { display: none; }
    .side-footer { display: none; }

    .browse-group { display: flex; gap: 6px; margin: 0; flex-shrink: 0; margin-bottom: 0; }
    .browse-item { white-space: nowrap; width: auto; padding: 6px 12px; }
    .browse-divider { display: none; }
    .browse-meta { margin-left: 6px; }

    .ico-main { overflow: visible; min-height: 60vh; }
    .main-sticky-head { padding: 12px 16px; }
    .main-head-right { width: 100%; }
    .main-inner { padding: 0 16px 60px; }

    .ico-panel { 
        width: 100%; 
        border-left: none; 
        border-top: 1px solid #f0f0f0;
        position: relative;
    }
    .panel-scroll { padding: 16px; }
    .panel-footer { padding: 16px; }

    .ico-footer-bar { left: 0; right: 0; }
    .ico-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
    .ico-cell .ic-svg { width: 28px; height: 28px; }
}

/* ---------- 手机横屏 / 小平板 (768px - 991px) ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    .ico-page { height: calc(100vh - 60px); }
    .ico-sidebar { 
        width: 200px; 
        border-right: 1px solid #f0f0f0;
    }
    .side-scroll { padding: 16px 12px; }
    .side-item { padding: 6px 8px; font-size: 13px; }
    .side-item .si-icon { width: 16px; height: 16px; }

    .ico-panel { display: none; }
    .ico-main { overflow-y: auto; }
    .main-inner { padding: 0 24px 60px; }
    .ico-footer-bar { left: 200px; right: 0; }
    .ico-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ---------- iPad 横屏 / 小桌面 (992px - 1199px) ---------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .ico-sidebar { width: 220px; }
    .ico-panel { width: 240px; }
    .side-scroll { padding: 16px 12px; }
    .panel-scroll { padding: 20px 16px; }
    .main-inner { padding: 0 24px 60px; }
    .ico-footer-bar { left: 220px; right: 240px; }
    .main-sticky-head { padding: 12px 24px; }
}

/* ---------- 桌面大屏 (>= 1200px) ---------- */
@media (min-width: 1200px) {
    /* 默认样式已覆盖 */
}

/* ---------- 横屏高度适配（手机横屏、iPad 横屏） ---------- */
@media (orientation: landscape) and (max-height: 600px) {
    .ico-page { height: calc(100vh - 56px); }
    .side-scroll { padding: 8px 12px; }
    .side-item { padding: 5px 8px; }
    .panel-scroll { padding: 12px 16px; }
    .main-sticky-head { padding: 8px 16px; }
}

/* ---------- iPad Pro 横屏 (1024px - 1366px) ---------- */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .ico-sidebar { width: 230px; }
    .ico-panel { width: 260px; }
    .ico-footer-bar { left: 230px; right: 260px; }
}

.main-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.main-icon {
    width: 20px;
    height: 20px;
    color: #111;
    flex-shrink: 0;
}
/* 黑夜模式 */
html.dark .main-icon { color: #f0f0f0; }


.main-sticky-head {
    /* 在原有样式基础上追加 */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-sticky-head.hidden {
    transform: translateY(-100%);
}
/* ---------- Commenti 推广卡片 ---------- */
.commenti-card {
    position: relative;
    background: #f4f4f5;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid #e8e8e8;
}
.commenti-ad {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    color: #c0c0c0;
    font-weight: 500;
    letter-spacing: 0.3px;
    user-select: none;
}
.commenti-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.commenti-logo {
    width: 28px;
    height: 28px;
    background: #ff6600;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.commenti-logo svg {
    width: 16px;
    height: 16px;
}
.commenti-title {
    font-size: 15px;
    font-weight: 600;
    color: #171717;
    letter-spacing: -0.2px;
    line-height: 1.2;
}
.commenti-arrow {
    width: 14px;
    height: 14px;
    color: #999;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: 2px;
}
.commenti-card:hover .commenti-arrow {
    opacity: 1;
    transform: translateX(0);
}
.commenti-desc {
    font-size: 13px;
    color: #767676;
    line-height: 1.45;
}

/* 黑夜模式 */
html.dark .commenti-card {
    background: #1a1a1a;
    border-color: #2a2a2a;
}
html.dark .commenti-title {
    color: #f0f0f0;
}
html.dark .commenti-desc {
    color: #888;
}
html.dark .commenti-ad {
    color: #555;
}
html.dark .commenti-arrow {
    color: #666;
}

/* ---------- 向下滚动提示 ---------- */
.scroll-hint {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e8e8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 20;
}
.scroll-hint.visible {
    opacity: 1;
    pointer-events: auto;
}
.scroll-hint:hover {
    transform: translateX(-50%) translateY(2px);
    background: #fff;
    border-color: #ddd;
}
.scroll-hint svg {
    width: 16px;
    height: 16px;
    color: #999;
}

/* 黑夜模式 */
html.dark .scroll-hint {
    background: rgba(26,26,26,0.95);
    border-color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark .scroll-hint:hover {
    background: #1a1a1a;
    border-color: #444;
}
html.dark .scroll-hint svg {
    color: #666;
}

/* ---------- 右侧面板分割线 ---------- */
.panel-divider {
    width: 100%;
    height: 1px;
    margin: 4px 0 20px;
    border: none;
    background: linear-gradient(90deg,
        transparent 0%,
        #e0e0e0 20%,
        #e0e0e0 80%,
        transparent 100%
    );
}
html.dark .panel-divider {
    background: linear-gradient(90deg,
        transparent 0%,
        #2a2a2a 20%,
        #2a2a2a 80%,
        transparent 100%
    );
}

/* 黑夜模式：三个玻璃光标统一 */
html.dark .palette-cursor,
html.dark .sw-thumb,
html.dark .color-cursor {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.2),
        0 2px 6px rgba(0,0,0,0.4);
}

/* 黑夜模式：Stroke Width */
html.dark .sw-divider {
    background: linear-gradient(90deg, transparent 0%, #2a2a2a 20%, #2a2a2a 80%, transparent 100%);
}
html.dark .sw-title { color: #f0f0f0; }
html.dark .sw-reset { color: #888; }
html.dark .sw-reset:hover { color: #f0f0f0; }
html.dark .sw-track-bg { background: #2a2a2a; }
html.dark .sw-track-fill { background: #f0f0f0; }
html.dark .sw-min, html.dark .sw-max { color: #555; }
html.dark .sw-cur { color: #f0f0f0; }