:root{--hpg-primary:var(--main-primary);--hpg-primary-hover:var(--main-primary-hover);--hpg-text:#1e293b;--hpg-text-muted:#64748b;--hpg-bg:#fff;--hpg-bg-hover:#f8fafc;--hpg-border:#e2e8f0;--hpg-border-hover:#cbd5e1;--hpg-radius:var(--main-radius);--hpg-radius-lg:var(--main-radius-lg);--hpg-shadow:0 1px 3px #0000001a;--hpg-shadow-lg:0 4px 12px #0000001a;--hpg-checkerboard:repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 50% / 16px 16px}._hpg-container{gap:var(--main-space-6);flex-direction:column;width:100%;max-width:1200px;margin:0 auto;display:flex}._hpg-layout{gap:var(--main-space-6);grid-template-columns:320px 1fr;align-items:start;display:grid}@media (max-width:900px){._hpg-layout{grid-template-columns:1fr}._hpg-settings{order:2}._hpg-preview-area{order:1}}@media (max-width:768px){._hpg-container{padding-left:1rem;padding-right:1rem}}._hpg-settings{gap:var(--main-space-4);flex-direction:column;display:flex}._hpg-section{background:var(--hpg-bg);border-radius:var(--hpg-radius-lg);padding:var(--main-space-5);border-style:solid;border-width:1px;border-color:var(--hpg-border);box-shadow:var(--hpg-shadow)}._hpg-section-title{align-items:center;gap:var(--main-space-2);font-size:var(--main-text-sm);color:var(--hpg-text);margin-bottom:var(--main-space-4);font-weight:600;display:flex}._hpg-section-title svg{color:var(--hpg-text-muted)}._hpg-upload-zone{border-style:dashed;border-width:2px;border-color:var(--hpg-border);border-radius:var(--hpg-radius);padding:var(--main-space-5);text-align:center;cursor:pointer;margin-bottom:var(--main-space-3);transition:border-color .15s}._hpg-upload-zone:hover,._hpg-upload-zone.dragover{border-color:var(--hpg-primary)}._hpg-upload-content{align-items:center;gap:var(--main-space-2);color:var(--hpg-text-muted);font-size:var(--main-text-xs);flex-direction:column;display:flex}._hpg-upload-content svg{color:var(--hpg-border-hover)}._hpg-upload-preview{justify-content:center;align-items:center;display:flex;position:relative}._hpg-upload-preview img{border-radius:var(--hpg-radius);max-width:100%;max-height:120px}._hpg-change-btn{padding:var(--main-space-1) var(--main-space-3);color:#fff;border-radius:var(--hpg-radius);font-size:var(--main-text-xs);cursor:pointer;background:#000000b3;border:none;position:absolute;bottom:4px;right:4px}._hpg-change-btn:hover{opacity:.9}._hpg-samples{align-items:center;gap:var(--main-space-2);flex-wrap:wrap;display:flex}._hpg-samples-label{font-size:var(--main-text-xs);color:var(--hpg-text-muted)}._hpg-sample-btns{gap:var(--main-space-2);display:flex}._hpg-sample-btn{padding:var(--main-space-1) var(--main-space-3);background:var(--hpg-bg-hover);border-style:solid;border-width:1px;border-color:var(--hpg-border);border-radius:var(--hpg-radius);font-size:var(--main-text-xs);color:var(--hpg-text-muted);cursor:pointer;transition:all .15s}._hpg-sample-btn:hover{border-color:var(--hpg-primary);color:var(--hpg-primary)}._hpg-shape-grid{gap:var(--main-space-2);grid-template-columns:repeat(6,1fr);display:grid}._hpg-shape-btn{padding:var(--main-space-2);background:var(--hpg-bg-hover);border-style:solid;border-width:1px;border-color:var(--hpg-border);border-radius:var(--hpg-radius);font-size:var(--main-text-sm);color:var(--hpg-text-muted);cursor:pointer;text-align:center;line-height:1;transition:all .15s}._hpg-shape-btn:hover{border-color:var(--hpg-primary);color:var(--hpg-primary)}._hpg-shape-btn.active{background:var(--hpg-primary);border-color:var(--hpg-primary);color:#fff}._hpg-param-row{justify-content:space-between;align-items:center;gap:var(--main-space-3);margin-bottom:var(--main-space-3);display:flex}._hpg-param-row:last-child{margin-bottom:0}._hpg-label{font-size:var(--main-text-xs);color:var(--hpg-text-muted);white-space:nowrap;min-width:70px;font-weight:500}._hpg-slider-group{align-items:center;gap:var(--main-space-3);flex:1;max-width:200px;display:flex}._hpg-slider{-webkit-appearance:none;appearance:none;background:var(--hpg-border);border-radius:3px;outline:none;flex:1;height:6px}._hpg-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--hpg-primary);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #6366f14d}._hpg-slider::-moz-range-thumb{background:var(--hpg-primary);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #6366f14d}._hpg-slider-val{min-width:40px;font-size:var(--main-text-xs);color:var(--hpg-primary);text-align:right;font-weight:600}._hpg-select{padding:var(--main-space-2) var(--main-space-3);background:var(--hpg-bg);border-style:solid;border-width:1px;border-color:var(--hpg-border);border-radius:var(--hpg-radius);font-size:var(--main-text-sm);color:var(--hpg-text);cursor:pointer;min-width:120px}._hpg-select:focus{border-color:var(--hpg-primary);outline:none}._hpg-color-picker{border-style:solid;border-width:1px;border-color:var(--hpg-border);border-radius:var(--hpg-radius);cursor:pointer;background:var(--hpg-bg);width:36px;height:36px;padding:2px}._hpg-bg-group{align-items:center;gap:var(--main-space-2);display:flex}._hpg-checkbox-label{font-size:var(--main-text-xs);color:var(--hpg-text-muted)}._hpg-checkbox{cursor:pointer;align-items:center;display:flex}._hpg-checkbox input{display:none}._hpg-checkmark{border-style:solid;border-width:2px;border-color:var(--hpg-border);border-radius:4px;width:18px;height:18px;transition:all .15s;position:relative}._hpg-checkbox input:checked+._hpg-checkmark{background:var(--hpg-primary);border-color:var(--hpg-primary)}._hpg-checkbox input:checked+._hpg-checkmark:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:2px;left:5px;transform:rotate(45deg)}._hpg-preset-grid{gap:var(--main-space-2);grid-template-columns:repeat(2,1fr);display:grid}._hpg-preset-grid-horizontal{grid-template-columns:repeat(5,1fr)}._hpg-presets-section{padding:var(--main-space-4)}._hpg-presets-section ._hpg-section-title{margin-bottom:var(--main-space-3)}._hpg-preset-btn{padding:var(--main-space-2) var(--main-space-3);background:var(--hpg-bg-hover);border-style:solid;border-width:1px;border-color:var(--hpg-border);border-radius:var(--hpg-radius);font-size:var(--main-text-xs);color:var(--hpg-text-muted);cursor:pointer;font-weight:500;transition:all .15s}._hpg-preset-btn:hover{border-color:var(--hpg-primary);color:var(--hpg-primary)}._hpg-preset-btn.active{background:var(--hpg-primary);border-color:var(--hpg-primary);color:#fff}@media (max-width:900px){._hpg-settings{flex-flow:wrap}._hpg-section{flex:1;min-width:280px}}@media (max-width:600px){._hpg-settings{flex-direction:column}._hpg-section{min-width:100%}._hpg-preset-grid-horizontal,._hpg-shape-grid{grid-template-columns:repeat(3,1fr)}}._hpg-preview-area{gap:var(--main-space-4);flex-direction:column;min-height:400px;display:flex}._hpg-empty-state{justify-content:center;align-items:center;gap:var(--main-space-4);background:var(--hpg-bg);border-radius:var(--hpg-radius-lg);border-style:solid;border-width:1px;border-color:var(--hpg-border);min-height:400px;box-shadow:var(--hpg-shadow);flex-direction:column;display:flex}._hpg-empty-state svg{color:var(--hpg-border-hover)}._hpg-empty-state p{font-size:var(--main-text-sm);color:var(--hpg-text-muted);margin:0}._hpg-canvas-wrapper{align-items:center;gap:var(--main-space-4);flex-direction:column;display:flex}._hpg-canvas-container{background:var(--hpg-checkerboard);box-shadow:var(--hpg-shadow-lg);border-radius:var(--hpg-radius);justify-content:center;align-items:center;max-width:100%;display:flex;position:relative;overflow:hidden}._hpg-canvas-container canvas{max-width:100%;max-height:600px;display:block}._hpg-cmyk-channels{align-items:center;gap:var(--main-space-2);justify-content:center;display:flex}._hpg-channel-toggle{cursor:pointer}._hpg-channel-toggle input{display:none}._hpg-channel-tag{border-radius:var(--hpg-radius);width:32px;height:32px;font-size:var(--main-text-xs);border-style:solid;border-width:2px;justify-content:center;align-items:center;font-weight:700;transition:all .15s;display:inline-flex}._hpg-channel-c{color:#00bcd4;background:#00bcd41a;border-color:#00bcd4}._hpg-channel-m{color:#e91e63;background:#e91e631a;border-color:#e91e63}._hpg-channel-y{color:#a68200;background:#ffc10726;border-color:#ffc107}._hpg-channel-k{color:#455a64;background:#455a641a;border-color:#455a64}._hpg-channel-toggle input:not(:checked)+._hpg-channel-tag{opacity:.3;background:0 0}@media (max-width:600px){._hpg-preview-area,._hpg-empty-state{min-height:300px}._hpg-canvas-container canvas{max-height:400px}}._hpg-actions{justify-content:center;align-items:center;gap:var(--main-space-3);display:flex}._hpg-btn{justify-content:center;align-items:center;gap:var(--main-space-2);padding:var(--main-space-3) var(--main-space-6);border-radius:var(--hpg-radius);font-size:var(--main-text-sm);cursor:pointer;font-weight:500;transition:all .15s;display:inline-flex}._hpg-btn:disabled{opacity:.5;cursor:not-allowed}._hpg-btn-primary{background:var(--hpg-primary);color:#fff;border:none;box-shadow:0 2px 8px #6366f140}._hpg-btn-primary:hover:not(:disabled){opacity:.9}._hpg-btn-secondary{background:var(--hpg-bg);border-style:solid;border-width:1px;border-color:var(--hpg-border);color:var(--hpg-text)}._hpg-btn-secondary:hover:not(:disabled){border-color:var(--hpg-border-hover);background:var(--hpg-bg-hover)}@media (max-width:480px){._hpg-actions{flex-direction:column}._hpg-btn{width:100%}}