/* TTB Color Picker styles */
.ttb-tool {
  max-width: 860px;
  margin: 24px auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color: #111827;
}
.ttb-header h2{margin:0 0 6px 0;font-size:1.5rem;font-weight:800}
.ttb-sub{margin:0 0 16px 0;color:#6b7280}
.ttb-mode-select{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.ttb-note{color:#6b7280;font-size:.9rem}
.ttb-btn{appearance:none;border:1px solid #3b82f6;background:#3b82f6;color:#fff;padding:10px 14px;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .05s ease, filter .15s ease, box-shadow .15s ease;box-shadow:0 6px 18px rgba(59,130,246,.25)}
.ttb-btn:hover{filter:brightness(1.05)}
.ttb-btn:active{transform:translateY(1px)}
.ttb-btn.ghost{background:transparent;color:#374151;border-color:#d1d5db;box-shadow:none}
.ttb-btn.alt{background:#10b981;border-color:#10b981;box-shadow:0 6px 18px rgba(16,185,129,.25)}
.ttb-btn.copy{background:#6b7280;border-color:#6b7280;box-shadow:0 6px 18px rgba(107,114,128,.25)}

.wheel-wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.sv-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

#ttb-image-upload{
  display:block;width:100%;max-width:100%;
  padding:14px 16px;border:2px dashed #9ca3af;border-radius:10px;background:#f9fafb;
  overflow:hidden;white-space:nowrap;color:#374151
}
#ttb-image-upload:hover,#ttb-image-upload:focus{border-color:#3b82f6;background:#f3f4f6;outline:none}
#ttb-image-upload::file-selector-button{
  background:#3b82f6;border:none;color:#fff;font-weight:600;padding:8px 12px;margin-right:12px;border-radius:6px;cursor:pointer
}
#ttb-image-upload::file-selector-button:hover{background:#2563eb}

#ttb-image-canvas{margin-top:10px;max-width:100%;border:1px solid #e5e7eb;display:none}

.ttb-color-output{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.ttb-color-output{grid-template-columns:1fr}}
.out-row{display:flex;align-items:center;gap:8px}
.out-row input{flex:1;border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.swatch-row{grid-column:1/-1;display:flex;align-items:center;gap:8px}
.swatch{display:inline-block;width:40px;height:40px;border-radius:8px;border:1px solid #d1d5db;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}

.recent-wrap{margin-top:14px}
.recents{display:flex;flex-wrap:wrap;gap:8px}
.recents .recent{width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;cursor:pointer}

.ttb-color-bubble{
  position:absolute;
  width:36px;height:36px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  pointer-events:none;
  display:none;
}