.cfg-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5);align-items:start}@media (max-width: 860px){.cfg-studio{grid-template-columns:1fr}}.cfg-controls{display:flex;flex-direction:column;gap:var(--space-5)}.cfg-group{display:flex;flex-direction:column;gap:var(--space-2)}.cfg-group__label{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted)}.cfg-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}@media (max-width: 480px){.cfg-shapes{grid-template-columns:repeat(2,1fr)}}.cfg-shape{display:flex;align-items:center;justify-content:center;min-height:56px;padding:var(--space-2);background:var(--color-bg);border:1.5px solid var(--color-line);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) ease}.cfg-shape:hover{border-color:var(--color-primary);transform:translateY(-1px)}.cfg-shape[aria-pressed=true]{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}.cfg-shape__chip{width:44px;height:22px;background:var(--color-primary)}.cfg-swatches{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.cfg-swatch{position:relative;width:44px;height:44px;border-radius:var(--radius-pill);border:2px solid var(--color-line);cursor:pointer;transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease}.cfg-swatch:hover{transform:scale(1.08)}.cfg-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-text)}.cfg-swatch__custom{position:relative;width:44px;height:44px;border-radius:var(--radius-pill);border:2px dashed var(--color-line);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}.cfg-swatch__custom input[type=color]{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px);border:0;padding:0;cursor:pointer;opacity:0}.cfg-hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--color-text-muted);min-width:72px}.cfg-seg{display:inline-flex;padding:4px;gap:4px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}.cfg-seg button{min-height:40px;padding:0 var(--space-3);border:0;border-radius:calc(var(--radius-md) - 4px);background:transparent;color:var(--color-text-muted);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--motion-fast) ease,color var(--motion-fast) ease}.cfg-seg button[aria-pressed=true]{background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-sm)}.cfg-seg--full{display:flex}.cfg-seg--full button{flex:1}.cfg-input,.cfg-textarea{width:100%;min-height:44px;padding:0 var(--space-3);font-family:var(--font-body);font-size:16px;color:var(--color-text);background:var(--color-bg);border:1.5px solid var(--color-line);border-radius:var(--radius-md);transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease}.cfg-input:focus,.cfg-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 18%,transparent)}.cfg-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}@media (max-width: 520px){.cfg-row{grid-template-columns:1fr}}.cfg-preview{position:sticky;top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}@media (max-width: 860px){.cfg-preview{position:static}}.cfg-preview__toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;align-items:center}.cfg-canvas{display:flex;align-items:center;justify-content:center;min-height:320px;padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--color-line);background-color:#fff;background-image:radial-gradient(circle at 1px 1px,rgba(15,23,42,.06) 1px,transparent 0);background-size:16px 16px;transition:background-color var(--motion-base) ease}.cfg-canvas--dark{background-color:#0e1116;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 0)}.cfg-canvas--card{background-color:var(--color-surface);background-image:none}.cfg-frame{width:100%;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden}.cfg-frame--mobile{max-width:300px;border-radius:28px;border:8px solid #11151c}.cfg-frame__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#f1f2f5;border-bottom:1px solid var(--color-line)}.cfg-frame__dot{width:10px;height:10px;border-radius:50%;background:#d4d7de}.cfg-frame__notch{height:22px;display:flex;justify-content:center;align-items:center;background:#11151c}.cfg-frame__notch:after{content:"";width:70px;height:6px;border-radius:999px;background:#2a2f3a}.cfg-frame__body{padding:var(--space-5) var(--space-4) var(--space-6)}.cfg-mock-card{display:flex;flex-direction:column;gap:var(--space-3)}.cfg-mock-card__thumb{height:110px;border-radius:var(--radius-md);background:linear-gradient(135deg,#fde68a,#fca5a5)}.cfg-mock-card__line{height:12px;border-radius:999px;background:var(--color-line)}.cfg-mock-card__line--short{width:55%}.cfg-mock-card__price{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--color-text)}@keyframes cfg-pop{0%{transform:scale(.96)}55%{transform:scale(1.04)}to{transform:scale(1)}}.cfg-pop{animation:cfg-pop var(--motion-base) ease}@keyframes cfg-snippet-flash{0%{box-shadow:0 0 color-mix(in srgb,var(--color-primary) 60%,transparent)}to{box-shadow:0 0 0 6px transparent}}.cfg-snippet-flash{animation:cfg-snippet-flash .7s ease}@keyframes cfg-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.cfg-rise{animation:cfg-rise var(--motion-slow) ease both}@media (prefers-reduced-motion: reduce){.cfg-pop,.cfg-snippet-flash,.cfg-rise,.cfg-shape,.cfg-swatch{animation:none!important;transition:none!important}}[data-theme=widget]{--color-bg: #ffffff;--color-surface: #f5f6f8;--color-primary: #ff6900;--color-primary-contrast: #ffffff;--color-primary-hover: #e65f00;--color-text: #0e1116;--color-text-muted: #5a6470;--color-line: #e6e8ec}