.fpp-root { font-family: 'BIZ UDGothic', 'M PLUS Rounded 1c', sans-serif; }
/* キャンバスが全画面 */
.fpp-root #fpp-canvas-wrap { position: absolute; inset: 0; }
.fpp-root canvas#fpp-main { display: block; cursor: crosshair; touch-action: none; }
.fpp-root canvas#fpp-overlay { position: absolute; top:0; left:0; pointer-events: none; }
/* 左下フローティングパネル — 2段構成 */
.fpp-root #fpp-toolbar {
  position: absolute; bottom: 16px; left: 16px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 10;
}
/* 共通パネル行 */
.fpp-tb-row {
  display: flex; gap: 5px; align-items: center;
  background: rgba(20,20,20,0.80);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 5px 8px;
}
/* 上段: 色スウォッチ */
.fpp-cp-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; transition: transform .1s; }
.fpp-cp-swatch:hover { transform: scale(1.2); }
.fpp-cp-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
.fpp-brush-btn { min-width: 48px; }
.fpp-brush-btn.active { background: rgba(100,70,200,0.85); color: #fff; border-color: #9977ee; }
/* 色矢印区切り */
.fpp-color-arrow {
  font-size: 13px; color: rgba(255,255,255,0.35);
  flex-shrink: 0; user-select: none; padding: 0 2px;
}
/* 選択中2色プレビュー */
.fpp-root #fpp-color-preview {
  display: flex; align-items: center; gap: 3px; flex-shrink: 0;
}
.fpp-root #fpp-preview-grad {
  width: 32px; height: 14px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
/* 下段: スライダー・ボタン */
input[type=range] { width: 80px; accent-color: #9977dd; cursor: pointer; flex-shrink: 0; }
.fpp-val { font-size: 11px; color: #bbb; min-width: 22px; flex-shrink: 0; }
.fpp-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.15); flex-shrink: 0; margin: 0 1px; }
.fpp-btn {
  padding: 4px 7px; font-size: 11px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  background: transparent;
  color: #ccc; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.fpp-btn:hover { background: rgba(255,255,255,0.1); }
.fpp-tool-btn.active { background: rgba(100,70,200,0.85); color: #fff; border-color: #9977ee; }
.fpp-bg-btn { padding: 3px 5px; font-size: 13px; }
.fpp-bg-btn.active { background: rgba(255,255,255,0.15); }
.fpp-root #fpp-hint { position: absolute; bottom: 10px; right: 12px; font-size: 11px; color: #555; pointer-events: none; }