/* ── 見積画面の中（#psq-app-root） ─────────────────────────── */

/* 見出しと料金の目安 */
#psq-app-root .psw-step2-header { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--psq-border, #e5e7eb); }
#psq-app-root .psw-step2-header .step-title { margin-bottom: 6px !important; }
#psq-app-root .psw-step2-file-guide { align-items: center !important; }
#psq-app-root .psw-step2-file-guide .qui-badge { color: #374151 !important; font-weight: 600 !important; }

/* 2列: 左=道具と画像、右=設定カード（UVDTF・DTF と同じ） */
#psq-app-root .gen-container.psw-gen-grid {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important; grid-template-areas: none !important;
    gap: 16px !important; align-items: start !important;
}
#psq-app-root .psw-gen-left { min-width: 0; }
#psq-app-root .psw-gen-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: 16px; }
#psq-app-root .psw-gen-side > .qui-card { margin: 0 !important; }
@media (max-width: 899px) {
    #psq-app-root .gen-container.psw-gen-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    #psq-app-root .psw-gen-side { position: static; }
}

/* ツールバー（画像の上に1段） */
#psq-app-root .psw-gen-toolbar.qui-toolbar { margin: 0 0 8px !important; }
#psq-app-root .psw-tool-group { display: inline-flex; align-items: center; gap: 0.3rem; }
#psq-app-root .psw-tool-divider { width: 1px; align-self: stretch; margin: 0.1rem 0.15rem; background: #e2e8f0; }
#psq-app-root .psw-tool-divider[hidden], #psq-app-root .psw-ai-tool-slot[hidden] { display: none !important; }
#psq-app-root .psw-gen-toolbar .psw-preview-bg-toolbar { display: inline-flex !important; flex-wrap: nowrap !important; gap: 0.3rem !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; position: relative; }
#psq-app-root .psw-gen-toolbar .psw-preview-bg-btn,
#psq-app-root .psw-gen-toolbar .psw-tool-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative;
    width: var(--qui-tap) !important; height: var(--qui-tap) !important; min-width: var(--qui-tap) !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 2px solid #d1d5db !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
#psq-app-root .psw-gen-toolbar .psw-tool-btn { border-width: 1px !important; background: #fff !important; color: #374151 !important; }
#psq-app-root .psw-gen-toolbar .psw-tool-btn:hover { border-color: var(--qui-accent) !important; color: var(--qui-accent) !important; background: var(--qui-accent-weak) !important; }
#psq-app-root .psw-gen-toolbar .psw-tool-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#psq-app-root .psw-gen-toolbar .psw-preview-bg-btn.active { border-color: var(--qui-accent) !important; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25) !important; }
#psq-app-root .psw-swatch-checker { background-color: #fff !important; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%) !important; background-size: 10px 10px !important; background-position: 0 0,0 5px,5px -5px,-5px 0 !important; }
#psq-app-root .psw-swatch-black { background: #111827 !important; }
#psq-app-root .psw-swatch-color { background: linear-gradient(135deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6) !important; }
/* 色選択の入力は見せない（ボタンから開く） */
#psq-app-root .psw-gen-toolbar .psw-preview-color-input { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none; }
#psq-app-root .qui-toolbar.is-locked > .psw-ai-tool-slot { opacity: 1 !important; pointer-events: auto !important; }

