@import url('HYWenHei-85W.css');

/* 全局禁用文字选中（含移动端），输入类控件稍后恢复 */
html, body, .container, .controls, .modal-content, .category-container, .image-gallery,
.category-btn, .gallery-img, button, label, canvas {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* 标准 */
    -webkit-touch-callout: none; /* iOS 长按菜单 */
}
/* 恢复输入类控件的文本选中与长按菜单 */
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

body {
    font-family: 'HYWenHei-85W', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(235, 228, 215);
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

/* 全局滚动条配色（WebKit/Chromium） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(235, 228, 214); }
::-webkit-scrollbar-thumb {
    background-color: rgb(209, 191, 162);
    border-radius: 8px;
    border: 2px solid rgb(235, 228, 214);
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(196, 177, 147); }

/* 全局滚动条配色（Firefox） */
html { scrollbar-color: rgb(209, 191, 162) rgb(235, 228, 214); scrollbar-width: thin; }

h1 {
    color: #333;
    text-align: center;
}

.container {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    width: 100%;
    max-width: 1200px;
    align-items: flex-start;
    box-sizing: border-box;
}

canvas {
    border: 2px solid #ddd;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 100%;
    max-height: 90vh; 
    height: auto;
    touch-action: none; 
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #fdfdfd;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    min-width: 310px; 
}

.controls label {
    font-weight: bold;
    color: #555;
    margin-top: 5px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.control-row > label { margin: 0; white-space: nowrap; }
.control-row > input[type="number"] { width: 80px; padding: 8px; }

/* 主题化数字输入框（含 image-size-input） */
input[type="number"] {
    font-family: inherit;
    font-size: 16px;
    color: #2c2f36;
    background: #fff;
    border: 1px solid rgb(209,191,162);
    border-radius: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
input[type="number"]:hover { background: #faf7f0; }
input[type="number"]:focus-visible {
    outline: 2px solid rgba(209,191,162,0.9);
    outline-offset: 2px;
}
input[type="number"]:disabled { opacity: .6; cursor: not-allowed; }
input[type="number"]:out-of-range,
input[type="number"]:invalid {
    border-color: #d18b8b;
    box-shadow: 0 0 0 3px rgba(209, 139, 139, 0.2);
}

/* WebKit 数字输入微调按钮适配 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    opacity: .75;
}
input[type="number"]:hover::-webkit-outer-spin-button,
input[type="number"]:hover::-webkit-inner-spin-button {
    opacity: 1;
}

/* 在 <=1136px 下提升触控可用性 */
@media (max-width: 1136px) {
    .control-row > input[type="number"] { width: 96px; padding: 10px; }
    input[type="number"] { font-size: 18px; }
}

/* 独立的滑块行占满宽度并与上方留距 */
#image-size-slider { width: 100%; margin-top: 6px; }

textarea, input[type="text"] {
    width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

input[type="text"] {
    height: auto;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent; /* 让自定义轨道可见 */
    height: 28px; /* 提升可点击区域 */
    margin: 0;
    padding: 0;
}

/* WebKit (Chrome/Edge/Safari) 轨道与拇指 */
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: rgb(235, 228, 214);
    border: 1px solid rgb(209, 191, 162);
    border-radius: 999px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    margin-top: -6px; /* 使拇指垂直居中到 8px 轨道上： (18-8)/2=5 => 取-6微调阴影 */
    background: rgb(209, 191, 162);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
    background: rgb(196, 177, 147);
}
input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(0.98);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(209, 191, 162, 0.35);
}

/* Firefox 轨道、进度与拇指 */
input[type="range"]::-moz-range-track {
    height: 8px;
    background: rgb(235, 228, 214);
    border: 1px solid rgb(209, 191, 162);
    border-radius: 999px;
}
/* 左侧已滑过的进度条颜色稍深一点 */
input[type="range"]::-moz-range-progress {
    height: 8px;
    background: #e7dfcd;
    border: 1px solid rgb(209, 191, 162);
    border-radius: 999px 0 0 999px;
}
input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    background: rgb(209, 191, 162);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease;
}
input[type="range"]:hover::-moz-range-thumb { background: rgb(196, 177, 147); }
input[type="range"]:active::-moz-range-thumb { transform: scale(0.98); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(209,191,162,.35); }

/* 旧版 IE/Edge (可选) */
input[type="range"]::-ms-track {
    height: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent; /* 隐藏默认轨道 */
}
input[type="range"]::-ms-fill-lower {
    background: #e7dfcd;
    border: 1px solid rgb(209, 191, 162);
    border-radius: 999px 0 0 999px;
}
input[type="range"]::-ms-fill-upper {
    background: rgb(235, 228, 214);
    border: 1px solid rgb(209, 191, 162);
    border-radius: 0 999px 999px 0;
}
input[type="range"]::-ms-thumb {
    width: 18px; height: 18px;
    background: rgb(209, 191, 162);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* 禁用态 */
input[type="range"]:disabled { opacity: .6; cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb,
input[type="range"]:disabled::-moz-range-thumb,
input[type="range"]:disabled::-ms-thumb { cursor: not-allowed; }

/* 在 <=1136px 提升触控友好度：更大的拇指 */
@media (max-width: 1136px) {
    input[type="range"] { height: 34px; }
    input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; }
    input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
    input[type="range"]::-ms-thumb { width: 22px; height: 22px; }
}

select, button {
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
    font-size: 16px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
    background: rgb(235,228,214);
    border: 1px solid rgb(209,191,162);
    color: #2c2f36;
}

button:hover, select:hover { background: #e7dfcd; }
button:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
button:focus-visible, select:focus-visible { outline: 2px solid rgba(209,191,162,0.9); outline-offset: 2px; }

input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
}


/* Gallery Modal - redesigned */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    overscroll-behavior: contain; /* prevent scroll chaining */
}

.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-overlay.closing { opacity: 0; pointer-events: none; }

.modal-content {
    /* design tokens */
    --c-bg: rgb(235, 228, 214);
    --c-elev: #f6f8ff;
    --c-border: rgb(209, 191, 162);
    --c-text: #2c2f36;
    --c-subtext: #58627a;
    --c-primary: #5b82ff;
    --c-primary-weak: #eaf0ff;
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 12px;
    --space: 12px;
    background-color: var(--c-bg);
    padding: 24px; 
    border-radius: 14px; 
    width: 86%;
    max-width: 980px;
    height: 82vh;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15); 
    backdrop-filter: blur(15px); 
    position: relative;
    display: flex;
    flex-direction: column;
    border: 8px solid var(--c-border);
    overflow: hidden; 
    transform: scale(0.96) translateY(4px);
    opacity: 0;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

.modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }
.modal-overlay.closing .modal-content { transform: scale(0.96) translateY(4px); opacity: 0; }

.modal-close {
    position: absolute;
    top: 10px;
    right: 16px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: var(--c-subtext);
    border-radius: 50%;
    transition: background-color .15s ease, color .15s ease;
}
.modal-close:hover {
    background-color: rgba(209, 191, 162, 0.25);
    color: #8b6b3e;
}

.category-container {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 8px 20px 8px; 
    border-bottom: 1px solid var(--c-border);
    margin: 4px 0 12px 0;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;           /* Firefox */
    scrollbar-color: rgb(209, 191, 162) rgb(235, 228, 214); /* Firefox */
    scroll-snap-type: x proximity;
    min-height: 130px;
    scrollbar-gutter: stable both-edges;
}
.category-container::before,
.category-container::after {
    content: "";
    position: sticky;
    top: 0;
    width: 24px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.category-container::before {
    left: 0;
    background: linear-gradient(90deg, var(--c-bg) 0%, transparent 80%);
}
.category-container::after {
    margin-left: auto;
    right: 0;
    background: linear-gradient(270deg, var(--c-bg) 0%, transparent 80%);
}

.category-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    scroll-snap-align: center;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.category-btn:hover { transform: translateY(-2px); }

.category-btn.active {
    border-color: rgb(209, 191, 162);
    background-color: rgba(209, 191, 162, 0.22);
    box-shadow: 0 2px 10px rgba(209, 191, 162, 0.35);
}
.category-btn.active:hover {
    background-color: rgba(209, 191, 162, 0.28);
}
.category-btn.active img {
    border-color: rgb(209, 191, 162);
}

.category-btn img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--c-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.category-btn span {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--c-text);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-gallery {
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 12px 4px 4px 4px;
}

.gallery-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gallery-img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    border-color: rgb(209, 191, 162);
}

/* Horizontal scrollbar styling for WebKit (Chrome/Edge/Safari) */
.category-container::-webkit-scrollbar { height: 8px; }
.category-container::-webkit-scrollbar-track { background: rgb(235, 228, 214); }
.category-container::-webkit-scrollbar-thumb {
    background: rgb(209, 191, 162);
    border-radius: 8px;
    border: 2px solid rgb(235, 228, 214);
}
.category-container::-webkit-scrollbar-thumb:hover { background: rgb(196, 177, 147); }

.category-container.expanded {
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    justify-content: center; 
    padding-top: 8px;
    max-height: 42vh;
}
.category-container.animating { overflow: hidden !important; }
.category-container.expanded::before,
.category-container.expanded::after {
    content: none;
    display: none;
    width: 0; height: 0;
}

.category-expand-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
    color: #8b6b3e;
    background: rgba(235,228,214,0.9);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 4px 12px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    line-height: 18px;
    user-select: none;
}
.category-expand-toggle:hover { background: rgba(231,223,205,0.95); }

