/* 基础样式：小清新风格，注重留白与柔和配色 */
:root{--bg-a:#7C4DFF;--bg-b:#40C4FF;--ink:#0E3A5A;--muted:#5D7A92;--panel:#FFFFFF;--panel-border:#E6EEF5;--accent:#54B1FF;--shadow:0 10px 30px rgba(14,58,90,.12)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Hiragino Sans GB",Helvetica,Arial;color:var(--ink);background:#F7FAFD}

.appRoot{display:flex;min-height:100vh}

/* 左侧控制面板 */
.controlPanel{width:360px;background:var(--panel);border-right:1px solid var(--panel-border);padding:20px 20px 12px;display:flex;flex-direction:column;gap:18px}
.panelHeader{padding-bottom:8px;border-bottom:1px dashed var(--panel-border)}
.panelTitle{margin:0;font-size:20px;font-weight:800}
.panelSub{margin:4px 0 0 0;color:var(--muted);font-size:12px}
.mobileToggle{display:none;margin-left:auto;height:32px;padding:0 10px;border:1px solid var(--panel-border);border-radius:8px;background:#fff}
.panelSection{padding:8px 0;border-bottom:1px dashed var(--panel-border)}
.sectionTitle{font-size:14px;margin:6px 0 10px 0}
.fieldRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fieldGroup{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.fieldLabel{font-size:12px;color:var(--muted)}
.radio{display:flex;align-items:center;gap:6px;font-size:13px}
.textInput{width:100%;height:36px;padding:8px 10px;border:1px solid var(--panel-border);border-radius:8px;outline:none}
.textInput:focus{border-color:var(--accent)}
.colorInput{width:42px;height:32px;border:none;background:transparent;padding:0}
.select{height:32px;border:1px solid var(--panel-border);border-radius:8px;padding:0 8px;background:#fff}
.uploadRow{display:flex;gap:10px;align-items:center}
.uploadDrop{border:1px dashed var(--panel-border);border-radius:10px;padding:12px;text-align:center;color:var(--muted);cursor:pointer}
.presetRow{display:flex;gap:8px;flex-wrap:wrap}
.presetBadge{width:44px;height:22px;border-radius:999px;border:1px solid var(--panel-border);cursor:pointer}
.panelFooter{padding-top:10px}
.primaryBtn{width:100%;height:40px;border:none;border-radius:10px;background:linear-gradient(90deg,var(--bg-a),var(--bg-b));color:#fff;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}

/* 右侧画布区域 */
.canvasArea{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}
.canvasWrap{transform-origin:top left}
.canvas{position:relative;width:900px;height:1200px;background:linear-gradient(90deg,#EAF3FF,#C8E6FF);border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.08);overflow:hidden}
/* 风格效果图层 */
.effectLayer{position:absolute;inset:0;pointer-events:none;z-index:0}
.layerDiffuse,.layerLaser,.layerBusiness{position:absolute;inset:0;opacity:.6;mix-blend-mode:overlay;filter:blur(0px)}
.layerDiffuse{background:radial-gradient(600px 600px at 20% 20%, rgba(124,77,255,.35), transparent 60%),radial-gradient(600px 600px at 80% 30%, rgba(64,196,255,.35), transparent 60%),radial-gradient(700px 700px at 40% 80%, rgba(255,168,76,.28), transparent 65%)}
.layerLaser{background:conic-gradient(from 0deg at 50% 50%, #ff00e5, #00ffd9, #6a5cff, #ffea00, #ff00e5);opacity:.35;mix-blend-mode:soft-light}
.layerBusiness{background:linear-gradient(135deg, rgba(14,58,90,.08) 0%, rgba(14,58,90,0) 30%), repeating-linear-gradient(135deg, rgba(14,58,90,.06) 0 8px, rgba(14,58,90,.03) 8px 16px)}

/* 标题 */
.heading{position:absolute;top:60px;left:60px;right:60px;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:2}
.title{font-size:72px;line-height:1.05;font-weight:800;letter-spacing:.02em}
.subtitle{font-size:20px;color:var(--muted);font-weight:600}

.heading.pos-tl{top:60px;left:60px;right:auto;bottom:auto;align-items:flex-start;text-align:left}
.heading.pos-tc{top:60px;left:60px;right:60px;bottom:auto;align-items:center;text-align:center}
.heading.pos-tr{top:60px;left:auto;right:60px;bottom:auto;align-items:flex-end;text-align:right}
.heading.pos-cc{top:50%;left:60px;right:60px;transform:translateY(-50%);align-items:center;text-align:center}
.heading.pos-bl{bottom:60px;left:60px;right:auto;top:auto;align-items:flex-start;text-align:left}
.heading.pos-bc{bottom:60px;left:60px;right:60px;top:auto;align-items:center;text-align:center}
.heading.pos-br{bottom:60px;left:auto;right:60px;top:auto;align-items:flex-end;text-align:right}

/* logo */
.logoWrap{position:absolute;top:24px;right:24px;z-index:3}
.logoWrap img{display:block;width:72px;height:72px;object-fit:contain;border-radius:12px}
.headingLogo img{vertical-align:middle;width:40px;height:40px;object-fit:contain;border-radius:12px;margin-right:10px}
.heading .title{display:flex;align-items:center;gap:10px}

/* 手机外观模拟：接近圆角直边机型 */
.phoneMock{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:430px;height:880px;display:flex;align-items:center;justify-content:center;z-index:1}
.phoneBezel{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#101317,#222832);border-radius:46px;box-shadow:inset 0 0 0 8px #0c0f13,inset 0 0 0 10px #2B333D,0 30px 80px rgba(16,19,23,.5)}
.phoneBezel:before{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:120px;height:24px;background:#0c0f13;border-radius:0 0 16px 16px}
.phoneBezel{overflow:hidden}
.phoneScreen{position:absolute;left:16px;right:16px;top:44px;bottom:16px;border-radius:32px;overflow:hidden;background:#000}
.phoneScreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 响应式 */
@media (max-width:1100px){
  .appRoot{flex-direction:column}
  .controlPanel{position:fixed;z-index:10;left:0;right:0;bottom:0;top:auto;width:auto;max-height:60vh;transform:translateY(100%);transition:transform .25s ease;padding:14px 14px 16px;background:#fff;border:1px solid var(--panel-border);border-bottom:none;border-radius:14px 14px 0 0;box-shadow:0 -10px 30px rgba(14,58,90,.12)}
  .controlPanel.open{transform:translateY(0)}
  .panelHeader{display:flex;align-items:center;gap:10px}
  .mobileToggle{display:inline-block}
  .canvasArea{padding:12px}
  .canvasWrap{width:100%;}
  .canvas{width:375px;height:600px}
}