.wheel-page { width: min(calc(100% - 32px), 1180px); margin: 0 auto; padding: 32px 0 72px; }
.wheel-back { color: #666; text-decoration: none; font-size: .94rem; }
.wheel-heading { margin: 30px 0; }
.wheel-heading h1 { margin: 0 0 16px; font-size: clamp(2.3rem, 5vw, 4.4rem); letter-spacing: -.055em; line-height: 1.05; }
.wheel-heading p { max-width: 660px; color: #626262; line-height: 1.6; margin: 0; }
.wheel-workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 28px; }
.wheel-editor, .wheel-result { min-width: 0; border: 1px solid #e5e5e5; border-radius: 24px; padding: 26px; }
.wheel-result { position: sticky; top: 20px; background: #f8faff; }
.wheel-section-heading, .wheel-result-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.wheel-section-heading h2 { font-size: 1.5rem; margin: 0; }
#segment-count { color: #6a6a6a; white-space: nowrap; font-size: .875rem; }
.wheel-label { display: block; margin: 24px 0 8px; font-size: .875rem; font-weight: 650; }
.wheel-page input, .wheel-page select, .wheel-page button { font: inherit; min-width: 0; }
.wheel-page input:not([type=range]), .wheel-page select { border: 1px solid #d6d9df; background: #fff; border-radius: 10px; min-height: 44px; padding: 10px; color: #151515; }
#wheel-title { width: 100%; }
.wheel-preset-row { display: flex; gap: 8px; }
.wheel-preset-row select { width: 100%; flex: 1; }
.wheel-secondary { background: #fff; border: 1px solid #d6d9df; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.wheel-hint { color: #6a6a6a; font-size: .875rem; line-height: 1.5; margin: 10px 0 0; }
.wheel-scale { display: flex; justify-content: space-between; gap: 20px; font-size: .875rem; color: #6a6a6a; margin: 28px 0 12px; }
.wheel-segment { padding: 16px 0; border-top: 1px solid #e8e8e8; }
.wheel-segment-top { display: grid; grid-template-columns: 66px minmax(0, 1fr) 38px; gap: 8px; }
.wheel-segment-top input { width: 100%; }
.wheel-remove { padding: 0; font-size: 1.5rem !important; border: 0; border-radius: 8px; background: transparent; color: #666; cursor: pointer; }
.wheel-remove:hover { background: #ffe9ec; color: #b62136; }
.wheel-score-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 64px; gap: 12px; align-items: center; margin-top: 12px; }
.wheel-segment-number { font-size: .875rem; color: var(--segment-color); font-weight: 750; }
.wheel-score-row input[type=range] { width: 100%; margin: 0; min-height: 40px; accent-color: var(--segment-color); cursor: pointer; }
.wheel-score-row input[type=number] { width: 100%; text-align: center; font-weight: 700; }
.wheel-add { width: 100%; padding: 14px; border: 1px dashed #728ae9; border-radius: 12px; background: #f0f4ff; color: #254bbb; font-weight: 650 !important; cursor: pointer; }
.wheel-page button:disabled { opacity: .4; cursor: default; }
.wheel-page :is(button,input,select,a):focus-visible { outline: 3px solid #5979ed; outline-offset: 3px; }
.wheel-eyebrow { margin: 0 0 8px; font-size: .875rem; color: #666; }
#preview-title { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.035em; margin: 0; overflow-wrap: anywhere; }
#average-score { flex: 0 0 auto; font-size: 1.2rem; font-weight: 750; color: #294fae; }
#wheel-canvas { display: block; width: 100%; height: auto; margin: 8px 0; }
.wheel-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; padding: 0; margin: 0 0 24px; list-style: none; }
.wheel-legend li { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 6px; font-size: .875rem; line-height: 1.45; align-items: start; }
.wheel-legend-name { overflow-wrap: anywhere; }
.wheel-legend-marker { width: 21px; height: 21px; border-radius: 50%; text-align: center; color: #fff; font-size: 12px; line-height: 21px; font-weight: 700; }
.wheel-download { display: block; width: 100%; padding: 16px; border: 0; background: #214bb8; color: #fff; border-radius: 12px; font-weight: 700 !important; cursor: pointer; }
.wheel-download:hover { background: #193c96; }
.wheel-status { margin: 10px 0 0; font-size: .875rem; color: #294fae; }
.wheel-status:empty { display:none; }
.wheel-reflection { max-width: 700px; line-height: 1.65; color: #626262; margin: 32px 0 0; }
@media(max-width: 880px) { .wheel-workspace { grid-template-columns: minmax(0,1fr); } .wheel-result { position: static; } }
@media(max-width: 480px) { .wheel-editor, .wheel-result { padding: 18px; border-radius: 18px; } .wheel-legend { grid-template-columns: minmax(0,1fr); } .wheel-preset-row { flex-wrap: wrap; } .wheel-preset-row select { flex-basis: 100%; } .wheel-preset-row button { width: 100%; } .wheel-segment-top { grid-template-columns: 60px minmax(0,1fr) 32px; gap: 5px; } .wheel-scale { gap: 12px; } .wheel-result-top { align-items: start; } }