.vanilla-round-editor-root {
  --editor-yellow: #ffd32d;
  --editor-red: #ff6060;
  position: fixed;
  inset: 0;
  z-index: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  overscroll-behavior: contain;
  font-family: var(--font-app);
}
.vanilla-round-editor__backdrop { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
.vanilla-round-editor {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(540px, calc(100vw - 64px));
  height: min(82vh, 720px);
  max-height: min(82vh, 720px);
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 16px 24px;
  overflow: hidden;
  border-radius: 24px;
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
}
.vanilla-picker-overlay {
  --editor-yellow: #ffd32d;
  --editor-red: #ff6060;
}
.vanilla-round-editor__header { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 10px 4px 16px; background: var(--color-surface); }
.vanilla-round-editor__header--metrics { background: var(--color-surface-alt); }
.vanilla-round-editor__header > div { flex: 1; min-width: 0; }
.vanilla-round-editor__header h2 { font-size: 18px; font-weight: 900; line-height: 1.2; letter-spacing: 0; }
.vanilla-round-editor__header p { overflow: hidden; margin-top: 2px; color: var(--color-muted); font-size: 12px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.vanilla-round-editor__close { display: grid; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 50%; color: var(--color-muted); background: var(--color-input); place-items: center; }
.vanilla-round-editor .technical-format-button { border-color: color-mix(in srgb, var(--editor-yellow), transparent 48%); background: color-mix(in srgb, var(--editor-yellow), transparent 88%); }
.vanilla-round-editor .technical-format-button b { color: #7a5c00; }
.vanilla-round-editor__list { flex: 1; min-height: 0; overflow: auto; background: var(--color-surface); }
.vanilla-round-row { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-right: 0; border-left: 0; border-bottom: 1px solid var(--color-border); color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 94%); font-size: 12px; font-weight: 900; text-align: left; text-transform: uppercase; }
.vanilla-round-row.is-draft { border-top: 2px dashed color-mix(in srgb, var(--editor-yellow), transparent 47%); border-bottom: 2px dashed color-mix(in srgb, var(--editor-yellow), transparent 47%); }
.vanilla-round-row.is-selected { outline: 2px solid var(--editor-yellow); outline-offset: -2px; }
.vanilla-round-row__drag { display: grid; width: 20px; min-width: 20px; align-self: stretch; align-items: center; overflow: hidden; color: var(--color-muted); cursor: grab; font-size: 15px; letter-spacing: 0; line-height: 1; touch-action: none; user-select: none; }
.vanilla-round-row__drag:active { cursor: grabbing; }
.vanilla-round-row.is-drag-source { opacity: .55; }
.vanilla-round-row.is-drop-target { box-shadow: inset 0 0 0 2px var(--editor-yellow); }
.vanilla-round-row__main { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; align-items: center; gap: 7px; }
.vanilla-round-row__badges { display: flex; flex-wrap: wrap; gap: 5px; text-transform: none; }
.vanilla-round-row__badges span { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--editor-yellow), transparent 67%); border-radius: 999px; background: color-mix(in srgb, var(--editor-yellow), transparent 91%); font-size: 11px; line-height: 1.1; }
.vanilla-round-row__stats { color: var(--color-text); font-size: 11px; text-transform: none; white-space: nowrap; }
.vanilla-round-editor__controls { display: grid; grid-template-columns: 1fr 78px; column-gap: 6px; row-gap: 8px; flex: 0 0 auto; padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--editor-yellow), transparent 84%); box-shadow: 0 -8px 18px rgb(0 0 0 / 18%); }
.vanilla-round-editor__card { display: grid; align-self: start; gap: 8px; padding: 8px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 67%); border-radius: 10px; background: #fff9e8; }
[data-theme="dark"] .vanilla-round-editor__card { background: rgb(255 210 45 / 10%); }
[data-theme="dark"] .vanilla-round-row,
[data-theme="dark"] .vanilla-round-field.is-active,
[data-theme="dark"] .vanilla-round-field.is-active span:first-child,
[data-theme="dark"] .vanilla-round-preset-line button,
[data-theme="dark"] .vanilla-round-preset-line .is-add,
[data-theme="dark"] .vanilla-round-editor__side .is-ok,
[data-theme="dark"] .vanilla-picker-panel h3,
[data-theme="dark"] .vanilla-wheel-control,
[data-theme="dark"] .vanilla-wheel__viewport button.is-selected,
[data-theme="dark"] .vanilla-entry-format-actions button,
[data-theme="dark"] .vanilla-picker-shortcuts button,
[data-theme="dark"] .vanilla-type-options button,
[data-theme="dark"] .vanilla-timing-presets button,
[data-theme="dark"] .vanilla-timing-grid label,
[data-theme="dark"] .vanilla-picker-confirm button.is-confirm { color: #f0cf66; }
[data-theme="dark"] .vanilla-picker-panel { background: rgb(50 43 19 / 98%); }
.vanilla-round-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vanilla-round-fields--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vanilla-round-fields--timing { grid-template-columns: minmax(0, 1fr); }
.vanilla-round-fields--timing .vanilla-round-field { min-height: 40px; }
.vanilla-round-field { display: flex; min-width: 0; min-height: 46px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 6px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 73%); border-radius: 10px; color: var(--color-text); background: var(--color-surface); font-weight: 900; }
.vanilla-round-field:disabled { visibility: hidden; }
.vanilla-round-field span:first-child { color: #8b99b0; font-size: 9px; line-height: 1.1; text-transform: uppercase; }
.vanilla-round-field span:last-child { max-width: 100%; overflow: hidden; font-size: 12px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.vanilla-round-field.is-active { border-color: color-mix(in srgb, #7a5c00, transparent 73%); color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 86%); }
.vanilla-round-field.is-active span:first-child { color: #7a5c00; }
.vanilla-round-preset-line { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(94px, .78fr) minmax(0, 1.45fr) 78px; gap: 6px; }
.vanilla-round-preset-line button { height: 42px; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 60%); border-radius: 12px; color: #7a5c00; background: var(--color-surface); font-size: 12px; font-weight: 900; }
.vanilla-round-type-button { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 5px; overflow: hidden; }
.vanilla-round-type-button span { color: #8b99b0; font-size: 8px; line-height: 1; text-transform: uppercase; }
.vanilla-round-type-button strong { max-width: 100%; overflow: hidden; color: var(--color-text); font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.vanilla-round-type-button.is-active { border-color: color-mix(in srgb, #7a5c00, transparent 55%); background: color-mix(in srgb, var(--editor-yellow), transparent 86%); }
.vanilla-round-preset-button { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; padding: 0 9px; text-align: left; }
.vanilla-round-preset-button span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vanilla-round-preset-line button.is-preset-changed { border-color: var(--editor-red); }
.vanilla-round-preset-line .is-add { color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 84%); font-size: 24px; }
.vanilla-round-editor__side { display: grid; grid-template-rows: repeat(2, minmax(42px, 1fr)); gap: 5px; }
.vanilla-round-editor__side button { display: grid; padding: 0; border: 1.5px solid var(--color-border); border-radius: 12px; color: var(--color-text); background: var(--color-surface); font-size: 18px; font-weight: 900; line-height: 1; place-items: center; }
.vanilla-round-editor__side button:disabled { opacity: .3; }
.vanilla-round-editor__side .is-delete { border-color: color-mix(in srgb, var(--editor-red), transparent 87%); color: var(--editor-red); background: color-mix(in srgb, var(--editor-red), transparent 91%); }
.vanilla-round-editor__side .is-delete svg { display: block; width: 19px; height: 19px; }
.vanilla-round-editor__side .is-ok { border-color: color-mix(in srgb, var(--editor-yellow), transparent 67%); color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 84%); font-size: 14px; }
.vanilla-picker-overlay { position: fixed; inset: 0; z-index: 670; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; overscroll-behavior: contain; touch-action: none; background: rgb(0 0 0 / 46%); }
.vanilla-picker-panel { touch-action: pan-y; }
.vanilla-picker-panel { width: min(460px, 100%); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 67%); border-radius: 18px 18px 0 0; background: #fff9e8; box-shadow: 0 -14px 36px rgb(0 0 0 / 28%); }
.vanilla-picker-panel h3 { margin-bottom: 10px; color: #7a5c00; font-size: 16px; font-weight: 900; }
.vanilla-wheel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vanilla-wheel-control { min-height: 108px; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 60%); border-radius: 12px; color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 91%); font-size: 30px; font-weight: 900; }
.vanilla-wheel { position: relative; height: 108px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 60%); border-radius: 12px; background: var(--color-surface); }
.vanilla-wheel > i { position: absolute; z-index: 0; top: 36px; right: 6px; left: 6px; height: 36px; border-top: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 47%); border-bottom: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 47%); background: color-mix(in srgb, var(--editor-yellow), transparent 91%); pointer-events: none; }
.vanilla-wheel__viewport { position: relative; z-index: 1; height: 100%; box-sizing: border-box; padding: 36px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-snap-type: y mandatory; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.vanilla-wheel__viewport::-webkit-scrollbar { display: none; }
.vanilla-wheel__viewport button { display: flex; width: 100%; height: 36px; align-items: center; justify-content: center; border: 0; color: var(--color-text); background: transparent; font-size: 14px; font-weight: 700; scroll-snap-align: center; }
.vanilla-wheel__viewport button.is-selected { color: #7a5c00; font-size: 16px; font-weight: 900; }
.vanilla-wheel__viewport:focus-visible { outline: 2px solid var(--color-teal); outline-offset: -3px; }
.vanilla-entry-format-actions { margin-top: 10px; }
.vanilla-entry-format-actions button { width: 100%; min-height: 42px; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 48%); border-radius: 10px; color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 84%); font-size: 13px; font-weight: 900; }
.vanilla-picker-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.vanilla-picker-shortcuts button, .vanilla-type-options button { min-height: 34px; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 73%); border-radius: 9px; color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 91%); font-size: 13px; font-weight: 900; }
.vanilla-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vanilla-type-options button { min-height: 72px; }
.vanilla-type-options button.is-selected { background: color-mix(in srgb, var(--editor-yellow), transparent 78%); }
.vanilla-timing-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.vanilla-timing-presets button { min-height: 38px; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 67%); border-radius: 9px; color: #7a5c00; background: var(--color-surface); font-size: 12px; font-weight: 900; }
.vanilla-timing-presets button.is-selected { background: color-mix(in srgb, var(--editor-yellow), transparent 75%); }
.vanilla-timing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vanilla-timing-grid label { display: grid; gap: 5px; color: #7a5c00; font-size: 10px; font-weight: 900; text-align: center; text-transform: uppercase; }
.vanilla-preset-panel { align-self: center; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px; transform: translateY(-12dvh); }
.vanilla-preset-panel .vanilla-wheel { height: 252px; }
.vanilla-preset-panel .vanilla-wheel > i { top: 108px; }
.vanilla-preset-panel .vanilla-wheel__viewport { padding-block: 108px; }
.vanilla-preset-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.vanilla-preset-actions button { min-height: 42px; border: 1.5px solid color-mix(in srgb, var(--editor-yellow), transparent 60%); border-radius: 10px; color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 84%); font-size: 12px; font-weight: 900; }
.vanilla-preset-actions button[hidden] { display: none; }
.vanilla-preset-actions .is-delete { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--editor-red), transparent 80%); color: var(--editor-red); background: color-mix(in srgb, var(--editor-red), transparent 91%); }
.preset-manager-modal-panel { border-color: rgb(197 149 14 / 52%); background: #fff9e8; }
.preset-manager-modal-panel h2,
.preset-manager-modal-panel .technical-format-name span { color: #7a5c00; }
.preset-manager-modal-panel .vanilla-wheel { border-color: rgb(197 149 14 / 42%); background: var(--color-surface); }
.preset-manager-modal-panel .vanilla-wheel > i { border-color: rgb(197 149 14 / 44%); background: rgb(255 211 45 / 14%); }
.preset-manager-modal-panel .vanilla-wheel__viewport button.is-selected { color: #7a5c00; }
.preset-manager-modal-panel .vanilla-wheel__viewport:focus-visible { outline-color: #9a760b; }
.preset-manager-modal-panel .technical-format-actions button { border-color: rgb(197 149 14 / 40%); color: #7a5c00; background: rgb(255 211 45 / 11%); }
.preset-manager-modal-panel .technical-format-actions .is-update { border-color: rgb(197 149 14 / 44%); color: #6f5300; background: rgb(255 211 45 / 18%); }
.preset-manager-modal-panel .technical-format-actions .is-delete { border-color: color-mix(in srgb, var(--editor-red), transparent 80%); color: var(--editor-red); background: color-mix(in srgb, var(--editor-red), transparent 91%); }
.preset-manager-modal-panel .technical-format-name input { border-color: rgb(197 149 14 / 44%); caret-color: #7a5c00; }
.preset-manager-modal-panel .technical-format-confirm button.is-confirm { border-color: rgb(197 149 14 / 44%); color: #6f5300; background: rgb(255 211 45 / 18%); }
[data-theme="dark"] .preset-manager-modal-panel { border-color: rgb(222 177 48 / 52%); background: rgb(50 43 19 / 98%); }
[data-theme="dark"] .preset-manager-modal-panel h2,
[data-theme="dark"] .preset-manager-modal-panel .technical-format-name span { color: #f0cf66; }
[data-theme="dark"] .preset-manager-modal-panel .vanilla-wheel { color: var(--color-text); background: rgb(61 53 25 / 96%); }
[data-theme="dark"] .preset-manager-modal-panel .vanilla-wheel > i { background: rgb(101 84 28 / 96%); }
.vanilla-picker-confirm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.vanilla-picker-confirm button { min-height: 44px; border: 1.5px solid var(--color-border); border-radius: 10px; color: var(--color-text); background: var(--color-surface); font-size: 12px; font-weight: 900; }
.vanilla-picker-confirm button.is-confirm { border-color: color-mix(in srgb, var(--editor-yellow), transparent 46%); color: #7a5c00; background: color-mix(in srgb, var(--editor-yellow), transparent 76%); }
.vanilla-delete-options { display: grid; gap: 8px; }
.vanilla-delete-hint { margin: -2px 0 10px; color: var(--color-muted); font-size: 12px; font-weight: 700; line-height: 1.4; }

@media (max-width: 767px) {
  html.keyboard-open .vanilla-preset-overlay,
  html:not(.is-standalone) .vanilla-preset-overlay { top: var(--visual-viewport-offset-top, 0px); bottom: auto; height: var(--visual-viewport-height, 100dvh); padding: 12px; align-items: center; }
  html.keyboard-open .vanilla-preset-panel,
  html:not(.is-standalone) .vanilla-preset-panel { max-height: calc(var(--visual-viewport-height, 100dvh) - 24px); overflow: auto; transform: none; }
  .vanilla-preset-panel [data-preset-name] { scroll-margin-block: 18px; }
}

.vanilla-delete-options button { min-height: 42px; border: 1.5px solid var(--color-border); border-radius: 10px; color: var(--color-text); background: var(--color-surface); font-size: 12px; font-weight: 900; }
.vanilla-delete-options .is-delete { border-color: color-mix(in srgb, var(--editor-red), transparent 73%); color: var(--editor-red); background: color-mix(in srgb, var(--editor-red), transparent 91%); }
@media (min-width: 768px) { .vanilla-round-editor__header h2 { font-size: 20px; } .vanilla-round-editor__header p { font-size: 13px; } .vanilla-picker-overlay { align-items: center; padding: 32px; } .vanilla-picker-panel { border-radius: 18px; } .vanilla-preset-panel { transform: none; } }
@media (max-width: 767px) { .vanilla-round-editor-root { display: block; width: 100%; height: 100lvh; padding: 0; background: var(--color-surface); } .vanilla-round-editor__backdrop { display: none; } .vanilla-round-editor { width: 100%; height: var(--visual-viewport-height, 100dvh); min-height: var(--visual-viewport-height, 100dvh); max-height: var(--visual-viewport-height, 100dvh); padding: env(safe-area-inset-top, 0px) 0 0; border-radius: 0; box-shadow: none; } }