.picker-card { overflow: hidden; }
.picker-workbench { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 24px; align-items: start; }
.picker-wheel-panel { display: grid; place-items: center; padding: 18px; border-radius: 22px; background: #fff8eb; border: 8px solid #18233b; box-shadow: 0 18px 0 #f97316; position: relative; }
.picker-wheel-wrap { width: min(100%, 430px); aspect-ratio: 1; position: relative; }
.picker-wheel-wrap::before { content: ''; position: absolute; z-index: 3; top: -13px; left: 50%; width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 28px solid #fb7185; transform: translateX(-50%); filter: drop-shadow(0 3px 0 #18233b); }
#picker-wheel { width: 100%; height: 100%; display: block; }
.picker-wheel__segments { transform-origin: 180px 180px; transition: transform 900ms cubic-bezier(.15,.75,.2,1); }
.picker-wheel__label { fill: #18233b; font-size: 11px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.picker-input-panel { display: grid; gap: 16px; }
.picker-input-panel .gt-field textarea { min-height: 240px; resize: vertical; line-height: 1.6; }
.picker-field-meta { display: flex; justify-content: space-between; gap: 12px; color: #64748b; font-size: .8rem; }
.picker-control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picker-checkbox { display: flex; align-items: flex-start; gap: 10px; color: #334155; font-size: .9rem; line-height: 1.4; }
.picker-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: #4f46e5; }
.picker-result { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: #18233b; color: #fff8eb; }
.picker-result__label { color: #fda4af; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.picker-result__value { min-height: 2rem; font-size: 1.4rem; font-weight: 800; overflow-wrap: anywhere; }
.picker-result__value[data-ready="true"] { color: #fde68a; }
.picker-history { margin: 0; padding-left: 1.4rem; color: #475569; font-size: .88rem; display: grid; gap: 5px; }
.picker-history:empty::after { content: 'No spins yet'; color: #94a3b8; list-style: none; margin-left: -1.4rem; }
.picker-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.picker-copy-output { width: 100%; min-height: 90px; margin-top: 10px; border-radius: 12px; border: 1px solid #cbd5e1; padding: 10px; font: inherit; }
.picker-privacy-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #eef2ff; color: #3730a3; font-size: .86rem; line-height: 1.5; }
.picker-note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.picker-note-grid div { padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.picker-note-grid strong { display: block; margin-bottom: 4px; color: #18233b; }
.picker-note-grid span { color: #64748b; font-size: .82rem; line-height: 1.45; }
@media (max-width: 860px) { .picker-workbench { grid-template-columns: 1fr; } .picker-wheel-panel { max-width: 560px; margin: 0 auto; width: 100%; } }
@media (max-width: 520px) { .picker-wheel-panel { padding: 10px; border-width: 5px; box-shadow: 0 10px 0 #f97316; } .picker-wheel__label { font-size: 9px; } .picker-control-row, .picker-note-grid { grid-template-columns: 1fr; } .picker-actions { display: grid; grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .picker-wheel__segments { transition-duration: 120ms; } }