/* AI補正ボタン: 塗りつぶし＋グラデーション、周囲が脈打つように光り、✦がきらめく（UVDTF・DTF と同じ） */
#psq-app-root .psw-gen-toolbar .psw-ai-tool,
#psq-app-root .psw-gen-toolbar .psw-ai-tool:hover {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative;
    width: auto !important; height: 2.25rem !important; min-width: 6.25rem !important; padding: 0 0.85rem !important; gap: 0.3rem !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; white-space: nowrap !important; cursor: pointer;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%) !important;
    color: #fff !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important;
    animation: psw-ai-glow 1.8s ease-in-out infinite;
}
#psq-app-root .psw-gen-toolbar .psw-ai-tool:hover { filter: brightness(1.08); }
#psq-app-root .psw-gen-toolbar .psw-ai-tool svg { width: 1.05rem !important; height: 1.05rem !important; fill: #fff !important; stroke: none !important; animation: psw-ai-twinkle 1.6s ease-in-out infinite; transform-origin: center; filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
#psq-app-root .psw-gen-toolbar .psw-ai-tool [data-label] { font-variant-numeric: tabular-nums; color: #fff !important; }
#psq-app-root .psw-gen-toolbar .psw-ai-tool::before {
    content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%) no-repeat;
    background-size: 250% 100%; animation: psw-ai-sweep 2.2s ease-in-out infinite;
}
@keyframes psw-ai-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55), 0 2px 8px rgba(99, 102, 241, 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0), 0 0 18px 4px rgba(217, 70, 239, 0.55); }
}
@keyframes psw-ai-sweep { 0% { background-position: 150% 0; } 55%, 100% { background-position: -100% 0; } }
@keyframes psw-ai-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.3) rotate(18deg); opacity: 0.85; } }
#psq-app-root .psw-gen-toolbar .psw-ai-tool.is-busy, #psq-app-root .psw-gen-toolbar .psw-ai-tool.is-busy svg { animation: none; }
#psq-app-root .psw-gen-toolbar .psw-ai-tool.is-busy::before { display: none; }
@media (prefers-reduced-motion: reduce) {
    #psq-app-root .psw-gen-toolbar .psw-ai-tool, #psq-app-root .psw-gen-toolbar .psw-ai-tool svg { animation: none; }
    #psq-app-root .psw-gen-toolbar .psw-ai-tool::before { display: none; }
}
@media (max-width: 640px) {
    #psq-app-root .psw-gen-toolbar .psw-ai-tool-slot { order: -2; }
    #psq-app-root .psw-gen-toolbar .psw-ai-divider { order: -1; }
    #psq-app-root .psw-gen-toolbar .psw-ai-tool, #psq-app-root .psw-gen-toolbar .psw-ai-tool:hover { height: 2.5rem !important; }
    #psq-app-root .psw-gen-toolbar.qui-toolbar.qui-more-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
    #psq-app-root .psw-gen-toolbar.qui-toolbar.qui-more-left { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
    #psq-app-root .psw-gen-toolbar.qui-toolbar.qui-more-left.qui-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent); }
    #psq-app-root .psw-gen-toolbar .qui-toolbar-spacer { display: none !important; }
}

/* キャンバス: 寸法線の分だけ上と右に余白を取る */
#psq-app-root .psw-gen-left #previewContainer { min-height: 420px; }
#psq-app-root #previewContainer.has-dimension-lines { padding: 2rem 2.5rem 1rem 1rem !important; }
#psq-app-root #previewContainer.black-bg .qui-dim-line, #psq-app-root #previewContainer.black-bg .qui-dim-ext { stroke: #a5b4fc; }
#psq-app-root #previewContainer.black-bg .qui-dim-arrow { fill: #a5b4fc; }
@media (max-width: 640px) {
    #psq-app-root .psw-gen-left #previewContainer { min-height: 280px; }
    #psq-app-root #previewContainer.has-dimension-lines { padding: 1.8rem 2.1rem 0.6rem 0.6rem !important; }
}

/* 状態カード */
#psq-app-root .psw-status-card .psw-status-file { margin: 0 0 0.4rem !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #111827 !important; overflow-wrap: anywhere; }

/* カット形状カード（旧パネルの枠は外す） */
#psq-app-root .psw-shape-card .psw-gen-shape-panel { padding: 0 !important; border: 0 !important; background: none !important; margin: 0 !important; }
#psq-app-root .psw-shape-card .gen-shape-grid { gap: 6px !important; }
#psq-app-root .psw-shape-card .gen-shape-btn { height: 64px !important; padding: 6px 3px !important; border-radius: 8px !important; }
#psq-app-root .psw-shape-card .gen-shape-btn svg { width: 22px !important; height: 22px !important; margin-bottom: 3px !important; }
#psq-app-root .psw-shape-card .gen-shape-label { font-size: 11px !important; }

