body { font-family: Inter, sans-serif; }
    .tool-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 3px 12px rgba(0,0,0,.04);
    }
    /* canvas preview */
    #quoteCanvas {
      max-width: 100%;
      max-height: 320px;
      height: auto;
      width: auto;
      display: block;
      border-radius: 4px;
      box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    }
    /* swatch grid */
    .bg-grid { display: grid; grid-template-columns: repeat(11,1fr); gap: 4px; }
    .bg-swatch { aspect-ratio:1; border-radius:4px; cursor:pointer; border:2px solid transparent; transition:transform .1s,border-color .1s; }
    .bg-swatch:hover { transform:scale(1.1); }
    .bg-swatch.active { border-color:#10b981; }
    /* active states for pills/toggles */
    .fmt-pill.active { background:#d1fae5; border-color:#10b981; color:#065f46; }
    .tog.active { background:#d1fae5; border-color:#10b981; color:#065f46; }
    .dl-tab.active { background:#d1fae5; border-color:#10b981; color:#065f46; }
    @media(max-width:480px){ .bg-grid{ grid-template-columns:repeat(8,1fr); } #quoteCanvas{ max-height:320px; } }