:root{--cdgl-gap:18px;--cdgl-card:14px;--cdgl-border:#e5e7eb;--cdgl-bg:#f8fafc;--cdgl-fg:#0f172a}
.cdgl-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--cdgl-fg);background:var(--cdgl-bg)}
.cdgl-container{max-width:1100px;margin:0 auto;padding:20px}
.cdgl-header{display:flex;gap:var(--cdgl-gap);align-items:flex-start;justify-content:space-between}
.cdgl-title{font-weight:700;margin-bottom:6px}
.cdgl-framebar{display:flex;flex-wrap:wrap;gap:10px}
.cdgl-thumbbtn{padding:4px;border-radius:12px;border:2px solid transparent;background:transparent;cursor:pointer}
.cdgl-thumbbtn.active{border-color:#3b82f6}
.cdgl-thumb{width:84px;height:84px;object-fit:contain;background:#eef2f7;border-radius:12px;display:block}
.cdgl-badge{font-size:12px;background:#ecfdf5;color:#065f46;border-radius:999px;padding:2px 8px}
.cdgl-btn{border:0;border-radius:10px;padding:9px 12px;font-weight:600;cursor:pointer}
.cdgl-btn.blue{background:#2563eb;color:#fff}.cdgl-btn.blue:hover{background:#1d4ed8}
.cdgl-btn.green{background:#059669;color:#fff}.cdgl-btn.green:hover{background:#047857}
.cdgl-btn.gray{background:#e5e7eb}.cdgl-btn.gray:hover{background:#d1d5db}
.cdgl-btn.purple{background:#7c3aed;color:#fff}.cdgl-btn.purple:hover{background:#6d28d9}
.cdgl-btn.w-full{width:100%}
.cdgl-help{margin:10px 0 4px;color:#475569;font-size:13px}
.cdgl-main{display:grid;grid-template-columns:1fr;gap:var(--cdgl-gap);align-items:start}
@media(min-width:900px){.cdgl-main{grid-template-columns:1fr 360px}}
.cdgl-preview{display:flex;align-items:center;justify-content:center}
.cdgl-preview canvas{display:block;border-radius:16px;background:radial-gradient(circle at center, #fff, rgba(0,0,0,0.04));box-shadow:0 3px 18px rgba(0,0,0,.06)}
.cdgl-controls{position:relative}
.cdgl-card{background:#fff;border:1px solid var(--cdgl-border);border-radius:16px;padding:var(--cdgl-card);box-shadow:0 2px 14px rgba(0,0,0,.04)}
.cdgl-ctl{margin-top:12px}
.cdgl-ctl-label{font-size:13px;margin-bottom:6px;color:#334155}
.cdgl-ctl-row{display:flex;gap:10px;margin-top:12px}
.cdgl-created{margin-top:10px;font-size:12px;color:#475569}