/* 背景カード */
#psq-app-root .psw-bg-card.is-busy .qui-seg { opacity: 0.6 !important; pointer-events: none !important; }
#psq-app-root .psw-bg-card .psw-hole-level-control { margin: 0.6rem 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#psq-app-root .psw-bg-card .psw-hole-level-hint { font-size: 11px !important; line-height: 1.5 !important; }

/* サイズカード（1列にまとめる） */
#psq-app-root .psw-size-card .gen-size-input { display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "size-label" "size-inputs" "size-limit" "size-dpi" !important; gap: 8px !important; }
#psq-app-root .psw-size-card .gen-size-input > .qui-card-head { grid-area: size-label; margin: 0 !important; }
#psq-app-root .psw-dim-toggle { display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; margin: 0 0 0 auto !important; font-size: 0.75rem !important; font-weight: 600 !important; color: #6b7280 !important; cursor: pointer !important; white-space: nowrap !important; }
#psq-app-root .psw-dim-toggle input { width: 1rem !important; height: 1rem !important; margin: 0 !important; accent-color: #4f46e5; }

/* 余白・角丸・輪郭カード（旧パネルの枠は外す） */
#psq-app-root .psw-controls-card .gen-controls { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 !important; border: 0 !important; background: none !important; }

/* 外側の線・色を変える */
#psq-app-root .psw-outline-card.is-busy .qui-seg { opacity: 0.6 !important; pointer-events: none !important; }
#psq-app-root .psw-recolor-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin: 0 0 0.5rem !important; }
#psq-app-root .psw-recolor-pick { flex: 0 0 auto !important; min-height: 2.5rem !important; padding: 0 0.8rem !important; border: 1px solid #a5b4fc !important; border-radius: 10px !important; background: #eef2ff !important; color: #3730a3 !important; font-size: 0.82rem !important; font-weight: 700 !important; white-space: nowrap !important; cursor: pointer !important; }
#psq-app-root .psw-recolor-pick[aria-pressed="true"] { background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; }
#psq-app-root .psw-recolor-from { display: inline-block !important; flex: 0 0 auto !important; width: 2.5rem !important; height: 2.5rem !important; border-radius: 10px !important; border: 1px solid #d1d5db !important; }
#psq-app-root .psw-recolor-from.is-empty { background-color: #fff !important; background-image: linear-gradient(45deg, transparent 46%, #d1d5db 46%, #d1d5db 54%, transparent 54%) !important; }
#psq-app-root .psw-recolor-arrow { color: #9ca3af !important; font-weight: 700 !important; }
#psq-app-root .psw-recolor-card input.psw-recolor-to[type="color"] { display: inline-block !important; flex: 0 0 auto !important; width: 2.75rem !important; min-width: 2.75rem !important; height: 2.5rem !important; padding: 2px !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; cursor: pointer !important; }
#psq-app-root .psw-recolor-swatches { display: flex !important; flex-wrap: wrap !important; gap: 0.35rem !important; margin: 0 0 0.5rem !important; }
#psq-app-root .psw-recolor-swatches button { width: 1.9rem !important; height: 1.9rem !important; min-height: 0 !important; padding: 0 !important; border: 1px solid #d1d5db !important; border-radius: 50% !important; cursor: pointer !important; }
@media (pointer: coarse) { #psq-app-root .psw-recolor-swatches button { width: 2.4rem !important; height: 2.4rem !important; } }
#psq-app-root .psw-recolor-tol { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin: 0 0 0.35rem !important; font-size: 0.78rem !important; color: #4b5563 !important; font-weight: 600 !important; }
#psq-app-root .psw-recolor-tol > span { flex: 0 0 auto !important; white-space: nowrap !important; }
#psq-app-root .psw-recolor-card input[type="range"][data-recolor-tol] { -webkit-appearance: auto !important; appearance: auto !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 1.5rem !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; accent-color: #4f46e5 !important; }
#psq-app-root .psw-recolor-actions { display: flex !important; gap: 0.5rem !important; justify-content: flex-end !important; }
#psq-app-root .psw-recolor-actions button { min-height: 2.75rem !important; padding: 0 1rem !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; background: #fff !important; color: #374151 !important; font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important; }
#psq-app-root .psw-recolor-actions button[hidden] { display: none !important; }
#psq-app-root .psw-recolor-actions .psw-recolor-apply { border-color: #4f46e5 !important; background: #4f46e5 !important; color: #fff !important; }
#psq-app-root .psw-recolor-actions .psw-recolor-apply:disabled { opacity: 0.45 !important; cursor: default !important; }
#psq-app-root .psw-recolor-card.is-busy .psw-recolor-actions { opacity: 0.6 !important; pointer-events: none !important; }
#psq-app-root #previewContainer.is-picking-color, #psq-app-root #previewContainer.is-picking-color * { cursor: crosshair !important; }
#psq-app-root canvas.psw-recolor-preview { position: absolute !important; z-index: 3 !important; display: block !important; max-width: none !important; pointer-events: none !important; }
#psq-app-root canvas.psw-recolor-preview[hidden] { display: none !important; }
#psq-app-root .qui-help-pop > span { display: block !important; margin: 0 0 0.45rem !important; }
#psq-app-root .qui-help-pop > span:last-child { margin-bottom: 0 !important; }

/* Product-specific integration of the shared label/sticker editing layout. */
#psq-app-root .psw-gen-grid .psw-gen-left { position: sticky; top: 16px; min-width: 0; }
#psq-app-root .psw-gen-grid .psw-gen-side { min-width: 0; }
#psq-app-root .psw-gen-grid .gen-shape-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#psq-app-root .psw-gen-grid .psw-gen-shape-panel { margin: 0; padding: 0; border: 0; }
#psq-app-root .psw-gen-grid .psw-gen-toolbar { position: relative; z-index: 2; }
#psq-app-root .psw-gen-grid #previewContainer { position: relative; top: auto; width: 100%; height: min(65vh, 700px); margin: 0; }
#psq-app-root .psw-gen-grid .psw-size-card .gen-size-input { display: block !important; margin: 0; padding: 0; border: 0; }
#psq-app-root .psw-gen-grid .psw-size-card .input-group { display: flex; gap: 12px; }
#psq-app-root .psw-gen-grid .psw-size-card .input-wrapper { min-width: 0; flex: 1; }
#psq-app-root .psw-gen-grid .psw-size-card .dpi-display { display: block; margin: 8px 0 0; }
#psq-app-root .psw-gen-grid .psw-manual-background { margin: 0; }
#psq-app-root .psw-gen-grid .psw-edit-alerts { grid-column: 1 / -1; }
#psq-app-root .psw-gen-grid .psw-edit-alerts > [hidden] { display: none; }
#psq-app-root .psw-gen-toolbar #pswPreviewZoom { position: static; inset: auto; font-size: 22px !important; }
#psq-app-root .psw-gen-grid .psw-cutline-legend { z-index: 1; }
#psq-app-root.psw-inline-background-active .psw-gen-toolbar { visibility: hidden; }
#psq-app-root .psw-gen-grid .gen-preview-content { max-width: 100%; max-height: 100%; }
#psq-app-root.psw-inline-background-active .psw-gen-left { position: static; }
#psq-app-root.psw-inline-background-active .psw-gen-grid #previewContainer { display: block; height: auto !important; min-height: 0 !important; overflow: visible; }
@media (max-width: 899px) {
    #psq-app-root .psw-gen-grid .psw-gen-left { position: static; }
    #psq-app-root .psw-gen-grid #previewContainer { height: min(52vh, 480px); min-height: 280px; }
    #psq-app-root .psw-gen-grid .psw-gen-side { width: 100%; }
}