.category-wrap { position: relative; text-align: center; }

.category-btn { width: 110px; }
.category-btn span { max-width: 100%; }

/* 文本选中高亮配色（全局） */
::selection { background: rgba(209, 191, 162, 0.65); color: #2c2f36; }
::-moz-selection { background: rgba(209, 191, 162, 0.65); color: #2c2f36; }

/* 移动端适配（阈值调整为 1136px） */
@media (max-width: 1136px) {
    html, body { 
        overflow-x: hidden; 
    }
    body { 
        padding: 10px; 
    }
    .container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 90%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        gap: 15px;
    }

    .controls {
        width: 100%;
        max-width: 100%;
        padding: 15px 12px;
        margin: 0;
        box-sizing: border-box;
    }

    textarea, input[type="text"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    canvas {
        height: auto;
        box-sizing: border-box;
    }

    .modal-content {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        height: 90vh;
        padding: 12px;
        margin: 8px;
    }
    
    .category-container, .image-gallery { 
        max-width: 100%; 
    }
    .category-btn { 
        padding: 6px 4px; 
    }
    .category-btn img { 
        width: 80px; 
        height: 80px; 
        border-radius: 8px;
    }
    .category-btn span { 
        max-width: 100px; 
        font-size: 10px; 
    }
    .category-container { 
        min-height: 105px;
    }
    .image-gallery { 
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
        gap: 8px; 
    }
    .gallery-img { 
        border-radius: 8px; 
    }
}

/* --- Custom image panel inside gallery --- */
.custom-image-panel { 
    background: #f2efe6; 
    border: 1px solid rgb(209,191,162); 
    border-radius: 10px; 
    padding: 12px; 
    margin: 12px 0; 
    max-height: 56vh;
    overflow: auto;
}
.custom-inputs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.custom-label { color:#6b5b45; font-weight:600; font-size: 14px; }
.custom-file, .custom-url { 
    padding: 8px 10px; border: 1px solid rgb(209,191,162); border-radius: 8px; 
    background: #fff; color:#2c2f36;
}
.custom-use-btn {
    padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight:600;
    background: rgb(235,228,214); border: 1px solid rgb(209,191,162); color:#2c2f36;
}
.custom-use-btn:hover { background:#e7dfcd; }
.or-divider { text-align:center; color:#8b6b3e; margin: 6px 0; }
.or-divider span { background:#f2efe6; padding: 0 6px; }
.custom-preview { 
    margin: 8px 0; padding: 8px; border: 1px dashed rgb(209,191,162); border-radius: 8px; 
    /* 透明棋盘背景 */
    --checker-size: 12px;
    background: repeating-conic-gradient(#d8d2c6 0% 25%, #f5f1ea 0% 50%) 0 0 / var(--checker-size) var(--checker-size);
    max-height: 40vh;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}
.custom-preview img { 
    max-width: 100%; max-height: 200px; height: auto; display: block; border-radius: 6px; object-fit: contain; margin: 0 auto; 
    background: transparent; 
}

/* Zoom preview modal */
#zoom-preview-modal { pointer-events:none; }
#zoom-preview-modal .zoom-modal-content {
        background: rgb(235,228,214);
        border: 6px solid rgb(209,191,162);
        border-radius: 16px;
        width: 90%;
        max-width: 980px;
        max-height: 90vh;
        padding: 18px 18px 14px;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 32px rgba(0,0,0,0.25);
        position: relative;
        transform: scale(.95);
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
}
#zoom-preview-modal.active { pointer-events:auto; }
#zoom-preview-modal.active .zoom-modal-content { transform: scale(1); opacity:1; }
#zoom-preview-modal .zoom-close { position:absolute; top:10px; right:14px; width:36px; height:36px; line-height:36px; text-align:center; font-size:24px; color:#555; cursor:pointer; border-radius:50%; transition:background .18s ease; }
#zoom-preview-modal .zoom-close:hover { background:rgba(0,0,0,0.08); }
/* 调整放大预览关闭按钮在深色/浅色背景下的可见度 */
#zoom-preview-modal .zoom-close {
    background: rgba(255,255,255,0.72);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.15);
    backdrop-filter: blur(6px);
}
#zoom-preview-modal .zoom-close:hover {
    background: rgba(255,255,255,0.9);
}
.zoom-img-wrap { flex:1 1 auto; display:flex; align-items:center; justify-content:center; background: repeating-conic-gradient(#d8d2c6 0% 25%, #f5f1ea 0% 50%) 0 0 / 14px 14px; border:1px dashed rgb(209,191,162); border-radius:10px; overflow:auto; padding:10px; }
.zoom-img-wrap img { max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; }
.zoom-tools { margin-top:12px; background:rgba(255,255,255,0.55); border:1px solid rgb(209,191,162); border-radius:10px; padding:10px; backdrop-filter:blur(6px); }
@media (max-width: 768px){
    #zoom-preview-modal .zoom-modal-content { width:96%; padding:14px 12px; }
    .zoom-tools { padding:8px; }
}

/* File input button theming */
.custom-file {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
}
.custom-file::file-selector-button {
    margin-right: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgb(209,191,162);
    background: rgb(235,228,214);
    color: #2c2f36;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.custom-file:hover::file-selector-button { background:#e7dfcd; }
.custom-file:focus-visible { outline: 2px solid rgba(209,191,162,0.9); outline-offset: 2px; }

/* Guide overlay */
.guide-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); z-index:12000; display:flex; justify-content:center; align-items:center; padding:clamp(12px,2vw,28px); }
.guide-wrapper { position:relative; max-width: min(1080px,94vw); max-height:92vh; }
.guide-image { max-width:100%; max-height:92vh; border:4px solid #e7dfcd; border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,0.35); background:#fff; display:block; }
.guide-image#copy-fallback-img {
    /* 在复制备用弹窗内临时允许长按菜单与选择 */
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    cursor: auto;
}
.guide-close { position:absolute; top:-14px; right:-14px; width:40px; height:40px; line-height:40px; font-size:26px; border:none; cursor:pointer; border-radius:50%; background:rgba(255,255,255,0.85); color:#2c2f36; box-shadow:0 4px 16px rgba(0,0,0,0.25); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; font-weight:600; transition:background .18s ease, transform .18s ease; }
.guide-close:hover { background:#fff; transform:scale(1.05); }
.guide-close:active { transform:scale(.92); }
@media (max-width: 768px){
    .guide-close { top:-10px; right:-10px; width:36px; height:36px; line-height:36px; font-size:22px; }
    .guide-image { border-width:3px; }
}

/* WebKit fallback */
.custom-file::-webkit-file-upload-button {
    margin-right: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgb(209,191,162);
    background: rgb(235,228,214);
    color: #2c2f36;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.custom-file:hover::-webkit-file-upload-button { background:#e7dfcd; }

@media (max-width: 1136px) {
    .custom-file::file-selector-button,
    .custom-file::-webkit-file-upload-button { padding: 10px 14px; }
}

/* Disable page scroll when modal is open */
body.modal-open { overflow: hidden; }

/* Tip style for operation hints */
.tip {
    background: rgba(209, 191, 162, 0.15);
    color: #6b5b45;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid rgba(209, 191, 162, 0.3);
    margin: 6px 0;
    text-align: center;
}

@media (max-width: 1136px) {
    .tip { font-size: 11px; padding: 6px 10px; }
}

/* --- Download button inline progress bar (background-based so text stays above) --- */
button.btn-progress {
    position: relative;
    overflow: hidden; /* 保持圆角内 */
    background-image: linear-gradient(90deg, rgba(209,191,162,0.55), rgba(209,191,162,0.8));
    background-size: var(--progress, 0%) 100%;
    background-repeat: no-repeat;
    transition: background-size .15s ease;
}
button.btn-progress::before { content: none; }

@media (max-width: 1136px) {
    .category-container.expanded { max-height: 50vh; padding-top: 8px; }
    .category-expand-toggle { font-size: 11px; padding: 2px 8px; }
    .category-btn { width: 96px; }
}