.cpg-container{min-height:auto;background:linear-gradient(135deg,#1e1e2e,#2d2d44);padding:2rem}.cpg-header{text-align:center;margin-bottom:2rem}.cpg-header h1{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:.5rem}.cpg-header p{color:#a0a0b0;font-size:1.1rem}.cpg-main{display:grid;grid-template-columns:350px 1fr;gap:var(--tool-content-gap, 2rem);max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.cpg-controls{display:flex;flex-direction:column;gap:1.5rem}.cpg-section{background:#ffffff14;border-radius:12px;padding:1.25rem;border:2px solid rgba(255,255,255,.25)}.cpg-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.cpg-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.cpg-shape-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.cpg-shape-btn{padding:.75rem 1rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:8px;color:silver;font-size:.875rem;cursor:pointer;transition:all .2s ease}.cpg-shape-btn:hover{background:#ffffff26;color:#fff}.cpg-shape-btn.active{background:var(--info-color);border-color:var(--info-color);color:#fff}.cpg-preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;max-height:300px;overflow-y:auto}.cpg-preset-btn{padding:.5rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:#a0a0b0;font-size:.75rem;cursor:pointer;transition:all .2s ease;text-transform:capitalize}.cpg-preset-btn:hover{background:#ffffff26;color:#fff}.cpg-preset-btn.active{background:#3b82f633;border-color:var(--info-color);color:var(--info-color)}.cpg-hint{font-size:.75rem;color:#808090;margin-top:.75rem;line-height:1.4}.cpg-slider-group{margin-bottom:1rem}.cpg-slider-group:last-child{margin-bottom:0}.cpg-slider-group label{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.85rem;color:silver}.cpg-slider-group label span:last-child{color:var(--info-color);font-weight:600}.cpg-slider-group input[type=range]{width:100%;height:6px;background:#ffffff26;border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.cpg-slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--info-color);border-radius:50%;cursor:pointer;transition:transform .2s ease}.cpg-slider-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.cpg-checkbox-group{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.cpg-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:silver;font-size:.875rem}.cpg-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--info-color);cursor:pointer}.cpg-color-input{margin-bottom:1rem}.cpg-color-input label{display:block;font-size:.85rem;color:silver;margin-bottom:.5rem}.cpg-color-picker{display:flex;gap:.5rem;align-items:center}.cpg-color-picker input[type=color]{width:40px;height:36px;border:none;border-radius:6px;cursor:pointer;background:none}.cpg-color-picker input[type=text]{flex:1;padding:.5rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:#fff;font-family:monospace;font-size:.875rem}.cpg-image-input input{width:100%;padding:.5rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:6px;color:#fff;font-size:.85rem}.cpg-image-input input::placeholder{color:#707080}.cpg-points-list{max-height:200px;overflow-y:auto;margin-bottom:.75rem}.cpg-point-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#ffffff0f;border-radius:6px;margin-bottom:.5rem}.cpg-point-num{width:24px;height:24px;background:var(--info-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;flex-shrink:0}.cpg-point-inputs{display:flex;gap:.5rem;flex:1}.cpg-point-inputs label{display:flex;align-items:center;gap:.25rem;font-size:.8rem;color:#a0a0b0}.cpg-point-inputs input{width:50px;padding:.25rem .5rem;background:#ffffff14;border:2px solid rgba(255,255,255,.25);border-radius:4px;color:#fff;font-size:.8rem;text-align:center}.cpg-remove-point{width:24px;height:24px;background:#ef444433;border:none;border-radius:4px;color:var(--danger);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.cpg-remove-point:hover:not(:disabled){background:var(--danger);color:#fff}.cpg-remove-point:disabled{opacity:.3;cursor:not-allowed}.cpg-add-point-btn{width:100%;padding:.75rem;background:#3b82f61a;border:1px dashed rgba(59,130,246,.3);border-radius:6px;color:var(--info-color);font-size:.875rem;cursor:pointer;transition:all .2s ease}.cpg-add-point-btn:hover{background:#3b82f633;border-color:var(--info-color)}.cpg-preview-section{display:flex;flex-direction:column;gap:1.5rem}.cpg-preview-wrapper{background:#f9fafb;border-radius:12px;padding:1.5rem;border:2px solid #d1d5db;box-shadow:0 1px 3px #0000001a}.cpg-preview{position:relative;width:100%;aspect-ratio:1;max-width:500px;margin:0 auto;background:repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%,transparent 0% 50%) 50% / 20px 20px;border-radius:8px;overflow:hidden;cursor:crosshair}.cpg-grid-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.cpg-grid-svg line{stroke:#ffffff1a;stroke-width:.5}.cpg-clipped-element{position:absolute;top:0;left:0;width:100%;height:100%;transition:clip-path .1s ease}.cpg-polygon-editor{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.cpg-polygon-svg{position:absolute;top:0;left:0;width:100%;height:100%}.cpg-point{position:absolute;width:20px;height:20px;background:#fff;border:2px solid var(--info-color);border-radius:50%;transform:translate(-50%,-50%);cursor:move;pointer-events:auto;z-index:10;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,box-shadow .1s ease}.cpg-point:hover{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 10px #3b82f680}.cpg-point.selected{background:var(--info-color);transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 15px #3b82f6b3}.cpg-point-label{font-size:.65rem;font-weight:700;color:var(--info-color)}.cpg-point.selected .cpg-point-label{color:#fff}.cpg-circle-editor,.cpg-ellipse-editor{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.cpg-circle-svg,.cpg-ellipse-svg{position:absolute;top:0;left:0;width:100%;height:100%}.cpg-center-point{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--info-color);border-radius:50%;transform:translate(-50%,-50%)}.cpg-output{background:#ffffff14;border-radius:12px;padding:1.25rem;border:2px solid rgba(255,255,255,.25)}.cpg-output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.cpg-output-header h3{font-size:1rem;font-weight:600;color:#e0e0e0;margin:0}.cpg-copy-btn{padding:.5rem 1rem;background:var(--info-color);border:none;border-radius:6px;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.cpg-copy-btn:hover{background:#2563eb;transform:translateY(-1px)}.cpg-copy-btn.copied{background:var(--success)}.cpg-code{background:#0000004d;border-radius:8px;padding:1rem;margin:0;overflow-x:auto}.cpg-code code{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.85rem;color:#a5d6ff;white-space:pre-wrap;word-break:break-all}.cpg-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;max-width:var(--tool-container-max-width, 1600px);margin:2rem auto 0}.cpg-info-card{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.cpg-info-card h3{font-size:1.1rem;font-weight:600;color:#fff;margin-bottom:.75rem}.cpg-info-card h4{font-size:.95rem;font-weight:600;color:#e0e0e0;margin:1rem 0 .5rem}.cpg-info-card p{color:#a0a0b0;font-size:.875rem;line-height:1.6}.cpg-info-card code{background:#3b82f633;padding:.15rem .4rem;border-radius:4px;color:var(--info-color);font-size:.85rem}.cpg-info-card ul{list-style:none;padding:0;margin:0}.cpg-info-card li{color:#a0a0b0;font-size:.875rem;padding:.5rem 0 .5rem 1.25rem;position:relative}.cpg-info-card li:before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;background:var(--info-color);border-radius:50%;transform:translateY(-50%)}.cpg-info-card li strong{color:#e0e0e0}.cpg-cta{max-width:800px;margin:2rem auto 0;text-align:center;background:linear-gradient(135deg,var(--info-color) 0%,#8b5cf6 100%);border-radius:16px;padding:3rem 2rem}.cpg-cta h2{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:.75rem}.cpg-cta p{color:#ffffffe6;font-size:1.1rem;margin-bottom:1.5rem;max-width:500px;margin-left:auto;margin-right:auto}.cpg-cta-button{display:inline-block;padding:1rem 2.5rem;background:#fff;color:var(--info-color);font-size:1.1rem;font-weight:600;text-decoration:none;border-radius:8px;transition:all .3s ease}.cpg-cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0000004d}@media (max-width: 1023px){.cpg-main{grid-template-columns:1fr}.cpg-controls{order:2}.cpg-preview-section{order:1}}@media (max-width: 640px){.cpg-container{padding:1rem}.cpg-header h1{font-size:1.75rem}.cpg-preset-grid{grid-template-columns:repeat(3,1fr)}.cpg-point-inputs{flex-direction:column;gap:.25rem}.cpg-info{grid-template-columns:1fr}.cpg-cta{padding:2rem 1.5rem}.cpg-cta h2{font-size:1.5rem}}