#gcd-tool [hidden] { display: none !important; }
.gcd-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.gcd-controls, .gcd-preview { min-width: 0; }
.gcd-controls label { display: block; margin: 10px 0; }
.gcd-controls select, .gcd-controls textarea, .gcd-controls input:not([type="checkbox"]) { width: 100%; max-width: 100%; box-sizing: border-box; }
.gcd-controls textarea { resize: vertical; }
.gcd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.gcd-controls input[type="color"] { height: 44px; }
.gcd-preview { position: sticky; top: 12px; text-align: center; }
.gcd-preview canvas { display: block; max-width: 100%; max-height: 65vh; width: auto; height: auto; margin: auto; border-radius: 8px; }
#gcd-lines { display: grid; grid-template-columns: minmax(0, 1fr); }
#gcd-lines button { white-space: normal; text-align: left; overflow-wrap: anywhere; }
.gcd-controls output { font-weight: 700; }
@media (max-width: 800px) {
  .gcd-layout { display: flex; flex-direction: column; }
  .gcd-controls, .gcd-preview { width: 100%; }
  .gcd-preview { order: -1; position: sticky; top: 0; z-index: 2; background: var(--card, #fff); padding: 6px 0; max-height: 35vh; box-sizing: border-box; }
  .gcd-preview canvas { max-height: calc(35vh - 44px); }
  .gcd-preview h2 { display: none; }
  #gcd-info { margin: 4px 0; font-size: 12px; line-height: 16px; }
  .gcd-grid { gap: 8px; }
}

.gcd-group > summary { cursor: pointer; }
.gcd-controls select, .gcd-controls input[type="text"], .gcd-controls textarea { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-family: inherit; background: var(--card, #fff); color: inherit; }