.root {
    min-height: 100%;
}

.cellStack {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.cellStack > strong,
.cellStack > span,
.cellStack > small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cellStack > strong {
    color: var(--text-primary);
    font-weight: 700;
}

.cellStack > small {
    color: var(--text-tertiary);
    font-size: 12px;
}

.templateIdentity {
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
}

.templateTypeMark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-control);
    background: var(--primary-surface);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

.statusBadge {
    display: inline-flex;
    width: max-content;
    min-height: var(--status-height);
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-2);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-pill);
    background: var(--neutral-surface);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.statusDot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.status_ongoing,
.status_published {
    border-color: var(--success-border);
    background: var(--success-surface);
    color: var(--success);
}

.status_scheduled {
    border-color: var(--info-border);
    background: var(--info-surface);
    color: var(--info);
}

.status_draft {
    border-color: var(--warning-border);
    background: var(--warning-surface);
    color: var(--warning);
}

.status_disabled,
.status_ended,
.status_archived {
    color: var(--stopped);
}

.overlayDrawerSkeleton {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.overlayDrawerSkeleton :global(.page-skeleton) {
    height: 100%;
}

.overlayDialogSkeleton {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-2) !important;
}

.dataDrawer {
    width: min(1320px, calc(100vw - 24px)) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.dataDrawerBody {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: var(--space-3) !important;
    overflow: hidden !important;
}

.dataHeader,
.dataFilterBar,
.inlineFilters {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
}

.dataHeader {
    min-height: var(--control-height);
    justify-content: space-between;
}

.dataIdentity {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: var(--space-2);
}

.dataIdentity strong {
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dataIdentity span,
.dataSectionHeader span,
.periodSummary small {
    color: var(--text-tertiary);
    font-size: 12px;
}

.dataHeaderActions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
}

.dataFilterBar {
    min-height: calc(var(--control-height) + var(--space-2));
    flex-wrap: wrap;
    padding: var(--space-2) 0;
    border-block: 1px solid var(--border-soft);
}

.dataFilterBar > :global(.MuiTextField-root),
.inlineFilters > :global(.MuiTextField-root),
.dataFilterBar > :global(.region-filter-control) {
    width: 176px;
}

.dataFilterBar > :global(.time-range-filter),
.dataFilterBar > button[class*="trigger"] {
    flex: 0 1 360px;
}

.inlineErrorButton {
    border: 0;
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dataTabs {
    min-height: var(--control-height) !important;
    border-bottom: 1px solid var(--border);
}

.dataTabs :global(.MuiTab-root) {
    min-height: var(--control-height);
    padding-block: 0;
    font-size: 13px;
}

.dataTabContent {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.dataTabContent > :global(.data-state),
.dataPanel > :global(.data-state) {
    min-height: 100%;
}

.dataOverview,
.dataPanel {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-3);
    animation: data-panel-enter var(--motion-base) var(--ease-emphasized) both;
}

.metricGrid {
    display: grid;
    grid-template-columns: repeat(9, minmax(98px, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--border);
}

.metricItem {
    position: relative;
    display: grid;
    min-height: 78px;
    align-content: center;
    gap: 1px;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    transition:
        background var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.metricItem:hover {
    z-index: 1;
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.metricItem span {
    color: var(--text-tertiary);
    font-size: 11px;
}

.metricItem strong {
    color: var(--text-primary);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.metricItem small {
    position: absolute;
    right: var(--space-2);
    bottom: var(--space-2);
    color: var(--text-tertiary);
    font-size: 10px;
}

.dataSection {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-soft);
}

.dataSectionHeader {
    display: flex;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.dataSectionHeader > div {
    display: grid;
    gap: 1px;
}

.dataSectionHeader h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 760;
}

.dataMetaBadge,
.dataStatus {
    display: inline-flex;
    width: max-content;
    min-height: 22px;
    align-items: center;
    padding: 0 var(--space-2);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-pill);
    background: var(--neutral-surface);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.dataRankingGrid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.numericCell {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dataUserIdentity {
    display: grid;
    min-width: 0;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.dataUserIdentity :global(.MuiAvatar-root) {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-soft);
    background: var(--primary-surface);
    color: var(--primary);
    font-size: 12px;
    font-weight: 750;
}

.inlineFilters {
    min-height: calc(var(--control-height) + var(--space-2));
    flex-wrap: wrap;
    padding-bottom: var(--space-2);
}

.periodSummary {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.dataStatus_open,
.dataStatus_pending {
    border-color: var(--info-border);
    background: var(--info-surface);
    color: var(--info);
}

.dataStatus_settling,
.dataStatus_running {
    border-color: var(--warning-border);
    background: var(--warning-surface);
    color: var(--warning);
}

.dataStatus_settled,
.dataStatus_granted {
    border-color: var(--success-border);
    background: var(--success-surface);
    color: var(--success);
}

.dataStatus_failed,
.dataStatus_dead {
    border-color: var(--danger-border);
    background: var(--danger-surface);
    color: var(--danger);
}

.dataStatus_cancelled {
    color: var(--stopped);
}

.ellipsisCell {
    display: block;
    overflow: hidden;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dataDrawer :global(.multi-series-line-chart) {
    min-height: 260px;
}

.dataDrawer :global(.multi-series-line-chart__canvas) {
    width: 100%;
    height: 260px;
}

.dataDrawer :global(.multi-series-line-chart__empty) {
    display: grid;
    min-height: 180px;
    place-items: center;
    color: var(--text-tertiary);
}

@keyframes data-panel-enter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1120px) {
    .metricGrid {
        grid-template-columns: repeat(5, minmax(110px, 1fr));
    }

    .dataRankingGrid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .dataDrawer {
        width: 100vw !important;
        padding: var(--space-3) !important;
    }

    .dataHeader {
        align-items: flex-start;
    }

    .dataIdentity {
        display: grid;
    }

    .dataHeaderActions button {
        min-width: var(--control-height);
    }

    .metricGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .periodSummary {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dataOverview,
    .dataPanel,
    .metricItem {
        animation: none !important;
        transition: none !important;
    }

    .metricItem:hover {
        transform: none;
    }
}

.editorDrawer {
    width: min(1560px, calc(100vw - 24px)) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.editorHeader {
    min-height: 48px;
}

.editorTitleLine {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.editorTitleLine h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dirtyBadge {
    display: inline-flex;
    min-height: var(--status-height);
    align-items: center;
    padding: 0 var(--space-2);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-pill);
    background: var(--warning-surface);
    color: var(--warning);
    font-size: 12px;
    font-weight: 700;
}

.editorTabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.editorTabs button {
    flex: 0 0 auto;
}

.editorWorkspace {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(620px, 1fr) 350px;
    gap: var(--space-4);
    overflow: hidden !important;
}

.editorLoading {
    min-height: 100%;
    grid-column: 1 / -1;
    overflow: hidden;
}

.editorMain {
    display: grid;
    min-width: 0;
    min-height: 0;
    align-content: start;
    gap: var(--space-3);
    overflow: auto;
    padding: 1px var(--space-2) var(--space-3) 1px;
}

.editorActions {
    min-height: 48px;
    align-items: flex-end;
}

.validationList {
    display: grid;
    gap: 3px;
}

.editorSection {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
    animation: section-enter var(--motion-base) var(--ease-emphasized) both;
}

.editorSectionHeader {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.editorSectionHeader h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--admin-font-size);
    font-weight: 750;
}

.editorSectionBody {
    display: grid;
    min-width: 0;
    gap: var(--space-4);
}

.formGridThree {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.localizedGrid,
.rulesGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.settingRow {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard);
}

.settingRow:focus-within,
.settingRow:hover {
    border-color: var(--primary-border);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.settingCopy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.settingCopy strong {
    color: var(--text-primary);
    font-size: 13px;
}

.settingCopy span,
.editorCountLine {
    color: var(--text-tertiary);
    font-size: 12px;
}

.timeRangeField {
    flex: 0 0 min(430px, 58%);
}

.sortableList {
    display: grid;
    gap: var(--space-2);
}

.giftEditorRow {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(300px, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    background: var(--bg-card);
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.giftEditorRow:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.rowOrder {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--neutral-surface);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.giftPicker {
    min-width: 0;
}

.rowMoveActions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.taskTable,
.rankRewardTable {
    display: grid;
    min-width: 0;
    gap: 1px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--border);
}

.taskTableHead,
.taskTableRow {
    display: grid;
    min-width: 930px;
    grid-template-columns: 58px minmax(150px, 0.72fr) minmax(180px, 0.8fr) 110px minmax(240px, 1fr) 132px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
}

.taskTableHead,
.rankRewardHead {
    min-height: var(--table-head-height);
    background: var(--bg-card-strong);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.taskTableRow {
    min-height: 60px;
    transition: background var(--motion-fast) var(--ease-standard);
}

.taskTableRow:hover,
.rankRewardRow:hover {
    background: var(--primary-hover);
}

.rankBoard {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    background: var(--bg-card);
}

.rankBoard + .rankBoard {
    margin-top: var(--space-1);
}

.rankBoardHeader,
.rankBoardActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.rankBoardHeader > div:first-child {
    display: grid;
    gap: 2px;
}

.rankBoardHeader strong {
    color: var(--text-primary);
}

.rankBoardHeader span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.leaderboardSizeField {
    width: 130px;
}

.rankRewardHead,
.rankRewardRow {
    display: grid;
    min-width: 680px;
    grid-template-columns: 120px 120px minmax(300px, 1fr) 64px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
}

.rankRewardRow {
    min-height: 58px;
    transition: background var(--motion-fast) var(--ease-standard);
}

.editorEmpty {
    min-height: 96px;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    color: var(--text-tertiary);
}

.assetGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.assetSlot {
    display: grid;
    min-width: 0;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    background: var(--bg-card);
}

.assetMeta {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-tertiary);
    font-size: 11px;
}

.assetMeta code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.previewPanel {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
    padding-left: var(--space-4);
    border-left: 1px solid var(--border);
    overflow: hidden;
}

.previewToolbar {
    display: flex;
    min-height: var(--control-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
}

.previewLocale {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card-strong);
}

.previewLocale button {
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
    transition:
        background var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
}

.previewLocale .previewLocaleActive {
    background: var(--primary);
    color: var(--active-contrast);
}

.phoneFrame {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}

.phoneScreen {
    width: 310px;
    min-height: 620px;
    margin: 0 auto var(--space-3);
    overflow: hidden;
    border: 7px solid var(--text-primary);
    border-radius: 30px;
    background-color: var(--text-primary);
    background-position: center;
    background-size: cover;
    color: var(--active-contrast);
    box-shadow: var(--shadow-dialog);
    animation: phone-enter var(--motion-slow) var(--ease-emphasized) both;
}

.phoneHero {
    position: relative;
    display: grid;
    min-height: 112px;
    place-items: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--primary-strong), var(--brand-secondary));
    background-position: center;
    background-size: cover;
    text-align: center;
}

.phoneHero strong {
    max-width: 220px;
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.4);
}

.phoneBack {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 26px;
}

.phoneScreen[dir="rtl"] .phoneBack {
    right: 12px;
    left: auto;
    transform: scaleX(-1);
}

.phoneCountdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 10px 16px;
}

.phoneCountdown span {
    display: grid;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 11px;
    font-weight: 750;
}

.phoneGiftPanel,
.phoneTaskList,
.phoneRanking {
    margin: 0 10px 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.phoneSectionTitle {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 750;
}

.phoneGiftRail {
    display: flex;
    min-height: 56px;
    gap: 8px;
    overflow: hidden;
}

.phoneGift,
.phoneGiftEmpty {
    display: grid;
    min-width: 48px;
    place-items: center;
    gap: 2px;
}

.phoneGift img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.phoneGift small {
    color: rgba(255, 255, 255, 0.74);
    font-size: 9px;
}

.phoneGiftEmpty {
    min-width: 56px;
    height: 52px;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
}

.phoneTabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 10px 10px;
}

.phoneTabs button {
    display: inline-flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font-size: 10px;
    transition:
        background var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.phoneTabs button:hover {
    transform: translateY(-1px);
}

.phoneTabs .phoneTabActive {
    border-color: var(--primary-border-active);
    background: var(--primary);
    color: var(--active-contrast);
}

.phoneTaskList {
    display: grid;
    gap: 6px;
}

.phoneTask {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
}

.phoneTask > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.phoneTask strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phoneTask small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 8px;
}

.phoneTask button {
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--warning);
    color: var(--active-contrast);
    font-size: 9px;
}

.phoneEmpty {
    display: grid;
    min-height: 72px;
    place-items: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

.phoneRanking {
    display: grid;
    gap: 5px;
}

.phonePodium {
    display: flex;
    min-height: 116px;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding-bottom: 8px;
}

.phonePodium > span {
    display: grid;
    gap: 4px;
    place-items: center;
}

.phonePodium i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 2px solid var(--warning);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-style: normal;
    font-weight: 800;
}

.phonePodium .phonePodiumFirst {
    align-self: flex-start;
}

.phonePodiumFirst i {
    width: 56px;
    height: 56px;
}

.phonePodium small {
    font-size: 9px;
}

.phoneRankRow {
    display: grid;
    min-height: 34px;
    grid-template-columns: 20px 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 9px;
}

.phoneRankRow i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.phoneRankRow strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phoneRankRow small {
    color: var(--warning);
}

.cloneDialogContent {
    display: grid;
    gap: var(--space-3);
    padding-top: var(--space-2) !important;
}

.cloneSource {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    background: var(--bg-card-strong);
}

.cloneSource span {
    color: var(--text-tertiary);
    font-size: 12px;
}

.versionDrawer {
    width: min(980px, calc(100vw - 32px)) !important;
}

.versionDrawerBody {
    display: grid;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: auto;
}

.drawerPagination {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-3) 0 0;
}

@keyframes section-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes phone-enter {
    from {
        opacity: 0;
        transform: translateX(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@media (max-width: 1180px) {
    .editorWorkspace {
        grid-template-columns: minmax(560px, 1fr) 310px;
    }

    .assetGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .editorDrawer {
        width: 100vw !important;
        padding: var(--space-3) !important;
    }

    .editorWorkspace {
        display: block;
        overflow: auto !important;
    }

    .editorMain {
        overflow: visible;
    }

    .previewPanel {
        min-height: 680px;
        margin-top: var(--space-4);
        padding: var(--space-4) 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .formGridThree,
    .localizedGrid,
    .rulesGrid {
        grid-template-columns: 1fr;
    }

    .settingRow {
        align-items: flex-start;
        flex-direction: column;
    }

    .timeRangeField {
        width: 100%;
        flex-basis: auto;
    }
}

@media (max-width: 620px) {
    .assetGrid {
        grid-template-columns: 1fr;
    }

    .giftEditorRow {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .giftEditorRow .rowMoveActions {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .editorSection,
    .phoneScreen {
        animation: none;
    }

    .giftEditorRow,
    .phoneTabs button,
    .previewLocale button,
    .rankRewardRow,
    .settingRow,
    .taskTableRow {
        transition: none;
    }
}
