.marketing-view.is-lottery-studio-open { padding-bottom: 0; }
body.lottery-studio-mode .overview-cover,
body.lottery-studio-mode .portal-error { display: none !important; }
.marketing-view.is-lottery-studio-open > :not(.lottery-studio) { display: none !important; }
.lottery-studio[hidden] { display: none; }

.lottery-studio {
  --lottery-ink: #173c31;
  --lottery-muted: #78847e;
  --lottery-green: #0d654e;
  --lottery-green-dark: #094b3b;
  --lottery-mint: #eaf4ef;
  --lottery-gold: #ad731d;
  --lottery-gold-soft: #f5ead4;
  --lottery-line: #e4ded2;
  min-height: calc(100vh - 112px);
  color: var(--lottery-ink);
  background: #faf8f2;
}

.lottery-studio-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 8px 4px 18px; border-bottom: 1px solid var(--lottery-line); }
.lottery-back-button { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 18px; padding: 0; border: 0; color: #66766f; background: transparent; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.lottery-back-button:hover,.lottery-back-button:focus-visible { color: var(--lottery-green); }
.lottery-breadcrumb { display: flex; align-items: center; gap: 4px; margin: 0 0 14px; color: #8a948f; font-size: 12px; }
.lottery-studio-header h2 { margin: 0; color: #0b4f3c; font-family: "Noto Serif SC","Source Han Serif SC","Songti SC",serif; font-size: clamp(36px,3vw,46px); font-weight: 650; letter-spacing: -.04em; line-height: 1.05; }
.lottery-studio-header h2 + p { margin: 13px 0 0; color: var(--lottery-muted); font-size: 14px; }
.lottery-stage-badge { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-top: 42px; padding: 9px 13px; border: 1px solid #d8e5de; border-radius: 999px; color: #4b6c60; background: #f1f6f3; font-size: 12px; font-weight: 800; }

.lottery-stepper { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px; margin: 22px 0 14px; padding: 0 4px; }
.lottery-stepper button { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; color: #87928c; background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.lottery-stepper button b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #7b8781; background: #e9ece8; font: 800 12px/1 Arial,sans-serif; font-variant-numeric: tabular-nums; }
.lottery-stepper button.is-active { color: var(--lottery-green); }
.lottery-stepper button.is-active b { color: #fff; background: var(--lottery-green); }
.lottery-stepper > i { height: 1px; background: #dcddd8; }

.lottery-studio-layout { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(330px,.62fr); align-items: start; gap: 18px; }
.lottery-editor,.lottery-live-preview { border: 1px solid var(--lottery-line); border-radius: 20px; background: #fff; }
.lottery-editor { overflow: hidden; }
.lottery-form-section { padding: 22px; border-bottom: 1px solid #ede7dc; scroll-margin-top: 18px; }
.lottery-form-section:last-of-type { border-bottom: 0; }
.lottery-form-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.lottery-form-section > header h3,.lottery-form-section > header p { margin: 0; }
.lottery-form-section > header h3 { color: #244b3e; font-size: 16px; }
.lottery-form-section > header p { margin-top: 4px; color: #85908b; font-size: 11px; }
.lottery-form-section > header > span { color: #9aa29e; font-size: 10px; }
.lottery-form-section > header button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border: 1px solid #cfe0d7; border-radius: 9px; color: var(--lottery-green); background: #f6faf8; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.lottery-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.lottery-field { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.lottery-field.is-wide { grid-column: 1 / -1; }
.lottery-field > span,.lottery-field legend { display: block; margin: 0 0 7px; color: #435a52; font-size: 11px; font-weight: 800; }
.lottery-field em { color: #b25f45; font-style: normal; }
.lottery-field input,.lottery-field textarea { width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid #dcded8; border-radius: 10px; color: #253e36; background: #fff; font: inherit; font-size: 12px; outline: none; }
.lottery-field input { padding: 0 12px; }
.lottery-field textarea { min-height: 82px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
.lottery-field input:focus,.lottery-field textarea:focus { border-color: #72a996; box-shadow: 0 0 0 3px rgba(13,101,78,.09); }
.lottery-field > small { position: absolute; right: 11px; bottom: 13px; color: #a0a8a4; font: 10px/1 Arial,"Microsoft YaHei",sans-serif; font-variant-numeric: tabular-nums; }
.lottery-choice-row { display: flex; min-height: 42px; align-items: center; gap: 8px; }
.lottery-choice-row label { position: relative; }
.lottery-choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.lottery-choice-row span { display: inline-grid; min-width: 72px; min-height: 36px; place-items: center; border: 1px solid #dce1dd; border-radius: 10px; color: #66746e; background: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
.lottery-choice-row input:checked + span { border-color: #8fbaa9; color: var(--lottery-green); background: #edf7f2; box-shadow: inset 0 0 0 1px #b9d6c9; }
.lottery-number-unit { display: flex; align-items: center; border: 1px solid #dcded8; border-radius: 10px; overflow: hidden; }
.lottery-number-unit:focus-within { border-color: #72a996; box-shadow: 0 0 0 3px rgba(13,101,78,.09); }
.lottery-number-unit input { min-width: 0; border: 0; border-radius: 0; box-shadow: none !important; }
.lottery-number-unit b { flex: 0 0 auto; padding: 0 12px; color: #798680; font: 700 12px/1 Arial,"Microsoft YaHei",sans-serif; }

.lottery-prize-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid #e4e0d7; border-radius: 13px; }
.lottery-prize-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; }
.lottery-prize-table th { padding: 10px 11px; color: #7e8983; background: #f7f6f1; font-size: 10px; font-weight: 800; text-align: left; }
.lottery-prize-table th:first-child { width: 70px; }
.lottery-prize-table th:nth-child(3) { width: 106px; }
.lottery-prize-table th:nth-child(4) { width: 84px; }
.lottery-prize-table th:last-child { width: 42px; }
.lottery-prize-table td { padding: 8px 6px 8px 11px; border-top: 1px solid #ebe7df; vertical-align: middle; }
.lottery-prize-table td:first-child { color: #546b62; font-size: 11px; font-weight: 800; }
.lottery-prize-table input,.lottery-prize-table select { width: 100%; min-height: 36px; box-sizing: border-box; border: 1px solid #dfe2dd; border-radius: 8px; color: #2a443a; background: #fff; font: 11px/1.2 Arial,"Microsoft YaHei",sans-serif; outline: none; }
.lottery-prize-table input { padding: 0 9px; font-variant-numeric: tabular-nums; }
.lottery-prize-table select { padding: 0 8px; }
.lottery-prize-table input:focus,.lottery-prize-table select:focus { border-color: #78ad9a; box-shadow: 0 0 0 2px rgba(13,101,78,.08); }
.lottery-prize-number { display: flex; align-items: center; overflow: hidden; border: 1px solid #dfe2dd; border-radius: 8px; }
.lottery-prize-number input { min-width: 0; border: 0; border-radius: 0; box-shadow: none !important; }
.lottery-prize-number span { padding: 0 8px; color: #77847e; font: 700 11px/1 Arial,sans-serif; }
.lottery-prize-remove { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #a27a6a; background: transparent; font-size: 15px; cursor: pointer; }
.lottery-prize-remove:hover,.lottery-prize-remove:focus-visible { color: #9b4d3a; background: #fbefea; }
.lottery-probability-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 13px; border: 1px solid #cfe2d8; border-radius: 12px; color: #61736b; background: #f3f8f5; font-size: 10px; }
.lottery-probability-summary > span { display: inline-flex; align-items: center; gap: 5px; }
.lottery-probability-summary strong { color: var(--lottery-green); font: 800 13px/1 Arial,"Microsoft YaHei",sans-serif; font-variant-numeric: tabular-nums; }
.lottery-probability-summary em { margin-left: auto; padding: 5px 8px; border-radius: 999px; color: #087358; background: #dff1e8; font-size: 9px; font-style: normal; font-weight: 800; }
.lottery-probability-summary.is-invalid { border-color: #e7c7ba; background: #fff6f2; }
.lottery-probability-summary.is-invalid strong,.lottery-probability-summary.is-invalid em { color: #a24e39; }
.lottery-probability-summary.is-invalid em { background: #f7e2db; }

.lottery-publish-check > label { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; color: #314e44; font-size: 11px; }
.lottery-publish-check > label input { margin-top: 2px; }
.lottery-publish-check > label b,.lottery-publish-check > label small { display: block; }
.lottery-publish-check > label small { margin-top: 4px; color: #89938e; }
.lottery-publish-check > div { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 13px 14px; border: 1px solid #ead9b7; border-radius: 13px; background: #fffaf0; }
.lottery-publish-check > div > i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #946719; background: #f7e9ca; font-size: 17px; }
.lottery-publish-check p,.lottery-publish-check strong,.lottery-publish-check span { margin: 0; }
.lottery-publish-check strong,.lottery-publish-check span { display: block; }
.lottery-publish-check strong { color: #735318; font-size: 11px; }
.lottery-publish-check span { margin-top: 3px; color: #897653; font-size: 10px; line-height: 1.55; }
.lottery-editor-status { min-height: 18px; margin: 0; padding: 0 22px 18px; color: #9a6049; font-size: 11px; }
.lottery-editor-status.is-success { color: #087358; }

.lottery-live-preview { position: sticky; top: 18px; overflow: hidden; }
.lottery-live-preview > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; border-bottom: 1px solid #ece7dd; }
.lottery-live-preview > header h3,.lottery-live-preview > header p { margin: 0; }
.lottery-live-preview > header h3 { color: #24483d; font-size: 14px; }
.lottery-live-preview > header p { margin-top: 4px; color: #8c9691; font-size: 10px; }
.lottery-live-preview > header > span { display: inline-flex; align-items: center; gap: 4px; color: #77857f; font-size: 9px; }
.lottery-mini-page { margin: 16px; padding: 16px; border: 1px solid #e2dfd6; border-radius: 22px; background: #f8f5ee; box-shadow: 0 16px 35px rgba(36,60,50,.09); }
.lottery-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lottery-mini-top > span { color: #264b3e; font-size: 11px; font-weight: 850; }
.lottery-mini-top em { padding: 5px 8px; border-radius: 999px; color: #17664f; background: #e4f1ea; font-size: 8px; font-style: normal; font-weight: 800; }
.lottery-mini-page > h4 { margin: 13px 0 5px; color: #143c30; font-family: "Noto Serif SC","Source Han Serif SC","Songti SC",serif; font-size: 22px; letter-spacing: -.03em; }
.lottery-mini-page > p { display: flex; align-items: center; gap: 5px; margin: 0; color: #7b8983; font: 10px/1.4 Arial,"Microsoft YaHei",sans-serif; font-variant-numeric: tabular-nums; }
.lottery-wheel-stage { position: relative; width: min(88%,330px); aspect-ratio: 1; margin: 18px auto 15px; }
.lottery-wheel-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lottery-wheel-label { position: absolute; z-index: 2; width: 36%; color: #285246; font-size: clamp(8px,.72vw,10px); font-weight: 800; line-height: 1.25; text-align: center; text-shadow: 0 1px #fff; }
.lottery-wheel-label.is-top { top: 22%; left: 32%; }
.lottery-wheel-label.is-right { top: 48%; right: 5%; transform: rotate(90deg); }
.lottery-wheel-label.is-bottom { bottom: 21%; left: 32%; transform: rotate(180deg); }
.lottery-wheel-label.is-left { top: 48%; left: 5%; transform: rotate(-90deg); }
.lottery-wheel-stage > button { position: absolute; z-index: 3; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%,-50%); border: 4px solid #fff7e7; border-radius: 50%; color: #fff; background: #b77b22; box-shadow: 0 6px 14px rgba(98,68,22,.22); font: 850 12px/1.2 "Microsoft YaHei",sans-serif; cursor: pointer; }
.lottery-wheel-stage.is-spinning > img { animation: lottery-wheel-spin .85s cubic-bezier(.2,.7,.2,1); }
@keyframes lottery-wheel-spin { to { transform: rotate(720deg); } }
.lottery-mini-chance { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border: 1px solid #dbe4df; border-radius: 12px; color: #617069; background: #fff; font-size: 10px; }
.lottery-mini-chance strong { color: var(--lottery-green); font: 800 12px/1 Arial,"Microsoft YaHei",sans-serif; font-variant-numeric: tabular-nums; }
.lottery-mini-rules { margin-top: 12px; padding: 12px; border-radius: 12px; background: #fff; }
.lottery-mini-rules h5 { margin: 0 0 7px; color: #274a3e; font-size: 10px; }
.lottery-mini-rules ol { display: grid; gap: 5px; margin: 0; padding-left: 18px; color: #818c87; font-size: 8px; line-height: 1.45; }

.lottery-studio-actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--lottery-line); background: rgba(250,248,242,.96); }
.lottery-studio-actions > span { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: #7e8984; font-size: 10px; }
.lottery-studio-actions button { min-width: 138px; }
.lottery-studio-actions button:disabled { cursor: not-allowed; opacity: .48; }

@media (max-width: 1180px) {
  .lottery-studio-layout { grid-template-columns: 1fr; }
  .lottery-live-preview { position: static; }
  .lottery-wheel-stage { width: min(72%,380px); }
}
@media (max-width: 760px) {
  .lottery-studio-header { flex-direction: column; }
  .lottery-stage-badge { margin-top: 0; }
  .lottery-stepper button span { display: none; }
  .lottery-form-grid { grid-template-columns: 1fr; }
  .lottery-field.is-wide { grid-column: auto; }
  .lottery-form-section { padding: 18px 15px; }
  .lottery-form-section > header { flex-direction: column; }
  .lottery-studio-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .lottery-studio-actions > span { grid-column: 1 / -1; }
  .lottery-studio-actions button { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lottery-wheel-stage.is-spinning > img { animation: none; }
}