.hcg-app{margin-bottom: 2rem;}
.hcg-viewport{width: 100%;max-width: 100%;aspect-ratio: 1;max-height: min(90vmin,520px);background: var(--surface-muted,#f1f5f9);border-radius: 12px;overflow: hidden;display: flex;align-items: center;justify-content: center;border: 1px solid var(--border,#e2e8f0);}
.hcg-viewport canvas{width: 100%;height: 100%;object-fit: contain;display: block;}
.hcg-controls{display: grid;grid-template-columns: 1fr auto auto auto;gap: 0.75rem 1rem;align-items: end;margin-top: 1rem;padding: 1rem;background: var(--surface,#fff);border-radius: 12px;border: 1px solid var(--border,#e2e8f0);}
.hcg-field{display: flex;flex-direction: column;gap: 0.35rem;}
.hcg-field label{font-size: 0.75rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em;color: var(--text-muted,#64748b);}
.hcg-field input[type="range"]{width: 100%;min-width: 80px;accent-color: var(--primary,#2563eb);}
.hcg-field input[type="color"]{width: 2.5rem;height: 2.25rem;padding: 2px;cursor: pointer;border: 1px solid var(--border,#e2e8f0);border-radius: 8px;background: var(--surface,#fff);}
.hcg-field select{min-width: 5rem;padding: 0.5rem 0.75rem;font-size: 0.9375rem;color: var(--text-main,#334155);background: var(--surface,#fff);border: 1px solid var(--border,#e2e8f0);border-radius: 8px;}
.hcg-value{font-size: 0.875rem;font-weight: 600;color: var(--text-main,#334155);}
.hcg-actions{display: flex;gap: 0.5rem;align-items: flex-end;}
.hcg-btn{padding: 0.6rem 1.25rem;font-size: 0.9375rem;font-weight: 500;border-radius: 10px;cursor: pointer;transition: background 0.2s,color 0.2s,border-color 0.2s;border: 1px solid transparent;}
.hcg-btn-primary{background: var(--primary,#2563eb);color: #fff;border-color: var(--primary,#2563eb);}
.hcg-btn-primary:hover{background: var(--primary-dark,#1d4ed8);border-color: var(--primary-dark,#1d4ed8);}
.hcg-btn-secondary{background: var(--surface,#fff);color: var(--text-main,#334155);border-color: var(--border,#e2e8f0);}
.hcg-btn-secondary:hover{background: var(--surface-muted,#f1f5f9);border-color: var(--text-muted,#cbd5e1);}
.hcg-stats{display: flex;flex-wrap: wrap;gap: 1rem;margin-top: 0.75rem;padding: 0.75rem 1rem;font-size: 0.875rem;color: var(--text-muted,#64748b);background: var(--surface-muted,#f8fafc);border-radius: 10px;border: 1px solid var(--border,#e2e8f0);}
.hcg-stat strong{color: var(--text-main,#334155);margin-left: 0.25rem;}
.hcg-note{margin-top: 1.25rem;padding: 1rem;font-size: 0.9375rem;line-height: 1.5;color: var(--text-muted,#64748b);background: var(--surface-muted,#f8fafc);border-radius: 10px;border-left: 4px solid var(--primary,#2563eb);}
.hcg-note p{margin: 0;}
.hcg-note sup{font-size: 0.7em;}
@media (max-width: 639px){.hcg-controls{grid-template-columns: 1fr 1fr;}.hcg-actions{grid-column: 1 / -1;}}
@media (min-width: 640px){.hcg-controls{grid-template-columns: 1fr auto auto auto auto;}.hcg-field:first-child{min-width: 120px;}}