/*
//** สไตล์หน้า Builder (หน้าแรก) สำหรับสร้างวงล้อ
//** รองรับหลายวงล้อ + พรีวิวฝั่งซ้าย + สลับแก้ไขทีละวงล้อ
*/
.rw-builder-wrap{
max-width: 100%;
width: 100%;
margin: 16px auto;
padding: 20px 24px;
background: linear-gradient(120deg, #b8ffea 0%, #d5e0ff 45%, #f7c7ff 100%);
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,.08);
box-sizing: border-box;
}

.rwb-layout{
display:grid;
grid-template-columns: minmax(420px, 1fr) minmax(320px, 0.55fr);
gap: 20px;
align-items: start;
}
.rwb-preview{
min-height: 860px;
background: rgba(255,255,255,0.9);
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
padding: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.rwb-form{
background: rgba(255,255,255,0.95);
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
padding: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.rwb-right-tabs{
display:flex;
gap:8px;
margin: 6px 0 12px;
}
.rwb-right-tab{
border:none;
background:#e5e7eb;
padding:6px 12px;
border-radius:999px;
font-weight:800;
cursor:pointer;
}
.rwb-right-tab.is-active{
background:#2563eb;
color:#fff;
}
.rwb-right-tab span{
background:#fff;
color:#111827;
padding:2px 6px;
border-radius:999px;
margin-left:6px;
font-size:11px;
}
.rwb-back-create{
margin-top:12px;
}

.rwb-preview-head{
display:flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}

.rwb-preview-actions{
display:flex;
gap: 8px;
align-items: center;
}

.rwb-preview-note{
margin: 8px 0 0;
color: #6b7280;
font-size: 12px;
}
.rwb-category-box{
margin-top: 12px;
padding: 12px;
border: 1px solid rgba(0,0,0,.06);
border-radius: 12px;
background: #fff;
}
.rwb-category-select{
width:100%;
max-width: 420px;
}
.rwb-desc-box{
margin-top: 12px;
padding: 12px;
border: 1px solid rgba(0,0,0,.06);
border-radius: 12px;
background: #fff;
}
.rwb-desc-label{
display:block;
font-weight:700;
margin-bottom: 6px;
}
.rwb-desc-input{
width:100%;
min-height: 140px;
resize: vertical;
}
.rwb-wheels{
--rwb-wheel-max: 280px;
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}

.rwb-wheels[data-count="1"]{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
.rwb-wheels[data-count="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rwb-wheels[data-count="3"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rwb-wheels[data-count="4"]{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

.rwb-wheel{
position: relative;
width: 100%;
max-width: var(--rwb-wheel-max);
margin: 0 auto;
background: transparent;
border-radius: 12px;
border: none;
padding: 0;
}
.rwb-wheel-title{
text-align:center;
font-weight:700;
font-size: 12px;
margin-bottom: 4px;
color:#111827;
}

.rwb-wheel.is-active{
outline: 2px solid #111827;
}
.rwb-wheel canvas{
width: 100%;
height: auto;
display: block;
}

.rwb-pointer{
position:absolute;
top: 50%;
right: -6px;
left:auto;
transform: translateY(-50%) rotate(-90deg);
width:0; height:0;
border-left:14px solid transparent;
border-right:14px solid transparent;
border-bottom:22px solid #111827;
filter: drop-shadow(0 4px 4px rgba(0,0,0,0.2));
}
.rwb-pointer.is-spinning{
animation: rwb-pointer-wiggle 0.12s ease-in-out infinite;
}
@keyframes rwb-pointer-wiggle{
0%{transform:translateY(-50%) rotate(-90deg)}
50%{transform:translateY(-50%) rotate(-96deg)}
100%{transform:translateY(-50%) rotate(-90deg)}
}

.rwb-wheel-result{
text-align:center;
font-weight:700;
font-size: 21px;
color:#111827;
margin-top: 4px;
min-height: 16px;
}

.rwb-spin-btn{
margin: 6px auto 0;
display:block;
}
.rwb-head h1{
margin: 0 0 6px;
font-weight: 800;
}
.rwb-sub{
margin: 0 0 12px;
color: #6b7280;
}

.rwb-wheel-editors{
display:flex;
flex-direction: column;
gap: 14px;
}

.rwb-editor{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:12px;
background:#f8fafc;
display:none;
}

.rwb-editor.is-active{
display:block;
}

.rwb-editor-head{
margin-bottom: 8px;
}

.rwb-editor-title{
margin: 0;
font-size: 16px;
}
.rwb-field{ margin-bottom: 14px; }
.rwb-field label{ display:block; font-weight:600; margin-bottom:6px; }
.rwb-field input[type="text"]{
width: 100%;
max-width: 520px;
}
.rwb-seg-list{ margin-bottom: 8px; }
.rwb-seg-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.rwb-seg-row input[type="text"]{
flex:1;
}
.rwb-seg-textarea{
width: 100%;
min-height: 280px;
resize: vertical;
}
.rwb-row-btns{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }
.rwb-desc{ color:#6b7280; font-size: 13px; }
.rwb-colors .rwb-grid{
display:grid;
grid-template-columns: repeat(4, minmax(120px, 1fr));
gap: 12px;
}
.rwb-inline{ display:flex; gap:8px; align-items:center; font-weight:600; }
.rwb-actions{
display:flex; align-items:center; gap:12px; flex-wrap: wrap;
}
.rwb-editor-actions{
margin: 10px 0 14px;
display:flex; gap:10px; align-items:center;
}
.rwb-status{
font-weight:700;
color:#10b981;
}
.rwb-status.is-error{
color:#ef4444;
}

.rwb-result{ margin-top:16px; }
.rwb-card{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
padding:14px;
background:#f8fafc;
}

.rwb-link-list{
display:flex;
flex-direction: column;
gap: 8px;
}

.rwb-link-item{
display:flex;
align-items:center;
gap:10px;
flex-wrap: wrap;
}

.rwb-link-item a{ word-break: break-all; }
.rwb-log{
margin-top: 16px;
}

.rwb-result-log{
border:1px dashed rgba(0,0,0,.12);
border-radius:10px;
padding:10px;
min-height: 60px;
background:#fff;
}

.rwb-log-item{
font-size: 13px;
padding: 4px 0;
}
.rwb-modal{
position: fixed;
inset: 0;
z-index: 9998;
}

.rwb-modal-backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
}

.rwb-modal-card{
position: absolute;
left: 50%;
top: 20%;
transform: translateX(-50%);
background: #fff;
border-radius: 12px;
padding: 16px 18px;
min-width: 260px;
box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.rwb-result-pop{
font-size: 28px;
font-weight: 800;
}

.rwb-modal-close{
position:absolute;
right: 10px;
top: 8px;
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
}

.rwb-modal-title{
font-weight:700;
margin-bottom: 8px;
}
.rwb-toast{
position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px);
background:#111827; color:#fff; padding:10px 14px; border-radius:8px;
opacity:0; transition:all .2s ease; z-index:9999; font-weight:600;
}
.rwb-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
@media (max-width: 960px){
.rwb-layout{ grid-template-columns: 1fr; }
.rwb-preview{ min-height: 640px; order: 2; }
.rwb-form{ order: 1; }
.rwb-wheels{ --rwb-wheel-max: 220px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
.rwb-colors .rwb-grid{ grid-template-columns: repeat(2, minmax(120px, 1fr)); }
.rwb-wheels{ --rwb-wheel-max: 180px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rwb-wheel.is-winner{
animation: rwb-pop 0.9s ease;
}
@keyframes rwb-pop{
0%{transform:scale(1)}
50%{transform:scale(1.05)}
100%{transform:scale(1)}
}
.rwb-confetti{
position:absolute;
width:6px;
height:10px;
top: -6px;
left: 50%;
opacity:0.9;
animation: rwb-fall 1.2s ease forwards;
}
@keyframes rwb-fall{
0%{transform:translateY(0) rotate(0deg)}
100%{transform:translateY(140px) rotate(260deg); opacity:0}
}
.rwb-toolbar{
display:flex;
flex-wrap: wrap;
gap: 8px;
align-items:center;
margin-bottom: 12px;
}
.rwb-tool{
background:#111827;
color:#fff;
border:none;
border-radius:999px;
padding:6px 12px;
font-weight:700;
cursor:pointer;
text-decoration:none;
}
.rwb-wheel-tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
margin: 6px 0 12px;
}
.rwb-wheel-tab{
border:1px solid rgba(0,0,0,.12);
background:#fff;
border-radius:999px;
padding:6px 12px;
font-weight:700;
cursor:pointer;
}
.rwb-wheel-tab.is-active{
background:#111827;
color:#fff;
border-color:#111827;
}
.rwb-presets{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:8px;
}
.rwb-presets .button{
border-radius:999px;
font-weight:700;
}
.rwb-editor-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
margin-bottom: 8px;
}
.rwb-editor-tabs{
display:flex;
gap:6px;
background:#f3f4f6;
padding:4px;
border-radius:999px;
}
.rwb-editor-tab{
border:none;
background:transparent;
padding:6px 12px;
border-radius:999px;
font-weight:800;
cursor:pointer;
}
.rwb-editor-tab.is-active{
background:#fff;
box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.rwb-count{
background:#ef4444;
color:#fff;
padding:2px 6px;
border-radius:999px;
font-size:11px;
margin-left:4px;
}
.rwb-tool-menu{
position: relative;
}
.rwb-menu-list{
position:absolute;
right:0;
top:100%;
background:#fff;
border:1px solid rgba(0,0,0,.1);
border-radius:8px;
padding:6px;
min-width: 180px;
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.rwb-menu-list a{
display:block;
padding:6px 8px;
color:#111827;
text-decoration:none;
}
.rwb-settings-modal{
position: fixed;
inset: 0;
z-index: 9999;
}
.rwb-settings-card{
position: absolute;
left: 50%;
top: 12%;
transform: translateX(-50%);
background: #fff;
border-radius: 12px;
padding: 16px 18px;
min-width: 320px;
box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.rwb-settings-tabs{
display:flex;
gap:8px;
margin-bottom: 10px;
justify-content:center;
border-bottom:1px solid rgba(0,0,0,.08);
}
.rwb-tab{
background:transparent;
border:none;
border-radius:0;
padding:8px 12px;
cursor:pointer;
font-weight:700;
border-bottom:3px solid transparent;
}
.rwb-tab.is-active{
background:transparent;
color:#111827;
border-bottom-color:#111827;
}
.rwb-settings-card{
width: 720px;
max-width: calc(100% - 24px);
padding: 18px 20px;
border-radius: 16px;
}
.rwb-setting-row{
display:grid;
grid-template-columns: 120px 1fr auto;
gap:10px;
align-items:center;
}
.rwb-range-value{
min-width: 32px;
text-align:right;
font-weight:700;
color:#111827;
display:inline-block;
background:#f3f4f6;
padding:4px 8px;
border-radius:8px;
}
.rwb-setting-row{
display:flex;
align-items:center;
gap:10px;
margin-bottom: 10px;
}
.rwb-setting-checks label{
display:block;
margin:6px 0;
}
.rwb-settings-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:10px;
}