.convert-settings .editor-layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);min-height:650px}.convert-settings .editor-sidebar{padding:24px;gap:14px}.source-preview{display:flex;align-items:center;justify-content:center;padding:32px;background:var(--soft);min-height:350px}.source-preview img{max-width:100%;max-height:650px;object-fit:contain}.source-preview:has(img[hidden])::after{content:'待转换图片';color:var(--ink);opacity:.45}.convert-mode{background:var(--paper);color:var(--ink)}.convert-mode.selected{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.button-dark{background:var(--ink);color:var(--paper)}.chart-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px;border-bottom:1px solid var(--line)}#chart-editor .canvas-panel{padding:18px}#chart-editor .canvas-wrap{min-height:340px;max-height:65vh;overflow:auto;background:#e0e6e5;padding:24px}#chart-editor canvas{width:auto;max-width:100%;max-height:none;flex-shrink:0;cursor:crosshair}#chart-editor .canvas-footer{font-family:inherit;font-size:14px}.chart-summary{padding:16px 24px;border-top:1px solid var(--line)}.chart-summary h3{font-size:15px;margin:10px 0}.chart-summary .stats-row{max-width:440px}#colorList{display:flex;gap:8px;overflow:auto;padding:8px 0}#colorList button{white-space:nowrap;flex-shrink:0;border:1px solid var(--line);padding:8px;background:var(--paper);color:var(--ink)}#colorList button.selected{border-color:var(--ink)}.color-swatch{height:26px;width:26px;border:1px solid #ddd;border-radius:4px}.focus-mode .chart-summary{display:none}#square-detail{max-width:840px;margin:auto;padding:20px}#squareBody{padding-top:18px}.post-author{display:grid;gap:6px;padding:12px 0}.post-author small{color:#888}.post-cover{width:100%;max-height:65vh;object-fit:contain;background:var(--soft);display:block}#squareBody h2{font-size:20px;overflow-wrap:anywhere}#squareBody select{padding:8px;background:var(--paper);color:var(--ink);border:1px solid var(--line)}.post-actions{display:flex;gap:10px;position:sticky;bottom:0;background:var(--paper);padding:14px 0;border-top:1px solid var(--line);margin-top:20px}.post-actions .button-dark{flex:1}.post-actions a{text-decoration:none}#conversionStatus{font-size:13px;margin:0;color:var(--ink)}@media(max-width:720px){.convert-settings .editor-layout{display:flex;flex-direction:column}.source-preview{order:-1;min-height:180px;padding:16px}.source-preview img{max-height:280px}.chart-actions{gap:6px}.chart-actions .button{padding:8px;font-size:12px}#chart-editor .canvas-wrap{padding:10px}.chart-summary{padding:12px}#square-detail{padding:12px}.post-actions{bottom:58px}#squareBody h2{font-size:18px}} 
.convert-settings .source-preview{padding:28px;min-width:0;align-items:flex-start}.convert-settings .source-preview::after{content:none}.source-upload-frame{position:relative;width:100%;aspect-ratio:1;max-height:650px;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}.source-upload-frame:has(img[hidden]){border-style:dashed}.source-upload-frame #sourcePreview{width:100%;height:100%;max-height:100%;object-fit:contain;display:block}.source-upload-frame #sourcePreview[hidden]{display:none}.source-upload-button{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:0;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}.source-upload-button strong{font-size:20px}.source-upload-button span{font-size:13px;opacity:.6}.source-replace{position:absolute;top:12px;right:12px;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;box-shadow:0 2px 8px #0002}.source-upload-frame:has(img[hidden]) .source-replace,.source-upload-frame:has(img:not([hidden])) .source-upload-button{display:none}.source-upload-button:focus-visible,.source-replace:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}@media(max-width:720px){.convert-settings .source-preview{padding:16px}.source-upload-frame{max-width:420px;margin:auto;max-height:350px}.source-upload-frame #sourcePreview{max-height:100%}}
.convert-settings .source-preview:has(img[hidden])::after{content:none}
#square-detail{max-width:1280px;padding:28px}#squareBody .post-detail-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:32px;align-items:start}.post-artwork{min-width:0;background:var(--soft)}#squareBody .post-cover{width:100%;height:auto;max-height:70vh;object-fit:contain}.post-details{min-width:0;display:flex;flex-direction:column;gap:20px}#squareBody .post-author{display:flex;align-items:center;gap:12px;padding:0}.post-avatar{position:relative;display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;overflow:hidden;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--ink);font-size:18px}.post-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#squareBody .post-details h2{margin:0;font-size:22px;line-height:1.5;overflow-wrap:anywhere}#squareBody .post-details select{align-self:flex-start;max-width:100%}#squareBody .post-actions{position:static;display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 0;padding:20px 0 0}#squareBody .post-actions .button{white-space:nowrap}#squareBody .post-actions .button-dark{flex-basis:100%}@media(max-width:720px){#square-detail{padding:16px}#squareBody .post-detail-layout{grid-template-columns:minmax(0,1fr);gap:24px}.post-artwork{width:88%;max-width:360px;margin:0 auto}#squareBody .post-cover{max-height:42vh}.post-details{gap:16px}#squareBody .post-details h2{font-size:18px}#squareBody .post-actions .button-dark{flex-basis:auto}.post-avatar{flex-basis:40px;width:40px;height:40px}}
.brand-picker{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 16px 60px #0003}.brand-picker::backdrop{background:#0006}.brand-picker h2{font-size:20px;margin:0 0 20px}.brand-picker-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.brand-picker-options label{display:flex;align-items:center;gap:8px;min-height:52px;padding:10px;border:1px solid var(--line);border-radius:6px;font-size:14px;cursor:pointer;overflow-wrap:anywhere}.brand-picker-options label:has(:checked){border-color:var(--ink);background:var(--soft)}.brand-picker-options input{accent-color:var(--ink);flex-shrink:0}.brand-picker-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
#shareApplication{margin-left:auto}
