:root{--bg:#0f1117;--surface:#181c27;--surface2:#1e2333;--surface3:#252a3a;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);--text:#f0f2f8;--text2:#8a90a8;--text3:#555d78;--accent:#22c98e;--accent2:#1aa87a;--accent-dim:rgba(34,201,142,0.12);--accent-glow:rgba(34,201,142,0.3);--danger:#e2574a;--warn:#f0973a;--info:#4a9de2;--radius:10px;--radius-sm:6px;--radius-lg:14px;--font:'DM Sans', sans-serif;--mono:'DM Mono', monospace}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#fff0}::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}.app{display:grid;grid-template-rows:52px 1fr;height:90vh;min-height:600px;overflow:hidden}.app.has-banner{grid-template-rows:52px auto 1fr}header{display:flex;align-items:center;gap:12px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--border);z-index:10}.logo{display:flex;align-items:center;gap:9px}.logo-icon{width:30px;height:30px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center}.logo-text{font-size:15px;font-weight:600;letter-spacing:-.3px}.logo-sub{font-size:11px;color:var(--text3);margin-top:-2px}.header-sep{flex:1}.header-tag{font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);padding:4px 12px;border-radius:20px;letter-spacing:.01em}.workspace{display:grid;grid-template-columns:320px 1fr 340px;overflow:hidden;height:calc(90vh - 52px)}.panel-center{display:grid;grid-template-columns:160px 1fr 160px;grid-template-rows:auto auto auto auto;align-content:center;background:var(--bg);position:relative;overflow:hidden}.ad-slot-left{grid-column:1;grid-row:1 / 5}.ad-slot-right{grid-column:3;grid-row:1 / 5}#dp-platform-banner{grid-column:2;grid-row:1;align-self:center;justify-self:center;margin:8px auto}.canvas-stage{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px 0}canvas#cv{display:block;cursor:crosshair;transition:border-radius .2s}canvas#cv.circle{border-radius:50%}canvas#cv.crop-cur{border-radius:0;cursor:crosshair}.canvas-info{display:flex;align-items:center;gap:8px}.dim-badge{font-size:11px;color:var(--text3);background:var(--surface);border:1px solid var(--border);padding:3px 10px;border-radius:20px;font-family:var(--mono)}.drag-tip{font-size:10px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-glow);padding:3px 10px;border-radius:20px;display:none}.drag-tip.show{display:block}.export-bar{grid-column:2;grid-row:3;display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:420px;margin:0 auto}.export-quality{display:flex;align-items:center;gap:5px;flex:1}.export-quality input[type=range]{height:2px;max-width:90px}.export-quality input[type=range]::-webkit-slider-thumb{width:11px;height:11px}.export-ql{font-size:10px;color:var(--text2);white-space:nowrap}.bottom-bar{grid-column:2;grid-row:4;display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 0 12px}.dl-btn{display:flex;align-items:center;gap:7px;padding:10px 22px;background:var(--accent);color:#0a1a12;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font);transition:all .15s}.dl-btn:hover{background:var(--accent2);transform:translateY(-1px)}.dl-btn:active{transform:translateY(0)}.reset-btn{padding:10px 16px;background:var(--surface);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;cursor:pointer;font-family:var(--font);transition:all .15s}.reset-btn:hover{border-color:var(--border2);color:var(--text)}.share-btn{display:flex;align-items:center;gap:7px;padding:10px 16px;background:var(--surface);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius);font-size:13px;cursor:pointer;font-family:var(--font);transition:all .15s;position:relative}.share-btn:hover{border-color:var(--border2);color:var(--text)}.share-popup{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:8px;min-width:200px;display:none;z-index:100;box-shadow:0 8px 32px rgb(0 0 0 / .4)}.share-popup.open{display:block}.share-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;color:var(--text2);transition:all .12s}.share-opt:hover{background:var(--surface2);color:var(--text)}.ba-btn{padding:3px 10px;font-size:11px;font-weight:500;background:var(--surface);color:var(--text2);border:1px solid var(--border2);border-radius:20px;cursor:pointer;font-family:var(--font);transition:all .12s;user-select:none}.ba-btn:hover{border-color:var(--accent);color:var(--accent)}.ba-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.ba-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);height:14px;text-align:center}.panel-right,.panel-right .ppane,.panel-right .section{overflow-x:hidden;box-sizing:border-box;max-width:100%}.panel-right *{max-width:100%;box-sizing:border-box}.crosslink-banner{text-align:center;padding:8px;font-size:11px;color:var(--text3);background:var(--surface);border-top:1px solid var(--border)}.crosslink-banner a{color:var(--accent);text-decoration:none}.crosslink-banner a:hover{text-decoration:underline}@media (min-width:1024px) and (max-width:1279px){.app{height:100vh}.workspace{grid-template-columns:260px 1fr 340px;height:calc(100vh - 52px)}.ad-slot-left,.ad-slot-right{display:none}.panel-center{grid-template-columns:1fr}.canvas-stage,.export-bar,.bottom-bar,#dp-platform-banner{grid-column:1}}@media (min-width:769px) and (max-width:1023px){.app{height:100vh}.workspace{grid-template-columns:220px 1fr 240px;height:calc(100vh - 52px)}.ad-slot-left,.ad-slot-right{display:none}.panel-center{grid-template-columns:1fr}.canvas-stage,.export-bar,.bottom-bar,#dp-platform-banner{grid-column:1}canvas#cv{width:320px!important;height:320px!important}.export-bar{max-width:340px}}@media (max-width:768px){.app{display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:visible}header{padding:0 12px;gap:8px}.logo-sub{display:none}.logo-text{font-size:14px}.logo-icon{width:26px;height:26px}.header-tag{display:none}.workspace{display:flex;flex-direction:column;height:auto;overflow:visible;width:100%}.panel-left{order:1;width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border)}.panel-center{order:2;width:100%;display:flex;flex-direction:column;align-items:center;height:auto}.panel-right{order:3;width:100%;height:auto;border-left:none;border-top:1px solid var(--border)}.ad-slot-left,.ad-slot-right{display:none!important}#dp-platform-banner{width:100%;box-sizing:border-box}.canvas-stage{width:100%;padding:12px 0}canvas#cv{width:210px!important;height:210px!important}.canvas-info{flex-wrap:wrap;gap:5px;justify-content:center}.dim-badge{font-size:10px}.export-bar{width:calc(100% - 24px);max-width:100%;margin:0 12px;flex-wrap:wrap;gap:8px;padding:8px 10px;box-sizing:border-box}.export-quality{flex:1;min-width:160px}.bottom-bar{width:100%;flex-direction:row;flex-wrap:wrap;padding:8px 12px 16px;gap:6px;box-sizing:border-box;justify-content:center}.dl-btn{flex:1;justify-content:center;font-size:12px;padding:10px 12px}.reset-btn{font-size:12px;padding:10px 12px}.share-btn{font-size:12px;padding:10px 12px}.ba-btn{font-size:10px;padding:3px 8px}.share-popup{bottom:48px;left:50%;transform:translateX(-50%);min-width:180px}}@media (min-width:360px) and (max-width:768px){canvas#cv{width:240px!important;height:240px!important}}@media (min-width:420px) and (max-width:768px){canvas#cv{width:280px!important;height:280px!important}}