* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: #f4f7fc; color: #0b1a33; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Microsoft YaHei', sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 3px solid #8ec7ff; outline-offset: 3px; }
.calculator-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; flex-shrink: 0; min-height: 66px; padding: 10px 28px; background: #fff; border-bottom: 1px solid #e7edf5; }
.calculator-plan { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; color: #16803d; background: #eaf8ef; font-size: .8rem; font-weight: 500; }
.calculator-plan strong { font-size: .85rem; font-style: italic; font-weight: 800; }
.calculator-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 1.325rem; font-weight: 700; line-height: 1.4; }
.calculator-title-icon { display: grid; place-items: center; width: 36px; height: 36px; color: #006acd; font-size: 1.8rem; }
.calculator-open-link { display: inline-flex; align-items: center; gap: 6px; justify-self: end; color: #69798d; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.calculator-open-link:hover { color: #006acd; }
.calculator-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 32px 24px 16px; }
.calculator-wrapper { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; width: 100%; min-width: 0; }
.turntable-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 24px; width: 100%; max-width: 1000px; }
.wheel-card { min-width: 0; padding: 24px; border: 1px solid #e5ebf3; border-radius: 24px; background: #fff; box-shadow: 0 12px 40px rgba(18,61,107,.06); }
.wheel-heading { text-align: center; }
.section-kicker { display: block; margin-bottom: 8px; color: #8895a7; font-size: .75rem; }
.wheel-heading h2 { margin: 0; color: #315d8d; font-size: 1.65rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.wheel-heading p { margin: 8px 0 20px; color: #8895a7; font-size: .78rem; }
.wheel-wrap { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 26px auto 20px; isolation: isolate; }
.wheel-disc { display: block; width: 100%; height: 100%; border-radius: 50%; background: #e8f0fc; box-shadow: 0 8px 25px rgba(18,61,107,.1); transform: rotate(0deg); transform-origin: 50% 50%; }
.wheel-disc text { fill: #254568; font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif; font-weight: 600; }
.wheel-pointer { position: absolute; top: -6px; left: 50%; z-index: 3; width: 0; height: 0; transform: translateX(-50%); border-top: 31px solid #006acd; border-left: 13px solid transparent; border-right: 13px solid transparent; filter: drop-shadow(0 3px 2px rgba(0,64,128,.18)); }
.wheel-start { position: absolute; top: 50%; left: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 6px solid #fff; border-radius: 50%; background: #006acd; color: #fff; box-shadow: 0 4px 18px rgba(0,72,144,.22); }
.wheel-start > span { font-size: clamp(.9rem, 2vw, 1.2rem); font-weight: 700; line-height: 1.5; }
.wheel-start small { font-size: .68rem; opacity: .8; }
.wheel-start:hover:not(:disabled) { background: #0059b3; }
.wheel-start:disabled { opacity: 1; background: #4e8ec8; }
.result-panel { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 92px; padding: 16px; border: 1px solid #e3ebf6; border-radius: 16px; background: #f8faff; text-align: center; }
.result-caption { color: #8895a7; font-size: .75rem; }
.result-panel strong { max-width: 100%; color: #006acd; font-size: 1.2rem; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.wheel-note { margin: 14px 0 0; color: #96a3b5; font-size: .72rem; line-height: 1.8; text-align: center; }
.settings-card { min-width: 0; padding: 24px; border: 1px solid #d2dce9; border-radius: 24px; background: transparent; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.settings-heading h2 { margin: 0; color: #315d8d; font-size: 1rem; font-weight: 600; }
.settings-heading > span { padding: 4px 9px; border-radius: 7px; background: #e6eef9; color: #6e85a0; font-size: .72rem; white-space: nowrap; }
.theme-field > label, .count-field > label { display: block; margin-bottom: 9px; color: #536f8b; font-size: .8rem; }
.theme-field { margin-bottom: 18px; }
input { max-width: 100%; height: 40px; padding: 8px 11px; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; color: #0b1a33; font-size: .85rem; }
input:focus { outline: none; border-color: #006acd; box-shadow: 0 0 0 3px #e7f2ff; }
input[aria-invalid="true"] { border-color: #d9505e; }
input::placeholder { color: #98a5b6; font-size: .8rem; }
input:disabled { color: #8b99aa; background: #f0f3f8; }
#wheelTheme { width: 100%; }
.count-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#optionCount { flex: 1; width: 90px; min-width: 60px; }
.field-hint { margin: 8px 0 0; color: #8895a7; font-size: .7rem; line-height: 1.8; }
.options-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 22px 0 10px; }
.options-heading h3 { margin: 0; color: #536f8b; font-size: .8rem; font-weight: 500; }
.options-heading > span { color: #96a3b5; font-size: .68rem; }
.option-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; margin: 0; padding: 2px 4px 3px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; list-style: none; }
.option-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 3px; border: 1px solid transparent; border-radius: 10px; }
.option-row.is-selected { border-color: #96bce5; background: #eaf3ff; }
.option-number { display: grid; place-items: center; flex-shrink: 0; width: 25px; height: 25px; border-radius: 7px; color: #536f8b; font-size: .72rem; }
.option-row input { flex: 1; width: 0; min-width: 0; height: 36px; }
.remove-option { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #8b99aa; font-size: 1.2rem; }
.remove-option:hover:not(:disabled) { color: #c63646; background: #fcebef; }
.settings-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid #dce5f0; border-radius: 10px; font-size: .8rem; font-weight: 600; line-height: 1.5; }
.button.secondary { color: #536f8b; background: #fff; }
.button.secondary:hover:not(:disabled) { color: #006acd; background: #eef4fe; border-color: #bfd6ec; }
.reset-button { padding: 5px 0; border: 0; background: transparent; color: #8895a7; font-size: .75rem; }
.reset-button:hover:not(:disabled) { color: #006acd; }
.tool-status { min-height: 24px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #dce5f0; color: #69798d; font-size: .78rem; line-height: 1.8; overflow-wrap: anywhere; }
.tool-status.is-error { color: #c63646; }
.calculator-tips { flex-shrink: 0; width: 100%; max-width: 1000px; margin-top: auto; padding: 18px 8px 0; border-top: 1px solid #e7edf5; color: #66758a; font-size: .8rem; line-height: 1.9; }
.calculator-tips h2 { margin: 0 0 12px; color: #69798d; font-size: .9rem; font-weight: 600; }
.tips-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tips-grid p { margin: 0; }
.tips-grid strong { display: block; margin-bottom: 5px; color: #536f8b; font-weight: 600; }
@media (max-width: 767.98px) {
    .calculator-header { padding: 8px 16px; gap: 10px; }
    .calculator-plan { padding: 5px 8px; font-size: .72rem; }
    .calculator-title { gap: 7px; font-size: 1.175rem; }
    .calculator-open-link { font-size: .8rem; }
    .calculator-main { padding: 24px 16px 16px; gap: 20px; }
    .turntable-layout { max-width: 540px; grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .tips-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .wheel-start > span { font-size: clamp(.85rem, 4vw, 1.2rem); }
}
@media (max-width: 575.98px) {
    .calculator-header { grid-template-columns: minmax(0, 1fr) auto; }
    .calculator-title { grid-column: 1 / -1; grid-row: 1; }
    .calculator-plan { grid-column: 1; grid-row: 2; }
    .calculator-open-link { grid-column: 2; grid-row: 2; }
    .wheel-card, .settings-card { padding: 20px 16px; border-radius: 22px; }
    .wheel-start { border-width: 4px; }
    .wheel-start small { font-size: .6rem; }
    .wheel-heading h2 { font-size: 1.45rem; }
    .option-list { max-height: 360px; }
}
@media (prefers-reduced-motion: reduce) { .wheel-disc { transition: none !important; } }