.ctw { padding: 16px 18px 24px; max-width: 1400px; margin: 0 auto; }
.ctw-top { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.ctw-title { font-size:1.4rem; font-weight:750; }
.ctw-sub { color:#64748b; }
.ctw-top-actions { display:flex; gap:8px; }
.ctw-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.ctw-step { display:flex; gap:8px; align-items:center; text-align:left; border:1px solid #e2e8f0; background:#fff; border-radius:12px; padding:10px; }
.ctw-step.active { border-color:#2563eb; background:#eff6ff; }
.ctw-step.done { border-color:#86efac; background:#f0fdf4; }
.ctw-step-num { width:28px; height:28px; border-radius:999px; background:#e2e8f0; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto; }
.ctw-step.active .ctw-step-num { background:#2563eb; color:#fff; }
.ctw-step.done .ctw-step-num { background:#16a34a; color:#fff; }
.ctw-step-label { display:flex; flex-direction:column; line-height:1.2; }
.ctw-step-label i { font-style:normal; color:#64748b; font-size:.78rem; }
.ctw-card { border:1px solid #e2e8f0; border-radius:14px; background:#fff; padding:16px; }
.ctw-card-title { font-weight:700; margin-bottom:12px; }
.ctw-meta-chip { margin-top:14px; display:inline-block; background:#f1f5f9; border-radius:999px; padding:6px 12px; color:#334155; font-size:.9rem; }
.ctw-design, .ctw-configure, .ctw-preview { display:grid; grid-template-columns:210px 1fr 240px; gap:12px; }
.ctw-configure { grid-template-columns:1fr 240px; }
.ctw-preview { grid-template-columns:1fr 260px; }
.ctw-side, .ctw-props { border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc; padding:12px; }
.ctw-side-title { font-weight:700; margin-bottom:8px; }
.ctw-brick { background:#fff; border:1px dashed #94a3b8; border-radius:10px; padding:8px 10px; margin-bottom:8px; cursor:grab; display:flex; justify-content:space-between; }
.ctw-brick:hover { border-color:#2563eb; background:#eff6ff; }
.ctw-brick span { color:#64748b; font-size:.8rem; }
.ctw-canvas { display:flex; flex-direction:column; gap:10px; }
.ctw-canvas-head { display:flex; justify-content:space-between; align-items:center; }
.ctw-zone { border:1px solid #e2e8f0; border-radius:12px; background:#fff; padding:12px; }
.ctw-zone.locked { background:#f1f5f9; }
.ctw-zone.hot { outline:2px solid #2563eb; background:#eff6ff; }
.ctw-zone-h { font-weight:700; margin-bottom:8px; display:flex; justify-content:space-between; gap:8px; }
.ctw-zone-h span { font-weight:500; color:#64748b; font-size:.82rem; }
.ctw-chips { display:flex; flex-wrap:wrap; gap:8px; min-height:40px; align-items:center; }
.ctw-chip { position:relative; background:#e2e8f0; border-radius:999px; padding:6px 12px; font-size:.85rem; cursor:pointer; }
.ctw-chip i { font-style:normal; color:#64748b; margin-left:6px; font-size:.75rem; }
.ctw-chip.locked { background:#cbd5e1; cursor:default; }
.ctw-chip.selected { outline:2px solid #2563eb; background:#dbeafe; }
.ctw-x { border:0; background:transparent; color:#b91c1c; font-weight:700; margin-left:4px; }
.ctw-drop-hint { color:#94a3b8; border:1px dashed #cbd5e1; border-radius:999px; padding:6px 12px; font-size:.85rem; }
.ctw-pre { max-height:200px; overflow:auto; background:#0f172a; color:#e2e8f0; padding:10px; border-radius:8px; font-size:.72rem; white-space:pre-wrap; }
.ctw-def { margin-top:10px; font-size:.8rem; color:#64748b; }
.ctw-def code { display:block; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:8px; color:#0f172a; margin-top:4px; word-break:break-all; }
.ctw-post-box { margin-top:12px; border-top:1px solid #e2e8f0; padding-top:12px; }
.ctw-checks { list-style:none; padding:0; margin:0; }
.ctw-checks li { padding:8px 10px; border-radius:8px; margin-bottom:6px; background:#fff; border:1px solid #e2e8f0; }
.ctw-checks li.ok { border-color:#86efac; background:#f0fdf4; }
.ctw-checks li.bad { border-color:#fca5a5; background:#fef2f2; }
.ctw-checks li.warn { border-color:#fcd34d; background:#fffbeb; }
.ctw-files { padding-left:18px; margin:0; }
.ctw-form-preview { border:1px solid #e2e8f0; border-radius:12px; padding:12px; background:#f8fafc; }
.ctw-form-preview.tablet { max-width:820px; }
.ctw-form-preview.mobile { max-width:420px; }
.ctw-fp-sec { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:10px; margin-bottom:10px; }
.ctw-fp-h { font-weight:700; margin-bottom:8px; }
.ctw-fp-row { display:flex; flex-wrap:wrap; gap:10px; }
.ctw-fp-field { min-width:140px; flex:1 1 140px; }
.ctw-fp-field label { display:block; font-size:.8rem; color:#64748b; margin-bottom:2px; }
.ctw-footer { display:flex; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid #e2e8f0; }
.ctw-footer-right { display:flex; gap:8px; }
@media (max-width: 1100px) {
  .ctw-steps { grid-template-columns:1fr 1fr; }
  .ctw-design, .ctw-configure, .ctw-preview { grid-template-columns:1fr; }
}