.transform-page-body { margin:0; color:#211b13; background-color:#070503; }
.transform-page-main { width:min(1500px, calc(100% - 24px)); min-height:calc(100vh - 130px); margin:0 auto; padding:38px 0 70px; }
.transform-guide-content { padding:clamp(14px,2vw,24px); }
.transform-catalog { color:#302113; font-family:"Microsoft JhengHei",sans-serif; }
.transform-status,.transform-empty { margin:0; padding:42px 20px; border:1px solid #b88a43; background:#f8f0dd; text-align:center; color:#745a38; }
.transform-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 10px; }
.transform-tabs button { padding:11px 12px; border:1px solid #b88a43; background:#fff8e8; color:#4f3415; font-weight:800; cursor:pointer; }
.transform-tabs button.active { background:#291604; color:#f4d36c; }
.transform-filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; margin-bottom:14px; }
.transform-filters input,.transform-filters select { width:100%; padding:11px 12px; border:1px solid #b18a52; background:#fffaf1; color:#362516; font:14px "Microsoft JhengHei",sans-serif; }
.transform-list { display:flex; flex-direction:column; gap:10px; }
.transform-card { display:grid; grid-template-columns:max-content minmax(0,1fr) auto; gap:13px; align-items:center; padding:10px 14px; border:1px solid #b88a43; background:#f8f0dd; }
.transform-card:nth-child(even) { background:#efe2c5; }
.transform-image { min-width:62px; min-height:62px; display:grid; place-items:center; overflow:visible; background:#050505; border:1px solid #8e672d; }
.transform-image:empty { background:#050505; }
.transform-image img { width:auto; height:auto; max-width:none; max-height:none; display:block; }
.transform-name { margin-bottom:6px; color:#8c2818; font-size:18px; font-weight:800; }
.transform-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 16px; font-size:12px; line-height:1.5; }
.transform-meta div:last-child { grid-column:1/-1; }
.transform-meta span { color:#7b603b; margin-right:5px; }
.transform-meta b { color:#392617; font-weight:500; overflow-wrap:anywhere; }
.transform-detail { padding:9px 12px; border:1px solid #80591c; background:#2a1604; color:#ffe27c; font-weight:800; cursor:pointer; white-space:nowrap; }
.transform-modal { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.72); }
.transform-modal.open { display:flex; }
.transform-modal-box { width:min(840px,100%); max-height:88vh; overflow:auto; border:2px solid #aa7d35; background:#f5ead0; color:#302113; }
.transform-modal-head { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:15px 18px; background:#251405; color:#f6d36c; }
.transform-modal-head h3 { margin:0; font-size:21px; }.transform-close { border:1px solid #b98736; background:#f3deaa; color:#392617; padding:6px 10px; cursor:pointer; }
.transform-modal-body { padding:20px; }.transform-speed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.transform-speed { padding:9px; border:1px solid #c3a16b; background:#fff8e8; }.transform-speed span { display:block; color:#725a39; font-size:12px; }.transform-speed b { color:#822819; }
@media (max-width:760px) { .transform-page-main{width:100%;padding-top:14px}.transform-guide-content{padding:10px}.transform-filters{grid-template-columns:1fr}.transform-tabs{grid-template-columns:1fr}.transform-card{grid-template-columns:max-content minmax(0,1fr)}.transform-image{min-width:56px;min-height:56px}.transform-detail{grid-column:1/-1;width:100%}.transform-meta{grid-template-columns:1fr}.transform-speed-grid{grid-template-columns:1fr 1fr} }