/* Prompt tweaks — extracted from components.css (structural). */

@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width:600px){
}
@media (max-width: 768px){
}
@media (max-width: 640px){
}
@media (max-width: 480px){
}
@media (max-width: 900px){
}
@media (max-width:768px){
}
@media (max-width:640px){
}
@media (max-width:480px){
}
@media (max-width: 900px){
}
@media (max-width: 640px){
}
@media (min-width: 901px){
}
@media (max-width:768px){
}
@media (max-width: 900px){
}
@media (max-width:640px){
}
@media (max-width: 640px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 1100px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (min-width: 641px) and (max-width: 1024px){
}
.pt-bg-opt.active { box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
.pt-btn-opt.active { box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
@media (min-width: 769px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (min-width: 901px){
}
@media (max-width: 768px){
}
@media (max-width: 768px){
}
@media (max-width: 1100px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (max-width: 480px){
}
@media (max-width: 768px){
}
@media (max-width: 1024px){
}
@media (max-width: 768px){
}
@media (min-width: 641px) and (max-width: 1024px){
}
.pt-bg-preview.pv-rose { background: radial-gradient(ellipse at top right, rgba(251,113,133,0.5), transparent 60%), radial-gradient(ellipse at bottom left, rgba(253,164,175,0.4), transparent 60%), #FFF8FA; }
.pt-bg-preview.pv-sage { background: radial-gradient(ellipse at top right, rgba(110,231,183,0.55), transparent 60%), radial-gradient(ellipse at bottom left, rgba(167,243,208,0.45), transparent 60%), #F6FAF7; }
.pt-bg-preview.pv-indigo { background: radial-gradient(ellipse at top right, rgba(165,180,252,0.6), transparent 60%), radial-gradient(ellipse at bottom left, rgba(199,210,254,0.5), transparent 60%), #F6F7FC; }
.pt-bg-preview.pv-sand { background: radial-gradient(ellipse at top right, rgba(254,215,170,0.7), transparent 60%), radial-gradient(ellipse at bottom left, rgba(253,230,138,0.5), transparent 60%), #FBF7EE; }
.pt-bg-preview.pv-sky { background: radial-gradient(ellipse at top right, rgba(125,211,252,0.65), transparent 60%), radial-gradient(ellipse at bottom left, rgba(186,230,253,0.55), transparent 60%), #F4F9FC; }
.pt-bg-preview.pv-cream { background: radial-gradient(ellipse at top right, rgba(254,243,199,0.7), transparent 60%), radial-gradient(ellipse at bottom left, rgba(255,237,213,0.55), transparent 60%), #FDFCF6; }
.pt-bg-preview.pv-ash { background: radial-gradient(ellipse at top right, rgba(203,213,225,0.6), transparent 60%), radial-gradient(ellipse at bottom left, rgba(226,232,240,0.5), transparent 60%), #F7F7F9; }
.pt-bg-preview.pv-meadow { background: radial-gradient(ellipse at top right, rgba(187,247,208,0.7), transparent 60%), radial-gradient(ellipse at bottom left, rgba(254,240,138,0.4), transparent 60%), #F4FAF6; }
.pt-bg-preview.pv-peach { background: radial-gradient(ellipse at top right, rgba(254,205,170,0.7), transparent 60%), radial-gradient(ellipse at bottom left, rgba(253,186,116,0.45), transparent 60%), #FFF8F4; }
.pt-bg-preview.pv-frost { background: radial-gradient(ellipse at top right, rgba(207,250,254,0.7), transparent 60%), radial-gradient(ellipse at bottom left, rgba(186,230,253,0.5), transparent 60%), #F7FAFB; }
.pt-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
.pt-title { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; }
.pt-close { width: 28px; height: 28px; border-radius: 8px; background: var(--hover-subtle); border: none; font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.pt-close:hover { background: var(--ink); }
.pt-body { padding: 0 18px 18px; max-height: calc(100vh - 200px); overflow-y: auto; }
.pt-section { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 0 10px; }
.pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pt-bg-opt { background: none; border: 2px solid transparent; border-radius: 12px; padding: 4px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.pt-bg-opt:hover { transform: translateY(-1px); }
.pt-bg-opt.active { box-shadow: 0 0 0 4px var(--brand-amber-bg); }
.pt-bg-preview { height: 68px; border-radius: 9px; margin-bottom: 6px; position: relative; overflow: hidden; border: 1px solid var(--line-2); }
.pt-bg-label { font-size: 11.5px; font-weight: 600; text-align: center; letter-spacing: -0.005em; }
.pt-btn-opt { background: none; border: 2px solid transparent; border-radius: 12px; padding: 4px; cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.pt-btn-opt:hover { transform: translateY(-1px); }
.pt-btn-opt.active { box-shadow: 0 0 0 4px var(--brand-amber-bg); }
.pt-btn-preview { height: 38px; border-radius: 9px; margin: 8px auto 8px; width: 64px; background: var(--brand); }
.pt-btn-preview.pb-flat { background: var(--brand); }
.pt-btn-preview.pb-soft { background: var(--brand); box-shadow: 0 1px 2px rgba(180,83,9,0.18), 0 4px 12px -4px rgba(180,83,9,0.32); }
.pt-btn-preview.pb-glass { background: rgba(245,158,11,0.92); border: 1px solid rgba(245,158,11,0.5); background: rgba(255,180,0,0.92); border: 1px solid rgba(255,180,0,0.5); box-shadow: 0 1px 0 var(--white-50) inset; }
.pt-btn-preview.pb-outline { background: transparent; border: 1.5px solid var(--brand); }
.pt-btn-preview.pb-lifted { background: var(--brand); box-shadow: 0 2px 0 var(--cat-amber-deep), 0 4px 8px -2px rgba(180,83,9,0.28); }
.pt-btn-preview.pb-mono { background: var(--ink); }
.pt-bg-preview.pv-tokens { background: #fff; }
.pt-bg-preview.pv-tokens::before { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--cat-purple); filter: blur(6px); top: 6px; left: 10px; opacity: 0.85; }
.pt-bg-preview.pv-tokens::after { background: var(--cat-orange); content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-amber); filter: blur(6px); bottom: 6px; right: 10px; opacity: 0.85; }
.pt-bg-preview.pv-aurora { background: linear-gradient(180deg, var(--cat-lavender) 0%, #93C5FD 25%, #6EE7B7 55%, #FCD34D 80%, #FCA5A5 100%); }
.pt-bg-preview.pv-dawn { background: radial-gradient(ellipse at top, #FFE9CC, transparent 60%), radial-gradient(ellipse at bottom left, #FFD5E1, transparent 60%), radial-gradient(ellipse at bottom right, #E6E1FF, transparent 60%), #FFFAF5; }
.pt-bg-preview.pv-mesh { background: radial-gradient(circle at 20% 30%, rgba(139,92,246,0.55), transparent 60%), radial-gradient(circle at 85% 60%, rgba(14,165,233,0.5), transparent 60%), radial-gradient(circle at 50% 100%, rgba(16,185,129,0.4), transparent 60%), #F8F8FC; }
.pt-bg-preview.pv-sunrise { background: linear-gradient(135deg, #FFE4D0 0%, #FFEEE5 30%, #FBEAFF 65%, #F0E9FF 100%); }
.pt-bg-preview.pv-ocean { background: radial-gradient(ellipse at top left, rgba(56,189,248,0.6), transparent 60%), radial-gradient(ellipse at bottom right, rgba(99,102,241,0.5), transparent 60%), #F4F8FC; }
.pt-bg-preview.pv-gold { background: #FFFCF5; }
.pt-bg-preview.pv-gold::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-amber); filter: blur(7px); top: 8px; left: 10px; opacity: 0.85; }
.pt-bg-preview.pv-gold::after { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-amber-strong); filter: blur(7px); bottom: 6px; right: 10px; opacity: 0.85; }
.pt-bg-preview.pv-honey { background: radial-gradient(ellipse at top right, rgba(255,180,0,0.55), transparent 60%), radial-gradient(ellipse at bottom left, rgba(255,194,51,0.4), transparent 60%), #FFFBF2; }
.pt-bg-preview.pv-bubbles { background: #FAFBFD; position: relative; }
.pt-bg-preview.pv-bubbles::before { content: ""; position: absolute; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--cat-lavender), var(--cat-purple) 70%, transparent); filter: blur(2px); top: 6px; left: 8px; opacity: 0.85; }
.pt-bg-preview.pv-bubbles::after { background: radial-gradient(circle at 30% 30%, #FDE68A, var(--cat-orange) 70%, transparent); content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #FDE68A, var(--brand-amber) 70%, transparent); filter: blur(2px); bottom: 4px; right: 8px; opacity: 0.85; }
.pt-bg-preview.pv-confetti { background: #fff; position: relative; overflow: hidden; }
.pt-bg-preview.pv-confetti::before { background:
  radial-gradient(circle 4px at 12% 18%, var(--cat-purple) 100%, transparent 100%),
  radial-gradient(circle 4px at 32% 30%, var(--cat-pink) 100%, transparent 100%),
  radial-gradient(circle 4px at 52% 16%, var(--cat-teal) 100%, transparent 100%),
  radial-gradient(circle 4px at 72% 26%, var(--cat-orange) 100%, transparent 100%),
  radial-gradient(circle 4px at 88% 38%, var(--cat-sky) 100%, transparent 100%),
  radial-gradient(circle 4px at 18% 56%, #FB7185 100%, transparent 100%),
  radial-gradient(circle 4px at 42% 62%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 4px at 64% 52%, var(--cat-violet) 100%, transparent 100%),
  radial-gradient(circle 4px at 80% 70%, var(--cat-emerald) 100%, transparent 100%),
  radial-gradient(circle 4px at 22% 82%, var(--cat-indigo) 100%, transparent 100%),
  radial-gradient(circle 4px at 56% 88%, #F472B6 100%, transparent 100%),
  radial-gradient(circle 4px at 78% 90%, #2DD4BF 100%, transparent 100%); content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle 4px at 12% 18%, var(--cat-purple) 100%, transparent 100%),
  radial-gradient(circle 4px at 32% 30%, var(--cat-pink) 100%, transparent 100%),
  radial-gradient(circle 4px at 52% 16%, var(--cat-teal) 100%, transparent 100%),
  radial-gradient(circle 4px at 72% 26%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 88% 38%, var(--cat-sky) 100%, transparent 100%),
  radial-gradient(circle 4px at 18% 56%, #FB7185 100%, transparent 100%),
  radial-gradient(circle 4px at 42% 62%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 4px at 64% 52%, var(--cat-violet) 100%, transparent 100%),
  radial-gradient(circle 4px at 80% 70%, var(--cat-emerald) 100%, transparent 100%),
  radial-gradient(circle 4px at 22% 82%, var(--cat-indigo) 100%, transparent 100%),
  radial-gradient(circle 4px at 56% 88%, #F472B6 100%, transparent 100%),
  radial-gradient(circle 4px at 78% 90%, #2DD4BF 100%, transparent 100%); filter: blur(1px); opacity: 0.85; }
.pt-bg-preview.pv-geo { background: #FAFAFD; position: relative; overflow: hidden; }
.pt-bg-preview.pv-geo::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--cat-purple); filter: blur(2px); top: 8px; left: 8px; opacity: 0.75; }
.pt-bg-preview.pv-geo::after { background: var(--cat-orange); content: ""; position: absolute; width: 20px; height: 20px; border-radius: 4px; background: var(--brand-amber); filter: blur(2px); bottom: 8px; right: 10px; opacity: 0.75; transform: rotate(15deg); }
.pt-bg-preview.pv-crystal { background: #F8F9FE; position: relative; overflow: hidden; }
.pt-bg-preview.pv-crystal::before { content: ""; position: absolute; width: 32px; height: 36px; background: linear-gradient(135deg, #99F6E4, var(--cat-teal)); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); filter: blur(2px); top: 4px; left: 6px; opacity: 0.75; }
.pt-bg-preview.pv-crystal::after { content: ""; position: absolute; width: 28px; height: 36px; background: linear-gradient(135deg, #DDD6FE, var(--cat-purple)); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); filter: blur(2px); bottom: 4px; right: 8px; opacity: 0.75; }
.pt-bg-preview.pv-coins { background: #FFFCF5; position: relative; overflow: hidden; }
.pt-bg-preview.pv-coins::before { background:
  radial-gradient(circle 5px at 14% 20%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 32% 30%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 6px at 54% 18%, var(--cat-orange) 100%, transparent 100%),
  radial-gradient(circle 4px at 72% 32%, var(--brand-amber-strong) 100%, transparent 100%),
  radial-gradient(circle 5px at 88% 22%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 22% 50%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 6px at 46% 58%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 70% 52%, var(--cat-orange) 100%, transparent 100%),
  radial-gradient(circle 5px at 90% 62%, var(--brand-amber-strong) 100%, transparent 100%),
  radial-gradient(circle 4px at 18% 78%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 5px at 42% 86%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 4px at 66% 78%, var(--cat-orange) 100%, transparent 100%),
  radial-gradient(circle 5px at 88% 88%, var(--brand-amber) 100%, transparent 100%); content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle 5px at 14% 20%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 32% 30%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 6px at 54% 18%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 72% 32%, var(--brand-amber-strong) 100%, transparent 100%),
  radial-gradient(circle 5px at 88% 22%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 22% 50%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 6px at 46% 58%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 4px at 70% 52%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 5px at 90% 62%, var(--brand-amber-strong) 100%, transparent 100%),
  radial-gradient(circle 4px at 18% 78%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 5px at 42% 86%, var(--cat-yellow) 100%, transparent 100%),
  radial-gradient(circle 4px at 66% 78%, var(--brand-amber) 100%, transparent 100%),
  radial-gradient(circle 5px at 88% 88%, var(--brand-amber) 100%, transparent 100%); filter: blur(1.5px); opacity: 0.9; }
.pt-bg-preview.pv-pure { background: #fff; }
@media (min-width: 769px){
}
@media (max-width: 768px){
}